:root{--primary: #ffd24d;--accent: #59d0ff;--green: #6fe0a0;--danger: #ff5d7a;--bg: #0b0f1d;--text: #eef3ff;--font-display: "Avenir Next", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;padding:0;width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--text);font-family:var(--font-display);user-select:none;-webkit-user-select:none}.app{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% -10%,rgba(89,208,255,.16),transparent 55%),radial-gradient(ellipse at 50% 115%,rgba(255,210,77,.14),transparent 55%),var(--bg)}.page{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column}.overlay{background:#070a14b3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:center;justify-content:center;animation:fade-in .3s ease-out;pointer-events:auto;z-index:10}.safe-top{padding-top:calc(env(safe-area-inset-top,0px) + 12px)}.safe-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}.btn{font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:.12em;border:none;border-radius:14px;padding:14px 36px;min-height:52px;cursor:pointer;transition:transform .08s ease,filter .15s ease}.btn:active{transform:scale(.96)}.btn-primary{color:#2a1c00;background:linear-gradient(135deg,var(--primary),#ffe89a);box-shadow:0 0 18px #ffd24d80,0 6px 18px #00000059}.btn-ghost{color:var(--text);background:#ffffff14;border:1px solid rgba(238,243,255,.3)}.btn-link{background:none;border:none;color:var(--accent);font-size:12px;margin-left:8px;padding:6px;cursor:pointer;text-decoration:underline}.welcome-page{align-items:center;justify-content:center}.welcome-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 30px;border-radius:22px;background:#12182cd1;border:1px solid rgba(89,208,255,.3);box-shadow:0 0 50px #59d0ff24;width:min(86vw,360px)}.welcome-logo{font-size:34px;font-weight:900;letter-spacing:.06em;color:var(--primary);text-shadow:0 0 14px rgba(255,210,77,.8),0 0 40px rgba(89,208,255,.35)}.welcome-logo-sub{margin-top:-10px;font-size:14px;opacity:.7;letter-spacing:.3em}.welcome-tower{display:flex;flex-direction:column;align-items:center;line-height:.78;font-size:26px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}.welcome-tower span:nth-child(1){transform:rotate(-8deg)}.welcome-tower span:nth-child(2){transform:rotate(6deg)}.welcome-tower span:nth-child(3){transform:rotate(-3deg)}.welcome-heading{margin:0;font-size:15px;font-weight:600;opacity:.85}.welcome-name{font-size:22px;font-weight:800}.welcome-input{width:100%;font-size:18px;padding:12px 14px;border-radius:10px;border:1px solid rgba(238,243,255,.35);background:#00000052;color:var(--text);text-align:center;outline:none}.welcome-input:focus{border-color:var(--accent);box-shadow:0 0 12px #59d0ff59}.welcome-error{color:#ff9db1;font-size:13px}.welcome-enter{width:100%}.welcome-note{font-size:12px;opacity:.6}.title-page{justify-content:space-between;cursor:pointer}.title-top{display:flex;justify-content:space-between;align-items:center;padding-left:16px;padding-right:16px}.title-player{font-size:13px;opacity:.9}.title-best{font-size:13px;font-weight:700;color:var(--primary)}.title-center{display:flex;flex-direction:column;align-items:center;gap:8px}.title-pieces{display:flex;align-items:flex-end;gap:8px;height:84px}.title-piece{width:clamp(40px,12vw,64px);height:clamp(40px,12vw,64px);object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));animation:bob 2.6s ease-in-out infinite}.title-piece:nth-child(2){animation-delay:.3s}.title-piece:nth-child(3){animation-delay:.6s}.title-piece:nth-child(4){animation-delay:.9s}.title-logo{margin:0;font-size:clamp(40px,12vw,74px);font-weight:900;letter-spacing:.02em;line-height:1.05;color:var(--text);text-shadow:0 0 16px rgba(89,208,255,.5),0 4px 0 rgba(0,0,0,.25)}.title-logo-accent{color:var(--accent);text-shadow:0 0 16px rgba(89,208,255,.85),0 4px 0 rgba(0,0,0,.25)}.title-tagline{margin:2px 0 0;font-size:14px;letter-spacing:.18em;opacity:.85}.title-start{margin-top:22px;font-size:18px;font-weight:800;letter-spacing:.3em;color:var(--primary);animation:pulse 1.4s ease-in-out infinite}.title-loading{margin-top:22px;font-size:14px;letter-spacing:.2em;opacity:.7}.title-error{color:var(--danger)}.title-bottom{display:flex;flex-direction:column;align-items:center;gap:12px}.title-hint{font-size:12px;opacity:.6;letter-spacing:.06em}.ranking{width:min(84vw,320px);background:#12182cb3;border:1px solid rgba(89,208,255,.22);border-radius:14px;padding:12px 18px;font-size:13px}.ranking-title{text-align:center;font-weight:800;letter-spacing:.3em;font-size:11px;color:var(--accent);margin-bottom:8px}.ranking-row{display:flex;gap:10px;padding:3px 0}.ranking-pos{width:18px;text-align:right;color:var(--primary);font-weight:700}.ranking-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-score{font-variant-numeric:tabular-nums;font-weight:700}.game-page{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column}.board-area{position:relative;flex:1;min-height:0}.board-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.hud{z-index:2;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 6px;pointer-events:none}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.hud-side{min-width:92px}.hud-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.hud-label{font-size:12px;font-weight:700;opacity:.7;letter-spacing:.08em}.hud-score{font-size:clamp(30px,9vw,44px);font-weight:900;font-variant-numeric:tabular-nums;line-height:1;color:var(--primary);text-shadow:0 0 16px rgba(255,210,77,.5)}.hud-next{display:flex;align-items:center;gap:6px}.hud-next-label{font-size:10px;font-weight:800;letter-spacing:.18em;opacity:.6}.hud-next-img{width:38px;height:38px;object-fit:contain;background:#ffffff0f;border-radius:8px;padding:3px}.mm-badge{align-self:center;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;background:#59d0ff1f;border:1px solid rgba(89,208,255,.3);color:var(--accent)}.mm-badge.matched{background:#ff5d7a29;border-color:var(--danger);color:#ffb4c2}.mm-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1s ease-in-out infinite}.controls{z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 12px)}.ctrl-btn{font-family:var(--font-display);font-size:26px;font-weight:900;color:var(--text);background:#ffffff1a;border:1px solid rgba(238,243,255,.22);border-radius:16px;width:72px;height:64px;cursor:pointer;transition:transform .06s ease,filter .12s ease;touch-action:manipulation}.ctrl-btn:active{transform:scale(.94)}.ctrl-btn:disabled{opacity:.35}.ctrl-drop{flex:1;max-width:200px;font-size:20px;letter-spacing:.12em;color:#2a1c00;background:linear-gradient(135deg,var(--accent),#9fe6ff);border:none;box-shadow:0 0 18px #59d0ff73}.hud-countdown{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);font-size:clamp(72px,24vw,150px);font-weight:900;font-style:italic;color:var(--text);text-shadow:0 0 24px rgba(89,208,255,.9),0 0 90px rgba(255,210,77,.4);animation:count-pop .62s ease-out forwards;pointer-events:none;z-index:5}.gameover{pointer-events:auto}.gameover-card{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(86vw,360px);padding:30px 26px;border-radius:22px;background:#12182ce0;border:1px solid rgba(255,93,122,.4);box-shadow:0 0 60px #ff5d7a33;animation:rise-in .35s ease-out}.gameover-title{font-size:28px;font-weight:900;font-style:italic;letter-spacing:.1em;color:var(--danger);text-shadow:0 0 18px rgba(255,93,122,.7)}.gameover-record{font-size:15px;font-weight:900;letter-spacing:.22em;color:var(--primary);text-shadow:0 0 14px rgba(255,210,77,.85);animation:pulse .8s ease-in-out infinite}.gameover-score{font-size:56px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--primary);text-shadow:0 0 22px rgba(255,210,77,.6)}.gameover-sub{font-size:14px;opacity:.85}.gameover-sub2{font-size:12px;opacity:.6}.gameover-rank{font-size:16px;color:var(--accent);margin-top:2px}.gameover-rank strong{font-size:24px}.gameover-rank-failed{color:#eef3ff80;font-size:12px}.gameover-retry{width:100%;margin-top:12px}.challenger{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#070a14c7;animation:fade-in .25s ease-out;pointer-events:auto}.challenger-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,rgba(255,93,122,.3),transparent 65%);animation:warnflash .5s ease-in-out infinite}.challenger-title{position:relative;font-size:clamp(28px,8vw,52px);font-weight:900;font-style:italic;letter-spacing:.02em;text-align:center;color:#fff;text-shadow:0 0 22px rgba(255,93,122,.9),0 0 60px rgba(89,208,255,.5);animation:challenger-pop .6s ease-out;line-height:1.1}.challenger-name{position:relative;font-size:22px;font-weight:800;color:var(--accent);animation:pulse 1s ease-in-out infinite}.battle-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 4px}.battle-player{flex:1;display:flex;flex-direction:column;padding:6px 12px;border-radius:12px;background:#ffffff0f;border:1px solid transparent}.battle-player.me{align-items:flex-start}.battle-player.opp{align-items:flex-end}.battle-player.active{border-color:var(--primary);box-shadow:0 0 14px #ffd24d66}.battle-player-name{font-size:13px;font-weight:800;max-width:36vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.battle-player-count{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--primary)}.battle-vs{font-size:14px;font-weight:900;font-style:italic;opacity:.7}.battle-turn{align-self:center;margin-top:6px;font-size:13px;font-weight:800;letter-spacing:.08em;padding:4px 14px;border-radius:999px}.battle-turn.mine{color:#2a1c00;background:var(--primary)}.battle-turn.theirs{color:var(--text);background:#ffffff14}.battle-waiting{align-self:center;margin-top:6px;font-size:12px;opacity:.7}.result-title{font-size:32px;font-weight:900;font-style:italic;letter-spacing:.08em}.result-title.win{color:var(--primary);text-shadow:0 0 22px rgba(255,210,77,.8)}.result-title.lose{color:var(--danger);text-shadow:0 0 22px rgba(255,93,122,.7)}.result-sub{font-size:14px;opacity:.85}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes bob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}@keyframes warnflash{0%,to{opacity:.5}50%{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes rise-in{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes count-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(.92)}}@keyframes challenger-pop{0%{opacity:0;transform:scale(.5) rotate(-6deg)}60%{opacity:1;transform:scale(1.1) rotate(2deg)}to{transform:scale(1) rotate(0)}}