/* =====================================================================
   Headless Dice — styles
   Performance rules used throughout:
   - animate only transform / opacity (compositor-only, so frame rate follows the display's refresh rate)
   - hover states are an opacity-faded overlay, not a background/box-shadow transition
   - will-change is added only while something is actually animating
   - contain / content-visibility keep reflow and paint work local
   ===================================================================== */

/* ---------- Theme tokens ---------- */
:root {
  --page: #08f; --page-glow: #f1f9ff;
  --tex: url("/images/bg-lg.png"); --tex-shade: none; --tex-size: 500px; --tex-repeat: repeat; --tex-pos: 0 0;
  --card: rgba(0, 136, 255, .62); --card-edge: rgba(190, 224, 255, .85);
  --text: #fff; --head-shadow: #0a62c4;
  --row: rgba(255, 255, 255, .16); --row-edge: rgba(255, 255, 255, .32);
  --footer: #002f59; --die-frame: #fff;
  --accent: #08f; --select-bg: #fff; --select-fg: #08f;
  --btn: #ffe100; --btn-text: #fff; --btn-shadow: #c9a400; --verify-fg: #00e; --rays: 1;
  --card-glow: 0 0 0 2px rgba(0, 100, 200, .18);
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.55, 0, .7, .2);
  --info-bg: #fff; --info-fg: #00f; --switch-on: #fe2c55;
  --title-color: #ffe14d; --sub-color: var(--text); --count-color: var(--text);
  --font-display: "Lilita One", "Arial Rounded MT Bold", Impact, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --dice-scale: 1;
}
:root[data-theme="dark"] {
  --rays: .35; --verify-fg: #0a3d91;
  --page: #0b1f3d; --page-glow: #234a82; --tex-shade: linear-gradient(rgba(6, 16, 36, .82), rgba(6, 16, 36, .82));
  --card: rgba(10, 30, 62, .72); --card-edge: rgba(120, 160, 220, .45); --head-shadow: #040b17;
  --row: rgba(255, 255, 255, .08); --row-edge: rgba(255, 255, 255, .18); --footer: #050d1b; --die-frame: #e9eef7;
}
/* Extra themes: same recipe as the blue theme (radial light + doodle texture + light rays + translucent glossy cards),
   only recoloured, so they keep its look. */
:root[data-theme="charcoal-orange"] {
  --page: #16171b; --page-glow: #464b57; --tex-shade: linear-gradient(rgba(14, 15, 18, .74), rgba(14, 15, 18, .74));
  --card: rgba(30, 32, 38, .74); --card-edge: rgba(255, 140, 50, .9); --card-glow: 0 0 0 2px rgba(255, 120, 20, .18), 0 0 22px rgba(255, 120, 20, .18);
  --head-shadow: #8a3500; --row: rgba(255, 255, 255, .08); --row-edge: rgba(255, 140, 50, .35); --footer: #0c0d10;
  --accent: #ff7a1a; --select-fg: #e0620a; --btn: #ff7a1a; --btn-shadow: #b24600; --title-color: #ff8f33;
  --verify-fg: #d35400; --switch-on: #ff7a1a; --rays: .28;
}
:root[data-theme="electric-blue"] {
  --page: #0a1cff; --page-glow: #4fdcff; --tex-shade: linear-gradient(rgba(6, 12, 120, .3), rgba(6, 12, 120, .3));
  --card: rgba(18, 42, 230, .55); --card-edge: rgba(130, 238, 255, .92); --card-glow: 0 0 0 2px rgba(0, 220, 255, .22), 0 0 24px rgba(0, 220, 255, .28);
  --head-shadow: #0010a0; --row: rgba(255, 255, 255, .14); --row-edge: rgba(150, 240, 255, .4); --footer: #000a6e;
  --accent: #1a3dff; --select-fg: #1a3dff; --btn: #19e3ff; --btn-shadow: #0084b0; --title-color: #8af5ff;
  --verify-fg: #1a3dff; --switch-on: #19e3ff; --rays: .7;
}
:root[data-theme="spooky"] {
  --page: #2a0a45; --page-glow: #9446c4; --tex-shade: linear-gradient(rgba(34, 6, 56, .5), rgba(34, 6, 56, .5));
  --card: rgba(62, 16, 98, .64); --card-edge: rgba(255, 160, 60, .92); --card-glow: 0 0 0 2px rgba(255, 140, 30, .2), 0 0 22px rgba(255, 140, 30, .2);
  --head-shadow: #3a0a52; --row: rgba(255, 255, 255, .1); --row-edge: rgba(255, 160, 60, .35); --footer: #16051f;
  --die-frame: #fff7ec; --accent: #7b2cbf; --select-fg: #7b2cbf; --btn: #ff8c1a; --btn-shadow: #a84d00; --title-color: #ffa040;
  --verify-fg: #7b2cbf; --switch-on: #ff8c1a; --rays: .35;
}
:root[data-theme="minimal-dark"] {
  --page: #111214; --page-glow: #25272c; --tex-shade: linear-gradient(rgba(17, 18, 20, .9), rgba(17, 18, 20, .9));
  --card: rgba(28, 30, 34, .88); --card-edge: rgba(255, 255, 255, .12); --card-glow: 0 10px 30px rgba(0, 0, 0, .35);
  --head-shadow: rgba(0, 0, 0, .55); --row: rgba(255, 255, 255, .06); --row-edge: rgba(255, 255, 255, .1); --footer: #0b0c0e;
  --accent: #3a3d44; --select-bg: #1c1e22; --select-fg: #e8e8ea; --btn: #f4f4f6; --btn-text: #111; --btn-shadow: transparent;
  --title-color: #ffffff; --verify-fg: #111; --switch-on: #e8e8ea; --rays: 0;
}
:root[data-theme="checkered"] {
  --page: #2a2e36; --page-glow: #747d8c;
  --tex: repeating-conic-gradient(rgba(255, 255, 255, .085) 0 25%, transparent 0 50%); --tex-size: 72px 72px;
  --tex-shade: linear-gradient(rgba(20, 22, 26, .25), rgba(20, 22, 26, .25));
  --card: rgba(22, 24, 29, .74); --card-edge: rgba(255, 255, 255, .85); --card-glow: 0 0 0 2px rgba(0, 0, 0, .25);
  --head-shadow: #111; --row: rgba(255, 255, 255, .1); --row-edge: rgba(255, 255, 255, .25); --footer: #121418;
  --accent: #1b1d22; --select-fg: #1b1d22; --title-color: #ffe14d; --verify-fg: #1b1d22; --switch-on: #ffd400; --rays: .45;
}
html { color-scheme: only light; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
button, select, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

body {
  margin: 0; min-height: 100vh; color: var(--text); text-align: center;
  font-family: var(--font-body);
  background: var(--page);
}
a { color: inherit; }
.noselect { user-select: none; -webkit-user-select: none; }

/* Background = one FIXED layer (gradient + texture/custom image + shade) plus the fixed light rays.
   It never scrolls, and the ROLLING.. screen shows this exact same layer, so it can't move or zoom. Each is its
   own compositor layer, so scrolling doesn't repaint it. */
.bg, .light { position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0); }
.bg {
  background-color: var(--page);
  background-image: var(--tex-shade), var(--tex), radial-gradient(var(--page-glow), var(--page));
  background-size: auto, var(--tex-size), 100% 100%; background-repeat: repeat, var(--tex-repeat), no-repeat;
  background-position: 0 0, var(--tex-pos), center;
}
.light {
  background-image: url("/images/light.png"); background-size: 100% 100%; background-repeat: no-repeat; background-position: 0 0;
  opacity: var(--rays);
}
#content { position: relative; padding-bottom: 0; min-height: 100vh; display: flex; flex-direction: column; transition: opacity .26s var(--ease); }
.inner { position: relative; z-index: 1; flex: 1; padding: 60px 8px 40px; }

/* Display type */
h1, h2, h3, h4, .roll-button, .pwa-button b, .switch-name, select, .footer nav a, .copy, .streamer .nm, .mini-btn, .tracker-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
}
h2, h3, h4, .title { letter-spacing: .02em; text-shadow: -1px -1px 0 var(--head-shadow), 1px -1px 0 var(--head-shadow), -1px 1px 0 var(--head-shadow), 3px 3px 0 var(--head-shadow); }

/* Header */
.head { margin-bottom: 18px; }
.title { margin: 0; }
.title a { text-decoration: none; }
#logo { display: block; margin: 0 auto; width: 380px; max-width: 80%; height: auto; filter: saturate(1.05) brightness(1.03) drop-shadow(0 3px 0 rgba(0, 60, 140, .35)); }
.title-text { display: none; font-size: 58px; line-height: 1.05; color: var(--title-color); }
:root[data-title="text"] #logo { display: none; }
:root[data-title="text"] .title-text { display: block; }
#sub-title { margin: 6px 0 0; font-size: 26px; color: var(--sub-color); }
#room-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; padding: 4px 16px 4px 5px; max-width: 92%;
  background: var(--row); border: 1px solid var(--row-edge); border-radius: 999px;
  font: 400 19px var(--font-display); text-transform: uppercase; letter-spacing: .02em;
}
#room-badge:not(:has(img:not([hidden]))) { padding-left: 16px; }
#room-pfp { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .2); flex: none; }
#room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 1px rgba(0, 0, 0, .25); }
.ad-slot { margin: 5px auto 15px; min-height: 250px; max-width: 100%; }
#ad-box-bottom { min-height: 250px; }
#ad-box-bottom:empty { min-height: 0; margin: 0; }
/* Until ads go in, the top ad slot is just the gap under the header: about 120 px in total (18 px header margin +
   spacer), minus the room badge when shown, and smaller on short screens so the page fits down to the colours box. */
:root { --badge-h: 0px; --fit-y: 822px; }
html:has(#room-badge:not([hidden])) { --badge-h: 44px; }
/* short laptop screens: tighten the header so more fits above the fold */
@media (min-width: 651px) and (max-height: 820px) { .inner { padding-top: 26px; } #logo { width: 330px; } #sub-title { font-size: 23px; } :root { --fit-y: 766px; } }
#ad-box-top:empty { min-height: clamp(8px, calc(100vh - var(--fit-y) - var(--badge-h)), calc(102px - var(--badge-h))); margin: 0 auto; }

/* Layout */
.layout { display: flex; justify-content: center; align-items: flex-start; gap: 20px; }
.side { width: 237px; flex: none; }
.center { width: 360px; flex: none; }
.mob-only { display: none; }

/* Cards */
.card {
  position: relative; margin: 0 0 16px; padding: 18px 14px 20px; border-radius: 18px; contain: layout style;
  background: var(--card); border: 4px solid var(--card-edge); box-shadow: var(--card-glow);
}
.card h2 { margin: 4px 0 14px; font-size: 26px; }
.card h4 { margin: 0 0 12px; font-size: 15px; }

/* Selects */
.selects { display: flex; gap: 6px; margin-bottom: 14px; }
select { flex: 1; min-width: 0; height: 36px; padding: 0 4px; color: var(--select-fg); background: var(--select-bg); border: 2px solid var(--accent); border-radius: 4px; font-size: 15px; cursor: pointer; }

/* Instant-feel press + hover for every button-like control: overlay fades in (opacity), press = transform */
.roll-button { position: relative; }
.count-btn, .pwa-button, .streamer, .close, .mini-btn, .item-opt, .icon-btn { position: relative; transition: transform .16s var(--ease); }
.count-btn::after, .pwa-button::after, .streamer::after, .close::after, .mini-btn::after, .item-opt::after, .icon-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; pointer-events: none; transition: opacity .18s var(--ease);
}
.count-btn:hover::after, .pwa-button:hover::after, .streamer:hover::after, .close:hover::after, .mini-btn:hover::after, .item-opt:hover::after, .icon-btn:hover::after { opacity: .2; }
.pwa-button:active, .mini-btn:active, .item-opt:active, .icon-btn:active { transform: scale(.96); transition-duration: .06s; }
.count-btn:active { transform: scale(.9); transition-duration: .06s; }
.streamer:hover { transform: translateX(2px); }

/* Dice: frame, coloured square, dot */
#dice-row { padding: 2px 0; text-align: center; line-height: 0; }
.dice-wrapper { display: inline-block; vertical-align: top; margin: 4px; background: var(--die-frame); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.dice-wrapper i { display: block; width: 100%; height: 100%; position: relative; border-radius: 16%; }
.dice-wrapper svg { display: block; width: 100%; height: 100%; }
.sz-xl { width: 72px; height: 72px; padding: 5px; border-radius: 14px; }
.sz-l  { width: 52px; height: 52px; padding: 4px; border-radius: 11px; margin: 3px; }
.sz-m  { width: 38px; height: 38px; padding: 3px; border-radius: 8px; margin: 3px; }
.sz-s  { width: 26px; height: 26px; padding: 2px; border-radius: 6px; margin: 2px; }
.sz-xs { width: 18px; height: 18px; padding: 2px; border-radius: 4px; margin: 1px; }
.sz-mini { width: 26px; height: 26px; padding: 2px; border-radius: 5px; margin: 2px; }
#dice-row .sz-xl { width: calc(72px * var(--dice-scale)); height: calc(72px * var(--dice-scale)); }
#dice-row .sz-l  { width: calc(52px * var(--dice-scale)); height: calc(52px * var(--dice-scale)); }
#dice-row .sz-m  { width: calc(38px * var(--dice-scale)); height: calc(38px * var(--dice-scale)); }
#dice-row .sz-s  { width: calc(26px * var(--dice-scale)); height: calc(26px * var(--dice-scale)); }
#dice-row .sz-xs { width: calc(18px * var(--dice-scale)); height: calc(18px * var(--dice-scale)); }

/* Dice rendering styles (ROOM MAKER). Pure CSS on top of the same markup, so the tamper guard sees no difference. */
:root[data-dice="neon"] .dice-wrapper { background: #07070d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
:root[data-dice="neon"] .dice-wrapper i { box-shadow: 0 0 10px currentColor, 0 0 22px currentColor; }
:root[data-dice="neon"] .dice-wrapper svg rect { fill: #07070d; stroke: currentColor; stroke-width: 7; }
:root[data-dice="neon"] .dice-wrapper svg circle { fill: currentColor; }
:root[data-dice="3d"] .dice-wrapper { background: linear-gradient(145deg, #fff, #c9ced8); box-shadow: 0 6px 10px rgba(0, 0, 0, .38), inset 0 -2px 3px rgba(0, 0, 0, .2); }
:root[data-dice="3d"] .dice-wrapper i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .38));
  box-shadow: inset -3px -4px 6px rgba(0, 0, 0, .35), inset 2px 2px 4px rgba(255, 255, 255, .45);
}
:root[data-dice="3d"] .dice-wrapper svg circle { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }

/* ---------- GO AGAIN rolling screen (matches the original site) ----------
   1) the page is instantly replaced by the background + "ROLLING.." + blank dice that wobble
   2) after ~1.2 s the screen empties to plain background for a beat
   3) the background layer fades out, revealing the page with the new result
   Everything animates with transform/opacity only. */
/* No background of its own: the page content is hidden and the fixed background shows through untouched. */
#roll-screen {
  position: fixed; inset: 0; z-index: 800; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 0 16px 14vh; pointer-events: none;
}
html.rs-on #roll-screen { display: flex; }
html.rs-on #content { opacity: 0; visibility: hidden; transition: none; }
#roll-screen .rs-title { margin: 0; font-size: 32px; opacity: 0; animation: rs-in .18s var(--ease) .06s forwards; transition: filter .2s ease; }
#roll-screen .rs-dice { line-height: 0; max-width: 560px; }
html.rs-blank #roll-screen .rs-dice, html.rs-blank #roll-screen .rs-title { visibility: hidden; }
#roll-screen .dice-wrapper { animation: var(--wobble) var(--wobble-t) var(--ease) infinite; will-change: transform; }
#roll-screen .dice-wrapper:nth-child(2n) { animation-delay: -.12s; } #roll-screen .dice-wrapper:nth-child(3n) { animation-delay: -.25s; }
#roll-screen .dice-wrapper i { color: #e9e9ec !important; }
#roll-screen .dice-wrapper svg circle { fill: #b9bcc4; }
body.anti-ban #roll-screen .rs-title { filter: blur(14px) opacity(.9); }
@keyframes rs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Wobble presets (ROOM MAKER → Rolling animation) */
:root { --wobble: w-shake; --wobble-t: .5s; }
:root[data-anim="spin"] { --wobble: w-spin; --wobble-t: .7s; }
:root[data-anim="bounce"] { --wobble: w-bounce; --wobble-t: .55s; }
:root[data-anim="flip"] { --wobble: w-flip; --wobble-t: .8s; }
@keyframes w-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); } 15% { transform: translate(-2px, -1px) rotate(-2deg); }
  30% { transform: translate(2px, 1px) rotate(1.5deg); } 45% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(2px, -1px) rotate(2deg); } 75% { transform: translate(-2px, 1px) rotate(-1.5deg); } 90% { transform: translate(1px, -1px) rotate(1deg); }
}
@keyframes w-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes w-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.06, .94); } 45% { transform: translateY(-18px) scale(.97, 1.03); } 80% { transform: translateY(0) scale(1.04, .96); } }
@keyframes w-flip { from { transform: perspective(400px) rotateY(0); } to { transform: perspective(400px) rotateY(360deg); } }

#gameidcodetext { margin: 12px 0 10px; font-size: 22px; font-weight: 700; letter-spacing: .1em; }
#gameidcodetext small { font-size: 12px; letter-spacing: 0; }
.icon-btn { width: 28px; height: 28px; margin-left: 6px; padding: 0; vertical-align: middle; color: inherit; background: var(--row); border: 1px solid var(--row-edge); border-radius: 6px; font-size: 14px; letter-spacing: 0; cursor: pointer; }
#infomsg { margin: 0; padding: 12px 10px; background: #fff; border-radius: 8px; color: var(--verify-fg); font-size: 15px; font-weight: 700; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); }
#infomsg a { color: var(--verify-fg); display: block; text-decoration: underline; text-underline-offset: 2px; }
#infomsg a:hover { text-decoration-thickness: 2px; }
.vbanner { margin: 10px 0 0; padding: 8px 10px; background: var(--info-bg); color: var(--info-fg); border-radius: 6px; font-size: 13px; font-weight: 700; word-break: break-all; }

/* Go Again: rounded, glossy, with a light sweep every few seconds (transform-only, runs on the compositor) */
.roll-button {
  display: block; width: 100%; margin: 12px 0 14px; padding: 11px 14px; font-size: 26px; letter-spacing: .03em; overflow: hidden; isolation: isolate;
  color: var(--btn-text); text-shadow: 1px 1px 0 var(--btn-shadow), 2px 2px 0 var(--btn-shadow);
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn) 55%, white) 0%, var(--btn) 48%, color-mix(in srgb, var(--btn) 88%, black) 100%);
  border: 2px solid rgba(255, 255, 255, .95); border-radius: 7px; cursor: pointer;
  box-shadow: 0 4px 0 var(--btn-shadow), 0 8px 18px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.roll-button::before { /* sweeping shine */
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%);
  transform: translateX(-140%) skewX(-18deg);
}
/* the shine sweeps once, 0.5 s after each roll lands (script.js adds .shine) */
.roll-button.shine::before, .global.shine .g-fill::before { animation: shine-once .9s var(--ease) 1; }
@keyframes shine-once { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
.roll-button > span.gloss { position: absolute; inset: 2px 2px 52% 2px; border-radius: 5px 5px 40% 40% / 5px 5px 10px 10px; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .05)); pointer-events: none; z-index: -1; }
@keyframes shine { 0%, 55% { transform: translateX(-140%) skewX(-18deg); } 85%, 100% { transform: translateX(330%) skewX(-18deg); } }
.roll-button:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--btn-shadow), 0 12px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .7); }
.roll-button:active { transform: translateY(3px) scale(.99); box-shadow: 0 1px 0 var(--btn-shadow), 0 3px 8px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .6); transition-duration: .06s; }
.roll-button:disabled { cursor: default; }
:root[data-theme="minimal-dark"] .roll-button { text-shadow: none; }

/* Item loss tracker (+/- tally with a fixed item) */
.tracker-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; }
.tracker-title { font-size: 14px; letter-spacing: .04em; text-shadow: 1px 1px 0 var(--head-shadow); }
.mini-btn { padding: 4px 9px; font-size: 12px; color: var(--text); background: var(--row); border: 1px solid var(--row-edge); border-radius: 5px; cursor: pointer; }
.item-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 0 0 8px; padding: 6px; background: var(--row); border: 1px solid var(--row-edge); border-radius: 6px; }
.item-opt { aspect-ratio: 1; display: grid; place-items: center; padding: 2px; color: var(--text); background: rgba(255, 255, 255, .16); border: 2px solid transparent; border-radius: 6px; cursor: pointer; font: 700 11px var(--font-body); }
.item-opt[aria-selected="true"] { border-color: var(--btn); }
.item-opt img { width: 100%; height: 100%; object-fit: contain; }
.item-fallback { display: grid; place-items: center; width: 58px; height: 58px; padding: 2px; font: 700 9px/1.1 var(--font-body); text-align: center; background: var(--row); border-radius: 8px; overflow: hidden; }
.item-opt .item-fallback { width: 100%; height: 100%; font-size: 7px; background: none; }
.counter { display: flex; align-items: stretch; background: var(--row); border: 1px solid var(--row-edge); border-radius: 4px; }
.cmid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 4px 6px; }
#item-img { width: 58px; height: 58px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.counter #count { min-width: 56px; font-size: 32px; font-weight: 700; padding: 6px 0; color: var(--count-color); }
#count.bump { animation: bump .16s ease-out; }
@keyframes bump { 0% { transform: scale(1.22); } 100% { transform: scale(1); } }
#tally-note { margin: 6px 0 0; font-size: 12px; font-weight: 700; min-height: 15px; }
.cside { display: flex; flex-direction: column; width: 40px; background: rgba(255, 255, 255, .14); }
.count-btn { flex: 1; padding: 2px 0; color: #fff; background: transparent; border: 0; font: 700 12px var(--font-body); cursor: pointer; }
.pill { display: inline-block; margin: 12px 0; padding: 2px 8px; font-size: 12px; font-weight: 700; background: var(--row); border-radius: 4px; }

/* Install, colors, link */
.pwa-button { display: block; margin: 6px auto; padding: 14px 34px; color: #fff; background: rgba(255, 255, 255, .15); border: 2px solid #fff; border-radius: 25px; cursor: pointer; }
.pwa-button b { display: block; font-size: 19px; letter-spacing: .03em; }
.pwa-button em { font-size: 14px; }
.hint { margin: 6px 0; font-size: 13px; }
.colors { margin: 14px 0 6px; padding: 6px 4px; font-size: 12px; font-weight: 700; background: var(--row); border-radius: 4px; }
.c-red{color:#f00}.c-orange{color:#ff8c00}.c-yellow{color:#ffd700}.c-green{color:#008000}.c-blue{color:#00f}.c-purple{color:#800080}
.colors b, .info b { text-shadow: 0 0 2px #fff, 0 0 2px #fff; }

/* Toggle switch */
.toggle-container { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; }
.switch-name { font-size: 15px; text-transform: none; font-family: var(--font-body); font-weight: 700; }
.switch { position: relative; display: inline-block; flex: none; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; cursor: pointer; background: #444; border-radius: 999px; transition: background-color .15s linear; }
.slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s cubic-bezier(.2, .8, .2, 1); }
.switch input:checked + .slider { background: var(--switch-on); }
.switch input:checked + .slider::before { transform: translateX(16px); }
.switch input:focus-visible + .slider { outline: 3px solid #fff; outline-offset: 2px; }

body.anti-ban #dice-row .dice-wrapper, body.anti-ban .title, body.anti-ban #sub-title2, body.anti-ban select, body.anti-ban #verify-banner { filter: blur(20px) opacity(.9); cursor: pointer; }
body.anti-ban #dice-row .dice-wrapper:hover, body.anti-ban #dice-row .dice-wrapper:active { filter: none; }
body.anti-ban #history .dice-wrapper { filter: blur(7px) opacity(.9); }
body.anti-ban #history .dice-wrapper:hover, body.anti-ban #history .dice-wrapper:active { filter: none; }
.title, #sub-title2, select, #gameidcodetext { transition: filter .2s ease; }

/* History */
.close { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; padding: 0; color: #fff; background: rgba(255, 255, 255, .3); border: 0; border-radius: 50%; font: 700 17px/22px var(--font-body); cursor: pointer; }
.stats { margin: 0 8px 14px; padding: 8px 10px; text-align: left; background: rgba(255, 255, 255, .22); border-radius: 8px; }
.stats h4 { margin: 4px 0 8px; font-size: 14px; text-shadow: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 8px 0; padding: 3px 6px; background: #fff; border-radius: 4px; font-size: 12px; font-weight: 700; }
.chip .sq { width: 9px; height: 9px; border-radius: 2px; }
#history-list { list-style: none; margin: 0 8px; padding: 0; }
#history-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(255, 255, 255, .85); }
#history-list .num { width: 24px; text-align: right; font-weight: 700; font-size: 14px; }
#history-list .mini { line-height: 0; }
.note { margin: 14px 8px 0; text-align: left; font-size: 13px; }
.link-btn { display: none; text-decoration: underline; cursor: pointer; font-size: 14px; margin: 6px 0 14px; }
#show-history { display: block; }
#show-history[style*="none"] { display: none !important; }
.card h4 .link-btn { display: inline; margin: 0 0 0 6px; font-family: var(--font-body); text-transform: none; text-shadow: none; }

/* Info cards */
.info { content-visibility: auto; contain-intrinsic-size: auto 220px; }
.info p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; }
.info h2 { font-size: 22px; }

/* Streamers */
.side h4 { text-align: center; }
.streamer { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 5px 8px; text-align: left; text-decoration: none; background: var(--row); border: 1px solid var(--row-edge); border-radius: 6px; }
.avatar { position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 3px solid transparent; font: 400 17px var(--font-display); color: #fff; }
.avatar.live { border-color: #ff3b5c; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar b { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); padding: 0 5px; font: 700 9px/13px Arial, sans-serif; background: #ff3b5c; border-radius: 4px; }
.who { display: flex; flex-direction: column; min-width: 0; }
.nm { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.nm .nt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ver { width: 13px; height: 13px; flex: none; }
.hd { font-size: 11px; opacity: .9; overflow: hidden; text-overflow: ellipsis; }

/* Ad block wall */
.adblock-big { font-size: 20px; } .adblock-big b { color: #ffe14d; }
#dice-roll-box > h3 { font-size: 26px; }

/* Footer */
.footer { position: relative; z-index: 1; margin-top: 10px; padding: 50px 10px 60px; background: var(--footer); }
.footer nav { margin-bottom: 22px; }
.footer nav a { display: inline-block; margin: 6px 12px; font-size: 15px; text-decoration: none; letter-spacing: .02em; }
.footer nav a:hover { text-decoration: underline; }
.copy { margin: 24px 0 0; font-size: 13px; }

/* Confetti canvas (created on demand by fx.js) */
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 900; }

/* ---------- Streamer / OBS overlay mode ---------- */
:root[data-overlay="1"] .ad-slot, :root[data-overlay="1"] .side, :root[data-overlay="1"] .info, :root[data-overlay="1"] .footer,
:root[data-overlay="1"] #show-history, :root[data-overlay="1"] #history, :root[data-overlay="1"] .pwa-button, :root[data-overlay="1"] #pwa-hint,
:root[data-overlay="1"] .colors, :root[data-overlay="1"] .toggle-container, :root[data-overlay="1"] #streamer-widget-mobile,
:root[data-overlay="1"] #show-streamers, :root[data-overlay="1"] #infomsg, :root[data-overlay="1"] .selects { display: none !important; }
:root[data-overlay="1"] .inner { padding-top: 14px; }
:root[data-transparent="1"] body, :root[data-transparent="1"] .bg { background: transparent !important; }
:root[data-transparent="1"] .light { display: none; }

/* =====================================================================
   ROOM MAKER
   ===================================================================== */
/* ROOM MAKER opener sits in the footer, next to Privacy Policy, styled like the other footer links */
#rm-toggle {
  display: inline-block; margin: 6px 12px; padding: 0; color: inherit; background: none; border: 0; cursor: pointer;
  font: 400 15px var(--font-display); text-transform: uppercase; letter-spacing: .02em;
}
#rm-toggle:hover, #rm-toggle[aria-expanded="true"] { text-decoration: underline; }
#rm-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
.rm {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000; width: 372px; max-width: 100vw; overflow-y: auto; overscroll-behavior: contain; text-align: left;
  color: #e8ecf4; background: #11151e; border-left: 1px solid #2a3243; box-shadow: -10px 0 40px rgba(0, 0, 0, .45);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; transform: translate3d(104%, 0, 0); transition: transform .22s cubic-bezier(.2, .8, .2, 1); will-change: transform;
}
.rm.open { transform: none; }
.rm * { text-transform: none; text-shadow: none; letter-spacing: normal; }
.rm-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #11151e; border-bottom: 1px solid #2a3243; }
.rm-top h2 { margin: 0; font: 800 15px system-ui, sans-serif; letter-spacing: .1em !important; text-transform: uppercase !important; color: #ff7a1a; }
.rm-x { width: 30px; height: 30px; color: #e8ecf4; background: #1c2230; border: 1px solid #33405a; border-radius: 8px; font-size: 18px; cursor: pointer; }
.rm details { border-bottom: 1px solid #222a3a; }
.rm summary { padding: 13px 16px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.rm summary::after { content: "▾"; color: #7a869e; transition: transform .15s; } .rm details[open] summary::after { transform: rotate(180deg); }
.rm summary::-webkit-details-marker { display: none; }
.rm .rm-body { padding: 0 16px 14px; }
.rm-row { display: flex; align-items: center; gap: 8px; margin: 9px 0; }
.rm-row > label, .rm-row > .lbl { flex: 1; min-width: 0; color: #c4cce0; }
.rm-hint { margin: 4px 0 0; font-size: 11.5px; color: #7f8aa3; }
.rm select, .rm input[type="text"] { height: 32px; min-width: 0; flex: 1.3; padding: 0 8px; color: #e8ecf4; background: #0b0e15; border: 1px solid #33405a; border-radius: 6px; font: 13px system-ui, sans-serif; }
.rm select:focus, .rm input:focus-visible, .rm button:focus-visible { outline: 2px solid #ff7a1a; outline-offset: 1px; }
.rm input[type="range"] { flex: 1.3; accent-color: #ff7a1a; min-width: 0; }
.rm input[type="color"] { width: 40px; height: 32px; padding: 2px; background: #0b0e15; border: 1px solid #33405a; border-radius: 6px; cursor: pointer; }
.rm .btn { padding: 7px 11px; color: #e8ecf4; background: #1c2230; border: 1px solid #33405a; border-radius: 6px; font: 600 12px system-ui, sans-serif; cursor: pointer; transition: transform 70ms; }
.rm .btn:hover { border-color: #ff7a1a; } .rm .btn:active { transform: scale(.96); }
.rm .btn.primary { color: #111; background: #ff7a1a; border-color: #ff7a1a; } .rm .btn.danger { color: #ff8d8d; }
.rm .rm-row > label.switch { flex: none; }
.rm .switch input:checked + .slider { background: #ff7a1a; }
.rm .val { width: 34px; text-align: right; color: #9fb0d0; font-variant-numeric: tabular-nums; }
.rm .pfp-prev { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #0b0e15; border: 1px solid #33405a; flex: none; }
.rm .swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 6px 0; }
.rm .sw { aspect-ratio: 1; padding: 0; border: 2px solid #11151e; border-radius: 6px; cursor: pointer; box-shadow: 0 0 0 1px #33405a; }
.rm .sw:hover { transform: scale(1.12); }
.rm .seg { display: flex; gap: 0; flex: 1.6; }
.rm .seg label { flex: 1; text-align: center; }
.rm .seg input { position: absolute; opacity: 0; width: 0; }
.rm .seg span { display: block; padding: 7px 4px; font-size: 12px; font-weight: 600; background: #0b0e15; border: 1px solid #33405a; cursor: pointer; margin-left: -1px; }
.rm .seg label:first-child span { border-radius: 6px 0 0 6px; margin-left: 0; } .rm .seg label:last-child span { border-radius: 0 6px 6px 0; }
.rm .seg input:checked + span { color: #111; background: #ff7a1a; border-color: #ff7a1a; position: relative; }
.rm .seg input:focus-visible + span { outline: 2px solid #fff; }
.rm .rgb-r { background: linear-gradient(90deg, #000, #f00); } .rm .rgb-g { background: linear-gradient(90deg, #000, #0f0); } .rm .rgb-b { background: linear-gradient(90deg, #000, #00f); }
.rm .rgb { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; }
.rm .rgb::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #ff7a1a; }
.rm .rgb::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #ff7a1a; }
.rm textarea { width: 100%; min-height: 64px; padding: 8px; color: #e8ecf4; background: #0b0e15; border: 1px solid #33405a; border-radius: 6px; font: 11px ui-monospace, monospace; resize: vertical; }
.rm .font-sample { margin: 6px 0 0; padding: 10px; font-size: 20px; background: #0b0e15; border: 1px dashed #33405a; border-radius: 6px; text-transform: uppercase !important; font-family: var(--font-display); }

/* ---------- Verify page ---------- */
.vcard { padding-bottom: 24px; min-height: 260px; }
.vcard h2 { font-size: 24px; }
.vlabel { display: block; margin: 0 0 6px; font: 400 13px var(--font-display); text-transform: uppercase; text-align: left; width: min(240px, 100%); margin-inline: auto; }
#vid { display: block; width: min(240px, 100%); height: 40px; margin: 0 auto 10px; padding: 0 10px; color: #111; background: #fff; border: 0; border-radius: 4px; font: 18px Arial, sans-serif; }
.vwarn { margin: 16px 0 0; padding: 12px 14px; color: #d40000; background: #fff; border: 3px solid #ff4b4b; border-radius: 6px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.vwarn::before { content: "⚠️"; display: block; margin-bottom: 4px; font-size: 22px; }
.vmsg { margin: 14px 0 0; padding: 10px; background: var(--row); border-radius: 6px; font-size: 13px; font-weight: 700; }
.vhead { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 8px; padding: 8px; font: 400 14px var(--font-display); text-transform: uppercase; background: var(--row); border-radius: 6px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #3dff7a; box-shadow: 0 0 8px #3dff7a; animation: pulse 1.6s ease-in-out infinite; }
.live-dot.off { background: #ffb020; box-shadow: none; animation: none; }
@keyframes pulse { 50% { transform: scale(.55); opacity: .5; } }
#vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vrow { padding: 10px 12px; text-align: left; background: var(--row); border-radius: 6px; content-visibility: auto; contain-intrinsic-size: auto 66px; }
.vrow .top { display: flex; align-items: center; gap: 6px; line-height: 0; flex-wrap: wrap; }
.vrow .num { width: 22px; line-height: 1; font-size: 13px; font-weight: 700; text-align: right; margin-right: 2px; }
.vrow .ago { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; }
.vrow.new { animation: v-in .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes v-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .side { display: none; }
  .mob-only { display: block; }
  .link-btn.mob-only { display: none; }
  #show-streamers[style*="none"] { display: none !important; }
  .layout { gap: 0; }
  .center { width: 100%; max-width: 420px; }
  #streamer-widget-mobile h4 { text-align: center; }
}
@media (max-width: 650px) {
  .light { display: none; }
  .inner { padding-top: 30px; }
  #logo { width: 280px; }
  .title-text { font-size: 42px; }
  #sub-title { font-size: 20px; }
  .ad-slot { min-height: 100px; }
  #ad-box-bottom { min-height: 100px; }
  #ad-box-bottom:empty { min-height: 0; margin: 0; }
  :root { --fit-y: 758px; }
  .sz-xl { width: 64px; height: 64px; padding: 4px; border-radius: 12px; }
  #dice-row .sz-xl { width: calc(64px * var(--dice-scale)); height: calc(64px * var(--dice-scale)); }
  .roll-button { font-size: 24px; }
}
@media (max-width: 920px) { #show-streamers { display: block; } #show-streamers[style*="none"] { display: none !important; } }

:root[data-reduce="1"] .vrow.new, :root[data-reduce="1"] #count.bump, :root[data-reduce="1"] .roll-button::before, :root[data-reduce="1"] #roll-screen .dice-wrapper { animation: none !important; }
:root[data-reduce="1"] .rm, :root[data-reduce="1"] #content { transition: none; }

/* ---------- Smooth motion everywhere (transform/opacity only) ---------- */
html { scroll-behavior: smooth; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
.item-picker:not([hidden]), #history:not([hidden]), #pwa-hint:not([hidden]), #room-badge:not([hidden]), .vwarn, #vlist, .vmsg { animation: pop-in .26s var(--ease) both; }
.rm details[open] > .rm-body { animation: pop-in .22s var(--ease) both; }
.rm summary::after { transition: transform .22s var(--ease); }
.slider { transition: background-color .22s var(--ease); }
.slider::before { transition: transform .22s var(--ease); }
select { transition: box-shadow .18s var(--ease), transform .16s var(--ease); }
select:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
select:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); }
#tally-note { transition: opacity .2s var(--ease); }
/* Theme switches cross-fade (View Transitions; browsers without it just switch instantly) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--ease); }
:root[data-reduce="1"] *, :root[data-reduce="1"] *::before, :root[data-reduce="1"] *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }

/* ---------- Verify page entry ---------- */
.vhint { margin: -2px 0 8px; font-size: 12px; font-weight: 700; opacity: .9; }
#vid { transition: box-shadow .18s var(--ease); border-radius: 10px; }
#vid:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.vwarn { border-radius: 14px; }
.vrow { border-radius: 12px; }
#tally-note:empty { display: none; }

/* ---------- Global rolls progress bar ---------- */
.global { margin: 2px 0 6px; padding: 10px 12px 12px; text-align: left; background: var(--row); border: 1px solid var(--row-edge); border-radius: 10px; }
.g-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.g-title { font: 400 15px var(--font-display); text-transform: uppercase; letter-spacing: .03em; text-shadow: 1px 1px 0 var(--head-shadow); }
.g-num { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-num b { display: inline-block; font-size: 15px; }
.g-num b.bump { animation: bump .22s var(--ease); }
.g-bar { position: relative; height: 18px; overflow: hidden; border-radius: 6px; background: rgba(0, 0, 0, .18); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .35); }
.g-fill {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit; transform: translateX(-100%); transition: transform .9s var(--ease); will-change: transform;
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn) 55%, white) 0%, var(--btn) 50%, color-mix(in srgb, var(--btn) 85%, black) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.g-fill::before { /* same light sweep as the GO AGAIN button */
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8) 50%, transparent);
  transform: translateX(-140%) skewX(-18deg);
}
.g-note { margin: 7px 0 0; min-height: 0; font-size: 12px; font-weight: 700; }
.g-note:empty { display: none; }
.global.done .g-fill { background: linear-gradient(180deg, #8dffb0 0%, #2bd65f 50%, #1aa548 100%); }