/* Arrenopoly — all styling for the Arrenopoly tab.
   Every selector is prefixed .ar- so nothing here can reach styles.css or be
   reached by it. Board colours are the real Monopoly values, sampled from the
   Monopoly Kit source (CC BY 4.0, Cammy Hogg).

   Display face is Kabala — an open GPL revival of ITC Kabel, the face the real
   board is set in. Weight 500, NOT bold: the real board isn't bold and it is
   the single most noticeable typographic detail. */

@font-face{
  font-family:"Kabala";
  src:url("/arrenopoly/fonts/kabala-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Kabala";
  src:url("/arrenopoly/fonts/kabala-600.woff2") format("woff2");
  font-weight:500 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Kabala";
  src:url("/arrenopoly/fonts/kabala-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

.ar-wrap{
  --ar-felt:#D9E8D6;      /* board green, sampled from the kit */
  --ar-tile:#F9F9F9;      /* tile face — lighter than the real board, for screen */
  --ar-ink:#000;
  --ar-muted:#666B62;
  --ar-line:#C9CFC2;
  --ar-red:#FF0000;
  --ar-ok:#008000;
  --ar-oksoft:#E6F2E8;
  --ar-amber:#8A5A10;
  --ar-ambersoft:#FBF1DC;
  --ar-board:"Kabala","ITC Kabel Std","Josefin Sans",Futura,sans-serif;

  max-width:860px; margin:0 auto; padding:18px 14px 70px;
  color:var(--ar-ink); line-height:1.6;
}

/* ---- chrome ---- */
.ar-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.ar-top h1{font-family:var(--ar-board);font-weight:500;font-size:26px;letter-spacing:.13em;
  text-transform:uppercase;margin:0}
.ar-meters{display:flex;gap:16px;font-family:var(--ar-board);font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ar-muted);margin-bottom:12px}
.ar-crumb{background:var(--ar-ambersoft);border:1px solid #E4CFA6;border-radius:9px;
  padding:9px 14px;margin-bottom:12px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;flex-wrap:wrap;color:var(--ar-amber);font-size:14.5px}

/* ---- board list ---- */
.ar-oneaway{background:var(--ar-felt);border:1.5px solid var(--ar-ink);border-radius:4px;
  padding:10px 14px;margin-bottom:16px;font-size:14.5px}
.ar-sect{margin-bottom:18px}
.ar-sect-h{font-family:var(--ar-board);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ar-muted);margin-bottom:8px}
.ar-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ar-card{text-align:left;background:var(--ar-tile);border:1.5px solid var(--ar-ink);
  padding:11px 13px;cursor:pointer;box-shadow:2px 2px 0 rgba(0,0,0,.22);font:inherit;color:inherit}
.ar-card:hover{transform:translate(-1px,-1px)}
.ar-card-n{font-family:var(--ar-board);font-weight:500;font-size:15px;text-transform:uppercase;
  line-height:1.15;letter-spacing:.03em}
.ar-card-d{font-size:13px;color:var(--ar-muted);margin-top:3px}
.ar-card.ar-owned{background:var(--ar-oksoft);border-color:var(--ar-ok)}
.ar-card.ar-owned .ar-card-d{color:var(--ar-ok);font-weight:600}

/* ---- panels ---- */
.ar-panel{background:#fff;border:1px solid var(--ar-line);border-radius:12px;padding:22px 24px}
.ar-panel h2{font-family:var(--ar-board);font-weight:500;font-size:23px;margin:0 0 10px;
  letter-spacing:.02em}
.ar-panel h3{font-family:var(--ar-board);font-size:12.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ar-muted);margin:20px 0 8px}
.ar-prompt{font-size:18px;margin:0 0 14px}
.ar-muted{color:var(--ar-muted)}
.ar-tiny{font-size:13.5px}
.ar-centre{text-align:center}
.ar-warn{background:var(--ar-ambersoft);border:1px solid #E4CFA6;color:var(--ar-amber);
  padding:12px 15px;border-radius:9px}

/* ---- questions ---- */
.ar-opts{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.ar-opt{text-align:left;background:#fff;border:1px solid #B6BCAF;border-radius:9px;
  padding:12px 15px;color:var(--ar-ink);font:inherit;cursor:pointer}
/* Selection is NEUTRAL, deliberately. Green reads as "correct" everywhere else
   in Claw'd, and an option he has just got wrong must never be tinted green —
   he cannot reliably tell "I answered wrongly" from "I can't do this", and the
   colour would answer that question for him, wrongly. Green appears only on a
   correct outcome. */
.ar-opt:hover{border-color:#8A8F84;background:#FAFAF8}
.ar-opt.ar-on{border:2px solid var(--ar-ink);background:#F2F3EF;padding:11px 14px}
.ar-input{font:inherit;font-size:17px;padding:11px 14px;border:1px solid #B6BCAF;
  border-radius:9px;background:#fff;width:100%;max-width:420px}
.ar-answer{max-width:240px;font-size:20px}
.ar-input:focus{outline:none;border-color:var(--ar-ok);box-shadow:0 0 0 3px var(--ar-oksoft)}

/* A wrong answer is an invitation, not a verdict — soft, never red. */
.ar-again{background:#F4F6F1;border-left:3px solid #B6BCAF;border-radius:0 8px 8px 0;
  padding:10px 14px;margin:12px 0 0;color:var(--ar-muted)}
.ar-again p{margin:0}
.ar-claimed{background:var(--ar-oksoft);border-radius:8px;padding:12px 16px;margin:10px 0;font-size:15.5px}
.ar-unlock{background:var(--ar-felt);border:1.5px solid var(--ar-ink);border-radius:4px;
  padding:10px 14px}

/* ---- teaching card ---- */
.ar-teach{background:#F4F6F1;border-radius:10px;padding:14px 18px;margin:0 0 16px}
.ar-teach h3{margin-top:0}
.ar-eg{background:#fff;border-radius:8px;padding:12px 15px;line-height:2;margin:0 0 10px}
.ar-note{font-size:14.5px;color:var(--ar-muted);margin:0 0 8px}
.ar-trap{background:#FDF0EE;border-left:3px solid var(--ar-red);border-radius:0 8px 8px 0;
  padding:10px 14px;color:#7A1F16;margin:0}

/* ---- deed ---- */
.ar-deed{background:var(--ar-tile);border:2px solid var(--ar-ink);max-width:340px;
  font-family:var(--ar-board);box-shadow:4px 4px 0 rgba(0,0,0,.25);margin:0 0 16px}
.ar-deed-h{border-bottom:2px solid var(--ar-ink);padding:9px 10px 8px;text-align:center}
.ar-deed-k{font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.ar-deed-n{font-size:19px;font-weight:500;text-transform:uppercase;line-height:1.1}
.ar-deed-b{padding:11px 14px 13px}
.ar-deed table{width:100%;border-collapse:collapse;font-size:13.5px}
.ar-deed td{padding:4px 0}
.ar-deed .ar-r{text-align:right;color:#333}
.ar-deed tr.ar-done td{color:var(--ar-ok);font-weight:600}

/* ---- buttons ---- */
.ar-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--ar-line)}
.ar-btn{font:inherit;font-size:16px;border:1px solid #B6BCAF;background:#fff;border-radius:9px;
  padding:11px 20px;color:var(--ar-ink);cursor:pointer;font-weight:500}
.ar-btn:hover{border-color:var(--ar-ink)}
.ar-btn:disabled{opacity:.5;cursor:default}
.ar-btn.ar-primary{background:var(--ar-ink);border-color:var(--ar-ink);color:#fff}
.ar-btn.ar-ghost{border-color:transparent;color:var(--ar-muted);padding-left:10px;padding-right:10px}
.ar-btn.ar-ghost:hover{border-color:#B6BCAF;color:var(--ar-ink)}
.ar-btn.ar-sm{padding:7px 13px;font-size:14px}

/* ---- flag ---- */
.ar-flagbox{background:var(--ar-ambersoft);border:1px solid #E4CFA6;border-radius:9px;
  padding:12px 15px;margin-top:12px;width:100%}
.ar-flagbox .ar-input{margin:8px 0}
.ar-flagged{color:var(--ar-amber);font-size:14px}

/* ---- agenda ---- */
.ar-agenda h2{margin-bottom:4px}
.ar-item{border-top:1px solid var(--ar-line);padding:14px 0 6px}
.ar-item-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ar-item-h strong{font-family:var(--ar-board);font-weight:500;font-size:17px;text-transform:uppercase;
  letter-spacing:.03em}
.ar-pill{background:var(--ar-felt);border:1px solid var(--ar-ink);border-radius:3px;
  padding:1px 7px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.ar-quote{margin:6px 0;font-size:15px}
.ar-signals{border-top:1px solid var(--ar-line);margin-top:18px;padding-top:6px}
.ar-signals p{margin:6px 0;font-size:14.5px}

.ar-tex{display:inline}

/* ---- print: this is how Ryan gets the PDF for the tutor ---- */
@media print{
  .ar-noprint{display:none !important}
  .ar-wrap{max-width:none;padding:0;font-size:12pt}
  .ar-panel{border:none;border-radius:0;padding:0;background:#fff}
  .ar-agenda h2{font-size:20pt;margin-bottom:2mm}
  .ar-item{break-inside:avoid;page-break-inside:avoid}
  .ar-pill{border:1px solid #000;background:none}
  .ar-signals{break-inside:avoid}
  a[href]:after{content:""}
}

/* ---- the help ladder -----------------------------------------------------
   Visually calm and clearly NOT a telling-off. He arrives here having just
   admitted he doesn't understand something; the panel must read as somebody
   sitting down next to him, not as a correction. */
.ar-ladder{background:#F4F6F1;border:1px solid #DDE2D6;border-radius:12px;
  padding:16px 18px;margin:0 0 14px}
.ar-ladder-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ar-ladder-h strong{font-family:var(--ar-board);font-weight:500;font-size:17px;
  letter-spacing:.02em;flex:1}
.ar-rungdots{display:flex;gap:5px}
.ar-dot{width:8px;height:8px;border-radius:50%;background:#D6DBD0;display:block}
.ar-dot.past{background:#A9B3A2}
.ar-dot.on{background:var(--ar-ink);transform:scale(1.25)}
.ar-ladder-text{font-size:17px;margin:0 0 10px}
.ar-ladder-nav{border-top:1px dashed #D6DBD0;margin-top:12px;padding-top:12px}

.ar-twin{background:#fff;border-radius:9px;padding:12px 16px;margin:0 0 8px}
.ar-twin-q{font-size:17px;margin-bottom:4px}
.ar-twin ol{margin:6px 0 6px 20px;padding:0;color:var(--ar-muted);line-height:1.9}
.ar-twin-a{font-size:17px;color:var(--ar-ok);font-weight:600;margin-top:4px}

.ar-step{background:#fff;border-radius:9px;padding:14px 16px;margin:0 0 8px}
.ar-step-n{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#9AA294;margin-bottom:6px}
.ar-step-ask{font-size:17px;margin:0 0 10px;font-weight:500}
.ar-after{color:var(--ar-ok);font-size:15px;margin:6px 0 0}

.ar-reveal{background:#fff;border-radius:9px;padding:14px 16px;margin-top:4px}
.ar-reveal-a{font-size:18px;margin-bottom:4px}

/* "Give me the hard ones" — he asked for this after claiming five stations in
   four and a half minutes and calling them ridiculously easy. Styled as an
   invitation, not a warning. */
.ar-harder{background:var(--ar-felt);border:1.5px solid var(--ar-ink);border-radius:4px;
  padding:9px 13px;margin:10px 0 0;font-size:14.5px}
.ar-btn.ar-hard{border-color:var(--ar-ink);font-weight:600}

/* ==========================================================================
   Practice papers — a past test with help under every part.
   Deliberately plainer than the board: this is a worksheet he works down, not
   a game. No marks out of 40 anywhere, and the help buttons are never styled
   as a lesser choice — asking is meant to look completely normal.
   ========================================================================== */
.ar-paper{max-width:760px}
.ar-phead h2{margin:0 0 2px;font-family:var(--ar-board);letter-spacing:.02em}
.ar-psub{margin:0 0 10px;color:var(--ar-muted);font-size:14px}
.ar-plede{margin:0 0 16px;background:var(--ar-felt);border:1.5px solid var(--ar-ink);
  border-radius:4px;padding:11px 14px;font-size:14.5px}

.ar-pbar{height:8px;background:var(--ar-tile);border:1.5px solid var(--ar-ink);
  border-radius:99px;overflow:hidden}
.ar-pbar-fill{height:100%;background:var(--ar-ok);transition:width .35s ease}
.ar-pcount{margin:6px 0 18px;font-size:13.5px;color:var(--ar-muted)}
.ar-pdone{background:var(--ar-oksoft);border:1.5px solid var(--ar-ok);border-radius:4px;
  padding:12px 14px;margin:0 0 18px;font-size:14.5px}

.ar-plist{display:flex;flex-direction:column;gap:9px}

.ar-pq{border:1.5px solid var(--ar-ink);border-radius:5px;background:var(--ar-tile)}
.ar-pq-shut{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer}
.ar-pq-shut:hover{background:#fff}
.ar-pq-open{padding:13px 15px 15px}
.ar-pq-head{display:flex;align-items:center;gap:10px;cursor:pointer;margin:0 0 4px}
.ar-pq-label{font-weight:600;font-size:14.5px}
.ar-pq-rule{color:var(--ar-muted);font-size:12.5px;flex:1}
.ar-pq-marks{color:var(--ar-muted);font-size:12.5px}
.ar-pq-tick{color:var(--ar-ok);font-size:12.5px;font-weight:600}

/* how far he got: nothing / tried / right with help / right unaided */
.ar-pip{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ar-line);
  flex:0 0 auto;background:transparent}
.ar-pip-tried{border-color:var(--ar-amber);background:var(--ar-ambersoft)}
.ar-pip-done{border-color:var(--ar-ok);background:var(--ar-oksoft)}
.ar-pip-clean{border-color:var(--ar-ok);background:var(--ar-ok)}

.ar-pq-prompt{margin:8px 0 13px;font-size:16px;overflow-x:auto}

.ar-popts{display:flex;flex-direction:column;gap:7px;margin:0 0 12px}
.ar-popt{text-align:left;padding:10px 13px;border:1.5px solid var(--ar-line);
  border-radius:4px;background:#fff;cursor:pointer;font-size:15px;overflow-x:auto}
.ar-popt:hover:not(:disabled){border-color:var(--ar-ink)}
/* selection is NEUTRAL — green would read as "correct" before it is marked */
.ar-popt-on{border-color:var(--ar-ink);border-width:2.5px;background:var(--ar-tile)}
.ar-popt:disabled{opacity:.65;cursor:default}

.ar-pnum{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
.ar-pnum-in{padding:10px 13px;border:1.5px solid var(--ar-ink);border-radius:4px;
  font-size:16px;max-width:220px;font-family:inherit}

.ar-prow{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0}
.ar-btn-sm{padding:6px 12px;font-size:13.5px}

.ar-pwrong{background:var(--ar-ambersoft);border:1.5px solid var(--ar-amber);
  border-radius:4px;padding:11px 13px;margin:0 0 12px}
.ar-pwrong-lead{margin:0 0 5px;font-size:14.5px}
.ar-pwhy{margin:0 0 9px;font-size:14px;color:var(--ar-amber)}
.ar-pright{background:var(--ar-oksoft);border:1.5px solid var(--ar-ok);border-radius:4px;
  padding:11px 13px;margin:0 0 4px;font-size:14.5px}
.ar-pright p{margin:0}

.ar-phint{margin:13px 0 0;padding:11px 13px;background:#fff;
  border:1.5px dashed var(--ar-line);border-radius:4px}
.ar-phint h5{margin:0 0 6px;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ar-muted)}
.ar-phint p{margin:0 0 4px;font-size:14.5px}

.ar-psteps{margin:11px 0 0;padding:12px 14px;background:#fff;
  border:1.5px solid var(--ar-ink);border-radius:4px}
.ar-psteps h5{margin:0 0 8px;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ar-muted)}
.ar-psteps ol{margin:0 0 10px;padding-left:20px}
.ar-psteps li{margin:0 0 7px;font-size:15px;overflow-x:auto}
.ar-pwatch{margin:0 0 6px;padding:9px 11px;background:var(--ar-ambersoft);
  border-radius:4px;font-size:14px}

.ar-preport{margin:22px 0 0;padding:14px 16px;border:1.5px solid var(--ar-ink);
  border-radius:5px;background:var(--ar-felt)}
.ar-preport h4{margin:0 0 2px;font-family:var(--ar-board)}
.ar-preport ul{list-style:none;margin:10px 0 0;padding:0}
.ar-preport li{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;
  padding:8px 11px;margin:0 0 6px;background:#fff;border-radius:4px;
  border-left:4px solid var(--ar-line);font-size:14px}
.ar-v-text{flex:1}
.ar-v-good{border-left-color:var(--ar-ok)}
.ar-v-mid{border-left-color:var(--ar-line)}
.ar-v-warn{border-left-color:var(--ar-amber)}
.ar-v-bad{border-left-color:var(--ar-red)}

.ar-pext{margin:22px 0 0;display:flex;flex-direction:column;gap:11px}

@media (max-width:600px){
  .ar-pq-rule{display:none}
  .ar-pq-open{padding:11px 12px 13px}
  .ar-prow .ar-btn{flex:1 1 auto}
}

/* board / practice-paper switch */
.ar-modes{display:flex;gap:7px;margin:0 0 16px}
.ar-mode{padding:7px 14px;border:1.5px solid var(--ar-line);border-radius:4px;
  background:#fff;cursor:pointer;font-size:14px;font-family:inherit}
.ar-mode:hover{border-color:var(--ar-ink)}
.ar-mode-on{border-color:var(--ar-ink);border-width:2.5px;background:var(--ar-felt);
  font-weight:600}

/* “do these next” star. A pointer, not a lock — the board blocks nothing. */
.ar-star{color:var(--ar-red);font-size:15px;line-height:1}
.ar-card{position:relative}
.ar-card .ar-star{position:absolute;top:6px;right:8px}
.ar-card.ar-focus{border-color:var(--ar-red);border-width:2.5px}
.ar-focusbar{display:flex;align-items:center;gap:8px;margin:0 0 12px;
  padding:9px 13px;background:#fff;border:1.5px solid var(--ar-red);
  border-radius:4px;font-size:14px}

/* prerequisite hint. A suggestion, not a lock — the card stays clickable and
   is styled no differently. Muted on purpose: it must read as help, not as a
   barrier or a telling-off. */
.ar-wants{margin:4px 0 0;font-size:11.5px;color:var(--ar-muted);font-style:italic;
  line-height:1.3}
.ar-wants::before{content:"↑ ";font-style:normal}

/* ---- the board -------------------------------------------------------- */
.ar-boardwrap{overflow-x:auto;margin:0 0 14px;-webkit-overflow-scrolling:touch}
.ar-board{display:block;width:100%;min-width:520px;max-width:900px;margin:0 auto;
  font-family:var(--ar-board)}
.ar-board-word{font-family:var(--ar-board);fill:var(--ar-ink)}
.ar-tile-live{cursor:pointer}
.ar-tile-live:hover rect:first-of-type{fill:#fff}
.ar-viewswitch{display:flex;justify-content:flex-end;margin:0 0 8px}
/* Guardians land on Arren's board, so say plainly whose board is on screen —
   an unlabelled someone-else's board is worse than a blank one. */
.ar-watching{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;background:var(--ar-ambersoft);border:1px solid #E4D2A8;
  border-radius:8px;padding:9px 13px;margin:0 0 14px;font-size:14px;
  color:var(--ar-amber)}

/* ---- walking a chain --------------------------------------------------- */
.ar-chain{max-width:760px}
.ar-chead{display:flex;align-items:center;gap:12px;border-top:5px solid var(--ar-line);
  padding:10px 0 4px;flex-wrap:wrap}
.ar-chead h2{margin:0;font-family:var(--ar-board);flex:1}
.ar-houses{color:var(--ar-ok);letter-spacing:2px;font-size:15px}
.ar-hotel{color:var(--ar-ok);font-weight:700;font-size:13px;letter-spacing:.06em}
.ar-clede{margin:0 0 12px;font-size:14.5px}
.ar-ctrap{border:1.5px solid var(--ar-amber);background:var(--ar-ambersoft);
  border-radius:4px;padding:10px 13px;margin:0 0 12px;font-size:14px}
.ar-ctrap p{margin:5px 0 0}
.ar-cprog{font-size:13px;color:var(--ar-muted);margin:0 0 10px}
.ar-cnote{background:var(--ar-felt);border:1.5px solid var(--ar-ink);border-radius:4px;
  padding:9px 12px;margin:0 0 12px;font-size:14.5px}

/* ---- the chain strip — the route drawn as a run of board squares ---- */
.ar-strip{background:var(--ar-felt);border:2px solid #000;padding:6px;margin:0 0 14px;
  overflow-x:auto}
.ar-rank{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(72px,1fr)}
.ar-ssq{appearance:none;background:var(--ar-tile);border:2px solid #000;margin-right:-2px;
  min-height:104px;display:flex;flex-direction:column;cursor:pointer;position:relative;
  padding:0;font:inherit;color:inherit;text-align:center}
.ar-ssq:hover{background:#fff}
.ar-ssq-band{height:22px;border-bottom:2px solid #000;
  background:var(--ar-chain-col,#8FD0EA);
  display:flex;align-items:center;justify-content:center;gap:3px}
.ar-ssq-house{width:9px;height:8px;background:var(--ar-ok);border:1px solid #000}
.ar-ssq-hotel{font-family:var(--ar-board);font-size:8.5px;font-weight:600;color:#fff;
  background:var(--ar-red);border:1px solid #000;padding:0 4px;letter-spacing:.05em}
.ar-ssq-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5px 4px;gap:3px}
.ar-ssq-nm{font-family:var(--ar-board);font-size:10.5px;font-weight:500;line-height:1.12;
  text-transform:uppercase}
.ar-ssq-ic{font-size:17px;line-height:1}
.ar-ssq-tg{font-family:var(--ar-board);font-size:8px;text-transform:uppercase;
  letter-spacing:.04em;color:#555}
.ar-ssq-here{outline:3px solid #000;outline-offset:1px;z-index:2}
.ar-ssq-sel{outline:3px solid var(--ar-ok);outline-offset:1px;z-index:2}
.ar-ssq-done .ar-ssq-in{background:var(--ar-oksoft)}
.ar-ssq-go .ar-ssq-nm,.ar-ssq-chance .ar-ssq-ic{color:var(--ar-red)}
.ar-ssq-jail .ar-ssq-in{background:repeating-linear-gradient(45deg,#F7F5EA,#F7F5EA 5px,#EEEBDC 5px,#EEEBDC 10px)}
.ar-ssq-trap .ar-ssq-in{box-shadow:inset 0 -3px 0 var(--ar-amber)}
.ar-ssq-dot{width:8px;height:8px;border-radius:50%;position:absolute;top:26px;right:5px}
.ar-ssq-dot.ok{background:var(--ar-ok)}
.ar-ssq-dot.no{background:var(--ar-amber)}
.ar-sq-ahead{font-size:11px;color:var(--ar-muted);text-transform:uppercase;
  letter-spacing:.05em}

.ar-route{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ar-sq{border:1.5px solid var(--ar-line);border-radius:5px;padding:10px 13px;
  background:var(--ar-tile)}
.ar-sq-here{border-color:var(--ar-ink);border-width:2.5px;background:#fff}
.ar-sq-done{opacity:.82}
.ar-sq-trap{border-left:5px solid var(--ar-amber)}
.ar-sq-go,.ar-sq-chance,.ar-sq-chest,.ar-sq-jail{background:var(--ar-felt)}
.ar-sq-station{background:#fff;border-style:dashed}
.ar-sq-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ar-sq-name{font-weight:600;font-size:14.5px}
.ar-sq-flag{font-size:11px;color:var(--ar-amber);text-transform:uppercase;
  letter-spacing:.06em}
.ar-sq-tick{font-size:12px;color:var(--ar-ok)}
.ar-sq-free{font-size:12px;color:var(--ar-ok);font-style:italic}
.ar-sq-move{margin:6px 0 0;font-size:14px}
.ar-sq-worked{margin:6px 0 0;padding-left:20px;font-size:13.5px;color:var(--ar-muted)}
.ar-sq-worked li{margin:0 0 3px;overflow-x:auto}
.ar-sq-watch{margin:6px 0 0;font-size:13px;background:var(--ar-ambersoft);
  padding:6px 9px;border-radius:4px}
.ar-sq-given{margin:7px 0 0;font-size:13px}
.ar-sq-given.ok{color:var(--ar-ok)}
.ar-sq-given.no{color:var(--ar-amber)}
.ar-sq-now{margin:11px 0 0;padding:11px 0 0;border-top:1.5px solid var(--ar-line)}
.ar-sq-ask{margin:0 0 10px;font-size:16px;overflow-x:auto}
.ar-sq-opts{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.ar-sq-help{margin:10px 0 0;padding:10px 12px;background:#fff;
  border:1.5px dashed var(--ar-line);border-radius:4px;font-size:14px}
.ar-sq-help p{margin:0 0 5px}

.ar-jail{border:2.5px solid var(--ar-ink);border-radius:5px;padding:13px 15px;
  margin:0 0 14px;background:#fff}
.ar-jail h4{margin:0 0 6px;font-family:var(--ar-board)}
.ar-jail-opts{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0 0}

.ar-runend{border:2.5px solid var(--ar-ok);background:var(--ar-oksoft);
  border-radius:5px;padding:16px 18px}
.ar-runend h3{margin:0 0 7px;font-family:var(--ar-board)}

@media (max-width:600px){
  .ar-board{min-width:460px}
  .ar-sq-worked{padding-left:16px}
}

/* A colour group that has not been built yet is SHOWN, not hidden — he should
   see the whole map including where it stops. Muted, not disabled-looking. */
.ar-tile-ghost rect:first-of-type{fill:#EFEFEC}
.ar-tile-ghost text{opacity:.55}
.ar-tile-locked{opacity:.75}

/* ---- the deck: his hand, beside the board -------------------------------- */
.ar-boardrow{display:flex;gap:14px;align-items:flex-start}
.ar-boardrow .ar-boardwrap{flex:1;min-width:0}
.ar-deck{width:250px;flex-shrink:0;display:flex;flex-direction:column;gap:7px;
  max-height:900px;overflow-y:auto;padding:2px}
@media (max-width:900px){
  .ar-boardrow{flex-direction:column}
  .ar-deck{width:100%;max-height:none;flex-direction:row;flex-wrap:wrap}
  .ar-deck .ar-deck-h{width:100%}
  .ar-deck .ar-mini{width:calc(50% - 4px)}
}
.ar-deck-h{font-family:var(--ar-board);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ar-muted);
  margin:8px 0 2px;display:flex;justify-content:space-between;align-items:baseline}
.ar-deck-h:first-child{margin-top:0}
.ar-deck-n{font-size:11px;color:var(--ar-muted)}
.ar-deck-empty{font-size:13px;color:var(--ar-muted);margin:2px 0}
/* a mini title-deed card, like the mockup's deed at postage-stamp size */
.ar-mini{appearance:none;text-align:left;background:var(--ar-tile);
  border:2px solid #000;box-shadow:2px 2px 0 rgba(0,0,0,.22);cursor:pointer;
  padding:7px 10px 8px;font-family:var(--ar-board);color:var(--ar-ink);
  display:flex;flex-direction:column;gap:1px}
.ar-mini:hover{background:#fff;transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 rgba(0,0,0,.22)}
.ar-mini-k{font-size:8.5px;letter-spacing:.16em;color:#444}
.ar-mini-n{font-size:13.5px;font-weight:500;text-transform:uppercase;line-height:1.15}
.ar-mini-t{font-size:10.5px;color:var(--ar-muted);font-family:var(--ar-body,inherit)}
.ar-mini-grp{padding-top:0}
.ar-mini-band{height:16px;background:var(--ar-mini-col,#ccc);
  border-bottom:2px solid #000;margin:0 -10px 4px;display:flex;
  align-items:center;justify-content:center;gap:3px}
.ar-mini-house{width:9px;height:8px;background:var(--ar-ok);border:1px solid #000}
.ar-mini-hotel{font-size:8.5px;font-weight:600;color:#fff;background:var(--ar-red);
  border:1px solid #000;padding:0 4px;letter-spacing:.05em}
.ar-mini-cc{background:#AFDDE9}
.ar-mini-cc:hover{background:#C4E7F0}

/* ---- the chest, opened --------------------------------------------------- */
.ar-chest-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ar-cc-card{border:2px solid #000;background:var(--ar-tile);margin:0 0 10px;
  box-shadow:3px 3px 0 rgba(0,0,0,.2)}
.ar-cc-head{appearance:none;border:0;background:#AFDDE9;width:100%;text-align:left;
  cursor:pointer;padding:9px 13px;display:flex;flex-direction:column;gap:1px;
  font-family:var(--ar-board);color:var(--ar-ink);border-bottom:2px solid #000}
.ar-cc-head:hover{background:#C4E7F0}
.ar-cc-name{font-size:16px;font-weight:500;text-transform:uppercase}
.ar-cc-for{font-size:11px;color:#333}
.ar-cc-body{padding:12px 16px;background:#fff}

/* ---- markdown-lite, for hack-card content -------------------------------- */
.ar-md p{margin:0 0 9px}
.ar-md ul{margin:0 0 10px;padding-left:22px}
.ar-md li{margin:2px 0}
.ar-md-h1,.ar-md-h2{font-family:var(--ar-board);font-weight:600;font-size:17px;
  margin:12px 0 6px;text-transform:uppercase;letter-spacing:.03em}
.ar-md-h3,.ar-md-h4{font-weight:600;font-size:14.5px;margin:10px 0 4px}

/* ---- chest / Chance events and the hand ---------------------------------- */
.ar-event{border:2px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.2);
  padding:10px 14px;margin:0 0 12px}
.ar-event-cc{background:#AFDDE9}
.ar-event-ch{background:#FFE1C4}
.ar-event-k{display:block;font-family:var(--ar-board);font-size:9px;
  letter-spacing:.16em;color:#444;margin-bottom:2px}
.ar-event p{margin:4px 0 0;font-size:14.5px}
.ar-hand{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;
  padding:8px 11px;background:var(--ar-tile);border:1.5px dashed #9AA294;border-radius:8px}
.ar-hand-h{font-family:var(--ar-board);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ar-muted)}
.ar-cchip{appearance:none;background:#AFDDE9;border:2px solid #000;cursor:pointer;
  font-family:var(--ar-board);font-size:12.5px;padding:5px 10px;color:var(--ar-ink)}
.ar-cchip:hover:not(:disabled){background:#C4E7F0;transform:translate(-1px,-1px)}
.ar-cchip:disabled{opacity:.55;cursor:default}
.ar-cchip-played{font-family:var(--ar-board);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ar-muted);margin:0 0 6px}

.ar-cc-frame{width:100%;height:560px;border:0;background:#fff;display:block}

/* ---- milestones ---------------------------------------------------------- */
.ar-mile-bar{position:relative;height:30px;background:var(--ar-tile);
  border:2px solid #000;margin:0 0 8px;overflow:hidden}
.ar-mile-fill{height:100%;background:var(--ar-ok);opacity:.85;
  transition:width .4s ease}
.ar-mile-pct{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--ar-board);font-size:13px;
  font-weight:600;letter-spacing:.06em}
.ar-mile-counts{display:flex;gap:18px;font-family:var(--ar-board);
  font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ar-muted);margin:0 0 12px}
.ar-mile-rule{background:var(--ar-ambersoft);border-left:3px solid var(--ar-amber);
  border-radius:0 8px 8px 0;padding:10px 14px;color:var(--ar-amber)}

/* ---- the trap hunt ------------------------------------------------------- */
.ar-hunt-lines{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.ar-hunt-line{appearance:none;display:flex;align-items:baseline;gap:12px;
  text-align:left;background:#fff;border:1px solid #B6BCAF;border-radius:9px;
  padding:10px 14px;font:inherit;color:inherit;cursor:pointer}
.ar-hunt-line:hover:not(:disabled){border-color:#000}
.ar-hunt-line:disabled{cursor:default}
.ar-hunt-n{font-family:var(--ar-board);font-size:11px;font-weight:600;
  color:var(--ar-muted);flex-shrink:0}
.ar-hunt-hit{border:2px solid var(--ar-ok);background:var(--ar-oksoft);padding:9px 13px}
.ar-hunt-miss{border:2px solid var(--ar-amber);background:var(--ar-ambersoft);padding:9px 13px}
.ar-hunt-res{border-left:3px solid var(--ar-amber);border-radius:0 8px 8px 0;
  background:var(--ar-ambersoft);padding:11px 15px}
.ar-hunt-res.ok{border-left-color:var(--ar-ok);background:var(--ar-oksoft)}

/* ---- strip icons: the board's own pieces --------------------------------- */
.ar-ssq-go-arrow{width:34px;height:8px;color:var(--ar-red)}
.ar-ssq-loco{width:26px;height:20px;color:#12120F}
.ar-ssq-img{width:24px;height:24px;object-fit:contain;display:block}
.ar-ssq-injail{outline:3px solid var(--ar-red);outline-offset:1px;z-index:2}
.ar-ssq-injail .ar-ssq-tg{color:var(--ar-red);font-weight:600}

/* ---- the loop: back to Go after every run -------------------------------- */
.ar-loop{padding:4px 6px 2px;color:#5A6355}
.ar-loop-arrow{display:block;width:100%;height:22px}
.ar-loop-t{display:block;text-align:center;font-family:var(--ar-board);
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;margin-top:2px}

/* ---- GO TO JAIL, played broad -------------------------------------------- */
.ar-jailanim{position:relative;height:120px;margin:0 0 12px;overflow:hidden;
  background:repeating-linear-gradient(45deg,#F7F5EA,#F7F5EA 8px,#EEEBDC 8px,#EEEBDC 16px);
  border:2px solid #000}
.ar-jailanim-hand{position:absolute;left:8px;top:10px;height:96px;
  animation:ar-hand-in .5s ease-out both}
.ar-jailanim-stamp{position:absolute;left:50%;top:34px;transform:translateX(-50%) rotate(-8deg);
  font-family:var(--ar-board);font-weight:700;font-size:34px;color:var(--ar-red);
  border:4px solid var(--ar-red);padding:2px 14px;background:rgba(255,255,255,.85);
  animation:ar-stamp .45s cubic-bezier(.2,2.2,.4,1) .45s both}
.ar-jailanim-car{position:absolute;top:36px;height:56px;
  animation:ar-car-drive 1.3s ease-in .8s both}
.ar-jailanim-bars{position:absolute;right:10px;top:14px;height:92px}
@keyframes ar-hand-in{from{transform:translateX(-120%) }to{transform:none}}
@keyframes ar-stamp{from{transform:translateX(-50%) rotate(-8deg) scale(3);opacity:0}
  to{transform:translateX(-50%) rotate(-8deg) scale(1);opacity:1}}
@keyframes ar-car-drive{from{left:-15%}to{left:calc(100% - 130px)}}

/* ---- the dice ------------------------------------------------------------- */
.ar-dice{border:2px solid #000;background:var(--ar-tile);
  box-shadow:3px 3px 0 rgba(0,0,0,.2);padding:14px 18px;margin:0 0 12px}
.ar-dice h4{margin:0 0 10px;font-family:var(--ar-board);font-size:15px;font-weight:600}
.ar-dice-row{display:flex;gap:14px;margin:0 0 10px}
.ar-die{font-size:72px;line-height:1}
.ar-die-spin{animation:ar-die-shake .12s linear infinite}
@keyframes ar-die-shake{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}
.ar-dice-msg.ok{font-family:var(--ar-board);font-weight:700;font-size:19px;
  color:var(--ar-ok);animation:ar-stamp .4s cubic-bezier(.2,2.2,.4,1) both}

/* ---- the railway on the deeds -------------------------------------------- */
.ar-deed-loco{display:block;margin:8px auto 2px;width:74px;height:56px;color:#12120F}
.ar-mini{position:relative}
.ar-mini-loco{position:absolute;top:7px;right:9px;width:22px;height:17px;
  color:#12120F;opacity:.85}