/* Reefward. Portrait first (bars top and bottom); wide screens get a side panel. */
:root {
  /* Stage 8 "Arcade Day" skin */
  --sea1: #36c6ec;
  --sea2: #0b74b5;
  --bg: #0b74b5;
  --panel: #1767a8;
  --panel-hi: #2a8fd8;
  --panel2: #12507f;
  --ink: #1b2a33;
  --text: #ffffff;
  --muted: #cfe9f7;
  --accent: #ffd34d;
  --btn-y1: #ffe066; --btn-y2: #f5b81c; --btn-y3: #b07a00;   /* yellow buttons */
  --btn-g1: #7ee36b; --btn-g2: #3fb53a; --btn-g3: #26801f;   /* green (main action) */
  --btn-b1: #2c78b8; --btn-b2: #1d5a92; --btn-b3: #0f3a63;   /* blue (secondary) */
  --danger: #ff6b5b;
  --btn: #2c78b8; --btn2: #1d5a92; --primary: #3fb53a;   /* used by the editor page */
  --font: system-ui, "Segoe UI", "Noto Sans", "Noto Sans SC", "Noto Sans JP", "PingFang SC",
          "Hiragino Sans", "Microsoft YaHei", "Yu Gothic UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--sea2);
  background: linear-gradient(180deg, var(--sea1), var(--sea2));
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#app {
  position: relative;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.hidden { display: none !important; }

/* ---------- Buttons: chunky, with a 3D bottom edge ---------- */
button {
  font: inherit; font-size: 15px; font-weight: 800;
  min-height: 44px; /* finger-sized */
  padding: 0 14px;
  border: 0; border-radius: 12px;
  background: linear-gradient(var(--btn-y1), var(--btn-y2));
  color: #3a2400;
  box-shadow: 0 4px 0 var(--btn-y3), 0 6px 10px rgba(0,0,0,0.18);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.1s;
  position: relative;
}
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-y3), 0 2px 4px rgba(0,0,0,0.18); }
button:disabled { opacity: 0.45; cursor: default; filter: grayscale(0.5); }
button.secondary {
  background: linear-gradient(var(--btn-b1), var(--btn-b2)); color: var(--text);
  box-shadow: 0 4px 0 var(--btn-b3), 0 6px 10px rgba(0,0,0,0.18);
}
button.secondary:active:not(:disabled) { box-shadow: 0 1px 0 var(--btn-b3); }
button.primary {
  background: linear-gradient(var(--btn-g1), var(--btn-g2)); color: #0d3a0a;
  box-shadow: 0 4px 0 var(--btn-g3), 0 6px 10px rgba(0,0,0,0.18);
}
button.primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--btn-g3); }
button.small { min-height: 36px; font-size: 14px; padding: 0 12px; }
button.big { width: 100%; min-height: 54px; font-size: 18px; margin: 8px 0 10px; display: flex;
             flex-direction: column; align-items: center; justify-content: center; }
button.big small { font-size: 12px; opacity: 0.8; font-weight: 600; }
button.on {
  background: linear-gradient(#ffffff, #ffe9a8); color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent), 0 4px 0 var(--btn-y3);
}
button:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* Tutorial: the button to press glows. */
.tut-pulse { animation: tut-pulse 1s ease-in-out infinite; }
@keyframes tut-pulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 4px 0 var(--btn-y3), 0 0 0 0 rgba(255,211,77,0.9); }
  50% { filter: brightness(1.15); box-shadow: 0 4px 0 var(--btn-y3), 0 0 0 8px rgba(255,211,77,0); }
}

.warn { color: #ffd0c8; font-size: 14px; min-height: 1.2em; margin: 6px 0; font-weight: 700; }
.note { color: var(--muted); font-size: 13px; margin: 4px 0 8px; }

/* ---------- Screens ---------- */
.screen { position: absolute; inset: 0; padding: inherit; }
#scr-menu, #scr-setup { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.menu-box, .setup-box { max-width: 420px; margin: 0 auto; padding: 24px 18px 30px; }
.menu-box { text-align: center; padding-top: 5vh; }
.logo { width: 200px; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.2)); }
.menu-box h1 {
  font-size: 46px; margin: 2px 0 0; letter-spacing: 0.04em; font-weight: 900; color: #fff;
  text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 0 6px 10px rgba(0,0,0,0.3);
}
.tagline { color: #fff; margin: 4px 0 22px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.ver { color: var(--muted); font-size: 12px; margin-top: 22px; }

.setup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.setup-head h2 { margin: 0; font-size: 24px; font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.lbl { display: block; font-size: 13px; color: #fff; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; opacity: 0.9; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; padding: 0 6px; background: linear-gradient(var(--btn-b1), var(--btn-b2)); color: #fff;
              box-shadow: 0 4px 0 var(--btn-b3); }
.seg button.on { background: linear-gradient(var(--btn-y1), var(--btn-y2)); color: #3a2400; box-shadow: 0 4px 0 var(--btn-y3), 0 0 0 2px #fff; }
.seat-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.seat-row .name { width: 64px; font-size: 15px; }
.seat-row .seg { flex: 1; }
.swatch { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--ink); flex: none; display: flex;
          align-items: center; justify-content: center; overflow: hidden; }
.swatch svg { width: 88%; height: 88%; display: block; }
.big-swatch { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 10px; border-width: 3px; }
.seed-row { display: flex; gap: 8px; }
.seed-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 20px; letter-spacing: 0.1em;
  padding: 0 12px; height: 44px; border-radius: 12px; border: 3px solid var(--ink);
  background: #fff; color: var(--ink); font-weight: 800; -webkit-user-select: text; user-select: text;
}
#btn-start { margin-top: 12px; background: linear-gradient(var(--btn-g1), var(--btn-g2)); color: #0d3a0a;
             box-shadow: 0 4px 0 var(--btn-g3), 0 6px 10px rgba(0,0,0,0.2); font-size: 20px; }

/* ---------- Game screen ---------- */
#scr-game {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top" "map" "bottom";
}
#top { grid-area: top; padding: 6px 10px 7px; background: linear-gradient(var(--panel-hi), var(--panel));
       box-shadow: 0 3px 0 rgba(0,0,0,0.18); z-index: 2; }
#top .row1 { display: flex; align-items: center; gap: 10px; font-size: 14px; }
#round { font-weight: 900; background: rgba(0,0,0,0.25); padding: 4px 10px; border-radius: 999px; }
#tide { color: #fff; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
#tide.alert { color: var(--accent); }
#chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px;
        background: rgba(0,0,0,0.25); font-size: 13px; font-weight: 800; border: 2px solid transparent; }
.chip .swatch { width: 20px; height: 20px; border-radius: 999px; border-width: 2px; }
.chip.current { border-color: var(--accent); background: rgba(0,0,0,0.4); }
.chip.dead { opacity: 0.45; text-decoration: line-through; }
.chip .hold { color: var(--accent); font-weight: 700; }

#mapwrap { grid-area: map; position: relative; min-height: 0; overflow: hidden; }
#board {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none; /* we handle pan and pinch ourselves */
  cursor: pointer;
}
.fab { position: absolute; right: 10px; bottom: 12px; width: 46px; height: 46px; padding: 0;
       border-radius: 23px; font-size: 22px; }
#toasts { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; flex-direction: column;
          align-items: center; gap: 6px; pointer-events: none; }
.toast { background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 12px; font-weight: 800;
         font-size: 14px; max-width: 100%; transition: opacity 0.4s; text-align: center;
         border: 3px solid var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,0.25); animation: toast-in 0.25s ease-out; }
@keyframes toast-in { from { transform: translateY(-8px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
#tooltip { position: absolute; pointer-events: none; background: rgba(27,42,51,0.94); padding: 6px 10px;
           border-radius: 10px; font-size: 13px; max-width: 240px; line-height: 1.35; font-weight: 600; z-index: 3; }

/* Tutorial coach card (bottom of the map) */
.coach { position: absolute; left: 10px; right: 64px; bottom: 12px; max-width: 520px; margin: 0 auto;
         background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 16px;
         padding: 10px 12px; box-shadow: 0 5px 0 rgba(0,0,0,0.25); z-index: 4; animation: toast-in 0.25s ease-out; }
.coach p { margin: 2px 0 8px; font-size: 15px; line-height: 1.35; font-weight: 600; }
.coach-step { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #1767a8; font-weight: 900; }
.coach-btns { display: flex; gap: 8px; justify-content: flex-end; }
.coach-btns button { min-height: 38px; }

#bottom { grid-area: bottom; background: linear-gradient(var(--panel-hi), var(--panel)); padding: 6px 8px 10px;
          box-shadow: 0 -3px 0 rgba(0,0,0,0.15); z-index: 2; }
#status { font-size: 14px; min-height: 2.5em; color: #fff; padding: 2px 4px 7px; line-height: 1.25; font-weight: 700; }
#status div:first-child { color: var(--accent); }
#status.bad div { color: #ffd0c8; }
.btns { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 7px; }
.btns button { padding: 0 4px; font-size: 14px; min-height: 50px; }
#btn-fast { grid-column: 4; }

/* ---------- Overlays ---------- */
.overlay { position: absolute; inset: 0; background: rgba(6,30,50,0.7); display: flex;
           align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.card { background: linear-gradient(var(--panel-hi), var(--panel)); border-radius: 20px; padding: 18px; width: 100%; max-width: 380px;
        max-height: 100%; overflow-y: auto; border: 3px solid var(--ink); box-shadow: 0 6px 0 rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.35);
        animation: card-in 0.22s ease-out; }
@keyframes card-in { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.card h2 { margin: 0 0 8px; text-align: center; font-size: 26px; font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.card p { margin: 6px 0 12px; line-height: 1.4; }
.card .row { display: flex; gap: 8px; }
.card .row button { flex: 1; }
.tap-card { text-align: center; }
#ov-pass { background: linear-gradient(180deg, var(--sea1), var(--sea2)); }
#result-reason { text-align: center; color: var(--muted); }
#result-table { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 15px; }
#result-table td, #result-table th { padding: 6px 4px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.2); font-weight: 700; }
#result-table th { color: var(--muted); font-weight: normal; font-size: 13px; }
#result-table td.num, #result-table th.num { text-align: right; }
#result-table .who { display: flex; align-items: center; gap: 6px; }
.help-card ol { padding-left: 20px; margin: 6px 0 10px; }
.help-card li { margin: 0 0 10px; line-height: 1.4; font-size: 14px; }

/* ---------- Wide layout: map left, panel right ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #scr-game {
    grid-template-columns: 1fr 340px;
    grid-template-rows: auto 1fr;
    grid-template-areas: "map top" "map bottom";
  }
  #top { padding: 16px 16px 8px; }
  #top .row1 { flex-wrap: wrap; }
  #tide { flex-basis: 100%; order: 3; }
  #chips { flex-direction: column; align-items: stretch; }
  .chip { font-size: 15px; padding: 6px 10px; }
  #bottom { padding: 8px 16px 16px; display: flex; flex-direction: column; }
  #status { min-height: 5em; font-size: 15px; }
  .btns { grid-template-columns: 1fr 1fr; }
  #btn-fast { grid-column: auto; }
}

/* Short phone in landscape: smaller bars. */
@media (max-height: 500px) and (orientation: landscape) {
  #top { padding: 3px 8px; }
  #chips { margin-top: 3px; }
  #status { min-height: 1.3em; padding-bottom: 3px; }
  .btns button { min-height: 40px; }
}

/* ---------- Stage 7: map select, ladder, map cards ---------- */
#scr-maps, #scr-ladder { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.list-box { max-width: 980px; margin: 0 auto; padding: 18px 14px 30px; }
.tabs { margin: 10px 0 4px; max-width: 420px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.map-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left;
  min-height: 0; padding: 8px; border-radius: 14px; gap: 2px; height: auto; color: var(--ink);
  background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,0.25); border: 2px solid var(--ink);
}
.map-card .note { color: #4b5d68; }
.map-card.on { box-shadow: inset 0 0 0 3px var(--accent); }
.map-card.locked { opacity: 0.75; cursor: default; }
.map-card:disabled { opacity: 0.75; }
.map-card .mini { width: 100%; height: 170px; border-radius: 10px; display: block; background: var(--sea2); margin-bottom: 4px; }
.map-card .note { margin: 0; font-size: 12px; }
.map-name { font-weight: 600; font-size: 15px; }
.shells { font-size: 13px; color: #b07a00; margin-top: 2px; }
.card-del {
  position: absolute; top: 12px; right: 12px; font-size: 12px; padding: 4px 8px; border-radius: 8px;
  background: rgba(11, 47, 66, 0.85); color: var(--text); cursor: pointer;
}
.ladder .map-card .mini { height: 130px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.row-btns button { flex: 1; min-width: 150px; }
.map-pick { display: flex; gap: 12px; align-items: center; background: rgba(0,0,0,0.2); border-radius: 14px; padding: 8px; }
.map-pick .mini { width: 110px; height: 130px; border-radius: 10px; background: var(--sea2); flex: none; }
.map-pick-text { flex: 1; min-width: 0; }
.map-pick-text .note { margin: 2px 0 8px; }
.result-ladder { margin: 6px 0 10px; text-align: center; color: var(--muted); font-size: 14px; }
.result-ladder .big-stars { color: var(--accent); font-size: 18px; font-weight: 600; }
@media (max-width: 420px) {
  .card-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .map-card .mini { height: 150px; }
  .ladder .map-card .mini { height: 110px; }
}

/* ---------- Stage 8: less motion when the device asks for it ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================================
   Stage 11 "Arcade Day v2" look: deeper glass panels, icon buttons, treasury row,
   tide cycle dots, player cards, nicer menu. Overrides the rules above.
   ===================================================================================== */
:root {
  --glass1: rgba(16, 58, 104, 0.96);
  --glass2: rgba(9, 37, 72, 0.97);
  --glass-line: rgba(255, 255, 255, 0.14);
  --good: #7ee36b;
  --bad: #ff8a7a;
}

/* Buttons: soft top shine on every chunky button */
button { border-radius: 14px; text-shadow: 0 1px 0 rgba(255,255,255,0.35); }
button::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 3px; height: 40%;
  border-radius: 10px 10px 18px 18px; background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
  pointer-events: none;
}
button.secondary, .seg button { text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
button.secondary::after { background: linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0)); }
button:disabled::after { display: none; }
button svg { width: 22px; height: 22px; display: block; flex: none; }

/* ---------- Game screen bars ---------- */
#top {
  background: linear-gradient(var(--glass1), var(--glass2));
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 4px 14px rgba(0, 20, 50, 0.35), inset 0 1px 0 rgba(255,255,255,0.12);
  border-radius: 0 0 18px 18px; padding: 8px 10px 9px;
}
#top .row1 { gap: 8px; }
#round, #tide {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 8px;
  border-radius: 999px; background: rgba(0,0,0,0.28); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  font-weight: 900; font-size: 14px;
}
#round svg, #tide .ti svg { width: 18px; height: 18px; color: var(--accent); display: block; }
#tide { flex: 1; min-width: 0; font-weight: 800; }
#tide .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
#tide .ti svg { color: #8fe3ff; }
#tide.alert { color: #fff; background: rgba(255, 120, 60, 0.35); box-shadow: inset 0 0 0 2px #ffb04d; }
#tide.alert .ti svg { color: #ffd34d; }
.tdots { display: inline-flex; gap: 3px; flex: none; margin-left: 2px; }
.tdots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.tdots i.hi { background: rgba(80, 200, 255, 0.55); }
.tdots i.now { box-shadow: 0 0 0 2px #fff; background: #ffd34d; }
.icon-btn { width: 40px; min-height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; }

#chips { gap: 6px; margin-top: 7px; }
.chip {
  padding: 3px 10px 3px 3px; gap: 6px; background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.08); box-shadow: inset 4px 0 0 var(--pc, transparent);
}
.chip .swatch { width: 24px; height: 24px; }
.chip .cp { color: var(--accent); }
.chip.current { border-color: var(--accent); background: rgba(255, 211, 77, 0.16);
                box-shadow: 0 0 0 3px rgba(255,211,77,0.25), inset 4px 0 0 var(--pc, transparent); }

#bottom {
  background: linear-gradient(var(--glass1), var(--glass2));
  border-top: 1px solid var(--glass-line);
  box-shadow: 0 -4px 14px rgba(0, 20, 50, 0.3), inset 0 1px 0 rgba(255,255,255,0.12);
  border-radius: 18px 18px 0 0; padding: 8px 8px 10px;
}
#status { min-height: 0; padding: 0 2px 8px; }
#status div:first-child { color: inherit; }
#status .msg { font-size: 14px; color: #e8f6ff; line-height: 1.3; padding: 2px 4px; }
#status.bad .msg { color: #ffd0c8; }
.treasury { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; min-height: 40px; }
.treasury.empty { display: none; }
.coin-big svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3)); }
.treasury .coins { font-size: 28px; font-weight: 900; color: #ffe066; margin-right: 6px; min-width: 1.4em;
                   text-shadow: 0 2px 0 rgba(0,0,0,0.35); line-height: 1; }
.treasury .stat { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
                  padding: 4px 8px; border-radius: 10px; background: rgba(0,0,0,0.25); min-width: 52px; }
.treasury .stat b { font-size: 16px; font-weight: 900; }
.treasury .stat small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; margin-top: 2px; font-weight: 700; }
.treasury .inc b { color: var(--good); }
.treasury .upk b { color: var(--bad); }
.treasury .nxt b { color: #fff; }
.treasury .nxt.bad { background: rgba(255, 70, 50, 0.45); box-shadow: inset 0 0 0 2px #ff8a7a; animation: tut-pulse 1s infinite; }

.btns { gap: 8px; }
.btns button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; padding: 0 6px; }
.btns .bi { display: flex; align-items: center; justify-content: center; flex: none; }
.btns .bi img { width: 34px; height: 40px; display: block; margin: -4px -2px -2px -4px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.btns .bl { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; }
.btns .bn { font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.btns .price { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 900; margin-top: 2px;
               background: rgba(0,0,0,0.16); border-radius: 999px; padding: 1px 7px 1px 2px; }
.btns .price svg { width: 16px; height: 16px; }
#btn-undo .bl, #btn-end .bl, #btn-fast .bl { align-items: center; }
#btn-end { font-size: 15px; }
#btn-end .bi { order: 2; }
#btn-end svg { width: 22px; height: 22px; }
.fab { display: flex; align-items: center; justify-content: center; }
.fab svg { width: 24px; height: 24px; color: #3a2400; }

/* Narrow phones: icons above the label so four buttons fit */
@media (max-width: 400px) {
  .btns button { flex-direction: column; gap: 1px; padding: 4px 3px; }
  .btns .bl { align-items: center; }
  .btns .bi img { margin: -6px 0 -4px; width: 30px; height: 34px; }
  #btn-end .bi { order: 0; }
  .btns .bn { font-size: 13px; }
  .treasury .stat { min-width: 0; padding: 4px 6px; }
}

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #top { border-radius: 0; padding: 16px 16px 8px; box-shadow: none; border-bottom: 0; }
  #bottom { border-radius: 0; box-shadow: none; border-top: 0; }
  #scr-game { background: linear-gradient(var(--glass1), var(--glass2)); }
  #mapwrap { box-shadow: 6px 0 18px rgba(0,20,50,0.35); z-index: 1; }
  #tide { flex-basis: 100%; }
  .chip { padding: 6px 12px 6px 6px; font-size: 15px; }
  .chip .cn { flex: 1; }
  .chip .swatch { width: 28px; height: 28px; }
  .btns button { min-height: 60px; font-size: 15px; }
}

/* ---------- Overlays ---------- */
.card { background: linear-gradient(var(--glass1), var(--glass2)); border: 2px solid rgba(255,255,255,0.18);
        box-shadow: 0 0 0 3px var(--ink), 0 8px 0 rgba(0,0,0,0.3), 0 20px 50px rgba(0,0,0,0.45); }
.overlay { background: rgba(4, 22, 40, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.toast { border-radius: 14px; box-shadow: 0 4px 0 rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.2); }

/* ---------- Menu ---------- */
#scr-menu {
  background:
    radial-gradient(120% 60% at 50% 18%, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #34c4ee 0%, #1a8fd0 45%, #0a5a98 100%);
}
#scr-menu::before {   /* soft wave lines in the background */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 20c15 0 15-8 30-8s15 8 30 8 15-8 30-8 15 8 30 8' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 120px 40px;
}
.menu-box { position: relative; padding-top: 2vh; }
#menu-scene { width: 300px; height: 210px; display: block; margin: 0 auto -10px; max-width: 100%; }
.menu-box h1 {
  font-size: 50px; letter-spacing: 0.03em;
  color: #fff7d6;
  background: linear-gradient(#fffbe8 30%, #ffd34d 75%, #f2a91c);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: none; filter: drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 8px 10px rgba(0,0,0,0.3));
}
.tagline { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.95; }
.menu-box button.big { flex-direction: row; gap: 12px; justify-content: flex-start; padding: 0 18px; text-align: left; }
.menu-box button.big .mi { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; }
.menu-box button.big .mi svg { width: 26px; height: 26px; }
.menu-box button.big .mt { display: flex; flex-direction: column; align-items: flex-start; }
.menu-box .menu-small { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.menu-box .menu-small button.big { font-size: 16px; padding: 0 12px; gap: 8px; }
/* keep the game screen inside the phone width */
#scr-game { grid-template-columns: minmax(0, 1fr); }
#top, #bottom, #mapwrap { min-width: 0; }
#chips { flex-wrap: wrap; }
.btns { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); }
.btns button { min-width: 0; }
#menu-scene {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #scr-game { grid-template-columns: minmax(0, 1fr) 340px; }
  .btns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
  #tide { height: auto; min-height: 32px; padding-top: 3px; padding-bottom: 3px; }
  #tide .tt { white-space: normal; font-size: 12.5px; line-height: 1.1; }
  .tdots i { width: 6px; height: 6px; }
}

/* =====================================================================================
   Stage 11 "RTS feel": dark metal panels, bevelled plates, rivets, coloured glow.
   Overrides everything above. Font: Bahnschrift (built into Windows 10/11), then system fonts
   (CJK fonts stay in the stack for Chinese / Japanese later).
   ===================================================================================== */
:root {
  --font: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, "Segoe UI", "Noto Sans",
          "Noto Sans SC", "Noto Sans JP", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Yu Gothic UI", sans-serif;
  --metal1: #2b323a; --metal2: #171c22; --metal3: #0d1014;
  --edge-hi: rgba(255,255,255,0.14); --edge-lo: rgba(0,0,0,0.7);
  --glow: #3fd0ff; --amber: #ffb340; --green: #5dff8a; --red: #ff5a4a;
  --text: #e8eef2; --muted: #9fb0bd; --accent: #ffc35a;
}
html, body { background: #0a0f15; }
body { letter-spacing: 0.02em; }

/* Metal plate look shared by panels */
#top, #bottom, .card, .map-pick, .chip, .treasury .stat, #round, #tide {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 2px, rgba(0,0,0,0.02) 2px 4px),
    linear-gradient(180deg, var(--metal1), var(--metal2));
}
#top, #bottom {
  border-radius: 0; border: 0;
  box-shadow: inset 0 1px 0 var(--edge-hi), inset 0 -1px 0 var(--edge-lo), 0 0 0 1px #05070a, 0 6px 16px rgba(0,0,0,0.6);
  position: relative;
}
#top::after, #bottom::before {   /* glowing seam toward the map */
  content: ""; position: absolute; left: 8px; right: 8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--glow), transparent); box-shadow: 0 0 10px var(--glow); opacity: 0.75;
}
#top::after { bottom: -1px; }
#bottom::before { top: -1px; }
/* rivets in the corners */
#top, #bottom { background-image:
    radial-gradient(circle at 8px 8px, #8a949c 0 2px, #2a3036 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 8px) 8px, #8a949c 0 2px, #2a3036 2.5px, transparent 3.5px),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 2px, rgba(0,0,0,0.02) 2px 4px),
    linear-gradient(180deg, var(--metal1), var(--metal2)); }

#round, #tide { border-radius: 4px; box-shadow: inset 0 1px 0 var(--edge-hi), inset 0 0 0 1px #05070a; text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em; }
#round svg { color: var(--amber); filter: drop-shadow(0 0 3px var(--amber)); }
#tide .ti svg { color: var(--glow); filter: drop-shadow(0 0 3px var(--glow)); }
#tide.alert { background: linear-gradient(180deg, #4a2414, #2a120a); box-shadow: inset 0 0 0 1px var(--amber), 0 0 12px rgba(255,140,40,0.45); }
.tdots i { background: #3a434c; border-radius: 1px; }
.tdots i.hi { background: #1f6f8f; }
.tdots i.now { background: var(--amber); box-shadow: 0 0 6px var(--amber); }

.chip { border-radius: 4px; border: 1px solid #05070a; box-shadow: inset 0 1px 0 var(--edge-hi), inset 3px 0 0 var(--pc, transparent); text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; }
.chip .swatch { border-radius: 3px; border-color: #05070a; }
.chip.current { border-color: var(--pc, var(--amber)); box-shadow: inset 0 1px 0 var(--edge-hi), 0 0 10px var(--pc, var(--amber)), inset 3px 0 0 var(--pc, transparent); }

/* Buttons: bevelled metal plates with a coloured light strip */
button {
  border-radius: 4px; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #3a434c, #1e242b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 0 rgba(0,0,0,0.5), 0 0 0 1px #05070a, 0 3px 0 #05070a, 0 6px 10px rgba(0,0,0,0.5);
}
button::after { left: 4px; right: 4px; top: auto; bottom: 3px; height: 2px; border-radius: 2px; background: var(--amber); box-shadow: 0 0 8px var(--amber); opacity: 0.9; }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 1px #05070a, 0 1px 0 #05070a; }
button.secondary { background: linear-gradient(180deg, #2c343c, #171c22); color: #cfd9e0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -2px 0 rgba(0,0,0,0.5), 0 0 0 1px #05070a, 0 3px 0 #05070a; }
button.secondary::after { background: var(--glow); box-shadow: 0 0 8px var(--glow); opacity: 0.6; }
button.primary, #btn-start { background: linear-gradient(180deg, #2f4a3a, #15241b); color: #d9ffe6; }
button.primary::after, #btn-start::after { background: var(--green); box-shadow: 0 0 10px var(--green); }
button.on { background: linear-gradient(180deg, #5a4520, #2a200e); color: #fff1d0; box-shadow: inset 0 0 0 1px var(--amber), 0 0 12px rgba(255,180,64,0.55), 0 3px 0 #05070a; }
button:disabled { opacity: 0.4; filter: grayscale(0.8); }
button.small { min-height: 34px; }
.icon-btn svg { color: var(--glow); filter: drop-shadow(0 0 4px var(--glow)); }
.fab { background: radial-gradient(circle at 40% 35%, #4a545e, #1a1f25); border-radius: 50%; }
.fab::after { display: none; }
.fab svg { color: var(--glow); filter: drop-shadow(0 0 4px var(--glow)); }
.seg button { background: linear-gradient(180deg, #2c343c, #171c22); }
.seg button.on { background: linear-gradient(180deg, #5a4520, #2a200e); }

/* Bottom bar: treasury readout like a console display */
.treasury .coins { color: var(--amber); text-shadow: 0 0 10px rgba(255,180,64,0.6); font-variant-numeric: tabular-nums; }
.treasury .stat { border-radius: 3px; box-shadow: inset 0 0 0 1px #05070a, inset 0 1px 0 var(--edge-hi); }
.treasury .stat small { color: var(--muted); }
.treasury .inc b { color: var(--green); text-shadow: 0 0 6px rgba(93,255,138,0.5); }
.treasury .upk b { color: var(--red); text-shadow: 0 0 6px rgba(255,90,74,0.5); }
.treasury .nxt.bad { background: #3a1210; box-shadow: inset 0 0 0 1px var(--red), 0 0 12px rgba(255,90,74,0.6); }
#status .msg { color: #cfd9e0; text-transform: none; letter-spacing: 0.01em; }
.btns .price { background: rgba(0,0,0,0.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.btns .bi img { filter: drop-shadow(0 0 3px rgba(255,190,110,0.5)); }

/* Overlays and cards */
.overlay { background: rgba(3,6,10,0.78); }
.card { border-radius: 6px; border: 1px solid #05070a; box-shadow: inset 0 1px 0 var(--edge-hi), 0 0 0 1px #3a434c, 0 0 24px rgba(63,208,255,0.18), 0 20px 50px rgba(0,0,0,0.6); }
.card h2, .setup-head h2 { text-transform: uppercase; letter-spacing: 0.08em; color: #f2f6f8; text-shadow: 0 0 12px rgba(63,208,255,0.45); }
.toast { background: linear-gradient(180deg, #2b323a, #171c22); color: var(--text); border: 1px solid var(--glow); border-radius: 4px; box-shadow: 0 0 12px rgba(63,208,255,0.4), 0 6px 14px rgba(0,0,0,0.5); }
.coach { background: linear-gradient(180deg, #2b323a, #171c22); color: var(--text); border: 1px solid var(--glow); border-radius: 6px; box-shadow: 0 0 16px rgba(63,208,255,0.35); }
.coach-step { color: var(--glow); }
#tooltip { background: rgba(10,14,18,0.95); border: 1px solid #3a434c; border-radius: 4px; }
.lbl { color: var(--muted); }
.map-card { background: linear-gradient(180deg, #2b323a, #171c22); color: var(--text); border: 1px solid #05070a; border-radius: 4px; }
.map-card .note { color: var(--muted); }

/* Screens behind menus: dusk sea */
#scr-menu, #scr-setup, #scr-maps, #scr-ladder, #ov-pass {
  background: radial-gradient(120% 70% at 50% 20%, #2a3a52 0%, #121a26 55%, #070a10 100%);
}
#scr-menu::before { opacity: 0.06; }
.menu-box h1 {
  font-size: 54px; letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #c9d3da 45%, #6b7782 55%, #dfe7ec 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #05070a;
  filter: drop-shadow(0 0 12px rgba(63,208,255,0.55)) drop-shadow(0 4px 0 #05070a);
}
.tagline { color: var(--amber); text-shadow: 0 0 10px rgba(255,180,64,0.6); letter-spacing: 0.2em; }
.menu-box button.big .mi svg { filter: drop-shadow(0 0 4px currentColor); }
#btn-ladder .mi, #btn-new .mi, #btn-continue .mi { color: var(--amber); }
.menu-box .secondary .mi { color: var(--glow); }
#menu-scene { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
                      mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #scr-game { background: linear-gradient(180deg, var(--metal1), var(--metal2)); }
  #mapwrap { box-shadow: 0 0 0 1px #05070a, 4px 0 0 #2a3036, 8px 0 18px rgba(0,0,0,0.6); }
}

/* ---------- Stage 11: daylight menus (brighter), metal kept but lighter ---------- */
#scr-menu, #scr-setup, #scr-maps, #scr-ladder {
  background:
    radial-gradient(90% 45% at 50% 12%, rgba(255,250,230,0.85) 0%, rgba(255,250,230,0) 70%),
    linear-gradient(180deg, #9fd6f5 0%, #5fb1e0 38%, #2f86c2 70%, #1d5f93 100%);
}
#scr-menu::before { opacity: 0.22; }
#menu-scene { filter: brightness(1.45) saturate(1.25) contrast(1.05); }
.menu-box h1 { filter: drop-shadow(0 0 10px rgba(255,255,255,0.6)) drop-shadow(0 4px 0 #1a2a38); }
.tagline { color: #fff3d6; text-shadow: 0 2px 4px rgba(0,40,80,0.6); }
.ver, #scr-menu .note { color: #e8f4fb; text-shadow: 0 1px 2px rgba(0,40,80,0.6); }
#scr-menu button, #scr-setup button, #scr-maps button, #scr-ladder button {
  background: linear-gradient(180deg, #6b7d8b, #46545f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.35), 0 0 0 1px #1a242c, 0 3px 0 #1a242c, 0 6px 12px rgba(0,30,60,0.35);
}
#scr-menu button.primary, #scr-setup #btn-start { background: linear-gradient(180deg, #4f9a63, #2c6a3d); color: #f0fff4; }
#scr-menu button.primary::after { background: #9dffb8; box-shadow: 0 0 10px #5dff8a; }
#scr-setup .seg button.on, #scr-maps .seg button.on { background: linear-gradient(180deg, #b8862c, #7a5413); color: #fff8e6; }
#btn-quick { min-height: 70px; font-size: 22px; }
#btn-quick .mi { color: #eaffef; }
#scr-setup .lbl, #scr-maps .note, #scr-ladder .note { color: #f2f9fd; text-shadow: 0 1px 2px rgba(0,40,80,0.6); }
#scr-setup .setup-head h2, #scr-maps h2, #scr-ladder h2 { text-shadow: 0 2px 4px rgba(0,40,80,0.6), 0 0 12px rgba(255,255,255,0.4); }
.map-pick { background: rgba(10,30,50,0.35); }

/* ---------- Stage 13: picture How to play ---------- */
.howto { max-width: 520px; }
.howto-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.howto-head h2 { text-align: left; margin-bottom: 6px; }
.howto-step { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
#howto-canvas { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 6px; background: #0a1c2c;
                box-shadow: inset 0 0 0 1px #05070a, 0 0 0 1px #3a434c; touch-action: pan-y; cursor: pointer; }
.howto h3 { margin: 10px 0 4px; font-size: 19px; color: var(--amber); text-transform: uppercase; letter-spacing: 0.05em; }
#howto-text { margin: 0 0 8px; min-height: 4.2em; font-size: 16px; line-height: 1.4; color: var(--text); }
.howto-nav { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.howto-nav > button { width: 56px; min-height: 44px; font-size: 26px; padding: 0; flex: none; }
#howto-dots { flex: 1; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
#howto-dots .dot { width: 12px; height: 12px; min-height: 0; padding: 0; border-radius: 50%; background: #3a434c; box-shadow: none; }
#howto-dots .dot::after { display: none; }
#howto-dots .dot.on { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.all-rules { margin: 4px 0 6px; color: var(--muted); }
.all-rules summary { cursor: pointer; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 0; }
.all-rules ol { color: var(--text); }

/* ---------- Stage 13: language picker ---------- */
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lang-grid button { text-transform: none; letter-spacing: 0.01em; min-height: 40px; font-size: 15px; }

/* Language-specific fonts: the right Chinese / Japanese / Korean glyphs. Bahnschrift has no CJK. */
:lang(ja) { --font: "Bahnschrift", "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif; }
:lang(ko) { --font: "Bahnschrift", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
:lang(zh-Hant) { --font: "Bahnschrift", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; }
:lang(zh-Hans) { --font: "Bahnschrift", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; }
html:lang(ja) body, html:lang(ko) body, html:lang(zh-Hant) body, html:lang(zh-Hans) body { font-family: var(--font); letter-spacing: 0; }
html:lang(ja) button, html:lang(ko) button, html:lang(zh-Hant) button, html:lang(zh-Hans) button,
html:lang(ja) .chip, html:lang(ko) .chip, html:lang(zh-Hant) .chip, html:lang(zh-Hans) .chip { letter-spacing: 0.02em; }
/* Long words (German, Russian): allow wrapping instead of cutting */
button, .chip, .bn { overflow-wrap: anywhere; hyphens: auto; }
#howto-canvas { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .howto { max-width: 600px; } }

/* ---------- Stage 13: long words in other languages ---------- */
button, .chip, .bn { overflow-wrap: break-word; }
.menu-box .menu-small button.big { font-size: 15px; letter-spacing: 0.02em; padding: 0 10px; }
.menu-box .menu-small button.big .mt { min-width: 0; hyphens: auto; -webkit-hyphens: auto; }
.btns button { letter-spacing: 0.02em; }
.btns .bn { white-space: normal; text-align: center; line-height: 1.05; font-size: 13px; hyphens: auto; -webkit-hyphens: auto; max-width: 100%; }
.btns .bl { align-items: center; }
#btn-undo .bn, #btn-end .bn, #btn-fast .bn { font-size: 13px; }
.seg button { letter-spacing: 0.02em; padding: 0 4px; }
.seg button.on, #scr-setup .seg button.on, #scr-maps .seg button.on, #ov-settings .seg button.on,
.lang-grid button.on { color: #fff8e6; text-shadow: 0 1px 0 #000; background: linear-gradient(180deg, #8a6420, #4a340c); }
#ov-settings .seg button { color: #e8eef2; }
.menu-box .menu-small button.big .mt { overflow: hidden; }
.btns .bl { overflow: hidden; min-width: 0; }
/* never break inside a word on buttons; the fit code shrinks the font instead */
button .mt, button .bn, button .mt span { overflow-wrap: normal; word-break: keep-all; hyphens: manual; -webkit-hyphens: manual; }
/* Stage 13: grids must never grow wider than the screen (long German/Russian words) */
.menu-box .menu-small { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.menu-box .menu-small button.big { min-width: 0; }
/* Review 0.13.1: help notes on light screens were too faint to read */
#scr-setup .note, #scr-setup .map-pick-text .note { color: #14303f; text-shadow: 0 1px 0 rgba(255,255,255,0.35); }
#scr-ladder :not(.map-card) > .note, #scr-maps :not(.map-card) > .note {
  background: rgba(8, 28, 48, 0.55); color: #fff; text-shadow: none; padding: 6px 10px; border-radius: 8px;
}
#scr-ladder .note:empty, #scr-maps .note:empty { display: none; }
.map-card.locked:active { transform: none; }
.btns button, .btns .bn { letter-spacing: 0; }   /* more room for long words like LIGHTHOUSE */
/* New version banner (src/ui/pwa.js) */
#update-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 50; max-width: calc(100% - 32px); padding: 10px 16px; font-size: 14px; }
/* Stage 15: "YOU" tag on your own player chip (pill in your colour) */
.chip.me { border-color: var(--pc); }
.chip .you { background: var(--pc); color: #111; font-size: 11px; font-weight: 900; line-height: 1;
  padding: 3px 6px; border-radius: 999px; letter-spacing: 0.04em; text-shadow: none; }
.chip.me.current { border-color: var(--accent); }
/* About section under the menu (players + search engines) */
.about { max-width: 520px; margin: 18px auto 24px; padding: 14px 16px; text-align: left;
  background: rgba(8, 28, 48, 0.55); border-radius: 12px; color: #eef6fb; }
.about h2 { font-size: 17px; margin: 0 0 8px; letter-spacing: 0.02em; }
.about p { font-size: 14px; line-height: 1.45; margin: 0 0 8px; }
.about p:last-child { margin-bottom: 0; }
.about, .about h2, .about p { letter-spacing: normal; text-transform: none; font-family: inherit; }