@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/lilita-one.woff2') format('woff2');}

: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;
}

: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;
}

.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;
}

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);
}

.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;
}

:root {
    --badge-h: 0px;
    --fit-y: 822px;
}

html:has(#room-badge:not([hidden])) {
    --badge-h: 44px;
}

@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 {
    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;
}

.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 {
    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;
}

.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-row {
    padding: 2px 0;
    text-align: center;
    line-height: 0;
}

.dice-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: top;
}

.die-label {
    display: none;
    margin-top: -1px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 2px rgba(255,255,255,.55);
    user-select: none;
}

body.anti-ban #dice-row .die-label {
    display: block;
}

.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));
}

: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));
}

#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;
    }
}

: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;
}

#gameidcodetext {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

#gameidcodetext #gameid {
    letter-spacing: .12em;
    font-size: 17px;
}

#gameidcodetext .verify-button {
    margin-left: 2px;
    flex: 0 0 auto;
}

.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;
}

.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 {

    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);
}

.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;
}

.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;
}

.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-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;
}

.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 {
    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;
}

.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;
}

.adblock-big {
    font-size: 20px;
}

.adblock-big b {
    color: #ffe14d;
}

#dice-roll-box>h3 {
    font-size: 26px;
}

.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 {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 900;
}

: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;
}

#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);
}

.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;
    }
}

@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;
}

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);
}

::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;
}

.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 {
    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 {

    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%);
}

#streamer-widget-mobile,
#show-streamers { display: none !important; }

.card {
    border-radius: 22px;
    box-shadow: var(--card-glow), 0 0 26px rgba(249, 215, 47, .14), 0 12px 28px rgba(0, 0, 0, .35);
}

#logo { filter: drop-shadow(0 4px 10px rgba(255, 190, 40, .35)) drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }

.roll-button { transition: transform .15s ease, filter .15s ease; }
.roll-button:hover { transform: translateY(-2px); filter: brightness(1.07) saturate(1.05); }
.roll-button:active { transform: translateY(1px); filter: brightness(.97); }

.card h2 { letter-spacing: .5px; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }

#logo.logo-svg { display:block; margin:0 auto; width:420px; max-width:92%; height:auto; overflow:visible;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); transition: transform .15s ease; }
#logo-link { display:block; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#logo-link:hover #logo { transform: scale(1.03) rotate(-1deg); }
#logo-link:active #logo { transform: scale(.97); }
@media (max-width:650px){ #logo.logo-svg{ width:320px; } }

.selects select { font-size:14px; text-overflow:clip; padding:0 2px; }
.selects #type-select { flex:1.5; }
.selects #theme-select { flex:1.5; }
.selects #num-select { flex:1.2; }

.xbtn { position:fixed; right:12px; top:50%; transform:translateY(-50%); z-index:900; width:42px; height:42px; border-radius:50%;
  border:3px solid rgba(0,0,0,.4); background:#f9d72f; color:#2a1a00; font:inherit; font-size:22px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.35); }
.xbtn:active { transform:translateY(-50%) scale(.94); }
.xpanel { position:fixed; right:12px; top:50%; transform:translateY(-50%); z-index:901; width:min(300px, calc(100vw - 24px)); max-height:80vh; overflow:auto;
  background:#151616; color:#fff; border:3px solid #4e4f50; border-radius:16px; padding:12px; box-shadow:0 12px 30px rgba(0,0,0,.55); }
.xpanel[hidden] { display:none; }
.xhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:18px; }
.xhead button { background:none; border:0; color:#fff; font-size:26px; cursor:pointer; }
.xall, .xrow { display:flex; align-items:center; gap:6px; margin:6px 0; }
.xall span, .xrow span { min-width:22px; font-size:14px; opacity:.85; }
.xall span { min-width:62px; }
.xdot { width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.35); cursor:pointer; color:#fff; font:inherit; padding:0; }
.xdot.on { outline:3px solid #fff; outline-offset:1px; }
.xnote { font-size:12px; opacity:.7; margin:8px 0; text-transform:none; }
.xactions { display:flex; gap:8px; }
.xactions button { flex:1; height:38px; border-radius:8px; border:0; font:inherit; font-size:16px; cursor:pointer; background:#3a3b3c; color:#fff; }
#xconfirm { background:#f9d72f; color:#2a1a00; }
:root[data-overlay="1"] .xbtn, :root[data-overlay="1"] .xpanel { display:none !important; }

.xpanel { width:min(320px, calc(100vw - 24px)); }
.xbig { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 12px; }
.xcolor { height:64px; border-radius:14px; border:3px solid rgba(255,255,255,.3); cursor:pointer; color:#fff; font:inherit; font-size:15px; line-height:1.1; box-shadow:0 4px 0 rgba(0,0,0,.4); }
.xcolor.on { outline:4px solid #fff; outline-offset:2px; transform:scale(1.05); }
.xcolor:active { transform:translateY(2px); box-shadow:none; }
.xconfirm { width:100%; height:52px; border-radius:14px; border:0; background:#3ddc6a; color:#06280f; font:inherit; font-size:22px; cursor:pointer; box-shadow:0 4px 0 #1f8a3d; }
.xconfirm:active { transform:translateY(2px); box-shadow:none; }
.xmore { margin-top:10px; font-size:14px; }
.xmore summary { cursor:pointer; opacity:.8; }

#reset-default.reset-default { position:fixed !important; left:12px !important; bottom:12px !important; z-index:2147483000 !important;
  display:inline-flex !important; align-items:center; gap:7px; visibility:visible !important; opacity:1 !important; pointer-events:auto !important;
  height:42px; padding:0 16px; border-radius:999px; border:3px solid rgba(0,0,0,.45);
  background:linear-gradient(#ff6b5e,#e0301f); color:#fff; font:inherit; font-size:16px; letter-spacing:.3px; cursor:pointer;
  text-shadow:0 2px 0 rgba(0,0,0,.35); box-shadow:0 4px 0 #8f1a0f, 0 8px 18px rgba(0,0,0,.4); transition:transform .12s ease, filter .12s ease; }
#reset-default .rd-ico { font-size:20px; line-height:1; display:inline-block; transition:transform .35s ease; }
#reset-default:hover { filter:brightness(1.08); transform:translateY(-2px); }
#reset-default:hover .rd-ico { transform:rotate(-200deg); }
#reset-default:active { transform:translateY(2px); box-shadow:0 1px 0 #8f1a0f; }
@media (max-width:650px){ #reset-default.reset-default { height:38px; padding:0 12px; font-size:14px; } }
html.rs-on #reset-default { display:inline-flex !important; }

.xcolor { position:relative; opacity:1 !important; filter:none !important; }
.xcolor .xtick { position:absolute; top:-8px; right:-8px; width:26px; height:26px; border-radius:50%; background:#fff; color:#111;
  font-size:16px; line-height:26px; font-weight:700; display:none; box-shadow:0 2px 0 rgba(0,0,0,.4); }
.xcolor.on .xtick { display:block; }
.xcolor.on { outline:4px solid #fff; outline-offset:2px; transform:scale(1.05); }

.xcolor .xtick { display:none !important; }
.xcolor .xmark { display:none; position:absolute; inset:0; align-items:center; justify-content:center; font-size:52px; line-height:1; font-weight:900;
  color:#ff1a1a; -webkit-text-stroke:3px #fff; paint-order:stroke fill; text-shadow:0 3px 0 rgba(0,0,0,.45); pointer-events:none; }
.xcolor.on .xmark { display:flex; }
.xcolor.on { outline:none; transform:none; border-color:#fff; }
.xhint { font-size:13px; margin:4px 0 0; opacity:.85; text-transform:none; }
.xwarn { min-height:18px; margin:0 0 8px; font-size:13px; color:#ffb3b3; text-transform:none; }

#gameidcodetext {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    margin: 12px 0 10px;
}

.verify-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 32px;
    padding: 5px 12px;
    overflow: hidden;
    isolation: isolate;
    color: var(--btn-text);
    font: 400 16px var(--font-display);
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    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);
}

.verify-button::before {
    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,.72) 50%,
        rgba(255,255,255,0) 80%,
        transparent 100%
    );
    transform: translateX(-140%) skewX(-18deg);
}

.verify-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);
}

.verify-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;
}

.verify-button:focus-visible {
    outline: 3px solid rgba(255,255,255,.9);
    outline-offset: 3px;
}

.verify-button::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 5px;
    pointer-events: none;
    background: linear-gradient(rgba(255,255,255,.48), rgba(255,255,255,.04));
    opacity: .55;
    z-index: -1;
}

@media (max-width: 420px) {
    .verify-button {
        min-width: 82px;
        min-height: 30px;
        font-size: 15px;
        padding-inline: 10px;
    }
}

.verify-page {
    width: min(980px, calc(100% - 24px));
    margin: 0 auto;
    padding: 28px 0 48px;
}

.verify-page .verify-logo {
    display: block;
    width: min(410px, 82vw);
    height: auto;
    margin: 0 auto 18px;
    filter: saturate(1.05) brightness(1.03) drop-shadow(0 3px 0 rgba(0,60,140,.35));
}

.verify-card {
    position: relative;
    margin: 0 auto;
    padding: 24px 18px 22px;
    border-radius: 18px;
    background: var(--card);
    border: 4px solid var(--card-edge);
    box-shadow: var(--card-glow);
    overflow: hidden;
}

.verify-card h1,
.verify-card h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    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);
}

.verify-title {
    margin: 2px 0 8px;
    color: var(--title-color);
    font-size: clamp(30px, 6vw, 48px);
    line-height: 1;
}

.verify-subtitle {
    margin: 0 auto 20px;
    max-width: 760px;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.25;
    color: var(--text);
}

.verify-form {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 720px;
    margin: 0 auto;
}

.verify-input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    color: var(--select-fg);
    background: var(--select-bg);
    border: 3px solid var(--accent);
    border-radius: 8px;
    font: 400 18px var(--font-display);
    text-transform: uppercase;
    text-align: center;
    outline: none;
}

.verify-input:focus {
    box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

.verify-submit,
.verify-back {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 22px;
    color: var(--btn-text);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--btn) 55%, white),
        var(--btn) 48%,
        color-mix(in srgb, var(--btn) 88%, black)
    );
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 8px;
    box-shadow: 0 4px 0 var(--btn-shadow), 0 8px 18px rgba(0,0,0,.18);
    font: 400 20px var(--font-display);
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 1px 1px 0 var(--btn-shadow), 2px 2px 0 var(--btn-shadow);
    cursor: pointer;
}

.verify-submit:hover,
.verify-back:hover {
    transform: translateY(-1px);
}

.verify-submit:active,
.verify-back:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--btn-shadow);
}

.verify-error {
    margin: 14px auto 0;
    padding: 10px 12px;
    max-width: 720px;
    border-radius: 8px;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.18);
    color: var(--text);
    font-family: var(--font-display);
}

.verify-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto 18px;
}

.verify-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--row);
    border: 2px solid var(--row-edge);
    font: 400 16px var(--font-display);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.verify-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

.verify-table {
    width: 100%;
    min-width: 610px;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(0,0,0,.16);
    border: 2px solid var(--row-edge);
    border-radius: 12px;
    overflow: hidden;
}

.verify-table th {
    padding: 12px 10px;
    color: var(--title-color);
    background: rgba(255,255,255,.07);
    font: 400 17px var(--font-display);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
}

.verify-table td {
    padding: 10px;
    border-top: 1px solid var(--row-edge);
    vertical-align: middle;
    text-align: left;
}

.verify-table tr:hover td {
    background: rgba(255,255,255,.04);
}

.verify-number {
    width: 56px;
    color: var(--title-color);
    font: 400 20px var(--font-display);
    text-align: center !important;
}

.verify-time {
    white-space: nowrap;
    font-size: 14px;
    opacity: .9;
}

.verify-dice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.verify-die {
    margin: 2px;
}

.verify-footer {
    margin-top: 18px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 15px;
    opacity: .72;
}

.verify-back {
    margin-top: 16px;
}

@media (max-width: 650px) {
    .verify-page {
        padding-top: 14px;
    }
    .verify-card {
        padding: 18px 10px;
    }
    .verify-form {
        flex-direction: column;
    }
    .verify-submit {
        width: 100%;
    }
    .verify-table th,
    .verify-table td {
        padding: 8px 7px;
    }
    .verify-time {
        font-size: 12px;
    }
}