@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Inter:wght@400;500;600;700&display=swap";:root{--bg: #14100c;--panel: #1e1712;--frame: #4a3120;--frame-light: #6b4a30;--cell: #ede4d0;--cell-goal: #d8c9a3;--wall: #c98a3a;--wall-preview: rgba(201, 138, 58, .35);--ink: #f4ede0;--muted: #a89a86;--accent: #c98a3a;--danger: #b4432a;--radius: 14px;--board-wrap-size: min(100vw - 32px, 460px);--board-size: calc(var(--board-wrap-size) - 28px);--cell-sz: calc(var(--board-size) * 40 / 440);--gap-sz: calc(var(--board-size) * 10 / 440);--span-sz: calc(var(--cell-sz) + var(--gap-sz));--piece-sz: calc(var(--cell-sz) * 26 / 40)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.app-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px 16px 32px;position:relative}.mode-select{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;max-width:360px}.mode-select__title{font-family:Fraunces,serif;font-size:44px;font-weight:700;margin:0;letter-spacing:.5px}.mode-select__subtitle{color:var(--muted);margin:0 0 12px;font-size:15px}.mode-select__options{display:flex;gap:16px}.mode-card{width:110px;height:110px;border-radius:var(--radius);border:1px solid var(--frame-light);background:linear-gradient(160deg,var(--panel),var(--bg));color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:transform .15s ease,border-color .15s ease}.mode-card:hover,.mode-card:focus-visible{transform:translateY(-2px);border-color:var(--accent);outline:none}.mode-card__count{font-family:Fraunces,serif;font-size:40px;font-weight:700;color:var(--accent)}.mode-card__label{font-size:14px;color:var(--muted)}.mode-select__hint{color:var(--muted);font-size:12.5px;line-height:1.9;max-width:300px}.topbar{width:100%;max-width:480px;display:flex;align-items:center;justify-content:center;font-family:Fraunces,serif;font-size:18px;margin-bottom:10px}.board-wrap{position:relative;padding:14px;border-radius:20px;background:linear-gradient(155deg,var(--frame-light),var(--frame));box-shadow:0 20px 40px #00000073,inset 0 0 0 1px #ffffff0a}.board{position:relative;background:var(--cell);border-radius:8px;overflow:hidden;touch-action:none}.cell{position:absolute;background:var(--cell);border:1px solid rgba(74,49,32,.12);display:flex;align-items:center;justify-content:center}.cell--goal{background:var(--cell-goal)}.cell--target{cursor:pointer}.cell__dot{width:10px;height:10px;border-radius:50%;background:var(--accent);opacity:.75;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.25);opacity:1}}.wall{position:absolute;background:var(--wall);border-radius:3px;box-shadow:0 2px 4px #00000059}.wall-slot{position:absolute;background:transparent;cursor:pointer;border-radius:3px}.wall-slot--hover{background:var(--wall-preview)}.piece{position:absolute;width:var(--piece-sz);height:var(--piece-sz);margin-left:calc(var(--piece-sz) / -2);margin-top:calc(var(--piece-sz) / -2);border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--piece-color) 70%,white),var(--piece-color));box-shadow:0 3px 6px #0006,inset 0 -2px 3px #00000040;transition:left .2s ease,top .2s ease}.piece--me{outline:2px solid var(--ink);outline-offset:2px}.hud{position:absolute;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:var(--panel);padding:4px 12px;border-radius:999px;border:1px solid var(--frame-light);z-index:10;color:var(--muted);box-shadow:0 4px 8px #0006;transition:all .2s;white-space:nowrap}.hud--active{color:var(--ink);border-color:var(--accent);box-shadow:0 0 12px #c98a3a80}.hud--north{top:-14px;left:50%;transform:translate(-50%)}.hud--active.hud--north{transform:translate(-50%) scale(1.08)}.hud--south{bottom:-14px;left:50%;transform:translate(-50%)}.hud--active.hud--south{transform:translate(-50%) scale(1.08)}.hud--west{left:-22px;top:50%;transform:translateY(-50%) rotate(-90deg)}.hud--active.hud--west{transform:translateY(-50%) rotate(-90deg) scale(1.08)}.hud--east{right:-22px;top:50%;transform:translateY(-50%) rotate(90deg)}.hud--active.hud--east{transform:translateY(-50%) rotate(90deg) scale(1.08)}.hud__walls{color:var(--accent)}.toolbar{width:100%;max-width:480px;display:flex;flex-direction:column;gap:10px;align-items:center}.toolbar__group{display:flex;gap:8px}.btn{font-family:Inter,sans-serif;font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;border:1px solid var(--frame-light);background:var(--panel);color:var(--ink);cursor:pointer;transition:background .15s ease,border-color .15s ease}.btn--toggle.btn--active{background:var(--accent);border-color:var(--accent);color:#1c1410}.btn--primary{background:var(--accent);border-color:var(--accent);color:#1c1410;padding:12px 24px}.lobby{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:340px;text-align:center}.lobby__title{font-family:Fraunces,serif;font-size:26px;margin:0}.lobby__subtitle{color:var(--muted);margin:0;font-size:14px}.lobby__slots{width:100%;display:flex;flex-direction:column;gap:8px}.lobby-slot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--frame-light);opacity:.55}.lobby-slot--filled{opacity:1}.lobby-slot__dot{width:14px;height:14px;border-radius:50%;background:var(--piece-color);flex-shrink:0}.lobby-slot__name{font-size:14px}.lobby__hint{color:var(--muted);font-size:12.5px}.lobby__room-id{color:var(--muted);font-size:11px;letter-spacing:.5px}.game-over{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.game-over__badge{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--piece-color) 70%,white),var(--piece-color));box-shadow:0 6px 16px #0006;margin-bottom:6px}.game-over__title{font-family:Fraunces,serif;font-size:28px;margin:0}.game-over__subtitle{color:var(--muted);margin:0 0 8px;font-size:14px}.loading-text{color:var(--muted)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--danger);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;animation:toast-fade 2.2s ease forwards}@keyframes toast-fade{0%{opacity:0;transform:translate(-50%,8px)}10%,85%{opacity:1;transform:translate(-50%)}to{opacity:0}}.local-badge{position:fixed;top:10px;left:50%;transform:translate(-50%);font-size:11px;color:var(--muted);background:var(--panel);padding:4px 12px;border-radius:999px;border:1px solid var(--frame-light)}