:root{--bg:#f6f5f2;--panel:#fff;--text:#1f1d24;--muted:#6b6878;--border:#e3e1dc;--accent:#3b6df0;--accent-text:#fff;--danger:#d6453d;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Noto Sans KR,Noto Sans JP,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif}:root:lang(ja){font-family:Noto Sans JP,Noto Sans KR,Hiragino Sans,Yu Gothic UI,Meiryo,system-ui,sans-serif}*,:before,:after{box-sizing:border-box}html{font-size:clamp(16px,.55vw + 12px,21px)}html,body,#root{height:100%;margin:0}body{overscroll-behavior:none;background:radial-gradient(circle at 12% 8%, #3b6df01a, transparent 45%), radial-gradient(circle at 88% 92%, #e0569b1a, transparent 45%), var(--bg)}button{font:inherit;cursor:pointer;background:var(--accent);color:var(--accent-text);border:none;border-radius:12px;padding:12px 28px;font-size:1.05rem;font-weight:700}button:active{transform:translateY(1px)}button.secondary{color:var(--muted);background:0 0}button.danger{background:var(--danger)}button.small{border-radius:8px;padding:6px 14px;font-size:.9rem}button:disabled{opacity:.45;cursor:not-allowed;transform:none}input{font:inherit;border:1px solid var(--border);background:var(--panel);width:100%;color:var(--text);border-radius:12px;padding:12px 14px;font-size:1.05rem}input:focus{outline:2px solid var(--accent);outline-offset:-1px}.dialog-backdrop{z-index:100;background:#14121a73;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog{background:var(--panel);text-align:center;border-radius:16px;width:100%;max-width:22.5rem;padding:24px 20px 16px;box-shadow:0 12px 32px #0003}.dialog h2{margin:0 0 8px;font-size:1.2rem}.dialog p{color:var(--muted);margin:0 0 20px}.dialog-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.dialog-actions button{flex:120px}.app{flex-direction:column;height:100%;display:flex;overflow-y:auto}.topbar{justify-content:flex-end;padding:8px 12px 0;display:flex}.lang-switcher{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:6px 8px;font-size:.85rem;font-weight:600}.screen{text-align:center;flex-direction:column;flex:1;justify-content:safe center;align-items:center;gap:20px;min-height:0;padding:16px;display:flex;overflow-y:auto}.title{margin:0;font-size:2rem}.subtitle{color:var(--muted);margin:0}.game{flex-direction:column;flex:1;gap:12px;width:100%;max-width:40rem;min-height:0;margin:0 auto;padding:4px 16px 16px;display:flex}.hud{justify-content:space-between;align-items:center;font-weight:700;display:flex}.hud-item{flex-direction:column;align-items:flex-start;display:flex}.hud-item:last-child{align-items:flex-end}.hud-label{color:var(--muted);font-size:.75rem;font-weight:600}.hud-value{font-variant-numeric:tabular-nums;font-size:1.6rem}.hud-value.warning{color:var(--danger)}.notice{min-height:1.4em;color:var(--accent);font-size:.9rem;font-weight:600}.board-wrap{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.board-fit{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.board-canvas{touch-action:none;-webkit-user-select:none;user-select:none;background:var(--panel);border-radius:14px;display:block;box-shadow:0 1px 3px #00000014}.overlay{background:#f6f5f2f2;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.overlay h2{margin:0}.final-score{font-variant-numeric:tabular-nums;font-size:3rem;font-weight:800}.menu-buttons{flex-direction:column;gap:12px;width:100%;max-width:18rem;display:flex}.field{text-align:left;flex-direction:column;gap:6px;width:100%;display:flex}.field-label{color:var(--muted);font-size:.8rem;font-weight:600}.hint{color:var(--muted);margin:0;font-size:.9rem}.error-text{color:var(--danger);margin:0;font-size:.9rem;font-weight:600}.status{min-height:1.4em;margin:0}.badge{background:var(--accent);color:var(--accent-text);border-radius:6px;flex:none;padding:2px 6px;font-size:.7rem;font-weight:700}.badge.me{background:#2eaa5a}.badge.muted{background:var(--border);color:var(--muted)}.nickname{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.entry{gap:14px;width:100%;max-width:24rem;margin:0 auto}.entry>button,.join-form button{width:100%}.join-form{flex-direction:column;gap:10px;width:100%;display:flex}.code-input::placeholder{letter-spacing:normal;font-size:1rem}.code-input{letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums;font-size:1.4rem}.divider{width:100%;color:var(--muted);align-items:center;gap:12px;font-size:.85rem;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}button.secondary-outline{color:var(--accent);border:1.5px solid var(--accent);background:0 0}.entry-title{margin:0;font-size:1.4rem}.nickname-bar{align-items:center;gap:10px;width:100%;display:flex}.nickname-bar .nickname{text-align:left;flex:1;font-size:1.15rem}.nickname-bar input{flex:1;min-width:0;padding:8px 12px}.rooms-step{max-width:24rem}.entry-columns{flex-direction:column;gap:14px;width:100%;display:flex}.entry-panel{border:1px solid var(--border);background:var(--panel);text-align:left;border-radius:16px;flex-direction:column;gap:12px;padding:1.25rem;display:flex}.entry-panel h2{margin:0;font-size:1.15rem}.entry-panel>button,.entry-panel .quick-start>button{width:100%}.entry-main-action{margin-top:auto}@media (width>=760px){.entry-panel.create{text-align:center;justify-content:center;align-items:center;gap:1rem}.entry-panel.create .entry-main-action{margin-top:.5rem}}.create-icon{width:4.5rem;height:4.5rem;color:var(--accent);background:#3b6df01f;border-radius:50%;place-items:center;font-size:2.6rem;font-weight:300;line-height:1;display:grid}@media (width>=760px){.rooms-step{max-width:52rem}.entry-columns{flex-direction:row;align-items:stretch}.entry-panel{flex:1 1 0;padding:1.5rem}}@media (width<=759px){.create-icon{display:none}.entry-panel{gap:10px;padding:1rem}}.lobby,.result{justify-content:flex-start;width:100%;max-width:28rem;margin:0 auto;padding-top:24px}.room-code{flex-direction:column;align-items:center;gap:4px;display:flex}.room-code-row{align-items:center;gap:12px;display:flex}.invite-qr{flex-direction:column;align-items:center;gap:6px;margin:8px 0 0;display:flex}.invite-qr img{background:#fff;border-radius:8px}.invite-qr figcaption{text-align:center;margin:0}.room-code-value{letter-spacing:.15em;font-variant-numeric:tabular-nums;font-size:2.4rem}@media (width<=759px){.lobby{padding-top:12px}.lobby>.room-code{text-align:left;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"qr label""qr code";place-items:center start;gap:4px 14px;width:100%;display:grid}.lobby>.room-code>.field-label{grid-area:label;align-self:end}.lobby>.room-code>.room-code-row{grid-area:code;justify-content:flex-start;align-self:start;gap:8px}.lobby>.room-code .invite-qr{grid-area:qr;margin:0}.lobby>.room-code .invite-qr img{width:6.5rem;height:6.5rem}.lobby>.room-code .invite-qr figcaption{display:none}.lobby .room-code-value{letter-spacing:.1em;font-size:2rem}}.player-list{width:100%}.player-list h2{color:var(--muted);text-align:left;margin:0 0 8px;font-size:.95rem}.player-list ul,.ranking{flex-direction:column;gap:6px;width:100%;margin:0;padding:0;list-style:none;display:flex}.player-list li,.ranking li{background:var(--panel);border:1px solid var(--border);border-radius:10px;align-items:center;gap:8px;padding:10px 14px;font-weight:600;display:flex}.player-list li.mine,.ranking li.mine{border-color:var(--accent)}.ranking li.gone{opacity:.55}.ranking .rank{flex:none;min-width:3em;font-weight:800}.ranking .score{font-variant-numeric:tabular-nums;flex-direction:column;flex:none;align-items:flex-end;margin-left:auto;display:flex}.ranking .score small{color:var(--muted);font-size:.75rem;font-weight:600}.quick-start{flex-direction:column;gap:10px;width:100%;display:flex}.quick-start>button{width:100%}.searching{margin:0;font-size:1.3rem}.countdown{color:var(--accent);font-variant-numeric:tabular-nums;margin:0;font-size:1.1rem;font-weight:700}.mode-select{flex-direction:column;align-items:center;gap:6px;width:100%;display:flex}.mode-options{flex-wrap:wrap;gap:8px;width:100%;display:flex}.mode-option{background:var(--panel);color:var(--text);border:2px solid var(--border);flex:120px;padding:10px 12px}.mode-option.selected{border-color:var(--accent);color:var(--accent)}.mode-option:disabled{opacity:1;cursor:default}.mode-option:disabled:not(.selected){opacity:.45}.my-result{flex-direction:column;align-items:center;display:flex}.my-rank{font-size:1.6rem;font-weight:800}.game.match{flex-direction:row;justify-content:center;align-items:stretch;gap:8px;max-width:82rem;padding:4px 8px 12px}.match-center{flex-direction:column;flex:0 calc(66.6667dvh - 6.66667rem);gap:12px;min-width:0;display:flex}.match .board-fit{align-items:flex-start}.opponents{flex-direction:column;flex:1 1 0;gap:6px;min-width:4rem;max-width:11rem;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow:hidden}.opponents li{flex:0 auto;min-height:0;display:flex}.opponent{background:var(--panel);width:100%;min-height:0;color:var(--text);border:2px solid var(--border);border-radius:8px;flex-direction:column;align-items:center;gap:2px;padding:4px;font-size:.75rem;font-weight:600;display:flex}.opponent>:not(.mini-board-wrap){flex-shrink:0}.opponent-info{flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 6px;width:100%;display:flex}.opponent-info .nickname{max-width:100%}.opponent .badge{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:.65rem;overflow:hidden}.opponent:disabled{cursor:default;opacity:1}.opponent.out,.opponent.out:disabled{opacity:.5}.opponent.targeted{border-color:var(--accent);box-shadow:0 0 0 2px #3b6df040}.opponent.aiming{border-color:var(--danger);box-shadow:0 0 0 2px #d6453d4d}.opponent.aiming.targeted{border-color:var(--danger);box-shadow:0 0 0 2px #d6453d4d, inset 0 0 0 2px var(--accent)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.badge.target{background:var(--accent)}.target-select{align-items:center;gap:8px;display:flex}.target-options{flex:1;gap:4px;display:flex}.target-option{background:var(--panel);min-width:0;color:var(--text);border:2px solid var(--border);white-space:nowrap;text-overflow:ellipsis;border-radius:8px;flex:1;padding:6px 4px;font-size:.8rem;overflow:hidden}.target-option.selected{border-color:var(--accent);color:var(--accent)}.target-hint{text-align:center;margin-top:-6px;font-size:.8rem}.opponents .nickname{max-width:100%}.opponents .score{font-variant-numeric:tabular-nums;color:var(--muted)}.mini-board-wrap{flex:0 auto;width:100%;min-height:1.5rem;position:relative}.mini-board{background:var(--bg);border-radius:3px;margin:auto;display:block;position:absolute;inset:0}.badge.danger{background:var(--danger)}.notice.attacked{color:var(--danger)}.hud-item.gauge{align-items:center}.gauge-cells{gap:3px;margin-top:6px;display:flex}.gauge-cells span{background:var(--border);border-radius:3px;width:18px;height:10px;transition:background .15s}.gauge-cells span.filled{background:var(--accent)}.incoming-bar{border-radius:2px;height:4px;margin-top:-8px;overflow:hidden}.incoming-bar span{background:var(--danger);transform-origin:0;height:100%;animation:linear forwards incoming-countdown;display:block}@keyframes incoming-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.board-wrap.incoming .board-canvas{animation:.8s ease-in-out infinite alternate incoming-pulse}@keyframes incoming-pulse{0%{box-shadow:0 0 0 2px #d6453d59}to{box-shadow:0 0 0 5px #d6453dcc}}@media (prefers-reduced-motion:reduce){.board-wrap.incoming .board-canvas{animation:none;box-shadow:0 0 0 4px #d6453db3}}.game.match.wide{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:1.5rem;max-width:none;padding:1.25rem 1.5rem;display:grid}.match.wide .match-center{gap:6px;width:min(66.6667dvh - 1.93333rem,100vw - 36rem)}.match.wide .board-fit{align-items:center}.match-info{flex-direction:column;gap:12px;display:flex}.match.wide .match-info,.opponents-panel{background:var(--panel);border:1px solid var(--border);border-radius:22px;min-width:0;max-width:30rem;padding:1.75rem;box-shadow:0 10px 30px #1f1d2412}.match.wide .match-info{justify-self:end;gap:1.75rem;width:100%;min-height:0;overflow:hidden}.match.wide .hud-label{font-size:.95rem}.stat-time{flex-direction:column;display:flex}.stat-time .hud-value{margin-top:4px;font-size:clamp(3rem,8vh,5.5rem);font-weight:800;line-height:1}.stat-grid{grid-template-columns:1fr 1fr;gap:10px;margin:0;display:grid}.stat{background:var(--bg);border-radius:14px;padding:.9rem 1rem}.stat dd{font-variant-numeric:tabular-nums;margin:2px 0 0;font-size:clamp(1.5rem,3.6vh,2.3rem);font-weight:800;line-height:1.15}.match.wide .hud-item.gauge{align-items:stretch}.match.wide .gauge-cells{gap:6px;width:100%;margin-top:8px}.match.wide .gauge-cells span{border-radius:6px;flex:1;height:1.2rem}.target-block{flex-direction:column;gap:10px;margin-top:auto;display:flex}.match.wide .target-select{flex-direction:column;align-items:stretch;gap:10px}.match.wide .target-select .field-label{font-size:.95rem}.match.wide .target-options{grid-template-columns:1fr 1fr;gap:8px;display:grid}.match.wide .target-option{border-radius:12px;padding:.8rem .5rem;font-size:1.05rem}.match.wide .target-hint{margin-top:0}.match.wide .notice{min-height:3em;font-size:1.05rem}.opponents-panel{flex-direction:column;justify-self:start;gap:1rem;width:100%;min-height:0;display:flex}.panel-title{margin:0;font-size:1.1rem}.panel-title span{color:var(--muted)}.opponent-grid{flex:1;gap:10px;min-height:0;margin:0;padding:0;list-style:none;display:grid}.opponent-grid li{min-height:0;display:flex}.opponent-grid .opponent{background:var(--bg);border-radius:14px;flex:1;gap:6px;padding:10px;font-size:.95rem}.opponent-grid .mini-board-wrap{flex:1 1 0;min-height:2rem;aspect-ratio:auto!important}.opponent-grid.many .opponent{gap:4px;padding:6px;font-size:.85rem}.opponent-grid .opponent .badge{font-size:.75rem}.logo-blocks{grid-template-columns:repeat(9,1fr);gap:6px;display:grid}.logo-blocks span{color:#fff;border-radius:50%;place-items:center;width:2.2rem;height:2.2rem;font-weight:800;display:grid;box-shadow:0 2px 6px #0000001f}.logo-blocks span:first-child{background:#e5534b}.logo-blocks span:nth-child(2){background:#f08c2e}.logo-blocks span:nth-child(3){color:#3a2f00;background:#f2c230}.logo-blocks span:nth-child(4){background:#5bb450}.logo-blocks span:nth-child(5){background:#23a899}.logo-blocks span:nth-child(6){background:#3b82f6}.logo-blocks span:nth-child(7){background:#6c5ce7}.logo-blocks span:nth-child(8){background:#b056d6}.logo-blocks span:nth-child(9){background:#e0569b}.menu .title{letter-spacing:-.02em;font-size:3rem}@media (width<=420px){.logo-blocks span{width:1.8rem;height:1.8rem;font-size:.85rem}}@media (width>=640px){.app{overflow-y:auto}.menu,.entry,.lobby,.result{background:var(--panel);border:1px solid var(--border);border-radius:24px;flex:none;margin:auto;padding:2.25rem 2.5rem;box-shadow:0 16px 40px #1f1d2414}.menu{width:min(100% - 32px,34rem);padding:3rem 2.5rem}.menu input,.entry input,.entry-panel,.player-list li,.ranking li,.mode-option{background:var(--bg)}}.lobby-main{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}@media (width>=900px){.lobby:has(>.lobby-main){grid-template-columns:17rem minmax(0,1fr);grid-template-areas:"code main""code chat";align-items:start;gap:1.5rem 2.5rem;width:calc(100% - 2rem);max-width:56rem;display:grid}.lobby>.room-code{border-right:1px solid var(--border);grid-area:code;justify-content:center;align-self:stretch;padding-right:2.5rem}.lobby-main{grid-area:main;min-width:0}.lobby>.chat{grid-area:chat}.lobby .mode-select{text-align:left;align-items:stretch}.lobby .mode-select .hint{text-align:left}}@media (width>=1280px){.lobby:has(>.lobby-main){grid-template-columns:17rem minmax(0,1fr) minmax(0,24rem);grid-template-areas:"code main chat";align-items:stretch;max-width:80rem}.lobby>.chat{border-left:1px solid var(--border);padding-left:2.5rem}.lobby>.chat .chat-log{flex:1 1 0;height:0;min-height:16rem}}.solo-info{flex-direction:column;gap:12px;display:flex}.game.match.compact{flex-direction:column;justify-content:flex-start;gap:6px;max-width:40rem;padding:4px 8px 8px}.match.compact .hud-value{font-size:1.4rem}.opponents.strip{scrollbar-width:none;flex-direction:row;flex:none;gap:4px;min-width:0;max-width:none;overflow-x:auto}.opponents.strip li{flex:1 1 0;min-width:3rem;max-width:5.5rem}.opponents.strip .opponent{gap:1px;padding:3px}.opponents.strip .mini-board-wrap{flex:none;height:3.6rem}.opponents.strip .opponent-info{gap:1px 4px}.opponents.strip .opponent-info .nickname{text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;overflow:hidden}.opponents.strip .badge{padding:1px 4px;font-size:.6rem}.match.compact .notice{min-height:1.3em;font-size:.85rem}.match.compact .incoming-bar{margin-top:-6px}.compact-body{flex:1;gap:6px;min-height:0;display:flex}.compact-body .board-wrap{flex:1;align-items:flex-start;min-width:0}.target-rail{flex-direction:column;flex:0 0 3.8rem;gap:8px;display:flex}.target-rail .field-label{text-align:center;font-size:.7rem}.target-rail .target-option{flex:none;padding:10px 2px;font-size:.8rem}.match:not(.wide) .opponent .badge{white-space:normal;word-break:keep-all;text-align:center;line-height:1.2;overflow:visible}.replay{flex-direction:column;flex:1;gap:12px;width:100%;max-width:82rem;min-height:0;margin:0 auto;padding:12px 16px 16px;display:flex}.replay-header{align-items:center;gap:12px;display:flex}.replay-header h2{margin:0;font-size:1.2rem}.replay-clock{font-variant-numeric:tabular-nums;margin-left:auto;font-weight:700}.replay-stage{flex:1;gap:16px;min-height:0;display:flex}.replay-focus{flex-direction:column;flex:auto;gap:6px;min-width:0;display:flex}.replay-name{justify-content:center;align-items:baseline;gap:10px;font-size:1.1rem;display:flex}.replay-score{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:800}.replay-focus .board-wrap{flex:1;min-height:0}.replay-out .board-canvas{opacity:.5}.replay-others{flex:0 22rem;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));align-content:start;gap:8px;min-width:0;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.replay-others li{display:flex}.replay-others .opponent{flex:1;padding:6px}.replay-controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.replay-play{min-width:7rem}.replay-seek{accent-color:var(--accent);flex:12rem}.replay-speeds{gap:4px;display:flex}.replay-speeds .mode-option{flex:none;padding:6px 12px;font-size:.9rem}@media (width<=700px){.replay-stage{flex-direction:column}.replay-others{flex:none;grid-template-columns:none;grid-auto-columns:4.5rem;grid-auto-flow:column;overflow:auto hidden}.replay-play{min-width:0}}.name-edit-button{order:1;margin-left:auto;padding:2px 10px;font-size:.8rem}.room-code-row{flex-wrap:wrap;justify-content:center}.room-code-row button{white-space:nowrap}.name-edit{flex-wrap:wrap;flex:1;align-items:center;gap:6px;min-width:0;display:flex}.name-edit input{flex:8rem;min-width:0;padding:6px 10px;font-size:.95rem}.name-edit .error-text{flex-basis:100%;font-size:.8rem}.chat{text-align:left;flex-direction:column;gap:8px;width:100%;min-width:0;display:flex}.chat-title{color:var(--muted);margin:0;font-size:.95rem}.chat-log{border:1px solid var(--border);background:var(--bg);overscroll-behavior:contain;border-radius:12px;flex-direction:column;gap:4px;height:11rem;margin:0;padding:10px 12px;font-size:.95rem;list-style:none;display:flex;overflow-y:auto}.chat-log li{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.chat-log li.first:not(:first-child){margin-top:6px}.chat-log li.mine{align-items:flex-end}.chat-name{color:var(--muted);padding:0 4px;font-size:.75rem;font-weight:700}.chat-text{background:var(--panel);border:1px solid var(--border);word-break:keep-all;overflow-wrap:anywhere;white-space:pre-wrap;border-radius:14px 14px 14px 4px;max-width:85%;padding:6px 11px;line-height:1.4}.chat-log li.mine .chat-text{background:var(--accent);color:var(--accent-text);border-color:#0000;border-radius:14px 14px 4px}.chat-empty{color:var(--muted);text-align:center;margin:auto;font-size:.9rem}.chat-form{gap:6px;display:flex}.chat-form input{flex:1;min-width:0;padding:10px 12px;font-size:.95rem}.chat-form button{flex:none}@media (width<=899px){.lobby-main{display:contents}.lobby:has(>.lobby-main)>.chat{order:1}.lobby-main>button.secondary{order:2}}@media (width<=759px){.lobby .chat-log{height:7.5rem}}.howto{justify-content:center;gap:14px;width:100%;max-width:30rem;margin:0 auto}.howto-dots{gap:6px;margin:0;padding:0;list-style:none;display:flex}.howto-dots li{background:var(--border);border-radius:50%;width:8px;height:8px;transition:width .2s,background .2s}.howto-dots li.seen{background:#3b6df066}.howto-dots li.current{background:var(--accent);border-radius:4px;width:22px}.howto-title{margin:0;font-size:1.4rem}.howto-content{flex-direction:column;align-items:center;gap:12px;width:100%;min-height:16rem;display:flex}.howto-body{word-break:keep-all;margin:0;line-height:1.55}.howto-task{color:var(--accent);margin:0;font-weight:700}.howto-practice{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.howto-board{width:min(100%,17rem)}.howto-result{align-items:center;gap:10px;min-height:2.2rem;display:flex}.howto-nice{color:#2eaa5a;font-weight:800}.howto-attack{align-items:center;gap:14px;padding:.5rem 0;display:flex}.howto-attack .gauge-cells{gap:5px;margin:0}.howto-attack .gauge-cells span{width:2.2rem;height:1rem}.howto-arrow{color:var(--muted);font-size:1.4rem}.howto-opponent{width:4.6rem;color:var(--muted);flex-direction:column;align-items:center;gap:2px;font-size:.75rem;display:flex}.howto-incoming{flex-direction:column;justify-content:center;align-items:center;gap:6px;width:min(100%,17rem);min-height:3rem;display:flex}.howto-incoming .incoming-bar{background:var(--border);border-radius:4px;width:100%;height:8px;margin:0}.howto-warning{color:var(--danger);font-weight:800}.howto-board.incoming .board-canvas{animation:.8s ease-in-out infinite alternate incoming-pulse}.howto-list{text-align:left;flex-direction:column;gap:10px;width:100%;margin:0;padding:0;list-style:none;display:flex}.howto-list li{background:var(--bg);word-break:keep-all;border-radius:12px;padding:.8rem 1rem;line-height:1.5}.howto-nav{gap:10px;width:100%;display:flex}.howto-nav button{flex:1}.howto-skip{padding:4px 12px;font-size:.9rem}@media (width>=640px){.howto{background:var(--panel);border:1px solid var(--border);border-radius:24px;flex:none;width:min(100% - 32px,34rem);margin:auto;padding:2.25rem 2.5rem;box-shadow:0 16px 40px #1f1d2414}}@media (prefers-reduced-motion:reduce){.howto-board.incoming .board-canvas{animation:none;box-shadow:0 0 0 4px #d6453db3}}.reconnect-banner{top:max(12px, env(safe-area-inset-top));z-index:90;background:var(--text);max-width:calc(100% - 32px);color:var(--bg);text-align:center;border-radius:999px;padding:10px 18px;font-size:.9rem;font-weight:700;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0003}