/* Mockup A. One layout, four styles (data-theme) and four card decks (data-cards).
   Every style only swaps the custom properties below. */

:root {
  color-scheme: dark;
  /* Klassik: 2000s IGT blue, yellow table, red bet column */
  --font: 'Archivo Black', 'Arial Black', Arial, system-ui, sans-serif;
  --weight: 400;
  --meter-font: var(--font);
  --page-bg: radial-gradient(120% 80% at 50% 0%, #1b1d2b 0%, #000 70%);
  --screen-bg: #1b2fd8;
  --screen-ring: 0 0 0 10px #111, 0 0 0 12px #3a3a40, 0 24px 60px #000c;
  --screen-radius: 6px;
  --panel: #2a2a2a;
  --panel-border: #ffe81a;
  --panel-text: #ffe81a;
  --panel-glow: none;
  --leader: dashed;
  --hot: #d8150c;
  --hot-text: #ffe81a;
  --hit: #fff;
  --accent: #ffe81a;
  --text: #fff;
  --muted: #c9cfff;
  --o: 0.07em;
  --oc: #d8150c;
  --outline: var(--o) 0 0 var(--oc), calc(var(--o) * -1) 0 0 var(--oc), 0 var(--o) 0 var(--oc), 0 calc(var(--o) * -1) 0 var(--oc),
    var(--o) var(--o) 0 var(--oc), calc(var(--o) * -1) var(--o) 0 var(--oc), var(--o) calc(var(--o) * -1) 0 var(--oc), calc(var(--o) * -1) calc(var(--o) * -1) 0 var(--oc);
  --meter-box: transparent;
  --meter-border: transparent;
  --meter-pad: 0;
  --soft-bg: #ffe81a;
  --soft-fg: #000;
  --soft-border: transparent;
  --soft-shadow: inset 0 -0.45cqi 0 #b39d00, 0 0.2cqi 0 #000;
  --soft-radius: 0.4cqi;
  --deck-bg: linear-gradient(#2b2d33, #0d0e12);
  --deck-border: #2440ff;
  --deck-glow: 0 -6px 24px #2440ff55, inset 0 3px 0 #444;
  --key-bg: linear-gradient(#fff, #d9d9d9);
  --key-fg: #111;
  --key-border: transparent;
  --key-shadow: 0 0.7cqi 0 #8a8a8a, 0 1cqi 1.2cqi #000a;
  --key-press: 0 0.2cqi 0 #8a8a8a;
  --key-radius: 0.9cqi;
  --key-off-bg: linear-gradient(#5d5f66, #3d3f45);
  --key-off-fg: #1b1c20;
  --key-off-shadow: 0 0.7cqi 0 #222, 0 1cqi 1.2cqi #000a;
  --key-lit-bg: linear-gradient(#fff8b0, #ffe81a);
  --key-lit-fg: #111;
  --deal-bg: linear-gradient(#fff6a8, #ffd400);
  --deal-fg: #111;
  --jp-bg: linear-gradient(#0b0d14, #151a2e);
  --jp-border: #2440ff;
  --jp-label: #ffe81a;
  --jp-value: #ff3b2f;
  --jp-glow: 0 0 0.35em #ff3b2f99;
  --pill-bg: #0d1030d9;
  --pill-border: #2a37b8;
  --pill-fg: #aab3ff;
  --gamble-bg: radial-gradient(60% 90% at 50% 50%, #3248ff, #1b2fd8);
}

html[data-theme='cafe'] {
  /* Café-Neon: black glass, cyan neon frames, LED meters (Balkan/Austria café machines) */
  --font: 'Chakra Petch', Arial, sans-serif;
  --weight: 700;
  --meter-font: Orbitron, Arial, sans-serif;
  --page-bg: radial-gradient(120% 80% at 50% 0%, #06212b 0%, #000 65%);
  --screen-bg: #05070b;
  --screen-ring: 0 0 0 2px #19e0ff, 0 0 22px #19e0ff66, 0 0 0 10px #0a0c10, 0 24px 60px #000c;
  --screen-radius: 10px;
  --panel: #05070b;
  --panel-border: #19e0ff;
  --panel-text: #ffe81a;
  --panel-glow: 0 0 1.2cqi #19e0ff66, inset 0 0 1.2cqi #19e0ff33;
  --leader: dotted;
  --hot: #19e0ff26;
  --hot-text: #fff;
  --hit: #19e0ff;
  --accent: #ffe81a;
  --muted: #7fefff;
  --outline: 0 0 0.18em #ffb300, 0 0 0.5em #ff8a0088;
  --meter-box: #000;
  --meter-border: #19e0ff;
  --meter-pad: 0.3cqi 1.4cqi;
  --soft-bg: #05070b;
  --soft-fg: #19e0ff;
  --soft-border: #19e0ff;
  --soft-shadow: 0 0 0.9cqi #19e0ff55;
  --soft-radius: 0.6cqi;
  --deck-bg: linear-gradient(#0c0f15, #030406);
  --deck-border: #19e0ff;
  --deck-glow: 0 -6px 24px #19e0ff44, inset 0 2px 0 #1a1f2a;
  --key-bg: linear-gradient(#22262f, #111318);
  --key-fg: #19e0ff;
  --key-border: #19e0ff88;
  --key-shadow: 0 0.6cqi 0 #000, 0 0 1cqi #19e0ff44;
  --key-press: 0 0.1cqi 0 #000;
  --key-radius: 0.8cqi;
  --key-off-bg: linear-gradient(#15171c, #0b0c0f);
  --key-off-fg: #19e0ff33;
  --key-off-shadow: 0 0.6cqi 0 #000;
  --key-lit-bg: linear-gradient(#7ff6ff, #19e0ff);
  --key-lit-fg: #000;
  --deal-bg: linear-gradient(#ff4a4a, #b00000);
  --deal-fg: #fff;
  --jp-bg: #000;
  --jp-border: #19e0ff;
  --jp-label: #19e0ff;
  --jp-value: #ff2a2a;
  --jp-glow: 0 0 0.3em #ff2a2a, 0 0 0.8em #ff2a2a88;
  --pill-bg: #000c;
  --pill-border: #19e0ff88;
  --pill-fg: #7fefff;
  --gamble-bg: radial-gradient(60% 90% at 50% 50%, #0d2a33, #05070b);
}

html[data-theme='premium'] {
  /* Premium: navy glass, gold, soft keys (2026 app look) */
  --font: Montserrat, Arial, sans-serif;
  --weight: 800;
  --meter-font: Montserrat, Arial, sans-serif;
  --page-bg: radial-gradient(120% 80% at 50% 0%, #1a2f6b 0%, #050a1f 70%);
  --screen-bg: linear-gradient(160deg, #163476, #0b1c4b 55%, #081236);
  --screen-ring: 0 0 0 1px #c9a24a99, 0 30px 70px #000c;
  --screen-radius: 18px;
  --panel: #ffffff0d;
  --panel-border: #c9a24a88;
  --panel-text: #f2e3b3;
  --panel-glow: inset 0 1px 0 #ffffff1a;
  --leader: dotted;
  --hot: linear-gradient(#9b2335, #5e0f1c);
  --hot-text: #ffd97a;
  --hit: #fff;
  --accent: #f2c94c;
  --muted: #c8d2f0;
  --outline: 0 0.05em 0.14em #0009;
  --soft-bg: #ffffff12;
  --soft-fg: #f2e3b3;
  --soft-border: #c9a24a88;
  --soft-shadow: none;
  --soft-radius: 99px;
  --deck-bg: linear-gradient(#0f1d45, #070d22);
  --deck-border: #c9a24a;
  --deck-glow: 0 -6px 30px #c9a24a33, inset 0 1px 0 #ffffff22;
  --key-bg: linear-gradient(#1f3c86, #102255);
  --key-fg: #f2e3b3;
  --key-border: #c9a24a99;
  --key-shadow: 0 0.6cqi 1.2cqi #0008, inset 0 1px 0 #ffffff33;
  --key-press: inset 0 1px 0 #ffffff22;
  --key-radius: 1.8cqi;
  --key-off-bg: linear-gradient(#141f3d, #0b1430);
  --key-off-fg: #f2e3b344;
  --key-off-shadow: none;
  --key-lit-bg: linear-gradient(#ffe8a3, #c9a24a);
  --key-lit-fg: #14213d;
  --deal-bg: linear-gradient(#ffe08a, #c9a24a);
  --deal-fg: #14213d;
  --jp-bg: linear-gradient(#13285e, #0a1638);
  --jp-border: #c9a24a;
  --jp-label: #c8d2f0;
  --jp-value: #f2c94c;
  --jp-glow: 0 0 0.4em #f2c94c55;
  --pill-bg: #0a1638cc;
  --pill-border: #c9a24a88;
  --pill-fg: #f2e3b3;
  --gamble-bg: radial-gradient(60% 90% at 50% 50%, #1f3c86, #0b1c4b);
}

html[data-theme='pixel'] {
  /* Pixel: real VGA café screens around 2000, hard edges, bevel keys */
  --font: 'Pixelify Sans', 'Courier New', monospace;
  --weight: 700;
  --meter-font: var(--font);
  --page-bg: #000;
  --screen-bg: #0b2bd6;
  --screen-ring: 0 0 0 6px #000, 0 0 0 9px #8a8a8a, 0 24px 60px #000c;
  --screen-radius: 0;
  --panel: #0b2bd6;
  --panel-border: #ffe81a;
  --panel-text: #fff;
  --leader: none;
  --hot: #0018a8;
  --hot-text: #ffe81a;
  --hit: #ffe81a;
  --accent: #ffe81a;
  --muted: #9fe8ff;
  --outline: 0.09em 0.09em 0 #000;
  --meter-box: #000;
  --meter-border: #19e0ff;
  --meter-pad: 0.2cqi 1.2cqi;
  --soft-bg: #c0c0c0;
  --soft-fg: #000;
  --soft-border: transparent;
  --soft-shadow: inset -0.35cqi -0.35cqi 0 #707070, inset 0.35cqi 0.35cqi 0 #fff;
  --soft-radius: 0;
  --deck-bg: #1c1c1c;
  --deck-border: #8a8a8a;
  --deck-glow: none;
  --key-bg: #c0c0c0;
  --key-fg: #000;
  --key-border: transparent;
  --key-shadow: inset -0.5cqi -0.5cqi 0 #707070, inset 0.5cqi 0.5cqi 0 #fff, 0 0.4cqi 0 #000;
  --key-press: inset 0.5cqi 0.5cqi 0 #707070, inset -0.5cqi -0.5cqi 0 #fff;
  --key-radius: 0;
  --key-off-bg: #5a5a5a;
  --key-off-fg: #2a2a2a;
  --key-off-shadow: inset -0.5cqi -0.5cqi 0 #333, inset 0.5cqi 0.5cqi 0 #777;
  --key-lit-bg: #ffe81a;
  --key-lit-fg: #000;
  --deal-bg: #e00000;
  --deal-fg: #fff;
  --jp-bg: #000;
  --jp-border: #19e0ff;
  --jp-label: #19e0ff;
  --jp-value: #ff3030;
  --jp-glow: none;
  --pill-bg: #000;
  --pill-border: #19e0ff;
  --pill-fg: #19e0ff;
  --gamble-bg: #0b2bd6;
}

/* ---------- Card decks ---------- */

html {
  --card-face: #fff;
  --card-red: #d50000;
  --card-black: #111;
  --card-edge: inset 0 0 0 0.2cqi #999;
  --card-radius: 1.1cqi;
  --rank-font: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  --rank-weight: 400;
  --card-back: repeating-conic-gradient(#d50000 0 25%, #fff 0 50%) 50% / 1.3cqi 1.3cqi;
  --card-back-ring: inset 0 0 0 0.9cqi #fff, inset 0 0 0 1.1cqi #bbb;
}
html[data-cards='cafe'] {
  --card-face: #f4ecd8;
  --card-red: #e0182d;
  --card-black: #111;
  --card-edge: inset 0 0 0 0.35cqi #111, 0 0 1cqi #19e0ff66;
  --card-radius: 1cqi;
  --rank-font: 'Chakra Petch', Arial, sans-serif;
  --rank-weight: 700;
  --card-back: repeating-linear-gradient(45deg, transparent 0 1.1cqi, #19e0ff 1.1cqi 1.4cqi),
    repeating-linear-gradient(-45deg, transparent 0 1.1cqi, #ffe81a 1.1cqi 1.4cqi), #05070b;
  --card-back-ring: inset 0 0 0 0.7cqi #05070b, inset 0 0 0 0.95cqi #19e0ff, 0 0 1cqi #19e0ff66;
}
html[data-cards='premium'] {
  --card-face: #fbf6ea;
  --card-red: #a3192b;
  --card-black: #14213d;
  --card-edge: inset 0 0 0 0.6cqi #fbf6ea, inset 0 0 0 0.75cqi #c9a24a, 0 0.6cqi 1.4cqi #0006;
  --card-radius: 1.3cqi;
  --rank-font: 'Playfair Display', Georgia, serif;
  --rank-weight: 700;
  --card-back: repeating-linear-gradient(45deg, #c9a24a66 0 0.18cqi, transparent 0.18cqi 1.5cqi),
    repeating-linear-gradient(-45deg, #c9a24a66 0 0.18cqi, transparent 0.18cqi 1.5cqi), radial-gradient(circle, #1a3170, #0f1f4a);
  --card-back-ring: inset 0 0 0 0.7cqi #0f1f4a, inset 0 0 0 0.9cqi #c9a24a;
}
html[data-cards='pixel'] {
  --card-face: #fff;
  --card-red: #e00000;
  --card-black: #000;
  --card-edge: inset 0 0 0 0.35cqi #000;
  --card-radius: 0.25cqi;
  --rank-font: 'Pixelify Sans', 'Courier New', monospace;
  --rank-weight: 700;
  --card-back: repeating-conic-gradient(#e00000 0 25%, #fff 0 50%) 0 0 / 2.4cqi 2.4cqi;
  --card-back-ring: inset 0 0 0 0.6cqi #fff, inset 0 0 0 0.9cqi #000;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; background: #000; }

body {
  font-family: var(--font);
  font-weight: var(--weight);
  background: var(--page-bg);
  color: var(--text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation; /* no double-tap zoom, no 300 ms click delay */
}

.outline { text-shadow: var(--outline); }

/* ---------- Top bar ---------- */

.topbar {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.links { display: flex; gap: 6px; }
.pill {
  font: 12px/1 system-ui, sans-serif;
  font-weight: 600;
  color: var(--pill-fg);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  padding: 7px 10px;
  border-radius: 99px;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Machine frame ---------- */

.machine {
  width: min(96vw, 1000px, calc((100svh - 130px) * 0.92));
  margin: 0 auto;
  padding-top: max(40px, env(safe-area-inset-top));
}

/* ---------- Jackpot sign (above the screen, like the LED sign over a bank) ---------- */

.jp-sign {
  container-type: inline-size;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.6cqi 2cqi;
  margin-bottom: 14px;
  padding: 1cqi 2cqi;
  background: var(--jp-bg);
  border: 2px solid var(--jp-border);
  border-radius: max(4px, calc(var(--screen-radius) * 0.6));
  box-shadow: 0 0 18px color-mix(in srgb, var(--jp-border) 35%, transparent);
}
.jp-sign[hidden] { display: none; }
.jp-royal { display: flex; align-items: baseline; gap: 1.4cqi; white-space: nowrap; }
.jp-label { font-size: 1.9cqi; color: var(--jp-label); letter-spacing: 0.06em; }
.jp-value {
  font-family: var(--meter-font);
  font-size: 3.6cqi;
  color: var(--jp-value);
  text-shadow: var(--jp-glow);
  font-variant-numeric: tabular-nums;
}
.jp-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqi; }
.jp-level { display: flex; align-items: center; justify-content: flex-end; gap: 0.8cqi; white-space: nowrap; }
.jp-level svg { width: 2.4cqi; fill: currentColor; flex: none; }
.jp-level.red { color: #ff4b3e; }
.jp-level.black { color: #e8e8f0; }
.jp-level .jp-value { font-size: 2.6cqi; }
.jp-news {
  grid-column: 1 / -1;
  min-height: 2.6cqi;
  font-size: 1.9cqi;
  line-height: 2.6cqi;
  text-align: center;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jp-news.flash { animation: news 0.5s steps(1) 6; }
@keyframes news { 50% { color: var(--jp-value); } }

/* ---------- Screen ---------- */

.screen {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1cqi;
  padding: 1.6cqi;
  background: var(--screen-bg);
  border-radius: var(--screen-radius);
  box-shadow: var(--screen-ring);
}

/* ---------- Paytable ---------- */

.paytable {
  display: grid;
  grid-template-columns: 1fr repeat(5, 11.2%);
  background: var(--panel);
  border: 0.45cqi solid var(--panel-border);
  border-radius: calc(var(--screen-radius) * 0.5);
  box-shadow: var(--panel-glow);
  color: var(--panel-text);
  font-size: 2.55cqi;
  line-height: 1.22;
  letter-spacing: 0.02em;
  overflow: hidden;
}

.row { display: contents; }
.row > span { padding: 0 0.9cqi; }

.name {
  display: flex;
  align-items: baseline;
  gap: 0.8cqi;
  white-space: nowrap;
  overflow: hidden;
}
.name::after {
  content: '';
  flex: 1;
  border-bottom: 0.3cqi var(--leader) currentColor;
  transform: translateY(-0.55cqi);
  opacity: 0.8;
}

.pay {
  text-align: right;
  border-left: 0.35cqi solid var(--panel-border);
  font-variant-numeric: tabular-nums;
}

.paytable[data-bet="1"] .pay[data-col="1"],
.paytable[data-bet="2"] .pay[data-col="2"],
.paytable[data-bet="3"] .pay[data-col="3"],
.paytable[data-bet="4"] .pay[data-col="4"],
.paytable[data-bet="5"] .pay[data-col="5"] { background: var(--hot); color: var(--hot-text); }
.pay.jp { color: var(--jp-value); }

.row.hit > span { color: var(--hit); }
.row.flash > span { animation: flash 0.32s steps(1) infinite; }
@keyframes flash { 50% { background: var(--accent); color: #000; } }

.hint {
  height: 3.4cqi;
  line-height: 3.4cqi;
  text-align: center;
  font-size: 3cqi;
  color: var(--text);
}

/* ---------- Cards ---------- */

.cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4cqi;
}

.slot {
  display: flex;
  flex-direction: column;
  gap: 0.5cqi;
  padding: 0;
  border: 0;
  background: none;
}

.held {
  font-size: 2.4cqi;
  line-height: 1;
  text-align: center;
  color: var(--text);
  visibility: hidden;
}
.slot.is-held .held { visibility: visible; }

.card {
  position: relative;
  display: block;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--card-face);
  box-shadow: var(--card-edge);
  transition: transform 60ms;
}
.slot.is-held .card { transform: translateY(-0.5cqi); }
.card.red { color: var(--card-red); }
.card.black { color: var(--card-black); }
.card svg { display: block; fill: currentColor; }

.card .idx {
  position: absolute;
  left: 7%;
  top: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card .rank {
  font-family: var(--rank-font);
  font-weight: var(--rank-weight);
  font-size: 7.4cqi;
  line-height: 0.95;
  letter-spacing: -0.06em;
}
.card .rank.ten { letter-spacing: -0.12em; transform: scaleX(0.8); }
.card .idx svg { width: 4.6cqi; margin-top: 0.4cqi; }
.card .pip { position: absolute; right: 8%; bottom: 6%; width: 52%; }
.card .pip.court { right: 6%; bottom: 5%; width: 62%; }

.card.back { background: var(--card-back); box-shadow: var(--card-back-ring); }
.card.flip { animation: flip var(--flip, 90ms) ease-out; }
@keyframes flip { from { transform: scaleX(0.05); } }

.card.win { box-shadow: var(--card-edge), 0 0 0 0.55cqi var(--accent), 0 0 2cqi var(--accent); overflow: visible; }

.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.overlay[hidden] { display: none; }
.overlay span {
  padding: 0.3cqi 2cqi;
  background: var(--screen-bg);
  border-radius: calc(var(--screen-radius) * 0.5);
  font-size: 6.2cqi;
  color: var(--accent);
}

/* ---------- Gamble panel (Risiko) ---------- */

.gamble, .jpick {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-items: center;
  gap: 2cqi;
  padding: 0 1.6cqi;
  background: var(--gamble-bg);
  border: 0.45cqi solid var(--accent);
  border-radius: max(1cqi, calc(var(--screen-radius) * 0.6));
}
.gamble { grid-template-columns: 1fr auto 1fr; }
.gamble[hidden], .jpick[hidden] { display: none; }
.g-text, .jp-text { display: flex; flex-direction: column; gap: 1.2cqi; text-align: center; }
.g-title, .jp-title { font-size: 4.4cqi; line-height: 1.05; color: var(--accent); }
.g-title[data-tone="lose"], .g-title[data-tone="push"] { color: var(--text); }
.g-sub, .jp-sub { font-size: 2.5cqi; }
.g-rule { font-size: 1.7cqi; line-height: 1.3; color: var(--muted); }
#g-card { width: 18cqi; }
.g-last { display: flex; flex-direction: column; align-items: center; gap: 0.8cqi; }
.g-label { font-size: 1.7cqi; color: var(--muted); }
.g-hist { display: grid; grid-template-columns: repeat(2, 7cqi); gap: 0.8cqi; min-height: 10cqi; }
.card.mini { width: 7cqi; border-radius: calc(var(--card-radius) * 0.6); }
.card.mini .rank { font-size: 3.1cqi; }
.card.mini .idx svg { width: 1.9cqi; margin-top: 0.2cqi; }

/* ---------- Jackpot-Karten pick show ---------- */

.jpick { grid-template-columns: 1fr auto; }
.jp-title { font-size: 4.8cqi; }
.jp-sub { color: var(--muted); }
.jp-sub b { display: block; font-size: 5.2cqi; color: var(--accent); text-shadow: var(--outline); }
.jp-grid { display: grid; grid-template-columns: repeat(6, 7.4cqi); gap: 1cqi; }
.jp-card { width: 7.4cqi; }
.jp-card .pip { right: 15%; bottom: 20%; width: 70%; }
.jp-card.win { animation: pop 0.25s ease-out; }
@keyframes pop { from { transform: scale(1.25); } }
.jp-card.dim { opacity: 0.45; }

/* ---------- Meters & soft keys ---------- */

.meters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqi;
}
.meter {
  font-family: var(--meter-font);
  font-size: 5cqi;
  line-height: 1.05;
  color: var(--accent);
  white-space: nowrap;
  background: var(--meter-box);
  border: 0.3cqi solid var(--meter-border);
  padding: var(--meter-pad);
  border-radius: calc(var(--screen-radius) * 0.4);
  font-variant-numeric: tabular-nums;
}
.center {
  flex: 1;
  text-align: center;
  font-size: 1.9cqi;
  white-space: nowrap;
  color: var(--text);
}
.center.win { font-size: 4.2cqi; color: var(--accent); }

.softkeys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1cqi;
}
.softkeys button {
  padding: 0.8cqi 0.5cqi;
  border: 0.25cqi solid var(--soft-border);
  border-radius: var(--soft-radius);
  background: var(--soft-bg);
  color: var(--soft-fg);
  font-size: 1.9cqi;
  line-height: 1.1;
  box-shadow: var(--soft-shadow);
}

/* ---------- Physical button deck ---------- */

.deck {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1.2cqi;
  margin-top: 18px;
  padding: 1.8cqi 2cqi 2.4cqi;
  background: var(--deck-bg);
  border-top: 4px solid var(--deck-border);
  border-radius: 10px 10px 4px 4px;
  box-shadow: var(--deck-glow);
}
.deck button {
  aspect-ratio: 1.15;
  padding: 0;
  border: 0.25cqi solid var(--key-border);
  border-radius: var(--key-radius);
  background: var(--key-bg);
  color: var(--key-fg);
  font-size: 1.75cqi;
  line-height: 1.05;
  box-shadow: var(--key-shadow);
  transition: transform 40ms, box-shadow 40ms;
}
.deck button[data-off] {
  background: var(--key-off-bg);
  color: var(--key-off-fg);
  box-shadow: var(--key-off-shadow);
  cursor: default;
}
.deck button.lit { background: var(--key-lit-bg); color: var(--key-lit-fg); }
.deck .deal { background: var(--deal-bg); color: var(--deal-fg); }
.deck button.pressed { transform: translateY(0.5cqi); box-shadow: var(--key-press); }
.deck .g-only { display: none; } /* desktop: the hold keys turn into NEHMEN / TIEF / HOCH */

.keys {
  margin: 12px 0 0;
  text-align: center;
  font: 12px system-ui, sans-serif;
  color: #667;
}

/* ---------- Phone, portrait: one-thumb layout ---------- */

@media (orientation: portrait) and (max-width: 700px) {
  .topbar { position: static; padding: max(8px, env(safe-area-inset-top)) 8px 0; }
  .pill { font-size: 11px; padding: 6px 8px; }
  .machine {
    width: 100vw;
    height: calc(100svh - 36px - env(safe-area-inset-top));
    display: flex;
    flex-direction: column;
    padding: 8px 8px max(10px, env(safe-area-inset-bottom));
  }
  .jp-sign { grid-template-columns: 1fr; gap: 1cqi; margin-bottom: 8px; padding: 1.6cqi 2.4cqi; }
  .jp-royal { justify-content: space-between; }
  .jp-label { font-size: 3.6cqi; }
  .jp-royal .jp-value { font-size: 6cqi; }
  .jp-level { justify-content: center; }
  .jp-level svg { width: 4cqi; }
  .jp-level .jp-value { font-size: 4.2cqi; }
  .jp-news { font-size: 3.4cqi; line-height: 4.4cqi; min-height: 4.4cqi; }
  .screen {
    flex: 1;
    justify-content: space-between;
    gap: 2cqi;
    padding: 2.4cqi;
    border-radius: max(10px, var(--screen-radius));
    box-shadow: none;
  }
  html[data-theme='cafe'] .screen { box-shadow: 0 0 0 2px #19e0ff, 0 0 18px #19e0ff55; }
  html[data-theme='pixel'] .screen { border-radius: 0; }
  .paytable { grid-template-columns: 1fr auto; font-size: 4.3cqi; line-height: 1.32; }
  .pay { display: none; min-width: 17cqi; }
  .paytable[data-bet="1"] .pay[data-col="1"],
  .paytable[data-bet="2"] .pay[data-col="2"],
  .paytable[data-bet="3"] .pay[data-col="3"],
  .paytable[data-bet="4"] .pay[data-col="4"],
  .paytable[data-bet="5"] .pay[data-col="5"] { display: block; }
  .hint { font-size: 4.6cqi; height: 6cqi; line-height: 6cqi; }
  .cards { gap: 1.6cqi; }
  .held { font-size: 3.1cqi; }
  .card .rank { font-size: 9cqi; }
  .card .idx svg { width: 5.6cqi; }
  .overlay span { font-size: 8cqi; }
  .meters { flex-wrap: wrap; }
  .meter { font-size: 6.4cqi; }
  .center { order: 3; flex-basis: 100%; font-size: 3.6cqi; white-space: normal; }
  .center.win { font-size: 7cqi; }
  .softkeys { gap: 1.6cqi; }
  .softkeys button { font-size: 3cqi; padding: 1.6cqi 0.8cqi; }
  .g-title { font-size: 5.4cqi; }
  .g-sub, .jp-sub { font-size: 3.4cqi; }
  .g-rule { font-size: 2.7cqi; }
  .g-label { font-size: 2.7cqi; }
  .jp-title { font-size: 5.4cqi; }
  .jp-sub b { font-size: 6.4cqi; }
  .jp-grid { grid-template-columns: repeat(6, 7cqi); gap: 1cqi; }
  .jp-card { width: 7cqi; }
  .deck {
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: 3cqi;
    margin-top: 10px;
    padding: 3cqi;
    border-radius: 12px;
  }
  .deck [data-act="hold"] { display: none; } /* tap the cards instead */
  .deck button { aspect-ratio: auto; height: 17cqi; font-size: 4.4cqi; border-radius: max(var(--key-radius), 2.4cqi); }
  html[data-theme='pixel'] .deck button { border-radius: 0; }
  .deck .deal { font-size: 6.4cqi; }
  /* A win waits: one thumb row with NEHMEN · TIEF · HOCH · GEBEN */
  .machine.gambling .deck { grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 2.4cqi; }
  .machine.gambling .deck [data-act="betOne"],
  .machine.gambling .deck [data-act="maxBet"] { display: none; }
  .machine.gambling .deck .g-only { display: block; }
  .deck .g-only { font-size: 4.4cqi; }
  .keys { display: none; }
}

/* ---------- Phone, landscape: no hint text, short deck ---------- */

@media (orientation: landscape) and (max-height: 520px) {
  .topbar { top: 4px; }
  .machine { width: min(96vw, calc((100svh - 100px) * 1.25)); padding-top: 34px; }
  .jp-sign { margin-bottom: 8px; padding: 0.6cqi 2cqi; }
  .jp-news { display: none; }
  .deck { margin-top: 10px; padding: 1cqi 2cqi 1.4cqi; }
  .deck button { aspect-ratio: auto; height: 46px; }
  .keys { display: none; }
}