/* Design „Studio“ (einziges Theme): angelehnt an den Stil von getartcraft.com.
   Fast schwarz, Haarlinien, keine Rundungen, Mono-Labels in Versalien, breite Display-Schrift.
   Schriften: Archivo (breit), Geist Mono, Inter – alle Google Fonts. */
[data-theme="studio"] {
  --bg: #121316; --felt1: #121316; --felt2: #101014; --surface: #101014; --sunken: #060607;
  --line: #f2f1ee26; --line-strong: #f2f1ee66; --text: #f2f1ee; --muted: #f2f1eeb3; --faint: #f2f1ee8c;
  --accent: #74aaff; --accent-fill: #2d81ff; --back1: #1b1c21; --back2: #2d81ff;
  --good: #2fd39c; --bad: #ff6259; --warn: #ffc14d;
  --display: 'Archivo', 'Inter', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
}
[data-theme="studio"] body, [data-theme="studio"] input, [data-theme="studio"] textarea { font-family: 'Inter', system-ui, sans-serif; }
[data-theme="studio"] :is(*, *::before):not(.chip, .avatar, .ava, .pa, .tile-art, .card, .dbtn, .avatar img, .ava img, .pa img) { border-radius: 0 !important; }

/* Display-Schrift: breit und fett */
[data-theme="studio"] :is(.hub-title, .ptitle, .logo, .wallet .big, .msg, .phead h2, .sheet h2, .tile b, .pcard b, .table-opt b) {
  font-family: var(--display); font-stretch: 125%; font-weight: 800; letter-spacing: -.03em;
}
[data-theme="studio"] .hub-title { font-size: 34px; }
[data-theme="studio"] .msg { font-size: 22px; }

/* Mono-Labels: klein, Versalien, gesperrt */
[data-theme="studio"] :is(.btn, .sec, .rules, .badge, .bank, .seg button, .tile small, .table-opt small, .stat span, .count,
  .betchip, .seat-foot, .pk-log, .ranking, .odds, .odds-sub, .hint, .wallet > small, .toggle, .boardstrip, .pk-pot, .rar, .slot small) {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-weight: 500;
}
[data-theme="studio"] .btn { font-size: 12px; }
[data-theme="studio"] .btn small { letter-spacing: .08em; }
[data-theme="studio"] .tile small, [data-theme="studio"] .table-opt small { font-size: 11px; line-height: 1.6; }

/* Abschnitts-Nummern wie „01 / Tisch wählen“ */
[data-theme="studio"] .app { counter-reset: sec; }
[data-theme="studio"] .sec { counter-increment: sec; font-size: 11px; color: var(--faint); }

/* Flächen: Haarlinien statt Schatten */
[data-theme="studio"] :is(.tile, .table-opt, .wallet, .stat, .pcard, .seat, .bio, .lvlbox, .friendcode, .seg, .bank,
  .iconbtn, .field, .slot, .boardstrip, .brow, .perkline, .pk-pot, .count, .hand.active, .sheet) {
  border: 1px solid var(--line); box-shadow: none; background: var(--surface);
}
[data-theme="studio"] .btn { background: transparent; border: 1px solid var(--line-strong); }
[data-theme="studio"] .btn.primary { background: #fff; color: #0b0b0c; border-color: #fff; }
[data-theme="studio"] .btn.hint { box-shadow: none; border-color: var(--warn); color: var(--warn); }
[data-theme="studio"] .seg { padding: 0; gap: 0; }
[data-theme="studio"] .seg button { font-size: 11px; border-right: 1px solid var(--line); }
[data-theme="studio"] .seg button:last-child { border-right: none; }
[data-theme="studio"] .seg button.sel { background: #fff; color: #0b0b0c; }

/* Spiele-Kacheln mit Nummern-Tag wie „01“ */
[data-theme="studio"] .tiles { counter-reset: tile; }
[data-theme="studio"] .tile { counter-increment: tile; position: relative; padding: 12px 12px 16px; }
[data-theme="studio"] .tile::before { content: counter(tile, decimal-leading-zero); position: absolute; top: 12px; left: 12px; z-index: 1; padding: 2px 6px; background: var(--t); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
[data-theme="studio"] .tile-art { border-radius: 18px; width: 72%; margin: 18px auto 10px; }
[data-theme="studio"] .tile b { font-size: 19px; }

/* Badges als umrandete Tags mit farbiger Schrift */
[data-theme="studio"] .badge { background: transparent; border: 1px solid var(--line-strong); font-size: 11px; padding: 3px 8px; }
[data-theme="studio"] .badge.win, [data-theme="studio"] .badge.bj { color: var(--good); border-color: var(--good); background: transparent; }
[data-theme="studio"] .badge.bust { color: var(--bad); border-color: var(--bad); background: transparent; }
[data-theme="studio"] .badge.push { color: var(--muted); border-color: var(--line-strong); background: transparent; }

/* Karten: Papierweiß, feine Linie */
[data-theme="studio"] .card { background: #f2f1ee; border-radius: calc(var(--cw) * .06); box-shadow: 0 0 0 1px #0000004d, 0 8px 20px #00000080; }
[data-theme="studio"] .card .c { font-family: var(--display); font-stretch: 112%; }
[data-theme="studio"] .card.back { background: var(--back1); border: 1px solid var(--line-strong); box-shadow: inset 0 0 0 calc(var(--cw) * .07) var(--back1), inset 0 0 0 calc(var(--cw) * .07 + 1px) var(--accent-fill); }
[data-theme="studio"] .card.back::after { content: "21"; color: var(--accent); font-family: var(--display); font-stretch: 125%; font-size: calc(var(--cw) * .3); }

/* Sprechblasen: weißer Tag mit Mono-Schrift */
[data-theme="studio"] .bubble { background: #fff; color: #0b0b0c; font-family: var(--mono); font-weight: 600; letter-spacing: .12em; font-size: 12px; padding: 4px 8px; box-shadow: none; }
[data-theme="studio"] .bubble::after { display: none; }
[data-theme="studio"] .bubble.good { background: var(--good); color: #0b0b0c; }
[data-theme="studio"] .bubble.bad { background: var(--bad); color: #0b0b0c; }
[data-theme="studio"] .bubble.hot { background: var(--warn); color: #0b0b0c; }

/* Kleinkram */
[data-theme="studio"] .hand.active, [data-theme="studio"] .seat.active { border-color: var(--accent); animation: none; }
[data-theme="studio"] .odds .bar { height: 2px; background: var(--line); }
[data-theme="studio"] .odds .bar i { background: var(--accent); }
[data-theme="studio"] .msg.pos { color: var(--good); } [data-theme="studio"] .msg.neg { color: var(--bad); }
[data-theme="studio"] .bnet.pos, [data-theme="studio"] .boardstrip em { color: var(--good); }
[data-theme="studio"] .bnet.neg { color: var(--bad); }
[data-theme="studio"] .avatar { background: #fff; }
[data-theme="studio"] .xpbar { height: 2px; }
[data-theme="studio"] .xpbar i { background: var(--accent); }
[data-theme="studio"] .brow.me { outline: none; border-color: var(--accent); }
[data-theme="studio"] .dots { background: var(--sunken); border: 1px solid var(--line); }
[data-theme="studio"] .table-opt.sel, [data-theme="studio"] .pcard.on { border-color: var(--accent); outline: none; }
[data-theme="studio"] .hint { font-size: 11px; }