/* Casino im Menue-Stil. Liegt ueber dem alten "Glas"-Design der Seite und ersetzt
   nur das Aussehen, die Struktur und das Verhalten bleiben. Basis: kirit-ui.css. */

:root{
  --void:#0f1218; --deep:#161b25; --mid:#1e2533;
  --ice0:#1b2230; --ice1:#232b3b; --ice2:#2b3548; --ice3:#35405a;
  --border:#3a4459; --border-hot:#2f8fe6;
  --glow:#2f8fe6; --glow2:#7cc0ff; --glow3:#1b5ea6;
  --text:#e8edf5; --text1:#e8edf5; --text2:#a3aec2; --text3:#73809a;
  --green:#3fc44f; --red:#e24b4b; --yellow:#f2b632;
  --glass:#141922;
  --font-head:'Kirit Pixel','Courier New',monospace;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --r-sm:6px; --r-md:8px; --r-lg:8px; --r-xl:8px;
  --blur-sm:none; --blur-md:none; --blur-lg:none;
}
body.k{font-family:var(--font-body)}
.bg-scene{display:none !important}
#app{position:relative}

/* Kopfleiste */
header{background:rgba(15,18,24,.94) !important;border:none !important;border-bottom:4px solid var(--k-edge) !important;
  box-shadow:0 2px 0 #2d3649 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-radius:0 !important}
.header-left{display:flex;align-items:center;gap:12px}
.logo-mark{background:var(--k-blue) !important;border:3px solid var(--k-edge) !important;border-radius:7px !important;color:#fff !important;
  font-family:var(--k-pixel) !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -5px 0 var(--k-blue-d) !important;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.site-title{font-family:var(--k-pixel) !important;font-weight:700;color:#fff !important;background:none !important;-webkit-text-fill-color:#fff !important}
.site-sub{font-family:var(--k-pixel) !important;color:var(--k-gold) !important;letter-spacing:1px}
.tag{background:var(--k-slot) !important;border:3px solid var(--k-edge) !important;border-radius:7px !important;font-family:var(--k-pixel) !important;color:#fff !important}

/* Flaechen */
.glass,.glass-hot,.auth-card,.lobby-modal-card,.win-card,.picker-panel,.wallet-form,.wallet-balance-hero,.stat-card,.lobby-card,.slot-machine{
  background:rgba(30,37,51,.96) !important;border:4px solid var(--k-edge) !important;border-radius:8px !important;
  box-shadow:inset 0 0 0 2px #2d3649,0 8px 0 rgba(0,0,0,.25),0 14px 30px rgba(0,0,0,.4) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;animation:none !important}
.glass::before,.glass-hot::before,.lobby-card::after,.btn::after{display:none !important}
.lobby-card{cursor:pointer;transition:transform .1s !important}
.lobby-card:hover{transform:translateY(-2px) !important;box-shadow:inset 0 0 0 2px var(--k-blue),0 8px 0 rgba(0,0,0,.25),0 14px 30px rgba(0,0,0,.4) !important}
.stat-card:hover{transform:none !important}
.lobby-modal{background:rgba(8,10,14,.78) !important;backdrop-filter:none !important}

/* Titel wie die helle Leiste im Menue */
.page-title,.auth-title,.picker-title,.win-title,.game-title{font-family:var(--k-pixel) !important;font-weight:700 !important;color:#fff !important;
  background:none !important;-webkit-text-fill-color:#fff !important;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.section-title,.wallet-form h3{font-family:var(--k-pixel) !important;font-weight:700 !important;color:var(--k-ink) !important;background:var(--k-strip) !important;
  border-radius:5px;padding:5px 12px 7px !important;box-shadow:inset 0 -4px 0 var(--k-strip-d),inset 0 2px 0 rgba(255,255,255,.35);
  -webkit-text-fill-color:var(--k-ink) !important;display:inline-block;letter-spacing:.5px;text-transform:none !important}
.wallet-form h3{display:block;margin-bottom:12px}
.page-subtitle,.auth-sub,.stat-label,.balance-label,.form-label,.pile-label,.hand-label{font-family:var(--k-pixel) !important;color:var(--k-muted) !important;letter-spacing:.5px}
.stat-val,.balance-amount,.room-code-display,.code-val{font-family:var(--k-pixel) !important;font-weight:700 !important;background:none !important;
  -webkit-text-fill-color:currentColor !important;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.stat-val.blue,.balance-amount{color:var(--k-blue-l) !important}
.stat-val.gain{color:var(--k-green) !important}
.room-code-display,.code-val{color:var(--k-gold) !important}
.code-display,.verify-cmd{background:#141922 !important;border:3px solid var(--k-edge) !important;border-radius:7px !important;
  box-shadow:inset 0 3px 0 rgba(0,0,0,.4) !important;font-family:var(--k-pixel) !important}
.verify-cmd{color:var(--k-green) !important}

/* Knoepfe "Bunt" */
.btn{font-family:var(--k-pixel) !important;font-weight:700 !important;color:#fff !important;text-shadow:0 2px 0 rgba(0,0,0,.35);
  background:var(--k-grey) !important;border:3px solid var(--k-edge) !important;border-radius:9px !important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -6px 0 var(--k-grey-d) !important;padding-bottom:13px !important;
  transition:transform .1s,filter .1s !important;backdrop-filter:none !important;letter-spacing:.5px}
.btn:hover{transform:translateY(-2px) !important;filter:brightness(1.08)}
.btn:active{transform:translateY(2px) !important}
.btn-glow,.btn-primary{background:var(--k-blue) !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -6px 0 var(--k-blue-d) !important}
.btn-outline{background:var(--k-grey) !important}
.btn-danger{background:var(--k-red) !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -6px 0 var(--k-red-d) !important}
#modal-create-btn,#btn-start-game,.side-opt.btn-glow{background:var(--k-green) !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -6px 0 var(--k-green-d) !important}
#btn-uno{background:var(--k-gold) !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -6px 0 var(--k-gold-d) !important}
.btn:disabled{filter:grayscale(.6);opacity:.7}

/* Eingaben */
input[type=text],input[type=number],select,#app input:not([type=checkbox]){font-family:var(--k-pixel) !important;font-size:17px !important;color:#fff !important;
  background:#141922 !important;border:3px solid var(--k-edge) !important;border-radius:7px !important;box-shadow:inset 0 3px 0 rgba(0,0,0,.4) !important;outline:none}
input:focus,select:focus{box-shadow:inset 0 3px 0 rgba(0,0,0,.4),0 0 0 2px var(--k-blue) !important}
select option{background:#141922;color:#fff}
.wallet-chip{background:var(--k-gold) !important;color:var(--k-ink) !important;border:3px solid var(--k-edge) !important;border-radius:9px !important;
  font-family:var(--k-pixel) !important;font-weight:700;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -5px 0 var(--k-gold-d) !important;padding-bottom:9px !important}
.wallet-chip span{color:var(--k-ink) !important}
.msg{font-family:var(--k-pixel) !important;font-size:16px !important}
.msg.ok{color:var(--k-green) !important}.msg.err{color:#ff8a8a !important}

/* Lobby, Warteraum, Spiel */
.lobby-game-badge,.lobby-host,.chip-name{font-family:var(--k-pixel) !important}
.lobby-game-badge{background:var(--k-blue) !important;color:#fff !important;border:2px solid var(--k-edge) !important;border-radius:5px !important}
.player-chip{background:var(--k-slot) !important;border:3px solid var(--k-edge) !important;border-radius:7px !important;box-shadow:inset 0 0 0 1px var(--k-line)}
.player-chip.active{box-shadow:inset 0 0 0 2px var(--k-gold) !important;background:var(--k-panel2) !important}
.player-avatar{border-radius:4px !important;background:var(--k-blue) !important;font-family:var(--k-pixel) !important;border:2px solid var(--k-edge)}
.uno-table,.game-log{background:rgba(30,37,51,.96) !important;border:4px solid var(--k-edge) !important;border-radius:8px !important;box-shadow:inset 0 0 0 2px #2d3649 !important;backdrop-filter:none !important}
.turn-banner{font-family:var(--k-pixel) !important;border:3px solid var(--k-edge) !important;border-radius:7px !important;background:var(--k-slot) !important;color:var(--k-muted) !important;animation:none !important}
.turn-banner.my-turn{background:var(--k-green) !important;color:#fff !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -5px 0 var(--k-green-d) !important;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.uno-card{border:3px solid var(--k-edge) !important;border-radius:8px !important;font-family:var(--k-pixel) !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.25),inset 0 -6px 0 rgba(0,0,0,.28) !important}
.card-back{border:3px solid var(--k-edge) !important;border-radius:6px !important;background:var(--k-blue-d) !important}
.empty-state{font-family:var(--k-pixel);color:var(--k-dim)}
.pip{border-radius:2px !important}

/* Slots */
.slot-machine .reels{background:var(--k-edge) !important;border:3px solid var(--k-edge) !important;border-radius:7px !important;box-shadow:none !important;gap:4px !important;padding:4px !important}
.slot-machine .reel{background:var(--k-slot) !important;border-radius:3px !important;box-shadow:inset 0 0 0 1px var(--k-line) !important}
.slot-machine.win .reels{box-shadow:0 0 0 3px var(--k-green) !important}
.slot-machine.jackpot .reels{box-shadow:0 0 0 3px var(--k-gold) !important}
.help-tip{font-family:var(--k-pixel)}

/* Meldungen */
.notif{font-family:var(--k-pixel) !important;font-weight:700;color:#fff !important;border:3px solid var(--k-edge) !important;border-radius:9px !important;
  backdrop-filter:none !important;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.notif.ok{background:var(--k-green) !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -5px 0 var(--k-green-d) !important}
.notif.err{background:var(--k-red) !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -5px 0 var(--k-red-d) !important}
.notif.inf{background:var(--k-blue) !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -5px 0 var(--k-blue-d) !important}
.win-overlay,.color-picker{background:rgba(8,10,14,.8) !important;backdrop-filter:none !important}

@media(max-width:720px){
  header{flex-wrap:wrap;gap:8px;height:auto !important;padding:10px 12px !important}
  .header-right{flex-wrap:wrap;gap:6px !important;width:100%}
  .header-right .btn{flex:1 1 auto}
}