:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #e6f5d7; background: #153c3c; }
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
header { padding: max(16px,env(safe-area-inset-top)) 20px 10px; display: flex; align-items: center; justify-content: space-between; }
small { font-size: 10px; letter-spacing: .18em; color: #b4d2b4; }
h1 { margin: 4px 0; font-size: clamp(19px,5vw,26px); font-weight: 650; }
output { font-size: 25px; font-variant-numeric: tabular-nums; color: #ffcd8c; }
#stage { position: relative; min-height: 0; outline-offset: -3px; touch-action: none; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.directions { position: absolute; inset: auto 18px 12px; display: flex; justify-content: space-between; pointer-events: none; color: #c2ddc1; font-size: 9px; letter-spacing: .12em; }
footer { padding: 12px 20px max(16px,env(safe-area-inset-bottom)); background: #123332; border-top: 1px solid #426158; }
.beat { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #ffd394; }
#beat-light { width: 10px; height: 10px; border-radius: 50%; background: #ffcf89; }
p { font-size: 13px; line-height: 1.45; margin: 10px 0 14px; min-height: 38px; }
.controls { display: flex; align-items: center; gap: 8px; }
.controls span { flex: 1; font-size: 10px; line-height: 1.6; color: #b6d3bd; }
button { min-height: 44px; border: 1px solid #7eac91; border-radius: 12px; background: #28594e; padding: 8px 13px; color: #f1f5dc; font: inherit; font-size: 13px; cursor: pointer; touch-action: manipulation; }
button:focus-visible, #stage:focus-visible { outline: 2px solid #ffcc88; }
#veil { position: absolute; inset: 0; background: #123332dd; display: grid; place-content: center; text-align: center; z-index: 2; }
#veil[hidden] { display: none; }
#veil p { min-height: 0; }
@media (max-height: 450px) { body { grid-template-columns: minmax(0,1fr) 240px; grid-template-rows: auto minmax(0,1fr); } header { padding: 6px 16px; } #stage { grid-column: 1; } footer { grid-column: 2; grid-row: 1 / 3; align-content: center; padding: 16px; } h1 { font-size: 18px; } }
.production header { gap: 8px; padding: max(10px,env(safe-area-inset-top)) 12px 8px; }
.production header > div { flex: 1; }
.production h1 { font-size: clamp(17px,4.5vw,24px); }
.back { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid #7eac91; border-radius: 12px; color: #e6f5d7; text-decoration: none; }
#chapter { position: absolute; inset: 8px 0 auto; text-align: center; font-size: 12px; color: #ffdbab; pointer-events: none; }
.production footer { padding: 10px 12px max(10px,env(safe-area-inset-bottom)); }
.production .controls button { flex: 1; min-width: 44px; }
.preferences { margin-top: 8px; }
#save-status { display: block; margin-top: 8px; font-size: 10px; line-height: 1.35; color: #b6d3bd; }
dialog { width: min(420px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 16px; border: 1px solid #a4c593; border-radius: 18px; background: #173e38; color: #e6f5d7; }
dialog::backdrop { background: #061c21bf; }
dialog h2 { margin: 0 0 10px; font-size: 19px; }
dialog p { min-height: 0; margin: 8px 0; font-size: 12px; }
#field-preview { display: block; width: 100%; height: 120px; }
#reward-status { color: #ffcf89; }
@media (max-height: 450px) { .production { grid-template-columns: minmax(0,1fr) 250px; } .production header { padding: 6px 12px; } .production footer { padding: 12px; } #field-preview { height: 100px; } }