/* ---------- boxes the admin added ----------
   Three kinds, deliberately few. They inherit the width and the padding of
   whatever they were anchored next to, so a box added under a heading lines
   up with that heading on every screen without anyone choosing a number. */
/* `flex-basis:100%` is inert outside a flex parent and, inside one, makes the
   box take a line of its own instead of becoming a third column in whatever
   row it was anchored into. A box added under a panel heading was landing
   BESIDE it and squashing the heading. */
.tx-block{margin:10px 0 0;max-width:66ch;margin-left:auto;margin-right:auto;
  text-align:center;flex-basis:100%}
.panel-h{flex-wrap:wrap}
.tx-block-heading{font:900 24px/1.15 var(--display);letter-spacing:-.02em;
  color:var(--on-accent);margin-top:16px}
.tx-block-body{font-size:15px;line-height:1.6;color:var(--text-soft);font-weight:500}
.tx-block-note{font:700 10.5px/1.5 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold)}
/* Inside a mode card or another tinted block, inherit rather than fight it. */
.mode-card .tx-block,.panel .tx-block,.deck-card .tx-block{
  text-align:left;margin-left:0;margin-right:0;color:inherit}

/* ============================================================
   THE SITE EDITOR — only ever visible under ?edit=1, and only then
   to a verified admin. Everything here is scoped to body.tx-edit, so
   a normal visit never pays for it beyond these bytes.
   ============================================================ */
/* A hidden string stays on the page for the admin, greyed and struck, so it
   can be brought back. Visitors get display:none and never see it. */
body.tx-edit .tx-hidden{display:revert!important;opacity:.35;
  text-decoration:line-through;outline:1px dashed var(--red)!important}
.tx-ctl{position:absolute;z-index:9998;display:flex;gap:4px;
  background:#16262B;border:1px solid rgba(255,255,255,.2);border-radius:9px;
  padding:4px;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.tx-ctl button{border:0;background:rgba(255,255,255,.12);color:var(--on-accent);
  border-radius:6px;padding:5px 8px;cursor:pointer;
  font:700 10px/1 var(--mono);letter-spacing:.06em;white-space:nowrap}
.tx-ctl button:hover{background:var(--gold);color:var(--ink-2)}
.tx-ctl button.warn:hover{background:var(--red);color:var(--on-accent)}
body.tx-edit [data-tx-block]{outline:1px dashed rgba(87,184,148,.6);
  outline-offset:2px;border-radius:3px}
body.tx-edit:not(.tx-live) [data-tx-block]:hover{outline:2px solid var(--mint);
  background:rgba(87,184,148,.12);cursor:text}
body.tx-edit [data-tx],body.tx-edit [data-tx-ph]{
  outline:1px dashed rgba(var(--gold-rgb),.5);outline-offset:2px;border-radius:3px}
body.tx-edit.tx-live [data-tx],body.tx-edit.tx-live [data-tx-ph]{outline:none}
body.tx-edit:not(.tx-live) [data-tx]:hover,
body.tx-edit:not(.tx-live) [data-tx-ph]:hover{
  outline:2px solid var(--gold);background:rgba(var(--gold-rgb),.14);cursor:text}
body.tx-edit [data-tx][contenteditable="true"]{
  outline:2px solid var(--gold);background:rgba(var(--gold-rgb),.18);cursor:text}
body.tx-edit [data-tx].tx-dirty,body.tx-edit [data-tx-ph].tx-dirty{
  outline:2px solid var(--mint)}
body.tx-edit{padding-bottom:110px}

.txbar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:10000;
  display:flex;align-items:center;gap:10px;background:#16262B;
  border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 12px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);font-family:var(--font);
  max-width:calc(100vw - 24px);flex-wrap:wrap}
.txbar b{font:900 13px/1 var(--display);color:var(--on-accent);letter-spacing:.02em;
  padding-right:4px}
.txbar .n{font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:#8FA6A6}
.txbar .n.on{color:var(--mint)}
.txbtn{border:0;border-radius:10px;padding:10px 14px;cursor:pointer;
  font:900 11.5px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,255,255,.12);color:var(--on-accent)}
.txbtn:hover{background:rgba(255,255,255,.2)}
.txbtn.go{background:var(--gold);color:var(--ink-2);box-shadow:0 3px 0 var(--gold-sh)}
.txbtn.go:disabled{opacity:.4;box-shadow:none;cursor:default}
.txbtn.warn:hover{background:rgba(210,80,63,.3)}
.txbtn.on{background:var(--mint);color:#0B2119}
.txnote{position:fixed;left:50%;transform:translateX(-50%);bottom:86px;z-index:10000;
  background:#16262B;border:1px solid rgba(255,255,255,.16);border-radius:10px;
  padding:9px 14px;font-size:13px;color:var(--on-accent);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.txnote.err{border-color:var(--red);color:#F0907F}

.txpanel{position:fixed;right:16px;bottom:86px;z-index:10000;width:280px;
  background:#16262B;border:1px solid rgba(255,255,255,.16);border-radius:14px;
  padding:16px;box-shadow:0 18px 44px rgba(0,0,0,.6);font-family:var(--font)}
.txpanel h4{margin:0 0 12px;font:900 14px/1 var(--display);color:var(--on-accent)}
.txpanel label{display:block;font:700 9.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:#8FA6A6;margin:12px 0 5px}
.txpanel select{width:100%;background:rgba(0,0,0,.3);color:var(--on-accent);
  border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:9px 10px;
  font-family:var(--font);font-size:13.5px}.txpanel input[type=range]{width:100%;accent-color:var(--gold);margin:2px 0 0}
.txpanel .row{display:flex;gap:8px;margin-top:16px}
.txpanel .row .txbtn{flex:1}

.txpop{position:absolute;z-index:10001;background:#16262B;
  border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.6);width:min(320px,90vw)}
.txpop .lbl{font:700 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:#8FA6A6;margin-bottom:7px}
.txpop input{width:100%;background:rgba(0,0,0,.3);color:#fff;
  border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:9px 11px;
  font-family:var(--font);font-size:14px}
.txpop .row{display:flex;gap:8px;margin-top:10px}
.txpop .row .txbtn{flex:1;padding:9px 10px}

/* THE DECK PICKER'S ROWS. Top level on purpose: the rest of .ax-seg lives in a
   max-width:560px block, which is phone styling, and these rows are the layout
   at EVERY width. Nested in there they did not apply on a desktop at all, and a
   max-width:700px override inside them could never fire, because it could only
   be reached below 560. Both were invisible for a while because the preview
   pane is 530px wide, so what looked like a desktop check was inside the phone
   breakpoint.

   Which decks sit together is a decision — general knowledge, then sport, then
   the Gauntlet on its own, since it is not a deck of questions. */
.ax-deckseg{display:flex;flex-direction:column;gap:6px}
.ax-segrow{display:flex;gap:6px}
/* min-width:0 lets a button be narrower than its label wants and still share
   the row evenly. Without it the flex floor is the text itself, and one long
   name pushes its neighbours out of the card. */
.ax-segrow button{flex:1 1 0;min-width:0;padding:9px 4px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* EVEN THIRDS UNTIL THEY STOP FITTING. A third of a 375px phone is 100px and
   "Entertainment" wants 122, so the longest label lost again one breakpoint
   down. flex-basis:auto sizes each button to its text first and shares out what
   is left, so the row still fills the card and nothing is cut. */
@media(max-width:700px){
  .ax-segrow button{flex:1 1 auto;font-size:11.5px;letter-spacing:0}
}