:root{--bg-main: #060d15;--bg-shell: #0b1a27;--bg-card: #102739;--bg-card-soft: #14354c;--text-main: #e9f4ff;--text-muted: #acc2d4;--line-main: #2f5368;--line-soft: #3d637b;--accent-main: #70d6ff;--accent-strong: #9be564;--danger-soft: #ff8a65;color:var(--text-main);font-family:Trebuchet MS,Segoe UI,Tahoma,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}body{min-width:320px;background:radial-gradient(circle at 12% 10%,rgba(112,214,255,.2),transparent 35%),radial-gradient(circle at 85% 78%,rgba(155,229,100,.12),transparent 34%),linear-gradient(145deg,#050d14,#091725 60%,#06111b)}.app-shell{display:grid;grid-template-rows:auto 1fr;gap:clamp(4px,1vw,12px);width:100%;height:100%;padding:clamp(4px,1.4vw,16px);min-height:0}.title-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(6px,1.2vw,12px);min-height:clamp(40px,7vh,64px);padding:clamp(4px,1vh,10px) clamp(6px,1.2vw,12px);border-radius:clamp(8px,1.4vw,14px);border:1px solid var(--line-main);background:linear-gradient(180deg,rgba(112,214,255,.08),transparent 25%),linear-gradient(140deg,#0b1a27f5,#091521eb);box-shadow:inset 0 1px #ffffff0a,0 14px 24px #00000042}.icon-button{width:clamp(32px,5vh,42px);height:clamp(32px,5vh,42px);padding:clamp(6px,1vh,9px) 8px;display:grid;align-content:center;gap:clamp(4px,.8vh,6px);border-radius:10px;border:1px solid var(--line-soft);background:linear-gradient(180deg,#163850,#0f283b)}.icon-button span{display:block;width:100%;height:2px;border-radius:99px;background:var(--text-main);transition:transform .14s ease,opacity .14s ease}.icon-button.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}.icon-button.active span:nth-child(2){opacity:0}.icon-button.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.title-copy{display:flex;align-items:center;min-width:0;overflow:hidden}.title-line{margin:0;display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap;font-size:clamp(1.06rem,1.8vw,1.45rem);letter-spacing:.03em}.menu-tag{margin:0;color:var(--accent-main);font-size:.8rem;text-transform:uppercase;letter-spacing:.16em}.title-tag{flex:0 0 auto}.title-divider{color:var(--line-soft);flex:0 0 auto;font-size:.9em}.title-name{min-width:0;overflow:hidden;text-overflow:ellipsis}.title-actions{display:flex;align-items:center}.transport-btn{width:clamp(38px,6vh,52px);min-width:clamp(38px,6vh,52px);height:clamp(32px,5vh,42px);padding:0;display:grid;place-items:center}.transport-icon{display:block}.transport-icon.play{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid var(--text-main);margin-left:2px}.transport-icon.stop{width:13px;height:13px;border-radius:2px;background:var(--text-main)}.stage-shell{position:relative;min-height:0;height:100%}.menu-backdrop{position:absolute;inset:0;z-index:20;background:#020a128f;opacity:0;pointer-events:none;transition:opacity .17s ease}.menu-backdrop.open{opacity:1;pointer-events:auto}.menu-panel{position:absolute;top:0;left:0;bottom:0;z-index:30;width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;gap:12px;min-height:0;padding:14px;border-radius:16px;border:1px solid var(--line-main);background:linear-gradient(180deg,rgba(112,214,255,.08),transparent 25%),linear-gradient(140deg,#0b1a27f2,#091521e6);box-shadow:inset 0 1px #ffffff0a,0 18px 28px #00000047;overflow-y:auto;transform:translate(calc(-100% - 16px));transition:transform .19s ease}.menu-panel.open{transform:translate(0)}.menu-subtitle{margin:0;color:var(--text-muted);font-size:.9rem;line-height:1.35}.menu-block{display:grid;gap:10px;flex-shrink:0;padding:10px;border-radius:12px;border:1px solid var(--line-soft);background:linear-gradient(160deg,#14354c7a,#10273961)}.menu-block h2{margin:0;font-size:.92rem;color:var(--accent-main);letter-spacing:.06em;text-transform:uppercase}label{display:grid;gap:6px;font-size:.9rem;color:var(--text-main)}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}input[type=number],input[type=range],select{width:100%;border-radius:8px;border:1px solid var(--line-soft);background:#05111be0;color:var(--text-main);font:inherit}input[type=number],select{padding:8px 10px}input[type=range]{accent-color:var(--accent-main)}.checkbox{display:flex;align-items:center;gap:8px}.checkbox input{width:16px;height:16px;accent-color:var(--accent-main)}.menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.compact-range{display:grid;grid-template-columns:auto minmax(110px,1fr) auto;align-items:center;gap:8px}.compact-range-label{color:var(--text-main);font-size:.9rem}.compact-range-value{color:var(--text-main);font-family:Consolas,Lucida Console,monospace;font-size:.84rem;white-space:nowrap}.view-controls{display:grid;gap:8px}.zoom-row{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}button.view-btn{padding:8px 6px;font-size:.9rem}button.view-toggle{padding:8px}button.active{border-color:#4f9ec1;background:linear-gradient(180deg,#2f6f92,#1b4c67)}.controls-block .hint{margin:0}.pattern-copy{margin:0;color:var(--text-muted);font-size:.84rem;line-height:1.35}.pattern-actions{display:grid;grid-template-columns:1fr;gap:8px}.pattern-mirror-grid{display:grid;grid-template-columns:1fr;gap:4px;align-content:end}button{padding:10px 8px;border-radius:10px;border:1px solid var(--line-soft);background:linear-gradient(180deg,#163850,#0f283b);color:var(--text-main);font:inherit;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:transform .11s ease,filter .11s ease,border-color .11s ease}button.primary{border-color:#4f9ec1;background:linear-gradient(180deg,#2f6f92,#1b4c67)}button.danger{border-color:#b85a53;background:linear-gradient(180deg,#8a3e39,#5f2a29)}button.wide{grid-column:1 / -1}button:hover{filter:brightness(1.08);transform:translateY(-1px)}button:active{transform:translateY(0)}.stat-block{min-height:0}.status-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-family:Consolas,Lucida Console,monospace;font-size:.8rem}.status-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-width:0;padding:4px 6px;border-radius:8px;border:1px solid rgba(61,99,123,.35);background:#071b2a73}.status-key{color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-value{text-align:right;color:var(--text-main);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hint{margin:0;color:var(--text-muted);font-size:.82rem;line-height:1.35}code{padding:1px 4px;border-radius:6px;border:1px solid rgba(61,99,123,.6);background:#071b2a73;font-family:Consolas,Lucida Console,monospace;font-size:.82em}kbd{display:inline-block;min-width:1.4em;padding:2px 5px;border-radius:6px;border:1px solid rgba(255,255,255,.25);background:#ffffff1a;font-family:Consolas,Lucida Console,monospace;text-align:center}.board-panel{height:100%;min-height:0;border-radius:clamp(8px,1.4vw,16px);border:1px solid var(--line-main);overflow:hidden;background:linear-gradient(180deg,#70d6ff14,#00000026),linear-gradient(160deg,var(--bg-shell),var(--bg-main));box-shadow:inset 0 1px #ffffff0a,0 20px 32px #0000004d}#phaser-root{width:100%;height:100%;min-height:320px}@media(max-width:980px){.menu-panel{width:min(92vw,360px)}}@media(max-width:580px){.title-line{gap:6px;font-size:1.02rem}.menu-tag{font-size:.72rem;letter-spacing:.14em}.status-list{grid-template-columns:1fr}#phaser-root{min-height:200px}}@media(max-width:380px){.title-divider,.title-tag{display:none}.title-line{font-size:1rem}.compact-range{grid-template-columns:auto minmax(0,1fr)}.compact-range-value{grid-column:1 / -1;justify-self:end}.zoom-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-height:500px){.app-shell{gap:3px;padding:3px}.title-bar{min-height:34px;padding:3px 8px;border-radius:8px}.title-line{font-size:.9rem}.title-divider,.title-tag{display:none}#phaser-root{min-height:160px}}