/* Carnaval Riojano: shared visual layer for the arcade, game and editor.
   Official source values and self-hosted fonts: assets/design-system/tokens.css. */
:root{--bg:var(--surface-page);--panel:var(--surface-card);--white:var(--text-strong);--muted:var(--text-muted);--line:var(--border-hairline);--lime:var(--blue-500);--pink:var(--pink-500);--dur-fast:160ms;--ease-out:cubic-bezier(.2,.8,.2,1)}
body,body:has(#arcade-hub:not([hidden])){background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);line-height:1.6}
button,input,select,.file{font-family:var(--font-body)}
h1,h2,h3,.primary,.poster-action,.hud b,.result-score{font-family:var(--font-display);font-style:normal;letter-spacing:-.02em;font-weight:800}
button,a,input,select{touch-action:manipulation}button,.quiet,.file,select,input[type=number]{min-height:var(--tap-min)}
a{color:var(--link)}button{transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast)}
:is(a,button,input,select):focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
.top{padding:16px max(24px,calc((100vw - 1200px)/2));border-bottom:2px solid var(--blue-500);background:var(--cream-50);gap:24px}
.brand{display:flex;align-items:center;gap:20px;text-decoration:none}.brand img{width:145px;height:70px;object-fit:contain}.brand-section{font:800 12px var(--font-display);letter-spacing:.15em;border-left:1px solid var(--border-hairline);padding-left:20px;color:var(--blue-500)}
.event{color:var(--text-muted);font-size:10px}.quiet{background:var(--surface-raised);border:2px solid var(--blue-500);color:var(--blue-500);border-radius:var(--radius-pill);padding:10px 16px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.arcade-hub{max-width:var(--content-max);padding:0 24px;margin:32px auto 48px}.arcade-hub>.quiet{font-size:12px}.hub-heading{margin:24px 0 32px;gap:16px}.hub-heading>p{color:var(--pink-600);font:700 11px var(--font-display);letter-spacing:.15em;margin:0}
.hub-heading h1{font-family:var(--font-display);font-style:normal;color:var(--blue-500);font-size:clamp(44px,7vw,88px);letter-spacing:-.035em;line-height:.96;margin:0}
.hub-caption{transform:none;color:var(--blue-500);border-color:var(--yellow-400);font-weight:700;font-size:10px;letter-spacing:.08em}
.game-posters{grid-template-columns:1fr;gap:24px}.game-poster{transform:none;background:var(--surface-card);color:var(--text-strong);border:2px solid var(--border-strong);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sticker);min-height:0;overflow:hidden}
.poster-meta{font-size:10px;align-items:center;letter-spacing:.02em;margin-bottom:18px;color:var(--blue-500)}.availability{border:0;border-radius:var(--radius-pill);padding:6px 8px;background:var(--cream-100);color:var(--text-muted);font-size:9px}.rhythm .availability{background:var(--yellow-400);color:var(--ink-900)}
.poster-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-md);margin:0 0 22px}
.game-poster h2{font:800 clamp(28px,3vw,38px)/1.08 var(--font-display);letter-spacing:-.035em;margin:0 0 14px;color:var(--blue-500)}.game-poster>p{font-size:14px;line-height:1.6;max-width:none;min-height:46px;margin-bottom:24px}
.poster-action,.poster-unavailable{width:100%;margin:auto 0 0;padding:13px 18px;border-radius:var(--radius-pill);font:700 14px var(--font-display);min-height:48px;border:2px solid var(--ink-900)}
.poster-action,.primary{background:var(--pink-500);color:white;border:2px solid var(--ink-900);box-shadow:var(--shadow-sticker-sm);border-radius:var(--radius-pill)}.poster-unavailable{background:var(--ink-100);color:var(--ink-500);border-color:transparent;font-style:normal}.poster-unavailable span{display:none}.hub-note{font:500 14px var(--font-body);color:var(--text-muted);margin-top:36px}
footer{border-top:8px solid transparent;border-image:repeating-linear-gradient(135deg,var(--pink-500) 0 16px,var(--yellow-400) 16px 32px,var(--blue-500) 32px 48px) 8;background:var(--cream-100);color:var(--text-muted);font-size:10px;line-height:1.6}
.player{border:2px solid var(--ink-900);border-radius:var(--radius-lg);box-shadow:var(--shadow-sticker);background:var(--surface-card)}.tag{border:0;border-radius:var(--radius-pill);color:var(--blue-500);background:var(--blue-50);font-size:10px}.disc{background:transparent;border:0;padding:4px;object-fit:contain}.song-title h2{color:var(--blue-500)}
.song-title p,.instructions,.status,.help{font-size:12px}.section-label{font-size:11px}.mobile-notice{background:var(--cream-100);border-color:var(--yellow-400)}.song-phases li{font-size:11px}.song-phases small{font-size:10px}
.preview-lanes>div{background:var(--blue-500);border-color:var(--cyan-500)}.preview-lanes i{background:var(--yellow-400);box-shadow:none}.preview-lanes>div:nth-child(3) i{background:var(--cyan-500)}.preview-lanes kbd{color:white;border-color:var(--cream-50)}.preview-lanes .hit-line{border-color:var(--cream-50)}
.result-icon{display:block;margin:16px auto 24px;object-fit:contain}.result-score{color:var(--blue-500)}.stats small{font-size:11px}.record>span,.record small{font-size:10px}
dialog{background:var(--surface-card);border:2px solid var(--ink-900);box-shadow:var(--shadow-soft-lg);color:var(--text-body)}dialog::backdrop{background:rgb(30 30 36 / .72);backdrop-filter:none}dialog h2{color:var(--blue-500)}
body.playing{--muted:var(--ink-300);--lime:var(--yellow-400);--white:var(--cream-50);--focus-ring:var(--yellow-400);background:var(--ink-950);color:var(--cream-50)}.playing .player{background:var(--ink-900)}.playing .song-title h2{color:var(--cream-50)}.playing .disc{background:var(--cream-50)}.playing .hud>div:nth-child(2) b,.playing .phase-strip>span.current{color:var(--yellow-400);border-color:var(--yellow-400)}.playing .progress i{background:var(--yellow-400)}.playing .overlay,#start-gate{background:rgb(30 30 36 / .94)}.playing .quiet{color:var(--cream-50);border-color:var(--cream-50);background:var(--ink-900)}.start-pads button{background:var(--yellow-400);border-color:var(--cream-50);color:var(--ink-900)}.start-pads button.pressed{background:var(--cream-50);box-shadow:0 0 0 4px var(--yellow-400)}
.editor-page{--surface:var(--surface-card);--border:var(--border-hairline);--accent:var(--pink-500);font-size:14px}.editor-page header{background:var(--cream-50);border-bottom:2px solid var(--blue-500);color:var(--blue-500)}.editor-page header a{color:var(--blue-500)}.editor-page header span{color:var(--text-muted)}
.editor-page aside{background:var(--surface-card);border-color:var(--border-hairline)}.editor-page aside h2,.editor-page aside label{color:var(--text-strong)}.editor-page aside input[type=number],.editor-page aside select{background:var(--surface-page);color:var(--text-strong);border-color:var(--cream-300);border-radius:var(--radius-sm)}
.editor-page button,.editor-page .file{background:var(--surface-raised);color:var(--blue-500);border:1px solid var(--blue-500);border-radius:var(--radius-sm)}.editor-page .primary,.editor-page .mode-group button.active{background:var(--pink-500);color:white}.editor-page button:disabled,.editor-page fieldset:disabled button{background:var(--ink-200);color:var(--ink-500);border-color:transparent;box-shadow:none;opacity:1;cursor:not-allowed}
.editor-page .help,.editor-page .guide,.editor-page .toolbar-help{color:var(--text-muted)}.editor-page #message{background:var(--surface-card);color:var(--blue-500)}.editor-page #message.error{color:var(--pink-600)}.editor-page .workspace{background:var(--ink-900)}.editor-page .transport,.editor-page .edit-toolbar,.editor-page .guide{background:var(--cream-100);color:var(--text-body)}.editor-page .transport label{color:var(--text-body)}.editor-page .edit-toolbar{padding-bottom:12px}.editor-page .lane-head{background:var(--blue-500);color:white}.editor-page .lane-head span{color:white}.editor-page #grid{background:linear-gradient(90deg,var(--ink-800) 90px,transparent 90px)}
.editor-page .note{background:var(--yellow-400);color:var(--ink-900);border-color:var(--cream-50)}.editor-page .note.swipe{background:var(--cyan-500);color:var(--ink-950)}.editor-page .note.slide{background:var(--pink-500);color:white}.editor-page .slide-path{background:var(--pink-500)}.editor-page .note.selected{outline:3px solid var(--cream-50);background:var(--cream-50);color:var(--ink-900)}.editor-page #grid:focus-visible{outline:3px solid var(--yellow-400);outline-offset:-3px}.editor-page #playhead{background:var(--pink-500)}
@media(min-width:768px){.game-posters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.game-posters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:479px){.top{padding:12px 24px}.brand img{width:118px;height:56px}.brand-section{display:none}.hub-caption{font-size:8px;padding:8px;letter-spacing:0}.hub-heading{gap:8px}.game-poster{padding:18px}.player{padding:20px}.song-phases{gap:6px}.editor-page header{gap:12px}.editor-page header h1{font-size:14px}}
@media(hover:hover) and (pointer:fine){.primary:hover,.poster-action:hover{background:var(--pink-600);color:white;transform:translate(-2px,-2px);box-shadow:var(--shadow-sticker)}.quiet:hover{background:var(--blue-50)}.editor-page button:hover:not(:disabled),.editor-page .file:hover{background:var(--blue-50);color:var(--blue-500)}}
.primary:active,.poster-action:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink-900)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important;scroll-behavior:auto!important}.primary:hover,.poster-action:hover,.primary:active,.poster-action:active{transform:none}}