/* ============================================================
   SELECTABLE VISUAL SYSTEMS
   Classic, Glassmorphism and Neobrutalism intentionally share structure,
   semantics and minimum target sizes while changing the full skin.
   ============================================================ */

html[data-theme]{
  --theme-focus:#ffd84d;
  --theme-ease:cubic-bezier(.2,.75,.25,1);
}
html[data-theme] :where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--theme-focus)!important;
  outline-offset:3px;
}
html[data-theme] :where(input,select,textarea){
  min-height:44px;
  font:inherit;
}
html[data-theme] :where(.pill,.btn,.game-filters button,.setting-row,.public-room,.theme-option){
  transition:transform .16s var(--theme-ease),box-shadow .16s var(--theme-ease),background-color .16s,border-color .16s;
}
.theme-switching .stage.active,.theme-switching .friends:not(.collapsed),.theme-switching .modal-backdrop.open .modal{
  animation:themeReveal .42s var(--theme-ease) both;
}
@keyframes themeReveal{
  from{clip-path:inset(0 0 100% 0);transform:translateY(8px)}
  to{clip-path:inset(0);transform:translateY(0)}
}

/* Settings picker */
.theme-picker{
  min-width:0;
  border:0;
  border-bottom:1px solid var(--line);
  margin:0 0 4px;
  padding:0 0 16px;
}
.theme-picker legend{
  padding:0;
  font-size:14px;
  font-weight:900;
}
.theme-picker-help{
  margin:5px 0 10px!important;
  font-size:11.5px!important;
}
.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.theme-option{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  align-content:start;
  gap:8px;
  min-height:154px;
  padding:10px;
  cursor:pointer;
}
.theme-option input{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:20px;
  height:20px;
  min-height:0!important;
  accent-color:var(--neon);
}
.theme-preview{
  position:relative;
  display:block;
  height:72px;
  overflow:hidden;
}
.theme-preview-bar,.theme-preview-card,.theme-preview-button{position:absolute;display:block}
.theme-preview-bar{inset:0 0 auto;height:17px}
.theme-preview-card{left:10px;top:28px;width:48px;height:32px}
.theme-preview-button{right:10px;bottom:11px;width:42px;height:16px}
.theme-option-copy{display:grid;gap:3px}
.theme-option-copy strong{font-size:12px;line-height:1.25}
.theme-option-copy small{font-size:10.5px;line-height:1.35;color:var(--muted)}
.theme-option-classic{
  border:1px solid #34396f;
  border-radius:15px;
  background:linear-gradient(160deg,#171b36,#11142a);
  color:#eef0ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.theme-option-classic .theme-option-copy small{color:#aeb4db}
.theme-option-classic .theme-preview{
  border:1px solid #3b3f7e;
  border-radius:11px;
  background:linear-gradient(120deg,#2a1a6e,#142a5e 55%,#0d3554);
}
.theme-option-classic .theme-preview-bar{background:rgba(11,13,26,.8);border-bottom:1px solid #34396f}
.theme-option-classic .theme-preview-card{border:1px solid #454b85;border-radius:8px;background:linear-gradient(160deg,#171b36,#11142a);box-shadow:0 7px 16px #0007}
.theme-option-classic .theme-preview-button{border-radius:10px;background:linear-gradient(135deg,#7c5cff,#5a3df0);box-shadow:0 4px 10px #7c5cff55}
.theme-option-glass{
  border:1px solid rgba(255,255,255,.22);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(97,221,255,.14),rgba(132,92,255,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.theme-option-glass .theme-preview{
  border:1px solid rgba(255,255,255,.24);
  border-radius:11px;
  background:radial-gradient(circle at 75% 15%,#a06bff66,transparent 42%),#10152e;
}
.theme-option-glass .theme-preview-bar{background:#ffffff20;border-bottom:1px solid #ffffff35;backdrop-filter:blur(5px)}
.theme-option-glass .theme-preview-card{border:1px solid #ffffff55;border-radius:8px;background:#ffffff18;box-shadow:0 8px 18px #0008}
.theme-option-glass .theme-preview-button{border:1px solid #ffffff55;border-radius:999px;background:#7c5cffaa}
.theme-option-neo{
  border:3px solid #17141c;
  border-radius:3px;
  background:#fff8e8;
  color:#17141c;
  box-shadow:4px 4px 0 #17141c;
}
.theme-option-neo .theme-option-copy small{color:#514c56}
.theme-option-neo .theme-preview{border:3px solid #17141c;background:#ffd84d}
.theme-option-neo .theme-preview-bar{background:#ff5ca8;border-bottom:3px solid #17141c}
.theme-option-neo .theme-preview-card{border:3px solid #17141c;background:#51d9ff;box-shadow:3px 3px 0 #17141c}
.theme-option-neo .theme-preview-button{border:3px solid #17141c;background:#fff8e8;box-shadow:2px 2px 0 #17141c}
.theme-option:has(input:checked){transform:translateY(-2px)}
.theme-option-classic:has(input:checked){border-color:#7c5cff;box-shadow:0 0 0 2px #7c5cff44,0 14px 30px #0007}
.theme-option-glass:has(input:checked){border-color:#8fe9ff;box-shadow:0 0 0 2px #57dfff44,0 14px 30px #0007}
.theme-option-neo:has(input:checked){background:#51d9ff;box-shadow:6px 6px 0 #17141c}
#settingsModal .modal>.row{
  position:sticky;
  bottom:-1px;
  z-index:12;
  margin-top:12px;
  padding-top:12px;
}
html[data-theme="glass"] #settingsModal .modal>.row{
  background:linear-gradient(0deg,rgba(20,28,62,.98) 55%,rgba(20,28,62,0));
}
html[data-theme="classic"] #settingsModal .modal>.row{
  background:linear-gradient(0deg,rgba(23,27,54,.98) 55%,rgba(23,27,54,0));
}
html[data-theme="neo"] #settingsModal .modal>.row{
  border-top:3px solid #17141c;
  background:#fff8e8;
}

/* ============================================================
   CLASSIC — the original Arcade Deck visual system
   ============================================================ */
html[data-theme="classic"]{
  color-scheme:dark;
  --theme-focus:#ffc24b;
}
html[data-theme="classic"] body{
  background:
    var(--shop-wallpaper,
      radial-gradient(1200px 800px at 80% -10%,#1c1452 0%,transparent 60%),
      radial-gradient(900px 700px at -10% 110%,#0a2b4a 0%,transparent 55%),
      var(--bg));
  background-attachment:fixed;
}

/* ============================================================
   GLASSMORPHISM — holographic arcade deck
   ============================================================ */
html[data-theme="glass"]{
  color-scheme:dark;
  --bg:#090d20;
  --bg2:#111936;
  --panel:rgba(20,28,62,.68);
  --panel2:rgba(39,49,92,.68);
  --ink:#f7f8ff;
  --muted:#b8c2de;
  --line:rgba(207,225,255,.2);
  --neon:#8d72ff;
  --neon2:#63e5ff;
  --pink:#ff6bac;
  --gold:#ffd36a;
  --green:#63e6a5;
  --red:#ff737d;
  --radius:22px;
  --theme-focus:#ffd36a;
}
html[data-theme="glass"] body{
  background:
    radial-gradient(1000px 680px at 82% -8%,rgba(109,76,255,.36),transparent 68%),
    radial-gradient(850px 650px at -10% 100%,rgba(23,197,255,.24),transparent 65%),
    var(--shop-wallpaper,#090d20);
  background-attachment:fixed;
}
html[data-theme="glass"] body::before{
  left:auto;
  right:-10vw;
  bottom:auto;
  top:18vh;
  width:42vw;
  height:42vw;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(121,87,255,.24),rgba(61,226,255,.12));
  filter:blur(12px);
  transform:none;
  -webkit-mask-image:none;
  mask-image:none;
  will-change:transform;
  animation:glassDrift 14s ease-in-out infinite alternate;
}
html[data-theme="glass"] body::after{
  opacity:.16;
  background:
    linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.12) 49% 50%,transparent 51%),
    repeating-linear-gradient(90deg,transparent 0 80px,rgba(255,255,255,.025) 81px);
  mix-blend-mode:screen;
}
@keyframes glassDrift{to{transform:translate(-8vw,12vh) scale(1.14)}}
html[data-theme="glass"] .topbar{
  background:rgba(7,11,30,.66);
  border:1px solid transparent;
  border-bottom-color:rgba(214,230,255,.18);
  border-image:none;
  box-shadow:0 12px 38px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  backdrop-filter:blur(24px) saturate(145%);
}
html[data-theme="glass"] .logo-mark{
  border:1px solid rgba(255,255,255,.36);
  border-radius:13px;
  background:linear-gradient(135deg,rgba(153,113,255,.88),rgba(76,224,255,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 28px rgba(91,95,255,.42);
}
html[data-theme="glass"] .logo h1,
html[data-theme="glass"] .hero h2{
  background:linear-gradient(95deg,#fff 0%,#c9f5ff 47%,#cbbdff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
html[data-theme="glass"] :where(.pill,.btn.ghost,.game-filters button,.gc-btn,.gc-pref){
  color:var(--ink);
  border:1px solid rgba(228,238,255,.22);
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
}
html[data-theme="glass"] .btn:not(.ghost){
  border:1px solid rgba(255,255,255,.25);
  border-bottom:3px solid rgba(17,10,58,.7);
  background:linear-gradient(135deg,#9077ff,#5b3ee9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 26px rgba(100,72,255,.36);
}
html[data-theme="glass"] .btn.gold{background:linear-gradient(135deg,#ffd76f,#f18b3e);color:#201404}
html[data-theme="glass"] :where(.pill,.btn,.game-filters button):hover{border-color:rgba(111,231,255,.7)}
html[data-theme="glass"] :where(.hero,.game-card,.game-surface,.friends,.modal,.quick-deck,.setting-row,.public-room,.match-tools,.update-banner){
  border-color:rgba(211,230,255,.2);
  background:linear-gradient(145deg,rgba(34,45,88,.7),rgba(14,20,50,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 24px 60px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  backdrop-filter:blur(22px) saturate(135%);
}
html[data-theme="glass"] .hero{
  border-radius:28px;
  background:
    radial-gradient(circle at 90% 5%,rgba(111,226,255,.22),transparent 38%),
    radial-gradient(circle at 20% 115%,rgba(143,107,255,.32),transparent 50%),
    linear-gradient(125deg,rgba(44,34,110,.72),rgba(16,62,92,.56));
}
html[data-theme="glass"] .hero::after{
  opacity:.48;
  background:conic-gradient(from var(--a,0deg),#8670ff,#62e5ff,#ff72b6,#ffd369,#8670ff);
}
html[data-theme="glass"] .game-card{
  border-radius:22px;
  background:linear-gradient(145deg,rgba(34,45,88,.82),rgba(14,20,50,.76));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 42px rgba(0,0,0,.24);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html[data-theme="glass"] .game-card .art{
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--card-c) 78%,transparent),rgba(5,10,30,.3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
html[data-theme="glass"] .game-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 55px rgba(0,0,0,.4),0 0 0 1px var(--card-c)}
html[data-theme="glass"] :where(.tag,.experience-chip,.net-status,.favorite-btn,.hud .hud-item,.msg,.lb-row,.quick-game){
  border-color:rgba(224,236,255,.18);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
html[data-theme="glass"] .msg.me{background:linear-gradient(135deg,rgba(131,103,255,.9),rgba(74,55,191,.9))}
html[data-theme="glass"] .modal-backdrop{background:rgba(2,6,20,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-theme="glass"] .modal{border-radius:24px}
html[data-theme="glass"] .game-surface{border-radius:26px;background:linear-gradient(155deg,rgba(28,37,79,.76),rgba(8,14,39,.7))}
html[data-theme="glass"] :where(input,select,textarea,#gameSearch,.newgame-toolbar select,.match-tools select){
  color:var(--ink)!important;
  border:1px solid rgba(220,234,255,.23)!important;
  border-radius:12px!important;
  background:rgba(5,10,30,.5)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}
html[data-theme="glass"] #gameSearchClear{color:var(--ink)!important}
html[data-theme="glass"] :where(.sudoku-cell,.sudoku-pad button,.match-grid button,.score-sheet button,.ttt button,.mine-cell){
  color:var(--ink);
  border-color:rgba(219,233,255,.2);
  background:rgba(20,30,69,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="glass"] .sudoku-cell.fixed{background:rgba(70,81,145,.66);color:#7ff2ba}
html[data-theme="glass"] :where(.shell-pause-overlay,.overlay-msg){background:rgba(5,10,30,.76);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html[data-theme="glass"] canvas.gamecanvas{border:1px solid rgba(220,234,255,.2);box-shadow:0 20px 60px rgba(0,0,0,.42)}

/* ============================================================
   NEOBRUTALISM — printed game ticket
   ============================================================ */
html[data-theme="neo"]{
  color-scheme:light;
  --bg:#ffd84d;
  --bg2:#fff8e8;
  --panel:#fff8e8;
  --panel2:#ffffff;
  --ink:#17141c;
  --muted:#514c56;
  --line:#17141c;
  --neon:#5237bd;
  --neon2:#007f9e;
  --pink:#e92e84;
  --gold:#9a5400;
  --green:#006f46;
  --red:#c82435;
  --radius:3px;
  --theme-focus:#7357ff;
}
html[data-theme="neo"] body{
  color:var(--ink);
  background:var(--shop-wallpaper,#ffd84d);
  background-attachment:fixed;
}
html[data-theme="neo"] body::before{
  inset:0;
  width:auto;
  height:auto;
  background:
    radial-gradient(circle,#17141c 1.2px,transparent 1.4px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.5));
  opacity:.13;
  transform:none;
  -webkit-mask-image:none;
  mask-image:none;
  animation:none;
}
html[data-theme="neo"] body::after{display:none}
html[data-theme="neo"] :where(.topbar,.hero,.game-card,.game-surface,.friends,.modal,.quick-deck,.setting-row,.public-room,.match-tools,.update-banner){
  color:var(--ink);
  border:3px solid #17141c;
  border-radius:3px;
  background:#fff8e8;
  box-shadow:7px 7px 0 #17141c;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html[data-theme="neo"] .topbar{
  gap:10px;
  padding:10px 14px;
  border-width:0 0 3px;
  border-image:none;
  background:#fff8e8;
  box-shadow:0 5px 0 #17141c;
}
html[data-theme="neo"] .logo-mark{
  border:3px solid #17141c;
  border-radius:2px;
  color:#17141c;
  background:#ff5ca8;
  box-shadow:4px 4px 0 #17141c;
}
html[data-theme="neo"] .logo h1,
html[data-theme="neo"] .hero h2{
  color:#17141c;
  background:none;
  -webkit-text-fill-color:currentColor;
  filter:none;
  font-family:Arial Black,Arial,sans-serif;
  letter-spacing:-.035em;
}
html[data-theme="neo"] .logo h1{font-size:16px;text-transform:uppercase}
html[data-theme="neo"] .logo small{color:#514c56;-webkit-text-fill-color:#514c56;font-weight:900}
html[data-theme="neo"] .hero{
  overflow:visible;
  background:#51d9ff;
}
html[data-theme="neo"] .hero::before{
  content:"PLAYER SELECT";
  position:absolute;
  right:20px;
  bottom:-14px;
  z-index:2;
  padding:5px 9px;
  border:3px solid #17141c;
  background:#ff5ca8;
  color:#17141c;
  font:900 10px/1 Arial,sans-serif;
  letter-spacing:1px;
  transform:rotate(-2deg);
}
html[data-theme="neo"] .hero::after{display:none}
html[data-theme="neo"] .hero p{color:#29232e;font-weight:650}
html[data-theme="neo"] .hero .floaties{filter:none}
html[data-theme="neo"] :where(.pill,.btn,.game-filters button,.gc-btn,.gc-pref,.card-play){
  color:#17141c;
  border:3px solid #17141c;
  border-radius:3px;
  background:#fff8e8;
  box-shadow:4px 4px 0 #17141c;
  text-transform:uppercase;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html[data-theme="neo"] .btn:not(.ghost){background:#5237bd;color:#fff}
html[data-theme="neo"] .btn.gold{background:#ffd84d;color:#17141c}
html[data-theme="neo"] .btn.danger{background:#ff5c6c;color:#17141c}
html[data-theme="neo"] :where(.pill,.btn,.game-filters button,.gc-btn,.gc-pref,.card-play):hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 #17141c;
}
html[data-theme="neo"] :where(.pill,.btn,.game-filters button,.gc-btn,.gc-pref,.card-play):active{
  transform:translate(3px,3px);
  box-shadow:1px 1px 0 #17141c;
}
html[data-theme="neo"] .coin{color:#6b3700;animation:none}
html[data-theme="neo"] .pill .dot{border:2px solid #17141c;box-shadow:none}
html[data-theme="neo"] .section-title{
  color:#17141c;
  font-family:Arial Black,Arial,sans-serif;
  font-size:16px;
}
html[data-theme="neo"] .section-title::before{color:#17141c;animation:none}
html[data-theme="neo"] .section-title::after{height:3px;background:#17141c}
html[data-theme="neo"] .game-grid{gap:21px}
html[data-theme="neo"] .game-card{overflow:visible}
html[data-theme="neo"] .game-card:nth-child(3n+2){background:#f2edff}
html[data-theme="neo"] .game-card:nth-child(3n){background:#eafaff}
html[data-theme="neo"] .game-card::after{display:none}
html[data-theme="neo"] .game-card:hover{
  border-color:#17141c;
  transform:translate(-3px,-3px);
  box-shadow:10px 10px 0 #17141c;
}
html[data-theme="neo"] .game-card .art{
  border:3px solid #17141c;
  border-radius:2px;
  background:var(--card-c,#51d9ff);
  box-shadow:4px 4px 0 #17141c;
  text-shadow:none;
}
html[data-theme="neo"] .game-card h3,
html[data-theme="neo"] .stage-head h2,
html[data-theme="neo"] .overlay-msg h3{
  color:#17141c;
  font-family:Arial Black,Arial,sans-serif;
  letter-spacing:-.02em;
}
html[data-theme="neo"] .game-card p,
html[data-theme="neo"] .stage-head .sub,
html[data-theme="neo"] .controls-hint{color:#514c56}
html[data-theme="neo"] :where(.tag,.experience-chip,.net-status,.favorite-btn,.hud .hud-item,.msg,.lb-row,.quick-game){
  color:#17141c;
  border:2px solid #17141c;
  border-radius:2px;
  background:#fff;
  box-shadow:2px 2px 0 #17141c;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html[data-theme="neo"] .tag.mp{background:#88efbf;color:#153d2c}
html[data-theme="neo"] .favorite-btn{background:#ffd84d;color:#17141c}
html[data-theme="neo"] .game-card .hiscore{color:#17141c;background:#ffd84d;border:2px solid #17141c;border-radius:2px;text-shadow:none}
html[data-theme="neo"] .card-play{background:#ffd84d;color:#17141c;margin-top:12px}
html[data-theme="neo"] .game-surface{background:#fff8e8;box-shadow:9px 9px 0 #17141c}
html[data-theme="neo"] .friends{background:#fff8e8;box-shadow:-7px 7px 0 #17141c}
html[data-theme="neo"] .friends-head,
html[data-theme="neo"] .friend-list,
html[data-theme="neo"] .chat-input{border-color:#17141c}
html[data-theme="neo"] .friend{border:2px solid #17141c;border-radius:2px;background:#fff}
html[data-theme="neo"] .friend .avatar{border:2px solid #17141c;border-radius:2px;background:var(--av,#7357ff)}
html[data-theme="neo"] .msg.me{color:#17141c;background:#ff8fc5;border-color:#17141c}
html[data-theme="neo"] .msg .who{color:#00617a}
html[data-theme="neo"] .msg.sys{box-shadow:none;border:0;background:transparent;color:#514c56}
html[data-theme="neo"] .modal-backdrop{background:rgba(23,20,28,.67);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme="neo"] .modal{background:#fff8e8;box-shadow:10px 10px 0 #17141c}
html[data-theme="neo"] .modal p,
html[data-theme="neo"] .theme-option-copy small{color:#514c56}
html[data-theme="neo"] .toast{color:#fff;background:#17141c;border:3px solid #fff;border-radius:2px;box-shadow:6px 6px 0 #7357ff}
html[data-theme="neo"] .update-banner{background:#51d9ff}
html[data-theme="neo"] :where(input,select,textarea,#gameSearch,.newgame-toolbar select,.match-tools select){
  color:#17141c!important;
  border:3px solid #17141c!important;
  border-radius:2px!important;
  background:#fff!important;
  box-shadow:3px 3px 0 #17141c!important;
}
html[data-theme="neo"] #gameSearchClear{color:#17141c!important;opacity:1!important}
html[data-theme="neo"] .game-filters button[aria-pressed="true"]{color:#17141c;background:#ff5ca8;border-color:#17141c}
html[data-theme="neo"] .setting-row{box-shadow:4px 4px 0 #17141c}
html[data-theme="neo"] .setting-row input{accent-color:#7357ff}
html[data-theme="neo"] :where(.shell-pause-overlay,.overlay-msg){background:rgba(255,216,77,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme="neo"] .shell-pause-card{border:3px solid #17141c;background:#fff8e8;box-shadow:7px 7px 0 #17141c}
html[data-theme="neo"] .shell-pause-card h3{color:#17141c}
html[data-theme="neo"] .shell-pause-card p{color:#514c56}
html[data-theme="neo"] canvas.gamecanvas{border:4px solid #17141c;border-radius:2px;box-shadow:7px 7px 0 #17141c}
html[data-theme="neo"] :where(.sudoku-grid,.match-grid,.score-sheet,.ttt,.mine-grid){border-color:#17141c}
html[data-theme="neo"] :where(.sudoku-cell,.sudoku-pad button,.match-grid button,.score-sheet button,.ttt button,.mine-cell){
  color:#17141c;
  border:2px solid #17141c;
  border-radius:1px;
  background:#fff;
  box-shadow:none;
}
html[data-theme="neo"] .sudoku-cell.fixed{background:#9ff0d0;color:#17141c}
html[data-theme="neo"] .sudoku-cell.selected{outline-color:#7357ff}
html[data-theme="neo"] .seg{border:3px solid #17141c;border-radius:2px;background:#fff}
html[data-theme="neo"] .seg button{color:#17141c}
html[data-theme="neo"] .seg button.on{color:#fff;background:#5237bd}
html[data-theme="neo"] .mancala{border:3px solid #17141c;border-radius:42px;box-shadow:7px 7px 0 #17141c}
html[data-theme="neo"] :where(.mancala-pit,.mancala-store){border:2px solid #17141c}
html[data-theme="neo"] .playing-card,
html[data-theme="neo"] .card-pile{border:3px solid #17141c;border-radius:2px;box-shadow:3px 3px 0 #17141c}

@media (max-width:640px){
  .theme-options{grid-template-columns:1fr}
  .theme-option{grid-template-columns:112px 1fr;align-items:center;min-height:98px}
  .theme-preview{height:74px}
  html[data-theme="neo"] :where(.topbar,.hero,.game-card,.game-surface,.modal,.quick-deck){box-shadow:5px 5px 0 #17141c}
  html[data-theme="neo"] .game-grid{gap:15px}
}

@media (prefers-reduced-transparency:reduce){
  html[data-theme="glass"] :where(.topbar,.hero,.game-card,.game-surface,.friends,.modal,.quick-deck,.setting-row,.public-room,.match-tools,.update-banner){
    background:#151d3f;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}