/* Sweden Codes Originals — integrated environments, 2026-10-21 */

/* One material palette and one continuous environment per game.
   The scene is painted behind the board and settlement together. */
#coModal[data-game] {
  --co-scene-image: url('/assets/casino-scenes-20261021/velvet-salon.webp');
  --co-scene-rgb: 162, 137, 91;
  --co-surface-rgb: 15, 23, 23;
  --co-scene-position: center 44%;
  --co-scene-opacity: .61;
  --co-scene-top: .64;
  background: rgb(var(--co-surface-rgb));
  border-color: rgba(var(--co-scene-rgb), .29);
}
#coModal[data-game="mines"] {
  --co-scene-image: url('/assets/casino-scenes-20261021/mines-cavern.webp');
  --co-scene-rgb: 94, 151, 129;
  --co-surface-rgb: 10, 23, 22;
  --co-scene-position: center 48%;
  --co-scene-opacity: .83;
  --co-scene-top: .38;
}
#coModal[data-game="towers"] {
  --co-scene-image: url('/assets/casino-scenes-20261021/towers-sanctum.webp');
  --co-scene-rgb: 160, 123, 72;
  --co-surface-rgb: 24, 22, 19;
  --co-scene-position: center 46%;
  --co-scene-opacity: .75;
  --co-scene-top: .4;
}
#coModal[data-game="limbo"] {
  --co-scene-image: url('/assets/casino-scenes-20261021/limbo-horizon.webp');
  --co-scene-rgb: 93, 139, 165;
  --co-surface-rgb: 11, 22, 32;
  --co-scene-position: center 52%;
  --co-scene-opacity: .9;
  --co-scene-top: .35;
}
#coModal[data-game="dice"] { --co-scene-rgb: 120, 156, 154; --co-surface-rgb: 13, 25, 27; }
#coModal[data-game="keno"] { --co-scene-rgb: 159, 135, 164; --co-surface-rgb: 22, 23, 30; --co-scene-opacity: .48; }
#coModal[data-game="coinflip"] { --co-scene-rgb: 172, 143, 87; --co-surface-rgb: 23, 25, 21; }
#coModal[data-game="wheel"] { --co-scene-rgb: 153, 132, 155; --co-surface-rgb: 24, 22, 29; --co-scene-opacity: .49; }
#coModal[data-game="baccarat"] { --co-scene-rgb: 124, 155, 129; --co-surface-rgb: 14, 28, 24; --co-scene-opacity: .3; --co-scene-top: .85; }

#coModal .co-shell {
  background: radial-gradient(ellipse at 70% 12%, rgba(var(--co-scene-rgb), .08), transparent 58%), rgb(var(--co-surface-rgb));
}
#coModal .co-shell > .co-header {
  background: linear-gradient(100deg, rgba(var(--co-scene-rgb), .07), transparent 60%), rgba(var(--co-surface-rgb), .98);
  border-bottom-color: rgba(var(--co-scene-rgb), .12);
  box-shadow: 0 8px 24px -18px #000b;
}
#coModal .co-brand-mark {
  background: linear-gradient(145deg, rgba(var(--co-scene-rgb), .22), rgba(var(--co-surface-rgb), .9));
  border-color: rgba(var(--co-scene-rgb), .32);
}
#coModal .co-controls {
  background: radial-gradient(ellipse at 100% 18%, rgba(var(--co-scene-rgb), .12), transparent 70%), rgba(var(--co-surface-rgb), .95);
  border-color: rgba(var(--co-scene-rgb), .11);
}
#coModal .co-input, #coModal .co-select, #coModal .co-segmented {
  background-color: rgba(3, 9, 10, .37);
  border-color: rgba(var(--co-scene-rgb), .23);
}
#coModal .co-controls .co-stat {
  background: linear-gradient(135deg, rgba(var(--co-scene-rgb), .055), transparent);
  border-color: rgba(var(--co-scene-rgb), .13);
}
#coModal .co-playfield {
  position: relative;
  isolation: isolate;
  background: rgb(var(--co-surface-rgb));
}
#coModal .co-playfield::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgb(var(--co-surface-rgb)) 0%, rgba(var(--co-surface-rgb), var(--co-scene-top)) 10%, rgba(var(--co-surface-rgb), .06) 26%, rgba(var(--co-surface-rgb), .1) 56%, rgba(var(--co-surface-rgb), .82) 86%, rgb(var(--co-surface-rgb)) 100%),
    linear-gradient(90deg, rgb(var(--co-surface-rgb)) 0%, rgba(var(--co-surface-rgb), .28) 13%, transparent 30%, transparent 72%, rgba(var(--co-surface-rgb), .35) 88%, rgb(var(--co-surface-rgb)) 100%),
    var(--co-scene-image);
  background-position: center, center, var(--co-scene-position);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--co-scene-opacity);
}
#coModal .co-stage {
  z-index: 1;
  background: radial-gradient(ellipse at 50% 50%, rgba(var(--co-scene-rgb), .035), transparent 70%);
}
/* Keep only distant room light above Baccarat's playable felt; the photograph's
   table rail must not become a second table behind the interactive one. */
#coModal[data-game="baccarat"] .co-playfield::before {
  -webkit-mask-image: linear-gradient(#000 0%, #000 10%, transparent 28%);
  mask-image: linear-gradient(#000 0%, #000 10%, transparent 28%);
}
#coModal .co-stage::before {
  border: 0;
  background: none;
  box-shadow: none;
}
#coModal .co-settlement-slot {
  position: relative;
  z-index: 1;
  border-top-color: transparent;
  background: linear-gradient(180deg, transparent, rgba(var(--co-surface-rgb), .78) 65%);
}
#coModal .co-board-topline {
  color: #b6c5c0;
  text-shadow: 0 2px 5px #000;
}
#coModal .co-board-topline small { color: #a6bbb2; }
#coModal .co-board-caption, #coModal .co-object-label {
  color: #aebfbc;
  text-shadow: 0 2px 5px #000;
}
#coModal .co-history-section, #coModal .co-history, #coModal .co-footer {
  background: rgb(var(--co-surface-rgb));
  border-color: rgba(var(--co-scene-rgb), .1);
}
#coModal .co-history-item {
  background: rgba(var(--co-scene-rgb), .055);
}
#coModal .co-mobile-dock {
  background: rgba(var(--co-surface-rgb), .97);
  border-top-color: rgba(var(--co-scene-rgb), .25);
}

/* Objects use the room's reflected light and make contact with its surface. */
#coModal .co-die { z-index: 1; }
#coModal .co-die-shadow { z-index: 0; bottom: 0; opacity: .86; background: #020705bf; filter: blur(6px); }
#coModal .co-dice .co-stat {
  border-color: rgba(var(--co-scene-rgb), .15);
  background: rgba(var(--co-surface-rgb), .45);
}
#coModal .co-scale { color: #9cafb2; text-shadow: 0 1px 3px #000; }
#coModal .co-coin-shadow { background: #050802; opacity: .82; }
#coModal .co-coinflip .co-target-line {
  background: rgba(var(--co-surface-rgb), .45);
  border-color: rgba(var(--co-scene-rgb), .18);
}
#coModal .co-draw-tray {
  background: linear-gradient(180deg, rgba(var(--co-surface-rgb), .88), rgba(var(--co-scene-rgb), .09));
  border-color: rgba(var(--co-scene-rgb), .24);
  box-shadow: inset 0 3px 8px #0005, 0 8px 22px -12px #000;
}
#coModal .co-number:not(.is-selected):not(.is-drawn):not(.is-hit) {
  background: linear-gradient(145deg, #39363e, #282731);
  border-color: #9f91aa45;
  border-bottom-color: #17141c;
  box-shadow: inset 0 1px #efe0f21a, 0 3px 0 #0d1014;
}
#coModal .co-keno-payouts > span {
  background: rgba(var(--co-surface-rgb), .55);
  border-color: rgba(var(--co-scene-rgb), .2);
}
#coModal .co-wheel-rim {
  box-shadow: inset 0 0 0 2px #cfad78, 0 0 0 1px #9c7a4a, 0 0 0 6px #25201f, 0 0 0 7px #735b42, 0 13px 0 #181516, 0 25px 25px #0008, 0 -3px 22px rgba(var(--co-scene-rgb), .09);
}
#coModal .co-wheel-base { box-shadow: 0 9px 15px #0008; }
#coModal .co-wheel-legend { color: #c0c7c3; text-shadow: 0 2px 3px #000; }

@media (max-width: 760px) {
  #coModal .co-controls > .co-field:has(.co-stake-row .co-input) { grid-column: 1 / -1; }
  #coModal .co-controls {
    background: linear-gradient(180deg, rgba(var(--co-scene-rgb), .06), transparent 70%), rgb(var(--co-surface-rgb));
    border-top-color: rgba(var(--co-scene-rgb), .1);
  }
  #coModal .co-playfield::before {
    background-position: center, center, center 45%;
  }
  #coModal[data-game="mines"] .co-playfield::before {
    background-position: center, center, 28% 45%;
  }
}

@media (forced-colors: active) {
  #coModal .co-playfield::before { display: none; }
}

/* Environment-matched game surfaces. Presentation only: preserve board geometry,
   hit areas, game states, and every controller-owned animation transform. */

/* Mines: individual jade stone covers sit in the cavern rather than in a UI tray. */
#coModal[data-game="mines"] .co-mines-frame {
  border-color: transparent;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 55%, #081b14ad 12%, #081b146b 58%, #081b1400 78%);
  box-shadow: none;
}
#coModal[data-game="mines"] .co-tile {
  border-color: #82ad9652;
  border-bottom-color: #0b2118;
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 12% 5%, #9bb59516, transparent 60%),
    linear-gradient(115deg, transparent 39%, #c4d1b707 40%, transparent 42%),
    linear-gradient(155deg, #33473b, #24382f 54%, #1a2c25);
  box-shadow: inset 0 1px #b1ccb033, inset 1px 0 #d0e6c511, 0 3px 0 #081a12, 0 7px 12px #0209056b;
  color: #90ac98;
}
#coModal[data-game="mines"] .co-tile::before {
  border-color: #b7c5ad0d;
  border-radius: 2px;
}
#coModal[data-game="mines"] .co-tile-engraving {
  text-shadow: 0 1px #bdd3b721, 0 -1px #06180ed9;
  opacity: .58;
}
#coModal[data-game="mines"] .co-tile:hover:not(:disabled) {
  border-color: #a3d7aa9c;
  background: linear-gradient(155deg, #3c5847, #294433 65%, #20372b);
  box-shadow: inset 0 1px #c1e6c645, 0 3px 0 #0a2218, 0 6px 17px #04150dc4;
}
#coModal[data-game="mines"] .co-tile.is-safe {
  border-color: #83c5a296;
  border-bottom-color: #103d2a;
  background: radial-gradient(ellipse at 50% 25%, #6fddb637, transparent 73%), linear-gradient(145deg, #1a4936, #0e2a22);
  box-shadow: inset 0 1px #c6ffe348, 0 3px 0 #071f14, 0 5px 15px #45c29414;
}
#coModal[data-game="mines"] .co-tile.is-mine {
  border-color: #a8716369;
  border-bottom-color: #2b1719;
  background: linear-gradient(145deg, #593b36, #2f2326);
  box-shadow: inset 0 1px #eab7a31f, 0 3px 0 #1d1114;
}
#coModal[data-game="mines"] .co-tile.is-hit {
  border-color: #efa695;
  background: radial-gradient(ellipse at 50% 30%, #dd7b573b, transparent 80%), #57302d;
  box-shadow: inset 0 1px #ffc9b13d, 0 3px 0 #2e1116, 0 0 23px #d7554626;
}
#coModal[data-game="mines"] .co-tile.is-unpicked {
  border-color: #5376614d;
  border-bottom-color: #11291c;
  background: linear-gradient(145deg, #1b3428, #14271f);
  box-shadow: inset 0 1px #d0e7ba0d, 0 3px 0 #0a1d13;
}

/* Towers: open architectural tiers with warm stone, a bronze ledge, and torchlight. */
#coModal[data-game="towers"] .co-tower-structure {
  border-color: #b6975e24;
  border-top-color: #dfc99542;
  border-radius: 2px;
  background:
    linear-gradient(90deg, #6f5d3c85, #594a301c 5%, transparent 9%, transparent 91%, #594a301c 95%, #6f5d3c85),
    linear-gradient(180deg, #211b149c, #17150fa8 56%, #30271a9c);
  box-shadow: inset 1px 0 #d4bc8b24, inset -1px 0 #d4bc8b1c, 0 15px 25px #0b090652;
}
#coModal[data-game="towers"] .co-tower-crown {
  color: #e1bf7b;
}
#coModal[data-game="towers"] .co-floor {
  border-bottom-color: #b49a603d;
  background: linear-gradient(0deg, #aa8c4b19, transparent 45%);
}
#coModal[data-game="towers"] .co-floor-label {
  border-color: #a38b565c;
  background: #272319;
  color: #c1af88;
}
#coModal[data-game="towers"] .co-floor-odds {
  color: #c4b493;
  text-shadow: 0 1px 3px #120e0a;
}
#coModal[data-game="towers"] .co-tower-cell {
  border-color: #b49d7359;
  border-bottom-color: #262016;
  border-radius: 2px;
  background:
    linear-gradient(110deg, transparent 47%, #f6e3b307 49%, transparent 51%),
    linear-gradient(165deg, #645d49, #433f31 56%, #353426);
  box-shadow: inset 0 1px #ead7b32b, inset 1px 0 #dbcb9a14, 0 2px 0 #18160f;
}
#coModal[data-game="towers"] .co-tower-door {
  border-color: #c5b98d5c;
  background: linear-gradient(90deg, #191c13c2, #292c20c4);
  box-shadow: inset 2px 2px 3px #0007, 0 1px #f3dfab2b;
}
#coModal[data-game="towers"] .co-floor.is-current {
  border-bottom-color: #edc575a6;
  background: linear-gradient(0deg, #e9b65a26, transparent 75%);
}
#coModal[data-game="towers"] .co-floor.is-current .co-floor-label {
  background: #d7b574;
  border-color: #f1d29e;
  color: #322817;
}
#coModal[data-game="towers"] .co-floor.is-current .co-tower-cell,
#coModal[data-game="towers"] .co-tower-cell:hover:not(:disabled) {
  border-color: #d7b775a6;
  background: linear-gradient(165deg, #8b7955, #5d5239 56%, #46402e);
  box-shadow: inset 0 1px #f7e1a94d, 0 2px 0 #231c10;
}
#coModal[data-game="towers"] .co-floor.is-passed .co-floor-label {
  background: #25422f;
  border-color: #8eb68a;
  color: #d3edc3;
}
#coModal[data-game="towers"] .co-floor .co-tower-cell.is-safe {
  background: linear-gradient(155deg, #446747, #203c2b);
  border-color: #a4c38bb3;
  border-bottom-color: #18301d;
}
#coModal[data-game="towers"] .co-floor .co-tower-cell.is-mine {
  background: linear-gradient(155deg, #70483b, #3b2825);
  border-color: #d6977a91;
  border-bottom-color: #2c1918;
}
#coModal[data-game="towers"] .co-floor .co-tower-cell.is-picked {
  box-shadow: inset 0 0 0 1px #e5edbf52, 0 2px 0 #142314;
}
#coModal[data-game="towers"] .co-tower-foundation {
  border-color: #b79a6369;
  border-bottom-color: #3b3020;
  border-radius: 1px;
  background: linear-gradient(#a58b5c, #766244 35%, #51442e);
  box-shadow: 0 6px 13px #09070396;
}

/* Limbo: the rising trace belongs to the sky, with no floating monitor surround. */
#coModal[data-game="limbo"] .co-limbo-instrument {
  border-color: transparent;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 42%, #05131e6b, #05131e1c 55%, #05131e00 78%);
  box-shadow: none;
}
#coModal[data-game="limbo"] .co-limbo-instrument::after {
  border: 0;
  border-radius: 0;
  background: none;
}
#coModal[data-game="limbo"] .co-limbo-grid {
  background-image: linear-gradient(#a9d7eb0d 1px, transparent 1px), linear-gradient(90deg, #a9d7eb08 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse, #0008 10%, #000 38%, transparent 75%);
  mask-image: radial-gradient(ellipse, #0008 10%, #000 38%, transparent 75%);
}
#coModal[data-game="limbo"] .co-limbo-axis {
  color: #9fbecb99;
  text-shadow: 0 1px 4px #06101d;
}
#coModal[data-game="limbo"] .co-limbo-shadow {
  stroke: #a5cbd647;
}
#coModal[data-game="limbo"] .co-limbo-trace {
  stroke: #b5e9da;
  filter: drop-shadow(0 0 5px #78bddaa3);
}
#coModal[data-game="limbo"] .co-limbo-score {
  text-shadow: 0 2px 10px #030c16e0;
}
#coModal[data-game="limbo"] .co-limbo-score .co-object-label {
  color: #c2d6df;
}
#coModal[data-game="limbo"] .co-limbo-value {
  text-shadow: 0 3px 18px #030d1dc4, 0 0 30px #9fc9ce19;
}
#coModal[data-game="limbo"] .co-target-line {
  border-color: #9eb9c629;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 0;
  background: linear-gradient(90deg, #0b1c2900, #0b1c299c 30%, #0b1c299c 70%, #0b1c2900);
  color: #beced5;
  text-shadow: 0 1px 4px #05101b;
}

/* Baccarat: dark cloth absorbs the room light; a warm wood rail grounds the table. */
#coModal[data-game="baccarat"] .co-stage > .co-baccarat {
  border-color: transparent;
  background:
    repeating-linear-gradient(35deg, #e5e0ba03 0, #e5e0ba03 1px, transparent 1px, transparent 3px) padding-box,
    repeating-linear-gradient(125deg, #0000000b 0, #0000000b 1px, transparent 1px, transparent 3px) padding-box,
    radial-gradient(ellipse at 50% 16%, #244e3d, #163b2d 56%, #102a23) padding-box,
    linear-gradient(135deg, #8e6b42, #463624 15%, #745536 43%, #392d21 75%, #97724b) border-box;
  box-shadow: inset 0 0 0 1px #ceba8666, inset 0 0 0 5px #0c231f94, inset 0 0 42px #04150f66, 0 0 0 1px #c4a27042, 0 5px 0 #211b13, 0 18px 27px #0207057d;
}
#coModal[data-game="baccarat"] .co-table-signature {
  color: #d7cda78c;
}
#coModal[data-game="baccarat"] .co-table-signature > span {
  color: #d7c697c7;
}
#coModal[data-game="baccarat"] .co-card-slot {
  border-color: #d1c38c42;
  background: transparent;
  box-shadow: none;
}
#coModal[data-game="baccarat"] .co-hand-payout {
  color: #ccd2b391;
}
#coModal[data-game="baccarat"] .co-baccarat-line {
  color: #cbd0b4;
}

@media (forced-colors: active) {
  #coModal[data-game="mines"] .co-mines-frame,
  #coModal[data-game="towers"] .co-tower-structure,
  #coModal[data-game="limbo"] .co-limbo-instrument,
  #coModal[data-game="baccarat"] .co-stage > .co-baccarat {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }
}