/* Layout: a candlelit parlour table. A brass hanukkiah stands at the far edge of the felt and lights candle by candle as the pot empties;
   everything else (cards, dice, plaques) is ivory and brass on midnight velvet. Single deliberate dark look. */
:root{
  --velvet:#121827; --velvet-2:#1b2234; --velvet-3:#273049;
  --brass:#d4ad5c; --brass-hi:#f3d98f; --brass-dim:#8f7640;
  --ivory:#f1e6cc; --ivory-2:#e2d2ad;
  --ink:#2b2117; --ink-soft:#5a4a36;
  --wax:#a83a27; --flame:#ffb347; --sage:#79b394;
  --text:#ece4d0; --mute:#98a0b4; --line:#343f5a;
  --f-display:"Frank Ruhl Libre","David Libre",Georgia,serif;
  --f-body:"Assistant","Segoe UI",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--velvet)}
body{min-height:100vh;background-attachment:fixed;background-color:var(--velvet);color:var(--text);font-family:var(--f-body);font-size:15px;line-height:1.5;min-height:100%;
  background-image:
   radial-gradient(ellipse 70% 40% at 50% 0%,#ffb34714,transparent 70%),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.app{direction:rtl;max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 48px;display:flex;flex-direction:column;gap:16px}
button,select,input{font-family:inherit;font-size:14px}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
svg.defs{position:absolute;width:0;height:0;overflow:hidden}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:40px;height:40px;color:var(--brass)}
.brand h1{font-family:var(--f-display);font-weight:900;font-size:28px;line-height:1;margin:0;color:var(--ivory)}
.top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.variant-pill{display:flex;align-items:center;gap:8px;background:var(--velvet-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--mute)}
.variant-pill b{color:var(--brass);font-weight:600}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--velvet-2);color:var(--brass);display:grid;place-items:center}
.icon-btn svg{width:20px;height:20px}
.icon-btn[aria-pressed="false"]{color:var(--mute)}

.tabs{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.tab{background:transparent;border:0;color:var(--mute);padding:9px 14px 11px;font-weight:600;position:relative}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--ivory)}
.tab[aria-selected="true"]::after{content:"";position:absolute;inset:auto 10px -1px;height:2px;background:var(--brass);border-radius:2px}
.tab.soon{display:flex;align-items:center;gap:6px}
.soon-badge{font-size:11px;background:#3a3220;color:var(--brass);padding:1px 8px;border-radius:999px;border:1px solid var(--brass-dim)}

/* generic */
.panel{background:var(--velvet-2);border:1px solid var(--line);border-radius:12px;padding:18px}
.h2{font-family:var(--f-display);font-size:22px;margin:0 0 4px;color:var(--ivory);text-wrap:balance}
.sub{color:var(--mute);margin:0 0 14px;font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{background:var(--velvet-3);border:1px solid var(--line);color:var(--text);padding:8px 14px;border-radius:8px;font-weight:600}
.btn:hover{border-color:var(--brass-dim)}
.btn.primary{background:linear-gradient(180deg,var(--brass-hi),var(--brass) 55%,#a8843d);color:var(--ink);border-color:#a8843d;box-shadow:0 2px 0 #6e5a2c,0 6px 16px #d4ad5c33}
.btn.primary:hover{filter:brightness(1.06)}
.btn.primary:active{transform:translateY(1px);box-shadow:0 1px 0 #6e5a2c}
.btn.big{font-size:18px;padding:12px 28px;font-family:var(--f-display);font-weight:700;border-radius:10px}
.btn.ghost{background:transparent}
.btn.danger{color:#f0a493}
.btn:disabled{opacity:.45;cursor:not-allowed}
label.f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute);min-width:0}
input[type=text],input[type=number],select{background:var(--velvet);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:7px 9px;min-width:0}
input[type=number]{width:90px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line);color:var(--mute)}
.note{font-size:13px;color:var(--mute)}

/* hanukkiah */
.han{position:relative;width:100%;max-width:520px;margin:0 auto;pointer-events:none}
.han svg{width:100%;height:auto;display:block;overflow:visible}
.han-glow{position:absolute;inset:-20% -10% 10%;background:radial-gradient(ellipse at 50% 35%,#ffb34730,transparent 65%);opacity:var(--glow,.4);transition:opacity 1.2s}
.flame{opacity:0;transition:opacity .9s}
.flame.on{opacity:1}
.flame .fl{transform-box:fill-box;transform-origin:50% 100%;animation:flick 2.1s ease-in-out infinite alternate}
.flame .fl2{transform-box:fill-box;transform-origin:50% 100%;animation:flick2 1.3s ease-in-out infinite alternate}
.flame .halo{animation:halo 2.6s ease-in-out infinite alternate}
.flame.ignite .fl{animation:ignite .9s ease-out,flick 2.1s ease-in-out .9s infinite alternate}
@keyframes flick{0%{transform:scale(1,1) skewX(0)}30%{transform:scale(.94,1.06) skewX(2deg)}60%{transform:scale(1.04,.95) skewX(-2deg)}100%{transform:scale(.97,1.08) skewX(1deg)}}
@keyframes flick2{0%{transform:scale(1)}100%{transform:scale(.88,1.1)}}
@keyframes halo{0%{opacity:.75}100%{opacity:1}}
@keyframes ignite{0%{transform:scale(.1,.1)}50%{transform:scale(1.4,1.6)}100%{transform:scale(1)}}
.felt .han{max-width:300px;margin-bottom:-6px}
.han-cap{text-align:center;font-size:12.5px;color:var(--mute);margin-top:2px}

/* hero (setup) */
.hero{position:relative;text-align:center;padding:10px 0 4px}
.hero .han{max-width:640px}
.hero h2{font-family:var(--f-display);font-weight:900;font-size:clamp(44px,9vw,92px);line-height:.95;margin:-6px 0 6px;color:var(--ivory);letter-spacing:-.5px;text-shadow:0 0 40px #ffb34740,0 2px 0 #00000080}
.hero p{color:var(--mute);margin:0 auto;max-width:520px;font-size:16px}
.setup{max-width:760px;margin:0 auto;width:100%}

/* table surface */
.table{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px}
@media (max-width:920px){.table{grid-template-columns:minmax(0,1fr)}}
.felt{position:relative;border-radius:22px;padding:14px 18px 20px;display:flex;flex-direction:column;gap:16px;min-width:0;
  background:radial-gradient(ellipse 80% 55% at 50% 12%,#3a3a3a22,transparent),radial-gradient(ellipse at center,#24304a,#161d2c 78%);
  border:1px solid #0b0f19;box-shadow:inset 0 0 0 7px #10151f,inset 0 0 0 8px var(--brass-dim),inset 0 0 0 9px #10151f,inset 0 30px 80px #ffb34712,0 20px 50px #0008}
.status{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.pot{display:flex;align-items:center;gap:12px}
.pot-bowl{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff1c2,var(--brass-hi) 18%,var(--brass) 48%,#6e5a2c 100%);display:grid;place-items:center;color:var(--ink);font-family:var(--f-display);font-weight:900;font-size:26px;box-shadow:inset 0 -6px 12px #6e5a2c,inset 0 3px 6px #fff7,0 6px 18px #000a;position:relative}
.pot-bowl::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid #6e5a2c66}
.pot-label{font-size:13px;color:var(--mute);display:flex;align-items:baseline;gap:8px}
.pot-big{font-family:var(--f-display);font-weight:900;font-size:30px;color:var(--brass-hi);line-height:1;text-shadow:0 0 18px #ffb34755}
.tab{white-space:nowrap}
.pot-title{font-family:var(--f-display);font-size:20px;color:var(--ivory)}
.phase{padding:6px 14px;border-radius:999px;font-weight:700;font-size:14px;border:1px solid}
.phase.closed{color:var(--sage);border-color:#3f6b55;background:#1a2c24}
.phase.open{color:#ffd2c4;border-color:var(--wax);background:#41190f;animation:glow 1.6s ease-in-out infinite alternate}
.phase.burnt{color:var(--mute);border-color:var(--line);background:var(--velvet)}
@keyframes glow{to{box-shadow:0 0 18px #a83a2799}}

/* dice */
.tray{display:flex;flex-wrap:wrap;gap:14px 12px;justify-content:center;align-items:flex-start;padding:22px 14px 26px;border-radius:16px;
  background:radial-gradient(ellipse at 50% 30%,#1f2a42,#111725);border:1px solid #0a0e17;box-shadow:inset 0 4px 16px #000c,inset 0 0 0 1px #ffffff08;min-height:110px}
.dgroup{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.dsep{width:1px;align-self:stretch;background:linear-gradient(transparent,var(--line),transparent)}
.die3d{width:46px;height:46px;perspective:420px;position:relative}
.die3d::after{content:"";position:absolute;left:8%;right:8%;bottom:-9px;height:9px;border-radius:50%;background:radial-gradient(#000b,transparent 70%);z-index:-1}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-14deg) rotateY(16deg)}
.fc{position:absolute;inset:0;border-radius:9px;background:linear-gradient(145deg,#fffaf0,#efe3c6 55%,#d9c79e);box-shadow:inset 0 0 0 1px #c9b78f,inset -3px -4px 8px #a98f6155;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:6px;color:var(--ink);backface-visibility:hidden}
.fc.sym{display:grid;place-items:center;grid-template:none;padding:4px}
.fc.sym svg{width:32px;height:32px}
.f1{transform:translateZ(23px)}.f2{transform:rotateY(180deg) translateZ(23px)}.f3{transform:rotateY(90deg) translateZ(23px)}
.f4{transform:rotateY(-90deg) translateZ(23px)}.f5{transform:rotateX(90deg) translateZ(23px)}.f6{transform:rotateX(-90deg) translateZ(23px)}
.pip{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#5a4a36,#1c150e);align-self:center;justify-self:center}
.die3d.hit .f1{box-shadow:inset 0 0 0 1px #c9b78f,0 0 0 2px var(--brass),0 0 18px #ffb34799}
.die3d.marked .f1{box-shadow:inset 0 0 0 1px #c9b78f,0 0 0 1.5px #f3d98f99}
.die3d.out{opacity:.18;filter:grayscale(1)}
.dlabel{position:absolute;bottom:-24px;left:-10px;right:-10px;text-align:center;font-size:10.5px;color:var(--mute)}
.sum-line{text-align:center;font-family:var(--f-display);font-size:18px;color:var(--ivory);min-height:28px}

/* cards */
.cards{display:flex;flex-wrap:wrap;gap:16px 12px;justify-content:center;padding-bottom:6px}
.card{width:136px;aspect-ratio:100/148;max-width:100%;perspective:900px;position:relative;flex:none}
.card-inner{position:absolute;inset:0;transition:transform .7s cubic-bezier(.3,.7,.3,1.15);transform-style:preserve-3d}
.card.facedown .card-inner{transform:rotateY(180deg)}
.face,.back{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 8px 18px #000b,0 1px 0 #fff3 inset}
.face svg.cface,.back svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.crule{position:absolute;left:9%;right:9%;bottom:7.5%;font-size:9.2px;line-height:1.2;color:var(--ink-soft);text-align:center;height:16%;display:flex;align-items:center;justify-content:center;text-wrap:balance}
.back{transform:rotateY(180deg)}
.owner{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--velvet-3);color:var(--ivory);border:1px solid var(--brass-dim);border-radius:999px;font-size:11.5px;padding:1px 9px;z-index:2;max-width:120%;overflow:hidden;text-overflow:ellipsis}
.owner.none{color:var(--mute);border-color:var(--line)}
.card.active .face{box-shadow:0 0 0 2px var(--brass-hi),0 0 26px #ffb347aa,0 8px 18px #000b}
.card.active{animation:lift .5s ease-out}
@keyframes lift{50%{transform:translateY(-8px)}}

/* players */
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.plaque{background:linear-gradient(180deg,#222b40,#1a2133);border:1px solid var(--line);border-radius:10px;padding:10px 12px;position:relative;display:flex;flex-direction:column;gap:3px;min-width:0}
.plaque.turn{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset,0 0 22px #d4ad5c22}
.plaque.turn::before{content:"";position:absolute;top:-1px;left:16px;right:16px;height:2px;background:linear-gradient(90deg,transparent,var(--brass-hi),transparent)}
.plaque.out{opacity:.4}
.plaque .pn{font-weight:700;display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 2px #0005}
.plaque .coins{font-family:var(--f-display);font-size:26px;font-weight:900;color:var(--ivory);display:flex;align-items:baseline;gap:6px}
.plaque .coins small{font-family:var(--f-body);font-size:12px;color:var(--mute);font-weight:400}
.plaque .pc{font-size:12px;color:var(--mute);min-height:18px}
.float{position:absolute;top:4px;left:10px;font-weight:900;font-family:var(--f-display);font-size:20px;pointer-events:none;animation:floatup 1.3s ease-out forwards;z-index:3}
.float.plus{color:#a7ebbf;text-shadow:0 0 10px #79b39488}.float.minus{color:#ffab98;text-shadow:0 0 10px #a83a2788}
@keyframes floatup{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}

.caption{min-height:54px;text-align:center;font-family:var(--f-display);font-size:20px;color:var(--ivory);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-wrap:balance}
.caption small{font-family:var(--f-body);font-size:13.5px;color:var(--mute)}
.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}

/* gelt + fx */
.gelt{position:fixed;left:0;top:0;width:20px;height:20px;border-radius:50%;z-index:40;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff3c4,#f3d98f 25%,#d4ad5c 55%,#8f7640);box-shadow:inset 0 0 0 2px #b8923f,inset 0 0 0 4px #f3d98f88,0 3px 6px #0008}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:35}
.burst{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:38}
.burst-card{position:relative;text-align:center;animation:burstIn 1.9s cubic-bezier(.2,.8,.2,1) forwards;direction:rtl;padding:0 16px}
.burst-card svg{width:84px;height:84px;color:var(--brass-hi);filter:drop-shadow(0 0 18px #ffb347aa)}
.burst-card h3{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,8vw,78px);line-height:1;margin:6px 0 4px;color:var(--ivory);text-shadow:0 0 30px #ffb347,0 4px 0 #0009}
.burst-card p{margin:0;font-size:17px;color:var(--brass-hi);text-shadow:0 2px 8px #000}
.burst-card::before{content:"";position:absolute;inset:-60px -90px;background:radial-gradient(ellipse at center,#0d1220ee 30%,#0d122000 70%);z-index:-1}
.burst.warm::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#ff8c3a40,transparent 60%);animation:flash 1.9s ease-out forwards}
.burst.small .burst-card h3{font-size:clamp(28px,5vw,44px)}
.burst.small .burst-card svg{width:56px;height:56px}
@keyframes burstIn{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.04)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* side log */
.side{display:flex;flex-direction:column;gap:12px;min-width:0}
.log{max-height:560px;overflow:auto;display:flex;flex-direction:column;gap:6px;font-size:13px}
.log .it{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;padding:6px 8px;border-radius:7px;background:var(--velvet)}
.log .it.big{box-shadow:inset -3px 0 0 var(--wax)}
.log .n{color:var(--mute);font-variant-numeric:tabular-nums}

/* setup & auction */
.setup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.auction{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
@media (max-width:620px){.auction{grid-template-columns:minmax(0,1fr);justify-items:center}}
.auction .card.lot{width:150px;animation:hover 3s ease-in-out infinite alternate}
@keyframes hover{to{transform:translateY(-6px) rotate(-1deg)}}
.bidders{display:flex;flex-wrap:wrap;gap:8px}
.bidder{display:flex;align-items:center;gap:8px;background:var(--velvet);border:1px solid var(--line);border-radius:8px;padding:9px 13px;color:var(--text);font-weight:600}
.bidder:hover:not(:disabled){border-color:var(--brass);background:#1f2738}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.stepper button{background:var(--velvet-3);border:0;color:var(--text);width:36px;height:38px;font-size:18px}
.stepper span{min-width:54px;text-align:center;font-family:var(--f-display);font-size:22px;font-weight:700;color:var(--brass-hi)}
.reveal .card{transition:transform .3s}

/* stats */
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.tile{background:var(--velvet);border:1px solid var(--line);border-radius:10px;padding:12px}
.tile .k{font-size:12.5px;color:var(--mute)}
.tile .v{font-family:var(--f-display);font-size:28px;font-weight:900;color:var(--ivory)}
.tile .v small{font-size:13px;color:var(--mute);font-family:var(--f-body);font-weight:400}
.tbl-wrap{overflow-x:auto}
table.res{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.res th,table.res td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
table.res th{color:var(--mute);font-weight:600;font-size:12.5px}
table.res td.n{font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:var(--velvet);position:relative;min-width:90px}
.bar i{position:absolute;inset:0 0 0 auto;border-radius:4px;background:var(--brass)}
.bar i.b{background:var(--sage)}
.bar .mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--wax)}
.good{color:#9fe0b6}.bad{color:#ff9f8a}
.progress{height:6px;background:var(--velvet);border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--brass);width:0;transition:width .15s}

/* rules */
.rules-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px}
@media (max-width:860px){.rules-grid{grid-template-columns:minmax(0,1fr)}}
.vlist{display:flex;flex-direction:column;gap:8px}
.vitem{background:var(--velvet);border:1px solid var(--line);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;text-align:right;color:var(--text)}
.vitem.sel{border-color:var(--brass)}
.vitem .vn{font-weight:700}
.vitem .vm{font-size:12px;color:var(--mute)}
.fieldset{border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px;background:#171e2e}
.fieldset legend{padding:0 6px;font-family:var(--f-display);color:var(--brass);font-size:17px}
.opt{display:flex;gap:10px;align-items:flex-start}
.opt input[type=radio],.opt input[type=checkbox]{margin-top:4px;accent-color:var(--brass)}
.opt div{min-width:0}
.opt b{font-weight:600}
.opt span{display:block;font-size:12.5px;color:var(--mute)}
.xcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;background:var(--velvet);border:1px solid var(--line);border-radius:10px;padding:12px}
.xcard .card{width:92px}
.xcard .crule{font-size:7.5px}
.xfields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;align-items:end}
.confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:#ffd2c4}
.toast{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ivory);color:var(--ink);padding:9px 18px;border-radius:999px;font-weight:700;box-shadow:0 8px 24px #000a;z-index:50;direction:rtl}
.soon-box{text-align:center;padding:30px 18px 40px}

/* ---- pass 2 ---- */
.rim{border-radius:32px;padding:13px;min-width:0;
 background:linear-gradient(180deg,#ffffff14,transparent 30%,#0000004d),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='140'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.11' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='.5 0 0 0 .14  .28 0 0 0 .07  .12 0 0 0 .03  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
 box-shadow:inset 0 2px 0 #ffffff26,inset 0 -4px 8px #0009,inset 0 0 0 1px #00000080,0 28px 70px #000c,0 0 0 1px #000}
.felt{border-radius:22px;box-shadow:inset 0 0 0 1px #0b0f19,inset 0 0 0 3px #8f764099,inset 0 0 0 4px #0b0f19,inset 0 18px 40px #0009,inset 0 -10px 30px #0007}
.felt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 65% 45% at 50% 6%,#ffb3472e,transparent 70%);animation:candle 3.4s infinite}
@keyframes candle{0%,100%{opacity:.85}17%{opacity:1}31%{opacity:.78}44%{opacity:.96}63%{opacity:.82}78%{opacity:1}}
.felt>*{position:relative}
.tray{display:block;position:relative;height:150px;padding:0;overflow:visible;
 background:radial-gradient(ellipse 80% 70% at 50% 40%,#2a3654,#151c2c 80%);box-shadow:inset 0 6px 18px #000d,inset 0 0 0 1px #ffffff0a,0 1px 0 #ffffff10}
.die3d{position:absolute;margin-left:-23px;transform:rotate(var(--rz,0deg))}
.die3d::after{bottom:-7px;filter:blur(1px)}
.die3d.gold .fc{background:linear-gradient(145deg,#fff1c2,#e9c56f 45%,#a8843d);box-shadow:inset 0 0 0 1px #8f7640,inset -3px -4px 8px #6e5a2c66}
.die3d.gold .fc.sym svg{color:#2b2117}
.die3d.hit .f1{box-shadow:inset 0 0 0 1px #c9b78f,0 0 0 2px #f3d98f,0 0 22px #ffb347cc}
.dlabel{display:none}
.pot{gap:14px}
.pot-vessel{position:relative;width:92px;height:98px;flex:none}
.bowl{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 10px #000b)}
.pot-num{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);font-family:var(--f-display);font-weight:900;font-size:21px;color:#2b2117;text-shadow:0 1px 0 #fbe9b0aa}
.plaque{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;background:linear-gradient(180deg,#2b2219,#17120d);border-color:#4a3a26;box-shadow:inset 0 1px 0 #ffffff12}
.plaque.turn{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset,0 0 26px #ffb34733}
.pinfo{min-width:0;display:flex;flex-direction:column;gap:1px}
.medal{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:21px;color:#2b2117;
 background:radial-gradient(circle at 35% 30%,#fff4c8,#f3d98f 30%,#d4ad5c 62%,#7a6230);box-shadow:0 0 0 3px var(--pc),0 0 0 4.5px #000a,0 5px 12px #000b,inset 0 -3px 5px #6e5a2c}
.plaque.turn .medal{animation:medalGlow 1.4s ease-in-out infinite alternate}
@keyframes medalGlow{to{box-shadow:0 0 0 3px var(--pc),0 0 0 4.5px #000a,0 0 24px 4px #ffb34799,inset 0 -3px 5px #6e5a2c}}
.plaque .coins{font-size:24px}
.owner{display:inline-flex;align-items:center;gap:5px;background:#17120d;border-color:#6e5a2c;box-shadow:0 3px 8px #0009}
.owner i{width:7px;height:7px;border-radius:50%;display:inline-block}
.card{transition:transform .25s ease-out;will-change:transform}
.face{box-shadow:0 10px 22px #000c,0 2px 4px #0008}
.crule{bottom:3.5%;height:21%;font-size:9.6px;line-height:1.15;color:#4a3b29;font-weight:600}
.gloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,#ffffff55 48%,#fff2c833 53%,transparent 64%);background-size:260% 100%;background-position:var(--gx,-60%) 0;mix-blend-mode:overlay;transition:background-position .15s}
.card.active{animation:pop .75s cubic-bezier(.2,.8,.2,1.25) forwards;z-index:3}
.card.active .face{animation:aura 1.5s ease-in-out .4s infinite alternate}
@keyframes pop{0%{transform:none}35%{transform:translateY(-18px) scale(1.13)}100%{transform:translateY(-7px) scale(1.06)}}
@keyframes aura{from{box-shadow:0 0 0 2px #f3d98f,0 0 18px #ffb34788,0 10px 22px #000c}to{box-shadow:0 0 0 2px #fff1c2,0 0 36px #ffb347dd,0 10px 22px #000c}}
.cface .swing{transform-box:fill-box;transform-origin:50% 0}
.card.active .cface .swing{animation:swing .45s ease-in-out 5 alternate}
@keyframes swing{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.cface .smoke{transform-box:fill-box;transform-origin:50% 100%;animation:drift 5s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-1px) scaleY(.9);opacity:.25}to{transform:translateX(2px) scaleY(1.1);opacity:.45}}
.flame .smoke{opacity:0}
.flame.ignite .smoke{animation:smokeUp 1.8s ease-out}
@keyframes smokeUp{0%{opacity:.7;transform:translateY(0)}100%{opacity:0;transform:translateY(-16px)}}
.burst-card{animation-duration:2.25s}
.bc-card{display:flex;justify-content:center;margin-bottom:6px}
.bc-card .card{width:min(190px,44vw);animation:cardIn 2.25s cubic-bezier(.2,.8,.2,1) forwards}
.bc-card .owner{display:none}
@keyframes cardIn{0%{transform:perspective(800px) rotateY(100deg) scale(.6)}20%{transform:perspective(800px) rotateY(-8deg) scale(1.06)}30%{transform:perspective(800px) rotateY(0) scale(1)}100%{transform:perspective(800px) rotateY(0) scale(1.02)}}
.burst.burn .bc-card .face{animation:char 2.2s ease-in forwards}
@keyframes char{0%{filter:none}40%{filter:brightness(1.3) saturate(1.4)}100%{filter:sepia(1) brightness(.35) contrast(1.4)}}
.burst.burn .bc-card .card::after{content:"";position:absolute;inset:-14% -10% 30%;background:radial-gradient(ellipse at 50% 100%,#ff8c3acc,#e5531c66 40%,transparent 70%);filter:blur(6px);animation:fireUp 2.2s ease-in forwards;pointer-events:none}
@keyframes fireUp{0%{opacity:0;transform:translateY(40%)}40%{opacity:1}100%{opacity:.9;transform:translateY(-10%)}}
.burst.small .bc-card .card{width:min(130px,34vw)}
@media (max-width:620px){.tray{height:160px}}
@media (max-width:520px){.die3d{margin-left:-19px}.medal{width:38px;height:38px;font-size:18px}.pot-vessel{width:76px;height:82px}}

.guide{display:flex;flex-direction:column;gap:16px;max-width:900px;margin:0 auto;width:100%}
.guide p{margin:0 0 10px;line-height:1.7;max-width:70ch}
.g-intro p:first-of-type{font-size:16.5px}
.g-cards{justify-content:flex-start;margin-top:8px}
.g-steps{margin:8px 0 0;padding:0 22px 0 0;display:flex;flex-direction:column;gap:16px}
.g-steps>li::marker{font-family:var(--f-display);font-weight:900;color:var(--brass);font-size:18px}
.g-steps h4{margin:0 0 4px;font-family:var(--f-display);font-size:18px;color:var(--ivory)}
.g-steps ul{margin:6px 0 0;padding:0 18px 0 0;display:flex;flex-direction:column;gap:5px;line-height:1.6}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:520px){.card{width:94px}.crule{font-size:7.6px}.die3d{width:38px;height:38px}.f1{transform:translateZ(19px)}.f2{transform:rotateY(180deg) translateZ(19px)}.f3{transform:rotateY(90deg) translateZ(19px)}.f4{transform:rotateY(-90deg) translateZ(19px)}.f5{transform:rotateX(90deg) translateZ(19px)}.f6{transform:rotateX(-90deg) translateZ(19px)}.pip{width:6px;height:6px}.fc{padding:5px}.fc.sym svg{width:26px;height:26px}.brand h1{font-size:24px}.tray{gap:12px 8px}.dgroup{gap:8px}}