/* TrigammonX v2.2.0 — 01-base-layout.css
 * Auto-extracted verbatim from TrigammonX-v2.1.9.html's single <style> block
 * as part of the v2.2.0 modularisation pass (base layout, reset, root variables, branded header, primary page/panel/button/layout foundations, dice animation keyframes).
 * See README-ARCHITECTURE.md for exact cascade/load order.
 */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── v180c: Simulation DOM Freeze — page-stability CSS ──
   overflow-anchor:none stops the browser from "fixing" scroll position
   as content above the viewport changes height, which was contributing
   to the page jumping during a fast Auto Match run. The min-heights on
   panels below prevent the right panel / bottom area from expanding and
   collapsing every time their content is rendered. */
html {
  overflow-anchor: none;
}

body.simulation-batch-active {
  overflow-anchor: none;
}

body.simulation-batch-active * {
  scroll-behavior: auto !important;
}

body.simulation-batch-active .move-log {
  overflow-anchor: none;
}

body.simulation-batch-active .bottom-admin-shell,
body.simulation-batch-active .under-board-actions,
body.simulation-batch-active .under-board-controls,
body.simulation-batch-active .under-board-borne-off,
body.simulation-batch-active .right-panel {
  contain: layout paint;
}

body.simulation-batch-active #board-rotation-shell {
  transition: none !important;
}

body.simulation-batch-active .pip-fill {
  transition: none !important;
}

body.simulation-batch-active button {
  transition: none !important;
}

/* ── v180d: Headless Simulation Runner ──
   Fixed floating status box, plus stronger transition/animation freezes
   so a Simulation Auto Match run touches as little of the page as
   possible. The box itself is position:fixed and pointer-events:none,
   so it never affects page layout or height. */
.headless-sim-status {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  width: 260px;
  padding: 10px 12px;
  background: rgba(4, 6, 14, 0.96);
  border: 1px solid #ffd700;
  border-radius: 10px;
  color: #ffd700;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 0 18px rgba(0,0,0,0.65);
  pointer-events: none;
}

body.headless-simulation-active {
  overflow-anchor: none;
}

body.headless-simulation-active * {
  scroll-behavior: auto !important;
}

body.headless-simulation-active #board-rotation-shell,
body.headless-simulation-active .pip-fill,
body.headless-simulation-active button,
body.headless-simulation-active .checker {
  transition: none !important;
  animation: none !important;
}

/* ════════════════════════════════════════════════════════════════
   v185 — PREMIUM TABLETOP / DIGITAL HUD VISUAL SYSTEM
   ════════════════════════════════════════════════════════════════
   Design tokens. Every color below traces back to this palette —
   warm gold for primary accents/emphasis, cool soft blue for
   secondary glow and informational states, deep navy/black for the
   base. No new neon hues are introduced anywhere in this pass. */
:root {
  --tx-bg-deep:      #05070d;   /* page background floor */
  --tx-bg-panel:     #0c1120;   /* panel fill */
  --tx-bg-panel-2:   #0a0e1a;   /* secondary/recessed fill (admin, inputs) */
  --tx-line:         #232c47;   /* hairline borders */
  --tx-line-soft:    rgba(120,140,200,0.16);
  --tx-gold:         #d8b46a;   /* primary accent — warm, not bright yellow */
  --tx-gold-bright:  #f0cf8c;
  --tx-gold-dim:     rgba(216,180,106,0.35);
  --tx-blue-glow:    #6fa8d8;   /* secondary accent — soft cool blue */
  --tx-blue-dim:     rgba(111,168,216,0.25);
  /* v253: readability pass — raised across ALL tiers (not Pro-only). The
     old warm-off-white/mid-grey/dark-grey trio read as too low-contrast
     for ordinary player-facing labels against the dark tabletop
     background. White/near-white is now the default for anything the
     player is expected to read; --tx-text-faint is reserved for
     genuinely secondary/de-emphasised text only. */
  --tx-text:         #FFFFFF;
  --tx-text-dim:     #E0E4EA;
  --tx-text-faint:   #B8C0CC;
  --tx-radius:       10px;
  --tx-radius-sm:    7px;

  /* v186: dimensional/bevel system — raised-panel "physical" depth.
     Every beveled surface in this pass draws from these same four
     shadow recipes so the depth language stays consistent rather than
     each panel inventing its own shadow stack. */
  --tx-bevel-top:    rgba(255,255,255,0.07);   /* light catching the top edge */
  --tx-bevel-bottom: rgba(0,0,0,0.55);          /* shadow pooling at the base */
  --tx-raised:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -2px 6px rgba(0,0,0,0.35) inset,
    0 6px 16px rgba(0,0,0,0.45),
    0 1px 0 rgba(0,0,0,0.8);
  --tx-raised-lg:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -3px 10px rgba(0,0,0,0.4) inset,
    0 14px 30px rgba(0,0,0,0.5),
    0 2px 0 rgba(0,0,0,0.85);
}

body {
  margin: 0;
  color: var(--tx-text);
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  padding: 18px 16px 28px;
  min-height: 100vh;
  /* v186: added a corner vignette — the table surface reads as lit from
     above and receding into shadow at the edges, reinforcing the raised
     "tabletop" framing without altering the existing background image
     or its darkening overlay. */
  background:
    radial-gradient(ellipse 1200px 700px at 50% -4%, rgba(111,168,216,0.07), transparent 60%),
    radial-gradient(ellipse 1600px 1100px at 50% 38%, rgba(0,0,0,0), rgba(0,0,0,0.35) 100%),
    linear-gradient(rgba(2,3,8,0.86), rgba(2,3,8,0.92)),
    /* v2.2.0: was url('trigammon-background-tech.png') when this rule lived
       inline in TrigammonX-v2.1.9.html's own <style> block, resolved relative
       to the HTML file's own location. Now that this rule lives in an
       external stylesheet under trigammonx-v2.2.0/css/, a CSS url() resolves
       relative to THIS FILE's location instead (per the CSS spec), so the
       path is corrected to walk back up to the site root where the asset
       itself still lives, unrenamed and unmoved. */
    url('../../trigammon-background-tech.png') center center / cover no-repeat fixed;
  background-color: var(--tx-bg-deep);
}

/* v257: the separate v256 "Pro background presets" mechanism
   (body.tx-custom-background / --tx-custom-page-bg) is superseded by the
   unified Full UI Theme system below — see .tx-fulltheme-solid-bg and
   the body.tx-full-* theme blocks in the "v257 — UNIFIED FULL UI THEMES"
   section further down this stylesheet. */

h1 {
  color: var(--tx-gold);
  font-size: 16px;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-align: center;
}

/* ── Branded header (v185) ──
   The one deliberately "designed" moment on the page — a quiet gold
   serif wordmark with a hairline rule beneath it. Everything else on
   the page stays disciplined so this reads as the signature element. */
.tx-header {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto 18px;
  text-align: center;
}
.tx-header-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--tx-gold-bright);
  /* v186: layered text-shadow gives the wordmark a faint engraved/
     embossed quality — a bright top edge and a darker drop beneath,
     on top of the existing soft glow. */
  text-shadow:
    0 0 22px rgba(216,180,106,0.30),
    0 1px 0 rgba(255,238,210,0.25),
    0 2px 2px rgba(0,0,0,0.7);
  line-height: 1.1;
}
.tx-header-tagline {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--tx-blue-glow);
  margin-top: 6px;
  opacity: 0.85;
}
.tx-header-rule {
  width: min(420px, 70%);
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg,
    transparent,
    var(--tx-gold-dim) 30%,
    var(--tx-gold-dim) 70%,
    transparent);
}
.tx-header-version {
  margin-top: 8px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--tx-text-faint);
}

/* ── Public Beta v1.0: small professional Beta badge beside the
   TRIGAMMONX wordmark — intentional/polished, not a developer/debug
   badge. Purely presentational. ── */
.tx-beta-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 11px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--tx-gold-bright);
  border: 1px solid var(--tx-gold-dim);
  border-radius: 999px;
  background: rgba(216,180,106,0.08);
}

/* ── Public Beta v1.0: tasteful, unobtrusive Beta banner — styled to
   blend with the existing premium tabletop design (same card language
   as .pro-teaser/.landscape-tip-banner: panel fill, hairline gold
   border, soft radius). Always in normal document flow, never a modal/
   overlay/popup; shown once, continuously, never repeats or interrupts
   play. ── */
.beta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto 18px;
  padding: 10px 18px;
  text-align: center;
  background: var(--tx-bg-panel);
  border: 1px solid var(--tx-gold-dim);
  border-radius: var(--tx-radius);
  box-shadow: var(--tx-raised);
}
.beta-banner-text {
  font-size: 11px;
  line-height: 1.6;
  color: var(--tx-text-dim);
  letter-spacing: 0.2px;
}
.beta-banner-pro-note {
  display: block;
  color: var(--tx-text-faint);
}
.beta-feedback-btn {
  flex: 0 0 auto;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  padding: 7px 14px;
  border: 1px solid var(--tx-gold-dim);
  border-radius: var(--tx-radius-sm);
  background: transparent;
  color: var(--tx-gold-bright);
  cursor: pointer;
  white-space: nowrap;
}
.beta-feedback-btn:hover {
  background: rgba(216,180,106,0.12);
}

/* ── Public Beta v1.0: small unobtrusive note beside the Commentary
   selector. Purely presentational, matches .commentary-pack-status'
   visual weight. ── */
.commentary-adult-note {
  font-size: 10px;
  color: var(--tx-text-faint);
  margin: 2px 0 8px;
  letter-spacing: 0.2px;
}

/* ── Public Beta v1.0: Move History (Pro) is intentionally not exposed
   to public Beta players yet (still under owner testing internally).
   Presentation-level hide only — the underlying moveHistoryTurns
   recording/save/Take-Back logic (see JS) is completely untouched and
   remains dormant; this rule only stops the card from rendering. ── */
#move-history-card {
  display: none;
}

/* ── Page layout: board column (title+clocks+board) | right panel (v176) ── */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.board-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.page-title {
  width: 100%;
  text-align: center;
  margin-bottom: 12px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tx-text-faint);
}

/* v262: landscape tip banner — hidden by default and on every viewport
   except very narrow portrait phones (see media query below). Always in
   normal document flow (never position:fixed/absolute), so it can never
   block, cover, or disable board/controls — it just pushes content down
   a few pixels like any other card, and is fully dismissible. */
.landscape-tip-banner {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  padding: 7px 10px;
  margin-bottom: 10px;
  background: rgba(216,180,106,0.08);
  border: 1px solid rgba(216,180,106,0.35);
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--tx-text-faint);
}
.landscape-tip-banner.tip-active {
  display: none; /* overridden to flex only inside the narrow-portrait media query below */
}
.lt-dismiss {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--tx-text-faint);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.lt-dismiss:hover {
  color: var(--tx-gold);
}
@media (max-width: 480px) and (orientation: portrait) {
  .landscape-tip-banner.tip-active {
    display: flex;
  }
}

.clock-panel-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

/* ── Shared panel styles (v185: control-console treatment;
   v186: beveled/raised depth) ──
   A faint gradient border (via background-clip layering) plus the
   shared --tx-raised shadow recipe gives every panel a slight
   "physical, lifted off the table" quality without going neon. */
.left-panel,
.right-panel {
  background:
    linear-gradient(180deg, rgba(216,180,106,0.06), transparent 40%),
    var(--tx-bg-panel);
  border: 1px solid var(--tx-line);
  border-top-color: rgba(255,255,255,0.08);
  border-radius: var(--tx-radius);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 10px;
  box-shadow: var(--tx-raised-lg);
}

.right-panel {
  align-self: start;
  position: static;
}

.panel-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--tx-gold);
  border-bottom: 1px solid var(--tx-line);
  padding-bottom: 8px;
  margin-bottom: 4px;
  font-family: 'Segoe UI', sans-serif;
}

.panel-section-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--tx-text-dim);
  margin-top: 6px;
  margin-bottom: 3px;
  padding-top: 6px;
  border-top: 1px solid var(--tx-line-soft);
}
.panel-section-title:first-child {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}

/* ── v171: general dropdown readability ── */
select {
  background: var(--tx-bg-panel-2);
  color: var(--tx-text);
  border: 1px solid var(--tx-gold-dim);
  border-radius: 5px;
  padding: 5px 8px;
}
select option {
  background: var(--tx-bg-panel-2);
  color: var(--tx-text);
}
select:focus {
  outline: none;
  border-color: var(--tx-gold);
  box-shadow: 0 0 8px var(--tx-gold-dim);
}

/* ── Admin panel buttons — compact vertical stack ── */
.admin-panel button {
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
}

/* ── Player panel ── */
.player-panel .player-action-btns {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
}
.player-panel .player-action-btns button {
  width: 100%;
  padding: 9px 14px;
  font-size: 13px;
  text-align: center;
}
/* Roll Dice + End Turn get extra emphasis */
.btn-roll-dice {
  border-color: var(--tx-gold) !important;
  color: var(--tx-gold-bright) !important;
  font-size: 14px !important;
}
.btn-roll-dice:hover { background: var(--tx-gold) !important; color: #14110a !important; }
.btn-end-turn {
  border-color: var(--tx-blue-glow) !important;
  color: var(--tx-blue-glow) !important;
}
.btn-end-turn:hover { background: var(--tx-blue-glow) !important; color: #0a121a !important; }
/* v242 Fix 3, restyled v2.2.7: unmistakable "ready" state, toggled only by
   setEndTurnReady() — legality/toggle logic itself is unchanged, this is a
   visual-only strengthening. Owner feedback: the prior blue-filled
   treatment didn't stand out enough next to Roll Dice. Now uses the same
   warm-gold family as Roll Dice/the certificate accents (theme-aware via
   --tx-gold/--tx-gold-bright/--tx-gold-dim, no new colour tokens), with
   dark high-contrast text, a stronger border, a visible glow, and slightly
   bolder text — so READY unmistakably reads as "the next action" without
   competing with Take Back (which keeps its existing subdued amber). The
   NOT-ready state (no `.end-turn-ready` class) is untouched and stays
   subdued. A tasteful pulse is opt-in only under
   prefers-reduced-motion: no-preference — the static glow/fill alone is
   already unmistakable for reduced-motion users. */
.btn-end-turn.end-turn-ready {
  background: linear-gradient(180deg, var(--tx-gold-bright) 0%, var(--tx-gold) 100%) !important;
  color: #1a1204 !important;
  border-color: var(--tx-gold-bright) !important;
  border-width: 2px !important;
  font-weight: 700 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 0 14px 3px var(--tx-gold-dim),
    0 0 2px 1px var(--tx-gold-bright);
  transform: scale(1.03);
}
.btn-end-turn.end-turn-ready:hover {
  filter: brightness(1.06);
}
@media (prefers-reduced-motion: no-preference) {
  .btn-end-turn.end-turn-ready {
    animation: endTurnReadyPulse 1.8s ease-in-out infinite;
  }
}
@keyframes endTurnReadyPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.35),
      0 0 14px 3px var(--tx-gold-dim),
      0 0 2px 1px var(--tx-gold-bright);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.35),
      0 0 22px 6px var(--tx-gold-dim),
      0 0 4px 2px var(--tx-gold-bright);
  }
}

/* v263: Clear Move Marker and Take Back promoted from ad-hoc inline
   border-color/color styles to proper classes, so all four Player Action
   buttons share identical underlying construction. Border width (1px),
   radius (var(--tx-radius-sm)) and the layered depth box-shadow were
   already shared via the base button/.under-board-actions button rules
   above — untouched here. What was actually inconsistent was width
   (these two lacked .wide-action, so they sat at 130px vs. Roll Dice/End
   Turn's 150px) and hover treatment (no filled-hover state). Both now get
   .wide-action in the markup (matching width/shape) and the same
   filled-hover pattern as Roll Dice/End Turn. Colours are unchanged —
   grey for Clear Move Marker, amber for Take Back — this only changes
   construction, not colour meaning. */
.btn-clear-marker {
  border-color: #636e72 !important;
  color: #636e72 !important;
}
.btn-clear-marker:hover { background: #636e72 !important; color: #0d0d1a !important; }
.btn-take-back {
  border-color: #fdcb6e !important;
  color: #fdcb6e !important;
}
.btn-take-back:hover { background: #fdcb6e !important; color: #0d0d1a !important; }

/* ── Board panel ── */
.board-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
  max-width: 980px;
  position: relative;
  /* v188 safe layering hotfix: isolation:isolate gives .board-panel its
     own stacking context so the z-index scheme below (plinth=0,
     children=1, board-stage=2) is self-contained and cannot be
     disrupted by z-index values elsewhere on the page. */
  isolation: isolate;
}

/* v186: a wider, flatter "plinth" shape sitting behind #board-stage —
   gives the stage a genuine sense of resting on a raised tabletop base
   rather than floating flat against the page. Purely decorative: sized
   via percentage/inset so it never participates in flex layout, has no
   pointer-events, and sits at a lower z-index than the board itself.
   Public Beta v1.0 alignment fix: left/width now derive from the exact
   same width formula #board-stage itself uses (min(72vw,840px) — see
   #board-stage below, untouched) instead of an independent 76vw/880px
   figure that only coincidentally matched #board-stage at some widths.
   #board-stage is centred in .board-panel via flex margin:auto, which
   (correctly, per spec) collapses to flush-left once its own width
   formula exceeds .board-panel's available width — this happens at
   certain intermediate desktop widths (~1024-1150px, e.g. ~1128px)
   because of the fixed 300px right-column sidebar. The old left:50%/
   translateX(-50%) centered the plinth on .board-panel's own midpoint
   unconditionally, which is correct only while #board-stage also fits;
   once #board-stage collapses flush-left, that midpoint no longer
   matches #board-stage's actual centre, which is what produced the
   visible left/right mismatch. The new left: expression below
   reproduces the identical "centre, or clamp flush-left once
   over-constrained" arithmetic directly (max(0px, ...)), so the plinth
   tracks #board-stage's true rendered centre at every width — including
   that intermediate range — while still extending 20px evenly beyond
   #board-stage on both sides whenever there is room to. #board-stage
   itself (width/margin/flex behaviour) is completely untouched. */
.board-panel::before {
  content: '';
  position: absolute;
  left: calc(max(0px, (100% - min(72vw, 840px)) / 2) - 20px);
  top: -10px;
  width: calc(min(72vw, 840px) + 40px);
  height: min(74vw, 862px);
  max-width: 880px;
  max-height: 862px;
  background: linear-gradient(180deg, #11162a 0%, #0a0e1c 60%, #060810 100%);
  border-radius: 18px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.6),
    0 4px 0 rgba(0,0,0,0.7),
    inset 0 2px 0 rgba(255,255,255,0.04);
  z-index: 0;
  pointer-events: none;
}

/* v188 safe layering hotfix: every direct child of .board-panel gets
   position:relative + z-index:1 so it always paints above the
   decorative plinth ::before (z-index:0), keeping buttons, fields,
   and panels clickable and visible regardless of plinth height. */
.board-panel > * {
  position: relative;
  z-index: 1;
}

/* ── Override .board-wrap to fill its container ── */
.board-wrap {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  overflow: visible;
  margin: 0;
}

/* ── Info bar ── */
.info-bar {
  width: 100%;
  padding: 8px 14px;
  background: var(--tx-bg-panel-2);
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius-sm);
  color: var(--tx-text-dim);
  font-size: 12px;
  min-height: 32px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

/* ── Under-board control bar (v174) ──
   Houses the most-used action buttons directly below the board/info
   bar instead of far down the right panel. */
/* ── Under-board Borne Off (v175) ──
   Sits directly below the info bar so Blue/Green/Red trays are visible
   side-by-side without scrolling down into the right panel. */
.under-board-borne-off {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(216,180,106,0.05), transparent 35%),
    var(--tx-bg-panel);
  border: 1px solid var(--tx-line);
  border-top-color: rgba(255,255,255,0.07);
  border-radius: var(--tx-radius);
  padding: 12px 14px;
  box-shadow: var(--tx-raised);
}

.under-board-section-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--tx-gold);
  margin-bottom: 8px;
}

.under-board-borne-off .borne-off-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.under-board-borne-off .borne-player-box {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .under-board-borne-off .borne-off-display {
    grid-template-columns: 1fr;
  }
}

/* ── v254: Bar + Borne Off combined row ──
   Bar becomes a narrow left column (~20-25% width), Borne Off takes the
   remaining ~75-80% — same #bar-display / #borne-off-display markup and
   rendering as before, only the layout around them changed. Stacks
   vertically on narrow screens (same 760px breakpoint already used
   elsewhere under the board) so the Borne Off checker trays never get
   squeezed down to an unusable width. */
.under-board-bar-borneoff-row {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.under-board-bar-borneoff-row .under-board-bar-col {
  flex: 0 0 22%;
  width: 22%;
  min-width: 120px;
}

.under-board-bar-borneoff-row .under-board-bar-col .udp-col-bar {
  height: 100%;
  max-width: none;
}

.under-board-bar-borneoff-row .under-board-borneoff-col {
  flex: 1 1 78%;
  min-width: 0;
}

@media (max-width: 760px) {
  .under-board-bar-borneoff-row {
    flex-direction: column;
  }
  .under-board-bar-borneoff-row .under-board-bar-col {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
}

.under-board-controls {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(216,180,106,0.05), transparent 35%),
    var(--tx-bg-panel);
  border: 1px solid var(--tx-line);
  border-top-color: rgba(255,255,255,0.07);
  border-radius: var(--tx-radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--tx-raised);
}

/* v190b: primary action block — sits immediately below the dice/status
   panel so Roll Dice / End Turn are always close to the dice display.
   Shares all visual styling with .under-board-controls; kept as a
   separate class so the simulation-batch suppression, mobile overrides,
   and button sizing can be targeted independently if needed. */
.under-board-actions {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(216,180,106,0.05), transparent 35%),
    var(--tx-bg-panel);
  border: 1px solid var(--tx-line);
  border-top-color: rgba(255,255,255,0.07);
  border-radius: var(--tx-radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--tx-raised);
}

/* v265: Table Talk / Commentary, relocated directly below Player Actions /
   Game Flow — same visual language (background/border/radius/shadow/
   padding) as .under-board-actions/.under-board-controls immediately
   above and below it, so it reads as one continuous "playing the game"
   control stack rather than a leftover Pro card. */
.under-board-commentary {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(216,180,106,0.05), transparent 35%),
    var(--tx-bg-panel);
  border: 1px solid var(--tx-line);
  border-top-color: rgba(255,255,255,0.07);
  border-radius: var(--tx-radius);
  padding: 12px 14px;
  box-shadow: var(--tx-raised);
}
.under-board-commentary .panel-title { margin-top: 0; }

/* v2.1.6: Did You Know? / Beta Updates & Fixes — main-page row. Reuses
   .goc-lower-row/.goc-dyk-card/.goc-beta-card (already global, not
   scoped to #goc-card) verbatim for visual consistency with the same
   content reused inside the Winner/Results dashboard — this id rule
   only adds the vertical rhythm this stacked card layout needs
   (siblings here don't get it from a parent gap).
   v2.1.7: moved lower on the page (now after the public Game Trends
   charts, before Developer/Admin — see the HTML comment at its new
   location) so it reads as clearly secondary to live gameplay/Table
   Talk; this rule itself is unchanged. */
#tx-info-row { margin: 16px 0 0; }

/* v266: Move History (Pro) — same visual language as its under-board
   neighbors (.under-board-commentary etc.), collapsed by default via
   the .mh-collapsed class already present in the HTML on page load,
   exactly like .qs-collapsed for Quick Start. Player-facing only —
   completely separate card/CSS from the Technical Move Log. */
.move-history-card {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(216,180,106,0.05), transparent 35%),
    var(--tx-bg-panel);
  border: 1px solid var(--tx-line);
  border-top-color: rgba(255,255,255,0.07);
  border-radius: var(--tx-radius);
  padding: 12px 14px;
  box-shadow: var(--tx-raised);
}
.mh-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--tx-gold-bright);
  font-weight: bold;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
}
.move-history-card.mh-collapsed .mh-title { margin-bottom: 0; }
.move-history-card.mh-collapsed .mh-panel { display: none; }

.mh-panel {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mh-empty {
  font-size: 11px;
  color: var(--tx-text-dim);
  font-style: italic;
}
.mh-turn-group {
  border-left: 2px solid var(--tx-line);
  padding-left: 8px;
  min-width: 0;   /* allow long names to wrap/truncate instead of forcing horizontal overflow */
}
.mh-turn-blue  { border-left-color: #4aa3ff; }
.mh-turn-green { border-left-color: #55efc4; }
.mh-turn-red   { border-left-color: #ff6b6b; }
.mh-turn-header {
  font-size: 11px;
  font-weight: bold;
  color: var(--tx-text, #eee);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.mh-dice-line {
  font-size: 10px;
  color: var(--tx-text-dim);
  font-family: 'Courier New', monospace;
  margin: 2px 0 3px;
}
.mh-move-line {
  font-size: 11px;
  color: var(--tx-text, #eee);
  font-family: 'Courier New', monospace;
  padding-left: 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .mh-panel { max-height: 200px; }
}

.under-board-actions button {
  min-width: 130px;
  padding: 9px 14px;
  text-align: center;
  border-radius: var(--tx-radius-sm);
}

.under-board-actions .wide-action {
  min-width: 150px;
}

@media (max-width: 900px) {
  .under-board-actions button {
    width: 100%;
  }
}

.under-board-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tx-line-soft);
}
.under-board-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.under-board-row-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--tx-gold);
  min-width: 82px;
  font-family: 'Segoe UI', sans-serif;
}

.under-board-controls button {
  min-width: 130px;
  padding: 9px 14px;
  text-align: center;
  border-radius: var(--tx-radius-sm);
}

.under-board-controls .wide-action {
  min-width: 150px;
}

.under-board-controls .small-status {
  font-size: 10px;
  color: var(--tx-text-dim);
  font-family: 'Courier New', monospace;
  line-height: 1.35;
}

.under-board-inline-label {
  font-size: 11px;
  color: var(--tx-text-dim);
  display: flex;
  gap: 6px;
  align-items: center;
}

@media (max-width: 900px) {
  .under-board-row {
    flex-direction: column;
    align-items: stretch;
  }

  .under-board-row-title {
    min-width: 0;
  }

  .under-board-controls button {
    width: 100%;
  }
}

/* ── Bottom admin shell (v175) — collapsible, moved off the left column ── */
/* ── Bottom admin shell (v185: deliberately secondary) ──
   No gold accent, no glow, flatter background, smaller type. This area
   should read as "developer/testing tools," not part of the polished
   tabletop presentation above it. */
.bottom-admin-shell {
  width: 100%;
  max-width: 1400px;
  margin: 18px auto 0 auto;
  opacity: 0.94;
}

.admin-toggle-btn {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius-sm);
  background: transparent;
  color: var(--tx-text-faint);
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: normal;
  /* v186: explicitly stays flat — the chunky/raised button treatment
     below is for the main control console; Admin should keep reading
     as quiet and secondary rather than picking up the same depth. */
  box-shadow: none;
}
.admin-toggle-btn:hover {
  background: rgba(255,255,255,0.03);
  color: var(--tx-text-dim);
  box-shadow: none;
}
.admin-toggle-btn:active {
  transform: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

.bottom-admin-panel {
  margin-top: 8px;
  background: var(--tx-bg-panel-2);
  border: 1px dashed var(--tx-line);
  border-radius: var(--tx-radius);
  padding: 14px 12px 12px;
}

.bottom-admin-panel.collapsed {
  display: none;
}

.bottom-admin-panel .panel-title {
  color: var(--tx-text-faint);
  letter-spacing: 1.5px;
}

.bottom-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-items: start;
}

.admin-group {
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--tx-line-soft);
  border-radius: var(--tx-radius-sm);
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* v184: lets the Match / Balance Log group span the full grid width
   instead of being squeezed into a single narrow auto-fit column —
   the detailed per-game rows read much better with more room. */
.admin-group-wide {
  grid-column: 1 / -1;
}

.admin-group button {
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
}

@media (max-width: 650px) {
  .bottom-admin-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Move log ── */
.move-log {
  width: 100%;
  background: #070710;
  border: 1px solid var(--tx-line);
  border-radius: 6px;
  padding: 8px 12px;
  max-height: 130px;
  overflow-y: auto;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  color: #636e72;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}

/* ── Dice area inside player panel ── */
.dice-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
}
.dice-col { display: flex; flex-direction: column; gap: 4px; }
.dice-row { display: flex; gap: 5px; flex-wrap: wrap; }

/* ── Side-by-side Rolled / Available Moves (v177) ── */
.dice-status-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}
.dice-status-row .dice-col {
  min-width: 0;
}
.dice-col-rolled,
.dice-col-available {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--tx-line);
  border-radius: 6px;
  padding: 6px;
}
.dice-col-available .roll-type {
  margin-top: 4px;
  line-height: 1.35;
}
@media (max-width: 980px) {
  .dice-status-row {
    grid-template-columns: 1fr;
  }
}

/* ── Under-board Dice / Status panel (v186b) ──
   Horizontal strip directly under the board: Current Turn on the left,
   Rolled + Available Moves in the middle, Bar + Pips on the right.
   Reuses .dice-label / .dice-row / .roll-type / .pip-display /
   .turn-badge / .dice-col-rolled / .dice-col-available styling as-is —
   only the outer flex arrangement is new, so the moved panel keeps the
   same look it always had, just laid out horizontally instead of in a
   narrow vertical column. */
.under-board-dice-panel {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* was stretch — prevented vertical bloat */
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(216,180,106,0.05), transparent 35%),
    var(--tx-bg-panel);
  border: 1px solid var(--tx-line);
  border-top-color: rgba(255,255,255,0.07);
  border-radius: var(--tx-radius);
  padding: 10px 12px;
  box-shadow: var(--tx-raised);
}

.udp-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.udp-col-turn {
  flex: 0 0 auto;
  justify-content: center;
}

.udp-col-rolled,
.udp-col-available {
  flex: 1 1 140px;
}

.udp-col-bar,
.udp-col-pips {
  flex: 0 1 auto;
}

.udp-col-pips .pip-display {
  min-width: 150px;
}

/* Thin separators between the three logical groups (Turn | Dice | Bar+Pips)
   on wide screens — removed automatically once columns wrap to stacked
   rows on narrower screens, where a vertical rule would look stray. */
@media (min-width: 761px) {
  .udp-col-rolled {
    border-left: 1px solid var(--tx-line-soft);
    padding-left: 10px;
  }
  .udp-col-bar {
    border-left: 1px solid var(--tx-line-soft);
    padding-left: 10px;
  }
}

@media (max-width: 760px) {
  .under-board-dice-panel {
    flex-direction: column;
  }
  .udp-col-turn {
    align-items: flex-start;
  }
}

/* v190c layout polish — keep Rolled and Available Moves beside each other,
   and move Bar/Pips below the main action buttons. */
/* v190d hotfix: was flex: 1 1 420px — the large flex-basis forced this
   wrapper to claim 420px of space, and align-items:stretch on the parent
   then stretched it vertically to match the tallest sibling (turn badge),
   creating empty air below the rolled dice. flex: 1 1 auto with min-width:0
   lets it grow to fill available space without any artificial height floor. */
.udp-col-dice-combo {
  flex: 1 1 auto;
  min-width: 0;
}

.udp-dice-grid {
  display: grid;
  /* v263: was minmax(0,1fr) minmax(0,1fr) — equal columns left dead space
     to the right of Rolled (which only ever needs room for 2 fixed-size
     dice). max-content sizes the Rolled column to its actual content;
     Available Moves takes the rest via minmax(0,1fr). Dice size/animation,
     move chips, and dice values are untouched — this is a column-width
     change only. The narrow-screen stacking override just below
     (@media max-width:760px, grid-template-columns:1fr) is unchanged, so
     genuinely narrow screens still stack exactly as before. */
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px;
  align-items: start;   /* was stretch — caused empty height within each cell */
}

.udp-dice-grid .udp-col-rolled,
.udp-dice-grid .udp-col-available {
  border-left: none;
  padding-left: 0;
  min-width: 0;
}

.under-board-stats-strip {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: start;   /* was stretch */
}

/* v245: Pips moved to the right sidebar — Bar is now this strip's only
   column. Single-column so Bar doesn't leave an empty second column /
   wasted space where Pips used to sit. */
.under-board-stats-strip-bar-only {
  grid-template-columns: minmax(0, 1fr);
}
.under-board-stats-strip-bar-only .udp-col-bar {
  max-width: 320px;
}

.under-board-stats-strip .udp-col {
  background: var(--tx-bg-panel-2);
  border: 1px solid var(--tx-line-soft);
  border-radius: 12px;
  padding: 10px 12px;
}

.under-board-stats-strip .udp-col-pips .pip-display {
  min-width: 0;
}

@media (max-width: 760px) {
  .udp-col-dice-combo {
    min-width: 0;
  }
  /* v264: .udp-dice-grid (Rolled/Available Moves) removed from this
     forced-stack rule — see the dedicated, much narrower fallback below.
     .under-board-stats-strip (Bar/Pips) is untouched and still stacks
     here exactly as before; it was not part of this request. */
  .under-board-stats-strip {
    grid-template-columns: 1fr;
  }
}

/* v264: Rolled/Available Moves side-by-side on mobile portrait.
   Previously .udp-dice-grid stacked to a single column at the same
   760px breakpoint as everything else in this panel, even though Rolled
   only ever needs room for its (fixed-size, unchanged) dice tray and
   Available Moves' chips already wrap on their own
   (.dice-row{flex-wrap:wrap}, unchanged) — so there was no real reason
   for these two specifically to stack that early, and doing so left a
   lot of unused horizontal width on real phones. The v263 content-based
   column sizing (max-content minmax(0,1fr), 10px gap — both unchanged)
   now applies all the way down to 340px. Only below that — a width
   genuinely too narrow for the dice tray + at least one legible
   Available Moves chip to sit side by side without crowding/overlap —
   does this fall back to the single stacked column, matching the exact
   grid-template-columns:1fr treatment .udp-dice-grid already used above.
   Dice size, dice animation, dice values, move-chip markup/logic, and
   board/gameplay logic are all completely untouched — this is the same
   grid, same two child elements, just a narrower point at which it
   switches from 2 columns to 1. */
@media (max-width: 340px) {
  .udp-dice-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Move list panel ── */
.move-list-panel {
  width: 100%;
  padding: 8px 14px;
  background: var(--tx-bg-panel-2);
  border: 1px solid #55efc4;
  border-radius: 6px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  display: none;
  line-height: 1.8;
}

/* ── Manual setup panel ── */
#manual-setup-panel {
  display: none;
  width: 100%;
  padding: 10px 14px;
  background: var(--tx-bg-panel-2);
  border: 2px solid #fdcb6e;
  border-radius: 8px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
}

/* ── Export / hint panels — full width under board ── */
.anchor-export-panel,
.czl-export-panel {
  width: 100%;
  max-width: none;
}
#anchor-edit-hint,
#czl-edit-hint {
  width: 100%;
  max-width: none;
}

/* ── Responsive: stack on narrow screens ── */
@media (max-width: 980px) {
  .page-layout {
    grid-template-columns: 1fr;
  }

  .board-column,
  .board-panel,
  .clock-panel-wrap,
  .right-panel {
    width: 100%;
  }

  /* v2.2.1: Responsive Game-Setup Parity Fix — at this collapsed
     single-column breakpoint, visually reorder the two existing
     .page-layout grid children so Game Setup (.right-panel: Player
     Types, Player Names, Dice Mode, Reset Game, etc.) appears ABOVE
     the board/gameplay stack (.board-column). This uses CSS grid
     `order` only — no DOM changes, no duplicated markup/IDs, no new
     elements. Desktop/wide layout (>980px) is completely unaffected
     because `order` has no effect outside this media query. */
  .right-panel {
    order: 1;
  }

  .board-column {
    order: 2;
  }

  .clock-panel {
    grid-template-columns: 1fr;
    width: min(100%, 360px);
  }

  .player-panel .player-action-btns { flex-direction: row; flex-wrap: wrap; }
  .player-panel .player-action-btns button { width: auto; flex: 1 1 auto; }
}
/* v186: chunky physical button treatment — a solid bottom-edge "shelf"
   gives each button real thickness, and :active compresses it down
   into that shelf to simulate an actual press. transform/translateY
   only ever moves by 1-2px and never affects layout flow. */
button {
  padding: 7px 14px;
  border-radius: var(--tx-radius-sm);
  border: 1px solid var(--tx-blue-glow);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 50%), var(--tx-bg-panel-2);
  color: var(--tx-blue-glow);
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s, color 0.15s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 0 rgba(0,0,0,0.7),
    0 4px 6px rgba(0,0,0,0.35);
}
button:hover {
  background: var(--tx-blue-glow);
  color: #0a121a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 0 rgba(0,0,0,0.7),
    0 4px 10px var(--tx-blue-dim),
    0 4px 6px rgba(0,0,0,0.35);
}
button:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.5),
    0 0 0 rgba(0,0,0,0.7);
}
button.active { background: var(--tx-blue-glow); color: #0a121a; }
button.btn-blue  { border-color: #74b9ff; color: #74b9ff; }
button.btn-blue:hover  { background: #74b9ff; color: #0a121a; }
button.btn-green { border-color: #55efc4; color: #55efc4; }
button.btn-green:hover { background: #55efc4; color: #0a121a; }
button.btn-red   { border-color: #ff7675; color: #ff7675; }
button.btn-red:hover   { background: #ff7675; color: #0a121a; }
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 1px 0 rgba(0,0,0,0.5);
}
button:disabled:active { transform: none; }

/* ── Board container ── */
#board-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.die-chip {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 2px solid var(--tx-gold);
  background: linear-gradient(155deg, #232f52 0%, #16213e 55%, #0e1730 100%);
  color: var(--tx-gold-bright);
  font-size: 17px;
  font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  font-family: 'Courier New', monospace;
  /* v186: a raised, lacquered-tile look — top-edge highlight, base
     shadow pooling, and a soft ambient lift off the panel behind it. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -3px 5px rgba(0,0,0,0.45),
    0 2px 0 rgba(0,0,0,0.6),
    0 4px 8px rgba(0,0,0,0.4);
}
.die-chip.used {
  background: linear-gradient(155deg, #1a1a1a 0%, #111 60%, #0a0a0a 100%);
  color: #444; border-color: #333;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -3px 5px rgba(0,0,0,0.5),
    0 1px 0 rgba(0,0,0,0.5);
}
/* v258: readability pass — Available Moves chips were 26px/12px, too
   small to read at a glance. Same element/class structure, same
   diceExpanded/diceUsed-driven renderDicePanel() innerHTML — presentation
   only (size, weight, contrast). */
.die-chip.expanded {
  width: 34px; height: 34px;
  border-color: #fd79a8;
  border-width: 2px;
  color: #ff9ec2;
  background: linear-gradient(155deg, #33001d 0%, #1e0012 60%, #13000b 100%);
  font-size: 17px;
  font-weight: bold;
  border-radius: 7px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.die-chip.expanded.used {
  background: linear-gradient(155deg, #1a1a1a 0%, #111 60%, #0a0a0a 100%);
  color: #444; border-color: #333;
}
/* v2.1.2 Bug A fix: "dead" = not yet marked used, but no legal move
   remains for this die anywhere on the board right now (computed live
   from the existing getMaxDiceConstrainedMoves() engine — see
   renderDicePanel()). Visually distinct from both the bright "still
   playable" look and the fully-used look, so a player can tell at a
   glance that this die needs no action and isn't stuck/broken. */
.die-chip.expanded.dead {
  background: linear-gradient(155deg, #241a1a 0%, #171111 60%, #0e0a0a 100%);
  color: #7a5a5a;
  border-color: #5a3a3a;
  border-style: dashed;
}
/* v2.1.5: investigation into a tester report of a Bar-entry 6+5 turn where
   one die is consumed by entry and the other is genuinely unplayable (e.g.
   both possible entry points converge on the same closed point) confirmed
   the underlying diceUsed/legality logic is correct (see change report),
   but the existing v2.1.2 "dead" style above — a subtle color/dashed-border
   difference from "used" — can look too similar to "used" at a glance on a
   small screen. This adds ONE small, unmistakable "blocked" badge to dead
   chips only. Presentation only: no change to chip values, diceUsed,
   legality, tooltip text, or the renderDicePanel() JS that decides used
   vs. dead vs. neither. */
.die-chip.expanded.dead::after {
  content: '\00d7';
  position: absolute;
  top: -6px; right: -6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #5a1a1a;
  color: #ffb3b3;
  border: 1px solid #7a5a5a;
  font-size: 11px;
  font-weight: bold;
  line-height: 13px;
  text-align: center;
  font-family: Arial, sans-serif;
  text-shadow: none;
}