/* CHITIN THRONE — the chrome around the photograph.
   Warm dark ground, one serif for titles, one sans for numbers. The HUD sits
   over the board, so everything is translucent and everything has a shadow. */

:root {
  --ink: #f2e6d2;
  --ink-dim: #b9a68c;
  --ink-faint: #7d6d5a;
  --bg: #0d0a07;
  --panel: rgba(24, 18, 13, 0.90);
  --panel-hi: rgba(38, 29, 20, 0.94);
  --line: rgba(214, 178, 120, 0.22);
  --line-hi: rgba(240, 208, 150, 0.55);
  --gold: #e8bd6a;
  --gold-2: #ffe0a4;
  --gold-3: #c9a870;   /* the quieter gold, for subtitles and marks */
  --blue: #8fc4ff;
  --red: #e2705a;
  --green: #8fd46a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans);
  overscroll-behavior: none;
}
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }

button { font-family: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible,
.padfocus { outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* ============================================================== TOP BAR == */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 62px;
  display: flex; align-items: center; gap: 14px; padding: 0 12px;
  background: linear-gradient(180deg, rgba(10,7,5,0.92), rgba(10,7,5,0.0));
  pointer-events: none; z-index: 6;
}
#topbar .side { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
#topbar .side1 { justify-content: flex-end; }
.crest {
  width: 26px; height: 26px; border-radius: 5px; flex: none;
  border: 1px solid var(--line-hi); background: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,.6) inset;
}
.sname {
  font-family: var(--serif); font-size: 15px; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 2px 6px #000;
  /* without a basis the score bar takes every spare pixel and both kingdom
     names collapse to an ellipsis */
  flex: 0 1 auto; min-width: 5.5em;
}
@media (max-width: 900px) { .sname { font-size: 13px; min-width: 4.2em; } }
@media (max-width: 780px) { .sname { display: none; } }
#topbar .stat { display: flex; flex-direction: column; align-items: center; line-height: 1; flex: none; }
#topbar .stat b { font-size: 17px; font-variant-numeric: tabular-nums; }
#topbar .stat i {
  font-size: 8.5px; font-style: normal; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
#scorewrap { width: min(360px, 40vw); flex: none; text-align: center; }
#turnline { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-dim); }
#turnline #turnno { font-weight: 700; color: var(--gold); letter-spacing: .08em; }
#scorebar {
  position: relative; height: 9px; margin: 4px 0 2px;
  background: rgba(0,0,0,.55); border: 1px solid var(--line); border-radius: 5px; overflow: hidden;
}
.sc { position: absolute; top: 0; bottom: 0; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.s0 { left: 0; background: linear-gradient(90deg, #b3792c, var(--gold)); }
.s1 { right: 0; background: linear-gradient(270deg, #2f6ba8, var(--blue)); }
#scorenums {
  display: flex; justify-content: space-between; font-size: 10px;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
#scorenums span:first-child { color: var(--gold); }
#scorenums span:last-child { color: var(--blue); }

/* =============================================================== RAIL ==== */
#leftrail {
  position: absolute; left: 10px; top: 74px; z-index: 7;
  display: flex; flex-direction: column; gap: 6px;
}
.rail {
  width: 42px; height: 42px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 16px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  backdrop-filter: blur(6px);
}
.rail i { font-style: normal; font-size: 7.5px; letter-spacing: .07em; color: var(--ink-faint); text-transform: uppercase; }
.rail:hover { background: var(--panel-hi); border-color: var(--line-hi); }
.rail.nudge { border-color: var(--gold); }
.rail.nudge::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: pip 1.8s ease-in-out infinite;
}
.rail { position: relative; }
@keyframes pip { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ============================================================== ROSTER === */
#roster {
  position: absolute; left: 60px; right: 12px; bottom: 8px; z-index: 6;
  display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
  padding: 6px 2px; scrollbar-width: thin;
}
.rchip {
  flex: none; width: 62px; height: 76px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; padding: 3px 2px 2px;
  position: relative; cursor: pointer; transition: transform .12s, border-color .12s;
}
.rchip:hover { transform: translateY(-3px); border-color: var(--line-hi); }
.rchip.sel { border-color: var(--gold-2); box-shadow: 0 0 0 1px var(--gold-2), 0 6px 18px rgba(0,0,0,.6); }
.rchip.done { background: rgba(40,58,32,0.88); }
.rchip.dead { opacity: .3; filter: grayscale(1); }
.rchip canvas { width: 46px; height: 40px; }
.rchip .rn {
  font-size: 8px; line-height: 1.05; text-align: center; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.rchip .rhp { width: 46px; height: 3px; background: rgba(0,0,0,.6); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.rchip .rhp i { display: block; height: 100%; background: var(--green); }
.rchip .tick {
  position: absolute; top: -4px; right: -4px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--green); color: #0d1a08; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ========================================================= ORDER PANEL === */
#orderpanel {
  position: absolute; right: 12px; top: 74px; width: 296px; z-index: 8;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,.6);
  max-height: calc(100% - 190px); overflow-y: auto;
}
#op-head { display: flex; gap: 8px; padding: 10px 10px 6px; align-items: flex-start; position: relative; }
#op-portrait { width: 60px; height: 60px; flex: none; }
#op-titles { min-width: 0; flex: 1; }
#op-titles h3 { margin: 2px 0 0; font-family: var(--serif); font-size: 16px; line-height: 1.1; }
#op-latin { margin: 2px 0 0; font-size: 10.5px; font-style: italic; color: var(--ink-faint); }
#op-role { margin: 3px 0 0; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
#op-close { position: absolute; right: 6px; top: 6px; background: none; border: 0; font-size: 15px; color: var(--ink-faint); }
#op-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px 10px; }
.st { background: rgba(0,0,0,.3); border-radius: 6px; padding: 4px 2px; text-align: center; }
.st b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.st i { font-style: normal; font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.st.up b { color: var(--green); }
.st.dn b { color: var(--red); }
#op-ability { padding: 4px 10px 8px; }
.abcard { background: rgba(0,0,0,.28); border-left: 2px solid var(--gold); border-radius: 0 7px 7px 0; padding: 6px 8px; margin-bottom: 5px; }
.abcard h4 { margin: 0; font-size: 12px; font-family: var(--serif); }
.abcard .kind { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.abcard p { margin: 3px 0 0; font-size: 11px; line-height: 1.35; color: var(--ink-dim); }
#op-orders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 0 10px 6px; }
.ob {
  background: rgba(52,40,28,.75); border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 2px 5px; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.ob b { font-size: 11.5px; font-weight: 600; }
.ob i { font-style: normal; font-size: 8px; color: var(--ink-faint); }
.ob:hover:not(:disabled) { background: rgba(74,56,36,.9); border-color: var(--line-hi); }
.ob.on { background: var(--gold); color: #1a1108; border-color: var(--gold-2); }
.ob.on i { color: rgba(26,17,8,.6); }
.ob:disabled { opacity: .28; cursor: default; }
#op-hint { margin: 0; padding: 0 10px 10px; font-size: 10.5px; color: var(--ink-faint); line-height: 1.4; }

/* ============================================================== COMMIT === */
#commitwrap { position: absolute; right: 12px; bottom: 96px; z-index: 8; display: flex; gap: 8px; align-items: center; }
#commit {
  background: linear-gradient(180deg, #6d4a1c, #3d2810);
  border: 1px solid var(--line-hi); color: var(--gold-2);
  border-radius: 10px; padding: 12px 20px; font-size: 14px; font-weight: 600;
  font-family: var(--serif); letter-spacing: .02em;
  box-shadow: 0 8px 26px rgba(0,0,0,.6);
}
#commit:hover { background: linear-gradient(180deg, #866026, #4d3416); }
#commit em { font-style: normal; font-size: 11px; opacity: .75; margin-left: 6px; }
#skipanim { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 10px 14px; font-size: 12px; }

/* =============================================================== PANELS == */
.panel {
  position: absolute; left: 60px; top: 74px; width: min(380px, 46vw); z-index: 9;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,.6);
  max-height: calc(100% - 200px); display: flex; flex-direction: column;
}
.panel header { display: flex; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.panel header h3 { margin: 0; flex: 1; font-family: var(--serif); font-size: 14px; }
.panel .x { background: none; border: 0; color: var(--ink-faint); font-size: 14px; }
.pnote { margin: 8px 10px 0; font-size: 11px; color: var(--ink-faint); }
#logbody, #hatchlist { overflow-y: auto; padding: 8px 10px; }
#logbody .lentry { font-size: 11.5px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.045); color: var(--ink-dim); }
#logbody .lentry b { color: var(--gold); }
#logbody .lturn { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }
.hrow {
  display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer;
}
.hrow:hover { background: rgba(255,255,255,.05); border-color: var(--line); }
.hrow canvas { width: 44px; height: 36px; flex: none; }
.hrow .hn { flex: 1; min-width: 0; }
.hrow .hn b { display: block; font-size: 12px; font-weight: 600; }
.hrow .hn span { font-size: 9.5px; color: var(--ink-faint); }
.hrow .hc { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--gold); }
.hrow.no { opacity: .35; cursor: default; }

#ghostnote {
  position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 9;
  background: rgba(60,40,80,.85); border: 1px solid rgba(190,150,240,.45);
  border-radius: 8px; padding: 6px 12px; font-size: 11px; color: #e6d4ff;
}

/* ============================================================== SCREENS == */
#screens { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.screen {
  position: absolute; inset: 0; display: none; flex-direction: column;
  background: radial-gradient(120% 90% at 50% 0%, #241a11 0%, #0d0a07 70%);
  pointer-events: auto; overflow: hidden;
}
.screen.show { display: flex; }
.shead {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); flex: none;
}
.shead h2 { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.sfill { flex: 1; }
.back, .small {
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 12px; font-size: 12px;
}
.back:hover, .small:hover { background: rgba(255,255,255,.12); }
.sfoot {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-top: 1px solid var(--line); flex: none;
}
.big {
  background: linear-gradient(180deg, #6d4a1c, #3d2810);
  border: 1px solid var(--line-hi); color: var(--gold-2);
  border-radius: 9px; padding: 11px 22px; font-size: 14px;
  font-family: var(--serif); letter-spacing: .02em;
}
.big:hover:not(:disabled) { background: linear-gradient(180deg, #8a6428, #513718); }
.big:disabled { opacity: .35; cursor: default; }

/* ---- title */
/* ---- title poster.
   The canvas composes a picture with one dark column in it; the lockup lives
   in that column with NO plate and no scrim behind it. The only contract is
   "this side of the frame is dark", which holds at every aspect ratio — the
   words are never positioned against a pixel of the artwork. */
#scr-title { align-items: flex-start; justify-content: center; }
#titleart { position: absolute; inset: 0; width: 100%; height: 100%; }
.titlewrap {
  position: relative; z-index: 2; text-align: left;
  width: min(42vw, 520px); margin: 0 0 0 max(4vw, 26px);
  padding: 0 12px 0 0; align-self: flex-start;
}
.titlewrap h1 {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 6.4vw, 82px); line-height: .90; letter-spacing: .07em;
  color: var(--gold-2);
  text-shadow: 0 0 54px rgba(255,186,88,.30), 0 4px 26px rgba(0,0,0,.85);
}
.titlewrap h1 span { display: block; letter-spacing: .215em; }
/* a hairline rule under the lockup does the work a plate would, for nothing */
.titlewrap h1::after {
  content: ''; display: block; margin: 16px 0 0; height: 1px; width: 58%;
  background: linear-gradient(90deg, rgba(232,186,106,.85), rgba(232,186,106,0));
}
.titlewrap .sub {
  margin: 13px 0 0; font-family: var(--serif); font-style: italic;
  font-size: clamp(13px, 1.9vw, 20px); color: var(--gold-3); letter-spacing: .2em;
}
.titlewrap .tag {
  margin: 14px 0 26px; max-width: 27em; font-size: 12.5px;
  color: var(--ink-dim); line-height: 1.65;
}
.mainmenu { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.mainmenu .big {
  width: min(300px, 100%); text-align: left; padding-left: 20px;
  position: relative; letter-spacing: .04em;
}
/* a quiet index mark, so the stack reads as a contents page rather than a toolbar */
.mainmenu .big::before {
  content: ''; position: absolute; left: 9px; top: 50%; width: 4px; height: 4px;
  margin-top: -2px; border-radius: 50%; background: var(--gold-3); opacity: .45;
  transition: opacity .16s, transform .16s;
}
.mainmenu .big:hover::before, .mainmenu .big:focus-visible::before { opacity: 1; transform: scale(1.9); }
.foot { margin-top: 22px; font-size: 10px; color: var(--ink-faint); letter-spacing: .1em; }
.soundlink { font: inherit; color: var(--ink-dim, inherit); background: none; border: 0; border-bottom: 1px dotted currentColor;
  padding: 0; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.soundlink:hover { color: var(--gold-2, #fff); }

/* Portrait is a different poster, not this one squeezed: the dark band moves
   from the left column to the top, so the lockup moves with it. */
@media (max-aspect-ratio: 100/102) {
  /* the parent centres on the MAIN axis, which is vertical here — the lockup
     has to be pulled up into the dark band the canvas made at the top */
  #scr-title { align-items: stretch; justify-content: flex-start; }
  .titlewrap {
    width: auto; margin: max(5vh, 24px) max(5vw, 18px) 0;
    align-self: flex-start; text-align: left;
  }
  .titlewrap h1 { font-size: clamp(34px, 11vw, 76px); }
  .titlewrap h1::after { width: 42%; }
  .titlewrap .tag { max-width: 24em; margin-bottom: 20px; }
  .mainmenu .big { width: min(340px, 86vw); }
  /* the credit line was landing on the one bright band in the picture; the
     dark bottom is the only other place in a portrait frame that will hold it */
  .titlewrap .foot {
    position: fixed; left: 0; right: 0; bottom: max(10px, 2.4vh);
    margin: 0; text-align: center;
  }
}
/* A desktop window dragged short has the phone's problem with no touch class
   to catch it: drop the blurb rather than let the stack run off the frame. */
@media (max-height: 560px) {
  .titlewrap .tag { display: none; }
  .titlewrap h1::after { margin-top: 10px; }
  .mainmenu { gap: 6px; }
  .foot { margin-top: 12px; }
}

/* ---- kingdom select */
#kingdomgrid {
  flex: 1; display: grid; gap: 12px; padding: 16px; overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-content: start;
}
.kcard {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  background: rgba(255,255,255,.03); cursor: pointer; position: relative; overflow: hidden;
  transition: transform .14s, border-color .14s;
}
.kcard:hover { transform: translateY(-3px); border-color: var(--line-hi); }
.kcard.sel { border-color: var(--gold-2); box-shadow: 0 0 0 1px var(--gold-2); }
.kcard canvas { width: 100%; height: 96px; display: block; }
.kcard h3 { margin: 6px 0 1px; font-family: var(--serif); font-size: 17px; }
.kcard .ep { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.kcard .mot { margin: 6px 0 0; font-size: 11.5px; font-style: italic; color: var(--ink-dim); }
.kcard .doc { margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: var(--ink-faint); }
.kbar { height: 3px; border-radius: 2px; margin-bottom: 8px; }
#kd-detail { flex: 1; font-size: 12px; color: var(--ink-dim); line-height: 1.5; max-height: 76px; overflow-y: auto; }

/* ---- draft */
#draftwrap { flex: 1; display: flex; min-height: 0; }
#draftlist { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); align-content: start; }
#draftside { width: min(330px, 34vw); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
#warbandbox { padding: 10px; border-bottom: 1px solid var(--line); max-height: 42%; overflow-y: auto; }
#warbandbox h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 13px; }
#warband { display: flex; flex-wrap: wrap; gap: 5px; }
.wchip {
  display: flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); font-size: 11px; cursor: pointer;
}
.wchip:hover { background: rgba(226,112,90,.22); border-color: var(--red); }
.wchip b { font-weight: 600; }
.wchip s { color: var(--gold); text-decoration: none; font-variant-numeric: tabular-nums; }
#draftdetail { flex: 1; overflow-y: auto; padding: 10px; font-size: 12px; line-height: 1.5; }
.ucard {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px; cursor: pointer;
  background: rgba(255,255,255,.03); display: flex; gap: 8px; align-items: flex-start;
  transition: border-color .12s, transform .12s;
}
.ucard:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.ucard.picked { border-color: var(--green); background: rgba(80,140,60,.14); }
.ucard.cant { opacity: .38; }
.ucard canvas { width: 56px; height: 48px; flex: none; }
.ucard .un { flex: 1; min-width: 0; }
.ucard .un b { font-size: 12.5px; display: block; }
.ucard .un .lat { font-size: 9.5px; font-style: italic; color: var(--ink-faint); }
.ucard .un .mini { font-size: 9.5px; color: var(--ink-dim); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ucard .uc { font-size: 15px; color: var(--gold); font-variant-numeric: tabular-nums; }
.tierpill {
  display: inline-block; font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 9px; border: 1px solid var(--line); color: var(--ink-faint);
}
#budgetline { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--gold); }
#oppwrap { font-size: 12px; color: var(--ink-dim); display: flex; align-items: center; gap: 6px; }
select, input[type=search], input#joincode {
  background: rgba(0,0,0,.4); border: 1px solid var(--line); color: var(--ink);
  border-radius: 7px; padding: 7px 9px; font-size: 12px; font-family: inherit;
}

/* ---- glossary */
#glosswrap { flex: 1; display: flex; min-height: 0; }
#glossnav { width: 190px; border-right: 1px solid var(--line); overflow-y: auto; padding: 10px 8px; flex: none; }
#glossnav .gk {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 7px 9px; border-radius: 7px; font-size: 12.5px; color: var(--ink-dim);
  border-left: 3px solid transparent;
}
#glossnav .gk:hover { background: rgba(255,255,255,.05); color: var(--ink); }
#glossnav .gk.on { background: rgba(255,255,255,.08); color: var(--ink); }
#glosslist { width: min(330px, 32vw); border-right: 1px solid var(--line); overflow-y: auto; padding: 8px; flex: none; }
#glossdetail { flex: 1; overflow-y: auto; padding: 18px 24px; }
.gsec { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin: 12px 4px 5px; }
.growl {
  display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 8px;
  cursor: pointer; border: 1px solid transparent;
}
.growl:hover { background: rgba(255,255,255,.05); }
.growl.on { background: rgba(232,189,106,.14); border-color: var(--line-hi); }
.growl canvas { width: 46px; height: 38px; flex: none; }
.growl .gn b { display: block; font-size: 12.5px; }
.growl .gn span { font-size: 9.5px; font-style: italic; color: var(--ink-faint); }
#glossdetail h2 { margin: 0; font-family: var(--serif); font-size: 27px; font-weight: 500; }
#glossdetail .lat { font-style: italic; color: var(--ink-faint); font-size: 13px; margin: 2px 0 0; }
#glossdetail .kk { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; margin: 10px 0 0; }
#gd-art { width: 100%; max-width: 460px; height: 190px; display: block; margin: 10px 0; border-radius: 12px; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; margin: 12px 0; max-width: 560px; }
.statgrid .st { padding: 7px 3px; }
.statgrid .st b { font-size: 19px; }
#glossdetail h4 { margin: 16px 0 3px; font-family: var(--serif); font-size: 15px; color: var(--gold); }
#glossdetail p { margin: 4px 0; font-size: 13.5px; line-height: 1.62; color: var(--ink-dim); max-width: 62ch; }
#glossdetail .quote { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink); border-left: 2px solid var(--gold); padding-left: 12px; }
.traitrow { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.trait { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }

/* ---- rules */
#ruleswrap { flex: 1; overflow-y: auto; padding: 20px 24px; }
#ruleswrap .rblock { max-width: 70ch; margin: 0 auto 22px; }
#ruleswrap h3 { font-family: var(--serif); font-size: 19px; color: var(--gold); margin: 0 0 6px; }
#ruleswrap p, #ruleswrap li { font-size: 13.5px; line-height: 1.65; color: var(--ink-dim); }
#ruleswrap li { margin-bottom: 5px; }

/* ---- campaign */
#campwrap { flex: 1; overflow-y: auto; padding: 16px; }
.campgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-width: 1100px; margin: 0 auto; }
.mcard { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: rgba(255,255,255,.03); }
.mcard.done { border-color: rgba(140,200,110,.45); background: rgba(80,140,60,.10); }
.mcard.locked { opacity: .4; }
.mcard h3 { margin: 0 0 2px; font-family: var(--serif); font-size: 16px; }
.mcard .vs { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.mcard p { font-size: 12px; line-height: 1.5; color: var(--ink-dim); margin: 8px 0; }
.mcard .obj { font-size: 11px; color: var(--ink-faint); border-left: 2px solid var(--line-hi); padding-left: 8px; }
.campintro { max-width: 62ch; margin: 0 auto 20px; font-size: 13.5px; line-height: 1.65; color: var(--ink-dim); text-align: center; }

/* ---- online */
#onlinewrap { flex: 1; display: flex; gap: 16px; padding: 24px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.ocard { border: 1px solid var(--line); border-radius: 12px; padding: 18px; width: min(320px, 90vw); background: rgba(255,255,255,.03); }
.ocard h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 17px; }
.ocard p { font-size: 12px; color: var(--ink-faint); line-height: 1.5; }
.ocode { font-family: var(--mono); font-size: 30px; letter-spacing: .3em; color: var(--gold-2); text-align: center; margin: 12px 0 0; }
#netstatus { width: 100%; text-align: center; font-size: 12px; color: var(--ink-faint); }
#joincode { width: 100%; text-align: center; font-family: var(--mono); font-size: 22px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 10px; }

/* ---- result */
#scr-result { align-items: center; justify-content: center; }
#resultcard { text-align: center; padding: 24px; max-width: 620px; }
#res-title { font-family: var(--serif); font-size: clamp(28px, 6vw, 52px); margin: 0; font-weight: 500; }
#res-reason { font-size: 15px; color: var(--ink-dim); font-style: italic; margin: 12px 0 20px; line-height: 1.6; }
#res-stats { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
#res-stats .rs b { display: block; font-size: 25px; color: var(--gold); font-variant-numeric: tabular-nums; }
#res-stats .rs i { font-style: normal; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.resbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================== TOAST ==== */
#toast {
  position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%);
  z-index: 40; pointer-events: none; display: flex; flex-direction: column; gap: 6px; align-items: center;
}
#toast div {
  background: rgba(20,14,9,.94); border: 1px solid var(--line-hi); border-radius: 9px;
  padding: 9px 16px; font-size: 12.5px; box-shadow: 0 10px 30px rgba(0,0,0,.6);
  animation: tin .25s ease-out;
}
@keyframes tin { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================== TOUCH ==== */
#touch { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#touch .tbtn {
  position: absolute; pointer-events: auto; width: 46px; height: 46px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
#t-full { right: 10px; top: 70px; }
#t-zoomin { right: 10px; top: 124px; }
#t-zoomout { right: 10px; top: 178px; }

/* ================================================== the phone layer ======
   Scoped entirely to body.touch, so the desktop layout is untouched. The
   landscape arrangement is the real one: rail top-left, roster along the
   bottom, order panel on the right, and nothing allowed to overlap anything. */
body.touch #topbar { height: 40px; padding: 0 6px; gap: 6px; }
body.touch .sname, body.touch #turnline #phaseline { display: none; }
body.touch #topbar .stat b { font-size: 14px; }
body.touch #topbar .stat i { font-size: 7px; }
body.touch .crest { width: 20px; height: 20px; }
body.touch #scorewrap { width: 40vw; }
body.touch #scorebar { height: 7px; margin: 2px 0 1px; }
body.touch #turnline, body.touch #scorenums { font-size: 9px; }

body.touch #leftrail { top: 46px; left: 6px; gap: 4px; }
body.touch .rail { width: 34px; height: 34px; font-size: 13px; }
body.touch .rail i { font-size: 6px; }

/* the zoom pad moves to the left, under the rail, out of the panel's way */
body.touch #t-full  { left: 6px; right: auto; top: auto; bottom: 104px; }
body.touch #t-zoomin  { left: 46px; right: auto; top: auto; bottom: 104px; }
body.touch #t-zoomout { left: 86px; right: auto; top: auto; bottom: 104px; }
body.touch #touch .tbtn { width: 36px; height: 36px; font-size: 16px; }
/* on a phone the sound toggle joins the thumb cluster; the rail stays at four */
#t-sound { display: none; }
body.touch #t-sound { display: flex; left: 126px; right: auto; top: auto; bottom: 104px; }
body.touch #btn-sound { display: none; }
@media (max-height: 340px) {
  body.touch .rail { width: 30px; height: 30px; font-size: 12px; }
  body.touch #leftrail { gap: 3px; }
}

body.touch #orderpanel {
  right: 6px; top: 46px; bottom: 100px;
  width: min(236px, 34vw); max-height: none; overflow: hidden;
  border-radius: 10px; display: flex; flex-direction: column;
}
/* On a short screen the order buttons must never be the thing you scroll to
   find — they are the whole interaction. Head, stats, buttons; prose last. */
body.touch #op-head    { order: 1; flex: none; }
body.touch #op-stats   { order: 2; flex: none; }
body.touch #op-orders  { order: 3; flex: none; }
body.touch #op-hint    { order: 4; flex: none; }
body.touch #op-ability { order: 5; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
body.touch #op-head { padding: 7px 7px 4px; gap: 6px; }
body.touch #op-portrait { width: 42px; height: 42px; }
body.touch #op-titles h3 { font-size: 13px; }
body.touch #op-latin { display: none; }
body.touch #op-role { font-size: 8px; }
body.touch #op-stats { grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px 7px; }
body.touch .st b { font-size: 13px; }
body.touch .st i { font-size: 6.5px; }
body.touch #op-ability { padding: 3px 7px 5px; }
body.touch .abcard { padding: 5px 6px; margin-bottom: 4px; }
body.touch .abcard h4 { font-size: 11px; }
body.touch .abcard p { font-size: 10px; line-height: 1.3; }
body.touch #op-orders { gap: 4px; padding: 0 7px 5px; }
body.touch .ob { padding: 9px 2px 7px; }
body.touch .ob b { font-size: 11px; }
body.touch #op-hint { padding: 0 7px 8px; font-size: 9.5px; }

/* roster runs along the bottom, stopping short of the commit button */
body.touch #roster {
  left: 6px; right: 148px; bottom: 4px; gap: 4px; padding: 3px 2px;
}
body.touch .rchip { width: 50px; height: 58px; border-radius: 7px; }
body.touch .rchip canvas { width: 38px; height: 30px; }
body.touch .rchip .rn { font-size: 7px; }
body.touch .rchip .rhp { width: 38px; }

body.touch #commitwrap { right: 6px; bottom: 6px; flex-direction: column; gap: 4px; }
body.touch #commit { padding: 11px 12px; font-size: 12px; border-radius: 9px; }
body.touch #commit em { display: block; margin: 2px 0 0; font-size: 10px; }
body.touch #skipanim { padding: 8px 12px; font-size: 11px; }

body.touch .panel { left: 46px; top: 46px; bottom: 100px; max-height: none; width: min(300px, 52vw); }
body.touch #glossnav { width: 118px; }
body.touch #glosslist { width: 38vw; }
body.touch #glossdetail { padding: 12px 14px; }
body.touch #draftside { width: 46vw; }
body.touch #draftlist { grid-template-columns: 1fr; }
body.touch .shead { padding: 8px 10px; }
body.touch .shead h2 { font-size: 15px; }
body.touch .sfoot { padding: 8px 10px; gap: 8px; }
body.touch .big { padding: 10px 14px; font-size: 12px; }
body.touch #toast { bottom: 74px; }
body.touch #toast div { font-size: 11px; padding: 7px 12px; }

/* a hex board needs the long axis; ask for it rather than squeezing */
#rotate {
  position: fixed; inset: 0; z-index: 60; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: #0d0a07; text-align: center; padding: 24px;
}
/* drawn, not a glyph — a text ▭ is tofu in plenty of system fonts */
#rotate .glyph {
  width: 46px; height: 76px; margin-bottom: 22px;
  border: 3px solid var(--gold); border-radius: 8px;
  position: relative;
  animation: tip 2.4s ease-in-out infinite;
}
#rotate .glyph::after {
  content: ''; position: absolute; left: 50%; bottom: 4px;
  transform: translateX(-50%);
  width: 14px; height: 2px; border-radius: 1px; background: var(--gold);
}
@keyframes tip { 0%, 45% { transform: rotate(0deg); } 60%, 100% { transform: rotate(90deg); } }
#rotate h2 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; color: var(--gold-2); }
#rotate p { font-size: 13px; color: var(--ink-dim); max-width: 26em; line-height: 1.6; }
/* The board genuinely needs the long axis, but the TITLE composes perfectly
   well in portrait — so a phone opening the game gets the poster, and is only
   asked to turn when it actually reaches a battle. */
body.touch.portrait #rotate { display: flex; }
body.touch.portrait.at-title #rotate { display: none; }

@media (max-width: 780px) {
  #glossnav { width: 130px; }
  #glosslist { width: 42vw; }
  #draftside { width: 44vw; }
  #orderpanel { width: min(270px, 64vw); }
}
@media (max-height: 520px) {
  #roster { bottom: 4px; padding: 3px 2px; }
  .rchip { height: 62px; width: 54px; }
  .rchip canvas { width: 40px; height: 32px; }
}

/* ========================================================== SCENARIOS ==== */
#scenlist {
  flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start;
}
.scard {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px;
  background: rgba(255,255,255,.028); cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap: 5px;
  transition: transform .14s, border-color .14s, background .14s;
}
.scard:hover { transform: translateY(-3px); border-color: var(--line-hi); background: rgba(255,255,255,.05); }
.scard h3 { margin: 0; font-family: var(--serif); font-size: 18px; letter-spacing: .01em; }
.scard .ssub { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-3); }
.scard .sobj { font-size: 12px; color: var(--ink-dim); line-height: 1.5; }
.scard .stier {
  position: absolute; right: 11px; top: 11px; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* the medal is a struck disc, not an emoji — OS emoji beside drawn art always
   reads as a placeholder */
.medal {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block; vertical-align: -2px;
  border: 1px solid rgba(0,0,0,.5); box-shadow: 0 1px 3px rgba(0,0,0,.6) inset;
}
.medal.bronze { background: linear-gradient(160deg, #c98a52, #6d4423); }
.medal.silver { background: linear-gradient(160deg, #e2e6ea, #8c949c); }
.medal.gold   { background: linear-gradient(160deg, #ffe6a2, #c79a34); }
.medal.none   { background: rgba(255,255,255,.05); border-color: var(--line); box-shadow: none; }
.scard .sfoot2 { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 10.5px; color: var(--ink-faint); }

/* ---- briefing */
#briefwrap { flex: 1; display: flex; gap: 18px; padding: 16px 18px; overflow-y: auto; min-height: 0; }
#br-left { flex: 1 1 auto; min-width: 0; max-width: 62ch; }
#br-right { width: min(280px, 32vw); flex: none; }
.brsub { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-3); }
#br-brief {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.72; color: var(--ink);
  margin: 0 0 16px; text-wrap: pretty;
}
.brblock { margin: 0 0 14px; }
.brblock h4 {
  margin: 0 0 5px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.brblock p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-dim); }
#br-obj { color: var(--gold-2) !important; font-size: 13.5px !important; }
#br-medals { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
#br-medals li { font-size: 11.5px; color: var(--ink-dim); line-height: 1.45; display: flex; gap: 7px; align-items: flex-start; }
#br-medals li .medal { flex: none; margin-top: 2px; }
#br-hintwrap { margin-top: 4px; }
#br-hintwrap summary { cursor: pointer; font-size: 11.5px; color: var(--ink-faint); letter-spacing: .04em; }
#br-hintwrap p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); font-style: italic; }
#br-best { flex: 1; font-size: 11.5px; color: var(--ink-faint); }
.ghost {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 11px; font-size: 11px; color: var(--ink-dim);
}
.ghost:hover { border-color: var(--line-hi); color: var(--ink); }

/* the objective, pinned under the top bar during a scenario */
#objbar {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 6;
  background: rgba(16,11,7,.86); border: 1px solid var(--line);
  border-radius: 0 0 10px 10px; border-top: 0; padding: 5px 14px 6px;
  font-size: 11.5px; color: var(--gold-2); letter-spacing: .02em;
  backdrop-filter: blur(6px); pointer-events: none; max-width: min(60ch, 76vw);
  text-align: center; box-shadow: 0 8px 22px rgba(0,0,0,.5);
}
body.touch #objbar { font-size: 10.5px; padding: 4px 10px 5px; top: 54px; }

@media (max-width: 720px) {
  #briefwrap { flex-direction: column; gap: 12px; }
  #br-right { width: auto; }
}