:root{--blue:#164d97;--paper:#f9f8f3;--soft:#c4d4ed;--font:"Trebuchet MS","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--blue);font-family:var(--font)}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px dashed var(--blue);outline-offset:5px}button:disabled{opacity:.45;cursor:default}.screen{display:none;min-height:100svh;position:relative;overflow:hidden}.screen.active{display:flex}.home{align-items:center;justify-content:center}.home-center{width:100%;display:flex;flex-direction:column;align-items:center;padding:140px 24px 170px}.home-brand{display:flex;align-items:center;justify-content:center;gap:0;width:min(930px,82vw)}.home-brand .face{width:39%;object-fit:contain}.home-brand .wordmark{width:61%;object-fit:contain;margin-left:-1.8%}.slogan{font-weight:900;font-size:clamp(15px,2.35vw,31px);text-align:center;letter-spacing:.015em;margin:30px 0 48px}.pill{display:inline-flex;justify-content:center;align-items:center;border-radius:999px;font-weight:900;text-decoration:none;white-space:nowrap;transition:transform .16s,background .16s}.pill:hover:not(:disabled){transform:translateY(-2px)}.solid{background:var(--blue);color:white;border:3px solid var(--blue)}.outline{background:transparent;color:var(--blue);border:4px solid var(--blue)}.play-button{font-size:clamp(28px,3.6vw,49px);padding:15px 72px;min-width:330px;letter-spacing:.05em}.music-control{position:absolute;top:36px;right:clamp(20px,3vw,48px);display:flex;align-items:center;gap:16px;border:2px solid var(--blue);background:transparent;color:var(--blue);border-radius:999px;padding:10px 23px 10px 11px;font-size:clamp(13px,1.55vw,21px);font-weight:900;line-height:1.13;text-align:left;z-index:5}.music-symbol{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--blue);color:white;font-size:39px;line-height:1}.music-control[aria-pressed=true] .music-symbol{box-shadow:0 0 0 5px var(--soft)}.coffee-link{position:absolute;bottom:clamp(24px,4vw,56px);right:clamp(20px,3vw,44px);display:flex;align-items:center;gap:18px;background:none;border:0;color:var(--blue);font-size:clamp(12px,1.4vw,19px);line-height:1.2;font-weight:900;text-align:left;padding:0}.coffee-link svg{width:65px;height:75px}.coffee-divider{height:66px;width:2px;background:var(--blue)}.chevron{font-size:45px;font-weight:400;line-height:1}.game{flex-direction:column}.game-header{display:flex;justify-content:space-between;align-items:center;padding:60px 4vw 0}.game-header .music-control{top:40px}.small-brand{display:flex;align-items:center;gap:0;width:min(385px,29vw);border:0;background:none;padding:0}.small-brand img:first-child{width:38%}.small-brand img:last-child{width:62%;margin-left:-1%}.game-center{display:flex;align-items:center;justify-content:center;gap:clamp(40px,7.5vw,120px);flex:1;padding:30px 7vw 130px}.card{width:clamp(360px,36vw,545px);aspect-ratio:.75;border:9px solid var(--blue);border-radius:56px;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 25px;text-align:center;transition:transform .16s;box-shadow:0 18px 24px #0e326011}.card-number{font-size:clamp(125px,15vw,230px);line-height:1;font-weight:1000;letter-spacing:-.08em;padding-right:.08em}.card-phrase{font-size:clamp(25px,2.55vw,39px);font-weight:900;line-height:1.18;max-width:100%;text-wrap:balance;margin-top:40px}.card.long .card-phrase{font-size:clamp(23px,2.35vw,35px)}.card.back{background:var(--blue);color:white}.card.back .card-number{font-size:clamp(160px,17vw,255px)}.card.back .card-phrase{display:none}.card-touch{display:none;background:var(--paper);color:var(--blue);border:0;font-size:clamp(24px,2.5vw,34px);padding:12px 46px;margin-top:38px}.card.back .card-touch{display:flex}.card.shuffling{animation:shuffle .17s linear infinite alternate}@keyframes shuffle{from{transform:rotate(-3deg) translateX(-8px)}to{transform:rotate(3deg) translateX(8px)}}.timer-panel{display:flex;align-items:center;flex-direction:column;gap:24px}.timer{width:clamp(220px,23vw,320px);aspect-ratio:1;position:relative}.timer svg{width:100%;height:100%;transform:rotate(-90deg)}.timer circle{fill:none;stroke-width:15}.track{stroke:var(--soft)}.progress{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:552.92;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear}.timer-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900}.timer-label strong{font-size:clamp(76px,8vw,116px);line-height:1}.timer-label span{font-size:clamp(24px,2.5vw,34px)}.next-card{font-size:clamp(18px,1.9vw,26px);padding:13px 34px}.timer.urgent{animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.035)}}.donate{align-items:center;justify-content:center}.donate-center{display:flex;flex-direction:column;align-items:center;gap:55px;padding:60px 24px}.donate-content{display:flex;align-items:center;justify-content:center;gap:50px}.mug-wrap{width:clamp(235px,24vw,340px);flex-shrink:0}.mug{width:100%;height:auto}.donate h1{font-size:clamp(32px,4.5vw,66px);line-height:1.15;letter-spacing:-.025em;margin:0;font-weight:1000}.donate-actions{display:flex;flex-direction:column;align-items:center;gap:20px;width:min(650px,90vw)}.support,.continue{width:100%;min-height:88px;font-size:clamp(20px,2.6vw,36px);gap:24px}.continue{min-height:75px;width:82%}.support span,.continue span{font-size:1.2em;font-weight:400}@media(max-width:900px){.home-brand{width:min(90vw,800px)}.game-center{gap:26px;padding:45px 3vw 130px}.card{width:49vw;border-width:7px;border-radius:40px}.card-number{font-size:17vw}.card-phrase{font-size:clamp(19px,3vw,28px);margin-top:20px}.timer{width:27vw}.timer-label strong{font-size:9vw}.timer-label span{font-size:3vw}.small-brand{width:32vw}}@media(max-width:650px){.home-center{padding:145px 15px 140px}.home-brand{width:96vw}.slogan{font-size:clamp(15px,4.1vw,21px);line-height:1.3;margin:28px 14px 36px}.play-button{min-width:240px;font-size:30px;padding:13px 55px}.music-control{top:20px;right:14px;font-size:12px;padding:6px 13px 6px 7px;gap:8px}.music-symbol{width:37px;height:37px;font-size:25px}.coffee-link{bottom:22px;right:15px;gap:9px;font-size:12px}.coffee-link svg{width:40px;height:46px}.coffee-divider{height:42px}.chevron{font-size:29px}.game-header{padding:20px 14px 0}.game-header .music-control{top:18px}.small-brand{width:42vw}.game-center{flex-direction:column;gap:16px;padding:22px 15px 110px;justify-content:flex-start}.card{width:min(74vw,340px);border-radius:30px;border-width:6px;padding:22px 14px;aspect-ratio:.78}.card-number{font-size:clamp(110px,29vw,160px)}.card.back .card-number{font-size:clamp(130px,34vw,185px)}.card-phrase{font-size:clamp(19px,5vw,25px);margin-top:20px}.card.long .card-phrase{font-size:clamp(17px,4.5vw,22px)}.card-touch{font-size:24px;margin-top:20px}.timer-panel{flex-direction:row;gap:15px}.timer{width:118px}.timer circle{stroke-width:12}.timer-label strong{font-size:45px}.timer-label span{font-size:14px}.next-card{font-size:16px;padding:10px 20px}.donate-center{gap:25px;padding:60px 16px}.donate-content{flex-direction:column;gap:12px}.mug-wrap{width:180px}.donate h1{text-align:center;font-size:clamp(29px,7vw,44px)}.support{min-height:62px;font-size:21px}.continue{min-height:57px;font-size:19px;width:90%}}@media(max-height:700px) and (min-width:651px){.home-center{padding:100px 20px 90px}.home-brand{width:min(640px,68vw)}.slogan{margin:15px 0 25px}.play-button{padding:8px 45px;font-size:28px}.game-center{padding-bottom:40px}.card{width:min(30vw,340px)}.card-number{font-size:125px}.card-phrase{font-size:24px}}


/* Refinamiento visual: escala cozy, sin alterar la identidad */
:root{--blue:#164d97;--paper:#f9f8f3;--soft:#c4d4ed}
.home-center{padding:105px 24px 125px}
.home-brand{width:min(690px,72vw);gap:4px}
.home-brand .face{width:36%;flex-shrink:0}
.home-brand .wordmark{width:64%;margin-left:-1.2%}
.slogan{font-size:clamp(14px,1.6vw,21px);margin:24px 0 32px;letter-spacing:.01em}
.play-button{font-size:clamp(22px,2.25vw,31px);padding:11px 55px;min-width:240px;border-width:2px}
.music-control{top:25px;right:30px;gap:10px;padding:7px 16px 7px 7px;font-size:clamp(12px,1.1vw,15px)}
.music-symbol{width:44px;height:44px;font-size:29px}
.coffee-link{bottom:25px;right:30px;gap:12px;font-size:clamp(11px,1vw,14px)}
.coffee-link svg{width:46px;height:53px}.coffee-divider{height:45px}.chevron{font-size:32px}
.game-header{padding:27px 3.5vw 0}
.game-header .music-control{top:25px}
.small-brand{width:min(260px,23vw)}
.game-center{gap:clamp(38px,6vw,90px);padding:20px 5vw 80px}
.card{width:clamp(300px,29vw,410px);border-width:6px;border-radius:36px;padding:25px 20px;box-shadow:0 12px 22px #0e32600a}
.card-number{font-size:clamp(110px,11.5vw,166px)}
.card.back .card-number{font-size:clamp(125px,13vw,190px)}
.card-phrase{font-size:clamp(22px,2.1vw,29px);margin-top:27px}
.card.long .card-phrase{font-size:clamp(19px,1.85vw,25px)}
.card-touch{font-size:22px;margin-top:24px;padding:9px 34px}
.timer-panel{gap:16px}.timer{width:clamp(175px,18vw,235px)}
.timer-label strong{font-size:clamp(55px,6vw,79px)}.timer-label span{font-size:clamp(18px,1.75vw,24px)}
.next-card{font-size:17px;padding:10px 28px;border-width:2px}
.donate-center{gap:30px;padding:42px 24px}.donate-content{gap:35px}
.mug-wrap{width:clamp(175px,18vw,245px)}
.donate h1{font-size:clamp(28px,3.3vw,46px)}
.donate-actions{gap:12px;width:min(475px,86vw)}
.support,.continue{min-height:59px;font-size:clamp(18px,1.8vw,24px);border-width:2px}
.continue{min-height:52px;width:84%}
@media(max-width:900px){
 .home-brand{width:min(650px,83vw)}
 .game-center{gap:25px;padding:30px 3vw 85px}
 .card{width:43vw}.card-number{font-size:14vw}
 .card-phrase{font-size:clamp(18px,2.7vw,24px)}
 .timer{width:23vw}.timer-label strong{font-size:7vw}.timer-label span{font-size:2.2vw}
 .small-brand{width:27vw}
}
@media(max-width:650px){
 .home-center{padding:110px 18px 125px}
 .home-brand{width:min(92vw,440px)}
 .slogan{font-size:clamp(13px,3.4vw,17px);line-height:1.35;margin:22px 8px 27px}
 .play-button{min-width:200px;font-size:24px;padding:11px 42px}
 .music-control{top:17px;right:14px;font-size:11px;padding:5px 10px 5px 5px;gap:7px}
 .music-symbol{width:32px;height:32px;font-size:22px}
 .coffee-link{bottom:18px;right:14px;gap:8px;font-size:11px}
 .coffee-link svg{width:36px;height:41px}.coffee-divider{height:36px}.chevron{font-size:25px}
 .game-header{padding:17px 14px 0}.game-header .music-control{top:15px}
 .small-brand{width:38vw}
 .game-center{flex-direction:column;justify-content:center;gap:14px;padding:25px 12px 83px}
 .card{width:min(66vw,275px);aspect-ratio:.78;border-width:5px;border-radius:26px;padding:17px 13px}
 .card-number{font-size:clamp(90px,25vw,130px)}
 .card.back .card-number{font-size:clamp(110px,29vw,155px)}
 .card-phrase{font-size:clamp(17px,4.3vw,21px);margin-top:16px}
 .card.long .card-phrase{font-size:clamp(15px,3.8vw,19px)}
 .card-touch{font-size:19px;padding:8px 27px;margin-top:16px}
 .timer-panel{flex-direction:row;gap:15px}.timer{width:100px}
 .timer-label strong{font-size:38px}.timer-label span{font-size:12px}
 .next-card{font-size:14px;padding:9px 16px}
 .donate-center{gap:23px;padding:65px 16px 45px}
 .donate-content{flex-direction:column;gap:12px}
 .mug-wrap{width:145px}.donate h1{text-align:center;font-size:clamp(26px,6.3vw,36px)}
 .support{min-height:54px;font-size:18px}.continue{min-height:48px;font-size:17px;width:89%}
}
@media(max-height:700px) and (min-width:651px){
 .home-center{padding:70px 20px 65px}.home-brand{width:min(540px,62vw)}
 .slogan{margin:14px 0 22px}.play-button{font-size:23px;padding:9px 42px}
 .game-center{padding-bottom:25px}.card{width:min(27vw,300px)}
 .card-number{font-size:105px}.card-phrase{font-size:21px}
}