/* CLAUDE WAS HERE (PocketCubeCasino, 2026-10-28): the site's look, rebuilt from the user's approved mock-ups (the
   "Pocket Cube Site Mock-ups" design canvas).  His calls, in his words where he gave them:
     - "Get rid of the cursive font, but keep a homey style still" -> Fraunces (a soft serif) for headings, Fredoka
       for everything else; Sacramento is gone from the site.
     - "Add a bit of warm red into the design" -> --red, beside the brass, the wood and the felt.
     - "less text and more visuals ... instructions should be on a separate page" -> pictures on every page, the
       rules of play on /howto.
     - "Make this balance more obvious" -> the cream balance strip under the header.
     - "Put sooz in place of the pocket cube logo" -> img/sooz_logo.png.
   Every behaviour is site.js; this file is only the look. */
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces.ttf") format("truetype"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/Fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --felt:      #10311f;
  --felt-deep: #0a2316;
  --felt-lit:  #1d4a31;
  --wood:      #3b2016;
  --wood-dark: #2a160f;
  --wood-lit:  #5a3222;
  --brass:     #d9ae5a;
  --brass-lit: #ffd98a;
  --red:       #b83a2e;
  --cream:     #fbf3e0;
  --paper:     #f2e6cb;
  --paper-lit: #fffaf0;
  --ink:       #150d08;
  --body:      #e8dcc2;
  --dim:       #c9b99a;
  --brown:     #5a3222;
  --win:       #6fd49b;
  --lose:      #ff8a7e;
  --serif: "Fraunces", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* CLAUDE WAS HERE (2026-10-29, the user: "when clicking the buttons on the how to play page it should scroll down to
   the section it shouldn't teleport") */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: "Fredoka", system-ui, sans-serif; font-size: 17px; line-height: 1.5; color: var(--cream); background: var(--felt); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--brass-lit); }
a:hover { color: var(--cream); }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--brass-lit); outline-offset: 2px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; width: 100%; }
[hidden] { display: none !important; }

/* ---- the header: Sooz and the name, the tabs, the account */
header.top { background: var(--wood); border-bottom: 3px solid var(--brass); }
header.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; }
.brand img { width: 50px; height: auto; display: block; }   /* (2026-10-29: the whole bow tie now, a little taller) */
.brand span { font-family: var(--serif); font-size: 30px; font-weight: 700; }
nav.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
nav.tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; color: var(--cream); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-decoration: none; }
nav.tabs a:hover { background: rgba(0,0,0,.25); }
nav.tabs a[aria-current="page"] { background: var(--brass); color: var(--ink); }
nav.tabs svg { width: 16px; height: 16px; }
.acct { display: flex; align-items: center; gap: 12px; }
.acct .who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.acct .who svg { width: 20px; height: 20px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #8a6a4a; background: transparent; color: var(--body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 20px; height: 20px; }
.btn-red { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--red); color: var(--cream); font-weight: 600; letter-spacing: .06em; text-decoration: none; border: 0; cursor: pointer; font-size: 16px; }
.btn-red:hover { color: var(--cream); filter: brightness(1.08); }
.btn-red svg { width: 18px; height: 18px; }
.stripe { height: 4px; background: var(--red); }

/* ---- the balance strip (signed in) */
.purse { background: var(--cream); border-bottom: 3px solid var(--brass); }
.purse .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 14px; padding-bottom: 14px; }
.bal { display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 10px; border-radius: 999px; background: var(--paper-lit); border: 2px solid #c9b48a; color: var(--ink); }
.bal svg { width: 40px; height: 40px; flex: none; }
.bal img.coin { width: 40px; height: 40px; flex: none; }
.bal b { font-size: 30px; font-weight: 700; line-height: 1; }
.bal span { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--brown); }
.bal.total { background: var(--wood); border-color: var(--brass); padding-left: 16px; }
.bal.total span, .bal.total b { color: var(--brass-lit); }
/* (2026-11-04) today's maze cap in the purse strip */
.bal.cap { padding: 8px 20px; margin-left: auto; }   /* the right end of the strip (2026-11-04) */
.bal.cap .caprow { display: flex; align-items: center; gap: 8px; }
.bal.cap img.coin { width: 26px; height: 26px; }   /* coins, not a count of mazes */
.bal.cap .capt { display: flex; flex-direction: column; gap: 2px; min-width: 190px; }
.bal.cap b { font-size: 22px; }
.bal.cap .bar { display: block; height: 6px; border-radius: 3px; background: #d9c9a6; overflow: hidden; margin-top: 3px; }
.bal.cap .bar u { display: block; height: 100%; background: var(--brass); text-decoration: none; }
.bal.cap em { font-style: normal; font-size: 12px; color: var(--brown); }
.bal.cap.full { border-color: #8e2620; }
.bal.cap.full .bar u { background: #8e2620; }
.bal.cap.full em { color: #8e2620; font-weight: 700; }

/* ---- the page */
main { flex: 1; width: 100%; }
main > .wrap { padding-top: 48px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 36px; }
h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(44px, 6vw, 72px); line-height: 1.02; margin: 0; }
h2 { font-family: var(--serif); font-weight: 700; margin: 0; }
.eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; color: var(--brass-lit); }
.lead { margin: 0; font-size: 19px; color: var(--body); max-width: 520px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; }

.btn-brass { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 40px; border-radius: 999px; border: 0; background: var(--brass); color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: .08em; cursor: pointer; text-decoration: none; }
.btn-brass:hover { color: var(--ink); filter: brightness(1.06); }
.btn-brass.big { min-height: 64px; padding: 0 48px; font-size: 22px; letter-spacing: .1em; }
.btn-brass svg { width: 22px; height: 22px; }
.btn-brass[disabled], .btn-red[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: 999px; border: 2px solid #6b5a3e; background: transparent; color: var(--dim); font-size: 19px; font-weight: 700; letter-spacing: .08em; }

/* panels: felt with a brass edge, or cream paper with a brass edge */
.panel { border: 3px solid var(--brass); border-radius: 18px; background: var(--felt-deep); overflow: hidden; }
.paper { border: 3px solid var(--brass); border-radius: 18px; background: var(--cream); color: var(--ink); }
.paper a { color: var(--brown); }

/* ---- home: the maze */
.hero { display: flex; flex-wrap: wrap; gap: 36px; align-items: center; }
.hero .art { flex: 1 1 520px; min-width: 0; border-radius: 22px; }
.hero .art svg { display: block; width: 100%; height: auto; }
.hero .art { overflow: hidden; }
.hero .art img { display: block; width: 100%; height: auto; }
.hero .copy { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hero .note { font-size: 15px; color: var(--dim); margin: 0; }
/* CLAUDE WAS HERE (2026-10-29, the user: "on the guest home page, you need to enlarge or center the maze image and the
   text beside it because it looks sparse with the empty green below"): the home's hero is centred in the height
   between the header and the footer, a soft table-light pooled behind it; a guest's (the hero is all there is) is
   bigger, the picture taking most of the width */
main.home { display: flex; background: radial-gradient(ellipse 70% 60% at 50% 48%, #1a4a30 0%, rgba(26,74,48,0) 70%); }
main.home > .wrap { justify-content: center; }
main.home.guest > .wrap { max-width: 1560px; padding-top: 40px; padding-bottom: 56px; }
main.home.guest .hero { gap: 28px 56px; }
main.home.guest .hero .art { flex: 1 1 780px; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,217,138,.15); }
main.home.guest .hero .copy { flex: 1 1 400px; max-width: 560px; gap: 22px; }
main.home.guest h1 { font-size: clamp(48px, 5.2vw, 92px); }
main.home.guest .lead { font-size: 21px; }
@media (max-width: 1100px) { main.home.guest .hero .copy { max-width: none; } }

/* the display name: a small player pass (2026-10-29: the sign-in page's red stub and felt ticket; the name is
   written on the pass's signature line, not typed into a form box) */
.namepass { display: flex; flex-wrap: wrap; border-radius: 22px; border: 3px solid var(--brass); background: var(--felt-deep); overflow: hidden; }
.namepass .stub { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 26px; background: var(--red); color: var(--cream); border-right: 3px dashed var(--cream); font-size: 13px; font-weight: 600; letter-spacing: .2em; }
.namepass .stub img { width: 52px; height: auto; }
.namepass form { flex: 1 1 360px; min-width: 0; padding: 22px 30px 16px; display: flex; flex-direction: column; gap: 6px; }
.namepass label { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--brass-lit); }
.namepass .sign { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.namepass input { flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 2px 4px; border: 0; border-bottom: 2px dashed var(--brass); border-radius: 0; background: transparent; color: var(--cream); font-family: var(--serif); font-size: 32px; font-weight: 700; letter-spacing: .01em; }
.namepass input::placeholder { color: #6f8f7c; font-weight: 500; }
.namepass input:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--brass-lit); }
.namepass input:focus-visible { outline: none; }
.namepass .btn-brass { min-height: 46px; padding: 0 24px; font-size: 16px; }
.namepass .btn-brass svg { width: 18px; height: 18px; }
.namepass .fine { margin: 2px 0 0; font-size: 14px; color: var(--dim); }
.namepass .msg { color: var(--lose); }
.namepass .msg.ok { color: var(--win); }
.msg { min-height: 1.4em; margin: 0; font-size: 15px; color: var(--lose); width: 100%; }
.msg.ok { color: var(--win); }
.paper .msg { color: var(--red); }
.paper .msg.ok { color: #1f6b43; }

/* ---- sign in: the player pass */
.pass { display: flex; flex-wrap: wrap; border-radius: 22px; border: 3px solid var(--brass); background: var(--felt-deep); overflow: hidden; }
.pass .stub { flex: 1 1 340px; min-width: 0; background: var(--red); color: var(--cream); padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; border-right: 3px dashed var(--cream); }
.pass .stub .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; letter-spacing: .2em; }
.pass .stub img { width: 54px; height: auto; }
.pass .stub h1 { font-size: 48px; line-height: 1.05; }
.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.perks li { display: flex; align-items: center; gap: 10px; font-weight: 600; line-height: 1.25; }
.perks svg { width: 56px; height: 56px; flex: none; }
.pass .serial { margin: auto 0 0; font-size: 14px; letter-spacing: .12em; opacity: .85; }
.pass form { flex: 1 1 440px; min-width: 0; padding: 36px 32px; display: flex; flex-direction: column; gap: 12px; }
.pass .formhead { margin: 0 0 4px; font-size: 32px; line-height: 1.1; color: var(--cream); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg button { min-height: 52px; border-radius: 14px; border: 2px solid var(--brass); background: transparent; color: var(--cream); font-size: 16px; font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--brass); color: var(--ink); }
.pass label { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--brass-lit); margin-top: 6px; }
.pass input { min-height: 54px; padding: 0 18px; border-radius: 14px; border: 2px solid #4d7a5f; background: var(--felt); color: var(--cream); font: inherit; font-size: 19px; }
.pass input::placeholder { color: #8fae9a; }
.pass .btn-brass { margin-top: 10px; min-height: 60px; font-size: 20px; letter-spacing: .1em; }
.pass .fine { margin: 0; font-size: 14px; color: var(--dim); }
/* CLAUDE WAS HERE (2026-11-01, the user: "The website shows the 'first time here' as too small to notice,
   make it larger or place it somewhere else") -- the way to the OTHER page was a line of grey fine print
   under the guest link, so a new player on /signin (and a returning one on /signup) could miss it entirely.
   It is its own bordered panel now, above the fine print, with the link drawn as a brass outline button. */
/* (2026-11-01) a confirmation link that failed: said out loud, at the top of whatever page it landed on */
.linkerr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 14px 20px;
  background: var(--red); color: var(--cream); font-size: 16px; text-align: center; }
.linkerr a { color: var(--cream); font-weight: 700; }

/* CLAUDE WAS HERE (2026-11-01) CHECK YOUR EMAIL -- the panel that replaces the sign-up form once the mail is away
   (site.js sentPanel).  It stands in the form's place inside the player-pass card, so it reads as its own page. */
.pass .sent { flex: 1 1 440px; min-width: 0; padding: 44px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pass .sent .tick { width: 72px; height: 72px; color: var(--win); }
.pass .sent h2 { margin: 4px 0 0; font-family: var(--serif); font-size: 34px; line-height: 1.1; color: var(--cream); }
.pass .sent p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--body); }
.pass .sent p b { color: var(--brass-lit); overflow-wrap: anywhere; }
.pass .sent .fine { font-size: 14px; color: var(--dim); }
.pass .sent .row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.pass .sent .row a { color: var(--brass-lit); }
.pass .sent .btn-ghost { min-height: 52px; font-size: 16px; color: var(--cream); border-color: var(--brass); cursor: pointer; }
.pass .sent .btn-ghost:disabled { color: var(--dim); border-color: #6b5a3e; cursor: default; }

.pass .switch { margin: 16px 0 4px; padding: 16px 18px; border: 2px solid var(--brass); border-radius: 14px;
  background: rgba(217, 174, 90, .08); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 17px; color: var(--cream); }
.pass .switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 2px solid var(--brass); background: transparent; color: var(--brass-lit); font-weight: 700;
  letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.pass .switch a:hover, .pass .switch a:focus-visible { background: var(--brass); color: var(--ink); }
/* (2026-10-30, launch prep) the 18+ tick and the Turnstile check on the player pass */
.pass label.check { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--body); cursor: pointer; }
.pass label.check[hidden] { display: none; }
/* (2026-11-04) the show-password tick sits under the password boxes, a little tighter than the 18+ box */
label.check.showpw { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--body); cursor: pointer; }
.pass label.check.showpw input, label.check.showpw input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--brass); cursor: pointer; }
.pass label.check input { flex: none; width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--brass); cursor: pointer; }
.pass label.check a { color: var(--brass-lit); }
.pass .captcha { min-height: 65px; margin-top: 6px; }

/* ---- the casino */
.casino-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.casino-hero { flex: 1 1 560px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 16px 24px; overflow: hidden; }
.casino-hero .sooz { flex: 0 1 380px; min-width: 240px; position: relative; }
.casino-hero .sooz img { display: block; width: 100%; height: auto; }
.casino-hero .sooz svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.casino-hero .copy { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.casino-hero h1 { font-size: 56px; }
.casino-hero p { margin: 0; font-size: 18px; color: #4a3a2a; }
.chip-pill { display: inline-flex; align-items: center; gap: 14px; background: var(--cream); color: var(--ink); border-radius: 999px; border: 3px solid var(--brass); padding: 8px 22px 8px 10px; text-decoration: none; }
.chip-pill:hover { color: var(--ink); }
.chip-pill svg { width: 44px; height: 44px; }
.chip-pill b { font-size: 26px; }
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.game { display: flex; flex-direction: column; }
.game > svg { display: block; width: 100%; height: auto; }
.game .body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.game h2 { font-size: 34px; }
.game p { margin: 0; color: var(--body); }
.game .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.game .tag { font-size: 12px; letter-spacing: .12em; padding: 6px 12px; border-radius: 999px; background: var(--red); color: var(--cream); }
.game .facts { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 4px; }
.game .facts span { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.game .facts svg { width: 20px; height: 20px; }
.game .left { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--cream); color: var(--ink); border: 2px solid var(--brass); }
.game .left svg { width: 36px; height: 36px; }
.game .left b { font-size: 30px; line-height: 1; }
.game .left span { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--brown); }
.game .btn-brass, .game .btn-ghost { margin-top: auto; }
.game.soon { border-style: dashed; border-color: #6b5a3e; background: #0d2a1b; }
.game.soon h2 { color: var(--body); }
.game.soon p { color: var(--dim); }
.game .need { margin: 0; font-size: 15px; color: var(--dim); }

/* ---- the chip desk */
.balances { padding: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; }
.balances .cell { flex: 1 1 240px; display: flex; align-items: center; gap: 16px; background: var(--paper); border-radius: 14px; padding: 16px 20px; }
.balances .cell svg { width: 56px; height: 56px; flex: none; }
.balances .cell img.coin { width: 56px; height: 56px; flex: none; }
.balances .cell b { font-size: 40px; line-height: 1; }
.balances .swap { width: 48px; height: 48px; flex: none; }
.balances .cell.total { background: var(--wood); color: var(--cream); justify-content: space-between; }
.balances .cell.total span { font-size: 13px; letter-spacing: .12em; color: var(--brass-lit); }
.desk { display: flex; flex-wrap: wrap; gap: 32px; }
.desk .panel { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; }
.desk .panel > svg { display: block; width: 100%; height: auto; }
.desk .body { padding: 26px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.desk h2 { font-size: 32px; }
.amounts { display: flex; flex-wrap: wrap; gap: 10px; }
.amounts button { min-height: 48px; min-width: 76px; padding: 0 16px; border-radius: 999px; border: 2px solid #4d7a5f; background: transparent; color: var(--cream); font-size: 17px; font-weight: 600; cursor: pointer; }
.amounts button[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.amounts button[disabled] { color: #7f9a88; border-color: #2a5a40; cursor: not-allowed; }
.desk .btn-brass svg, .desk .btn-red svg { width: 22px; height: 22px; }
.desk .btn-red img.coin { width: 28px; height: 28px; flex: none; }
.desk .btn-red { min-height: 56px; justify-content: center; font-size: 19px; font-weight: 700; letter-spacing: .08em; margin-top: auto; }
.desk .btn-brass { margin-top: auto; }
.small { font-size: 15px; color: var(--dim); margin: 0; }

/* ---- how to play */
/* CLAUDE WAS HERE (2026-10-29): the chapter buttons are the approved BRASS PLAQUES, direction A2 (the user: "Use
   direction two for the buttons please ... or A2"; the mock-up is the chapter-buttons board on the "Pocket Cube Site
   Mock-ups" canvas): engraved brass nameplates, two screws on the right, each number in a red enamel inlay ringed in
   polished brass.  Hover lifts a plaque, a press pushes it in. */
.chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chapters a { position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 0 26px 0 10px; border-radius: 8px;
  background: linear-gradient(180deg, #ffe9ad 0%, #e2b865 38%, #c08f3e 62%, #e0b25e 100%); border: 1px solid #6e4a18;
  box-shadow: inset 0 0 0 3px rgba(255,240,200,.35), inset 0 -2px 0 rgba(90,55,15,.5), 0 3px 0 #5a3a12, 0 8px 14px rgba(0,0,0,.35);
  color: #3b2016; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.15; text-shadow: 0 1px 0 rgba(255,245,215,.7);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.chapters a::before, .chapters a::after { content: ""; position: absolute; right: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(35deg, transparent 42%, rgba(60,30,5,.75) 42% 60%, transparent 60%), radial-gradient(circle at 35% 35%, #fff3cf, #8a6224 70%);
  box-shadow: inset 0 0 0 1px rgba(60,30,5,.5); }
.chapters a::before { top: 7px; }
.chapters a::after { bottom: 7px; }
.chapters a:hover { transform: translateY(-2px); filter: brightness(1.06); color: #3b2016; }
.chapters a:active { transform: translateY(2px); box-shadow: inset 0 0 0 3px rgba(255,240,200,.35), 0 1px 0 #5a3a12, 0 3px 6px rgba(0,0,0,.35); }
.chapters a:focus-visible { outline: 3px solid var(--brass-lit); outline-offset: 3px; }
.chapters a span { width: 46px; height: 46px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 32%, #a3302a 0%, #6e1712 70%, #4a0d0a 100%);
  box-shadow: 0 0 0 3px #f6d58a, 0 0 0 4px #6e4a18, inset 0 2px 4px rgba(0,0,0,.45);
  font-family: var(--serif); font-weight: 800; font-size: 25px; line-height: 1; color: #fff8e6; text-shadow: 0 1px 1px rgba(0,0,0,.5); margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .chapters a { transition: none; } .chapters a:hover, .chapters a:active { transform: none; } }
.chapter { scroll-margin-top: 24px; }
.chapter:focus { outline: none; }
.chapter { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; padding: 32px; border-radius: 22px; border: 3px solid var(--brass); }
.chapter.light { background: var(--cream); color: var(--ink); }
.chapter.dark { background: var(--felt-deep); flex-wrap: wrap-reverse; }
.chapter .pic { flex: 0 1 380px; min-width: 260px; }
.chapter .pic svg { display: block; width: 100%; height: auto; }
.chapter .text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.chapter .num { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--red); }
.chapter.dark .num { color: var(--brass-lit); }
.chapter h2 { font-size: 38px; }
.chapter p { margin: 0; font-size: 18px; color: #4a3a2a; }
.chapter.dark p { color: var(--body); }
.chapter ul { margin: 0; padding-left: 22px; font-size: 18px; color: #4a3a2a; }
.chapter ul li + li { margin-top: 4px; }
/* (2026-10-29) a guest's locked teaser in place of the account chapters */
.chapter.locked-teaser { background: linear-gradient(135deg, #2a160f, #3b2016 60%, #22130c); color: var(--cream); border-style: dashed; }
.chapter.locked-teaser p { color: var(--body); }
.chapter.locked-teaser .num { color: var(--brass-lit); }
.lock-list { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.lock-list li { margin: 0 !important; display: flex; flex-direction: column; padding: 10px 14px 10px 40px; border-radius: 12px; border: 1.5px solid rgba(217,174,90,.45); background: rgba(0,0,0,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d9ae5a'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") no-repeat 13px 50% / 16px; color: var(--cream); }
.lock-list li span { font-size: 14px; color: var(--body); }
.chapters a.locked { background: #2a160f; border: 2px dashed #8a6a3a; box-shadow: none; color: #e8dcc2; text-shadow: none; }
.chapters a.locked::before, .chapters a.locked::after { display: none; }
.chapters a.locked:hover { transform: none; filter: none; border-color: var(--brass); color: var(--cream); }
.chapters a.locked span { background: #150d08; box-shadow: 0 0 0 3px #6e4a18, inset 0 2px 5px rgba(0,0,0,.7); color: var(--brass); }
.chapter.dark ul { color: var(--body); }
.keys { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.keys span { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: var(--felt); border: 2px solid #4d7a5f; color: var(--cream); }
kbd { font-family: inherit; font-weight: 700; padding: 2px 10px; border-radius: 6px; background: var(--cream); color: var(--ink); }
.center { display: flex; justify-content: center; }

/* ---- the long pages: the Official Rules and the Privacy Policy */
main.doc > .wrap { max-width: 860px; gap: 18px; }
main.doc .panel { padding: 28px 32px; overflow: visible; }
.doc h3 { font-family: var(--serif); font-size: 22px; color: var(--brass-lit); margin: 26px 0 6px; }
.doc p, .doc li { font-size: 16px; line-height: 1.6; color: var(--body); }
.doc ul { padding-left: 22px; }
.doc .strong { font-weight: 600; }
.todo { background: var(--red); color: #fff; padding: 0 4px; border-radius: 4px; }   /* a placeholder to fill before launch */

/* ---- the footer */
.stripe.foot-stripe { margin-top: auto; }
footer.foot { background: var(--wood); border-top: 3px solid var(--brass); }
footer.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 22px; font-size: 15px; color: var(--body); }
footer.foot nav { display: flex; gap: 20px; }
/* (2026-11-02) the studio credit, bottom-left corner of every page.  Brass and serif like the header's wordmark, so
   it reads as the maker's name and not as another legal link; the TM is raised and small, as a mark is set. */
footer.foot .studio { font-family: var(--serif); font-weight: 700; color: var(--brass); letter-spacing: .04em; white-space: nowrap; }
footer.foot .studio .tm { font-size: .62em; vertical-align: super; letter-spacing: 0; margin-left: 1px; }

/* ---- the game itself, over everything */
#frame-wrap { position: fixed; inset: 0; background: #000; display: none; z-index: 50; }
#frame-wrap iframe { border: 0; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 1; background: #000; }
/* CLAUDE WAS HERE (2026-10-29): the themed backdrop beside the game (backdrop.js) -- the iframe is sized to the
   game's own shape and centred; the canvas behind it paints the room for the game in it, and a brass bezel frames it */
#frame-wrap .bd { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#frame-wrap .bd canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#frame-wrap .bd-fx { position: absolute; inset: 0; }
#frame-wrap .bd-fx i { position: absolute; display: block; pointer-events: none; }
#frame-wrap .bd-g { position: absolute; inset: 0; transition: opacity 1.5s linear; }
#frame-wrap.bd-side iframe, #frame-wrap.bd-tb iframe { box-shadow: 0 0 0 2px #7a5320, 0 0 0 5px #d9ae5a, 0 0 0 7px #3b2016, 0 0 40px 8px rgba(0,0,0,.6); }
.bd-beacon { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, rgba(255,80,60,.95) 0 25%, rgba(255,80,60,0) 70%); animation: bdBlink 2s steps(1) infinite; }
@keyframes bdBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .1; } }
.bd-beam { width: 70px; height: 140vh; margin-left: -35px; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(220,210,255,.20), rgba(220,210,255,0) 80%); filter: blur(6px); transform: rotate(180deg); animation: bdSweep 9s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes bdSweep { from { transform: rotate(155deg); } to { transform: rotate(205deg); } }
.bd-ember { width: 4px; height: 4px; border-radius: 50%; background: #ffc35a; box-shadow: 0 0 6px 2px rgba(255,140,40,.8); opacity: 0; animation: bdEmber 4s linear infinite; }
@keyframes bdEmber { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(-40px, -55vh); } }
.bd-siren { height: 55%; top: auto; transform: translateY(-50%); opacity: 0; animation: bdSiren 1.2s ease-in-out infinite; }
.bd-siren.red { background: radial-gradient(ellipse at 0% 50%, rgba(255,40,40,.55), rgba(255,40,40,0) 70%); }
.bd-siren.blue { background: radial-gradient(ellipse at 0% 50%, rgba(60,120,255,.55), rgba(60,120,255,0) 70%); animation-delay: .6s; }
@keyframes bdSiren { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.bd-flame { height: 100%; background: linear-gradient(0deg, rgba(255,120,30,.25), rgba(255,120,30,0) 60%); animation: bdFlick 0.9s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes bdFlick { from { opacity: .55; } to { opacity: 1; } }
.bd-glow { width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,140,.45), rgba(255,214,140,0) 70%); animation: bdGlow 3s ease-in-out infinite alternate; mix-blend-mode: screen; }
.bd-glow.big { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
@keyframes bdGlow { from { opacity: .7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #frame-wrap .bd-fx i { animation: none !important; } .bd-ember { opacity: 0 !important; } }
#frame-wrap .leave { position: absolute; top: 14px; right: 16px; z-index: 2; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--brass); background: rgba(0,0,0,.5); color: var(--cream); font-weight: 600; letter-spacing: .06em; cursor: pointer; }


/* ---- the loading screen over every game (loader.js; the user's approved mock-up, 2026-10-29): A the plaque (maze),
   B the chips (Blackjack), C the draw (the wager).  The box sits exactly over the game's iframe; cq units are its own
   size, so everything scales with the game's frame. */
.pc-loader { --oxblood: #5c1a17; --oxblood-lit: #7d2621; --brass-dark: #7a5320;
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; display: grid; place-items: center; overflow: hidden;
  container-type: size; font-family: "Fredoka", system-ui, sans-serif; transition: opacity .55s ease, transform .55s ease; }
.pc-loader.out { opacity: 0; transform: scale(1.03); pointer-events: none; }
.pc-loader .pct { font: 600 clamp(11px, 3.2cqh, 22px) "Fredoka", system-ui, sans-serif; color: var(--brass-lit); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.pc-loader .line { font: 600 clamp(14px, 5.2cqh, 38px) var(--serif); color: var(--cream); margin: 0; text-align: center; text-wrap: balance; }
.pc-loader .sooz { width: clamp(50px, 20cqh, 160px); animation: pcLdBob 1.6s ease-in-out infinite; transform-origin: 50% 90%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
@keyframes pcLdBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6%) rotate(3deg); } }
#frame-wrap .leave { z-index: 3; }
/* CLAUDE WAS HERE (2026-11-06, the casino on phones): a phone held upright gets the game small and centred (the
   backdrop sizes the frame), so "Turn your phone sideways" sits in the middle of the empty band ABOVE it -- never
   over the game.  56.22vw is the frame's height at the casino's 1366 x 768 when the width is what limits it. */
#turn-phone { display: none; }
@media (orientation: portrait) {
  .touch-play #turn-phone { display: flex; align-items: center; gap: 10px; position: absolute; z-index: 3; left: 50%;
    top: calc((100vh - 56.22vw) / 4); top: calc((100dvh - 56.22vw) / 4); transform: translate(-50%, -50%);
    padding: 10px 18px 10px 14px; border-radius: 999px; border: 2px solid var(--brass); background: rgba(20, 10, 6, .82);
    color: var(--cream); font-weight: 600; letter-spacing: .04em; white-space: nowrap; pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
  .touch-play #turn-phone svg { color: var(--brass-lit, #e6c27a); animation: pcTurn 2.4s ease-in-out infinite; }
}
@keyframes pcTurn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .touch-play #turn-phone svg { animation: none; } }
/* LEAVE GAME on a phone held sideways: a 44 px ✕ (the words are still the button's text, so screen readers read
   them; font-size 0 only hides them), in the strip beside the game when there is one (site.js: .leave-bar), else the
   top-left corner.
   Upright there is room above the game, so it keeps its full pill there. */
@media (orientation: landscape) {
  .touch-play #frame-wrap .leave { top: 8px; width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 0; line-height: 0;
    display: grid; place-items: center; background: rgba(0, 0, 0, .65); }
  .touch-play #frame-wrap .leave::before { content: "\2715"; font-size: 20px; line-height: 1; color: var(--cream); }
  .touch-play #frame-wrap.leave-bar .leave { right: 6px; left: auto; }
  .touch-play #frame-wrap:not(.leave-bar) .leave { right: auto; left: 8px; }
}
/* (2026-11-06) a game up on a phone: the page under it cannot scroll (backdrop.js sizes the layer to the screen) */
html.touch-play, html.touch-play body { overflow: hidden; height: 100%; overscroll-behavior: none; }
/* the game's frame takes every finger: no page scroll or pinch-zoom from a held thumb */
.touch-play #frame-wrap { touch-action: none; overscroll-behavior: none; }
/* (CasinoPhoneMaze, 2026-11-06) the phone maze fills the screen any way up and has LEAVE on its own pause card, so
   the page's LEAVE GAME would only cover its coin pill and pause button */
.touch-full #frame-wrap .leave { display: none; }
/* A -- the brass-and-leather plaque */
.pc-loader.A { background: radial-gradient(ellipse at 50% 35%, #2a1712, #120a07 75%); }
.pc-loader.A .plaque { position: relative; width: 62%; padding: 5.5cqh 6% 6cqh; border-radius: 22px; display: flex; flex-direction: column; align-items: center; gap: 3.2cqh;
  background: radial-gradient(ellipse at 50% 0%, var(--oxblood-lit), var(--oxblood) 70%);
  box-shadow: 0 0 0 3px var(--brass-dark), 0 0 0 6px var(--brass), 0 0 0 8px #3b2016, 0 30px 60px rgba(0,0,0,.6); }
.pc-loader.A .plaque::before { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 2px dashed rgba(255,217,138,.45); pointer-events: none; }
.pc-loader.A .sooz { margin-top: -15cqh; }
.pc-loader.A .rail { position: relative; width: 100%; height: clamp(10px, 3cqh, 20px); border-radius: 999px; background: #2a0c0a; box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 2px var(--brass-dark); }
.pc-loader.A .fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(180deg, var(--brass-lit), var(--brass) 55%, var(--brass-dark)); }
.pc-loader.A .coin { position: absolute; top: 50%; width: clamp(24px, 8cqh, 54px); aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.pc-loader.A .coin img { width: 100%; display: block; }

/* B -- chips stack up on the felt */
.pc-loader.B { background: radial-gradient(ellipse at 50% 45%, var(--felt-lit), var(--felt) 55%, var(--felt-deep)); }
.pc-loader.B .wrapB { display: flex; flex-direction: column; align-items: center; gap: 3cqh; }
.pc-loader.B .stacks { display: flex; align-items: flex-end; gap: 2.2cqw; height: 30cqh; }
.pc-loader.B .stack { position: relative; width: 9cqh; height: 100%; }
.pc-loader.B .chip { position: absolute; left: 0; width: 100%; height: 3.2cqh; border-radius: 50%; transform: translateY(-140%); opacity: 0;
  transition: transform .28s cubic-bezier(.3,1.6,.5,1), opacity .12s; }
.pc-loader.B .chip.in { opacity: 1; transform: none; }
.pc-loader.B .chip::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c); box-shadow: 0 1.2cqh 0 var(--d), 0 1.2cqh 0 1px rgba(0,0,0,.35); }
.pc-loader.B .chip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(var(--cream) 0 9deg, transparent 9deg 45deg); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 64% 92%, transparent 94%); mask: radial-gradient(closest-side, transparent 62%, #000 64% 92%, transparent 94%); opacity: .9; }
.pc-loader.B .sooz { width: clamp(44px, 15cqh, 120px); }

/* C -- the wager's draw in miniature: Sooz's five difficulty cards are dealt, a light chases over the face-down ones,
   and each fifth of the load SLAMS one face up (punch, shockwave, sparks, a sheen) to show its stars */
.pc-loader.C { background: radial-gradient(ellipse at 50% 42%, var(--felt-lit), var(--felt) 55%, var(--felt-deep)); overflow: hidden; }
.pc-loader.C .wrapC { display: flex; flex-direction: column; align-items: center; gap: 4.5cqh; position: relative; }
.pc-loader.C .cards { display: flex; gap: 2.4cqw; perspective: 900px; position: relative; }
.pc-loader.C .slot { position: relative; width: 14cqh; aspect-ratio: 5 / 7; }
.pc-loader.C .slot::before { content: ""; position: absolute; inset: 0; border-radius: 1.4cqh; border: 2px dashed rgba(251,243,224,.12); }
.pc-loader.C .deal { position: absolute; inset: 0; opacity: 0; transform: translate(var(--fx), -60cqh) rotate(var(--fr)); }
.pc-loader.C .deal.in { opacity: 1; transform: none; transition: transform .45s cubic-bezier(.2,.9,.3,1.15), opacity .1s; }
.pc-loader.C .card { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.5,1.7,.45,1); }
.pc-loader.C .card.up { transform: rotateY(180deg); }
.pc-loader.C .card.slam { animation: pcLdSlam .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes pcLdSlam { 0% { scale: 1; } 35% { scale: 1.16; translate: 0 -8%; } 70% { scale: .97; translate: 0 0; } 100% { scale: 1; } }
.pc-loader.C .face { position: absolute; inset: 0; border-radius: 1.4cqh; backface-visibility: hidden; overflow: hidden; box-shadow: 0 1cqh 2cqh rgba(0,0,0,.45); }
.pc-loader.C .back { background: repeating-linear-gradient(45deg, var(--oxblood) 0 6px, var(--oxblood-lit) 6px 12px); box-shadow: inset 0 0 0 .6cqh var(--cream), inset 0 0 0 .9cqh var(--brass), 0 1cqh 2cqh rgba(0,0,0,.45); }
.pc-loader.C .back::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: var(--coin) center / contain no-repeat; opacity: .9; }
.pc-loader.C .front { background: linear-gradient(160deg, #fffaf0, var(--cream) 60%, #efe1bf); transform: rotateY(180deg); box-shadow: inset 0 0 0 .5cqh var(--brass), 0 1cqh 2cqh rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqh; }
.pc-loader.C .stars { display: flex; flex-wrap: wrap; justify-content: center; gap: .3cqh; width: 80%; }
.pc-loader.C .stars i { width: 3.6cqh; height: 3.6cqh; background: var(--red); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  scale: 0; transition: scale .3s cubic-bezier(.3,1.9,.5,1); }
.pc-loader.C .card.up .stars i { scale: 1; }
.pc-loader.C .card.up .stars i:nth-child(2) { transition-delay: .07s; } .pc-loader.C .card.up .stars i:nth-child(3) { transition-delay: .14s; }
.pc-loader.C .card.up .stars i:nth-child(4) { transition-delay: .21s; } .pc-loader.C .card.up .stars i:nth-child(5) { transition-delay: .28s; }
.pc-loader.C .front .sheen { position: absolute; inset: -20% auto -20% -60%; width: 40%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); opacity: 0; }
.pc-loader.C .card.slam .sheen { animation: pcLdSheen .7s .12s ease-out; }
@keyframes pcLdSheen { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.pc-loader.C .ring { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%; border: .5cqh solid var(--brass-lit); translate: -50% -50%; scale: .3; opacity: 0; pointer-events: none; }
.pc-loader.C .ring.go { animation: pcLdRing .55s ease-out; }
@keyframes pcLdRing { 0% { scale: .4; opacity: .9; } 100% { scale: 2.1; opacity: 0; } }
.pc-loader.C .spark { position: absolute; left: 50%; top: 50%; width: 1.7cqh; height: 1.7cqh; border-radius: 50%; background: var(--brass-lit); box-shadow: 0 0 1.4cqh var(--brass-lit); pointer-events: none;
  animation: pcLdSpark .6s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes pcLdSpark { 0% { translate: -50% -50%; opacity: 1; scale: 1; } 100% { translate: calc(-50% + var(--dx)) calc(-50% + var(--dy)); opacity: 0; scale: .3; } }
/* the chase light: one soft spotlight hopping over the cards still face down */
.pc-loader.C .light { position: absolute; top: 50%; width: 24cqh; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,226,160,.75), rgba(255,226,160,0) 62%); transition: left .16s ease-out, opacity .25s; z-index: 2; }
.pc-loader.C .done .deal { animation: pcLdWave .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * .07s); }
@keyframes pcLdWave { 50% { translate: 0 -10%; } }
.pc-loader.C .rail { position: relative; width: 52cqw; height: clamp(8px, 2.2cqh, 16px); border-radius: 999px; background: rgba(0,0,0,.4); box-shadow: inset 0 2px 3px rgba(0,0,0,.5), 0 0 0 2px var(--brass-dark); overflow: hidden; }
.pc-loader.C .rail i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(180deg, var(--brass-lit), var(--brass) 55%, var(--brass-dark)); }
.pc-loader.C .rail i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 40%, rgba(255,255,255,.55) 50%, transparent 60% 100%); background-size: 220% 100%; animation: pcLdGlide 1.4s linear infinite; }
@keyframes pcLdGlide { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.pc-loader .row { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  .pc-loader .sooz, .pc-loader.C .rail i::after, .pc-loader.C .card.slam, .pc-loader.C .card.slam .sheen, .pc-loader.C .ring.go,
  .pc-loader.C .spark, .pc-loader.C .done .deal { animation: none !important; }
  .pc-loader.B .chip, .pc-loader.C .card, .pc-loader.C .deal.in, .pc-loader { transition: none; }
}

/* ---- the casino unlocks: Sooz's door clip, once per account */
#unlock { position: fixed; inset: 0; z-index: 60; background: rgba(10, 6, 14, .92); display: flex; align-items: center; justify-content: center; padding: 24px; }
/* (2026-10-31, the user: "The casino clip is off center") -- compose.py composes the doorway at x 270..1130
   of a 1200-wide frame, i.e. centred on 700 instead of 600, so the marquee sat 100 px right with a bare strip
   of wall down the left.  The shipped clip and its two stills are cropped to 1000 x 900 at x = 200, which puts
   the doorway dead centre; the stage follows that 10:9.  Re-render dice.mjs one day and the crop goes away. */
#unlock .stage { position: relative; width: min(100%, 1000px, calc((100vh - 48px) * 10 / 9)); aspect-ratio: 10 / 9; border-radius: 22px; overflow: hidden; border: 3px solid var(--brass); background: #000; }
#unlock video, #unlock .endshot { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
#unlock .skip { position: absolute; top: 14px; right: 14px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--brass); background: rgba(0,0,0,.55); color: var(--cream); font-weight: 600; letter-spacing: .06em; cursor: pointer; }
#unlock .done { position: absolute; left: 0; right: 0; top: 0; padding: 26px 22px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; background: linear-gradient(0deg, transparent, rgba(10,6,14,.85) 40%); opacity: 0; transition: opacity .5s; pointer-events: none; }
#unlock.ended .done { opacity: 1; pointer-events: auto; }
#unlock .done h2 { font-size: clamp(28px, 4vw, 44px); color: var(--brass-lit); text-align: center; }

@media (max-width: 720px) {
  .brand span { font-size: 24px; }
  nav.tabs a { padding: 0 14px; font-size: 14px; }
  .chapters { grid-template-columns: 1fr; }
  .pass .stub { border-right: 0; border-bottom: 3px dashed var(--cream); }
  .purse .wrap { gap: 8px; }
  .bal { padding: 6px 14px 6px 6px; gap: 8px; }
  .bal svg { width: 28px; height: 28px; }
  .bal img.coin { width: 28px; height: 28px; }
  .bal b { font-size: 20px; }
  .bal span { font-size: 11px; }
  .namepass .stub { flex: 1 1 100%; flex-direction: row; justify-content: space-between; padding: 12px 20px; border-right: 0; border-bottom: 3px dashed var(--cream); }
  .namepass .stub img { width: 40px; }
  .namepass form { padding: 18px 20px 12px; }
  .namepass input { font-size: 26px; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* CLAUDE WAS HERE (2026-10-30, launch prep): the desktop-only notice a touch-only device gets instead of a game
   (site.js deskOnlyNotice) */
#desk-only { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 18, 11, .82); }
#desk-only .panel { max-width: 440px; padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
#desk-only h2 { margin: 0; font-family: var(--serif); font-size: 28px; color: var(--cream); text-wrap: balance; }
#desk-only p { margin: 0; color: var(--body); }
#desk-only .btn-brass { align-self: center; }

/* CLAUDE WAS HERE (2026-11-02) THE PROFILE PAGE (web/profile.html): four cards on the felt.  The header's name is a
   link now, so it gets the same hover as the tabs. */
.acct a.who { text-decoration: none; border-radius: 999px; padding: 6px 12px; }
.acct a.who:hover, .acct a.who:focus-visible { background: rgba(0,0,0,.25); color: var(--cream); }
.acct a.who[aria-current="page"] { background: var(--brass); color: var(--ink); }
.prof { margin: 0 0 22px; padding: 24px 26px; }
.prof h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 26px; color: var(--wood-dark); }
.prof .note { margin: 0 0 14px; font-size: 15px; color: var(--brown); }
.prof form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 6px; }
.prof label { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--brown); }
.prof input { flex: 1 1 260px; min-width: 0; min-height: 52px; padding: 0 16px; border-radius: 12px;
  border: 2px solid var(--brown); background: var(--paper-lit); color: var(--ink); font: inherit; font-size: 18px; }
.prof .btn-brass, .prof .btn-ghost, .prof .btn-red { min-height: 52px; font-size: 16px; cursor: pointer; }
.prof .btn-ghost { color: var(--brown); border-color: var(--brown); }
.prof .btn-red { border: 0; border-radius: 999px; padding: 0 28px; background: var(--red); color: var(--cream);
  font-weight: 700; letter-spacing: .08em; }
.prof.danger { border: 2px solid var(--red); }
.prof.danger h2 { color: var(--red); }
.numgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.num { background: var(--felt); border-radius: 12px; padding: 12px 14px; }
.num span { display: block; font-size: 11px; letter-spacing: .1em; color: var(--dim); }
.num b { display: block; font-family: var(--serif); font-size: 26px; color: var(--brass-lit); }