:root{
  --ink: #2b1c10;
  --gold: #d7b26a;
  --gold-2: #b68a3a;
  --paper: #e7d3a5;
  --paper-2: #d9bf8a;
  --shadow: rgba(0,0,0,.45);
  --ui-shadow: 0 14px 30px rgba(0,0,0,.35);
  --radius: 10px;

  /* GAME HUD COLORS */
  --hud-bg: rgba(10, 12, 18, 0.78);
  --hud-bg-2: rgba(10, 12, 18, 0.62);
  --hud-line: rgba(255, 255, 255, 0.12);
  --hud-text: rgba(255, 244, 220, 0.92);
  --hud-text-dim: rgba(255, 244, 220, 0.78);
  --hud-glow: 0 18px 46px rgba(0,0,0,.55);

  /* RIGHT HUD */
  --side-collapsed: 66px;
  --side-expanded: 340px;

  /* HUD spacing */
  --hud-pad: 18px;
  --bottom-bar-h: 90px; /* ✅ reserve enough for wrap so rail/drawer never clip */
  --hud-gap: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color: var(--ink);
  overflow:hidden;

  background:
    radial-gradient(1200px 700px at 50% 35%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(900px 600px at 20% 70%, rgba(0,0,0,.10), transparent 55%),
    linear-gradient(180deg, #b7893c, #6a4a1f);

  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ====== BACKGROUND MAP LAYER ====== */
.bg{
  position: fixed;
  inset: 0;
  z-index: 0;

  background-image: url("assets/table-of-nations_menu_bg.png");
  background-size: cover;
  background-position: center;

  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
  isolation: isolate;
}

/* vignette + depth + STATIC grain */
.bg::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;

  background:
    /* your depth/vignette */
    radial-gradient(900px 520px at 50% 18%, rgba(0,0,0,.10), transparent 60%),
    radial-gradient(1200px 900px at 50% 70%, rgba(0,0,0,.28), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.25)),

    /* STATIC film grain-ish speckle (subtle) */
    repeating-radial-gradient(circle at 12% 22%, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 68% 78%, rgba(0,0,0,.040) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 42% 58%, rgba(0,0,0,.030) 0 1px, transparent 1px 3px);

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    240px 240px,
    280px 280px,
    220px 220px;

  mix-blend-mode: multiply;
  opacity: .85;
}

/* STATIC hex grid + scanlines */
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image:
    /* HEX GRID (SVG) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23d7b26a' stroke-opacity='0.15' stroke-width='1'%3E%3Cpath d='M30 2 L60 18 L60 50 L30 66 L0 50 L0 18 Z'/%3E%3Cpath d='M90 2 L120 18 L120 50 L90 66 L60 50 L60 18 Z'/%3E%3Cpath d='M60 50 L90 66 L90 98 L60 114 L30 98 L30 66 Z'/%3E%3C/g%3E%3C/svg%3E"),

    /* scanlines (very faint) */
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0px, rgba(255,255,255,.022) 1px, transparent 2px, transparent 7px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.018) 0px, rgba(0,0,0,.018) 1px, transparent 2px, transparent 9px);

  background-size:
    380px 330px,   /* hex size */
    100% 100%,
    100% 100%;

  background-position: center;
  background-repeat: repeat;

  mix-blend-mode: overlay;
  opacity: .40;
}

@keyframes tonGrain{
  0%   { background-position: 0 0, 0 0, 0 0, 0 0,  0 0,  0 0,  0 0; }
  20%  { background-position: 6px 12px, 0 0, 0 0, 0 0,  8px 3px,  2px 10px, 12px 6px; }
  40%  { background-position: 12px 6px, 0 0, 0 0, 0 0,  4px 11px, 14px 2px,  6px 13px; }
  60%  { background-position: 3px 15px, 0 0, 0 0, 0 0,  10px 7px,  6px 14px, 1px 9px; }
  80%  { background-position: 14px 2px, 0 0, 0 0, 0 0,  2px 12px,  9px 4px, 15px 1px; }
  100% { background-position: 0 0, 0 0, 0 0, 0 0,  0 0,  0 0,  0 0; }
}

/* App root */
#app{
  position: relative;
  z-index: 1;
  height: 100%;
  overflow: hidden;
}

/* ====== SHARED SCENE LAYOUT ====== */
.wrap{
  position: relative;
  height: 100%;
  width: min(1100px, 92vw);
  margin: 0 auto;

  display:flex;
  flex-direction:column;
  align-items:center;

  justify-content:flex-start;
  text-align:center;

  padding-top: 48px;
  padding-bottom: 96px;
  overflow-y: auto;
}

/* ====== TITLE ====== */
.title{
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 4.5vw, 4.2rem);
  line-height: 1.05;
  margin: 0 0 10px 0;

  color: var(--gold);
  text-shadow:
    0 2px 0 rgba(0,0,0,.20),
    0 8px 20px rgba(0,0,0,.25);
}

.subtitle{
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: clamp(1.0rem, 1.6vw, 1.25rem);
  color: rgba(255, 244, 220, .92);
  letter-spacing: .02em;
  margin: 0 0 36px 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  position: relative;

  display:inline-flex;
  gap: 14px;
  align-items:center;
  justify-content:center;
}
.subtitle::before,
.subtitle::after{
  content:"";
  width: clamp(40px, 8vw, 120px);
  height: 1px;
  background: rgba(255, 236, 200, .55);
  box-shadow: 0 1px 10px rgba(0,0,0,.25);
}

/* ====== MENU / BUTTONS ====== */
.menu{
  width: min(520px, 92vw);
  display:flex;
  flex-direction:column;
  gap: 18px;
  align-items: stretch;
  margin-top: 6px;
}

.btn{
  appearance:none;
  border: 1px solid rgba(60, 35, 16, .55);
  border-radius: var(--radius);
  cursor:pointer;
  padding: 18px 20px;

  font-family: "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  font-size: clamp(1.0rem, 1.5vw, 1.2rem);
  color: #2a1a0f;

  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)),
    radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.25), transparent 65%),
    linear-gradient(180deg, var(--paper), var(--paper-2));

  box-shadow:
    0 10px 0 rgba(0,0,0,.10),
    var(--ui-shadow);

  position: relative;
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid rgba(70, 40, 18, .28);
  pointer-events:none;
}
.btn.is-dark{
  color: rgba(255, 235, 195, .95);
  border-color: rgba(255, 220, 150, .25);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.12), transparent 70%),
    linear-gradient(180deg, #855e2f, #cfa753);
  box-shadow:
    0 10px 0 rgba(0,0,0,.18),
    0 18px 42px rgba(0,0,0,.45);
}
.btn.is-dark::before{ border-color: rgba(255, 230, 190, .14); }

.btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow:
    0 12px 0 rgba(0,0,0,.12),
    0 22px 52px rgba(0,0,0,.45);
}
.btn:active{
  transform: translateY(1px);
  box-shadow:
    0 7px 0 rgba(0,0,0,.14),
    0 14px 30px rgba(0,0,0,.35);
}
.btn:focus-visible{
  outline: 3px solid rgba(255, 226, 160, .55);
  outline-offset: 3px;
}

/* ====== “PARCHMENT PANEL” FOR SUBPAGES ====== */
.panel{
  width: min(760px, 92vw);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)),
    radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.18), transparent 70%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  border: 1px solid rgba(60, 35, 16, .50);
  border-radius: calc(var(--radius) + 2px);
  box-shadow:
    0 12px 0 rgba(0,0,0,.10),
    0 22px 52px rgba(0,0,0,.45);
  padding: 26px 26px 20px;
  text-align:left;
  position: relative;

  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.panel::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(70, 40, 18, .22);
  pointer-events:none;
  z-index: 0;
}
.panel > *{ position: relative; z-index: 1; }

.panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 14px;
  padding: 6px 0 14px;
}
.panel-title{
  font-family:"Cinzel", serif;
  text-transform: uppercase;
  letter-spacing:.14em;
  font-weight:700;
  margin:0;
}
.panel-sub{
  font-family:"IM Fell English", serif;
  font-style: italic;
  margin: 2px 0 0 0;
  opacity:.85;
}

.panel::-webkit-scrollbar{ width: 10px; }
.panel::-webkit-scrollbar-track{ background: rgba(0,0,0,.08); }
.panel::-webkit-scrollbar-thumb{
  background: rgba(120,80,30,.35);
  border-radius: 6px;
}
.panel::-webkit-scrollbar-thumb:hover{ background: rgba(120,80,30,.55); }

.row{
  padding: 10px 0 4px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.note{
  font-family:"IM Fell English", serif;
  font-size: 1.05rem;
  opacity:.9;
  margin: 8px 6px 0;
}

/* ====== FOOTER LINKS ====== */
.footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 2;

  display:flex;
  justify-content:center;
  gap: 44px;

  font-family: "IM Fell English", serif;
  font-size: 1.05rem;
  color: rgba(255, 244, 220, .86);
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
  padding: 0 12px;
  pointer-events:auto;
}
.footer a{
  color: inherit;
  text-decoration: none;
  opacity: .95;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 120ms ease, opacity 120ms ease;
}
.footer a:hover{
  background: rgba(0,0,0,.18);
  opacity: 1;
}
.footer .sep{ opacity: .45; user-select:none; }

/* ====== MODAL ====== */
.modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.modal{ width: min(720px, 92vw); }
.modal .panel{ margin: 0; }
.modal-close{
  border: none;
  background: transparent;
  font-family:"Cinzel", serif;
  letter-spacing:.12em;
  text-transform: uppercase;
  cursor:pointer;
  padding: 10px 12px;
  border-radius: 10px;
}
.modal-close:hover{ background: rgba(0,0,0,.08); }

/* ====== INPUT (PARCHMENT STYLE) ====== */
.input{
  appearance:none;
  border: 1px solid rgba(60, 35, 16, .45);
  border-radius: 8px;
  padding: 12px 14px;

  font-family: "Cinzel", serif;
  letter-spacing: .12em;
  text-transform: uppercase;

  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.15);
}
.input::placeholder{ color: rgba(60,35,16,.55); }
.input:focus{
  outline: 3px solid rgba(255, 226, 160, .55);
  outline-offset: 2px;
}

/* ====== TOPBAR / PILL (kept) ====== */
.topbar{
  display:flex; gap:12px; align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background: rgba(10, 14, 22, 0.9);
  position: sticky; top:0;
  z-index:10;
}
.pill{
  padding:6px 10px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  background:rgba(255,255,255,0.06);
}

/* Min button */
.btn-min{
  cursor:pointer; user-select:none;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color: inherit;
}
.btn-min:hover{ background:rgba(255,255,255,0.10); }

/* ====== HOVER CARD (kept for non-game scenes) ====== */
.hoverCard{
  position:absolute; pointer-events:none;
  min-width:180px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(8,10,14,0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  font-size:13px;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
  z-index:20;
}
.hoverCard.show{ opacity:1; transform: translateY(0); }
.hoverTitle{ font-weight:700; margin-bottom:6px; }
.hoverMeta{ opacity:0.9; line-height:1.35; }

@media (max-width: 520px){
  .subtitle{ gap: 10px; }
  .menu{ gap: 14px; }
  .btn{ padding: 16px 16px; }
  .footer{ gap: 14px; flex-wrap:wrap; bottom: 10px; }
  .footer .sep{ display:none; }
  .panel{ max-height: calc(100vh - 140px); }
}

/* =========================
   GAME MODE (FULL SCREEN MAP)
   ========================= */

body.is-game{
  overflow: hidden;
  background: rgba(10,14,22,0.95);
}
body.is-game .bg{ display: none; }
body.is-game .footer{ display: none; }

body.is-game .wrap{
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
}

/* Full-screen map stage */
.ton-stage{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: rgba(10,14,22,0.95);
  z-index: 10;
}

.ton-canvas{
  width: 100%;
  height: 100%;
  display: block;
}

/* HUD overlay layer */
.ton-hud{
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  padding: var(--hud-pad);
}

/* Map hover tooltip (disabled in game mode below) */
.ton-hover-card{
  position:absolute;
  pointer-events:none;
  min-width:180px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(8,10,14,0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  font-size:13px;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
  z-index: 30;
}
.ton-hover-card.show{ opacity:1; transform: translateY(0); }
.ton-hover-title{ font-weight:700; margin-bottom:6px; color: rgba(255,255,255,0.95); }
.ton-hover-meta{ opacity:0.9; line-height:1.35; color: rgba(255,255,255,0.90); }

/* ✅ Remove tile hover tooltip in game */
body.is-game .ton-hover-card{ display:none !important; }

/* =========================
   FRAME HUD (RIGHT RAIL + DRAWER + BOTTOM BAR)
   ========================= */

/* Right hover rail (icons) */
.ton-rail{
  position:absolute;
  top: var(--hud-pad);
  right: var(--hud-pad);

  width: 56px;

  border-radius: 18px;
  border: 1px solid var(--hud-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(140% 120% at 15% 5%, rgba(255,255,255,.08), transparent 55%),
    var(--hud-bg);

  box-shadow: var(--hud-glow);
  backdrop-filter: blur(12px);
  pointer-events: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
}

/* Rail buttons (slightly smaller) */
.ton-rail-btn{
  appearance:none;
  cursor:pointer;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--hud-text);
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, filter 120ms ease;
}
.ton-rail-btn:hover{
  background: rgba(255,255,255,0.10);
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.ton-rail-btn.is-active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    linear-gradient(180deg, rgba(207,167,83,.55), rgba(133,94,47,.35));
  border-color: rgba(255, 220, 150, .35);
}

/* Slide-out drawer */
.ton-drawer{
  position:absolute;
  top: var(--hud-pad);
  right: calc(var(--hud-pad) + 56px + 10px);

  width: min(var(--side-expanded), 92vw);

  border-radius: 18px;
  border: 1px solid var(--hud-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    radial-gradient(140% 120% at 15% 5%, rgba(255,255,255,.09), transparent 55%),
    var(--hud-bg);

  box-shadow: var(--hud-glow);
  backdrop-filter: blur(12px);
  overflow: hidden;

  pointer-events: auto;
  display: flex;
  flex-direction: column;

  transform: translateX(18px);
  opacity: 0;
  visibility: hidden;
  transition: transform 160ms ease, opacity 160ms ease, visibility 160ms ease;
}
.ton-drawer.is-open{
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.ton-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px 9px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.ton-drawer-title{
  font-family: "Cinzel", serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .84rem;
  color: var(--hud-text);
}
.ton-drawer-close{
  appearance:none;
  cursor:pointer;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--hud-text);
}
.ton-drawer-close:hover{ background: rgba(255,255,255,0.10); }

.ton-drawer-body{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 10px 12px;
}
.ton-drawer-body::-webkit-scrollbar{ width: 10px; }
.ton-drawer-body::-webkit-scrollbar-track{ background: rgba(0,0,0,.15); }
.ton-drawer-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border-radius: 6px;
}
.ton-drawer-body::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.24); }

/* Panels inside drawer */
.ton-panel{ display:none; }
.ton-panel.is-active{ display:block; }

.ton-kv{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
}
.ton-k{
  font-family: "Cinzel", serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .73rem;
  color: var(--hud-text-dim);
}
.ton-v{
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: 1.0rem;
  color: var(--hud-text);
  text-align: right;
  max-width: 70%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ton-divider{
  height: 1px;
  margin: 10px 0;
  background: rgba(255,255,255,0.10);
}
.ton-small{
  font-family: "IM Fell English", serif;
  font-style: italic;
  color: var(--hud-text-dim);
  line-height: 1.3;
  font-size: .93rem;
}

/* ✅ shrink buttons inside drawer (these inherit base .btn) */
.ton-drawer .btn{
  padding: 12px 14px !important;
  font-size: .90rem !important;
  letter-spacing: .14em !important;
  border-radius: 12px !important;
  box-shadow:
    0 8px 0 rgba(0,0,0,.14),
    0 14px 30px rgba(0,0,0,.32) !important;
}
.ton-drawer .btn:hover{
  box-shadow:
    0 10px 0 rgba(0,0,0,.16),
    0 18px 40px rgba(0,0,0,.40) !important;
}
.ton-drawer .btn:active{
  box-shadow:
    0 6px 0 rgba(0,0,0,.16),
    0 12px 26px rgba(0,0,0,.34) !important;
}

/* =========================
   Bottom command bar
   ✅ FIX: restore centered vertical alignment inside each column
   ========================= */
.ton-bottombar{
  position: absolute;
  left: var(--hud-pad);
  right: var(--hud-pad);
  bottom: var(--hud-pad);

  min-height: var(--bottom-bar-h);

  border-radius: 18px;
  border: 1px solid var(--hud-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    radial-gradient(140% 120% at 10% 10%, rgba(255,255,255,.09), transparent 55%),
    var(--hud-bg-2);
  box-shadow: var(--hud-glow);
  backdrop-filter: blur(12px);

  pointer-events: auto;

  display: grid;
  grid-template-columns: 1.2fr 1.6fr 1.6fr;
  gap: 12px;

  /* ✅ key: keep rows centered vertically like before */
  align-items: center;

  padding: 12px 14px;
}

/* Left column (brand): center vertically */
.ton-brand{
  min-width: 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self: stretch; /* gives flex a height to center within */
}
.ton-brand-title{
  font-family: "Cinzel", serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .86rem;
  color: var(--hud-text);
}
.ton-brand-sub{
  font-family:"IM Fell English", serif;
  font-style: italic;
  font-size: .95rem;
  color: var(--hud-text-dim);
  opacity: .95;
  margin-top: 4px;
  line-height: 1.15;
}

/* Middle column container: center vertically */
.ton-bottom-mid{
  min-width: 0;
  display:flex;
  flex-direction:column;
  justify-content:center;   /* ✅ centers the whole block vertically */
  align-self: stretch;      /* ✅ lets it have full cell height */
  gap: 10px;
}

/* Resources line */
.ton-res{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--hud-text);
  font-family: "Cinzel", serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .72rem;
  width: fit-content;
  max-width: 100%;
}

/* Modes row */
.ton-modes{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  margin-top: 0; /* ✅ remove top bias so block centers nicely */
}
.ton-mode-help{
  margin-top: 6px; /* slightly tighter */
  font-family:"IM Fell English", serif;
  font-style: italic;
  color: var(--hud-text-dim);
  opacity: .95;
}

/* Chips */
.ton-chip{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--hud-text);
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: "Cinzel", serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .72rem;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.ton-chip:hover{ background: rgba(255,255,255,0.10); transform: translateY(-1px); }
.ton-chip.is-active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    linear-gradient(180deg, rgba(207,167,83,.55), rgba(133,94,47,.35));
  border-color: rgba(255, 220, 150, .35);
}

/* Right column (buttons): center vertically + right aligned */
.ton-bottom-right{
  display:flex;
  align-items:center;       /* ✅ centers buttons vertically */
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
  align-self: stretch;      /* ✅ full cell height for centering */
}

/* CTA row */
.ton-cta-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 0;            /* ✅ remove top bias */
}

/* tighten .btn inside HUD bottom bar */
.ton-bottombar .btn{
  padding: 12px 14px;
  font-size: .9rem;
  box-shadow:
    0 8px 0 rgba(0,0,0,.16),
    0 14px 30px rgba(0,0,0,.40);
}
.ton-bottombar .btn:hover{
  box-shadow:
    0 10px 0 rgba(0,0,0,.18),
    0 18px 40px rgba(0,0,0,.50);
}

/* CTA (End Turn) */
.ton-cta{
  appearance:none;
  cursor:pointer;
  border-radius: 14px;
  border: 1px solid rgba(255, 220, 150, .28);
  padding: 12px 14px;
  font-family: "Cinzel", serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(255, 244, 220, .95);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.10), transparent 70%),
    linear-gradient(180deg, #855e2f, #cfa753);
  box-shadow: 0 10px 0 rgba(0,0,0,.20), 0 18px 42px rgba(0,0,0,.45);
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}
.ton-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 12px 0 rgba(0,0,0,.20), 0 22px 52px rgba(0,0,0,.55);
}
.ton-cta:active{
  transform: translateY(1px);
  box-shadow: 0 7px 0 rgba(0,0,0,.22), 0 14px 30px rgba(0,0,0,.45);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 860px){
  :root{ --bottom-bar-h: 190px; } /* more space for stacked bar */

  .ton-bottombar{
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: var(--bottom-bar-h);
    align-items: start; /* stacked layout: top aligned is fine */
  }

  /* keep right cluster clean on stacked layout */
  .ton-bottom-right{
    justify-content: flex-start;
  }
  .ton-cta-row{
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* drawer becomes wider */
  .ton-drawer{
    left: var(--hud-pad);
    right: calc(var(--hud-pad) + 56px + 10px);
    width: auto;
  }
}

@media (max-width: 520px){
  :root{ --bottom-bar-h: 210px; }

  .ton-bottombar{ padding: 10px 10px; }
  .ton-res{ font-size: .68rem; padding: 7px 9px; }
  .ton-cta{ padding: 11px 12px; font-size: .85rem; }
  .ton-bottombar .btn{ padding: 11px 12px; font-size: .85rem; }
  .ton-drawer .btn{ padding: 11px 12px !important; font-size: .86rem !important; }
}

/* =========================================================
   ✅ CLIP-PROOF BOTTOM LOCK (IMPORTANT)
   Put last so it wins specificity & order.
   ========================================================= */
body.is-game .ton-hud .ton-rail{
  bottom: calc(var(--hud-pad) + var(--bottom-bar-h) + var(--hud-gap)) !important;
}
body.is-game .ton-hud .ton-drawer{
  bottom: calc(var(--hud-pad) + var(--bottom-bar-h) + var(--hud-gap)) !important;
}

/* =========================
   TECH WEB MODAL
   ========================= */
.ton-tech-modal{ position:fixed; inset:0; z-index:5000; display:none; }
.ton-tech-modal.is-open{ display:block; }
.ton-tech-scrim{ position:absolute; inset:0; background: rgba(0,0,0,.62); backdrop-filter: blur(2px); }

.ton-tech-shell{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(1080px, calc(100vw - 48px));
  height: min(720px, calc(100vh - 48px));
  border-radius: 18px;
  background: rgba(7,10,18,.96);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.70);
  overflow:hidden;
}

.ton-tech-head{
  display:flex; align-items:center; gap:14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ton-tech-title{
  display:flex; align-items:center; gap:10px;
  font-family:"Cinzel", serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:900;
  color: rgba(255,244,220,.96);
}
.ton-tech-sub{
  margin-left:auto;
  font-family:"IM Fell English", serif;
  font-style:italic;
  opacity:.9;
  color: rgba(255,244,220,.86);
  white-space:nowrap;
}
.ton-tech-close{
  margin-left: 10px;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,244,220,.92);
  cursor:pointer;
}
.ton-tech-close:hover{ background: rgba(255,255,255,.10); }

.ton-tech-body{
  height: calc(100% - 63px);
  display:grid;
  grid-template-columns: 1fr 320px;
}
@media (max-width: 980px){
  .ton-tech-body{ grid-template-columns: 1fr; }
  .ton-tech-side{ display:none; }
}

.ton-tech-map{
  position:relative;
  height:100%;
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 50% 45%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(700px 420px at 25% 70%, rgba(48,255,255,.08), transparent 60%),
    radial-gradient(700px 420px at 75% 30%, rgba(255,79,216,.06), transparent 60%);
}

.ton-tech-lines{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.ton-tech-nodes{ position:absolute; inset:0; }

.ton-tech-node{
  position:absolute;
  transform: translate(-50%,-50%);
  width: 132px;
  padding: 10px 10px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  cursor:pointer;
  user-select:none;
}
.ton-tech-node:hover{ background: rgba(255,255,255,.10); transform: translate(-50%,-50%) scale(1.02); }
.ton-tech-node.is-hidden{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
  cursor: default;
  filter: grayscale(1);
  opacity:.75;
}
.ton-tech-node.is-hidden:hover{ transform: translate(-50%,-50%); background: rgba(255,255,255,.03); }

.ton-tech-node.is-active{
  outline: 2px solid rgba(48,255,255,.55);
  box-shadow: 0 0 0 4px rgba(48,255,255,.12), 0 14px 34px rgba(0,0,0,.45);
}

.ton-tech-node-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ton-tech-node-name{
  font-family:"Cinzel", serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:900;
  font-size:.72rem;
  color: rgba(255,244,220,.93);
}
.ton-tech-node-tier{
  font-family:"Cinzel", serif;
  letter-spacing:.10em;
  font-weight:900;
  font-size:.68rem;
  color: rgba(255,244,220,.82);
  opacity:.9;
}

.ton-tech-node-sub{
  margin-top:6px;
  font-family:"IM Fell English", serif;
  font-style: italic;
  color: rgba(255,244,220,.82);
  opacity:.92;
  font-size:.82rem;
  line-height:1.2;
}

.ton-tech-badge{
  margin-top:8px;
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  font-family:"Cinzel", serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:900;
  font-size:.62rem;
  color: rgba(255,244,220,.88);
}

.ton-tech-side{
  border-left: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 14px 14px 16px;
  overflow:auto;
}
.ton-tech-side-title{
  font-family:"Cinzel", serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:900;
  color: rgba(255,244,220,.96);
}
.ton-tech-side-desc{
  margin-top:8px;
  font-family:"IM Fell English", serif;
  font-style:italic;
  color: rgba(255,244,220,.86);
  opacity:.95;
}
.ton-tech-side-meta{
  margin-top:12px;
  font-family:"IM Fell English", serif;
  font-style:italic;
  color: rgba(255,244,220,.86);
  opacity:.9;
  line-height:1.35;
}
.ton-tech-side-actions{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ✅ shrink Tech side action buttons too (these are .btn) */
.ton-tech-side .btn{
  padding: 12px 14px !important;
  font-size: .90rem !important;
  letter-spacing: .14em !important;
  border-radius: 12px !important;
}

/* =========================================================
   ✅ MOBILE LOBBY FIX: prevent color picker from “disappearing”
   - fix nested scroll / clipping issues on iOS + Android
   - ensure panel can scroll comfortably above fixed footer
   ========================================================= */

.wrap,
.panel{
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
}

/* Don’t let horizontal clipping hide wrapped rows/buttons */
.panel{
  overflow-x: visible;
}

/* Give the panel extra “safe” scroll room so last rows aren’t under the footer */
@media (max-width: 520px){
  .wrap{ padding-bottom: 140px; }      /* more clearance for fixed footer */
  .panel{
    max-height: calc(100vh - 110px);   /* less aggressive clamp on short viewports */
    padding-bottom: 34px;              /* room for last interactive row */
  }
}

/* If a player row wraps (mobile), allow children to wrap and stay visible */
#playersBox > div{
  flex-wrap: wrap;
}

/* Ensure any “palette row” type blocks can span full width when wrapped */
#playersBox button{
  touch-action: manipulation; /* improves tap reliability on mobile */
}