:root {
    --gold: #ffbd19;
    --gold2: #ffea00;
    --gold-deep: #9a7104;
    --gold-mid: #c9a227;
    --gold-dark: #b8860b;
    --gold-btn: #e0b42a;
    --gold-rgb: 255, 189, 25;
    --page: #0a0804;
    --header: #17130b;
    --header-rgb: 23, 19, 11;
    --panel: #352503;
    --ink: #fff;
    --ink-on-gold: #1a1408;
    --muted: #9a8a62;
    --dim: rgba(23, 19, 11, .53);
    --site-bg: url("/img/bg.jpg");
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.site {
    font-family: "Kumbh Sans", system-ui, sans-serif;
    background: var(--page);
    color: var(--ink);
    overflow-x: hidden;
}
.site-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--page) var(--site-bg) center / cover no-repeat;
}
.site-dim {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--dim);
}
#snow-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
    mix-blend-mode: screen;
}
.box {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ===== HEADER (fixed, 2 baris seperti referensi) ===== */
.mh {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    background: linear-gradient(180deg, var(--header) 0%, rgba(23, 19, 11, .88) 100%);
    border-bottom: 2px solid var(--gold2);
    animation: cardGlow 5.6s ease-in-out infinite;
}
.mh-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--gold-deep);
}
.mh-brand {
    display: block;
    width: 208px;
    height: 48px;
    flex-shrink: 0;
}
.mh-brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}
.mh-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #4a330f, #171109);
    border: 1px solid var(--gold2);
    border-radius: 8px;
    padding: 8px 12px;
    animation: playGlow 5.6s ease-in-out infinite;
}
.mh-tools a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 15px;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.mh-tools a:hover { color: var(--gold); }
.mh-tools svg { width: 16px; height: 16px; fill: currentColor; }
.mh-tools i {
    width: 1px;
    align-self: stretch;
    background: var(--gold);
    min-height: 16px;
}
.mh-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
}
.mh-burger {
    display: none;
    border: 1px solid var(--gold-mid);
    background: linear-gradient(180deg, var(--gold-btn), var(--gold-dark));
    color: var(--ink-on-gold);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: playGlow 5.6s ease-in-out infinite;
}
.mh-nav {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 16px;
    min-width: 0;
}
.mh-nav a,
.mh-drop summary {
    position: relative;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: .03em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.mh-nav a:hover,
.mh-drop summary:hover,
.mh-nav a.is-on { color: var(--gold); }
.mh-home { width: 15px; height: 15px; fill: currentColor; }
.mh-tag {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, -2px);
    background: linear-gradient(180deg, var(--gold-btn), var(--gold-dark));
    color: var(--ink-on-gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--gold2);
    animation: pulse 1.4s ease-in-out infinite, playGlow 5.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
.mh-drop { position: relative; }
.mh-drop summary { list-style: none; }
.mh-drop summary::-webkit-details-marker { display: none; }
.mh-drop summary::after { content: " ▾"; font-size: 10px; }
.mh-drop ul {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    min-width: 180px;
    background: linear-gradient(180deg, #4a330f, #171109);
    border: 1px solid var(--gold2);
    border-radius: 8px;
    z-index: 40;
    box-shadow: 0 0 18px rgba(var(--gold-rgb),.45);
}
.mh-drop ul a {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    color: #fff;
}
.mh-drop ul a:hover { color: var(--gold); background: rgba(var(--gold-rgb),.08); }
.mh-auth { display: flex; gap: 10px; margin-left: auto; flex-shrink: 0; z-index: 2; }
.mh-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 6px 18px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink-on-gold);
    border: 1px solid var(--gold-mid);
    background-image: linear-gradient(90deg, var(--gold-dark), var(--gold-btn), var(--gold-mid), var(--gold-dark));
    background-size: 220% 100%;
    animation: goldMove 4.8s linear infinite, playGlow 5.6s ease-in-out infinite;
}
.mh-pill svg { width: 16px; height: 16px; fill: currentColor; }
.mh-pill:hover { opacity: .92; color: var(--ink-on-gold); }
@keyframes goldMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* ===== BODY CONTENT ===== */
.stage {
    padding-top: 176px;
    padding-bottom: 16px;
    background: none;
}
.glass {
    background: rgba(28, 18, 6, .58);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    border-radius: 24px;
    border: 1px solid rgba(var(--gold-rgb), .22);
    padding: 18px 20px 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.mq {
    display: flex;
    overflow: hidden;
    border: 2px solid var(--gold2);
    background: linear-gradient(90deg, rgba(74,51,15,.72), rgba(var(--gold-rgb),.28), rgba(23,17,9,.72));
    border-radius: 999px;
    animation: cardGlow 5.6s ease-in-out infinite;
}
.mq-ico {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #4a330f, #171109);
    color: var(--gold2);
}
.mq-ico svg { width: 16px; height: 16px; }
.mq-track { flex: 1; overflow: hidden; min-width: 0; }
.mq-track p {
    margin: 0;
    padding: 8px 0 8px 16px;
    white-space: nowrap;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .06em;
    animation: mqRun 16s linear infinite;
}
@keyframes mqRun {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Banner: 2 kolom kiri + 1 kolom kanan */
.bn {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-top: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gold2);
    background: #000;
}
.bn-main {
    position: relative;
    height: 384px;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid var(--gold2);
    animation: cardGlow 5.6s ease-in-out infinite;
}
.bn-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
    display: block;
}
.bn-slide.is-on { opacity: 1; z-index: 1; }
.bn-side {
    display: block;
    height: 384px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--gold2);
    animation: cardGlow 5.6s ease-in-out 1.8s infinite;
}
.bn-slide img,
.bn-side img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Shortcut: 2 kolom kiri (tombol) + 1 kolom kanan (jackpot penuh) */
.quick {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-top: 16px;
    align-items: stretch;
}
.quick-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.acts {
    display: grid;
    gap: 16px;
}
.acts-3 { grid-template-columns: repeat(3, 1fr); }
.acts-4 { grid-template-columns: repeat(4, 1fr); }
.acts a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 8px;
    color: var(--ink-on-gold);
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    border: 1px solid var(--gold-mid);
    background-image: linear-gradient(90deg, var(--gold-dark), var(--gold-btn), var(--gold-mid), var(--gold-dark));
    background-size: 220% 100%;
    animation: goldMove 4.8s linear infinite, playGlow 5.6s ease-in-out infinite;
    transition: opacity .15s ease, filter .15s ease;
}
.acts a svg { width: 16px; height: 16px; fill: currentColor; }
.acts a:hover { opacity: .92; color: var(--ink-on-gold); filter: brightness(1.06); }
.acts a.is-on,
.acts a.is-glow {
    background-image: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-btn), var(--gold-deep));
    background-size: 220% 100%;
    box-shadow: 0 0 0 1px var(--gold2), 0 0 16px rgba(var(--gold-rgb),.45);
}
.jp {
    display: flex;
    align-items: stretch;
    min-height: 0;
    border: 2px solid var(--gold2);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #4a330f 0%, #171109 55%, #0c0905 100%);
    animation: cardGlow 5.6s ease-in-out infinite;
}
@keyframes jpBlink {
    0%, 100% { border-color: var(--gold); }
    50% { border-color: #ffe27a; }
}
.jp-desk { min-height: 100%; }
.jp-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    background: linear-gradient(180deg, #4a330f, #171109);
    color: var(--gold2);
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255,234,0,.7));
}
.jp-ico svg { width: 28px; height: 28px; }
.jp-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    text-align: center;
}
.jp-copy b { font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.jp-copy span { color: #7dffb3; font-size: 15px; }
.jp-copy em { font-style: normal; color: #7dffb3; }
.jp-mobile { display: none; min-height: 72px; }

.find {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px auto;
    max-width: 420px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .38);
    border: 1px solid rgba(var(--gold-rgb), .28);
    color: #c9b37a;
}
.find svg { width: 16px; height: 16px; flex-shrink: 0; }
.find input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 15px;
}
.find input::placeholder { color: var(--muted); }

.section { padding: 0 0 64px; }
.provs {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px 6px;
    margin-bottom: 18px;
}
.prov {
    height: 56px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(232, 217, 168, .62);
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .1em;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease, color .15s ease;
}
.prov span { opacity: .85; }
.prov svg { width: 26px; height: 26px; }
.prov img {
    max-width: 86%;
    max-height: 40px;
    object-fit: contain;
    filter: none;
}
.prov:has(img) span { display: none; }
.prov:hover { color: #fff; background: rgba(var(--gold-rgb),.08); }
.prov.is-on {
    background: linear-gradient(180deg, var(--gold-btn), #8a6a08);
    color: var(--ink-on-gold);
    border: 2px solid var(--gold2);
    animation: cardGlow 5.6s ease-in-out infinite;
}
.prov.is-hot svg { color: #ff4d00; filter: drop-shadow(0 0 6px #ff7a1a); }
.prov.is-hot.is-on svg { color: #ff5a00; }

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.g-count {
    margin: 0 0 12px;
    color: #c9b37a;
    font-size: 13px;
    letter-spacing: .04em;
}
.g-more {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .04em;
    padding: 18px 0 8px;
}
@property --spin {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.gcard {
    content-visibility: auto;
    contain-intrinsic-size: 0 210px;
    background: linear-gradient(180deg, #4a330f 0%, #171109 55%, #0c0905 100%);
    border: 2px solid var(--gold2);
    border-radius: 14px;
    padding: 10px;
    min-width: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: cardGlow 5.6s ease-in-out infinite;
    transition: transform .45s ease, box-shadow .8s ease;
}
.gcard:nth-child(3n) { animation-delay: 1.4s; }
.gcard:nth-child(3n+1) { animation-delay: 2.8s; }
.gcard:nth-child(3n+2) { animation-delay: 4.2s; }
.gcard-ring {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    pointer-events: none;
    z-index: 5;
    background: conic-gradient(from var(--spin), #6b5200 0%, var(--gold2) 10%, #fffce8 16%, var(--gold) 28%, #6b5200 42%, #ffe27a 58%, #fff 64%, var(--gold) 78%, #6b5200 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: borderSpin 8s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255,234,0,.55));
}
.gcard:nth-child(3n) .gcard-ring { animation-delay: -2.6s; }
.gcard:nth-child(3n+1) .gcard-ring { animation-delay: -5.2s; }
.gcard-spark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}
.gcard-spark::before,
.gcard-spark::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fffce8;
    box-shadow: 0 0 8px 3px rgba(255,234,0,.9);
    animation: sparkDrift 6.5s ease-in-out infinite;
}
.gcard-spark::before { top: 10px; left: 14px; }
.gcard-spark::after { bottom: 14px; right: 18px; animation-delay: 3.2s; }
.gcard::before {
    content: "";
    position: absolute;
    top: -70%;
    left: -80%;
    width: 48%;
    height: 240%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,220,.04) 28%, rgba(255,248,180,.7) 48%, rgba(255,234,0,.5) 58%, transparent 100%);
    transform: rotate(18deg);
    pointer-events: none;
    z-index: 3;
    animation: cardShine 6.8s ease-in-out infinite;
}
.gcard:nth-child(3n)::before { animation-delay: 1.8s; }
.gcard:nth-child(3n+1)::before { animation-delay: 3.6s; }
.gcard:nth-child(3n+2)::before { animation-delay: 5.2s; }
.gcard::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255,248,180,.45), inset 0 0 22px rgba(var(--gold-rgb),.18);
    animation: rimPulse 5.6s ease-in-out infinite;
}
.gcard:hover {
    transform: translateY(-4px) scale(1.012);
    z-index: 2;
}
@keyframes cardGlow {
    0%, 100% {
        border-color: #c49212;
        box-shadow:
            0 0 0 1px rgba(255,234,0,.18),
            0 0 12px rgba(var(--gold-rgb),.28),
            0 0 28px rgba(var(--gold-rgb),.12);
    }
    50% {
        border-color: #fff6b0;
        box-shadow:
            0 0 0 1px var(--gold2),
            0 0 18px var(--gold2),
            0 0 42px rgba(var(--gold-rgb),.7),
            0 0 72px rgba(var(--gold-rgb),.32);
    }
}
@keyframes rimPulse {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes cardShine {
    0% { left: -80%; opacity: 0; }
    12% { opacity: .85; }
    38% { left: 125%; opacity: .7; }
    46%, 100% { left: 140%; opacity: 0; }
}
@keyframes borderSpin {
    to { --spin: 360deg; }
}
@keyframes sparkDrift {
    0%, 100% { opacity: .15; transform: scale(.6); }
    40% { opacity: 1; transform: scale(1.15); }
    70% { opacity: .25; transform: scale(.7); }
}
.gcard-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
.g-thumb {
    width: 140px;
    height: 140px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    overflow: hidden;
    background: #120e06;
    border: 2px solid var(--gold2);
    box-shadow: 0 0 12px rgba(var(--gold-rgb),.55), 0 0 24px rgba(255,234,0,.28);
    animation: thumbGlow 5.6s ease-in-out infinite;
}
.gcard:nth-child(3n) .g-thumb { animation-delay: 1.4s; }
.gcard:nth-child(3n+1) .g-thumb { animation-delay: 2.8s; }
.gcard:nth-child(3n+2) .g-thumb { animation-delay: 4.2s; }
@keyframes thumbGlow {
    0%, 100% {
        border-color: #c49212;
        box-shadow: 0 0 8px rgba(var(--gold-rgb),.28);
    }
    50% {
        border-color: #fff6b0;
        box-shadow: 0 0 16px var(--gold2), 0 0 32px rgba(var(--gold-rgb),.55);
    }
}
.g-thumb span {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-shadow: 0 1px 6px #000;
    padding: 10px;
}
.g-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
    transition: transform .4s ease;
}
.gcard:hover .g-thumb img { transform: scale(1.08); }
.g-pola { flex: 1; min-width: 0; padding-top: 2px; }
.g-pola-h {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}
.g-pola-h svg { width: 16px; height: 16px; }
.pola-ico {
    display: inline-block;
    animation: firePop 2.4s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes firePop {
    0%, 100% { transform: scale(1) rotate(-6deg); filter: drop-shadow(0 0 2px #ff7a1a); }
    50% { transform: scale(1.18) rotate(6deg); filter: drop-shadow(0 0 8px var(--gold)); }
}
.g-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #e8d9a8;
    line-height: 1.55;
}
.g-row i { font-style: normal; font-weight: 800; margin-left: 1px; display: inline-block; }
.g-turbo {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.g-turbo i { font-size: 14px; letter-spacing: -1px; }
.g-row i.ok {
    color: #4ade80;
    animation: okPulse 2.6s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(74,222,128,.8);
}
.g-row i.no { color: #ef4444; }
@keyframes okPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: .75; }
}
.gcard-bot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    position: relative;
    z-index: 1;
}
.g-play {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--ink-on-gold);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid var(--gold-mid);
    background-image: linear-gradient(90deg, var(--gold-dark), var(--gold-btn), var(--gold-mid), var(--gold-dark));
    background-size: 220% 100%;
    text-shadow: 0 1px 0 rgba(255,255,255,.28);
    animation: goldMove 4.8s linear infinite, playGlow 4.2s ease-in-out infinite;
}
@keyframes playGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--gold-rgb),.35); }
    50% { box-shadow: 0 0 16px rgba(var(--gold-rgb),.55), 0 0 28px rgba(var(--gold-rgb),.28); }
}
.g-play:hover { opacity: .92; color: var(--ink-on-gold); filter: brightness(1.06); }
.g-play svg { width: 14px; height: 14px; fill: currentColor; }
.g-bar {
    flex: 1;
    height: 22px;
    border-radius: 4px;
    background: #0e0c08;
    border: 1px solid rgba(var(--gold-rgb),.35);
    overflow: hidden;
    position: relative;
}
.g-bar span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 42px;
    padding-right: 8px;
    background-size: 20px 20px;
    animation: stripeMove .4s linear infinite, barFill 1.4s ease both;
}
.g-bar.is-high span {
    background: repeating-linear-gradient(-45deg, #4ade80, #4ade80 7px, #16a34a 7px, #16a34a 14px);
    background-size: 20px 20px;
}
.g-bar.is-mid span {
    background: repeating-linear-gradient(-45deg, #f5c542, #f5c542 7px, #d4a017 7px, #d4a017 14px);
    background-size: 20px 20px;
}
.g-bar.is-red span,
.g-bar.is-low span {
    background: repeating-linear-gradient(-45deg, #f87171, #f87171 7px, #dc2626 7px, #dc2626 14px);
    background-size: 20px 20px;
}
@keyframes stripeMove {
    0% { background-position: 0 0; }
    100% { background-position: 20px 0; }
}
@keyframes barFill {
    from { transform: scaleX(.15); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}
.g-bar em {
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.foot {
    padding: 16px 0 28px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    letter-spacing: .06em;
    background: linear-gradient(180deg, transparent, var(--header));
}
.foot strong { color: var(--gold2); font-weight: 600; }

.tg-search {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 16px;
}
.tg-find {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .38);
    border: 1px solid rgba(var(--gold-rgb), .28);
    color: #c9b37a;
}
.tg-find svg { width: 16px; height: 16px; flex-shrink: 0; }
.tg-find input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 15px;
}
.tg-find input::placeholder { color: var(--muted); }
.tg-btn {
    flex-shrink: 0;
    border: 1px solid var(--gold-mid);
    border-radius: 10px;
    padding: 0 22px;
    font: inherit;
    font-weight: 800;
    color: var(--ink-on-gold);
    cursor: pointer;
    background-image: linear-gradient(180deg, var(--gold-btn), var(--gold-dark));
}
.tg-btn:hover { filter: brightness(1.06); }
.tg-wrap {
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(var(--gold-rgb), .28);
}
.tg-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.tg-table th,
.tg-table td {
    text-align: center;
    padding: 14px 10px;
    font-size: 15px;
}
.tg-table thead th {
    background: linear-gradient(180deg, var(--gold-btn), #c49212);
    color: var(--ink-on-gold);
    font-weight: 800;
    letter-spacing: .04em;
}
.tg-table tbody tr {
    background: rgba(18, 12, 4, .55);
    border-top: 1px solid rgba(var(--gold-rgb), .12);
}
.tg-table tbody tr:nth-child(even) {
    background: rgba(42, 30, 8, .45);
}
.tg-no { width: 72px; color: #e8d9a8; }
.tg-name b {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
}
.tg-name small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--muted);
    text-transform: uppercase;
}
.tg-close {
    color: var(--gold);
    font-weight: 800;
}
.tg-result {
    color: #4ade80;
    font-weight: 800;
}
.tg-empty td { color: var(--muted); padding: 28px 10px; }

.rs-bar { flex-wrap: wrap; }
.rs-dates {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.rs-nav {
    width: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 22px;
    line-height: 1;
}
.rs-nav.is-off {
    opacity: .35;
    pointer-events: none;
    filter: grayscale(.4);
}
.rs-date { min-width: 168px; flex: 0 0 auto; }
.rs-date input[type="date"] {
    color-scheme: dark;
    min-width: 0;
}
.rs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.rs-card {
    position: relative;
    overflow: hidden;
    padding: 16px 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(var(--gold-rgb), .32);
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(var(--gold-rgb), .22), transparent 55%),
        linear-gradient(180deg, rgba(53, 37, 8, .92), rgba(18, 12, 4, .92));
    box-shadow: 0 0 0 1px rgba(255, 234, 0, .08), 0 10px 24px rgba(0,0,0,.28);
}
.rs-card.is-out { animation: cardGlow 5.6s ease-in-out infinite; }
.rs-card header { text-align: center; margin-bottom: 12px; }
.rs-card header b {
    display: block;
    font-size: 14px;
    letter-spacing: .04em;
    color: #fff;
}
.rs-card header small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: .06em;
    color: #c9b57a;
    text-transform: uppercase;
}
.rs-balls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.rs-balls span {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink-on-gold);
    background-image: linear-gradient(180deg, #ffe56a, var(--gold-btn) 42%, var(--gold-dark));
    box-shadow: 0 0 14px rgba(var(--gold-rgb), .45), inset 0 1px 0 rgba(255,255,255,.55);
}
.rs-card.is-wait .rs-balls span {
    color: var(--muted);
    background-image: linear-gradient(180deg, #3a3018, #241c0c);
    box-shadow: none;
}
.rs-card dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0;
}
.rs-card dl div {
    text-align: center;
    padding: 6px 4px 7px;
    border-radius: 8px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(var(--gold-rgb), .16);
}
.rs-card dt {
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--muted);
}
.rs-card dd {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--gold2);
    letter-spacing: .08em;
}
.rs-wait, .rs-empty {
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .04em;
}
.rs-empty { padding: 28px 10px; grid-column: 1 / -1; }
.wa {
    position: fixed;
    right: 0;
    bottom: 48px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 14px;
    color: var(--ink-on-gold);
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .04em;
    border: 2px solid var(--gold2);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background-image: linear-gradient(90deg, var(--gold-dark), var(--gold-btn), var(--gold-mid), var(--gold-dark));
    background-size: 220% 100%;
    animation: goldMove 4.8s linear infinite, cardGlow 5.6s ease-in-out infinite;
}
.wa:hover { opacity: .92; color: var(--ink-on-gold); }
.wa svg { width: 22px; height: 22px; }

@media (max-width: 1280px) {
    .mh-nav { gap: 12px; }
    .mh-nav a, .mh-drop summary { font-size: 13px; }
    .mh-brand { width: 168px; }
    .provs { grid-template-columns: repeat(8, 1fr); }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .rs-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .mh-top { flex-direction: column-reverse; align-items: stretch; padding: 12px 0; }
    .mh-tools { width: 100%; justify-content: center; }
    .mh-tools a { font-size: 0; gap: 0; }
    .mh-brand { width: 100%; height: 48px; }
    .mh-brand img { object-position: center; }
    .mh-burger { display: inline-flex; }
    .mh-bar { flex-wrap: wrap; padding: 12px 0; }
    .mh-nav {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        flex-basis: 100%;
        gap: 12px;
        padding-top: 8px;
    }
    .mh.is-open .mh-nav { display: flex; }
    .mh-tag { position: static; transform: none; margin-left: 6px; }
    .stage { padding-top: 210px; }
    .mq { border-radius: 8px; }
    .bn { grid-template-columns: 1fr; }
    .bn-side { display: none; }
    .bn-main { height: 192px; }
    .quick { grid-template-columns: 1fr; }
    .jp-desk { display: none; }
    .jp-mobile { display: flex; }
    .acts { gap: 8px; }
    .acts-4 { grid-template-columns: repeat(2, 1fr); }
    .acts a { font-size: 13px; padding: 8px 4px; }
    .find { max-width: none; }
    .provs { grid-template-columns: repeat(5, 1fr); }
    .grid { grid-template-columns: 1fr; }
    .g-thumb { width: 112px; height: 112px; }
    .tg-table th, .tg-table td { font-size: 13px; padding: 12px 6px; }
    .tg-no { width: 44px; }
    .tg-btn { padding: 0 14px; }
    .rs-grid { grid-template-columns: repeat(2, 1fr); }
    .rs-bar { flex-direction: column; }
    .rs-dates { width: 100%; }
    .rs-date { flex: 1; }
    .wa { bottom: 24px; font-size: 15px; padding: 6px 12px 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .mh, .mh-tools, .mh-burger, .mh-tag, .mh-pill, .mq, .bn-main, .bn-side, .acts a, .jp, .prov.is-on, .gcard, .gcard::before, .gcard::after, .gcard-ring, .gcard-spark::before, .gcard-spark::after, .g-thumb, .g-play, .g-bar span, .g-row i.ok, .pola-ico, .wa, .rs-card {
        animation: none !important;
    }
    .gcard:hover { transform: none; }
}