:root{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#101a27;color:#f2f4f4}*{box-sizing:border-box}body{margin:0}#app{max-width:1370px;margin:auto;padding:20px 24px 12px}header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px}h1{margin:3px 0;font-size:clamp(27px,4vw,43px);letter-spacing:-1.8px;line-height:1.1}.period{color:#e2bd72}p{margin:7px 0 0}.eyebrow,.section-label{font-size:10px;letter-spacing:2px;font-weight:750;color:#8eabb9}header p{color:#a9b7c1;font-size:13px}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:stretch}.play-area{min-height:530px;position:relative;background:radial-gradient(ellipse at 50% 40%,#33465b 0%,#152436 58%,#0d1826 100%);overflow:hidden;border-radius:18px;touch-action:none;user-select:none}.play-area canvas{display:block;width:100%;height:100%}.scene-label{position:absolute;top:18px;left:20px;font-size:10px;letter-spacing:1.7px;color:#d1dce5;pointer-events:none}.scene-footer{position:absolute;bottom:16px;left:20px;right:20px;display:flex;justify-content:space-between;color:#aec1d0;font-size:11px;pointer-events:none}.status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:80%;padding:14px;background:#101a27d9;border:1px solid #648295;border-radius:10px;text-align:center;z-index:3;font-size:13px}.status.hidden{display:none}.panel{border-radius:18px;background:#1a2939;padding:18px;min-width:0}.section-label{margin:0 0 12px}.section-spaced{margin-top:22px}.segmented{display:flex;gap:3px;background:#101d2b;border-radius:9px;padding:4px}.segmented button{flex:1;border:0;padding:9px 4px;background:transparent;color:#adc0d2;border-radius:6px;font-size:12px}.segmented button.active{background:#d6b77b;color:#142437;font-weight:800}.hint{font-size:12px;line-height:1.45;color:#aec0cc;min-height:35px;margin:11px 0}.actions{display:flex;gap:8px;margin-top:8px}.actions button{flex:1;min-width:0}button{cursor:pointer;background:#293e52;color:#e8f0f3;border:1px solid #496074;border-radius:8px;padding:10px 11px;font-size:12px;font-weight:650}button:active{transform:translateY(1px)}button:hover{background:#38566f}.small{border-radius:50%;width:35px;height:35px;padding:0;font-size:18px}.control{display:block;margin:14px 0}.control span{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#dbe4e9}.control output{color:#edc887;font-variant-numeric:tabular-nums}.control input{width:100%;margin-top:8px;accent-color:#e3b96a}.check{display:flex;gap:9px;align-items:center;font-size:12px;margin-top:15px;color:#d6e0e6}.check input{accent-color:#d9b87e}.tip{padding:12px;margin-top:19px;background:#122335;border-left:2px solid #e8b976;color:#a9bfcc;font-size:12px;line-height:1.5}.tip strong{color:#f1d39e}footer{font-size:11px;color:#718c9f;display:flex;justify-content:space-between;padding:14px 4px}.overlay{position:fixed;inset:0;background:#08121bdb;display:flex;align-items:center;justify-content:center;z-index:10;padding:20px}.hidden{display:none}.modal{background:#1c3042;padding:25px;max-width:420px;border-radius:14px;box-shadow:0 15px 80px #0008}.modal h2{margin:0 0 12px}.modal p{font-size:14px;color:#c2d2df;line-height:1.55;margin:12px 0}.modal button{margin-top:12px;width:100%;background:#d6b77b;color:#172638;border:0}@media(max-width:850px){#app{padding:12px}main{grid-template-columns:1fr}header{padding:7px 3px 13px}.play-area{height:min(64vh,570px);min-height:340px}.panel{padding:18px}footer{flex-wrap:wrap;gap:8px}}@media(max-width:430px){.play-area{height:49vh;min-height:310px}.scene-label{font-size:9px}.scene-footer{font-size:10px}.panel{padding:15px}}
/* Prevent rapid repeated control taps from triggering mobile browser double-tap zoom.
   Keep page-level pinch zoom available for accessibility. */
button, input[type="range"], .segmented, .actions { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }