/* Casino Heist — modern neon glass UI (Orbitron / Rajdhani, cyan #00E5FF + red #FF1E4A) */
@font-face { font-family: 'Orbitron'; src: url('../assets/fonts/Orbitron.ttf') format('truetype'); font-weight: 400 900; font-display: block; }
@font-face { font-family: 'Rajdhani'; src: url('../assets/fonts/Rajdhani-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Rajdhani'; src: url('../assets/fonts/Rajdhani-Bold.ttf') format('truetype'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Cinzel'; src: url('../assets/fonts/Cinzel.ttf') format('truetype'); font-weight: 400 900; font-display: block; }
@font-face { font-family: 'Oswald'; src: url('../assets/fonts/Oswald.ttf') format('truetype'); font-weight: 200 700; font-display: block; }
:root { --cy: #00e5ff; --cy2: #7ff3ff; --red: #ff1e4a; --glass: rgba(6, 12, 22, .55); --bar: clamp(58px, 9.5vh, 92px); --k: 1; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #03060c; color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 600; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; border: 0; color: inherit; background: none; padding: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 10px rgba(0, 229, 255, .35), inset 0 0 14px rgba(0, 229, 255, .08); } 50% { box-shadow: 0 0 22px rgba(0, 229, 255, .65), inset 0 0 18px rgba(0, 229, 255, .18); } }

/* ---------- loader ---------- */
#loader { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #0a2233 0%, #03060c 70%); transition: opacity .5s; }
.loaderInner { text-align: center; width: min(560px, 88vw); }
.loaderLogo { width: 100%; filter: drop-shadow(0 0 22px rgba(0, 229, 255, .45)); }
.bar { height: 4px; border-radius: 2px; background: rgba(0, 229, 255, .12); overflow: hidden; margin: 18px auto 10px; width: 80%; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0088aa, var(--cy), #fff); box-shadow: 0 0 12px var(--cy); transition: width .2s; }
#loadTxt { font-family: 'Orbitron'; letter-spacing: .3em; font-size: 12px; color: var(--cy); text-shadow: 0 0 8px var(--cy); }
.disclaimer { margin-top: 18px; font-size: 12px; opacity: .45; letter-spacing: .2em; }
#btnStart { margin-top: 16px; font-size: 24px; padding: 12px 64px; }
.neonBtn { font-family: 'Orbitron'; font-weight: 800; letter-spacing: .18em; color: #fff; border-radius: 6px; background: linear-gradient(180deg, rgba(0, 229, 255, .22), rgba(0, 229, 255, .06)); border: 1.5px solid var(--cy); text-shadow: 0 0 10px var(--cy); animation: breathe 2.4s infinite;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.neonBtn:active { transform: scale(.97); }
.ghost { font-family: 'Orbitron'; font-weight: 700; letter-spacing: .15em; color: #bfe; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; background: rgba(255, 255, 255, .04); }

/* ---------- bottom bar: frameless full-width gradient strip (no boxes) ---------- */
#ui { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bar); z-index: 10; display: flex; align-items: center; gap: clamp(8px, 2vw, 34px); padding: 0 clamp(10px, 3vw, 48px) env(safe-area-inset-bottom);
  background: linear-gradient(180deg, rgba(3, 8, 16, 0) 0%, rgba(3, 8, 16, .62) 30%, rgba(2, 5, 10, .82) 100%); }
#ui::before { content: ''; position: absolute; left: 0; right: 0; top: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .55) 20%, #bff8ff 50%, rgba(0, 229, 255, .55) 80%, transparent);
  background-size: 200% 100%; animation: sweep 6s linear infinite; opacity: .55; }
.grp.left { display: flex; gap: clamp(2px, .8vw, 10px); align-items: center; }
.icon { width: clamp(24px, 3.6vh, 34px); height: clamp(24px, 3.6vh, 34px); color: rgba(220, 245, 255, .7); transition: color .2s, filter .2s; }
.icon:hover { color: #fff; filter: drop-shadow(0 0 6px var(--cy)); }
.icon svg { width: 100%; height: 100%; }
#btnMute .x { display: none; } body.muted #btnMute .x { display: block; } body.muted #btnMute .waves { display: none; }
.meters { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.m { display: flex; align-items: baseline; gap: .5em; line-height: 1.05; white-space: nowrap; }
.m label { font-family: 'Rajdhani'; font-weight: 700; font-size: clamp(11px, 1.9vh, 18px); letter-spacing: .08em; color: var(--cy); text-shadow: 0 0 8px rgba(0, 229, 255, .6); min-width: 4.2em; text-align: right; }
.m span { font-family: 'Orbitron'; font-weight: 700; font-size: clamp(13px, 2.3vh, 22px); color: #fff; text-shadow: 0 0 10px rgba(0, 229, 255, .35), 0 1px 0 rgba(0, 0, 0, .8); }
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.msg { font-family: 'Orbitron'; font-weight: 800; font-size: clamp(12px, 2.5vh, 24px); letter-spacing: .06em; color: #fff; text-shadow: 0 0 12px rgba(0, 229, 255, .7), 0 2px 0 rgba(0, 0, 0, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.center .m.win label { min-width: 0; color: var(--red); text-shadow: 0 0 8px rgba(255, 30, 74, .7); }
.center .m.win { opacity: 0; transition: opacity .25s; }
body.hasWin .center .m.win { opacity: 1; } body.hasWin .msg { display: none; }
.center .m.win span { font-size: clamp(16px, 3.4vh, 34px); font-weight: 900; }
.spinGrp { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 20px); }
.pm { width: clamp(30px, 5vh, 46px); height: clamp(30px, 5vh, 46px); border-radius: 50%; font-family: 'Orbitron'; font-size: clamp(18px, 3vh, 28px); line-height: 1; color: #fff;
  background: rgba(8, 16, 28, .55); box-shadow: inset 0 0 0 1.5px rgba(0, 229, 255, .75), 0 0 10px rgba(0, 229, 255, .3); display: flex; align-items: center; justify-content: center; }
.pm:active { transform: scale(.92); } .pm:disabled { opacity: .35; }
.spinWrap { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--bar) * -.55); }
#btnSpin { position: relative; width: clamp(66px, 13vh, 124px); height: clamp(66px, 13vh, 124px); border-radius: 50%; color: #eaffff; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(20, 44, 64, .85) 0%, rgba(4, 10, 20, .88) 70%); box-shadow: inset 0 0 0 2px rgba(0, 229, 255, .9), inset 0 0 24px rgba(0, 229, 255, .25), 0 0 26px rgba(0, 229, 255, .45); transition: transform .12s; }
#btnSpin .ring { position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 55%, rgba(0, 229, 255, .15) 62%, #00e5ff 78%, #fff 80%, transparent 81% 100%);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px)); mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px)); animation: spin 2.6s linear infinite; filter: drop-shadow(0 0 6px #00e5ff); }
#btnSpin .ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 180deg, transparent 0 85%, rgba(255, 30, 74, .9) 93%, transparent 94%); }
#btnSpin svg { width: 54%; height: 54%; filter: drop-shadow(0 0 6px rgba(0, 229, 255, .9)); transition: transform .5s; }
#btnSpin.busy svg { animation: spin .6s linear infinite; }
#btnSpin.busy .ring { animation-duration: .7s; }
#btnSpin:active { transform: scale(.94); }
#autoCount { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Orbitron'; font-size: clamp(16px, 3vh, 28px); font-weight: 900; color: #fff; text-shadow: 0 0 10px var(--cy); pointer-events: none; }
#autoCount:not(:empty) ~ svg, #btnSpin:has(#autoCount:not(:empty)) svg { opacity: .18; }
.under { display: flex; gap: 6px; margin-top: 4px; }
.pill { height: clamp(16px, 2.6vh, 22px); padding: 0 10px; border-radius: 11px; font-family: 'Orbitron'; font-weight: 700; font-size: clamp(8px, 1.2vh, 11px); letter-spacing: .12em; color: #dff; background: rgba(4, 10, 20, .75); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .45); display: flex; align-items: center; }
.pill svg { width: 12px; height: 12px; }
.pill.on { color: #001018; background: var(--cy); box-shadow: 0 0 12px var(--cy); }

/* ---------- side tiles (left of the grid): dark glass + neon, HUD corners ---------- */
#sideTiles { position: fixed; z-index: 9; left: 20px; top: 120px; width: 130px; display: flex; flex-direction: column; gap: calc(12px * var(--k)); font-size: calc(15px * var(--k)); }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: .7em .5em .8em; color: #fff; background: linear-gradient(160deg, rgba(14, 30, 48, .72), rgba(4, 8, 16, .78)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  clip-path: polygon(.9em 0, 100% 0, 100% calc(100% - .9em), calc(100% - .9em) 100%, 0 100%, 0 .9em); box-shadow: inset 0 0 0 1.5px rgba(0, 229, 255, .8), inset 0 0 22px rgba(0, 229, 255, .12); overflow: hidden; }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); background-size: 250% 100%; animation: sweep 4.5s linear infinite; pointer-events: none; }
.tile .tl { font-family: 'Orbitron'; font-weight: 800; font-size: 1em; letter-spacing: .06em; line-height: 1.15; color: var(--cy); text-shadow: 0 0 10px rgba(0, 229, 255, .8); }
.tile .tv { font-family: 'Orbitron'; font-weight: 900; font-size: 1.55em; margin-top: .25em; white-space: nowrap; color: #fff; text-shadow: 0 0 12px rgba(0, 229, 255, .6), 0 2px 0 #000; }
.tile .ts { font-size: .78em; letter-spacing: .08em; margin-top: .35em; color: rgba(220, 245, 255, .8); line-height: 1.15; font-weight: 700; }
.tile.buy { box-shadow: inset 0 0 0 1.5px rgba(255, 30, 74, .9), inset 0 0 24px rgba(255, 30, 74, .18); }
.tile.buy .tl { color: #ff5a78; text-shadow: 0 0 10px rgba(255, 30, 74, .9); }
.tile.buy:hover { filter: brightness(1.15); } .tile.buy:active { transform: scale(.97); }
.tile.buy.disabled { filter: grayscale(.8) brightness(.55); pointer-events: none; }
.tog { margin-top: .6em; display: flex; align-items: center; gap: .45em; padding: .25em .6em .25em .3em; border-radius: 1em; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .5); font-family: 'Orbitron'; font-weight: 800; font-size: .9em; color: #9ab; }
.tog i { width: 2.2em; height: 1.1em; border-radius: .6em; background: rgba(255, 255, 255, .12); position: relative; transition: background .2s; }
.tog i::after { content: ''; position: absolute; top: .12em; left: .12em; width: .86em; height: .86em; border-radius: 50%; background: #cde; transition: transform .2s, background .2s; }
.tog.on { color: #fff; box-shadow: inset 0 0 0 1px var(--cy), 0 0 12px rgba(0, 229, 255, .5); }
.tog.on i { background: rgba(0, 229, 255, .45); } .tog.on i::after { transform: translateX(1.1em); background: #fff; box-shadow: 0 0 8px var(--cy); }
.tile.ante.on { box-shadow: inset 0 0 0 2px var(--cy), inset 0 0 30px rgba(0, 229, 255, .3), 0 0 18px rgba(0, 229, 255, .4); }
body.busy #btnAnte { pointer-events: none; opacity: .6; }

/* ---------- popups & modals (glass) ---------- */
.pop { position: fixed; z-index: 30; right: 12px; bottom: calc(var(--bar) + 26px); padding: 14px; border-radius: 10px; background: rgba(4, 10, 20, .9); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .6), 0 0 30px rgba(0, 229, 255, .2); }
.popTitle { font-family: 'Orbitron'; font-size: 12px; letter-spacing: .3em; color: var(--cy); margin-bottom: 10px; text-align: center; }
.autoBtns { display: flex; gap: 8px; }
.autoBtns button { width: 54px; height: 40px; border-radius: 6px; background: rgba(0, 229, 255, .06); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .5); color: #fff; font-family: 'Orbitron'; font-weight: 700; font-size: 15px; }
.autoBtns button:hover { background: rgba(0, 229, 255, .2); }
.chk { display: block; margin-top: 10px; font-size: 14px; color: #cde; }
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(0, 3, 8, .7); backdrop-filter: blur(6px); }
.card { position: relative; width: min(460px, 92vw); max-height: 88vh; overflow: auto; padding: 26px 24px; text-align: center; background: linear-gradient(170deg, rgba(12, 26, 42, .92), rgba(3, 7, 14, .95));
  box-shadow: inset 0 0 0 1.5px rgba(0, 229, 255, .7), 0 0 50px rgba(0, 229, 255, .18); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.card.wide { width: min(860px, 94vw); text-align: left; }
.card h2 { margin: 0 0 8px; font-family: 'Orbitron'; font-weight: 900; font-size: 26px; letter-spacing: .1em; text-align: center; color: #fff; text-shadow: 0 0 14px var(--cy); }
.card h3 { margin: 16px 0 4px; font-family: 'Orbitron'; font-size: 13px; letter-spacing: .2em; color: var(--cy); }
.card p { margin: 4px 0; color: #d6e6ee; line-height: 1.4; font-weight: 600; }
.card .sub { text-align: center; }
.card .row { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.card .row button { padding: 12px 30px; font-size: 16px; }
.buyPrice { margin: 18px 0 4px; display: flex; flex-direction: column; align-items: center; }
.buyPrice span { font-family: 'Orbitron'; font-size: 38px; font-weight: 900; color: #fff; text-shadow: 0 0 18px var(--cy); }
.buyPrice small { opacity: .6; letter-spacing: .2em; }
.close { position: absolute; top: 8px; right: 16px; font-size: 34px; color: var(--cy); line-height: 1; }
.payGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 16px 0; }
.payItem { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; background: rgba(0, 229, 255, .04); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .22); }
.payItem img { width: 64px; height: 64px; object-fit: contain; }
.payItem table { font-size: 15px; border-collapse: collapse; }
.payItem td { padding: 1px 5px; } .payItem td:first-child { color: var(--cy); } .payItem td:last-child { color: #fff; font-family: 'Orbitron'; font-weight: 700; font-size: 13px; }
.payItem .desc { font-size: 14px; color: #cde; }

/* ---------- portrait ---------- */
@media (orientation: portrait) {
  :root { --bar: clamp(128px, 18vh, 160px); }
  #ui { flex-wrap: wrap; align-content: flex-end; justify-content: space-between; column-gap: 8px; row-gap: 0; padding: 0 12px calc(8px + env(safe-area-inset-bottom)); }
  #ui::before { top: 6%; }
  #ui .center { order: 0; flex: 1 1 100%; min-height: 1.6em; }
  .msg { font-size: clamp(11px, 1.7vh, 15px); }
  #ui .meters { order: 1; flex: 1 1 100%; flex-direction: row; justify-content: center; gap: 18px; margin-bottom: 4px; }
  .m label { min-width: 0; }
  #ui .grp.left { order: 2; }
  #ui .spinGrp { order: 3; }
  .spinWrap { margin-top: 0; }
  #btnSpin { width: clamp(64px, 8.5vh, 88px); height: clamp(64px, 8.5vh, 88px); }
  #sideTiles { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 96vw !important; gap: 6px 8px; }
  .tile { flex-direction: row; gap: .4em; padding: .45em .6em; align-items: center; white-space: nowrap; }
  .tile .tl br { display: none; } .tile .tl { font-size: .9em; } .tile.ante .tv { display: none; }
  .tile .tv { margin-top: 0; font-size: 1.15em; } .tile .ts { display: none; } .tog { margin-top: 0; }
}
@media (max-height: 460px) and (orientation: landscape) {
  :root { --bar: 56px; }
  #btnSpin { width: 68px; height: 68px; }
  .spinWrap { margin-top: -22px; }
}
.tile .tl .x2 { display: none; }

.tile .tp { font-family: 'Rajdhani'; font-weight: 700; font-size: .8em; letter-spacing: .25em; color: rgba(220, 245, 255, .75); margin-top: .45em; }
.tile .tp + .tv { margin-top: 0; }
@media (orientation: portrait) { .tile .tp { margin-top: 0; } }

/* ---------- cinematic intro + feature cards ---------- */
body.cine #ui, body.cine #sideTiles { opacity: 0; pointer-events: none; }
body.ovl #sideTiles { opacity: 0; pointer-events: none; }
#ui, #sideTiles { transition: opacity .5s; }
#cineSkip { position: fixed; z-index: 45; right: 18px; top: 16px; font-family: 'Orbitron'; font-weight: 800; font-size: 14px; letter-spacing: .2em; color: #fff; padding: 9px 18px; border-radius: 4px; background: rgba(4, 10, 20, .55); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .7), 0 0 14px rgba(0, 229, 255, .35); text-shadow: 0 0 8px var(--cy); }
#cineCards { position: fixed; inset: 0; z-index: 44; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(ellipse at 50% 45%, rgba(2, 8, 18, .55), rgba(0, 2, 6, .88)); opacity: 0; transition: opacity .35s; padding: 16px; }
#cineCards.on { opacity: 1; }
.cardsRow { display: flex; gap: clamp(10px, 2vw, 28px); justify-content: center; flex-wrap: wrap; }
.fcard { width: clamp(150px, 22vw, 280px); padding: 14px 14px 18px; text-align: center; background: linear-gradient(165deg, rgba(14, 30, 48, .8), rgba(3, 7, 14, .88)); backdrop-filter: blur(6px);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); box-shadow: inset 0 0 0 1.5px rgba(0, 229, 255, .75), inset 0 0 26px rgba(0, 229, 255, .12); transform: translateY(24px); opacity: 0; animation: cardIn .5s forwards; }
.fcard:nth-child(2) { animation-delay: .12s; } .fcard:nth-child(3) { animation-delay: .24s; }
@keyframes cardIn { to { transform: none; opacity: 1; } }
.fimg { position: relative; height: clamp(70px, 14vh, 130px); display: flex; align-items: center; justify-content: center; }
.fimg img { height: 100%; margin: 0 -8%; filter: drop-shadow(0 0 10px rgba(0, 229, 255, .45)); animation: bob 2.4s ease-in-out infinite; }
.fimg img:nth-child(2) { animation-delay: .3s; } .fimg img:nth-child(3) { animation-delay: .6s; }
@keyframes bob { 50% { transform: translateY(-6px) scale(1.04); } }
.fimg .x100 { position: absolute; bottom: 4%; font-family: 'Orbitron'; font-weight: 900; font-size: clamp(20px, 3.4vh, 34px); color: #fff; text-shadow: 0 0 12px var(--cy), 0 2px 0 #000; }
.fcard h3 { margin: 10px 0 6px; font-family: 'Orbitron'; font-weight: 800; font-size: clamp(12px, 1.9vh, 17px); letter-spacing: .08em; color: var(--cy); text-shadow: 0 0 10px rgba(0, 229, 255, .7); }
.fcard p { margin: 0; font-size: clamp(12px, 1.8vh, 16px); line-height: 1.3; color: #d8eef6; }
#cineGo { font-size: clamp(16px, 2.6vh, 22px); padding: 12px 56px; }
#cineCards .chk { margin: 0; }
@media (orientation: portrait) { .fcard { width: 86vw; display: grid; grid-template-columns: 34% 1fr; text-align: left; align-items: center; column-gap: 10px; padding: 10px; } .fcard .fimg { grid-row: span 2; height: 70px; } .fcard h3 { margin: 0; } }

/* ---------- Nocturn Play studio signature ---------- */
#studioBadge { position: fixed; z-index: 8; left: 12px; top: 10px; height: clamp(22px, 4.2vh, 38px); opacity: .5; pointer-events: none; filter: drop-shadow(0 0 6px rgba(160, 80, 255, .35)); }
body.cine #studioBadge { opacity: 0; }
#studio { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; align-items: center; justify-content: center; transition: opacity .35s; }
#studio img { width: min(560px, 70vw); opacity: 0; animation: neonOn 1.6s steps(1, end) forwards, neonGlow 1.6s ease-out forwards; }
@keyframes neonOn { 0% { opacity: 0; } 8% { opacity: .8; } 11% { opacity: .05; } 17% { opacity: .9; } 21% { opacity: .2; } 26% { opacity: 1; } 31% { opacity: .5; } 34% { opacity: 1; } 100% { opacity: 1; } }
@keyframes neonGlow { 0% { filter: brightness(.6) drop-shadow(0 0 0 rgba(170, 80, 255, 0)); } 40% { filter: brightness(1.5) drop-shadow(0 0 28px rgba(170, 80, 255, .9)); } 100% { filter: brightness(1.05) drop-shadow(0 0 14px rgba(0, 229, 255, .45)); } }
#studio.out { opacity: 0; }
.copy { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(0, 229, 255, .2); font-size: 13px; color: #9ab; margin-bottom: 8px; letter-spacing: .04em; }
.copy img { height: 34px; filter: drop-shadow(0 0 6px rgba(160, 90, 255, .45)); }

/* ===== audit mobile 20261001m1 : cibles tactiles >= 40 px, textes >= 13 px ===== */
.icon { width: clamp(40px, 4.4vh, 44px); height: clamp(40px, 4.4vh, 44px); padding: 6px; box-sizing: border-box; }
.pm { width: clamp(40px, 5vh, 46px); height: clamp(40px, 5vh, 46px); }
.pill { height: 40px; min-width: 40px; font-size: 13px; letter-spacing: .08em; padding: 0 10px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; }
.pill svg { width: 16px; height: 16px; }
.m label, .msg, .disclaimer, #loadTxt, .popTitle { font-size: max(13px, 1em); }
.disclaimer, #loadTxt { font-size: 13px; }
.popTitle { font-size: 13px; }
.chk { min-height: 40px; display: flex; align-items: center; gap: 8px; }
.chk input { width: 22px; height: 22px; }
.autoBtns button { min-width: 48px; min-height: 44px; }
.close { width: 44px; height: 44px; top: 4px; right: 8px; display: flex; align-items: center; justify-content: center; }
.payItem table { font-size: 15px; }
.fcard p { font-size: max(13px, clamp(12px, 1.8vh, 16px)); }
.fcard h3 { font-size: max(13px, clamp(12px, 1.9vh, 17px)); }
.tog { min-height: 30px; }
@media (orientation: portrait) {
  :root { --bar: clamp(150px, 20vh, 176px); }
  .msg { font-size: 13px; }
  #sideTiles { font-size: 14.5px !important; gap: 6px 8px; }
  .tile { min-height: 44px; }
  .tile .tl { font-size: 13px; } .tile .tp { font-size: 13px; letter-spacing: .12em; } .tile .tv { font-size: 15px; } .tog { font-size: 13px; }
  #btnAnte { min-height: 30px; }
}
@media (max-height: 460px) and (orientation: landscape) {
  :root { --bar: 64px; }
  #sideTiles { font-size: max(13px, calc(15px * var(--k))); }
  .tile .tl, .tile .tp, .tile .tv, .tog { font-size: max(13px, 1em); }
  .tile .tl { font-size: 13px; }
  .tile .ts { font-size: 13px; }
}
/* l'indication « maintenir ESPACE pour le turbo » n'a pas de sens sur écran tactile */
@media (hover: none) and (pointer: coarse) { #uiMsg { display: none; } #ui .center { min-height: 0; } }
/* m3 : la barre portrait contient désormais tout son contenu (plus de débordement sur la tuile « double chance ») */
@media (orientation: portrait) {
  :root { --bar: clamp(168px, 24vh, 190px); }
  #ui .spinGrp { gap: 0; } #ui .grp.left { gap: 0; }
  #ui .meters { margin-bottom: 2px; }
}
/* m4 : zone tactile de la bascule « double chance » étendue à 42 px sans changer le visuel */
#btnAnte { position: relative; } #btnAnte::after { content: ''; position: absolute; left: -4px; right: -4px; top: -6px; bottom: -6px; }