/* Capa visual de Gummano. El juego, los tiempos, la puntuación y la red viven en index.html.
   Los tokens (color, tipografía, espacio, radios) se definen una sola vez en index.html; aquí solo se consumen. */

/* ---------------------------------------------------------------- controles */
button,summary,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;min-height:44px;padding:var(--s3) var(--s4);background:var(--surface-2);border:1px solid transparent;border-radius:var(--r2);font-weight:650;transition:background .15s,border-color .15s,transform .12s}
button.primary{background:var(--acc);color:var(--ink);font-weight:750}
button.secondary,button.option,.imgmodes button{background:var(--surface);border-color:var(--line)}
@media(hover:hover){
  button.primary:hover{background:var(--acc-hi)}
  button:not(.primary):not(.ghost):not(.link):hover{background:var(--surface-3)}
  button.link:hover{color:var(--acc-hi)}
}
button:active:not(:disabled){transform:scale(.985)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.field input:focus,.field select:focus{border-color:var(--acc);outline:none}
.v-icon{width:22px;height:22px;flex-shrink:0;vertical-align:middle}

/* ---------------------------------------------------------------- marca (logo aportado, recortado por CSS) */
.v-brand{display:inline-flex;align-items:center;gap:5px;height:36px;vertical-align:middle;pointer-events:none}
.v-brand-symbol,.v-brand-word{display:block;position:relative;overflow:hidden;flex:none}
.v-brand-symbol{width:31px;height:36px}
.v-brand-symbol img{position:absolute;width:64px;height:64px;max-width:none;left:-17px;top:-8px}
.v-brand-word{width:111px;height:21px}
.v-brand-word img{position:absolute;width:144px;height:144px;max-width:none;left:-16px;top:-99px}
.v-result-brand{position:absolute;top:calc(env(safe-area-inset-top) + 16px);left:0;right:0;display:flex;justify-content:center;z-index:2;background:none;border:0;padding:0;min-height:0;filter:drop-shadow(0 1px 8px #000c)}

/* ---------------------------------------------------------------- estructura */
#top{padding:calc(env(safe-area-inset-top) + 16px) var(--s5) var(--s3)}
#top .brand{font-size:var(--t4);letter-spacing:-.5px;pointer-events:auto;background:none;border:0;padding:4px;min-height:0;flex:0 0 auto;border-radius:var(--r1);filter:drop-shadow(0 1px 6px #000c)}
#top .brand:active{transform:scale(.97)}
#app:has(#panel[data-screen="intro"]),#app:has(#panel[data-screen="how"]),#app:has(#panel[data-screen="friends"]){background:radial-gradient(ellipse at 50% 28%,#12302c4d,transparent 62%),var(--bg)}
#app:has(#panel[data-screen="intro"]) #stage,#app:has(#panel[data-screen="how"]) #stage,#app:has(#panel[data-screen="friends"]) #stage{opacity:0}
#panel{border:1px solid var(--line);gap:var(--s4)}
#panel[data-screen="intro"],#panel[data-screen="how"],#panel[data-screen="friends"],#panel[data-screen="party"]{inset:calc(env(safe-area-inset-top) + 62px) 0 0;margin:auto;max-width:460px;max-height:none;border:0;border-radius:0;padding:var(--s4) var(--s5) calc(env(safe-area-inset-bottom) + var(--s4));background:transparent;backdrop-filter:none;overflow-y:auto}

/* ---------------------------------------------------------------- tipografía */
.v-eyebrow{font-size:var(--t1)!important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)!important}
.v-title{text-align:center}
#panel .v-title h1{font-size:clamp(28px,7.5vw,36px);font-weight:800;letter-spacing:-1.2px;line-height:1.1;margin:var(--s2) 0 var(--s3)}
#panel .v-title h2{font-size:clamp(26px,6.5vw,32px);font-weight:800;letter-spacing:-1px;line-height:1.12;margin:var(--s2) 0}
.v-title p{font-size:var(--t3);line-height:1.45;max-width:34ch;margin-inline:auto}
#panel p,.ov p{line-height:1.5}

/* ---------------------------------------------------------------- demostración */
.v-demo{position:relative;flex-shrink:0;border:1px solid var(--line);background:linear-gradient(160deg,var(--surface-2),var(--surface));border-radius:var(--r3);padding:var(--s3) var(--s4) var(--s2);overflow:hidden}
.v-demo-top{display:flex;justify-content:space-between;align-items:center;font-size:var(--t1);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.v-pause{min-height:32px;min-width:34px;flex:none;font-size:var(--t1);padding:var(--s1) var(--s2);border:1px solid var(--line);border-radius:var(--rp);background:transparent;color:var(--mut)}
.v-demo-score{display:flex;justify-content:center;align-items:center;height:64px;gap:var(--s2);color:var(--acc)}
.v-demo-score b{font-size:58px;line-height:1;font-weight:800;letter-spacing:-2.5px;font-variant-numeric:tabular-nums;transition:transform .15s}
.v-demo-score .v-demo-count{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--acc);font-size:var(--t4);font-weight:800;color:var(--acc)}
.v-demo-count:empty{visibility:hidden}
.v-hold .v-demo-count{background:var(--acc);color:var(--ink)}
.v-ring,.v-ring-bg{transition:stroke-dashoffset .12s linear,opacity .25s;opacity:0}
.v-calib .v-ring,.v-calib .v-ring-bg{opacity:1}
.v-calib .v-lines,.v-calib .v-tips{opacity:.3}
#panel .v-demo-label{text-align:center;font-size:var(--t2);font-weight:600;color:var(--acc);height:19px;line-height:19px;margin:var(--s1) 0 0}
.v-demo-svg{display:block;height:216px;width:100%}
.v-hero{border:0;background:transparent;padding:0;margin:calc(var(--s3) * -1) 0 calc(var(--s1) * -1)}
.v-hero .v-demo-svg{height:200px}
#panel .v-relative{text-align:center;font-size:var(--t1);color:var(--dim);margin:0}

/* ---------------------------------------------------------------- intro */
.v-quick{display:flex;gap:var(--s2);justify-content:center;align-items:center;font-size:var(--t1);color:var(--mut);flex-wrap:wrap}
.v-quick span{display:flex;align-items:center;gap:5px}
.v-quick .v-icon{width:14px;height:14px;color:var(--acc)}
.v-cta{display:flex;flex-direction:column;gap:var(--s2)}
.v-cta>button,#panel>.legal,#panel>label.consent{flex:0 0 auto}
.v-cta .primary{display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:50px;font-size:var(--t4)}
.v-cta .secondary{display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:46px;font-size:var(--t3)}
/* Portada: accesos como icono + etiqueta corta. Los iconos solos no se entienden aquí
   («tus partidas», «ciencia») y esta es la pantalla donde alguien decide si juega. */
.v-nav{display:flex;justify-content:center;gap:var(--s2)}
.v-nav button{position:relative;flex:1 1 0;max-width:96px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:var(--s2) var(--s1);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);color:var(--mut);font-weight:600}
.v-nav button .v-icon{width:20px;height:20px;color:var(--acc)}
.v-nav button span{font-size:var(--t1);line-height:1.1;text-align:center}
.v-nav button i{position:absolute;top:5px;right:7px;font-style:normal;font-size:10px;font-weight:700;min-width:16px;height:16px;padding:0 4px;border-radius:var(--rp);background:var(--acc);color:var(--ink);display:grid;place-items:center}
@media(hover:hover){.v-nav button:hover{border-color:var(--line-acc);color:var(--fg)}}
label.consent{align-items:center;font-size:var(--t1);line-height:1.45;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
label.consent input{accent-color:var(--acc);height:17px;width:17px;flex-shrink:0;margin:0 var(--s1) 0 0}
.v-id{display:inline-flex;flex:0 0 auto;align-items:center;gap:var(--s2);align-self:center;padding:5px var(--s3) 5px 5px;border-radius:var(--rp);border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;font-size:var(--t2);font-weight:650;min-height:40px;cursor:pointer}
.v-id:hover{border-color:var(--line-acc)}
.v-id .v-id-av{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--surface-2);font-size:17px}
.v-id .v-icon{width:14px;height:14px;color:var(--dim)}

/* ---------------------------------------------------------------- ayuda plegable */
.v-help{border:0;border-top:1px solid var(--line);padding-top:var(--s2);font-size:var(--t2);color:var(--mut)}
.v-help summary{cursor:pointer;list-style:none;color:var(--mut);font-weight:600;min-height:36px;display:flex;align-items:center;justify-content:center;gap:var(--s2)}
.v-help summary::-webkit-details-marker{display:none}
.v-help summary::after{content:'+';color:var(--acc);font-size:var(--t4);line-height:1}
.v-help[open] summary::after{content:'−'}
.v-help p{font-size:var(--t2);line-height:1.6;margin:var(--s2) 0!important}
.v-help .v-icon{width:16px;height:16px}

/* ---------------------------------------------------------------- fases de juego */
.v-phase{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s1)}
.v-phase>span{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r1);background:var(--acc-soft);color:var(--acc);font-size:var(--t1);font-weight:800;flex:none}
.v-phase h2{font-size:var(--t5)}
#panel[data-screen="calib"],#panel[data-screen="pose"]{padding:var(--s4) var(--s5) calc(env(safe-area-inset-bottom) + var(--s4));gap:var(--s2)}
#panel[data-screen="calib"]>p,#panel[data-screen="pose"]>p{font-size:var(--t2)}
#panel[data-screen="calib"] .hint:empty{display:none}
#live .count{font-size:clamp(85px,19vh,130px);line-height:1.05}
#live .score{font-size:44px;color:var(--acc);letter-spacing:-2px}

/* ---------------------------------------------------------------- tarjetas (amigos, info, opciones) */
.v-mode{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.v-mode-head{display:flex;align-items:center;gap:var(--s3)}
.v-mode-head>.v-icon{width:26px;height:26px;padding:7px;box-sizing:content-box;border-radius:var(--r1);background:var(--acc-softer);color:var(--acc)}
.v-mode-head b{display:block;font-size:var(--t4);font-weight:700}
.v-mode-head p{font-size:var(--t1);color:var(--mut)}
.v-mode .btns button{font-size:var(--t2)}
#panel .btns:has(.ghost){justify-content:center}
#panel button.ghost{font-size:var(--t2);font-weight:600;min-height:40px}
.v-info-item{border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);padding:var(--s3) var(--s4)}
.v-info-item summary{cursor:pointer;font-weight:650;font-size:var(--t3);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.v-info-item summary::-webkit-details-marker{display:none}
.v-info-item summary::after{content:'+';color:var(--acc);font-size:var(--t5);line-height:1;font-weight:400}
.v-info-item[open] summary::after{content:'−'}
.v-info-item p{font-size:var(--t2);margin-top:var(--s3)!important;line-height:1.65}
.v-options{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s4)}
.v-options code{font-size:var(--t1);overflow-wrap:anywhere}
.v-info-item .btns button{font-size:var(--t2)}
.v-empty{text-align:center;padding:36px var(--s4);color:var(--mut)}
.v-empty .v-icon{width:44px;height:44px;color:var(--acc);margin-bottom:var(--s3);opacity:.7}

/* ---------------------------------------------------------------- superposiciones y formularios */
.ov{background:radial-gradient(ellipse at top,#1227234d,transparent 50%),var(--bg)}
.ov .head{padding:calc(env(safe-area-inset-top) + 18px) var(--s5) var(--s4)}
.ov .head h2{font-size:25px;font-weight:800;letter-spacing:-.6px}
.ov .head .ghost{min-width:42px;padding:var(--s3)}
.ov .body{gap:var(--s4);padding-inline:var(--s5);scrollbar-width:thin}
.ov .foot{border-top:1px solid var(--line);background:var(--bg);padding-inline:var(--s5)}
.field{gap:6px;font-size:var(--t1);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:600}
.field input,.field select{min-height:46px;text-transform:none;letter-spacing:normal;font-weight:400}
#ro-body .grid2:has(#rc-mode){grid-template-columns:.75fr 1.25fr}
#rc-mode{font-size:var(--t2)}
.avatars{gap:var(--s2)}
.avatars button{min-height:44px;min-width:44px}
.imgmodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.imgmodes button{font-size:var(--t1);font-weight:650;text-align:center;align-items:center;justify-content:flex-start;padding:var(--s3) var(--s1);gap:6px}
.imgmodes button .v-icon{width:26px;height:26px;color:var(--acc)}
.imgmodes button small{font-size:10px;line-height:1.35}
.imgmodes button.sel{outline:none;border-color:var(--acc);background:var(--acc-softer)}
.tabs{scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{font-size:var(--t2);min-height:38px}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.stat div{border:1px solid var(--line)}
.stat b{color:var(--acc)}

/* ---------------------------------------------------------------- récords */
.v-sort{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.v-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--rp);overflow:hidden}
.v-seg button{min-height:0;padding:5px var(--s3);font-size:var(--t1);font-weight:600;border-radius:0;border:0;background:transparent;color:var(--mut);letter-spacing:normal;text-transform:none}
.v-seg button.sel{background:var(--acc-soft);color:var(--acc)}
.lb .rk small{font-weight:400;color:var(--dim);margin-left:4px}

/* ---------------------------------------------------------------- resultado */
#result .score{top:calc(env(safe-area-inset-top) + 66px)}   /* bajo la marca */
#result .score b{font-size:clamp(58px,10vh,82px);color:var(--acc);letter-spacing:-3px}
#result .photo{min-height:170px}
#result .foot{width:min(100%,420px);margin:0 auto;gap:var(--s2);padding:var(--s3) var(--s5) calc(env(safe-area-inset-bottom) + var(--s4));max-height:65dvh;overflow:auto}
#result .btns{gap:var(--s2)}
#result .btns button{font-size:var(--t2);line-height:20px;min-height:46px;padding:var(--s3)}
#result .btns:not(.v-challenge-row)>button{flex:1 1 0}
#result .links{display:flex;flex-wrap:wrap;gap:var(--s1);justify-content:center}
#result .links button{font-size:var(--t1);min-height:34px;padding:var(--s1) var(--s2)}
#result .dists{gap:6px;flex-wrap:wrap}
#result .dists>div{flex:1 1 40%;border:1px solid var(--line);border-radius:var(--r1);padding:var(--s2);font-size:var(--t1);background:var(--surface)}
#result .v-help{padding:0;border:0}
#result .v-help summary{font-size:var(--t2)}
/* Retar a un amigo es la acción viral: primero y como botón principal (PLAN.md, principio 1). */
#result .v-challenge-row{width:100%;margin:0}
#result .v-challenge::before{content:none}
#result .v-challenge{width:100%;min-height:50px;border-radius:var(--r2);font-size:var(--t4);font-weight:750}
#btn-again{display:flex;align-items:center;justify-content:center;gap:7px}
#btn-again::before{content:'↻';font-size:var(--t4);line-height:1}
#btn-friends{display:flex;align-items:center;justify-content:center;gap:7px}
#btn-friends .v-icon{width:18px;height:18px}
.v-result-rank{cursor:pointer;width:100%;font:inherit;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border:1px solid var(--line-acc);border-radius:var(--r2);background:linear-gradient(120deg,var(--acc-softer),var(--surface));color:var(--mut);font-size:var(--t1);min-height:54px;text-align:left}
.v-result-rank[hidden]{display:none}
.v-result-rank>.v-icon{width:22px;height:22px;color:var(--acc);flex:none}
.v-result-rank>div{flex:1}
.v-result-rank>.v-icon:last-child{width:16px;height:16px;color:var(--dim)}
.v-result-rank:hover{border-color:var(--acc)}
.v-result-rank b{display:block;color:var(--acc);font-size:var(--t5);line-height:1.2;letter-spacing:-.4px}
.v-result-rank span{display:block;font-size:var(--t1);margin-top:2px;font-variant-numeric:tabular-nums}
#result .v-id-hint{align-self:center;font-size:var(--t1);padding:2px var(--s2);min-height:0}
#result .v-id-hint[hidden]{display:none}

/* ---------------------------------------------------------------- aviso puntual (cámara en iOS) */
.v-tip{position:fixed;left:var(--s3);right:var(--s3);bottom:calc(env(safe-area-inset-bottom) + var(--s3));z-index:50;background:var(--surface);border:1px solid var(--line-acc);border-radius:var(--r2);padding:var(--s3) var(--s4);font-size:var(--t2);box-shadow:0 12px 32px #0009;max-width:460px;margin-inline:auto}
.v-tip>b{display:block;margin-bottom:var(--s1)}
.v-tip p{margin:0 0 var(--s2);color:var(--mut);line-height:1.55}
.v-tip p b{display:inline;color:var(--fg);font-weight:700}
.v-tip .btns{margin:0}
.v-privacy-line{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--dim);font-size:var(--t1)}
.v-privacy-line .v-icon{width:14px;height:14px}

/* ---------------------------------------------------------------- adaptaciones */
@media(min-width:700px){
  .ov .head,.ov .body,.ov .foot{width:min(100%,560px);margin:0 auto}
  .ov .photo{width:100%}
  #panel[data-screen="calib"],#panel[data-screen="pose"]{max-width:460px;margin:auto;border-radius:var(--r3) var(--r3) 0 0}
}
@media(max-height:740px){
  #panel[data-screen="intro"],#panel[data-screen="how"],#panel[data-screen="friends"]{padding-top:var(--s2);gap:var(--s3)}
  .v-hero .v-demo-svg{height:158px}
  .v-demo-svg{height:172px}
  #panel .v-title h1{font-size:28px}
  .v-demo-score{height:52px}
  .v-demo-score b{font-size:48px}
  .v-demo{padding:var(--s3)}
  .v-cta .primary{min-height:46px}
}
@media(prefers-reduced-motion:reduce){button,.v-demo-score b,.v-ring{transition:none}}

.badge:empty{display:none}
#live .sub{font-size:var(--t2)}

/* ---------------------------------------------------------------- temas
   La paleta vive en los tokens: un tema solo los redefine. Se cambia en Ajustes
   o con ?theme=lima / ?theme=turquesa, y queda guardado en este navegador. */
:root[data-theme="lima"]{
  --bg:#0b0d08; --surface:#151810; --surface-2:#1e2217; --surface-3:#282e1e;
  --line:#ffffff14; --line-acc:#c9f23f3d;
  --fg:#f1f5e9; --mut:#a3ad95; --dim:#87927a;
  --acc:#c9f23f; --acc-hi:#d8fa63; --ink:#101a06; --acc2:#f6c445; --acc-soft:#c9f23f26; --acc-softer:#c9f23f14;
}

/* El arte de la demostración toma el color del tema (los atributos del SVG ceden ante el CSS). */
.v-demo .v-tips circle{fill:var(--acc)}
.v-demo .v-tips circle:nth-child(2){stroke:var(--bg)}
.v-demo .v-tips circle:last-child{fill:var(--fg)}
.v-demo .v-lines{stroke:var(--acc)}
.v-demo radialGradient stop{stop-color:var(--acc)}   /* solo el halo: el degradado de la piel no se toca */
.v-demo .v-ring,.v-demo .v-ring-bg{stroke:var(--acc)}

.themes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.themes button{display:flex;align-items:center;gap:var(--s2);justify-content:flex-start;font-size:var(--t2);background:var(--surface);border:1px solid var(--line);text-transform:none;letter-spacing:normal}
.themes button span{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid #ffffff1f}
.themes .th-turquesa span{background:linear-gradient(135deg,#48d8c7,#0a0f12)}
.themes .th-lima span{background:linear-gradient(135deg,#c9f23f,#0b0d08)}
.themes button.sel{border-color:var(--acc);background:#ffffff0a}

/* Elección de tarjeta al enviar un reto: las dos tarjetas a la vista, un toque envía */
.v-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.v-card{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s2);font-size:var(--t2)}
.v-card img{height:min(170px,24dvh);aspect-ratio:4/5;object-fit:cover;border-radius:var(--r1);background:var(--surface)}
.v-card span{display:flex;align-items:center;gap:6px}
.v-card .v-icon{width:18px;height:18px}

/* Récords: dónde te contamos (ciudad/país) y tu fila cuando no estás en el top */
.v-loc{display:flex;align-items:center;gap:var(--s2);font-size:var(--t2);color:var(--mut);padding:var(--s1) 0}
.v-loc .v-icon{width:18px;height:18px;flex:none;color:var(--acc)}
.v-loc span{flex:1}
.v-loc small{color:var(--dim)}
.lb-gap{text-align:center;color:var(--dim);letter-spacing:.3em;padding:var(--s1) 0}

/* ---------------------------------------------------------------- menú de juegos (inicio) y récords por juego */
#panel>.v-games-h,#panel>.v-game-main,#panel>.v-games{flex:0 0 auto}
.v-games-h{margin:var(--s2) 0 0;font-size:var(--t1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-align:center}
.v-game-main{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3);border:1px solid var(--line-acc);border-radius:var(--r3);background:var(--surface)}
.v-game-txt{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.v-game-txt b{font-size:var(--t4);font-weight:800;color:var(--fg)}
.v-game-txt span{font-size:var(--t2);color:var(--mut);line-height:1.35}
.v-game-txt i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:var(--rp);background:var(--acc);color:var(--ink);vertical-align:3px;margin-left:4px}
.v-games{display:flex;flex-direction:column;gap:var(--s2)}
a.v-game{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border:1px solid var(--line-acc);border-radius:var(--r3);background:var(--surface);color:var(--fg);text-decoration:none}
a.v-game .v-game-txt{flex:1}
a.v-game .v-game-ic{flex:0 0 auto;font-size:24px;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r2);background:var(--surface-2)}
a.v-game>.v-icon{flex:0 0 auto;width:18px;height:18px;color:var(--acc)}
@media(hover:hover){a.v-game:hover{border-color:var(--line-acc)}}
.rc-games{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);margin-bottom:var(--s2)}   /* siete juegos: dos filas (4 + 3) */
.rc-games button{flex:1;min-height:40px;padding:var(--s2) var(--s1);font-size:var(--t2);border-radius:var(--rp);background:var(--surface);border:1px solid var(--line);color:var(--mut)}
.rc-games button.sel{background:var(--acc-soft);border-color:var(--line-acc);color:var(--fg)}