.play-single-shell {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(209, 42, 255, .68);
    border-radius: .85rem;
    color: #f8f5ff;
    background:
        radial-gradient(circle at 88% 16%, rgba(206, 20, 185, .16), transparent 26%),
        radial-gradient(circle at 18% 18%, rgba(98, 30, 211, .13), transparent 28%),
        linear-gradient(155deg, #06071d, #09061f 55%, #030818);
    box-shadow: 0 0 24px rgba(107, 24, 190, .16), inset 0 0 34px rgba(73, 23, 130, .07);
}

.play-game-header {
    position: relative;
    min-height: 130px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.55rem 1.8rem;
    border-bottom: 1px solid rgba(222, 39, 255, .46);
    background:
        linear-gradient(120deg, rgba(31, 3, 72, .96), rgba(12, 4, 43, .96) 58%, rgba(26, 4, 56, .94)),
        #100428;
}
.play-game-header::after {
    content: "";
    position: absolute;
    left: 28%;
    right: 0;
    bottom: 0;
    height: 58%;
    opacity: .34;
    pointer-events: none;
    background:
        repeating-linear-gradient(15deg, transparent 0 11px, rgba(238, 26, 169, .18) 12px, transparent 13px),
        radial-gradient(ellipse at 78% 100%, rgba(255, 23, 143, .68), transparent 40%);
    clip-path: polygon(18% 100%, 100% 0, 100% 100%);
}
.play-game-title-group { position: relative; z-index: 2; display: flex; align-items: center; gap: 1.15rem; }
.play-session-badge {
    padding: .55rem .78rem;
    border: 1px solid #ffa900;
    border-radius: .55rem;
    color: #ffbc13;
    font-weight: 800;
    background: linear-gradient(145deg, rgba(58, 25, 73, .92), rgba(18, 11, 46, .95));
    box-shadow: inset 0 0 13px rgba(255, 171, 0, .07);
}
.play-game-title { margin: .28rem 0 0; font-size: 1.65rem; font-weight: 900; letter-spacing: .035em; }
.play-game-meta { position: relative; z-index: 2; text-align: right; font-size: .93rem; }
.play-close-time { margin-bottom: .5rem; color: #d4cee2; }
.play-close-time span { margin-right: .35rem; font-size: 1.2rem; }
.play-balance-label { color: #e4deee; }
.play-balance-label strong { margin-left: .3rem; color: #18e865; font-size: 1.12rem; text-shadow: 0 0 9px rgba(24, 232, 101, .34); }
.play-roulette {
    position: absolute;
    z-index: 1;
    right: -28px;
    bottom: -62px;
    width: 190px;
    height: 110px;
    overflow: hidden;
    border: 4px solid rgba(255, 69, 161, .7);
    border-radius: 50%;
    background: repeating-conic-gradient(#e31555 0deg 9deg, #121323 9deg 18deg);
    box-shadow: 0 0 18px rgba(255, 27, 136, .72), inset 0 0 0 8px #d69217, inset 0 0 0 15px #281330;
    transform: rotate(-8deg);
}
.play-roulette span { position: absolute; left: 50%; top: 32%; width: 7px; height: 70px; border-radius: 6px; background: #ffc543; box-shadow: 0 0 8px #ff9d00; transform: rotate(22deg); }

.play-bet-panel {
    margin: 1.35rem;
    padding: 1.3rem;
    border: 1px solid rgba(169, 52, 229, .48);
    border-radius: .8rem;
    background: linear-gradient(160deg, rgba(12, 15, 45, .94), rgba(10, 7, 32, .96));
    box-shadow: inset 0 0 24px rgba(82, 35, 146, .08);
}
.play-wide-shell { max-width: 1120px; }
.play-info-note {
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    border: 1px solid rgba(244, 171, 31, .42);
    border-radius: .6rem;
    color: #d7d0e2;
    font-size: .88rem;
    line-height: 1.5;
    background: linear-gradient(145deg, rgba(78, 47, 13, .34), rgba(27, 16, 43, .72));
}
.play-info-note strong { color: #ffc53d; }
.play-entry-list { display: grid; gap: .7rem; margin-bottom: .9rem; }
.play-entry-row {
    display: grid;
    grid-template-columns: minmax(120px, .9fr) 26px minmax(135px, 1.1fr) 42px;
    align-items: center;
    gap: .55rem;
}
.play-panna-row { grid-template-columns: minmax(115px, .9fr) 86px 26px minmax(125px, 1fr) 42px; }
.play-entry-input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 .85rem;
    border: 1px solid rgba(194, 54, 226, .52);
    border-radius: .55rem;
    outline: 0;
    color: #fff;
    font: inherit;
    background: linear-gradient(145deg, rgba(25, 18, 62, .92), rgba(13, 10, 43, .94));
    transition: border-color .18s ease, box-shadow .18s ease;
}
.play-entry-input::placeholder { color: #817d98; }
.play-entry-input:focus { border-color: #ff49e1; box-shadow: 0 0 0 3px rgba(218, 46, 244, .13); }
.play-entry-input::-webkit-inner-spin-button, .play-entry-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.play-entry-equals { color: #f1a71a; text-align: center; font-size: 1.05rem; font-weight: 900; }
.play-panna-type {
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0 .55rem;
    border: 1px solid rgba(29, 154, 255, .38);
    border-radius: .5rem;
    color: #57c6ff;
    font-size: .78rem;
    font-weight: 800;
    background: rgba(18, 82, 143, .14);
}
.play-row-delete {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 69, 104, .55);
    border-radius: .55rem;
    color: #ff5e7b;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    background: rgba(111, 19, 43, .2);
}
.play-row-delete:hover { color: #fff; border-color: #ff4568; background: rgba(163, 23, 57, .38); }
.play-add-row {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-bottom: 1rem;
    padding: .5rem .9rem;
    border: 1px solid rgba(208, 57, 240, .62);
    border-radius: .55rem;
    color: #e06df0;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(145deg, rgba(41, 19, 74, .9), rgba(13, 10, 43, .94));
}
.play-add-row span { font-size: 1.15rem; }
.play-add-row:hover { color: #fff; border-color: #f050e8; }
.play-matrix-wrap { margin-bottom: 1rem; overflow: hidden; border: 1px solid rgba(177, 47, 219, .5); border-radius: .65rem; background: rgba(8, 8, 34, .62); }
.play-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; }
.play-matrix th, .play-matrix td { height: 48px; padding: 0; border-right: 1px solid rgba(145, 96, 187, .34); border-bottom: 1px solid rgba(145, 96, 187, .34); }
.play-matrix tr > *:last-child { border-right: 0; }
.play-matrix tbody tr:last-child > * { border-bottom: 0; }
.play-matrix thead th { padding: .65rem .5rem; color: #f05cff; font-size: 1rem; font-weight: 900; text-align: center; background: linear-gradient(120deg, rgba(79, 16, 105, .72), rgba(31, 12, 70, .78)); }
.play-matrix .play-matrix-digit-heading, .play-matrix .play-matrix-digit { width: 64px; }
.play-matrix-digit { color: #ffc43d; font-size: 1rem; font-weight: 900; text-align: center; background: rgba(91, 54, 4, .13); }
.play-matrix td { padding: .28rem; }
.play-matrix-input { width: 100%; height: 39px; min-width: 0; padding: 0 .65rem; border: 1px solid transparent; border-radius: .38rem; outline: 0; color: #fff; font: inherit; font-size: .86rem; text-align: center; background: rgba(18, 12, 51, .68); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.play-matrix-input::placeholder { color: #746e8d; }
.play-matrix-input:focus { border-color: #e23ef0; background: rgba(29, 18, 69, .92); box-shadow: inset 0 0 9px rgba(218, 46, 244, .12); }
.play-matrix-input::-webkit-inner-spin-button, .play-matrix-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.play-coming-panel { min-height: 330px; display: grid; place-content: center; justify-items: center; text-align: center; }
.play-coming-icon { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 1rem; border: 1px solid rgba(228, 56, 245, .58); border-radius: 1rem; color: #f26cff; font-size: 2.4rem; background: linear-gradient(145deg, rgba(105, 29, 145, .62), rgba(29, 15, 65, .9)); box-shadow: 0 0 22px rgba(219, 42, 245, .23); transform: rotate(5deg); }
.play-coming-panel h2 { margin: 0; font-size: 1.45rem; font-weight: 900; }
.play-coming-panel p { max-width: 430px; margin: .55rem 0 1.25rem; color: #aaa2ba; }
.play-number-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.25rem; padding: .2rem 0 1.35rem; }
.play-number-row { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .85rem; align-items: center; }
.play-digit {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin: 0;
    border: 1px solid #f0a000;
    border-radius: .58rem;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 900;
    background: radial-gradient(circle at 40% 30%, rgba(57, 29, 103, .88), rgba(12, 9, 42, .96));
    box-shadow: inset 0 0 10px rgba(131, 48, 203, .13);
}
.play-amount {
    width: 100%;
    height: 48px;
    padding: 0 .9rem;
    border: 1px solid rgba(218, 46, 244, .68);
    border-radius: .58rem;
    outline: 0;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    background: linear-gradient(145deg, rgba(25, 18, 62, .92), rgba(13, 10, 43, .94));
    box-shadow: inset 0 0 13px rgba(86, 34, 160, .08);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.play-amount::placeholder { color: #817d98; }
.play-amount:focus { border-color: #ff49e1; box-shadow: 0 0 0 3px rgba(218, 46, 244, .13), 0 0 13px rgba(218, 46, 244, .22); }
.play-amount::-webkit-inner-spin-button, .play-amount::-webkit-outer-spin-button { appearance: none; margin: 0; }

.play-bet-footer {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr minmax(190px, auto);
    align-items: center;
    gap: 1rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(178, 171, 194, .58);
}
.play-back-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border: 1px solid rgba(210, 46, 236, .68);
    border-radius: .65rem;
    color: #df59ef;
    text-decoration: none;
    font-size: 1.02rem;
    font-weight: 850;
    background: linear-gradient(145deg, rgba(33, 17, 65, .9), rgba(12, 10, 42, .94));
}
.play-back-btn:hover { color: #ff75ef; border-color: #f050e8; }
.play-total { text-align: center; color: #f6f1fb; font-size: 1rem; font-weight: 700; white-space: nowrap; }
.play-total strong { margin-left: .35rem; color: #ffab08; font-size: 1.45rem; font-weight: 900; }
.play-submit-btn {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: .65rem 1.15rem;
    border: 1px solid #39ef7c;
    border-radius: .72rem;
    color: #fff;
    font: inherit;
    font-size: 1.12rem;
    font-weight: 900;
    cursor: pointer;
    background: linear-gradient(145deg, #0a9a3d, #075d27 58%, #073a1c);
    box-shadow: 0 0 15px rgba(30, 229, 96, .55), inset 0 0 12px rgba(255,255,255,.12);
    transition: transform .18s ease, box-shadow .18s ease;
}
.play-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(30, 229, 96, .7); }
.play-dice { color: #85ff9f; font-size: 1.6rem; transform: rotate(-12deg); }

body.light-theme .play-single-shell { color-scheme: dark; }

@media (max-width: 680px) {
    .play-single-shell { margin: -1.25rem; border-left: 0; border-right: 0; border-radius: 0; }
    .play-game-header { min-height: 126px; padding: 1.25rem 1rem; }
    .play-game-title-group { gap: .75rem; }
    .play-session-badge { padding: .48rem .58rem; font-size: .8rem; }
    .play-game-title { font-size: 1.3rem; }
    .play-game-meta { font-size: .8rem; }
    .play-balance-label strong { display: block; margin-top: .25rem; }
    .play-bet-panel { margin: .85rem; padding: .85rem; }
    .play-entry-row { grid-template-columns: minmax(90px, .9fr) 20px minmax(105px, 1.1fr) 38px; gap: .4rem; }
    .play-panna-row { grid-template-columns: minmax(92px, 1fr) 65px 18px minmax(90px, 1fr) 38px; }
    .play-entry-input { height: 43px; padding-inline: .6rem; font-size: .86rem; }
    .play-panna-type { height: 40px; padding-inline: .3rem; font-size: .66rem; }
    .play-row-delete { width: 38px; height: 40px; }
    .play-matrix .play-matrix-digit-heading, .play-matrix .play-matrix-digit { width: 42px; }
    .play-matrix th, .play-matrix td { height: 44px; }
    .play-matrix td { padding: .2rem; }
    .play-matrix-input { height: 36px; padding-inline: .3rem; font-size: .78rem; }
    .play-matrix-input::placeholder { font-size: .7rem; }
    .play-number-grid { gap: .8rem 1rem; }
    .play-number-row { grid-template-columns: 44px minmax(0, 1fr); gap: .55rem; }
    .play-digit { width: 44px; height: 46px; }
    .play-amount { height: 46px; padding-inline: .7rem; }
    .play-bet-footer { grid-template-columns: auto 1fr; gap: .8rem; }
    .play-submit-btn { grid-column: 1 / -1; grid-row: 2; }
    .play-total { text-align: right; }
}

@media (max-width: 410px) {
    .play-game-header { display: block; min-height: 145px; }
    .play-game-meta { margin-top: .8rem; text-align: left; display: flex; gap: 1rem; align-items: center; }
    .play-balance-label strong { display: inline; }
    .play-number-grid { gap: .65rem .65rem; }
    .play-number-row { grid-template-columns: 39px minmax(0, 1fr); gap: .42rem; }
    .play-digit { width: 39px; height: 43px; font-size: 1.2rem; }
    .play-amount { height: 43px; min-width: 0; font-size: .9rem; padding-inline: .55rem; }
    .play-panna-row { grid-template-columns: minmax(0, 1fr) 56px 16px minmax(0, 1fr) 34px; gap: .28rem; }
    .play-entry-row:not(.play-panna-row) { grid-template-columns: minmax(0, .9fr) 16px minmax(0, 1.1fr) 34px; gap: .3rem; }
    .play-row-delete { width: 34px; }
    .play-total strong { font-size: 1.18rem; }
}

/* Game type hub ----------------------------------------------------------- */
.play-hub-shell {
    max-width: 920px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(181, 42, 255, .62);
    border-radius: .9rem;
    color: #f8f5ff;
    background: linear-gradient(160deg, #05071c, #07051c 58%, #020715);
    box-shadow: 0 0 26px rgba(104, 31, 198, .16), inset 0 0 38px rgba(70, 26, 128, .06);
}
.play-hub-hero {
    position: relative;
    min-height: 155px;
    overflow: hidden;
    padding: 1.8rem;
    border-bottom: 1px solid rgba(197, 47, 255, .35);
    background:
        radial-gradient(circle at 70% 40%, rgba(168, 18, 135, .17), transparent 30%),
        linear-gradient(120deg, rgba(28, 4, 69, .97), rgba(10, 5, 39, .96) 60%, rgba(24, 4, 53, .95));
}
.play-hub-copy { position: relative; z-index: 3; max-width: 510px; }
.play-hub-title-line { display: flex; align-items: center; gap: .75rem; }
.play-hub-title-line h1 { margin: 0; font-size: 1.6rem; font-weight: 900; }
.play-hub-title-line span {
    padding: .35rem .65rem;
    border: 1px solid rgba(192, 61, 239, .7);
    border-radius: .45rem;
    color: #f0d8fa;
    font-weight: 750;
    background: rgba(79, 25, 113, .48);
}
.play-hub-copy p { margin: .8rem 0 0; color: #c5bdd1; font-size: 1rem; line-height: 1.65; }
.play-hub-copy p strong, .play-hub-copy p b { color: #ffc20b; }
.play-markets-back {
    position: absolute;
    z-index: 4;
    top: 1.4rem;
    right: 1.4rem;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border: 1px solid rgba(199, 57, 241, .62);
    border-radius: .55rem;
    color: #f6effb;
    text-decoration: none;
    font-weight: 700;
    background: linear-gradient(145deg, rgba(29, 14, 61, .92), rgba(11, 9, 39, .95));
}
.play-markets-back:hover { color: #fff; border-color: #ed54ff; box-shadow: 0 0 12px rgba(214, 58, 255, .22); }
.play-hub-confetti {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .55;
    pointer-events: none;
    background:
        radial-gradient(circle at 48% 20%, #ff3535 0 3px, transparent 4px),
        radial-gradient(circle at 58% 55%, #1c9cff 0 4px, transparent 5px),
        radial-gradient(circle at 67% 18%, #eb17a4 0 3px, transparent 4px),
        radial-gradient(circle at 83% 38%, #ffb000 0 3px, transparent 4px),
        radial-gradient(circle at 91% 17%, #8a44ff 0 4px, transparent 5px);
}
.play-hub-roulette {
    position: absolute;
    z-index: 2;
    right: -35px;
    bottom: -95px;
    width: 260px;
    height: 165px;
    overflow: hidden;
    border: 4px solid rgba(255, 58, 157, .82);
    border-radius: 50%;
    background: repeating-conic-gradient(#e31455 0deg 8deg, #111523 8deg 16deg);
    box-shadow: 0 0 21px rgba(255, 26, 136, .72), inset 0 0 0 10px #d59514, inset 0 0 0 20px #27122f;
    transform: rotate(-8deg);
}
.play-hub-roulette span { position: absolute; left: 51%; top: 24%; width: 9px; height: 100px; border-radius: 6px; background: #ffc740; box-shadow: 0 0 10px #ff9b00; transform: rotate(20deg); }

.play-picker { padding: 1.25rem 1.5rem 1.6rem; }
.play-picker-title { margin: .1rem 0 1rem; display: flex; align-items: center; justify-content: center; gap: .85rem; }
.play-picker-title::before, .play-picker-title::after {
    content: "";
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c638ee);
    box-shadow: 0 0 7px rgba(210, 51, 245, .55);
}
.play-picker-title::after { transform: scaleX(-1); }
.play-picker-title h2 { margin: 0; color: #e86af1; font-size: .95rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.play-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.play-type-card {
    --type-color: #8c43ff;
    --type-rgb: 140, 67, 255;
    min-height: 86px;
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 32px;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(var(--type-rgb), .75);
    border-radius: .7rem;
    color: #f8f5ff;
    text-decoration: none;
    background:
        radial-gradient(circle at 20% 50%, rgba(var(--type-rgb), .19), transparent 30%),
        linear-gradient(145deg, rgba(8, 17, 47, .96), rgba(12, 7, 32, .98));
    box-shadow: inset 0 0 20px rgba(var(--type-rgb), .06), 0 0 12px rgba(var(--type-rgb), .08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.play-type-card:hover { color: #fff; transform: translateY(-2px); border-color: var(--type-color); box-shadow: 0 6px 18px rgba(var(--type-rgb), .18), inset 0 0 22px rgba(var(--type-rgb), .1); }
.play-type-card.blue { --type-color: #148eff; --type-rgb: 20, 142, 255; }
.play-type-card.green { --type-color: #22d85d; --type-rgb: 34, 216, 93; }
.play-type-card.red { --type-color: #ff315b; --type-rgb: 255, 49, 91; }
.play-type-card.pink { --type-color: #f32797; --type-rgb: 243, 39, 151; }
.play-type-card.amber, .play-type-card.gold { --type-color: #f0a000; --type-rgb: 240, 160, 0; }
.play-type-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: .7rem;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -.1em;
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.28), rgba(var(--type-rgb), .8) 38%, rgba(var(--type-rgb), .25) 78%);
    box-shadow: 0 0 16px rgba(var(--type-rgb), .48), inset 0 0 10px rgba(255,255,255,.17);
}
.play-type-card.gold .play-type-icon { color: #ffd22e; font-size: 2.35rem; background: transparent; box-shadow: none; text-shadow: 0 0 13px rgba(255, 184, 0, .55); }
.play-type-name { overflow: hidden; text-overflow: ellipsis; font-size: 1.03rem; font-weight: 850; white-space: nowrap; }
.play-type-arrow { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(var(--type-rgb), .25); border-radius: 50%; color: var(--type-color); font-size: 1.6rem; background: rgba(var(--type-rgb), .09); }

body.light-theme .play-hub-shell { color-scheme: dark; }

@media (max-width: 680px) {
    .play-hub-shell { margin: -1.25rem; border-left: 0; border-right: 0; border-radius: 0; }
    .play-hub-hero { min-height: 155px; padding: 1.35rem 1rem; }
    .play-hub-title-line h1 { font-size: 1.4rem; }
    .play-hub-copy p { max-width: 65%; font-size: .88rem; line-height: 1.55; }
    .play-markets-back { top: 1.15rem; right: 1rem; min-height: 38px; padding: .4rem .7rem; font-size: .78rem; }
    .play-hub-roulette { right: -50px; width: 220px; height: 145px; }
    .play-picker { padding: 1rem .85rem 1.35rem; }
    .play-picker-title::before, .play-picker-title::after { width: 70px; }
    .play-game-grid { gap: .65rem; }
    .play-type-card { min-height: 82px; grid-template-columns: 50px minmax(0, 1fr) 28px; gap: .6rem; padding: .65rem .7rem; }
    .play-type-icon { width: 48px; height: 48px; font-size: 1.3rem; }
    .play-type-name { font-size: .94rem; }
    .play-type-arrow { width: 27px; height: 27px; }
}

@media (max-width: 430px) {
    .play-hub-title-line { gap: .45rem; }
    .play-hub-title-line h1 { font-size: 1.22rem; }
    .play-hub-title-line span { padding: .28rem .48rem; font-size: .78rem; }
    .play-markets-back { top: 4rem; }
    .play-hub-copy p { max-width: 68%; margin-top: .65rem; }
    .play-picker-title::before, .play-picker-title::after { width: 38px; }
    .play-game-grid { gap: .55rem; }
    .play-type-card { min-height: 76px; grid-template-columns: 43px minmax(0, 1fr) 24px; gap: .45rem; padding: .55rem; }
    .play-type-icon { width: 42px; height: 44px; font-size: 1.12rem; }
    .play-type-name { font-size: .86rem; }
    .play-type-arrow { width: 24px; height: 24px; font-size: 1.25rem; }
}
.history-shell {
    --history-pink: #e52cff;
    --history-purple: #8b39ff;
    --history-line: rgba(207, 46, 255, .38);
    max-width: 1120px;
    min-height: calc(100vh - 150px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--history-line);
    border-radius: 1rem;
    color: #f8f4ff;
    background:
        radial-gradient(circle at 92% 12%, rgba(193, 17, 169, .18), transparent 24%),
        radial-gradient(circle at 9% 28%, rgba(87, 34, 186, .14), transparent 28%),
        linear-gradient(155deg, #080620, #03071c 58%, #05051a);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .42), inset 0 0 45px rgba(92, 21, 153, .05);
}
.history-hero { position: relative; min-height: 126px; display: flex; align-items: center; gap: 1rem; padding: 1.45rem 1.8rem; overflow: hidden; border-bottom: 1px solid rgba(141, 47, 204, .2); }
.history-hero::after { content: ""; position: absolute; inset: 0 0 0 55%; opacity: .2; background: repeating-conic-gradient(from 10deg at 80% 100%, rgba(245, 32, 181, .65) 0 4deg, transparent 4deg 14deg); }
.history-hero-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 1rem; font-size: 2.5rem; transform: rotate(-7deg); background: linear-gradient(145deg, #a63cff, #5f1ab2); box-shadow: 0 0 22px rgba(211, 43, 255, .38); }
.history-hero h1 { position: relative; z-index: 1; margin: 0; font-size: 1.8rem; font-weight: 900; }
.history-hero p { position: relative; z-index: 1; margin: .25rem 0 0; color: #aaa1bf; }
.history-hero-art { position: absolute; z-index: 1; right: 2rem; bottom: -2.6rem; width: 112px; height: 112px; display: grid; place-items: center; border: 9px double rgba(182, 51, 224, .38); border-radius: 50%; color: rgba(235, 54, 209, .42); font-size: 2.5rem; transform: rotate(-18deg); }
.history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.35rem; }
.history-filter-groups { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem 1rem; min-width: 0; }
.history-filter-set { min-width: 0; }
.history-filter-label { display: block; margin: 0 0 .3rem .2rem; color: #8f87a3; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.history-tabs { display: flex; align-items: stretch; overflow: hidden; border: 1px solid rgba(155, 58, 218, .42); border-radius: .55rem; background: rgba(4, 5, 25, .7); }
.history-tab { min-width: 92px; padding: .68rem .9rem; border: 0; border-right: 1px solid rgba(155, 58, 218, .25); color: #a9a2bb; font-weight: 700; background: transparent; transition: .18s ease; }
.history-tab:last-child { border-right: 0; }
.history-tab:hover, .history-tab.active { color: #fff; background: linear-gradient(180deg, rgba(170, 29, 192, .32), rgba(96, 11, 129, .24)); box-shadow: inset 0 -2px 0 var(--history-pink); }
.history-dot { display: inline-block; width: 7px; height: 7px; margin-right: .45rem; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.history-dot.open { color: #54c9ff; background: currentColor; }.history-dot.won { color: #35e777; background: currentColor; }.history-dot.lost { color: #ff5576; background: currentColor; }
.history-filter-toggle, .history-clear { padding: .65rem 1rem; border: 1px solid rgba(230, 35, 239, .55); border-radius: .5rem; color: #d98bf2; font-weight: 700; background: rgba(74, 4, 83, .28); }
.history-filter-toggle.active, .history-filter-toggle:hover, .history-clear:hover { color: #fff; box-shadow: 0 0 13px rgba(213, 39, 247, .18); }
.history-filters { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; align-items: end; gap: .8rem; margin: 0 1.35rem 1rem; padding: 1rem; border: 1px solid rgba(151, 47, 214, .3); border-radius: .65rem; background: rgba(21, 8, 48, .76); }
.history-filters label span { display: block; margin-bottom: .35rem; color: #aaa1bb; font-size: .76rem; font-weight: 700; text-transform: uppercase; }
.history-filters input, .history-filters select { width: 100%; min-height: 40px; padding: .45rem .65rem; border: 1px solid rgba(165, 67, 219, .35); border-radius: .42rem; outline: none; color: #f6f0ff; color-scheme: dark; background: #0b0926; }
.history-filters input:focus, .history-filters select:focus { border-color: var(--history-pink); box-shadow: 0 0 0 3px rgba(229, 44, 255, .1); }
.history-table-card { margin: 0 1.35rem 1.25rem; overflow: hidden; border: 1px solid var(--history-line); border-radius: .65rem; background: rgba(3, 5, 26, .82); }
.history-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.history-table { width: 100%; min-width: 940px; border-collapse: collapse; color: #e9e4f1; font-size: .88rem; }
.history-table th, .history-table td { padding: .85rem .7rem; border-bottom: 1px solid rgba(159, 49, 212, .22); vertical-align: middle; white-space: nowrap; }
.history-table thead { background: linear-gradient(180deg, rgba(92, 12, 112, .85), rgba(53, 10, 75, .84)); }
.history-table thead th { color: #ded3e8; font-size: .76rem; font-weight: 700; }
.history-table tbody tr { transition: background .18s ease; }.history-table tbody tr:hover { background: rgba(97, 31, 145, .12); }
.history-table tbody tr[hidden] { display: none; }
.history-table tfoot { background: linear-gradient(90deg, rgba(27, 7, 59, .88), rgba(8, 7, 36, .9)); }
.history-table tfoot th { border-bottom: 0; }
.history-id { color: #d4cfe0; }.history-date strong { display: block; }.history-date span { display: block; margin-top: .15rem; color: #77718d; font-size: .72rem; }
.history-bet { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }.history-result { color: #aaa2bb; font-weight: 800; letter-spacing: .04em; }
.history-session, .history-status { display: inline-flex; padding: .28rem .42rem; border: 1px solid; border-radius: .35rem; font-size: .72rem; font-weight: 700; }
.history-session.open { color: #27aaff; border-color: rgba(27, 144, 255, .44); background: rgba(16, 94, 173, .14); }.history-session.close { color: #d68aff; border-color: rgba(205, 71, 255, .4); background: rgba(135, 29, 175, .14); }
.history-status.pending { color: #ffbb23; border-color: rgba(255, 160, 0, .42); background: rgba(125, 72, 0, .18); }.history-status.won { color: #36ee7b; border-color: rgba(54, 238, 123, .4); background: rgba(21, 124, 63, .17); }.history-status.lost { color: #ff617b; border-color: rgba(255, 74, 105, .4); background: rgba(132, 25, 46, .18); }.history-status.even { color: #56d7f7; border-color: rgba(86, 215, 247, .4); background: rgba(25, 102, 126, .18); }.history-status.deleted { color: #918a9f; border-color: rgba(145, 138, 159, .35); background: rgba(90, 83, 101, .16); }
.history-row.is-deleted { opacity: .5; }.history-money { font-weight: 800; text-align: right; }.history-money.total { color: #ffd313; }.history-money.positive { color: #31e983; }.history-money.negative { color: #ff617b; }
.history-view { display: inline-flex; align-items: center; gap: .3rem; padding: .38rem .55rem; border: 1px solid rgba(179, 37, 230, .4); border-radius: .38rem; color: #d455ff; text-decoration: none; background: rgba(91, 14, 132, .2); }.history-view:hover { color: #fff; border-color: #df3cff; }
.history-total-label { display: block; width: max-content; margin-left: auto; padding: .5rem 1.1rem; border: 1px solid rgba(162, 40, 215, .3); border-radius: .45rem; color: #d685f5; background: rgba(87, 15, 125, .26); }
.history-empty { min-height: 330px; display: grid; place-content: center; justify-items: center; padding: 2rem; text-align: center; }.history-empty[hidden] { display: none; }.history-empty-icon { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 1rem; border-radius: 1.2rem; color: #bf73dc; font-size: 3rem; background: linear-gradient(145deg, rgba(98, 42, 139, .62), rgba(29, 16, 61, .8)); transform: rotate(5deg); box-shadow: 0 15px 30px rgba(0, 0, 0, .3); }.history-empty h2 { margin: 0; font-size: 1.15rem; }.history-empty p, .history-more { color: #817990; }.history-more { margin: 3.5rem 0 7rem; text-align: center; font-size: .82rem; }
@media (max-width: 760px) {
    .history-shell { min-height: calc(100vh - 142px); border-radius: .85rem; }
    .history-hero { min-height: 108px; padding: 1.2rem; }.history-hero-icon { width: 58px; height: 58px; font-size: 2rem; }.history-hero h1 { font-size: 1.45rem; }.history-hero p { font-size: .82rem; }.history-hero-art { right: -.8rem; opacity: .7; }
    .history-toolbar { align-items: stretch; padding: .9rem; }.history-filter-groups { width: 100%; }.history-filter-set { flex: 1 1 auto; }.history-tabs { max-width: 100%; overflow-x: auto; }.history-tab { min-width: 76px; padding: .62rem .65rem; font-size: .77rem; }.history-filter-toggle { padding: .6rem .72rem; font-size: .78rem; }
    .history-filters { grid-template-columns: 1fr 1fr; margin: 0 .9rem .9rem; }.history-filters label:first-child { grid-column: 1 / -1; }.history-clear { min-height: 40px; }
    .history-table-card { margin: 0 .75rem 1rem; }.history-table { font-size: .8rem; }.history-table th, .history-table td { padding: .72rem .6rem !important; }
}
@media (max-width: 470px) {
    .history-toolbar { flex-direction: column; }.history-filter-groups { flex-direction: column; align-items: stretch; }.history-filter-set { width: 100%; }.history-tabs { width: 100%; }.history-tab { flex: 1; }.history-filter-toggle { align-self: flex-end; }.history-filters { grid-template-columns: 1fr; }.history-filters label:first-child { grid-column: auto; }
}

/* CP and FM expansion pages ---------------------------------------------- */
.play-expansion-list { gap: .85rem; }
.play-expansion-row {
    padding: .8rem;
    border: 1px solid rgba(159, 61, 211, .34);
    border-radius: .65rem;
    background: linear-gradient(145deg, rgba(23, 14, 57, .78), rgba(8, 8, 31, .82));
    transition: border-color .18s ease, box-shadow .18s ease;
}
.play-expansion-row.is-valid { border-color: rgba(40, 215, 125, .36); }
.play-expansion-row.is-invalid { border-color: rgba(255, 82, 112, .58); box-shadow: inset 0 0 15px rgba(150, 25, 51, .08); }
.play-expansion-fields {
    display: grid;
    grid-template-columns: 48px minmax(130px, .9fr) 24px minmax(130px, 1.1fr) 42px;
    align-items: center;
    gap: .55rem;
}
.play-expansion-code {
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(240, 168, 29, .52);
    border-radius: .5rem;
    color: #ffc43d;
    font-size: .8rem;
    font-weight: 900;
    background: rgba(112, 68, 4, .18);
}
.play-expansion-preview {
    display: block;
    margin: .55rem 0 0 3.2rem;
    overflow: hidden;
    color: #8d86a2;
    font-size: .74rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.play-expansion-row.is-valid .play-expansion-preview { color: #6fd9aa; }
.play-expansion-row.is-invalid .play-expansion-preview { color: #ff718a; }

@media (max-width: 560px) {
    .play-expansion-row { padding: .65rem; }
    .play-expansion-fields { grid-template-columns: 39px minmax(0, .9fr) 16px minmax(0, 1.1fr) 36px; gap: .32rem; }
    .play-expansion-code { height: 40px; font-size: .7rem; }
    .play-expansion-fields .play-row-delete { width: 36px; }
    .play-expansion-preview { margin-left: 2.75rem; font-size: .68rem; }
}

@media (max-width: 380px) {
    .play-expansion-row { padding: .55rem; }
    .play-expansion-fields { grid-template-columns: 35px minmax(0, .85fr) 13px minmax(0, 1fr) 32px; gap: .22rem; }
    .play-expansion-fields .play-entry-input { padding-inline: .4rem; font-size: .78rem; }
    .play-expansion-fields .play-row-delete { width: 32px; }
    .play-expansion-preview { margin-left: 2.45rem; }
}

/* SP / DP / TP active expansion preview --------------------------------- */
.play-spdptp-preview {
    margin: 0 0 1rem;
    overflow: hidden;
    border: 1px solid rgba(170, 56, 222, .44);
    border-radius: .65rem;
    background: rgba(8, 8, 34, .68);
}
.play-spdptp-preview h3 {
    margin: 0;
    padding: .7rem .85rem;
    border-bottom: 1px solid rgba(154, 55, 202, .3);
    color: #f3d7ff;
    font-size: .88rem;
    font-weight: 850;
    background: linear-gradient(120deg, rgba(79, 16, 105, .62), rgba(31, 12, 70, .68));
}
.play-spdptp-preview-row { padding: .72rem .85rem; }
.play-spdptp-preview-row + .play-spdptp-preview-row { border-top: 1px solid rgba(145, 62, 187, .24); }
.play-spdptp-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; }
.play-spdptp-preview-heading strong { color: #ffc43d; font-size: .82rem; }
.play-spdptp-preview-heading span { color: #49e58c; font-size: .78rem; font-weight: 800; text-align: right; }
.play-spdptp-pannas { color: #aaa2ba; font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }

@media (max-width: 480px) {
    .play-spdptp-preview-heading { align-items: flex-start; flex-direction: column; gap: .2rem; }
    .play-spdptp-preview-heading span { text-align: left; }
}

/* Formula-based play pages: Chat, Motor and Other ------------------------ */
.play-game-sections { display: grid; gap: 1rem; margin-bottom: 1rem; }
.play-game-section {
    overflow: hidden;
    padding: .85rem;
    border: 1px solid rgba(177, 47, 219, .42);
    border-radius: .7rem;
    background: linear-gradient(145deg, rgba(24, 13, 57, .76), rgba(7, 9, 33, .82));
}
.play-section-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .75rem; }
.play-section-head > div { display: flex; align-items: baseline; gap: .6rem; }
.play-section-head strong { color: #f16eff; font-size: 1rem; }
.play-section-head div span { color: #8f879e; font-size: .76rem; }
.play-section-head .play-add-row { margin: 0; min-height: 36px; padding: .35rem .7rem; font-size: .8rem; }
.play-game-section .play-entry-list { margin-bottom: 0; }
.play-formula-row {
    display: grid;
    grid-template-columns: 74px minmax(110px, .9fr) 24px minmax(125px, 1fr) 42px;
    align-items: center;
    gap: .5rem;
}
.play-formula-row .play-row-preview { grid-column: 2 / -1; margin: -.22rem 0 .1rem; color: #8e88a0; font-size: .72rem; line-height: 1.45; overflow-wrap: anywhere; }
.play-formula-row .play-row-preview.has-expansion { color: #67dca4; }
.play-row-code { color: #ffc43d; text-align: center; font-size: .82rem; font-weight: 900; }
.play-chat-formula-row { grid-template-columns: minmax(72px, .55fr) 58px minmax(72px, .55fr) 22px minmax(115px, 1fr) 42px; }
.play-chat-formula-row .play-row-preview { grid-column: 1 / -1; }
.play-common-matrix { min-width: 590px; }
.play-active-expansions { margin: 0 0 1rem; overflow: hidden; border: 1px solid rgba(170, 56, 222, .44); border-radius: .65rem; background: rgba(8, 8, 34, .68); }
.play-active-expansions h3 { margin: 0; padding: .7rem .85rem; border-bottom: 1px solid rgba(154, 55, 202, .3); color: #f3d7ff; font-size: .88rem; font-weight: 850; background: linear-gradient(120deg, rgba(79, 16, 105, .62), rgba(31, 12, 70, .68)); }
.play-active-expansion-row { padding: .72rem .85rem; }
.play-active-expansion-row + .play-active-expansion-row { border-top: 1px solid rgba(145, 62, 187, .24); }
.play-active-expansion-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; }
.play-active-expansion-heading strong { color: #ffc43d; font-size: .82rem; }
.play-active-expansion-heading span { color: #49e58c; font-size: .78rem; font-weight: 800; text-align: right; }
.play-active-expansion-numbers { color: #aaa2ba; font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }

@media (max-width: 680px) {
    .play-game-section { padding: .7rem; }
    .play-formula-row { grid-template-columns: 58px minmax(80px, .9fr) 18px minmax(90px, 1fr) 38px; gap: .35rem; }
    .play-chat-formula-row { grid-template-columns: minmax(58px, .55fr) 44px minmax(58px, .55fr) 16px minmax(86px, 1fr) 38px; gap: .28rem; }
    .play-formula-row .play-entry-input { padding-inline: .45rem; font-size: .78rem; }
    .play-row-code { font-size: .7rem; }
    .play-common-matrix { min-width: 520px; }
    .play-matrix-wrap:has(.play-common-matrix) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 410px) {
    .play-section-head div span { display: none; }
    .play-formula-row { grid-template-columns: 49px minmax(0, .9fr) 15px minmax(0, 1fr) 34px; gap: .25rem; }
    .play-chat-formula-row { grid-template-columns: minmax(48px, .55fr) 38px minmax(48px, .55fr) 13px minmax(68px, 1fr) 34px; }
    .play-active-expansion-heading { align-items: flex-start; flex-direction: column; gap: .2rem; }
    .play-active-expansion-heading span { text-align: left; }
}

/* Half and Full Sangam ---------------------------------------------------- */
.play-sangam-list { gap: .8rem; }
.play-sangam-row {
    padding: .75rem;
    border: 1px solid rgba(159, 61, 211, .34);
    border-radius: .65rem;
    background: linear-gradient(145deg, rgba(23, 14, 57, .78), rgba(8, 8, 31, .82));
    transition: border-color .18s ease, box-shadow .18s ease;
}
.play-sangam-row.is-valid { border-color: rgba(40, 215, 125, .42); }
.play-sangam-row.is-invalid { border-color: rgba(255, 82, 112, .58); box-shadow: inset 0 0 15px rgba(150, 25, 51, .08); }
.play-sangam-fields {
    display: grid;
    grid-template-columns: minmax(190px, 1.2fr) minmax(105px, .75fr) 38px minmax(105px, .75fr) 20px minmax(115px, .8fr) 42px;
    align-items: end;
    gap: .5rem;
}
.play-sangam-control { min-width: 0; }
.play-sangam-control > span,
.play-sangam-static > span {
    display: block;
    margin: 0 0 .3rem .1rem;
    color: #a99fb8;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.play-sangam-control select { color-scheme: dark; font-size: .82rem; }
.play-sangam-static strong {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: .55rem .75rem;
    border: 1px solid rgba(194, 54, 226, .35);
    border-radius: .55rem;
    color: #d9cfe5;
    font-size: .78rem;
    line-height: 1.25;
    background: rgba(20, 14, 52, .7);
}
.play-sangam-code {
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(240, 168, 29, .52);
    border-radius: .5rem;
    color: #ffc43d;
    font-size: .78rem;
    font-weight: 900;
    background: rgba(112, 68, 4, .18);
}
.play-sangam-equals { height: 46px; display: grid; place-items: center; }
.play-sangam-fields .play-row-delete { margin-bottom: 2px; }
.play-sangam-preview {
    display: block;
    margin: .55rem 0 0;
    color: #8e88a0;
    font-size: .73rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.play-sangam-row.is-valid .play-sangam-preview { color: #67dca4; }
.play-sangam-row.is-invalid .play-sangam-preview { color: #ff718a; }

@media (max-width: 820px) {
    .play-sangam-fields {
        grid-template-columns: minmax(170px, 1fr) minmax(95px, .75fr) 34px minmax(95px, .75fr) 16px minmax(100px, .75fr) 38px;
        gap: .35rem;
    }
    .play-sangam-fields .play-entry-input { padding-inline: .5rem; font-size: .78rem; }
    .play-sangam-fields .play-row-delete { width: 38px; }
}

@media (max-width: 680px) {
    .play-sangam-row { padding: .65rem; }
    .play-sangam-fields { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 38px; gap: .45rem; }
    .play-sangam-direction { grid-column: 1 / -1; }
    .play-sangam-open { grid-column: 1; }
    .play-sangam-code { grid-column: 2; }
    .play-sangam-close { grid-column: 3; }
    .play-sangam-fields .play-row-delete { grid-column: 4; grid-row: 2; }
    .play-sangam-equals { display: none; }
    .play-sangam-amount { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
    .play-sangam-row { padding: .55rem; }
    .play-sangam-fields { grid-template-columns: minmax(0, 1fr) 31px minmax(0, 1fr) 34px; gap: .3rem; }
    .play-sangam-code { font-size: .68rem; }
    .play-sangam-fields .play-row-delete { width: 34px; }
}