:root{--bg:#f5f4f0;--card-bg:#fff;--border:#d5cfc4;--text:#1e1a14;--muted:#7a7060;--p1:#e94560;--p2:#48f;--accent:#ff6b35;--win:gold;--axis-w:#fc0;--axis-x:#f35;--axis-y:#3e8;--axis-z:#39f;--hud-max-width:960px;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:LINE Seed JP,system-ui,sans-serif}*,:before,:after{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{background:var(--bg);width:100vw;height:100vh;color:var(--text);overflow:hidden}input{-webkit-user-select:text;user-select:text}button{cursor:pointer;background:0 0;border:none;outline:none;font-weight:600}button,input,select,textarea{font:inherit}button:disabled{cursor:default}#play-layout{flex-direction:column;width:100vw;height:100vh;display:none;overflow:hidden}body[data-screen=playing] #play-layout,body[data-screen=result] #play-layout{display:flex}#play-layout #play-hud{display:contents}#play-layout #canvas-container{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;flex:1;order:2;min-height:0;transition:opacity .4s;position:relative}#play-layout #canvas-container canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;display:block;width:100%!important;height:100%!important}#canvas-container.hovering{cursor:pointer}#title-screen,#lobby-screen,#result-overlay{z-index:10;display:none;position:fixed;inset:0}body[data-screen=title] #title-screen,body[data-screen=lobby] #lobby-screen,body[data-screen=result] #result-overlay{display:flex}#disconnect-overlay{z-index:30;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#f5f4f0d9;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#disconnect-overlay.visible{display:flex}.disconnect-card{background:var(--card-bg);text-align:center;border:none;border-radius:20px;flex-direction:column;align-items:center;gap:1.25rem;min-width:300px;padding:2.5rem 3rem;display:flex;box-shadow:6px 6px #c8c2b8,0 8px 32px #503c281a}.disconnect-title{letter-spacing:.05em;color:var(--text);font-size:1.4rem;font-weight:400}.disconnect-countdown{color:var(--p1);font-size:3rem;line-height:1}.disconnect-msg{color:var(--muted);letter-spacing:.02em;font-size:.8rem}#title-screen,#lobby-screen{background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:2rem;padding:2rem}.title-main{text-align:center;line-height:1.2}.title-kanji{letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-bottom:.4em;font-size:clamp(.65rem,3.3vw,.9rem);font-weight:400}.title-en{letter-spacing:.06em;color:#c87800;text-shadow:1px 1px #7a4a0059,0 0 20px #c878001f;font-family:Fredoka One,system-ui,sans-serif;font-size:clamp(1.3rem,7.3vw,2rem);font-weight:400;line-height:1.1}.title-neon{letter-spacing:.08em;color:var(--accent);text-shadow:2px 2px #c94d1a,0 0 30px #ff6b354d;font-family:Fredoka One,system-ui,sans-serif;font-size:clamp(1.8rem,10.2vw,2.8rem);font-weight:400;line-height:1.1}.title-card{background:#fff;border:none;border-radius:20px;flex-direction:column;gap:1rem;width:100%;min-width:320px;max-width:440px;padding:2rem 2.5rem;display:flex;box-shadow:6px 6px #c8c2b8,0 8px 32px #503c281a}.settings-row{justify-content:space-between;align-items:center;gap:clamp(0rem,4vw - .5rem,1rem);transition:opacity .15s;display:flex}.settings-row.disabled{opacity:.35;pointer-events:none}.settings-label{color:var(--muted);letter-spacing:.05em;min-width:3.5rem;font-size:.85rem}.toggle-group{border:2px solid var(--border);background:#eeeae4;border-radius:10px;flex:auto;min-width:0;max-width:16rem;display:flex;overflow:hidden}.toggle-group button{letter-spacing:.04em;white-space:nowrap;text-align:center;min-width:0;color:var(--muted);border-right:2px solid var(--border);background:0 0;flex:1 1 0;padding:.4rem 1rem;font-size:clamp(.74rem,2.5vw,.85rem);font-weight:700;line-height:1.15;transition:background .15s,color .15s}.toggle-group button:last-child{border-right:none}.toggle-group button.active{background:var(--accent);color:#fff}.toggle-group button:hover:not(.active){color:var(--text);background:#ff6b3514}.toggle-group--compact-labels button{letter-spacing:.02em;padding-inline:clamp(.45rem,1.8vw,.8rem)}.segment-group{border:2px solid var(--border);background:#eeeae4;border-radius:10px;flex:auto;min-width:0;max-width:16rem;display:flex;overflow:hidden}.segment-group button{white-space:nowrap;text-align:center;min-width:0;color:var(--muted);border-right:2px solid var(--border);background:0 0;flex:1 1 0;padding:.4rem .8rem;font-size:.85rem;font-weight:700;transition:background .15s,color .15s}.segment-group button:last-child{border-right:none}.segment-group button.active{background:var(--accent);color:#fff}.segment-group button:hover:not(.active){color:var(--text);background:#ff6b3514}.title-sep{background:var(--border);height:1px;margin:.25rem 0}.title-spacer{height:.5rem}.title-menu-card{gap:.75rem}.title-copyright{color:var(--muted);text-align:center;margin-top:1rem;font-size:.75rem}.title-menu-card .btn-primary,.title-menu-card .btn-secondary{padding:.8rem 2rem;font-size:1.05rem}.btn-primary{letter-spacing:.04em;color:#fff;background:var(--accent);border:2px solid #00000014;border-radius:12px;width:100%;padding:.7rem 2rem;font-size:1rem;font-weight:700;transition:transform .1s,box-shadow .1s,filter .1s;box-shadow:0 4px #c94d1a}.btn-primary:hover{filter:brightness(1.06)}.btn-primary:active{transform:translateY(3px);box-shadow:0 1px #c94d1a}.btn-secondary{letter-spacing:.04em;color:var(--text);background:var(--card-bg);border:2px solid var(--border);box-shadow:0 4px 0 var(--border);border-radius:12px;width:100%;padding:.7rem 2rem;font-size:1rem;font-weight:700;transition:transform .1s,box-shadow .1s}.btn-secondary:hover{filter:brightness(.97)}.btn-secondary:active{box-shadow:0 1px 0 var(--border);transform:translateY(3px)}.hud-top,.hud-bottom{flex-shrink:0;width:100%}.hud-top{order:1}.hud-bottom{order:3}.hud-inner{width:100%;max-width:var(--hud-max-width);justify-content:space-between;align-items:center;margin-left:auto;margin-right:auto;padding:0 1.25rem;display:flex;position:relative}.hud-bottom .hud-inner{gap:1rem}.hud-bottom.confirm-only .hud-inner{justify-content:flex-end}.hud-top{z-index:2;-webkit-backdrop-filter:blur(12px)saturate(1.4);pointer-events:auto;background:#ffffffa6;border-bottom:1px solid #ffffff80;justify-content:center;align-items:center;padding:.75rem 0;display:flex;position:relative;box-shadow:0 2px 16px #503c281a}.hud-status{align-items:center;gap:1rem;display:flex}.status-player{letter-spacing:.05em;white-space:nowrap;border-radius:4px;padding:.1rem .6rem;font-size:1.4rem;font-weight:400;transition:color .2s,background .2s}.status-player[data-player="1"]{color:var(--p1);background:#e945601f}.status-player[data-player="2"]{color:var(--p2);background:#4488ff1f}.status-turn-suffix{color:var(--muted);letter-spacing:.04em;font-size:.8rem}.status-gravity{align-items:center;gap:.3rem;font-size:1rem;display:flex}.gravity-label[data-axis=w]{color:var(--axis-w)}.gravity-label[data-axis=x]{color:var(--axis-x)}.gravity-label[data-axis=y]{color:var(--axis-y)}.gravity-label[data-axis=z]{color:var(--axis-z)}.hud-title-btn-wrap{align-items:center;gap:.4rem;display:flex}.hud-title-btn{letter-spacing:.04em;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:.25rem .6rem;font-size:.75rem;transition:color .15s,border-color .15s}.hud-title-btn:hover{color:var(--text);border-color:var(--muted)}.hud-title-confirm-label{letter-spacing:.02em;color:var(--text);font-size:.75rem}.hud-title-confirm-yes{letter-spacing:.04em;color:#fff;background:var(--p1);border-radius:4px;padding:.25rem .6rem;font-size:.75rem;transition:filter .15s}.hud-title-confirm-yes:hover{filter:brightness(1.15)}.hud-timer{--timer-progress:0;--timer-color:var(--accent);background:radial-gradient(circle at center, #fffffff2 0 46%, transparent 49% 100%), conic-gradient(var(--timer-color) 0deg, var(--timer-color) calc(var(--timer-progress) * 360deg), #1e1a141f calc(var(--timer-progress) * 360deg), #1e1a141f 360deg);opacity:0;border-radius:50%;width:1.4rem;height:1.4rem;transition:opacity .2s;box-shadow:inset 0 0 0 1px #1e1a1414,0 1px 3px #503c281f}.hud-timer.visible{opacity:1}.hud-timer[data-player="1"]{--timer-color:var(--p1)}.hud-timer[data-player="2"]{--timer-color:var(--p2)}.hud-thinking{--thinking-dot-color:var(--accent);opacity:0;pointer-events:none;white-space:nowrap;background:#ffffffe6;border-radius:999px;align-items:center;gap:.4rem;padding:.35rem .7rem;transition:opacity .2s;display:flex;position:absolute;top:calc(100% + 1.5rem);left:50%;transform:translate(-50%);box-shadow:0 4px 14px #503c281f}.hud-thinking.visible{opacity:1}.hud-thinking[data-player="1"]{--thinking-dot-color:var(--p1)}.hud-thinking[data-player="2"]{--thinking-dot-color:var(--p2)}.thinking-text{color:var(--muted);letter-spacing:.04em;font-size:.75rem}.thinking-dot{background:var(--thinking-dot-color);border-radius:50%;width:5px;height:5px;animation:1.2s ease-in-out infinite blink}.thinking-dot:nth-child(2){animation-delay:.2s}.thinking-dot:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.hud-bottom{-webkit-backdrop-filter:blur(12px)saturate(1.4);pointer-events:auto;background:#ffffffa6;border-top:1px solid #ffffff80;justify-content:center;align-items:center;padding:.75rem 0;transition:opacity .15s;display:flex;box-shadow:0 -2px 16px #503c281a}.hud-bottom.confirm-only{justify-content:flex-end}.hud-bottom.disabled{opacity:.45;pointer-events:none}.hud-controls-block{flex-direction:column;gap:.35rem;min-width:0;display:flex}.hud-controls{align-items:flex-end;gap:1.25rem;display:flex}.hud-controls-heading{align-items:baseline;gap:.5rem;min-width:0;display:flex}.hud-controls-title{letter-spacing:.04em;color:var(--text);font-size:.78rem;font-weight:700}.hud-controls-description{letter-spacing:.03em;color:var(--muted);font-size:.68rem}.ctrl-group{flex-direction:column;gap:.3rem;display:flex}.ctrl-group--confirm{align-items:flex-end}.ctrl-label{letter-spacing:.04em;color:var(--muted);text-transform:uppercase;padding-left:.1rem;font-size:.7rem}.status-section-label{letter-spacing:.04em;color:var(--muted);margin-right:.4rem;font-size:.68rem}.hud-axis-group,.hud-slice-group{background:#fff6;border:2px solid #c8b4dc66;border-radius:10px;display:flex;overflow:hidden}.axis-btn,.slice-btn{color:var(--muted);background:#fff9;border-right:1px solid #c8b4dc66;padding:.6rem 1rem;font-size:1rem;font-weight:700;transition:background .15s,color .15s}.axis-btn:last-child,.slice-btn:last-child{border-right:none}.axis-btn:hover:not(:disabled):not(.active),.slice-btn:hover:not(:disabled):not(.active){color:var(--text);background:#ff6b3514}.axis-btn[data-axis=w].active{color:var(--axis-w);background:#ffcc001f}.axis-btn[data-axis=x].active{color:var(--axis-x);background:#ff33551f}.axis-btn[data-axis=y].active{color:var(--axis-y);background:#33ee881f}.axis-btn[data-axis=z].active{color:var(--axis-z);background:#3399ff1f}.slice-btn.active{color:var(--accent);background:#ff6b351f}.confirm-btn{letter-spacing:.04em;white-space:nowrap;background:var(--accent);color:#fff;border:2px solid #0000001a;border-radius:10px;justify-content:center;align-items:center;gap:.55rem;padding:.6rem 2rem;font-size:1.1rem;font-weight:700;transition:filter .15s,opacity .15s,transform .1s,box-shadow .1s;display:inline-flex;box-shadow:0 4px #0003}.confirm-btn-icon{stroke-width:2.25px;flex:none;width:1.05rem;height:1.05rem}.confirm-btn[data-action=place][data-player="1"]{background:var(--p1)}.confirm-btn[data-action=place][data-player="2"]{background:var(--p2)}.confirm-btn[data-action=rotate]{background:var(--accent)}.confirm-btn.ghost{border-color:var(--border);color:var(--muted);pointer-events:none;opacity:.4;background:0 0}.confirm-btn:not(.ghost):not(:disabled):hover{filter:brightness(1.15)}.confirm-btn:not(.ghost):not(:disabled):active{transform:translateY(3px);box-shadow:0 1px #0003}#result-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#f5f4f0b3;justify-content:center;align-items:center;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.result-card{text-align:center;background:#fff;border:none;border-radius:24px;flex-direction:column;gap:1rem;min-width:280px;padding:2.5rem 3rem;animation:.3s slideUp;display:flex;box-shadow:8px 8px #c8c2b8,0 16px 48px #503c281f}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.result-title{letter-spacing:.05em;color:var(--win);text-shadow:3px 3px #0000001f;font-size:clamp(2.5rem,8vw,4rem);font-weight:400}.result-title[data-player="1"]{color:var(--p1);text-shadow:3px 3px #0000001f}.result-title[data-player="2"]{color:var(--p2);text-shadow:3px 3px #0000001f}.result-actions{flex-direction:column;gap:.6rem;margin-top:.5rem;display:flex}.lobby-card{background:#fff;border:none;border-radius:20px;flex-direction:column;gap:1.25rem;width:100%;min-width:320px;max-width:440px;padding:2rem 2.5rem;display:flex;box-shadow:6px 6px #c8c2b8,0 8px 32px #503c281a}.lobby-heading{letter-spacing:.08em;color:var(--accent);text-align:center;margin-bottom:.25rem;font-size:1.4rem;font-weight:400}.lobby-content{flex-direction:column;gap:.75rem;display:flex}.lobby-label{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-size:.8rem}.lobby-room-id-section{border:1px solid var(--border);background:#ff6b350a;border-radius:8px;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;display:flex}.lobby-room-id-section--compact{flex-direction:row;justify-content:space-between;gap:.65rem;padding:.55rem .8rem}.lobby-room-id{letter-spacing:.2em;color:var(--accent);text-align:center;word-break:break-all;font-size:2rem;font-weight:700}.lobby-room-id--compact{letter-spacing:.08em;text-align:right;word-break:normal;margin-left:auto;font-size:1rem;font-weight:700}.lobby-copy-btn{padding:.3rem 1rem;font-size:.8rem}.lobby-waiting{flex-direction:column;align-items:center;gap:.75rem;padding:1rem 0;display:flex}.lobby-spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.lobby-waiting-text{color:var(--muted);letter-spacing:.04em;font-size:.85rem}.lobby-input{letter-spacing:.08em;width:100%;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;outline:none;padding:.6rem .9rem;font-size:1.1rem;font-weight:700;transition:border-color .15s}.lobby-input:focus{border-color:var(--accent)}.lobby-input--code{letter-spacing:.4em;text-align:center;padding:.6rem 1rem;font-size:2rem}.lobby-error{color:var(--p1);letter-spacing:.02em;font-size:.8rem}.lobby-btn-back{opacity:.7;margin-top:.25rem}.lobby-settings,.lobby-section{border:1px solid var(--border);background:#ff6b3508;border-radius:8px;flex-direction:column;gap:.6rem;padding:.85rem 1rem;display:flex}.lobby-status{color:var(--muted);letter-spacing:.03em;text-align:center;font-size:.82rem}.lobby-player-list{flex-direction:column;gap:.55rem;display:flex}.lobby-player-row{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:.75rem;min-width:0;display:flex}.lobby-player-slot{letter-spacing:.06em;min-width:2rem;color:var(--accent);flex:none;font-size:.76rem;font-weight:700}.lobby-player-list .lobby-player-row:nth-child(2) .lobby-player-slot{color:var(--p2)}.lobby-player-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;font-size:1rem;font-weight:700;overflow:hidden}.lobby-player-badges{flex-wrap:nowrap;flex-shrink:0;justify-content:flex-end;align-items:center;gap:.35rem;display:flex}.lobby-badge{letter-spacing:.05em;border-radius:999px;justify-content:center;align-items:center;padding:.2rem .45rem;font-size:.68rem;font-weight:700;display:inline-flex}.lobby-badge--host{color:var(--accent);background:#ff6b351f}.lobby-badge--you{color:#3a86ff;background:#3a86ff1f}.lobby-badge--ready{color:#15803d;background:#22c55e24}.lobby-badge--waiting{color:var(--muted);background:#78716c1f}.lobby-settings-heading{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.15rem;font-size:.7rem}.lobby-settings-summary{color:var(--text);overflow-wrap:anywhere;font-size:.88rem;font-weight:700;line-height:1.5}.lobby-settings-row{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:.75rem;min-width:0;display:flex}.lobby-settings-label{color:var(--muted);letter-spacing:.05em;flex-shrink:0;font-size:.8rem}.lobby-setting-value{color:var(--text);white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:.88rem;font-weight:700;overflow:hidden}.lobby-host-hint{color:var(--muted);letter-spacing:.03em;font-size:.72rem}.lobby-settings-actions{flex-direction:column;gap:.4rem;margin-top:.15rem;display:flex}.lobby-settings-actions button:disabled,.lobby-settings-modal button:disabled{opacity:.42;filter:grayscale(.35);box-shadow:none}.lobby-settings-actions .is-disabled-muted{opacity:.42;color:var(--muted)}.lobby-settings-actions .is-disabled-muted:hover{transform:none}.lobby-settings-editor-row{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.lobby-settings-editor-buttons{flex-wrap:nowrap;flex:auto;justify-content:stretch;min-width:0}.lobby-settings-overlay{z-index:40;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#f5f4f0d1;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.lobby-settings-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:22px;flex-direction:column;gap:.9rem;width:min(520px,100%);padding:1.5rem 1.25rem 1.25rem;animation:.2s slideUp;display:flex;box-shadow:10px 10px #c8c2b8,0 16px 40px #503c281f}.lobby-settings-modal-title{color:var(--accent);font-size:1.2rem;font-weight:700}.lobby-settings-modal-note{color:var(--muted);font-size:.78rem}.lobby-settings-modal-body{flex-direction:column;gap:.65rem;display:flex}.lobby-settings-modal-footer{flex-direction:column;align-items:stretch;gap:.55rem;display:flex}.lobby-timelimit-group button{padding:.4rem .65rem;font-size:.78rem}.result-rematch-status{letter-spacing:.04em;color:var(--accent);text-align:center;font-size:.8rem}@media (width<=767px){.title-card{min-width:0;max-width:100%;padding:1.5rem}.hud-top,.hud-bottom{padding:.5rem 0}.hud-inner{padding:0 .75rem}.hud-bottom .hud-inner{gap:.5rem}.hud-controls{flex-wrap:wrap;flex:1;gap:.6rem}.hud-controls-heading{flex-direction:row;align-items:baseline;gap:.5rem}.axis-btn,.slice-btn{padding:.5rem .7rem;font-size:.9rem}.confirm-btn{padding:.5rem 1.2rem;font-size:1rem}.result-card{margin:1rem;padding:2rem 1.5rem}.lobby-card{min-width:0;padding:1.4rem 1rem}.lobby-settings-row,.lobby-settings-editor-row,.lobby-player-row{flex-direction:row;align-items:center}.lobby-player-badges,.lobby-settings-editor-buttons{justify-content:flex-start}.toggle-group,.segment-group{flex:auto;min-width:0;max-width:16rem}.lobby-settings-modal{padding:1.2rem 1rem 1rem}}@media (height>=700px) and (aspect-ratio<=1){.hud-top{padding-top:calc(env(safe-area-inset-top) + clamp(1.1rem, 3.4dvh, 2.1rem));padding-bottom:clamp(.7rem,1.6dvh,1.15rem)}.hud-bottom{padding-top:clamp(.8rem,1.8dvh,1.25rem);padding-bottom:calc(env(safe-area-inset-bottom) + clamp(1.7rem, 5.2dvh, 3rem))}}