:root{--color-bg: #1a1a2e;--color-surface: #222244;--color-input: #2a2a4e;--color-border: #444;--color-gold: #c8a040;--color-gold-hover: #f0d870;--color-muted: #a08050;--color-dim: #666;--color-text: #e0d0b0;--color-error: #e05050;--radius: 8px;--page-gap: 16px;--btn-size: min(84px, 13.125vmin);--dpad-btn-size: min(72px, 11.25vmin);--gap: 2vmin;--safe-padding: calc(var(--gap) * 2);--panel-size: clamp( calc(var(--dpad-btn-size) * 3 + var(--safe-padding) * 3 - var(--gap)), 20vw, 360px )}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{background:var(--color-bg);min-height:100dvh;font-family:sans-serif;color:#e0d0b0}#game-container button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}.btn-round{width:var(--btn-size);height:var(--btn-size);border-radius:50%;border:2px solid #666;background:#3a3a5e;color:#ccc;font-size:min(24px,3.85vmin);font-weight:700;display:grid;place-items:center;flex-shrink:0;transition:opacity .25s ease-out,transform .25s ease-out}[data-action=confirm],[data-action=float-confirm]{background:#4a7a4a;border-color:#6a9a6a}[data-action=rotate],[data-action=float-rotate]{background:#7a7a3a;border-color:#9a9a5a}[data-action=quit]{background:#7a3a3a;border-color:#9a5a5a}nav.dpad{display:grid;grid-template:repeat(3,var(--dpad-btn-size)) / repeat(3,var(--dpad-btn-size));gap:3vmin}nav.dpad button{border-radius:1vmin;background:#3a4a5e;border:2px solid #5a6a7e;color:#c0d0e0;font-size:min(24px,3.75vmin);font-weight:700;display:grid;place-items:center;transition:opacity .25s ease-out,transform .25s ease-out}nav.dpad .up{grid-area:1 / 2}nav.dpad .left{grid-area:2 / 1}nav.dpad .right{grid-area:2 / 3}nav.dpad .down{grid-area:3 / 2}.loupe{background:#2a2a3e;border:3px solid #555;border-radius:4px;flex-shrink:0}.zoom-group,.action-group{display:flex;gap:var(--gap)}.pressed{transform:scale(.88);opacity:.75}.disabled{opacity:.3;pointer-events:none}.disabled button{pointer-events:none}.hidden{visibility:hidden}.floating-actions{position:absolute;display:flex;gap:var(--gap);z-index:10;pointer-events:none;opacity:0;transform:translate(-50%);transition:opacity .12s ease-out}.floating-actions.visible{opacity:1}.floating-actions.visible .btn-round{pointer-events:auto}.floating-actions .btn-round.disabled{opacity:.55;pointer-events:none}#game-container{display:none;width:100vw;height:100dvh;background:var(--color-bg)}.canvas-stack{flex:1;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.canvas-stack>canvas{grid-row:1 / -1;grid-column:1 / -1;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;touch-action:none;background:transparent}#world-canvas{pointer-events:none}#game-container.active{display:flex}.left-handed{flex-direction:row-reverse}.landscape{display:none;flex-direction:column;justify-content:space-between;flex-shrink:0;background:var(--color-bg);gap:var(--gap)}.landscape .panel-top{display:flex;flex-direction:column;gap:var(--gap)}.landscape .panel-bottom{display:flex;flex-direction:column;gap:var(--safe-padding)}.has-touch-panels>.landscape{display:flex}.landscape.panel-left{align-items:start;width:var(--panel-size);padding:var(--safe-padding);container-type:size}.landscape.panel-left .panel-bottom{padding-inline-end:var(--safe-padding)}.landscape.panel-right{align-items:center;width:auto;padding:var(--safe-padding)}.landscape .loupe{--dpad-h: calc(var(--dpad-btn-size) * 3);--bottom-pad: var(--safe-padding);--available-h: calc( 100cqb - var(--dpad-h) - var(--bottom-pad) - var(--safe-padding) );--loupe-w: min(100cqi, calc(var(--available-h) * 5 / 6));width:var(--loupe-w);height:calc(var(--loupe-w) * 6 / 5)}.landscape .zoom-group,.landscape .action-group{flex-direction:column}.portrait{display:none}body.is-portrait{--dpad-btn-size: min(72px, 11.25vmin)}body.is-portrait .floating-actions .btn-round{width:min(72px,11.25vmin);height:min(72px,11.25vmin)}body.is-portrait .portrait-bottom .btn-round{flex-shrink:1}body.is-portrait .has-touch-panels>.landscape{display:none}body.is-portrait .has-touch-panels>.portrait{display:flex}body.is-portrait .has-touch-panels{flex-direction:column}body.is-portrait .has-touch-panels.left-handed>.portrait-top,body.is-portrait .has-touch-panels.left-handed>.portrait-bottom{flex-direction:row-reverse}body.is-portrait #game-container .canvas-stack{flex:2}body.is-portrait .portrait-top{flex:1 0 0;min-height:0;flex-direction:row;justify-content:space-between;align-items:start;padding:var(--gap);gap:var(--gap)}body.is-portrait .portrait-top .loupe{align-self:stretch;aspect-ratio:5 / 6;width:auto}body.is-portrait .portrait-top .btn-round{margin:var(--gap)}body.is-portrait.portrait-launched .portrait-top{flex:0 0 auto;align-self:end}body.is-portrait.portrait-launched .portrait-top .loupe{display:none}body.is-portrait.portrait-launched .has-touch-panels.left-handed>.portrait-top{align-self:start}body.is-portrait .portrait-bottom{flex-direction:row;justify-content:space-between;align-items:stretch;padding:var(--safe-padding);gap:var(--safe-padding);flex-shrink:0}body.is-portrait .portrait-bottom .dpad{align-self:end}body.is-portrait .portrait-bottom .controls{display:grid;grid-template:repeat(3,var(--btn-size)) / repeat(3,var(--btn-size));gap:1vmin;align-self:end}body.is-portrait .portrait-bottom .controls .zoom-group,body.is-portrait .portrait-bottom .controls .action-group{display:contents}body.is-portrait .portrait-bottom .controls [data-action=zoom-zone]{grid-area:1 / 2}body.is-portrait .portrait-bottom .controls [data-action=confirm]{grid-area:2 / 3}body.is-portrait .portrait-bottom .controls [data-action=rotate]{grid-area:3 / 2}body.portrait-launched #btn-online{display:none}.page{display:flex;height:100dvh;overflow-y:auto;padding:calc(var(--page-gap) * 1.5)}.page[hidden]{display:none}.page-content{margin:auto;max-width:400px;width:100%;text-align:center}.page-content--wide{max-width:720px;text-align:left;margin:calc(var(--page-gap) * 1.5) auto}.page h1{font-size:min(28px,5vw);color:var(--color-gold);margin-bottom:8px}.subtitle{font-size:14px;color:var(--color-muted);margin-bottom:calc(var(--page-gap) * 1.5);font-weight:400}.home-actions{display:flex;flex-direction:column;gap:var(--page-gap);align-items:center}.home-actions .lobby-btn{width:100%;max-width:280px;margin:0}.page-header{margin-bottom:calc(var(--page-gap) * 1.5)}.page-header .subtitle{margin-bottom:0}.server-bar{display:flex;align-items:center;gap:var(--page-gap);margin-bottom:var(--page-gap);padding:12px var(--page-gap);background:var(--color-input);border:1px solid var(--color-border);border-radius:var(--radius)}.server-bar label{font-size:14px;color:var(--color-muted);flex-shrink:0}.server-bar .lobby-input{flex:1;width:auto;margin:0;text-align:left;text-transform:none;letter-spacing:0;font-size:14px;border-color:var(--color-border)}.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--page-gap);margin-bottom:var(--page-gap)}@media(max-width:600px){.lobby-grid{grid-template-columns:1fr}}.lobby-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:calc(var(--page-gap) * 1.25);display:flex;flex-direction:column;transition:border-color .15s}.lobby-card:hover{border-color:color-mix(in srgb,var(--color-gold) 40%,transparent)}.lobby-card h2{font-size:15px;color:var(--color-gold);margin-bottom:var(--page-gap);text-transform:uppercase;letter-spacing:1px}.card-body{display:flex;flex-direction:column;gap:10px;flex:1}.card-body .lobby-btn{margin-top:auto;width:100%}.card-body .setting-row{margin:0}.card-hint{font-size:13px;color:var(--color-dim)}.card-body--join{text-align:center}.room-code-input{text-align:center;text-transform:uppercase;letter-spacing:6px;font-size:min(22px,4.5vw);padding:14px var(--page-gap)}.room-code-input::placeholder{letter-spacing:4px;font-size:16px}.rooms-section{padding-bottom:calc(var(--page-gap) * 1.5)}.rooms-section h2{font-size:13px;color:var(--color-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.lobby-btn{display:inline-block;padding:10px 24px;margin:6px;background:var(--color-gold);color:var(--color-bg);border:none;border-radius:var(--radius);font-size:15px;font-weight:700;cursor:pointer;transition:background .15s}.lobby-btn:hover{background:var(--color-gold-hover)}.lobby-btn:disabled{background:var(--color-dim);cursor:default}.lobby-btn.secondary{background:#3a3a5e;color:var(--color-gold)}.lobby-btn.secondary:hover{background:#4a4a7e}.lobby-input{padding:10px var(--page-gap);background:var(--color-input);color:var(--color-text);border:2px solid var(--color-gold);border-radius:var(--radius);font-size:14px}.lobby-input::placeholder{color:var(--color-dim);font-size:13px}.lobby-select{padding:8px 12px;margin:4px;background:var(--color-input);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius);font-size:14px}.setting-row{display:flex;justify-content:space-between;align-items:center;margin:8px 0}.setting-label{font-size:14px;color:var(--color-muted)}.room-list{margin-top:8px}.error-msg{display:block;color:var(--color-error);font-size:14px;margin:8px 0;min-height:20px}.room-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;margin:4px 0;background:var(--color-input);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;transition:border-color .15s,background .15s}.room-item:hover{border-color:var(--color-gold);background:color-mix(in srgb,var(--color-surface) 80%,var(--color-gold))}.room-code{font-size:18px;letter-spacing:4px;color:var(--color-gold);font-weight:700}.room-info{font-size:12px;color:var(--color-muted);text-align:right}.room-list-title{font-size:13px;color:var(--color-dim);margin-bottom:6px}.room-list-empty{font-size:13px;color:var(--color-border);font-style:italic}.sound-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center}.sound-modal[hidden]{display:none}.sound-modal-backdrop{position:absolute;inset:0;background:#000000a6}.sound-modal-panel{position:relative;background:var(--color-surface);border:1px solid var(--color-gold);border-radius:var(--radius);padding:calc(var(--page-gap) * 1.25);width:min(480px,calc(100vw - var(--page-gap) * 2));max-height:calc(100dvh - var(--page-gap) * 2);overflow-y:auto;color:var(--color-text);text-align:left}.sound-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.sound-modal-header h2{margin:0;font-size:1.1rem;color:var(--color-gold)}.sound-modal-close{background:transparent;border:none;color:var(--color-gold);font-size:1.1rem;cursor:pointer;padding:.25rem .5rem;line-height:1}.sound-modal-close:hover{color:var(--color-gold-hover)}.music-hint{margin:0 0 .75rem;color:#9a8a78;font-size:.85rem;line-height:1.4}.music-hint code{font-size:.8rem;color:#d5d9e0}.sound-source{display:grid;gap:.4rem;margin-top:.75rem}.sound-source-label{font-size:.8rem;color:var(--color-muted)}.sound-source-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:stretch}.sound-source-row .lobby-input{min-width:0}.sound-source-row .lobby-btn{margin:0}.sound-divider{display:flex;align-items:center;gap:.75rem;margin:1rem 0 .75rem;color:var(--color-dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.sound-divider:before,.sound-divider:after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--color-border),transparent 50%)}.sound-file-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.sound-file-actions .lobby-btn{margin:0}.music-status{display:block;margin-top:.75rem;padding:.45rem .7rem;background:#14182099;border-left:3px solid rgba(200,160,64,.4);border-radius:2px;font-size:.8rem;min-height:1.4rem;color:#c8d0dd}