:root { --ink:#102a30; --ink-2:#315158; --paper:#e8e1d3; --paper-deep:#d8cfbd; --gold:#bc8737; --gold-light:#e5c17d; --line:rgba(34,67,69,.25); --serif:"Cormorant Garamond", Georgia, serif; --sans:Inter, Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; } html { min-width:760px; background:#0e252b; } body { margin:0; color:var(--ink); font-family:var(--sans); min-height:100vh; background:radial-gradient(ellipse at 48% 7%, #386169 0, #17383e 34%, #0e252b 75%); } button, input, select { font:inherit; } button { cursor:pointer; } .hunt-shell { width:min(1160px, calc(100% - 80px)); margin:auto; padding:44px 0 62px; position:relative; }.brand-mark { display:flex; align-items:center; gap:10px; position:absolute; top:43px; left:0; color:#eee5d5; text-decoration:none; font:600 13px/11px var(--serif); letter-spacing:.06em; text-transform:uppercase; }.brand-mark svg { width:33px; height:33px; fill:none; stroke:var(--gold-light); stroke-width:1.4; }.intro { text-align:center; padding:14px 0 30px; color:#eee5d5; }.eyebrow { color:var(--gold-light); font:500 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; margin:0 0 10px; }.intro h1,.config-heading h1,.password-dialog h1 { font:600 clamp(46px, 5vw, 68px)/.85 var(--serif); letter-spacing:-.035em; margin:0; }.instruction { color:#bdd0cd; margin:18px 0 0; font-size:13px; }.map-stage { width:min(960px, 100%); margin:auto; }.map-frame { position:relative; padding:21px; background:#c1ad83; box-shadow:0 21px 54px rgba(0,0,0,.28), inset 0 0 0 1px rgba(51,39,22,.34); transform:rotate(-.16deg); }.map-frame::before,.map-frame::after { position:absolute; content:""; inset:8px; border:1px solid rgba(68,47,20,.36); pointer-events:none; z-index:3; }.map-frame::after { inset:12px; border-color:rgba(248,237,202,.35); }.map-art { height:clamp(410px, 56vw, 600px); overflow:hidden; position:relative; isolation:isolate; background:linear-gradient(112deg, #c4aa7c 0%, #ead8a8 45%, #ba9a68 100%); }.map-art::before { content:""; position:absolute; inset:0; opacity:.34; background-image:radial-gradient(#614c30 .7px, transparent .9px), radial-gradient(#765d3b .6px, transparent .9px); background-size:5px 5px, 8px 8px; background-position:0 0, 3px 3px; mix-blend-mode:multiply; }.contour { position:absolute; border:1px solid rgba(86,83,50,.28); border-radius:46% 54% 58% 42%; transform:rotate(-18deg); }.contour-one { width:77%; height:66%; left:8%; top:7%; }.contour-two { width:61%; height:56%; left:17%; top:15%; }.contour-three { width:42%; height:39%; right:4%; bottom:5%; }.contour-four { width:29%; height:25%; right:14%; bottom:16%; }.coast { position:absolute; background:#8a9277; opacity:.62; filter:blur(.1px); }.coast-one { width:59%; height:38%; bottom:-12%; left:-7%; clip-path:polygon(0 39%,12% 24%,23% 37%,35% 12%,47% 30%,61% 3%,77% 23%,92% 9%,100% 24%,100% 100%,0 100%); }.coast-two { width:30%; height:30%; top:-9%; right:-5%; clip-path:polygon(0 6%,22% 29%,35% 15%,51% 38%,69% 16%,100% 33%,100% 100%,0 100%); }.map-caption { position:absolute; z-index:1; color:rgba(59,48,33,.66); font:600 clamp(18px,2.4vw,31px) var(--serif); letter-spacing:.02em; transform:rotate(-10deg); }.map-caption-one { left:37%; top:21%; }.map-caption-two { right:7%; bottom:28%; }.map-caption-three { left:12%; bottom:17%; font-size:clamp(15px,1.7vw,23px); }.map-rose { position:absolute; z-index:1; width:75px; height:75px; right:5%; top:8%; color:#5b4630; font:600 11px var(--serif); text-align:center; }.map-rose span { position:absolute; top:0; left:0; right:0; }.map-rose i,.map-rose b,.map-rose em { position:absolute; top:18px; left:35px; width:2px; height:54px; background:#5b4630; transform-origin:1px 20px; }.map-rose b { transform:rotate(60deg); }.map-rose em { transform:rotate(-60deg); }.grid-board { position:absolute; inset:21px; z-index:2; display:grid; grid-template-columns:18px repeat(var(--cols), 1fr) 18px; grid-template-rows:18px repeat(var(--rows), 1fr) 18px; }.grid-labels { display:contents; pointer-events:none; }.grid-labels span { align-self:center; justify-self:center; color:#183d40; font:500 10px var(--mono); text-shadow:0 1px 0 rgba(255,255,255,.5); }.map-cell { position:relative; background:rgba(220,233,213,.012); border:1px solid rgba(18,57,56,.53); margin:-.5px; color:#f5daa0; transition:background .18s ease, box-shadow .18s ease, transform .18s ease; }.map-cell:hover:not(:disabled) { background:rgba(242,212,138,.15); box-shadow:inset 0 0 0 1px #eacb83, 0 0 16px rgba(240,190,79,.35); z-index:2; }.map-cell.is-explored { background:rgba(26,37,41,.66); border-color:rgba(8,23,27,.7); cursor:not-allowed; }.map-cell.is-claimed { background:rgba(46,87,65,.48); border-color:#e2be70; cursor:default; }.treasure-chest { position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); width:37px; height:29px; color:#f7d07a; font-size:29px; line-height:29px; text-shadow:0 0 15px rgba(255,219,124,.75); }.map-note { display:flex; justify-content:center; gap:9px; align-items:center; color:#b6c7c3; font:11px var(--mono); letter-spacing:.04em; margin:18px 0 38px; }.pulse-dot { width:6px; height:6px; border-radius:50%; background:var(--gold-light); box-shadow:0 0 0 4px rgba(229,193,125,.1); }.discoveries { border-top:1px solid rgba(213,227,219,.17); padding-top:26px; color:#edf0e7; }.section-label { display:flex; justify-content:space-between; align-items:start; }.section-label .eyebrow { margin:0; }.section-label span { font:11px var(--mono); color:#a9c0ba; }.discoveries h2 { margin:10px 0 18px; font:600 34px/.9 var(--serif); letter-spacing:-.02em; }.winner-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }.winner-card { position:relative; min-height:130px; padding:20px 22px; overflow:hidden; border:1px solid rgba(217,224,204,.16); background:rgba(4,25,29,.22); }.winner-card.is-found { background:linear-gradient(125deg, rgba(71,94,69,.54), rgba(17,45,48,.7)); border-color:rgba(229,193,125,.43); }.winner-number,.winner-coordinate { font:10px var(--mono); letter-spacing:.1em; color:#b9c9c2; }.winner-coordinate { position:absolute; right:18px; top:18px; color:var(--gold-light); }.winner-name { font:600 21px/.95 var(--serif); margin:18px 0 5px; letter-spacing:-.01em; }.winner-meta { margin:0; color:#b9c9c2; font-size:10px; }.waiting-mark,.winner-chest { float:right; font:600 33px/.8 var(--serif); color:rgba(229,193,125,.58); }.winner-chest { font-size:31px; color:#f4cc77; text-shadow:0 0 15px rgba(250,205,107,.3); }.claim-dialog,.password-dialog { width:min(440px, calc(100vw - 42px)); padding:0; color:var(--ink); border:0; background:#ece4d4; box-shadow:0 35px 80px rgba(0,0,0,.48); }.claim-dialog::backdrop,.password-dialog::backdrop { background:rgba(4,20,23,.78); backdrop-filter:blur(5px); }.claim-dialog form,.password-dialog form { padding:43px 44px 40px; position:relative; }.close-button { border:0; background:none; position:absolute; right:17px; top:12px; font:28px/1 var(--serif); color:#52686b; }.chest-seal,.lock-seal { display:grid; place-items:center; width:36px; height:36px; margin-bottom:21px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); }.claim-dialog h2 { font:600 45px/.85 var(--serif); margin:0; letter-spacing:-.03em; }.dialog-copy,.password-dialog p:not(.eyebrow):not(.password-error) { color:#5a6966; font-size:13px; margin:14px 0 25px; }.claim-dialog label,.password-dialog label,.manual-grid label { display:grid; gap:7px; color:#385258; font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; margin:13px 0; }.claim-dialog input,.password-dialog input,.manual-grid input { border:1px solid #b9b4a8; border-radius:0; outline:0; background:#f9f5eb; color:var(--ink); padding:12px 13px; font:14px var(--sans); text-transform:none; letter-spacing:normal; }.claim-dialog input:focus,.password-dialog input:focus,.manual-grid input:focus { border-color:var(--ink-2); box-shadow:0 0 0 3px rgba(49,81,88,.1); }.primary-button { border:1px solid #cda85e; color:#fff4d9; background:#294d50; padding:14px 18px; margin-top:12px; width:100%; font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; transition:transform .15s, background .15s; }.primary-button:hover { background:#173b3e; transform:translateY(-1px); }.primary-button span { font-size:17px; vertical-align:-1px; margin-left:7px; }.toast { position:fixed; z-index:10; bottom:25px; left:50%; transform:translate(-50%, 20px); opacity:0; padding:12px 17px; background:#f0e7d4; color:#193d42; box-shadow:0 9px 28px rgba(0,0,0,.25); font:500 11px var(--mono); transition:.23s ease; pointer-events:none; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Configuration */ .config-page { background:linear-gradient(135deg, #e9e1d2 0, #d7cbb9 50%, #c8bba5 100%); }.config-shell { width:min(920px, calc(100% - 80px)); margin:auto; padding:48px 0 70px; position:relative; }.config-page .brand-mark { position:static; color:#29494d; width:max-content; }.config-page .brand-mark svg { stroke:#a77933; }.return-link { position:absolute; right:0; top:54px; color:#345359; font:500 10px var(--mono); text-decoration:none; text-transform:uppercase; letter-spacing:.08em; }.config-heading { padding:68px 0 34px; }.config-heading .eyebrow { color:#a77933; }.config-heading h1 { color:#17383d; }.config-heading > p:last-child { max-width:460px; margin:18px 0 0; color:#61706c; font-size:13px; }.settings-form { display:grid; gap:13px; }.settings-panel { padding:29px 31px; background:rgba(250,247,238,.56); border:1px solid rgba(57,76,72,.2); }.panel-heading { display:flex; gap:17px; align-items:flex-start; margin-bottom:26px; }.panel-index { color:#af7b30; font:500 10px var(--mono); padding-top:4px; }.panel-heading h2 { color:#1e4448; font:600 29px/.9 var(--serif); margin:0; letter-spacing:-.02em; }.panel-heading p { margin:8px 0 0; color:#6c7771; font-size:12px; }.preset-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }.preset-grid button { text-align:left; padding:15px; color:#405a5d; background:#f0e9dc; border:1px solid #c7c2b5; }.preset-grid button b,.preset-grid button span { display:block; }.preset-grid button b { font:600 21px/.9 var(--serif); color:#24494d; }.preset-grid button span { margin-top:7px; font:10px var(--mono); color:#75817d; }.preset-grid button.is-selected { background:#31575a; border-color:#31575a; }.preset-grid button.is-selected b,.preset-grid button.is-selected span { color:#fff2d4; }.manual-grid { display:flex; gap:11px; align-items:end; margin-top:20px; }.manual-grid > span { padding:0 1px 13px; color:#a77933; font:21px var(--serif); }.manual-grid label { margin:0; width:110px; }.manual-grid input { width:100%; padding:9px; }.winning-square-list { display:grid; gap:8px; }.winner-setting { display:flex; align-items:center; gap:14px; padding:10px 11px; background:#eee6d8; }.winner-setting > span { color:#a77933; width:17px; font:10px var(--mono); }.winner-setting select { flex:1; appearance:auto; color:#24484c; border:1px solid #c3bcaf; background:#fbf8ef; padding:8px 10px; font:12px var(--mono); }.remove-winner { width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:#7f5048; font:25px/20px var(--serif); }.add-winner-button { margin-top:11px; border:0; background:transparent; color:#31575a; padding:5px 0; font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }.add-winner-button:disabled { opacity:.45; cursor:not-allowed; }.danger-panel { display:flex; align-items:center; justify-content:space-between; }.danger-panel .panel-heading { margin:0; }.quiet-danger { color:#904d42; border:1px solid rgba(144,77,66,.4); background:transparent; padding:10px 13px; font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.06em; }.save-row { display:flex; align-items:center; justify-content:space-between; padding-top:8px; }.save-row p { color:#64726e; font-size:11px; }.save-row .primary-button { width:auto; margin:0; padding:14px 21px; }.password-dialog { background:#e9e1d2; }.password-dialog h1 { color:#17383d; font-size:50px; }.password-dialog form > a { display:block; text-align:center; margin-top:18px; color:#426165; font:10px var(--mono); text-decoration:none; text-transform:uppercase; letter-spacing:.06em; }.password-error { min-height:15px; color:#984e45 !important; font-size:11px !important; margin:6px 0 -2px !important; }
@media (max-width:820px) { html { min-width:0; } .hunt-shell,.config-shell { width:calc(100% - 34px); padding-top:28px; } .brand-mark { top:27px; } .intro { padding-top:73px; } .map-frame { padding:15px; } .grid-board { inset:15px; grid-template-columns:16px repeat(var(--cols),1fr) 16px; grid-template-rows:16px repeat(var(--rows),1fr) 16px; }.map-art { height:53vw; min-height:330px; }.winner-grid { grid-template-columns:1fr; }.config-page .brand-mark { top:auto; }.return-link { top:37px; }.config-heading { padding-top:57px; }.preset-grid { grid-template-columns:repeat(2,1fr); }.danger-panel { align-items:flex-start; gap:14px; flex-direction:column; }.save-row { align-items:flex-start; gap:16px; flex-direction:column; }.save-row .primary-button { width:100%; } }

/* Chest icon drawn in CSS so the prototype has no external asset dependency. */
.treasure-chest { width:31px; height:22px; border:2px solid #f4cf7c; border-radius:2px 2px 4px 4px; box-shadow:0 0 15px rgba(255,219,124,.75), inset 0 0 0 4px rgba(128,74,27,.42); }
.treasure-chest::before,.winner-chest::before { content:""; position:absolute; left:-2px; right:-2px; top:-8px; height:10px; border:2px solid #f4cf7c; border-bottom:0; border-radius:12px 12px 0 0; background:rgba(139,82,29,.55); }
.treasure-chest i,.winner-chest i { position:absolute; width:4px; height:100%; left:50%; top:0; transform:translateX(-50%); background:#f4cf7c; }
.winner-chest { position:relative; float:right; width:26px; height:18px; margin:7px 3px 0 0; border:2px solid #f4cf7c; border-radius:2px 2px 4px 4px; box-shadow:0 0 15px rgba(250,205,107,.3), inset 0 0 0 3px rgba(128,74,27,.42); }

/* Final spacing pass: give the mark breathing room and separate card metadata from its icon. */
.brand-mark { gap:12px; font-size:12px; line-height:13px; letter-spacing:.12em; }
.brand-mark span { display:block; padding-top:2px; }
.brand-mark svg { flex:0 0 auto; }
.winner-card { padding:20px 22px 21px; }
.winner-card.is-found .winner-coordinate { right:66px; }
.winner-chest { position:absolute; top:20px; right:22px; float:none; margin:7px 3px 0 0; }
.winner-name { line-height:1.04; margin:22px 0 8px; }
.winner-meta { line-height:1.4; letter-spacing:.01em; }
.panel-heading h2 { line-height:.98; }

/* The second placeholder coastline reads as a blue panel over the grid; omit it. */
.coast-two { display:none; }

/* Map-first main screen. */
.hunt-page { overflow-x:hidden; }
.hunt-shell { width:100%; min-height:100vh; margin:0; padding:0; }
.hunt-page .brand-mark { position:fixed; z-index:5; top:18px; left:20px; }
.game-layout { display:flex; flex-direction:column; min-height:100vh; padding:7.5vh 7.5vw; }
.map-stage { width:100%; max-width:none; margin:0; flex:1; }
.map-frame { width:100%; }
.map-art { height:clamp(500px, calc(85vh - 70px), 820px); }
.map-note { margin:11px 0 16px; }
.discoveries { width:100%; margin:0; padding:26px 28px 36px; }

@media (min-width:1100px) {
  .game-layout { display:grid; grid-template-columns:minmax(0, 1fr) 330px; gap:24px; align-items:stretch; }
  .map-stage { min-width:0; }
  .map-art { height:clamp(500px, calc(85vh - 70px), 820px); min-height:0; max-height:none; }
  .map-note { margin:10px 0 0; }
  .discoveries { align-self:stretch; border-top:0; border-left:1px solid rgba(213,227,219,.17); padding:34px 25px; background:rgba(4,26,29,.15); }
  .winner-grid { grid-template-columns:1fr; }
}

.quiet-danger.is-confirmed { color:#315f4f; border-color:rgba(49,95,79,.55); background:rgba(49,95,79,.08); }

/* Individual discovery-card accents and clearer claimed-winner details. */
.winner-card { --card-accent:#d7aa55; }
.winner-card:nth-child(2) { --card-accent:#79aa9d; }
.winner-card:nth-child(3) { --card-accent:#c27f61; }
.winner-card:nth-child(4) { --card-accent:#7f9fba; }
.winner-card:nth-child(5) { --card-accent:#a5ad6c; }
.winner-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg, var(--card-accent), transparent 76%); opacity:.78; }
.winner-card.is-found { background:linear-gradient(125deg, color-mix(in srgb, var(--card-accent) 18%, #243f3d), rgba(17,45,48,.78)); border-color:color-mix(in srgb, var(--card-accent) 46%, transparent); }
.winner-card .winner-number { color:var(--card-accent); }
.winner-card .waiting-mark { color:var(--card-accent); opacity:.8; }
.winner-card .winner-coordinate { color:var(--card-accent); padding:3px 6px; border:1px solid color-mix(in srgb, var(--card-accent) 42%, transparent); background:rgba(4,24,27,.2); }
.winner-details { display:grid; gap:3px; margin-top:7px; }
.winner-details p { min-width:0; margin:0; color:#d5dfd9; font-size:10px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.winner-details span { display:inline-block; margin-right:5px; color:var(--card-accent); font:500 8px/1.35 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.winner-setting option:disabled { color:#aaa49a; }
.winner-card:not(.is-found) .waiting-mark { position:absolute; top:18px; right:22px; float:none; line-height:1; }
.winner-card:not(.is-found) .winner-coordinate { right:66px; }

/* Desktop composition: inset the map only; pin the discovery rail to three viewport edges. */
@media (min-width:1100px) {
  .game-layout { padding:0; gap:clamp(24px, 3vw, 48px); }
  .map-stage { height:100%; padding:7.5vh 0 7.5vh 7.5vw; }
  .map-frame { width:100%; height:100%; }
  .discoveries { align-self:stretch; height:100svh; border-top:0; border-right:0; border-bottom:0; }
}

/* High-contrast coordinate rails around the map. */
.grid-board {
  grid-template-columns:24px repeat(var(--cols), 1fr) 24px;
  grid-template-rows:24px repeat(var(--rows), 1fr) 24px;
  background:
    linear-gradient(to bottom, rgba(13,42,43,.42) 0 24px, transparent 24px calc(100% - 24px), rgba(13,42,43,.42) calc(100% - 24px)),
    linear-gradient(to right, rgba(13,42,43,.42) 0 24px, transparent 24px calc(100% - 24px), rgba(13,42,43,.42) calc(100% - 24px));
}
.grid-labels span { z-index:3; color:#f4dfad; font-size:11px; font-weight:700; line-height:1; letter-spacing:.04em; text-shadow:0 1px 2px rgba(4,20,21,.9); }

@media (max-width:820px) {
  .grid-board {
    grid-template-columns:18px repeat(var(--cols), 1fr) 18px;
    grid-template-rows:18px repeat(var(--rows), 1fr) 18px;
    background:
      linear-gradient(to bottom, rgba(13,42,43,.42) 0 18px, transparent 18px calc(100% - 18px), rgba(13,42,43,.42) calc(100% - 18px)),
      linear-gradient(to right, rgba(13,42,43,.42) 0 18px, transparent 18px calc(100% - 18px), rgba(13,42,43,.42) calc(100% - 18px));
  }
  .grid-labels span { font-size:10px; }
}

@media (max-width:1099px) {
  .hunt-shell { width:100%; padding:0; }
  .game-layout { display:flex; }
}

/* Layout refinement. */
.game-layout { padding:clamp(44px, 7.5vh, 82px) clamp(36px, 7.5vw, 120px); }
.map-frame { transform:none; }
.map-note { justify-content:flex-start; padding-left:2px; }

@media (min-width:1100px) {
  .game-layout { grid-template-columns:minmax(0, 1fr) minmax(286px, 330px); gap:clamp(24px, 3vw, 48px); height:100svh; min-height:0; }
  .map-stage { display:flex; flex-direction:column; min-height:0; height:100%; }
  .map-frame { display:flex; flex:1; min-height:0; }
  .map-art { flex:1; height:auto; min-height:0; }
  .map-note { flex:0 0 auto; }
  .discoveries { align-self:start; max-height:100%; overflow:auto; border:1px solid rgba(213,227,219,.17); padding:24px 26px 26px; background:rgba(4,26,29,.22); }
}

/* Full-width, four-panel configuration surface. */
.config-shell { width:100%; max-width:none; min-height:100vh; margin:0; padding:32px clamp(28px, 4vw, 68px) 48px; }
.config-page .return-link { top:42px; right:clamp(28px, 4vw, 68px); }
.settings-form { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:48px; align-items:stretch; }
.settings-panel { min-width:0; padding:clamp(24px, 2.5vw, 36px); }
.settings-panel .panel-heading { margin-bottom:26px; }
.settings-panel .preset-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.danger-panel,.save-panel { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:28px; }
.danger-panel .panel-heading,.save-panel .panel-heading { margin-bottom:0; }
.quiet-danger { align-self:flex-start; }
.save-panel .primary-button { width:100%; margin:0; }

@media (max-width:900px) {
  .config-shell { width:100%; padding:28px 22px 40px; }
  .config-page .return-link { top:37px; right:22px; }
  .settings-form { grid-template-columns:1fr; margin-top:42px; }
}

/* Wide-screen discoveries rail: fill the column and share its height between cards. */
@media (min-width:1100px) {
  .discoveries { align-self:stretch; height:100%; max-height:none; overflow:hidden; display:flex; flex-direction:column; }
  .discoveries .section-label,.discoveries h2 { flex:0 0 auto; }
  .winner-grid { flex:1; min-height:0; display:grid; grid-template-columns:1fr; grid-auto-rows:minmax(0, 1fr); gap:10px; }
  .winner-card { min-height:0; padding:clamp(12px, 1.7vh, 20px) 22px; }
  .winner-name { margin:clamp(12px, 1.8vh, 22px) 0 5px; font-size:clamp(17px, 2.2vh, 21px); }
  .winner-meta { font-size:clamp(8px, 1.1vh, 10px); }
}

/* Final desktop geometry: one map inset, with the discovery rail locked to the viewport edge. */
@media (min-width:1100px) {
  .game-layout {
    width:100%;
    height:100svh;
    min-height:0;
    padding:0;
    grid-template-columns:minmax(0, 1fr) clamp(320px, 20vw, 380px);
    gap:clamp(20px, 2vw, 36px);
  }
  .map-stage {
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    padding:4vh 0 4vh 3vw;
  }
  .map-frame {
    width:100%;
    height:auto;
    min-height:0;
    flex:1;
  }
  .map-art { height:auto; min-height:0; flex:1; }
  .discoveries {
    width:100%;
    height:100svh;
    max-height:none;
    margin:0;
    align-self:stretch;
    overflow:hidden;
    border-top:0;
    border-right:0;
    border-bottom:0;
  }
  .hunt-page .brand-mark { top:6px; left:20px; font-size:10px; line-height:10px; }
  .hunt-page .brand-mark svg { width:26px; height:26px; }
}

/* Expedition theme: layered terrain backdrop and illustrated discovery cards. */
.hunt-page {
  background-color:#141d1b;
  background-image:
    radial-gradient(circle at 8% 7%, rgba(204,151,74,.22), transparent 25%),
    radial-gradient(ellipse at 56% 92%, rgba(65,111,88,.2), transparent 38%),
    radial-gradient(ellipse at 83% 18%, rgba(126,66,43,.16), transparent 31%),
    repeating-radial-gradient(ellipse at 23% 47%, transparent 0 54px, rgba(232,205,146,.028) 55px 56px),
    linear-gradient(135deg, #111a18 0%, #1b2b25 47%, #211b18 100%);
}

.hunt-page .brand-mark {
  color:#f5ead4;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}

.map-frame {
  box-shadow:
    0 24px 65px rgba(0,0,0,.42),
    0 0 0 1px rgba(241,210,146,.12),
    inset 0 0 0 1px rgba(51,39,22,.34);
}

.discoveries {
  background:
    radial-gradient(circle at 100% 0, rgba(196,135,65,.11), transparent 30%),
    linear-gradient(180deg, rgba(10,29,27,.97), rgba(10,21,21,.98));
  box-shadow:-24px 0 65px rgba(0,0,0,.24);
}

.discoveries h2 {
  color:#fff7e8;
  text-shadow:0 3px 18px rgba(0,0,0,.38);
}

.winner-card {
  --card-image:url("assets/winner-beach.jpg");
  background-image:
    linear-gradient(95deg, rgba(5,22,22,.97) 0%, rgba(5,24,24,.88) 47%, rgba(5,22,22,.44) 100%),
    var(--card-image);
  background-position:center, center right;
  background-repeat:no-repeat;
  background-size:cover;
  border-color:color-mix(in srgb, var(--card-accent) 30%, transparent);
  box-shadow:inset 0 -34px 48px rgba(0,0,0,.12), 0 5px 18px rgba(0,0,0,.12);
}

.winner-card:nth-child(2) { --card-image:url("assets/winner-alpine.jpg"); }
.winner-card:nth-child(3) { --card-image:url("assets/winner-jungle.jpg"); }
.winner-card:nth-child(4) { --card-image:url("assets/winner-desert.jpg"); }
.winner-card:nth-child(5) { --card-image:url("assets/winner-aurora.jpg"); }

.winner-card.is-found {
  background-image:
    linear-gradient(95deg, rgba(8,28,25,.94) 0%, rgba(18,42,34,.8) 49%, rgba(8,24,22,.32) 100%),
    var(--card-image);
}

.winner-card::before {
  z-index:3;
  height:3px;
  box-shadow:0 0 16px color-mix(in srgb, var(--card-accent) 40%, transparent);
}

.winner-number,
.winner-name,
.winner-meta,
.winner-details {
  position:relative;
  z-index:2;
}

.winner-coordinate,
.waiting-mark,
.winner-chest {
  z-index:2;
}

.winner-card .winner-name {
  color:#fff8eb;
  text-shadow:0 2px 10px rgba(0,0,0,.72);
}

.winner-card .winner-meta,
.winner-card .winner-details p {
  color:#e2ebe4;
  text-shadow:0 1px 7px rgba(0,0,0,.85);
}

.winner-card .winner-coordinate {
  background:rgba(3,18,19,.68);
  backdrop-filter:blur(3px);
}

.winner-card .waiting-mark {
  text-shadow:0 2px 12px rgba(0,0,0,.85);
}

/* Selectable illustrated maps. The artwork stays beneath the live grid. */
.map-art {
  --map-image:url("assets/maps/map-british-isles.jpg");
  background-color:#c8b58b;
  background-image:
    linear-gradient(rgba(232,214,169,.06), rgba(88,70,39,.08)),
    var(--map-image);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}

.map-art::before {
  z-index:1;
  opacity:.16;
}

.map-cell {
  border-color:rgba(10,43,43,.68);
  box-shadow:inset 0 0 0 1px rgba(248,229,183,.1);
}

.map-picker-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  margin:24px 0 11px;
  padding-top:20px;
  border-top:1px solid rgba(48,75,73,.16);
}

.map-picker-heading > span {
  color:#31575a;
  font:600 12px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.map-picker-heading p {
  margin:0;
  color:#73807b;
  font-size:11px;
}

.map-choice-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.map-choice-grid button {
  min-width:0;
  padding:0;
  overflow:hidden;
  color:#294b4e;
  text-align:left;
  border:1px solid #c4bdae;
  background:#eee7da;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.map-choice-grid button:hover {
  transform:translateY(-1px);
  border-color:#8b7959;
}

.map-choice-grid img {
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  opacity:.72;
  filter:saturate(.74) contrast(.92);
  transition:opacity .16s ease, filter .16s ease;
}

.map-choice-grid button > span {
  display:block;
  padding:8px 9px 9px;
}

.map-choice-grid b,
.map-choice-grid small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.map-choice-grid b {
  font:600 13px/1.05 var(--serif);
}

.map-choice-grid small {
  margin-top:4px;
  color:#7a817a;
  font:8px/1.1 var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.map-choice-grid button.is-selected {
  border-color:#b08136;
  box-shadow:0 0 0 2px rgba(176,129,54,.2), inset 0 -3px 0 #b08136;
  background:#f8f1e3;
}

.map-choice-grid button.is-selected img {
  opacity:1;
  filter:saturate(.92) contrast(1.02);
}

/* Card scenes are intentionally subdued so names and details remain primary. */
.winner-card {
  background-image:
    linear-gradient(95deg, rgba(4,19,20,.99) 0%, rgba(4,21,22,.95) 48%, rgba(4,19,20,.78) 100%),
    var(--card-image);
}

.winner-card.is-found {
  background-image:
    linear-gradient(95deg, rgba(6,24,23,.98) 0%, rgba(12,34,30,.92) 49%, rgba(5,20,20,.72) 100%),
    var(--card-image);
}

@media (max-width:1250px) {
  .map-choice-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width:560px) {
  .map-choice-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .map-picker-heading { align-items:flex-start; flex-direction:column; gap:5px; }
}

/* Saved presentation mode. */
.view-mode-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.view-mode-grid button {
  display:grid;
  gap:5px;
  min-width:0;
  padding:14px 15px;
  color:#294b4e;
  text-align:left;
  border:1px solid #c4bdae;
  background:#eee7da;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}

.view-mode-grid button:hover {
  transform:translateY(-1px);
  border-color:#8b7959;
}

.view-mode-grid b {
  font:600 18px/1 var(--serif);
}

.view-mode-grid span {
  color:#727d79;
  font-size:10px;
  line-height:1.35;
}

.view-mode-grid button.is-selected {
  color:#fff5df;
  border-color:#31575a;
  background:#31575a;
  box-shadow:inset 0 -3px 0 #d1a55a;
}

.view-mode-grid button.is-selected span { color:#cfddd8; }

/* Basic view removes illustration and decorative lighting while keeping gameplay intact. */
.basic-view.hunt-page {
  background:#152625;
  background-image:none;
}

.basic-view.config-page {
  background:#d9d2c5;
  background-image:none;
}

.basic-view .map-frame {
  background:#b9ae95;
  box-shadow:none;
}

.basic-view .map-art::before { display:none; }

.basic-view .discoveries {
  background:#0b2426;
  background-image:none;
  box-shadow:none;
}

.basic-view .winner-card,
.basic-view .winner-card.is-found {
  --card-accent:#c8b57e;
  background:#102b2d;
  background-image:none;
  box-shadow:none;
  border-color:rgba(217,224,204,.2);
}

.basic-view .winner-card::before { display:none; }
.basic-view .winner-card .winner-coordinate { backdrop-filter:none; }

.basic-view.config-page .settings-panel {
  background:#eee9df;
}

.basic-view .map-artwork-heading,
.basic-view .map-choice-grid {
  display:none;
}

/* Sixth map option: one locally stored custom image. */
.custom-map-choice {
  position:relative;
  min-width:0;
}

.map-choice-grid .custom-map-upload {
  width:100%;
  height:100%;
}

.custom-map-artwork {
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#d8d0c1;
}

.map-choice-grid .custom-map-preview {
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
}

.custom-map-preview[hidden],
.custom-map-placeholder[hidden],
.custom-map-remove[hidden] {
  display:none;
}

.custom-map-placeholder {
  display:grid;
  place-content:center;
  justify-items:center;
  gap:5px;
  width:100%;
  height:100%;
  color:#466164;
  background:
    linear-gradient(135deg, rgba(255,255,255,.32), transparent),
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(44,77,77,.05) 9px 10px);
}

.custom-map-placeholder i {
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  font:300 24px/1 var(--sans);
  border:1px solid #7d918d;
  border-radius:50%;
}

.custom-map-placeholder em {
  font:500 8px/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}

.map-choice-grid .custom-map-remove {
  position:absolute;
  z-index:5;
  top:7px;
  right:7px;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  padding:0;
  border:1px solid rgba(255,241,216,.55);
  border-radius:50%;
  background:rgba(43,24,22,.82);
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}

.custom-map-remove::before {
  content:"";
  width:8px;
  height:10px;
  border:1.5px solid #fff0d3;
  border-top:0;
  border-radius:0 0 2px 2px;
}

.custom-map-remove::after {
  content:"";
  position:absolute;
  top:7px;
  width:10px;
  height:1.5px;
  background:#fff0d3;
  box-shadow:2px -2px 0 -1px #fff0d3;
}

.custom-map-upload.is-loading {
  opacity:.55;
  cursor:wait;
  pointer-events:none;
}

/* Keep grid presets and custom dimensions together on one desktop row. */
.grid-size-controls {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:end;
  gap:12px;
}

.settings-panel .grid-size-controls .preset-grid {
  grid-template-columns:repeat(5, minmax(0, 1fr));
}

.grid-size-controls .preset-grid button {
  min-width:0;
  padding:12px 10px;
}

.grid-size-controls .preset-grid button b {
  font-size:18px;
  white-space:nowrap;
}

.grid-size-controls .preset-grid button span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.grid-size-controls .manual-grid {
  gap:7px;
  margin-top:0;
}

.grid-size-controls .manual-grid label {
  width:72px;
}

.grid-size-controls .manual-grid input {
  padding:9px 8px;
}

@media (max-width:700px) {
  .grid-size-controls { grid-template-columns:1fr; align-items:stretch; }
  .grid-size-controls .manual-grid { justify-content:flex-end; }
}