/* Prism game miniatures (the drawn previews on game cards and the arena
   screen): every board set out in white and the accent's own steps. The
   wheel is a disc in the accent's steps with a white rim, the scratch
   coat frosted glass in the accent, the 2048 ramp climbing from white
   through the accent to ink. */
@import url("../../../../components/games/game-showcase.css");

.gsx-skin-editorial {
    --gsx-stage: var(--psm-well);
    --gsx-rim: #ffffff;
    --gsx-rim-w: 6px;
    --gsx-segs: conic-gradient(from 0deg,
        var(--theme-700) 0deg 45deg, var(--theme-200) 45deg 90deg, var(--theme-500) 90deg 135deg, #ffffff 135deg 180deg,
        var(--theme-800) 180deg 225deg, var(--theme-300) 225deg 270deg, var(--theme-600) 270deg 315deg, var(--theme-100) 315deg 360deg);
    --gsx-dividers: repeating-conic-gradient(from 0deg, transparent 0 44.4deg, rgba(255, 255, 255, .9) 44.4deg 45deg);
    --gsx-hub-bg: radial-gradient(circle at 38% 32%, #ffffff, #e3e5ea);
    --gsx-hub-fg: #11131c;
    --gsx-hub-border: 2px solid #ffffff;
    --gsx-pointer: #11131c;
    --gsx-halo: 0 0 0 1px rgba(16, 18, 28, .08), 0 14px 30px -14px rgba(var(--theme-700-rgb), .5);
    --gsx-ticket-bg: #ffffff;
    --gsx-ticket-border: 1px solid #e3e5ea;
    --gsx-title: #11131c;
    --gsx-title-font: var(--font-display);
    --gsx-cell-bg: #ffffff;
    --gsx-cell-border: 1px solid #e3e5ea;
    --gsx-foil: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 40%), linear-gradient(160deg, var(--theme-200), var(--theme-400) 55%, var(--theme-300));
    --gsx-foil-text: var(--theme-900);
    --gx2-board-bg: var(--game-surface);
    --gx2-board-border: 0;
    --gx2-cell-bg: color-mix(in srgb, #ffffff 60%, var(--game-surface));
    --gx2-num-font: var(--font-num);
    --gxc-target-bg: radial-gradient(circle, #ffffff 0 30%, var(--theme-700) 31% 40%, #ffffff 41% 52%, var(--theme-400) 53% 60%, transparent 61%);
    --gxc-ring: var(--theme-700);
    --gxc-pointer: #11131c;
    --gxc-halo: 0 0 0 2px rgba(var(--theme-700-rgb), .2), 0 12px 24px -12px rgba(16, 18, 28, .35);
    --gxc-timer: var(--psm-gauge);
    --gxc-timer-track: var(--rule-soft);
    --gxm-back-bg: linear-gradient(135deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 50%), var(--theme-700);
    --gxm-back-fg: #ffffff;
    --gxm-up-bg: var(--paper-2);
    --gxm-border: 1px solid var(--rule);
    --gxm-matched: var(--psm-t3);
    --gxo-cell-bg: var(--paper-2);
    --gxo-dot: var(--theme-700);
    --gxo-dot-odd: var(--theme-300);
    --gxo-odd-ring: 2px solid var(--theme-700);
    --gxw-grid-bg: var(--game-surface);
    --gxw-cell-bg: var(--game-surface-2);
    --gxw-letter: #11131c;
    --gxw-letter-font: var(--font-num);
    --gxw-found-bg: var(--theme-700);
    --gxw-found-fg: #ffffff;
    --gxw-border: 0;
    --gxh-board-bg: var(--game-surface);
    --gxh-board-border: 0;
    --gsx-icon-fg: var(--psm-accent);
}
html.dark .gsx-skin-editorial {
    --gsx-rim: #1f2331;
    --gsx-hub-bg: radial-gradient(circle at 38% 32%, #2a2f40, #161925); --gsx-hub-fg: #eef0f6; --gsx-hub-border: 2px solid #1f2331;
    --gsx-dividers: repeating-conic-gradient(from 0deg, transparent 0 44.4deg, rgba(13, 15, 23, .9) 44.4deg 45deg);
    --gsx-segs: conic-gradient(from 0deg,
        var(--theme-400) 0deg 45deg, var(--theme-800) 45deg 90deg, var(--theme-300) 90deg 135deg, #272b3a 135deg 180deg,
        var(--theme-500) 180deg 225deg, var(--theme-700) 225deg 270deg, var(--theme-200) 270deg 315deg, #1f2331 315deg 360deg);
    --gsx-title: #eef0f6; --gxw-letter: #eef0f6; --gxc-pointer: #eef0f6; --gsx-pointer: #eef0f6;
    --gsx-ticket-bg: #161925; --gsx-ticket-border: 1px solid #272b3a; --gsx-cell-bg: #1f2331; --gsx-cell-border: 1px solid #272b3a;
    --gx2-cell-bg: color-mix(in srgb, #000000 15%, var(--game-surface));
    --gxw-found-bg: var(--theme-400); --gxw-found-fg: #0d0f17;
    --gxm-back-bg: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 50%), var(--theme-400); --gxm-back-fg: #0d0f17;
    --gxo-dot: var(--theme-400); --gxo-dot-odd: var(--theme-700); --gxo-odd-ring: 2px solid var(--theme-400);
    --gxc-target-bg: radial-gradient(circle, #1f2331 0 30%, var(--theme-400) 31% 40%, #1f2331 41% 52%, var(--theme-700) 53% 60%, transparent 61%); --gxc-ring: var(--theme-400);
    --gsx-foil: linear-gradient(135deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 40%), linear-gradient(160deg, var(--theme-700), var(--theme-500) 55%, var(--theme-600));
    --gsx-foil-text: #ffffff;
}
.gsx-skin-editorial .gsx-tile.lv1 { background: var(--game-tile-1); color: var(--game-ink); }
.gsx-skin-editorial .gsx-tile.lv2 { background: var(--game-tile-3); color: var(--game-ink); }
/* step 400 is a pale tile for most colours: ink reads on it, white doesn't */
.gsx-skin-editorial .gsx-tile.lv3 { background: var(--game-tile-5); color: #11131c; }
.gsx-skin-editorial .gsx-tile.lv4 { background: var(--game-tile-7); color: #ffffff; }
.gsx-skin-editorial .gsx-tile.lv5 { background: var(--game-tile-8); color: #ffffff; }
html.dark .gsx-skin-editorial .gsx-tile.lv3, html.dark .gsx-skin-editorial .gsx-tile:is(.lv4, .lv5) { color: #0d0f17; }
.gsx-skin-editorial .gsx-hexcell.hc1 { background: var(--theme-700); }
.gsx-skin-editorial .gsx-hexcell.hc2 { background: var(--theme-400); }
.gsx-skin-editorial .gsx-hexcell.hc3 { background: var(--theme-200); }
.gsx-skin-editorial .gsx-hexcell.hc4 { background: #11131c; }
html.dark .gsx-skin-editorial .gsx-hexcell.hc1 { background: var(--theme-400); }
html.dark .gsx-skin-editorial .gsx-hexcell.hc2 { background: var(--theme-600); }
html.dark .gsx-skin-editorial .gsx-hexcell.hc3 { background: var(--theme-800); }
html.dark .gsx-skin-editorial .gsx-hexcell.hc4 { background: #eef0f6; }
/* A kind with no picture of its own shows its icon in the accent */
.gsx-skin-editorial.gsx-iconstage i { color: var(--psm-accent); filter: drop-shadow(0 8px 10px rgba(var(--psm-accent-rgb), .3)); }