:root {
  --bg: #070b18;
  --panel: rgba(19, 27, 48, .78);
  --line: rgba(255,255,255,.1);
  --text: #f8f9ff;
  --muted: #8f9bb6;
  --accent: #ff3d74;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -10%, #202b50 0, var(--bg) 42%); color: var(--text); font-family: Inter, sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
fieldset { padding: 0; border: 0; margin: 24px 0; }
.ambient { position: fixed; border-radius: 50%; filter: blur(100px); opacity: .12; pointer-events: none; }
.ambient-one { width: 280px; height: 280px; background: #e64077; top: 10%; left: -180px; }
.ambient-two { width: 300px; height: 300px; background: #516cff; bottom: 0; right: -200px; }
.join-shell, .app-shell { position: relative; z-index: 1; width: min(100% - 28px, 520px); margin: 0 auto; }
.join-shell { min-height: 100vh; padding: 48px 0; display: grid; align-content: center; gap: 28px; }
.hero { text-align: center; }
.logo-icon { font-size: 42px; filter: drop-shadow(0 0 20px #ff4a83); }
.eyebrow, .step { color: #99a4be; font-size: 10px; font-weight: 800; letter-spacing: .22em; margin: 5px 0; }
.hero h1 { font: 400 clamp(48px, 16vw, 76px)/.82 "Archivo Black", sans-serif; letter-spacing: -.055em; margin: 12px 0 20px; }
.hero h1 span { color: #ff3d74; text-shadow: 0 0 32px rgba(255,61,116,.35); }
.tagline { color: var(--muted); font-size: 13px; }
.glass-card { border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: 0 22px 70px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.join-card { padding: 24px; }
.join-back { display: inline-block; margin-bottom: 20px; color: #818da5; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.join-step-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.join-step-heading > span { color: #ff4d7d; font: 24px "Archivo Black"; }
.join-step-heading small { color: #7d89a1; font-size: 6px; font-weight: 900; letter-spacing: .16em; }
.join-step-heading h2 { margin: 3px 0 0; font: 18px "Archivo Black"; }
.chosen-username { min-height: 54px; display: grid; place-items: center; align-content: center; gap: 3px; margin-bottom: 17px; border: 1px solid var(--line); border-radius: 13px; background: rgba(0,0,0,.16); }
.chosen-username small { color: #738099; font-size: 6px; font-weight: 900; letter-spacing: .14em; }
.chosen-username b { font-size: 13px; }
.username-taken, .join-explanation { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 11px; border: 1px solid rgba(255,190,73,.2); border-radius: 11px; background: rgba(255,174,48,.06); }
.username-taken > span, .join-explanation > span { font-size: 21px; }
.username-taken b { color: #ffc65f; font-size: 7px; }
.username-taken p, .join-explanation p { margin: 3px 0 0; color: #8d98ae; font-size: 8px; line-height: 1.45; }
.username-taken strong { color: white; }
.join-explanation { margin: 9px 0 16px; border-color: rgba(79,136,255,.2); background: rgba(79,136,255,.06); }
.join-card form > .pin-input { margin-bottom: 0; }
.join-continue { margin-top: 17px; }
.join-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: #626d84; font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.join-divider:before, .join-divider:after { content: ""; height: 1px; flex: 1; background: var(--line); }
.observer-button { min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid rgba(104,146,255,.23); border-radius: 14px; background: linear-gradient(135deg, rgba(79,136,255,.09), rgba(255,255,255,.025)); transition: transform .14s ease, border-color .14s ease, background .14s ease; }
.observer-button:hover { border-color: rgba(104,146,255,.5); background: linear-gradient(135deg, rgba(79,136,255,.15), rgba(255,255,255,.04)); }
.observer-button:active { transform: scale(.98); }
.observer-button > span { font-size: 22px; }
.observer-button > div { min-width: 0; flex: 1; }
.observer-button b, .observer-button small { display: block; }
.observer-button b { font-size: 10px; letter-spacing: .08em; }
.observer-button small { margin-top: 4px; color: #7e8aa3; font-size: 7px; }
.observer-button > i { color: #769cff; font-size: 16px; font-style: normal; }
.field-label { display: block; margin: 0 0 10px; color: #aab2c8; font-size: 10px; letter-spacing: .18em; font-weight: 800; }
.name-input { width: 100%; height: 56px; padding: 0 17px; border-radius: 14px; border: 1px solid var(--line); outline: none; color: white; background: rgba(5,8,19,.65); font-size: 16px; }
.name-input:focus { border-color: #ff3d74; box-shadow: 0 0 0 3px rgba(255,61,116,.14); }
.pin-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 20px 0 0; }
.join-pin-field { margin-top: 20px; }
.pin-input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; outline: none; color: white; background: rgba(5,8,19,.65); font-size: 20px; font-weight: 800; letter-spacing: .28em; text-align: center; }
.pin-input:focus { border-color: #ff3d74; box-shadow: 0 0 0 3px rgba(255,61,116,.14); }
.pin-helper { margin: 8px 2px 17px; color: #737f98; font-size: 8px; line-height: 1.45; }
.secondary-button { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 13px; color: #edf0f8; background: rgba(255,255,255,.06); font-size: 10px; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.secondary-button:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.09); }
.rejoin-panel { margin-top: 18px; border-top: 1px solid var(--line); }
.rejoin-panel > summary { padding-top: 17px; color: #828da5; font-size: 9px; font-weight: 800; text-align: center; list-style: none; cursor: pointer; }
.rejoin-panel > summary::-webkit-details-marker { display: none; }
.rejoin-panel > summary b { color: #ff5b88; }
.rejoin-panel > form { padding-top: 19px; }
.rejoin-pin-label { margin-top: 15px; }
.rejoin-panel .pin-input { margin-bottom: 13px; text-align: left; }
.team-assignment { margin-top: 22px; }
.assignment-order { min-height: 68px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.assignment-team { display: grid; place-items: center; gap: 3px; font-size: 8px; font-weight: 900; }
.assignment-team i { font-size: 20px; font-style: normal; }
.assignment-arrow { color: #57627a; font-size: 12px; }
.team-assignment > p { margin: 7px 2px 0; color: #737f98; font-size: 8px; text-align: center; }
.team-picker, .target-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.team-option, .target-option { min-height: 78px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); font-size: 11px; font-weight: 800; cursor: pointer; }
.team-option input, .target-option input, .shot-option input { position: absolute; opacity: 0; pointer-events: none; }
.team-dot { font-size: 20px; }
.team-option:has(input:checked), .target-option:has(input:checked) { border-color: currentColor; background: rgba(255,255,255,.1); transform: translateY(-2px); }
.team-red { color: #ff4e65; }.team-blue { color: #4f88ff; }.team-green { color: #35d789; }
.primary-button, .fire-button { width: 100%; min-height: 58px; border: 0; border-radius: 15px; color: white; background: linear-gradient(135deg, #ff326c, #df2258); box-shadow: 0 12px 28px rgba(223,34,88,.3); font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.primary-button:active, .fire-button:active, .drink-cell:active { transform: scale(.97); }
.app-shell { padding: 16px 0 100px; }
.app-header { display: flex; align-items: center; justify-content: space-between; min-height: 50px; }
.mini-logo { font: 16px "Archivo Black"; letter-spacing: -.02em; }
.icon-link { padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.header-actions { display: flex; align-items: center; gap: 7px; }
.player-banner { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 24px 3px 17px; }
.player-banner h1 { margin: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; font: 28px "Archivo Black"; }
.team-badge { flex: none; padding: 9px 10px; border: 1px solid currentColor; border-radius: 999px; background: rgba(255,255,255,.04); font-size: 9px; font-weight: 900; }
.player-context-badges { display: grid; justify-items: end; gap: 5px; }
.game-code-pill { flex: none; display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(126,158,255,.25); border-radius: 999px; color: #9ab3ff; background: rgba(79,136,255,.065); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.game-code-pill small { color: #65728b; font-size: 5px; letter-spacing: .12em; }
.page-game-code { width: max-content; display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 9px; border: 1px solid rgba(126,158,255,.22); border-radius: 99px; color: #9ab3ff; background: rgba(79,136,255,.055); font-size: 8px; font-weight: 900; letter-spacing: .09em; }.page-game-code small { color: #69768e; font-size: 5px; letter-spacing: .12em; }
.combat-card, .purchase-card { padding: 20px; margin: 12px 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.section-heading > div { display: flex; align-items: baseline; gap: 10px; }
.section-heading h2 { margin: 0; font: 17px "Archivo Black"; }
.count-pill { padding: 6px 9px; border-radius: 99px; background: rgba(99,255,180,.1); color: #5af3ae; font-size: 9px; font-weight: 900; }
.shot-list { display: grid; gap: 8px; }
.shot-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 7px; }
.shot-row > form { display: grid; }
.shot-option { display: flex; align-items: center; min-height: 54px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(0,0,0,.16); cursor: pointer; }
.shot-option:has(input:checked) { border-color: var(--accent); background: rgba(255,61,116,.1); }
.remove-shot { width: 42px; min-height: 54px; border: 1px solid rgba(255,105,124,.18); border-radius: 13px; color: #ff697c; background: rgba(255,70,96,.055); font-size: 23px; line-height: 1; cursor: pointer; }
.remove-shot:hover { border-color: rgba(255,105,124,.45); background: rgba(255,70,96,.12); }
.remove-shot:active { transform: scale(.94); }
.drink-emoji { width: 34px; font-size: 20px; }.shot-name { flex: 1; font-size: 13px; font-weight: 800; }.gun { opacity: .7; }
.target-heading { margin-top: 22px; }
.target-picker { grid-template-columns: repeat(2, 1fr); }
.target-option { min-height: 64px; grid-auto-flow: column; }
.target-option .target-name { display: grid; gap: 2px; text-align: left; }
.target-option .target-name small { color: #69758d; font-size: 6px; letter-spacing: .08em; }
.target-option.unavailable { color: #657089; cursor: not-allowed; filter: grayscale(.8); opacity: .52; }
.target-option.unavailable:has(input:checked) { border-color: var(--line); background: rgba(255,255,255,.035); transform: none; }
.waiting-targets { margin: 13px 0 -4px; color: #7e899f; font-size: 8px; text-align: center; }
.fire-button { margin-top: 16px; font-size: 16px; }
.fire-button:disabled { color: #778199; background: rgba(255,255,255,.06); box-shadow: none; cursor: not-allowed; }
.combat-locked { min-height: 105px; display: grid; place-items: center; align-content: center; gap: 4px; margin-top: 16px; padding: 15px; border: 1px dashed rgba(255,255,255,.12); border-radius: 14px; color: #8d98af; background: rgba(0,0,0,.12); text-align: center; }
.combat-locked > span { font-size: 26px; }.combat-locked > b { color: #dce0eb; font-size: 9px; letter-spacing: .08em; }.combat-locked > small { font-size: 7px; }
.game-state { margin-bottom: 12px; }
.battle-state-card { min-height: 76px; display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(17,25,45,.78); }
.battle-state-card > span { font-size: 27px; }.battle-state-card > div { min-width: 0; flex: 1; }.battle-state-card small, .battle-state-card b { display: block; }.battle-state-card small { margin-bottom: 3px; color: #818da5; font-size: 6px; font-weight: 900; letter-spacing: .13em; }.battle-state-card b { font-size: 9px; }.battle-state-card p { margin: 4px 0 0; color: #7d899f; font-size: 7px; line-height: 1.35; }.battle-state-card > a { flex: none; color: #a8b6d4; font-size: 7px; font-weight: 900; }
.waiting-state { border-color: rgba(255,191,75,.2); background: linear-gradient(110deg, rgba(255,174,47,.07), rgba(17,25,45,.78)); }
.eliminated-state { border-color: rgba(199,130,255,.3); background: linear-gradient(110deg, rgba(133,56,181,.16), rgba(17,25,45,.82)); }.eliminated-state small, .eliminated-state > a { color: #d3a2f7; }
.battle-live-strip { min-height: 37px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(73,228,158,.18); border-radius: 12px; color: #55e5a5; background: rgba(44,185,124,.055); font-size: 7px; }.battle-live-strip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse 1.6s infinite; }.battle-live-strip b { letter-spacing: .1em; }.battle-live-strip span { margin-left: auto; color: #77849b; }
.winner-screen { position: fixed; z-index: 30; inset: 0; min-height: 100dvh; padding: 28px; display: grid; place-items: center; align-content: center; color: var(--accent); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 36%), rgba(5,8,18,.97); text-align: center; animation: result-in .45s cubic-bezier(.2,.9,.3,1.15); }
.winner-confetti { margin-bottom: 18px; color: #ffd166; font-size: 18px; letter-spacing: .25em; animation: pulse 1.6s infinite; }.winner-trophy { font-size: 76px; filter: drop-shadow(0 0 24px rgba(255,205,91,.35)); }.winner-screen .eyebrow { margin-top: 14px; color: #ffd36e; }.winner-screen h1 { max-width: 470px; margin: 8px 0 15px; color: white; font: clamp(35px, 11vw, 58px)/.9 "Archivo Black"; letter-spacing: -.045em; }.winner-team { padding: 10px 14px; border: 1px solid currentColor; border-radius: 99px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 10px; font-weight: 900; letter-spacing: .08em; }.winner-screen > p:not(.eyebrow) { color: #9da8bd; font-size: 10px; }.winner-actions { width: min(100%, 330px); display: grid; gap: 8px; margin-top: 18px; }.winner-actions a { display: grid; place-items: center; }
.empty-state { padding: 20px 0; text-align: center; color: var(--muted); }.empty-state > span { font-size: 30px; opacity: .5; }.empty-state p { margin: 8px 0 4px; color: #d5d9e6; font-weight: 800; }.empty-state small { font-size: 11px; }
.helper { margin: -7px 0 15px; color: var(--muted); font-size: 11px; }
.drink-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.drink-grid form { min-width: 0; }
.drink-cell { width: 100%; aspect-ratio: .82; padding: 5px 2px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 10px; color: #f7f8fc; background: rgba(3,7,17,.46); cursor: pointer; transition: .12s ease; }
.drink-cell:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); }.drink-cell span { font-size: 19px; }.drink-cell b { width: 100%; overflow: hidden; font-size: clamp(6px, 1.8vw, 8px); line-height: 1.15; text-overflow: ellipsis; }
.purchase-confirm { display: flex; align-items: center; gap: 12px; margin: -4px -4px 18px; padding: 13px; border: 1px solid rgba(83,234,167,.25); border-radius: 13px; background: rgba(42,185,121,.1); }.purchase-confirm > span { font-size: 25px; }.purchase-confirm b, .purchase-confirm small { display: block; }.purchase-confirm b { font-size: 12px; }.purchase-confirm small { margin-top: 3px; color: #9ab4a8; font-size: 9px; }
.shot-result { margin: -20px -20px 20px; padding: 25px 10px; border-radius: 23px 23px 14px 14px; text-align: center; animation: result-in .38s cubic-bezier(.2,.9,.3,1.3); }.shot-result.hit { background: radial-gradient(circle, rgba(255,77,83,.35), rgba(255,55,90,.06)); }.shot-result.miss { background: radial-gradient(circle, rgba(67,145,255,.26), rgba(67,145,255,.04)); }.shot-result.sunk { background: radial-gradient(circle, rgba(167,82,255,.35), rgba(167,82,255,.05)); }.result-emoji { font-size: 48px; }.shot-result h2 { margin: 5px 0; font: 34px "Archivo Black"; }.shot-result p { margin: 0; color: #cbd1df; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.shot-board-preview { margin: -5px 0 22px; padding: 13px; border: 1px solid color-mix(in srgb, currentColor 38%, var(--line)); border-radius: 15px; color: white; background: rgba(2,6,15,.38); }
.shot-board-preview > header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.shot-board-preview > header small { display: block; color: #7f8aa3; font-size: 6px; font-weight: 900; letter-spacing: .14em; }
.shot-board-preview > header h3 { margin: 2px 0 0; color: white; font: 12px "Archivo Black"; }
.shot-board-preview > header > b { padding: 5px 7px; border-radius: 99px; color: #ffc965; background: rgba(255,190,73,.1); font-size: 6px; letter-spacing: .08em; }
.shot-board-preview .score-board-cell.attacked { cursor: default; }
.shot-board-preview .score-board-cell.latest-shot { z-index: 2; outline: 2px solid #ffc85e; outline-offset: 1px; animation: latest-shot 1.2s ease-in-out 2; }
.shot-board-preview .score-board-cell.latest-shot > small { color: #ffd071; font-weight: 900; }
.shot-preview-legend { display: flex; justify-content: center; gap: 13px; margin-top: 9px; color: #7e899f; font-size: 6px; font-weight: 900; }
.message-stack { display: grid; gap: 6px; margin-bottom: 10px; }.message { padding: 12px; border: 1px solid rgba(88,209,153,.25); border-radius: 12px; background: rgba(52,170,115,.12); font-size: 12px; }.message.error { border-color: rgba(255,76,100,.3); background: rgba(255,55,80,.1); }
.bottom-nav { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; height: 75px; display: flex; justify-content: center; border-top: 1px solid var(--line); background: rgba(7,11,24,.94); backdrop-filter: blur(20px); }.bottom-nav a, .bottom-nav form, .bottom-nav .leave-nav-button { flex: 1; width: auto; max-width: 105px; }.bottom-nav a, .bottom-nav button { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 4px; border: 0; color: #707b97; background: none; font-size: 8px; font-weight: 900; cursor: pointer; }.bottom-nav span { font-size: 18px; }.bottom-nav .active { color: white; }
.confirm-dialog { width: min(calc(100% - 32px), 390px); padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; color: var(--text); background: transparent; box-shadow: 0 28px 90px rgba(0,0,0,.65); }
.confirm-dialog::backdrop { background: rgba(2,5,13,.78); backdrop-filter: blur(7px); }
.confirm-dialog-card { padding: 27px 22px 21px; border-radius: inherit; background: radial-gradient(circle at 50% 0, rgba(255,74,112,.16), transparent 48%), #11182b; text-align: center; }
.confirm-dialog-icon { display: block; margin-bottom: 8px; font-size: 38px; }
.confirm-dialog h2 { margin: 7px auto 9px; font: 22px/1.05 "Archivo Black", sans-serif; }
.confirm-dialog-card > p:last-of-type { max-width: 290px; margin: 0 auto; color: var(--muted); font-size: 10px; line-height: 1.5; }
.confirm-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 22px; }
.confirm-dialog-actions form { display: grid; }
.leave-confirm-button { min-height: 50px; border: 1px solid rgba(255,86,111,.45); border-radius: 13px; color: #fff; background: rgba(255,61,91,.15); font-size: 9px; font-weight: 900; letter-spacing: .06em; cursor: pointer; }
.leave-confirm-button:hover { background: rgba(255,61,91,.25); }
.leave-confirm-button:active { transform: scale(.97); }
@keyframes result-in { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }
@media (min-width: 760px) { .app-shell { width: min(100% - 40px, 820px); }.join-shell { grid-template-columns: 1fr 1fr; width: min(100% - 40px, 860px); align-items: center; }.drink-cell b { font-size: 9px; } }

.page-title, .score-title { padding: 32px 3px 17px; }
.page-title h1, .score-title h1 { margin: 4px 0 8px; font: 30px "Archivo Black"; letter-spacing: -.035em; }
.page-title > p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.captain-card { padding: 18px; }
.placement-controls { display: grid; grid-template-columns: 1fr; gap: 0; }
.placement-controls fieldset { margin: 0 0 16px; }
.segmented { display: flex; gap: 7px; }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; }
.segmented label span, .all-placed { min-height: 40px; padding: 8px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.18); color: #9ba5bd; font-size: 9px; font-weight: 900; cursor: pointer; }
.segmented label:has(input:checked) span { border-color: var(--accent); color: white; background: rgba(255,61,116,.12); }
.all-placed { width: 100%; border-color: rgba(74,225,153,.3); color: #4de5a0; }
.tap-instruction { margin: 2px 0 10px; color: #c0c7d7; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.captain-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.captain-cell { position: relative; width: 100%; aspect-ratio: .85; padding: 4px 2px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 10px; color: white; background: rgba(3,7,17,.5); cursor: crosshair; }
.captain-cell span { font-size: 17px; }
.captain-cell b { max-width: 100%; overflow: hidden; font-size: 6px; text-overflow: ellipsis; }
.captain-cell i { font-size: 6px; color: var(--accent); font-style: normal; font-weight: 900; }
.captain-cell.occupied { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); opacity: 1; }
.team-theme-red { --accent: #ff4e65; }
.team-theme-blue { --accent: #4f88ff; }
.team-theme-green { --accent: #35d789; }
.fleet-list { margin-top: 22px; }
.fleet-row { min-height: 48px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); color: #cdd2df; font-size: 10px; }
.fleet-row .ship-blocks { color: var(--accent); letter-spacing: 2px; }
.fleet-row b { flex: 1; }
.fleet-row button { border: 0; color: #ff697c; background: none; font-size: 8px; font-weight: 900; cursor: pointer; }
.fleet-empty { color: var(--muted); font-size: 11px; }
.ready-button { width: 100%; min-height: 52px; margin-top: 14px; border: 1px solid #49e5a0; border-radius: 13px; color: #04150d; background: #49e5a0; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.ready-button:disabled { border-color: var(--line); color: #626d86; background: rgba(255,255,255,.035); cursor: not-allowed; }
.fleet-status { padding: 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.fleet-status.ready { border-color: rgba(68,231,159,.3); color: #4ee4a2; background: rgba(44,185,124,.08); }
.fleet-status span { font-size: 8px; }
.ready-splash { margin: -4px -4px 15px; padding: 22px; display: grid; place-items: center; gap: 4px; border-radius: 14px; background: radial-gradient(circle, rgba(49,205,137,.24), rgba(49,205,137,.04)); font-size: 28px; }
.ready-splash b { font: 18px "Archivo Black"; }
.ready-splash small { color: #8ec7ad; font-size: 9px; }
.fleet-map-heading { margin-top: 18px; }
.team-board-card, .team-members-card { margin-bottom: 13px; padding: 18px; }
.team-board-heading { align-items: start; }
.fleet-status-mini { padding: 6px 8px; border: 1px solid var(--line); border-radius: 99px; color: #727e96; font-size: 6px; font-weight: 900; letter-spacing: .08em; }
.fleet-status-mini.ready { border-color: rgba(74,225,153,.28); color: #4de5a0; background: rgba(49,205,137,.07); }
.team-board-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.team-board-stats span { min-height: 42px; display: grid; place-items: center; align-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 10px; color: #7c879e; background: rgba(0,0,0,.13); font-size: 6px; font-weight: 900; }
.team-board-stats b { color: white; font: 14px "Archivo Black"; }
.own-team-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.own-board-cell { position: relative; min-width: 0; aspect-ratio: .86; padding: 4px 2px; display: grid; place-items: center; align-content: center; gap: 3px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: rgba(2,6,15,.46); }
.own-board-cell > span { font-size: 17px; filter: grayscale(.55); opacity: .55; }
.own-board-cell > b { width: 100%; overflow: hidden; color: #78839a; font-size: 6px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.own-board-cell > small { color: var(--accent); font-size: 5px; font-weight: 900; }
.own-board-cell.ship { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 13%, rgba(2,6,15,.46)); }
.own-board-cell.ship > span, .own-board-cell.attacked > span { filter: none; opacity: 1; }
.own-board-cell.ship > b, .own-board-cell.attacked > b { color: #e7e9f0; }
.own-board-cell.hit { border-color: rgba(255,83,105,.7); background: radial-gradient(circle, rgba(255,70,92,.3), rgba(255,70,92,.06)); }
.own-board-cell.miss { border-color: rgba(76,139,255,.45); background: radial-gradient(circle, rgba(65,132,255,.2), rgba(65,132,255,.03)); }
.own-board-legend { display: flex; justify-content: center; gap: 14px; margin-top: 11px; color: #7e899f; font-size: 7px; font-weight: 900; }
.team-members-card { padding-bottom: 10px; }
.team-member-list { margin-top: -3px; }
.team-member { min-height: 58px; display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line); }
.member-avatar { width: 34px; height: 34px; display: grid; flex: none; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 12px; font-weight: 900; }
.team-member > div { min-width: 0; flex: 1; }
.team-member > div b, .team-member > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-member > div b { font-size: 11px; }
.team-member > div small { margin-top: 3px; color: #69758d; font-size: 6px; font-weight: 800; }
.team-member > strong { padding: 5px 7px; border-radius: 99px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 6px; }
.pin-settings-card { margin-bottom: 13px; padding: 0 18px; }
.pin-settings-card > summary { min-height: 66px; display: flex; align-items: center; gap: 11px; list-style: none; cursor: pointer; }
.pin-settings-card > summary::-webkit-details-marker { display: none; }
.pin-settings-card > summary > span { font-size: 20px; }
.pin-settings-card > summary > div { flex: 1; }
.pin-settings-card > summary b, .pin-settings-card > summary small { display: block; }
.pin-settings-card > summary b { font-size: 10px; }
.pin-settings-card > summary small { margin-top: 3px; color: #758199; font-size: 7px; }
.pin-settings-card > summary i { color: #7f8aa2; font-size: 20px; font-style: normal; transform: rotate(90deg); transition: transform .15s ease; }
.pin-settings-card[open] > summary i { transform: rotate(-90deg); }
.pin-settings-card > form { padding: 0 0 17px; border-top: 1px solid var(--line); }
.pin-settings-card .pin-fields { margin-bottom: 12px; }
.scoreboard-shell { position: relative; z-index: 1; width: min(100% - 28px, 800px); margin: 0 auto; padding: 16px 0 100px; }
.score-header { display: flex; align-items: center; justify-content: space-between; height: 50px; }
.observer-pill { padding: 7px 9px; border: 1px solid rgba(104,146,255,.25); border-radius: 99px; color: #88a7ff; background: rgba(79,136,255,.07); font-size: 8px; font-weight: 900; letter-spacing: .05em; }
.live-pill { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(73,228,158,.25); border-radius: 99px; color: #55e5a5; font-size: 9px; font-weight: 900; }
.live-pill i, .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #4fe3a0; box-shadow: 0 0 12px #4fe3a0; animation: pulse 1.6s infinite; }
.observer-copy { margin: -5px 0 18px; color: #71809d; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.score-grid { display: grid; gap: 9px; }
.score-team { position: relative; min-height: 92px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 15px; padding: 14px; overflow: hidden; border: 1px solid var(--line); border-left: 3px solid currentColor; border-radius: 16px; background: rgba(17,25,45,.75); }
.score-team:after { content: ""; position: absolute; width: 100px; height: 100px; right: -40px; border-radius: 50%; background: currentColor; filter: blur(60px); opacity: .1; }
.score-team.defeated { border-color: rgba(199,130,255,.42); border-left-color: #c782ff; background: linear-gradient(110deg, rgba(82,35,112,.3), rgba(17,25,45,.82)); }
.score-team.defeated .team-label, .score-team.defeated .score-stat { opacity: .58; filter: grayscale(.75); }
.score-team.winning-team { border-color: currentColor; box-shadow: inset 0 0 30px color-mix(in srgb, currentColor 9%, transparent), 0 0 24px color-mix(in srgb, currentColor 10%, transparent); }
.score-battle-banner { min-height: 82px; display: flex; align-items: center; gap: 13px; margin-bottom: 11px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: rgba(17,25,45,.78); }.score-battle-banner > span { font-size: 34px; }.score-battle-banner small { color: #7e899f; font-size: 6px; font-weight: 900; letter-spacing: .15em; }.score-battle-banner h2 { margin: 4px 0 2px; color: white; font: 15px "Archivo Black"; }.score-battle-banner p { margin: 0; color: #7e899f; font-size: 7px; }.score-battle-banner.live { border-color: rgba(73,228,158,.24); background: linear-gradient(110deg, rgba(44,185,124,.1), rgba(17,25,45,.78)); }.score-battle-banner.live small { color: #55e5a5; }.score-battle-banner.winner { border-color: currentColor; background: linear-gradient(110deg, color-mix(in srgb, currentColor 16%, transparent), rgba(17,25,45,.86)); }.score-battle-banner.winner small { color: #ffd068; }
.team-label { display: flex; align-items: center; gap: 10px; }
.team-label > span { font-size: 27px; }
.team-label small, .score-stat span { display: block; color: #8691aa; font-size: 7px; font-weight: 900; letter-spacing: .15em; }
.team-label h2 { margin: 2px 0 0; color: white; font: 17px "Archivo Black"; }
.score-stat { min-width: 40px; color: white; text-align: center; }
.score-stat strong { display: block; font: 24px "Archivo Black"; }
.score-roster-toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.score-roster { position: relative; z-index: 1; grid-column: 1 / -1; padding: 8px 0 13px; border-top: 1px solid var(--line); }
.score-roster-heading { min-height: 27px; display: flex; align-items: center; gap: 7px; color: #7b879f; font-size: 6px; font-weight: 900; letter-spacing: .13em; cursor: pointer; }
.score-roster-heading > span { flex: 1; }
.score-roster-heading .hide-members { display: none; }
.score-roster-heading b { min-width: 18px; padding: 3px 5px; border-radius: 99px; color: currentColor; background: rgba(255,255,255,.055); text-align: center; }
.score-roster-heading i { color: #68758d; font-size: 15px; font-style: normal; transition: transform .15s ease; }
.score-roster-members { display: none; flex-wrap: wrap; gap: 6px; }
#team-members-red:checked ~ #scoreboard-content .team-red .score-roster-members,
#team-members-blue:checked ~ #scoreboard-content .team-blue .score-roster-members,
#team-members-green:checked ~ #scoreboard-content .team-green .score-roster-members { display: flex; }
#team-members-red:checked ~ #scoreboard-content .team-red .score-roster-heading i,
#team-members-blue:checked ~ #scoreboard-content .team-blue .score-roster-heading i,
#team-members-green:checked ~ #scoreboard-content .team-green .score-roster-heading i { transform: rotate(180deg); }
#team-members-red:checked ~ #scoreboard-content .team-red .show-members,
#team-members-blue:checked ~ #scoreboard-content .team-blue .show-members,
#team-members-green:checked ~ #scoreboard-content .team-green .show-members { display: none; }
#team-members-red:checked ~ #scoreboard-content .team-red .hide-members,
#team-members-blue:checked ~ #scoreboard-content .team-blue .hide-members,
#team-members-green:checked ~ #scoreboard-content .team-green .hide-members { display: block; }
.score-roster-members > em { color: #5f6a82; font-size: 7px; font-style: normal; font-weight: 900; }
.score-member { min-width: 0; display: flex; align-items: center; gap: 5px; padding: 5px 7px 5px 5px; border: 1px solid rgba(255,255,255,.065); border-radius: 99px; color: #e6e9f3; background: rgba(0,0,0,.14); }
.score-member > i { width: 19px; height: 19px; display: grid; flex: none; place-items: center; border-radius: 50%; color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); font-size: 7px; font-style: normal; font-weight: 900; }
.score-member > b { max-width: 100px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.score-member > small { color: currentColor; font-size: 5px; font-weight: 900; }
.ready-indicator { position: absolute; left: 14px; bottom: 7px; color: #66718a; font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.ready-indicator.is-ready { color: #4fe1a0; }
.defeated-indicator { position: absolute; left: 14px; bottom: 7px; color: #d7a2ff; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-shadow: 0 0 14px rgba(199,130,255,.55); }
.winner-indicator { position: absolute; left: 14px; bottom: 7px; color: #ffd36c; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-shadow: 0 0 14px rgba(255,205,91,.45); }
.activity-card { margin-top: 13px; padding: 18px; }
.boards-section { margin-top: 24px; }
.boards-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 0 3px 12px; }
.boards-heading h2 { margin: 3px 0 0; font: 20px "Archivo Black"; }
.board-legend { display: flex; gap: 8px; color: #8e99b1; font-size: 7px; font-weight: 900; }
.board-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
.board-tabs button { min-height: 42px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.035); color: #78839b; font-size: 9px; font-weight: 900; cursor: pointer; }
.board-tabs button.active { border-color: currentColor; color: inherit; background: rgba(255,255,255,.095); box-shadow: inset 0 -2px currentColor; }
.board-tabs button.team-red.active { color: #ff4e65; }
.board-tabs button.team-blue.active { color: #4f88ff; }
.board-tabs button.team-green.active { color: #35d789; }
.score-boards { display: grid; gap: 12px; }
.score-board[hidden] { display: none; }
.score-board { padding: 15px; color: white; border-top: 2px solid currentColor; }
.score-board > header { min-height: 42px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.score-board > header > div { display: flex; align-items: center; gap: 8px; }
.score-board > header > div > span { font-size: 22px; }
.score-board > header small { display: block; color: #7f8aa3; font-size: 6px; font-weight: 900; letter-spacing: .16em; }
.score-board > header h3 { margin: 2px 0 0; color: white; font: 13px "Archivo Black"; }
.score-board > header > b { padding: 6px 8px; border-radius: 99px; color: #929db5; background: rgba(255,255,255,.045); font-size: 7px; }
.score-board-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.score-board-cell { position: relative; width: 100%; min-width: 0; aspect-ratio: .86; padding: 4px 2px; display: grid; place-items: center; align-content: center; gap: 3px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; color: white; background: rgba(2,6,15,.45); }
.score-board-cell.attacked { cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.score-board-cell.attacked:active { transform: scale(.94); }
.score-board-cell.attacked[aria-expanded="true"] { outline: 2px solid currentColor; outline-offset: 1px; }
.score-board-cell > span { font-size: 16px; filter: grayscale(.55); opacity: .55; }
.score-board-cell > b { width: 100%; overflow: hidden; color: #7e899f; font-size: 6px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.score-board-cell > small { width: calc(100% - 4px); overflow: hidden; color: white; font-size: 5px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.score-board-cell.attacked > span { filter: none; opacity: 1; }
.score-board-cell.attacked > b { color: #e7e9f0; }
.score-board-cell.hit { border-color: rgba(255,83,105,.5); background: radial-gradient(circle, rgba(255,70,92,.22), rgba(255,70,92,.04)); }
.score-board-cell.miss { border-color: rgba(76,139,255,.38); background: radial-gradient(circle, rgba(65,132,255,.18), rgba(65,132,255,.03)); }
.score-board-cell.sunk-ship { overflow: visible; }
.ship-outline { position: absolute; z-index: 1; inset: 2px; border: 2px solid #c782ff; border-radius: 999px; box-shadow: inset 0 0 12px rgba(199,130,255,.2), 0 0 8px rgba(199,130,255,.45); pointer-events: none; }
.sunk-horizontal.sunk-start .ship-outline { right: -4px; border-right: 0; border-radius: 999px 0 0 999px; }
.sunk-horizontal.sunk-middle .ship-outline { right: -4px; left: -4px; border-right: 0; border-left: 0; border-radius: 0; }
.sunk-horizontal.sunk-end .ship-outline { left: -4px; border-left: 0; border-radius: 0 999px 999px 0; }
.sunk-vertical.sunk-start .ship-outline { bottom: -4px; border-bottom: 0; border-radius: 999px 999px 0 0; }
.sunk-vertical.sunk-middle .ship-outline { top: -4px; bottom: -4px; border-top: 0; border-bottom: 0; border-radius: 0; }
.sunk-vertical.sunk-end .ship-outline { top: -4px; border-top: 0; border-radius: 0 0 999px 999px; }
.cell-detail-panels { min-height: 34px; margin-top: 12px; border-top: 1px solid var(--line); }
.board-cell-detail { margin-top: 10px; padding: 9px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(0,0,0,.18); animation: detail-in .18s ease-out; }
.board-cell-detail[hidden] { display: none; }
.no-board-shots { margin: 12px 2px 0; color: #68748d; font-size: 8px; font-weight: 800; }
.detail-drink { display: flex; align-items: center; gap: 7px; padding-bottom: 6px; }
.detail-drink > span { font-size: 15px; }
.detail-drink > b { flex: 1; font-size: 9px; }
.detail-drink > i { font-size: 7px; font-style: normal; font-weight: 900; }
.detail-drink > i.hit { color: #ff6579; }
.detail-drink > i.miss { color: #5b9bff; }
.detail-shot { min-height: 22px; display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(255,255,255,.045); font-size: 8px; }
.detail-shot time { color: #6d7890; }
.detail-shot span { flex: 1; }
.detail-shot b { color: #c782ff; font-size: 7px; }
.activity-list { margin-top: -3px; }
.activity-row { min-height: 53px; display: grid; grid-template-columns: 34px minmax(58px,1fr) 12px 24px minmax(48px,1fr) auto; align-items: center; gap: 4px; border-top: 1px solid var(--line); font-size: 9px; }
.activity-row time { color: #69758e; font-variant-numeric: tabular-nums; }
.activity-player { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.activity-arrow { color: #65718b; }
.activity-drink { overflow: hidden; color: #969fb4; text-overflow: ellipsis; white-space: nowrap; }
.activity-result { font-size: 7px; }
.activity-result.hit { color: #ff6579; }
.activity-result.miss { color: #5b9bff; }
.activity-result.sunk { color: #c782ff; }
.activity-empty { padding: 35px 0; text-align: center; }
.activity-empty > span { font-size: 30px; }
.activity-empty p { margin: 8px 0 3px; font-weight: 800; }
.activity-empty small { color: var(--muted); font-size: 9px; }

/* How to play */
.guide-shell { position: relative; z-index: 1; width: min(100% - 28px, 760px); margin: 0 auto; padding: 18px 0 60px; }
.guide-header { min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
.guide-back { color: #8994ac; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.guide-hero { padding: 42px 6px 28px; text-align: center; }
.guide-hero h1 { margin: 10px 0 15px; font: 48px/.84 "Archivo Black"; letter-spacing: -.055em; }
.guide-hero h1 span { color: #ff3d74; text-shadow: 0 0 28px rgba(255,61,116,.34); }
.guide-hero > p:last-child { max-width: 430px; margin: 0 auto; color: #98a3ba; font-size: 12px; line-height: 1.55; }
.guide-loop { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 14px; }
.guide-loop > div { min-width: 48px; min-height: 58px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); }
.guide-loop span { font-size: 18px; }
.guide-loop b { font-size: 6px; letter-spacing: .08em; }
.guide-loop > i { color: #556078; font-size: 9px; font-style: normal; }
.guide-core, .guide-tactics, .guide-fleet, .guide-scores, .guide-rules { padding: 20px; }
.guide-core, .guide-split, .guide-steps, .guide-scores, .guide-rules { margin-top: 13px; }
.guide-section-title { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.guide-section-title > span { min-width: 28px; color: #ff4b7d; font: 16px "Archivo Black"; }
.guide-section-title p { margin: 1px 0 3px; color: #7f8aa2; font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.guide-section-title h2 { margin: 0; font: 16px "Archivo Black"; }
.guide-core > p, .guide-fleet > p, .guide-scores > p { color: #9ca6bb; font-size: 10px; line-height: 1.55; }
.coordinate-story { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; margin-top: 18px; }
.coordinate-story > i { color: #647089; font-size: 10px; font-style: normal; }
.coordinate-tile { min-width: 0; min-height: 90px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 7px 2px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: rgba(2,6,15,.42); text-align: center; }
.coordinate-tile small { color: #748098; font-size: 5px; font-weight: 900; letter-spacing: .08em; }
.coordinate-tile span { font-size: 24px; }
.coordinate-tile b { max-width: 100%; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.coordinate-tile.bought { border-color: rgba(255,178,68,.35); background: rgba(255,165,41,.07); }
.coordinate-tile.attacked { border-color: rgba(255,76,104,.45); background: radial-gradient(circle, rgba(255,69,94,.2), rgba(255,69,94,.03)); }
.guide-split { display: grid; gap: 13px; }
.example-board-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 8px; }
.example-board-heading small { color: #718099; font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.guide-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.guide-board > i { min-width: 0; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 1px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(2,6,15,.42); font-style: normal; }
.guide-board > i span { font-size: 13px; }
.guide-board > i b { max-width: 100%; overflow: hidden; color: #b7bfd0; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
.guide-board > i.miss { color: #5b9bff; border-color: rgba(76,139,255,.28); background: rgba(65,132,255,.09); font-size: 13px; }
.guide-board > i.hit { border-color: rgba(255,83,105,.65); background: radial-gradient(circle, rgba(255,70,92,.32), rgba(255,70,92,.07)); }
.guide-board > i.candidate { border-color: rgba(255,191,73,.52); background: rgba(255,177,49,.08); box-shadow: inset 0 0 10px rgba(255,177,49,.08); }
.tactical-tip { margin: 12px 0 0; padding: 11px; border-radius: 10px; color: #aab4c7; background: rgba(255,180,57,.07); font-size: 8px; line-height: 1.55; }
.tactical-tip b { color: #ffc663; }
.fleet-example { min-height: 56px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.fleet-example > div { display: flex; align-items: center; gap: 10px; }
.fleet-example span { color: #5b9bff; font-size: 15px; letter-spacing: 3px; text-shadow: 0 0 12px rgba(79,136,255,.35); }
.fleet-example b { font-size: 9px; }
.fleet-example small { margin-left: auto; color: #707c94; font-size: 6px; font-weight: 900; }
.fleet-example.vertical { min-height: 86px; }
.fleet-example.vertical span { display: block; font-size: 10px; line-height: .75; }
.guide-steps { padding: 20px 2px 2px; }
.step-card { min-height: 76px; display: grid; grid-template-columns: 24px 38px 1fr; align-items: center; gap: 8px; margin-bottom: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(17,25,45,.72); }
.step-card em { color: #ff4b7d; font: 16px "Archivo Black"; font-style: normal; text-align: center; }
.step-card > span { font-size: 25px; text-align: center; }
.step-card b { font-size: 9px; }
.step-card p { margin: 4px 0 0; color: #8995ad; font-size: 8px; line-height: 1.45; }
.intel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.intel-grid span { min-height: 45px; display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.14); font-size: 13px; }
.intel-grid b { color: #cbd1df; font-size: 7px; }
.guide-rules ul { display: grid; gap: 7px; padding: 0; margin: 0; list-style: none; }
.guide-rules li { min-height: 43px; display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-top: 1px solid var(--line); color: #a8b1c4; font-size: 8px; line-height: 1.4; }
.guide-rules li > span { width: 42px; flex: none; color: white; font-size: 12px; font-weight: 900; text-align: center; }
.onboarding-identity { margin: 34px 0 13px; padding: 30px 15px 24px; border: 1px solid color-mix(in srgb, currentColor 42%, transparent); border-radius: 24px; background: radial-gradient(circle at 50% 25%, color-mix(in srgb, currentColor 19%, transparent), rgba(17,25,45,.75) 64%); text-align: center; }
.onboarding-identity > p { margin: 0 0 8px; color: #a5aec1; font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.onboarding-identity > span { font-size: 42px; filter: drop-shadow(0 0 18px currentColor); }
.onboarding-identity h1 { margin: 7px 0 20px; color: white; font: 30px "Archivo Black"; }
.briefing-game-code { width: max-content; display: flex; align-items: center; gap: 7px; margin: -10px auto 14px; padding: 6px 9px; border: 1px solid rgba(126,158,255,.22); border-radius: 99px; background: rgba(79,136,255,.065); }.briefing-game-code small { color: #77849c; font-size: 5px; font-weight: 900; letter-spacing: .14em; }.briefing-game-code b { color: #9eb6ff; font-size: 9px; letter-spacing: .1em; }
.captain-line { width: min(100%, 300px); min-height: 53px; display: grid; place-items: center; align-content: center; gap: 4px; margin: 0 auto; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 13px; background: rgba(0,0,0,.18); }
.captain-line small { color: #7f8ba3; font-size: 6px; font-weight: 900; letter-spacing: .16em; }
.captain-line b { color: white; font-size: 11px; }
.objective-card { display: flex; align-items: center; gap: 14px; padding: 17px 18px; border-color: rgba(255,190,71,.24); background: linear-gradient(110deg, rgba(255,167,43,.12), rgba(19,27,48,.78)); }
.objective-card > span { font-size: 30px; }
.objective-card small { color: #ffc25e; font-size: 6px; font-weight: 900; letter-spacing: .15em; }
.objective-card h2 { margin: 4px 0; font: 13px "Archivo Black"; }
.objective-card p { margin: 0; color: #8f9bb2; font-size: 8px; line-height: 1.4; }
.onboarding-section { margin-top: 13px; }
.fleet-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 15px; }
.fleet-board > i { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(2,6,15,.45); font-style: normal; }
.fleet-board > i[class*="ship-"] { border-width: 2px; box-shadow: inset 0 0 12px currentColor, 0 0 8px color-mix(in srgb, currentColor 30%, transparent); }
.fleet-board > i.ship-four { color: #4f88ff; border-color: #4f88ff; background: rgba(79,136,255,.2); }
.fleet-board > i.ship-three { color: #35d789; border-color: #35d789; background: rgba(53,215,137,.18); }
.fleet-board > i.ship-two { color: #ff4e65; border-color: #ff4e65; background: rgba(255,78,101,.18); }
.fleet-board > i b { color: white; font: 12px "Archivo Black"; }
.fleet-key { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.fleet-key span { display: flex; align-items: center; gap: 4px; color: #808ca4; font-size: 6px; font-weight: 900; }
.fleet-key i { width: 9px; height: 5px; border-radius: 99px; }
.fleet-key .key-four { background: #4f88ff; }.fleet-key .key-three { background: #35d789; }.fleet-key .key-two { background: #ff4e65; }
.same-board-demo { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; margin-top: 17px; }
.same-board-demo > span { color: #66728b; font-weight: 900; }
.mini-drink-board { min-width: 0; text-align: center; }
.mini-drink-board > b { display: block; margin-bottom: 5px; color: currentColor; font-size: 7px; }
.mini-drink-board > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.mini-drink-board i { min-width: 0; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: rgba(2,6,15,.5); font-style: normal; }
.mini-drink-board i.mojito { border-color: #ffbd4a; background: rgba(255,179,52,.13); font-size: 13px; }
.mini-drink-board i small { display: none; }
.example-section { padding: 20px 2px; }
.example-section > p { margin: -2px 3px 16px; color: #9da7ba; font-size: 10px; line-height: 1.55; }
.example-section > p b { color: white; }
.attack-story { display: grid; justify-items: center; gap: 5px; }
.attack-story > div { width: 100%; min-height: 88px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto 1fr; align-items: center; column-gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(17,25,45,.75); }
.attack-story > div small { grid-column: 1 / -1; color: #ff5a87; font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.attack-story > div > span { grid-row: 2 / 4; font-size: 26px; text-align: center; }
.attack-story > div b { font-size: 9px; }
.attack-story > div p { margin: 3px 0 0; color: #818da5; font-size: 7px; line-height: 1.35; }
.attack-story > i { color: #5f6b83; font-size: 11px; font-style: normal; transform: rotate(90deg); }
.shot-feedback { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 12px; }
.shot-feedback > div:not(.feedback-or) { min-height: 70px; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 14px; }
.shot-feedback span { font-size: 27px; }.shot-feedback b { font: 13px "Archivo Black"; }
.feedback-hit { border: 1px solid rgba(255,83,105,.42); background: radial-gradient(circle, rgba(255,70,92,.2), rgba(255,70,92,.03)); }
.feedback-miss { border: 1px solid rgba(76,139,255,.38); background: radial-gradient(circle, rgba(65,132,255,.18), rgba(65,132,255,.03)); }
.feedback-or { color: #69758e; font-size: 7px; font-weight: 900; }
.tap-score-tip { margin-bottom: 0; padding-top: 9px; border-top: 1px solid var(--line); color: #758199 !important; font-size: 8px !important; text-align: center; }
.onboarding-guide > .guide-loop { margin-top: 15px; }
.guide-actions { display: grid; gap: 8px; margin-top: 18px; }
.guide-actions .primary-button, .guide-actions .secondary-button { display: grid; place-items: center; }
.understand-actions form { display: grid; }
.lobby-shell { gap: 22px; }
.lobby-card form { display: grid; }
.create-game-button { display: grid; place-items: center; }
.game-code-input { width: 100%; height: 64px; padding: 0 15px; border: 1px solid rgba(79,136,255,.35); border-radius: 14px; outline: 0; color: white; background: rgba(5,8,19,.68); font: 27px "Archivo Black"; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.game-code-input:focus { border-color: #4f88ff; box-shadow: 0 0 0 3px rgba(79,136,255,.14); }
.lobby-actions { display: grid; grid-template-columns: 1.15fr .85fr; gap: 8px; margin-top: 14px; }
.observer-submit { width: 100%; color: white; font-family: inherit; text-align: left; cursor: pointer; }
.compact-hero h1 { font-size: clamp(44px, 14vw, 68px); }
.form-helper { margin: 8px 2px 16px; color: #76829b; font-size: 8px; line-height: 1.45; }
.game-entry-badge { min-height: 58px; display: flex; align-items: center; gap: 10px; margin: -5px 0 20px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(0,0,0,.16); }
.game-entry-badge > span { font-size: 20px; }.game-entry-badge > div { min-width: 0; flex: 1; }.game-entry-badge small, .game-entry-badge b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.game-entry-badge small { color: #758099; font-size: 6px; font-weight: 900; letter-spacing: .13em; }.game-entry-badge b { margin-top: 3px; font-size: 10px; }.game-entry-badge strong { color: #88a7ff; font: 12px "Archivo Black"; letter-spacing: .1em; }
.switch-game-link { display: block; margin-top: 17px; color: #76829a; font-size: 7px; font-weight: 900; text-align: center; letter-spacing: .08em; }
.host-badge { padding: 8px 10px; border: 1px solid rgba(255,197,80,.3); border-radius: 99px; color: #ffd06f; background: rgba(255,183,55,.08); font-size: 8px; font-weight: 900; }
.manage-title { padding-bottom: 13px; }
.game-code-card { margin-bottom: 13px; padding: 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; border-color: rgba(79,136,255,.23); }
.game-code-card small, .game-code-card b { display: block; }.game-code-card small { color: #74819a; font-size: 6px; font-weight: 900; letter-spacing: .14em; }.game-code-card b { margin-top: 3px; font-size: 11px; }.game-code-card strong { color: #8dabff; font: 23px "Archivo Black"; letter-spacing: .15em; }.game-code-card p { grid-column: 1 / -1; margin: 3px 0 0; color: #6f7b93; font-size: 7px; }
.battle-control-card { margin-bottom: 13px; padding: 17px; border-color: rgba(255,190,71,.24); background: linear-gradient(115deg, rgba(255,172,43,.09), rgba(19,27,48,.78)); }.battle-control-card.live { border-color: rgba(73,228,158,.25); background: linear-gradient(115deg, rgba(44,185,124,.1), rgba(19,27,48,.78)); }.battle-control-card.finished { border-color: rgba(255,207,97,.3); }.battle-control-copy { display: flex; align-items: center; gap: 11px; }.battle-control-copy > span { font-size: 29px; }.battle-control-copy h2 { margin: 3px 0; font: 14px "Archivo Black"; }.battle-control-copy small { color: #7e899f; font-size: 7px; }
.fleet-ready-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 10px; }.fleet-ready-list span { min-height: 43px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 10px; color: #707c94; background: rgba(0,0,0,.13); font-size: 7px; font-weight: 900; }.fleet-ready-list span b { font-size: 5px; letter-spacing: .08em; }.fleet-ready-list span.ready { border-color: currentColor; color: inherit; background: color-mix(in srgb, currentColor 7%, transparent); }
.start-battle-button { width: 100%; min-height: 50px; border: 0; border-radius: 12px; color: #07140e; background: #51e6a4; box-shadow: 0 10px 25px rgba(53,215,137,.2); font-size: 10px; font-weight: 900; letter-spacing: .08em; cursor: pointer; }.start-battle-button:disabled { color: #66728a; background: rgba(255,255,255,.055); box-shadow: none; cursor: not-allowed; }
.manage-team-grid { display: grid; gap: 10px; }
.manage-team { padding: 15px; border-top: 2px solid currentColor; }
.manage-team > header { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }.manage-team > header > span { font-size: 23px; }.manage-team > header > div { flex: 1; }.manage-team > header small { display: block; color: #748099; font-size: 6px; font-weight: 900; letter-spacing: .13em; }.manage-team > header h2 { margin: 2px 0 0; color: white; font: 15px "Archivo Black"; }.manage-team > header > b { min-width: 25px; padding: 5px; border-radius: 99px; color: currentColor; background: color-mix(in srgb, currentColor 9%, transparent); font-size: 8px; text-align: center; }
.captain-control { padding: 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 11px; background: rgba(0,0,0,.14); }.captain-control > label { display: block; margin-bottom: 6px; color: #8a96ad; font-size: 6px; font-weight: 900; letter-spacing: .12em; }.captain-control > div { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.captain-control select, .manage-member select { min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; color: white; background: #10172a; font-size: 8px; font-weight: 800; }.captain-control button, .manage-member form > button:not(.remove-player-button) { padding: 0 10px; border: 0; border-radius: 8px; color: white; background: rgba(79,136,255,.8); font-size: 7px; font-weight: 900; cursor: pointer; }
.manage-members { display: grid; gap: 7px; margin-top: 10px; }
.manage-member { display: grid; grid-template-columns: minmax(90px,1fr) minmax(112px,1fr) 32px; align-items: center; gap: 6px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.055); }.manage-member-name { min-width: 0; display: flex; align-items: center; gap: 7px; }.manage-member-name > i { width: 28px; height: 28px; display: grid; flex: none; place-items: center; border-radius: 50%; color: currentColor; background: color-mix(in srgb, currentColor 10%, transparent); font-size: 9px; font-style: normal; font-weight: 900; }.manage-member-name > span { min-width: 0; }.manage-member-name b, .manage-member-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.manage-member-name b { color: white; font-size: 8px; }.manage-member-name small { margin-top: 2px; color: #758099; font-size: 5px; font-weight: 900; }.manage-member > form { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px; }.remove-player-button, .host-lock { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,90,110,.22); border-radius: 8px; color: #ff6478; background: rgba(255,64,88,.06); font-size: 19px; cursor: pointer; }.host-lock { border-color: rgba(255,255,255,.07); color: #6e7991; background: rgba(255,255,255,.025); font-size: 11px; }.manage-empty { margin: 8px 0 0; color: #68748c; font-size: 8px; }
.reset-card { margin-top: 13px; padding: 17px; border-color: rgba(255,85,105,.2); }.reset-card > div { display: flex; align-items: center; gap: 9px; }.reset-card > div > span { font-size: 25px; }.reset-card h2 { margin: 2px 0 0; font: 15px "Archivo Black"; }.reset-card > p { margin: 10px 0; color: #7b879e; font-size: 8px; line-height: 1.5; }.reset-confirm { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: #a2aabd; font-size: 8px; }.reset-confirm input { accent-color: #ff4e65; }.reset-button { width: 100%; min-height: 44px; border: 1px solid rgba(255,76,99,.32); border-radius: 11px; color: #ff7586; background: rgba(255,50,76,.075); font-size: 8px; font-weight: 900; cursor: pointer; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
@keyframes detail-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes latest-shot { 50% { outline-color: #ff4e65; box-shadow: 0 0 16px rgba(255,200,94,.4); transform: scale(.95); } }
@media (min-width: 700px) { .score-grid { grid-template-columns: repeat(3, 1fr); }.score-team { min-height: 150px; grid-template-columns: 1fr 1fr; }.team-label { grid-column: 1 / -1; }.placement-controls { grid-template-columns: 1fr 1fr; gap: 16px; }.captain-cell b { font-size: 8px; }.board-tabs { display: none; }.score-boards { grid-template-columns: repeat(3, 1fr); }.score-board, .score-board[hidden] { display: block !important; padding: 12px; }.score-board-cell > span { font-size: 14px; }.guide-hero h1 { font-size: 64px; }.guide-loop { gap: 9px; }.guide-loop > div { min-width: 82px; }.guide-split { grid-template-columns: 1.35fr 1fr; }.guide-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.guide-steps > .guide-section-title { grid-column: 1 / -1; }.step-card { margin: 0; }.attack-story { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; justify-items: stretch; }.attack-story > i { align-self: center; transform: none; }.mini-drink-board i small { display: block; font-size: 4px; font-weight: 900; } }
@media (min-width: 900px) { .manage-shell { width: min(100% - 40px, 1050px); }.manage-team-grid { grid-template-columns: repeat(3, 1fr); }.manage-member { grid-template-columns: 1fr; }.manage-member > form { grid-template-columns: 1fr auto; }.remove-player-button, .host-lock { width: 100%; }.game-code-card { grid-template-columns: 1fr auto; } }