/* Golden Dice Pavilion HUD. The .ui layer is laid out in a 1080 px wide design space and scaled to the stage. */
:root {
  --gold: #e8be62; --gold-hi: #fff0bf; --gold-lo: #8a5a1c; --red: #b3121c; --red-deep: #4a0307; --green: #0e4a35; --green-deep: #04211a;
  --ivory: #f4ead6; --text: #f7efe0; --muted: #c9b79a; --line: #c9973f;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0203; color: var(--text);
  font: 500 14px/1.25 "Rubik", system-ui, sans-serif; overscroll-behavior: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:disabled { cursor: default; }

/* desktop: blurred, darkened room on the sides */
.backdrop { position: fixed; inset: -40px; background: #120304 center / cover no-repeat; filter: blur(28px) brightness(.38) saturate(1.2); }
#stage { position: fixed; left: 50%; top: 0; transform: translateX(-50%); overflow: hidden; background: #120304; }
body.wide #stage { box-shadow: 0 0 80px #000, 0 0 0 1px #e8be6233; }
#scene { position: absolute; left: 0; top: 0; width: 100%; display: block; }
.ui { position: absolute; left: 0; top: 0; width: 1080px; transform-origin: 0 0; font-size: 30px; pointer-events: none; }
.ui button, .ui a, .ui .road, .ui .card, .ui .panel { pointer-events: auto; }

/* ---------- top bar ---------- */
.top { position: absolute; left: 0; right: 0; top: 0; height: 118px; display: flex; align-items: center; gap: 12px; padding: 14px 20px 0;
  background: linear-gradient(#000d, #0008 60%, #0000); }
.back { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); text-decoration: none; font-size: 54px; line-height: 1;
  border: 2px solid #e8be6266; background: #0009; padding-bottom: 8px; }
.bal { min-width: 300px; padding: 8px 22px; border-radius: 18px; background: linear-gradient(#2a0507e6, #120203e6); border: 2px solid #e8be6288; box-shadow: inset 0 1px 0 #ffffff1a; }
.bal label { display: block; font-size: 19px; letter-spacing: .2em; color: var(--muted); }
.bal b { font: 700 32px "Rubik", sans-serif; color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.title { flex: 1; text-align: center; font-family: "Cinzel", serif; font-weight: 900; line-height: .95; min-width: 0;
  background: linear-gradient(#fff6d8, #f0c45e 50%, #a87024 54%, #ffe3a0); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a0204) drop-shadow(0 0 10px #ffb84a55); }
.title span { display: block; font-size: 36px; letter-spacing: .05em; white-space: nowrap; }
.title small { display: block; font-size: 22px; letter-spacing: .45em; margin-top: 4px; }
.ib { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #e8be6266; background: #0009; flex: none; }
.ib svg { width: 36px; height: 36px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ib.on { background: #e8be6240; box-shadow: 0 0 16px #ffc85a88; }

/* ---------- status, result, win ---------- */
.status { position: absolute; left: 0; right: 0; top: 136px; display: flex; justify-content: center; align-items: center; gap: 16px; opacity: 0; }
.status span { padding: 10px 40px; font: 900 34px "Cinzel", serif; letter-spacing: .14em; color: var(--gold-hi);
  background: linear-gradient(90deg, #0000, #1a0304d9 18%, #1a0304d9 82%, #0000); border-top: 2px solid #e8be6299; border-bottom: 2px solid #e8be6299;
  text-shadow: 0 0 18px #ffb84a99, 0 2px 0 #000; }
.status .ring { display: none; position: relative; width: 84px; height: 84px; }
.status.timed .ring { display: block; }
.status .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.status .ring circle { fill: #1a0304d9; stroke: #ffffff22; stroke-width: 8; }
.status .ring circle.p { fill: none; stroke: var(--gold); stroke-dasharray: 276.5; stroke-dashoffset: 0; stroke-linecap: round; }
.status .ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 34px "Rubik", sans-serif; color: #fff; }

.result { position: absolute; left: 50%; top: 132px; transform-origin: 50% 0; translate: -50% 0; display: flex; align-items: center; gap: 18px; padding: 12px 26px;
  border-radius: 24px; background: linear-gradient(#2a0507f0, #120203f0); border: 3px solid var(--gold); box-shadow: 0 0 0 3px #0008, 0 10px 40px #000c, 0 0 40px #ffb84a55; opacity: 0; }
.result .dice { display: flex; gap: 8px; }
.result .dice svg { filter: drop-shadow(0 3px 3px #0009); }
.result .tot { font: 900 72px/1 "Cinzel", serif; color: var(--gold-hi); text-shadow: 0 0 20px #ffb84a, 0 3px 0 #000; min-width: 90px; text-align: center; }
.result .tags { display: flex; flex-direction: column; gap: 6px; }
.result .tags i, .card .hr i { font-style: normal; font: 800 22px "Rubik", sans-serif; letter-spacing: .12em; padding: 4px 14px; border-radius: 10px; text-align: center; }
.t-big { background: #b3121c; color: #fff; } .t-small { background: #1f3f8f; color: #fff; } .t-tri { background: linear-gradient(#ffe39a, #c8892a); color: #3a1a02; }
.t-pa { background: #ffffff1a; color: var(--gold-hi); }
.winpop { position: absolute; left: 0; right: 0; top: 290px; text-align: center; opacity: 0; }
.winpop label { display: block; font: 700 24px "Cinzel", serif; letter-spacing: .35em; color: var(--gold); text-shadow: 0 2px 0 #000; }
.winpop b { font: 900 64px "Cinzel", serif; color: var(--gold-hi); text-shadow: 0 0 24px #ffc85a, 0 4px 0 #000; }

/* ---------- road (last 20) ---------- */
.road { position: absolute; left: 16px; right: 16px; height: 118px; display: flex; gap: 14px; align-items: center; padding: 10px 16px; cursor: pointer;
  border-radius: 20px 20px 0 0; background: linear-gradient(#170304e8, #0c0102f0); border: 2px solid #e8be6266; border-bottom: 0; }
.road .stats { display: grid; grid-template-columns: repeat(5, auto); gap: 4px 12px; font: 700 20px "Rubik", sans-serif; color: var(--muted); width: 290px; }
.road .stats div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.road .stats b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px; }
.road .stats .nohist { grid-column: 1 / -1; font: 700 22px "Cinzel", serif; letter-spacing: .15em; color: var(--gold); }
b.s { background: #1f3f8f; } b.b { background: #b3121c; } b.o { background: #6a4a12; } b.e { background: #2f5c3a; } b.t { background: linear-gradient(#ffe39a, #c8892a); color: #3a1a02 !important; }
.road .beads { flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; height: 100%; }
.road .beads i { font-style: normal; border-radius: 50%; display: grid; place-items: center; font: 800 21px "Rubik", sans-serif; color: #fff; aspect-ratio: 1; height: 100%; justify-self: center;
  box-shadow: inset 0 -3px 0 #0005, inset 0 2px 0 #fff3; }
.road .beads i.big { background: radial-gradient(circle at 40% 35%, #e3343e, #8a0a12); }
.road .beads i.small { background: radial-gradient(circle at 40% 35%, #3a64c8, #142a66); }
.road .beads i.tri { background: radial-gradient(circle at 40% 35%, #fff0b0, #c88a2a); color: #3a1a02; }
.road .beads i.empty { background: #ffffff0c; box-shadow: inset 0 0 0 2px #ffffff10; }
.road .beads i.new { outline: 3px solid var(--gold-hi); animation: beadIn .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes beadIn { from { transform: scale(0); } }

/* ---------- panel: board + controls ---------- */
.panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 12px 16px 14px;
  background: radial-gradient(120% 70% at 50% 0%, #0f5a40, #063826 55%, #021a12), #052a1e; border-top: 4px solid var(--gold);
  box-shadow: 0 -10px 30px #000a, inset 0 2px 0 #fff3; border-radius: 26px 26px 0 0; }
.panel::before { content: ""; position: absolute; inset: 6px; border: 2px solid #e8be6255; border-radius: 22px 22px 0 0; pointer-events: none; }
.board { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; position: relative; }
.row { display: grid; gap: 6px; min-height: 0; }
.r-main { flex: 1.45; grid-template-columns: 1.65fr 1fr 1.75fr 1fr 1.65fr; }
.r-dbl, .r-tri { flex: 0.95; grid-template-columns: repeat(6, 1fr); }
.r-tot { flex: 0.86; grid-template-columns: repeat(7, 1fr); }
.r-cmb { flex: 0.8; grid-template-columns: repeat(5, 1fr); }
.r-sgl { flex: 1.08; grid-template-columns: repeat(6, 1fr); }
.cell { position: relative; border-radius: 12px; min-width: 0; min-height: 0; overflow: visible;
  background: linear-gradient(#0d4d37, #07362a); border: 2px solid #c9973fcc; box-shadow: inset 0 1px 0 #ffffff22, inset 0 -8px 16px #0004, 0 2px 4px #0006;
  transition: filter .25s, opacity .25s; }
.cell .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.cell:active { filter: brightness(1.25); }
.cell em { font-style: normal; font: 700 20px "Rubik", sans-serif; color: var(--gold); letter-spacing: .03em; }
.cell .dd { display: flex; gap: 4px; }
.cell .dd svg { filter: drop-shadow(0 2px 2px #0008); }
.cell.red { background: linear-gradient(#b8141f, #6e0610); }
.big-small .nm { font: 900 44px "Cinzel", serif; color: var(--gold-hi); text-shadow: 0 3px 0 #3a0204, 0 0 14px #ffb84a66; letter-spacing: .04em; }
.big-small i { font-style: normal; font: 700 22px "Rubik", sans-serif; color: #fff; }
.big-small small { font-size: 15px; color: #ffd9b0aa; letter-spacing: .02em; }
.oe .nm { font: 900 36px "Cinzel", serif; color: var(--gold-hi); text-shadow: 0 3px 0 #000a; }
.any { background: linear-gradient(#5a3a0e, #2a1804); }
.any .nm { font: 900 27px "Cinzel", serif; color: var(--gold-hi); letter-spacing: .04em; text-shadow: 0 2px 0 #000; }
.any .mini { display: grid; grid-template-columns: repeat(3, auto); gap: 2px 8px; margin: 2px 0; }
.any .mini span { display: flex; gap: 1px; }
.tri { background: linear-gradient(#3f2a0c, #1f1404); }
.tri em { color: #ffd76b; }
.tot b { font: 900 46px/1 "Cinzel", serif; color: var(--gold-hi); text-shadow: 0 3px 0 #000a; }
.tot:nth-child(odd) { background: linear-gradient(#0a4030, #052a1f); }
.sgl { background: linear-gradient(#5e0a10, #33040a); }
.sgl em { font-size: 16px; color: #ffd9b0; }
.cell.win { animation: winGlow .7s ease-in-out infinite alternate; z-index: 2; border-color: var(--gold-hi); }
@keyframes winGlow { from { box-shadow: 0 0 10px #ffc85a, inset 0 0 18px #ffdd8a88; filter: brightness(1.2); } to { box-shadow: 0 0 34px #ffc85a, 0 0 6px #fff, inset 0 0 34px #ffe9a8; filter: brightness(1.55); } }
.cell.dim { filter: brightness(.45) saturate(.6); }
.stack { position: absolute; right: 4px; top: 50%; width: 58px; height: 58px; margin-top: -29px; pointer-events: none; z-index: 3; }
.stack img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 2px #000b); }
.stack span { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 1px 8px; border-radius: 9px; background: #000d; color: #fff;
  font: 700 18px "Rubik", sans-serif; white-space: nowrap; border: 1px solid #e8be6288; }
.r-main .stack { right: 8px; top: auto; bottom: 14px; margin-top: 0; }
.r-sgl .stack, .r-dbl .stack, .r-tri .stack, .r-tot .stack { right: 2px; top: 2px; margin-top: 0; width: 50px; height: 50px; }

/* controls */
.controls { height: 186px; flex: none; display: flex; align-items: center; gap: 8px; padding-top: 12px; }
.acts { display: flex; flex-direction: column; gap: 10px; width: 118px; flex: none; }
.act { height: 76px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(#1a0506, #0b0203); border: 2px solid #e8be6277; font: 700 17px "Rubik", sans-serif; letter-spacing: .1em; color: var(--muted); }
.act svg { width: 32px; height: 32px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.act:disabled { opacity: .32; }
.rack { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.chip { width: 98px; height: 98px; border-radius: 50%; transition: transform .18s cubic-bezier(.2, 1.6, .4, 1), filter .2s; position: relative; }
.chip img { width: 100%; height: 100%; display: block; }
.chip.sel { transform: translateY(-14px) scale(1.12); }
.chip.sel::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--gold-hi); box-shadow: 0 0 18px #ffc85a, inset 0 0 10px #ffc85a88; }
.chip.off { filter: grayscale(.8) brightness(.5); }
.roll { width: 176px; height: 160px; flex: none; border-radius: 30px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 20%, #ff4a4a, #b3121c 45%, #5a0408); border: 4px solid var(--gold); box-shadow: 0 6px 0 #3a0204, 0 10px 24px #000a, inset 0 2px 0 #ffffff55, 0 0 24px #ff6a3a66; }
.roll span { font: 900 46px "Cinzel", serif; color: var(--gold-hi); letter-spacing: .06em; text-shadow: 0 3px 0 #3a0204, 0 0 16px #ffb84a; }
.roll small { font: 700 18px "Rubik", sans-serif; color: #ffe2c0; margin-top: 4px; max-width: 160px; text-align: center; }
.roll:not(:disabled) { animation: rollPulse 1.6s ease-in-out infinite; }
.roll:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #3a0204, inset 0 2px 0 #ffffff55; }
.roll:disabled { filter: grayscale(.6) brightness(.6); }
@keyframes rollPulse { 50% { box-shadow: 0 6px 0 #3a0204, 0 10px 24px #000a, inset 0 2px 0 #ffffff55, 0 0 46px #ffb84acc; } }
.ui.locked .board { pointer-events: none; }
.ui.locked .rack, .ui.locked .acts { opacity: .5; }

/* flying chips, toast, cards */
.fly { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.fchip { position: absolute; left: 0; top: 0; filter: drop-shadow(0 6px 4px #000a); }
.toast { position: absolute; left: 50%; top: 240px; transform: translateX(-50%); padding: 14px 30px; border-radius: 99px; background: #000d; border: 2px solid #e8be6288;
  color: var(--gold-hi); font-size: 28px; white-space: nowrap; opacity: 0; transition: opacity .2s; z-index: 9; }
.toast.show { opacity: 1; }
.card { position: absolute; z-index: 10; left: 60px; right: 60px; top: 160px; max-height: calc(100% - 260px); overflow: auto; background: linear-gradient(#2a0507f8, #120203f8);
  border: 3px solid var(--gold); border-radius: 26px; padding: 30px 34px; box-shadow: 0 30px 80px #000; }
.card h3 { margin: 0 0 18px; font: 900 40px "Cinzel", serif; color: var(--gold); letter-spacing: .08em; text-align: center; }
.card table { width: 100%; border-collapse: collapse; font-size: 26px; }
.card th { text-align: left; color: var(--muted); font-size: 20px; letter-spacing: .12em; padding-bottom: 8px; }
.card td { padding: 10px 0; border-bottom: 1px solid #ffffff18; } .card td:nth-child(n+2), .card th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
.card td:nth-child(2) { color: var(--gold-hi); font-weight: 700; } .card td:nth-child(3) { color: #c8e6c9; }
.card td small { display: block; color: var(--muted); font-size: 18px; }
.card p { color: var(--muted); font-size: 22px; line-height: 1.4; }
.card .ok { margin-top: 18px; width: 100%; padding: 18px; border-radius: 16px; background: linear-gradient(#fff0bf, #e8be62 50%, #b0842e); color: #2a1404; font: 900 28px "Cinzel", serif; letter-spacing: .1em; }
.card .hist { display: flex; flex-direction: column; gap: 8px; }
.card .hr { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #ffffff12; }
.card .hr b { font: 900 34px "Cinzel", serif; color: var(--gold-hi); width: 60px; text-align: center; }
.card .hr span { color: var(--muted); font-size: 20px; letter-spacing: .1em; }
.perf { position: absolute; left: 20px; top: 124px; padding: 6px 12px; border-radius: 10px; background: #000b; font: 20px ui-monospace, Menlo, monospace; color: #cfe; z-index: 8; }

/* big win */
.bigwin { position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(#3a0608e0, #000000f2 70%); }
.bigwin:not(.on) { visibility: hidden; }
.bigwin .rays { position: absolute; left: 50%; top: 45%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; opacity: .5;
  background: repeating-conic-gradient(from 0deg, #ffc85a33 0deg 8deg, #0000 8deg 20deg); -webkit-mask: radial-gradient(#000 10%, #0000 55%); mask: radial-gradient(#000 10%, #0000 55%);
  animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bigwin .coins { position: absolute; inset: 0; width: 100%; height: 100%; }
.bigwin .box { position: relative; text-align: center; margin-top: -10%; }
.bigwin .tier { font: 900 120px/1 "Cinzel", serif; letter-spacing: .03em; background: linear-gradient(#fff8d8, #f0c35a 48%, #a4701c 52%, #ffe39a);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px #ffb84aaa) drop-shadow(0 6px 0 #3a0204); white-space: nowrap; }
.bigwin .amt { margin-top: 30px; font: 900 96px "Cinzel", serif; color: #fff; text-shadow: 0 0 40px #ffcf5a, 0 5px 0 #000; font-variant-numeric: tabular-nums; }
.bigwin .sub { margin-top: 16px; color: var(--gold); font: 700 32px "Cinzel", serif; letter-spacing: .2em; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: #120304 center / cover no-repeat; transition: opacity .6s; }
.loader::before { content: ""; position: absolute; inset: 0; background: radial-gradient(#0000 20%, #000c); }
.loader .in { position: relative; width: min(88vw, 520px); text-align: center; }
.loader .logo { width: 100%; aspect-ratio: 2; background: center / contain no-repeat; filter: drop-shadow(0 10px 30px #000); }
.loader .bar { height: 6px; margin: 18px 50px 10px; border-radius: 4px; background: #ffffff1a; overflow: hidden; }
.loader .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: width .2s; }
.loader .msg { color: var(--muted); font-size: 12px; letter-spacing: .2em; min-height: 16px; }
.loader .go { margin-top: 18px; padding: 16px 40px; border-radius: 99px; font: 900 19px "Cinzel", serif; letter-spacing: .14em; color: #2a1404;
  background: linear-gradient(#fff0bf, #e8be62 50%, #b0842e); box-shadow: 0 0 30px #ffc85a88; display: none; animation: rollPulse 1.6s infinite; }
.loader .fun { margin-top: 16px; color: #c9b79a99; font-size: 12px; letter-spacing: .08em; }