/* Mike's Lucky Club v14: welkomstbeelden, geïntegreerde Baccarat-tafel en blackjackwaardes. */

/* Eén welkomstillustratie voor login en home; de HTML bevat een lokale fallback. */
.auth-mike {
  width: min(96%, 380px);
  height: clamp(210px, 34dvh, 330px);
  object-fit: contain;
  object-position: 50% 100%;
}
.auth-art.welcome-missing::after {
  content: "♣"; position: relative; z-index: 1; display: grid; place-items: center;
  width: 150px; height: 150px; margin: auto; border: 2px solid #e6c665; border-radius: 50%;
  color: #f2d77e; background: radial-gradient(circle at 50% 36%, #236f51, #071d16 70%);
  box-shadow: 0 18px 35px rgba(0,0,0,.4); font-size: 3.4rem;
}
.host-stage { right: -4px; width: 54%; }
.host-stage img { width: 140%; height: 105%; object-fit: contain; object-position: 50% 100%; }

/* Baccarat is één filmische tafelcompositie: host, handen en bediening delen dezelfde stage. */
.baccarat-view { max-width: 740px; }
.baccarat-shell { display: block; padding-bottom: calc(4px + var(--safe-bottom)); }
.baccarat-stage {
  width: min(100%, 720px); height: clamp(560px, calc(100dvh - 108px), 760px); min-height: 0; margin: 0 auto;
  position: relative; overflow: hidden; border: 1px solid rgba(239,204,111,.34); border-radius: 30px;
  background: radial-gradient(circle at 50% 18%, rgba(235,193,84,.18), transparent 31%), #041812;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.08); isolation: isolate;
}
.baccarat-stage::after {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(2,15,11,.4), transparent 18% 82%, rgba(2,15,11,.4)), linear-gradient(0deg, rgba(2,19,14,.72), transparent 58%);
}
.baccarat-host { position: absolute; z-index: 1; inset: 0; height: auto; margin: 0; overflow: hidden; background: #061d16; }
.baccarat-host::before {
  z-index: 1; background: linear-gradient(180deg, transparent 0 39%, rgba(3,22,16,.06) 48%, rgba(3,25,18,.54) 76%, #041913 100%);
}
.baccarat-host img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 22%;
  transform: none; filter: saturate(1.03) contrast(1.02) drop-shadow(0 14px 16px rgba(0,0,0,.32)); animation: none;
}
.baccarat-host figcaption { align-items: flex-start; padding: 14px; }
.baccarat-host figcaption span, .baccarat-host figcaption small { padding: 6px 9px; font-size: .5rem; background: rgba(3,20,15,.76); }
.baccarat-table-overlay {
  position: absolute; z-index: 4; left: 14px; right: 14px; bottom: 12px; height: 57%; min-height: 300px; padding: 9px;
  display: grid; grid-template-rows: 36px minmax(116px, 1fr) auto; gap: 6px; overflow: hidden;
  border: 1px solid rgba(247,218,133,.38); border-radius: 48% 48% 22px 22px / 16% 16% 22px 22px;
  background: radial-gradient(ellipse at 50% 15%, rgba(69,170,120,.27), transparent 52%), linear-gradient(145deg, rgba(9,82,58,.94), rgba(4,43,32,.97));
  box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 0 70px rgba(0,19,13,.36), 0 18px 35px rgba(0,0,0,.38);
  backdrop-filter: blur(2px);
}
.baccarat-statusbar {
  min-height: 0; height: 36px; padding: 5px 11px; border-color: rgba(239,208,119,.28); border-radius: 13px;
  background: rgba(3,27,20,.78);
}
.baccarat-felt {
  min-height: 0; height: 100%; padding: 4px 7px; grid-template-rows: minmax(0,1fr) 1px minmax(0,1fr); gap: 2px;
  border: 1px solid rgba(244,214,133,.12); border-radius: 20px; background: radial-gradient(ellipse at 50% 38%, rgba(71,175,124,.22), transparent 54%), rgba(3,49,35,.56);
  box-shadow: inset 0 12px 28px rgba(0,0,0,.16);
}
.baccarat-hand-zone { grid-template-columns: 56px minmax(0,1fr) 35px; gap: 5px; padding: 0 5px; }
.baccarat-hand { min-height: 62px; }
.baccarat-card { width: 43px; height: 59px; }
.baccarat-control-stack { display: grid; grid-template-rows: 42px auto; gap: 6px; min-width: 0; }
.baccarat-side-selector { height: 42px; gap: 5px; }
.baccarat-side-selector button { min-height: 0; height: 42px; border-radius: 12px; }
.baccarat-action-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(145px, .8fr); gap: 7px; min-width: 0; }
.baccarat-bet-panel { min-width: 0; grid-template-columns: 42px minmax(70px,1fr) 42px; gap: 5px; padding: 5px; border-radius: 13px; background: rgba(3,26,19,.82); }
.baccarat-bet-panel > button { width: 42px; height: 42px; }
.baccarat-quick-bets { grid-column: 1 / -1; grid-template-columns: repeat(6,1fr); gap: 4px; }
.baccarat-quick-bets button { min-height: 26px; border-radius: 8px; }
.baccarat-deal-button { min-height: 0; height: 100%; margin: 0; border-radius: 14px; }

/* Waardebadges liggen op de bestaande blackjacktafel; de Mike-art blijft onaangeraakt. */
.hand-value-overlay {
  min-width: 48px; min-height: 37px; padding: 4px 7px; position: absolute; z-index: 12;
  display: grid; grid-template-columns: auto; place-items: center; border: 1px solid rgba(255,231,155,.54); border-radius: 12px;
  color: #2d1b02; background: linear-gradient(145deg, #fff1a1, #d39a31);
  box-shadow: 0 7px 18px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.65);
  font-style: normal; text-align: center; line-height: 1;
}
.hand-value-overlay small { color: #60420e; font: 800 .39rem/1 Oswald, sans-serif; letter-spacing: .08em; }
.hand-value-overlay b { margin-top: 2px; font: 900 .9rem/1 Oswald, sans-serif; }
.hand-value-overlay.is-soft { color: #10334a; background: linear-gradient(145deg,#d9f2ff,#64b7e4); border-color:#cceeff; }
.hand-value-overlay.is-soft small { color:#245a76; }
.hand-value-overlay.is-bust { color:#fff2e9; background:linear-gradient(145deg,#d7424c,#7d1822); border-color:#ff9fa6; }
.hand-value-overlay.is-bust small { color:#ffd9d9; }
.hand-value-overlay.is-21 { box-shadow:0 0 0 2px rgba(255,226,118,.18),0 7px 21px rgba(239,189,58,.42); }
.dealer-value-overlay { top: 72px; right: -10px; min-width: 55px; }
.dealer-value-overlay.is-hidden-card { color:#e9f7ff; background:linear-gradient(145deg,#286d8b,#12394d); border-color:#85cee9; }
.dealer-value-overlay.is-hidden-card small { color:#bde8f8; font-size:.34rem; }
.player-value-overlay { top: -66px; right: -12px; }
.player-seat:nth-child(4) .player-value-overlay, .player-seat:nth-child(5) .player-value-overlay { right: auto; left: -12px; }

@media (max-width: 699px) {
  .baccarat-view { max-width: 100%; }
  .baccarat-stage { width: 100%; height: clamp(442px, calc(100dvh - 96px - var(--safe-top)), 610px); border-radius: 24px; }
  .baccarat-host img { object-position: 50% 20%; }
  .baccarat-host figcaption { padding: 9px; }
  .baccarat-table-overlay { left: 6px; right: 6px; bottom: 6px; height: 62%; min-height: 278px; padding: 6px; grid-template-rows: 31px minmax(96px,1fr) auto; gap: 4px; border-radius: 42% 42% 17px 17px / 12% 12% 17px 17px; }
  .baccarat-statusbar { height:31px; padding:4px 8px; }
  .baccarat-statusbar span { font-size:.56rem; }
  .baccarat-statusbar small { font-size:.48rem; }
  .baccarat-felt { padding:2px 4px; border-radius:14px; }
  .baccarat-hand-zone { grid-template-columns: 44px minmax(0,1fr) 29px; gap:2px; padding:0 2px; }
  .baccarat-hand-zone > header small { font-size:.36rem; }
  .baccarat-hand-zone > header b { font-size:.59rem; }
  .baccarat-hand { min-height:50px; padding-left:4px; }
  .baccarat-card { width:36px; height:50px; margin-left:-8px; padding:3px; }
  .baccarat-card b { font-size:.61rem; }
  .baccarat-card i { font-size:1rem; }
  .baccarat-score { width:27px; height:27px; font-size:.7rem; }
  .baccarat-control-stack { grid-template-rows: 44px 50px; gap:4px; }
  .baccarat-side-selector { height:44px; gap:3px; }
  .baccarat-side-selector button { min-height:44px; height:44px; padding:3px; border-radius:10px; }
  .baccarat-side-selector button b { font-size:.56rem; }
  .baccarat-side-selector button small { font-size:.42rem; }
  .baccarat-action-row { grid-template-columns:minmax(0,1.18fr) minmax(104px,.82fr); gap:4px; }
  .baccarat-bet-panel { height:50px; grid-template-columns:44px minmax(50px,1fr) 44px; gap:3px; padding:3px; border-radius:11px; }
  .baccarat-bet-panel > button { width:44px; height:44px; border-radius:9px; }
  .baccarat-bet-value small { font-size:.37rem; }
  .baccarat-bet-value strong { font-size:.68rem; }
  .baccarat-bet-value strong i { width:17px; height:17px; font-size:.45rem; }
  .baccarat-quick-bets { display:none; }
  .baccarat-deal-button { min-height:44px; height:50px; padding:4px 7px; border-radius:11px; font-size:.59rem; letter-spacing:.04em; }
  .dealer-value-overlay { top:34px; right:9px; }
}

@media (max-width: 359px) {
  .auth-mike { height:clamp(185px,31dvh,255px); }
  .host-stage { right:-8px; width:52%; }
  .baccarat-stage { height:clamp(420px, calc(100dvh - 136px - var(--safe-top)), 570px); }
  .baccarat-host figcaption small { display:none; }
  .baccarat-table-overlay { height:64%; min-height:278px; }
  .baccarat-statusbar small { display:none; }
  .baccarat-statusbar { justify-content:center; }
  .baccarat-hand-zone { grid-template-columns:39px minmax(0,1fr) 26px; }
  .baccarat-card { width:33px; height:46px; }
  .baccarat-hand { min-height:46px; }
  .baccarat-score { width:24px; height:24px; font-size:.62rem; }
  .baccarat-action-row { grid-template-columns:minmax(0,1.22fr) minmax(96px,.78fr); }
  .baccarat-deal-button { font-size:.54rem; }
  .hand-value-overlay { min-width:43px; min-height:33px; padding:3px 5px; border-radius:10px; }
  .dealer-value-overlay { right:-2px; }
  .hand-value-overlay b { font-size:.8rem; }
  .player-value-overlay { top:-61px; right:-8px; }
  .player-seat:nth-child(4) .player-value-overlay, .player-seat:nth-child(5) .player-value-overlay { left:-8px; }
}

@media (min-width: 700px) {
  .baccarat-stage { height:clamp(600px, calc(100dvh - 160px), 740px); }
  .baccarat-table-overlay { height:56%; }
}

@media (prefers-reduced-motion: reduce) {
  .baccarat-host img, .hand-value-overlay { animation:none !important; transition:none !important; }
}


/* Sic Bo blijft herkenbaar in de Game Hub en gebruikt dezelfde compacte routenavigatie. */
.sicbo-view { width:100%; max-width:1180px; margin:0 auto; }
.sicbo-topbar .sicbo-back-button { flex:0 0 44px; width:44px; height:44px; margin:0; }
.sicbo-topbar .sicbo-title { flex:1 1 auto; }
.tile-sicbo {
  background:
    radial-gradient(circle at 76% 20%, rgba(255,222,128,.25), transparent 31%),
    linear-gradient(145deg,#741326,#260a12 72%);
  border-color:rgba(247,209,104,.29);
}
.tile-sicbo::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.18;
  background:repeating-linear-gradient(135deg,transparent 0 15px,rgba(255,255,255,.05) 15px 16px);
}
.sicbo-art { display:flex; align-items:center; justify-content:center; gap:5px; }
.sicbo-art i {
  width:40px; height:40px; display:grid; place-items:center; border:2px solid #edc95f; border-radius:10px;
  color:#7d1123; background:linear-gradient(145deg,#fff8e4,#ead7a6); box-shadow:0 8px 18px rgba(0,0,0,.34);
  font:900 1.55rem/1 system-ui,sans-serif; font-style:normal; transform:rotate(-9deg);
}
.sicbo-art i:nth-child(2) { transform:translateY(-8px); }
.sicbo-art i:nth-child(3) { transform:rotate(9deg); }

@media (max-width:359px) {
  .sicbo-topbar .sicbo-back-button { flex-basis:44px; min-width:44px; width:44px; min-height:44px; height:44px; }
  .sicbo-art i { width:35px; height:35px; font-size:1.3rem; }
}
.legal-inline,.profile-legal,.settings-legal{margin:10px auto 0;color:rgba(255,244,218,.72);font-size:.72rem;line-height:1.45;text-align:center}.legal-inline{max-width:38rem}.profile-legal{margin-top:14px}.settings-legal{margin:6px 0 14px;text-align:left}.legal-inline a,.profile-legal a,.settings-legal a{color:inherit;font-weight:850;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}@media(max-width:359px){.legal-inline,.profile-legal,.settings-legal{font-size:.67rem}}