:root{font-family:'DM Sans',system-ui,-apple-system,sans-serif;color-scheme:dark;background:#0d1119;color:#edf4fb}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% 0%,#1e3544 0,transparent 38%),#0d1119}main{max-width:960px;margin:auto;padding:46px 22px 100px}h1{font-size:clamp(52px,11vw,96px);letter-spacing:-.065em;font-weight:800;margin:0;line-height:1}h1 span{color:#8edaff}.brand-title{font-family:'League Spartan',system-ui,-apple-system,sans-serif;width:max-content;max-width:100%}h2{font-size:clamp(26px,4vw,38px);margin:0 0 14px;letter-spacing:-.035em}h3{font-size:23px;margin:25px 0 12px}.eyebrow{font-size:12px;letter-spacing:.22em;font-weight:800;color:#89dafa;text-transform:uppercase}.lead{font-size:clamp(18px,3vw,25px);max-width:550px;color:#c8d5e4;line-height:1.45}.muted,.helper{color:#a6b6c8;line-height:1.6}.section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:52px 0 16px}.section-head h2{margin:0}.genre-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:13px}.genre-card{min-height:132px;border:1px solid #364656;border-radius:21px;padding:20px;background:#17212d;color:#eef7ff;text-align:left;display:flex;flex-direction:column;justify-content:space-between;transition:transform .15s,border-color .15s}.genre-card:not(:disabled){cursor:pointer}.genre-card:not(:disabled):hover{transform:translateY(-3px);border-color:#8edaff}.genre-card:disabled{opacity:.48;cursor:default}.genre-card strong{font-size:25px}.genre-card small{color:#a7bdd0;font-size:13px}.genre-card.done{border-color:#87dcba}.genre-card.done small{color:#87dcba}.panel{border:1px solid #364656;border-radius:25px;background:#17212d;padding:clamp(22px,4vw,40px);margin-top:30px;max-width:720px}button,input,select,textarea{font:inherit}button{border:0;border-radius:12px;background:#8edaff;color:#0d1b28;font-weight:800;padding:13px 18px;cursor:pointer}button:disabled{opacity:.45;cursor:default}.text-button{background:transparent;color:#8edaff;padding:10px 0}.outline{border:1px solid #65839a;background:transparent;color:#eef7ff}label{display:block;margin:17px 0 7px;font-weight:700}input,select,textarea{width:100%;padding:13px 14px;border:1px solid #485b6d;border-radius:11px;background:#0d1722;color:#fff}textarea{resize:vertical}.guess-suggestions{margin-top:7px;padding:6px;border:1px solid #485b6d;border-radius:11px;background:#111e2a}.guess-suggestion{display:block;width:100%;padding:10px 12px;border-radius:7px;background:transparent;color:#edf4fb;text-align:left;font-weight:600}.guess-suggestion:hover,.guess-suggestion:focus-visible{background:#263949}input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid #8edaff;outline-offset:2px}#songForm>button{margin-top:22px}.catalog-item{border-top:1px solid #394b59;padding:12px 0;display:flex;justify-content:space-between;align-items:center;gap:14px}.catalog-item small{color:#a6b6c8;display:block}.catalog-item button{background:transparent;color:#fab4b4;padding:8px}#gameContent>.eyebrow{margin-top:32px}.steps{display:flex;gap:8px;margin:23px 0}.step{height:7px;flex:1;background:#455365;border-radius:8px}.step.active{background:#8edaff}.play{width:100%;padding:21px;font-size:20px}progress{width:100%;height:7px;accent-color:#8edaff;margin:14px 0 4px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:17px 0}.actions button{flex:1;min-width:130px}#history>p{border-top:1px solid #354654;padding:10px 0;margin:0;color:#aec2d2}#result{border-top:1px solid #455365;margin-top:24px}#factResult{white-space:pre-line}#result a{color:#8edaff}#status{min-height:28px;color:#bad7e8;line-height:1.5}#videoHost{display:none}[hidden]{display:none!important}@media(max-width:540px){main{padding-top:32px}.section-head{align-items:start}.genre-card{min-height:115px}.panel{padding:22px}}

a.text-button{text-decoration:none;font-weight:800;display:inline-block}

/* Entrada del logo en la portada. */
.intro{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0d1119}
.intro-logo{position:relative;font-family:'League Spartan',system-ui,-apple-system,sans-serif;font-size:clamp(64px,12vw,130px);font-weight:800;letter-spacing:-.065em;line-height:1;white-space:nowrap;transform-origin:top left}
.intro-logo-base{color:#586676}
.intro-logo-fill{position:absolute;inset:0 auto auto 0;color:#f5fbff;clip-path:inset(0 100% 0 0)}
.intro-logo-fill span{color:#8edaff}
.intro-credit{margin:0;color:#9aacbc;font-size:13px;font-weight:500;letter-spacing:.08em}
.intro-playing{overflow:hidden}
.intro-playing .brand-title{opacity:0}

/* El catálogo aparece de forma progresiva al terminar de cargar. */
.genre-skeleton{position:relative;overflow:hidden;border-color:#2b3b49;background:#15202b}
.genre-skeleton::before,.genre-skeleton::after{content:'';height:18px;border-radius:7px;background:#273847}
.genre-skeleton::before{width:48%}
.genre-skeleton::after{width:38%;height:10px}
.genre-skeleton{animation:genre-skeleton-pulse 1.3s ease-in-out infinite alternate}
.genre-card.is-entering{animation:genre-card-enter .5s cubic-bezier(.2,.75,.25,1) both;animation-delay:0ms}
body.intro-playing .genre-card.is-entering{animation-play-state:paused}
.genre-card.is-opening{border-color:#8edaff;box-shadow:0 0 0 3px #8edaff22}
.genre-card>strong,.genre-card>small{transition:opacity .12s ease}
.genre-card.is-transitioning>strong,.genre-card.is-transitioning>small{opacity:0}
.game-content{opacity:1;transition:opacity .24s ease}
.game-content.is-hidden{opacity:0;pointer-events:none;transition-duration:.12s}
#status{transition:opacity .24s ease}
body.game-transitioning #status{opacity:0;transition-duration:.12s}
@keyframes genre-skeleton-pulse{from{opacity:.48}to{opacity:.8}}
@keyframes genre-card-enter{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:ease-in-out}
::view-transition-group(genre-panel){animation-duration:.58s;animation-timing-function:cubic-bezier(.2,.75,.2,1);background:#17212d;border:1px solid #364656;border-radius:23px;box-shadow:0 16px 45px #070f1b66;overflow:hidden}
::view-transition-old(genre-panel),::view-transition-new(genre-panel){animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.genre-skeleton,.genre-card.is-entering{animation:none}.genre-card>strong,.genre-card>small,.game-content,#status{transition:none}::view-transition-old(root),::view-transition-new(root),::view-transition-group(genre-panel){animation-duration:0s}}

/* Movimiento de la experiencia del jugador. */
#home .genre-card,#game button,#home a.text-button{transition:transform .38s cubic-bezier(.2,1.5,.35,1),box-shadow .25s ease,border-color .25s ease,background-color .25s ease}
#home .genre-card:not(:disabled):active,#game button:not(:disabled):active{transform:scale(.96);transition-duration:.12s}
#game input:focus{border-color:#8edaff;box-shadow:0 0 0 4px #8edaff20;transition:border-color .2s,box-shadow .2s}
#game .step{transition:background-color .3s ease,box-shadow .3s ease}
#game .step.active{box-shadow:0 0 10px #8edaff44}
.genre-transition-card{position:fixed!important;z-index:50;margin:0!important;pointer-events:none;overflow:hidden;box-shadow:0 16px 45px #070f1baa!important;transform:none!important;max-width:none!important}
@media(hover:hover){
 #home .genre-card:not(:disabled):hover{transform:translateY(-5px) scale(1.025);box-shadow:0 12px 28px #070f1b77}
 #game button:not(:disabled):hover{transform:translateY(-2px) scale(1.015);box-shadow:0 7px 18px #070f1b66}
 #home a.text-button:hover{transform:translateX(3px)}
 #game .guess-suggestion:hover{transform:translateX(3px);box-shadow:none}
}
/* Barrido diagonal inspirado en las franjas de la bandera. */
.win-sweep{position:fixed;inset:0;z-index:80;display:grid;place-items:center;overflow:hidden;pointer-events:none;isolation:isolate}
.win-sweep::before{content:'';position:absolute;inset:0;background:#0d111974;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0}
.win-sweep-band{position:absolute;left:50%;top:50%;width:220vmax;height:108vmax;background:linear-gradient(to bottom,transparent 0%,#86d7f5e8 8%,#86d7f5ed 33%,#f7fbfffa 34%,#f7fbfffa 66%,#86d7f5ed 67%,#86d7f5e8 92%,transparent 100%);filter:blur(20px);transform:translate(-50%,-50%) rotate(-24deg) translateY(-170vmax)}
.win-sweep-word{position:relative;font-family:'League Spartan',system-ui,-apple-system,sans-serif;font-size:clamp(44px,10vw,110px);font-weight:800;letter-spacing:-.065em;line-height:1;white-space:nowrap;color:#f5fbff;text-shadow:0 2px 2px #0d1119,0 0 16px #0d1119,0 0 42px #0d1119;opacity:0}
.win-sweep-word span{color:#8edaff}
.win-sweep.is-active::before{animation:win-sweep-backdrop 1.65s ease-in-out both}
.win-sweep.is-active .win-sweep-band{animation:win-sweep-band 1.65s cubic-bezier(.18,.7,.2,1) both}
.win-sweep.is-active .win-sweep-word{animation:win-sweep-word 1.65s ease-in-out both}
@keyframes win-sweep-backdrop{0%,100%{opacity:0}20%,75%{opacity:1}}
@keyframes win-sweep-band{from{transform:translate(-50%,-50%) rotate(-24deg) translateY(-170vmax)}to{transform:translate(-50%,-50%) rotate(-24deg) translateY(170vmax)}}
@keyframes win-sweep-word{0%,22%{opacity:0;transform:translateY(12px) scale(.95)}38%,65%{opacity:1;transform:translateY(0) scale(1)}85%,100%{opacity:0;transform:translateY(-8px) scale(1.025)}}
@media(prefers-reduced-motion:reduce){#home .genre-card,#game button,#home a.text-button,#game input,#game .step{transition:none!important}#home .genre-card:not(:disabled):hover,#home .genre-card:not(:disabled):active,#game button:not(:disabled):hover,#game button:not(:disabled):active,#home a.text-button:hover,#game .guess-suggestion:hover{transform:none;box-shadow:none}.win-sweep{display:none!important}}

/* Invitación a sugerir canciones, dirigida al botón Acerca de. */
.about-area{display:flex;align-items:center;gap:10px;flex:none}
.about-invite{display:flex;align-items:center;gap:5px;padding:0;background:transparent;color:#bed9e8;border-radius:7px;font-size:13px;font-weight:600;line-height:1.25;white-space:nowrap;text-align:right;animation:about-invite-in .55s ease-out 2.1s both;transition:color .2s ease}
.about-chevron{display:inline-block;flex:none;color:#8edaff;font-size:26px;font-weight:400;line-height:.8;animation:about-chevron-nudge 4s ease-in-out 3s infinite}
@media(hover:hover){.about-invite:hover{color:#f0faff}}
@keyframes about-invite-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes about-chevron-nudge{0%,85%,100%{transform:translateX(0)}92%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.about-invite,.about-chevron{animation:none}}

/* Acerca de y sugerencias: solo en la página del jugador. */
.site-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}
.site-header-top .eyebrow{margin:0}
.about-trigger{flex:none;border:1px solid #65839a;background:#17212d;color:#bfeaff;border-radius:999px;padding:9px 15px;font-size:14px;font-weight:700;transition:transform .35s cubic-bezier(.2,1.5,.35,1),border-color .2s,background-color .2s,opacity .12s ease}
.about-trigger.is-source-hidden{opacity:0;pointer-events:none}
.about-trigger:active{transform:scale(.95)}
@media(hover:hover){.about-trigger:hover{transform:translateY(-2px);border-color:#8edaff;background:#223648}}
.about-dialog{width:min(100% - 32px,480px);min-height:min(484px,calc(100dvh - 32px));max-height:min(90vh,720px);padding:clamp(24px,5vw,36px);border:1px solid #5a7286;border-radius:24px;background:#17212d;color:#edf4fb;box-shadow:0 24px 80px #050a12bb}
.about-dialog[open]{display:flex;flex-direction:column}
.about-dialog::backdrop{background:#07121ac4;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.about-dialog.is-transitioning{overflow:hidden;will-change:transform}
.about-dialog>*{transition:opacity .24s ease}
.about-dialog.is-transitioning>*{opacity:0;pointer-events:none;transition-duration:.12s}
.about-dialog.is-opening::backdrop{animation:about-backdrop-in .58s ease both}
.about-dialog.is-closing::backdrop{animation:about-backdrop-out .68s ease both}
@keyframes about-backdrop-in{from{background:#07121a00;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{background:#07121ac4;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}}
@keyframes about-backdrop-out{0%,20%{background:#07121ac4;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}to{background:#07121a00;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}}
.about-dialog .eyebrow{margin:0 40px 20px 0;font-size:12px;line-height:1.5}
.about-dialog>p:not(.about-credit){color:#c8d5e4;line-height:1.5;margin:0 0 10px}
.about-socials{display:flex;justify-content:center;gap:12px;margin-top:auto;padding-top:14px}
.about-socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid #4e6a7e;border-radius:50%;color:#aee4ff;text-decoration:none;transition:transform .2s,border-color .2s,background-color .2s}
.about-socials a:hover{transform:translateY(-2px);border-color:#8edaff;background:#243b4d}
.about-socials svg{width:20px;height:20px}
.about-dialog>p.about-credit{margin:0;padding-top:9px;color:#9aacbc;font-size:12px;letter-spacing:.05em;text-align:center}
.about-dialog label{margin-top:17px}
.about-dialog input{margin:0}
.about-dialog form>button{width:100%;margin-top:22px;transition:transform .35s cubic-bezier(.2,1.5,.35,1)}
.about-dialog form>button:not(:disabled):active{transform:scale(.97)}
.about-dialog #suggestionStatus{min-height:1.5em;margin:12px 0 0;color:#bfeaff;line-height:1.4}
.about-close{position:absolute;top:18px;right:18px;width:35px;height:35px;padding:0;border:1px solid #65839a;border-radius:50%;background:transparent;color:#edf4fb;font-size:24px;line-height:1}
@media(hover:hover){.about-dialog form>button:not(:disabled):hover{transform:translateY(-2px)}}
@media(max-width:540px){.site-header-top{align-items:flex-start}.site-header-top .eyebrow{max-width:210px;line-height:1.4}.about-trigger{font-size:13px;padding:8px 11px}}
@media(prefers-reduced-motion:reduce){.about-trigger,.about-dialog>*,.about-dialog form>button,.about-socials a{transition:none}.about-trigger:hover,.about-trigger:active,.about-dialog form>button:hover,.about-dialog form>button:active,.about-socials a:hover{transform:none}}

@media(max-width:800px){
 .site-header-top{flex-direction:column;align-items:stretch;gap:18px;margin-bottom:12px}
 .about-area{order:1;align-self:flex-end;gap:7px}
 .site-header-top .eyebrow{order:2}
 .about-invite{white-space:normal;font-size:12px}
 .about-invite span:first-child{max-width:130px}
 .about-chevron{font-size:24px}
}