/* Lucky Club: duidelijke, mobile-first presentatie voor de aanvullende spellen. */

.ng-view {
  --ng-accent:#f1cf72;
  --ng-accent-ink:#10281e;
  --ng-muted:#a9c5ba;
  --ng-line:rgba(241,207,114,.24);
  min-width:0;
  overflow-x:clip;
  color:#f8f3df;
}
.ng-view *, .ng-view *::before, .ng-view *::after { box-sizing:border-box; }
.ng-view button, .ng-view summary { font:inherit; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.ng-view button { user-select:none; -webkit-user-select:none; }
.ng-view button:focus-visible, .ng-view summary:focus-visible, .ng-view input:focus-visible {
  outline:3px solid #fff2a8;
  outline-offset:2px;
}

.ng-view-head {
  width:min(100%,1040px);
  min-height:76px;
  margin:0 auto;
  padding:10px max(12px,env(safe-area-inset-left));
  display:grid;
  grid-template-columns:44px 38px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}
.ng-head-copy { min-width:0; }
.ng-view-head h1, .ng-view-head small { display:block; margin:0; }
.ng-view-head h1 {
  overflow:hidden;
  color:#fff9e9;
  font-size:clamp(1.05rem,4.8vw,1.7rem);
  line-height:1.08;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.ng-view-head small {
  overflow:hidden;
  color:var(--ng-muted);
  font-size:.66rem;
  font-weight:850;
  letter-spacing:.09em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
.ng-head-actions { display:flex; align-items:center; gap:6px; }
.ng-back, .ng-icon-button, .ng-help-button, .ng-help-close {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid var(--ng-line);
  border-radius:14px;
  color:#f8e6ad;
  background:rgba(7,36,28,.92);
  cursor:pointer;
}
.ng-back, .ng-icon-button { font-size:1.55rem; }
.ng-help-button {
  border-color:rgba(255,230,148,.66);
  border-radius:50%;
  color:#13271f;
  background:linear-gradient(145deg,#fff1ad,#d4a336);
  box-shadow:0 7px 20px rgba(223,177,62,.25);
  font-size:1.15rem;
  font-weight:1000;
}
.ng-head-icon {
  width:36px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#102b21;
  background:linear-gradient(145deg,#fff0ad,#c99834);
  box-shadow:0 7px 20px rgba(223,177,62,.25);
}
.ng-wallet {
  min-width:58px;
  padding:8px 10px;
  border:1px solid var(--ng-line);
  border-radius:999px;
  color:#f7dda0;
  background:#08251d;
  font-weight:950;
  text-align:center;
}
.ng-wallet::before { content:"◉ "; color:#e7bb4c; }

.ng-shell {
  width:min(calc(100% - 16px),760px);
  margin:0 auto max(24px,env(safe-area-inset-bottom));
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  padding-top:clamp(185px,52vw,420px);
  overflow:hidden;
  border:1px solid var(--ng-line);
  border-radius:25px;
  background:#04251b;
  box-shadow:0 20px 45px rgba(0,0,0,.3);
}
.ng-scene, .ng-panel {
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--ng-line);
  border-radius:25px;
  box-shadow:0 20px 45px rgba(0,0,0,.3);
}
.ng-scene { height:210px; isolation:isolate; }
.ng-shell > .ng-scene {
  position:absolute;
  z-index:0;
  inset:0 0 auto;
  width:100%;
  height:auto;
  aspect-ratio:1122 / 1402;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.ng-scene::after {
  content:"";
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,rgba(3,20,15,.86));
}
.ng-scene img.ng-scene-mike {
  position:absolute;
  z-index:3;
  right:-1%;
  bottom:-10%;
  width:58%;
  height:112%;
  object-fit:contain;
  object-position:50% 100%;
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.4));
}
.ng-shell > .ng-scene img.ng-scene-mike {
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0;
  filter:none;
}
.ng-scene-tag {
  position:absolute;
  z-index:6;
  left:16px;
  bottom:14px;
  max-width:58%;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  color:#fff4c3;
  background:rgba(1,18,13,.72);
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.04em;
  backdrop-filter:blur(8px);
}
.ng-panel { padding:14px; background:linear-gradient(155deg,rgba(12,55,42,.98),rgba(4,27,21,.99)); }
.ng-shell > .ng-panel {
  z-index:2;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:linear-gradient(180deg,rgba(3,31,22,.24),rgba(4,34,25,.92) 230px,#041f17 460px);
}
.dice-poker-shell { background:#041f17; }
.keno-shell { background:#061a32; }
.coin-shell { background:#1d0b0b; }
.keno-shell > .ng-panel { background:linear-gradient(180deg,rgba(4,28,50,.22),rgba(4,28,48,.94) 240px,#06182b 480px); }
.coin-shell > .ng-panel { background:linear-gradient(180deg,rgba(35,11,10,.2),rgba(31,11,10,.94) 240px,#160908 480px); }
.ng-shell > .ng-scene .ng-scene-tag,
.ng-shell > .dice-scene .dice-neon,
.ng-shell > .dice-scene .dice-scene-table,
.ng-shell > .dice-scene .dice-lantern,
.ng-shell > .keno-scene .keno-moon,
.ng-shell > .keno-scene .keno-stars,
.ng-shell > .keno-scene > b,
.ng-shell > .coin-scene .coin-sun,
.ng-shell > .coin-scene .coin-gate { display:none; }
.ng-panel[hidden] { display:none!important; }
.ng-panel-title {
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:12px 0 8px;
}
.ng-panel-title h2, .ng-panel-title small { display:block; margin:0; }
.ng-panel-title h2 { color:#fff9e9; font-size:1.15rem; }
.ng-panel-title small { color:var(--ng-muted); font-size:.67rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.ng-panel-lead { margin:0 0 11px; color:#bdd0c8; font-size:.75rem; line-height:1.45; }
.ng-pot {
  padding:8px 10px;
  border-radius:10px;
  color:#ffe79d;
  background:rgba(230,184,63,.13);
  font-size:.75rem;
  font-weight:950;
  white-space:nowrap;
}
.ng-flow {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin:0;
  padding:0;
  list-style:none;
}
.ng-flow-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ng-flow li {
  min-width:0;
  min-height:53px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:5px 3px;
  border:1px solid rgba(190,220,208,.12);
  border-radius:11px;
  color:#89a49a;
  background:rgba(1,20,15,.34);
  text-align:center;
}
.ng-flow li b {
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#b7c8c1;
  background:#15382c;
  font-size:.65rem;
}
.ng-flow li span { overflow:hidden; max-width:100%; font-size:.59rem; font-weight:850; line-height:1.1; }
.ng-flow li.is-current { border-color:rgba(244,208,103,.7); color:#fff1b6; background:rgba(142,99,18,.22); }
.ng-flow li.is-current b { color:#14271f; background:#f1cd68; box-shadow:0 0 13px rgba(241,205,104,.3); }
.ng-flow li.is-done { color:#b9ddcf; background:rgba(20,79,60,.5); }
.ng-flow li.is-done b { color:#082219; background:#79c9aa; }
.ng-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:8px; margin-top:12px; }
.ng-primary, .ng-secondary {
  min-height:50px;
  padding:8px 10px;
  border-radius:14px;
  font-weight:950;
  line-height:1.15;
  cursor:pointer;
}
.ng-primary { border:0; color:var(--ng-accent-ink); background:linear-gradient(145deg,#ffeaa2,#d4a434); box-shadow:0 9px 24px rgba(218,168,44,.25); }
.ng-secondary { border:1px solid rgba(234,207,127,.28); color:#f4e5b7; background:#0c3529; }
.ng-primary:disabled, .ng-secondary:disabled, .ng-icon-button:disabled { cursor:not-allowed; opacity:.42; box-shadow:none; }
.ng-bet-control {
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:12px;
  padding:7px 8px 7px 12px;
  border:1px solid rgba(217,236,226,.13);
  border-radius:15px;
  background:rgba(1,20,15,.42);
  font-size:.76rem;
}
.ng-bet-control > span:first-child { min-width:0; }
.ng-bet-control strong, .ng-bet-control small { display:block; }
.ng-bet-control strong { color:#f7edd2; font-size:.76rem; }
.ng-bet-control small { margin-top:2px; color:#8fa99f; font-size:.58rem; }
.ng-stepper { display:grid; grid-template-columns:44px 64px 44px; flex:0 0 auto; overflow:hidden; border-radius:11px; background:#061d16; }
.ng-stepper button, .ng-stepper input { width:100%; min-height:44px; border:0; color:#fff1bc; background:transparent; text-align:center; font-weight:950; }
.ng-stepper button { font-size:1.2rem; cursor:pointer; }
.ng-stepper input { appearance:textfield; }
.ng-stepper input::-webkit-inner-spin-button { display:none; }
.ng-empty { margin:18px 4px; color:#b8c9c1; text-align:center; }
.ng-refresh-button { width:auto; min-width:64px; padding:0 8px; display:flex; gap:5px; font-size:1.15rem; }
.ng-refresh-button small { color:inherit; font-size:.52rem; letter-spacing:0; text-transform:none; }
.ng-quick-button {
  min-height:44px;
  padding:7px 10px;
  border:1px solid rgba(156,231,251,.35);
  border-radius:12px;
  color:#ddf8ff;
  background:#0a3c4d;
  font-size:.69rem;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

/* Toegankelijke uitleg-overlay. */
.ng-help-dialog {
  width:min(calc(100% - 20px),560px);
  max-width:none;
  max-height:calc(100dvh - 20px);
  margin:auto;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(247,216,127,.48);
  border-radius:24px;
  color:#f8f3df;
  background:#06251c;
  box-shadow:0 28px 90px rgba(0,0,0,.65);
}
.ng-help-dialog:not([open]) { display:none; }
.ng-help-dialog::backdrop { background:rgba(0,10,7,.78); backdrop-filter:blur(5px); }
.ng-help-card { max-height:calc(100dvh - 22px); padding:18px; overflow:auto; overscroll-behavior:contain; }
.ng-help-card header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ng-help-card header h2, .ng-help-card header small { display:block; margin:0; }
.ng-help-card header h2 { color:#fff7db; font-size:1.35rem; }
.ng-help-card header small { color:#d1ae52; font-size:.65rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.ng-help-card > p { margin:10px 0; color:#c7d8d1; font-size:.82rem; line-height:1.5; }
.ng-help-card h3 { margin:18px 0 8px; color:#ffe49a; font-size:.87rem; }
.ng-help-close { border-radius:50%; font-size:1.5rem; }
.ng-help-steps { display:grid; gap:7px; margin:14px 0; padding:0; list-style:none; }
.ng-help-steps li { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:start; gap:9px; padding:9px; border-radius:12px; background:rgba(13,58,44,.72); }
.ng-help-steps b:first-child { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; color:#10281e; background:#ebc65e; }
.ng-help-steps span { color:#d9e5e0; font-size:.77rem; line-height:1.45; }
.ng-rank-list { display:grid; grid-template-columns:1fr 1fr; gap:5px; counter-reset:rank; }
.ng-rank-list span { counter-increment:rank; min-height:38px; display:flex; align-items:center; gap:7px; padding:6px 8px; border:1px solid rgba(238,205,114,.14); border-radius:10px; color:#dfebe6; background:rgba(0,17,12,.4); font-size:.7rem; }
.ng-rank-list span::before { content:counter(rank); width:22px; height:22px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:#f9df94; background:#184638; font-size:.59rem; font-weight:900; }
.ng-help-card .ng-help-note { padding:10px; border-left:3px solid #e6bd52; border-radius:3px 10px 10px 3px; background:rgba(220,176,53,.09); color:#eadcae; font-size:.72rem; }
.ng-help-done { width:100%; margin-top:10px; }
.ng-paytable { margin:14px 0; border:1px solid rgba(154,226,244,.2); border-radius:13px; background:rgba(4,39,48,.45); }
.ng-paytable summary { min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:9px 12px; color:#d9f6ff; font-size:.78rem; font-weight:900; cursor:pointer; list-style:none; }
.ng-paytable summary::-webkit-details-marker { display:none; }
.ng-paytable summary::after { content:"+"; font-size:1.2rem; }
.ng-paytable[open] summary::after { content:"−"; }
.ng-paytable-list { padding:0 8px 8px; }
.ng-paytable-list p, .ng-odds-list p { display:flex; flex-direction:column; gap:2px; margin:0; padding:7px 8px; border-top:1px solid rgba(187,226,235,.1); }
.ng-paytable-list b, .ng-odds-list b { color:#f8e5ab; font-size:.69rem; }
.ng-paytable-list span, .ng-odds-list span { color:#b9d0d5; font-size:.67rem; line-height:1.35; }
.ng-odds-list { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid rgba(238,205,114,.16); border-radius:13px; }
.ng-odds-list p:nth-child(-n+2) { border-top:0; }

/* Dice Poker: neon club met duidelijke spelstappen. */
.dice-scene { background:radial-gradient(circle at 72% 30%,rgba(255,201,82,.24),transparent 24%),linear-gradient(145deg,#151249,#071d2a 54%,#052419); }
.dice-scene::before { content:""; position:absolute; z-index:1; inset:0; opacity:.2; background:repeating-linear-gradient(90deg,transparent 0 32px,rgba(87,222,255,.23) 33px 34px); transform:perspective(160px) rotateX(62deg); transform-origin:bottom; }
.dice-neon { position:absolute; z-index:2; top:20px; left:20px; color:#8feaff; font-size:clamp(1.25rem,7vw,2.4rem); font-weight:1000; line-height:.82; text-shadow:0 0 7px #1bd3ff,0 0 20px #5b36ff; transform:rotate(-4deg); }
.dice-scene-table { position:absolute; z-index:2; left:-8%; right:-8%; bottom:-38%; height:70%; border:3px solid #d8a94a; border-radius:50%; background:radial-gradient(ellipse,#175c43,#08291e 70%); box-shadow:0 -8px 25px rgba(236,193,78,.25); }
.dice-lantern { position:absolute; z-index:2; top:5px; width:25px; height:35px; border-radius:40%; background:#e84352; box-shadow:0 0 17px #ff394e; }
.dice-lantern::before { content:""; position:absolute; left:11px; top:-30px; height:30px; border-left:1px solid #dbb859; }
.dice-lantern.one { left:48%; }
.dice-lantern.two { right:5%; transform:scale(.72); }
.dice-table-list { display:grid; gap:7px; }
.dice-table-card { width:100%; min-height:68px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:9px; padding:8px 10px; border:1px solid rgba(184,223,209,.14); border-radius:15px; color:#eef9f2; background:rgba(3,27,20,.72); text-align:left; cursor:pointer; }
.dice-table-card:hover:not(:disabled) { border-color:rgba(232,196,95,.55); background:rgba(8,48,36,.82); }
.dice-table-card.is-joined { border-color:#e8c45f; box-shadow:inset 0 0 18px rgba(229,187,64,.1); }
.dice-table-card:disabled { opacity:.48; cursor:not-allowed; }
.dice-table-card strong, .dice-table-card small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dice-table-card small { margin-top:3px; color:#9dbab0; font-size:.68rem; }
.dice-table-card > b { color:#f3d378; font-size:.69rem; white-space:nowrap; }
.dice-table-mark { width:40px; height:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; color:#10251d; background:linear-gradient(145deg,#f6dc86,#b88428); font-weight:1000; }
.dice-table-mark small { margin:0; color:#314338; font-size:.46rem; font-weight:900; line-height:1; text-transform:uppercase; }
.dice-status { min-height:40px; display:grid; place-items:center; margin-bottom:8px; padding:8px 10px; border-radius:11px; color:#cfe2da; background:rgba(0,16,12,.42); font-size:.73rem; line-height:1.35; text-align:center; }
.dice-status[data-kind="win"] { color:#fff0a6; background:rgba(171,118,20,.24); }
.dice-status[data-kind="error"] { color:#ffc2bd; background:rgba(139,29,35,.25); }
.dice-seats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.dice-seat { min-width:0; min-height:76px; display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:6px; padding:7px; border:1px solid rgba(190,220,208,.12); border-radius:13px; background:rgba(2,22,16,.55); }
.dice-seat.is-me { border-color:rgba(244,208,103,.68); }
.dice-seat.is-locked { background:rgba(15,59,46,.75); }
.dice-seat-avatar { grid-row:1/3; width:31px; height:31px; display:grid; place-items:center; border-radius:50%; color:#11281f; background:#d5b456; font-weight:1000; }
.dice-seat strong, .dice-seat small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dice-seat strong { font-size:.7rem; }
.dice-seat small { color:#9eb8ae; font-size:.58rem; }
.dice-seat > b { grid-column:1/3; color:#f5db8b; font-size:.88rem; letter-spacing:.06em; }
.dice-seat > em { grid-column:1/3; color:#9bc9b8; font-size:.58rem; font-style:normal; }
.dice-play-hint { margin:10px 0 0; color:#dce8e3; font-size:.71rem; line-height:1.4; text-align:center; }
.dice-hand { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; margin-top:9px; }
.dice-hand button { min-width:0; min-height:76px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:4px 1px; border:2px solid transparent; border-radius:13px; color:#18231e; background:linear-gradient(145deg,#fffdf4,#d8d3bd); cursor:pointer; box-shadow:0 7px 14px rgba(0,0,0,.24); }
.dice-hand button span { font-size:clamp(1.75rem,10vw,2.65rem); line-height:.75; }
.dice-hand button small { overflow:hidden; max-width:100%; color:#506158; font-size:.5rem; font-weight:800; white-space:nowrap; }
.dice-hand button.is-held { border-color:#ffcf49; color:#09261a; background:linear-gradient(145deg,#fff3b0,#e4ba3d); transform:translateY(-4px); box-shadow:0 9px 18px rgba(239,188,43,.28); }
.dice-hand button:disabled:not(.is-held) { opacity:.74; }
.dice-hand-meta { display:flex; justify-content:space-between; gap:8px; margin-top:9px; font-size:.69rem; }
.dice-hand-meta span { color:#9eb7ad; }

/* Keno: helder nummerbord met keuze, trekking en hit-legenda. */
.keno-view { --ng-accent:#9fe8ff; }
.keno-scene { background:linear-gradient(155deg,#071536,#102964 58%,#184b5d); }
.keno-scene img.ng-scene-mike { right:-2%; width:60%; }
.keno-scene b { position:absolute; z-index:4; left:18px; bottom:58px; color:#d7f6ff; font-size:clamp(1.45rem,8vw,2.7rem); letter-spacing:.08em; text-shadow:0 0 18px #39bde5; }
.keno-moon { position:absolute; z-index:1; left:14%; top:15%; width:70px; aspect-ratio:1; border-radius:50%; background:#eef9d4; box-shadow:0 0 45px #a2dbea; }
.keno-stars { position:absolute; z-index:2; inset:0; background-image:radial-gradient(circle,#fff 1px,transparent 1.5px); background-size:29px 29px; opacity:.5; }
.keno-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.keno-grid button { aspect-ratio:1; min-width:0; min-height:45px; border:1px solid rgba(155,222,239,.22); border-radius:10px; color:#d9f7ff; background:#0a3040; font-size:.72rem; font-weight:950; cursor:pointer; }
.keno-grid button:disabled { cursor:wait; opacity:.72; }
.keno-grid button.is-picked { border-color:#8ee8ff; color:#052533; background:#9eeaff; box-shadow:0 0 12px rgba(80,211,246,.3); }
.keno-grid button.is-drawn { outline:2px solid #fff; outline-offset:-3px; }
.keno-grid button.is-hit { color:#342100; background:#ffd766; border-color:#fff0a6; animation:ng-pop .32s ease; }
.keno-selection { min-height:45px; display:flex; align-items:center; gap:8px; margin-top:9px; padding:7px 9px; border:1px solid rgba(152,223,241,.12); border-radius:11px; background:rgba(2,28,36,.56); }
.keno-selection strong { flex:0 0 auto; color:#c9edf6; font-size:.64rem; text-transform:uppercase; }
.keno-selection span { overflow:hidden; color:#fff0b3; font-size:.69rem; font-weight:850; line-height:1.35; text-overflow:ellipsis; }
.keno-legend { display:flex; flex-wrap:wrap; gap:9px; margin:8px 2px; color:#aac7ce; font-size:.59rem; }
.keno-legend span { display:flex; align-items:center; gap:4px; }
.keno-legend i { width:13px; height:13px; display:inline-block; border:1px solid #8ee8ff; border-radius:4px; background:#9eeaff; }
.keno-legend i.is-drawn { border:2px solid #fff; background:#0a3040; }
.keno-legend i.is-hit { border-color:#fff0a6; background:#ffd766; }
.keno-result { min-height:58px; display:flex; flex-direction:column; justify-content:center; margin-top:8px; padding:9px 11px; border-radius:12px; background:rgba(3,25,34,.65); }
.keno-result strong, .keno-result span { display:block; }
.keno-result strong { font-size:.84rem; }
.keno-result span { margin-top:3px; color:#a7c8d0; font-size:.68rem; line-height:1.35; }
.keno-result[data-kind="win"] { color:#ffe78e; background:rgba(141,95,13,.28); }
.keno-result[data-kind="error"] { color:#ffc4c0; }
.keno-draw { min-height:38px; display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.keno-draw:empty { display:none; }
.keno-draw span { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; color:#d8f5fa; background:#0d4352; font-size:.63rem; font-weight:950; animation:ng-pop .22s ease; }
.keno-draw span.is-hit { color:#332100; background:#ffd667; }

/* Coin Ladder: de kans en het tokenbedrag zijn op ieder moment zichtbaar. */
.coin-ladder-view { --ng-accent:#ffcc61; }
.coin-scene { background:radial-gradient(circle at 50% 30%,#f55f45,transparent 23%),linear-gradient(155deg,#38132e,#7a292b 58%,#1f1c2c); }
.coin-scene img.ng-scene-mike { right:5%; width:50%; height:108%; }
.coin-sun { position:absolute; z-index:1; left:13%; top:16%; width:84px; aspect-ratio:1; border-radius:50%; background:#ffd474; box-shadow:0 0 40px #f05c45; }
.coin-gate { position:absolute; z-index:2; bottom:-8px; width:18px; height:78%; background:#c43c35; box-shadow:0 0 0 5px #2b1622; }
.coin-gate::before { content:""; position:absolute; top:8px; width:82px; height:12px; background:#d34a3f; box-shadow:0 -10px #2b1622; }
.coin-gate.left { left:9%; }
.coin-gate.right { right:8%; }
.coin-gate.right::before { right:0; }
.ng-risk-line { margin:0 0 9px; padding:8px 10px; border-left:3px solid #f0bd4f; border-radius:4px 10px 10px 4px; color:#d8c99f; background:rgba(198,133,27,.12); font-size:.68rem; line-height:1.4; }
.ng-risk-line strong { color:#ffe493; }
.coin-steps { min-height:228px; display:flex; flex-direction:column; gap:4px; margin:0; padding:0; list-style:none; }
.coin-steps li { min-height:34px; display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; column-gap:7px; padding:5px 9px; border:1px solid rgba(238,190,78,.14); border-radius:9px; color:#aaafa7; background:rgba(2,22,17,.48); transition:.2s ease; }
.coin-steps li > span:first-child { width:23px; height:23px; display:grid; place-items:center; border-radius:50%; background:#17362a; font-size:.67rem; }
.coin-steps li > span:nth-child(2) { min-width:0; }
.coin-steps li strong, .coin-steps li small { display:block; }
.coin-steps li strong { color:inherit; font-size:.72rem; }
.coin-steps li small { margin-top:1px; color:#7f9b90; font-size:.54rem; }
.coin-steps li > b { color:#e7cb7d; font-size:.72rem; }
.coin-steps li.is-cleared { color:#fff0a7; border-color:#d9ad45; background:rgba(143,98,17,.23); }
.coin-steps li.is-cleared small { color:#d9c991; }
.coin-steps li.is-next { color:#fff; border-color:#f4d36d; transform:translateX(4px); box-shadow:0 0 16px rgba(224,178,58,.15); }
.coin-steps li.is-next > span:first-child { color:#13271e; background:#f1cb5e; }
.coin-stage { min-height:110px; display:grid; grid-template-columns:72px minmax(0,1fr); align-content:center; column-gap:10px; margin-top:9px; padding:10px; border-radius:15px; background:radial-gradient(circle at 22% 50%,rgba(246,196,62,.13),transparent 28%),rgba(3,22,17,.58); }
.coin-stage strong, .coin-stage small { display:block; }
.coin-stage strong { align-self:end; font-size:.92rem; }
.coin-stage small { align-self:start; margin-top:3px; color:#a9bdb5; font-size:.67rem; line-height:1.35; }
.coin-stage[data-kind="win"] strong { color:#ffe48a; }
.coin-stage[data-kind="loss"] strong, .coin-stage[data-kind="error"] strong { color:#ffaaa4; }
.coin-token { grid-row:1/3; width:66px; aspect-ratio:1; display:grid; place-items:center; border:5px double #f3cf68; border-radius:50%; color:#342207; background:radial-gradient(circle at 35% 30%,#fff1a3,#d89823 68%,#75400a); box-shadow:0 8px 20px rgba(0,0,0,.35); font-size:1.45rem; font-weight:1000; transform-style:preserve-3d; }
.coin-token.is-jade { border-color:#8de3c1; color:#05271c; background:radial-gradient(circle at 35% 30%,#d5ffeb,#45b98b 68%,#0a573d); }
.coin-token.is-flipping { animation:coin-flip .54s cubic-bezier(.2,.7,.2,1); }
.coin-choices { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.coin-choices[hidden] { display:none; }
.coin-choices button { min-height:68px; display:flex; align-items:center; justify-content:center; gap:8px; padding:6px; border:1px solid rgba(246,209,107,.3); border-radius:14px; color:#f9e7b1; background:#17382c; cursor:pointer; }
.coin-choices i { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:#352204; background:#e5b949; font-size:1.05rem; font-style:normal; }
.coin-choices button + button i { color:#06271c; background:#65c49e; }
.coin-choices span, .coin-choices strong, .coin-choices small { display:block; min-width:0; text-align:left; }
.coin-choices strong { font-size:.74rem; }
.coin-choices small { margin-top:2px; color:#a9c2b8; font-size:.55rem; }

@keyframes ng-pop { 0% { transform:scale(.6); } 70% { transform:scale(1.13); } 100% { transform:scale(1); } }
@keyframes coin-flip { 0% { transform:rotateY(0) translateY(0); } 50% { transform:rotateY(900deg) translateY(-22px); } 100% { transform:rotateY(1800deg) translateY(0); } }

@media (min-width:420px) {
  .keno-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .ng-flow li span { font-size:.64rem; }
}
@media (min-width:760px) {
  .ng-shell { padding-top:395px; }
  .ng-shell > .ng-panel { padding:24px 50px 38px; }
  .dice-seats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .keno-grid button { min-height:45px; font-size:.8rem; }
  .dice-room { min-height:600px; }
}
@media (max-width:380px) {
  .ng-view-head { grid-template-columns:44px minmax(0,1fr) auto; gap:6px; }
  .ng-head-icon { display:none; }
  .ng-view-head h1 { font-size:1rem; }
  .ng-wallet { min-width:50px; padding-inline:7px; font-size:.73rem; }
  .ng-back, .ng-icon-button, .ng-help-button, .ng-help-close { min-width:44px; min-height:44px; }
}
@media (max-width:359px) {
  .ng-shell { width:calc(100% - 10px); }
  .ng-panel { padding:11px; border-radius:20px; }
  .ng-flow { gap:3px; }
  .ng-flow li { min-height:50px; padding-inline:1px; }
  .ng-flow li span { font-size:.54rem; }
  .dice-hand { gap:3px; }
  .dice-hand button { min-height:70px; }
  .dice-hand button small { font-size:.45rem; }
  .dice-seat { padding:6px; }
  .keno-grid { gap:3px; }
  .keno-grid button { border-radius:8px; }
  .ng-stepper { grid-template-columns:44px 56px 44px; }
  .ng-rank-list, .ng-odds-list { grid-template-columns:1fr; }
  .ng-odds-list p:nth-child(2) { border-top:1px solid rgba(187,226,235,.1); }
}
@media (prefers-reduced-motion:reduce) {
  .ng-view *, .ng-view *::before, .ng-view *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .dice-hand button.is-held, .coin-steps li.is-next { transform:none; }
}

/* Speltegels in het spellenoverzicht. */
.tile-dice-poker { background:linear-gradient(145deg,#123d35,#061c1a); color:#fff; }
.tile-keno { background:linear-gradient(145deg,#182b58,#091226); color:#fff; }
.tile-coin-ladder { background:linear-gradient(145deg,#6d2418,#27100d); color:#fff; }
.tile-feather-fleet { background:linear-gradient(145deg,#14515a,#08272e); color:#fff; }
.dice-poker-art, .keno-tile-art, .coin-ladder-art, .feather-fleet-art {
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:hidden;
  border:1px solid rgba(255,229,151,.2);
  border-radius:14px;
  background:radial-gradient(circle at 50% 30%,rgba(255,236,174,.16),transparent 55%),rgba(1,18,15,.28);
  box-shadow:inset 0 -20px 25px rgba(0,0,0,.18),0 8px 18px rgba(0,0,0,.18);
}
.dice-poker-art i, .keno-tile-art i, .keno-tile-art b, .coin-ladder-art i, .coin-ladder-art b { display:grid; place-items:center; min-width:38px; height:44px; padding:0 7px; border-radius:10px; color:#172424; background:rgba(255,255,255,.92); box-shadow:0 7px 18px rgba(0,0,0,.25); font:900 1.25rem/1 system-ui,sans-serif; font-style:normal; }
.dice-poker-art i { transform:rotate(-8deg); }
.dice-poker-art i + i { transform:rotate(8deg); }
.keno-tile-art b { border-radius:50%; background:#f2cb61; }
.coin-ladder-art b { min-width:28px; color:#f2cb61; background:transparent; box-shadow:none; }
.feather-fleet-art::before, .feather-fleet-art::after { display:grid; place-items:center; width:48px; height:48px; border-radius:50% 50% 44% 56%; color:#fff1ad; background:#175b62; box-shadow:0 8px 18px rgba(0,0,0,.25); font:900 1.35rem/1 system-ui,sans-serif; }
.feather-fleet-art::before { content:"⚓"; transform:rotate(-8deg); }
.feather-fleet-art::after { content:"✦"; margin-left:-5px; color:#17362d; background:#f0ca61; transform:rotate(9deg); }
@media (max-width:359px) {
  .dice-poker-art i, .keno-tile-art i, .keno-tile-art b, .coin-ladder-art i, .coin-ladder-art b { min-width:32px; height:38px; font-size:1.05rem; }
}