/* simka.cat look (design/admin-ux/index.html): cream page, ink outlines, hard offset shadows, orange + lime.
   simka.cat has no dark mode, so the page is deliberately light-only; every colour is set here. */
:root{--bg:#faf9f0;--fg:#1c1c1c;--muted:rgba(28,28,28,.72);--accent:#e8460b;--deep:#b53406;--card:#fff;--link:#b53406;--orange:#ff6a13;--lime:#c6d92b;--pink:#f28cb1;--cream:#faf9f0;
--display:"Luckiest Guy","Arial Black",Impact,sans-serif;--body:Fredoka,Nunito,system-ui,sans-serif;--ui:Nunito,system-ui,sans-serif;--hand:Caveat,"Comic Sans MS",cursive;--mono:ui-monospace,Menlo,Consolas,monospace;color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 var(--ui)}
header,main,footer{max-width:960px;margin:0 auto;padding:0 16px}
header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding-top:14px;padding-bottom:14px}
h1{margin:0;font:1.6rem/1 var(--display);text-transform:uppercase;padding-top:4px}
.badge{font:600 .72rem var(--mono);letter-spacing:.08em;padding:3px 8px;border-radius:6px;border:2px solid var(--fg);background:#fff;color:var(--fg)}
.account{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.account a{color:var(--fg);font:600 .95rem var(--body);text-decoration:none}
.account a:hover{text-decoration:underline}
.account .how{background:var(--fg);color:var(--cream);border-radius:999px;padding:8px 18px;min-height:44px;display:inline-flex;align-items:center}
.account .how:hover{text-decoration:none;box-shadow:3px 3px 0 var(--lime)}
.disclosure,.state,footer{color:var(--muted);font-size:.9rem}
a{color:var(--link)}
ul{padding-left:1.2rem}
h2{font-family:var(--display);font-weight:400}
#src-sec h2,.admin h2{text-transform:uppercase}
#src-sec h2{font-size:1.4rem;margin:24px 0 4px}
/* The stage: the player on an orange band, inside a dark screen frame. */
.stage{background:var(--orange);border-top:2px solid var(--fg);border-bottom:2px solid var(--fg);padding:20px 16px 26px}
.screen{max-width:960px;margin:0 auto;background:var(--fg);border:2px solid var(--fg);border-radius:18px;padding:8px;box-shadow:6px 6px 0 var(--fg);color:var(--cream)}
.player{position:relative;aspect-ratio:16/9;max-width:100%;background:#000;border-radius:10px;overflow:hidden}
video{width:100%;height:100%;display:block}
.status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:rgba(0,0,0,.8);color:#fff;font-size:1.1rem}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.tab{font:1rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em;min-height:44px;padding:10px 14px 8px;border:2px solid transparent;border-radius:999px;background:transparent;color:var(--cream);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tab:hover{border-color:rgba(250,249,240,.35)}
.tab[aria-selected=true]{background:var(--lime);color:var(--fg);border-color:var(--lime)}
.tab:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.dot{width:8px;height:8px;border-radius:50%;background:#888;flex:none}
.dot.live{background:#ff4d4d}.dot.replay{background:#f1c21b}
.info{padding:10px 6px 2px}
.info h2{margin:4px 0 0;font-size:1.4rem;line-height:1.1}
.info p{margin:4px 0;font-family:var(--body)}
.screen .state{color:rgba(250,249,240,.7)}
.screen .badge{background:transparent;color:var(--cream);border-color:rgba(250,249,240,.45);border-width:1px}
.badge.small{font-size:.65rem;vertical-align:middle;padding:1px 6px}
.variants{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 6px 0;font-size:.95rem}
.variants .tabs{margin:0}
.variants .tab{min-height:36px;padding:4px 14px;font:600 .9rem var(--body);text-transform:none;border-color:rgba(250,249,240,.35)}
.variants .tab[aria-pressed=true]{background:var(--lime);color:var(--fg);border-color:var(--lime)}
.variants select{font:inherit;min-height:36px;max-width:100%;padding:4px 8px;border:2px solid var(--cream);border-radius:8px;background:var(--fg);color:var(--cream)}
.variants a{color:var(--lime)}
.variants .state{margin:0}

/* Click-to-watch: nothing plays until the viewer taps; that tap starts the stream with sound. */
.watch{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:16px;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font:inherit;color:#fff;background:radial-gradient(circle at 50% 45%,#2a2a2a,#000 75%);font-family:var(--body)}
.watch[hidden]{display:none}
.watch .live{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(28,28,28,.7);padding:3px 8px;border-radius:6px;font:600 .75rem var(--mono);letter-spacing:.08em}
.live-dot{width:9px;height:9px;border-radius:50%;background:#e5383b}
.watch .play{width:96px;height:96px;border-radius:50%;background:var(--lime);color:var(--fg);border:3px solid var(--fg);display:flex;align-items:center;justify-content:center;box-shadow:5px 5px 0 var(--fg);transition:transform .15s}
.watch .play svg{margin-left:5px}
.watch:hover .play,.watch:focus-visible .play{transform:scale(1.08)}
.watch:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}
.watch-text{font:1.1rem/1 var(--display);text-transform:uppercase;background:var(--lime);color:var(--fg);border:2px solid var(--fg);border-radius:999px;padding:9px 16px 6px;box-shadow:3px 3px 0 var(--fg)}
@media (prefers-reduced-motion:reduce){.watch .play{transition:none}}
@media (max-width:480px){.watch .play{width:72px;height:72px}}

/* Phones (<640px): the pill grid becomes one native <select> plus a text status (WCAG 1.4.1: not colour alone). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dot.off{background:#888}
.picker{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:0 4px}
.picker select{flex:1;min-width:0;min-height:48px;padding:8px 36px 6px 12px;font:1rem/1.1 var(--display);text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.02em;color:var(--fg);background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231c1c1c' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;border:2px solid var(--lime);border-radius:999px;-webkit-appearance:none;appearance:none;cursor:pointer}
.picker select:focus-visible{outline:3px solid var(--cream);outline-offset:2px}
@media (max-width:639.98px){.screen .tabs{display:none}}
@media (min-width:640px){.picker{display:none!important}}