:root {
  --navy-950: #04111d;
  --navy-900: #071a2b;
  --navy-800: #0d2a42;
  --navy-700: #164463;
  --cream: #f4eddd;
  --paper: #eee5d2;
  --ink: #102130;
  --gold: #d9a441;
  --red: #d3322e;
  --blue: #176cb4;
  --green: #238357;
  --yellow: #e1aa16;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 70% 15%, rgba(37,103,137,.18), transparent 35%),
    repeating-linear-gradient(135deg, transparent 0 80px, rgba(255,255,255,.018) 80px 81px),
    var(--navy-950);
}
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; }
.topbar {
  height: 88px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(20px, 4vw, 64px);
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(4,17,29,.72);
  backdrop-filter: blur(12px);
}
.topbar h1, .topbar p { margin: 0; }
.topbar h1 { font-family: Georgia, serif; font-size: 25px; letter-spacing: .22em; }
.brand-mark { display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(217,164,65,.55); border-radius:50%; color:var(--gold); font-size:24px; }
.topbar .ghost-button { margin-left: auto; }
.header-actions{margin-left:auto;display:flex;gap:8px}.header-actions .ghost-button{margin-left:0}
.eyebrow { margin:0 0 8px; color:var(--gold); font-size:10px; letter-spacing:.22em; font-weight:800; }
.ghost-button, .icon-button {
  color: var(--cream); background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 10px 15px;
}
.ghost-button:hover { border-color: var(--gold); color:var(--gold); }
.setup-screen { min-height: calc(100vh - 88px); display:grid; place-items:center; padding:30px; }
.setup-card {
  width:min(560px, 100%); padding:clamp(28px,5vw,56px); text-align:center;
  border:1px solid rgba(217,164,65,.32); border-radius:4px;
  background: linear-gradient(145deg, rgba(13,42,66,.96), rgba(7,26,43,.96)); box-shadow:var(--shadow);
  position:relative;
}
.setup-card::before { content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.06); pointer-events:none; }
.setup-card h2 { margin:0; font: 38px Georgia,serif; }
.lede { color:#b9c5cd; margin:10px 0 28px; }
.player-choice { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:22px; }
.mode-choice { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:24px 0; }
.mode-card { min-height:92px;padding:13px 9px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(0,0,0,.14);color:var(--cream);display:flex;flex-direction:column;justify-content:center;gap:6px; }
.mode-card strong{font-size:13px}.mode-card span{font-size:10px;color:#8fa1ac;line-height:1.3}.mode-card.active{border-color:var(--gold);background:rgba(217,164,65,.12);box-shadow:inset 0 0 0 1px var(--gold)}.mode-card.active span{color:#c6b98f}
.player-count { padding:12px 8px; border-radius:7px; border:1px solid rgba(255,255,255,.16); color:#c9d3d9; background:rgba(0,0,0,.12); }
.ai-count{padding:12px 8px;border-radius:7px;border:1px solid rgba(255,255,255,.16);color:#c9d3d9;background:rgba(0,0,0,.12)}.ai-count.active{background:#d7262e;color:white;border-color:#d7262e;font-weight:800}
.player-count.active { background:var(--gold); color:var(--navy-950); border-color:var(--gold); font-weight:800; }
.name-fields { display:grid; gap:10px; margin-bottom:20px; }
.name-fields label { display:flex; align-items:center; gap:10px; }
.name-fields span { width:12px; height:12px; border-radius:50%; flex:none; }
.name-fields input { width:100%; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.16); color:white; border-radius:7px; padding:12px 14px; outline:none; }
.name-fields input:focus { border-color:var(--gold); }
.online-options{margin:0 0 18px}.online-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px}.online-tabs button{padding:10px;border:1px solid rgba(255,255,255,.15);background:transparent;color:#9caeb8}.online-tabs button.active{background:var(--navy-700);color:white;border-color:var(--gold)}.room-input{width:100%;padding:13px;text-align:center;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--gold);border-radius:7px;background:rgba(0,0,0,.18);color:white}
.room-comms{margin:10px 0;padding:10px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.12)}.room-comms>span{display:block;margin-bottom:7px;color:#8fa1ac;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.room-comms>div{display:grid;grid-template-columns:1fr 1fr;gap:5px}.room-comms button{padding:9px;border:1px solid #435563;background:#081927;color:#9babb4;font-size:10px;font-weight:800}.room-comms button.active{border-color:#d7262e;background:rgba(215,38,46,.16);color:#fff}
.room-comms small{display:block;margin-top:9px;color:#d9bd77;font-size:9px;line-height:1.45}.channel-switch{margin:-6px 14px 13px;padding:8px;border:1px solid #526672;background:rgba(8,25,39,.8);color:#c4d0d4;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.rules-setup{margin:20px 0;text-align:left}.rules-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.rule-preset{padding:10px 5px;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:rgba(0,0,0,.14);color:#aebdc6;font-size:11px}.rule-preset.active{border-color:var(--gold);background:rgba(217,164,65,.16);color:#f1d38d;font-weight:800}.custom-rules{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.custom-rules label{display:flex;align-items:flex-start;gap:8px;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:rgba(0,0,0,.1)}.custom-rules input{margin-top:3px;accent-color:var(--gold)}.custom-rules strong,.custom-rules small{display:block}.custom-rules strong{font-size:11px;color:#dbe2e5}.custom-rules small{font-size:9px;color:#748995;margin-top:2px;line-height:1.3}.custom-rules input:disabled{opacity:.6}
.primary-button { border:0; border-radius:7px; padding:13px 22px; background:var(--gold); color:var(--navy-950); font-weight:900; letter-spacing:.03em; box-shadow:0 5px 16px rgba(217,164,65,.2); }
.primary-button:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); }
.primary-button:disabled { opacity:.45; cursor:not-allowed; }
.setup-card > .primary-button { width:100%; }
.continue-button{width:100%;margin-top:10px;padding:11px;border:1px solid rgba(217,164,65,.45);border-radius:7px;background:rgba(217,164,65,.07);color:var(--cream);display:flex;align-items:center;justify-content:space-between}.continue-button span{font-weight:800}.continue-button small{color:#93a4ad}.continue-button:hover{background:rgba(217,164,65,.14);border-color:var(--gold)}
.setup-note { color:#8495a1; font-size:12px; margin:18px 0 0; }

.game-screen { min-height:calc(100vh - 88px); display:grid; grid-template-columns:320px minmax(560px,1fr); }
.game-screen.with-chat{grid-template-columns:300px minmax(540px,1fr) 300px}
.status-panel { padding:30px 26px; background:rgba(7,26,43,.9); border-right:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:28px; }
.turn-identity { display:flex; align-items:center; gap:10px; }
.turn-identity h2 { margin:0; font:28px Georgia,serif; }
.turn-dot { width:13px;height:13px;border-radius:50%; box-shadow:0 0 0 4px rgba(255,255,255,.08); }
.instruction { color:#aebdc6; line-height:1.45; min-height:42px; }
.dice-area { --turn-colour:var(--red);--turn-text:#fff;position:fixed;z-index:40;right:28px;bottom:28px;width:240px;padding:13px 16px 16px;border:2px solid var(--turn-colour);background:linear-gradient(155deg,rgba(15,43,61,.97),rgba(5,22,35,.98));border-radius:3px;box-shadow:0 18px 48px rgba(0,0,0,.62),0 0 22px color-mix(in srgb,var(--turn-colour) 35%,transparent),inset 0 0 0 1px rgba(255,255,255,.05);touch-action:none;transition:border-color .25s,box-shadow .25s; }
.dice-drag-handle{display:flex;align-items:center;gap:7px;margin:-4px -5px 12px;padding:5px;color:#91a3ad;font-size:9px;font-weight:900;letter-spacing:.13em;cursor:grab;user-select:none;border-bottom:1px solid rgba(255,255,255,.09)}.dice-drag-handle:active{cursor:grabbing}.dice-drag-handle span{color:#d4a21e;letter-spacing:-.2em;font-size:14px}.dice-drag-handle small{margin-left:auto;color:#5f7480;font-size:8px}
.dice-row { display:flex; justify-content:center; gap:12px; margin-bottom:14px; }
.die { width:64px;height:64px;border:0;border-radius:10px;background:var(--cream);color:var(--ink);font-size:28px;font-weight:900;box-shadow:inset 0 0 0 2px #cdbf9f,0 7px 15px rgba(0,0,0,.25); }
.die.selectable { outline:3px solid var(--gold); transform:translateY(-3px); }
.die.used { opacity:.28; }
.dice-area .primary-button { width:100%;background:var(--turn-colour);color:var(--turn-text);box-shadow:0 5px 18px color-mix(in srgb,var(--turn-colour) 38%,transparent);transition:background .25s,box-shadow .25s; }
.dice-area .primary-button:disabled{filter:saturate(.45);opacity:.58}
.floating-orders{margin-top:13px;padding-top:11px;border-top:1px solid rgba(255,255,255,.1)}.floating-orders .small-label{margin-bottom:7px}.floating-orders .move-buttons{min-height:0}
.suckback-button{width:100%;margin-top:8px;padding:10px;border:1px solid #d75a52;border-radius:7px;background:rgba(203,73,62,.16);color:#ffb6ae;font-weight:900}.suckback-button:hover{background:rgba(203,73,62,.28)}
.small-label { margin:0 0 10px;color:#748995;font-size:10px;font-weight:800;letter-spacing:.18em; }
.move-buttons { display:flex;gap:8px;flex-wrap:wrap; min-height:36px; }
.move-chip { border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.05);color:var(--cream);border-radius:999px;padding:8px 13px; }
.cancel-move{margin-top:8px;padding:8px 11px;border:1px solid #d4a21e;background:rgba(212,162,30,.1);color:#f1cf73;font-size:11px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}.cancel-move:hover{background:rgba(212,162,30,.2)}
.move-chip.active { border-color:var(--gold);color:var(--gold); }
.log-wrap { min-height:110px; }
.game-log { margin:0;padding:0;list-style:none;color:#8fa1ac;font-size:12px;display:flex;flex-direction:column;gap:7px; }
.game-log li:first-child { color:#d2dadd; }
.panel-actions { margin-top:auto;display:flex;gap:8px;flex-wrap:wrap; }
.chat-panel{border-left:1px solid rgba(255,255,255,.09);background:rgba(7,26,43,.94);display:flex;flex-direction:column;min-height:calc(100vh - 88px)}
.chat-head{padding:25px 20px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}.chat-head h3{margin:0;font:22px Georgia,serif}.connection-status{font-size:10px;color:#7f929e}.connection-status.online{color:#70c799}.room-banner{margin:14px;padding:11px;border:1px solid rgba(217,164,65,.25);border-radius:7px;color:#879ba7;font-size:11px}.room-banner strong{color:var(--gold);letter-spacing:.16em;margin:0 7px}.room-banner button{float:right;border:0;background:transparent;color:#bdc9ce;font-size:10px}.chat-messages{flex:1;overflow:auto;padding:8px 17px;display:flex;flex-direction:column;gap:12px}.chat-message{max-width:88%;padding:9px 11px;border-radius:9px;background:#12344d;font-size:12px;line-height:1.4}.chat-message.mine{align-self:flex-end;background:#4d3d18}.chat-message b{display:block;color:var(--gold);font-size:9px;letter-spacing:.08em;margin-bottom:3px}.chat-message.system{max-width:100%;align-self:center;background:transparent;color:#748a97;text-align:center;font-style:italic}.chat-form{padding:14px;display:flex;gap:7px;border-top:1px solid rgba(255,255,255,.08)}.chat-form input{min-width:0;flex:1;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.15);border-radius:7px;color:white;padding:10px}.chat-form button{border:0;border-radius:7px;background:var(--gold);font-weight:800;padding:0 12px;color:var(--navy-950)}
.voice-panel{margin:0 14px 14px;padding:11px;border:1px solid #435563;background:rgba(4,17,29,.55);display:flex;align-items:center;justify-content:space-between;gap:8px}.voice-panel strong,.voice-panel span{display:block}.voice-panel strong{font-size:11px;text-transform:uppercase;letter-spacing:.08em}.voice-panel span{margin-top:3px;color:#7f929e;font-size:9px}.voice-panel span.live{color:#70c799}.voice-actions{display:flex;gap:5px}.voice-actions button{padding:7px 8px;border:1px solid #64737c;background:#102a3d;color:#e6e7e2;font-size:9px;font-weight:800;text-transform:uppercase}.voice-actions button:first-child{border-color:#d7262e}.voice-actions button.muted{background:#792029;border-color:#e75a61}
.board-wrap { display:grid;place-items:center;padding:clamp(18px,4vw,50px);overflow:auto; }
.board {
  --cell: min(5.35vw, 46px);
  width:calc(var(--cell) * 15); height:calc(var(--cell) * 15);
  box-sizing: content-box;
  display:grid;grid-template-columns:repeat(15,var(--cell));grid-template-rows:repeat(15,var(--cell));
  position:relative; background:#d8ceb8; border:10px solid #604225; outline:3px solid #c0904f; box-shadow:var(--shadow),inset 0 0 24px rgba(56,38,20,.2);
}
.board::after {
  content:"";
  position:absolute;
  z-index:3;
  left:calc(var(--cell) * 6);
  top:calc(var(--cell) * 6);
  width:calc(var(--cell) * 3);
  height:calc(var(--cell) * 3);
  background:#08044d url("assets/royal-navy-centre.png") center/cover no-repeat;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);
  pointer-events:none;
}
.cell { position:relative; display:grid;place-items:center;border:1px solid rgba(31,40,43,.3);background:linear-gradient(145deg,#f5eddb,#e3d7bf);box-shadow:inset 0 1px 0 rgba(255,255,255,.42); }
.cell.sea { background:linear-gradient(145deg,#d8d6c9,#c2c1b5); }
.cell.red-zone { background:linear-gradient(145deg,#e75b52,#bd2725); }
.cell.blue-zone { background:linear-gradient(145deg,#3d8ed0,#155b9b); }
.cell.green-zone { background:linear-gradient(145deg,#4ca777,#1f724d); }
.cell.yellow-zone { background:linear-gradient(145deg,#f0c445,#ca8e0b); }
.cell.center { background:#08044d; border-color:rgba(255,255,255,.08); }
.cell.start { box-shadow:inset 0 0 0 4px rgba(255,255,255,.88),inset 0 0 14px rgba(0,0,0,.14); }
.cell.next-step { cursor:pointer; z-index:4; }
.cell.next-step::before {
  content:""; position:absolute; inset:5px; border:3px solid var(--gold); border-radius:50%;
  background:rgba(217,164,65,.2); box-shadow:0 0 0 4px rgba(217,164,65,.14);
  animation:stepPulse .85s infinite alternate;
}
.cell.next-step::after {
  content:attr(data-remaining); position:absolute; z-index:2; display:grid; place-items:center;
  width:20px;height:20px;border-radius:50%;background:var(--navy-900);color:white;font-size:11px;font-weight:900;
}
@keyframes stepPulse { to { transform:scale(1.08); box-shadow:0 0 0 7px rgba(217,164,65,.08); } }
.piece {
  position:absolute; z-index:5; width:calc(var(--cell)*.66);height:calc(var(--cell)*.66);border-radius:50%;
  border:3px solid rgba(255,255,255,.82);box-shadow:0 3px 7px rgba(0,0,0,.38), inset 0 -4px 0 rgba(0,0,0,.17);
  display:grid;place-items:center;color:white;font-size:10px;font-weight:900;transition:all .28s ease;transform:translate(-50%,-50%);
}
.piece.red{background:radial-gradient(circle at 35% 28%,#f16b62,var(--red) 58%,#8f1817)}.piece.blue{background:radial-gradient(circle at 35% 28%,#5ba1dc,var(--blue) 58%,#0c477d)}.piece.green{background:radial-gradient(circle at 35% 28%,#62bd8b,var(--green) 58%,#125b39)}.piece.yellow{background:radial-gradient(circle at 35% 28%,#ffd95d,var(--yellow) 58%,#a87408);color:#513d08}
.piece.can-move { cursor:pointer;animation:pulse 1s infinite;z-index:8; }
.piece.moving { z-index:9; box-shadow:0 0 0 6px rgba(217,164,65,.35),0 4px 10px rgba(0,0,0,.45); }
.piece.step-target { cursor:pointer; z-index:10; animation:pulse 1s infinite; outline:3px solid var(--gold); }
.piece.can-move:hover { scale:1.12; }
@keyframes pulse { 50% { box-shadow:0 0 0 7px rgba(255,255,255,.28),0 4px 9px rgba(0,0,0,.4); } }
.toast { position:fixed;left:50%;bottom:25px;transform:translate(-50%,120px);background:#0d2a42;color:white;border:1px solid rgba(217,164,65,.5);padding:12px 20px;border-radius:8px;box-shadow:var(--shadow);transition:.25s;z-index:30; }
.toast.show { transform:translate(-50%,0); }
.capture-banner {
  position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%) scale(.72);
  min-width:min(390px,calc(100% - 36px));padding:28px 38px;text-align:center;
  border:2px solid var(--gold);outline:1px solid rgba(255,255,255,.25);outline-offset:-8px;
  border-radius:9px;background:linear-gradient(145deg,#102f49,#061724);color:white;
  box-shadow:0 30px 90px rgba(0,0,0,.65);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s,transform .25s,visibility .18s;
}
.capture-banner.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.capture-banner .capture-icon{display:block;color:var(--gold);font-size:28px;margin-bottom:5px}
.capture-banner strong{display:block;font:800 31px Georgia,serif;letter-spacing:.12em;color:#f1cf7a}
.capture-banner small{display:block;margin-top:8px;color:#becbd2;font-size:13px}
.turn-banner{position:fixed;z-index:45;left:50%;bottom:28px;transform:translate(-50%,130px);min-width:min(410px,calc(100% - 30px));display:flex;align-items:center;justify-content:center;gap:17px;padding:13px 25px;background:linear-gradient(180deg,#e03239,#b51921);border:1px solid #ff6a70;box-shadow:0 12px 35px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.22);color:white;opacity:0;visibility:hidden;transition:transform .32s cubic-bezier(.2,.9,.25,1.2),opacity .2s,visibility .2s;clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%)}.turn-banner.show{transform:translate(-50%,0);opacity:1;visibility:visible}.turn-banner>span{font:900 30px Impact,sans-serif;color:#ffd6d7}.turn-banner div{text-align:center}.turn-banner strong{display:block;font:24px Impact,"Arial Narrow",sans-serif;letter-spacing:.09em}.turn-banner small{display:block;margin-top:2px;font-size:10px;letter-spacing:.16em;color:#ffd0d2;text-transform:uppercase}
dialog { width:min(580px,calc(100% - 30px));color:var(--ink);background:var(--cream);border:0;border-radius:8px;padding:0;box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(0,8,15,.78);backdrop-filter:blur(5px); }
.dialog-header { display:flex;justify-content:space-between;align-items:center;padding:25px 28px;border-bottom:1px solid #cfc3aa; }
.dialog-header h2 { margin:0;font:32px Georgia,serif; }.dialog-header .eyebrow { color:#9a6c16; }.icon-button{color:var(--ink);font-size:25px;padding:3px 11px;border-color:#b7aa90}.rules-copy{padding:10px 28px 28px;line-height:1.6}.rules-copy li{margin-bottom:9px}
.invite-copy{padding:22px 28px 28px}.invite-copy p{margin-top:0;line-height:1.5;color:#455561}.invite-code{text-align:center;padding:14px;border:1px solid #c9b991;background:#e4d8bd;border-radius:7px}.invite-code span{display:block;font-size:9px;letter-spacing:.18em;color:#786b50}.invite-code strong{display:block;margin-top:3px;font-size:30px;letter-spacing:.22em;color:var(--navy-900)}.invite-copy input{width:100%;margin:12px 0;padding:12px;border:1px solid #b7aa90;border-radius:6px;background:white;color:#304353}.invite-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.invite-actions .ghost-button{color:var(--ink);border-color:#a99b80}.invite-copy small{color:#687781;line-height:1.4}

@media (max-width:900px){
  .game-screen,.game-screen.with-chat{grid-template-columns:1fr}.status-panel{order:2;border-right:0;border-top:1px solid rgba(255,255,255,.1)}.board-wrap{order:1}.board{--cell:min(6.1vw,42px)}.chat-panel{order:3;min-height:420px;border-left:0;border-top:1px solid rgba(255,255,255,.1)}
}
@media (max-width:580px){
  .topbar{height:72px;padding:0 14px}.topbar .eyebrow{display:none}.topbar h1{font-size:20px}.brand-mark{width:38px;height:38px}.setup-screen{min-height:calc(100vh - 72px);padding:16px}.setup-card{padding:30px 20px}.game-screen{min-height:calc(100vh - 72px)}.board-wrap{padding:14px 4px}.board{--cell:6.1vw;border-width:6px}.status-panel{padding:24px 18px}.piece{border-width:2px}.cell.start{box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
  .mode-choice{grid-template-columns:1fr}.mode-card{min-height:64px}.game-screen.with-chat{min-height:calc(100vh - 72px)}
}

/* UCKERS CLUB — naval operations visual system */
body{background-color:#071725;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),radial-gradient(circle at 50% 20%,#173349 0,#081b2b 38%,#05131f 75%);background-size:34px 34px,34px 34px,auto}
.topbar{background:#061724;border-bottom:1px solid #465662;box-shadow:0 4px 18px rgba(0,0,0,.38)}
.club-wordmark{position:relative;display:grid;grid-template-columns:auto auto auto;align-items:center;column-gap:7px;width:190px;height:70px;padding:2px 0 13px;font-family:Impact,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.05em;background-image:url("assets/uckers-club-brand.png");background-repeat:no-repeat;background-size:363px 363px;background-position:-17px -19px;overflow:hidden}
.club-wordmark>*{visibility:hidden}
.club-wordmark i{color:#d7262e;font-style:normal;font-size:20px;letter-spacing:-.35em;transform:rotate(180deg);margin-right:5px}.club-wordmark span{font-size:30px;color:#e6e7e2;line-height:1;text-shadow:1px 1px #5a6672}.club-wordmark b{font-size:20px;color:#d7262e;align-self:end;line-height:1.2}.club-wordmark small{position:absolute;bottom:-1px;left:37px;font:700 8px ui-monospace,monospace;letter-spacing:.22em;color:#c3c8c8;white-space:nowrap}.club-wordmark em{color:#d7262e;font-style:normal}
.eyebrow,.small-label{font-family:"Arial Narrow",ui-sans-serif,sans-serif;color:#d4a21e;letter-spacing:.19em}.primary-button{background:#d7262e;color:#fff;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 5px 18px rgba(215,38,46,.2);text-transform:uppercase}.primary-button:hover:not(:disabled){background:#ee343d}
.setup-card{background:linear-gradient(145deg,rgba(13,35,52,.98),rgba(5,22,35,.98));border-color:#4f606c;box-shadow:0 28px 80px rgba(0,0,0,.48)}.setup-card::before{border-color:rgba(230,231,226,.1)}.setup-card h2,.turn-identity h2,.chat-head h3{font-family:Impact,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.05em}.mode-card.active,.rule-preset.active{border-color:#d7262e;background:rgba(215,38,46,.13);box-shadow:inset 3px 0 #d7262e}.player-count.active{background:#d7262e;border-color:#d7262e;color:white}.name-fields input,.room-input{border-radius:2px;background:#081927;border-color:#53616b}
.status-panel,.chat-panel{background:linear-gradient(180deg,#0a2132,#061724);border-color:#42515c}.dice-area{border-radius:2px;background:#071a29}.die{border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c9ceca 58%,#77838b);border:3px solid #65727a;box-shadow:0 5px 10px rgba(0,0,0,.55),inset 0 2px 2px white}.die.selectable{outline-color:#d4a21e}.move-chip{border-radius:2px}.move-chip.active{border-color:#d7262e;color:#ff7780;background:rgba(215,38,46,.12)}
.board-wrap{position:relative;background-image:linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.018) 48% 49%,transparent 49%),radial-gradient(circle at center,rgba(39,70,89,.25),transparent 55%)}
.board{background:#122b3c;border-color:#53616b;outline:4px solid #17232c;box-shadow:0 28px 65px rgba(0,0,0,.62),inset 0 0 22px rgba(0,0,0,.55)}
.board::after{content:"⚓";display:grid;place-items:center;background:#0b1d2d;border:2px solid #aeb8b9;border-radius:50%;color:#d9dedb;font-size:calc(var(--cell)*1.35);text-shadow:0 2px #53616b;box-shadow:0 0 0 5px #0b1d2d,0 0 0 6px rgba(230,231,226,.35);background-image:none}
.cell{border-color:rgba(211,221,222,.28);background-color:#294250;background-image:linear-gradient(135deg,rgba(255,255,255,.035) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.035) 50%,rgba(255,255,255,.035) 75%,transparent 75%);background-size:12px 12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.cell.sea{background-color:#152e3e;background-image:linear-gradient(rgba(220,230,230,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(220,230,230,.04) 1px,transparent 1px);background-size:10px 10px}
.cell.red-zone{background:#3a252b;border-color:#d7262e;box-shadow:inset 0 0 0 2px rgba(215,38,46,.48)}.cell.blue-zone{background:#172d45;border-color:#4a82a8;box-shadow:inset 0 0 0 2px rgba(49,104,145,.52)}.cell.green-zone{background:#183b35;border-color:#3c9b78;box-shadow:inset 0 0 0 2px rgba(43,137,102,.52)}.cell.yellow-zone{background:#42351a;border-color:#d4a21e;box-shadow:inset 0 0 0 2px rgba(212,162,30,.55)}.cell.center{background:#0b1d2d;border-color:rgba(230,231,226,.18)}.cell.start{box-shadow:inset 0 0 0 3px #e6e7e2,inset 0 0 0 5px rgba(0,0,0,.35)}
.piece{border:2px solid rgba(235,238,234,.92);box-shadow:0 5px 8px rgba(0,0,0,.65),inset 0 2px 3px rgba(255,255,255,.35),inset 0 -4px 4px rgba(0,0,0,.38)}.piece.red{background:radial-gradient(circle at 35% 28%,#ff5a60,#d7262e 55%,#771117)}.piece.blue{background:radial-gradient(circle at 35% 28%,#4f7593,#17364f 55%,#071523)}.piece.green{background:radial-gradient(circle at 35% 28%,#6db596,#277a5d 55%,#123e31)}.piece.yellow{background:radial-gradient(circle at 35% 28%,#ffd25d,#d4a21e 55%,#805b08)}
.capture-banner{border-radius:2px;background:linear-gradient(145deg,#132f43,#071724);border-color:#d7262e}.capture-banner strong{font-family:Impact,"Arial Narrow",sans-serif;color:#fff;text-shadow:3px 3px #d7262e}.room-banner{border-radius:2px;border-color:#4b5963}.chat-message{border-radius:2px}.chat-message.mine{background:#792029}.continue-button,.ghost-button{border-radius:2px}
@media(max-width:580px){.club-wordmark span{font-size:24px}.club-wordmark b{font-size:16px}.club-wordmark small{left:31px;font-size:6px}.topbar>.ghost-button{padding:8px}}

/* plotting-table board construction */
.board{background-color:#132b3a;background-image:linear-gradient(rgba(220,230,230,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(220,230,230,.055) 1px,transparent 1px),radial-gradient(circle at 50% 50%,rgba(91,118,133,.2),transparent 56%);background-size:calc(var(--cell)*.5) calc(var(--cell)*.5),calc(var(--cell)*.5) calc(var(--cell)*.5),auto}
.board-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;color:#d5dcda;font-family:"Arial Narrow",sans-serif}
.bay{position:absolute;width:calc(var(--cell)*5.15);height:calc(var(--cell)*5.15);border:2px solid rgba(213,220,218,.55);background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(0,0,0,.14));box-shadow:inset 0 0 0 5px rgba(7,20,31,.38),inset 0 0 25px rgba(0,0,0,.25)}
.bay::before,.bay::after{content:"";position:absolute;background:rgba(213,220,218,.35)}.bay::before{height:1px;left:10%;right:10%;top:50%}.bay::after{width:1px;top:10%;bottom:10%;left:50%}.bay b{position:absolute;top:7px;left:10px;font-size:calc(var(--cell)*.23);letter-spacing:.15em;color:#e6e7e2}.bay span{position:absolute;bottom:7px;right:9px;font-size:calc(var(--cell)*.15);letter-spacing:.12em;color:#738896}
.bay b{visibility:hidden}.board-player-name{position:absolute;z-index:3;max-width:calc(var(--cell)*4.2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font:700 calc(var(--cell)*.23)/1 "Arial Narrow",Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;text-shadow:0 2px 3px #000,0 0 5px #071724;pointer-events:none}.board-player-name.nw{left:calc(var(--cell)*.55 + 10px);top:calc(var(--cell)*.55 + 7px)}.board-player-name.ne{left:calc(var(--cell)*9.3 + 10px);top:calc(var(--cell)*.55 + 7px)}.board-player-name.se{left:calc(var(--cell)*9.3 + 10px);bottom:calc(var(--cell)*5.47)}.board-player-name.sw{left:calc(var(--cell)*.55 + 10px);bottom:calc(var(--cell)*5.47)}
.bay-nw{left:calc(var(--cell)*.55);top:calc(var(--cell)*.55);clip-path:polygon(0 0,100% 0,100% 76%,76% 100%,0 100%)}.bay-ne{right:calc(var(--cell)*.55);top:calc(var(--cell)*.55);clip-path:polygon(0 0,100% 0,100% 100%,24% 100%,0 76%)}.bay-se{right:calc(var(--cell)*.55);bottom:calc(var(--cell)*.55);clip-path:polygon(24% 0,100% 0,100% 100%,0 100%,0 24%)}.bay-sw{left:calc(var(--cell)*.55);bottom:calc(var(--cell)*.55);clip-path:polygon(0 0,76% 0,100% 24%,100% 100%,0 100%)}
.bearing-ring{position:absolute;left:50%;top:50%;width:calc(var(--cell)*5);height:calc(var(--cell)*5);transform:translate(-50%,-50%);border:1px solid rgba(213,220,218,.38);border-radius:50%;box-shadow:0 0 0 calc(var(--cell)*.45) rgba(213,220,218,.025),0 0 0 calc(var(--cell)*.47) rgba(213,220,218,.18)}
.bearing-ring::before,.bearing-ring::after{content:"";position:absolute;left:50%;top:-12%;bottom:-12%;width:1px;background:rgba(213,220,218,.24)}.bearing-ring::after{transform:rotate(90deg)}
.vector{position:absolute;left:50%;top:50%;width:45%;height:1px;background:rgba(213,220,218,.42);transform-origin:left center}.vector::after{content:"";position:absolute;right:16%;top:-4px;width:7px;height:7px;border-top:2px solid #d5dcda;border-right:2px solid #d5dcda;transform:rotate(45deg)}.vector-a{transform:rotate(45deg)}.vector-b{transform:rotate(135deg)}.vector-c{transform:rotate(225deg)}.vector-d{transform:rotate(315deg)}
.deck-label{position:absolute;z-index:1;font-size:calc(var(--cell)*.24);letter-spacing:.18em;color:rgba(230,231,226,.72)}.deck-label.fore{top:5px;left:50%;transform:translateX(-50%)}.deck-label.aft{bottom:5px;left:50%;transform:translateX(-50%)}.deck-label.port{left:4px;top:50%;transform:translateY(-50%) rotate(-90deg)}.deck-label.starboard{right:-22px;top:50%;transform:translateY(-50%) rotate(90deg)}
.hazard{position:absolute;width:calc(var(--cell)*.32);height:calc(var(--cell)*3.4);background:repeating-linear-gradient(135deg,#d4a21e 0 7px,#172532 7px 14px);opacity:.9}.hazard-a{left:0;bottom:0}.hazard-b{right:0;top:0}
.board>.cell{z-index:2}.board>.cell.sea{background:transparent;border-color:transparent;box-shadow:none}.board>.cell:not(.sea):not(.center){background:rgba(31,57,72,.62);border:1px solid rgba(220,229,227,.48);box-shadow:inset 0 0 0 1px rgba(5,19,29,.55)}
.board>.cell.red-zone{background:rgba(140,28,34,.48);border-color:#e14348}.board>.cell.blue-zone{background:rgba(17,48,72,.72);border-color:#6287a1}.board>.cell.green-zone{background:rgba(25,96,72,.52);border-color:#64aa8b}.board>.cell.yellow-zone{background:rgba(143,102,10,.58);border-color:#e2b43d}.board>.cell.center{z-index:2;background:rgba(8,26,39,.88);border-color:rgba(220,229,227,.2)}
.board::after{z-index:4}
.setup-screen{position:relative;background-image:linear-gradient(rgba(3,15,25,.38),rgba(3,15,25,.58)),url("assets/naval-fleet-background.png");background-size:cover;background-position:center;background-repeat:no-repeat}
.setup-screen::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 0 24%,rgba(2,12,20,.34) 72%,rgba(2,10,17,.66) 100%)}
.setup-card{z-index:1;background:linear-gradient(145deg,rgba(13,35,52,.93),rgba(5,22,35,.95));backdrop-filter:blur(8px)}
.board-wrap{background-image:linear-gradient(rgba(3,15,25,.6),rgba(3,15,25,.7)),url("assets/naval-fleet-background.png");background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:local}
.board-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,rgba(7,25,38,.05) 0 25%,rgba(3,14,23,.47) 85%)}
.board-wrap>.board{z-index:1}
.board::after{content:"";background-color:#081b2b;background-image:url("assets/uckers-club-brand.png");background-repeat:no-repeat;background-size:calc(var(--cell)*13.93) calc(var(--cell)*13.93);background-position:calc(var(--cell)*-10.74) calc(var(--cell)*-.68);border:0;border-radius:50%;box-shadow:none}
.board>.cell.center{background:transparent;border-color:transparent;box-shadow:none}
.scoreboard-dialog{width:min(850px,calc(100% - 24px));background:#0b2131;color:#e6e7e2;border:1px solid #64737c}.scoreboard-dialog .dialog-header{border-color:#41515d}.scoreboard-dialog .dialog-header h2{font-family:Impact,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.06em}.scoreboard-dialog .icon-button{color:white;border-color:#65747d}.scoreboard-copy{padding:22px 26px 26px}.table-wrap{overflow-x:auto}.scoreboard-copy table{width:100%;border-collapse:collapse;font-size:12px}.scoreboard-copy th{padding:10px 8px;text-align:left;color:#d4a21e;font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid #53616a}.scoreboard-copy td{padding:11px 8px;border-bottom:1px solid rgba(255,255,255,.08);color:#bac7cc}.scoreboard-copy td:first-child{color:white;font-weight:800}.scoreboard-copy h3{margin:25px 0 10px;font:18px Impact,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.08em}.match-history{display:grid;gap:7px}.history-row{display:grid;grid-template-columns:90px 80px 1fr;gap:10px;padding:9px 11px;border-left:3px solid #d7262e;background:rgba(255,255,255,.035);font-size:11px;color:#91a3ad}.history-row strong{color:#e4e9e7}.empty-records{padding:25px;text-align:center;color:#728894;border:1px dashed #42545f}.scoreboard-actions{margin-top:18px;text-align:right}.scoreboard-actions .ghost-button{color:#b8c4c9}
.victory-overlay{position:fixed;z-index:70;inset:0;display:grid;place-items:center;padding:20px;background:rgba(2,10,17,.82);backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:.3s}.victory-overlay.show{opacity:1;visibility:visible}.victory-card{position:relative;isolation:isolate;width:min(500px,100%);padding:45px 35px 35px;text-align:center;overflow:hidden;background:linear-gradient(155deg,#15364b,#061724 70%);border:2px solid #d4a21e;outline:1px solid rgba(255,255,255,.18);outline-offset:-9px;box-shadow:0 35px 100px rgba(0,0,0,.75);transform:translateY(24px) scale(.94);transition:.4s cubic-bezier(.2,.9,.25,1.2)}.victory-overlay.show .victory-card{transform:none}.victory-rays{position:absolute;z-index:-1;inset:-70%;background:repeating-conic-gradient(from 0deg,rgba(212,162,30,.08) 0deg 7deg,transparent 7deg 17deg);animation:victorySpin 26s linear infinite}.victory-anchor{width:72px;height:72px;margin:0 auto 13px;display:grid;place-items:center;border:2px solid #d4a21e;border-radius:50%;background:#0a2132;font-size:37px;box-shadow:0 0 0 7px rgba(212,162,30,.09)}.victory-card h2{margin:0;color:#f0f1ec;font:54px Impact,"Arial Narrow",sans-serif;letter-spacing:.1em;text-shadow:4px 4px #d7262e}.victory-card>p:not(.eyebrow){color:#b8c6cc;line-height:1.5}.victory-card>p strong{color:white}.victory-actions{display:flex;justify-content:center;gap:10px;margin-top:24px}.victory-actions .ghost-button{border-color:#687985}@keyframes victorySpin{to{transform:rotate(360deg)}}