:root{--rm-lamp:255,214,140;--rm-lamp2:255,200,120;--rm-tlamp:255,210,140;--rm-flamp:255,234,186;--rm-wall1:#241c14;--rm-wall2:#171310;--rm-rail1:#6e452a;--rm-rail2:#4b2d1a;--rm-rail3:#2e1b0f;--rm-rail4:#1d100a;--rm-rail5:#120a06;--rm-hrail1:#5c3b25;--rm-hrail2:#3a2416;--rm-hrail3:#1c1009;--rm-up1:#2a1c13;--rm-up2:#1c130d;--rm-up3:#120c08;--rm-up4:#0b0705;--rm-upA:176,130,92;--rm-upB:118,84,58}
:root[data-felt="oxblood"]{--felt1:#6b1f2a;--felt2:#4a141d;--felt3:#300c13;--felt-mut:#e3c6c6}
:root[data-felt="midnight"]{--felt1:#1d3a63;--felt2:#132745;--felt3:#0b1729;--felt-mut:#c2d2e8}
:root[data-felt="sand"]{--felt1:#7a6438;--felt2:#564727;--felt3:#382e1a;--felt-mut:#e8dcc0}
:root[data-felt="slate"]{--felt1:#39424a;--felt2:#262d33;--felt3:#171c20;--felt-mut:#d2d9de}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#13100e; --ink:#f0e9d8; --muted:#a89f8c; --panel:#1c1815; --panel2:#161311; --line:#332d27;
    --glass:rgba(29,25,21,.62); --glassline:rgba(255,255,255,.12); --glasshi:rgba(255,255,255,.14);
    --win:#6fd3a0; --lose:#ff9a8c; --info:#8db6ee;
  }
}
:root[data-theme="dark"]{
  --bg:#13100e; --ink:#f0e9d8; --muted:#a89f8c; --panel:#1c1815; --panel2:#161311; --line:#332d27;
    --glass:rgba(29,25,21,.62); --glassline:rgba(255,255,255,.12); --glasshi:rgba(255,255,255,.14);
  --win:#6fd3a0; --lose:#ff9a8c; --info:#8db6ee;
}
:root[data-text="large"]{--fs:17.5px;--cw:clamp(46px,14vw,66px)}
:root[data-text="xl"]{--fs:19px;--cw:clamp(50px,15vw,72px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
*,*::before,*::after{box-sizing:inherit}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 70% at 15% 100%,rgba(23,86,63,.12) 0%,transparent 60%),radial-gradient(90% 60% at 88% 0%,rgba(201,162,75,.09) 0%,transparent 55%),radial-gradient(160% 100% at 50% -10%,var(--rm-wall1) 0%,var(--rm-wall2) 42%,var(--bg) 82%)}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--f-body);font-size:var(--fs);line-height:1.45;-webkit-text-size-adjust:100%;overflow-wrap:break-word}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #5b9bff;outline-offset:2px}
h1,h2,h3{font-weight:400}
h2{font-size:20px;line-height:1.15}
h3{font-size:16.5px;line-height:1.2}
.mut{color:var(--muted);font-size:.86em}
.pos{color:var(--win)}.neg{color:var(--lose)}.zero{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---------- top bar ---------- */
.bar .ttl{flex:1;min-width:0}
.bar .ttl b{display:block;font-family:var(--f-disp);font-weight:700;font-size:19px;line-height:1.1}
.bar .ttl span{font-size:12.5px;color:var(--muted)}
.icon{min-width:44px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;font-size:18px;padding:0 10px;font-weight:700}
.icon.lbl{font-size:14px;font-family:var(--f-body)}

/* ---------- home ---------- */

.suits{display:flex;gap:10px;justify-content:center;margin-top:12px;font-size:18px;color:var(--brass);opacity:.9}
.chips.lead{grid-template-columns:1fr;margin-top:-30px;padding:0 10px}
.chipbtn::before{content:'';position:absolute;inset:6%;border-radius:50%;border:3px dashed rgba(255,255,255,.9);opacity:.85}
.chipbtn::after{content:'';position:absolute;inset:16%;border-radius:50%;border:1px solid rgba(255,255,255,.35)}
.chipbtn span{position:relative;z-index:1;font-weight:700;font-size:clamp(10px,3.1vw,12.5px);line-height:1.05;text-align:center;padding:0 4px}
.chipbtn i{display:block;font-style:normal;font-size:clamp(15px,5vw,20px);margin-bottom:2px}
.chipbtn.play::after{display:none}

/* ---------- panels ---------- */
.panel{border:1px solid var(--line);box-shadow:0 3px 10px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05)}
.panel.flat{background:var(--panel2)}
.ph{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:2px}
.coach{border-left:4px solid var(--brass);padding-left:11px;margin-top:10px}
.coach.warn{border-color:var(--lose)}
.coach.good{border-color:var(--win)}
ul.tight,ol.tight{margin:6px 0 0;padding-left:20px}
ul.tight li,ol.tight li{margin-bottom:5px}
.kv:last-child{border-bottom:0}
.kv b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- controls ---------- */
.btn small{font-weight:500;font-size:.78em;color:var(--muted)}
.btn.row{flex-direction:row;gap:8px;min-height:46px}
.btn.pick::after{content:'Lou\2019s pick';position:absolute;top:-9px;background:var(--brass);color:var(--brass-ink);font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:99px;letter-spacing:.01em}
.actions{display:grid;gap:8px}
.actions.c2{grid-template-columns:1fr 1fr}.actions.c3{grid-template-columns:1fr 1fr 1fr}
.dock{background:linear-gradient(180deg,rgba(19,16,14,.06) 0%,rgba(19,16,14,.28) 40%,rgba(19,16,14,.52) 75%,rgba(19,16,14,.7) 100%);-webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5)}
@media (prefers-reduced-transparency: reduce){.dock{background:linear-gradient(180deg,rgba(19,16,14,0) 0%,var(--bg) 65%);-webkit-backdrop-filter:none;backdrop-filter:none}}
.seg button{flex:1 1 auto;border:0;background:transparent;padding:4px 8px}
.switch{display:flex;align-items:center;gap:9px;background:transparent;border:0;color:var(--muted);font-size:.85em;font-weight:600;min-height:40px;padding:0}
.switch i{border-radius:99px;position:relative;flex:none;transition:background .15s}
.switch i::after{transition:transform .15s}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{font-weight:700;font-size:18px;padding:0}
.stepper b{text-align:center;font-variant-numeric:tabular-nums}
input[type=text],textarea,select{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;min-height:44px}
textarea{min-height:88px;resize:vertical}
input[type=range]{width:100%;accent-color:var(--brass);min-height:40px}
.row:last-child{border-bottom:0}
.row .lb{flex:1;min-width:0}
.row .lb b{display:block;font-weight:600;font-size:.95em}
.row .lb span{display:block;font-size:.78em;color:var(--muted);line-height:1.35}
.row .ct{flex:none;max-width:56%}
.row.stack{display:block}
.row.stack .ct{max-width:none;margin-top:7px}

/* ---------- table ---------- */
.seat{display:flex;flex-direction:column;align-items:center;gap:6px}
.seat-label{font-size:13px;color:var(--felt-mut);display:flex;gap:8px;align-items:baseline;justify-content:center;flex-wrap:wrap;text-align:center;min-height:19px}
.seat-label b{color:var(--felt-ink)}
.seat-label em{font-style:normal;color:var(--brass)}
.cards,.board{display:flex;gap:6px;justify-content:center}
.board{margin:9px 0 3px}
.sep{width:9px;flex:none}
.card.red{color:var(--suit-red)}
.card.back{background:repeating-linear-gradient(45deg,#7c2237 0 6px,#611a2b 6px 12px);border:3px solid var(--ivory)}
:root[data-back="navy"] .card.back{background:repeating-linear-gradient(45deg,#24406e 0 6px,#1a3055 6px 12px)}
:root[data-back="brass"] .card.back{background:repeating-linear-gradient(45deg,#8a6d2c 0 6px,#6b5320 6px 12px)}
:root[data-back="ink"] .card.back{background:repeating-linear-gradient(45deg,#2a2f33 0 6px,#1b1f22 6px 12px)}
.card.sm{--cw:30px;width:30px}
.card.dim{opacity:.45}
.card.used{outline:2px solid var(--brass);outline-offset:1px}
@keyframes deal{from{transform:translateY(-14px) rotateY(75deg);opacity:0}to{transform:none;opacity:1}}
.felt-print{font-size:12px;color:var(--brass);text-align:center;line-height:1.35;margin:4px 0 2px;min-height:32px;display:flex;align-items:center;justify-content:center}
.banner b{font-family:var(--f-disp);font-weight:700;}
.banner span{font-weight:700;color:var(--felt-mut)}
.spots{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px;margin-top:9px;justify-items:center}
.spot{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;color:var(--felt-mut)}
.ring{width:clamp(52px,16vw,68px);aspect-ratio:1;border-radius:50%;border:2px solid var(--brass);display:grid;place-items:center;background:rgba(0,0,0,.14);box-shadow:inset 0 2px 5px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.05)}
.chip{width:78%;aspect-ratio:1;border-radius:50%;background:var(--c,#2f5f9e);display:grid;place-items:center;color:#fff;font-weight:700;font-size:clamp(11px,3.3vw,14px);border:3px dashed rgba(255,255,255,.85);box-shadow:inset 0 0 0 3px var(--c,#2f5f9e),0 3px 0 rgba(0,0,0,.35)}
.chip.ante{--c:#2f5f9e}.chip.blind{--c:#7d3c98}.chip.play{--c:#1f2430}.chip.trips{--c:#a8452f}
.chip.none{background:transparent;border:0;box-shadow:none;color:rgba(255,255,255,.35);font-weight:500}
.badge{font-size:11.5px;font-weight:700;min-height:15px}
.badge.w{color:#8fe0b0}.badge.l{color:#ffab9e}.badge.p{color:#dcdccd}

/* seat strip */
.strip{display:flex;gap:7px;overflow-x:auto;padding:10px 2px 2px;scrollbar-width:thin}
.sc{flex:none;width:118px;border-radius:12px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.12);padding:8px;color:var(--felt-ink)}
.sc.act{border-color:var(--brass);box-shadow:0 0 0 2px rgba(201,162,75,.35)}
.sc.out{opacity:.5}
.sc .mini{display:flex;gap:3px;margin:6px 0 5px}
.sc .st{font-size:11.5px;color:var(--felt-mut);min-height:16px}
.sc .bk{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--felt-mut)}
.sc .rs{font-size:11.5px;font-weight:700;min-height:16px}

/* cover */
.cover{position:fixed;inset:0;background:radial-gradient(120% 90% at 50% 20%,var(--felt1),var(--felt3));color:var(--felt-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px;text-align:center;z-index:40}
.cover h2{font-size:30px}
.cover p{color:var(--felt-mut);max-width:28ch}
.cover .btn{max-width:280px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));background:var(--felt2);color:var(--felt-ink);border:1px solid var(--brass);border-radius:12px;padding:10px 14px;max-width:min(520px,92vw);z-index:45;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:13.5px;pointer-events:none}
.toast b{color:var(--brass)}

/* results */
.res{width:100%;border-collapse:collapse;margin-top:4px}
.res td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:.94em}
.res td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:10px}
.res small{display:block;color:var(--muted);font-size:.82em}
.review{list-style:none;padding:0;margin:6px 0 0}
.review li{padding:6px 0 6px 11px;border-left:4px solid var(--line);margin-bottom:6px;font-size:.92em}
.review li.ok{border-color:var(--win)}
.review li.off{border-color:var(--lose)}
.acc{display:flex;gap:2px;margin-top:8px}
.acc i{height:7px;flex:1;border-radius:2px;background:var(--line)}
.acc i.ok{background:var(--win)}.acc i.off{background:var(--lose)}

/* chart grid */
.grid13{display:grid;grid-template-columns:repeat(14,1fr);gap:2px;margin-top:10px}
.grid13 .h{display:grid;place-items:center;color:var(--muted);font-weight:700;font-size:10.5px;aspect-ratio:1}
.grid13 button{aspect-ratio:1;border:0;border-radius:3px;display:grid;place-items:center;font-weight:700;font-size:9.5px;padding:0;background:var(--line);color:var(--muted)}
.grid13 button.r{background:var(--brass);color:var(--brass-ink)}
.grid13 button.cur{outline:2px solid var(--ink);outline-offset:1px;z-index:2}
.grid13 button.sel{box-shadow:inset 0 0 0 2px var(--felt2)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.82em;color:var(--muted);margin-top:9px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px;background:var(--line)}
.legend i.r{background:var(--brass)}

/* stats */
.stat b{display:block;line-height:1.15;font-variant-numeric:tabular-nums}
.stat span{font-size:11.5px;}
.bars{margin-top:8px}
.bar-row{display:grid;grid-template-columns:96px 1fr 46px;gap:8px;align-items:center;font-size:.84em;margin-bottom:5px}
.bar-row .vv{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
svg.lc{width:100%;height:150px;display:block;margin-top:8px;overflow:visible}
.lkey{display:flex;gap:12px;flex-wrap:wrap;font-size:.8em;color:var(--muted);margin-top:6px}
.lkey i{display:inline-block;width:14px;height:3px;vertical-align:3px;margin-right:5px;border-radius:2px}
table.cmp{width:100%;border-collapse:collapse;font-size:.86em;margin-top:8px}
table.cmp th,table.cmp td{text-align:left;padding:7px 6px 7px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp th{font-size:.9em;color:var(--muted);font-weight:600}
table.cmp td:first-child{font-weight:700;width:26%}
.scroll{overflow-x:auto}
.pay{width:100%;border-collapse:collapse;margin-top:4px}
.pay td{padding:5px 0;border-bottom:1px solid var(--line);font-size:.94em}
.pay td:last-child{text-align:right;font-weight:700}
.tut-steps{display:flex;gap:4px;margin-top:8px}
.tut-steps i{height:5px;flex:1;border-radius:3px;background:var(--line)}
.tut-steps i.on{background:var(--brass)}
.lesson{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);text-align:left;width:100%;background:transparent;border-left:0;border-right:0;border-top:0}
.lesson .n{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);font-weight:700;font-size:14px}
.lesson.done .n{background:var(--win);border-color:var(--win);color:#fff}
.lesson .tx{flex:1;min-width:0}
.lesson .tx b{display:block;font-size:.97em}
.lesson .tx span{display:block;font-size:.8em;color:var(--muted)}
.xbtn{border:0;background:transparent;color:var(--muted);font-weight:700;padding:2px 6px;min-height:34px}

.ring .cin{width:80%;display:block;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4)) drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.ring svg{width:100%;height:auto;display:block}
.ringchip{filter:drop-shadow(0 2px 2px rgba(0,0,0,.4)) drop-shadow(0 5px 7px rgba(0,0,0,.3))}
/* --- real chips, tab bar, hand review, table guide --- */
.chipbtn::before,.chipbtn::after{display:none}
.chipbtn svg{display:block}
.chipbtn .cap{position:absolute;left:0;right:0;bottom:-2px;font-size:clamp(9.5px,2.9vw,11.5px);font-weight:700;color:var(--ink);text-align:center}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;padding:0 2px;position:relative;z-index:2;padding-bottom:16px}
.chipbtn.play::before{display:block;content:'';position:absolute;inset:6px;border-radius:11px;border:1px solid rgba(42,30,5,.3)}
.chipbtn.play b{position:relative;z-index:1;font-family:var(--f-disp);font-weight:700;font-size:23px;letter-spacing:.01em}
.chipbtn.play em{position:relative;z-index:1;font-style:normal;font-size:12.5px;font-weight:600;opacity:.85;text-align:right;max-width:54%}
.tabbar button{border:0;background:transparent;color:var(--muted);font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 2px}
.tabbar button i{font-style:normal;font-size:17px;line-height:1}
.tabbar button[aria-current="page"]{color:var(--brass)}

.mod .tx{flex:1;min-width:0}
.mod .tx b{display:block;font-size:15px}
.mod .tx span{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}
.mod .go{color:var(--muted);font-size:18px}
.grade{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12.5px}
.grade i{width:17px;height:17px;border-radius:4px;display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff;flex:none}
.g-bril i{background:#26c6da}.g-best i{background:#3aa655}.g-good i{background:#8bb43f}
.g-inac i{background:#e0a92e}.g-mist i{background:#e07a2e}.g-blun i{background:#c0392b}
.g-bril{color:#26c6da}.g-best{color:#3aa655}.g-good{color:#8bb43f}
.g-inac{color:#e0a92e}.g-mist{color:#e07a2e}.g-blun{color:#c0392b}
.accbig{display:flex;align-items:baseline;gap:8px}
.accbig b{font-family:var(--f-disp);font-weight:700;font-size:38px;line-height:1}
.felt-svg{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 0 0 4px #2b1d15,0 8px 20px rgba(0,0,0,.25)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.steplist{counter-reset:s;list-style:none;padding:0;margin:8px 0 0}
.steplist li{position:relative;padding:0 0 12px 34px;counter-increment:s}
.steplist li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--brass);color:var(--brass-ink);font-weight:700;font-size:12.5px;display:grid;place-items:center}
.steplist li::after{content:'';position:absolute;left:11.5px;top:26px;bottom:0;width:1px;background:var(--line)}
.steplist li:last-child::after{display:none}
.steplist b{display:block}
.steplist span{color:var(--muted);font-size:.88em}
.setlabel{font-size:11.5px;font-weight:700;color:var(--brass);letter-spacing:.06em;text-transform:uppercase;margin:14px 0 2px}
/* --- added: drill, lab, map, achievements --- */
.chips.three{grid-template-columns:repeat(3,1fr)}

.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.hud div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:7px 9px;text-align:center}
.hud b{display:block;font-family:var(--f-disp);font-weight:700;font-size:21px;line-height:1.1;font-variant-numeric:tabular-nums}
.hud span{font-size:11px;color:var(--muted)}
.hud.hot b{color:var(--brass)}
.timer{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:10px}
.timer i{display:block;height:100%;background:var(--brass);border-radius:3px;transition:width .25s linear}
.qcard{background:radial-gradient(120% 90% at 50% 10%,var(--felt1),var(--felt2) 60%,var(--felt3));border-radius:16px;padding:14px 10px;color:var(--felt-ink);text-align:center;box-shadow:0 0 0 4px #2b1d15,0 10px 24px rgba(0,0,0,.25)}
.qcard .lbl{font-size:12px;color:var(--brass);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.qcard .sub{font-size:13px;color:var(--felt-mut);margin-top:9px}
.fb{border-radius:12px;padding:11px 13px;margin-top:12px;border:1px solid var(--line);background:var(--panel)}
.fb.ok{border-left:4px solid var(--win)}
.fb.no{border-left:4px solid var(--lose)}
.fb b{font-size:15px}
.fb.ok b{color:var(--win)}.fb.no b{color:var(--lose)}
.picker{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}
.picker button.red{color:var(--suit-red)}
.picker button.used{opacity:.25}
.picker button i{font-style:normal;font-size:10px}
.slots .sl{position:relative}
.slots .sl.sel::after{content:'';position:absolute;inset:-3px;border:2px solid var(--brass);border-radius:9px}
.slots .gap{width:10px}
.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.cmp2 .cc{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px}
.cmp2 .cc b{display:block;font-size:14px}
.cmp2 .cc .big{font-family:var(--f-disp);font-weight:700;font-size:23px;line-height:1.1;margin-top:4px}
.maptbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.maptbl th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:600;padding:6px 6px 6px 0;border-bottom:1px solid var(--line)}
.maptbl td{padding:8px 6px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.maptbl td:first-child{font-weight:700}
.maptbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.skill{display:inline-flex;gap:2px;vertical-align:-1px}
.skill i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.skill i.on{background:var(--brass)}
.ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:10px}
.ach div{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:9px 7px;text-align:center;opacity:.42}
.ach div.got{opacity:1;border-color:var(--brass)}
.ach div i{display:block;font-style:normal;font-size:20px;line-height:1.1}
.ach div b{display:block;font-size:11.5px;margin-top:3px}
.ach div span{display:block;font-size:10px;color:var(--muted);line-height:1.25}
.xpbar i{display:block;height:100%;}
.lvl{display:flex;align-items:center;gap:8px;font-size:13px}
.lvl b{font-family:var(--f-disp);font-weight:700;font-size:19px}

.hl{display:grid;gap:6px;margin:8px 0}
.hl div{border-radius:10px;padding:8px 11px;font-size:13.5px;line-height:1.35;background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--brass)}
.hl div.bad{border-left-color:var(--lose)}
.hl b{display:block;font-size:12.5px;letter-spacing:.02em}
.eq{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--line);margin-top:8px}
.eq i{display:block;height:100%}
.eq i.w{background:var(--win)}.eq i.t{background:var(--brass)}.eq i.l{background:var(--lose)}
.eqk{display:flex;justify-content:space-between;gap:6px;font-size:12px;color:var(--muted);margin-top:4px}

/* --- v3 design layer: casino character, kept clean --- */
h1{font-size:26px;line-height:1.06;font-weight:800;letter-spacing:-.005em}
h2,h3{font-weight:700}
.card,.picker button{font-weight:800}
.stat b,.hud b,.cmp2 .cc .big,.lvl b{font-family:var(--f-num);font-weight:600;font-variant-numeric:tabular-nums}

.tabbar{background:linear-gradient(135deg,var(--glasshi),rgba(255,255,255,0) 60%),var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
.hastabs .dock{bottom:0}
@media (prefers-reduced-transparency: reduce){.tabbar{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}
.dlr{display:block;flex:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}
.dnote .bub{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:16px 16px 16px 5px;padding:10px 13px;font-size:14px;line-height:1.4}
.dnote .bub b{font-family:var(--f-disp);font-weight:700}
.flame{transform-origin:50% 90%;animation:flick 1.5s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.07,1.12) rotate(1.5deg)}}
.card.enter:nth-child(2){animation-delay:.06s}.card.enter:nth-child(3){animation-delay:.12s}.card.enter:nth-child(4){animation-delay:.18s}.card.enter:nth-child(5){animation-delay:.24s}.card.enter:nth-child(7){animation-delay:.3s}

.slots .card{--cw:36px}
.slots{display:flex;justify-content:center;flex-wrap:wrap;margin:10px 0;gap:4px}
.bar-row .tr{background:var(--line);border-radius:4px;height:11px;overflow:hidden;display:block}
.bar-row .fl{height:100%;background:var(--brass);border-radius:4px;display:block}
.sc .nm{font-weight:700;font-size:12.5px;display:flex;justify-content:space-between;gap:4px;align-items:baseline;white-space:nowrap;overflow:hidden}
.sc .nm i{font-style:normal;font-size:10.5px;color:var(--brass);overflow:hidden;text-overflow:ellipsis;max-width:54px;display:inline-block;vertical-align:bottom}

@media (prefers-color-scheme: light){:root[data-theme="auto"] .tabbar button[aria-current="page"]{color:#8a6a1f}:root[data-theme="auto"] .tabbar button[aria-current="page"]::after{background:#8a6a1f}}

/* --- v4: card faces that cannot collide, and room to breathe --- */
.card .idx b{display:block;line-height:1}
.card .idx b.r10{letter-spacing:-.09em;font-size:.88em;padding-right:.06em}
.card .idx i{display:block;font-style:normal;font-size:.8em;line-height:1}
.picker button{aspect-ratio:5/7;border-radius:5px;border:1px solid var(--line);background:var(--ivory);color:var(--card-ink);font-size:11px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-family:var(--f-num);font-weight:700}
.mod{background:radial-gradient(rgba(255,255,255,.02) .9px,transparent 1.3px) 0 0/6px 6px,linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 45%),var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;gap:11px;align-items:center;text-align:left;width:100%;box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05);padding:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-top:12px}
p{margin:6px 0;line-height:1.5}
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .mod,:root[data-theme="dark"] .stat,:root[data-theme="dark"] .hud div{border-color:rgba(255,255,255,.07)}

@media (prefers-reduced-motion: reduce){.flame{animation:none}}
@media (prefers-reduced-motion: reduce){.card.enter{animation:none}.switch i,.switch i::after{transition:none}}

/* --- blackjack part --- */
.bjrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.bjt{font-weight:700;font-size:12.5px;padding:2px 10px;border-radius:99px;background:rgba(0,0,0,.3);color:var(--felt-ink)}
.bjt.bust{background:var(--lose);color:#fff}.bjt.bj{background:var(--brass);color:var(--brass-ink)}
.bjbet .ringchip{display:block;width:32px}
.bjbet svg,.chipb svg{display:block;width:100%;height:auto}
.bjout{font-size:12px;font-weight:700}.bjout.w{color:#8fe0b0}.bjout.l{color:#ffab9e}.bjout.p{color:#dcdccd}
.chipb{width:62px;padding:0;border:0;background:transparent;border-radius:50%}
.chipb .ringchip{display:block;width:62px}
.chipb:active{transform:translateY(2px)}
.chart{display:grid;grid-template-columns:38px repeat(10,1fr);gap:2px;margin-top:10px}
.chart .ch{text-align:center;font-weight:700;font-size:11px;color:var(--muted);padding-bottom:2px}
.chart .cl{display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--muted)}
.chart .chs{grid-column:1/-1;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:10px 0 2px}

.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:8px}
.wtile{padding:10px 6px}
.wtile b{font-size:13px}.wtile span{font-size:11px;color:var(--muted)}

.tabbar.bj4{grid-template-columns:repeat(4,1fr)}
.field{margin-top:10px}.field label{display:block;font-size:.82em;color:var(--muted);font-weight:600;margin-bottom:4px}
.homefoot{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}

/* ============ identity pass: type, texture, ledger, pin board ============ */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#13100e;--ink:#f0e9d8;--muted:#a89f8c;--panel:#1c1815;--panel2:#161311;--line:#332d27;--glass:rgba(29,25,21,.62);--glassline:rgba(255,255,255,.12);--glasshi:rgba(255,255,255,.14);--brass:#c9a24b;--brass-ink:#2a1e05;--win:#6fd3a0;--lose:#ff9a8c;--info:#8db6ee;--ivory:#f4edd9;--card-ink:#1a1a1f;--suit-red:#b3261e;--felt1:#17563f;--felt2:#0e3b2e;--felt3:#082a20;--felt-ink:#f3ead0;--felt-mut:#c7dacf;--cw:clamp(42px,12.8vw,60px);--fs:16px;--rad:14px;--f-disp:'Zilla Slab','Rockwell','Roboto Slab',Georgia,serif;--f-deco:var(--f-disp);--f-engr:var(--f-body);--f-garamond:var(--f-hero);--f-label:var(--f-disp);--f-script:var(--f-hero);--f-italiana:var(--f-hero);--f-bodoni:'Bodoni Moda',Didot,serif;--f-marcellus:var(--f-disp);--f-num:'Bitter','Roboto Slab',Georgia,serif;--f-body:'Hanken Grotesk','Helvetica Neue',system-ui,sans-serif;--f-disp:'Zilla Slab','Rockwell','Roboto Slab',Georgia,serif;--f-num:'Bitter','Roboto Slab',Georgia,serif;--f-body:'Hanken Grotesk','Helvetica Neue',system-ui,sans-serif;--f-hero:'Fraunces','Zilla Slab',Georgia,serif;
 --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
body,button,input,textarea,select{font-family:var(--f-body)}
h1,h2,h3{margin:0;font-family:var(--f-disp);letter-spacing:0}
.num,.big,.stat b,.kv b,.hud b,.bjt,.bjout,.banner span,.chart .c,.chart .ch,.chart .cl,.pin span,.kicker{font-family:var(--f-num);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.table{border-radius:20px 20px 100px 100px / 20px 20px 42px 42px;padding:12px 10px 20px;box-shadow:0 0 0 5px #2b1d15,0 0 0 6px #4a3222,0 14px 30px rgba(0,0,0,.26);color:var(--felt-ink);background:radial-gradient(rgba(255,255,255,.045) .9px,transparent 1.3px) 0 0/6px 6px,radial-gradient(120% 90% at 50% 10%,var(--felt1) 0%,var(--felt2) 55%,var(--felt3) 100%);position:relative}
.table::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.10;mix-blend-mode:screen;pointer-events:none;border-radius:inherit}
.kicker{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.big{font-size:44px;line-height:1.05;font-weight:700;letter-spacing:-.01em}
.edge{height:1px;margin:12px 0;background:linear-gradient(90deg,transparent,var(--brass) 18%,var(--brass) 82%,transparent);opacity:.6}
.plaque{position:relative;border:1px solid rgba(201,162,75,.4)}
.plaque.bankroll .kv span{font-family:var(--f-disp);font-style:italic;font-weight:500}
.plaque.bankroll .kv b{font-family:var(--f-disp);font-style:italic;font-weight:600}
.plaque h2{margin:2px 0 4px}
.soon{list-style:none;margin:6px 0 0;padding:0}
.soon b{display:block;font:600 16px var(--f-disp)}.soon span{color:var(--muted);font-size:13px}
.rankhead{display:flex;justify-content:space-between;align-items:baseline;font:700 11px var(--f-num);letter-spacing:.16em;text-transform:uppercase;color:var(--felt-mut);margin:16px 4px 8px;padding-bottom:4px;border-bottom:1px dotted rgba(255,255,255,.28)}
.rankhead em{font-style:normal;letter-spacing:.06em;opacity:.8}
.pins{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 4px}
.pin{background:none;border:0;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--felt-ink);border-radius:10px;min-height:44px}
.pin .pinsvg{filter:drop-shadow(0 4px 5px rgba(0,0,0,.45))}
.pin b{font:600 12.5px/1.15 var(--f-disp);text-align:center}
.pin span{font-size:10.5px;font-weight:600;color:var(--felt-mut);opacity:.9}
.pin.sel{outline:2px solid var(--brass);outline-offset:2px}
.pin.locked b{opacity:.6}
.pindetail{display:flex;gap:14px;align-items:center;padding:12px;margin:0 0 4px;background:rgba(0,0,0,.3);border-radius:8px;color:var(--felt-ink)}
.pindetail h3{margin:2px 0}.pindetail p{margin:0;color:var(--felt-mut);font-size:13px}
.evrow{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px dotted rgba(255,255,255,.14)}
.evrow b{display:block;font:700 15px var(--f-disp)}.evrow span{color:var(--muted);font-size:12.5px}
.tabbar button .ti{display:block;width:24px;height:24px}
.wtile i{display:block;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.3);border:4px dashed rgba(241,232,210,.6)}

.note{margin-top:8px;font-size:12.5px;color:var(--muted)}

.mod .ic svg{display:block;width:22px;height:22px}
.mod .ic{width:42px;height:42px;border-radius:12px;flex:none;font-size:19px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center}

/* two notices at once (club medal + coach feedback) stack instead of overlapping */
.toaststack{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;width:calc(100% - 24px);max-width:420px;z-index:60;pointer-events:none}
.toaststack .toast{position:static;transform:none;bottom:auto;max-width:none;width:auto}

/* craps table */
.cz-status{margin-top:0}
.cz-row{display:flex;align-items:center;gap:12px}
.puck{flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;align-content:center;font-family:var(--f-num,serif);border:3px solid #111;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.puck.off{background:#15120e;color:#e9e2d0}.puck.on{background:#f4edd9;color:#15120e;border-color:#c9a24b}
.puck b{font-size:20px;line-height:1}.puck span{font-size:9px;font-weight:700;letter-spacing:.14em;margin-top:2px}
.dice{display:flex;gap:6px}.die{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}.die.idle{opacity:.35}
.cz-meta{min-width:0}.cz-meta b{display:block;font-family:var(--f-disp,serif);font-size:1.05em;line-height:1.2}.cz-meta span{font-size:12px;color:var(--muted)}
.hist{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.hist span{min-width:26px;height:26px;border-radius:13px;display:grid;place-items:center;font-size:12px;font-weight:700;background:rgba(255,255,255,.07);color:var(--felt-mut,#c7dacf);font-variant-numeric:tabular-nums}
.hist span.s{background:#7a1d16;color:#ffe3df}.hist span.y{background:#c9a24b;color:#2a1e05}.hist span.c{background:#222;color:#bbb}
.cz-chips{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 4px}
.chipbtn{color:#fff;isolation:isolate;position:relative;aspect-ratio:1;box-shadow:none;width:52px;height:52px;border-radius:50%;border:2px solid transparent;padding:0;background:none;display:grid;place-items:center}
.chipbtn.on{border-color:var(--brass);box-shadow:0 0 0 3px rgba(201,162,75,.25)}.chipbtn svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)) drop-shadow(0 5px 7px rgba(0,0,0,.28));width:44px;height:44px}
.zones{display:grid;gap:8px;margin-top:8px}.z1{grid-template-columns:1fr}.z2{grid-template-columns:1fr 1fr}.z3{grid-template-columns:1fr 1fr 1fr}.z4{grid-template-columns:repeat(4,1fr)}.z6{grid-template-columns:repeat(3,1fr)}
.zone{position:relative;min-height:62px;border-radius:12px;border:1.5px solid rgba(255,255,255,.14);background:linear-gradient(180deg,var(--felt1),var(--felt2));color:var(--felt-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;text-align:center;gap:1px}
.zone b{font-family:var(--f-disp,serif);font-size:1.02em}.zone span{font-size:11px;color:var(--felt-mut);line-height:1.2}
.zone.dim{opacity:.55}.zone.has{border-color:var(--brass);box-shadow:inset 0 0 0 1px rgba(201,162,75,.5)}
.zone .amt{position:absolute;top:-8px;right:-4px;font-style:normal;font-size:11px;font-weight:800;background:var(--brass);color:#2a1e05;border-radius:99px;padding:2px 7px;font-variant-numeric:tabular-nums}
.tg{font-style:normal;font-size:10.5px;font-weight:800;border-radius:99px;padding:1px 7px;margin-top:3px;font-variant-numeric:tabular-nums}
.tg.g{background:#1f7347;color:#eaffef}.tg.m{background:#8a6d2c;color:#fff4d6}.tg.b{background:#8f2a20;color:#ffe3df}
.cbet{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px dotted var(--line)}
.cbet .ct b{display:block}.cbet .ct span{font-size:12.5px;color:var(--muted)}.cc{display:flex;gap:6px;align-items:center}
.mini{min-width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font-weight:800;font-size:15px}.mini.wide{padding:0 12px;font-size:13px}
.lock{font-size:11px;font-weight:700;color:var(--muted);padding:0 6px}

.sect{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:26px 4px 10px;display:flex;align-items:center;gap:8px}

/* welcome, Home hub, Stats, Settings */

.w3{animation-delay:.24s}

/* while the welcome stands, nothing behind it scrolls (iOS scrolls the page, not the body) */
.who small{display:block;font-size:.78em;color:var(--muted)}.who b{display:block;font-family:var(--f-disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn svg{width:22px;height:22px}

@keyframes heroSheen{0%,78%{left:-60%}100%{left:130%}}

/* ---- Liquid-glass lift: Play now / Daily Hands / Learn (no outline, floating glass edge) ---- */

.plaque.bankroll .lkey{display:none}
.gtile{border:1px solid var(--line)}

.gmain b{font-family:var(--f-disp);line-height:1.15}.gmain em{font-style:normal;font-size:.78em;font-weight:700;color:var(--muted);margin-top:2px}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sgrid.s2{grid-template-columns:1fr 1fr;margin-top:0}
.scard{border:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.scard span{display:block;color:var(--muted);font-weight:600}.scard b{display:block;font-family:var(--f-num);font-size:1.25em;margin-top:2px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scard em{display:block;font-style:normal;font-size:.72em;color:var(--muted);margin-top:1px}
.scard b.pos{color:var(--win)}.scard b.neg{color:var(--lose)}
.jumps{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}.jumps::-webkit-scrollbar{display:none}
.txt{width:100%;min-height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);padding:10px 12px;font:inherit;font-size:16px}
.txt:focus{outline:2px solid var(--brass);outline-offset:1px}
.avatars{display:flex;gap:6px;flex-wrap:nowrap}

/* tables: header, sheet, lobby cards */
.thead .tnav:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(0,0,0,.35)}
.thead .tnav svg{width:16px;height:16px;flex:none}
.thead .tnav.add{padding:0 13px;color:var(--brass);border-color:rgba(201,162,75,.45)}
.thead .tmid{min-width:0;text-align:center;line-height:1.1}
.thead .tmid small{display:block;font-size:.64em;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thead .tmid b{font-family:var(--f-num);font-size:1.12em;font-variant-numeric:tabular-nums}
.thead .tmid em{font-style:normal;font-size:.72em;font-weight:700;margin-left:6px}.thead .tmid em.pos{color:var(--win)}.thead .tmid em.neg{color:var(--lose)}.thead .tmid em.zero{color:var(--muted)}
.lvscrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:lvfade .18s ease-out}
.lvcard{position:fixed;z-index:61;left:50%;top:50%;width:min(340px,calc(100vw - 40px));transform:translate(-50%,-50%);padding:22px 18px 18px;border-radius:24px;border:1px solid var(--glassline);background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),var(--glass);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.05),0 24px 60px rgba(0,0,0,.6);text-align:center;animation:lvpop .24s cubic-bezier(.2,.9,.3,1.2)}
.lvcard h3{margin:0 26px;font-family:var(--f-disp);font-size:1.3em}
.lvcard .lvamt{margin:4px 0 16px;color:var(--muted);font-size:.92em}.lvcard .lvamt b{color:var(--ink);font-family:var(--f-num)}
.lvcard .lvx{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:17px;border:1px solid var(--glassline);background:rgba(255,255,255,.07);color:var(--muted);display:flex;align-items:center;justify-content:center;padding:0}
.lvcard .lvx:active{transform:scale(.92)}.lvcard .lvx svg{width:14px;height:14px}
.lvcard .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lvcard .btn{max-width:none;min-height:64px}
.lvcard .note{margin:0 0 12px;color:var(--lose)}
@keyframes lvfade{from{opacity:0}to{opacity:1}}
@keyframes lvpop{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.lvscrim,.lvcard{animation:none}}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-width:560px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 40px rgba(0,0,0,.5)}
.sheet h3{margin:0;font-family:var(--f-disp);font-size:1.3em}

/* Blackjack result: unmistakable */
.banner b{font-size:1.25em}.banner span{font-size:1.5em;display:block;margin-top:2px}.banner em{display:block;font-style:normal;font-size:.86em;font-weight:600;margin-top:4px;opacity:.92}
.banner.pop{animation:bpop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes bpop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
:root[data-motion="off"] .banner.pop{animation:none}
@media (prefers-reduced-motion: reduce){.banner.pop{animation:none}}

.banner{flex-direction:column;align-items:center;line-height:1.05;min-height:32px;justify-content:center;text-align:center;display:block;max-width:86%;margin:12px auto;padding:9px 18px;border-radius:14px;background:rgba(0,0,0,.4);border:1.5px solid rgba(255,255,255,.28)}
.banner.w{border-color:#5fd39a}.banner.l{border-color:#e2726a}.banner.p{border-color:#c9a24b}

/* ---- verdict: who won and why (every game) ---- */
/* the verdict: one lacquered line on the felt (verdictHTML) */
.vd{position:relative;width:max-content;max-width:94%;margin:12px auto;text-align:center;color:#f3ead6}
.vd-line{display:inline-flex;align-items:baseline;justify-content:center;flex-wrap:wrap;column-gap:12px;row-gap:2px;max-width:100%;padding:10px 20px 11px;border-radius:999px;border:1px solid rgba(227,199,126,.32);color:inherit;font:inherit;
  background:linear-gradient(180deg,rgba(255,240,215,.08),rgba(0,0,0,.12)),rgba(10,8,6,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,248,230,.16),0 8px 18px -8px rgba(0,0,0,.6)}
button.vd-line{cursor:pointer;-webkit-tap-highlight-color:transparent}
button.vd-line:active{transform:translateY(1px)}
.vd-line b{font:600 19px/1.2 var(--f-disp);letter-spacing:.01em;text-wrap:balance}
.vd-amt{font:700 19px/1.2 var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.vd-w .vd-amt{color:#7fe0ae}.vd-l .vd-amt{color:#ff9d90}.vd-p .vd-amt,.vd-n .vd-amt{color:#e3c77e}
.vd-more{align-self:center;width:6px;height:6px;margin:0 -4px 3px -2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.4;transition:transform .2s}
[aria-expanded="true"]>.vd-more{transform:rotate(225deg);margin-bottom:-3px}
.vd-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.vd-pills span{font-size:.82em;font-weight:600;padding:4px 10px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14)}
.vd-pills span.w{border-color:rgba(95,211,154,.6)}.vd-pills span.w b{color:#6fe0a8}
.vd-pills span.l{border-color:rgba(226,114,106,.6)}.vd-pills span.l b{color:#ff9d90}
.vd-pills span.p b{color:#e3c77e}
.vd-why{max-width:300px;margin:8px auto 0;font-size:.86em;font-weight:500;line-height:1.38;color:rgba(243,234,214,.8)}
.vd.pop{animation:vdIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes vdIn{from{opacity:0;transform:translateY(6px)}}
:root[data-motion="off"] .vd.pop{animation:none}
@media (prefers-reduced-motion: reduce){.vd.pop{animation:none}}
.card.key{box-shadow:0 0 0 2px #e3c77e,0 0 18px rgba(227,199,126,.55),0 6px 12px rgba(0,0,0,.35);transform:translateY(-3px);transition:transform .3s,box-shadow .3s}
.card.fade{opacity:.5;filter:saturate(.6);transition:opacity .3s}
.cz-status .vd{margin:12px auto 0}
.tabgap{height:16px}

/* sound preview grid in Settings */

/* Customization: three icon buttons + an animated glass popup */

.wprev{display:grid;place-items:center;background:none!important}
.wprev svg{width:100%;height:100%}

.lb .coachlv{display:block;font-style:normal;font-weight:700;color:var(--brass);margin-bottom:1px}

.lvcard .loucard{text-align:left;margin-top:14px}
/* ---- Daily Hand: its own header, in the bankroll card's glass ---- */
.dhead{display:flex;align-items:center;gap:12px;margin:2px 0 14px;padding:11px 14px 11px 10px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.02) 46%),radial-gradient(120% 130% at 0% 0%,rgba(201,162,75,.22),transparent 62%),radial-gradient(90% 90% at 100% 100%,rgba(23,86,63,.2),transparent 65%),rgba(24,20,16,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 0 -10px 22px -14px rgba(0,0,0,.6),0 2px 2px rgba(0,0,0,.45),0 12px 22px -10px rgba(0,0,0,.65),0 14px 36px -20px rgba(201,162,75,.35)}
.dhead .dback{flex:none;display:inline-flex;align-items:center;gap:3px;height:40px;padding:0 14px 0 9px;border-radius:99px;border:0;color:#ecd28a;font-weight:700;font-size:.9em;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.03));box-shadow:inset 0 1px 1px rgba(255,255,255,.34),0 3px 0 rgba(0,0,0,.45),0 8px 14px -6px rgba(0,0,0,.6);transition:transform .1s ease}
.dhead .dback span{font-size:1.55em;line-height:1;margin-top:-3px}
.dhead .dback:active{transform:translateY(2px);box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 1px 0 rgba(0,0,0,.45)}
.dhead .dt{flex:1;min-width:0}
.dhead .dt small{display:block;font-size:.64em;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dhead .dt b{display:block;font-family:var(--f-disp);font-size:1.32em;line-height:1.15;text-shadow:0 1px 0 rgba(0,0,0,.5),0 3px 12px rgba(0,0,0,.4)}
.dhead .dt em{display:block;font-style:normal;font-size:.74em;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dhead .ds b{display:block;font-family:var(--f-num);font-size:1.18em;font-variant-numeric:tabular-nums;color:#f3dda0;text-shadow:0 1px 0 rgba(0,0,0,.5)}
@media (prefers-reduced-transparency:reduce){.dhead{-webkit-backdrop-filter:none;backdrop-filter:none}}
/* picker, result, notes */
.dintro{margin:0 2px 12px}
.dpicks{display:grid;gap:10px}
.dpick:active{transform:translateY(3px);box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 0 0 rgba(0,0,0,.4)}
.dpick .dtx{flex:1;min-width:0}.dpick .dtx b{display:block;font-family:var(--f-disp);font-size:1.15em}

.dres small{display:block;font-size:.66em;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:700}
.dres b{display:block;font-family:var(--f-disp);font-size:1.4em;margin-top:2px}
.dres em{display:block;font-style:normal;font-size:.86em;color:var(--muted)}
.dres p{margin:6px 0 0;font-size:.8em;color:var(--muted)}
.ddecs{list-style:none;margin:6px 0 0;padding:0}.ddecs li{padding:5px 0;border-top:1px solid var(--line);font-size:.9em}.ddecs li:first-child{border-top:0}
.ddecs li.ok b{color:var(--win)}.ddecs li.off b{color:var(--lose)}
.dnote{display:flex;gap:10px;align-items:flex-end;margin:10px 2px 0;font-size:.8em}
.dczb{display:flex;gap:6px;flex:none}
/* ---- Home: the Daily plaque ---- */

/* ---- Daily screen: richer header and the glass game cards ---- */
.dhead .dt small.dfoil{color:transparent;background:linear-gradient(180deg,#fffaf0 0%,#f3dda0 45%,#c9a24b 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55));font-size:.7em;letter-spacing:.2em}
.dhead .ds{flex:none;text-align:right;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px}
.dhead .dchip{display:block;width:42px;height:42px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5)) drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.dhead .dchip svg{display:block;width:100%;height:100%}
.dhead .ds small{display:block;font-size:.6em;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap}
.dhead .dprac{font-family:var(--f-disp);font-size:1em;color:#f3dda0}
.dpick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;color:inherit;transition:transform .09s ease,box-shadow .09s ease;padding:12px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.02) 46%),radial-gradient(110% 120% at 0% 0%,rgba(201,162,75,.16),transparent 60%),rgba(24,20,16,.78);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -10px 20px -14px rgba(0,0,0,.6),0 3px 0 rgba(0,0,0,.42),0 12px 20px -10px rgba(0,0,0,.6)}
.dpick .dcrest{flex:none;display:block;width:46px;height:46px}.dpick .dcrest svg{display:block}
.dpick .dtx span{display:block;color:var(--muted);font-size:.78em}
.dfelt{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;min-height:52px;padding:6px 4px;border-radius:12px;text-align:center;color:var(--felt-ink);
  background:radial-gradient(120% 110% at 50% 0%,var(--felt1) 0%,var(--felt2) 60%,var(--felt3) 100%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.08)}
.dfelt small{font-size:.6em;letter-spacing:.14em;text-transform:uppercase;color:var(--felt-mut);font-weight:700}
.dfelt b{font-family:var(--f-num);font-size:1em;font-variant-numeric:tabular-nums;color:#f3dda0}
.dfelt b.win{color:#f3dda0}.dfelt b.push{color:#bfe3cf}.dfelt b.loss{color:#efb7b0}
.dpick.done{opacity:.92}
@media (prefers-reduced-transparency:reduce){.dpick{-webkit-backdrop-filter:none;backdrop-filter:none}}
.dhead .dback span.bl{font-size:1em;line-height:1;margin-top:0}
@media (max-width:429px){
  .dhead{gap:8px;padding:10px 10px 10px 8px}
  .dhead .dt small.dfoil{letter-spacing:.12em}
  .dhead .ds{min-width:0}.dhead .ds small{display:none}.dhead .dchip{width:38px;height:38px}
}
@media (max-width:374px){
  .dhead .dback{padding:0 12px 0 11px}.dhead .dback .bl{display:none}
  .dhead .dt b{font-size:1.18em}
  .dfelt{width:74px}
}
/* ---- the result banner ---- */
.dres{margin:12px 0;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:inset 0 1px 1px rgba(255,255,255,.2),inset 0 0 0 1px var(--line);position:relative;overflow:hidden;padding:16px 16px 14px;border-radius:20px}
.dres .dnet{font-family:var(--f-num);font-variant-numeric:tabular-nums;display:inline-block;font-size:1.9em;line-height:1.1}
.dres.win{background:linear-gradient(180deg,rgba(243,221,160,.14),rgba(201,162,75,.05) 60%),rgba(26,21,15,.86);
  box-shadow:inset 0 1px 1px rgba(255,240,200,.35),inset 0 0 0 1px rgba(201,162,75,.5),0 14px 30px -14px rgba(201,162,75,.45)}
.dres.win b{color:#f3dda0}
.dres.win .dnet{color:transparent;background:linear-gradient(180deg,#fffaf0 0%,#f3dda0 45%,#c9a24b 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
.dres.push{color:var(--felt-ink);background:radial-gradient(120% 120% at 50% 0%,var(--felt1) 0%,var(--felt2) 60%,var(--felt3) 100%);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.25),0 12px 26px -14px rgba(0,0,0,.6)}
.dres.push small{color:var(--felt-mut)}.dres.push em,.dres.push p{color:var(--felt-mut)}
.dres.loss{color:#f3e2dc;background:linear-gradient(180deg,#5c1b26 0%,#471520 55%,#361018 100%);
  box-shadow:inset 0 1px 1px rgba(255,220,210,.18),inset 0 0 0 1px rgba(0,0,0,.3),0 12px 26px -14px rgba(0,0,0,.6)}
.dres.loss small{color:#d9a9a2}.dres.loss em,.dres.loss p{color:#d9b8b2}
.dres::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,246,222,.14) 42%,rgba(255,246,222,.26) 50%,rgba(255,246,222,.14) 58%,transparent);transform:skewX(-14deg)}
@keyframes dresIn{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dresSheen{from{left:-60%}to{left:130%}}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) .dres.reveal{animation:dresIn .45s cubic-bezier(.2,.8,.2,1) both}
  :root:not([data-motion="off"]) .dres.reveal::after{animation:dresSheen 1.3s cubic-bezier(.3,.6,.3,1) .2s 1 both}
}
.dres p.dpaid{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:10px 0 0;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(214,176,104,.3);font-size:.86em;color:var(--ink)}
.dres p.dpaid b{font:700 1.15em/1 var(--f-num);color:#eecb70}
.dres p.dpaid span{flex-basis:100%;font-size:.9em;color:var(--muted)}
/* ---- the lesson: the same cards, played the other ways ---- */
.dlesson .dlhead small{display:block;font-size:.64em;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:700}
.dlesson .dlhead b{display:block;font-family:var(--f-disp);font-size:1.2em;line-height:1.2;margin-top:2px}
.dlesson .dlspot{margin:8px 0 10px;font-size:.88em;line-height:1.45}
.dlesson .dlspot b{white-space:nowrap}
.dlesson .dlcols{display:flex;white-space:nowrap;overflow:hidden;justify-content:space-between;gap:10px;padding:0 10px 4px;font-size:.62em;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.dlesson .dlrows{display:grid;gap:6px}
.dlrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:12px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px var(--line)}
.dlrow.book{background:linear-gradient(90deg,rgba(201,162,75,.16),rgba(201,162,75,.03) 70%);box-shadow:inset 3px 0 0 var(--brass),inset 0 0 0 1px rgba(201,162,75,.35)}
.dlrow .dlk{min-width:0}.dlrow .dlk b{display:block;font-size:.92em}
.dlrow .dlk em{display:block;font-style:normal;font-size:.68em;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:1px}
.dlrow.book .dlk em{color:var(--brass)}
.dlrow .dlv{flex:none;text-align:right}
.dlrow .dlv b{display:block;font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:1em}
.dlrow .dlv b.pos{color:var(--win)}.dlrow .dlv b.neg{color:var(--lose)}.dlrow .dlv b.zero{color:var(--muted)}
.dlrow .dlv small{display:block;font-size:.7em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dlesson .dlwhy,.dlesson .dlrogue{margin:12px 0 0;font-size:.86em;line-height:1.5}
.dlesson .dlwhy b,.dlesson .dlrogue b{color:#f3dda0}
.dlesson .dlnote{margin:10px 0 0;font-size:.74em;color:var(--muted)}
.dtomorrow{margin-top:12px;text-align:center}
/* ---- replay sheets (view only) ---- */
.sheet.tall{max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.rp .rp-now{margin:12px 0 6px;padding:9px 12px;border-radius:12px;font-weight:700;font-size:.92em;
  background:linear-gradient(180deg,rgba(201,162,75,.16),rgba(201,162,75,.05));box-shadow:inset 0 0 0 1px rgba(201,162,75,.3),inset 0 1px 1px rgba(255,255,255,.12)}
.rp .rp-now small{display:block;color:var(--brass);font-size:.7em;letter-spacing:.14em;text-transform:uppercase}
.rp-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.rp-row:first-child{border-top:0}
.rp-who{flex:0 0 78px;min-width:0;font-weight:700;font-size:.86em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-who em{display:block;font-style:normal;font-weight:600;font-size:.82em;color:var(--brass)}
.rp-cards{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-height:10px}
.rp-c{display:inline-block;border-radius:7px;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease}
.rp-c.hot{transform:translateY(-4px);box-shadow:0 0 0 2px var(--brass),0 10px 16px -6px rgba(201,162,75,.55)}
.rp-gap{display:inline-block;width:6px}
.rp-ctl{margin-top:12px}
.rp-go{margin-top:12px}
.rp-link{display:block;background:none;border:0;color:var(--brass);font-weight:700;padding:10px 0 0;font-size:.92em}
.rp-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 12px;margin-top:8px;border-radius:14px;border:1px solid var(--line);color:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 1px 1px rgba(255,255,255,.1)}
.rp-item .tx{flex:1;min-width:0}.rp-item b{display:block}.rp-item .tx span{display:block;font-size:.8em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-item i{font-style:normal;color:var(--brass);font-size:1.3em}
.czh-open{padding-top:8px}
.czh-tabs{margin:10px 0 2px}.czh-tabs .pill.on{color:#1b140c;background:linear-gradient(180deg,#f3dda0,#c9a24b);border-color:transparent}
.czh-roll{padding:9px 0;border-top:1px solid var(--line)}
.czh-roll:first-child{border-top:0}
.czh-top{display:flex;align-items:center;gap:6px}
.czh-n{flex:0 0 22px;font-family:var(--f-num);font-size:.78em;color:var(--muted);font-variant-numeric:tabular-nums}
.czh-call{flex:1;min-width:0;margin-left:4px}.czh-call b{display:block;font-size:.92em}.czh-call em{display:block;font-style:normal;font-size:.76em;color:var(--brass);font-weight:600}
.czh-net{font-family:var(--f-num);font-variant-numeric:tabular-nums}.czh-net.pos{color:var(--win)}.czh-net.neg{color:var(--lose)}.czh-net.zero{color:var(--muted)}
.czh-roll .kv{padding:3px 0 3px 28px;font-size:.88em;border:0}
.czh-none{margin:2px 0 0 28px;font-size:.84em}

.rp-fold .rp-cards{opacity:.45;filter:saturate(.6)}.rp-fold .rp-who em{color:var(--lose)}
.rp-who em .pos{color:var(--win)}.rp-who em .neg{color:var(--lose)}
/* Show the shoe: the last shoe as rows of small paper cards, the cut card a brass bar */
.shnote{margin:8px 0 10px;font-size:.86em;line-height:1.45;color:var(--muted)}
.shgrid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px}
.shc{display:block;padding:3px 0;border-radius:3px;text-align:center;font-style:normal;font-weight:700;font-size:10.5px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;
  color:#1d1a16;background:linear-gradient(180deg,#f6efde,#e6dcc4);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.35)}
.shc.red{color:#a3262f}
.shc.burn{background:linear-gradient(180deg,#5a4a36,#3e3224);color:#e9dcc0;box-shadow:inset 0 0 0 1px rgba(201,162,75,.5)}
.shc.left{opacity:.38}
.shcut{grid-column:1/-1;margin:4px 0;padding:3px 0;border-radius:2px;text-align:center;font-size:.66em;letter-spacing:.14em;text-transform:uppercase;color:#2a1d0c;
  background:linear-gradient(180deg,#e2c27e,#a9813c);box-shadow:inset 0 1px 0 rgba(255,245,210,.6),0 1px 2px rgba(0,0,0,.5)}
.dshoe[data-act]{pointer-events:auto;cursor:pointer}
.dshoe[data-act]::after{content:'';position:absolute;inset:-12px}
/* ---- cards: paper faces, woven backs, real depth, a deal that flips face up ---- */
.card{width:var(--cw);aspect-ratio:5/7;background:var(--ivory);color:var(--card-ink);position:relative;font-family:var(--f-disp);flex:none;border-radius:calc(var(--cw)*.13);
  box-shadow:inset 0 0 0 1px rgba(70,52,22,.14),inset 0 -2px 0 rgba(0,0,0,.05),0 1px 0 rgba(0,0,0,.2),0 3px 6px rgba(0,0,0,.26),0 10px 18px -8px rgba(0,0,0,.45)}
.card .idx{position:absolute;top:5%;left:8%;display:flex;flex-direction:column;align-items:center;font-weight:700;font-size:calc(var(--cw)*.30);line-height:1;text-align:center;font-family:var(--f-num);text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}
.card .idx b{padding-bottom:.16em;font-weight:700;letter-spacing:-.02em}
.card .pip{place-items:center;position:absolute;inset:auto 0 7% 0;display:block;text-align:center;font-size:calc(var(--cw)*.5);line-height:1;padding:0;opacity:.95;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.card.red .pip{color:#a8231c}
:root .card.back,:root[data-back] .card.back{border:calc(var(--cw)*.07) solid #f4edd9;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 0 0 2px rgba(255,255,255,.08),0 1px 0 rgba(0,0,0,.2),0 3px 6px rgba(0,0,0,.26),0 10px 18px -8px rgba(0,0,0,.45)}
:root[data-back="navy"]{--back1:#24406e;--back2:#172b4c}
:root[data-back="brass"]{--back1:#8a6d2c;--back2:#634d1d}
:root[data-back="ink"]{--back1:#2a2f33;--back2:#181b1e}
.card.slot{background:transparent;border:1.5px dashed rgba(201,162,75,.4);box-shadow:none}
/* the deal: from the shoe, edge-on, turning face up as it lands (Hold'em marks new cards with .enter) */
@keyframes cardIn{0%{opacity:0;transform:perspective(700px) translate(-6px,-20px) rotateY(-88deg)}35%{opacity:1}75%{transform:perspective(700px) translateY(2px) rotateY(6deg)}100%{opacity:1;transform:none}}
.card.enter{animation:cardIn .46s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.card.enter{animation:none}}
:root[data-motion="off"] .card.enter{animation:none}
/* ---- Home, second pass (flag homeV2): Play now as a lit corner of felt; Daily Hands folded ---- */
.playhero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:stretch;width:100%;min-height:150px;padding:0;border:0;border-radius:22px;text-align:left;color:#f3ead0;cursor:pointer;
  background:radial-gradient(70% 90% at 80% 20%,rgba(255,226,160,.26),transparent 62%),radial-gradient(rgba(255,255,255,.05) .9px,transparent 1.3px) 0 0/6px 6px,radial-gradient(140% 130% at 75% 0%,var(--felt1),var(--felt2) 55%,var(--felt3));
  box-shadow:inset 0 0 0 3px #2b1d15,inset 0 0 0 4px rgba(201,162,75,.45),inset 0 1px 0 5px rgba(255,255,255,.06),0 5px 0 #1a110b,0 18px 30px -10px rgba(0,0,0,.65),0 12px 40px -18px rgba(201,162,75,.45);
  transition:transform .09s ease,box-shadow .09s ease;-webkit-tap-highlight-color:transparent}
.playhero:active{transform:translateY(5px);box-shadow:inset 0 0 0 3px #2b1d15,inset 0 0 0 4px rgba(201,162,75,.45),0 0 0 #1a110b,0 6px 12px -6px rgba(0,0,0,.6)}
.playhero::after{content:'';position:absolute;top:0;left:-60%;width:34%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);pointer-events:none;z-index:3}

@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) .playhero::after{animation:heroSheen 6s ease-in-out 1s infinite}
  
  
}

.crfan,.ffan{position:relative;flex:none;width:62px;height:52px}
.crc{position:absolute;top:6px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.crc .card{--cw:30px;width:30px}
.crc.c0{left:0;transform:rotate(-14deg)}.crc.c1{left:15px;top:2px;transform:rotate(0)}.crc.c2{left:30px;transform:rotate(14deg)}

/* ---- the Card Room (flag cardRoom) ---- */
.ftile{margin-top:14px;padding:16px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 45%),var(--panel);box-shadow:inset 0 1px 1px rgba(255,255,255,.1),0 5px 12px -4px rgba(0,0,0,.45)}
.ftop{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.ftx{min-width:0}.ftx h2{margin:0}.ftx p{margin:3px 0 0;font-size:.9em;color:var(--muted)}
.frec{display:inline-block;margin-top:5px;font:700 .72em var(--f-num);letter-spacing:.04em;color:var(--brass)}
.frules{margin:12px 0 0;padding-left:20px;font-size:.9em;line-height:1.5}.frules li{margin-bottom:6px}
.fnew{display:block;margin:10px auto 0;background:none;border:0;font:600 12px var(--f-body);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fscore{display:flex;gap:6px;margin-top:2px}
.fscore span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:6px 4px;border-radius:10px;background:var(--panel2)}
.fscore em{font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fscore b{font:700 17px/1.1 var(--f-num);font-variant-numeric:tabular-nums}
.fscore i{font-style:normal;font:700 11px var(--f-num);color:var(--muted)}.fscore i.up{color:var(--brass)}
.fcap{margin:5px 2px 0;font-size:11.5px;color:var(--muted);text-align:center}
.ftable{position:relative;margin-top:10px;height:clamp(196px,36vh,330px);border-radius:26px;color:var(--felt-ink);
  background:radial-gradient(rgba(255,255,255,.045) .9px,transparent 1.3px) 0 0/6px 6px,radial-gradient(120% 90% at 50% 40%,var(--felt1),var(--felt2) 60%,var(--felt3));
  box-shadow:0 0 0 5px #2b1d15,0 0 0 6px #4a3222,0 14px 30px rgba(0,0,0,.35),inset 0 2px 12px rgba(0,0,0,.35)}

.fseat,.fme{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 9px;border-radius:10px;font-size:11px;line-height:1.2;text-align:center;max-width:30%;transition:background .2s ease}
.fseat b,.fme b{font:600 12.5px var(--f-disp);white-space:nowrap}
.fseat span,.fme span{color:var(--felt-mut);white-space:nowrap}
.fseat.act,.fme.act{background:rgba(201,162,75,.2);box-shadow:inset 0 0 0 1px rgba(201,162,75,.6)}
.fseat.n{top:8px;left:50%;transform:translateX(-50%)}.fseat.w{left:6px;top:50%;transform:translateY(-60%)}.fseat.e{right:6px;top:50%;transform:translateY(-60%)}
.fme{bottom:8px;left:50%;transform:translateX(-50%)}
.fbacks{display:flex;justify-content:center;margin-top:3px;height:14px}
.fbacks i{width:10px;height:14px;margin-left:-4px;border-radius:2px;border:1.5px solid var(--ivory);background:repeating-linear-gradient(45deg,#7c2237 0 2px,#611a2b 2px 4px);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.fbacks i:first-child{margin-left:0}
.ftrick{position:absolute;left:24%;right:24%;top:24%;bottom:22%}
.fslot{position:absolute;--cw:clamp(40px,11vw,50px)}
.fslot .cards{display:block}
.fslot.n{top:0;left:50%;transform:translateX(-50%)}.fslot.s{bottom:0;left:50%;transform:translateX(-50%)}
.fslot.w{left:0;top:50%;transform:translateY(-50%) rotate(-6deg)}.fslot.e{right:0;top:50%;transform:translateY(-50%) rotate(6deg)}
.fup{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;--cw:44px}
.fup small{font:700 9px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#e7c873}
.fup .card.sm{--cw:34px;width:34px}
.flast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:5px 11px;border-radius:99px;border:1px solid rgba(243,234,208,.3);background:rgba(0,0,0,.2);color:var(--felt-mut);font:600 11px var(--f-body);cursor:pointer;white-space:nowrap}
.fpeek{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:max-content;max-width:230px;padding:10px;border-radius:12px;background:rgba(10,8,6,.88);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.fpeek span{display:flex;flex-direction:column;align-items:center;gap:2px}.fpeek em{font-style:normal;font-size:9.5px;color:var(--felt-mut)}
.fpeek p{width:100%;margin:2px 0 0;text-align:center;font-size:11.5px}
.fprompt{margin-top:14px;min-height:22px}
.fprompt p{margin:0 0 10px;font-size:.93em;line-height:1.45;text-align:center}
.fprompt.fdone{padding:14px;border-radius:16px;background:var(--panel);text-align:center;box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 5px 12px -4px rgba(0,0,0,.4)}
.fprompt.fdone h3{margin:0 0 6px;font-family:var(--f-hero);font-size:22px;color:var(--brass)}
.fbids{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.fbid{min-width:46px;height:46px;border-radius:12px;border:0;font:700 17px var(--f-num);color:var(--brass-ink);background:linear-gradient(180deg,#f3dc95,#d6af57 50%,#b58b30);box-shadow:0 4px 0 #7d5f1f,0 8px 12px -4px rgba(0,0,0,.5);cursor:pointer;transition:transform .09s ease,box-shadow .09s ease}
.fbid:active{transform:translateY(4px);box-shadow:0 0 0 #7d5f1f}
.fbid:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}
.gffelt{height:auto;padding:10px 6px 12px;display:flex;flex-direction:column;gap:12px}
.gfopps{display:flex;justify-content:space-around;gap:2px}
.gfo{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 4px;border-radius:10px;font-size:11px;line-height:1.2;transition:background .2s ease}
.gfo>b{font:600 12px var(--f-disp);white-space:nowrap}.gfo>span{color:var(--felt-mut);white-space:nowrap}
.gfo.act,.gfme.act{background:rgba(201,162,75,.2);box-shadow:inset 0 0 0 1px rgba(201,162,75,.6)}
.gfgrid{display:grid;grid-template-columns:repeat(3,auto);gap:2px;justify-content:center;margin-top:3px}
.gfo .card{--cw:24px;width:24px}
.gfc.pair .card{box-shadow:0 0 0 1.5px var(--brass)}
.gfo .card:not(.back) .idx{inset:0;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;line-height:1;opacity:1}
.gfo .card:not(.back) .idx i{font-size:.85em;margin-top:1px}
.gfo .card .pip{display:none}
.gfo .card.back{border-width:2px}
.gfmid{display:flex;justify-content:center;align-items:flex-start;gap:16px}
.gfpile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--felt-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease}
.gfpile .card{--cw:50px;width:50px}
.gfpile:disabled{cursor:default}
.gfpile.ok .card{box-shadow:0 0 0 2px var(--brass),0 5px 12px rgba(0,0,0,.4)}
.gfpile.ok:active{transform:translateY(2px)}
.gfpile small{color:var(--felt-mut);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.gfdrawn .card{box-shadow:0 0 0 2px rgba(243,220,149,.9),0 8px 16px rgba(0,0,0,.45)}
.gfme{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 8px 6px;border-radius:14px;transition:background .2s ease}
.gfme>b{font:600 12.5px var(--f-disp)}
.gfme .gfgrid{gap:8px}
.gfslot{padding:0;border:0;background:none;cursor:pointer;border-radius:9px;transition:transform .15s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.gfslot .card{--cw:clamp(52px,16vw,70px);width:clamp(52px,16vw,70px)}
.gfslot.ok{transform:translateY(-3px)}.gfslot.ok:active{transform:translateY(1px)}
.gfslot.ok .card{box-shadow:0 0 0 2px var(--brass),0 6px 12px rgba(0,0,0,.4)}
.gfslot.pair .card{box-shadow:0 0 0 2px rgba(243,220,149,.85),0 4px 10px rgba(0,0,0,.3)}
.gfcols{display:grid;grid-template-columns:repeat(3,clamp(52px,16vw,70px));gap:8px;justify-content:center;font:600 11px var(--f-num);color:var(--felt-mut);text-align:center}
.gfcols .z{color:#f3dc95}
.gfset .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.gfset .pill[aria-pressed="true"]{background:linear-gradient(180deg,#f3dc95,#d6af57 50%,#b58b30);color:var(--brass-ink);border-color:transparent}
.gfcard{overflow-x:auto;margin-top:12px;border-radius:14px;background:var(--panel);padding:6px 4px}
.gfcard table{border-collapse:collapse;font:600 12px var(--f-num);font-variant-numeric:tabular-nums;min-width:100%}
.gfcard th,.gfcard td{padding:6px 7px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.gfcard th{color:var(--muted);font-weight:600;font-size:11px}
.gfcard th:first-child,.gfcard td:first-child{text-align:left;position:sticky;left:0;background:var(--panel)}
.gfcard td.t{color:var(--brass);font-weight:700}
.gfcard tr:last-child td{border-bottom:0}
@media (prefers-reduced-motion:reduce){.gfslot,.gfpile{transition:none}}
/* your hand: a fan that fits 13 cards on a 320px phone */
.fhand{display:flex;justify-content:center;margin:16px -6px 0;padding:14px 0 6px;--cw:clamp(44px,13.4vw,58px)}
.fcard{position:relative;flex:0 1 auto;min-width:0;width:calc(var(--cw) * .98);margin-left:calc(min(0px, (100vw - 40px - var(--n) * var(--cw)) / max(1, var(--n) - 1)));padding:0;border:0;background:none;cursor:pointer;
  transition:transform .15s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.fcard:first-child{margin-left:0}
.fcard .card{width:var(--cw);box-shadow:-2px 0 4px rgba(0,0,0,.25),0 4px 10px rgba(0,0,0,.3)}
.fcard.ok{transform:translateY(-8px)}
.fcard.ok:active{transform:translateY(-14px)}
.fcard.no .card{filter:brightness(.62) saturate(.7)}
.fcard.on{transform:translateY(-18px)}.fcard.on .card{outline:2px solid var(--brass);outline-offset:1px}
.fcard.got .card{box-shadow:0 0 0 2px rgba(201,162,75,.8),0 4px 10px rgba(0,0,0,.3)}
@media (min-width:600px){.fcard{margin-left:calc(min(0px, (540px - var(--n) * var(--cw)) / max(1, var(--n) - 1)))}}
@media (prefers-reduced-motion:reduce){.fcard,.playhero,.fbid{transition:none}}
:root[data-motion="off"] .fcard,:root[data-motion="off"] .playhero{transition:none}
@media (max-height:700px){.fscore span{padding:4px}.fscore b{font-size:15px}.fprompt{margin-top:10px}.fhand{margin-top:8px}.fseat.w,.fseat.e{top:44%}}

/* ---- tables, second pass (flag tableV2 -> :root[data-tables="v2"]): a padded leather rail with
   stitching and a wood inner edge, a lamp pool on the felt, the layout printed like a real felt,
   and (Blackjack) the dealer's chip tray across the top, seen from your seat ---- */
:root[data-tables="v2"] .table,:root[data-tables="v2"] .ftable{
  border:11px solid transparent;
  background:radial-gradient(55% 42% at 50% 40%,rgba(255,232,178,.15),transparent 72%) padding-box,
    radial-gradient(rgba(255,255,255,.045) .9px,transparent 1.3px) 0 0/6px 6px padding-box,
    radial-gradient(120% 90% at 50% 18%,var(--felt1) 0%,var(--felt2) 58%,var(--felt3) 100%) padding-box,
    linear-gradient(180deg,#5c3b25 0%,#3a2416 30%,#24150c 70%,#170d07 100%) border-box;
  box-shadow:inset 0 0 0 1.5px #8a6038,inset 0 0 0 3px rgba(20,12,6,.55),inset 0 6px 14px rgba(0,0,0,.45),
    0 0 0 1px #0d0806,0 1px 0 1px rgba(255,220,170,.08),0 18px 32px -8px rgba(0,0,0,.55);
  outline:1px dashed rgba(214,176,112,.34);outline-offset:-6px}
:root[data-tables="v2"] .table::after,:root[data-tables="v2"] .ftable::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--grain);opacity:.1;mix-blend-mode:screen}
:root[data-tables="v2"] .ftable{outline-offset:-6px}
/* the Blackjack felt, printed: an insurance arc and a hairline where the betting line runs */
:root[data-tables="v2"] .table.bjfelt{padding-top:0}
:root[data-tables="v2"] .table.bjfelt .felt-print{color:#e3c98a;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.bjtray i{flex:1;border-radius:2px;background:repeating-linear-gradient(90deg,var(--c) 0 2.6px,rgba(0,0,0,.45) 2.6px 3.4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 2px rgba(0,0,0,.35)}
/* Play now, second pass: the game you'd sit down to, a real clay stack, and the felt's own printing */

:root[data-tables="v2"] .playhero{border:9px solid transparent;
  background:radial-gradient(70% 90% at 80% 20%,rgba(255,226,160,.26),transparent 62%) padding-box,radial-gradient(rgba(255,255,255,.05) .9px,transparent 1.3px) 0 0/6px 6px padding-box,
    radial-gradient(140% 130% at 75% 0%,var(--felt1),var(--felt2) 55%,var(--felt3)) padding-box,linear-gradient(180deg,var(--rm-hrail1),var(--rm-hrail2) 35%,var(--rm-hrail3)) border-box;
  outline:1px dashed rgba(214,176,112,.34);outline-offset:-5px}

/* ---- craps as a printed felt (flag tableV2) ---- */
.czfelt{position:relative;margin-top:14px;padding:8px;border:11px solid transparent;border-radius:22px;color:#efe3c4;
  background:radial-gradient(55% 40% at 50% 38%,rgba(255,232,178,.13),transparent 72%) padding-box,radial-gradient(rgba(255,255,255,.045) .9px,transparent 1.3px) 0 0/6px 6px padding-box,
    radial-gradient(120% 90% at 50% 18%,var(--felt1) 0%,var(--felt2) 58%,var(--felt3) 100%) padding-box,linear-gradient(180deg,#5c3b25 0%,#3a2416 30%,#24150c 70%,#170d07 100%) border-box;
  box-shadow:inset 0 0 0 1.5px #8a6038,inset 0 6px 14px rgba(0,0,0,.45),0 0 0 1px #0d0806,0 18px 32px -8px rgba(0,0,0,.55);outline:1px dashed rgba(214,176,112,.34);outline-offset:-6px}
.czrow{display:flex;gap:0;margin-top:-1.5px}.czrow:first-child{margin-top:0}
.czs{position:relative;flex:1 1 0;min-width:0;min-height:54px;margin-left:-1.5px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1.5px solid rgba(239,227,196,.62);background:transparent;color:inherit;font-family:var(--f-disp);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s ease}
.czs:first-child{margin-left:0}
.czs:active{background:rgba(255,240,200,.08)}
.czs b{font:700 15px/1.05 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;color:#f3e7c9;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.czs span{font:600 10.5px/1.2 var(--f-body);letter-spacing:.04em;color:rgba(239,227,196,.72)}
.czs.dim{opacity:.5}
.czs.has{background:radial-gradient(70% 90% at 50% 50%,rgba(231,200,115,.16),transparent 75%)}
.czbox{min-height:84px;padding:16px 4px 26px}
.czn{font-size:22px!important;letter-spacing:.06em!important}
.czplace .czs:nth-child(3) .czn,.czplace .czs:nth-child(5) .czn{font-size:14.5px!important;letter-spacing:.1em!important}
.czmid .czdc{flex:0 0 32%}.czdc b{font-size:11px;letter-spacing:.1em}
.czcome{font-size:30px!important;letter-spacing:.2em!important;color:#d9523f!important;font-style:italic;text-shadow:0 1px 0 rgba(0,0,0,.45)!important}
.czcomebox{min-height:70px}
.czfieldbox{min-height:78px}
.czfield{font-size:17px!important;letter-spacing:.3em!important;color:#f1c75c!important}
.czfnums{display:flex;gap:9px;align-items:center;margin-top:2px}
.czfnums i{font:700 15px var(--f-num);font-style:normal;color:#f3e7c9}
.czfnums i.dbl{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:1.5px solid rgba(241,199,92,.8);color:#f1c75c}
.czdp{min-height:48px}.czdp b{font-size:12.5px;letter-spacing:.14em}
.czpassbox{min-height:64px;border-radius:0 0 22px 22px/0 0 18px 18px}
.czpass{font-size:24px!important;letter-spacing:.34em!important}
.czpuck{position:absolute;top:3px;right:3px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#f4edd9;color:#15120e;font:800 9px var(--f-num);font-style:normal;letter-spacing:.04em;box-shadow:inset 0 0 0 2px #15120e,0 3px 5px rgba(0,0,0,.5)}
.czoff{position:absolute;top:-14px;right:6px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#15120e;color:#e9e2d0;font:800 9px var(--f-num);font-style:normal;box-shadow:inset 0 0 0 2px #e9e2d0,0 3px 5px rgba(0,0,0,.5)}
.czchip{position:absolute;right:4px;bottom:3px;display:flex;align-items:center;gap:3px;pointer-events:none}
.czchip svg{width:24px;height:24px;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.czchip em{font:700 10px var(--f-num);font-style:normal;color:#f3e7c9;background:rgba(0,0,0,.45);border-radius:99px;padding:1px 5px}
.czbox .czchip{right:50%;transform:translateX(50%);bottom:3px}.czbox .czchip em{display:none}
.czs .tg{position:absolute;left:4px;top:3px;font-size:9px}
.czcenter{margin-top:10px;padding:10px;border-radius:14px;border:1.5px solid rgba(217,82,63,.75);
  background:radial-gradient(rgba(255,255,255,.045) .9px,transparent 1.3px) 0 0/6px 6px,radial-gradient(120% 90% at 50% 20%,var(--felt1),var(--felt2) 60%,var(--felt3));box-shadow:0 0 0 4px #2b1d15,0 10px 20px -8px rgba(0,0,0,.5)}
.czctitle{font:700 10px var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:#d9523f;text-align:center;margin-bottom:2px}
.czcenter .zone{background:transparent;border-color:rgba(239,227,196,.5);border-radius:6px}
.czcenter .zone b{text-transform:uppercase;letter-spacing:.08em;font-size:.86em}

.czplst{margin-top:10px}.czplst .cz-meta span{display:block;margin-top:2px}
.czplpanel{margin-top:10px}.czplpanel h2{margin-bottom:6px}.czplpanel .vd{margin:8px auto 10px}
.czplopts{margin-top:10px}.czplkv{margin-top:8px}
.czplrun{display:flex;justify-content:space-between;gap:10px;margin:12px 0 0;padding-top:9px;border-top:1px dotted var(--line);font-size:12.5px;color:var(--muted)}.czplrun b{color:var(--ink);font-variant-numeric:tabular-nums}.czplrun b.pos{color:var(--win)}.czplrun b.neg{color:var(--lose)}
.czplfelt{margin-bottom:8px}.czplfelt .czbox{min-height:66px;padding:12px 4px 22px}.czplfelt .czcomebox{min-height:54px}.czplfelt .czfieldbox{min-height:66px}.czplfelt .czpassbox{min-height:54px}
.czplfelt .czs.czpl-off{cursor:default;pointer-events:none}
.czplfelt .czs.czpl-tgt{z-index:2;background:radial-gradient(80% 100% at 50% 50%,rgba(241,199,92,.28),rgba(241,199,92,.05) 80%);box-shadow:0 0 0 2px #f1c75c,0 0 18px rgba(241,199,92,.55);animation:czTgt 1.4s ease-in-out infinite}
@keyframes czTgt{0%,100%{box-shadow:0 0 0 2px #f1c75c,0 0 10px rgba(241,199,92,.35)}50%{box-shadow:0 0 0 2px #f1c75c,0 0 24px rgba(241,199,92,.8)}}
.czplfelt .czbox .czplchip{position:absolute;left:50%;right:auto;transform:translateX(-50%);bottom:3px}
.czplfelt .czbox .czplchip+.czplchip{bottom:auto;top:3px}
.czplfelt .czbox .czplchip em{display:inline-block;font-size:8.5px;padding:1px 4px}
.czplfelt .czplchip em{white-space:nowrap}
.czplctr .czs{border-color:rgba(217,82,63,.8)}.czplctr .czs b{color:#e2715f;font-size:13px}
.dice.czroll .die{animation:czTumble .75s cubic-bezier(.2,.75,.3,1) both}.dice.czroll .die+.die{animation-delay:.08s}
@keyframes czTumble{0%{transform:translate(-60px,-26px) rotate(-320deg) scale(.6);opacity:0}55%{transform:translate(6px,3px) rotate(18deg) scale(1.08);opacity:1}78%{transform:translate(-2px,0) rotate(-6deg)}100%{transform:none}}
.czplways{margin:10px 0 2px}.czplways svg{width:100%;height:auto;display:block}
.czplways rect{fill:rgba(255,255,255,.12)}.czplways rect.g{fill:#2f8f5d}.czplways rect.r{fill:#a8392c}
.czplways text{font:700 10px var(--f-num,sans-serif);text-anchor:middle;fill:var(--muted)}.czplways text.t{font-size:12px;fill:var(--ink)}.czplways text.t.g{fill:#6fe0a8}.czplways text.t.r{fill:#ff9d90}
.czplways p{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin:4px 2px 0}.czplways .g{color:#6fe0a8}.czplways .r{color:#ff9d90}
.czplhero h2{margin-top:6px}.czplhdice{display:flex;gap:6px}
@media (prefers-reduced-motion:reduce){.dice.czroll .die,.czplfelt .czs.czpl-tgt{animation:none}}
/* ---- printed lettering and betting spots on the other felts ---- */
:root[data-tables="v2"] .table .felt-print{letter-spacing:.14em;text-transform:uppercase;font-family:var(--f-disp);font-size:11px;color:#e3c98a;text-shadow:0 1px 0 rgba(0,0,0,.35)}
:root[data-tables="v2"] .table .ring{border:1.5px solid rgba(239,227,196,.6);box-shadow:inset 0 0 0 4px rgba(0,0,0,.08),inset 0 0 0 5px rgba(239,227,196,.28),inset 0 2px 6px rgba(0,0,0,.3)}
:root[data-tables="v2"] .table .spot{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:#efe3c4}
:root[data-tables="v2"] .table.bjfelt .bjbet{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(239,227,196,.55);box-shadow:inset 0 0 0 4px rgba(0,0,0,.1),inset 0 0 0 5px rgba(239,227,196,.22)}
:root[data-tables="v2"] .table.bjfelt .bjbet .ringchip{width:32px}
:root[data-tables="v2"] .ftrick::before{content:'';position:absolute;inset:-6% -14%;border-radius:50%;border:1px solid rgba(239,227,196,.22);pointer-events:none}
/* ---- Light appearance: the club by daylight -- ivory paper, brass, the same felt.
   Some surfaces stay dark on purpose, like a lacquered object on a light table: the felt, the welcome, the
   pin board, drill cards, covers and toasts. They re-declare the dark tokens so their text stays legible. ---- */

/* ===== DEPTH SYSTEM: glass surfaces, pressable keys, atmosphere ===== */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 38% at 50% -4%,rgba(255,232,180,.08),transparent 70%),
             radial-gradient(90% 55% at 100% 45%,rgba(201,162,75,.045),transparent 70%),
             radial-gradient(140% 70% at 50% 118%,rgba(0,0,0,.6),transparent 62%)}
.panel,.mod,.stat,.scard,.gtile,.plaque{border-color:transparent;position:relative}
.panel,.mod,.scard,.gtile{box-shadow:inset 0 1px 1px rgba(255,255,255,.13),inset 0 -8px 16px -10px rgba(0,0,0,.5),0 1px 1px rgba(0,0,0,.4),0 5px 10px -4px rgba(0,0,0,.45),0 14px 24px -12px rgba(0,0,0,.55)}
.panel::before,.mod::before,.stat::before,.scard::before,.gtile::before,.plaque::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 26%,rgba(255,255,255,.015) 52%,rgba(255,255,255,.07) 78%,rgba(255,255,255,.22) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
button.mod,.gtile{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s}
button.mod:active,.gtile:has(.gmain:active){transform:translateY(2px) scale(.985);box-shadow:inset 0 1px 1px rgba(255,255,255,.1),inset 0 -4px 10px -6px rgba(0,0,0,.5),0 1px 1px rgba(0,0,0,.4),0 2px 5px -2px rgba(0,0,0,.5)}
/* pressable keys */
.btn{position:relative;min-height:52px;border-radius:12px;border:1.5px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 55%),var(--panel);color:var(--ink);font-weight:700;padding:8px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;border-color:transparent;box-shadow:0 4px 0 rgba(0,0,0,.42),0 9px 14px -5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.05);transition:transform .09s ease,box-shadow .09s ease}
.btn.primary{border-color:var(--brass);color:var(--brass-ink);background:linear-gradient(180deg,#e2bc65,#c9a24b 60%,#b98f37);box-shadow:0 4px 0 #7d5f1f,0 10px 16px -4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.danger{color:var(--lose);border-color:transparent;box-shadow:0 4px 0 rgba(0,0,0,.42),0 9px 14px -5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1.5px rgba(255,154,140,.55)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.btn:active:not(:disabled):not(.ghost){transform:translateY(4px);box-shadow:0 0 0 rgba(0,0,0,.42),0 1px 3px rgba(0,0,0,.5),inset 0 3px 8px rgba(0,0,0,.4)}
.btn.primary:active:not(:disabled){box-shadow:0 0 0 #7d5f1f,0 1px 3px rgba(0,0,0,.5),inset 0 3px 8px rgba(80,55,10,.5)}
.btn:disabled{opacity:.42;box-shadow:none}
.chipbtn.play{aspect-ratio:auto;border-radius:16px;min-height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:linear-gradient(180deg,#e0b862,#c9a24b);color:var(--brass-ink);box-shadow:0 5px 0 #8a6d2c,0 12px 22px rgba(0,0,0,.3);transition:transform .09s ease,box-shadow .09s ease}
.chipbtn.play:active{transform:translateY(5px);box-shadow:0 0 0 #8a6d2c,0 2px 4px rgba(0,0,0,.4)!important}
.iconbtn{width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.4),0 8px 12px -4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);border-color:transparent;transition:transform .09s ease,box-shadow .09s ease}
.iconbtn:active{transform:translateY(3px);box-shadow:0 0 0 rgba(0,0,0,.4),inset 0 2px 6px rgba(0,0,0,.45)}
.tabbar button{transition:transform .1s ease}.tabbar button:active{transform:scale(.9) translateY(1px)}
/* type */
h2,h3,.hh,.who b{text-shadow:0 1px 0 rgba(0,0,0,.5),0 3px 12px rgba(0,0,0,.4)}
.stat b,.scard b,.kicker{text-shadow:0 1px 0 rgba(0,0,0,.4)}
/* bankroll: the centerpiece */
.plaque.bankroll::before{padding:1.3px;background:linear-gradient(135deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.15) 24%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.12) 76%,rgba(255,255,255,.45) 100%)}
.plaque.bankroll svg.lc .lcl{filter:drop-shadow(0 0 5px rgba(201,162,75,.65))}
.xpbar{overflow:hidden;margin-top:6px;height:12px;border-radius:99px;background:rgba(0,0,0,.5);box-shadow:inset 0 2px 4px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.08)}
.xpbar i{border-radius:99px;background:linear-gradient(180deg,#f0d88f,#c9a24b 60%,#a8842f);box-shadow:0 0 10px rgba(201,162,75,.5),inset 0 1px 0 rgba(255,255,255,.55)}
.avrow{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}.avrow::-webkit-scrollbar{display:none}
.avrow .avs{flex:none;text-align:center;font-size:.68em;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.avrow .avs.on{color:var(--brass)}.avrow .avs svg{display:block;margin:0 auto 2px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.5))}
.avrow .avs.locked svg{opacity:.55;filter:grayscale(.6) drop-shadow(0 3px 4px rgba(0,0,0,.4))}
@media (prefers-reduced-motion:reduce){.btn,.iconbtn,button.mod,.gtile,.tabbar button,.chipbtn.play{transition:none}}
:root[data-motion="off"] .btn,:root[data-motion="off"] .iconbtn,:root[data-motion="off"] button.mod{transition:none}
@media (prefers-reduced-transparency:reduce){.plaque.bankroll{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* fixes: keep the stretched bankroll inside its card, float the tab bar off the screen edge */
html,body{overflow-x:clip}

/* ===== TABLE CARDS: permanent glass tiles ===== */
.gtile{display:flex;flex-direction:column;border-radius:18px;border-color:transparent;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.035) 50%,rgba(255,255,255,.015) 100%),radial-gradient(120% 90% at 0% 0%,rgba(255,236,190,.10),transparent 60%),rgba(26,22,18,.7);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 0 -10px 20px -12px rgba(0,0,0,.6),0 1px 1px rgba(0,0,0,.45),0 8px 12px -4px rgba(0,0,0,.5),0 20px 32px -12px rgba(0,0,0,.65)}
.gtile.live{border-color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.02) 100%),radial-gradient(120% 100% at 0% 0%,rgba(255,232,170,.26),transparent 62%),linear-gradient(180deg,rgba(201,162,75,.22),rgba(201,162,75,.07)),rgba(26,22,18,.7);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.42),inset 0 -10px 20px -12px rgba(0,0,0,.6),0 1px 1px rgba(0,0,0,.45),0 8px 12px -4px rgba(0,0,0,.5),0 20px 32px -12px rgba(0,0,0,.65),0 14px 34px -14px rgba(201,162,75,.5)}
.gtile::after{content:'';position:absolute;top:0;left:-70%;width:36%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.2),transparent);transform:skewX(-18deg);pointer-events:none;z-index:1}
@media (prefers-reduced-motion:no-preference){:root:not([data-motion="off"]) .gtile.live::after{animation:heroSheen 6.5s ease-in-out infinite}}

.gmain b{font-size:.98em;text-shadow:0 1px 0 rgba(0,0,0,.5)}

.gcash{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;border:0;border-radius:99px;padding:5px 12px;font-size:.66em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--brass-ink);background:linear-gradient(180deg,#f0d88f,#c9a24b 62%,#a8842f);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 6px rgba(0,0,0,.4)}
.gcash:active{transform:translateX(-50%) translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}

/* ===== WELCOME: private club after dark, with depth ===== */

/* smoke: slow wisps rising through the lamp light, like a room someone just left */

/* the chip turns on a spring: it winds slowly round, nearly shows its back and is pulled home past the front, settling in two
   smaller swings; every other time the spring lets it go all the way round. The glint and its shadow keep step with it */

/* the doors: close enough to touch, a floor running up to them, the club's light round their edges */

.wn1{--h:#b39062;--b:#6f5330;--r:#2f210e}
.wn2{--h:#a88659;--b:#684d2b;--r:#2b1e0c}
.wn3{--h:#bd9a6b;--b:#775a35;--r:#33250f}
.wn4{--h:#a17f55;--b:#624828;--r:#291c0b}
.wn5{--h:#b18a5c;--b:#6c4f2c;--r:#2e200d}
.wn6{--h:#9c7c56;--b:#5d4529;--r:#281c0c}
.wn7{--h:#b6966c;--b:#735836;--r:#312410}
.wn8{--h:#a58762;--b:#664e30;--r:#2c200e}
/* as the doors swing, the nails catch the light and then fall dim */

/* leaving: the doors swing open away from you, the room steps forward and the club shows through */
/* heavy doors: a slow start, a long even swing, a soft stop; the light beyond floods in as they part */

/* padding-left matches the letter-spacing after the last letter, so FELT CLUB centres on its letters (the B no longer sits off to the left);
   the transparent stroke widens every letter a hair inside the gold, a touch bolder without a heavier cut */


/* ===== Home top + bankroll, tightened; larger tab pill, raised ===== */
.plaque.bankroll .kicker{text-align:left;font-size:10.5px;letter-spacing:.24em;opacity:.9}
.plaque.bankroll .big{font-size:34px;font-family:var(--f-hero);display:block;font-weight:700;white-space:nowrap;transform-origin:left center;color:transparent;background:linear-gradient(180deg,#fffaf0 0%,#f3dda0 42%,#c9a24b 100%);-webkit-background-clip:text;background-clip:text;margin-top:3px;line-height:1;letter-spacing:.01em;transform:scaleX(1.08);width:calc(100% / 1.08);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 5px 9px rgba(0,0,0,.45))}
.plaque.bankroll svg.lc{height:72px;margin-top:8px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.plaque.bankroll .edge{background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);opacity:1;margin:9px 0}
.plaque.bankroll .kv{padding:3px 0;font-size:.94em}
.tabbar{border-top:1px solid var(--line);position:fixed;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--glassline);box-shadow:0 12px 30px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.25),inset 0 -6px 12px -8px rgba(0,0,0,.5);left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 9px);border-radius:34px;padding:3px 4px}
.tabbar button{min-height:61px;font-size:11px}
.tabbar button .ti,.tabbar button svg{width:26px;height:26px}
.tabbar button[aria-current="page"]::after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:var(--brass);bottom:4px}
.hastabs.hasdock{padding-bottom:calc(196px + env(safe-area-inset-bottom,0px))}
.dock{position:fixed;left:0;right:0;bottom:0;margin:0;padding:10px 14px calc(64px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;z-index:6;padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.toast,.toaststack{bottom:calc(126px + env(safe-area-inset-bottom,0px))}

/* ===== Compaction pass: less dead space across screens ===== */
.thead{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:0 0 6px;margin-top:0}
.thead .tnav{padding:0 13px 0 9px;border-radius:19px;border:1px solid var(--glassline);background:linear-gradient(135deg,var(--glasshi),rgba(255,255,255,0) 60%),var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 0 rgba(0,0,0,.35);color:var(--ink);font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:transform .08s,box-shadow .08s;height:36px}
.bar{display:flex;align-items:center;gap:10px;min-height:40px;margin-bottom:4px}
.mods{display:grid;gap:10px;margin-top:8px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:10px 0}
.hh{letter-spacing:.01em;margin:16px 2px 7px}

.soon li{display:flex;border-bottom:1px dotted rgba(255,255,255,.16);align-items:baseline;padding:8px 0;gap:12px}
.scard{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 45%),var(--panel);border-radius:14px;min-width:0;padding:9px 10px}
.scard span{font-size:.7em;line-height:1.25}
.gmain{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);background:none;border:0;flex:1;position:relative;padding:10px 6px 10px;gap:2px}

/* ===== Tables, third pass: a padded leather rail with a brass bead, lamp-lit felt, a room around it ===== */
body:has(.thead){background:radial-gradient(85% 50% at 50% 26%,rgba(var(--rm-tlamp),.11),transparent 70%),radial-gradient(160% 70% at 50% 115%,rgba(0,0,0,.85),transparent 60%),linear-gradient(180deg,#0e0b09,#15100c 40%,#0b0806);background-attachment:fixed}
:root[data-tables="v2"] .table,:root[data-tables="v2"] .ftable,:root[data-tables="v2"] .czfelt{border:15px solid transparent;
  background:
    radial-gradient(62% 46% at 50% 30%,rgba(var(--rm-flamp),.2),rgba(var(--rm-flamp),.05) 55%,transparent 75%) padding-box,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .075 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>") 0 0/140px 140px padding-box,
    radial-gradient(135% 100% at 50% 22%,var(--felt1) 0%,var(--felt2) 55%,var(--felt3) 100%) padding-box,
    radial-gradient(90% 45% at 50% 0%,rgba(255,214,168,.28),transparent 70%) border-box,
    linear-gradient(180deg,var(--rm-rail1) 0%,var(--rm-rail2) 16%,var(--rm-rail3) 52%,var(--rm-rail4) 82%,var(--rm-rail5) 100%) border-box;}
:root[data-tables="v2"] .table .ring,:root[data-tables="v2"] .table.bjfelt .bjbet{border-color:rgba(232,207,146,.62);box-shadow:inset 0 0 0 4px rgba(0,0,0,.12),inset 0 0 0 5px rgba(232,207,146,.25),inset 0 3px 8px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06)}
.bjtray{display:flex;gap:2px;width:62%;max-width:250px;height:17px;margin:0 auto 10px;padding:3px 4px 4px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#0c0705,#2a190e);box-shadow:inset 0 3px 5px rgba(0,0,0,.85),0 1px 0 rgba(255,220,170,.14),0 0 0 1px #c29a4a55}

/* cards: glossy stock with a faint gilt edge; backs get a lattice and a gold frame */
.card:not(.back):not(.slot){background:radial-gradient(130% 90% at 25% 0%,rgba(255,255,255,.6),rgba(255,255,255,0) 55%),
    repeating-linear-gradient(112deg,rgba(120,98,60,.028) 0 1px,rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(22deg,rgba(120,98,60,.02) 0 1px,rgba(0,0,0,0) 1px 4px),
    linear-gradient(180deg,#fcf7ea 0%,#f3ead5 100%);box-shadow:inset 0 0 0 1px rgba(168,132,64,.3),inset 0 -2px 0 rgba(0,0,0,.05),0 1px 0 rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.3),0 12px 18px -8px rgba(0,0,0,.55)}
.card:not(.back):not(.slot)::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.38) 48%,rgba(255,255,255,0) 58%);opacity:.45;mix-blend-mode:soft-light}
:root .card.back,:root[data-back] .card.back{
  background:radial-gradient(circle at 50% 50%,transparent 0 17%,rgba(232,207,146,.7) 17.5% 19.5%,transparent 20%),
    radial-gradient(circle at 50% 50%,rgba(232,207,146,.28) 0 9%,transparent 9.5%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M5 0L10 5L5 10L0 5Z' fill='none' stroke='%23e8cf92' stroke-opacity='.32' stroke-width='.6'/><circle cx='5' cy='5' r='.8' fill='%23e8cf92' fill-opacity='.4'/></svg>") center/9px 9px,
    radial-gradient(130% 90% at 25% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),
    linear-gradient(160deg,var(--back1,#7c2237),var(--back2,#5a1827))}
.card.back::before{content:'';position:absolute;inset:calc(var(--cw)*.05);border:1px solid rgba(232,207,146,.6);border-radius:calc(var(--cw)*.06);pointer-events:none;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25)}

/* ===== Breathing room at the top of every screen ===== */
.wrap{max-width:580px;margin:0 auto;padding:14px 17px 30px;padding-top:22px}
.wrap:has(.thead){padding-top:18px}

/* ===== Home: avatar and name share one centre line ===== */
.who{display:flex;min-width:0;align-items:center;gap:13px}
.who .pinsvg{display:block;flex:none}
.hubtools{display:flex;align-items:center;gap:10px}

/* ===== Primary keys: oxblood lacquer set in a brass bezel, lit from the lamp above =====
   Drawn from the chip stack and the mahogany rail: deep red lacquer, brass edge, ivory type. */
.btn.primary > span{font-family:var(--f-disp);font-weight:600;font-size:1.08em;letter-spacing:.03em}
.btn.primary:disabled{opacity:.5;box-shadow:none}

/* "Take a seat" pill on the Play hero, same lacquer */

/* glare: a slow lamp reflection passes over primary keys now and then */
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) .btn.primary:not(:disabled){animation:lacquerGlare 7s ease-in-out 1.2s infinite}
}
@keyframes lacquerGlare{
  0%,70%{background-position:120% 0,0 0,0 0,0 0,0 0}
  100%{background-position:-20% 0,0 0,0 0,0 0,0 0}}

/* ===== Home: greeting back, in the Bankroll label's voice ===== */
.who > div{display:flex;min-height:52px;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
.who small.hi{font:700 10.5px/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--brass);opacity:.9;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.who b{font-size:1.5em;line-height:1;padding-top:0}

/* ===== Tables: the button's lacquer-and-brass logic, carried to the rail =====
   No texture on the felt, no stitching. Mahogany lacquer rail, brass bezel inside and out,
   a solid brass inlay line on the felt, a lamp pool from above, and a slow glare across the rail. */
/* the brass inlay drawn on the felt, solid, following the table's curve */
/* grain replaced by the lamp's glare, sweeping the lacquer now and then */
.table::after,:root[data-tables="v2"] .table::after,:root[data-tables="v2"] .ftable::after,:root[data-tables="v2"] .czfelt::after{
  content:'';position:absolute;inset:-15px;border-radius:inherit;pointer-events:none;opacity:1;mix-blend-mode:normal;z-index:3;
  background:linear-gradient(112deg,rgba(255,236,200,0) 44%,rgba(255,236,200,.09) 50%,rgba(255,236,200,0) 56%) 130% 0/280% 100% no-repeat}
:root[data-tables="v2"] .czfelt::after{inset:-11px}
/* home Play-now panel shares the rail, one bezel lighter */

/* ===== Primary keys, revised: muted bronze-gold, same bezel, inlay and glare ===== */
.btn.primary.pick::after{box-shadow:0 2px 4px rgba(0,0,0,.5);background:#2a1a08;color:#e2c585}

/* ===== Primary keys: emblem gold face in a bronze frame ===== */
.btn.primary{border:1.5px solid transparent;
  color:#2a1804;text-shadow:0 1px 0 rgba(255,246,216,.45);
  background:
    linear-gradient(115deg,rgba(255,250,235,0) 42%,rgba(255,250,235,.45) 50%,rgba(255,250,235,0) 58%) padding-box,
    radial-gradient(75% 95% at 50% -30%,rgba(255,246,216,.55),rgba(255,246,216,0) 70%) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 47%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%) padding-box,
    linear-gradient(180deg,#f7e3a6 0%,#eecb70 34%,#cf9f45 70%,#b3812e 100%) padding-box,
    linear-gradient(180deg,#d7b574 0%,#a07a3f 40%,#6e4f22 80%,#553b16 100%) border-box;
  background-size:260% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
  box-shadow:0 4px 0 #5a3e14,0 11px 18px -6px rgba(0,0,0,.72),0 0 24px -10px rgba(238,203,112,.5),inset 0 1px 0 rgba(255,250,232,.6),inset 0 -4px 8px -2px rgba(128,87,24,.35)}
.btn.primary::before{content:'';position:absolute;inset:4px;border-radius:calc(12px - 5px);border:1px solid rgba(240,212,148,.3);pointer-events:none;border-color:rgba(128,87,24,.45);box-shadow:0 1px 0 rgba(255,246,216,.35)}
.btn.primary small{font-weight:600;color:rgba(58,36,8,.78)}
.btn.primary:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 #5a3e14,0 2px 4px rgba(0,0,0,.55),inset 0 3px 9px rgba(90,58,14,.5)}

/* the welcome's key: the same key in the crest's brass, the bronze of the title and the glass spade */

/* ===== Small gold labels take the emblem's brighter gold ===== */
.kicker,.plaque.bankroll .kicker,.who small.hi,.thead .tmid small{color:#eecb70}
.plaque.bankroll .kicker,.who small.hi{opacity:1}

/* ===== Bankroll: no card, sits on the room itself ===== */

/* ===== Welcome, third pass: one screen, no scroll. Crest and name up top, a member's card, the door at the bottom ===== */

/* the member's card: lacquer, a bronze rim, an inlay line, like the keys */

/* the member's name in the tagline's italic, as it reads under the title */

/* the door */

/* the Card Room and Multiplayer: the same key as the welcome's, in clear glass with a brass hairline inside the edge */

/* ===== Tables, fourth pass: real felt with nap and depth; espresso leather rail with a brass bead ===== */
:root[data-tables="v2"] .table,:root[data-tables="v2"] .ftable,:root[data-tables="v2"] .czfelt,:root[data-tables="v2"] .playhero{border-color:transparent;outline:0;
  background:
    radial-gradient(58% 40% at 50% 26%,rgba(255,226,168,.22),rgba(255,226,168,.07) 50%,rgba(255,226,168,0) 76%) padding-box,
    radial-gradient(120% 95% at 50% 36%,rgba(0,0,0,0) 48%,rgba(0,0,0,.3) 78%,rgba(0,0,0,.62) 100%) padding-box,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.95 .7' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.34 0 0 0 -.12'/></filter><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8 1.05' numOctaves='3' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.4 0 0 .23'/></filter><rect width='180' height='180' filter='url(%23g)'/><rect width='180' height='180' filter='url(%23f)'/></svg>") 0 0/180px 180px padding-box,
    radial-gradient(140% 105% at 50% 24%,var(--felt1) 0%,var(--felt2) 55%,var(--felt3) 100%) padding-box,
    radial-gradient(70% 22% at 50% 0%,rgba(255,228,190,.34),rgba(255,228,190,0) 75%) border-box,
    linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 6%,rgba(0,0,0,0) 88%,rgba(0,0,0,.4) 100%) border-box,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.7 0 0 .42'/></filter><rect width='120' height='120' filter='url(%23l)'/></svg>") 0 0/120px 120px border-box,
    linear-gradient(180deg,#3b2c22 0%,#2a1e17 22%,#1b130e 60%,#0f0a07 100%) border-box;
  box-shadow:
    inset 0 0 0 1px #080504,inset 0 0 0 2px #b8914a,inset 0 0 0 3px #3a2812,
    inset 0 16px 20px -8px rgba(0,0,0,.72),inset 0 -8px 16px -8px rgba(0,0,0,.5),inset 10px 0 16px -10px rgba(0,0,0,.5),inset -10px 0 16px -10px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(0,0,0,0),
    0 0 0 1px #060403,0 -1px 0 1px rgba(255,232,196,.09),0 4px 0 1px #050302,0 24px 36px -12px rgba(0,0,0,.85),0 48px 80px -34px rgba(0,0,0,.95)}
/* the printed inlay reads as ink on cloth, not a line on glass */
:root[data-tables="v2"] .table::before,:root[data-tables="v2"] .ftable::before,:root[data-tables="v2"] .czfelt::before{content:'';position:absolute;inset:7px;border-radius:inherit;border:1px solid rgba(232,207,146,.28);pointer-events:none;z-index:0;border-color:rgba(226,200,140,.2);box-shadow:none}
:root[data-tables="v2"] .table .felt-print,:root[data-tables="v2"] .table.bjfelt .felt-print{color:#dcc488;opacity:.82;text-shadow:0 1px 1px rgba(0,0,0,.4)}
:root[data-tables="v2"] .playhero{box-shadow:inset 0 0 0 1px #080504,inset 0 0 0 2px #b8914a,inset 0 0 0 3px #3a2812,inset 0 12px 16px -8px rgba(0,0,0,.65),inset 0 0 40px rgba(0,0,0,.3),0 0 0 1px #060403,0 4px 0 1px #050302,0 18px 30px -10px rgba(0,0,0,.65)}
:root[data-tables="v2"] .playhero:active{box-shadow:inset 0 0 0 1px #080504,inset 0 0 0 2px #b8914a,inset 0 0 0 3px #3a2812,inset 0 12px 16px -8px rgba(0,0,0,.65),0 0 0 1px #060403,0 0 0 1px #050302,0 6px 12px -6px rgba(0,0,0,.6)}
/* Card Room door in the same espresso leather */
/* Level + XP sized to the Bankroll label */
.plaque.bankroll .xpbar{height:5px;margin:4px 0 1px!important}

/* ===== Tables, fifth pass: a stuffed leather rail you could rest your arms on =====
   The rail is drawn by ::after as a ring that follows the table's own curve (masked to the rail only),
   so its shading bends round the corners and the long bottom arc: a lamp catch-light on the outer lip,
   a raised crown, and a dark roll where the leather tucks under a two-step brass bead into the felt. */
:root[data-tables="v2"] .table,:root[data-tables="v2"] .ftable,:root[data-tables="v2"] .czfelt{--rw:21px}
:root[data-tables="v2"] .czfelt{--rw:18px}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) .table::after,:root:not([data-motion="off"]) .ftable::after,:root:not([data-motion="off"]) .czfelt::after{animation:railGlare2 14s ease-in-out 2s infinite}
}
@keyframes railGlare2{0%,78%{background-position:130% 0,0 0,0 0,0 0}100%{background-position:-30% 0,0 0,0 0,0 0}}
:root[data-tables="v2"] .table{border-radius:36px 36px 120px 120px / 36px 36px 60px 60px}
:root[data-tables="v2"] .ftable{border-radius:38px}
/* the tray sits into the rail, not on top of the felt */
:root[data-tables="v2"] .bjtray{margin-top:0;border-radius:0 0 11px 11px;background:linear-gradient(180deg,#070403,#1c120b 70%,#26190f);
  box-shadow:inset 0 4px 6px rgba(0,0,0,.9),inset 0 -1px 0 rgba(255,220,170,.1),0 0 0 1px #0b0604,0 0 0 2px #b8914a,0 0 0 3px #2a1a09,0 3px 6px rgba(0,0,0,.5)}

/* ===== Club-wide polish: one voice for every room ===== */
/* page titles: display serif with a brass rule, matching Home and the Daily header */
#view>.bar{position:relative;min-height:0;margin:6px 2px 14px;padding-bottom:12px}
#view>.bar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(214,176,104,.75),rgba(214,176,104,.28) 45%,rgba(214,176,104,0))}
#view>.bar::before{content:'';position:absolute;left:0;bottom:-3px;width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(135deg,#f3dc9a,#b8914a);box-shadow:0 0 6px rgba(238,203,112,.45)}
#view>.bar .ttl b{font-family:var(--f-hero,var(--f-disp));font-weight:700;font-size:30px;line-height:1.05;letter-spacing:.005em;color:transparent;
  background:linear-gradient(180deg,#fffaf0 0%,#f3e3bb 55%,#d7b56c 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 4px 10px rgba(0,0,0,.45))}
#view>.bar .ttl span{display:block;margin-top:5px;font:700 10.5px/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#d0aa68}
/* Learn: title first, then the game switch, then the sections */

/* the Tables page already says what it is */
#view>.bar+.hh{margin-top:4px;font-size:12px;font-family:var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#bfa98a;text-shadow:none}

/* segmented switches: a recessed well; the chosen key is a lit tab of felt set in brass */
.seg{border:1px solid var(--line);position:relative;display:flex;flex-wrap:wrap;border-color:transparent;padding:4px;gap:2px;border-radius:14px;
  background:linear-gradient(180deg,#0b0907,#15110d);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.6),0 1px 0 rgba(255,236,200,.07)}
.seg+.seg{margin-top:8px}
.seg button{position:relative;z-index:1;white-space:nowrap;min-height:38px;border-radius:10px;font-weight:700;font-size:.84em;letter-spacing:.02em;color:#a3977f;transition:color .18s ease,transform .09s ease}
.seg button:active{transform:translateY(1px)}
.seg button[aria-pressed="true"]{color:#f6ecd2;text-shadow:0 1px 1px rgba(0,0,0,.55)}

/* cards: one bezel for all of them; the wallet plaque loses its stray inner frame */
.plaque{padding:16px;margin-top:10px;border-radius:18px;background:radial-gradient(90% 70% at 20% 0%,rgba(255,226,170,.09),rgba(255,226,170,0) 70%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 50%),var(--panel);
  box-shadow:inset 0 0 0 1px rgba(214,176,104,.42),inset 0 1px 0 1px rgba(255,236,200,.08),inset 0 -10px 20px -12px rgba(0,0,0,.55),0 1px 1px rgba(0,0,0,.45),0 8px 14px -6px rgba(0,0,0,.5),0 20px 30px -14px rgba(0,0,0,.6)}
.panel{background:radial-gradient(rgba(255,255,255,.02) .9px,transparent 1.3px) 0 0/6px 6px,linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 45%),var(--panel);margin-top:10px;padding:13px 14px;border-radius:18px}
.panel h2{margin-top:0;font-size:1.2em;letter-spacing:.005em;margin-bottom:6px}
.panel>h2:first-child::after{content:'';display:block;width:34px;height:2px;margin-top:7px;border-radius:2px;background:linear-gradient(90deg,#e0bf74,rgba(224,191,116,0))}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:.95em;border-bottom:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1) 12%,rgba(255,255,255,.1) 88%,rgba(255,255,255,0)) bottom/100% 1px no-repeat}
.kv:last-child{background:none}
.note,p.note{color:#9d927d}

/* switches: a brass-lined slot with an ivory knob */
.switch i{width:44px;height:26px;background:linear-gradient(180deg,#0c0907,#1c1712);box-shadow:inset 0 2px 4px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06),0 1px 0 rgba(255,236,200,.07)}
.switch i::after{content:'';position:absolute;border-radius:50%;top:3px;left:3px;width:20px;height:20px;background:radial-gradient(70% 70% at 40% 30%,#fffdf6,#e9dfc6 60%,#bfb296);box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 -1px 1px rgba(0,0,0,.2)}
.switch[aria-checked="true"] i{background:linear-gradient(180deg,#8a6a2c,#d1ab5c);box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,230,170,.35),0 0 10px -2px rgba(238,203,112,.45)}
.switch[aria-checked="true"] i::after{transform:translateX(18px)}
/* steppers: raised keys that press down */
.stepper button{width:40px;height:40px;border:0;border-radius:12px;color:#efe3c4;background:linear-gradient(180deg,#2e2720,#1b1612);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(214,176,104,.25),0 3px 0 #070504,0 6px 10px -4px rgba(0,0,0,.6);transition:transform .08s ease,box-shadow .08s ease}
.stepper button:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(214,176,104,.25),0 0 0 #070504}
.stepper b{min-width:62px;font-family:var(--f-num);font-size:1.02em;color:#f3e6c4}
.row .lb b{letter-spacing:.005em}
textarea,input[type="text"],input:not([type]){border-radius:12px!important;background:linear-gradient(180deg,#0e0b09,#17130f)!important;box-shadow:inset 0 2px 5px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.06)!important;border:0!important;color:#efe6d0}

/* strategy chart: lacquered tiles in the club's own colours */
.chart .c{aspect-ratio:1.05;border:0;display:grid;place-items:center;font-weight:800;padding:0;color:#fff;border-radius:5px;font-size:11px;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.45);text-shadow:0 1px 0 rgba(0,0,0,.35)}
.chart .c.S{background:linear-gradient(180deg,#3b8e6b,#23654a)}
.chart .c.H{background:linear-gradient(180deg,#e3be6f,#b88c3a);color:#2a1a05;text-shadow:0 1px 0 rgba(255,236,190,.4)}
.chart .c.R{background:linear-gradient(180deg,#8e969c,#626a70)}
.chart .c.sel{position:relative;z-index:2;outline:2px solid #f6e7bf;outline-offset:1px;box-shadow:0 0 0 4px rgba(238,203,112,.3),0 4px 10px rgba(0,0,0,.6)}
.chart .ch,.chart .cl{color:#cdb88c}

/* tables tiles: the 'open a table' tag reads as an invitation, not a disabled pill */

/* Daily: your live hand gets a lamp on it, not a box; the rules note becomes a felt caption */
.bjh{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 8px 6px;border-radius:14px;border:1.5px solid transparent;transition:background .25s ease,box-shadow .25s ease}
.bjh.act{border-color:transparent;background:radial-gradient(75% 70% at 50% 45%,rgba(255,228,170,.13),rgba(255,228,170,0) 75%);
  box-shadow:inset 0 0 0 1px rgba(232,207,146,.28),0 0 22px -6px rgba(238,203,112,.35)}
p.mut.dnote::before{content:'';display:block;width:7px;height:7px;margin:0 auto 9px;transform:rotate(45deg);background:linear-gradient(135deg,#e7c77f,#9c7738);opacity:.8}
p.mut.dnote{margin:14px 8px 0;text-align:center;font-size:12.5px;line-height:1.5;color:#9a8f7a;font-style:italic;display:block}
/* Collection pinboard: the same bead and lip as the tables */
.pinboard{padding:14px 10px 12px;margin-top:12px;background:var(--grain),radial-gradient(120% 90% at 50% 0%,var(--felt1),var(--felt2) 62%,var(--felt3));background-blend-mode:soft-light,normal;border:0;border-radius:18px;box-shadow:inset 0 0 0 1px #050302,inset 0 .5px 0 2px #fff0c2,inset 0 0 0 2.5px #e6c678,inset 0 0 0 3.5px #b08840,inset 0 0 0 4.5px #1c1107,inset 0 14px 20px -10px rgba(0,0,0,.6),inset 0 0 40px rgba(0,0,0,.3),0 4px 0 #050302,0 18px 28px -12px rgba(0,0,0,.75)}
/* light theme keeps its own ink */

/* ===== Pass seven (research-led): stitch, felt printing, chart patterns, restraint ===== */
/* one stitch line along the rail, following its curve, the way a real upholstered armrest is sewn */
/* Blackjack felt: the insurance ribbon printed flat in one ivory ink, like silk-screen */
:root[data-tables="v2"] .table.bjfelt::before{border:0}
:root[data-tables="v2"] .table.bjfelt .felt-print{letter-spacing:.14em;text-transform:uppercase;font-family:var(--f-disp);font-size:11.5px;position:relative;z-index:1}
/* strategy chart: a second cue besides colour, so every action reads for colour-blind players too */
.chart .c.D{background:linear-gradient(180deg,#4c7fb4,#2e5987);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 2px,rgba(255,255,255,0) 2px 6px),linear-gradient(180deg,#4c7fb4,#2e5987)}
.chart .c.P{background:linear-gradient(180deg,#8d63b2,#62417f);background-image:radial-gradient(rgba(255,255,255,.16) 1px,rgba(255,255,255,0) 1.6px),linear-gradient(180deg,#8d63b2,#62417f);background-size:5px 5px,100% 100%}
/* tabs: the lit tab gets a short brass bar over its icon, the rest stay dim ivory */
.tabbar button{gap:3px;position:relative}
.tabbar button[aria-current="page"]::before{content:'';position:absolute;top:5px;left:50%;width:18px;height:2px;margin-left:-9px;border-radius:2px;background:linear-gradient(90deg,#f1d99a,#c9a45c);box-shadow:0 0 8px rgba(238,203,112,.55)}
/* numbers never jitter */
.big,.plaque .big,.bjt,.stepper b{font-variant-numeric:lining-nums tabular-nums}
/* one-shot glare on a win instead of ambient shine */
@keyframes winGlint{0%{opacity:0;transform:translateX(-120%) skewX(-18deg)}25%{opacity:1}100%{opacity:0;transform:translateX(320%) skewX(-18deg)}}
.bjh .bjout.w{position:relative;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) .bjh .bjout.w::after{content:'';position:absolute;inset:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,244,214,.55),transparent);animation:winGlint 1s ease-out .2s 1 both;pointer-events:none}
}
/* keys press on iPhone too (paired with a touchstart listener) */
button,.btn,[data-act]{-webkit-tap-highlight-color:transparent}

/* ===== Pass eight: Learn, Locker, Settings, table setup ===== */
/* headline figures (house edge, cost per 100) set like engraved plaques */
.stat{border:0;border-radius:14px;padding:11px 12px 10px;background:linear-gradient(180deg,#0f0c0a,#1a1511);box-shadow:inset 0 2px 5px rgba(0,0,0,.7),inset 0 0 0 1px rgba(214,176,104,.18),0 1px 0 rgba(255,236,200,.06)}
.stat::before{display:none}
.stat b{font-family:var(--f-hero,var(--f-disp));font-size:24px;font-weight:700;color:transparent;background:linear-gradient(180deg,#fffaf0,#f0d99a 55%,#c9a24b);-webkit-background-clip:text;background-clip:text}
.stat span{display:block;margin-top:3px;font:700 9.5px/1.35 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#a99a7c}
/* preset rule chips: brass-edged tabs that press */
.pill{font-size:13px;display:inline-flex;align-items:center;gap:6px;border:0!important;border-radius:99px;padding:8px 14px;min-height:36px;font-weight:700;color:#ecdcb4;background:linear-gradient(180deg,#2c241c,#1a1511);
  box-shadow:inset 0 1px 0 rgba(255,236,200,.14),inset 0 0 0 1px rgba(214,176,104,.4),0 2px 0 #070504,0 5px 8px -4px rgba(0,0,0,.6);transition:transform .08s ease,box-shadow .08s ease}
.pill:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,236,200,.1),inset 0 0 0 1px rgba(214,176,104,.4),0 0 0 #070504}
/* Basics: each term gets a brass tick */
.panel .kv>span>b{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-disp);font-size:1.02em;color:#f1e4c2}
.panel .kv>span>b::before{content:'';width:6px;height:6px;transform:rotate(45deg);background:linear-gradient(135deg,#f1d99a,#9c7738);flex:none}
/* Drill: a proper start card */
.drillhero{padding-top:16px;background:radial-gradient(80% 60% at 100% 0%,rgba(40,120,86,.22),rgba(40,120,86,0) 70%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 50%),var(--panel)}
.drillhero .actions{margin-top:14px!important}
.dsteps{list-style:none;margin:16px 0 2px;padding:0;display:grid;gap:10px}
.dsteps li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.4;color:#d9ccb0}
.dsteps b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:700 12px/1 var(--f-num);color:#241606;background:radial-gradient(70% 70% at 40% 30%,#f7e2a6,#c9a24b 60%,#8a6a2c);box-shadow:0 2px 0 #3a2812,0 4px 8px -2px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.5)}
/* Locker: a live look at your table above the swatches */
.wlook{margin-top:12px}
.wpfelt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:118px;padding:26px 18px 16px;border-radius:22px;
  background:radial-gradient(70% 70% at 45% 25%,rgba(255,226,168,.2),rgba(255,226,168,0) 70%),radial-gradient(140% 110% at 50% 20%,var(--felt1),var(--felt2) 55%,var(--felt3));
  box-shadow:inset 0 0 0 1px #050302,inset 0 .5px 0 2px #fff0c2,inset 0 0 0 2.5px #e6c678,inset 0 0 0 3.5px #b08840,inset 0 0 0 4.5px #1c1107,inset 0 14px 18px -8px rgba(0,0,0,.6),
    0 0 0 9px #1a120c,0 0 0 10px #050302,0 -1px 0 10px rgba(255,232,196,.12),0 4px 0 10px #030201,0 22px 30px -8px rgba(0,0,0,.8);margin:10px 10px 20px}
.wpfelt small{position:absolute;top:9px;left:0;right:0;text-align:center;font:700 9.5px/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:rgba(237,227,207,.6)}
.wpcards{display:flex}
.wpcards .card{margin-right:-4px;transform:rotate(-6deg)}
.wpcards .card:nth-child(2){transform:rotate(0deg) translateY(-3px)}
.wpcards .card:nth-child(3){transform:rotate(7deg);margin-right:0}
.wpchips{display:flex;flex-direction:column-reverse;align-items:center}
.wpchips .ringchip{display:block;width:46px;margin-top:-34px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.wpchips .ringchip:last-child{margin-top:0}
.wpchips svg{display:block;width:100%;height:auto}
.wtile:not(.lock):active{transform:translateY(2px)}
.wtile.on{border-color:var(--brass);background:radial-gradient(90% 80% at 50% 0%,rgba(238,203,112,.18),rgba(238,203,112,0) 70%),linear-gradient(180deg,#2a2219,#1a1511);box-shadow:inset 0 0 0 1.5px rgba(226,196,126,.8),inset 0 1px 0 1.5px rgba(255,240,200,.2),0 3px 0 #070504,0 0 18px -4px rgba(238,203,112,.4)}
.wtile.on span{color:#eecb70;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:10px}
.wtile.lock{cursor:not-allowed;opacity:1}
.wtile.lock i{filter:grayscale(.85) brightness(.55)}
.wtile.lock b{color:#8f8470}
.wtile.lock span::before{content:'';display:inline-block;width:8px;height:9px;margin-right:4px;vertical-align:-1px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9'><path d='M2 4V2.8a2 2 0 0 1 4 0V4' fill='none' stroke='%23a08c64' stroke-width='1.2'/><rect x='.5' y='4' width='7' height='5' rx='1' fill='%23a08c64'/></svg>") center/contain no-repeat}
/* Settings: groups fold, only one open to start */
.panel.fold>h2{cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin-bottom:0;-webkit-user-select:none;user-select:none}
.panel.fold>h2::after{content:'';display:block;width:9px;height:9px;margin:0 4px 0 0;border-right:2px solid #d0aa68;border-bottom:2px solid #d0aa68;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;background:none;border-radius:1px}
.panel.fold.shut>h2::after{transform:rotate(-45deg)}
.panel.fold.shut>:not(h2){display:none}
.panel.fold:not(.shut)>h2{margin-bottom:8px}
.panel.fold.shut{padding-top:15px;padding-bottom:15px}

/* ===== The Host: a single lit tip ===== */
.host{position:fixed;inset:0;z-index:9000;animation:hostIn .25s ease both}
.host.out{animation:hostOut .2s ease both}
@keyframes hostIn{from{opacity:0}to{opacity:1}}@keyframes hostOut{to{opacity:0}}
.hring{position:fixed;border-radius:24px;pointer-events:none;box-shadow:0 0 0 9999px rgba(6,4,3,.7),inset 0 0 0 1.5px #e6c678,0 0 0 1.5px rgba(230,198,120,.35),0 0 30px 4px rgba(238,203,112,.28)}
@media (prefers-reduced-motion:no-preference){:root:not([data-motion="off"]) .hring{animation:hostPulse 2.4s ease-in-out infinite}}
@keyframes hostPulse{50%{box-shadow:0 0 0 9999px rgba(6,4,3,.7),inset 0 0 0 1.5px #f3dc9a,0 0 0 4px rgba(230,198,120,.18),0 0 38px 8px rgba(238,203,112,.35)}}
.hcard{position:fixed;left:16px;right:16px;max-width:420px;margin:0 auto;padding:16px 16px 12px;border-radius:20px;color:#efe6d0;
  background:radial-gradient(90% 70% at 15% 0%,rgba(255,226,170,.14),rgba(255,226,170,0) 70%),linear-gradient(180deg,#261e17,#15110d);
  box-shadow:inset 0 0 0 1px rgba(214,176,104,.5),inset 0 1px 0 1px rgba(255,236,200,.1),0 24px 50px -10px rgba(0,0,0,.9),0 4px 0 #050302;animation:hostCard .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes hostCard{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.host,.hcard,.hring{animation:none!important}}
.hwho{display:flex;align-items:center;gap:12px}
.hmono{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font:700 20px/1 var(--f-hero,Georgia),Georgia,serif;color:#2a1a06;
  background:radial-gradient(70% 70% at 38% 30%,#fbe8b0,#c9a24b 62%,#7c5a24);box-shadow:0 0 0 2px #1a1108,0 0 0 3px rgba(230,198,120,.55),0 4px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.hmono.lou{color:#f4d68a;text-shadow:0 1px 0 rgba(50,32,4,.85),0 0 8px rgba(244,214,138,.35);background:radial-gradient(80% 70% at 34% 24%,rgba(255,255,255,.5),rgba(255,255,255,.12) 42%,rgba(255,255,255,.03) 70%),linear-gradient(180deg,rgba(232,220,192,.34),rgba(110,94,70,.34));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,232,180,.5),inset 0 1px 1px rgba(255,255,255,.75),inset 0 -3px 6px rgba(40,26,8,.35),0 4px 10px rgba(0,0,0,.55)}
.hwho small{display:block;font:700 9.5px/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:#d0aa68;margin-bottom:5px}
.hwho b{display:block;font-family:var(--f-hero,var(--f-disp));font-size:19px;line-height:1.15;color:#f6ecd2}
.hcard p{margin:10px 0 12px;font-size:14px;line-height:1.45;color:#d8ccb0}
.hcard p b{color:#f1d99a}
.hfoot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hskip{border:0;background:none;color:#9d917a;font:700 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;min-height:40px;padding:0 4px;cursor:pointer}
.hok{border:0;min-height:40px;padding:0 20px;border-radius:12px;font:700 14px/1 var(--f-body);color:#241606;cursor:pointer;
  background:linear-gradient(180deg,#f1d99a,#c9a45c 55%,#9c7a3c);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 #5e4520,0 6px 12px -4px rgba(0,0,0,.6);transition:transform .08s ease,box-shadow .08s ease}
.hok:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 #5e4520}
html.hostlock,html.hostlock body{overflow:hidden;overscroll-behavior:none}
.host{touch-action:none}
.hok.nudge{animation:hostNudge .42s ease}
@keyframes hostNudge{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.hok.nudge{animation:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 #5e4520,0 0 0 3px rgba(241,217,154,.55)}}

/* ===== Pass ten: the Learn library, game pages, chip tiles and the $1,000 chip ===== */
.glos .lhlist{gap:6px}.glos .tkdyk{margin:0}
.lhlist{display:grid;gap:10px}
.lhrow{display:flex;align-items:center;gap:13px;width:100%;padding:12px 14px 12px 12px;border:0;border-radius:18px;text-align:left;color:#efe6d0;cursor:pointer;font:inherit;
  background:radial-gradient(90% 80% at 0% 0%,rgba(255,226,170,.08),rgba(255,226,170,0) 60%),linear-gradient(180deg,#241d17,#18130f);
  box-shadow:inset 0 1px 0 rgba(255,236,200,.1),inset 0 0 0 1px rgba(214,176,104,.2),0 3px 0 #070504,0 10px 16px -8px rgba(0,0,0,.65);transition:transform .08s ease,box-shadow .08s ease}
.lhrow:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,236,200,.08),inset 0 0 0 1px rgba(214,176,104,.2),0 0 0 #070504}
.lhrow.soon{background:linear-gradient(180deg,#1d1814,#151210)}
.lhico{position:relative;flex:none;width:48px;height:48px;display:grid;place-items:center}

.lhico i{font-style:normal;font-size:22px;line-height:1;color:#efe3c4;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.lhico i.red{color:#c9695f}
.lhtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lhtx b{font-family:var(--f-disp);font-size:16.5px;color:#f3e6c4}
.lhtx span{font-size:12.5px;line-height:1.35;color:#b3a78e}
.lhtx em{font-style:normal;font:700 9.5px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#c9a45c}
.lhrow .go{color:#d0aa68;font-size:22px}
.lhsecs::-webkit-scrollbar{display:none}
.lhsecs button{flex:none;display:inline-flex;align-items:center;border:0;border-radius:99px;font:700 12.5px/1 var(--f-body);color:#b9ac90;cursor:pointer;
  background:linear-gradient(180deg,#221c16,#17130f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 2px 0 #070504}
.lhsecs button i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 10px/1 var(--f-num);color:#d0aa68;box-shadow:inset 0 0 0 1px rgba(208,170,104,.45)}
.lhsecs button[aria-current]{color:#f6ecd2;background:radial-gradient(120% 140% at 50% 0%,var(--felt1),var(--felt2) 60%,var(--felt3));box-shadow:inset 0 0 0 1px rgba(232,200,128,.6),inset 0 1px 0 1px rgba(255,244,214,.18),0 2px 0 #070504}
.lhsecs button[aria-current] i{color:#241606;background:radial-gradient(70% 70% at 40% 30%,#f7e2a6,#c9a24b 60%,#8a6a2c);box-shadow:none}
.lhfacts{display:grid;gap:8px;margin-top:12px}
.lhfacts div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:8px 0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1) 12%,rgba(255,255,255,.1) 88%,rgba(255,255,255,0)) bottom/100% 1px no-repeat}
.lhfacts div:last-child{background:none}
.lhfacts small{flex:none;font:700 9.5px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:#c9a45c}
.lhfacts b{text-align:right;font-weight:600;font-size:14px;color:#efe6d0}
.lhnum .big{font-size:34px;line-height:1.05;margin-top:4px}
.lhul{margin:6px 0 0;padding-left:0;list-style:none;display:grid;gap:10px}
.lhul li{position:relative;padding-left:18px;font-size:14px;line-height:1.5;color:#dccfb3}
.lhul li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;transform:rotate(45deg);background:linear-gradient(135deg,#f1d99a,#9c7738)}
.lhstrat{display:grid;gap:12px;margin-top:6px}
.lhstrat div{padding:11px 13px;border-radius:14px;background:linear-gradient(180deg,#0f0c0a,#1a1511);box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(214,176,104,.16)}
.lhstrat b{display:block;font:700 10px/1.2 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:#d0aa68;margin-bottom:5px}
.lhstrat p{margin:0;font-size:14px;line-height:1.5;color:#e4d8bd}
.lhtbl{width:100%}
.lhtbl td{padding:9px 4px;font-size:14px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1) 12%,rgba(255,255,255,.1) 88%,rgba(255,255,255,0)) bottom/100% 1px no-repeat}
.lhtbl tr:last-child td{background:none}
.lhtbl td.n{text-align:right;font-family:var(--f-num);font-weight:700;color:#f0d99a;white-space:nowrap}
.lhdl{margin:6px 0 0;display:grid;gap:4px}
.lhdl dt{font-family:var(--f-disp);font-weight:700;font-size:15px;color:#f1e4c2;margin-top:8px}
.lhdl dd{margin:0;font-size:13.5px;line-height:1.45;color:#b8ac93}

/* Locker chips: no frame, no dashed ring; the chip sits centred on its own shadow */
.wtile i.wprev{display:grid;place-items:center;width:62px;height:62px;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;filter:none}
.wtile i.wprev svg{display:block;width:58px;height:58px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.wtile i.wprev::after{content:none}
.thou{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px;border-radius:16px;
  background:radial-gradient(80% 90% at 0% 50%,rgba(214,176,104,.16),rgba(214,176,104,0) 70%),linear-gradient(180deg,#1a1511,#120f0c);box-shadow:inset 0 0 0 1px rgba(214,176,104,.35),inset 0 2px 6px rgba(0,0,0,.5)}
.thou .tchip{flex:none;width:74px;height:74px}
.thou .tchip svg{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 6px rgba(0,0,0,.6))}
.thou.lock .tchip{filter:grayscale(.8) brightness(.55)}
.thou small{display:block;font:700 9.5px/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#d0aa68;margin-bottom:5px}
.thou b{display:block;font-family:var(--f-disp);font-size:17px;color:#f3e6c4}
.thou p{margin:4px 0 0;font-size:12.5px;line-height:1.4;color:#b3a78e}
.thou .tbar{height:5px;margin-top:8px;border-radius:5px;background:#0a0807;box-shadow:inset 0 1px 2px rgba(0,0,0,.8);overflow:hidden}
.thou .tbar i{display:block;height:100%;background:linear-gradient(90deg,#8a6a2c,#e2c47e)}
.thou>div{min-width:0}
.thou .tneed{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:0 8px;margin-top:9px;font-size:11.5px;color:#b3a78e}
.thou .tneed span{font:700 9px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#d0aa68}
.thou .tneed em{font-style:normal;text-align:right}
.thou .tneed .tbar{grid-column:1/-1;margin-top:5px}
.thou .tneed.met em{color:#e2c47e}
.chiprow{justify-content:center;display:flex;gap:6px;flex-wrap:nowrap}

#view .hh.lhhh{margin:16px 2px 9px;font:700 11px/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#bfa98a;text-shadow:none}
#view>.bar+.hh.lhhh{margin-top:4px}
/* felt swatches read as cloth, card backs as cards — no chip rings on things that aren't chips */
.wtile[data-act^="cos:felt"] i,.wtile.lock[aria-label*="Oxblood"] i,.wtile.lock[aria-label*="Peacock"] i,.wtile.lock[aria-label*="Midnight"] i,.wtile.lock[aria-label*="Sand"] i,.wtile.lock[aria-label*="Slate"] i{
  width:58px;height:40px;border:0!important;border-radius:10px;
  background-image:radial-gradient(70% 80% at 40% 25%,rgba(255,255,255,.16),rgba(255,255,255,0) 70%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.9 .45'/></filter><rect width='60' height='60' filter='url(%23n)'/></svg>")!important;
  box-shadow:inset 0 0 0 1px #050302,inset 0 0 0 2.5px #c9a45c,inset 0 0 0 3.5px #1c1107,inset 0 6px 10px -4px rgba(0,0,0,.6),0 3px 6px rgba(0,0,0,.5)!important}
.wtile[data-act^="cos:back"] i,.wtile.lock[aria-label*="Navy"] i,.wtile.lock[aria-label*="Forest"] i,.wtile.lock[aria-label*="Onyx"] i,.wtile.lock[aria-label*="Brass"] i,.wtile.lock[aria-label*="Ink"] i{
  width:34px;height:48px;border:0!important;border-radius:5px;
  background-image:linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.12) 75%),linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.12) 75%)!important;
  background-size:6px 6px!important;background-position:0 0,3px 3px!important;
  box-shadow:inset 0 0 0 2px #efe6cf,inset 0 0 0 3px rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.55)!important;transform:rotate(-4deg)}
.wtile i::before,.wtile i::after{content:none!important}
.wtile.lock i.wprev{filter:grayscale(.45) brightness(.72)}
.wtile.lock[data-act="noop"] i:not(.wprev){filter:grayscale(.6) brightness(.6)}
.wtile{border-radius:14px;display:flex;flex-direction:column;align-items:center;text-align:center;border:0!important;background:linear-gradient(180deg,#221c16,#17130f);box-shadow:inset 0 1px 0 rgba(255,236,200,.08),inset 0 0 0 1px rgba(255,255,255,.05),0 3px 0 #070504,0 8px 12px -6px rgba(0,0,0,.6);transition:transform .08s ease;padding-top:14px!important;padding-bottom:12px!important;gap:6px}

/* ===== Pass eleven: the rail, properly upholstered ===== */
/* no printed inner line whose corners don't match the rail */
:root[data-tables="v2"] .table:not(.bjfelt)::before,:root[data-tables="v2"] .ftable::before,:root[data-tables="v2"] .czfelt::before{border-color:transparent!important}
:root[data-tables="v2"] .table,:root[data-tables="v2"] .ftable,:root[data-tables="v2"] .czfelt{--rw:24px}
:root[data-tables="v2"] .czfelt{padding:9px;border-radius:34px;--rw:20px}
:root[data-tables="v2"] .table::after,:root[data-tables="v2"] .ftable::after,:root[data-tables="v2"] .czfelt::after{content:'';position:absolute;inset:calc(var(--rw) * -1);border-radius:inherit;padding:var(--rw);box-sizing:border-box;pointer-events:none;z-index:3;opacity:1;mix-blend-mode:normal;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  /* the thread: short, bright, sitting in the channel */
  outline:1.3px dashed rgba(238,222,190,.5);outline-offset:calc(var(--rw) * -.46);
  background:
    linear-gradient(112deg,rgba(255,236,200,0) 44%,rgba(255,236,200,.14) 50%,rgba(255,236,200,0) 56%) 130% 0/280% 100% no-repeat,
    radial-gradient(70% 46px at 50% 0,rgba(255,222,176,.24),rgba(255,222,176,0) 100%) 0 0/100% 100% no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='1.25 1.1' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.1 0 0 .62'/></filter><rect width='120' height='120' filter='url(%23l)'/></svg>") 0 0/120px 120px,
    linear-gradient(180deg,var(--rm-up1) 0%,var(--rm-up2) 38%,var(--rm-up3) 72%,var(--rm-up4) 100%) 0 0/100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,236,204,.42),
    inset 0 0 0 1px rgba(0,0,0,.72),
    inset 0 0 2px 2px rgba(0,0,0,.55),
    inset 0 3px 3px 4px rgba(255,226,182,.2),
    inset 0 0 4px 5px rgba(0,0,0,.18),
    inset 0 2px 7px 9px rgba(var(--rm-upA),.38),
    inset 0 0 6px 13px rgba(var(--rm-upB),.34),
    inset 0 -5px 9px 12px rgba(0,0,0,.24)}
/* a deeper tuck where leather meets brass, and the cloth sinking under the rail */
:root[data-tables="v2"] .table,:root[data-tables="v2"] .ftable,:root[data-tables="v2"] .czfelt{border-width:var(--rw);outline:1px solid rgba(0,0,0,.55);outline-offset:calc(var(--rw) * -.46 - 1.4px);
  box-shadow:
    inset 0 0 0 1px #050302,
    inset 0 .5px 0 2px #fff0c2,
    inset 0 0 0 2.5px #e6c678,
    inset 0 0 0 3.5px #b08840,
    inset 0 -.5px 0 4.5px #6a4a1b,
    inset 0 0 0 5.5px #1c1107,
    inset 0 0 0 6.5px rgba(0,0,0,.35),
    inset 0 22px 26px -12px rgba(0,0,0,.78),
    inset 0 -12px 20px -10px rgba(0,0,0,.6),
    inset 14px 0 20px -14px rgba(0,0,0,.6),
    inset -14px 0 20px -14px rgba(0,0,0,.6),
    inset 0 0 70px rgba(0,0,0,.3),
    0 0 0 1px #050302,
    0 6px 0 1px #030201,
    0 8px 3px 1px rgba(0,0,0,.6),
    0 28px 40px -10px rgba(0,0,0,.88),
    0 60px 90px -30px rgba(0,0,0,.95)}
:root[data-felt="peacock"]{--felt1:#1b4a4c;--felt2:#123537;--felt3:#0a2224;--felt-mut:#c4dcdc}
:root[data-back="forest"]{--back1:#2a5242;--back2:#18352a}
:root[data-back="forest"] .card.back{background-color:#24483a}
:root[data-back="onyx"]{--back1:#1c1814;--back2:#0d0b09}
:root[data-back="onyx"] .card.back{box-shadow:inset 0 0 0 3px #efe6cf,inset 0 0 0 4.5px #b8975a,inset 0 0 0 5.5px rgba(0,0,0,.4),0 3px 6px rgba(0,0,0,.3),0 10px 18px -8px rgba(0,0,0,.45)!important}
.wtile.lock[aria-label*="Peacock"] i,.wtile[data-act="cos:felt:peacock"] i{}
:root[data-tables="v2"] .table.bjfelt::before{inset:auto;content:'';position:absolute;left:5%;right:5%;top:47%;height:24%;pointer-events:none;opacity:.5;z-index:0;box-shadow:none;background:none!important}
/* ===== Mechanics (src/mechanics/): feedback tiers, the Sitting, Tricks of the trade, house nights, rooms ===== */

/* --- Feedback tiers: tier 0 is silence; 1 lifts the lamp; 2 is the whole room --- */
.jz{position:fixed;inset:0;z-index:8500;pointer-events:none;overflow:hidden}
.jzlamp{position:absolute;left:50%;top:-24vh;width:150vw;height:92vh;transform:translateX(-50%);opacity:0;
  background:radial-gradient(closest-side,rgba(255,221,150,.20),rgba(255,214,140,.07) 46%,rgba(255,221,150,0) 72%);animation:jzLamp 1.1s ease-out both}
.jz2 .jzlamp{background:radial-gradient(closest-side,rgba(255,228,164,.34),rgba(255,210,130,.12) 46%,rgba(255,221,150,0) 74%);animation-duration:1.6s}
@keyframes jzLamp{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.jz2 .jzcore{animation-duration:1.6s}
.jzcore small{display:block;font:700 11px/1.2 var(--f-body);letter-spacing:.26em;text-transform:uppercase;color:#e6c77f;margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 2px #000}
.jzcore b{display:block;font-family:var(--f-hero,var(--f-disp));font-weight:700;line-height:1;color:#f8eed3;font-variant-numeric:lining-nums tabular-nums;
  text-shadow:0 2px 0 rgba(58,38,8,.95),0 0 26px rgba(240,200,120,.5),0 10px 30px rgba(0,0,0,.9)}
.jzcore em{display:block;font-style:normal;margin-top:9px;font-size:13px;color:#e0d4b8;text-shadow:0 2px 10px #000,0 0 2px #000}
@keyframes jzPop{0%{opacity:0;transform:translateY(14px) scale(.86)}16%{opacity:1;transform:translateY(0) scale(1.04)}28%{transform:scale(1)}74%{opacity:1;transform:translateY(-5px)}100%{opacity:0;transform:translateY(-20px)}}
.jzring{position:absolute;left:50%;top:calc(34% + 22px);width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;opacity:0;
  box-shadow:0 0 0 1.5px rgba(236,204,128,.85),0 0 18px 2px rgba(236,204,128,.35);animation:jzRing 1.25s cubic-bezier(.2,.7,.2,1) .06s both}
@keyframes jzRing{0%{opacity:0;transform:scale(.3)}20%{opacity:1}100%{opacity:0;transform:scale(2.7)}}
.jzmote{position:absolute;left:50%;top:38%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#f6dc93;box-shadow:0 0 8px 2px rgba(244,217,142,.55);opacity:0;animation:jzMote 1.45s ease-out both}
@keyframes jzMote{0%{opacity:0;transform:translate(0,0) scale(.6)}14%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.25)}}
.jzrm .jzcore{animation:jzFade 1.3s ease both}
.jzrm .jzlamp,.jzrm .jzring,.jzrm .jzmote{display:none}
@keyframes jzFade{0%,100%{opacity:0}12%,82%{opacity:1}}

/* --- The Sitting: three stretches at a table, judged on decisions --- */
.sitbar{display:flex;align-items:center;gap:11px;width:100%;margin:0 0 10px;padding:8px 12px;border-radius:14px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);
  border:1px solid rgba(201,162,75,.28);background:linear-gradient(180deg,rgba(255,236,200,.05),rgba(255,236,200,0)),rgba(20,16,13,.55);box-shadow:inset 0 1px 0 rgba(255,236,200,.06)}
.sitbar:active{transform:translateY(1px)}
.sitpips{display:flex;gap:5px;flex:none}
.sitpips i{width:22px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}
.sitpips i.on{background:linear-gradient(90deg,#c9a24b var(--p,0%),rgba(201,162,75,.22) var(--p,0%))}
.sitpips i.done{background:linear-gradient(180deg,#f1d99a,#b8903e);box-shadow:0 0 6px rgba(230,198,120,.4)}
.sittx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sittx b{font:700 10px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#d6b36a}
.sittx em{font-style:normal;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitbar .go{color:#b89a60;font-size:15px;flex:none}
.sitbar.won{border-color:rgba(230,198,120,.6)}
.sitbar.clear{animation:sitGlow 1.4s ease both}
@keyframes sitGlow{0%{box-shadow:0 0 0 0 rgba(236,204,128,.0)}25%{box-shadow:0 0 0 2px rgba(236,204,128,.7),0 0 22px rgba(236,204,128,.35)}100%{box-shadow:inset 0 1px 0 rgba(255,236,200,.06)}}
.sitinfo{margin:-4px 0 12px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font-size:13.5px;line-height:1.45}
.sitinfo p{margin:0 0 8px}.sitinfo p:last-child{margin:0}
.sitinfo ol{margin:0 0 8px;padding-left:20px}

@media (prefers-reduced-motion:reduce){.sitbar.clear{animation:none}}
:root[data-motion="off"] .sitbar.clear{animation:none}

/* --- Tricks of the trade --- */
.tkplaque{display:flex;align-items:center;gap:13px;width:100%;margin:2px 0 4px;padding:13px 14px 13px 10px;border:0;border-radius:18px;text-align:left;cursor:pointer;font:inherit;color:#efe6d0;
  background:radial-gradient(90% 120% at 0% 0%,rgba(255,226,170,.13),rgba(255,226,170,0) 60%),linear-gradient(180deg,#2a2018,#17120e);
  box-shadow:inset 0 0 0 1px rgba(214,176,104,.55),inset 0 1px 0 1px rgba(255,236,200,.08),0 4px 0 #070504,0 12px 24px -10px rgba(0,0,0,.8)}
.tkplaque:active{transform:translateY(3px);box-shadow:inset 0 0 0 1px rgba(214,176,104,.45),0 1px 0 #070504}
.tkplaque .tkpin{flex:none;width:56px;display:grid;place-items:center}
.tkplaque .lhtx small{font:700 9.5px/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#d0aa68}

.tkrow .lhico svg{display:block}
.tkrow.locked{opacity:.62}
.tkrow.locked .lhtx em{color:#9d917a}
.tkhost{margin:0 0 12px;padding:14px 14px 12px;border-radius:18px;color:#efe6d0;
  background:radial-gradient(90% 70% at 15% 0%,rgba(255,226,170,.12),rgba(255,226,170,0) 70%),linear-gradient(180deg,#241c15,#16120e);
  box-shadow:inset 0 0 0 1px rgba(214,176,104,.42),0 10px 24px -12px rgba(0,0,0,.8)}
.tkhost p{margin:9px 0 0;font-size:14px;line-height:1.45;color:#d8ccb0}
.tkhost p b{color:#f1d99a}
.tkhost.lou{background:radial-gradient(90% 70% at 15% 0%,rgba(255,240,205,.1),rgba(255,240,205,0) 70%),linear-gradient(180deg,#221d18,#15120f);box-shadow:inset 0 0 0 1px rgba(230,205,140,.3),0 10px 24px -12px rgba(0,0,0,.8)}

.tksteps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 12px}
.tksteps button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:inherit;cursor:pointer}
.tksteps button i{font:700 10px/1 var(--f-num);font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor}
.tksteps button span{font:700 10.5px/1.1 var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.tksteps button[aria-current="true"]{color:#f1d99a;border-color:rgba(214,176,104,.6);background:linear-gradient(180deg,rgba(214,176,104,.14),rgba(214,176,104,.03)),var(--panel)}
.tksteps button.done i{background:linear-gradient(180deg,#f1d99a,#b8903e);color:#2a1a06;border-color:transparent}
.tksteps button:disabled{opacity:.42;cursor:not-allowed}

.tkdyk{margin-top:12px;border-radius:14px;border:1px dashed rgba(201,162,75,.45);padding:10px 13px;background:rgba(201,162,75,.04)}
.tkdyk summary{cursor:pointer;font:700 10.5px/1.4 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#c9a45c;list-style:none}
.tkdyk summary::-webkit-details-marker{display:none}
.tkdyk summary::before{content:"+ ";}
.tkdyk[open] summary::before{content:"\2212 ";}
.tkdyk p{margin:8px 0 2px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.tkclock{height:6px;border-radius:3px;margin:-2px 0 10px;background:rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.tkclock i{display:block;height:100%;transform-origin:left center;border-radius:3px;background:linear-gradient(90deg,#b3302b,#c9a24b 35%,#f1d99a);animation:tkClock linear both}
@keyframes tkClock{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.tkclock.stop i{animation-play-state:paused}
.tkq{margin:12px 2px 0;text-align:center;font-family:var(--f-disp);font-size:17px;line-height:1.3}
.tkq small{display:block;font:500 13px/1.4 var(--f-body);color:var(--muted);margin-top:4px}
.tkfelts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tkfelt{border-radius:14px;padding:10px 9px 11px;color:var(--felt-ink);text-align:left;
  background:radial-gradient(120% 90% at 50% 0%,var(--felt1),var(--felt2) 62%,var(--felt3));box-shadow:0 0 0 3px #2b1d15,0 8px 18px rgba(0,0,0,.28)}
.tkfelt h4{margin:0 0 7px;text-align:center;font:700 10.5px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.tkfelt ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.tkfelt li{font-size:12.5px;line-height:1.25;color:var(--felt-mut)}
.tkfelt li.diff{color:#fff3d2;font-weight:700}
.tkfelt li.diff::before{content:"\25C6 ";color:#e6c766;font-size:9px;vertical-align:1px}

.tkrun{display:flex;justify-content:center;flex-wrap:wrap;gap:4px}
.tkrun .card{--cw:clamp(36px,11vw,50px)}
.tkbig{font-family:var(--f-num);font-size:30px;font-weight:700;color:#fff3d2;font-variant-numeric:tabular-nums}
.tkdone{text-align:center}
.tkdone .tkbadge{display:flex;justify-content:center;margin:4px 0 6px}
.tkdone h2{margin:2px 0 4px}
.tkdone .mut{margin:0 auto;max-width:34ch}
.tknext{margin-top:12px}
.tkmiss{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px;text-align:left}
.tkmiss li{font-size:13px;line-height:1.4;padding:8px 10px;border-radius:10px;background:var(--panel2);border-left:3px solid var(--lose)}
.tkwait{text-align:center;color:var(--muted);font-size:13px;padding:14px 0 4px}
.tkpins .pin b{font-size:12px;text-align:center;line-height:1.2}
.fb p b{color:var(--ink)}
.jzcore::before{content:"";position:absolute;left:50%;top:50%;width:min(360px,94vw);height:150px;transform:translate(-50%,-50%);z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(8,6,4,.72),rgba(8,6,4,.45) 55%,rgba(8,6,4,0))}
.jzcore{position:absolute;left:12px;right:12px;top:25%;text-align:center;animation:jzPop 1.05s cubic-bezier(.2,.8,.2,1) both;isolation:isolate}

/* --- House nights (buy-in) --- */

/* --- Rooms --- */
/* the Tables page's Room sign (rooms.js roomPlaque): an engraved brass door plate with a key mark, screwed to a dark
   leather panel; what the next Room takes and the house nights beside it */
.roomsign{width:100%;display:flex;align-items:center;gap:12px;margin:18px 0 6px;padding:12px 12px 12px 12px;border:0;border-radius:16px;font:inherit;text-align:left;color:#efe6d0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .09s ease;
  background:radial-gradient(rgba(0,0,0,.16) 1px,transparent 1.6px) 0 0/4px 4px,linear-gradient(180deg,#2a1a14,#160e0b);box-shadow:inset 0 1px 0 rgba(255,230,200,.1),inset 0 0 0 1px rgba(201,162,75,.22),0 10px 20px -12px rgba(0,0,0,.8)}
.rsplate{position:relative;flex:none;width:118px;padding:9px 8px 7px;border-radius:7px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;color:#2a1e05;
  background:linear-gradient(180deg,#f7e3a6,#e2bf6a 45%,#c49a45 80%,#a57c2c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 3px rgba(80,50,10,.35),0 0 0 1px #6b4a17,0 3px 0 #5a3e14,0 8px 14px -6px rgba(0,0,0,.8)}
.rsplate::before{content:'';position:absolute;inset:4px;border-radius:4px;border:1px solid rgba(90,62,20,.38);pointer-events:none}
.rsplate small{font:800 7.5px/1.2 var(--f-body);letter-spacing:.18em;text-transform:uppercase;opacity:.72}
.rsplate b{font:700 15px/1.15 var(--f-disp);text-shadow:0 1px 0 rgba(255,245,215,.5)}
.rskey{width:22px;height:11px;margin-top:2px;color:rgba(70,46,12,.75)}
.rsscrew{position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3cf,#a57c2c 70%);box-shadow:0 0 0 .5px rgba(70,46,12,.6)}
.rsscrew.l{left:5px}.rsscrew.r{right:5px}
.rsrows{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.rsrows>span{font-size:12.5px;line-height:1.3;color:var(--ink)}
.rsrows em{display:block;font:700 9px/1.2 var(--f-body);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#d0aa68;margin-bottom:1px}
.roomsign:active,.stroom:active{transform:translateY(1px) scale(.995)}
.roomsign .go,.stroom .go{flex:none;color:#bfa56a;font-size:20px;line-height:1}
/* Club Standing: where you are, then the four rooms as a ladder with what each takes */
.cstand{margin:4px 0 14px}
.cshere{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 10px;border-radius:20px;color:#efe6d0;
  background:radial-gradient(90% 130% at 0% 0%,rgba(255,226,170,.14),rgba(255,226,170,0) 60%),linear-gradient(180deg,#261d16,#15110d);box-shadow:inset 0 0 0 1px rgba(214,176,104,.45),0 10px 22px -12px rgba(0,0,0,.8)}
.cshere .roomcrest{width:66px}
.cshere .lhtx small{font:700 9.5px/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#d0aa68}
.cshere .lhtx b{font:700 21px/1.15 var(--f-disp)}
.csladder{list-style:none;margin:12px 0 0;padding:0 0 0 4px;position:relative}
.csladder::before{content:'';position:absolute;left:25px;top:22px;bottom:22px;width:1px;background:linear-gradient(180deg,rgba(214,179,106,.55),rgba(214,179,106,.12))}
.csladder li{position:relative;display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.cscrest{flex:none;width:44px;display:grid;place-items:center;position:relative;z-index:1}
.csladder li.later .cscrest{opacity:.55}
.cstx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:4px}
.cstx>b{font:700 16px/1.2 var(--f-disp)}
.cstx>span{font-size:12.5px;color:var(--muted);line-height:1.35}
.csladder li.here .cstx>b{color:#e2c173}
.csladder li.next .cstx>b{color:var(--ink)}
.csladder li.later .cstx>b{color:var(--muted)}
.csreq{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:3px;font:600 11.5px/1.2 var(--f-body);color:var(--muted)}
.csreq i{height:5px;border-radius:99px;background:rgba(0,0,0,.4);box-shadow:inset 0 1px 2px rgba(0,0,0,.6);overflow:hidden}
.csreq i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#a8842f,#f0d88f)}
.csreq em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink)}

.cslink{margin:12px 2px 0}

.roomcrest{flex:none;width:58px;display:grid;place-items:center}
.roomdots{display:flex;flex-direction:column;gap:5px;flex:none}
.roomdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.12)}
.roomdots i.on{background:#d6b36a;box-shadow:0 0 6px rgba(214,179,106,.6)}
.host.roomcall{background:rgba(6,4,3,.74);display:grid;place-items:center}
.host.roomcall .hcard{position:relative;left:auto;right:auto;margin:0 16px;width:calc(100% - 32px)}
.roomcallcrest{display:flex;justify-content:center;margin:-4px 0 8px}
#roomtone{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
:root[data-room="back"] #roomtone{opacity:1;background:radial-gradient(90% 55% at 50% -8%,rgba(214,150,70,.13),rgba(214,150,70,0) 70%)}
:root[data-room="members"] #roomtone{opacity:1;background:radial-gradient(90% 55% at 50% -8%,rgba(160,48,64,.16),rgba(160,48,64,0) 70%),radial-gradient(80% 50% at 50% 110%,rgba(120,30,45,.10),transparent 70%)}
:root[data-room="private"] #roomtone{opacity:1;background:radial-gradient(90% 55% at 50% -8%,rgba(214,179,106,.14),rgba(214,179,106,0) 70%),radial-gradient(90% 60% at 50% 110%,rgba(30,110,80,.14),transparent 70%)}
/* each Room is its own room: lamp warmth, wall tone and rail leather (Back: cognac; Members: oxblood; Private: black hide, bottle-green walls) (tokens in base.css; the Front Room is the default) */
:root[data-room="back"]{--rm-lamp:255,196,110;--rm-lamp2:245,170,90;--rm-tlamp:255,196,120;--rm-flamp:255,226,168;--rm-wall1:#2c1d10;--rm-wall2:#1a120b;
  --rm-rail1:#8a5428;--rm-rail2:#63391a;--rm-rail3:#3e220f;--rm-rail4:#26140a;--rm-rail5:#170b05;--rm-hrail1:#7a4a24;--rm-hrail2:#4f2d14;--rm-hrail3:#221207;--rm-up1:#3a220f;--rm-up2:#28170a;--rm-up3:#190d05;--rm-up4:#0e0703;--rm-upA:200,136,72;--rm-upB:140,88,44}
:root[data-room="members"]{--rm-lamp:255,190,160;--rm-lamp2:230,150,140;--rm-tlamp:255,190,160;--rm-flamp:255,228,204;--rm-wall1:#2a1417;--rm-wall2:#1a0f10;
  --rm-rail1:#72292b;--rm-rail2:#521b1e;--rm-rail3:#341012;--rm-rail4:#210a0b;--rm-rail5:#140606;--rm-hrail1:#66262a;--rm-hrail2:#41171a;--rm-hrail3:#1c0909;--rm-up1:#3a1416;--rm-up2:#290d0f;--rm-up3:#1a0708;--rm-up4:#0f0405;--rm-upA:150,80,76;--rm-upB:104,50,48}
:root[data-room="private"]{--rm-lamp:255,222,150;--rm-lamp2:215,205,140;--rm-tlamp:255,222,160;--rm-flamp:255,240,204;--rm-wall1:#16211b;--rm-wall2:#101612;
  --rm-rail1:#34302b;--rm-rail2:#24211d;--rm-rail3:#161412;--rm-rail4:#0d0c0b;--rm-rail5:#070606;--rm-hrail1:#34302b;--rm-hrail2:#1f1c19;--rm-hrail3:#0c0b0a;--rm-up1:#1f1d1a;--rm-up2:#151412;--rm-up3:#0d0c0b;--rm-up4:#060505;--rm-upA:156,142,116;--rm-upB:100,90,74}
/* by daylight the rooms are tinted paper: amber, rose, sage */

/* drills: a full hand wraps in two rows; the icon is a small numbered token; the family's calls */
.tkhand{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;padding:0 4px}
.tkhand .card{--cw:clamp(30px,9.4vw,40px);margin:0 -2px}
.dico{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 32%,#3a5a46,#16261d 72%);box-shadow:inset 0 0 0 2px rgba(214,176,104,.55),inset 0 2px 3px rgba(255,255,255,.18),0 3px 6px rgba(0,0,0,.4)}
.dico.fam{background:radial-gradient(circle at 40% 32%,#7a4a2c,#3a2212 72%)}
.dico i{font-style:normal;font-family:var(--f-num);font-weight:800;font-size:15px;color:#f1e8d2}
.fb.judge{border-left:4px solid var(--brass)}
.fb.judge>b{color:var(--ink)}
.fviews{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.fviews li{font-size:.9em;line-height:1.35;padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.fviews li.same{border-color:rgba(214,176,104,.6);background:rgba(214,176,104,.09)}
.fviews strong{display:block;font-size:.82em;letter-spacing:.06em;text-transform:uppercase;color:var(--brass)}
.fviews em{color:var(--muted)}

.hud.h4{grid-template-columns:repeat(4,1fr)}
/* ===== Pass ten: daylight cleanup, nothing clipped, card room on Tables, Learn in four parts ===== */

/* --- Wallet on Home: words on the room, never a card (both themes) --- */
.plaque.bankroll{-webkit-backdrop-filter:blur(16px) saturate(1.5);border-radius:20px;-webkit-backdrop-filter:none;padding:10px 4px 4px;margin-top:10px;background:none!important;box-shadow:none!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;padding-left:4px;padding-right:4px}
.plaque.bankroll::before,.plaque.bankroll::after{display:none!important}

/* --- Home stack: room between the lacquered pieces so no shadow runs into the next one --- */

/* --- Daily Hands + stipend, card room door: ivory by daylight --- */

/* --- Table tiles (casino and card room) by daylight --- */

/* --- Card room row on Tables --- */
.hhlink{flex:none;display:inline-flex;align-items:center;gap:4px;margin:0 2px 5px;padding:6px 0 4px;border:0;background:none;font:700 12.5px/1 var(--f-body);letter-spacing:.02em;color:#d9b867;cursor:pointer}
.hhlink span{font-size:18px;line-height:.8}
.hhlink:active{opacity:.7}

/* --- Segmented tabs: the lit pill keeps a soft shadow inside its tray instead of a lip that hits the edge --- */
.segpill{position:absolute;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;z-index:0;transition:transform .22s cubic-bezier(.22,.85,.32,1),width .22s cubic-bezier(.22,.85,.32,1),height .22s cubic-bezier(.22,.85,.32,1);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 48%,rgba(0,0,0,0) 52%,rgba(0,0,0,.18)),radial-gradient(120% 140% at 50% 0%,var(--felt1),var(--felt2) 60%,var(--felt3));box-shadow:inset 0 0 0 1px rgba(232,200,128,.55),inset 0 1px 0 1px rgba(255,244,214,.22),0 1px 2px rgba(0,0,0,.5)!important}
.seg+.seg .segpill{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 50%,rgba(0,0,0,.14)),#2a2219;box-shadow:inset 0 0 0 1px rgba(232,200,128,.35),0 1px 2px rgba(0,0,0,.45)!important}

/* --- Learn: four parts, always on screen, nothing scrolling sideways to clip shadows --- */
.lhsecs{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;scrollbar-width:none;margin:0 -16px 12px;background:linear-gradient(180deg,rgba(19,16,13,.96),rgba(19,16,13,.9) 70%,rgba(19,16,13,0));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;overflow:visible;padding:8px 16px 12px}
.lhsecs button{justify-content:center;gap:0;padding:0 4px;min-height:38px;font-size:12.5px;white-space:nowrap}

#view .panel+.plaque.lhnum{margin-top:12px}

/* --- The last thing on a page always clears the floating tab bar --- */
.hastabs{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
/* ===== Home, third pass: the lobby after dark ===== */
@property --xpv{syntax:'<number>';inherits:false;initial-value:0}
.home3{position:relative;margin-top:-10px}

/* --- ambience: the room (lobby-room.css), a pendant lamp's light and a few motes in it (fixed, so re-renders never restart it) --- */
#homeamb{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease;overflow:hidden}
body.onhome #homeamb{opacity:1}
body.inroom #homeamb{opacity:1}
/* away from Home the room holds still and sits a step further back, so pages of reading stay easy on the eye */
body.inroom:not(.onhome) .hroom .haworld{animation:none!important;transform:none!important}
body.inroom:not(.onhome) #homeamb::after{content:'';position:absolute;inset:0;background:rgba(14,11,9,.18)}

@keyframes haBreath{0%,100%{opacity:.85}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){.hacone,.hm{animation:none}.hm{display:none}}
:root[data-motion="off"] .hacone{animation:none}
:root[data-motion="off"] .hm{display:none}

/* --- one orchestrated entrance, only when you arrive on Home --- */
/* each piece settles into place from just above, with a touch of weight, like the Tables' row (tables-floor.css tRise) */
@keyframes hvIn{0%{opacity:0;transform:translateY(-16px)}60%{opacity:1}}
.home3.hin .hv{animation:hvIn .7s cubic-bezier(.2,.75,.25,1.04) backwards;animation-delay:calc(var(--i) * 70ms + 40ms)}

/* --- header: earned avatar inside a ring that fills with XP --- */
.hwhead{display:flex;align-items:center;gap:13px;padding-top:0}
.hwav{position:relative;flex:none;width:58px;height:58px;display:grid;place-items:center}
.hwav>svg{position:relative;z-index:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.hwring{position:absolute;inset:0;border-radius:50%;--xpv:var(--xp);
  background:conic-gradient(from -90deg,#f3dc9c 0,#c9a24b calc(var(--xpv) * 1%),rgba(255,236,200,.14) calc(var(--xpv) * 1%));
  -webkit-mask:radial-gradient(closest-side,transparent 82%,#000 84%,#000 99%,transparent 100%);mask:radial-gradient(closest-side,transparent 82%,#000 84%,#000 99%,transparent 100%);
  filter:drop-shadow(0 0 4px rgba(214,179,106,.45))}
@keyframes xpFill{from{--xpv:0}}
.home3.hin .hwring{animation:xpFill 1.2s cubic-bezier(.2,.8,.2,1) .35s both}
.hwlv{position:absolute;z-index:2;right:-4px;bottom:-3px;min-width:21px;height:19px;padding:0 5px;border-radius:99px;display:grid;place-items:center;
  font:800 10.5px/1 var(--f-num,var(--f-body));font-style:normal;color:#241606;background:linear-gradient(180deg,#f7e2a6,#c9a24b 60%,#9c7738);
  box-shadow:0 0 0 2px #140f0a,inset 0 1px 0 rgba(255,255,255,.6),0 3px 6px rgba(0,0,0,.45)}
.hwwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hwwho small{font:700 10px/1.2 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:#e2c173}
.hwwho b{font:700 21px/1.1 var(--f-hero);color:#f7eedb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.hwwho span{font:500 12px/1.25 var(--f-disp);font-style:italic;color:#bfb196;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hwhead .hubtools{align-self:center;margin-top:0}

/* --- wallet: no card, just the number under the lamp --- */
.hwallet{margin:16px 0 4px;padding:0 2px}
.hwk{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hwk span{font:700 10.5px/1 var(--f-body);letter-spacing:.26em;text-transform:uppercase;color:#e2c173}
.hwk em{font:500 12px/1 var(--f-body);font-style:normal;color:#bfb196}
.hwdelta{font:800 12px/1 var(--f-body);padding:4px 8px;border-radius:99px;animation:hwPop .5s cubic-bezier(.2,.9,.3,1.3) both}
.hwdelta.pos{color:#bff0d2;background:rgba(40,140,90,.28);box-shadow:inset 0 0 0 1px rgba(111,211,160,.45)}
.hwdelta.neg{color:#ffd1ca;background:rgba(170,50,40,.28);box-shadow:inset 0 0 0 1px rgba(255,154,140,.4)}
@keyframes hwPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.hwamt{position:relative;display:inline-block;margin-top:8px;font:700 clamp(40px,12vw,52px)/1 var(--f-hero);letter-spacing:.005em;font-variant-numeric:lining-nums tabular-nums;
  color:transparent;background:linear-gradient(180deg,#fffaf0 0%,#f5e2ae 40%,#d0aa5c 78%,#a8842f 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 10px 18px rgba(0,0,0,.5));transition:filter .4s}
.hwamt.up{filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(111,211,160,.55))}
.hwamt.down{filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,120,100,.4))}
@keyframes hwGlint{0%{opacity:0;transform:translateX(-110%)}20%{opacity:1}100%{opacity:0;transform:translateX(110%)}}
.home3.hin .hwamt::after{animation:hwGlint 1.3s ease-out .55s both}
.hwxp{display:flex;align-items:center;gap:10px;margin-top:20px;font:700 11px/1 var(--f-body);letter-spacing:.04em;color:#c9b995}
.hwxp span:first-child{color:#e2c173}
/* --- the wallet line: a thin gold line with a wash beneath it; the side tab switches hands and days --- */
.hchart{margin-top:18px}
.hcgo{position:relative;width:100%;display:block;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hcplot{position:relative;display:block;height:64px}
.hcplot svg{display:block;width:100%;height:100%;overflow:visible}
.hcst{stop-color:#d6b36a}
.hcl{fill:none;stroke:#e0bf74;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(214,179,106,.5))}
.hcbase{stroke:rgba(240,233,216,.18);stroke-width:1;stroke-dasharray:2 4}
.hcdot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff3cf;box-shadow:0 0 0 2px rgba(214,179,106,.35),0 0 10px rgba(255,220,140,.8)}
.hcmode{margin-left:auto;padding:4px 9px;border:0;border-radius:99px;font:800 12px/1 var(--f-body);color:#e2c173;background:rgba(201,162,75,.12);box-shadow:inset 0 0 0 1px rgba(214,179,106,.42);cursor:pointer;transition:transform .09s ease;-webkit-tap-highlight-color:transparent}
.hcmode:active{transform:scale(.94)}
@keyframes hcIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hcDot{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.home3.hin .hcplot svg{animation:hcIn 1s cubic-bezier(.2,.8,.2,1) .45s both}
.home3.hin .hcdot{animation:hcDot .35s cubic-bezier(.2,.8,.2,1.12) 1.35s both}
:root[data-motion="off"] .home3.hin .hcplot svg,:root[data-motion="off"] .home3.hin .hcdot{animation:none}
.hwbar{flex:1;height:5px;border-radius:99px;background:rgba(0,0,0,.45);box-shadow:inset 0 1px 2px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.06);overflow:hidden}
.hwbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#a8842f,#f0d88f);box-shadow:0 0 8px rgba(214,179,106,.6)}
@keyframes barIn{from{transform:scaleX(0)}}
.home3.hin .hwbar i{transform-origin:left;animation:barIn 1s cubic-bezier(.2,.8,.2,1) .5s both}

/* --- section heads --- */
.hshead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:20px 2px 10px}
.hshead h3{margin:0;display:flex;align-items:center;gap:10px;font:700 19px/1.1 var(--f-disp);color:#f3e6c4;flex:1;min-width:0}
.hshead h3::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(214,179,106,.45),transparent)}
.hshead .hhlink{margin:0 0 1px}

/* --- the club: the Card Room, a lit piece of baize laid across the page --- */
.htile{position:relative;display:flex;flex-direction:column;gap:9px;padding:9px 9px 11px;border:0;border-radius:20px;text-align:left;color:#efe6d0;cursor:pointer;font:inherit;
  background:linear-gradient(180deg,#261e17,#17120e);box-shadow:inset 0 1px 0 rgba(255,236,200,.12),inset 0 0 0 1px rgba(214,176,104,.18),0 3px 0 #070504,0 14px 22px -12px rgba(0,0,0,.7);
  transition:transform .09s ease,box-shadow .09s ease}
.htile:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,236,200,.1),inset 0 0 0 1px rgba(214,176,104,.2),0 0 0 #070504,0 5px 10px -6px rgba(0,0,0,.7)}
.htfelt{--f1:#17563f;--f2:#0b3a2b;position:relative;display:grid;place-items:center;height:76px;border-radius:14px;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 80% at 50% 30%,var(--f1),var(--f2) 75%);
  box-shadow:inset 0 0 0 1px #080504,inset 0 0 0 2.5px #b8914a,inset 0 0 0 3.5px #3a2812,inset 0 10px 16px -8px rgba(0,0,0,.6),inset 0 -14px 22px -14px rgba(0,0,0,.6)}
.htfelt::before{content:'';position:absolute;inset:0;z-index:0;opacity:.55;background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px)}
.htfelt::after{content:'';position:absolute;inset:0;z-index:3;background:radial-gradient(60% 55% at 50% 0%,rgba(255,236,190,.22),transparent 70%);pointer-events:none}
.ht-cards .htfelt{--f1:#6b1f2a;--f2:#360d14}

.htfan{position:relative;z-index:1;width:62px;height:52px}
.httx{display:flex;flex-direction:column;gap:3px;padding:0 4px;min-width:0}
.httx b{font:700 16px/1.15 var(--f-disp);color:#f5e9c9}
.httx em{font:600 11.5px/1.25 var(--f-body);font-style:normal;color:#b3a78e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htile.live .httx em{color:#e7c873}
.htdot{position:absolute;top:16px;right:16px;z-index:4;width:8px;height:8px;border-radius:50%;background:#7fe0a8;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px #7fe0a8;animation:htPulse 2.2s ease-in-out infinite}
@keyframes htPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (hover:hover){.htile:hover .htfan{transform:translateY(-2px) scale(1.04)}}
.htfan{transition:transform .25s cubic-bezier(.2,.8,.2,1)}

.hcroom{width:100%;flex-direction:row;align-items:center;gap:14px;padding:9px 14px 9px 9px;border-radius:18px}
.hcroom .htfelt{flex:0 0 112px}
.hcroom .httx{flex:1}
.hcroom .go{color:#d0aa68;font-size:22px}
.hcroom .htdot{top:14px;left:107px;right:auto}
/* the next lesson: one quiet line under the Card Room */
.hnext{display:flex;align-items:baseline;gap:8px;width:100%;margin:8px 0 0;padding:10px 4px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hnext small{flex:none;font:700 9.5px/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#d0aa68}
.hnext b{flex:1;min-width:0;font:600 13.5px/1.25 var(--f-body);color:#e6dcc4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hnext span{color:#d0aa68;font-size:18px;line-height:1}
.hnext:active b{color:#f3e6c4}

/* --- where you stand --- */
.hstand{margin-top:2px}
.stroom{width:100%;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .09s ease;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 10px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(214,176,104,.18)}
.sttx{flex:1;display:flex;flex-direction:column;gap:2px}
.sttx small{font:700 9.5px/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#d0aa68}
.sttx b{font:700 17px/1.15 var(--f-disp);color:#f3e6c4}
.stroom .roomdots{flex-direction:row}
.stgames{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.stg{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 6px 10px;border:0;border-radius:16px;text-align:center;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .09s ease;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));box-shadow:inset 0 0 0 1px rgba(214,176,104,.14)}
.stg:active{transform:translateY(2px)}
.stc{filter:drop-shadow(0 5px 6px rgba(0,0,0,.45))}
.stg b{margin-top:4px;font:700 13.5px/1.1 var(--f-disp);color:#f0e4c4}
.stg em{font:600 10.5px/1.2 var(--f-body);font-style:normal;color:#a89f8c}
.stbar{width:70%;height:3px;margin-top:5px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.stbar i{display:block;height:100%;background:linear-gradient(90deg,#a8842f,#f0d88f)}
.hguide{margin-top:18px}

/* --- daylight --- */

@media (prefers-reduced-motion:reduce){.home3.hin .hv,.home3.hin .hwring,.home3.hin .hwbar i,.home3.hin .hwamt::after,.htdot,.home3.hin .hcplot svg,.home3.hin .hcdot{animation:none}}
:root[data-motion="off"] .home3.hin .hv,:root[data-motion="off"] .htdot{animation:none}

/* --- the light switch (Lobby.switchLights): one smooth fade, ~.6s, no sweep, no sparkle, no dip.
   html.lswvt: the browser cross-fades the old room into the new; #lightsw: the fallback veil that holds the old light and lifts --- */
html.lswvt::view-transition-old(root),html.lswvt::view-transition-new(root){animation-duration:.6s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
#lightsw{position:fixed;inset:0;z-index:90;pointer-events:none;animation:lswLift .6s cubic-bezier(.4,0,.2,1) both}
#lightsw.on{background:rgba(8,6,4,.32)}
#lightsw.off{background:rgba(255,214,150,.14);mix-blend-mode:screen}
@keyframes lswLift{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){#lightsw{display:none}}
:root[data-motion="off"] #lightsw{display:none}

/* dark, after hours: a warm lamp pool overhead and deeper shadow at the edges of the room */
:root:not([data-theme="light"]) body.inroom #homeamb::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(70% 38% at 50% 0%,rgba(228,196,156,.08),rgba(228,196,156,0) 72%),radial-gradient(130% 95% at 50% 38%,rgba(0,0,0,0) 46%,rgba(6,5,4,.72) 100%)}
/* ===== Lobby ambience: no lamp fixture, just its light and dust drifting through it ===== */
.hacone{position:absolute;left:50%;width:170vw;transform:translateX(-50%);top:-14vh;height:82vh;background:radial-gradient(44% 58% at 50% 6%,rgba(var(--rm-lamp),.085),rgba(var(--rm-lamp2),.03) 46%,transparent 74%);animation:haBreath 12s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){.hacone{animation:none}}
:root[data-motion="off"] .hacone{animation:none}
/* ===== Home, depth: dust in the lamp (the room itself is lobby-room.css) ===== */
.hadust{position:absolute;inset:0;-webkit-mask-image:radial-gradient(38% 50% at 50% 18%,#000,transparent);mask-image:radial-gradient(38% 50% at 50% 18%,#000,transparent)}
.hm{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,240,210,.7);opacity:0;animation:hmFloat var(--d) linear infinite;animation-delay:var(--w)}
@keyframes hmFloat{0%{opacity:0;transform:translate3d(0,0,0)}20%{opacity:.8}70%{opacity:.5}100%{opacity:0;transform:translate3d(24px,-60px,0)}}

@media (prefers-reduced-motion:reduce){.hm{display:none}}
:root[data-motion="off"] .hm{display:none}
/* ===== Between rooms: the lights come up on the room you walked into (#lights, made on the first doorway) ===== */
#lights{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;background:radial-gradient(75% 60% at 50% 40%,rgba(8,6,4,.35),rgba(8,6,4,.92))}
#lights.up{animation:lightsUp .5s cubic-bezier(.2,.8,.2,1) both}
#lights.up.slow{animation-duration:1.4s}
@keyframes lightsUp{from{opacity:1}to{opacity:0}}

@media (prefers-reduced-motion:reduce){#lights{display:none}}
:root[data-motion="off"] #lights{display:none}
/* ===== Home's room (shell/lobby-room.js): one wall behind the lobby, lit from sconces just out of view, embossed looks ===== */
.hroom{position:absolute;inset:0;overflow:hidden;contain:strict;background:var(--floor2);
  --veil:9,11,17;--shadow:3,4,9;--wall1:#181c25;--wall2:#0a0c11;--panel:#2e2016;--floor1:#2a1b11;--floor2:#20140c;--tex:236,220,198;--tex-a:.045;--shade:3,4,8;--lamp:232,200,160}

@media (prefers-reduced-motion:reduce){.hroom .haworld{animation:none!important;transform:none!important}}
:root[data-motion="off"] .hroom .haworld{animation:none!important;transform:none!important}
.hroom .harm{position:absolute;inset:0;perspective:900px;perspective-origin:50% 46%}
.hroom .haworld{position:absolute;left:0;top:0;width:var(--W);height:var(--Hw);transform-style:preserve-3d;will-change:transform}
@supports (animation-timeline: scroll()){
  .hroom.sda .haworld{animation:hrCam linear both;animation-timeline:scroll(root block)}
  @keyframes hrCam{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(var(--camMax) * -1),0)}}
}
.hroom .hrf{position:absolute;overflow:hidden;backface-visibility:hidden}
.hroom .back{left:0;top:0;width:var(--W);height:var(--Hw)}
.hroom .hrf>i{position:absolute;left:0;right:0;display:block}
.hroom .hrf>i.grain{top:0;bottom:0;z-index:2;background:var(--grain) 0 0/128px 128px;opacity:.9}
.hroom .back>i.wash{top:0;height:70%;z-index:2;background:radial-gradient(70% 60% at 50% 0%,rgba(var(--lamp),.10),rgba(var(--lamp),.03) 55%,transparent)}
.hroom .upper{top:0;height:var(--rail);background-color:var(--wall1);background-image:var(--frames,none),var(--paper),linear-gradient(180deg,var(--wall1) 20%,var(--wall2));background-size:auto calc(100% - 76px),auto,100% 100%;background-repeat:repeat-x,repeat,no-repeat;background-position:50% 72px,50% 0,0 0}
.hroom .prail{top:calc(var(--ft) * .5);height:7px;background:linear-gradient(180deg,rgba(var(--shade),.25),rgba(var(--tex),.2) 25%,rgba(var(--tex),.07) 55%,rgba(var(--shade),.5));box-shadow:0 3px 5px rgba(var(--shade),.3)}
.hroom .rail::after{content:'';position:absolute;inset:0;background:var(--raildeco,none)}
.hroom .rail{top:var(--rail);height:11px;background:linear-gradient(180deg,rgba(var(--shade),.3),rgba(var(--tex),.22) 25%,rgba(var(--tex),.10) 55%,rgba(var(--shade),.55))}
.hroom .lower{top:calc(var(--rail) + 11px);bottom:calc(var(--ft) * .5);background-color:var(--panel);background-image:var(--wainhi,var(--wains)),linear-gradient(180deg,rgba(var(--shade),.25),transparent 12%,transparent 80%,rgba(var(--shade),.3));background-repeat:repeat-x,no-repeat;background-position:50% 0,0 0;background-size:auto 100%,100% 100%}
.hroom .skirt{bottom:0;height:calc(var(--ft) * .55);background:linear-gradient(180deg,rgba(var(--shade),.35),rgba(var(--tex),.16) 12%,rgba(var(--shade),.25) 22%,rgba(var(--tex),.08) 30%,rgba(var(--shade),.2) 60%,rgba(var(--shade),.6))}
/* a sconce on either side, hung just out of view at about five and a half feet: only its light reaches the wall,
   a halo and a scallop up the paper and down to the rail coming in from each edge */
.hroom .back>i.scon{top:0;height:var(--rail);z-index:3;background-image:var(--scon),var(--scon);background-repeat:no-repeat;background-size:320px 760px;
  background-position:-200px calc(var(--ft) * 2.5 - 300px),calc(var(--W) - 120px) calc(var(--ft) * 2.5 - 300px)}
/* near each edge the mahogany catches the sconce's light along the rail */
.hroom .back>i.lower::after{content:'';position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:radial-gradient(30% 70% at 0% 0%,rgba(var(--lamp),.10),transparent 80%),radial-gradient(30% 70% at 100% 0%,rgba(var(--lamp),.10),transparent 80%)}
/* soft focus: the room stays behind the lobby, never competing with its type. Each surface is blurred once (then only moved),
   and a veil in the wall's own color, heaviest behind the header and the wallet line, takes the contrast down */
.hroom .hrf{filter:blur(1.5px)}
.hroom::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--shadow),.6) 0%,rgba(var(--shadow),.32) 14%,rgba(var(--shadow),0) 34%),linear-gradient(180deg,rgba(var(--veil),.62) 0%,rgba(var(--veil),.44) 28%,rgba(var(--veil),.26) 50%,rgba(var(--veil),.22) 100%)}
/* the lamp light (Locker > Your room > Lamp light, progress.cos.tint): the same room, its lamps a different color.
   Dark is after hours, the lamps low; light is the same room with the lamps turned up */
.hroom[data-tint="gold"]{--lamp:232,196,150}
.hroom[data-tint="green"]{--lamp:150,214,160}
.hroom[data-tint="red"]{--lamp:255,128,104}
.hroom[data-tint="purple"]{--lamp:196,150,240}
.hroom[data-tint="grey"]{--lamp:196,214,240}

/* the lamp's color washes the whole room a little, strongest near the light */
.hroom::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(90% 60% at 50% 8%,rgba(var(--lamp),.16),rgba(var(--lamp),.05) 55%,rgba(var(--lamp),0) 90%)}
/* ===== The room's materials (owner, 2026-10-06): navy walls, a warm brown mahogany below, brass rails, walnut boards and a rug.
   One palette in every Room; only the Room's own motifs differ. Shadows fall cool (navy-black), the lamp warm. ===== */
/* brass: the chair rail and the picture rail are polished brass, catching a thin line of the lamp */
.hroom .rail{background:linear-gradient(180deg,rgba(var(--shade),.55) 0,#3b2b10 1px,#9c7a36 3px,#e6c77e 4.5px,#b8913f 6px,#6e5222 8px,#2a1e0a 10px,rgba(var(--shade),.6) 11px)}
.hroom .prail{height:5px;background:linear-gradient(180deg,#3b2b10,#c9a24b 40%,#f0d898 55%,#7a5a24 80%,#2a1e0a);opacity:.75;box-shadow:0 3px 5px rgba(var(--shade),.45)}
/* mahogany: a fine vertical grain over the panels, warm where the lamp reaches */
.hroom .lower::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,214,170,.028) 0 1px,transparent 1px 5px,rgba(0,0,0,.07) 5px 6px,transparent 6px 11px,rgba(255,214,170,.02) 11px 13px,transparent 13px 19px),
  linear-gradient(180deg,rgba(var(--lamp),.07),rgba(var(--lamp),0) 40%)}
/* wallet glint: the light runs through the numerals themselves. The extra layer is only there while it runs,
   so at rest the number is the single original gold gradient, rendered at full quality. */
.hwamt::after{content:'';position:absolute;inset:-4px -10px;background:linear-gradient(100deg,transparent 30%,rgba(255,250,235,.85) 48%,transparent 62%);mix-blend-mode:overlay;opacity:0;pointer-events:none;transform:translateX(-110%);display:none!important;animation:none!important}
@keyframes hwTextGlint{from{background-position:150% 0,0 0}to{background-position:-50% 0,0 0}}
.home3.hin .hwamt:not(.gdone){background-image:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.6) 46%,#fff 50%,rgba(255,255,255,.6) 54%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#fffaf0 0%,#f5e2ae 40%,#d0aa5c 78%,#a8842f 100%);
  background-size:250% 100%,100% 100%;background-repeat:no-repeat;background-position:150% 0,0 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hwTextGlint 1.5s cubic-bezier(.3,.1,.3,1) .6s both}

@media (prefers-reduced-motion:reduce){.home3.hin .hwamt:not(.gdone){animation:none;background-image:none}}
:root[data-motion="off"] .home3.hin .hwamt:not(.gdone){animation:none}

/* ===== Card room, part two: rummy felt, cribbage board, bridge dummy; the Tables screen in two rooms ===== */
.tsec{scroll-margin-top:12px}
.tshead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 2px 2px}
.tshead .hh{margin:0}
#sec-felt .tshead{margin-top:6px}
.tstag{font:600 10.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--brass);white-space:nowrap}

.tslinks{display:flex;gap:14px;margin:0 2px 10px}
#sec-cards{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}

.htfan3{display:flex;align-items:center;gap:12px}

.rmfelt{gap:10px}
.rmopps{display:flex;justify-content:space-around;gap:4px}
.rmo{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 10px;border-radius:10px;font-size:11px;line-height:1.25;transition:background .2s ease}
.rmo>b{font:600 12.5px var(--f-disp)}.rmo>span{color:var(--felt-mut);white-space:nowrap}
.rmo.act{background:rgba(201,162,75,.2);box-shadow:inset 0 0 0 1px rgba(201,162,75,.6)}
.rmmelds{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;min-height:34px;padding:0 4px}
.rmmeld{display:flex;flex-direction:column;align-items:center;gap:2px}
.rmmeld em{font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--felt-mut)}
.rmmeld>span{display:flex}
.rmmeld .card,.rmby .card{--cw:26px;width:26px}
.rmmeld>span>*+*{margin-left:-9px}
.rmmeld .card:not(.back) .idx,.crshc .card:not(.back) .idx,.crpile .card:not(.back) .idx{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;line-height:1;opacity:1}
.rmmeld .card .pip,.crshc .card .pip,.crpile .card .pip{display:none}
.rmby{display:block;border-radius:5px}
.rmby.b0 .card{box-shadow:0 0 0 1.5px var(--brass)}
.rmmeld.dead .card{filter:brightness(.7) saturate(.6)}
.rmnone{margin:6px 0;font-size:11px;color:var(--felt-mut);letter-spacing:.06em;text-transform:uppercase}
.rmmid{display:flex;align-items:flex-start;gap:12px;padding:0 6px}
.rmspread{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.rmspread small{color:var(--felt-mut);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.rmsrow{display:flex;max-width:100%;overflow-x:auto;padding:4px 2px 4px;scrollbar-width:none;min-height:60px}
.rmsrow::-webkit-scrollbar{display:none}
.rmdc{flex:0 0 auto;padding:0;border:0;background:none;margin-left:-18px;cursor:pointer;transition:transform .15s ease;-webkit-tap-highlight-color:transparent}
.rmdc:first-child{margin-left:0}
.rmdc .card{--cw:40px;width:40px;box-shadow:-2px 0 4px rgba(0,0,0,.3)}
.rmdc:disabled{cursor:default}
.rmspread.dig .rmdc.ok:hover,.rmdc.ok:active{transform:translateY(-6px)}
.rmdc.ok.top .card,.rmspread.dig .rmdc.ok .card{box-shadow:0 0 0 1.5px var(--brass),-2px 0 4px rgba(0,0,0,.3)}
.rmempty{font-size:11px;color:var(--felt-mut);padding:20px 4px}
.rmhand{flex-wrap:nowrap}
.fcard.mel .card{box-shadow:0 0 0 2px rgba(201,162,75,.55),0 4px 10px rgba(0,0,0,.3)}
.gnmeter{display:flex;align-items:center;gap:8px;margin:12px 4px 0;font-size:11px;color:var(--muted)}
.gnmeter>span{letter-spacing:.08em;text-transform:uppercase}
.gnmeter em{font:700 15px var(--f-num);font-style:normal;color:var(--ink,inherit);min-width:24px;text-align:right}
.gnbar{position:relative;flex:1;height:7px;border-radius:99px;background:var(--panel2);overflow:visible}
.gnbar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,#c9a24b,#e8cf92);transition:width .35s ease}
.gnbar b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--brass);border-radius:1px}
.gnreveal{display:grid;gap:10px;margin-top:12px}
.gnside{padding:10px;border-radius:14px;background:var(--panel)}
.gnside>b{display:block;margin-bottom:6px;font:600 13px var(--f-disp)}
.gnside .rmmelds{justify-content:flex-start}
.gnside .rmmeld em{color:var(--muted)}
.fbids.sp{gap:6px}.fbids.sp .fbid{min-width:38px;height:38px;font-size:15px;border-radius:10px}.fbid.nil{min-width:52px}
.crboard{position:relative;margin-top:6px;padding:10px 12px 20px;border-radius:16px;background:linear-gradient(180deg,#4a3120,#2e1e13);box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 6px 14px -6px rgba(0,0,0,.55)}
.crlane{display:flex;align-items:center;gap:10px;margin:4px 0}
.crlane em{font-style:normal;font-size:11px;color:#d8c49a;width:40px}
.crlane b{font:700 15px var(--f-num);color:#f3e6c4;width:34px;text-align:right}
.crtrack{position:relative;flex:1;height:10px;border-radius:99px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.45) 0 2px,transparent 2px calc(100% / 24)),rgba(0,0,0,.25);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.crpeg{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3cf,#d6af57 45%,#7d5f1f);box-shadow:0 2px 3px rgba(0,0,0,.6);transition:left .6s cubic-bezier(.3,.7,.2,1)}
.crlane.op .crpeg{background:radial-gradient(circle at 35% 30%,#ffd9d0,#b5473b 45%,#5a1a14)}
.crpeg.bk{opacity:.45;transform:scale(.8)}
.crstreets{position:absolute;left:62px;right:56px;bottom:4px;display:flex;justify-content:space-around;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(216,196,154,.55)}
.crmid{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 8px}
.crpile{flex:1;display:flex;justify-content:center;min-height:44px}
.crpile .card{--cw:28px;width:28px}.crpile>*+*{margin-left:-8px}
.crcount{display:flex;flex-direction:column;align-items:center;min-width:48px}
.crcount b{font:700 24px var(--f-num);color:var(--felt-ink)}.crcount small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--felt-mut)}
.crshows{display:grid;gap:8px;margin-top:12px}
.crshow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;background:var(--panel)}
.crshc{display:flex}.crshc .card{--cw:26px;width:26px}.crshc>*+*{margin-left:-7px}.crshc .card.stc{margin-left:4px;box-shadow:0 0 0 1.5px var(--brass)}
.crshow p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.35}
.crshow p b{font:600 13px var(--f-disp)}.crshow p span{color:var(--muted)}
.mbdummy{margin-top:8px}
.mbdummy small{display:block;text-align:center;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mbdummy .fhand{margin-top:4px;padding-top:12px;--cw:clamp(34px,10vw,44px)}
.mbrow{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:10px}
.mbrow .pill[aria-pressed="true"]{background:linear-gradient(180deg,#f3dc95,#d6af57 50%,#b58b30);color:var(--brass-ink);border-color:transparent}
.hon3{display:flex;justify-content:space-around;text-align:center;margin:2px 0 12px}
.hon3 span{display:flex;flex-direction:column}.hon3 b{font:700 26px var(--f-num);color:var(--brass)}.hon3 em{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.honrec td:first-child{text-align:left}
@media (prefers-reduced-motion:reduce){.rmdc,.crpeg,.gnbar i{transition:none}}
/* Honors (screen.js honorsHTML): the ribbon board, a walnut frame round green baize, one row a game, ribbons pinned on */
.honlead{margin:2px 4px 14px;font:500 15px/1.45 var(--f-disp);color:var(--ink)}
.fboard{position:relative;margin:0 0 14px;padding:14px 12px 12px;border-radius:16px;
  background:radial-gradient(rgba(0,0,0,.12) .8px,transparent 1.3px) 0 0/3px 3px,radial-gradient(90% 60% at 50% 0,#2c5a42,#1b3a2b 60%,#122a1f);
  box-shadow:inset 0 0 0 1px rgba(214,176,104,.55),inset 0 0 0 9px #3d2416,inset 0 0 0 10px rgba(0,0,0,.6),inset 0 12px 24px rgba(0,0,0,.4),0 12px 22px -12px rgba(0,0,0,.8)}
.fboard>*{position:relative;margin-left:8px;margin-right:8px}
.fbhead{display:flex;justify-content:space-between;align-items:baseline;padding-top:8px;font:700 10px/1.2 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:#e7cf96}
.fbhead em{font-style:normal;font-family:var(--f-num);letter-spacing:.04em}
.fbkey{margin-top:8px;font-size:12px;line-height:1.45;color:rgba(240,233,216,.78)}
.fbkey b{color:#f3e3bd}
.frows{list-style:none;padding:0;margin-top:6px;margin-bottom:0}
.frow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:10px 0;border-top:1px solid rgba(0,0,0,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.frhead{display:flex;align-items:center;gap:8px;min-width:0}
.frhead svg{flex:none;width:30px;height:30px}
.frhead b{font:700 15px/1.2 var(--f-disp);color:#f3e3bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fribs{display:flex;gap:2px;justify-content:flex-end}
.frib{display:flex;flex-direction:column;align-items:center;width:46px}
.frib svg{display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.frib em{font-style:normal;font:700 8px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:rgba(240,233,216,.4)}
.frib.on em{color:#e7cf96}
.frib.later{opacity:.45}
.frline{grid-column:1/-1;font-size:12px;line-height:1.35;color:rgba(240,233,216,.66)}
.fbnote{margin-top:10px;font-size:11.5px;line-height:1.45;color:rgba(240,233,216,.6)}
/* leaving a game: quiet links under Resume (lobby) and under the table */
.fquiet{display:flex;justify-content:center;gap:18px;margin-top:10px}.fquiet .fnew{margin:0}
.fleave{display:flex;justify-content:center;margin:14px 0 4px}.fleave .fnew{margin:0}
/* ===== The felt, part two: Three Card Poker, Mississippi Stud, Let It Ride, Jacks or Better, Baccarat ===== */
.fgfelt{gap:12px;padding:14px 8px 16px}
.fgrow{display:flex;flex-direction:column;align-items:center;gap:6px}
.fgrow small,.bacside small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--felt-mut);text-align:center}
.fgcards{display:flex;justify-content:center;gap:6px}
.fgcards .card{--cw:clamp(48px,14vw,62px);width:var(--cw)}
.fgspots{display:flex;justify-content:center;gap:clamp(8px,4vw,20px);flex-wrap:wrap}
.fgspot{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:54px}
.fgring{position:relative;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(232,207,146,.55);box-shadow:inset 0 0 0 4px rgba(0,0,0,.12);display:grid;place-items:center}
.fgspot.side .fgring{border-style:dashed}
.fgchip{display:block;width:36px;height:36px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5));animation:fgdrop .28s cubic-bezier(.3,1.4,.5,1)}
.fgchip svg{width:36px;height:36px;display:block}
@keyframes fgdrop{from{transform:translateY(-14px) scale(1.1);opacity:0}to{transform:none;opacity:1}}
.fgspot em{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--felt-mut);white-space:nowrap}
.fgopts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.fgopts .pill[aria-pressed="true"]{background:linear-gradient(180deg,#f3dc95,#d6af57 50%,#b58b30);color:var(--brass-ink);border-color:transparent}
.fgopts .pill small{font-weight:500;opacity:.75;margin-left:2px}

.fgwhy{margin:10px 4px 0;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.45}
.kv.tot{border-top:1px solid var(--line);margin-top:4px;padding-top:8px}
.jobpay{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(232,207,146,.25);font-size:11px}
.jobpay span{display:flex;justify-content:space-between;color:#d8c49a}.jobpay b{font:700 11.5px var(--f-num);color:#f3e6c4}
.jobpay span.hit{color:#1b140c;background:linear-gradient(180deg,#f3dc95,#c9a24b);border-radius:6px;padding:0 5px;margin:0 -5px}.jobpay span.hit b{color:#1b140c}
.jobcards{display:flex;justify-content:center;gap:4px;max-width:100%}
.jobc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;cursor:pointer;transition:transform .15s ease;-webkit-tap-highlight-color:transparent;min-width:0;flex:0 1 auto}.jobc .card{--cw:clamp(44px,14vw,60px);width:var(--cw)}
.jobc small{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--felt-mut);min-height:12px}
.jobc.held{transform:translateY(-8px)}.jobc.held .card{box-shadow:0 0 0 2.5px var(--brass),0 6px 12px rgba(0,0,0,.4)}.jobc.held small{color:var(--brass);font-weight:700}
.jobc:disabled{cursor:default}
.bacsides{display:flex;justify-content:space-around;gap:10px}
.bacside{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:12px;transition:background .3s ease}
.bacside.won{background:rgba(201,162,75,.18);box-shadow:inset 0 0 0 1px rgba(201,162,75,.55)}
.bacside .fgcards .card{--cw:clamp(40px,11vw,52px)}
.bacroad{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;min-height:16px;padding:0 6px}
.bacroad i{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font:700 8px var(--f-num);font-style:normal;color:#fff}
.bacroad i.b{background:#9c3a3a}.bacroad i.p{background:#2f5f9a}.bacroad i.t{background:#3c7a52}
.bacon .pill{min-width:92px;justify-content:center}
@media (prefers-reduced-motion:reduce){.fgchip{animation:none}.jobc{transition:none}}
/* ---- Lou at the table (core/lou.js): his card, his seat with Ask Lou, and the medallion ----
   Coach Lou is frosted glass with a gold L (brass stays the view's one accent: the gold is in his letter only). The ring says how close he sits:
   full = coaching every hand, half = watching for slips, hairline = sitting back. Mood tints it. */
.loum{--lou-arc:100;--lou-ring:#e6cd8c;position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px}
.loum.lv-mistake{--lou-arc:50}.loum.lv-silent .lr1{display:none}
.loum.m-slip{--lou-ring:#e0a77f}.loum.m-nod{--lou-ring:#e9e2c6}
.loum svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.loum circle{fill:none;stroke-width:2}
.loum .lr0{stroke:rgba(230,205,140,.22);stroke-width:1}
.loum .lr1{stroke:var(--lou-ring);stroke-dasharray:var(--lou-arc) 100;stroke-linecap:round;transition:stroke-dasharray .45s cubic-bezier(.2,.8,.2,1),stroke .2s ease}
.loum i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:700 17px/1 var(--f-hero,Georgia),Georgia,serif;font-style:normal;color:#f4d68a;text-shadow:0 1px 0 rgba(50,32,4,.85),0 0 8px rgba(244,214,138,.35);
  background:radial-gradient(80% 70% at 34% 24%,rgba(255,255,255,.5),rgba(255,255,255,.12) 42%,rgba(255,255,255,.03) 70%),linear-gradient(180deg,rgba(232,220,192,.34),rgba(110,94,70,.34));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,232,180,.5),inset 0 1px 1px rgba(255,255,255,.75),inset 0 -3px 6px rgba(40,26,8,.35),0 4px 10px rgba(0,0,0,.55)}
.loum.m-nod i{animation:louNod .6s cubic-bezier(.2,.8,.2,1)}
@keyframes louNod{0%{transform:translateY(0)}35%{transform:translateY(2px)}100%{transform:translateY(0)}}

.loucard{display:flex;gap:12px;align-items:flex-start;margin:12px 0 0;padding:12px 14px;border-radius:16px;color:#efe6d0;
  background:radial-gradient(90% 80% at 10% 0%,rgba(255,240,205,.11),rgba(255,240,205,0) 70%),linear-gradient(180deg,#221d18,#15120f);
  box-shadow:inset 0 0 0 1px rgba(230,205,140,.28),0 10px 22px -14px rgba(0,0,0,.8);animation:louIn .3s cubic-bezier(.2,.8,.2,1)}
@keyframes louIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.loucard.m-slip{box-shadow:inset 0 0 0 1px rgba(224,167,127,.38),0 10px 22px -14px rgba(0,0,0,.8)}
.lout{flex:1;min-width:0}
.lout small{display:flex;gap:8px;align-items:baseline;font:700 9.5px/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:#d9bf7e;margin:2px 0 5px}
.lout small em{font-style:normal;letter-spacing:.08em;text-transform:none;font-weight:600;font-size:11px;color:#a99f88}
.lout b{display:block;font-family:var(--f-disp);font-size:17px;line-height:1.25;color:#f6ecd2}
.lout p{margin:6px 0 0;font-size:14px;line-height:1.45;color:#d8ccb0}
.lout p b{display:inline;font:inherit;font-weight:700;color:#f2e6c4}
.lout .mut{color:#a99f88}
.lout p.loufoot{font-size:12px;color:#a99f88}
.loucard.sm{padding:10px 12px;margin:0 0 10px}.loucard.sm .lout b{font-size:15px}
.loucard.louseat{align-items:center;padding:10px 12px;background:linear-gradient(180deg,rgba(34,29,24,.72),rgba(21,18,15,.72));animation:none}
.loucard.louseat .lout b{font-size:15px}.loucard.louseat .lout p{font-size:12px;margin-top:3px;color:#a99f88}
.loucard.say{align-items:center}
.louask,.louok{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;font:700 13px/1 var(--f-body);color:#f3e3b6;
  background:linear-gradient(180deg,rgba(255,240,205,.22),rgba(255,240,205,.07));box-shadow:inset 0 0 0 1px rgba(230,205,140,.45),inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 #0c0907,0 6px 12px -6px rgba(0,0,0,.7);transition:transform .09s ease,box-shadow .09s ease}
.louask:active,.louok:active{transform:translateY(3px);box-shadow:inset 0 2px 4px rgba(0,0,0,.35),0 0 0 #0c0907}
.louok{background:transparent;color:#e6d6aa;box-shadow:inset 0 0 0 1px rgba(230,205,140,.35)}
.lou-p .loucard{margin-top:0}
.panel .loucard+.review{margin-top:10px}
.loutoast{display:flex;gap:10px;align-items:flex-start;text-align:left}
.loutoast .loum{width:36px;height:36px}.loutoast .loum i{width:28px;height:28px;font-size:14px}
.loutoast b{color:#f1dfae}

@media (prefers-reduced-motion:reduce){.loucard,.loum i,.loum .lr1{animation:none!important;transition:none!important}}
:root[data-motion="off"] .loucard,:root[data-motion="off"] .loum i,:root[data-motion="off"] .loum .lr1{animation:none!important;transition:none!important}
/* ---- The casino tables (every screen with a .thead): one frame for all eight games.
   Header, the sitting strip, the felt (it grows into the room so nothing floats in a void), then the tray (.dock),
   which rides in the page flow as a sticky shelf: it can never cover the felt's last row or hide content at any text size. ---- */
.hastabs.hasdock:has(.thead){padding-bottom:0}
.wrap:has(> #view > .thead){padding-bottom:0}
#view:has(> .thead){display:flex;flex-direction:column;min-height:calc(100svh - 18px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
#view:has(> .thead) > .dock{position:sticky;left:auto;right:auto;bottom:0;margin:auto -17px 0;padding:12px 17px calc(90px + env(safe-area-inset-bottom,0px))}
#view:has(> .thead) > :is(.table,.ftable){flex:1 0 auto;max-height:680px;display:flex;flex-direction:column;justify-content:space-evenly}
#view:has(> .thead) > :is(.table,.ftable,.czfelt) ~ :not(.dock){position:relative;z-index:1}
#view:has(> .thead) > :is(.table,.ftable) + :not(.dock){margin-top:14px}
#view:has(> .thead) > :not(.dock):nth-last-child(2){margin-bottom:14px}

/* the header: at larger text, or on a narrow phone, Leave and + Chips become round keys so the game's name and the stack keep the middle */
.thead{grid-template-columns:auto minmax(0,1fr) auto;min-height:44px}
.thead .tnav{min-height:40px;display:inline-flex;align-items:center;gap:4px}
.thead .tmid small{font-size:.62em;letter-spacing:.12em}
.thead .tmid b,.thead .tmid em{white-space:nowrap}
:root:is([data-text="large"],[data-text="xl"]) .thead .tnav,.thead .tnav.icon{width:42px;min-height:42px;padding:0;justify-content:center;border-radius:50%}
:root:is([data-text="large"],[data-text="xl"]) .thead .tnav span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
:root:is([data-text="large"],[data-text="xl"]) .thead .tnav.add::before{content:'+';font:700 22px/1 var(--f-body)}
.thead .tnav.add b{font-weight:inherit}
@media (max-width:359px){
  .thead .tnav{width:40px;min-height:40px;padding:0;justify-content:center;border-radius:50%}
  .thead .tnav span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .thead .tnav.add::before{content:'+';font:700 21px/1 var(--f-body)}
}

/* the sitting strip scales with the text instead of staying at a fixed 10px */
.sittx b{font-size:.62em}
.sittx em{font-size:.78em}
:root:is([data-text="large"],[data-text="xl"]) .sitpips{display:none}

/* printed felt: one silk-screen line for every empty card, the same on all eight tables */
.card.slot{border:1.25px solid rgba(239,227,196,.26);background:rgba(0,0,0,.07);box-shadow:inset 0 1px 3px rgba(0,0,0,.18)}
:root[data-tables="v2"] .table .felt-print{font-size:10.5px;letter-spacing:.1em;line-height:1.5;text-wrap:balance;padding:0 6px}

/* Hold'em: the five-card board is sized to the felt, not to the text setting, so it never runs off the rail */
.table .board{gap:5px;--cw:clamp(36px,calc((min(100vw,580px) - 146px) / 5),60px)}
.table .board .sep{flex:none;width:6px}

/* bet spots: the chip fills its circle, labels stay one line */
.fgring{width:52px;height:52px}
.fgring .fgchip,.fgring .fgchip svg{width:42px;height:42px}
:root[data-tables="v2"] .table.bjfelt .bjbet{width:52px;height:52px}
:root[data-tables="v2"] .table.bjfelt .bjbet .ringchip{width:42px}
.fgspot em{font-size:10px;letter-spacing:.08em}

/* Hold'em seats: a grid that wraps, never a strip cut off at the edge */
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;overflow:visible;padding:12px 0 0}
.sc{width:auto;min-width:0}
.sc .nm{font-size:.78em}
.sc .nm i{font-size:.82em;max-width:none;min-width:0}
.sc :is(.st,.bk,.rs){font-size:.72em}

/* the tray */
.dock .btn small{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view:has(> .thead) > .dock > p.mut{margin:8px 0 0;font-size:.8em;line-height:1.35;text-align:center;text-wrap:balance}
#view:has(> .thead) > .dock .chiprow{margin-bottom:10px}

/* craps: the chip rail reads on one line; the rules fold away under the layout */
.cz-chips > .chiprow{flex:none;gap:4px}
.cz-chips > .mut{flex:1;min-width:0;font-size:.8em;line-height:1.3;text-align:right;text-wrap:balance}
.czrules{margin-top:14px}
.czrsum{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:700 .95em var(--f-body);text-align:left;cursor:pointer}
.czrsum::after{content:'\203a';color:var(--muted);transition:transform .15s ease}
.czrules.open .czrsum::after{transform:rotate(90deg)}
.czrsum em{flex:1;white-space:nowrap;font-style:normal;font-weight:500;font-size:.72em;color:var(--muted);text-align:right}
.czrules.open .czrsum{border-radius:14px 14px 0 0;border-bottom-color:transparent}
.czrules > .panel{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}

/* word from the table (Lou's review, an accolade) arrives at the top, over the header, never over the keys you press */
body:has(.thead) :is(.toast,.toaststack){top:calc(10px + env(safe-area-inset-top,0px));bottom:auto}
body:has(.thead) .toaststack .toast{top:auto}
body:has(.thead) .toast.loutoast,body:has(.thead) .toaststack{width:min(440px,calc(100vw - 28px));max-width:none}
.loutoast span{min-width:0}

/* baccarat: a third card tucks under the second, as dealt, so a three-card hand never runs off the felt */
.bacside .fgcards{gap:0}
.bacside .fgcards .card + .card{margin-left:calc(var(--cw) * -.3)}
.ph > .mut{white-space:nowrap;flex:none}

/* ---- The rail, rebuilt: a padded leather bolster, drawn in three parts that all follow the table's own curve.
   ::after  the leather ring (masked to the rail): lamp-lit from above, a raised crown, a dark roll at the outer edge,
            and one faint line of stitching along the crown.
   ::before a zero-size frame on the felt's edge: the dark tuck where the leather rolls down to the brass.
   the table's own shadows: a fine brass lip (every ring concentric, no offsets, so none cross where the corners curve), the cloth sinking under the rail, a thin walnut edge below, the drop to the floor.
   Wider: the rail is slimmer and the table reaches to 8px from the screen edge, so the felt gains ~30px across. ---- */
#view:has(> .thead) > :is(.table,.ftable,.czfelt){margin-left:-9px;margin-right:-9px}
:root[data-tables="v2"] :is(.table,.ftable,.czfelt){--rw:17px;border-width:var(--rw);outline:0;
  box-shadow:
    inset 0 0 0 1px #0b0704,
    inset 0 0 0 1.9px #ecca7c,
    inset 0 0 0 2.7px #b08638,
    inset 0 0 0 3.6px #1a0f06,
    inset 0 0 12px 3px rgba(0,0,0,.42),
    inset 0 8px 16px -4px rgba(0,0,0,.36),
    inset 0 0 60px rgba(0,0,0,.26),
    0 0 0 1px #060302,
    0 2px 3px 1px rgba(0,0,0,.6),
    0 6px 6px 1px rgba(0,0,0,.45),
    0 24px 36px -10px rgba(0,0,0,.85),
    0 56px 80px -30px rgba(0,0,0,.9)}
:root[data-tables="v2"] .czfelt{--rw:15px}
:root[data-tables="v2"] :is(.table,.ftable,.czfelt)::after{inset:calc(var(--rw) * -1);padding:var(--rw);outline:1px dashed rgba(238,216,176,.34);outline-offset:calc(var(--rw) * -.38);
  background:
    linear-gradient(112deg,rgba(255,236,200,0) 44%,rgba(255,236,200,.12) 50%,rgba(255,236,200,0) 56%) 130% 0/280% 100% no-repeat,
    radial-gradient(64% 38px at 50% 0,rgba(var(--rm-lamp),.2),rgba(var(--rm-lamp),0) 100%) 0 0/100% 100% no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='1.1 .95' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1 0 0 .5'/></filter><rect width='120' height='120' filter='url(%23l)'/></svg>") 0 0/120px 120px,
    linear-gradient(180deg,var(--rm-rail2) 0%,var(--rm-rail3) 34%,var(--rm-rail4) 78%,var(--rm-rail5) 100%) 0 0/100% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.8),
    inset 0 0 0 1.5px rgba(255,232,196,.07),
    inset 0 0 2px 2px rgba(0,0,0,.5),
    inset 0 2px 3px 4px rgba(var(--rm-upA),.26),
    inset 0 1px 5px 7px rgba(var(--rm-upA),.12),
    inset 0 -3px 6px 6px rgba(0,0,0,.28)}
:root[data-tables="v2"] :is(.table,.ftable,.czfelt)::before,:root[data-tables="v2"] .table.bjfelt::before{inset:0;left:0;right:0;top:0;bottom:0;height:auto;opacity:1;border:0;z-index:4;
  box-shadow:0 0 3px 3px rgba(0,0,0,.4),0 0 6px 5px rgba(0,0,0,.16)}
/* the tuck follows the felt's own curve (the rail's radius less its width); an inherited outer radius bulged into the corners and shadowed the brass */
:root[data-tables="v2"] .table::before,:root[data-tables="v2"] .table.bjfelt::before{border-radius:calc(36px - var(--rw)) calc(36px - var(--rw)) calc(120px - var(--rw)) calc(120px - var(--rw)) / calc(36px - var(--rw)) calc(36px - var(--rw)) calc(60px - var(--rw)) calc(60px - var(--rw))}
:root[data-tables="v2"] .ftable::before{border-radius:calc(38px - var(--rw))}
:root[data-tables="v2"] .czfelt::before{border-radius:calc(34px - var(--rw))}
/* craps: the OFF puck rests on the rail's edge, whole, above the leather rather than tucked under it */
:root[data-tables="v2"] .czfelt > .czoff{z-index:5}
/* craps on a narrow phone: smaller dice so the call beside them keeps to two lines */
@media (max-width:359px){.cz-row{gap:8px}.cz-row .dice svg{width:40px;height:40px}}
/* Light appearance: the table room stays dark, so the header's stack reads in the dark ink */

/* the sitting strip rides under the felt, not above it: the table takes the top of the screen */
#view:has(> .thead) > :is(.table,.ftable,.czfelt,.panel:has(.table)){order:1}
#view:has(> .thead) > :is(.table,.ftable,.czfelt,.panel:has(.table)) ~ *{order:3}
#view:has(> .thead) > .dock{order:4}
#view:has(> .thead) > :is(.sitbar,.sitinfo){position:relative;z-index:1}
#view:has(> .thead) > .sitbar{order:2;margin:14px 0 0}
#view:has(> .thead) > .sitinfo{order:2;margin:8px 0 0}
#view:has(> .thead):has(> .sitbar) > :is(.table,.panel):nth-last-child(2){margin-bottom:0}
#view:has(> .thead):has(> :is(.table,.panel):nth-last-child(2)) > :is(.sitbar:not(:has(+ .sitinfo)),.sitinfo){margin-bottom:14px}
/* ---- the dealing shoe (DSHOE in bj/table.js; Baccarat too): smoked glass on a walnut sled, on the dealer's left, a card at its mouth.
   deal.js slides each card out of it. */
.table.bjfelt,.fg-bac{position:relative}
.dshoe{position:absolute;z-index:1;top:16px;right:14px;width:50px;height:30px;transform:perspective(160px) rotateX(18deg) rotate(-8deg);pointer-events:none;
  border-radius:5px 9px 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 38%,rgba(0,0,0,.2)),linear-gradient(90deg,#1b1410,#2e2219 60%,#3b2b1f);
  box-shadow:inset 0 1px 0 rgba(255,240,215,.28),inset 0 -2px 0 rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.45),0 6px 10px -2px rgba(0,0,0,.6)}
/* the brass lip at the mouth, and the next card waiting in it */
.dshoe::before{content:'';position:absolute;left:-1px;top:4px;bottom:4px;width:5px;border-radius:2px;background:linear-gradient(90deg,#6e4f22,#d9b878 45%,#8a6630);box-shadow:0 0 0 .5px rgba(0,0,0,.5)}
.dshoe i{position:absolute;left:-7px;top:7px;width:16px;height:16px;border-radius:2px;background:linear-gradient(90deg,#efe6d0 0 2px,#7a2230 2px);transform:skewY(-6deg);box-shadow:0 1px 2px rgba(0,0,0,.55)}

/* ---- betting like a real table: the bet stays up between hands; ×2 beside the chips; tap the circle to take the top chip back ---- */
.chiprow .chipb{flex:0 1 62px;min-width:0}
.chiprow .chipb svg{width:100%;height:auto}
.chipx2{display:grid;place-items:center;aspect-ratio:1;align-self:center;max-width:52px;border-radius:50%!important;cursor:pointer;
  font:800 15px/1 var(--f-body);letter-spacing:.02em;color:#e8cf8e;background:radial-gradient(circle at 50% 35%,rgba(255,236,190,.1),rgba(0,0,0,.25))!important;
  box-shadow:inset 0 0 0 1.5px rgba(215,181,116,.55),inset 0 0 0 5px rgba(0,0,0,.2),inset 0 0 0 6px rgba(215,181,116,.2),0 3px 0 rgba(0,0,0,.4);transition:transform .09s ease}
.chipx2:active{transform:translateY(2px)}
.chipx2:disabled{opacity:.35}

.table.bjfelt .bjbet[data-act]{cursor:pointer}
/* after the hand: the dealer pays beside your bet from the rack, or takes a lost bet to it */
.bjh{position:relative}
.bjpaid{position:absolute;bottom:6px;left:calc(50% + 32px);display:block;width:40px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.bjpaid svg{display:block;width:100%;height:auto}
.bjbet.gone .ringchip{opacity:0}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) .bjpaid{animation:bjPay .55s cubic-bezier(.2,.8,.2,1.12) .25s both}
  :root:not([data-motion="off"]) .bjbet.gone .ringchip{animation:bjTake .5s cubic-bezier(.5,0,.7,.4) .35s both}
}
@keyframes bjPay{from{opacity:0;transform:translate(0,-230px) scale(.8)}to{opacity:1;transform:none}}
@keyframes bjTake{from{opacity:1;transform:none}to{opacity:0;transform:translate(0,-230px) scale(.8)}}
/* ===== Blackjack, with depth (bj/table.js): the felt tipped a little away from you under one lamp, the insurance line
   printed on it, a discard tray that fills as the shoe is dealt, a brass sign with the limits, cards with an edge and
   chips standing on their own clay. The other seven follow it (end of this file). ===== */
:root[data-tables="v2"] .table.bjfelt{transform:perspective(1100px) rotateX(8deg);transform-origin:50% 100%;
  background:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,0) 32%),radial-gradient(58% 40% at 50% 40%,rgba(255,238,204,.15),rgba(255,238,204,0) 72%),
    radial-gradient(130% 100% at 50% 42%,rgba(0,0,0,0) 52%,rgba(0,0,0,.34) 100%),
    radial-gradient(rgba(255,255,255,.04) .7px,transparent 1.1px) 0 0/4px 4px,radial-gradient(rgba(0,0,0,.07) .8px,transparent 1.2px) 2px 1px/5px 5px,
    radial-gradient(120% 90% at 50% 10%,var(--felt1) 0%,var(--felt2) 55%,var(--felt3) 100%)}
/* the insurance line: gold silk-screen following the arc */
.bjins{display:block;width:min(86%,330px);height:auto;margin:-2px auto -6px;color:#dcc488;position:relative;z-index:1}
.bjins text{font:700 9.5px var(--f-disp);letter-spacing:.2em;text-transform:uppercase;fill:currentColor;opacity:.78}
/* cards with an edge: a lit face, the card's thickness and its shadow on the felt */
:root[data-tables="v2"] .table.bjfelt .card:not(.slot){box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 0 #d6ccb2,0 2px 0 #a3977c,0 3px 2px rgba(0,0,0,.35),0 8px 12px -4px rgba(0,0,0,.5)}
/* a bet standing on its clay: an edge per chip, up to four, each in its own chip's colour (--c1 the top chip) */
:root[data-tables="v2"] .table.bjfelt .bjbet .ringchip{border-radius:50%;position:relative;z-index:1;
  box-shadow:0 calc(clamp(0,var(--cn,1),1) * 2.5px) 0 color-mix(in srgb,var(--c1,#333) 70%,#000),
    0 calc(clamp(0,var(--cn,1) - 1,1) * 5px) 0 color-mix(in srgb,var(--c2,#333) 82%,#000),
    0 calc(clamp(0,var(--cn,1) - 2,1) * 7.5px) 0 color-mix(in srgb,var(--c3,#333) 70%,#000),
    0 calc(clamp(0,var(--cn,1) - 3,1) * 10px) 0 color-mix(in srgb,var(--c4,#333) 82%,#000),
    0 calc(3px + var(--cn,1) * 2.5px) 5px rgba(0,0,0,.55)}
/* the amount printed small beside the stack, as the dealer would call it */
.table.bjfelt .bjamt{position:absolute;right:calc(100% + 7px);top:50%;transform:translateY(-50%);font:700 11px/1 var(--f-num);color:#e8d29a;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
:root[data-tables="v2"] .table.bjfelt .bjbet .ringchip{translate:0 calc(var(--cn,1) * -1.5px)}
/* the discard tray: clear acrylic on the dealer's right, used cards stacking up in it */
.bjdisc{position:absolute;z-index:1;top:18px;left:16px;width:34px;height:30px;border-radius:3px;transform:rotate(6deg);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 40%,rgba(0,0,0,.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.35),0 4px 8px -2px rgba(0,0,0,.55)}
.bjdisc i{position:absolute;left:4px;right:4px;bottom:3px;max-height:24px;border-radius:1px;
  background:repeating-linear-gradient(180deg,#eee5cf 0 1px,#c9bea2 1px 2px);box-shadow:0 0 0 .5px rgba(0,0,0,.3)}
/* the limits: a small brass plate set on the felt by the tray */
.bjsign{position:absolute;z-index:1;top:54px;left:14px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 5px 3px;border-radius:2px;pointer-events:none;opacity:.86;
  background:linear-gradient(180deg,#b89a5e,#8c7140 55%,#5e4a26);box-shadow:inset 0 1px 0 rgba(255,240,200,.35),inset 0 -1px 0 rgba(40,28,8,.6),0 1px 2px rgba(0,0,0,.5)}
.bjsign small{font:800 5.5px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:#2e2006}
.bjsign b{font:700 8.5px/1 var(--f-num);color:#1e1404;white-space:nowrap}
/* the shoe on the felt: the deck's ivory edges seen through its smoked top (how far it's dealt shows in the
   discard tray); a darker sled under it */
:root[data-tables="v2"] .table .dshoe{width:56px;height:32px;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.02) 40%,rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg,rgba(239,230,207,.75) 0 1px,rgba(190,178,150,.6) 1px 2px) 10px 6px/40px 18px no-repeat,
    linear-gradient(90deg,#1b1410,#2e2219 60%,#3b2b1f)}
/* the dealer's tray: each column a stack of chips, lit along its top */
:root[data-tables="v2"] .bjtray i{border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 35%,rgba(0,0,0,.35)),repeating-linear-gradient(90deg,var(--c) 0 2.6px,rgba(0,0,0,.5) 2.6px 3.4px)}
/* ===== the other seven tables, after Blackjack: Hold'em and the house games tipped a little away under the same one lamp
   (Jacks is a machine and stays upright; Craps' long layout stays flat so every bet reads), cards with an edge, the
   dealer's chip tray at the far rail, a shuffler on the dealer's left (Baccarat its shoe and discard tray), the limits on
   a brass sign by your seat, and each game's rule printed on an arc (feltArc in felt/poker-hands.js). ===== */
:root[data-tables="v2"] :is(.ftable.fgfelt:not(.fg-job),.table.uthfelt){transform:perspective(1100px) rotateX(8deg);transform-origin:50% 100%}
:root[data-tables="v2"] :is(.ftable.fgfelt,.table.uthfelt,.czfelt){
  background:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,0) 32%),radial-gradient(58% 40% at 50% 40%,rgba(255,238,204,.15),rgba(255,238,204,0) 72%),
    radial-gradient(130% 100% at 50% 42%,rgba(0,0,0,0) 52%,rgba(0,0,0,.34) 100%),
    radial-gradient(rgba(255,255,255,.04) .7px,transparent 1.1px) 0 0/4px 4px,radial-gradient(rgba(0,0,0,.07) .8px,transparent 1.2px) 2px 1px/5px 5px,
    radial-gradient(120% 90% at 50% 10%,var(--felt1) 0%,var(--felt2) 55%,var(--felt3) 100%)}
:root[data-tables="v2"] .czfelt{background-size:auto,auto,auto,4px 4px,5px 5px,auto}
:root[data-tables="v2"] :is(.ftable,.table.uthfelt) .card:not(.slot){box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 0 #d6ccb2,0 2px 0 #a3977c,0 3px 2px rgba(0,0,0,.35),0 8px 12px -4px rgba(0,0,0,.5)}
:root[data-tables="v2"] .ftable.fg-job .jobc.held .card{box-shadow:0 0 0 2.5px var(--brass),0 1px 0 #d6ccb2,0 2px 0 #a3977c,0 8px 14px -4px rgba(0,0,0,.55)}
/* the tray rides the far rail; the felt makes room under it */
.ftable.fgfelt:not(.fg-job),.table.uthfelt{position:relative}
:root[data-tables="v2"] .ftable.fgfelt:not(.fg-job){padding-top:34px}
:root[data-tables="v2"] .table.uthfelt{padding-top:30px}
.fgfelt > .bjtray,.uthfelt > .bjtray{position:absolute;top:0;left:50%;width:56%;max-width:230px;margin:0;transform:translateX(-50%);z-index:1}
/* Baccarat: the shoe and the discard tray sit above the two hands */
:root[data-tables="v2"] .ftable.fgfelt.fg-bac{padding-top:58px}
.fg-bac > .bjdisc{top:18px;left:16px}
/* the shuffler: a dark machine with a brass slot, the next deck's ivory edge showing */
.fgshuf{position:absolute;z-index:1;top:16px;right:14px;width:40px;height:30px;border-radius:5px;transform:perspective(160px) rotateX(18deg) rotate(-6deg);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 40%,rgba(0,0,0,.25)),linear-gradient(90deg,#141110,#24201d 60%,#2e2925);
  box-shadow:inset 0 1px 0 rgba(255,240,215,.22),inset 0 -2px 0 rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.5),0 6px 10px -2px rgba(0,0,0,.6)}
.fgshuf::before{content:'';position:absolute;left:7px;right:7px;top:6px;height:4px;border-radius:2px;background:linear-gradient(180deg,#5e4520,#d9b878 55%,#8a6630);box-shadow:0 0 0 .5px rgba(0,0,0,.6)}
.fgshuf i{position:absolute;left:9px;right:9px;top:14px;height:9px;border-radius:1px;background:repeating-linear-gradient(180deg,rgba(239,230,207,.8) 0 1px,rgba(180,168,140,.6) 1px 2px);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
/* the limits sign stands by your seat, clear of every card */
.ftable > .fgsign{top:auto;bottom:16px;left:16px}
/* a rule printed on the arc between the dealer's cards and the bets */
.fgfelt .fgarc{margin:-4px auto -8px}
.fgarc text{letter-spacing:.16em}
/* craps: the chips on the layout stand on their own clay */
:root[data-tables="v2"] .czfelt .czchip svg{filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.55)) drop-shadow(0 4px 4px rgba(0,0,0,.45))}
/* ===== You > Record: one glass hero, then panels. Brass only on the level number. ===== */
.yhero{position:relative;margin:0 0 12px;padding:16px 16px 12px;border-radius:22px;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.02) 45%),radial-gradient(80% 60% at 100% 0%,rgba(201,162,75,.16),rgba(201,162,75,0) 70%),radial-gradient(70% 60% at 0% 100%,rgba(23,86,63,.22),rgba(23,86,63,0) 70%),rgba(24,20,16,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 0 -1px 2px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.5),0 18px 40px -18px rgba(0,0,0,.85)}
@media (prefers-reduced-transparency:reduce){.yhero{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,#2a221a,#1a1511)}}
.yhtop{display:flex;align-items:center;gap:12px}
.yhav{flex:none;width:64px;height:64px}.yhav svg{display:block;width:100%;height:auto}
.yhid{flex:1;min-width:0}
.yhid small,.yhlv small,.ystx small{display:block;font:700 9.5px/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.yhid b{display:block;font-family:var(--f-disp);font-size:22px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.5),0 3px 12px rgba(0,0,0,.4)}
.yhlv{flex:none;text-align:right}
.yhlv b{display:block;font:700 40px/1 var(--f-num);font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fffaf0,#f3dda0 45%,#c9a24b);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))}
.yhero .xpbar{margin-top:14px;height:8px}
.yhxp{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.yh3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.yh3 span{min-width:0;padding:10px 8px;border-radius:14px;text-align:center;background:rgba(0,0,0,.22);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.05)}
.yh3 b{display:block;font:700 19px/1.1 var(--f-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.yh3 b i{font-style:normal;font-size:12px;color:var(--muted)}
.yh3 em{display:block;margin-top:4px;font-style:normal;font-size:11px;line-height:1.2;color:var(--muted)}
.yh3.flat{margin-top:10px}
.yhero .note{margin:10px 2px 0}
.yskill{border-top:1px solid var(--line)}
.yskills h2+.yskill{border-top:0}
.yskill summary{display:flex;align-items:center;gap:12px;padding:10px 0;cursor:pointer;list-style:none}
.yskill summary::-webkit-details-marker{display:none}
.ysc{flex:none;width:44px;height:44px}.ysc svg{display:block;width:100%;height:auto}
.ystx{flex:1;min-width:0}
.ystx b{display:block;font-family:var(--f-disp);font-size:16px;color:var(--ink)}
.ystx em{display:block;font-style:normal;font-size:12.5px;color:var(--muted)}
.ysbar{flex:none;width:64px;height:5px;border-radius:5px;overflow:hidden;background:rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.ysbar i{display:block;height:100%;background:linear-gradient(90deg,#8a6a2c,#e2c47e)}
.yskill .go{flex:none;color:var(--muted);transition:transform .15s ease}
.yskill[open] .go{transform:rotate(90deg)}
.ysbody{padding:0 0 12px}
.yroom{display:flex;align-items:center;gap:12px}
.yrc{flex:none;width:52px;height:52px}.yrc svg{display:block;width:100%;height:auto}
.yrooms .note{margin:10px 2px 0}

@media (prefers-reduced-motion:reduce){.yskill .go{transition:none}}
:root[data-motion="off"] .yskill .go{transition:none}

/* ===== The Locker: Collection's headline plaque (Play now's felt), and the Locker page ===== */

.lkme{display:flex;align-items:center;gap:14px}
.lkme .field{flex:1;min-width:0;margin-top:0}
.lkav{flex:none;filter:drop-shadow(0 5px 7px rgba(0,0,0,.45))}
.lkyou h2{margin-top:16px}
.avrow button.avs{border:0;background:none;padding:4px 2px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px;cursor:pointer;font:inherit;color:var(--muted);font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.avrow button.avs.on{color:var(--brass);box-shadow:inset 0 0 0 1.5px rgba(214,179,106,.7)}
.avrow button.avs.locked{cursor:default}
.avauto i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:20px;color:#d6b36a;box-shadow:inset 0 0 0 1.5px rgba(214,179,106,.5)}
.setlk{margin:6px 2px 10px}
/* the club's own site: the word at the door (memDoorHTML, over the welcome) and the membership card (memCardHTML, You > Record) */
.mdoor .wxline{opacity:1}
.mdrow{display:flex;gap:8px;justify-content:center;margin-top:12px;width:100%;max-width:320px}
.mdin{flex:1;min-width:0;padding:11px 12px;border:1px solid rgba(201,162,75,.35);border-radius:3px;background:rgba(10,8,6,.72);color:#efe4cc;
  font:600 15px/1.2 var(--f-body);letter-spacing:.14em;text-align:center;text-transform:uppercase;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.mdin::placeholder{color:rgba(185,168,136,.45);letter-spacing:.08em;text-transform:none;font-weight:500}
.mdin:focus{outline:none;border-color:rgba(214,186,132,.75)}
.mdoor .wxknock:disabled{opacity:.5}
.mdpanel{max-width:none;margin-top:10px}
.mdpanel .mdin{background:var(--panel2);color:var(--ink);border-color:var(--line)}
/* the card itself: black lacquer, a brass foil edge, the club's name pressed in gold */
.mcard{position:relative;aspect-ratio:1.586;max-width:320px;margin:4px auto 12px;padding:18px 20px;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(120% 80% at 20% 0%,#2a241d 0%,#110e0b 55%,#070605 100%);color:#d9bd84;
  box-shadow:0 1px 0 rgba(255,236,200,.08) inset,0 0 0 1px rgba(201,162,75,.45),0 0 0 4px #0b0907,0 0 0 5px rgba(201,162,75,.25),0 14px 30px rgba(0,0,0,.55)}
.mfoil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,230,180,0) 30%,rgba(255,230,180,.09) 46%,rgba(255,230,180,0) 60%)}
.mclub{font:700 21px/1 var(--f-hero);letter-spacing:.02em;color:#e3c88f;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.mmem{margin-top:6px;font:600 9.5px/1 var(--f-body);letter-spacing:.34em;text-transform:uppercase;color:rgba(217,189,132,.6)}
.mno{margin-top:auto;font:600 22px/1 'Bitter',serif;letter-spacing:.12em;color:#efdcae;text-shadow:0 -1px 0 rgba(0,0,0,.7),0 1px 0 rgba(255,236,200,.12)}
.msince,.mroom{font:500 10.5px/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(217,189,132,.55)}
.msince{margin-top:8px}
.mroom{position:absolute;right:20px;bottom:18px}
.mcard.mnew{animation:mcIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes mcIn{from{transform:translateY(24px) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
:root[data-motion="off"] .mcard.mnew{animation:none}
.mkey{margin:0 0 6px;padding:8px 10px;border:1px dashed var(--line);border-radius:4px;font:500 12px/1.4 ui-monospace,monospace;word-break:break-all;color:var(--muted)}
.mmoved a.btn{text-decoration:none;color:inherit}
/* Collection, the trophy cabinet: a walnut header holding three engraved plates (the shelf you're on is polished brass, the others aged), the felt-lined shelves below */
.cabplates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 12px;padding:10px;border-radius:16px;
  background:repeating-linear-gradient(92deg,rgba(0,0,0,0) 0 7px,rgba(0,0,0,.09) 7px 8px,rgba(255,220,170,.03) 8px 13px),linear-gradient(180deg,#4a2c1a,#331d11 55%,#26150c);
  box-shadow:inset 0 1px 0 rgba(255,214,160,.18),inset 0 -2px 0 rgba(0,0,0,.45),0 2px 0 #120a05,0 12px 20px -10px rgba(0,0,0,.7)}
.cabplate{min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;border:0;border-radius:6px;cursor:pointer;color:#cdb789;
  background:linear-gradient(180deg,#5d4a2c,#3f311d);box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,230,170,.18),0 1px 0 rgba(0,0,0,.6);transition:transform .12s}
.cabplate small{font:700 10px/1.1 var(--f-num);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.cabplate b{font:700 19px/1 var(--f-num);font-variant-numeric:tabular-nums}
.cabplate b i{font-style:normal;font-size:11px;opacity:.7}
.cabplate:active{transform:translateY(1px)}
.cabplate.on{color:#2a1c0b;background:linear-gradient(180deg,#f2dc94,#d1a94f 48%,#a87d2e);box-shadow:inset 0 0 0 1px #6e5020,inset 0 1px 0 #fff4c9,0 1px 0 rgba(0,0,0,.6),0 0 14px -4px rgba(230,190,100,.5)}
.cabshelf{margin-top:0}
.cabshelf>.cabnote:first-child{margin:0 4px 2px}
.cabnote{margin:8px 4px 0;font-size:12.5px;line-height:1.35;color:var(--felt-mut)}
/* a pin's story, unfolded right under its row */
.cabshelf .pindetail{margin:10px 0 2px}
/* You: Daily Hands at all eight tables, four to a row; the cabinet in one line */
.yh3.y4{grid-template-columns:repeat(4,1fr);gap:6px}
.yh3.y4 span{padding:9px 4px}
.yh3.y4 em{font-size:10.5px}
.ycoll{display:flex;width:100%;margin:2px 0 12px;padding:12px 4px;gap:8px;font-size:13px}
.ycoll em{margin-left:auto;font-style:normal;font-weight:400;color:var(--muted)}
/* ---- Home: your seat (playHeroHTML) ----
   A dark card like the Tables wheel's: your last table drawn flat from above (tsSceneHTML; its moment lives in tables-file.css),
   its name, one line, Play now and a quiet Jump to a table. No frosted glass here, as on the Tables page. */
.hplay{position:relative;margin:16px 0 0;padding:0 0 14px;border-radius:16px;overflow:hidden;
  background:var(--tile,linear-gradient(180deg,#2a211a 0,#1f1813 60px,#17120e 100%));
  box-shadow:inset 0 1px 0 rgba(255,236,200,.16),inset 0 0 0 1px rgba(201,162,75,.22),0 3px 0 #070504,0 16px 26px -12px rgba(0,0,0,.8)}
/* the top: the game's medallion and its name, the whole row taps to the table */
.hptop{display:flex;align-items:center;gap:14px;padding:16px 16px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hptop:active{opacity:.85}
.hpem{flex:none;width:62px;height:62px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}
.hpem svg{display:block;width:62px;height:62px}
.hpinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hpinfo small{font:700 10px/1.2 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:#d9b867}
.hpinfo b{font:700 23px/1.15 var(--f-disp);color:#f5e9c9;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.hpinfo em{font:500 12.5px/1.3 var(--f-body);font-style:normal;color:#b3a78e}
.hpinfo em strong{color:#e2c173;font-family:var(--f-num);font-weight:700}
.hpkeys{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 14px 0}
.hpkeys .btn{flex:0 1 210px;min-width:0;min-height:46px}
/* Jump to a table: a quiet link beside the key, no frame */
.hpjump{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 6px 0 10px;border:0;background:none;font:700 12.5px/1 var(--f-body);color:#c9b995;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hpjump span{font-size:17px;color:#d0aa68}
.hpjump:active{opacity:.7}

/* ---- Home: Daily Hands, one clear pane of glass the width of the page ----
   Frosted over the room, a brass edge and a second fine line inside. No sheen, no light across it: just glass. */
.hduo{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0 4px}
.hglass{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:13px 14px 14px;border:1px solid rgba(215,181,116,.42);border-radius:16px;text-align:left;color:#f0e9d8;font:inherit;cursor:default;
  background:linear-gradient(180deg,rgba(255,240,215,.06),rgba(255,240,215,0) 45%,rgba(0,0,0,.06));
  -webkit-backdrop-filter:blur(3px) saturate(1.5) brightness(1.08);backdrop-filter:blur(3px) saturate(1.5) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,248,230,.28),inset 0 -1px 0 rgba(0,0,0,.35),0 14px 22px -14px rgba(0,0,0,.85);transition:transform .15s,box-shadow .15s}
.hglass::before{content:'';position:absolute;inset:4px;border-radius:12px;border:1px solid rgba(215,181,116,.2);pointer-events:none}
button.hglass{cursor:pointer}
button.hglass:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,248,230,.2),inset 0 2px 6px rgba(0,0,0,.4)}
.hglass small{font:700 10px var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#e3c77e;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hglass b{font:700 14px/1.2 var(--f-body);color:#f3ead6;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.hglass em{font-style:normal;font-size:11.5px;line-height:1.25;color:#b9ae96}
@media (prefers-reduced-transparency:reduce){.hglass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(24,20,16,.86)}}
/* a slim pane, a small dot per hand that fills as it's played */
.hgdaily{padding:11px 16px 12px;gap:3px}
.hgdhd{display:flex;width:100%;justify-content:space-between;align-items:center}
.hgdots{display:flex;gap:6px}
.hgdots i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.2px rgba(215,181,116,.6)}
.hgdots i.on{background:#d6b36a;box-shadow:0 0 6px rgba(214,179,106,.6)}

/* ---- the weekly stipend, ready: a small brass tag hung beside the balance (only when it's ready) ---- */
.hwrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 10px}
.hstip{flex:none;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:8px;padding:6px 11px 7px 15px;border:0;border-radius:6px 9px 9px 6px;cursor:pointer;-webkit-tap-highlight-color:transparent;color:#2a1e05;
  background:linear-gradient(180deg,#f3dda0 0%,#d9b467 45%,#b58b3e 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,230,.7),inset 0 -1px 0 rgba(90,62,20,.5),0 2px 0 #5a3e14,0 8px 14px -6px rgba(0,0,0,.7);transition:transform .09s ease,box-shadow .09s ease}
/* the tag's eyelet */
.hstip::before{content:'';position:absolute;left:5px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#3a2810;box-shadow:inset 0 1px 1px rgba(0,0,0,.6),0 1px 0 rgba(255,244,210,.5)}
.hstip small{font:800 8.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#4a3208}
.hstip b{font:700 14px/1 var(--f-num);font-variant-numeric:tabular-nums;color:#2a1e05}
.hstip:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,250,230,.5),inset 0 2px 4px rgba(90,62,20,.4),0 0 0 #5a3e14,0 3px 6px -3px rgba(0,0,0,.6)}
/* ===== Learn with Lou (shell/course.js): the course page, a round to watch, a lesson (the Ledger itself: shell/ledger.css) ===== */
.tkhost.june{background:radial-gradient(90% 70% at 15% 0%,rgba(230,170,160,.1),rgba(230,170,160,0) 70%),linear-gradient(180deg,#221a19,#151110);box-shadow:inset 0 0 0 1px rgba(200,150,140,.32),0 10px 24px -12px rgba(0,0,0,.8)}
.hmono.june{color:#f6e9e2;font-style:italic;background:radial-gradient(70% 70% at 38% 30%,#c88e86,#7d3f3c 62%,#3a1817);box-shadow:0 0 0 2px #170a0a,0 0 0 3px rgba(220,170,160,.45),0 4px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35)}

/* a small felt: a dark island in both themes */
.cofelt{position:relative;margin:4px 0 12px;padding:14px 14px 16px;border-radius:20px;display:grid;gap:10px;
  background:radial-gradient(120% 90% at 50% 0%,var(--felt1),var(--felt2) 60%,var(--felt3));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -14px 30px rgba(0,0,0,.35),0 0 0 4px #2a1b10,0 0 0 5px rgba(201,162,75,.35),0 14px 28px -12px rgba(0,0,0,.8)}
.cofelt.won{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -14px 30px rgba(0,0,0,.35),0 0 0 4px #2a1b10,0 0 0 5px rgba(222,190,110,.8),0 14px 28px -12px rgba(0,0,0,.8)}
.cofelt.miss{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -14px 30px rgba(0,0,0,.35),0 0 0 4px #2a1b10,0 0 0 5px rgba(150,60,70,.7),0 14px 28px -12px rgba(0,0,0,.8)}
.corow small{display:block;margin-bottom:6px;font:700 9.5px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:rgba(244,237,217,.72)}
.corow small b{font:700 13px/1 var(--f-num);letter-spacing:0;color:#f4edd9;margin-left:4px}
.cocards{display:flex;gap:8px;min-height:var(--ch,84px)}
.cochips{position:absolute;right:16px;bottom:16px;display:flex;gap:4px}
.coq{margin:4px 2px 10px;font-family:var(--f-disp);font-size:18px;color:var(--ink);text-align:center}
.coans{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin-bottom:10px}
.codots{display:flex;gap:6px;justify-content:center;margin:2px 0 12px}
.codots i{width:7px;height:7px;border-radius:50%;background:rgba(214,176,104,.2)}
.codots i.on{background:rgba(214,176,104,.6)}
.codots i.cur{background:#c9a24b;transform:scale(1.25)}
.cobig{margin:6px 0 14px;padding:22px 18px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 60%),var(--panel);box-shadow:inset 0 0 0 1px rgba(214,176,104,.22)}
.cobig p{margin:10px 0 0;font-family:var(--f-disp);font-size:20px;line-height:1.4;color:var(--ink)}
.coend{text-align:center}
.coend .big{font:700 46px/1 var(--f-num);color:var(--ink)}
.coend .big small{font-size:20px;color:var(--muted)}

.cochips .ringchip{display:block;width:44px;height:44px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.cochips .ringchip+.ringchip{margin-left:-14px}
.cochips svg{display:block;width:100%;height:100%}

/* a course: Lou's (or June's) word, the four steps as one line, the step you're on */
.costage{margin:4px 0 12px;padding:16px 16px 18px 20px;border-radius:3px 12px 12px 3px;color:var(--ld-ink);background:var(--ld-page);box-shadow:var(--ld-edge)}   /* a page of the Ledger (shell/ledger.css) */
.cotake{display:flex;gap:12px;align-items:center;margin:0 0 16px;font:italic 400 14.5px/1.45 var(--f-body);color:#d8ccb0}
.cotake .hmono{width:34px;height:34px;font-size:16px}
.costep{margin-top:16px;padding-top:16px;border-top:1px solid rgba(214,176,104,.16)}
  
.costep h2{margin:4px 0 0;font-family:var(--f-disp);font-size:24px}
.costep p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.costep em{display:block;margin-top:8px;font:700 9.5px/1.3 var(--f-body);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#c9a45c}
.costep .actions{margin-top:14px}
.cofold{margin-top:4px}
.cobk .colead{margin:0;font-size:15px;line-height:1.5}
.cobk h2{margin-top:0}
.cofold .lhrow+.lhrow{margin-top:0}

/* a watched hand: Coach Lou's caption under the felt, roomy and easy to read; cards dealt this step slide in */
.cocap{display:flex;gap:12px;align-items:flex-start;margin:4px 2px 0;padding:14px 4px 4px}
.cocap .hmono{width:36px;height:36px;font-size:17px;margin-top:2px}
.cocap small{display:block;font:700 10px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#c9a45c;margin-bottom:7px}
.cocap p{margin:0;font-size:17px;line-height:1.55;color:var(--ink)}
.cocap p b{color:#f1d99a}

.cospots{display:grid;grid-template-columns:1fr 1fr .8fr;gap:8px;margin-top:4px}
.cospot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;border-radius:12px;border:1.5px solid rgba(244,237,217,.55)}
.cospot b{font:700 10px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:rgba(244,237,217,.8)}
.cospot .ringchip{display:block;width:34px;height:34px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.cospot .ringchip svg{display:block;width:100%;height:100%}
.cospot.win{border-color:#f3dc9c;box-shadow:0 0 16px -4px rgba(243,220,156,.7),inset 0 0 12px rgba(243,220,156,.15)}
@keyframes coIn{from{opacity:0;transform:translate(60px,-40px) rotate(8deg)}to{opacity:1;transform:none}}
.card.conew{animation:coIn .42s cubic-bezier(.2,.8,.2,1.12) both}
.cocards .card.conew:nth-child(2){animation-delay:.12s}.cocards .card.conew:nth-child(3){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.card.conew{animation:none}}
:root[data-motion="off"] .card.conew{animation:none}
/* the course's type: the classroom's Garamond for the game and the step, engraved capitals for the small print */
.costep h2{font:700 26px/1.05 var(--f-hero)}
.cotake{font-style:normal;font-size:15px;line-height:1.45}
.coactions{display:flex;gap:10px;align-items:center;margin:14px 0 6px}
.coactions .btn{flex:1}
.coactions>span{flex:1}
/* the poker courses: up to four betting spots, chips fanned in a spot, five-card rows, cards you tap to hold */
.cospots.n2{grid-template-columns:1fr 1fr}
.cospots.n4{grid-template-columns:repeat(4,1fr);gap:6px}
.cospots.n4 .cospot b{letter-spacing:.1em}
.costack{display:flex}
.costack .ringchip+.ringchip{margin-left:-24px}
.cocards.c5{gap:6px;--cw:clamp(40px,12vw,54px)}
.cocards .card.conew:nth-child(4),.cocards>.cotap:nth-child(4) .card.conew{animation-delay:.36s}
.cocards .card.conew:nth-child(5),.cocards>.cotap:nth-child(5) .card.conew{animation-delay:.48s}
.cocards>.cotap:nth-child(2) .card.conew{animation-delay:.12s}.cocards>.cotap:nth-child(3) .card.conew{animation-delay:.24s}
.cotap{position:relative;display:block;padding:0 0 16px;border:0;background:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
span.cotap{cursor:default}
.cotap .card{transition:transform .18s ease}
.cotap.on .card{transform:translateY(-8px)}
.cotap.on::after{content:'Held';position:absolute;left:0;right:0;bottom:0;text-align:center;font:700 9px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:#f3dc9c}
.card.cobook{outline:2.5px solid #f3dc9c;outline-offset:2px}
.cocards:has(.cotap){padding-top:8px;min-height:0}

/* lessons (Watch, Try, Play) sit tighter: the caption beside Lou on as few lines as it needs, less air round the felt */
.codots{margin:0 0 8px}
.cofelt{margin:2px 0 8px;padding:12px 12px 14px;gap:8px}
.cocap{gap:10px;margin:2px 0 0;padding:8px 2px 2px}
.cocap .hmono{width:30px;height:30px;font-size:14px;margin-top:0}
.cocap small{display:inline;margin:0 8px 0 0;font-size:9.5px}
.cocap p{display:inline;font-size:15.5px;line-height:1.5}
.coq{margin:2px 2px 8px;font-size:17px}
.coactions{margin:10px 0 4px}
.costage{padding:14px 14px 14px 18px}
.cotake{margin:0 0 12px}
.costep{margin-top:12px;padding-top:12px}
.costep .actions{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.costep .actions .btn{flex:1 1 auto}
.costep em.colock{text-transform:none;letter-spacing:.02em;font:italic 400 13.5px/1.4 var(--f-hero);color:var(--ld-mut)}
/* Craps on the real layout (craps/learn.js): Watch (Lou plays one shooter) and the lessons, the table first, words under it, the key under the words (LEARN.md) */
.czwatch{display:flex;flex-direction:column;gap:8px}
.czwatch .czplst,.czwatch .czfelt{margin:0}
.czwatch .cz-meta span{white-space:normal;line-height:1.35}
.czplpanel .czplact{margin-top:12px}
.czplpanel .czplact .btn{width:100%}
/* a lesson or a Watch has the whole screen: no tab bar (back and swipe-back leave); render.js sets body.inlesson from [data-lesson] */
body.inlesson .tabbar{display:none}
body.inlesson.hastabs{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
/* the lesson table, a little more compact so Lou's words and the key fit under it */
.czplfelt .czbox{min-height:56px;padding:9px 4px 18px}
.czplfelt .czfieldbox{min-height:56px}
/* drills and Tricks (mechanics/tricks.js runHTML): the answers sit right under the question, not docked at the screen's foot */
.tkans{margin-top:14px}
.tkans .actions{display:grid;gap:8px}
/* a word in a stat box (the rating: Rookie, Regular...) never breaks mid-word */
.stat b.sw{font-size:min(1em,22px);white-space:nowrap;overflow-wrap:normal;word-break:normal}
/* ===== The Ledger (shell/course.js coLibrary, coursePage): Learn as a dark book on the table under the lamp.
   Near-black pages with a faint grain, cream and gold ink, the lamplight pooling in the middle of the page.
   Arriving at Learn (.ldin, never on a redraw) the cover flips up and over its top edge and the view settles onto the pages. ===== */
:root{--ld-ink:#eadcb8;--ld-mut:#a5967a;--ld-gold:#d6b36a;
  --ld-page:radial-gradient(75% 38% at 50% 26%,rgba(255,190,110,.10),rgba(255,190,110,0) 72%),
    radial-gradient(rgba(255,236,200,.035) .6px,transparent 1.1px) 0 0/3px 3px,
    radial-gradient(rgba(0,0,0,.4) .7px,transparent 1.2px) 1px 2px/5px 5px,
    linear-gradient(180deg,#1a1511,#110e0b 55%,#0c0a08);
  --ld-edge:inset 16px 0 20px -14px rgba(0,0,0,.95),inset 1px 0 0 rgba(255,236,200,.05),inset 0 0 0 1px rgba(214,176,104,.12),
    1px 1px 0 #2a231c,2px 2px 0 #0a0807,3px 3px 0 #251f19,4px 4px 0 #090706,5px 5px 0 #1f1a15,
    0 30px 46px -22px rgba(0,0,0,.95),0 10px 20px -8px rgba(0,0,0,.6)}

.ldscene{position:relative;margin:2px 0 10px;perspective:1800px;perspective-origin:50% 0}
.ldscene::before{content:'';position:absolute;left:0;right:0;top:-30px;height:520px;pointer-events:none;
  background:radial-gradient(55% 45% at 50% 30%,rgba(255,186,104,.13),rgba(255,186,104,0) 72%)}
.ldbook{position:relative;border-radius:3px 12px 12px 3px;color:var(--ld-ink);background:var(--ld-page);box-shadow:var(--ld-edge);transform-origin:50% 0}
.ldpages{position:relative;padding:30px 16px 16px 22px}
/* a ribbon marks the next lesson */
.ldribbon{position:absolute;top:-3px;right:24px;width:12px;height:42px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7));
  background:linear-gradient(90deg,#3d1014,#6a2026 45%,#561a1f 55%,#3d1014);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}

/* the next lesson, at the head of the page */
.ldnext{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:14px 12px;border:0;border-radius:12px;text-align:left;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(90% 120% at 0% 0%,rgba(214,176,104,.11),rgba(214,176,104,0) 60%),rgba(0,0,0,.24);
  box-shadow:inset 0 0 0 1px rgba(214,176,104,.34),inset 0 1px 0 rgba(255,236,200,.06),0 1px 0 rgba(255,236,200,.04)}
.ldnext:active{transform:translateY(2px)}
.ldnemb{flex:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.ldntx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ldntx small{font:700 9px/1.25 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ld-gold)}
.ldntx b{font:600 23px/1.05 var(--f-hero);color:#f4e7c6}
.ldntx em{font:italic 400 13px/1.35 var(--f-hero);color:var(--ld-mut)}
.ldnkey{flex:none;padding:10px 13px;border-radius:99px;font:700 10px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#2a1e05;
  background:linear-gradient(180deg,#f7e3a6,#eecb70 40%,#cf9f45 78%,#b3812e);box-shadow:0 3px 0 #5a3e14,inset 0 1px 0 rgba(255,255,255,.6),0 6px 12px -6px rgba(0,0,0,.8)}
.ldnext:active .ldnkey{transform:translateY(2px);box-shadow:0 1px 0 #5a3e14,inset 0 1px 0 rgba(255,255,255,.6)}
.ldnext.lddone{display:block;cursor:default;text-align:center}
.ldnext.lddone small{display:block;font:700 9px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ld-gold)}
.ldnext.lddone b{display:block;margin:6px 0;font:600 23px/1.1 var(--f-hero);color:#f4e7c6}
.ldnext.lddone em{font:italic 400 13px/1.4 var(--f-hero);color:var(--ld-mut)}

/* the contents: two parts, every game a chapter */
.ldpart{margin:28px 0 8px;text-align:center;font:600 21px/1.1 var(--f-hero);color:#f1e2bd;letter-spacing:.01em;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.ldpart small{display:block;margin-bottom:7px;font:700 9px/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--ld-gold)}
.ldpart em{display:block;margin-top:5px;font:italic 400 13px/1 var(--f-hero);color:var(--ld-mut)}
.ldpart::after{content:'';display:block;width:72px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,rgba(214,176,104,0),var(--ld-gold),rgba(214,176,104,0))}
.ldtoc{list-style:none;margin:0;padding:0}
.ldrow{display:flex;align-items:baseline;gap:6px;width:100%;min-height:42px;padding:12px 6px 10px 4px;border:0;border-radius:8px;background:none;font:inherit;color:var(--ld-ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ldno{flex:none;width:30px;font:500 12.5px/1 var(--f-hero);color:rgba(214,176,104,.8)}
.ldnm{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 16.5px/1.2 var(--f-hero)}
.ldlead{flex:1 1 10px;min-width:10px;height:1px;border-bottom:1.5px dotted rgba(214,176,104,.32)}
.ldst{flex:none;display:flex;align-items:center;gap:5px;font:600 9.5px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ld-mut)}
.ldleaf{width:13px;height:13px;flex:none}
.ldrow.fin .ldst{color:var(--ld-gold)}
.ldrow.nx{background:linear-gradient(90deg,rgba(214,176,104,.1),rgba(214,176,104,0) 85%)}
.ldrow.nx .ldnm{color:#fff0cc}
.ldrow.nx .ldno{color:#f3dc9c}
.ldrow:active .ldnm{color:var(--ld-gold)}
.ldlinks{display:flex;justify-content:flex-start;gap:8px;align-items:center;margin:-6px 2px 10px;color:var(--ld-mut);font-size:12px}
.ldlinks .hhlink{padding:6px 2px}

/* a chapter's strip: a thin gold rule, the four steps and then the game's other Tricks as ink notches that fill as you go */
.ldstrip{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:2px -6px 0;padding:0 0 16px}
.ldstrip.tks{grid-template-columns:repeat(4,minmax(0,1fr)) repeat(var(--nt),minmax(0,.42fr))}   /* repeat(0,...) is invalid CSS: a chapter with one Trick has no notches after the four steps */
.ldstrip::before{content:'';position:absolute;left:4px;right:4px;top:13px;height:1px;background:linear-gradient(90deg,rgba(214,176,104,0),rgba(214,176,104,.6) 8%,rgba(214,176,104,.6) 92%,rgba(214,176,104,0))}
.ldn{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;min-height:46px;padding:7px 0 0;border:0;background:none;font:inherit;color:var(--ld-mut);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ldn i{display:block;width:10px;height:10px;transform:rotate(45deg);background:#0e0b09;box-shadow:inset 0 0 0 1.5px rgba(214,176,104,.6);transition:transform .15s ease}
.ldn.tk i{width:8px;height:8px;margin-top:1px}
.ldn span{font:700 9px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ldn.done i{background:linear-gradient(135deg,#fbe8b0,#c9a24b 55%,#7c5a24);box-shadow:0 0 6px rgba(214,179,106,.35)}
.ldn.now i{box-shadow:inset 0 0 0 1.5px #f3dc9c,0 0 0 3px rgba(214,176,104,.18),0 0 10px rgba(243,220,156,.35)}
.ldn.cur{color:#f4e7c6}
.ldn.cur i{transform:rotate(45deg) scale(1.3)}
.ldn.cur:not(.tk)::after{content:'';position:absolute;left:50%;bottom:-2px;width:14px;height:1.5px;margin-left:-7px;background:var(--ld-gold)}
.ldn:active i{transform:rotate(45deg) scale(.9)}
/* a locked rung: a hollow, faded notch; what opens it is written under the strip */
.ldn.lk{opacity:.5}
.ldn.lk i{background:none;box-shadow:inset 0 0 0 1px rgba(214,176,104,.45)}
.ldtkl{position:absolute;top:28px;right:0;left:calc(100% * 4 / (4 + .42 * var(--nt,0)));text-align:center;font:700 9px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ld-mut);opacity:.75;pointer-events:none}
.costep{border-top-color:rgba(214,176,104,.14)}
.costep .kicker .ldleaf{vertical-align:-2px;margin-right:3px}
.cotake{color:#d9cba9}

/* the rulebook's section tabs, in the Ledger's ink (replaces the felt pills of passes.css/pass10.css) */
.lhsecs{display:flex;justify-content:space-between;gap:2px;background:linear-gradient(180deg,rgba(14,11,9,.97),rgba(14,11,9,.92) 72%,rgba(14,11,9,0))}
.lhsecs::after{content:'';position:absolute;left:16px;right:16px;bottom:10px;height:1px;background:linear-gradient(90deg,rgba(214,176,104,0),rgba(214,176,104,.45) 10%,rgba(214,176,104,.45) 90%,rgba(214,176,104,0))}
.lhsecs button{position:relative;flex:1 1 auto;padding:0 2px;background:none;box-shadow:none;border-radius:0;font:500 14.5px/1 var(--f-hero);color:var(--ld-mut)}
.lhsecs button[aria-current]{background:none;box-shadow:none;color:#f4e7c6}
.lhsecs button[aria-current]::after{content:'';position:absolute;left:50%;bottom:-3px;width:7px;height:7px;margin-left:-3.5px;transform:rotate(45deg);background:linear-gradient(135deg,#fbe8b0,#c9a24b 55%,#7c5a24)}

/* arriving: the book lies on the table, the cover flips up and over its top edge, the view settles onto the pages */
.ldcover{position:absolute;inset:0;z-index:6;pointer-events:none;transform-origin:50% 0;transform-style:preserve-3d;animation:ldFlip 1.25s cubic-bezier(.55,0,.35,1) .3s both}
.ldcfront,.ldcback{position:absolute;inset:0;border-radius:3px 12px 12px 3px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ldcfront{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:150px;
  background:radial-gradient(70% 30% at 40% 8%,rgba(255,214,170,.09),rgba(255,214,170,0) 70%),radial-gradient(rgba(0,0,0,.3) .7px,transparent 1.2px) 0 0/3px 3px,radial-gradient(rgba(255,236,200,.03) .6px,transparent 1px) 1px 1px/4px 4px,linear-gradient(170deg,#1f1612,#120c0a 50%,#0b0807);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,220,190,.1),inset 12px 0 16px -10px rgba(0,0,0,.8),inset 0 0 0 12px rgba(0,0,0,0),inset 0 0 0 13px rgba(214,176,104,.18)}
.ldcfront small{font:700 9px/1 var(--f-body);letter-spacing:.34em;text-transform:uppercase;color:rgba(214,176,104,.7)}
.ldcfront i{font:34px/1 Georgia,serif;font-style:normal;color:transparent;background:linear-gradient(160deg,#f6e2a8,#c9a24b 50%,#8a6424);-webkit-background-clip:text;background-clip:text}
.ldcfront b{font:600 26px/1 var(--f-hero);letter-spacing:.18em;margin-right:-.18em;text-transform:uppercase;color:transparent;
  background:linear-gradient(180deg,#fbe9b6,#d7b267 50%,#9c7434);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 -1px 0 rgba(0,0,0,.8))}
.ldcback{transform:rotateX(180deg);background:radial-gradient(rgba(0,0,0,.35) .7px,transparent 1.2px) 0 0/3px 3px,linear-gradient(180deg,#24120f,#140a09);box-shadow:inset 0 0 0 1px rgba(0,0,0,.7)}
/* the cover swings outward, toward you, up and over its top edge (positive rotateX brings the bottom edge forward);
   only as tall as the screen, so it never swings past the eye. Its fade, the book's settle and the ink land together at 1.55s */
.ldcover{bottom:auto;height:min(100%,calc(100vh - 120px))}
@keyframes ldFlip{0%{transform:perspective(2200px) rotateX(0)}70%{opacity:1}100%{opacity:0;transform:perspective(2200px) rotateX(178deg)}}
.ldin .ldbook{animation:ldSettle 1.55s cubic-bezier(.35,.05,.2,1) both}
@keyframes ldSettle{0%,25%{transform:translateY(34px) rotateX(20deg) scale(.8)}100%{transform:none}}
.ldin .ldpages>*{animation:ldInk .55s ease-out 1s backwards}
.ldin .ldtoc li{animation:ldInk .4s ease-out 1.15s backwards}
@keyframes ldInk{from{opacity:0}}
.ldin::before{animation:ldLamp 1.55s ease-out both}
@keyframes ldLamp{from{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ldin .ldbook,.ldin .ldpages>*,.ldin .ldtoc li,.ldin::before{animation:none}.ldcover{display:none}}
:root[data-motion="off"] .ldin .ldbook,:root[data-motion="off"] .ldin .ldpages>*,:root[data-motion="off"] .ldin .ldtoc li,:root[data-motion="off"] .ldin::before{animation:none}
:root[data-motion="off"] .ldcover{display:none}
/* the rows under a chapter (What you can do, The rulebook, Practice and tools): entries written on the page, not cards laid on it */
.cofold{margin:14px 6px 0;border-top:1px solid rgba(214,176,104,.24)}
.cofold .lhrow{background:none;box-shadow:none;border-radius:0;padding:15px 4px 14px;border-bottom:1px solid rgba(214,176,104,.13);color:var(--ld-ink)}
.cofold .lhrow .lhtx b{font:500 17px/1.2 var(--f-hero);color:var(--ld-ink)}
.cofold .lhrow .lhtx span{font:italic 400 13px/1.4 var(--f-hero);color:var(--ld-mut)}
.cofold .lhrow .go{color:var(--ld-gold)}
.cofold .lhrow:active{transform:none;box-shadow:none;background:rgba(214,176,104,.06)}
.cofold .lhrow:active .lhtx b{color:var(--ld-gold)}
/* the rulebook (coBook): one long page of the Ledger, each part a section divided by a gold rule, not a stack of cards */
.panel.cobk{margin:0;padding:20px 20px 18px;border:0;border-radius:0;background:var(--ld-page);box-shadow:var(--ld-edge);color:var(--ld-ink)}
.panel.cobk::before{display:none}
.panel.cobk:first-of-type{border-radius:3px 12px 0 0;padding-top:22px}
.panel.cobk:last-of-type{border-radius:0 0 12px 3px;padding-bottom:24px}
.panel.cobk+.panel.cobk{border-top:0}
.panel.cobk+.panel.cobk::after{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:linear-gradient(90deg,rgba(214,176,104,0),rgba(214,176,104,.45),rgba(214,176,104,0))}
.panel.cobk{position:relative}
.panel.cobk h2{font:500 21px/1.2 var(--f-hero);color:var(--ld-ink);letter-spacing:.005em}
.panel.cobk h2::after{background:linear-gradient(90deg,var(--ld-gold),rgba(214,176,104,0))}
.panel.cobk .colead,.panel.cobk p,.panel.cobk li,.panel.cobk dd{color:var(--ld-ink)}
.panel.cobk .mut{color:var(--ld-mut)}
.panel.cobk .lhstrat div{padding:2px 0 2px 14px;border-radius:0;background:none;box-shadow:inset 1.5px 0 0 rgba(214,176,104,.5)}
.panel.cobk .lhstrat b,.panel.cobk .lhfacts small{color:var(--ld-gold)}
.panel.cobk .lhdl dt{font-family:var(--f-hero);color:var(--ld-ink)}
.panel.cobk .lhdl dd{color:var(--ld-mut);font-style:italic;font-family:var(--f-hero)}

/* a chapter's three tabs (Course, Practice, Rulebook), in the Ledger's ink */
.cotabs{margin-top:-4px}
/* How you're growing: your strongest and weakest kinds of decision, written on the page */
.ldpart.cogrhd{margin:22px 0 4px}
.cogrow{list-style:none;margin:0;padding:0 2px}
.cogrk{margin:14px 0 2px;font:700 9px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ld-gold)}
.cogr{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(214,176,104,.13)}
.cogrpc{flex:none;width:52px;padding-top:2px;font:600 20px/1 var(--f-num);color:#f4e7c6;text-align:right}
.cogr.dn .cogrpc{color:#d9a08f}
.cogrtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cogrtx b{font:500 16.5px/1.2 var(--f-hero);color:var(--ld-ink)}
.cogrtx>span{font:italic 400 13.5px/1.4 var(--f-hero);color:var(--ld-mut)}
.cogrtx .hhlink{align-self:flex-start;margin-top:3px;padding:4px 0}
.cogrnote{margin:10px 4px 0;font:italic 400 12.5px/1.4 var(--f-hero);color:var(--ld-mut)}
/* the rulebook and the Glossary: the facts on a page, then each part as a fold, one open at a time */
.panel.cobk.cobk{border-radius:3px 12px 12px 3px;padding:18px 18px 16px}
.conum{display:flex;gap:12px;align-items:baseline;margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(214,176,104,.18)}
.conum b{flex:none;font:600 26px/1 var(--f-num);color:#f4e7c6}
.conum span{font:italic 400 13px/1.35 var(--f-hero);color:var(--ld-mut)}
.cobkfs{margin:14px 0 0;border-radius:3px 12px 12px 3px;color:var(--ld-ink);background:var(--ld-page);box-shadow:var(--ld-edge);padding:4px 16px 4px 20px}
.cobkf{border-bottom:1px solid rgba(214,176,104,.16)}
.cobkf:last-child{border-bottom:0}
.cobkf summary{display:flex;align-items:center;gap:10px;min-height:50px;box-sizing:border-box;padding:12px 2px 11px;list-style:none;cursor:pointer;font:500 17.5px/1.2 var(--f-hero);color:var(--ld-ink);-webkit-tap-highlight-color:transparent}
.cobkf summary::-webkit-details-marker{display:none}
.cobkf summary small{font:700 10px/1 var(--f-num);color:var(--ld-mut)}
.cobkf summary::after{content:'';flex:none;margin-left:auto;width:7px;height:7px;transform:rotate(45deg);box-shadow:inset -1.5px -1.5px 0 var(--ld-gold);transition:transform .2s ease}
.cobkf[open] summary::after{transform:rotate(225deg)}
.cobkf[open] summary{color:#f4e7c6}
.cobkb{padding:0 2px 16px}
.cobkb p,.cobkb li,.cobkb dt{color:var(--ld-ink)}
.cobkb .mut,.cobkb dd{color:var(--ld-mut)}
.cobkb dd{font-style:italic;font-family:var(--f-hero)}
.cobkb dt{font-family:var(--f-hero)}
.cobkb .lhstrat div{padding:2px 0 2px 14px;border-radius:0;background:none;box-shadow:inset 1.5px 0 0 rgba(214,176,104,.5)}
.cobkb .lhstrat b{color:var(--ld-gold)}
.cobkb .lhul{margin:0}
.cobkb .maptbl{width:100%}
@media (prefers-reduced-motion:reduce){.cobkf summary::after{transition:none}}
/* the Practice tab: the drills and tools written on a page of the Ledger */
.copage{margin:0 0 14px;padding:6px 14px 12px 18px;border-radius:3px 12px 12px 3px;color:var(--ld-ink);background:var(--ld-page);box-shadow:var(--ld-edge)}
.copghd{margin:16px 2px 0;font:700 9.5px/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--ld-gold)}
.copage .cofold{margin:8px 0 0}
.copage .cofold .lhrow{padding:11px 2px 10px}
.copage .cofold .lhrow:last-child{border-bottom:0}
/* a tool (the chart, the lab) or a casino drill in the Practice tab */
.dico.tool i{font-size:13px;color:var(--ld-gold)}
/* ===== Each tab's title (pageHead in draw/ui-helpers.js): one style for every tab, compact: the title in the club's display
   serif with gold foil, one line of small capitals, a fine brass rule ===== */
.phead{position:relative;display:flex;align-items:flex-end;gap:12px;margin:2px 2px 14px;padding-bottom:9px}
.phead::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(214,176,104,.7),rgba(214,176,104,.2) 50%,rgba(214,176,104,0))}
.phdtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.phdtx b{display:block;font:700 28px/1.05 var(--f-hero);color:transparent;background:linear-gradient(180deg,#fffaf0,#f3e3bb 55%,#d7b56c);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.phdtx span{display:block;font:700 10px/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#c9a45c}

/* Locker > Your room > Lamp light: five swatches, each a lamp glowing on the room's dark leather */
.lktinth{margin:16px 0 8px;font:700 10px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:#c9a45c}
.lktints{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.lktint{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;color:var(--muted);cursor:pointer}
.lktint i{display:block;width:44px;height:44px;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -6px 10px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.5),0 3px 0 #070504}
.lktint span{font:600 11px/1 var(--f-body)}
.lktint.on{color:var(--ink)}.lktint.on i{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -6px 10px rgba(0,0,0,.35),0 0 0 2px #c9a24b,0 3px 0 #070504}
.lktint:active i{transform:translateY(2px)}
.lktint i{background:radial-gradient(60% 55% at 50% 30%,rgba(var(--lc),.9),rgba(var(--lc),.25) 55%,transparent 80%),linear-gradient(180deg,#1d1613,#2b1711)}
.t-gold{--lc:255,190,110}.t-green{--lc:150,214,160}.t-red{--lc:255,128,104}.t-purple{--lc:196,150,240}.t-grey{--lc:196,214,240}

/* ===== Every inner page's title and back key (owner, 2026-10-08): the title centred in the club's serif, one line of small
   capitals under it; the back key a brass chevron and one word naming where it goes, sitting at the top left just above
   the title's top line, a hint that you can swipe back as much as a key (still tappable, 44px tall) ===== */
#view>.bar{display:block;position:relative;text-align:center;margin:0 2px 14px;padding:0 0 2px;min-height:0}
#view>.bar:has(>button.bk){padding-top:20px}
#view>.bar::before,#view>.bar::after{display:none}
#view>.bar .ttl{display:block;min-width:0}
#view>.bar .ttl b{font:600 27px/1.08 var(--f-hero);letter-spacing:.005em;text-wrap:balance}
#view>.bar .ttl span{display:block;margin-top:5px;font:600 9.5px/1.3 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:#9e8f74}
#view>.bar>button.icon.bk{position:absolute;left:-6px;top:-12px;display:flex;align-items:center;gap:5px;width:auto;min-width:0;min-height:44px;height:44px;
  margin:0;padding:0 10px 0 6px;border:0;border-radius:10px;background:none;box-shadow:none;color:#d6b068;font-size:inherit;opacity:.88;transform:none}
#view>.bar>button.icon.bk::before,#view>.bar>button.icon.bk::after{display:none}
#view>.bar>button.icon.bk:active{opacity:1;transform:translateX(-2px)}
#view>.bar>button.icon.bk:focus-visible{outline:2px solid rgba(214,176,104,.6);outline-offset:-4px}
.bk .bkch{font:400 21px/1 var(--f-hero);margin-top:-3px}
.bk .bkw{font:700 10px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase}

/* the five main tabs' titles match: centred, small capitals under; a tab's own key (Jump to a table) sits top right */
.phead{display:block;text-align:center;margin:2px 2px 14px;padding:0 0 4px}
.phead::after{display:none}
.phdtx{align-items:center;gap:5px}
.phdtx b{font:600 27px/1.08 var(--f-hero)}
.phdtx span{font:600 9.5px/1.3 var(--f-body);letter-spacing:.18em;color:#9e8f74}
.phead:has(>.phjump){padding-top:34px}
.phead>.phjump{position:absolute;right:0;top:0}
/* ============================================================
   THE WELCOME: one wide brick wall at night, fading into the dark (owner, 2026-10-07, after trying an areaway and a
   passage: back to one wall; the club's name on a sign, neon, classic and old-time, elite and captivating; a spade).
   A small caged jelly-jar bulb sways on its pipe; under it a black lacquered sign with a brass edge carries the name
   in hand-bent neon: THE small above, FELT ♠ CLUB, the letters warm white-gold, the spade red. Each tube is drawn
   as glass (a wide glow, the coloured tube, a hot core); the dark glass shows when it is off. Once a visit the sign
   sputters on piece by piece (FELT, CLUB, the spade, THE), then holds, with the odd stutter. Under it the door:
   green-black lacquer lit from above, raised panels, iron hinges, an arched iron speakeasy grille, a dark bronze
   pull and kick plate, a hairline of light under it.
   The scene is static markup in page/body.html (whole on the first frame); shell/welcome.js adds the words over it
   (.wxui). Everything that moves is transform or opacity. Leaving: welcomeLeaving in render.js (.wxgo, .wxout).
   Sizes follow the screen's real height (--vh = 1svh): --ui the words, --dt door top, --dh/--dw the door (--bdw is
   the door's width for its parts), --sw/--sh the sign, --st its top, --by the bulb's centre.
   ============================================================ */
#wlayer{position:fixed;inset:0;z-index:40}
:root[data-boot="nowel"] #wlayer{display:none}
body.wopen{overflow:hidden;overscroll-behavior:none}
.wx{--vh:1vh;--ui:146px;--dt:clamp(190px,calc(var(--vh) * 30),270px);--dh:calc(var(--vh) * 100 - var(--dt) - var(--ui) - 15px);
  --dw:min(58vw,244px,calc(var(--dh) / 2.05));--bdw:var(--dw);
  --sw:min(70vw,262px,calc(var(--dw) * 1.28));--sh:calc(var(--sw) * .34);--st:calc(var(--dt) - var(--sh) - 30px);--by:calc(var(--st) - 34px);
  --lt:255,206,150;--ne:255,176,92;--nr:255,52,40;
  position:absolute;inset:0;overflow:hidden;background:#0a0908;color:#e9dfcb;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
@supports (height:1svh){.wx{--vh:1svh}}
.wxsc{position:absolute;inset:0;transform-origin:50% calc(var(--dt) + var(--dh) * .55)}
.wxsc>i,.wxsc>div{position:absolute;display:block}

/* the wall: brick, grain, damp, lit only near the sign and the bulb, fading to dark at every edge */
.wxwall{inset:0;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22420%22 height=%22420%22%3E%3Cfilter id=%22b%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.012%22 numOctaves=%223%22 seed=%224%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.42%22/%3E%3C/filter%3E%3Crect width=%22420%22 height=%22420%22 filter=%22url(%23b)%22/%3E%3C/svg%3E") 0 0/420px 420px,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23n)%22/%3E%3C/svg%3E") 0 0/180px 180px,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22512%22 height=%22352%22 viewBox=%220 0 256 176%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22 color-interpolation-filters=%22sRGB%22%3E%3CfeColorMatrix in=%22SourceGraphic%22 type=%22matrix%22 values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 2.6 2.6 0 -0.36%22 result=%22h0%22/%3E%3CfeGaussianBlur in=%22h0%22 stdDeviation=%22.7%22 result=%22h1%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.8%22 numOctaves=%222%22 seed=%225%22 stitchTiles=%22stitch%22 result=%22t%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.06%22 numOctaves=%223%22 seed=%229%22 stitchTiles=%22stitch%22 result=%22t2%22/%3E%3CfeComposite in=%22h1%22 in2=%22t%22 operator=%22arithmetic%22 k1=%220%22 k2=%221%22 k3=%22.34%22 k4=%22-.13%22 result=%22h2%22/%3E%3CfeComposite in=%22h2%22 in2=%22t2%22 operator=%22arithmetic%22 k1=%220%22 k2=%221%22 k3=%22.3%22 k4=%22-.12%22 result=%22h%22/%3E%3CfeDiffuseLighting in=%22h%22 surfaceScale=%223.4%22 diffuseConstant=%221.3%22 lighting-color=%22%23fff%22 result=%22L%22%3E%3CfeDistantLight azimuth=%22270%22 elevation=%2236%22/%3E%3C/feDiffuseLighting%3E%3CfeComposite in=%22SourceGraphic%22 in2=%22L%22 operator=%22arithmetic%22 k1=%221.1%22 k2=%220%22 k3=%220%22 k4=%220%22 result=%22lit%22/%3E%3CfeColorMatrix in=%22t2%22 type=%22matrix%22 values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.4 .62%22 result=%22dirt%22/%3E%3CfeComposite in=%22dirt%22 in2=%22lit%22 operator=%22atop%22 result=%22d2%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22lit%22/%3E%3CfeMergeNode in=%22d2%22/%3E%3C/feMerge%3E%3C/filter%3E%3Cg filter=%22url(%23f)%22%3E%3Crect width=%22256%22 height=%22176%22 fill=%22%2324201d%22/%3E%3Crect x=%221%22 y=%221%22 width=%2263%22 height=%2220%22 rx=%221.6%22 fill=%22%233c2b24%22/%3E%3Crect x=%2265%22 y=%221%22 width=%2262%22 height=%2220%22 rx=%221%22 fill=%22%234f382c%22/%3E%3Crect x=%22129%22 y=%221%22 width=%2263%22 height=%2220%22 rx=%222.2%22 fill=%22%234b3a33%22/%3E%3Crect x=%22193%22 y=%221%22 width=%2262%22 height=%2220%22 rx=%221%22 fill=%22%23443129%22/%3E%3Crect x=%22-31%22 y=%2223%22 width=%2261%22 height=%2220%22 rx=%221%22 fill=%22%233c2b24%22/%3E%3Crect x=%22225%22 y=%2223%22 width=%2261%22 height=%2220%22 rx=%221.6%22 fill=%22%233c2b24%22/%3E%3Crect x=%2233%22 y=%2223%22 width=%2262%22 height=%2220%22 rx=%222.2%22 fill=%22%2346322a%22/%3E%3Crect x=%2297%22 y=%2223%22 width=%2263%22 height=%2220%22 rx=%222.2%22 fill=%22%2357402f%22/%3E%3Crect x=%22161%22 y=%2223%22 width=%2262%22 height=%2220%22 rx=%222.2%22 fill=%22%23413027%22/%3E%3Crect x=%22225%22 y=%2223%22 width=%2262%22 height=%2220%22 rx=%221%22 fill=%22%234a352b%22/%3E%3Crect x=%221%22 y=%2245%22 width=%2262%22 height=%2220%22 rx=%221%22 fill=%22%234a352b%22/%3E%3Crect x=%2265%22 y=%2245%22 width=%2262%22 height=%2220%22 rx=%221.6%22 fill=%22%23443129%22/%3E%3Crect x=%22129%22 y=%2245%22 width=%2263%22 height=%2220%22 rx=%222.2%22 fill=%22%2348332a%22/%3E%3Crect x=%22193%22 y=%2245%22 width=%2262%22 height=%2220%22 rx=%222.2%22 fill=%22%233a2c27%22/%3E%3Crect x=%22-31%22 y=%2267%22 width=%2261%22 height=%2220%22 rx=%221.6%22 fill=%22%233f2e26%22/%3E%3Crect x=%22225%22 y=%2267%22 width=%2261%22 height=%2220%22 rx=%221.6%22 fill=%22%233f2e26%22/%3E%3Crect x=%2233%22 y=%2267%22 width=%2262%22 height=%2220%22 rx=%221.6%22 fill=%22%234a352b%22/%3E%3Crect x=%2297%22 y=%2267%22 width=%2261%22 height=%2220%22 rx=%221.6%22 fill=%22%235b4433%22/%3E%3Crect x=%22161%22 y=%2267%22 width=%2262%22 height=%2220%22 rx=%222.2%22 fill=%22%234f382c%22/%3E%3Crect x=%22225%22 y=%2267%22 width=%2261%22 height=%2220%22 rx=%221%22 fill=%22%234d372c%22/%3E%3Crect x=%221%22 y=%2289%22 width=%2261%22 height=%2220%22 rx=%221%22 fill=%22%234f382c%22/%3E%3Crect x=%2265%22 y=%2289%22 width=%2262%22 height=%2220%22 rx=%221.6%22 fill=%22%2346322a%22/%3E%3Crect x=%22129%22 y=%2289%22 width=%2261%22 height=%2220%22 rx=%221.6%22 fill=%22%2346322a%22/%3E%3Crect x=%22193%22 y=%2289%22 width=%2262%22 height=%2220%22 rx=%222.2%22 fill=%22%2346322a%22/%3E%3Crect x=%22-31%22 y=%22111%22 width=%2262%22 height=%2220%22 rx=%221%22 fill=%22%234a352b%22/%3E%3Crect x=%22225%22 y=%22111%22 width=%2262%22 height=%2220%22 rx=%221.6%22 fill=%22%234a352b%22/%3E%3Crect x=%2233%22 y=%22111%22 width=%2263%22 height=%2220%22 rx=%221.6%22 fill=%22%234a352b%22/%3E%3Crect x=%2297%22 y=%22111%22 width=%2263%22 height=%2220%22 rx=%221.6%22 fill=%22%23413027%22/%3E%3Crect x=%22161%22 y=%22111%22 width=%2262%22 height=%2220%22 rx=%222.2%22 fill=%22%2346322a%22/%3E%3Crect x=%22225%22 y=%22111%22 width=%2261%22 height=%2220%22 rx=%221%22 fill=%22%234d372c%22/%3E%3Crect x=%221%22 y=%22133%22 width=%2261%22 height=%2220%22 rx=%221%22 fill=%22%234d372c%22/%3E%3Crect x=%2265%22 y=%22133%22 width=%2262%22 height=%2220%22 rx=%221%22 fill=%22%2357402f%22/%3E%3Crect x=%22129%22 y=%22133%22 width=%2262%22 height=%2220%22 rx=%221%22 fill=%22%233f2e26%22/%3E%3Crect x=%22193%22 y=%22133%22 width=%2263%22 height=%2220%22 rx=%221.6%22 fill=%22%234a352b%22/%3E%3Crect x=%22-31%22 y=%22155%22 width=%2262%22 height=%2220%22 rx=%221.6%22 fill=%22%23523a2e%22/%3E%3Crect x=%22225%22 y=%22155%22 width=%2262%22 height=%2220%22 rx=%221.6%22 fill=%22%23523a2e%22/%3E%3Crect x=%2233%22 y=%22155%22 width=%2262%22 height=%2220%22 rx=%222.2%22 fill=%22%234f382c%22/%3E%3Crect x=%2297%22 y=%22155%22 width=%2262%22 height=%2220%22 rx=%221.6%22 fill=%22%234b3a33%22/%3E%3Crect x=%22161%22 y=%22155%22 width=%2263%22 height=%2220%22 rx=%221%22 fill=%22%235b4433%22/%3E%3Crect x=%22225%22 y=%22155%22 width=%2263%22 height=%2220%22 rx=%221%22 fill=%22%2357402f%22/%3E%3C/g%3E%3C/svg%3E") 50% 0/256px 176px}
.wxwall::after{content:'';position:absolute;inset:0;background:radial-gradient(74% 50% at 50% calc(var(--st) + var(--sh) * .5),rgba(10,9,8,0) 0%,rgba(10,9,8,.38) 45%,rgba(7,6,6,.92) 100%)}
/* weather on the wall: soot over the bulb, damp and salt rising from the street, a cold night in the shadows */
.wxsoot{inset:0;background:radial-gradient(22px 70px at 50% calc(var(--by) - 74px),rgba(0,0,0,.42),rgba(0,0,0,0)),radial-gradient(60px 40px at 50% calc(var(--by) - 40px),rgba(0,0,0,.22),rgba(0,0,0,0))}
.wxdamp{left:0;right:0;bottom:0;height:calc(var(--vh) * 100 - var(--dt) - var(--dh) + 70px);background:linear-gradient(0deg,rgba(14,16,18,.55),rgba(14,16,18,0)),linear-gradient(0deg,rgba(210,200,182,.05),rgba(210,200,182,0) 60%);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22420%22 height=%22420%22%3E%3Cfilter id=%22b%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.012%22 numOctaves=%223%22 seed=%224%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.42%22/%3E%3C/filter%3E%3Crect width=%22420%22 height=%22420%22 filter=%22url(%23b)%22/%3E%3C/svg%3E");-webkit-mask-size:300px 300px;mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22420%22 height=%22420%22%3E%3Cfilter id=%22b%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.012%22 numOctaves=%223%22 seed=%224%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.42%22/%3E%3C/filter%3E%3Crect width=%22420%22 height=%22420%22 filter=%22url(%23b)%22/%3E%3C/svg%3E");mask-size:300px 300px}
.wxgrade{inset:0;background:linear-gradient(160deg,rgba(46,70,88,.16),rgba(46,70,88,0) 45%),linear-gradient(0deg,rgba(20,30,38,.2),rgba(20,30,38,0) 40%)}
.wxpool{inset:0;will-change:transform;background:radial-gradient(46% 26% at 50% var(--by),rgba(var(--lt),.17),rgba(var(--lt),.05) 55%,rgba(var(--lt),0) 100%)}
/* the neon's own light on the brick and the door's head: warm, a touch of red from the spade */
.wxnglow{inset:0;opacity:0;will-change:opacity;background:radial-gradient(38% 15% at 50% calc(var(--st) + var(--sh) * .55),rgba(var(--ne),.20),rgba(var(--ne),.06) 55%,rgba(var(--ne),0) 100%),
  radial-gradient(14% 8% at 50% calc(var(--st) + var(--sh) * .6),rgba(var(--nr),.10),rgba(var(--nr),0))}

/* the bulb's light hanging in the damp air: a soft beam falling from it */
.wxbeam{left:50%;top:var(--by);width:calc(var(--sw) * 1.1);height:calc(var(--dt) - var(--by) + 40px);margin-left:calc(var(--sw) * -.55);opacity:.7;background:radial-gradient(50% 100% at 50% 0,rgba(var(--lt),.07),rgba(var(--lt),.02) 60%,rgba(var(--lt),0));-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
/* the bulb: a small jelly-jar in a round-bottomed cage on its pipe, swaying a little */
.wxbulb{left:50%;top:calc(var(--by) - 45px);width:28px;height:70px;margin-left:-14px}
.wxbulb b{position:absolute;inset:0;transform-origin:50% 0;will-change:transform}
.wxbulb b::before{content:'';position:absolute;left:12.75px;bottom:50px;width:2.5px;height:400px;background:linear-gradient(90deg,#1c1712,#5a4a36 50%,#1c1712)}
.wxbulb svg{position:absolute;left:0;top:20px;display:block;overflow:visible}
.wxbulb b::after{content:'';position:absolute;left:50%;top:45px;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;will-change:opacity;
  background:radial-gradient(closest-side,rgba(255,238,206,.55),rgba(var(--lt),.2) 40%,rgba(var(--lt),0))}

/* the sign: black lacquer in a thin brass edge, standing off the brick on four small posts */
.wxrust{position:absolute;left:5px;right:5px;top:calc(100% - 4px);height:calc(var(--sh) * .9);pointer-events:none;background:linear-gradient(180deg,rgba(110,58,28,.32),rgba(110,58,28,0)) 0 0/5px 100% no-repeat,linear-gradient(180deg,rgba(110,58,28,.28),rgba(110,58,28,0)) 100% 0/5px 70% no-repeat,linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0)) 38% 0/3px 60% no-repeat}
.wxsign{left:50%;top:var(--st);width:var(--sw);height:var(--sh);margin-left:calc(var(--sw) * -.5);z-index:2}
.wxsbox{position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(172deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.015) 22%,rgba(255,255,255,0) 34%),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22120%22%3E%3Cg stroke=%22%23fff%22 stroke-linecap=%22round%22 fill=%22none%22%3E%3Cpath d=%22M118.5 106.8l24.5 2.3%22 stroke-width=%220.48%22 stroke-opacity=%220.09%22/%3E%3Cpath d=%22M162.6 78.0l24.2 8.0%22 stroke-width=%220.31%22 stroke-opacity=%220.06%22/%3E%3Cpath d=%22M193.5 72.0l28.2 -4.9%22 stroke-width=%220.38%22 stroke-opacity=%220.12%22/%3E%3Cpath d=%22M51.4 35.3l8.1 -3.4%22 stroke-width=%220.46%22 stroke-opacity=%220.12%22/%3E%3Cpath d=%22M121.3 111.8l10.2 -2.5%22 stroke-width=%220.51%22 stroke-opacity=%220.13%22/%3E%3Cpath d=%22M6.5 67.6l10.8 -4.2%22 stroke-width=%220.33%22 stroke-opacity=%220.08%22/%3E%3Cpath d=%22M3.7 82.2l13.6 5.8%22 stroke-width=%220.45%22 stroke-opacity=%220.06%22/%3E%3Cpath d=%22M156.0 50.4l22.7 -6.9%22 stroke-width=%220.43%22 stroke-opacity=%220.12%22/%3E%3Cpath d=%22M68.5 1.8l18.7 7.9%22 stroke-width=%220.58%22 stroke-opacity=%220.06%22/%3E%3Cpath d=%22M2.4 55.8l20.7 3.8%22 stroke-width=%220.50%22 stroke-opacity=%220.07%22/%3E%3Cpath d=%22M216.8 92.3l18.9 -2.2%22 stroke-width=%220.70%22 stroke-opacity=%220.09%22/%3E%3Cpath d=%22M0.1 103.7l33.3 3.1%22 stroke-width=%220.31%22 stroke-opacity=%220.16%22/%3E%3Cpath d=%22M41.2 119.5l23.7 1.8%22 stroke-width=%220.36%22 stroke-opacity=%220.05%22/%3E%3Cpath d=%22M97.1 1.1l23.9 7.9%22 stroke-width=%220.33%22 stroke-opacity=%220.09%22/%3E%3C/g%3E%3C/svg%3E") 0 0/220px 120px,radial-gradient(60% 34% at 50% 74%,rgba(var(--ne),.10),rgba(var(--ne),0)),radial-gradient(10% 30% at 50% 74%,rgba(var(--nr),.06),rgba(var(--nr),0)),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23n)%22/%3E%3C/svg%3E") 0 0/180px 180px,linear-gradient(180deg,#1a1613,#0c0a08 55%,#070605);
  box-shadow:0 0 0 1px #000,0 0 0 2px #5b4628,0 -1px 0 2px #7d6438,0 0 0 3px #231a10,inset 0 0 0 5px #0a0807,inset 0 0 0 6px rgba(255,226,170,.05),inset 0 2px 1px 5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,236,200,.1),inset 0 0 22px rgba(0,0,0,.85),0 14px 22px rgba(0,0,0,.75),0 4px 5px rgba(0,0,0,.65)}
.wxsbox::before,.wxsbox::after{content:'';position:absolute;top:6px;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9bd84,#5a4527);box-shadow:0 calc(var(--sh) - 16px) 0 #4a3a22}
.wxsbox::before{left:6px}.wxsbox::after{right:6px}
.wxn{position:absolute;left:6%;right:6%;top:9%;bottom:9%;display:block}
.wxn svg{display:block;width:100%;height:100%;overflow:visible}
.wxng g{stroke:#2a2420}
.wxng{filter:drop-shadow(0 1px 0 rgba(255,240,220,.06))}
.wxnf,.wxnc,.wxnt{will-change:opacity;filter:drop-shadow(0 0 2px rgba(var(--ne),.9)) drop-shadow(0 0 7px rgba(var(--ne),.55))}
.wxnf .wxt1,.wxnc .wxt1,.wxnt .wxt1{stroke:rgba(var(--ne),.35)}
.wxnf .wxt2,.wxnc .wxt2,.wxnt .wxt2{stroke:#ffcf90}
.wxnf .wxt3,.wxnc .wxt3,.wxnt .wxt3{stroke:#fff8ec}
.wxns{will-change:opacity;filter:drop-shadow(0 0 2px rgba(var(--nr),.95)) drop-shadow(0 0 8px rgba(var(--nr),.6))}
.wxns .wxt1{stroke:rgba(var(--nr),.38)}
.wxns .wxt2{stroke:#ff6a58}
.wxns .wxt3{stroke:#ffe4dc}

/* the door: green-black lacquer gone soft with age, lit from the bulb just above it and falling into shadow toward the
   floor; raised and fielded panels (their bevels catch the light on top, shade below); iron strap hinges; an arched
   speakeasy grille in dark iron over a wooden shutter; a pull and kick plate in dark oiled bronze, lit only at the top */
.wxleaf{position:absolute;inset:0;z-index:2;transform-origin:0 50%;will-change:transform;transition:transform .15s ease;
  background:radial-gradient(95% 40% at 50% -4%,rgba(var(--lt),.30),rgba(var(--lt),.10) 50%,rgba(var(--lt),0) 100%),
  linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.30) 70%,rgba(0,0,0,.55)),
  linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,0) 9%,rgba(255,236,200,.02) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,.48)),
  url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23n)%22/%3E%3C/svg%3E") 0 0/180px 180px,#17231e;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 1px rgba(255,236,200,.07)}
.wxwear{position:absolute;inset:0;opacity:.28;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22w%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.13%22 numOctaves=%224%22 seed=%2221%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .21 0 0 0 26 -17.6%22/%3E%3C/filter%3E%3Crect width=%22240%22 height=%22240%22 filter=%22url(%23w)%22/%3E%3C/svg%3E") 0 0/200px 200px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 7%,transparent 93%,#000),linear-gradient(0deg,#000,transparent 12%),radial-gradient(12% 9% at 86% 46%,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent 7%,transparent 93%,#000),linear-gradient(0deg,#000,transparent 12%),radial-gradient(12% 9% at 86% 46%,#000,transparent)}
.wxleaf::after{content:'';position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(0deg,rgba(24,20,14,.55),rgba(24,20,14,0));pointer-events:none}
.wxpanel{position:absolute;left:13%;right:13%;top:6%;height:37%;border-radius:1px;box-sizing:border-box;
  border:solid calc(var(--bdw) * .045);border-color:rgba(255,232,190,.10) rgba(0,0,0,.28) rgba(0,0,0,.5) rgba(255,232,190,.03);
  background:linear-gradient(180deg,rgba(var(--lt),.07),rgba(0,0,0,0) 40%,rgba(0,0,0,.12));
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 0 2px rgba(255,232,196,.05),inset 0 0 0 1px rgba(0,0,0,.25)}
.wxpanel.wxp2{top:50%;height:35%;background:linear-gradient(180deg,rgba(var(--lt),.03),rgba(0,0,0,0) 40%,rgba(0,0,0,.2))}
.wxhinge{position:absolute;left:-2px;top:9%;width:5px;height:9%;border-radius:2px;z-index:1;
  background:linear-gradient(90deg,#0d0b09,#3d342a 45%,#17130f);box-shadow:1px 0 2px rgba(0,0,0,.6)}
.wxhinge.wxh2{top:78%;background:linear-gradient(90deg,#0b0908,#2a241d 45%,#100d0b)}
.wxgr{position:absolute;left:50%;top:13%;width:calc(var(--bdw) * .21);height:calc(var(--bdw) * .27);margin-left:calc(var(--bdw) * -.105);z-index:2;overflow:hidden;
  border-radius:50% 50% 3px 3px / 34% 34% 3px 3px;background:#080605;
  box-shadow:0 0 0 1.5px #1d1915,0 0 0 2.5px rgba(255,226,170,.1),0 -1px 0 2.5px rgba(255,226,170,.14),0 4px 6px 2px rgba(0,0,0,.55),inset 0 2px 4px #000}
.wxglow{position:absolute;inset:0;opacity:0;will-change:opacity;background:radial-gradient(80% 70% at 50% 62%,#ffcf92,#d0823d 55%,#4f2510)}
.wxshut{position:absolute;inset:0;will-change:transform;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23n)%22/%3E%3C/svg%3E") 0 0/180px 180px,linear-gradient(180deg,#2c1e12,#1a110a);box-shadow:inset -2px 0 3px rgba(0,0,0,.6)}
.wxgr svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.wxpull{position:absolute;right:10%;top:36%;width:6px;height:20%;border-radius:4px;z-index:1;
  background:linear-gradient(180deg,rgba(255,226,170,.28),rgba(255,226,170,.06) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,.35)),
  linear-gradient(90deg,#140f0a,#4a3b28 38%,#6b5536 50%,#352a1c 66%,#120d09);box-shadow:-3px 5px 6px rgba(0,0,0,.6)}
.wxpull::before,.wxpull::after{content:'';position:absolute;left:-3px;width:12px;height:6px;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.6)}
.wxpull::before{top:-3px;background:linear-gradient(180deg,#6d573a,#2a2017)}
.wxpull::after{bottom:-3px;background:linear-gradient(180deg,#352a1d,#140f0b)}
.wxkick{position:absolute;left:5%;right:5%;bottom:2.5%;height:6.5%;border-radius:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,0) 1px 3px),linear-gradient(180deg,#3d3122,#2a2117 45%,#18130d);
  box-shadow:inset 0 1px 0 rgba(255,226,170,.12),0 -1px 0 rgba(0,0,0,.4)}
/* the light under the door: a hairline, and the faintest spill on the stone; now and then someone crosses the room inside */
.wxsill{position:absolute;left:5%;right:5%;bottom:0;height:1px;z-index:3;overflow:hidden;opacity:.7;
  background:linear-gradient(90deg,rgba(255,190,120,0),rgba(255,198,132,.75) 22%,rgba(255,206,146,.85) 50%,rgba(255,198,132,.75) 78%,rgba(255,190,120,0))}
.wxsill i{position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,rgba(10,7,5,0),rgba(10,7,5,.95) 30%,rgba(10,7,5,.95) 70%,rgba(10,7,5,0));transform:translateX(-120%);will-change:transform}

/* the doorway: a dark casing set into the brick */
.wxdoor{left:50%;top:var(--dt);width:var(--dw);height:var(--dh);margin-left:calc(var(--dw) * -.5);perspective:1100px;perspective-origin:50% 40%}
.wxdoor::before{content:'';position:absolute;inset:-11px -11px 0;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#1b1511,#0e0b09 30%,#0a0807);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 -1px 0 rgba(255,220,180,.07),inset 0 0 0 1px rgba(255,220,180,.035)}
.wxdoor::after{content:'';position:absolute;inset:0;background:#050403;box-shadow:inset 0 10px 14px rgba(0,0,0,.9)}
.wxinside{position:absolute;inset:0;z-index:1;opacity:0;background:radial-gradient(90% 60% at 30% 70%,rgba(255,196,128,.9),rgba(196,120,60,.55) 50%,rgba(60,30,14,.9) 100%)}

/* the step and the street */
.wxstep{left:50%;top:calc(var(--dt) + var(--dh));width:calc(var(--dw) * 1.42);height:14px;margin-left:calc(var(--dw) * -.71);border-radius:1px;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23n)%22/%3E%3C/svg%3E") 0 0/180px 180px,linear-gradient(180deg,#463e36 0,#352f29 2px,#26221d 4px,#181512 5px,#100e0c);box-shadow:0 10px 20px rgba(0,0,0,.7)}
.wxstep::after{content:'';position:absolute;left:25%;right:25%;top:0;height:4px;background:radial-gradient(50% 100% at 50% 0,rgba(255,190,120,.10),rgba(255,190,120,0))}
.wxground{left:0;right:0;top:calc(var(--dt) + var(--dh) + 14px);bottom:0;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23n)%22/%3E%3C/svg%3E") 0 0/180px 180px,radial-gradient(60% 30% at 50% 0,rgba(var(--lt),.04),rgba(var(--lt),0)),linear-gradient(180deg,#14110f 0,#0d0b0a 18%,#070606 70%)}
.wxground::before{content:'';position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.wxwet{left:0;right:0;top:calc(var(--dt) + var(--dh) + 14px);bottom:0;opacity:.9;
  background:radial-gradient(9% 55% at 50% 0,rgba(255,196,128,.13),rgba(255,196,128,0)),radial-gradient(26% 70% at 50% 8%,rgba(var(--ne),.07),rgba(var(--ne),0)),radial-gradient(3% 30% at 50% 22%,rgba(var(--nr),.10),rgba(var(--nr),0)),linear-gradient(180deg,rgba(150,170,190,.05),rgba(150,170,190,0) 50%);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22420%22 height=%22420%22%3E%3Cfilter id=%22b%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.012%22 numOctaves=%223%22 seed=%224%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.42%22/%3E%3C/filter%3E%3Crect width=%22420%22 height=%22420%22 filter=%22url(%23b)%22/%3E%3C/svg%3E");-webkit-mask-size:240px 160px;mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22420%22 height=%22420%22%3E%3Cfilter id=%22b%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.012%22 numOctaves=%223%22 seed=%224%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.42%22/%3E%3C/filter%3E%3Crect width=%22420%22 height=%22420%22 filter=%22url(%23b)%22/%3E%3C/svg%3E");mask-size:240px 160px}
/* the night air: haze drifting through, dust blown about in the gusts */
.wxhaze{left:0;top:0;width:calc(100% + 600px);height:100%;opacity:.06;will-change:transform;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22400%22%3E%3Cfilter id=%22h%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.006 .012%22 numOctaves=%223%22 seed=%224%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .75 0 0 0 0 .8 0 0 0 0 .85 0 0 0 1.4 -.55%22/%3E%3C/filter%3E%3Crect width=%22600%22 height=%22400%22 filter=%22url(%23h)%22/%3E%3C/svg%3E") 0 0/600px 400px;pointer-events:none;z-index:2}
.wxhaze.wxhz2{opacity:.045;background-size:900px 600px;width:calc(100% + 900px)}
.wxdust{inset:0;pointer-events:none;z-index:3}
.wxdust i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,236,208,.95),rgba(255,236,208,.4) 45%,rgba(255,236,208,0) 72%);opacity:0;will-change:transform,opacity}
.wxdust i.wxdb{background:radial-gradient(circle,rgba(255,226,190,.22),rgba(255,226,190,0) 70%)}
.wxvig{inset:0;background:radial-gradient(125% 92% at 50% 40%,rgba(0,0,0,0) 56%,rgba(0,0,0,.55) 100%);pointer-events:none;z-index:3}

/* the words (welcomeHTML): the Host's line, Knock (the door is the key, .wxhit), two ways round, the note */
.wxui{position:absolute;left:0;right:0;top:calc(var(--dt) + var(--dh) + 14px);bottom:0;display:flex;flex-direction:column;align-items:center;
  padding:16px 24px calc(10px + env(safe-area-inset-bottom,0px));text-align:center;z-index:5}
.wxh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wxline{margin:0;min-height:1.3em;font:italic 500 17px/1.3 Georgia,'Times New Roman',serif;color:#e6d6b8;letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.8);opacity:0}
.wxknock{margin:8px 0 0;padding:8px 14px;border:0;background:none;cursor:pointer;font:600 10.5px/1 var(--f-body);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:rgba(214,186,132,.72);-webkit-tap-highlight-color:transparent}
.wxlinks{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:auto}
.wxlinks button{border:0;background:none;padding:8px 2px;cursor:pointer;font:500 13.5px/1.2 var(--f-body);color:#b9a888;letter-spacing:.02em;-webkit-tap-highlight-color:transparent}
.wxlinks button:active{color:#e9dfcb}
.wxlinks i{width:3px;height:3px;border-radius:50%;background:rgba(201,162,75,.5)}
.wxnote{margin:4px 0 0;font:500 9.5px/1.3 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:rgba(185,168,136,.4)}
.wxhit{position:absolute;left:50%;top:var(--st);width:max(var(--sw),calc(var(--dw) + 24px));height:calc(var(--dt) + var(--dh) - var(--st));margin-left:calc(max(var(--sw),calc(var(--dw) + 24px)) * -.5);border:0;background:none;padding:0;cursor:pointer;z-index:4;-webkit-tap-highlight-color:transparent}
.wx:has(.wxhit:active) .wxleaf{transform:rotateY(4deg)}

/* moving: the neon coming on, then its odd stutter; the bulb's sway; a shadow inside; the Host at the grille */
@keyframes wxOnF{0%,8%{opacity:0}9%{opacity:.9}11%{opacity:.1}14%{opacity:.75}15%{opacity:0}22%{opacity:0}23%{opacity:1}25%{opacity:.4}27%,100%{opacity:1}}
@keyframes wxOnC{0%,20%{opacity:0}21%{opacity:.8}23%{opacity:0}31%{opacity:.6}32%{opacity:.15}34%,100%{opacity:1}}
@keyframes wxOnS{0%,40%{opacity:0}41%{opacity:1}43%{opacity:.2}45%,100%{opacity:1}}
@keyframes wxOnT{0%,50%{opacity:0}52%{opacity:.7}54%{opacity:.2}57%,100%{opacity:1}}
@keyframes wxOnG{0%,8%{opacity:0}28%{opacity:.7}45%,100%{opacity:1}}
@keyframes wxHum{0%,93%,100%{opacity:1}93.6%{opacity:.55}94.2%{opacity:1}94.8%{opacity:.75}95.4%{opacity:1}}
@keyframes wxGust{0%{transform:rotate(0.63deg)}8%{transform:rotate(1.68deg)}14%{transform:rotate(7.14deg)}18%{transform:rotate(2.52deg)}22%{transform:rotate(6.09deg)}27%{transform:rotate(-0.42deg)}31%{transform:rotate(2.73deg)}36%{transform:rotate(0.63deg)}45%{transform:rotate(1.47deg)}55%{transform:rotate(0.42deg)}63%{transform:rotate(1.26deg)}70%{transform:rotate(4.62deg)}74%{transform:rotate(1.68deg)}78%{transform:rotate(3.57deg)}84%{transform:rotate(0.21deg)}92%{transform:rotate(1.05deg)}100%{transform:rotate(0.63deg)}}
@keyframes wxGustPool{0%{transform:translateX(1.8px)}8%{transform:translateX(3.6px)}14%{transform:translateX(16.2px)}18%{transform:translateX(5.4px)}22%{transform:translateX(14.4px)}27%{transform:translateX(-1.8px)}31%{transform:translateX(5.4px)}36%{transform:translateX(1.8px)}45%{transform:translateX(3.6px)}55%{transform:translateX(0)}63%{transform:translateX(3.6px)}70%{transform:translateX(10.8px)}74%{transform:translateX(3.6px)}78%{transform:translateX(9px)}84%{transform:translateX(0)}92%{transform:translateX(1.8px)}100%{transform:translateX(1.8px)}}
@keyframes wxBlow{0%,9%{opacity:0;transform:translate3d(0,0,0)}12%{opacity:.25;transform:translate3d(calc(var(--k) * 3vw),calc(var(--j) * 3px),0)}16%{opacity:.9;transform:translate3d(calc(var(--k) * 26vw),calc(var(--j) * -14px),0)}22%{opacity:.85;transform:translate3d(calc(var(--k) * 56vw),calc(var(--j) * 8px),0)}28%{opacity:.4;transform:translate3d(calc(var(--k) * 70vw),calc(var(--j) * -6px + 6px),0)}38%,100%{opacity:0;transform:translate3d(calc(var(--k) * 78vw),calc(var(--j) * 4px + 14px),0)}}
@keyframes wxDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-600px,0,0)}}
@keyframes wxDrift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-900px,0,0)}}
@keyframes wxPass{0%,62%{transform:translateX(-120%)}78%{transform:translateX(130%)}100%{transform:translateX(330%)}}
@keyframes wxUp{from{opacity:0}to{opacity:1}}
@keyframes wxBreathe{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes wxShut{0%,100%{transform:translateX(0)}14%,80%{transform:translateX(88%)}}
@keyframes wxGlow{0%,10%{opacity:0}20%,76%{opacity:1}86%,100%{opacity:0}}
.wx .wxnglow{opacity:1}
/* before the script has run, the sign is off: its dark glass only, then it sputters on (.wxhi) */
.wx:not(.wxhi):not(.wxstill) .wxn:not(.wxng),.wx:not(.wxhi):not(.wxstill) .wxnglow{opacity:0}
.wx.wxhi .wxnf{animation:wxOnF 2.6s linear .35s both}
.wx.wxhi .wxnc{animation:wxOnC 2.6s linear .35s both,wxHum 13s linear 4s infinite}
.wx.wxhi .wxns{animation:wxOnS 2.6s linear .35s both}
.wx.wxhi .wxnt{animation:wxOnT 2.6s linear .35s both}
.wx.wxhi .wxnglow{animation:wxOnG 2.6s linear .35s both}
.wx .wxbulb b{animation:wxGust 15s cubic-bezier(.45,.05,.55,.95) infinite}
.wx .wxpool,.wx .wxbeam{animation:wxGustPool 15s cubic-bezier(.45,.05,.55,.95) infinite}
.wx .wxdust i.wxda{animation:wxBlow 15s linear infinite}
.wx .wxdust i.wxdb{animation:wxBlow 15s linear 8.4s infinite}
.wx .wxhaze{animation:wxDrift 70s linear infinite}
.wx .wxhaze.wxhz2{animation:wxDrift2 130s linear infinite}
.wx .wxsill i{animation:wxPass 11s cubic-bezier(.45,0,.55,1) 3s infinite}
.wx .wxui{animation:wxUp .6s ease both}
.wx .wxknock{animation:wxBreathe 3.6s ease-in-out 2.4s infinite}
.wx.wxhi .wxshut{animation:wxShut 3.4s cubic-bezier(.5,0,.2,1) 1.6s both}
.wx.wxhi .wxglow{animation:wxGlow 3.4s ease 1.6s both}
.wx.wxhi .wxline{animation:wxUp .5s ease 1.9s both}
.wx.wxstill .wxui,.wx.wxstill .wxline{animation:none;opacity:1}

/* in: the door swings in on warm light, the camera steps through, the next screen is drawn in the dark, the layer fades */
.wx.wxgo{pointer-events:none}
.wx.wxgo .wxui{opacity:1;animation:none;transition:opacity .28s ease}
.wx.wxgo .wxui>*:not(.wxline){opacity:0;animation:none;transition:opacity .25s ease}
.wx.wxgo .wxleaf{transform:rotateY(78deg);transition:transform .55s cubic-bezier(.55,0,.25,1) .04s}
.wx.wxgo .wxinside{opacity:1;transition:opacity .4s ease .12s}
.wx.wxgo .wxsc{transform:scale(1.5);transition:transform .62s cubic-bezier(.6,0,.3,1) .08s}
.wx::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(60% 45% at 50% 52%,#3a2414,#1a0f08 60%,#0c0705)}
.wx.wxgo::after{opacity:1;transition:opacity .34s ease .36s}
.wx.wxout{opacity:0;transition:opacity .38s ease}

@media (prefers-reduced-motion:reduce){.wx *,.wx *::before,.wx *::after{animation:none!important}.wx .wxui,.wx .wxline{opacity:1}}
:root[data-motion="off"] .wx *,:root[data-motion="off"] .wx *::before,:root[data-motion="off"] .wx *::after{animation:none!important}
:root[data-motion="off"] .wx .wxui,:root[data-motion="off"] .wx .wxline{opacity:1}
/* ===== Lights up (Light in Settings and the bulb key on Home): still a dark room, one lamp turned up; the same room, the same leather, wood, glass and felt,
   with the lamps turned up. Nothing turns to parchment; the light falls warm and bright near the lamp and away into
   deep reds and browns at the edges, so the room shows its whole range of color. Driven by :root[data-lights="up"]. ===== */
:root[data-lights="up"]{--bg:#1d150f;--panel:#241c16;--panel2:#1d1612}
:root[data-lights="up"] body::before{background:radial-gradient(90% 55% at 50% 0%,rgba(255,206,140,.20),rgba(255,206,140,0) 70%),radial-gradient(120% 80% at 50% 110%,rgba(120,40,24,.22),transparent 70%),radial-gradient(140% 100% at 50% 45%,transparent 55%,rgba(10,6,4,.55))}

/* the room, lit: amber leather walls near the lamp, a rich red-brown wainscot, warm wood underfoot; texture shows */
:root[data-lights="up"] .hroom{--veil:14,17,26;--shadow:5,7,14;--wall1:#252a35;--wall2:#111319;--panel:#4a3120;--floor1:#3d2817;--floor2:#2f1e11;--tex:238,226,206;--tex-a:.08;--shade:6,7,12;--lamp:238,214,182}
:root[data-lights="up"] .hroom::after{background:linear-gradient(180deg,rgba(var(--shadow),.45) 0%,rgba(var(--shadow),.15) 16%,rgba(var(--shadow),0) 34%),linear-gradient(180deg,rgba(var(--veil),.55) 0%,rgba(var(--veil),.42) 30%,rgba(var(--veil),.34) 55%,rgba(var(--veil),.4) 100%)}
:root[data-lights="up"] .hroom::before{background:radial-gradient(95% 65% at 50% 6%,rgba(var(--lamp),.26),rgba(var(--lamp),.08) 45%,rgba(var(--lamp),0) 80%)}
:root[data-lights="up"] .hroom .back>i.wash{background:radial-gradient(70% 60% at 50% 0%,rgba(var(--lamp),.18),rgba(var(--lamp),.06) 55%,transparent)}
:root[data-lights="up"] .hacone{opacity:1;filter:brightness(1.25)}
/* each lamp light, turned up, warms the walls its own way */
:root[data-lights="up"] .hroom[data-tint="gold"]{--lamp:238,212,176}
:root[data-lights="up"] .hroom[data-tint="green"]{--lamp:190,236,180}
:root[data-lights="up"] .hroom[data-tint="red"]{--lamp:255,168,140}
:root[data-lights="up"] .hroom[data-tint="purple"]{--lamp:222,190,255}
:root[data-lights="up"] .hroom[data-tint="grey"]{--lamp:220,232,250}
/* the darkening layers made for after hours step back */
:root[data-lights="up"] body.inroom #homeamb::before{background:radial-gradient(70% 38% at 50% 0%,rgba(255,206,140,.22),rgba(255,206,140,0) 72%),radial-gradient(130% 95% at 50% 38%,rgba(0,0,0,0) 58%,rgba(8,5,3,.45) 100%)}
:root[data-lights="up"] body.inroom:not(.onhome) #homeamb::after{background:rgba(14,10,8,.06)}
/* glass panes catch more of the light */
:root[data-lights="up"] .hglass{box-shadow:inset 0 1px 0 rgba(255,236,200,.32),inset 0 0 0 1px rgba(238,203,112,.18),0 14px 22px -14px rgba(0,0,0,.7)}
/* ===== Arrivals with weight: Home's lights come up, the Passport opens, the Tables' placards stand up.
   Only on arriving (shell/lobby.js sets the classes), never on a redraw; never when motion is reduced (the classes are left off).
   Opacity and transforms only, so phones stay smooth. ===== */

/* --- Home, first arrival of a visit (html[data-hlit], .home3.hfull): the room starts dim and the lamp warms like a bulb heating;
   then its light travels down the page and each piece answers it as it arrives. Through the welcome's doors it waits for them (--hd: 2.6s, about when the doors have opened) --- */
html[data-hlit="door"]{--hd:.1s}
.hadim{position:absolute;inset:0;z-index:5;background:#060403;opacity:0;pointer-events:none}
html[data-hlit] .hadim{animation:hlDim 2s cubic-bezier(.45,0,.2,1) var(--hd,0s) both}
@keyframes hlDim{from{opacity:.88}to{opacity:0}}
html[data-hlit] .hacone{animation:hlWarm 1.8s cubic-bezier(.3,0,.2,1) var(--hd,0s) both}
@keyframes hlWarm{0%{opacity:0;transform:translateX(-50%) scale(.9,.6)}30%{opacity:.35}100%{opacity:.85;transform:translateX(-50%)}}
.home3.hfull{--hl:calc(var(--hd,0s) + .5s)}
.home3.hfull .hv{animation:hvIn .8s cubic-bezier(.2,.75,.25,1.04) backwards;animation-delay:calc(var(--hl) + var(--i) * 110ms)}
/* the gold catches it: the avatar ring, the wallet's numerals, the line drawn under them, the XP bar */
.home3.hfull .hwring{animation-delay:calc(var(--hl) + .25s)}
.home3.hfull .hwamt:not(.gdone){animation-delay:calc(var(--hl) + .3s)}
.home3.hfull .hcplot svg{animation-delay:calc(var(--hl) + .45s)}
.home3.hfull .hcdot{animation-delay:calc(var(--hl) + 1.4s)}
.home3.hfull .hwbar i{animation-delay:calc(var(--hl) + .55s)}
/* your table: its moment (the Tables wheel's own, tables-file.css) waits for the light to reach it (--td in playHeroHTML) */

/* the Passport's opening lives in course.css; the Tables' arrival in tables-floor.css */
/* belt and braces: the classes are left off when motion is reduced, but the settings can change mid-visit */
@media (prefers-reduced-motion:reduce){html[data-hlit] .hadim,html[data-hlit] .hacone,.home3.hfull *,.home3.hfull *::before,.home3.hfull *::after{animation:none!important}}
:root[data-motion="off"] .hadim,:root[data-motion="off"] .home3.hfull *,:root[data-motion="off"] .home3.hfull *::before,:root[data-motion="off"] .home3.hfull *::after{animation:none!important}
/* ===== The Tables page as a wheel (table-screens.js tsWheel / twPos / twSettle / tsSceneHTML, family/screen.js cardTilesHTML) =====
   The tables in a row you swipe left and right with no end; a hard flick carries it past several like a big wheel, then
   it settles on one (snap to centre, no snap-stop). Each card is a dark card with its table drawn flat from above; the
   one in the middle plays its moment once. No frosted glass and no 3D here, and a scene never sits inside a <button>
   (Safari shrink-wraps a button's content: the scenes drew zero wide). */
.twtrack{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  margin:4px -14px 6px;padding:4px 9% 10px;scrollbar-width:none}
.twtrack::-webkit-scrollbar{display:none}
.twtrack:focus-visible{outline:2px solid rgba(201,162,75,.5);outline-offset:-2px;border-radius:18px}
.twtrack>.gtile.tws{flex:0 0 100%;scroll-snap-align:center;position:relative;display:block;border-radius:16px;overflow:hidden;
  -webkit-backdrop-filter:none;backdrop-filter:none;isolation:auto;border:0;
  background:var(--tile,linear-gradient(180deg,#2a211a 0,#1f1813 60px,#17120e 100%));
  box-shadow:inset 0 1px 0 rgba(255,236,200,.16),inset 0 0 0 1px rgba(201,162,75,.16),0 12px 22px -10px rgba(0,0,0,.75);
  --a:0;transform:scale(calc(1 - var(--a) * .08));opacity:calc(1 - var(--a) * .45);transition:none}
.twtrack>.gtile.tws::before,.twtrack>.gtile.tws::after{display:none}
.rdhead{display:flex;align-items:center;gap:10px;height:60px;padding:0 14px;color:var(--ink)}
.rdhead b{flex:1;min-width:0;font-family:var(--f-disp);font-size:1.1em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f3e3bd;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.rdhead em{font-style:normal;font-size:.66em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rdhead em strong{color:var(--brass);font-family:var(--f-num);font-size:1.4em;letter-spacing:.02em}
.tfem{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.tfem svg{width:32px;height:32px}
.tfbody{padding:0 10px 14px}

.tws .gmain.tsgo{padding:0;display:block;width:100%;box-sizing:border-box;cursor:pointer;background:none;border:0}
.tws .tsc{transition:transform .09s ease}
.tws .gmain.tsgo:active .tsc{transform:scale(.985)}
.tsinfo{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 12px 0;gap:3px}
.tsinfo b{font-family:var(--f-disp);font-size:1.18em;line-height:1.15;color:var(--ink);text-shadow:0 1px 0 rgba(0,0,0,.5)}
.tsinfo span{font-size:.86em;color:var(--muted);line-height:1.35}
.tsinfo em{font-style:normal;font-size:.72em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.tsinfo em strong{color:var(--brass);font-family:var(--f-num);letter-spacing:.02em;font-size:1.25em}
.tskeys2{display:flex;gap:8px;justify-content:center;align-items:center;padding:12px 16px 0}
.tskeys2 .btn{flex:0 1 220px;min-width:0;min-height:44px}
.tskeys2 .gcash{position:static;flex:none;transform:none;min-height:44px;padding:0 14px;background:none;color:var(--muted);border:1px solid var(--line);box-shadow:none;border-radius:12px}
.tskeys2 .gcash:active{transform:translateY(1px)}
#sec-felt .tshead,#sec-cards .tshead{margin-bottom:8px}

/* ---- the scene: a dark room, one lamp, the table seen from above ---- */
/* width:100% matters: inside a button Safari shrinks a block to its in-flow content, and a scene is all absolutely placed,
   so without it every scene but Jacks (the machine has in-flow content) drew zero wide, i.e. blank, on iPhone */
.tsc{display:block;position:relative;width:100%;box-sizing:border-box;height:240px;border-radius:12px;overflow:hidden;
  background:radial-gradient(80% 60% at 50% 46%,rgba(var(--lampc,255,214,150),.10),transparent 72%),radial-gradient(90% 70% at 50% -10%,rgba(255,214,150,.16),transparent 70%),linear-gradient(180deg,#1b130d,#0d0907 70%)}
.tslamp{position:absolute;left:50%;top:-30px;width:300px;height:220px;margin-left:-150px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--lampc,var(--rm-lamp)),.30),transparent);opacity:.7;z-index:2;pointer-events:none;mix-blend-mode:soft-light}
.tsplane{position:absolute;left:8%;right:8%;top:16px;height:196px;
  border-radius:12px 12px 50% 50% / 12px 12px 38% 38%;
  background:radial-gradient(rgba(255,255,255,.035) .6px,transparent 1px) 0 0/3px 3px,radial-gradient(rgba(0,0,0,.08) .7px,transparent 1.1px) 1px 2px/4px 4px,
    radial-gradient(70% 55% at 50% 40%,rgba(255,240,210,.10),transparent 70%),radial-gradient(110% 80% at 50% 8%,var(--felt1),var(--felt2) 55%,var(--felt3));
  box-shadow:0 0 0 1.5px rgba(214,178,104,.7),0 0 0 3px rgba(0,0,0,.35),0 0 0 14px var(--rl,#3a2016),0 0 0 15px var(--rl2,#1b0e08),0 16px 18px 10px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(0,0,0,.25),inset 0 10px 22px rgba(0,0,0,.35),inset 0 0 46px rgba(0,0,0,.4);
  outline:1px dashed var(--stitch,transparent);outline-offset:7px}
.tsplane::before{content:'';position:absolute;inset:-14px;border-radius:inherit;pointer-events:none;padding:11px;
  background:radial-gradient(60% 40% at 50% 0%,rgba(255,232,196,.22),transparent 70%),linear-gradient(180deg,rgba(255,220,180,.16),rgba(255,220,180,.03) 40%,rgba(0,0,0,.28)),var(--grain,none);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tsprint{position:absolute;left:0;right:0;text-align:center;color:rgba(244,237,217,.72);text-shadow:0 0 1px rgba(0,0,0,.25);font-family:var(--f-disp);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11px}
.tsprint.arc{top:62px}
.tsprint.sub{top:80px;font-size:8.5px;letter-spacing:.2em;font-weight:600;color:rgba(244,237,217,.55)}
.tspot{position:absolute;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(244,237,217,.7);display:flex;align-items:center;justify-content:center}
.tspot em{font-style:normal;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,237,217,.72);font-family:var(--f-body)}
.tsk{position:absolute;display:block}
.tsc .card{--cw:30px;width:30px;box-shadow:0 1px 1px rgba(0,0,0,.45),0 3px 5px -1px rgba(0,0,0,.45)}
/* a card dealt face down and turned over: its back lies on its face; the turn narrows the card to an edge, the back
   drops away at the edge, and the face widens back out (flat, no 3D) */
.tsfl{display:block;position:relative;width:var(--cw,30px);aspect-ratio:5/7}
.tsfl>span{position:absolute;inset:0}
.tsfl>.ba{opacity:0}
/* chips standing on the felt, seen from the rail */
.tstack{position:absolute;display:block;width:30px;height:40px;z-index:3}
.tstack::before{content:'';position:absolute;left:-3px;right:-3px;bottom:-3px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
.tstack i{position:absolute;left:0;bottom:calc(var(--i) * 4.5px);width:30px;height:10px;border-radius:50%;background:var(--cb);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.5);
  background-image:repeating-linear-gradient(90deg,transparent 0 4px,var(--cs) 4px 6px,transparent 6px 10px);background-size:100% 4px;background-repeat:no-repeat;background-position:0 100%}
.tstack i::after{content:'';position:absolute;left:3px;right:3px;top:1px;height:5px;border-radius:50%;border:1px dashed rgba(244,237,217,.5);background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}

/* ---- the moments. Every scene's resting state is the finished one; .play runs its moment once, from the before
   state, when the table settles in the middle (--td waits for the page's arrival). A table not yet played (.tsl:not(.done))
   waits in the before state. Motion off: no before state, no moment, the finished scene. ---- */
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) .tsl:not(.done) .deal .card,:root:not([data-motion="off"]) .tsl:not(.done) .drop i{opacity:0}
  :root:not([data-motion="off"]) .tsl:not(.done) .tsfl>.ba{opacity:1}
  :root:not([data-motion="off"]) .tsl:not(.done) .tsdie{opacity:0}
  :root:not([data-motion="off"]) .tsl:not(.done) .lir1{opacity:1;translate:none;scale:1}
  :root:not([data-motion="off"]) .tsl:not(.done) .jc i,:root:not([data-motion="off"]) .tsl:not(.done) .tskeys i.h::after{opacity:0}
  :root:not([data-motion="off"]) .tsl:not(.done) .tsglow{opacity:0}

  /* a card dealt: off the shoe (or the dealer's hand at --fx,--fy), lifted toward you on the way, landing with a small settle */
  .tsl.play .deal{animation:tsDeal .62s cubic-bezier(.25,.7,.25,1) calc(var(--td,0s) + var(--t,0s)) both}
  .tsl.play .deal .card{animation:tsShow .14s linear calc(var(--td,0s) + var(--t,0s)) both}
  /* a card turned over where it lies, lifting a little as it goes */
  .tsl.play .tsfl{animation:tsTurn .46s ease-in-out calc(var(--td,0s) + var(--tf,0s)) both}
  .tsl.play .tsfl>.ba{animation:tsBack .46s linear calc(var(--td,0s) + var(--tf,0s)) both}
  /* chips set down one at a time, each with a small bounce */
  .tsl.play .drop i{animation:tsDrop .46s cubic-bezier(.35,.6,.4,1) calc(var(--td,0s) + var(--t,0s) + var(--i) * .13s) both}
}
@keyframes tsDeal{0%{translate:var(--fx) var(--fy);rotate:-22deg;scale:1}55%{translate:calc(var(--fx) * .22) calc(var(--fy) * .22);rotate:-5deg;scale:1.14}84%{translate:0 0;rotate:1.5deg;scale:.98}100%{translate:0 0;rotate:0deg;scale:1}}
@keyframes tsShow{0%{opacity:0}100%{opacity:1}}
@keyframes tsTurn{0%{transform:scale(1,1)}50%{transform:scale(0,1.1)}100%{transform:scale(1,1)}}
@keyframes tsBack{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes tsDrop{0%{opacity:0;transform:translateY(-34px)}55%{opacity:1;transform:translateY(0)}74%{transform:translateY(-3px)}100%{opacity:1;transform:none}}

/* Blackjack: round the table from the shoe */
/* the shoe, seen from above: a dark wood box angled toward the dealer, the deck's ivory edges along it, a brass nose
   and the top card's back showing where it's drawn */
.tsshoe{position:absolute;right:14px;top:14px;width:30px;height:44px;border-radius:4px 4px 7px 7px;transform:rotate(-14deg);z-index:2;
  background:repeating-linear-gradient(180deg,#efe6cf 0 1px,#cfc4a8 1px 2px) 5px 6px/20px 26px no-repeat,linear-gradient(180deg,#3a2416,#1a0f08);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,220,170,.25),0 2px 0 #0b0604,3px 6px 8px rgba(0,0,0,.55)}
.tsshoe::before{content:'';position:absolute;left:-1px;right:-1px;bottom:-1px;height:12px;border-radius:2px 2px 7px 7px;background:linear-gradient(180deg,#e5c886,#a67c35 55%,#6e4f22);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.tsshoe i{position:absolute;left:6px;right:6px;bottom:4px;height:14px;border-radius:2px;background:var(--cbk,#7a2230);box-shadow:0 0 0 1px #efe6d0,0 2px 3px rgba(0,0,0,.5);transform:translateY(6px)}
/* the four other seats' empty circles round the arc */
.tsc-bj .tsprint.arc{top:66px}.tsc-bj .tsprint.sub{top:83px}
.tsc-bj .d1{left:calc(50% - 32px);top:22px}.tsc-bj .d2{left:calc(50% + 2px);top:22px}
.tsc-bj .p1{left:calc(50% - 24px);top:106px;transform:rotate(-4deg)}.tsc-bj .p2{left:calc(50% - 4px);top:109px;transform:rotate(5deg)}
.tsc-bj .tspot{width:30px;height:30px;border-color:rgba(244,237,217,.45)}
.tsc-bj .bjspot{left:calc(50% - 20px);top:148px;width:40px;height:40px;border-color:rgba(244,237,217,.75)}
.tsc-bj .bjs0{left:calc(50% - 116px);top:92px}.tsc-bj .bjs1{left:calc(50% - 78px);top:132px}.tsc-bj .bjs3{left:calc(50% + 48px);top:132px}.tsc-bj .bjs4{left:calc(50% + 86px);top:92px}
.bjchips{left:calc(50% - 15px);top:151px}
/* the dealer's tray, set into the rail at the top of the felt */
.tstray{position:absolute;left:50%;top:-1px;width:116px;margin-left:-58px;height:13px;display:flex;gap:1.5px;padding:2px 3px 3px;box-sizing:border-box;border-radius:0 0 7px 7px;z-index:1;
  background:linear-gradient(180deg,#070403,#22160d);box-shadow:inset 0 2px 4px rgba(0,0,0,.85),0 0 0 1px rgba(214,178,104,.45),0 1px 0 rgba(255,220,170,.12)}
.tstray i{flex:1;border-radius:1.5px;background:repeating-linear-gradient(90deg,var(--c) 0 2px,rgba(0,0,0,.45) 2px 2.6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 2px rgba(0,0,0,.4)}

/* Hold'em: the board, turned street by street; the Play bet set down */
.tsc-uth .tsprint.arc{top:94px;font-size:9.5px}
.tsc-uth .tsk{top:30px}
.tsc-uth .b0{left:calc(50% - 83px)}.tsc-uth .b1{left:calc(50% - 49px)}.tsc-uth .b2{left:calc(50% - 15px)}.tsc-uth .b3{left:calc(50% + 19px)}.tsc-uth .b4{left:calc(50% + 53px)}
.tsc-uth .u1{left:calc(50% - 74px);top:116px}.tsc-uth .u2{left:calc(50% + 34px);top:116px}.tsc-uth .u3{left:calc(50% - 20px);top:142px}
.uthstack{left:calc(50% - 15px);top:150px}

/* Craps: the dice are thrown down the table, hit the back wall, hop twice and settle */
.tsplane.cz{border-radius:10px 10px 30px 30px}
.czp{position:absolute;left:10px;right:10px;border:1.5px solid rgba(244,237,217,.65);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.czp em{font-style:normal;font-family:var(--f-disp);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,237,217,.75);font-size:12px}
.czp i{font-style:normal;font-size:8px;color:rgba(244,237,217,.6);letter-spacing:.1em}
.czp.nums{top:10px;height:44px;flex-direction:row;gap:0;padding:0}
.czp.nums b{flex:1;text-align:center;font-family:var(--f-disp);color:rgba(244,237,217,.75);font-size:12px;border-left:1.5px solid rgba(244,237,217,.45);line-height:42px}
.czp.nums b:first-child{border-left:0}
.czp.field{top:66px;height:50px}.czp.pass{top:128px;height:34px;border-radius:6px 6px 40px 40px}
.tspuck{position:absolute;left:calc(50% - 46px);top:-3px;width:20px;height:20px;border-radius:50%;background:#f3ead7;color:#1d1710;font-size:7px;font-weight:800;text-transform:uppercase;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #8a7f6c}
/* a die: ivory with a lit top edge and a darker side, its contact shadow on the felt (the shadow doesn't spin) */
.tsdie{position:absolute;top:92px;z-index:3;width:30px;height:30px}
.tsdie::before{content:'';position:absolute;left:-2px;right:-2px;bottom:-5px;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
.tsdi{position:absolute;inset:0;display:block;border-radius:7px;box-shadow:0 3px 0 #a3957a,0 4px 2px rgba(0,0,0,.35);transform:rotate(var(--rz))}
.tsdi::after{content:'';position:absolute;inset:0;border-radius:7px;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 45%,rgba(0,0,0,.12));pointer-events:none}
.tsdi .die{display:block}
/* the dice come to rest at the Field's right end, clear of its printed numbers */
.tsdie.a{left:calc(50% + 86px);top:70px}.tsdie.a .tsdi{--rz:-8deg}
.tsdie.b{left:calc(50% + 98px);top:94px}.tsdie.b .tsdi{--rz:13deg}
@media (prefers-reduced-motion:no-preference){
  .tsl.play .tsdie{animation:tsThrow 1.25s cubic-bezier(.2,.65,.3,1) var(--td,0s) both}
  .tsl.play .tsdie.b{animation-name:tsThrow2;animation-delay:calc(var(--td,0s) + .05s)}
  .tsl.play .tsdi{animation:tsHop 1.25s linear var(--td,0s) both}
  .tsl.play .tsdie.b .tsdi{animation-name:tsHop2;animation-delay:calc(var(--td,0s) + .05s)}
}
@keyframes tsThrow{0%{opacity:0;translate:170px 34px}6%{opacity:1}30%{translate:30px -44px}55%{translate:4px -6px}100%{opacity:1;translate:0 0}}
@keyframes tsThrow2{0%{opacity:0;translate:160px 44px}6%{opacity:1}31%{translate:48px -40px}57%{translate:10px -2px}100%{opacity:1;translate:0 0}}
@keyframes tsHop{0%{transform:translateY(-14px) rotate(calc(var(--rz) + 620deg))}30%{transform:translateY(0) rotate(calc(var(--rz) + 330deg))}42%{transform:translateY(-12px) rotate(calc(var(--rz) + 170deg))}56%{transform:translateY(0) rotate(calc(var(--rz) + 60deg))}64%{transform:translateY(-4px) rotate(calc(var(--rz) + 22deg))}72%{transform:translateY(0) rotate(calc(var(--rz) - 6deg))}86%{transform:rotate(calc(var(--rz) + 3deg))}100%{transform:rotate(var(--rz))}}
@keyframes tsHop2{0%{transform:translateY(-12px) rotate(calc(var(--rz) - 560deg))}30%{transform:translateY(0) rotate(calc(var(--rz) - 300deg))}43%{transform:translateY(-10px) rotate(calc(var(--rz) - 140deg))}57%{transform:translateY(0) rotate(calc(var(--rz) - 44deg))}66%{transform:translateY(-3px) rotate(calc(var(--rz) - 12deg))}74%{transform:translateY(0) rotate(calc(var(--rz) + 5deg))}88%{transform:rotate(calc(var(--rz) - 2deg))}100%{transform:rotate(var(--rz))}}

/* Baccarat: the squeeze, the Banker card raised slowly from its near edge, held, laid down, then turned */
.tspot.bac{width:76px;height:30px;border-radius:30px;top:118px}.tspot.bac.pl{left:calc(50% - 84px)}.tspot.bac.bk{left:calc(50% + 8px)}
.tsc-bac .q1{left:calc(50% - 46px);top:20px;transform:rotate(-3deg)}
.tsc-bac .q2{left:calc(50% + 14px);top:20px;transform:rotate(2deg)}
/* the Banker card face down on top of its face: it slides up a little to show the corner (the squeeze), held, a little
   more, then turns away to reveal the card (a 2D turn, so it reads the same on every phone) */
.tsc-bac .q2 .qb{position:absolute;left:0;top:0;transform-origin:50% 0;opacity:0}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) .tsl:not(.done) .tsc-bac .q2 .qb{opacity:1}
  .tsl.play .tsc-bac .q2 .qb{animation:tsPeek 2.2s ease-in-out calc(var(--td,0s) + var(--tf,0s)) both}
}
@keyframes tsPeek{0%{opacity:1;transform:none}24%{transform:translateY(-6px) rotate(-3deg)}44%{transform:translateY(-6px) rotate(-3deg)}62%{transform:translateY(-14px) rotate(-6deg)}74%{transform:translateY(-14px) rotate(-6deg) scaleX(1)}90%{opacity:1;transform:translateY(-8px) rotate(-3deg) scaleX(0)}100%{opacity:0;transform:scaleX(0)}}
.bacchips{left:calc(50% + 31px);top:102px}

/* Three Card Poker: the dealer's three down, yours fanned, a Play bet, the dealer turns his */
.tsc-tcp .t0{left:calc(50% - 49px);top:22px}.tsc-tcp .t1{left:calc(50% - 15px);top:22px}.tsc-tcp .t2{left:calc(50% + 19px);top:22px}
.tsc-tcp .tsprint.arc{top:74px}.tsc-tcp .tsprint.sub{top:91px}
.tsc-tcp .f0,.tsc-tcp .f1,.tsc-tcp .f2{left:calc(50% - 15px);top:108px;transform-origin:50% 120%}
.tsc-tcp .f0{transform:rotate(-14deg)}.tsc-tcp .f2{transform:rotate(14deg)}
.tsc-tcp .ta{left:calc(50% - 86px);top:132px}.tsc-tcp .tp{left:calc(50% + 46px);top:132px}
.tcpchips{left:calc(50% - 81px);top:146px}.tcpplay{left:calc(50% + 51px);top:146px}

/* Mississippi Stud: your two cards, three down in the middle; a raise and the first turns, a raise and the second */
.tsc-ms .c0,.tsc-ms .c1,.tsc-ms .c2{top:24px}
.tsc-ms .c0{left:calc(50% - 49px)}.tsc-ms .c1{left:calc(50% - 15px)}.tsc-ms .c2{left:calc(50% + 19px)}
.tsc-ms .tsprint.arc{top:78px}
.tsc-ms .h0{left:calc(50% - 32px);top:144px;transform:rotate(-5deg)}.tsc-ms .h1{left:calc(50% - 4px);top:146px;transform:rotate(4deg)}
.tsc-ms .tspot{width:30px;height:30px;top:102px}.tsc-ms .tspot em{font-size:7px}
.tsc-ms .m3{left:calc(50% - 78px)}.tsc-ms .m2{left:calc(50% - 40px)}.tsc-ms .m1{left:calc(50% + 2px)}.tsc-ms .m0{left:calc(50% + 40px)}
.mschips{left:calc(50% + 40px);top:96px}.msr1{left:calc(50% - 78px);top:96px}.msr2{left:calc(50% - 40px);top:96px}

/* Let It Ride: three bets up, the cards out, the first bet pulled back to you */
.tsc-lir .tsprint.arc{top:74px}
.tsc-lir .tspot{top:96px;width:36px;height:36px}.tsc-lir .tspot em{font-size:12px;font-family:var(--f-disp)}
.tsc-lir .l1{left:calc(50% - 64px)}.tsc-lir .l2{left:calc(50% - 18px)}.tsc-lir .l3{left:calc(50% + 28px)}
.tsc-lir .lc0{left:calc(50% - 32px);top:24px}.tsc-lir .lc1{left:calc(50% + 2px);top:24px}
.tsc-lir .lh0{left:calc(50% - 46px);top:142px;transform:rotate(-6deg)}.tsc-lir .lh1{left:calc(50% - 15px);top:140px}.tsc-lir .lh2{left:calc(50% + 16px);top:142px;transform:rotate(6deg)}
.tsc-lir .tstack{top:94px}.lir1{left:calc(50% - 61px)}.lir2{left:calc(50% - 15px)}.lir3{left:calc(50% + 31px)}
.lir1{opacity:0;translate:-10px 52px;scale:1.18}
@media (prefers-reduced-motion:no-preference){.tsl.play .lir1{animation:tsPull .75s cubic-bezier(.4,.1,.3,1) calc(var(--td,0s) + 1.15s) both}}
@keyframes tsPull{0%{opacity:1;translate:0 0;scale:1}20%{translate:0 -3px;scale:1.02}70%{opacity:1}100%{opacity:0;translate:-10px 52px;scale:1.18}}

/* Jacks or Better: no felt, a machine; its glass glows slowly, the held cards marked */
.tsc-job{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(70% 70% at 50% 0%,rgba(255,214,150,.14),transparent 70%),linear-gradient(180deg,#1b130d,#0d0907 70%)}
.tsmach{position:relative;width:86%;height:184px;margin-top:4px;border-radius:14px 14px 6px 6px;padding:9px 10px 0;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(180deg,#221a14,#0c0907);box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 0 0 1.5px rgba(201,162,75,.55),0 12px 22px -10px rgba(0,0,0,.8)}
.tspay{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto;gap:1px 6px;font-size:7px;letter-spacing:.06em;text-transform:uppercase;color:rgba(240,214,150,.8);font-family:var(--f-body)}
.tspay b{font-weight:600}.tspay b:nth-child(even){font-family:var(--f-num);color:#f3dda0;text-align:right}
.tsglass{position:relative;flex:1;border-radius:8px;display:flex;justify-content:center;align-items:center;gap:6px;overflow:hidden;
  background:radial-gradient(100% 120% at 50% 0%,#14263a,#060c14 75%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 8px 18px rgba(0,0,0,.6)}
.tsglass::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 40%);pointer-events:none}
.tsglow{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(190,210,235,.22),transparent);opacity:.6;pointer-events:none}
.jc{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.jc .tsk{position:relative}
.jc .card{--cw:36px;width:36px}
.jc .tsfl{--cw:36px}
.jc i{font-style:normal;font-size:7px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#f3dda0;position:absolute;bottom:-11px}
.tskeys{display:flex;justify-content:center;gap:8px;padding:6px 0 8px}
.tskeys i{position:relative;width:28px;height:8px;border-radius:3px;background:linear-gradient(180deg,#3a2f22,#17110b);box-shadow:0 2px 0 #050302,inset 0 1px 0 rgba(255,255,255,.15)}
.tskeys i.h::after{content:'';position:absolute;inset:0;border-radius:3px;background:linear-gradient(180deg,#f3dda0,#b3812e)}
@media (prefers-reduced-motion:no-preference){
  .tsl.play .jc i,.tsl.play .tskeys i.h::after{animation:tsShow .3s ease calc(var(--td,0s) + 1.05s) both}
  .tsl.play .tskeys i.h+i.h::after,.tsl.play .j1 i{animation-delay:calc(var(--td,0s) + 1.2s)}
  .tsl.play .tsglow{animation:tsWarm 1.6s ease calc(var(--td,0s) + .9s) both}
}
@keyframes tsWarm{0%{opacity:0}55%{opacity:.95}100%{opacity:.6}}

/* The Card Room: a walnut card table, green baize; June, Ray and Tess each play a card to the middle in turn */
.tsc-fam{background:radial-gradient(90% 70% at 50% -10%,rgba(255,214,150,.18),transparent 70%),linear-gradient(180deg,#22170f,#0f0a07 70%)}
.tsplane.fam{left:14%;right:14%;top:16px;height:200px;border-radius:50%;background:none;
  box-shadow:0 0 0 10px var(--rl,#4a2a16),0 0 0 11px var(--rl2,#231208),0 14px 0 10px #1a0d06}
.tsplane.fam::before{inset:-10px;padding:10px}
.baize{position:absolute;inset:0;border-radius:50%;background:radial-gradient(70% 60% at 50% 30%,var(--bz1,#3d6b4a),var(--bz2,#24452f) 60%,var(--bz3,#173022));box-shadow:inset 0 0 30px rgba(0,0,0,.45)}
.tsc-fam .fh{top:80px}.tsc-fam .fl{left:12px;transform:rotate(90deg)}.tsc-fam .fr{right:12px;transform:rotate(-90deg)}.tsc-fam .ft{left:calc(50% - 15px);top:14px}
.tsc-fam .fp{top:78px;left:calc(50% - 15px)}.tsc-fam .fp0{transform:rotate(-12deg) translateX(-12px)}.tsc-fam .fp1{transform:rotate(6deg)}.tsc-fam .fp2{transform:rotate(18deg) translateX(12px)}
.fpad{position:absolute;left:calc(50% - 15px);top:138px;opacity:.9}

@media (prefers-reduced-motion:reduce){.tsc *,.tsc *::before,.tsc *::after{animation:none!important}}
:root[data-motion="off"] .tsc *,:root[data-motion="off"] .tsc *::before,:root[data-motion="off"] .tsc *::after{animation:none!important}

/* ---- each table its own materials (table-screens.js TS_MAT / TS_FAMMAT): the rail round the felt (--rl, --rl2, leather's
   pebble or ebony's sheen --grain; no striped grain on wood, leather's stitching --stitch), the card it sits on (--tile) and its lamp's warmth (--lampc). The felt
   stays the player's own. ---- */
.mt-mahog{--rl:#4b1d12;--rl2:#1e0b06;--lampc:255,196,128;--grain:linear-gradient(transparent,transparent);
  --tile:linear-gradient(180deg,#34190f 0,#24120b 60px,#160d09 100%)}
.mt-oxblood{--rl:#561a1f;--rl2:#22080b;--stitch:rgba(236,200,150,.4);--lampc:255,178,140;
  --grain:radial-gradient(rgba(0,0,0,.22) .8px,transparent 1.3px) 0 0/3px 3px;
  --tile:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.6px) 0 0/4px 4px,linear-gradient(180deg,#3a1418 0,#27100f 60px,#170b0b 100%)}
.mt-walnut{--rl:#4a3020;--rl2:#1f140b;--lampc:255,214,150;--grain:linear-gradient(transparent,transparent);
  --tile:linear-gradient(180deg,#2e2117 0,#211811 60px,#16110c 100%)}
.mt-ebony{--rl:#17110f;--rl2:#040302;--lampc:236,226,204;
  --grain:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 30%);
  --tile:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40px),linear-gradient(180deg,#1a1615 0,#12100f 60px,#0c0a09 100%)}
.mt-ebony .tsplane{box-shadow:0 0 0 2px rgba(214,176,104,.75),0 0 0 12px var(--rl),0 0 0 13px rgba(214,176,104,.5),inset 0 0 40px rgba(0,0,0,.45)}
.mt-cognac{--rl:#7a4622;--rl2:#2e1709;--stitch:rgba(250,226,186,.45);--lampc:255,206,140;
  --grain:radial-gradient(rgba(0,0,0,.2) .8px,transparent 1.3px) 0 0/3px 3px;
  --tile:radial-gradient(rgba(0,0,0,.16) 1px,transparent 1.6px) 0 0/4px 4px,linear-gradient(180deg,#3d2414 0,#2a1a10 60px,#18100b 100%)}
.mt-oak{--rl:#6a4a28;--rl2:#2a1c0e;--lampc:255,224,170;--grain:linear-gradient(transparent,transparent);
  --tile:linear-gradient(180deg,#30261a 0,#231b12 60px,#17120c 100%)}
.mt-rosewood{--rl:#3e1610;--rl2:#170705;--lampc:255,190,150;--grain:linear-gradient(transparent,transparent);
  --tile:linear-gradient(180deg,#2f1511 0,#200f0c 60px,#140a08 100%)}
.mt-cherry{--rl:#6a2a18;--rl2:#2a0f07;--lampc:255,200,150;--grain:linear-gradient(transparent,transparent);
  --tile:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 30px),linear-gradient(180deg,#1b1a1d 0,#121114 60px,#0b0a0c 100%)}
.mt-lacquer .tsmach{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 30%),linear-gradient(180deg,#1d1b1f,#08070a)}
/* the Card Room's baize: green, navy or wine */
.bz-n{--bz1:#2f4a6b;--bz2:#1d3049;--bz3:#121f31}
.bz-w{--bz1:#6b2f37;--bz2:#4a1d24;--bz3:#2e1116}
/* the tile behind a Card Room table takes its wood too */
.ctile.mt-oak,.ctile.mt-cherry,.ctile.mt-walnut,.ctile.mt-ebony,.ctile.mt-mahog{--tile:linear-gradient(180deg,color-mix(in srgb,var(--rl) 45%,#1c1510) 0,#1d1611 60px,#15100c 100%)}
/* a card not yet drawn keeps its height until its scene arrives (tsWheel / twFill) */
.twlazy .tfbody{min-height:300px}
/* Jump to a table, in the Tables header */
.phjump{flex:none;display:inline-flex;align-items:center;gap:4px;margin-bottom:1px;padding:7px 11px;border-radius:99px;border:1px solid rgba(201,162,75,.4);background:rgba(20,15,11,.55);
  font:700 11.5px/1 var(--f-body);color:#e7cf96;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .09s ease}
.phjump span{font-size:15px;line-height:.7;color:#c9a45c}
.phjump:active{transform:translateY(1px)}
/* ===== The setup screen (table-screens.js setupHTML): the table's brass placard, Pick your table, buy in with chips,
   what it costs you, your own rules folded away ===== */
.suplq{position:relative;margin:4px 0 14px;perspective:700px}
.sustill{display:block}
.sustill .tsc{height:150px;border-radius:18px}
.suplate{position:relative;z-index:4;width:84%;margin:-54px auto 0;padding:10px 14px 9px;border-radius:10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;
  color:#2a1e05;background:linear-gradient(180deg,#f7e3a6,#e2bf6a 45%,#c49a45 80%,#a57c2c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 3px rgba(80,50,10,.35),inset 0 0 0 3px rgba(255,240,200,.18),0 0 0 1px #6b4a17,0 3px 0 #5a3e14,0 12px 20px -8px rgba(0,0,0,.8)}
.suplate::before{content:'';position:absolute;inset:4px;border-radius:7px;border:1px solid rgba(90,62,20,.35);pointer-events:none}
.suplate small{font-size:.62em;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.suplate b{font-family:var(--f-disp);font-size:1.12em;line-height:1.2;text-shadow:0 1px 0 rgba(255,245,215,.5)}
.suplate>span{font-size:.76em;opacity:.8}
.suplate em{font-style:normal;display:flex;gap:14px;margin-top:5px;font-size:.7em;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.suplate em strong{font-family:var(--f-num);font-size:1.3em;letter-spacing:0;font-variant-numeric:tabular-nums}
.suplq.flip .suplate{transform-origin:50% 0;animation:suFlip .7s cubic-bezier(.3,.7,.3,1.08)}
@keyframes suFlip{0%{transform:rotateX(0)}35%{transform:rotateX(88deg);opacity:.7}36%{transform:rotateX(-88deg)}100%{transform:rotateX(0);opacity:1}}
.sukick{font-size:.68em;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin:0 0 8px;font-family:var(--f-body)}
.sunote{font-size:.82em;color:var(--muted);margin:8px 2px 0;line-height:1.4}
/* Pick your table: placards in a row you swipe */
.supick{margin:0 0 14px}
.surow{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -14px;padding:2px 14px 8px;scroll-padding:0 14px;scrollbar-width:none}
.surow::-webkit-scrollbar{display:none}
.suplc{flex:0 0 64%;scroll-snap-align:start;text-align:left;display:flex;flex-direction:column;gap:2px;padding:12px 13px;border-radius:14px;color:var(--ink);cursor:pointer;position:relative;
  background:linear-gradient(180deg,#2a221b,#1a1511);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 0 #0c0907,0 8px 14px -8px rgba(0,0,0,.7);
  transition:transform .09s ease,box-shadow .09s ease}
.suplc:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 #0c0907}
.suplc.on{border-color:var(--brass);box-shadow:inset 0 0 0 1px rgba(201,162,75,.4),inset 0 1px 0 rgba(255,255,255,.1),0 3px 0 #3a2a0e,0 8px 16px -8px rgba(201,162,75,.35)}
.suplc small{font-size:.62em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.suplc b{font-family:var(--f-disp);font-size:1.05em}
.suplc>span{font-size:.8em;color:var(--muted);line-height:1.35;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.suplc em{font-style:normal;font-size:.74em;font-weight:700;color:var(--ink);margin-top:4px}
.suplc em b{font-family:var(--f-num);font-size:1em;color:var(--brass)}
.suplc.on small{color:var(--brass)}
.suplc.night{background:linear-gradient(180deg,#2b1f24,#1a1214)}
.sunb{position:absolute;right:10px;top:10px}
.suplc.night small,.suplc.night b{padding-right:44px}
/* buy in with chips: tap a stack */
.subuy .sustacks{display:flex;flex-wrap:wrap;gap:8px 4px;justify-content:space-between}
.sustk{flex:1 0 28%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 8px;border-radius:12px;background:none;border:1px solid transparent;color:var(--ink);cursor:pointer;transition:transform .09s ease}
.sustk:active{transform:translateY(2px)}
.sustk .tstack{position:relative;height:58px;width:34px}
.sustk .tstack i{width:34px;height:11px}
.sustk b{font-family:var(--f-num);font-size:.92em;font-variant-numeric:tabular-nums}
.sustk.on{border-color:var(--brass);background:radial-gradient(80% 70% at 50% 100%,rgba(201,162,75,.16),transparent)}
.sustk.on b{color:var(--brass)}
.suleft{margin:8px 2px 0;font-size:.86em;color:var(--muted);display:flex;justify-content:space-between}
.suleft b{color:var(--ink);font-family:var(--f-num);font-variant-numeric:tabular-nums}
.kedge .bar-row b{color:var(--ink)}
/* your own rules, folded closed */
.sufold{margin:0 0 14px}
.sufold>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);font-weight:700}
.sufold>summary::-webkit-details-marker{display:none}
.sufold>summary i{font-style:normal;color:var(--muted);font-size:1.3em;transition:transform .2s ease}
.sufold[open]>summary i{transform:rotate(90deg)}
.sufold[open]>summary{margin-bottom:10px}
@media (prefers-reduced-motion:reduce){.suplq.flip .suplate,.sufold>summary i{animation:none;transition:none}}
:root[data-motion="off"] .suplq.flip .suplate{animation:none}
:root[data-motion="off"] .sufold>summary i{transition:none}
.kedge p{font-size:.92em;line-height:1.45}
/* ===== The Tables page (table-screens.js tablesHTML) ===== */
/* --- Tables, arriving from another tab (table-screens.js .tfloor.tin): the Room sign swings down on its chains,
   then the table in the middle stands up from the felt, its lamp catching as it stands --- */
.tin .roomsign{transform-origin:50% 0;animation:tSwing 1s cubic-bezier(.3,.7,.3,1) backwards}
@keyframes tSwing{0%{opacity:0;transform:perspective(700px) rotateX(-80deg)}50%{opacity:1;transform:perspective(700px) rotateX(9deg)}76%{transform:perspective(700px) rotateX(-3deg)}100%{transform:perspective(700px) rotateX(0)}}
.tin .tshead,.tin .tslinks{animation:copTile .6s ease-out .2s backwards}
/* the row of tables rises into place */
.tin .twtrack{animation:tRise .7s cubic-bezier(.2,.75,.25,1.04) .3s backwards}
.tin #sec-cards .twtrack{animation-delay:.8s}
@keyframes tRise{0%{opacity:0;translate:0 -18px}}

@media (prefers-reduced-motion:reduce){.tin *{animation:none!important}}
:root[data-motion="off"] .tin *{animation:none!important}
/* Jump to a table (shell/jump.js): one sheet, two groups of rows; each row an emblem, a name, one line, a gold dot when open */
.jph{margin:0 0 10px;font:600 20px/1.1 var(--f-hero);color:#f4e7c6}
.jpgrp{margin:0 0 12px}
.jpk{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 4px;font:700 10.5px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--brass,#d6b068)}
.jpk span{letter-spacing:.08em;text-transform:none;font-weight:500;color:var(--muted,#a99a80)}
.jprow{display:flex;align-items:center;gap:12px;width:100%;padding:8px 6px;background:none;border:0;border-bottom:1px solid rgba(214,176,104,.14);border-radius:0;box-shadow:none;color:inherit;text-align:left;font:inherit}
.jprow:last-child{border-bottom:0}
.jprow:active{background:rgba(214,176,104,.08)}
.jpem{flex:0 0 34px;display:flex}
.jptx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.jptx b{font:600 15px/1.2 var(--f-body);color:#f4e7c6}
.jptx em{font-style:normal;font-size:12px;color:var(--muted,#a99a80);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jprow.live .jptx em{color:var(--brass,#d6b068)}
.jpdot{flex:0 0 7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbe8b0,#c9a24b 60%,#7c5a24);box-shadow:0 0 6px rgba(240,200,120,.5)}
.jprow .go{color:var(--brass,#d6b068);font-size:18px}
/* swipe back (shell/events-boot.js): the page follows the finger from the left edge */
#view.swiping{transition:none!important;will-change:transform}
#view.swipeback{transition:transform .22s cubic-bezier(.2,.7,.3,1),opacity .2s!important}