/* FELOSY bento theme.
 *
 * Loaded after styles.css and changes only how things look: no markup or class
 * name depends on it, so removing the <link> restores the previous design.
 *
 * The idea: a warm cream table, and every surface is a card you could pick up.
 * Pastel blocks carry a heading in a deep shade of their own colour; white cards
 * float on top of them; the one thing that decides a turn is a near-black pill.
 */
/* Fraunces, Figtree and Readex Pro are linked from index.html, where they load
   beside the page instead of holding up its first paint. */

:root{
  --paper:#f6f1e7;--white:#fffdf8;--ink:#1f1c1a;--muted:#6d655b;--line:#e6ddcf;
  --night:#262220;--red:#b02c3a;

  /* Each tone is a pair: the block, and the ink that reads on it. */
  --lav:#c8b1ee;--lav-ink:#40246a;
  --pink:#f39ab8;--pink-ink:#561b47;
  --sage:#c8d98f;--sage-ink:#2a4518;
  --butter:#fbdb74;--butter-ink:#4a3708;
  --peach:#f5a778;--peach-ink:#582610;
  --rose:#f2a09c;--rose-ink:#5c1418;
  --sky:#b2c9da;--sky-ink:#1b3854;

  --green:var(--sage);--deep:var(--sage-ink);
  --radius:28px;
  --float:0 18px 40px -22px rgba(40,25,10,.45),0 2px 6px rgba(40,25,10,.05);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:var(--sans);background:var(--paper);color:var(--ink);
}
/* Hustle plays in sage, Amaan in lavender. */
body[data-zone=safe]{--deep:var(--lav-ink);--green:var(--lav)}

/* ---------- Type ---------- */
h1,h2,.brand{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:650;color:inherit}
h1{font-size:clamp(34px,4.4vw,46px);line-height:1.05;letter-spacing:-.025em}
h2{letter-spacing:-.015em;line-height:1.12}
p{line-height:1.55}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em}
.preview-value,.history-amount,.statement-flow,.milestone-number strong,.dice-entry input,.dice-shortcuts button{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
/* The display serif is for headings that have room. Small card titles read
   better in the sans. */
.table-choice h2,.market-event-banner h2,.circle-heading{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:-.01em}

/* ---------- Icons ---------- */
/* Icons8 Material Rounded, free set (see icons8.json). Each PNG is used as a
   mask so the icon takes the colour of the text around it. */
.ui-icon{display:inline-block;width:20px;height:20px;flex-shrink:0;vertical-align:-4px;background-color:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.ui-icon--home{--icon:url(/icons/ui/home.png)}
.ui-icon--settings{--icon:url(/icons/ui/settings.png)}
.ui-icon--close{--icon:url(/icons/ui/close.png);width:18px;height:18px}
.icon-button .ui-icon,.market-close .ui-icon{vertical-align:middle}
.mobile-nav a .ui-icon{margin-inline-end:8px}
.header-actions .ui-icon--settings{width:22px;height:22px}
/* Setup badge: the board mark until a gender is picked, then the player. */
.setup-badge .board-mark{transform:none;width:36px;grid-template-columns:15px 15px;gap:5px}
.setup-badge .board-mark i{height:15px;border-color:var(--butter-ink)}
.setup-badge .board-mark i:nth-child(2){background:var(--peach);border-color:var(--peach)}
.setup-badge .board-mark i:nth-child(3){background:var(--lav);border-color:var(--lav)}
.setup-badge .ui-icon--gender{display:none;width:30px;height:30px}
.setup-badge[data-gender] .board-mark{display:none}
.setup-badge[data-gender] .ui-icon--gender{display:inline-block}
/* Scoped to .welcome so they outrank the badge's default butter tone below. */
.welcome>.setup-badge[data-gender=male]{background:var(--sky);color:var(--sky-ink)}
.welcome>.setup-badge[data-gender=female]{background:var(--pink);color:var(--pink-ink)}
.setup-badge[data-gender=male] .ui-icon--gender{--icon:url(/icons/ui/user-male.png)}
.setup-badge[data-gender=female] .ui-icon--gender{--icon:url(/icons/ui/user-female.png)}
.load-reason{margin-top:6px;font-family:ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.icons-credit{font-size:10px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.sidebar .icons-credit{display:block;padding:10px 12px 0}

/* ---------- Controls ---------- */
.primary,.secondary,.danger-button{border-radius:999px;padding:14px 22px;font-size:14px;font-weight:650;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.primary{background:var(--night);color:#fff;box-shadow:0 12px 24px -14px rgba(20,12,6,.75)}
.primary:hover{background:#000;transform:translateY(-1px)}
.secondary{border:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.secondary:hover{box-shadow:inset 0 0 0 1.5px #cbbfad}
.danger-button{background:#fde3e6;color:var(--red)}
.primary:active,.secondary:active{transform:translateY(1px)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--night);outline-offset:4px}
input,select{border:0;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);padding:15px 16px}
input:focus,select:focus{box-shadow:inset 0 0 0 2px var(--night),0 0 0 4px rgba(38,34,32,.08)}
.language-toggle{border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-family:var(--sans);font-weight:600;padding:8px 14px}
.text-button{font-size:13px}
#toast{border-radius:999px;background:var(--night);font-weight:600}

/* ---------- Surfaces ---------- */
/* White cards that float. */
.form-box,.dice-panel,.table-choice,.chance-group,.chance-asset,.chance-buy-head,.market-asset-card,.portfolio-row,.rescue-row,.lender>span,.holding-card,.out-figures div,.history-row{border:0;background:#fff;color:var(--ink);box-shadow:var(--float)}
.form-box{border-radius:var(--radius);padding:28px}
.dice-panel,.table-choice{border-radius:24px}
.chance-group,.chance-asset,.chance-buy-head,.market-asset-card,.portfolio-row,.rescue-row,.lender>span,.chance-mode,.chance-route,.market-side,.circle-card-body,.bank-paydays span,.out-figures div{border-radius:18px}

/* Pastel blocks. An element picks a tone; everything inside it, including the
   muted text and the hairlines, is mixed from that tone so it stays legible. */
.escape,.statement-section,.next-turn,.preview,.undo-banner,.previous-game,.table-found,.win-note,.market-event-banner,.market-hint,.passed-payday,.type-card,.table-player,.table-note,.offline-note{
  --tone:var(--sage);--tone-ink:var(--sage-ink);
  background:var(--tone);color:var(--tone-ink);border:0;
  --muted:color-mix(in oklab,var(--tone-ink) 76%,var(--tone));
  --line:color-mix(in oklab,var(--tone-ink) 18%,var(--tone));
}
.escape{--tone:var(--butter);--tone-ink:var(--butter-ink)}
.next-turn{--tone:var(--pink);--tone-ink:var(--pink-ink)}
.undo-banner,.table-note{--tone:var(--lav);--tone-ink:var(--lav-ink)}
.market-event-banner{--tone:var(--sky);--tone-ink:var(--sky-ink)}

/* ---------- Offline ---------- */
/* Offline mode is the player's own choice, so it reads sky, calm like airplane
   mode; no signal is the world's doing, so it reads peach. The header pill is
   hidden while online and opens settings when tapped. */
/* The "at the table" dots stop glowing green while nothing is connected. */
body[data-connection=offline] .live-dot,body[data-connection=no-signal] .live-dot{background:var(--muted)}
#offline-note{margin:2px 4px 6px}

/* ---------- How to play ---------- */
/* One white card per part of the rules, each marked with a tone from the board,
   open one at a time so a phone shows a page of titles rather than a wall. */
.help-button{font:700 19px/1 var(--sans)}
.guide{max-width:720px}
.guide>h1{margin-bottom:8px}
.guide>.muted{margin-bottom:22px}
.guide-section{--tone:var(--lav);--tone-ink:var(--lav-ink);margin:0 0 12px;padding:0 20px;border-radius:24px;background:#fff;box-shadow:var(--float)}
.guide-section:nth-of-type(6n+2){--tone:var(--peach);--tone-ink:var(--peach-ink)}
.guide-section:nth-of-type(6n+3){--tone:var(--sky);--tone-ink:var(--sky-ink)}
.guide-section:nth-of-type(6n+4){--tone:var(--butter);--tone-ink:var(--butter-ink)}
.guide-section:nth-of-type(6n+5){--tone:var(--pink);--tone-ink:var(--pink-ink)}
.guide-section:nth-of-type(6n){--tone:var(--sage);--tone-ink:var(--sage-ink)}
.guide-section>summary{display:flex;align-items:center;gap:12px;min-height:64px;cursor:pointer;list-style:none;color:var(--tone-ink);font:700 17px/1.3 var(--sans)}
.guide-section>summary::-webkit-details-marker{display:none}
.guide-section>summary::before{content:'';flex-shrink:0;width:14px;height:14px;border-radius:5px;background:var(--tone)}
.guide-section>summary::after{content:'+';margin-inline-start:auto;font-size:22px;font-weight:600}
.guide-section[open]>summary::after{content:'−'}
.guide-points{margin:0 0 18px;padding-inline-start:22px;line-height:1.6}
.guide-points li{margin:0 0 8px}
.guide-spaces{display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.guide-spaces li{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:18px;background:color-mix(in oklab,var(--tone) 22%,#fff)}
.guide-spaces .type-icon{flex-shrink:0;width:48px;height:48px}
.guide-spaces strong{display:block;margin:2px 0;font-size:15px}
.guide-spaces p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
/* Money words: each term a small card in the part's own tone. */
.guide-terms{display:grid;gap:8px;margin:0 0 18px}
.guide-terms>div{padding:12px 14px;border-radius:16px;background:color-mix(in oklab,var(--tone) 22%,#fff)}
.guide-terms dt{margin:0 0 2px;font-size:15px;font-weight:700}
.guide-terms dd{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.guide-link{display:block;min-height:44px;margin:0 auto;padding:0 12px;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html[dir=rtl] .guide-section>summary{font-family:'Readex Pro',Tahoma,sans-serif}

/* ---------- Repay early ---------- */
.loan-card .primary{margin-top:8px;padding:10px 18px}
#repay-dialog [data-repay-all]{margin:4px 0 12px}

/* ---------- Sidebar and header ---------- */
.sidebar{border-right:0}
nav a{border-radius:999px;padding:13px 16px;font-weight:550;transition:background-color .15s ease}
nav a:hover{background:rgba(255,255,255,.65)}
nav a.active{background:#fff;box-shadow:var(--float);font-weight:700}
.count{background:var(--butter);color:var(--butter-ink);border-radius:999px;font-weight:700}
.table-note{border-radius:24px;padding:22px 20px}
.table-note p{font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:19px;font-weight:600;line-height:1.2}
.table-note>span{color:var(--muted);font-weight:700}
.board-mark i{border-color:var(--lav-ink)}
.board-mark i:nth-child(2){background:var(--peach);border-color:var(--peach)}
.board-mark i:nth-child(3){background:var(--butter);border-color:var(--butter)}
.topline{border-bottom-color:var(--line)}
.avatar{background:var(--butter);color:var(--butter-ink)}
/* The header avatar is the Chance coin from the printed game. */
.phase{border:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:12px;font-weight:600}

/* ---------- Home: the wallet ---------- */
.turn-home{isolation:isolate}
.turn-zone{display:inline-flex;align-items:center;gap:8px;margin:14px 0 42px;padding:7px 14px;border-radius:999px;background:var(--green);color:var(--deep);font-size:12px;font-weight:700;letter-spacing:.02em}
.turn-zone::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
/* Cash is the dark card on top of a small stack, like a wallet. */
.cash-score{position:relative;background:var(--night);color:#fff;border-radius:24px;padding:24px 26px 20px;box-shadow:0 28px 44px -26px rgba(20,12,6,.85)}

/* ── The wallet ──────────────────────────────────────────────────────────────
   The black panel is the front of the wallet; the debit card and a few
   Egyptian notes sit behind its top edge, each cut off by it. Everything is
   positioned against the panel itself, never the screen, so the composition
   holds at any width. All of it is decorative: pointer-events off, and the
   panel's own z-index keeps the text above the paper. */
.cash-wallet{position:absolute;inset-inline:0;bottom:calc(100% - 34px);height:132px;pointer-events:none;z-index:-1;overflow:hidden}
.cash-wallet img{position:absolute;bottom:0;display:block;width:auto;filter:drop-shadow(0 10px 16px rgba(20,12,6,.34))}
/* Notes fan out behind the card, at different heights so it reads as a stack. */
.cash-wallet .wallet-note{height:74px;opacity:.97}
.cash-wallet .wallet-note:nth-child(1){inset-inline-start:4%;transform:rotate(-11deg) translateY(4px)}
.cash-wallet .wallet-note:nth-child(2){inset-inline-start:24%;transform:rotate(5deg) translateY(12px)}
.cash-wallet .wallet-note:nth-child(3){inset-inline-end:5%;transform:rotate(13deg) translateY(8px)}
/* The card sits in front of the notes and further out of the wallet. */
.cash-wallet .wallet-card{inset-inline-start:50%;height:104px;transform:translateX(-50%) rotate(-3deg) translateY(10px);filter:drop-shadow(0 14px 22px rgba(20,12,6,.42))}
html[dir=rtl] .cash-wallet .wallet-card{transform:translateX(50%) rotate(3deg) translateY(10px)}

/* ── Money in flight ─────────────────────────────────────────────────────────
   Notes are created only while a transaction is showing and remove themselves
   on animationend (wallet.js), so nothing is left in the DOM between turns.
   Only transform and opacity animate, to stay on the compositor. */
.money-layer{position:absolute;inset-inline:0;bottom:0;top:-120px;pointer-events:none;overflow:hidden;z-index:-1}
.money-note{position:absolute;inset-inline-start:50%;bottom:34px;height:62px;width:auto;
  filter:drop-shadow(0 8px 14px rgba(20,12,6,.38));will-change:transform,opacity;
  animation-duration:760ms;animation-delay:var(--delay,0ms);animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.22,1,.36,1)}
.money-note--in{animation-name:note-in}
.money-note--out{animation-name:note-out}
/* In: falls from above the panel and slips behind its front edge. */
@keyframes note-in{
  from{opacity:0;transform:translate(calc(-50% + var(--x,0%)),-150px) rotate(var(--tilt,0deg)) scale(.92)}
  35%{opacity:1}
  to{opacity:0;transform:translate(calc(-50% + var(--x,0%)),34px) rotate(calc(var(--tilt,0deg) * .3)) scale(1)}
}
/* Out: rises from behind the panel, spreads, and fades. */
@keyframes note-out{
  from{opacity:0;transform:translate(-50%,26px) rotate(0deg) scale(.96)}
  30%{opacity:1}
  to{opacity:0;transform:translate(calc(-50% + var(--x,0%) * 1.6),-132px) rotate(var(--tilt,0deg)) scale(1.04)}
}
/* The panel itself answers too: a small lift in, a small settle out. */
.cash-score.money-in{animation:wallet-bump 520ms cubic-bezier(.22,1,.36,1)}
.cash-score.money-out{animation:wallet-dip 520ms cubic-bezier(.22,1,.36,1)}
@keyframes wallet-bump{40%{transform:translateY(-4px) scale(1.012)}}
@keyframes wallet-dip{40%{transform:translateY(3px) scale(.992)}}

@media(prefers-reduced-motion:reduce){
  .money-layer{display:none}
  .cash-score.money-in,.cash-score.money-out{animation:none}
}
.cash-score h1{font:650 13px/1.2 var(--sans);letter-spacing:.03em;color:rgba(255,255,255,.72);margin:0 0 10px}
.cash-score>strong{font-family:var(--sans);font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.cash-score>strong small{font-weight:600;opacity:.7}
.flow-score{margin-top:18px;padding:8px 8px 8px 16px;border-top:0;border-radius:999px;background:rgba(255,255,255,.09)}
.flow-score b{padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.14);font-size:17px;font-variant-numeric:tabular-nums}
.cash-actions{gap:10px;margin:18px 0 6px}
.cash-actions button{border:0;border-radius:999px;background:#fff;box-shadow:var(--float);font-weight:650}
.cash-actions [data-cash=gain]{background:var(--sage);color:var(--sage-ink)}
.cash-actions [data-cash=loss]{background:var(--pink);color:var(--pink-ink)}
.next-turn{border-radius:var(--radius);padding:24px 26px;margin:18px 0 12px}
.next-turn>p:first-child{font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:30px;font-weight:650;line-height:1.1;letter-spacing:-.015em;margin-bottom:8px}
.next-turn .muted{font-size:15px}
.next-turn .charity-status{color:var(--tone-ink)}
.turn-tools a,.turn-tools .text-button{font-size:13px;font-weight:600}
/* Buy chance sits between the two text links as a small dark pill. */
.turn-tools .buy-chance{border:0;border-radius:999px;padding:9px 18px;min-height:40px;background:var(--ink);color:#fff;font:inherit;font-size:13px;font-weight:650;box-shadow:var(--float);cursor:pointer;transition:transform .15s ease}
.turn-tools .buy-chance:active{transform:scale(.96)}
.turn-tools .buy-chance:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Dice faces are little coloured tiles. */
.dice-shortcuts button{border:0;border-radius:16px;background:var(--c,#f1ebe0);color:var(--ci,var(--ink));box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);transition:transform .15s ease}
.dice-shortcuts button:nth-child(6n+1){--c:var(--lav);--ci:var(--lav-ink)}
.dice-shortcuts button:nth-child(6n+2){--c:var(--pink);--ci:var(--pink-ink)}
.dice-shortcuts button:nth-child(6n+3){--c:var(--sage);--ci:var(--sage-ink)}
.dice-shortcuts button:nth-child(6n+4){--c:var(--butter);--ci:var(--butter-ink)}
.dice-shortcuts button:nth-child(6n+5){--c:var(--peach);--ci:var(--peach-ink)}
.dice-shortcuts button:nth-child(6n){--c:var(--sky);--ci:var(--sky-ink)}
.dice-shortcuts button:hover{background:var(--c);border-color:transparent;transform:translateY(-2px)}
.dice-shortcuts .die-pip{background:var(--ci)}
.win-note{border-radius:18px;font-weight:600}

/* ---------- Progress ---------- */
.escape{border-radius:var(--radius);padding:24px 26px}
.escape-name{font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:24px;font-weight:650;letter-spacing:-.015em}
.escape-heading>span,.escape-bottom{font-size:12px;color:var(--muted)}
.escape-bottom strong{color:var(--tone-ink);font-weight:700}
.track{height:10px;background:rgba(255,255,255,.6);margin:18px 0 12px}
.track>div{background:var(--tone-ink)}

/* ---------- Your money: a bento grid ---------- */
main:has(>.statement-section){display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-content:start}
main:has(>.statement-section)>*{grid-column:1/-1;margin-block:0}
main:has(>.statement-section)>.topline{margin-bottom:8px}
main:has(>.statement-section)>.back,main:has(>.statement-section)>.text-button{justify-self:start}
.statement-section{border-radius:var(--radius);padding:26px 26px 22px}
.statement-section h2{font-size:28px;margin-bottom:12px}
/* Section order: 1 progress, 2 in, 3 out, 4 cashflow, 5 assets, 6 loans,
   7 portfolio, 8 Gam3eyas, 9 family. */
.statement-section:nth-of-type(2){--tone:var(--sage);--tone-ink:var(--sage-ink)}
.statement-section:nth-of-type(3){--tone:var(--pink);--tone-ink:var(--pink-ink)}
.statement-section:nth-of-type(4){--tone:var(--lav);--tone-ink:var(--lav-ink)}
.statement-section:nth-of-type(5){--tone:var(--peach);--tone-ink:var(--peach-ink)}
.statement-section:nth-of-type(6){--tone:var(--sky);--tone-ink:var(--sky-ink)}
.statement-section:nth-of-type(7){--tone:var(--butter);--tone-ink:var(--butter-ink)}
.statement-section:nth-of-type(8){--tone:var(--lav);--tone-ink:var(--lav-ink)}
.statement-section:nth-of-type(9){--tone:var(--pink);--tone-ink:var(--pink-ink)}
@media(min-width:960px){
  main:has(>.statement-section)>.statement-section:nth-of-type(2),
  main:has(>.statement-section)>.statement-section:nth-of-type(3),
  main:has(>.statement-section)>.statement-section:nth-of-type(6),
  main:has(>.statement-section)>.statement-section:nth-of-type(7){grid-column:span 3}
  main:has(>.statement-section)>.statement-section:nth-of-type(4),
  main:has(>.statement-section)>.statement-section:nth-of-type(9){grid-column:span 2}
  main:has(>.statement-section)>.statement-section:nth-of-type(5),
  main:has(>.statement-section)>.statement-section:nth-of-type(8){grid-column:span 4}
}
.statement-flow{font-size:38px}
.expense-row:hover{background:rgba(255,255,255,.3)}
.holding-card{border-radius:20px}
.holding-card h3{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:650}
.loan-card>span{color:var(--red)}
.holding-card small{color:var(--muted)}

/* ---------- Setup ---------- */
.welcome{max-width:600px}
.welcome>.type-icon{background:var(--butter);color:var(--butter-ink);border-radius:18px;transform:rotate(-6deg)}
.welcome h1{font-size:clamp(38px,6vw,52px)}
.gender-picker legend,label.field{font-size:13px;font-weight:650}
.gender-options label>span{border:0;border-radius:18px;padding:16px 18px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:15px;font-weight:650;transition:box-shadow .15s ease,transform .15s ease}
.gender-options small{font-size:12px;font-weight:500;line-height:1.4;margin-top:4px}
.gender-options input:checked+span{background:var(--sage);color:var(--sage-ink);box-shadow:inset 0 0 0 2px var(--night)}
.gender-options input[value="male"]:checked+span{background:var(--rose);color:var(--rose-ink)}
.gender-options input:focus-visible+span{outline:3px solid var(--night)}
/* Setup lists (game mode, job card) get the same breathing room as the
   gender choice, so the next label never sits on top of them. */
#setup-form>.field{margin:0 0 22px}
/* The chosen game mode's rule, under its list. */
.mode-rule{margin:9px 0 0}
.mode-rule:empty{display:none}
.preview p,.preview-label{color:var(--muted)}
/* Marriage: the preview takes the colour of the card side being read. */
.preview[data-side="red"]{--tone:var(--rose);--tone-ink:var(--rose-ink)}
.preview[data-side="green"]{--tone:var(--sage);--tone-ink:var(--sage-ink)}
/* The job card as printed: navy bands, lavender face, bilingual rows. It keeps
   its print colours in both themes, like the card on the table. */
.job-flip{--jc-navy:#233464;--jc-face:#e8eaf6;--jc-row:#dde1ef;--jc-total:#d4dde3;--jc-ink:#231f20;
  perspective:1400px;width:min(100%,340px);margin:4px auto 24px}
.jc-inner{position:relative;transform-style:preserve-3d}
.job-flip.dealt .jc-inner{animation:jc-flip .9s cubic-bezier(.2,.75,.25,1) both}
@keyframes jc-flip{
  0%{transform:translateY(28px) rotateY(180deg) scale(.9)}
  55%{transform:translateY(-6px) rotateY(20deg) scale(1.02)}
  100%{transform:none}
}
.jc-face{border-radius:18px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 40px -18px rgba(20,28,60,.55)}
.jc-front{background:var(--jc-face);color:var(--jc-ink);display:flex;flex-direction:column}
.jc-back{position:absolute;inset:0;transform:rotateY(180deg);background:var(--jc-navy);color:#e8eaf6;padding:14px}
.jc-back-frame{height:100%;box-sizing:border-box;border:1.5px solid rgba(232,234,246,.35);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;text-align:center}
.jc-back-frame b{font:800 40px/1 Arial,Helvetica,sans-serif}
.jc-back-icon{font-size:64px;line-height:1}
.jc-back-frame small{font:700 11px Arial,Helvetica,sans-serif;letter-spacing:.04em}
.jc-band{background:var(--jc-navy);color:#e8eaf6;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;font:800 30px/1 Arial,Helvetica,sans-serif}
footer.jc-band{justify-content:center;font-size:11px;letter-spacing:.04em;padding:16px 20px 22px}
.jc-body{padding:20px 18px 12px}
.jc-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;padding:0 4px 8px;border-bottom:1.5px solid #b6bad0;font:400 clamp(24px,7.5vw,32px)/1.15 Georgia,"Times New Roman",serif;color:var(--jc-ink)}
.jc-formula{margin:6px 0 12px;font:700 12px/1.3 Arial,Helvetica,sans-serif;text-align:right;color:var(--jc-ink)}
.jc-formula i{font:italic 700 13px Georgia,serif}
p.jc-formula:not([lang]){text-align:left;margin:6px 8px 0}
.jc-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;background:var(--jc-row);border-radius:10px;padding:10px 16px;margin:0 0 10px;font:400 clamp(17px,5.2vw,21px)/1.2 Georgia,"Times New Roman",serif}
.jc-row b{font-weight:400;font-variant-numeric:tabular-nums;text-align:center}
.jc-row span[lang="ar"]{text-align:right}
.jc-row.total{background:var(--jc-total);margin:16px 0 0}
.jc-amaan{margin:12px 8px 0;font:600 12px/1.4 Arial,Helvetica,sans-serif;color:var(--jc-ink)}
@media (prefers-reduced-motion:reduce){.job-flip.dealt .jc-inner{animation:none}}
.previous-game{border-radius:20px}
.preview{border-radius:20px}

/* ---------- Borrowing picker ---------- */
.type-card{border-radius:24px;padding:22px;min-height:160px;transition:transform .18s ease,box-shadow .18s ease}
.picker .type-card:nth-child(6n+1){--tone:var(--lav);--tone-ink:var(--lav-ink)}
.picker .type-card:nth-child(6n+2){--tone:var(--peach);--tone-ink:var(--peach-ink)}
.picker .type-card:nth-child(6n+3){--tone:var(--sky);--tone-ink:var(--sky-ink)}
.picker .type-card:nth-child(6n+4){--tone:var(--butter);--tone-ink:var(--butter-ink)}
.picker .type-card:nth-child(6n+5){--tone:var(--pink);--tone-ink:var(--pink-ink)}
.picker .type-card:nth-child(6n){--tone:var(--sage);--tone-ink:var(--sage-ink)}
.picker .type-card:nth-child(n) .type-icon{background:rgba(255,255,255,.55);color:var(--tone-ink)}
.type-card strong{font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:22px;font-weight:650;line-height:1.1}
.type-card small{font-size:13px;color:var(--muted)}
.type-card:hover{border-color:transparent;transform:translateY(-3px);box-shadow:var(--float)}

/* ---------- History ---------- */
.undo-banner{border-radius:24px;padding:20px 22px;font-size:15px;font-weight:650}
.undo-banner p{color:var(--muted);font-weight:500}
.history-row{border-radius:20px;margin-bottom:10px;padding:0 18px}
.history-row summary{padding:14px 0}
.history-main strong{font-size:14px;font-weight:650}
.history-main small{font-size:12px}
.history-amount{font-size:17px}
.empty-note{border-top:0}

/* ---------- Table ---------- */
/* Buying a Chance business with a partner. */
.chance-partner{border-radius:18px;padding:14px;margin:0 0 14px;background:var(--lav);color:var(--lav-ink)}
.chance-mode[data-chance-mode="partner"]{grid-column:1/-1}
/* Loan requests this player sent and is still waiting on. */

/* ---------- Chance art ---------- */
/* Pictures cut from assets/ by scripts/chance-art.mjs. */
.chance-group-icon{display:flex;align-items:center;min-height:64px}
.chance-group-art{display:block;width:88px;height:64px;object-fit:contain;object-position:left center}
.chance-asset-art{display:block;width:100%;height:88px;object-fit:contain;margin:0 0 8px}
.chance-buy-head .chance-head-art{display:block;width:128px;height:100px;object-fit:contain;margin:0 0 6px}
html[dir=rtl] .chance-group-art{object-position:right center}

/* ---------- Choices inside turns ---------- */
.chance-mode.is-on,.chance-route.is-on,.market-side--buy.is-on,.market-asset-card.is-chosen{background:var(--night);border-color:var(--night);color:#fff}

/* ---------- Dialogs ---------- */
dialog{border:0;border-radius:var(--radius);background:var(--white);box-shadow:0 40px 90px -30px rgba(30,18,8,.55)}
dialog::backdrop{background:rgba(38,28,20,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog h2{font-size:28px}
#roll-dialog .dialog-heading{background:var(--white)}
/* A dialog focuses its close button on open, so it is a round chip whose
   focus ring follows the circle instead of a hard square. */
.icon-button,.market-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:22px;line-height:1}
.milestone-dialog{background:var(--paper)}
.escape-equation{background:var(--lav);color:var(--lav-ink);border-radius:24px}
.milestone-number{background:var(--night);border-radius:24px}

/* ---------- Phones ---------- */
@media(max-width:700px){
  h1{font-size:32px}
  .welcome h1{font-size:36px}
  .form-box{padding:22px 18px}
  .cash-score{padding:20px}
  .cash-wallet{height:100px;bottom:calc(100% - 28px)}
  .cash-wallet .wallet-note{height:54px}
  .cash-wallet .wallet-card{height:78px}
  .money-note{height:48px}
  .next-turn{padding:20px}
  .next-turn>p:first-child{font-size:25px}
  .statement-section{padding:22px 18px 18px}
  .statement-section h2{font-size:24px}
  .statement-flow{font-size:32px}
  .mobile-nav{background:rgba(255,253,248,.94);border-top:0;border-radius:24px 24px 0 0;box-shadow:0 -12px 30px -20px rgba(40,25,10,.4);font-weight:600}
  .main-action-bar{border-top:0}
  #roll-dialog{border-radius:28px 28px 0 0}
}

/* ---------- Arabic ---------- */
html[dir=rtl] body,html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] .cash-score h1,html[dir=rtl] .next-turn>p:first-child,html[dir=rtl] .escape-name,html[dir=rtl] .type-card strong,html[dir=rtl] .table-note p{font-family:'Readex Pro',Tahoma,sans-serif;letter-spacing:0}

@media(prefers-reduced-motion:reduce){
  .type-card:hover,.dice-shortcuts button:hover,.primary:hover{transform:none}
}

/* Buy chance is always sage green - fixed, so Amaan's lavender does not take it -
   and Sync is sky blue, so the two off-turn actions never blur together. */
.turn-tools .buy-chance--green{background:var(--sage);color:var(--sage-ink)}
.turn-tools .buy-chance--blue{background:var(--sky);color:var(--sky-ink)}
.link-icon{width:22px;height:22px;vertical-align:middle;margin-inline-end:6px}
/* Four things share this row on a phone: let it wrap instead of squeezing labels. */
.turn-tools{flex-wrap:wrap;gap:8px 10px}
.turn-tools .buy-chance{white-space:nowrap}