:root{--bg:#0b1220;--bg-elevated:#121b2e;--panel:#16213a;--panel-border:#26365a;--ink:#e8edf7;--ink-dim:#93a1c2;--ocean:#0e3a5f;--ocean-deep:#082944;--accent:#f2b84b;--accent-ink:#241a02;--good:#4caf7d;--bad:#e2586b;--warn:#e2a53a;--side-a:#3aa0e2;--side-b:#e2683a;--b-home:#6fb1e8;--b-farm:#7bc47f;--b-mine:#b98a5a;--b-bank:#e8c95a;--b-fort:#9a9fae;--b-dock:#5ccfd0;--b-shipyard:#c05cd0;--radius:10px;--radius-sm:6px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,sans-serif}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--ink)}button{font-family:inherit;cursor:pointer}.btn{border:1px solid var(--panel-border);background:var(--panel);color:var(--ink);padding:.55rem 1rem;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;transition:background .15s ease,transform .1s ease,border-color .15s ease}.btn:hover:not(:disabled){background:var(--bg-elevated);border-color:var(--accent)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn--primary:hover:not(:disabled){filter:brightness(1.08)}.btn--ghost{background:transparent;border-color:transparent}.btn--danger{border-color:var(--bad);color:var(--bad);background:transparent}.btn--danger:hover:not(:disabled){background:rgba(226,88,107,.12)}.btn--sm{padding:.3rem .6rem;font-size:.78rem}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius)}.auth-status{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:2rem}.auth-status--signin h1{font-size:2.4rem;margin:0;letter-spacing:.02em}.auth-status p{color:var(--ink-dim);max-width:28rem}.app-shell{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid var(--panel-border);background:var(--bg-elevated)}.app-header__brand{font-weight:800;letter-spacing:.03em;font-size:1.1rem}.app-header__brand span{color:var(--accent)}.user-menu{display:flex;align-items:center;gap:.75rem}.user-menu__name{color:var(--ink-dim);font-size:.85rem}.app-main{flex:1 1;padding:1.25rem}.lobby{max-width:56rem;margin:0 auto;display:grid;grid-gap:1.25rem;gap:1.25rem}.lobby__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));grid-gap:1rem;gap:1rem}.lobby-card{padding:1.1rem;display:grid;grid-gap:.6rem;gap:.6rem}.lobby-card h3{margin:0;font-size:1rem}.lobby-card p{margin:0;color:var(--ink-dim);font-size:.85rem}.difficulty-row{display:flex;gap:.4rem;flex-wrap:wrap}.match-list{display:grid;grid-gap:.5rem;gap:.5rem}.match-row{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;gap:.75rem}.match-row__meta{display:flex;flex-direction:column;gap:.15rem}.match-row__meta strong{font-size:.9rem}.match-row__meta span{color:var(--ink-dim);font-size:.78rem}.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em}.badge--active{background:rgba(76,175,125,.18);color:var(--good)}.badge--finished{background:rgba(147,161,194,.18);color:var(--ink-dim)}.badge--waiting{background:rgba(226,165,58,.18);color:var(--warn)}.join-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1rem;letter-spacing:.15em;color:var(--accent)}.board{display:grid;grid-template-columns:1fr auto 1fr;grid-gap:1rem;gap:1rem;align-items:start;max-width:80rem;margin:0 auto}.island{padding:.75rem;display:grid;grid-gap:.5rem;gap:.5rem}.island__label{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.9rem}.island__label--a{color:var(--side-a)}.island__label--b{color:var(--side-b)}.tile-grid{display:grid;grid-gap:4px;gap:4px}.tile{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);border:1px solid var(--panel-border);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;transition:transform .1s ease,border-color .15s ease,background .15s ease}.tile[data-interactive=true]{cursor:pointer}.tile[data-interactive=true]:hover{border-color:var(--accent);transform:translateY(-1px)}.tile[data-selected=true]{outline:2px solid var(--accent);outline-offset:-2px}.tile[data-empty=true]{opacity:.55}.tile__icon{width:65%;height:65%;border-radius:4px}.tile__icon--home{background:var(--b-home)}.tile__icon--farm{background:var(--b-farm)}.tile__icon--mine{background:var(--b-mine)}.tile__icon--bank{background:var(--b-bank)}.tile__icon--fort{background:var(--b-fort)}.tile__icon--dock{background:var(--b-dock)}.tile__icon--shipyard{background:var(--b-shipyard)}.ocean{padding:.75rem;display:grid;grid-gap:.5rem;gap:.5rem;background:linear-gradient(180deg,var(--ocean),var(--ocean-deep));border-radius:var(--radius);border:1px solid var(--panel-border);min-width:12rem}.ocean__grid{display:grid;grid-gap:4px;gap:4px}.ocean__cell{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);background:hsla(0,0%,100%,.04);display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:wrap}.ocean__cell[data-selectable=true]{cursor:pointer;outline:1px dashed rgba(242,184,75,.5)}.ocean__cell[data-selected=true]{outline:2px solid var(--accent)}.boat{width:40%;height:40%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;cursor:pointer;border:2px solid rgba(0,0,0,.25)}.boat[data-owner=a]{background:var(--side-a)}.boat[data-owner=b]{background:var(--side-b)}.boat[data-selected=true]{outline:2px solid #fff}.boat[data-type=pt]{-webkit-clip-path:polygon(50% 0,100% 100%,0 100%);clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:3px}.hud{display:flex;gap:1rem;flex-wrap:wrap;padding:.6rem .9rem;font-size:.82rem}.hud__stat{display:flex;flex-direction:column;min-width:4.5rem}.hud__stat label{color:var(--ink-dim);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em}.hud__stat strong{font-size:1rem}.hud__delta--pos{color:var(--good)}.hud__delta--neg{color:var(--bad)}.unrest-bar{height:6px;border-radius:3px;background:hsla(0,0%,100%,.08);overflow:hidden;width:100%;margin-top:.2rem}.unrest-bar__fill{height:100%;background:linear-gradient(90deg,var(--good),var(--warn),var(--bad))}.build-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));grid-gap:.5rem;gap:.5rem}.build-option{padding:.5rem;border-radius:var(--radius-sm);border:1px solid var(--panel-border);background:var(--bg-elevated);display:grid;grid-gap:.25rem;gap:.25rem;text-align:left}.build-option:hover:not(:disabled){border-color:var(--accent)}.build-option[data-active=true]{outline:2px solid var(--accent)}.build-option strong{font-size:.82rem}.build-option span{font-size:.72rem;color:var(--ink-dim)}.tooltip{position:absolute;z-index:20;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#050a14;border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:.5rem .65rem;font-size:.75rem;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4);pointer-events:none}.tooltip strong{color:var(--accent)}.turn-bar{justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.7rem .9rem}.turn-bar,.turn-bar__group{display:flex;align-items:center}.turn-bar__group{gap:.4rem}.speed-toggle{display:flex;gap:2px;background:var(--bg-elevated);border-radius:var(--radius-sm);padding:2px}.speed-toggle button{border:none;background:transparent;color:var(--ink-dim);padding:.3rem .55rem;border-radius:4px;font-size:.75rem}.speed-toggle button[data-active=true]{background:var(--panel-border);color:var(--ink)}.action-queue{display:flex;flex-direction:column;gap:.3rem;max-height:8rem;overflow-y:auto}.action-queue__item{display:flex;justify-content:space-between;gap:.5rem;font-size:.78rem;padding:.25rem .5rem;border-radius:4px;background:var(--bg-elevated)}.action-queue__item button{background:none;border:none;color:var(--ink-dim);font-size:.75rem}.action-queue__item button:hover{color:var(--bad)}.event-log{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;max-height:10rem;overflow-y:auto}.event-log li{color:var(--ink-dim)}.event-log li::marker{color:var(--accent)}.modal-backdrop{position:fixed;inset:0;background:rgba(4,8,16,.72);display:flex;align-items:center;justify-content:center;z-index:50}.modal{padding:2rem;max-width:26rem;text-align:center;display:grid;grid-gap:1rem;gap:1rem}.modal h2{margin:0;font-size:1.6rem}.modal p{color:var(--ink-dim);margin:0}