:root{--color-bg:#1a1a2e;--color-surface:#224;--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(48px, 12.5vmin);--dpad-btn-size:min(48px, 12.5vmin);--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)}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{background:var(--color-bg);color:#e0d0b0;min-height:100dvh;font-family:sans-serif}#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);color:#ccc;background:#3a3a5e;border:2px solid #666;border-radius:50%;flex-shrink:0;place-items:center;font-size:min(24px,5vmin);transition:opacity .25s ease-out,transform .25s ease-out;display:grid}[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}.dpad{width:calc(var(--dpad-btn-size) * 3);height:calc(var(--dpad-btn-size) * 3);color:#c0d0e0;touch-action:none;background-color:#0000;background-image:radial-gradient(circle at 50% 12%,#c0d0e0 0 1.2vmin,#0000 1.4vmin),radial-gradient(circle at 88%,#c0d0e0 0 1.2vmin,#0000 1.4vmin),radial-gradient(circle at 50% 88%,#c0d0e0 0 1.2vmin,#0000 1.4vmin),radial-gradient(circle at 12%,#c0d0e0 0 1.2vmin,#0000 1.4vmin),radial-gradient(circle,#4a5b72 0%,#2e3a4a 70%,#1f2734 100%);background-position:0 0;background-repeat:repeat;background-size:auto;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border:2px solid #5a6a7e;border-radius:50%;transition:opacity .25s ease-out,transform .25s ease-out}.loupe{background:#2a2a3e;border:3px solid #555;border-radius:4px;flex-shrink:0}.zoom-group,.action-group{gap:var(--gap);display:flex}.pressed{opacity:.75;transform:scale(.88)}.disabled{opacity:.3;pointer-events:none}.disabled button{pointer-events:none}.hidden{visibility:hidden}.floating-actions{gap:var(--gap);z-index:10;pointer-events:none;opacity:0;transition:opacity .12s ease-out;display:flex;position:absolute;transform:translate(-50%)}.floating-actions.visible{opacity:1}.floating-actions.visible .btn-round{pointer-events:auto}.floating-actions .btn-round.disabled{opacity:.55;pointer-events:none}.floating-actions.visible.faded{opacity:.3}#game-container{background:var(--color-bg);width:100vw;height:100dvh;display:none}.canvas-stack{flex:1;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);min-width:0;min-height:0;display:grid}.canvas-stack>canvas{object-fit:contain;width:100%;height:100%;image-rendering:pixelated;touch-action:none;background:0 0;grid-area:1/1/-1/-1}#world-canvas{pointer-events:none}#game-container.active{display:flex}.left-handed{flex-direction:row-reverse}.landscape{background:var(--color-bg);justify-content:space-between;gap:var(--gap);flex-direction:column;flex-shrink:0;display:none}.landscape .panel-top{gap:var(--gap);flex-direction:column;display:flex}.landscape .panel-bottom{gap:var(--safe-padding);flex-direction:column;display:flex}.has-touch-panels>.landscape{display:flex}.landscape.panel-left{width:var(--panel-size);padding:var(--safe-padding);align-items:start;container-type:size}.landscape.panel-left .panel-bottom{padding-inline-end:var(--safe-padding)}.landscape.panel-right{width:auto;padding:var(--safe-padding);align-items:center}.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 .floating-actions .btn-round{width:min(72px,12.5vmin);height:min(72px,12.5vmin)}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{min-height:0;padding:var(--gap);justify-content:space-between;align-items:start;gap:var(--gap);flex-direction:row;flex:1 0 0}body.is-portrait .portrait-top .loupe{aspect-ratio:5/6;align-self:stretch;width:auto}body.is-portrait .portrait-top .btn-round{margin:var(--gap)}body.is-portrait.portrait-launched .portrait-top{flex:none;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{padding:var(--safe-padding);justify-content:space-between;align-items:stretch;gap:var(--safe-padding);flex-direction:row;flex-shrink:0}body.is-portrait .portrait-bottom .dpad{align-self:center}body.is-portrait .portrait-bottom .controls{grid-template:repeat(3, var(--btn-size)) / repeat(3, var(--btn-size));align-self:center;display:grid}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{height:100dvh;padding:calc(var(--page-gap) * 1.5);display:flex;overflow-y:auto}.page[hidden]{display:none}.page-content{text-align:center;width:100%;max-width:400px;margin:auto}.page-content--wide{text-align:left;max-width:720px;margin:calc(var(--page-gap) * 1.5) auto}.page h1{color:var(--color-gold);margin-bottom:8px;font-size:min(28px,5vw)}.subtitle{color:var(--color-muted);margin-bottom:calc(var(--page-gap) * 1.5);font-size:14px;font-weight:400}.home-actions{gap:var(--page-gap);flex-direction:column;align-items:center;display:flex}.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{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);display:flex}.server-bar label{color:var(--color-muted);flex-shrink:0;font-size:14px}.server-bar .lobby-input{text-align:left;text-transform:none;letter-spacing:0;border-color:var(--color-border);flex:1;width:auto;margin:0;font-size:14px}.lobby-grid{gap:var(--page-gap);margin-bottom:var(--page-gap);grid-template-columns:1fr 1fr;display:grid}@media (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);flex-direction:column;transition:border-color .15s;display:flex}.lobby-card:hover{border-color:color-mix(in srgb, var(--color-gold) 40%, transparent)}.lobby-card h2{color:var(--color-gold);margin-bottom:var(--page-gap);text-transform:uppercase;letter-spacing:1px;font-size:15px}.card-body{flex-direction:column;flex:1;gap:10px;display:flex}.card-body .lobby-btn{width:100%;margin-top:auto}.card-body .setting-row{margin:0}.card-hint{color:var(--color-dim);font-size:13px}.card-body--join{text-align:center}.room-code-input{text-align:center;text-transform:uppercase;letter-spacing:6px;padding:14px var(--page-gap);font-size:min(22px,4.5vw)}.room-code-input::placeholder{letter-spacing:4px;font-size:16px}.rooms-section{padding-bottom:calc(var(--page-gap) * 1.5)}.rooms-section h2{color:var(--color-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-size:13px}.lobby-btn{background:var(--color-gold);color:var(--color-bg);border-radius:var(--radius);cursor:pointer;border:none;margin:6px;padding:10px 24px;font-size:15px;font-weight:700;transition:background .15s;display:inline-block}.lobby-btn:hover{background:var(--color-gold-hover)}.lobby-btn:disabled{background:var(--color-dim);cursor:default}.lobby-btn.secondary{color:var(--color-gold);background:#3a3a5e}.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{background:var(--color-input);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius);margin:4px;padding:8px 12px;font-size:14px}.setting-row{justify-content:space-between;align-items:center;margin:8px 0;display:flex}.setting-label{color:var(--color-muted);font-size:14px}.room-list{margin-top:8px}.error-msg{color:var(--color-error);min-height:20px;margin:8px 0;font-size:14px;display:block}.room-item{background:var(--color-input);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;justify-content:space-between;align-items:center;margin:4px 0;padding:8px 12px;transition:border-color .15s,background .15s;display:flex}.room-item:hover{border-color:var(--color-gold);background:color-mix(in srgb, var(--color-surface) 80%, var(--color-gold))}.room-code{letter-spacing:4px;color:var(--color-gold);font-size:18px;font-weight:700}.room-info{color:var(--color-muted);text-align:right;font-size:12px}.room-list-title{color:var(--color-dim);margin-bottom:6px;font-size:13px}.room-list-empty{color:var(--color-border);font-size:13px;font-style:italic}.sound-modal{z-index:1000;place-items:center;display:grid;position:fixed;inset:0}.sound-modal[hidden]{display:none}.sound-modal-backdrop{background:#000000a6;position:absolute;inset:0}.sound-modal-panel{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);color:var(--color-text);text-align:left;position:relative;overflow-y:auto}.sound-modal-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.sound-modal-header h2{color:var(--color-gold);margin:0;font-size:1.1rem}.sound-modal-close{color:var(--color-gold);cursor:pointer;background:0 0;border:none;padding:.25rem .5rem;font-size:1.1rem;line-height:1}.sound-modal-close:hover{color:var(--color-gold-hover)}.music-hint{color:#9a8a78;margin:0 0 .75rem;font-size:.85rem;line-height:1.4}.music-hint code{color:#d5d9e0;font-size:.8rem}.sound-source{gap:.4rem;margin-top:.75rem;display:grid}.sound-source-label{color:var(--color-muted);font-size:.8rem}.sound-source-row{grid-template-columns:1fr auto;align-items:stretch;gap:.5rem;display:grid}.sound-source-row .lobby-input{min-width:0}.sound-source-row .lobby-btn{margin:0}.sound-divider{color:var(--color-dim);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:.75rem;margin:1rem 0 .75rem;font-size:.7rem;display:flex}.sound-divider:before,.sound-divider:after{content:"";background:color-mix(in srgb, var(--color-border), transparent 50%);flex:1;height:1px}.sound-file-actions{grid-template-columns:repeat(2,1fr);gap:.5rem;display:grid}.sound-file-actions .lobby-btn{margin:0}.music-status{color:#c8d0dd;background:#14182099;border-left:3px solid #c8a04066;border-radius:2px;min-height:1.4rem;margin-top:.75rem;padding:.45rem .7rem;font-size:.8rem;display:block}