@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{color-scheme:dark;--ink:#101c29;--panel:#172635;--line:#334656;--text:#f5f0e6;--muted:#a6b3bc;--gold:#e5be6b;--white:#e9e5d9;--green:#359777;--red:#c2675e}
[hidden]{display:none!important}
.arena.highlight-player{border-color:var(--player-glow);box-shadow:0 0 0 1px var(--player-glow),0 26px 55px #07111b66}
.arena.highlight-player .turn-badge{color:#fff4db;text-shadow:0 0 12px var(--player-glow)}
.hex-hit.active-side:not(.legal):not(.selected) .hex-tile{stroke:var(--player-glow);stroke-width:5;filter:drop-shadow(0 0 10px var(--player-glow))}
.move-path{pointer-events:none}
.move-path-line{fill:none;stroke:#f7d995;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:9 6;opacity:.88;filter:drop-shadow(0 0 4px #e8b8549a)}
.move-arrow{fill:none;stroke:#fff6d8;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px #0008)}
.moving-piece{pointer-events:none}
.options{border-top:1px solid #ffffff20;padding-top:18px;margin-bottom:20px}
.options .panel-heading{margin-bottom:10px}
.option-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;color:#d7ddda;font-size:12px;cursor:pointer}
.option-row input{appearance:none;width:35px;height:21px;border-radius:20px;background:#62717c;border:1px solid #ffffff4a;position:relative;cursor:pointer;flex:none;transition:background .2s}
.option-row input:before{content:'';position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#f4f0e7;box-shadow:0 1px 3px #0006;transition:transform .2s}
.option-row input:checked{background:#c8a962}
.option-row input:checked:before{transform:translateX(14px)}
.option-row input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.victory{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:#091723bb;backdrop-filter:blur(5px)}
.victory-card{position:relative;z-index:2;width:min(350px,calc(100% - 28px));padding:30px 22px 26px;text-align:center;border:1px solid #e4c77d;border-radius:20px;background:radial-gradient(circle at 50% 0%,#395169,#1a2b3b 72%);box-shadow:0 0 0 8px #e4bf6840,0 25px 65px #000a,0 0 55px #ebc47766;animation:victory-arrive .55s cubic-bezier(.16,.8,.2,1) both}
.victory-close{position:absolute;right:11px;top:5px;border:0;background:none;color:#e5dbc9;font-size:26px}
.victory-crown{font:56px Georgia,serif;line-height:1;color:#f2d188;text-shadow:0 0 23px #efd084}
.victory-kicker{margin-top:13px;color:#e3c884;font-size:10px;font-weight:700;letter-spacing:.18em}
.victory h2{font-size:42px;line-height:1;margin:8px 0}
.victory p{font-size:17px;font-weight:700;margin:0 0 21px}
.victory-restart{border:0;border-radius:9px;background:#e5be6b;color:#152333;padding:10px 23px;font-weight:700}
.victory-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.victory-confetti i{position:absolute;left:var(--x);top:-18%;width:var(--w);height:var(--h);background:var(--c);opacity:0;transform:rotate(var(--r));animation:confetti-fall var(--d) ease-in var(--delay) both}
.victory.no-motion .victory-confetti{display:none}.victory.no-motion .victory-card{animation:none}
@keyframes victory-arrive{from{opacity:0;transform:scale(.78) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes confetti-fall{8%{opacity:1}90%{opacity:1}to{top:110%;opacity:0;transform:translateX(var(--drift)) rotate(630deg)}}
*{box-sizing:border-box}html{min-height:100%;background:var(--ink)}body{margin:0;color:var(--text);font-family:'DM Sans',system-ui,sans-serif;background:radial-gradient(ellipse at 50% 34%,#21394b 0%,#101c29 57%,#0b1622 100%);min-height:100vh}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.42;cursor:not-allowed}.app{max-width:1440px;margin:auto;padding:0 34px 28px}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff1e}.back,.help-trigger{color:var(--muted);text-decoration:none;background:none;border:0;font-size:13px;letter-spacing:.03em}.back{display:flex;gap:8px;align-items:center}.back:first-letter{color:var(--gold)}.topbar-mark{font-size:11px;font-weight:700;letter-spacing:.26em;color:#d6c6a6}.topbar-mark span{color:var(--gold);margin:0 8px}.help-trigger{display:flex;align-items:center;gap:8px}.help-trigger:first-letter{font-family:Georgia,serif;font-size:19px;color:var(--gold)}.intro{text-align:center;padding:39px 0 24px}.eyebrow,.dialog-kicker{font-size:10px;font-weight:700;letter-spacing:.32em;color:var(--gold)}.eyebrow{display:flex;align-items:center;justify-content:center;gap:13px}.eyebrow-line{width:28px;height:1px;background:var(--gold);opacity:.55}h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:500}h1{font-size:clamp(42px,5.1vw,72px);letter-spacing:-.045em;margin:8px 0 5px;line-height:1.07}h1 em{font-weight:500;color:var(--gold)}.intro p{font-size:14px;color:var(--muted);margin:12px 0 0}.game-shell{display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:22px;align-items:start;max-width:1210px;margin:auto}.arena,.sidebar{border:1px solid #ffffff20;background:linear-gradient(145deg,#172939ef,#122331ed);box-shadow:0 26px 55px #07111b66}.arena{border-radius:18px;padding:18px 20px 8px;overflow:hidden}.arena-top{height:37px;display:flex;align-items:center;justify-content:space-between;padding:0 8px}.turn-badge{display:flex;gap:10px;align-items:center;font-weight:700;font-size:13px}.turn-dot{width:10px;height:10px;border-radius:50%;background:var(--white);box-shadow:0 0 11px #fff8}.view-switch{display:flex;padding:3px;border:1px solid #ffffff27;border-radius:8px;background:#0c1926}.view-switch button{border:0;background:transparent;color:var(--muted);padding:5px 15px;border-radius:5px;font-size:12px;font-weight:700}.view-switch button.active{background:#e7d5ad;color:#1c2b36;box-shadow:0 2px 8px #0005}.board-wrap{position:relative;width:100%;max-width:800px;margin:2px auto 0;aspect-ratio:840/756;isolation:isolate}.board-wrap:before{content:'';position:absolute;inset:8% 2% 4%;border-radius:50%;background:radial-gradient(ellipse,#d0a95e19 0%,transparent 63%);pointer-events:none}.board-glow{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 40%,#d2a75b0b,transparent 62%)}#board-2d,#board-3d{position:absolute;width:100%;height:100%;inset:0;touch-action:manipulation}#board-3d{touch-action:none}#board-3d canvas{display:block;width:100%;height:100%}.hex-hit{cursor:pointer}.hex-tile{stroke:#677883;stroke-width:3;transition:fill .18s,stroke .18s,filter .18s}.hex-hit:hover .hex-tile,.hex-hit:focus .hex-tile{stroke:#efe4c8;filter:brightness(1.17)}.hex-hit.legal .hex-tile{stroke:#f4d88e;stroke-width:4;filter:drop-shadow(0 0 9px #e3b75b88)}.hex-hit.selected .hex-tile{stroke:#fff1bb;stroke-width:5;filter:drop-shadow(0 0 12px #f6d47dcc)}.hex-hit.center .hex-tile{stroke:#f5d687}.hex-shine{pointer-events:none;fill:none;stroke:#ffffff19;stroke-width:2}.piece-shadow{fill:#0006;pointer-events:none}.piece-base{stroke:#ffffff70;stroke-width:2.3;pointer-events:none}.piece-inner{fill:none;stroke:#ffffff55;stroke-width:1.5;pointer-events:none}.crown{fill:#fff8e6;stroke:#7c5b38;stroke-width:1.3;pointer-events:none}.target-ring{fill:none;stroke:#fff2c4;stroke-width:3;pointer-events:none;opacity:.94}.target-core{fill:#f8dc8d;pointer-events:none}.center-star{fill:#493d25;pointer-events:none}.board-hint{text-align:center;color:#bdc6c7;font-size:12px;margin:0 0 8px;min-height:19px}.sidebar{border-radius:18px;padding:23px}.panel-heading{display:flex;align-items:center;justify-content:space-between;color:var(--gold);font-weight:700;font-size:10px;letter-spacing:.22em}.tiny-star{font-size:16px}.status{margin:17px 0 18px;font-size:16px;line-height:1.45}.players{display:grid;gap:8px}.player{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;border:1px solid #ffffff16;border-radius:10px;padding:10px 12px;background:#ffffff08;transition:border-color .2s,background .2s}.player.active{border-color:#dcb96b8c;background:#ebc66c13}.player.winner{border-color:#e4bc64;background:#e4bc6428}.player-swatch{width:29px;height:29px;border:3px solid #ffffff55;border-radius:50%;box-shadow:inset 0 2px 5px #0004,0 2px 5px #0005;flex:none}.player-name{font-size:13px;font-weight:700}.player-sub{font-size:11px;color:var(--muted);margin-top:2px}.player-arrow{margin-left:auto;color:var(--gold);font-size:17px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:17px 0 22px}.controls button{border:1px solid #77879469;border-radius:9px;background:#ffffff0b;color:#f4eee1;min-height:42px;font-size:12px;font-weight:700}.controls button:hover:not(:disabled){border-color:var(--gold);background:#ffffff16}.controls button:first-letter{font-size:17px;color:var(--gold)}.rule-card{border-top:1px solid #ffffff20;padding-top:19px}.rule-card p{font-size:12px;line-height:1.7;color:#c0c9cd;margin:13px 0}.rule-card strong{color:#f4dfad}.text-link{background:none;border:0;color:var(--gold);font-weight:700;font-size:12px;padding:4px 0}.footnote{text-align:center;font-size:11px;color:#85939d;margin:21px 0 0}dialog{width:min(530px,calc(100% - 28px));max-height:calc(100vh - 24px);overflow:auto;background:#192b3b;color:var(--text);border:1px solid #cead69;border-radius:17px;box-shadow:0 26px 100px #000a;padding:32px}dialog::backdrop{background:#08131bcc;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:20px;top:15px;background:none;border:0;color:var(--muted);font-size:27px}dialog h2{font-size:35px;margin:8px 0 14px}dialog ol{padding-left:21px}dialog li,dialog p{font-size:13px;line-height:1.65;color:#c9d1d2;margin-bottom:12px}.dialog-action{background:var(--gold);color:#172633;border:0;padding:10px 30px;border-radius:8px;font-weight:700;margin-top:7px}
@media(max-width:900px){.app{padding:0 16px 22px}.game-shell{grid-template-columns:minmax(0,1fr)}.sidebar{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}.sidebar>.panel-heading,.status,.players{grid-column:1}.controls,.rule-card{grid-column:2}.controls{grid-row:2;margin:0 0 14px;align-self:start}.rule-card{grid-row:3}.arena{padding:14px 12px 8px}.board-wrap{max-width:680px}.intro{padding-top:24px}}
@media(max-width:600px){.topbar{height:56px}.topbar-mark{font-size:9px;letter-spacing:.12em}.back span,.help-trigger span{display:none}.intro{padding:23px 0 17px}.intro p{font-size:12px;padding:0 12px}.eyebrow{font-size:8px;letter-spacing:.2em}.game-shell{gap:13px}.arena{margin:0 -8px;padding:11px 5px 7px;border-radius:13px}.arena-top{padding:0 11px}.board-wrap{width:100%}.board-hint{font-size:11px;padding:0 10px}.sidebar{display:block;padding:17px}.status{margin:10px 0}.players{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.player{padding:8px 5px;gap:5px;min-height:54px}.player-swatch{width:16px;height:16px;border-width:2px}.player-name{font-size:11px}.player-sub{font-size:9px}.player-arrow{display:none}.controls{margin:12px 0 16px}.rule-card{padding-top:13px}.rule-card p{margin:9px 0}.footnote{font-size:10px;margin:14px 0 0}dialog{padding:25px 23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
@media(max-width:900px){.options{grid-column:2;grid-row:3}.rule-card{grid-row:4}}
@media(max-width:600px){.options{margin-top:0;margin-bottom:13px;padding-top:13px}.victory-card{padding:22px 14px 19px}.victory-crown{font-size:43px}.victory h2{font-size:34px}}
.board-wrap{aspect-ratio:1}
.sidebar-mode{justify-content:flex-start!important;grid-column:1/-1;margin:14px 0!important}.sidebar-mode select{width:100%;min-width:0}.fullscreen-toggle{grid-column:1/-1;width:100%;min-height:40px;margin:0 0 10px;border:1px solid #cead6980;border-radius:8px;background:#192b3b;color:var(--gold);font-size:12px}.game-fullscreen{overflow:hidden;height:100dvh}.game-fullscreen .topbar,.game-fullscreen .intro,.game-fullscreen .footnote{display:none}.game-fullscreen .app{padding:0;max-width:none}.game-fullscreen .game-shell{position:fixed;inset:0;max-width:none;margin:0;padding:10px;height:100dvh;grid-template-columns:minmax(0,1fr) 305px;gap:12px;align-items:stretch;background:#101c29;overflow:hidden}.game-fullscreen .arena{display:grid;grid-template-rows:37px minmax(0,1fr) 36px;min-height:0;margin:0;padding:12px;overscroll-behavior:contain}.game-fullscreen .board-wrap{width:100%;height:100%;max-width:none;min-height:0;margin:0;aspect-ratio:auto;touch-action:none}.game-fullscreen #board-2d{touch-action:none}.game-fullscreen .board-hint{align-self:center;margin:0}.game-fullscreen .sidebar{display:block;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px;scrollbar-gutter:stable}.game-fullscreen .status{min-height:48px}.game-fullscreen .fullscreen-toggle{position:sticky;top:0;z-index:2}.game-fullscreen .players{grid-template-columns:1fr}@media(max-width:700px){.game-fullscreen .game-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(130px,30dvh);padding:5px;gap:5px}.game-fullscreen .arena{padding:5px;grid-template-rows:37px minmax(0,1fr) 32px}.game-fullscreen .sidebar{padding:10px}.game-fullscreen .sidebar-mode{margin:8px 0!important}.game-fullscreen .players{grid-template-columns:repeat(3,minmax(0,1fr))}.game-fullscreen .players[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-height:500px) and (min-width:701px){.game-fullscreen .game-shell{grid-template-columns:minmax(0,1fr) 260px}}
.mode-picker{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px 0 0;font-size:12px;color:var(--muted)}.mode-picker select{max-width:100%;min-height:42px;padding:8px 12px;background:#192b3b;color:var(--text);border:1px solid #cead6980;border-radius:8px;font:inherit}.mode-picker select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}@media(max-width:600px){.players[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
