/* Ludorill studio ident. Standalone page; tokens mirror style.css. */
:root{
 --ink:#120f10;--ink-2:#1a1517;--ink-deep:#0c0a0b;
 --bone:#f2eadb;--muted:#b9ae9c;--dim:#8f8474;--brass:#d9b26a;
 --line:rgba(242,234,219,.12);
 --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
 --pad:clamp(16px,4vw,48px);
 color-scheme:dark;background:var(--ink-deep);color:var(--bone);font-family:var(--sans);font-synthesis:none;-webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
:root[data-entry=true] .review,:root[data-entry=true] .replay{display:none!important}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:4px}

/* Letterbox bands carry every control, so the stage itself stays clean */
.band{display:flex;align-items:center;gap:12px;padding:8px var(--pad);background:var(--ink-deep)}
.band-top{justify-content:flex-end;min-height:52px}
.btn.sound{margin-right:auto;font-size:12px;min-height:44px;padding:0 14px;color:var(--muted)}
.sound[aria-pressed=true]{color:var(--brass);border-color:var(--brass)}
.band-foot{padding-top:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}

/* Stage */
.stage{position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;padding:clamp(20px,5vh,56px) var(--pad);background:var(--ink)}
.warmth{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.7;background:radial-gradient(ellipse 55% 60% at 50% 46%,rgba(124,36,28,.5),rgba(74,22,20,.2) 48%,rgba(18,15,16,0) 74%)}
.title{margin:0;font-size:inherit;line-height:0}
.mark{display:block;width:88vw;max-width:720px;height:auto;overflow:visible}
.mark{width:min(720px,88vw,max(240px,calc((100vh - 210px) * 1.33)))}
@supports (height:100svh){.mark{width:min(720px,88vw,max(240px,calc((100svh - 210px) * 1.33)))}}

/* Set by the inline head script only when the ident will autoplay. splash.js removes it
   after posing frame 0; if the script never runs, the finished mark fades in by itself. */
.intro .mark{opacity:0;animation:lr-failsafe .3s linear 2.5s forwards}
@keyframes lr-failsafe{to{opacity:1}}

/* Ident controls */
.cine{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:0 18px;border:1px solid rgba(217,178,106,.45);border-radius:999px;background:transparent;color:var(--bone);font:600 15px/1.2 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:hover{border-color:var(--brass)}
.enter{margin-left:auto;background:var(--brass);border-color:var(--brass);color:var(--ink)}
.enter:hover{background:#e6c587;border-color:#e6c587}
/* While the ident runs the way out stays available, just quieter */
:root[data-state=playing] .enter,:root[data-state=paused] .enter{background:transparent;border-color:rgba(242,234,219,.24);color:var(--muted);font-weight:500}
:root[data-state=playing] .enter:hover,:root[data-state=paused] .enter:hover{border-color:var(--brass);color:var(--bone)}
/* visibility, not display: nothing shifts under a finger when Skip goes away */
:root[data-state=done] .skip{visibility:hidden}

/* Preview control: a review tool, deliberately styled apart from the stage */
.review{display:grid;justify-items:end;gap:6px;max-width:100%;color:var(--muted);font-size:13px}
.review summary{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 4px;color:var(--dim);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;list-style:none}
.review summary::-webkit-details-marker{display:none}
.review summary::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
.review[open] summary::before{transform:translateY(1px) rotate(-135deg)}
.review summary:hover{color:var(--muted)}
.review-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 14px;max-width:560px;padding:10px 12px;border:1px dashed rgba(242,234,219,.22);border-radius:10px}
.r-play{min-width:72px;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:var(--ink-2);color:var(--bone);font:600 13px/1 var(--sans);cursor:pointer}
.r-play:hover{border-color:rgba(217,178,106,.55)}
.r-scrub{width:min(300px,60vw);height:28px;margin:0;accent-color:var(--brass)}
.r-time{min-width:11ch;color:var(--bone);font-variant-numeric:tabular-nums}
.r-state{color:var(--brass)}
.r-note{flex-basis:100%;margin:0;color:var(--dim);font-size:12px;text-align:right}

@media(prefers-reduced-motion:no-preference){
 .btn,.r-play{transition:background-color .2s,border-color .2s,color .2s}
}

/* Narrow portrait (390 / 320) */
@media(max-width:560px){
 .band-top{flex-wrap:wrap}
 .review{max-width:100%}
 .review[open]{width:100%;order:1}
 .review-panel{justify-content:flex-start;width:100%}
 .r-scrub{flex:1 1 100%;width:100%}
 .r-note{text-align:left}
 .btn{padding:0 16px}
}
@media(max-width:360px){
 .cine{gap:8px}
 .btn{padding:0 14px}
}
/* Short landscape: give the stage the height */
@media(max-height:480px){
 .band-top{min-height:44px}
 .band-foot{padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
}