/* frontend/orders.css — ORDERS (gunboat Diplomacy on a micro map) board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm / Acorns / Corrals precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * The SHELL and PANELS read the scheme engine's `--pgr-*` tokens (GameTheme sets them on the screen for Classic AND
 * Arcade — OR-M5: vector only), with the mock's charcoal values as fallbacks. The MAP keeps Design's dark playing
 * surface (floor / tile) so every player colour stays lighter (the brief's STYLE A). Player colours come from
 * PlayerColours (`--odr-p0..2`, set by orders.js); every owner ALSO differs by SHAPE (● / ▲ / ■ on pawns, pennants,
 * home labels, arrow badges, chips). Line style (solid / long-dash / dotted) is extra, never sold as identity (OR-F6).
 * The owner is colourblind: every state reads in greyscale (a dashed ring, a padlock, a ⊘, a glow — never a recolour).
 *
 * ── Geometry is the mock's ──────────────────────────────────────────────────
 * PC design box 1280 × 553 (the mock's 637 less its 84 px chat strip), 593 with the pill — only the MAP grows (521 →
 * 561). Rails 288 · map = min(w, h) of the centre · rails 288, pad 16, gaps 16. Phone column (mock frame 10, the
 * tallest state): pad 12 · header 44 · chips 52 · MAP (the one flexible slot) · feed 44 · controls 56 · pad 12, gaps 8.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every slot is a FIXED size except the map. Every text box is a fixed width or fills its slot with an ellipsis. The
 * "+n" flag delta is always there (opacity only); YOUR ORDERS is one fixed 168 px slot (5 rows: 6 flags ends the game);
 * SEAL changes look, never size. Feedback changes colour, glow or a transform — never size or spacing.
 */

#orders-game-screen, .odr-root {
  --odr-bg: var(--pgr-bg, radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%));
  --odr-panel: var(--pgr-panel, rgba(255, 255, 255, .03)); --odr-line: var(--pgr-line, rgba(255, 255, 255, .08));
  --odr-txt: var(--pgr-txt, #e9e8e4); --odr-dim: var(--pgr-dim, #9a9ca2); --odr-sel: var(--pgr-sel, oklch(.74 .14 152));
  --odr-btn: var(--pgr-btn, linear-gradient(180deg, #3a3e46, #2a2d33)); --odr-btnTxt: var(--pgr-btnTxt, #f1f0ec);
  --odr-panelBd: 1px solid var(--odr-line);
  --odr-floor: #0b0d12; --odr-tile: #1a1d25; --odr-link: rgba(255, 255, 255, .17); --odr-ink: #0b0c10; --odr-spark: #fff4c2;
  --odr-p0: #4fe07c; --odr-p1: #ff5c5c; --odr-p2: #ffd83d;
  --odr-f: 'Outfit', system-ui, sans-serif; --odr-r: 14px;
  --odr-slide: .6s; --odr-flutter: .6s; --odr-drop: .45s; --odr-winfill: .8s;
}
#orders-game-screen.gm-arcade, .gm-arcade .odr-root { --odr-f: 'Poppins', system-ui, sans-serif; --odr-panelBd: 2px solid var(--pgr-sel, #60a5fa); --odr-r: 16px; }

/* identity: one custom property per owner, read by every fill / stroke below */
.odr-root [data-s="0"] { --odr-pc: var(--odr-p0); }
.odr-root [data-s="1"] { --odr-pc: var(--odr-p1); }
.odr-root [data-s="2"] { --odr-pc: var(--odr-p2); }

/* ── setup card ─────────────────────────────────────────────────────────── */
#orders-game-screen { color: var(--odr-txt); }
.odr-setup-card { max-width: 560px; margin: 24px auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; font-family: var(--odr-f); background: var(--pgr-solid, #18191d); color: var(--odr-txt); border: 1px solid var(--odr-line); border-radius: 18px; }
.odr-setup-eyebrow { font: 700 11px/1.3 var(--odr-f); letter-spacing: .2em; text-transform: uppercase; color: var(--odr-sel); }
.odr-setup-title { margin: 0; font-size: 30px; }
.odr-setup-blurb, .odr-setup-hint { margin: 0; line-height: 1.55; font-size: 14px; }
.odr-setup-hint { color: var(--odr-dim); font-size: 12.5px; }
.odr-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0; }
.odr-setup-row[data-off="1"] { opacity: .45; }
.odr-setup-lab { font: 700 11px var(--odr-f); letter-spacing: .14em; text-transform: uppercase; color: var(--odr-dim); min-width: 92px; }
.odr-sb { display: inline-block; width: 1.2em; text-align: center; color: var(--pgr-txt, #e9e8e4); }
.odr-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.odr-opt { min-width: 58px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--odr-line); background: var(--odr-panel); color: var(--odr-txt); font: 700 13px var(--odr-f); cursor: pointer; transition: background .12s, box-shadow .12s, transform .1s; }
.odr-opt[data-on="1"] { background: var(--odr-sel); color: var(--odr-ink); border-color: var(--odr-sel); }
.odr-opt:disabled { cursor: default; border-style: dashed; }
.odr-opt:not(:disabled):active { transform: translateY(1px); }
.odr-start { height: 48px; margin-top: 6px; border: 0; border-radius: 12px; background: var(--odr-btn); color: var(--odr-btnTxt); font: 800 16px var(--odr-f); letter-spacing: .04em; cursor: pointer; transition: filter .12s, transform .1s; }
.odr-start:active { transform: translateY(2px); filter: brightness(.88); }
@media (hover: hover) { .odr-start:hover { filter: brightness(1.12); } .odr-opt:not(:disabled):hover { box-shadow: 0 0 0 2px var(--odr-sel); } }

/* ── the root (phone first: a 384 × 812 column, survives 360 × 740) ──────── */
.odr-root {
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--odr-phone-h, 740px); padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  color: var(--odr-txt); font-family: var(--odr-f);
  user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased;
}
.gm-arcade .odr-root { background: var(--odr-bg); box-shadow: 0 0 0 2px var(--pgr-sel, #60a5fa), 0 22px 46px rgba(0, 0, 0, .4); border-radius: 28px; }
.odr-root *, .odr-root *::before, .odr-root *::after { box-sizing: border-box; }
.odr-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.odr-root i { font-style: normal; }
.odr-panel { background: var(--odr-panel); border: var(--odr-panelBd); border-radius: var(--odr-r); min-width: 0; overflow: hidden; }
.odr-k { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--odr-dim); white-space: nowrap; }

/* the rails dissolve on a phone: their children join the column in mock order */
.odr-railL, .odr-railR { display: contents; }
.odr-head { order: 1; flex: none; height: 44px; background: none; border: 0; border-radius: 0; overflow: visible; }
.odr-h1 { height: 44px; display: flex; align-items: center; gap: 8px; }
/* sized for the widest value, "Round 10 of 10" (locked layout) */
.odr-round { flex: none; width: 108px; font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.odr-pill { flex: none; width: 68px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.odr-pill[data-s="spring"] { border: 1.5px solid var(--odr-dim); color: var(--odr-txt); }
.odr-pill[data-s="autumn"] { background: var(--odr-txt); color: var(--odr-ink); }
.odr-hgap { flex: 1 1 0; }
.odr-menu { flex: none; width: 28px; height: 36px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--odr-txt); font-size: 14px; cursor: pointer; }
.odr-ptog { flex: none; width: 104px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; background: var(--odr-panel); border: var(--odr-panelBd); }
.odr-ptogk { font-size: 11px; font-weight: 700; line-height: 1.1; text-align: right; }
.odr-sub { display: none; }
.odr-flex, .odr-togrow, .odr-orders, .odr-railR > .odr-seal { display: none; }

/* chips — phone: a row of n (mock L161–181) */
.odr-chips { order: 2; flex: none; display: grid; grid-template-columns: repeat(var(--odr-n, 2), minmax(0, 1fr)); gap: 6px; }
.odr-root[data-n="3"] .odr-chips { --odr-n: 3; }
.odr-chip { position: relative; height: 52px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 12px; background: var(--odr-panel); border: var(--odr-panelBd); min-width: 0; }
.odr-chip[data-s="0"] { box-shadow: inset 0 0 0 2px var(--odr-p0); }
.odr-chip[data-win="1"] { box-shadow: inset 0 0 0 2px var(--odr-pc), 0 0 14px color-mix(in srgb, var(--odr-pc) 55%, transparent); }
.odr-av { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--odr-panel); border: 1px dashed var(--odr-dim); }
.odr-avb { position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; background: var(--odr-pc); color: var(--odr-ink); font-size: 8px; font-weight: 900; }
.odr-avb[data-s="0"] { clip-path: circle(50%); }
.odr-avb[data-s="1"] { clip-path: polygon(50% 6%, 97% 90%, 3% 90%); }
.odr-avb[data-s="2"] { clip-path: inset(12%); }
.odr-cmid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.odr-c1 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.odr-cname { flex: 0 1 auto; min-width: 0; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* OR-F6: the status ICON has its own 14 px slot; on a phone the words go (the icon carries the state) */
.odr-cicon { flex: none; width: 14px; font-size: 12px; font-weight: 800; color: var(--odr-dim); text-align: center; }
.odr-cstat { display: none; }
.odr-c2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.odr-slots { display: none; }
.odr-cunits { font-size: 11px; color: var(--odr-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.odr-cflags { position: relative; flex: none; width: 24px; margin-left: 4px; display: flex; flex-direction: column; align-items: flex-end; }
.odr-cflags b { font-size: 18px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.odr-cfk { display: none; }
.odr-cfk1 { font-size: 9px; font-weight: 700; color: var(--odr-dim); }
.odr-delta { position: absolute; top: 50%; right: 100%; margin-right: 2px; transform: translateY(-50%); padding: 1px 5px; border-radius: 8px; font-size: 10px; font-weight: 800; white-space: nowrap; background: var(--odr-txt); color: var(--odr-ink); border: 1.5px solid var(--odr-txt); opacity: 0; transition: opacity .2s; }
.odr-delta[data-neg="1"] { background: transparent; color: var(--odr-txt); border-style: dashed; }
.odr-delta[data-on="1"] { opacity: 1; }
/* 3 players on a phone: the name gets row 1 to itself; the icon + flags sit on row 2 (OR-F6's slot, never against the
   digit) — the mock's single row clipped every name at 360 px */
.odr-root[data-n="3"] .odr-chip { padding: 0 6px; gap: 5px; }
.odr-root[data-n="3"] .odr-av { width: 22px; height: 22px; }
.odr-root[data-n="3"] .odr-avb { width: 14px; height: 14px; font-size: 7px; right: -4px; bottom: -4px; }
.odr-root[data-n="3"] .odr-cname { font-size: 12px; }

/* the map */
.odr-mid { order: 3; flex: 1 1 0; min-height: 0; min-width: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.odr-mapbox { position: relative; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }
.odr-svg { display: block; width: 100%; height: 100%; overflow: hidden; font-family: var(--odr-f); }
.odr-floor { fill: var(--odr-floor); }
#odr-g-links line, #odr-g-links .odr-chord { stroke: var(--odr-link); stroke-width: .8; fill: none; }
.odr-tile { fill: var(--odr-tile); stroke: rgba(255, 255, 255, .28); stroke-width: .5; stroke-dasharray: 1.2 1; }
.odr-tile:not([data-s="-1"]) { stroke: var(--odr-pc); stroke-width: .9; stroke-dasharray: none; }
.odr-sp[data-legal="1"] .odr-tile { stroke: var(--odr-sel); stroke-width: 1.1; stroke-dasharray: 1.6 1; filter: drop-shadow(0 0 1.2px var(--odr-sel)); }
.odr-sp[data-legal="1"][data-hov="1"] .odr-tile { fill: color-mix(in oklch, var(--odr-sel) 25%, var(--odr-tile)); filter: drop-shadow(0 0 1.6px var(--odr-sel)); }
/* the win: your spaces take 30% of your colour (an overlay disc that fades in over the win fill — mock L406–407) */
.odr-tintC { fill: var(--odr-pc); opacity: .3; pointer-events: none; animation: odr-tintin var(--odr-winfill) ease-out both; }
@keyframes odr-tintin { from { opacity: 0 } }
.odr-halo { fill: none; stroke: var(--odr-pc); stroke-width: .5; opacity: .6; }
.odr-homeR { fill: none; stroke: var(--odr-pc); stroke-width: .35; stroke-dasharray: .5 .9; opacity: .8; }
.odr-no { display: none; opacity: .8; }
.odr-no circle, .odr-no line { fill: none; stroke: var(--odr-dim); stroke-width: .6; }
.odr-sp[data-flash="1"] .odr-no { display: inline; }
.odr-hillR { fill: var(--odr-floor); stroke: var(--odr-link); stroke-width: .3; }
.odr-hillT { fill: var(--odr-dim); font-weight: 800; letter-spacing: .12em; text-anchor: middle; }
.odr-lab { fill: var(--odr-dim); font-weight: 700; text-anchor: middle; }
.odr-plant circle { fill: none; stroke: var(--odr-pc); stroke-width: .7; stroke-dasharray: 1.2 1.2; }
.odr-plant .odr-plant2 { stroke-width: .4; stroke-dasharray: none; opacity: .5; }
/* pennants (mock L388–396) */
.odr-pole { stroke: var(--odr-txt); stroke-width: .45; stroke-linecap: round; }
.odr-pen { fill: var(--odr-pc); stroke: var(--odr-ink); stroke-width: .3; }
.odr-penG { fill: var(--odr-ink); font-weight: 900; text-anchor: middle; }
.odr-ghost .odr-pen { fill: var(--odr-floor); stroke: var(--odr-pc); stroke-width: .45; stroke-dasharray: .9 .6; }
.odr-ghost .odr-penG, .odr-ghostQ { fill: var(--odr-pc); font-weight: 800; }
.odr-glow { filter: drop-shadow(0 0 1.4px var(--odr-pc)); }
.odr-banold { fill: var(--odr-pc); opacity: .35; transform: skewY(-8deg); transform-box: fill-box; transform-origin: left center; }
.odr-wind { stroke: var(--odr-txt); stroke-width: .35; fill: none; }
.odr-flip { animation: odr-flutter var(--odr-flutter) ease-in-out both; }
@keyframes odr-flutter { 0% { transform: skewY(-10deg) } 35% { transform: skewY(8deg) } 70% { transform: skewY(-4deg) } 100% { transform: skewY(0) } }
/* lines: a MOVE arrow (owner badge) and a BACK tube ("+1") — mock L424–448 */
.odr-arrow { stroke: var(--odr-pc); stroke-linecap: round; stroke-linejoin: round; fill: none; }
.odr-head, .odr-dot { fill: var(--odr-pc); }
.odr-dot { stroke: var(--odr-ink); stroke-width: .3; }
.odr-tubeO { stroke: var(--odr-pc); stroke-linecap: round; fill: none; stroke-linejoin: round; }
.odr-tubeI { stroke: var(--odr-floor); stroke-linecap: round; fill: none; stroke-linejoin: round; }
.odr-badgeR { fill: var(--odr-ink); stroke: var(--odr-pc); stroke-width: .4; }
.odr-badgeG { fill: var(--odr-pc); font-weight: 900; text-anchor: middle; }
.odr-badgeT { fill: var(--odr-txt); font-weight: 800; text-anchor: middle; }
.odr-lock rect { fill: var(--odr-txt); }
.odr-lock path { stroke: var(--odr-txt); fill: none; }
.odr-spark { stroke: var(--odr-spark); stroke-width: .5; fill: none; }
.odr-spring { stroke: var(--odr-txt); stroke-width: .45; fill: none; }
.odr-line[data-st="faded"], .odr-line[data-st="last"] { opacity: .3; }
.odr-line[data-st="gone"], .odr-line[data-st="lastgone"] { opacity: .18; }
.odr-line[data-st="hover"] { filter: drop-shadow(0 0 1.2px var(--odr-pc)); }
/* OR-P2: a lit target's mark (→ move / +1 back / ✕ clear) and a self-clash arrow (two of yours into one space) */
.odr-tapmark rect { fill: var(--odr-sel); stroke: var(--odr-ink); stroke-width: .35; }
.odr-tapmark text { fill: var(--odr-ink); font-weight: 900; text-anchor: middle; }
.odr-tapmark[data-t="✕"] rect { fill: var(--odr-txt); }
.odr-line[data-clash="1"] .odr-arrow { stroke-dasharray: 1.2 .9; }
.odr-x circle { fill: var(--odr-txt); }
.odr-x text { fill: var(--odr-ink); font-size: 2.6px; font-weight: 900; text-anchor: middle; }
/* units */
.odr-shape { fill: var(--odr-pc); stroke: var(--odr-ink); stroke-width: .5; }
.odr-shapeGhost { fill: none; stroke: var(--odr-pc); stroke-dasharray: .8 .7; stroke-width: .45; }
.odr-ring { fill: none; stroke: var(--odr-txt); stroke-width: .55; }
.odr-ring[data-m="default"] { stroke: var(--odr-dim); stroke-width: .45; stroke-dasharray: .9 .8; }
.odr-ring[data-m="lock"] { stroke: var(--odr-dim); }
.odr-ring[data-m="sel"] { stroke: var(--odr-sel); stroke-width: .9; fill: color-mix(in oklch, var(--odr-sel) 22%, transparent); filter: drop-shadow(0 0 1.2px var(--odr-sel)); }
.odr-ring[data-m="hold"] { stroke-width: .5; }
.odr-u[data-hov="1"] .odr-shape { filter: brightness(1.15) drop-shadow(0 0 1px var(--odr-sel)); }
.odr-H { fill: var(--odr-dim); font-weight: 800; text-anchor: middle; }
.odr-speed { stroke: var(--odr-txt); stroke-width: .4; opacity: .6; }
.odr-popring { fill: none; stroke: var(--odr-txt); stroke-width: .4; stroke-dasharray: .6 1; }
.odr-dropdash { stroke: var(--odr-pc); stroke-width: .6; }
.odr-shadow { fill: none; stroke: var(--odr-txt); stroke-width: .35; }
.odr-plus { fill: var(--odr-txt); font-weight: 900; text-anchor: middle; }
/* callouts (OR-F2: placed + clamped by odrCalloutXY) */
.odr-callout { filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, .8)); animation: odr-pillin .25s ease-out both; transform-box: fill-box; transform-origin: center; }
.odr-burst { fill: var(--odr-spark); opacity: .9; }
.odr-pillR { fill: #fff; stroke: var(--odr-ink); stroke-width: .35; }
.odr-pillT { fill: #111; font-size: 3px; font-weight: 800; letter-spacing: .04em; text-anchor: middle; }
.odr-hit { cursor: default; }
.odr-root[data-lock="0"] .odr-hit { cursor: pointer; }

/* ── the beats (FEEL SPEC) ── */
@keyframes odr-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes odr-pillin { from { opacity: 0; scale: .6 } to { opacity: 1; scale: 1 } }
@keyframes odr-snapA { from { translate: calc(var(--nx) * -1px) calc(var(--ny) * -1px) } to { translate: 0 0 } }
@keyframes odr-snapB { from { translate: calc(var(--nx) * 1px) calc(var(--ny) * 1px) } to { translate: 0 0 } }
@keyframes odr-sparkle { 0% { opacity: 0 } 30% { opacity: 1 } 100% { opacity: .9 } }
@keyframes odr-kick { 0% { translate: calc(var(--ux) * -1px) calc(var(--uy) * -1px) } 60% { translate: 0 0 } 72% { translate: calc(var(--ux) * -.35px) calc(var(--uy) * -.35px) } 100% { translate: 0 0 } }
@keyframes odr-slide { from { translate: calc(var(--dx) * 1px) calc(var(--dy) * 1px) } to { translate: 0 0 } }
@keyframes odr-pop { to { translate: calc(var(--px) * 1px) calc(var(--py) * 1px); rotate: 28deg; opacity: .6 } }
@keyframes odr-dropin { from { translate: 0 -6px; opacity: 0 } 70% { translate: 0 .5px; opacity: 1 } to { translate: 0 0; opacity: 1 } }
.odr-root[data-stage="reveal"] #odr-g-lines .odr-line { animation: odr-in .4s ease-out both; }
.odr-line[data-st="cut"] .odr-halfA { animation: odr-snapA .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.odr-line[data-st="cut"] .odr-halfB { animation: odr-snapB .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.odr-line[data-st="cut"] .odr-spark { animation: odr-sparkle .5s ease-out both; }
.odr-line[data-st="bounce"] .odr-kick { animation: odr-kick .5s ease-out both; }
.odr-slide { animation: odr-slide var(--odr-slide) cubic-bezier(.2, .85, .3, 1.12) both; }
.odr-pop { animation: odr-pop .5s ease-in forwards; transform-box: view-box; }
.odr-dropin { animation: odr-dropin var(--odr-drop) cubic-bezier(.3, 1.4, .6, 1) both; }
.odr-root[data-instant="1"] .odr-svg *, .odr-root[data-instant="1"] .odr-svg { animation: none !important; transition: none !important; }

/* the feed — phone: 2 lines (mock L185–189) */
.odr-feed { order: 4; flex: none; height: 44px; padding: 0 10px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-radius: 10px; }
.odr-feed .odr-k { display: none; }
.odr-fl { flex: none; height: 17px; font-size: 12px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--odr-dim); }
.odr-fl[data-l="0"] { color: var(--odr-txt); font-weight: 600; }
.odr-fl[data-l="2"], .odr-fl[data-l="3"] { display: none; }

/* controls — phone: count + hint, SEAL 148 × 56 */
.odr-ctl { order: 5; flex: none; height: 56px; display: flex; align-items: center; gap: 10px; }
.odr-ctlt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.odr-ctlt b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.odr-hint { flex: none; height: 16px; line-height: 16px; font-size: 12px; color: var(--odr-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odr-seal { flex: none; width: 148px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--odr-r); border: 2px solid transparent; background: var(--odr-btn); color: var(--odr-btnTxt); cursor: pointer; transition: filter .12s, box-shadow .12s, transform .1s; }
.odr-sealA { font-size: 15px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.odr-sealB { font-size: 10px; font-weight: 600; opacity: .85; white-space: nowrap; }
.odr-seal:not([data-st="ready"]) { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 6px, transparent 6px 12px); color: var(--odr-dim); border: 2px dashed var(--odr-dim); cursor: default; }
@media (hover: hover) { .odr-seal[data-st="ready"]:hover { filter: brightness(1.14); box-shadow: 0 0 0 3px var(--odr-txt); } }
.odr-seal[data-st="ready"]:active { transform: translateY(2px); filter: brightness(.88); }
/* 🌐 online (MP slice B): ⚖️ ODB2 a SEALED button stays live — it takes the seal back (solid, a clickable border, the
   dashed look stays for the locked states); ⚖️ ODB1 the window clock in the second line turns red under 10 s. The text
   never changes width (locked layout): the second line is clipped, never wrapped. */
.odr-seal[data-st="sealed"]:not(:disabled) { border-style: solid; color: var(--odr-txt); cursor: pointer; }
@media (hover: hover) { .odr-seal[data-st="sealed"]:not(:disabled):hover { box-shadow: 0 0 0 3px var(--odr-dim); } }
.odr-sealB { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; box-sizing: border-box; }
.odr-seal[data-hurry="1"] .odr-sealB { color: #ff6b6b; opacity: 1; font-weight: 800; }

/* the last-round toggle (mock L513–515): off · on · disabled (round 1) */
.odr-tog { position: relative; flex: none; width: 40px; height: 24px; padding: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1.5px solid var(--odr-dim); cursor: pointer; transition: box-shadow .12s; }
.odr-tog i { position: absolute; top: 1.5px; left: 2px; width: 18px; height: 18px; border-radius: 9px; background: var(--odr-txt); }
.odr-tog[data-on="1"] { background: var(--odr-sel); border-color: var(--odr-sel); }
.odr-tog[data-on="1"] i { left: 18px; background: var(--odr-ink); }
.odr-tog[data-dis="1"] { border-style: dashed; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 4px, transparent 4px 8px); cursor: default; }
.odr-tog[data-dis="1"] i { background: var(--odr-dim); opacity: .5; }
@media (hover: hover) { .odr-tog[data-dis="0"]:hover { box-shadow: 0 0 0 3px color-mix(in oklch, var(--odr-txt) 35%, transparent); } }

/* ── the banner layer: REVEAL / AUTUMN / WIN. ABSOLUTE inside the root (never fixed — board-fit.js's rule), over the
   FEED strip, never over the map (OR-F5) ── */
.odr-banner { position: absolute; z-index: 20; left: 12px; right: 12px; bottom: 76px; height: 44px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 12px; background: var(--odr-txt); color: var(--odr-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 3px var(--odr-ink); pointer-events: none; white-space: nowrap; }
.odr-banner[data-on="1"] { display: flex; animation: odr-in .18s ease-out both; }
.odr-bannerk { font-size: 9px; font-weight: 700; letter-spacing: .14em; opacity: .75; }
.odr-banner b { font-size: 15px; font-weight: 900; letter-spacing: .04em; line-height: 1; }

/* the end-screen rows — ⛔ the end screen is appended to <body>, so NO --odr-* token reaches it: literals only */
.odr-endrows { display: flex; flex-direction: column; gap: 4px; }
.odr-endrow { display: grid; grid-template-columns: 24px 1fr 64px 44px; gap: 8px; align-items: center; font-size: 14px; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.odr-endrow[data-win="1"] { font-weight: 800; font-size: 16px; }
.odr-endbadge { width: 20px; text-align: center; font-size: 15px; font-weight: 900; }
.odr-endunits { font-size: 12px; opacity: .75; text-align: right; }
.odr-endrow b { text-align: right; font-variant-numeric: tabular-nums; }
.odr-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .odr-root *, .odr-root *::before, .odr-root *::after { animation: none !important; transition: none !important; }
}

/* ── PHONE chrome ───────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #orders-game-screen.odr-playing .wrap { padding: 0 2px; max-width: none; }
  #orders-game-screen.odr-playing .topbar { display: none; }
  #orders-game-screen.odr-playing.odr-topbar-open .topbar { display: flex; }
  /* the notch: the hidden .topbar carried the safe-area inset (predicely_notch_safe_area; test/_safe_area_top.test.js).
     PADDING, never margin — a top margin collapses through the screen div. */
  #orders-game-screen.odr-playing:not(.odr-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
  /* 3 players: name on row 1, units · icon · flags on row 2 */
  .odr-root[data-n="3"] .odr-chip { align-items: stretch; flex-wrap: wrap; align-content: center; row-gap: 3px; }
  .odr-root[data-n="3"] .odr-av { align-self: center; }
  .odr-root[data-n="3"] .odr-cmid { flex: 1 1 0; justify-content: center; }
  .odr-root[data-n="3"] .odr-c1 { order: 0; }
  .odr-root[data-n="3"] .odr-c1 .odr-cicon { display: none; }
  .odr-root[data-n="3"] .odr-c2 { gap: 0; }
  .odr-root[data-n="3"] .odr-c2::after { content: ''; flex: 1 1 0; }
  .odr-root[data-n="3"] .odr-cflags { width: auto; margin-left: 0; flex-direction: row; align-items: baseline; gap: 1px; position: absolute; right: 6px; bottom: 6px; }
  .odr-root[data-n="3"] .odr-cflags b { font-size: 15px; }
  .odr-root[data-n="3"] .odr-cflags::before { content: attr(data-icon); width: 14px; margin-right: 4px; font-size: 11px; font-weight: 800; color: var(--odr-dim); text-align: center; }
  .odr-root[data-n="3"] .odr-delta { top: -14px; right: 0; transform: none; margin: 0; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (1280 × 553; 593 with the chat pill — the map grows) ── */
@media (min-width: 1000px) {
  #orders-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .odr-root {
    width: 1280px; height: var(--odr-fit-h, 553px); padding: 16px;
    flex-direction: row; gap: 16px;
  }
  .odr-railL, .odr-railR { display: flex; flex: none; width: 288px; flex-direction: column; gap: 10px; min-height: 0; }
  .odr-head { order: 0; height: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--odr-panel); border: var(--odr-panelBd); border-radius: var(--odr-r); overflow: hidden; }
  .odr-h1 { height: auto; justify-content: space-between; }
  .odr-round { width: 160px; font-size: 20px; }
  .odr-pill { width: 80px; }
  .odr-hgap, .odr-menu, .odr-ptog { display: none; }
  .odr-sub { display: block; font-size: 13px; color: var(--odr-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .odr-chips { order: 0; display: flex; flex-direction: column; gap: 10px; }
  .odr-chip { height: 70px; gap: 12px; padding: 0 14px; border-radius: var(--odr-r); }
  .odr-av { width: 40px; height: 40px; }
  .odr-avb { width: 20px; height: 20px; font-size: 9px; }
  .odr-cmid { gap: 7px; }
  .odr-c1 { justify-content: space-between; gap: 6px; }
  .odr-cname { font-size: 15px; }
  .odr-cicon { display: none; }
  .odr-cstat { display: block; flex: none; width: 104px; text-align: right; font-size: 12px; font-weight: 600; color: var(--odr-dim); white-space: nowrap; overflow: hidden; }
  .odr-slots { display: flex; gap: 3px; }
  .odr-slot { width: 14px; height: 14px; border-radius: 3px; border: 1px dashed var(--odr-dim); opacity: .6; }
  .odr-slot[data-on="1"] { border: 0; opacity: 1; background: var(--odr-pc); box-shadow: inset 0 0 0 1px var(--odr-ink); }
  .odr-chip .odr-slot { --odr-pc: inherit; }
  .odr-chip[data-s="0"] .odr-slot[data-on="1"] { background: var(--odr-p0); }
  .odr-chip[data-s="1"] .odr-slot[data-on="1"] { background: var(--odr-p1); }
  .odr-chip[data-s="2"] .odr-slot[data-on="1"] { background: var(--odr-p2); }
  .odr-cunits { font-size: 12px; }
  .odr-cflags { width: 40px; margin-left: 0; }
  .odr-cflags b { font-size: 26px; }
  .odr-cfk { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--odr-dim); }
  .odr-cfk1 { display: none; }
  .odr-delta { top: -17px; right: -2px; transform: none; margin: 0; }
  .odr-flex { display: block; flex: 1 1 0; min-height: 0; }
  .odr-togrow { display: flex; flex: none; height: 52px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; font-size: 13px; font-weight: 600; }
  .odr-togv { display: flex; align-items: center; gap: 8px; }
  .odr-togt { width: 26px; font-size: 11px; font-weight: 700; color: var(--odr-dim); }
  .odr-mid { order: 0; }
  .odr-feed { order: 0; height: 132px; padding: 12px 14px; justify-content: flex-start; gap: 6px; border-radius: var(--odr-r); }
  .odr-feed .odr-k { display: block; }
  .odr-fl { height: 18px; line-height: 18px; font-size: 13px; }
  .odr-fl[data-l="2"], .odr-fl[data-l="3"] { display: block; }
  .odr-orders { display: flex; flex: none; flex-direction: column; gap: 6px; padding: 12px 14px; }
  .odr-oh { flex: none; height: 17px; display: flex; justify-content: space-between; align-items: center; }
  .odr-oh b { width: 48px; height: 17px; line-height: 17px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .odr-rows { height: 176px; display: flex; flex-direction: column; gap: 4px; }   /* 6 rows (⚖️ OR-P4: 6 units at 3p) */
  .odr-row { height: 26px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 8px; font-size: 13px; color: var(--odr-dim); border: 1px dashed var(--odr-line); }
  .odr-row[data-on="0"] { visibility: hidden; }
  .odr-row[data-set="1"] { background: rgba(255, 255, 255, .07); color: var(--odr-txt); border-style: solid; border-color: transparent; }
  .odr-row[data-sel="1"] { border: 1px solid var(--odr-sel); }
  .odr-rb { width: 18px; height: 18px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 900; border: 1px dashed var(--odr-dim); color: var(--odr-dim); }
  .odr-row[data-set="1"] .odr-rb { background: var(--odr-txt); color: var(--odr-ink); border: 0; }
  .odr-ru { width: 70px; flex: none; font-weight: 700; white-space: nowrap; }
  .odr-ro { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .odr-railR > .odr-seal { display: flex; width: 100%; height: 64px; }
  .odr-railR > .odr-seal .odr-sealA { font-size: 18px; letter-spacing: .06em; }
  .odr-railR > .odr-seal .odr-sealB { font-size: 12px; }
  .odr-ctl { display: none; }
  /* OR-F5: the banner covers the FEED panel (right rail top), never the map */
  .odr-banner { left: auto; right: 16px; top: 16px; bottom: auto; width: 288px; height: 132px; gap: 6px; border-radius: var(--odr-r); }
  .odr-bannerk { font-size: 11px; }
  .odr-banner b { font-size: 26px; }
}