* { box-sizing: border-box; }
:root { font-family: system-ui, sans-serif; color: #f6e5ce; background: #211f36; }
body { margin: 0; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
header { display: flex; align-items: center; justify-content: space-between; padding: 12px; gap: 8px; }
small { font-size: 10px; letter-spacing: .15em; color: #d3b895; }
h1 { margin: 3px 0; font-size: clamp(17px, 4.7vw, 24px); font-weight: 650; }
#clock { min-width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #b78c58; border-radius: 50%; font-variant-numeric: tabular-nums; }
#stage { position: relative; min-height: 0; touch-action: none; overflow: hidden; outline-offset: -3px; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#chapter { position: absolute; top: 10px; width: 100%; text-align: center; font-size: 12px; pointer-events: none; }
#veil { position: absolute; inset: 0; display: grid; place-content: center; background: #211f36e8; text-align: center; }
#veil[hidden] { display: none; }
footer { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #56435a; }
#message { margin: 0 0 8px; font-size: 13px; min-height: 32px; }
.controls { display: flex; align-items: center; gap: 8px; }
.controls span { flex: 1; font-size: 11px; }
button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #c7a374; border-radius: 12px; background: #3e344b; color: #fff0da; font: inherit; font-size: 13px; cursor: pointer; }
button:focus-visible, #stage:focus-visible { outline: 2px solid #a3edce; }
@media (max-width: 350px) { header, footer { padding: 8px; } }
@media (max-height: 450px) {
  body { grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  header { flex-wrap: wrap; padding: 8px; } h1 { font-size: 18px; }
  #stage { grid-column: 2; grid-row: 1 / 3; } footer { padding: 8px; }
  .controls { flex-wrap: wrap; } .controls span { flex-basis: 100%; }
}

[hidden] { display: none !important; }
.back { display:grid; place-items:center; min-width:44px; height:44px; color:#f2ca69; text-decoration:none; border:1px solid #b78c58; border-radius:12px; }
body[data-production] .controls { flex-wrap:wrap; gap:4px; }
body[data-production] button { padding:8px; }
.storage { display:flex; align-items:center; gap:4px; font-size:10px; margin-top:4px; min-height:16px; }
dialog { color:#ffedcc; background:#292238; border:2px solid #b98355; border-radius:18px; width:min(420px,calc(100vw - 24px)); max-height:calc(100dvh - 16px); padding:16px; }
dialog::backdrop { background:#151126c9; }
dialog h2 { font-size:20px; margin:0 0 8px; }
dialog p { font-size:13px; margin:8px 0; }
#poster-preview { display:block; width:100%; height:min(32dvh,240px); background:#ffe8bc; border:6px double #b98355; border-radius:4px; }
#loading { position:absolute; inset:0; display:grid; place-content:center; padding:20px; background:#211f36; z-index:3; }
@media(max-height:450px) {
 body[data-production] { grid-template-columns:230px minmax(0,1fr); }
 body[data-production] header { gap:4px; }
 body[data-production] h1 { font-size:16px; }
 dialog { padding:10px; }
 #poster-preview { height:100px; }
}