.table-container.dice-table {
	margin: 40px 0 0;
	/*text-align: center;*/
}

.table-container.dice-table .table-column {
	padding-left: 40px !important;
}

.table-container.dice-table .table-row {
	border-bottom: 0;	
}

.table-container.dice-table .table-body .table-row {
	padding: 10px 0;
}

.table-container.dice-table .table-row i {
	color: #ffc34c;
	margin-left: 3px;
}

.table-container.dice-table .table-row:nth-child(even) {
	/*border-bottom: 0;*/
	background: var(--site-color-bg-dark);
}

.table-container.dice-table .table-header {
	background: var(--site-color-bg-light);
	border: 0;
	color: #596076;
}

.table-container.dice-table .table-body {
	/*x*/
}

.table-container.dice-table .avatar {
	border-width: 2px;
	margin-right: 5px;
}
.wheel-risk-btn.active { background: #8d3bde; border-color: #8d3bde; color: #fff; }
.bcr-side.active { border-color: #8d3bde; background: rgba(141,59,222,0.18); }
.dt-page #dt_side_dragon:hover,.dt-page #dt_side_dragon.active { border-color: rgba(255,107,107,.5); background: linear-gradient(145deg,rgba(210,58,58,.24),rgba(75,20,20,.24)); }
.dt-page #dt_side_tie:hover,.dt-page #dt_side_tie.active { border-color: rgba(244,201,93,.5); background: linear-gradient(145deg,rgba(173,126,30,.22),rgba(71,51,15,.24)); }
.dt-page #dt_side_tiger:hover,.dt-page #dt_side_tiger.active { border-color: rgba(244,150,60,.5); background: linear-gradient(145deg,rgba(186,109,45,.22),rgba(74,42,18,.24)); }
.dt-page #dt_side_dragon.active .dt-side-pays { color: #ff8f8f; }
.dt-page #dt_side_tie.active .dt-side-pays { color: #f4c95d; }
.dt-page #dt_side_tiger.active .dt-side-pays { color: #ffb066; }
.dt-page .dt-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.dt-page .dt-history .table-header { background: rgba(255,255,255,.025); }
.av-speed-btn.active {
    background: rgba(242,181,60,0.16);
    border-color: rgba(242,181,60,0.5);
    color: #f2b53c;
}
.pk-risk-btn.active { background: #8d3bde; color: #fff; }

/* Compact (tablet + mobile) layout. The sidebar collapses to a drawer at
   1024px, so the responsive tables switch to the compact grid here too. */
@media (max-width: 1024px) {

    .dice-history .table-row {
        grid-template-columns: minmax(0, 1.35fr) minmax(68px, 0.75fr) minmax(54px, 0.6fr) minmax(76px, 0.85fr);
    }

    .dice-history .table-row > .table-column:nth-child(4),
    .dice-history .table-row > .table-column:nth-child(5) {
        display: none;
    }}
.hilo-page .hilo-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.hilo-page .hilo-history .table-header { background: rgba(255,255,255,.025); }
.dice-page .dice-mode-option.is-active { background:linear-gradient(135deg,#9954df,#7130b2);color:#fff;box-shadow:0 4px 10px rgba(112,44,174,.3); }
.dice-page .dice-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.dice-page .dice-history .table-header { background: rgba(255,255,255,.025); }
.limbo-page .limbo-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.limbo-page .limbo-history .table-header { background: rgba(255,255,255,.025); }
.wheel-page .wheel-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.wheel-page .wheel-history .table-header { background: rgba(255,255,255,.025); }.rps-page .rps-move:hover:before,.rps-page .rps-move.active:before{opacity:.5;transform:scale(1.4)}.rps-page #rps_move_rock.active{border-color:rgba(168,115,239,.62)!important;box-shadow:inset 0 0 22px rgba(139,77,218,.16),0 8px 20px rgba(50,24,84,.2)}.rps-page #rps_move_rock.active i{color:#b989f5}.rps-page #rps_move_paper.active{border-color:rgba(95,209,207,.55)!important;box-shadow:inset 0 0 22px rgba(63,181,179,.13),0 8px 20px rgba(22,77,76,.18)}.rps-page #rps_move_paper.active i{color:#69d9d5}.rps-page #rps_move_scissors.active{border-color:rgba(244,201,93,.55)!important;box-shadow:inset 0 0 22px rgba(214,166,56,.13),0 8px 20px rgba(85,61,18,.18)}.rps-page #rps_move_scissors.active i{color:#f4d171}
.bj-page .bj-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.bj-page .bj-history .table-header { background: rgba(255,255,255,.025); }
.bcr-page #bcr_side_player:hover,.bcr-page #bcr_side_player.active { border-color: rgba(106,148,255,.5); background: linear-gradient(145deg,rgba(50,93,202,.24),rgba(21,36,81,.24)); }
.bcr-page #bcr_side_tie:hover,.bcr-page #bcr_side_tie.active { border-color: rgba(244,201,93,.5); background: linear-gradient(145deg,rgba(173,126,30,.22),rgba(71,51,15,.24)); }
.bcr-page #bcr_side_banker:hover,.bcr-page #bcr_side_banker.active { border-color: rgba(244,92,122,.5); background: linear-gradient(145deg,rgba(186,45,78,.22),rgba(74,18,36,.24)); }
.bcr-page #bcr_side_player.active .bcr-side-pays { color: #82a6ff; }
.bcr-page #bcr_side_tie.active .bcr-side-pays { color: #f4c95d; }
.bcr-page #bcr_side_banker.active .bcr-side-pays { color: #ff7892; }
.bcr-page .bcr-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.bcr-page .bcr-history .table-header { background: rgba(255,255,255,.025); }
.rps-page .rps-move.active { border-color: rgba(40,199,160,.55); background: linear-gradient(145deg,rgba(24,164,131,.24),rgba(12,68,55,.24)); }
.rps-page .rps-move.active i { color: #28C7A0; }
.rps-page .rps-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.rps-page .rps-history .table-header { background: rgba(255,255,255,.025); }
.kn-page .kn-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.kn-page .kn-history .table-header { background: rgba(255,255,255,.025); }
.ck-page .ck-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.ck-page .ck-history .table-header { background: rgba(255,255,255,.025); }
.cf-page .cf-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.cf-page .cf-history .table-header { background: rgba(255,255,255,.025); }
.minesweeper-page .mines-grid-btn.active { background: linear-gradient(135deg,#7134c9,#9a55e5); color: #fff; box-shadow: 0 6px 13px rgba(91,40,167,.22),inset 0 1px rgba(255,255,255,.14); }
.minesweeper-page .minesweeper-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.minesweeper-page .minesweeper-history .table-header { background: rgba(255,255,255,.025); }
.tw-page .tw-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.tw-page .tw-history .table-header { background: rgba(255,255,255,.025); }
.poker-page .pk-fullscreen-toggle:hover,.poker-page .pk-fullscreen-toggle.is-active { border-color:rgba(196,145,249,.42);background:rgba(139,72,232,.2);color:#fff; }
.poker-page .pk-away-toggle.is-active { border-color:rgba(255,151,75,.42);background:linear-gradient(135deg,rgba(202,85,38,.24),rgba(236,151,52,.18));color:#ffc277;box-shadow:0 0 0 2px rgba(238,132,50,.07),0 8px 20px rgba(105,44,15,.2); }
.plinko-page .pk-risk-btn[data-color="green"].active { border-color: rgba(69,213,151,.45) !important; background: linear-gradient(145deg,rgba(36,171,111,.32),rgba(25,105,75,.18)); color: #63e1a6; box-shadow: inset 0 0 16px rgba(35,199,126,.08); }
.plinko-page .pk-risk-btn[data-color="orange"].active { border-color: rgba(239,177,75,.45) !important; background: linear-gradient(145deg,rgba(210,133,42,.32),rgba(118,69,23,.18)); color: #ffc66d; box-shadow: inset 0 0 16px rgba(232,154,46,.08); }
.plinko-page .pk-risk-btn[data-color="red"].active { border-color: rgba(237,86,96,.45) !important; background: linear-gradient(145deg,rgba(197,52,64,.34),rgba(110,28,37,.18)); color: #ff7b85; box-shadow: inset 0 0 16px rgba(226,67,79,.08); }
.plinko-page .pk-history .table-tabs { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.055); background: rgba(255,255,255,.018); }
.plinko-page .pk-history .table-tab-btn { border-radius: 8px; }
.plinko-page .pk-history .table-header { background: rgba(255,255,255,.025); }
.plinko-page .pk-history .table-body .table-row { border-color: rgba(255,255,255,.045); }
.av-page .av-speed-btn.active { border-color:rgba(168,113,255,.45);background:linear-gradient(145deg,rgba(126,61,211,.32),rgba(69,31,118,.24));color:#c99fff;box-shadow:inset 0 0 16px rgba(155,91,235,.08); }
.av-page .av-history .table-tabs { padding:8px 12px;background:rgba(5,3,10,.18); }
.av-page .av-history .table-header { background:rgba(255,255,255,.025); }
.poker-page .pk-preaction-btn.active { border-color:#b47aff;background:linear-gradient(135deg,rgba(133,75,219,.7),rgba(82,43,145,.72));color:#fff;box-shadow:0 0 14px rgba(166,105,255,.22); }
.dt-page--duel .dt-side.active::after { opacity:.75; }
#dt_side_dragon.active .dt-side-emblem { border-color:rgba(244,178,74,.38); color:#f4ba58; box-shadow:0 0 18px rgba(229,153,48,.15); }
#dt_side_tie.active .dt-side-emblem { border-color:rgba(244,201,93,.35); color:#f4d273; }
#dt_side_tiger.active .dt-side-emblem { border-color:rgba(174,112,255,.42); color:#c99dff; box-shadow:0 0 18px rgba(147,77,235,.17); }
.dt-page--duel #dt_side_dragon:hover,.dt-page--duel #dt_side_dragon.active { border-color:rgba(237,174,65,.48); background:linear-gradient(145deg,rgba(142,87,23,.3),rgba(59,32,11,.28)); }
.dt-page--duel #dt_side_tiger:hover,.dt-page--duel #dt_side_tiger.active { border-color:rgba(164,97,250,.52); background:linear-gradient(145deg,rgba(103,48,174,.3),rgba(43,20,74,.3)); }
.dt-page--duel #dt_side_dragon.active .dt-side-pays { color:#f4c45d; }
.dt-page--duel #dt_side_tiger.active .dt-side-pays { color:#c99dff; }
.cb-mini-case.is-active { animation:cb-mini-case .8s ease-in-out infinite alternate; }
.ft-field-icon .fa-money { margin-top: 8px; }
.ft-public-title-icon > .fa { display: block; width: 1em; height: 1em; margin-top: 12px; font-size: 16px; line-height: 1; text-align: center; }

/* Poker mobile table ---------------------------------------------------- */
@media (max-width:768px), (pointer:coarse) and (max-width:1199px) and (max-height:600px) and (orientation:landscape) {
	body.is-game-page .poker-page .pk-runout-toggle button.active { border-color:rgba(193,137,250,.65)!important;background:linear-gradient(145deg,rgba(144,74,211,.45),rgba(87,42,139,.46))!important;color:#fff!important;box-shadow:0 0 0 1px rgba(193,137,250,.1),0 5px 12px rgba(72,29,111,.22)!important; }}
.bnz-history .table-container { background: #2b2333; }

/* Desktop: keep every primary game surface on the left and its controls on
   the right. Mobile layouts continue to stack the surface above the controls
   and retain their route-specific sizing. */
@media (min-width:769px) {
    .co-game-layout { flex-direction:row-reverse; }}

/* Selected bet, the total that came up, and the settled outcome. `won`/`lost`
   come straight from the server's multiplier -- the paytable is never
   re-derived here. */
.sc-page .sc-bet.active { border-color: rgba(163,108,255,.62); background: linear-gradient(145deg,rgba(132,71,234,.3),rgba(43,22,76,.4)); box-shadow: 0 0 0 3px rgba(132,72,226,.12),inset 0 1px rgba(255,255,255,.06); }
.sc-page .sc-bet.active .sc-bet-name,.sc-page .sc-bet.active .sc-bet-pays { color: #fff; }
.sc-page .sc-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.sc-page .sc-history .table-header { background: rgba(255,255,255,.025); }
.er-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.er-history .table-header { background: rgba(255,255,255,.025); }

/* ── CASE OPENING ──────────────────────────────────────────────────────────
   Solo case opening. Rarity colours come from the server catalogue and are
   applied per element through the --co-rarity custom property, so the tiers
   never need a class-per-colour here. The tile geometry below is mirrored by
   CASES_TILE_STEP in app.js (116px tile + 10px gap = 126px step) -- change
   both together or the reel stops off-centre. */
.co-page { max-width: 1240px; margin: 0 auto; padding: 24px 22px 42px; box-sizing: border-box; text-align: left; }
.co-page-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.co-page-identity { display: flex; align-items: center; gap: 12px; }
.co-page-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(171,120,255,.3); border-radius: 14px; background: linear-gradient(145deg,rgba(132,71,234,.26),rgba(43,22,76,.52)); box-shadow: inset 0 1px rgba(255,255,255,.08),0 12px 25px rgba(10,5,22,.24); }
.co-page-icon img { width: 25px; height: 25px; object-fit: contain; }
.co-page-kicker { display: block; margin-bottom: 2px; color: #8d829a; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.co-page-identity h1 { margin: 0; color: #fff; font-size: 24px; line-height: 1.1; letter-spacing: -.025em; }
.co-page-actions { display: flex; align-items: center; gap: 8px; }
.co-how-button,.co-top-fair { display: inline-flex; height: 36px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.035); color: #aaa2b4; font: 700 11px/1 Arial,sans-serif; text-decoration: none; box-sizing: border-box; }
.co-how-button { cursor: pointer; }
.co-how-button:hover,.co-top-fair:hover { border-color: rgba(163,108,255,.32); background: rgba(135,74,232,.1); color: #fff; }
.co-top-fair i { color: #f4c95d; }

.co-page .co-game-layout { display: flex; min-height: 640px; margin-bottom: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 20px; background: #110d1c; box-shadow: 0 24px 65px rgba(5,2,14,.34),inset 0 1px rgba(255,255,255,.035); }
.co-page .co-controls { display: flex; flex-direction: column; width: clamp(290px,26vw,330px); min-width: 290px; gap: 18px; padding: 22px; border-right: 1px solid rgba(255,255,255,.07); background: radial-gradient(circle at 20% 0,rgba(132,70,224,.15),transparent 34%),linear-gradient(165deg,#21172f,#16101f 72%); box-sizing: border-box; }
.co-control-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.065); }
.co-control-head > div span { display: block; margin-bottom: 3px; color: #857b8e; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.co-control-head > div strong { color: #f5f1f8; font-size: 15px; }
.co-control-balance { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(244,201,93,.14); border-radius: 9px; background: rgba(244,201,93,.055); color: #d9ccaa; font-size: 11px; }
.co-control-balance i,.co-page .co-input-icon { color: #f4c95d; }
.co-segment { display: flex; flex-direction: column; gap: 6px; }
.co-page .co-label { color: #a79ead; font-size: 11px; font-weight: 700; }
.co-page .co-input-row { display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 8px 10px 8px 14px; border: 1px solid rgba(171,122,255,.24); border-radius: 12px; background: rgba(6,4,12,.43); box-sizing: border-box; transition: border-color .2s,box-shadow .2s; }
.co-page .co-input-row:focus-within { border-color: #8952e2; box-shadow: 0 0 0 3px rgba(132,72,226,.12); }
.co-page .co-input { background: transparent !important; border: none !important; flex: 1; min-width: 0; outline: none; padding: 0; color: #fff !important; font-size: 18px; font-weight: 750; }
.co-page .co-chips { display: flex; gap: 5px; flex-shrink: 0; }
.co-page .co-chip { min-width: 34px; height: 31px; padding: 0 7px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(255,255,255,.045); color: #958b9e; font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s,border-color .15s,color .15s; }
.co-page .co-chip:hover { border-color: rgba(159,104,248,.38); background: rgba(130,69,226,.14); color: #fff; }

.co-selected { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(7,4,13,.4); }
.co-selected-art { display: grid; width: 52px; height: 52px; flex-shrink: 0; place-items: center; border: 1px solid color-mix(in srgb,var(--co-rarity,#8847ff) 42%,transparent); border-radius: 11px; background: radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--co-rarity,#8847ff) 26%,transparent),rgba(6,4,12,.6) 72%); color: var(--co-rarity,#8847ff); }
.co-selected-art svg { width: 30px; height: 30px; }
.co-selected-copy { min-width: 0; }
.co-selected-copy strong { display: block; color: #fff; font-size: 14px; font-weight: 800; }
.co-selected-copy small { display: block; margin-top: 3px; color: #7f7589; font-size: 10px; line-height: 1.4; }
.co-selected-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.co-selected-stats > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 8px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.025); text-align: center; }
.co-selected-stats span { color: #7c7286; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.co-selected-stats strong { color: #f1ecf6; font-size: 13px; font-weight: 800; }

.co-fast-toggle { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025); cursor: pointer; }
.co-fast-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.co-fast-switch { position: relative; width: 38px; height: 21px; flex-shrink: 0; border-radius: 999px; background: rgba(255,255,255,.1); transition: background .2s; }
.co-fast-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #b6abc4; transition: transform .2s,background .2s; }
.co-fast-toggle input:checked + .co-fast-switch { background: rgba(133,72,226,.55); }
.co-fast-toggle input:checked + .co-fast-switch::after { transform: translateX(17px); background: #fff; }
.co-fast-copy strong { display: block; color: #eee7f5; font-size: 12px; font-weight: 800; }
.co-fast-copy strong i { color: #f4c95d; }
.co-fast-copy small { display: block; margin-top: 2px; color: #786e82; font-size: 10px; }

.co-page .co-btn-place { width: 100%; min-height: 52px; height: 52px; border: none; border-radius: 12px; background: linear-gradient(135deg,#7635db,#a254ef); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 14px 28px rgba(92,40,177,.24),inset 0 1px rgba(255,255,255,.16); transition: background .2s,transform .2s; flex-shrink: 0; }
.co-page .co-btn-place:hover:not(.disabled) { background: linear-gradient(135deg,#8241e5,#ae61f7); }
.co-page .co-btn-place.disabled { opacity: .55; cursor: not-allowed; }
.co-risk-note { display: flex; align-items: flex-start; gap: 7px; margin: auto 0 0; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.055); color: #756b7d; font-size: 10px; line-height: 1.5; }
.co-risk-note i { margin-top: 2px; color: #8e6fc1; }

.co-page .co-stage { flex: 1; position: relative; display: flex; flex-direction: column; min-width: 0; background: radial-gradient(ellipse at 50% 30%,rgba(88,47,140,.24),transparent 52%),linear-gradient(145deg,#0e131a,#08080f); }
.co-page .co-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 57px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(20,21,29,.84); flex-shrink: 0; }
.co-header-left { display: flex; align-items: center; gap: 8px; }
.co-page .co-header-icon { width: 22px; height: 22px; object-fit: contain; }
.co-page .co-header-title { font-size: 14px; font-weight: 600; color: #fff; }
.co-page .co-info-icon { display: none; }
.co-round-state { display: inline-flex; align-items: center; gap: 8px; color: #89808f; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.co-round-state i { width: 7px; height: 7px; border-radius: 50%; background: #55dba0; box-shadow: 0 0 0 4px rgba(85,219,160,.09),0 0 12px rgba(85,219,160,.4); }

.co-page .co-display-area { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 26px 24px 24px; }
.co-stage-glow { position: absolute; top: 0; left: 50%; width: min(100%,720px); height: 240px; transform: translateX(-50%); pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 0,var(--co-rarity,#8847ff),transparent 66%); }
.co-stage-glow.is-lit { animation: co-flash 1.5s ease-out both; }

.co-reel-shell { position: relative; width: 100%; max-width: 860px; }
.co-reel-marker { position: absolute; top: -8px; bottom: -8px; left: 50%; z-index: 3; width: 3px; margin-left: -1.5px; border-radius: 3px; background: linear-gradient(180deg,#ffd36b,#f4c95d 50%,transparent); box-shadow: 0 0 14px rgba(244,201,93,.75); pointer-events: none; }
.co-reel-marker::before,.co-reel-marker::after { content: ''; position: absolute; left: 50%; border: 7px solid transparent; transform: translateX(-50%); }
.co-reel-marker::before { top: -9px; border-top-color: #ffd36b; border-bottom-width: 0; }
.co-reel-marker::after { bottom: -9px; border-bottom-color: #ffd36b; border-top-width: 0; }
.co-reel-viewport { position: relative; overflow: hidden; padding: 14px 0; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: linear-gradient(180deg,rgba(10,7,18,.9),rgba(16,11,28,.75)); box-shadow: inset 0 0 60px rgba(0,0,0,.55); }
.co-reel-viewport::before,.co-reel-viewport::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 2; width: 90px; pointer-events: none; }
.co-reel-viewport::before { left: 0; background: linear-gradient(90deg,#0b0814,transparent); }
.co-reel-viewport::after { right: 0; background: linear-gradient(270deg,#0b0814,transparent); }
.co-reel-track { display: flex; will-change: transform; }

.co-item { position: relative; display: flex; width: 116px; min-width: 116px; height: 148px; margin-right: 10px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: 1px solid color-mix(in srgb,var(--co-rarity,#b0c3d9) 30%,transparent); border-radius: 12px; background: linear-gradient(180deg,color-mix(in srgb,var(--co-rarity,#b0c3d9) 16%,transparent),rgba(8,6,14,.75) 68%); box-sizing: border-box; }
.co-item::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 0 0 11px 11px; background: var(--co-rarity,#b0c3d9); }
.co-item-art { display: grid; width: 54px; height: 46px; place-items: center; color: var(--co-rarity,#b0c3d9); }
.co-item-icon { width: 46px; height: 46px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.co-item-rarity { color: var(--co-rarity,#b0c3d9); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.co-item-name { display: -webkit-box; overflow: hidden; width: 100%; color: #ddd5e6; font-size: 9px; line-height: 1.3; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.co-item-mult { color: #fff; font-size: 13px; font-weight: 900; }
.co-item.is-winner { box-shadow: 0 0 24px color-mix(in srgb,var(--co-rarity,#b0c3d9) 55%,transparent); }

.co-result { display: flex; width: 100%; max-width: 860px; min-height: 96px; align-items: center; justify-content: center; gap: 18px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(8,6,14,.5); box-sizing: border-box; }
.co-result-placeholder { color: #6f6579; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.co-result.is-win { border-color: rgba(67,216,141,.4); }
.co-result.is-lose { border-color: rgba(255,255,255,.07); }
.co-result-item { display: flex; align-items: center; gap: 13px; min-width: 0; }
.co-result-art { display: grid; width: 62px; height: 62px; flex-shrink: 0; place-items: center; border: 1px solid color-mix(in srgb,var(--co-rarity,#8847ff) 45%,transparent); border-radius: 13px; background: radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--co-rarity,#8847ff) 30%,transparent),rgba(6,4,12,.6) 72%); color: var(--co-rarity,#8847ff); }
.co-result-art svg { width: 40px; height: 40px; }
.co-result-copy { min-width: 0; }
.co-result-copy small { display: block; color: var(--co-rarity,#8847ff); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.co-result-copy strong { display: block; margin: 2px 0; color: #fff; font-size: 16px; font-weight: 800; }
.co-result-copy em { color: #6d6478; font-size: 10px; font-style: normal; }
.co-result-payout { margin-left: auto; text-align: right; }
.co-result-payout small { display: block; color: #7c7286; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.co-result-payout strong { display: block; color: #fff; font-size: 22px; font-weight: 900; }
.co-result-payout em { color: #8d829a; font-size: 11px; font-style: normal; }
.co-result.is-win .co-result-payout strong { color: #43d88d; }
.co-result-target { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(244,201,93,.4); border-radius: 9px; background: rgba(244,201,93,.1); color: #f4c95d; font-size: 10px; font-weight: 800; text-transform: uppercase; }

.co-picker,.co-contents-panel { padding: 18px 24px 22px; border-top: 1px solid rgba(255,255,255,.06); }
.co-picker-head,.co-contents-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.co-picker-head span,.co-contents-head span { display: block; margin-bottom: 3px; color: #857b8e; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.co-picker-head strong,.co-contents-head strong { color: #f5f1f8; font-size: 14px; }
.co-contents-note { display: inline-flex; align-items: center; gap: 6px; color: #6f6579 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }
.co-contents-note i { color: #8e6fc1; }
.co-theme-tabs { display: flex; gap: 5px; flex-shrink: 0; }
.co-theme-tab { height: 30px; padding: 0 12px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(255,255,255,.04); color: #958b9e; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s,border-color .15s,color .15s; }
.co-theme-tab:hover { border-color: rgba(159,104,248,.38); color: #fff; }
.co-theme-tab.is-active { border-color: rgba(159,104,248,.55); background: rgba(130,69,226,.2); color: #fff; }

.co-case-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(215px,1fr)); gap: 10px; }
.co-case-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: linear-gradient(150deg,rgba(35,24,56,.7),rgba(12,9,21,.7)); color: #fff; text-align: left; cursor: pointer; transition: border-color .18s,background .18s,transform .18s; }
.co-case-card:hover { border-color: rgba(159,104,248,.42); transform: translateY(-2px); }
.co-case-card.is-selected { border-color: rgba(244,201,93,.55); background: linear-gradient(150deg,rgba(69,44,102,.7),rgba(20,13,32,.75)); box-shadow: 0 0 0 1px rgba(244,201,93,.16),0 14px 30px rgba(5,2,14,.4); }
.co-case-badge { position: absolute; top: 9px; right: 10px; padding: 2px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; color: #8d829a; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.co-case-card.theme-dota .co-case-badge { border-color: rgba(255,107,107,.32); color: #ff8f8f; }
.co-case-art { display: grid; width: 50px; height: 50px; flex-shrink: 0; place-items: center; border: 1px solid color-mix(in srgb,var(--co-rarity,#8847ff) 40%,transparent); border-radius: 12px; background: radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--co-rarity,#8847ff) 26%,transparent),rgba(6,4,12,.6) 72%); color: var(--co-rarity,#8847ff); }
.co-case-art svg { width: 30px; height: 30px; }
.co-case-copy { min-width: 0; flex: 1; }
.co-case-copy strong { display: block; overflow: hidden; color: #fff; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.co-case-copy small { display: block; margin-top: 3px; color: #7f7589; font-size: 10px; line-height: 1.35; }
.co-case-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; margin-top: 12px; }
.co-case-meta em { color: #7c7286; font-size: 9px; font-style: normal; font-weight: 800; }
.co-case-meta b { color: #f4c95d; font-size: 11px; font-weight: 900; white-space: nowrap; }
.co-case-empty { grid-column: 1/-1; padding: 22px; border: 1px dashed rgba(255,255,255,.08); border-radius: 12px; color: #6f6579; font-size: 12px; text-align: center; }

.co-target[hidden] { display: none; }
.co-target { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(244,201,93,.3); border-radius: 12px; background: rgba(244,201,93,.06); }
.co-target-art { display: grid; width: 40px; height: 40px; flex-shrink: 0; place-items: center; border-radius: 10px; background: rgba(6,4,12,.5); color: var(--co-rarity,#8847ff); }
.co-target-art svg { width: 26px; height: 26px; }
.co-target-copy { min-width: 0; flex: 1; }
.co-target-copy small { display: block; color: #a4977f; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.co-target-copy strong { display: block; color: #fff; font-size: 13px; font-weight: 800; }
.co-target-stats { text-align: right; }
.co-target-stats b { display: block; color: #f4c95d; font-size: 14px; font-weight: 900; }
.co-target-stats em { color: #8d829a; font-size: 10px; font-style: normal; }
.co-target-clear { width: 28px; height: 28px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.04); color: #958b9e; cursor: pointer; }
.co-target-clear:hover { border-color: rgba(255,95,86,.4); color: #ff8f8f; }

.co-contents { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 8px; }
.co-content-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.06); border-left: 3px solid var(--co-rarity,#b0c3d9); border-radius: 11px; background: rgba(255,255,255,.022); color: #fff; text-align: left; cursor: pointer; transition: background .15s,border-color .15s,transform .15s; }
.co-content-item:hover { background: rgba(255,255,255,.05); transform: translateX(2px); }
.co-content-item.is-targeted { border-color: rgba(244,201,93,.5); border-left-color: var(--co-rarity,#b0c3d9); background: rgba(244,201,93,.09); }
.co-content-art { display: grid; width: 38px; height: 38px; flex-shrink: 0; place-items: center; color: var(--co-rarity,#b0c3d9); }
.co-content-art svg { width: 30px; height: 30px; }
.co-content-copy { min-width: 0; flex: 1; }
.co-content-copy small { display: block; color: var(--co-rarity,#b0c3d9); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.co-content-copy strong { display: block; overflow: hidden; margin-top: 2px; color: #e6dff0; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.co-content-stats { flex-shrink: 0; text-align: right; }
.co-content-stats b { display: block; color: #fff; font-size: 13px; font-weight: 900; }
.co-content-stats em { color: #7c7286; font-size: 10px; font-style: normal; }

.co-history-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px 6px; }
.co-history-title span { display: block; margin-bottom: 3px; color: #857b8e; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.co-history-title h2 { margin: 0; color: #fff; font-size: 17px; }
.co-history-title i { color: #8e6fc1; font-size: 18px; }
.co-history-drop { display: inline-flex; align-items: center; gap: 6px; color: var(--co-rarity,#b0c3d9); font-size: 12px; }
.co-history-drop b { color: #fff; font-weight: 800; }

@media (max-width: 1100px) {
	.co-page .co-game-layout { flex-direction: column; min-height: 0; }
	.co-page .co-controls { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
	.co-risk-note { margin-top: 4px; }}
@media (max-width: 640px) {
	.co-page { padding: 16px 12px 32px; }
	.co-page-top { flex-direction: column; align-items: flex-start; gap: 12px; }
	.co-page .co-display-area,.co-picker,.co-contents-panel { padding-right: 14px; padding-left: 14px; }
	.co-picker-head,.co-contents-head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.co-item { width: 96px; min-width: 96px; height: 132px; }
	.co-result { flex-direction: column; align-items: flex-start; gap: 12px; }
	.co-result-payout { margin-left: 0; text-align: left; }
	.co-case-list,.co-contents { grid-template-columns: 1fr; }}
.nv-field-icon .fa-users, .nv-field-icon .fa-money { margin-top: 8px; }
.nv-public-title-icon > .fa { display: block; width: 1em; height: 1em; margin-top: 12px; font-size: 16px; line-height: 1; text-align: center; }
.nv-controls.is-active .nv-controls-hint { color: rgba(255,255,255,.6); }
.rv-public-title-icon > .fa { display: block; width: 1em; height: 1em; margin-top: 12px; font-size: 16px; line-height: 1; text-align: center; }
.bd-public-title-icon > .fa { display: block; width: 1em; height: 1em; margin-top: 12px; font-size: 16px; line-height: 1; text-align: center; }
.bd-controls.is-active { border-color: rgba(255,255,255,.16); }
.bd-side-hud .bd-controls.is-active { border-color: rgba(119,204,255,.42); box-shadow: 0 0 0 1px rgba(95,201,255,.08),0 16px 38px rgba(0,0,0,.28); }