:root{--green:#173f35;--cream:#faf7ef;--yellow:#f3cf58;--red:#a53232;--muted:#52685d;--line:#cbd0c3;--display:'Barlow Condensed',sans-serif;--body:'Source Sans 3',sans-serif;--radius:8px}*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:var(--green) var(--cream)}body{margin:0;background:var(--cream);color:var(--green);font-family:var(--body);font-size:18px;line-height:1.5}::selection{background:var(--yellow);color:var(--green)}button,input,textarea{font:inherit}button{cursor:pointer;border:0;font-weight:700;min-height:48px;transition:background .15s,color .15s}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #a87700;outline-offset:4px}header{background:var(--green);color:var(--cream);padding:14px max(4vw,24px);display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:block;flex-shrink:0;line-height:0}.brand img{display:block;width:260px;height:auto}nav{display:flex;gap:24px;align-items:center}nav button{color:var(--cream);background:transparent;font-size:16px;padding:10px 0;border-bottom:2px solid transparent}nav button:hover{color:var(--yellow)}nav button.selected{border-bottom-color:var(--yellow);color:var(--yellow)}main{max-width:1120px;margin:auto;padding:40px 32px 0}.intro{text-align:center;padding-bottom:32px}h1{font:800 clamp(44px,5vw,66px)/1.04 var(--display);letter-spacing:-.02em;margin:0 0 16px}h1 span{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:5px;text-underline-offset:8px}.intro p{margin:0;font-size:20px}.game-meta{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;font-size:15px;color:var(--muted)}.game-meta>span:first-child{font-weight:700;color:var(--green)}.game-meta i{font-style:normal;margin:0 7px}.game{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:64px;padding:32px 0}.board{width:100%;max-width:430px;aspect-ratio:1;position:relative;margin:auto}.rosco{position:absolute;inset:0}.disc{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;display:grid;place-items:center;border:1.5px solid var(--green);border-radius:50%;font:700 22px var(--display);background:var(--cream)}.disc.active{background:var(--yellow);border:2px solid var(--green);outline:3px solid var(--cream);box-shadow:0 0 0 4px var(--green)}.disc.correct{background:var(--green);color:var(--cream)}.disc.wrong{background:var(--red);border-color:var(--red);color:var(--cream)}.disc.passed{border-style:dashed}.disc.correct::after,.disc.wrong::after{content:'';position:absolute;right:-3px;bottom:-1px;width:11px;height:11px;background:var(--cream);border:1px solid var(--green);border-radius:50%}.disc.correct::before{content:'';position:absolute;right:0;bottom:3px;width:5px;height:3px;border-left:1.5px solid var(--green);border-bottom:1.5px solid var(--green);transform:rotate(-45deg);z-index:1}.disc.wrong::after{border-color:var(--red);background:var(--cream) linear-gradient(45deg,transparent 44%,var(--red) 45% 55%,transparent 56%)}.clock{position:absolute;inset:28% 20%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.clock strong{font:800 76px/1.15 var(--display);font-variant-numeric:tabular-nums}.clock span{font-size:12px;font-weight:600;letter-spacing:.08em}.clock .clock-label{color:var(--muted);margin-bottom:8px}.clock p{margin:8px 0 0;font-size:13px;color:var(--red);font-weight:700}.clock.urgent strong{color:var(--red)}.question{min-width:0}.letterline{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:700}.letterline strong{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);font:800 32px var(--display)}h2{font:700 34px/1.2 var(--display);margin:20px 0 24px;letter-spacing:-.01em;text-wrap:balance}#welcome{color:var(--muted);font-size:18px;line-height:1.6;margin:0 0 24px}label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}input,textarea{width:100%;color:var(--green);caret-color:var(--green);background:#fffdf7;border:1px solid #819285;border-radius:var(--radius);padding:14px 16px;font-size:19px;min-height:54px}input::placeholder{color:var(--muted)}.actions{display:flex;gap:12px;margin-top:16px}.actions button{flex:1}.primary,.secondary{padding:13px 22px;border-radius:var(--radius)}.primary{background:var(--green);color:var(--cream)}.primary:hover{background:#235847}.secondary{background:var(--yellow);color:var(--green)}.secondary:hover{background:#e4bc3e}.start{width:100%}.keyboard-hint{font-size:13px;color:var(--muted);margin:10px 0 0}#feedback{min-height:28px;margin:16px 0 0;font-size:16px;font-weight:600}.score{display:flex;align-items:center;justify-content:center;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.score>span:not(.score-icon){display:flex;align-items:center;gap:10px;padding:0 28px;font-size:12px;font-weight:600;letter-spacing:.04em}.score>span+span:not(.score-icon){border-left:1px solid var(--line)}.score>.score-icon+span{border-left:0;padding-left:8px}.score b{font:700 30px var(--display);font-variant-numeric:tabular-nums}.score svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}.score-symbol{color:var(--red)}.score-icon{display:flex}.plain{background:none;color:var(--green);padding:12px 8px;text-decoration:underline;text-underline-offset:4px}#result>.secondary{width:100%}#result>.plain{width:100%;margin-top:6px}details{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}summary{cursor:pointer;font-weight:600;padding:6px 0}#answers{max-height:320px;overflow:auto;margin-top:12px}#answers p{display:grid;grid-template-columns:28px 1fr auto;gap:12px;font-size:15px;margin:0;padding:10px 0;border-bottom:1px solid var(--line)}#answers .answer-state{color:var(--muted);font-size:13px}.info{min-height:400px;max-width:740px;margin:36px auto;line-height:1.65}.info h2{font-size:40px;margin-top:0}.info ol{padding-left:24px}.info li{margin:16px 0}.info .empty-ranking{padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}footer{display:flex;justify-content:space-between;gap:16px;padding:24px 0;font-size:13px;color:var(--muted)}.playing .intro{padding-bottom:16px}.playing h1{font-size:34px}.playing h1 br{display:none}.playing .intro p{font-size:16px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(max-width:760px),(max-width:1024px) and (hover:none){header{padding:12px 20px;flex-direction:column;gap:6px}.brand img{width:220px}nav{width:100%;justify-content:center;gap:28px}nav button{font-size:14px;min-height:42px;padding:8px 0}main{padding:26px 20px 0}.intro{padding-bottom:24px}h1{font-size:46px}.intro p{font-size:17px;max-width:320px;margin:auto}.game-meta{font-size:13px;flex-wrap:wrap;gap:3px}.game{grid-template-columns:1fr;gap:20px;padding:24px 0}.board{max-width:320px}.disc{width:29px;height:29px;font-size:18px}.clock strong{font-size:62px}.clock span{font-size:11px}.clock .clock-label{margin-bottom:4px}h2{font-size:29px;margin:16px 0 20px}.letterline strong{width:42px;height:42px;font-size:28px}.question{max-width:520px;width:100%;margin:auto}.score>span:not(.score-icon){padding:0 12px;gap:6px;font-size:11px}.score b{font-size:27px}.score svg{width:14px;height:14px}.score>.score-icon+span{padding-left:5px}.playing .intro{display:none}.playing main{padding-top:14px}.playing .game{gap:14px;padding-top:16px}.playing .board{max-width:280px}.playing .disc{width:25px;height:25px;font-size:16px}.playing .clock strong{font-size:52px}.keyboard-hint{display:none}footer{flex-direction:column;gap:5px}.info{margin-top:28px;min-height:360px}#answers p{font-size:14px;gap:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}}

.disc{width:8%;height:auto;aspect-ratio:1}@media(max-width:760px),(max-width:1024px) and (hover:none){.disc{width:9%;height:auto}.playing .disc{width:9%;height:auto}}

/* La letra activa crece para señalar el siguiente turno, sin animación continua. */

.disc{transition:transform 220ms cubic-bezier(.16,1,.3,1),background-color 180ms,color 180ms,border-color 180ms}.disc.active{transform:translate(-50%,-50%) scale(1.12);z-index:2}.disc.correct,.disc.wrong{transform:translate(-50%,-50%) scale(.98)}

kbd{font-family:var(--body);font-size:12px;font-weight:700;border:1px solid #819285;border-radius:4px;padding:1px 5px;background:#fffdf7}.keyboard-hint span{margin:0 5px}.rank-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.rank-heading h2{margin-bottom:8px}.demo-badge{background:var(--yellow);font-size:12px;font-weight:700;padding:5px 10px;border-radius:4px;letter-spacing:.04em;white-space:nowrap}.rank-date{margin:0 0 20px;font-size:15px;color:var(--muted)}.demo-note{margin:0 0 28px;font-size:16px;line-height:1.6;max-width:65ch}.ranking-table-wrap{width:100%}.ranking-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.ranking-table thead{background:var(--green);color:var(--cream)}.ranking-table thead th{font-size:12px;font-weight:600;letter-spacing:.04em;text-align:left;padding:14px 16px}.ranking-table td,.ranking-table tbody th{padding:17px 16px;border-bottom:1px solid var(--line);text-align:left}.rank-person{font-size:17px;font-weight:600}.rank-person small{display:block;font-size:12px;font-weight:400;margin-top:3px}.rank-position{width:72px;font:700 26px var(--display);color:var(--muted)}.ranking-table tbody tr:nth-child(-n+3) .rank-position{color:var(--green)}.ranking-table tbody tr:first-child .rank-position{background:var(--yellow)}.rank-score{font-weight:700;white-space:nowrap}.rank-time{color:var(--muted);white-space:nowrap}.ranking-table thead th:nth-child(n+3),.ranking-table td:nth-child(n+3){text-align:right}.ranking-table .personal-row{background:#efe4b6}.personal-summary{padding:16px 18px;background:var(--green);color:var(--cream);font-size:16px;margin-bottom:24px;border-radius:8px}.ranking-rule,.rank-footer{font-size:14px;color:var(--muted);margin:18px 0 0}.rank-footer{margin-top:8px}.info:has(.ranking-table){max-width:840px}#result>.plain{display:block;width:100%}@media(max-width:760px),(max-width:1024px) and (hover:none){.rank-heading{align-items:flex-start}.rank-heading h2{font-size:34px}.demo-badge{font-size:11px;margin-top:6px;padding:4px 7px}.ranking-table thead th{font-size:11px;padding:12px 7px}.ranking-table td,.ranking-table tbody th{padding:14px 7px}.rank-position{width:45px;font-size:23px}.rank-person{font-size:14px;line-height:1.35;max-width:150px}.rank-score,.rank-time{font-size:14px}.demo-note{font-size:15px}.rank-date{font-size:14px}}@media(prefers-reduced-motion:reduce){.disc{transition:background-color 120ms,color 120ms}.disc.active{transform:translate(-50%,-50%)}}

.playing h1 span{margin-left:.2em}



/* El texto cambia dentro de espacios reservados; el tablero no se desplaza. */

html{scrollbar-gutter:stable}.playing .game{align-items:start;min-height:430px}.playing .question{padding-top:12px}.playing #clue{height:168px;overflow:auto;flex-shrink:0;text-wrap:initial}.playing #feedback{height:48px;overflow:auto}.playing .board{align-self:start}.playing .question .letterline{height:48px}@media(max-width:760px),(max-width:1024px) and (hover:none){.playing .game{min-height:0;gap:14px}.playing .question{padding-top:0}.playing #clue{height:176px;font-size:29px}.playing .question .letterline{height:42px}}

html:has(body.playing){scroll-behavior:auto}

/* Partida móvil: tira de letras y controles siempre sobre el teclado. */

.mobile-bar{display:none}#countdown{position:fixed;z-index:20;left:50%;top:38%;transform:translate(-50%,-50%);text-align:center;padding:20px 32px;background:var(--cream);border-radius:12px;box-shadow:0 12px 48px #0000001f;pointer-events:none}#countdown strong{display:block;font:800 80px/1 var(--display);color:var(--green)}#countdown span{display:block;font-size:16px;margin-top:8px}.mobile-bar .urgent{color:var(--red)}

@media(max-width:760px),(max-width:1024px) and (hover:none){

 input#answer{min-height:44px;height:44px;padding:8px 12px;font-size:17px}

 html:has(body.mobile-session){overflow:hidden;scrollbar-gutter:auto}body.mobile-session{overflow:hidden}

 .mobile-session header,.mobile-session footer,.mobile-session .intro,.mobile-session #game-meta{display:none!important}

 .mobile-session main{position:fixed;inset:auto 0 auto 0;top:var(--visible-top,0px);height:var(--visible-height,100dvh);max-width:none;margin:0;padding:8px 14px max(8px,env(safe-area-inset-bottom));display:grid;grid-template-rows:30px 54px minmax(0,1fr) 26px;gap:8px;overflow:hidden;background:var(--cream)}

 .mobile-session .mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;grid-row:1;border-bottom:1px solid var(--line);padding-bottom:4px;font-size:12px}

 .mobile-session .mobile-bar strong{font:700 27px/1 var(--display);font-variant-numeric:tabular-nums}

 .mobile-session .mobile-bar button{font-size:13px;min-height:30px;padding:3px 8px;background:none;color:var(--green)}

 .mobile-session .game{display:contents;min-height:0;padding:0}

 .mobile-session .board{grid-row:2;max-width:none;width:100%;height:54px;aspect-ratio:auto;align-self:stretch;overflow:hidden;position:relative}

 .mobile-session.preparing .board{overflow:visible}

 .mobile-session .rosco{inset:0}

 .mobile-session .disc{width:30px;height:30px;aspect-ratio:1;left:calc(24% + var(--slot)*38px)!important;top:50%!important;font-size:20px;transition:left 240ms cubic-bezier(.16,1,.3,1),transform 200ms cubic-bezier(.16,1,.3,1),background-color 150ms,border-color 150ms}

 .mobile-session .clock{display:none}

 .mobile-session .question{grid-row:3;width:100%;max-width:none;min-height:0;display:grid;grid-template-rows:26px minmax(0,1fr) 100px 20px;gap:6px;align-self:stretch;padding:0;overflow:hidden}

 .mobile-session .letterline,.mobile-session .question .letterline{height:26px;gap:10px;font-size:12px}

 .mobile-session .letterline strong{width:26px;height:26px;font-size:20px}

 .mobile-session #clue{height:auto;min-height:0;margin:0;overflow:auto;font-size:clamp(22px,6vw,27px);line-height:1.18;align-self:stretch;padding:2px 0;text-wrap:initial}

 .mobile-session #form{display:grid;grid-template-rows:44px 44px;gap:8px;min-height:0;align-content:end}

 .mobile-session #form label,.mobile-session .keyboard-hint{display:none}

 .mobile-session .actions{margin:0;gap:10px}

 .mobile-session .actions button{min-height:44px;height:44px;padding:8px 12px;font-size:16px}

 .mobile-session #feedback{height:20px;min-height:0;margin:0;font-size:12px;line-height:20px;white-space:nowrap;overflow:auto}

 .mobile-session .score{grid-row:4;padding:0;border-bottom:0;min-height:26px}

 .mobile-session .score>span:not(.score-icon){font-size:10px;padding:0 10px;gap:5px}.mobile-session .score b{font-size:22px}.mobile-session .score svg{width:12px;height:12px}

 .mobile-session.preparing .question,.mobile-session.preparing .score{visibility:hidden}

 .mobile-session #countdown{top:calc(var(--visible-top,0px) + var(--visible-height,100dvh)*.45)}

}

@media(prefers-reduced-motion:reduce){.mobile-session .disc{transition:background-color 120ms,border-color 120ms}}



@media(max-width:760px),(max-width:1024px) and (hover:none){.mobile-session .question{margin:0}.mobile-session .score>span:not(.score-icon){font-size:11px;padding:0 8px}}

@media(max-width:760px),(max-width:1024px) and (hover:none){

 .mobile-session main{grid-template-columns:minmax(0,1fr);grid-template-rows:28px 42px minmax(0,1fr) 22px;gap:4px}

 .mobile-session .board{height:42px}

 .mobile-session .question{grid-template-rows:24px minmax(0,1fr) 96px 18px;gap:4px}

 .mobile-session .letterline,.mobile-session .question .letterline{height:24px}

 .mobile-session .letterline strong{width:24px;height:24px;font-size:18px}

 .mobile-session #clue{font-size:clamp(20px,6vw,26px)}

 .mobile-session #form{grid-template-rows:44px 44px;gap:8px}

 .mobile-session #feedback{height:18px;line-height:18px}

 .mobile-session .score{min-height:22px;min-width:0}

 .mobile-session .score>span:not(.score-icon){padding:0 5px;gap:4px;letter-spacing:0}.mobile-session .score b{font-size:20px}

}



/* Inicio compacto y acceso de demostración */

header{padding:10px max(4vw,24px);gap:24px}.brand img{width:220px}nav{gap:22px}

#account{border:1px solid #879e89;border-radius:6px;padding:8px 14px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:90px}

.intro,.playing .intro{padding-bottom:24px}.intro h1,.playing .intro h1{font-size:clamp(44px,5vw,60px)}.playing h1 br{display:block}.playing h1 span{margin-left:0}.intro p,.playing .intro p{font-size:18px}

body.preparing .clock{visibility:hidden}

body:not(.playing) .question .letterline{display:none}body:not(.playing) #clue{height:auto;margin:0 0 12px;font-size:40px}body:not(.playing) #feedback:empty{display:none}

#start{background:var(--yellow);color:var(--green);font-size:19px}#start:hover{background:#e4bc3e}

dialog{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:12px;background:var(--cream);color:var(--green);padding:28px}dialog::backdrop{background:#10271dcc}dialog h2{margin:12px 0;font-size:36px}dialog p{font-size:16px;color:var(--muted)}.dialog-close{display:block;margin-left:auto;min-height:44px;padding:4px 8px;font-size:14px}dialog .primary{width:100%;margin-top:12px}.identity-note{font-size:13px!important;margin:8px 0}#identity-logout{width:100%}

@media(max-width:760px),(max-width:1024px) and (hover:none){

 header{display:grid;grid-template-columns:minmax(0,1fr);padding:8px 16px 0;gap:0}.brand{justify-self:center}.brand img{width:154px;height:auto}

 nav{gap:0;width:100%;justify-content:space-between}nav button{min-height:44px;font-size:13px;padding:6px 4px}#account{font-size:13px;min-width:72px;max-width:98px;padding:4px 8px;min-height:36px}

 main{padding:22px 18px 0}.intro{padding-bottom:18px}.intro h1{font-size:42px;margin-bottom:12px}.intro p{font-size:16px;max-width:28ch}

 .game-meta{font-size:12px;padding:8px 0;flex-wrap:nowrap;gap:8px}.game-meta i{margin:0 3px}

 body:not(.playing) .game{gap:20px;padding:20px 0}body:not(.playing) .question{grid-row:1}body:not(.playing) .board{grid-row:2;max-width:250px}

 body:not(.playing) #clue{font-size:28px;margin-bottom:8px}body:not(.playing) #welcome{font-size:16px;margin-bottom:16px;line-height:1.4}

 .playing .intro{display:none}

}



body{overflow-anchor:none}

@media(max-width:760px),(max-width:1024px) and (hover:none){

 body:not(.playing) #clue{display:none}body:not(.playing) .intro h1{font-size:38px}.score>span:not(.score-icon){padding:0 7px;gap:4px;font-size:10px;letter-spacing:0}.score b{font-size:24px}

}



/* Home, perfil y resultados: versión pública */

#account{position:relative;min-width:44px;max-width:44px;width:44px;height:44px;min-height:44px;padding:10px;border:0;background:transparent}#account svg,.dialog-close svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none}.profile-dot{position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--yellow)}

#level-picker{padding:0;border:0;margin:0 0 16px;min-width:0}#level-picker legend{font-size:14px;font-weight:600;margin-bottom:8px}.level-options{display:flex;gap:8px}.level-options label,.rank-levels button{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:6px;padding:10px 8px;font-size:16px;cursor:pointer;margin:0;min-height:44px}.level-options small{font-size:12px;font-weight:400}.level-options label:has(:checked),.rank-levels button[aria-pressed="true"]{background:var(--green);color:var(--cream);border-color:var(--green)}.level-options input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0}.level-options label:has(:focus-visible){outline:2px solid #a87700;outline-offset:2px}.rank-levels{margin:24px 0}.rank-levels button{background:none;color:var(--green)}

body:not(.playing):not(.finished) .score{display:none}body:not(.playing):not(.finished) #welcome{font-size:15px;line-height:1.4;margin:12px 0 0}body:not(.playing):not(.finished) .question{display:flex;flex-direction:column}

.finished .intro{display:none}.finished .game{min-height:0;align-items:center}.finished .question{padding:0}.finished #clue{display:block!important;height:auto!important;min-height:0;margin:16px 0;font-size:34px!important}.finished #feedback{height:auto;min-height:0;margin:0 0 16px;font-size:15px}.finished .letterline{display:flex!important}.finished #result{display:grid;grid-template-columns:1fr 1fr;gap:8px}.finished #result button{font-size:15px;min-height:44px;padding:8px 12px;margin:0;border-radius:6px;text-decoration:none}.finished #retry{background:var(--green);color:var(--cream)}.finished #share{grid-column:1 / -1}.finished #result details{grid-column:1 / -1;margin-top:8px;padding-top:8px}

dialog{padding:24px;border-radius:12px}dialog h2{font-size:32px;margin:0 0 8px;padding-right:30px}dialog p{font-size:15px;line-height:1.5;margin:0 0 20px}.dialog-close{position:absolute;right:12px;top:12px;width:44px;height:44px;min-height:44px;padding:10px;text-decoration:none}.dialog-close:focus-visible{outline-offset:-4px;border-radius:6px}dialog input{font-size:16px;min-height:44px;height:44px;padding:10px 12px}dialog .primary{min-height:44px;padding:10px 16px;margin-top:16px;font-size:16px}.identity-note{margin:6px 0 0!important;font-size:12px!important}#identity-status{overflow-wrap:anywhere;padding-top:8px}

input:focus{outline:none;border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}

@media(max-width:760px),(max-width:1024px) and (hover:none){

 html{scrollbar-gutter:auto}header{padding:6px 14px 0}.brand img{width:132px}nav button{font-size:13px}#account{width:44px;max-width:44px;min-width:44px;min-height:44px;padding:10px}

 body:not(.playing):not(.finished) main{padding:12px 16px 0}body:not(.playing):not(.finished) .intro{padding-bottom:8px}body:not(.playing):not(.finished) .intro h1{font-size:34px;margin:0 0 10px}body:not(.playing):not(.finished) .intro p{font-size:13px;white-space:nowrap;max-width:none}

 body:not(.playing):not(.finished) .game{padding:8px 0;gap:10px}body:not(.playing):not(.finished) .board{grid-row:1;max-width:clamp(150px,28svh,220px)}body:not(.playing):not(.finished) .question{grid-row:2;max-width:380px}

 body:not(.playing):not(.finished) .clock strong{font-size:48px}.clock span{font-size:10px}body:not(.playing):not(.finished) #welcome{font-size:12px;max-width:32ch;align-self:center;text-align:center;margin-top:8px}

 #level-picker{margin:0 0 10px}#level-picker legend{font-size:12px;margin-bottom:5px}.level-options{gap:6px}.level-options label{padding:6px;gap:4px;font-size:14px;min-height:44px}.level-options small{font-size:11px}#start{min-height:44px;padding:10px 14px;font-size:16px}body:not(.playing):not(.finished) footer{font-size:11px;text-align:center;display:block;padding:14px 0}

 .mobile-session main{padding:6px 12px max(6px,env(safe-area-inset-bottom));grid-template-rows:32px 42px minmax(0,1fr) 22px;gap:4px}

 .mobile-session .mobile-bar{padding:0;border:0;gap:8px}.mobile-bar img{width:100px;height:auto;filter:brightness(0) saturate(100%) invert(19%) sepia(22%) saturate(900%) hue-rotate(108deg) brightness(91%) contrast(89%)}.mobile-session .mobile-bar strong{font-size:26px}#mobile-level{font-size:12px;font-weight:600;width:60px;text-align:right}

 .mobile-session .board{margin-left:-12px;width:calc(100% + 24px);height:42px;overflow:hidden}.mobile-session.preparing .board{overflow:hidden}.mobile-session .question{overflow:visible;grid-template-rows:24px minmax(0,1fr) 94px 18px;gap:4px}.mobile-session #clue{font-size:clamp(20px,5.7vw,25px)}.mobile-session #form{grid-template-rows:44px 44px;gap:6px}.mobile-session #answer{font-size:16px;height:44px;min-height:44px;padding:8px 10px}.mobile-session .actions{gap:8px}.mobile-session .actions button{height:44px;min-height:44px;padding:6px 10px;font-size:15px}

 .finished main{padding:16px 16px 0}.finished .game{gap:16px;padding:8px 0}.finished .board{max-width:200px;grid-row:1}.finished .question{grid-row:2;max-width:420px}.finished .clock strong{font-size:44px}.finished .question .letterline{height:30px;font-size:12px}.finished .letterline strong{width:30px;height:30px;font-size:21px}.finished #clue{font-size:29px!important;margin:12px 0}.finished .score{padding:12px 0;margin-top:8px}.finished footer{padding:16px 0}.finished #answers{max-height:240px}

}

@media(max-width:760px) and (max-height:600px){body:not(.playing):not(.finished) .intro h1{font-size:29px}body:not(.playing):not(.finished) .board{max-width:150px}body:not(.playing):not(.finished) .clock strong{font-size:36px}body:not(.playing):not(.finished) .clock-label{display:none}body:not(.playing):not(.finished) .game{gap:6px}}



.mobile-bar img{filter:none;background:var(--green);border-radius:3px}

.ranking-table td:nth-child(2){overflow-wrap:anywhere;max-width:150px}

@media(max-width:760px),(max-width:1024px) and (hover:none){body.finished .board{grid-row:1;max-width:190px}body.finished .question{grid-row:2}body.finished .game{gap:14px;padding:4px 0}body.finished #clue{font-size:28px!important}}

@media(max-width:760px) and (max-height:520px){body:not(.playing):not(.finished) .board{max-width:128px}body:not(.playing):not(.finished) .intro h1{font-size:26px}body:not(.playing):not(.finished) main{padding-top:8px}body:not(.playing):not(.finished) .clock strong{font-size:32px}body:not(.playing):not(.finished) .clock span{font-size:8px}}



@media(max-width:760px) and (max-height:520px){body:not(.playing):not(.finished) .board{max-width:116px}body:not(.playing):not(.finished) .intro h1{font-size:24px}body:not(.playing):not(.finished) main{padding-top:4px}}



/* Un solo comienzo: preparar, tomar carrera y rematar. */

#countdown{position:absolute;inset:18%;width:auto;height:auto;transform:none;padding:0;background:transparent;box-shadow:none;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;isolation:isolate}

#countdown strong{position:relative;z-index:2;font-size:96px;line-height:1;margin-top:4px;font-variant-numeric:tabular-nums}

#countdown .countdown-caption{position:absolute;bottom:0;font-size:13px;margin:0;z-index:2;background:var(--cream);padding:2px 8px}

.kickoff-scene{position:absolute;inset:30px 0 12px;width:100%;height:calc(100% - 42px);overflow:hidden}

.launch-ball{display:none}

.preparing .scene-camera{transform-origin:182px 179px;animation:camera-pullback 3700ms cubic-bezier(.16,1,.3,1) both}

.preparing .kicker{animation:kicker-run 3700ms linear both;transform-origin:85px 166px}

.preparing .kicker-upper{transform-origin:88px 150px;animation:kicker-lean 3700ms linear both}

.preparing .plant-leg{transform-origin:76px 162px;animation:plant-stride 3700ms linear both}

.preparing .shoot-leg{transform-origin:93px 163px;animation:shoot-stride 3700ms linear both}

.preparing .close-hand{animation:hand-release 3700ms ease-out both}

.preparing .shot-ball{transform-origin:182px 179px;animation:ball-to-corner 3700ms linear both}

.preparing .shot-trail{animation:shot-trail 3700ms linear both}

.preparing .ball-shadow{animation:ball-shadow 3700ms linear both}

.preparing .goal-flash{animation:goal-flash 3700ms linear both}

#countdown.shooting strong,#countdown.shooting .countdown-caption{visibility:hidden}

@keyframes camera-pullback{0%,18%{transform:translate(-16px,-18px) scale(2.9)}43%,100%{transform:translate(0,0) scale(1)}}

@keyframes hand-release{0%,18%{opacity:1;transform:translate(0,0)}26%{opacity:1;transform:translate(-5px,-16px)}35%,100%{opacity:0;transform:translate(-20px,-30px)}}

@keyframes kicker-run{0%,32%{opacity:0;transform:translate(-14px,0)}40%{opacity:1;transform:translate(-14px,0)}52%{transform:translate(8px,-3px)}64%{transform:translate(34px,0)}74%{transform:translate(60px,-3px)}81%,100%{opacity:1;transform:translate(66px,0)}}

@keyframes kicker-lean{0%,36%{transform:rotate(0)}54%{transform:rotate(8deg)}73%{transform:rotate(14deg)}85%,100%{transform:rotate(5deg)}}

@keyframes plant-stride{0%,38%{transform:rotate(-20deg)}48%{transform:rotate(20deg)}58%{transform:rotate(-20deg)}68%{transform:rotate(20deg)}78%,100%{transform:rotate(-10deg)}}

@keyframes shoot-stride{0%,38%{transform:rotate(20deg)}48%{transform:rotate(-25deg)}58%{transform:rotate(20deg)}68%{transform:rotate(-25deg)}77%{transform:rotate(55deg)}82%,100%{transform:rotate(-65deg)}}

@keyframes ball-to-corner{0%,81%{transform:translate(0,0) rotate(0) scale(1)}86%{transform:translate(34px,-42px) rotate(100deg) scale(.8)}92%{transform:translate(68px,-78px) rotate(200deg) scale(.6)}97%,100%{transform:translate(94px,-95px) rotate(280deg) scale(.45)}}

@keyframes shot-trail{0%,81%{opacity:0}86%,95%{opacity:1}100%{opacity:0}}

@keyframes ball-shadow{0%,81%{opacity:1}87%,100%{opacity:0}}

@keyframes goal-flash{0%,93%{opacity:0}97%{opacity:1}100%{opacity:0}}

@media(max-width:760px),(max-width:1024px) and (hover:none){

 body:not(.playing):not(.finished) main{padding-top:18px}

 body:not(.playing):not(.finished) .intro{padding-bottom:14px}

 body:not(.playing):not(.finished) .intro h1{font-size:clamp(32px,9vw,40px);margin-bottom:12px}

 body:not(.playing):not(.finished) .intro p{font-size:14px}

 body:not(.playing):not(.finished) .game{gap:18px;padding:8px 0 0}

 body:not(.playing):not(.finished) .board{--home-diameter:min(calc(100vw - 68px),max(150px,calc(100svh - 400px)),310px);width:var(--home-diameter);height:var(--home-diameter);max-width:none;min-height:0;aspect-ratio:1;justify-self:center}

 body:not(.playing):not(.finished) .disc{width:8.6%;height:8.6%;min-height:0;font-size:clamp(13px,4.4vw,19px);line-height:1}

 body:not(.playing):not(.finished) .clock strong{font-size:clamp(38px,14vw,64px)}

 body:not(.playing):not(.finished) .clock .clock-label{display:block;margin-bottom:6px}

 body:not(.playing):not(.finished) .clock span{font-size:10px}

 body:not(.playing):not(.finished) #level-picker{margin-bottom:12px}

 body:not(.playing):not(.finished) #level-picker legend{font-size:14px;margin-bottom:8px}

 body:not(.playing):not(.finished) .level-options label{font-size:16px;min-height:48px;gap:6px}

 body:not(.playing):not(.finished) .level-options small{font-size:12px}

 body:not(.playing):not(.finished) #start{font-size:18px;min-height:50px;padding:12px 16px}

 body:not(.playing):not(.finished) #welcome{font-size:13px;max-width:36ch;margin-top:12px}

 body:not(.playing):not(.finished) footer{font-size:12px;padding-top:20px}

 .mobile-session #countdown{position:fixed;inset:auto;left:50%;top:calc(var(--visible-top,0px) + var(--visible-height,100dvh)*.45);transform:translate(-50%,-50%);width:200px;height:180px;justify-content:center;overflow:visible}

 .mobile-session #countdown strong{font-size:96px;margin:0}.mobile-session #countdown .countdown-caption{position:static;background:none;margin-top:8px;padding:0;font-size:15px}

 .mobile-session .kickoff-scene{display:none}.mobile-session .launch-ball{position:absolute;display:none;width:88px;height:88px;inset:40px 56px}

 .mobile-session #countdown.shooting .launch-ball{display:block;animation:launch-mobile 700ms cubic-bezier(.16,1,.3,1) both}

}

@keyframes launch-mobile{from{transform:translateY(8px) rotate(-25deg) scale(.65);opacity:0}25%{opacity:1}to{transform:translateY(-20px) rotate(90deg) scale(1);opacity:1}}

@media(max-width:760px) and (max-height:600px){body:not(.playing):not(.finished) main{padding-top:10px}body:not(.playing):not(.finished) .intro{padding-bottom:8px}body:not(.playing):not(.finished) .intro h1{font-size:30px;margin-bottom:8px}body:not(.playing):not(.finished) .game{gap:10px}body:not(.playing):not(.finished) .board{--home-diameter:max(140px,calc(100svh - 360px))}body:not(.playing):not(.finished) .clock strong{font-size:40px}body:not(.playing):not(.finished) .level-options label{min-height:44px;font-size:14px}body:not(.playing):not(.finished) #start{min-height:44px;font-size:16px}body:not(.playing):not(.finished) #welcome{font-size:12px;margin-top:8px}}

@media(max-width:760px) and (max-height:520px){body:not(.playing):not(.finished) main{padding-top:4px}body:not(.playing):not(.finished) .intro h1{font-size:25px}body:not(.playing):not(.finished) .board{--home-diameter:116px}body:not(.playing):not(.finished) .clock strong{font-size:32px}body:not(.playing):not(.finished) .clock .clock-label{display:none}body:not(.playing):not(.finished) .clock span{font-size:8px}body:not(.playing):not(.finished) .game{gap:6px}body:not(.playing):not(.finished) #level-picker legend{font-size:12px;margin-bottom:5px}body:not(.playing):not(.finished) #level-picker{margin-bottom:8px}body:not(.playing):not(.finished) .level-options small{font-size:11px}}

@media(prefers-reduced-motion:reduce){.preparing .scene-camera,.preparing .kicker,.preparing .kicker-upper,.preparing .plant-leg,.preparing .shoot-leg,.preparing .close-hand,.preparing .shot-ball,.preparing .shot-trail,.preparing .ball-shadow,.preparing .goal-flash{animation:none}.preparing .close-hand,.preparing .shot-trail,.preparing .goal-flash{opacity:0}.mobile-session #countdown.shooting .launch-ball{animation:none}#countdown.shooting .shot-ball{transform:translate(94px,-95px) scale(.45)}}



@media(max-width:760px),(max-width:1024px) and (hover:none){body:not(.playing):not(.finished) .board{--home-diameter:min(calc(100vw - 68px),max(150px,calc(100svh - 480px)),310px)}body:not(.playing):not(.finished) footer{padding:12px 0}}

@media(max-width:760px) and (max-height:600px){body:not(.playing):not(.finished) .board{--home-diameter:max(140px,calc(100svh - 420px))}}

@media(max-width:760px) and (max-height:520px){body:not(.playing):not(.finished) .board{--home-diameter:116px}}



/* Posiciones estables y una señal de inicio más simple. */

.mobile-session.preparing #rosco{visibility:hidden}

.mobile-session.preparing .question{visibility:hidden}

.mobile-home{display:flex;align-items:center;min-width:100px;min-height:32px;border-radius:3px}

.mobile-home:focus-visible{outline-offset:1px}

.simple-scene{transform-origin:149px 179px}

.preparing .simple-scene{animation:simple-camera 3700ms cubic-bezier(.16,1,.3,1) both}

.preparing .simple-hand{animation:simple-place 3700ms ease-out both}

.preparing .run-marks{animation:simple-steps 3700ms linear both}

.preparing .simple-boot{transform-origin:89px 147px;animation:simple-kick 3700ms linear both}

.preparing .simple-ball{transform-origin:149px 179px;animation:simple-shot 3700ms linear both}

.preparing .simple-trail{animation:simple-flight 3700ms linear both}

.preparing .target-hit{transform-origin:271px 111px;animation:simple-hit 3700ms ease-out both}

@keyframes simple-camera{0%,18%{transform:translate(10px,-10px) scale(1.8)}42%,100%{transform:none}}

@keyframes simple-place{0%,18%{opacity:1;transform:translate(0,16px)}30%,100%{opacity:0;transform:translate(-15px,-12px)}}

@keyframes simple-steps{0%,35%{opacity:0}48%,67%{opacity:1}76%,100%{opacity:0}}

@keyframes simple-kick{0%,38%{opacity:0;transform:translate(-55px,0) rotate(0)}45%{opacity:1;transform:translate(-55px,0) rotate(-8deg)}60%{transform:translate(-30px,-2px) rotate(5deg)}76%{transform:translate(-8px,0) rotate(15deg)}83%,100%{opacity:1;transform:translate(8px,0) rotate(-18deg)}}

@keyframes simple-shot{0%,81%{transform:none}86%{transform:translate(37px,-34px) rotate(100deg) scale(.85)}93%{transform:translate(85px,-61px) rotate(230deg) scale(.65)}97%,100%{transform:translate(120px,-68px) rotate(300deg) scale(.5)}}

@keyframes simple-flight{0%,81%{opacity:0}85%,95%{opacity:1}100%{opacity:0}}

@keyframes simple-hit{0%,94%{opacity:0;transform:scale(.6)}97%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}

@media(min-width:761px) and (hover:hover),(min-width:1025px){

 body:not(.finished) .game,body.playing .game{align-items:start;min-height:500px;padding:32px 0;gap:64px}

 body:not(.finished) .board,body.playing .board{align-self:start;margin-top:0;width:430px;height:430px;max-width:100%;aspect-ratio:1}

 body:not(.finished) .question,body.playing .question{display:grid;grid-template-rows:48px 168px auto auto;align-content:start;gap:16px;padding-top:12px;min-height:430px}

 body:not(.finished) .letterline{grid-row:1;margin:0}

 body:not(.finished) #clue,body.playing #clue{grid-row:2;height:168px;margin:0;font-size:34px;overflow:auto;align-self:start}

 body:not(.finished) #level-picker,body.playing #form{grid-row:3;margin:0}

 body:not(.finished) #start{grid-row:4;align-self:start}

 body:not(.finished) #welcome{grid-row:5;margin:0}

 body.playing #feedback{grid-row:4;height:48px;margin:0}

 body:not(.playing):not(.finished) .score{display:flex;visibility:hidden}

}

@media(max-width:760px),(max-width:1024px) and (hover:none){

 body:not(.playing):not(.finished) .disc{font-size:clamp(15px,5.4vw,23px);font-weight:800}

 .mobile-session main{grid-template-rows:32px 46px minmax(0,1fr) 24px;gap:6px}

 .mobile-session .board{height:46px}

 .mobile-session .question{grid-template-rows:30px minmax(0,1fr) 94px 20px;gap:6px}

 .mobile-session .letterline,.mobile-session .question .letterline{height:30px;gap:10px;font-size:14px;line-height:1.2;align-items:center}

 .mobile-session .letterline strong{width:28px;height:28px;flex-shrink:0;font-size:21px}

 .mobile-session #clue{padding:4px 0 0;line-height:1.2;align-self:stretch}

 .mobile-session #feedback{height:20px;line-height:20px;font-size:12px}

 .mobile-session .score{min-height:24px}

}

@media(max-width:760px) and (max-height:520px){body:not(.playing):not(.finished) .disc{font-size:12px}}

@media(prefers-reduced-motion:reduce){.preparing .simple-scene,.preparing .simple-hand,.preparing .run-marks,.preparing .simple-boot,.preparing .simple-ball,.preparing .simple-trail,.preparing .target-hit{animation:none}.preparing .simple-hand,.preparing .run-marks,.preparing .simple-trail,.preparing .target-hit{opacity:0}#countdown.shooting .simple-ball{transform:translate(120px,-68px) scale(.5)}}



@media(min-width:761px) and (hover:hover),(min-width:1025px){body:not(.playing):not(.finished) .question{display:grid}body:not(.finished) .board,body.playing .board{width:100%;max-width:430px;height:auto;min-height:0;aspect-ratio:1}}



@media(min-width:761px) and (hover:hover),(min-width:1025px){body:not(.finished) .game,body.playing .game{height:576px;min-height:576px}body:not(.finished) .question,body.playing .question{height:512px;min-height:512px}}



/* Círculos proporcionados y ayuda breve en teléfonos. */

@media(max-width:760px),(max-width:1024px) and (hover:none){

 body:not(.playing):not(.finished) .disc{width:9.5%;height:9.5%;font-size:clamp(13px,4.5vw,19px);line-height:1;display:flex;align-items:center;justify-content:center;padding:0}

 body:has(#help.selected) main{padding-top:12px}

 body:has(#help.selected) .info{margin:0 auto;min-height:0;font-size:15px;line-height:1.4}

 body:has(#help.selected) .info h2{font-size:32px;margin:0 0 10px}

 body:has(#help.selected) .info p{margin:0 0 12px}

 body:has(#help.selected) .info ol{padding-left:22px;margin:12px 0}

 body:has(#help.selected) .info li{margin:10px 0;padding-left:3px}

 body:has(#help.selected) footer{padding:12px 0;font-size:11px}

}

@media(max-width:760px) and (max-height:650px){body:has(#help.selected) .info{font-size:14px;line-height:1.3}body:has(#help.selected) .info li{margin:8px 0}body:has(#help.selected) .info h2{font-size:28px}body:has(#help.selected) footer{padding:6px 0}}

@media(max-width:760px) and (max-height:520px){body:not(.playing):not(.finished) .disc{font-size:11px}}



/* La tribuna de los cinco primeros. */

#top-dialog{width:min(440px,calc(100% - 32px))}

.top-trophy{width:48px;height:48px;fill:var(--yellow);stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin:0 0 12px}

#top-dialog h2{padding-right:24px;font-size:34px}

#top-phrase{font-size:16px;line-height:1.4;min-height:96px;resize:vertical;padding:12px}

#top-phrase:focus{outline:2px solid var(--green);outline-offset:2px}

.phrase-meta{display:flex;align-items:start;justify-content:space-between;gap:16px;font-size:12px;color:var(--muted);margin:8px 0}

#phrase-count{white-space:nowrap;font-variant-numeric:tabular-nums}

#phrase-status{margin:8px 0;font-size:14px;color:var(--red)}

#phrase-skip{display:block;margin:4px auto 0;font-size:15px;min-height:44px}

.rank-person .rank-phrase{font-size:14px;line-height:1.4;font-weight:400;margin-top:7px;color:var(--green);overflow-wrap:anywhere;white-space:normal}

.phrase-edit{display:block;background:none;color:var(--green);font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:8px 0;min-height:36px}

@media(max-width:760px){#top-dialog{padding:22px}#top-dialog h2{font-size:30px}.rank-person .rank-phrase{font-size:12px}.ranking-table td:nth-child(2){min-width:100px}}


.account-signin{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;background:#173f35;color:#faf7ef;border-radius:8px;font-weight:700;text-decoration:none;margin:18px 0 8px}.account-signin:hover{background:#245b4c}#account-note{margin-bottom:20px}#account-signout{display:block;margin-top:14px}#profile-history,#profile-edit{display:block;margin:10px 0}#identity-profile .primary{margin-top:16px}#history-summary{max-width:60ch}#history-rows td{font-variant-numeric:tabular-nums}#identity-dialog{max-height:calc(100dvh - 32px);overflow:auto}a[hidden]{display:none!important}

/* Cierre de marca a todo el ancho, fuera del contenedor del juego. */
body .site-footer,body:not(.playing):not(.finished) .site-footer{
 display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
 width:100%;gap:32px;margin-top:24px;padding:32px max(4vw,24px);
 background:var(--green);color:var(--cream);border:0;text-align:left;font-size:14px;
}
.site-footer h2{font:700 24px/1.2 var(--display);color:var(--cream);margin:0 0 8px}
.site-footer p{max-width:65ch;margin:0;line-height:1.5}
.site-footer .footer-tagline{margin-top:10px;font-size:13px;color:#d0dfd5}
.footer-social{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.footer-social a{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--cream);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.footer-social a:hover{color:var(--yellow)}
.site-footer a:focus-visible{outline-color:var(--yellow)}
.footer-social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
.footer-social .instagram-dot{fill:currentColor;stroke:none}
.footer-social small{font-size:12px;color:#d0dfd5}
body.playing:has(#play.selected) .site-footer{display:none}



@media(max-width:760px){
 body .site-footer,body:not(.playing):not(.finished) .site-footer{grid-template-columns:1fr;gap:14px;margin-top:18px;padding:22px 20px}
 .site-footer h2{font-size:22px}.site-footer p{font-size:13px}.footer-social{align-items:flex-start}
 
}
/* Perfil de hincha: equipo y acciones compactas. */
#identity-status{font-weight:700;font-size:18px;margin:18px 0 16px;padding:0}
.club-form{padding:16px 0;border-top:1px solid #d0d7ca;border-bottom:1px solid #d0d7ca}
.club-form label{font-size:16px;font-weight:700}.club-hint{font-size:13px!important;line-height:1.4!important;margin:4px 0 10px!important}
.club-search-wrap{position:relative}.club-search-wrap input{width:100%;padding-right:16px}
#club-results{max-height:176px;overflow:auto;border:1px solid #a8b9ac;border-radius:8px;margin-top:6px;background:var(--cream)}
#club-results button{display:block;width:100%;padding:10px 12px;min-height:40px;text-align:left;background:transparent;color:var(--green);border:0;border-radius:0;font:inherit;font-size:14px}
#club-results button:hover,#club-results button[aria-selected=true]{background:#e4ecdf}
.club-empty{padding:12px;margin:0!important;font-size:14px!important}
.club-save-row{display:flex;align-items:center;gap:12px;margin-top:10px}.club-save-row .primary{width:auto;margin:0;min-height:40px;font-size:14px;padding:8px 16px}.club-save-row .plain{min-height:40px;font-size:14px}
#club-status:empty{display:none}.club-form #club-status{margin-bottom:0!important}
.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;align-items:center}
#identity-profile .profile-actions #profile-history,#identity-profile .profile-actions #profile-edit{margin:0;min-height:40px;text-align:left;font-size:14px;padding:8px}
#identity-profile .profile-actions .primary{grid-column:1/-1;margin:4px 0;min-height:44px}
#identity-profile .profile-actions #account-signout,#identity-profile .profile-actions #identity-logout{grid-column:1/-1;margin:0;min-height:36px;padding:6px 8px;text-align:center;font-size:13px}
@media(max-width:760px){#identity-dialog{padding:22px}#identity-dialog h2{font-size:30px}.club-form{padding:12px 0}#identity-description{font-size:13px;margin-bottom:12px}}

/* Todas las vistas comparten el mismo cierre, debajo de una pantalla de contenido. */
body:not(.mobile-session) main{min-height:100vh;min-height:100svh}

/* Información de inicio integrada en el espacio reservado para la pista. */
.home-benefits{display:none}.home-benefits-mobile{display:none}
.home-benefits ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.home-benefits li{display:flex;align-items:flex-start;gap:12px}
.home-benefits svg{width:20px;height:20px;margin-top:2px;flex-shrink:0;fill:none;stroke:var(--green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.home-benefits strong{display:block;font-size:15px;line-height:1.2;font-weight:700}
.home-benefits small{display:block;font-size:13px;line-height:1.35;color:var(--muted);margin-top:2px}
.football-backdrop{display:none;pointer-events:none}
@media(min-width:761px) and (hover:hover),(min-width:1025px){
 body:not(.playing):not(.preparing):not(.finished) .home-benefits{display:block;grid-row:2;grid-column:1;margin-top:48px;align-self:start;z-index:1}
 body:not(.playing):not(.preparing):not(.finished):has(#play.selected) .football-backdrop{display:block;position:fixed;inset:100px 0 0;overflow:hidden;color:var(--green);opacity:.065;z-index:-1}
 body{isolation:isolate}.cup-sketch{position:absolute;width:210px;height:420px;left:clamp(-75px,calc((100vw - 1500px)/2),95px);top:100px;transform:rotate(-9deg)}
 .pitch-sketch{position:absolute;width:235px;height:380px;right:clamp(-100px,calc((100vw - 1550px)/2),50px);top:180px;transform:rotate(12deg)}
}
@media(max-width:760px),(max-width:1024px) and (hover:none){
 body:not(.playing):not(.preparing):not(.finished) .home-benefits{display:block;margin:0 0 8px;text-align:center}
 .home-benefits ul{display:none}.home-benefits-mobile{display:block;margin:0;font-size:11px;line-height:1.3;color:var(--muted);white-space:nowrap}
 body:not(.playing):not(.finished) .game{gap:12px}
 body:not(.playing):not(.finished) #level-picker{margin-bottom:10px}
}