/* FREAK FUSION — A GambleCrew Original. Mobile-first; landscape/desktop puts the HUD next to the board. */
:root {
  --ink: #160a1f;
  --bg: #120819;
  --panel: #22102f;
  --panel2: #2d1640;
  --line: rgba(255, 255, 255, .1);
  --text: #f6efff;
  --muted: #b9a6cf;
  --tom: #c86bff;
  --hagen: #4dffc8;
  --gold: #ffd84a;
  --gold2: #ffb41f;
  --slime: #b8ff4a;
  --danger: #ff4f6a;
  --display: "Lilita One", "Luckiest Guy", system-ui, sans-serif;
  --ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--ui); overflow: hidden; overscroll-behavior: none; }
body { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- background: freak carnival at night */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.bg > div { position: absolute; inset: 0; transition: opacity 1.2s, background 1.2s; }
.bg-sky { background: radial-gradient(120% 80% at 50% 0%, #3b1658 0%, #1d0b2b 45%, #0d0512 100%); }
.bg-tent {
  background:
    repeating-conic-gradient(from 0deg at 50% -30%, rgba(200, 107, 255, .09) 0 7deg, transparent 7deg 14deg),
    radial-gradient(60% 40% at 50% 105%, rgba(77, 255, 200, .14), transparent 70%);
}
.bg-glow { filter: blur(40px); opacity: .55; }
.bg-glow.g1 { background: radial-gradient(35% 30% at 12% 30%, rgba(200, 107, 255, .55), transparent 70%); animation: drift 14s ease-in-out infinite alternate; }
.bg-glow.g2 { background: radial-gradient(35% 30% at 88% 70%, rgba(77, 255, 200, .4), transparent 70%); animation: drift 17s ease-in-out infinite alternate-reverse; }
.bg-lights { background-image: radial-gradient(circle, rgba(255, 216, 74, .9) 0 2px, transparent 3px); background-size: 46px 46px; mask-image: linear-gradient(#000 0 6%, transparent 9%); -webkit-mask-image: linear-gradient(#000 0 6%, transparent 9%); animation: twinkle 2.4s steps(2) infinite; }
.bg-vignette { background: radial-gradient(90% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, .7)); }
body.mood-t1 .bg-sky { background: radial-gradient(120% 80% at 50% 0%, #26306e 0%, #170f3a 50%, #0a0616 100%); }
body.mood-t2 .bg-sky { background: radial-gradient(120% 80% at 50% 0%, #5c1a7e 0%, #2a0c44 50%, #0e0418 100%); }
body.mood-t3 .bg-sky { background: radial-gradient(120% 80% at 50% 0%, #7a1030 0%, #3a0820 50%, #120308 100%); }
body.mood-t3 .bg-tent { background: repeating-conic-gradient(from 0deg at 50% -30%, rgba(255, 74, 58, .12) 0 7deg, transparent 7deg 14deg); }
@keyframes drift { to { transform: translate(4%, -3%) scale(1.08); } }
@keyframes twinkle { 50% { opacity: .45; } }

/* ---------------------------------------------------------------- loading */
.loading { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.load-logo { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 10px 40px rgba(200, 107, 255, .45); }
.load-title { font-family: var(--display); font-size: clamp(44px, 13vw, 84px); line-height: .9; display: flex; flex-direction: column; letter-spacing: 1px; }
.load-title span:first-child { color: var(--tom); text-shadow: 0 4px 0 var(--ink), 0 0 30px rgba(200, 107, 255, .7); }
.load-title span:last-child { color: var(--hagen); text-shadow: 0 4px 0 var(--ink), 0 0 30px rgba(77, 255, 200, .6); }
.load-hero { display: flex; align-items: center; gap: 4px; }
.load-hero img { width: clamp(64px, 22vw, 130px); height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); }
.load-hero img:not([src]) { visibility: hidden; }
#heroTom { transform: rotate(-8deg); animation: bob 2.2s ease-in-out infinite; }
#heroHagen { transform: rotate(8deg); animation: bob 2.6s ease-in-out infinite reverse; }
@keyframes bob { 50% { translate: 0 -6px; } }
.load-track { width: min(280px, 70vw); height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.load-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--tom), var(--hagen)); transition: width .2s; }
.load-status { color: var(--muted); font-weight: 800; min-height: 1.3em; }
.load-fine { color: var(--muted); font-size: 12px; max-width: 320px; opacity: .8; }

.btn-main {
  font-family: var(--display); font-size: 22px; letter-spacing: .5px; padding: 12px 34px; border-radius: 16px; color: var(--ink);
  background: linear-gradient(#fff28a, var(--gold) 40%, var(--gold2)); box-shadow: 0 5px 0 #a8650a, 0 10px 30px rgba(255, 180, 31, .4);
}
.btn-main:active { transform: translateY(3px); box-shadow: 0 2px 0 #a8650a; }
.btn-ghost { padding: 10px 18px; border-radius: 14px; font-weight: 900; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); }

/* ---------------------------------------------------------------- app layout (portrait first) */
.app {
  position: fixed; inset: 0; z-index: 1; display: grid;
  grid-template-rows: auto 1fr auto; grid-template-areas: "top" "stage" "hud";
  padding-top: var(--safe-t);
}
.topbar { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px; }
.brand { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; justify-content: center; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; }
.brand-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; line-height: 1; }
.brand-title b { font-family: var(--display); font-weight: 400; font-size: 24px; text-shadow: 0 2px 0 var(--ink); }
.brand-title b:first-child { color: var(--tom); }
.brand-title b:nth-child(2) { color: var(--hagen); }
.brand-title small { flex-basis: 100%; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 900; margin-top: 2px; }
.top-actions { display: flex; gap: 6px; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); }
.icon-btn:active { transform: scale(.94); }
#soundBtn .snd-off { display: none; }
#soundBtn.muted .snd-on { display: none; }
#soundBtn.muted .snd-off { display: inline; }

.stage { grid-area: stage; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 4px 10px; gap: 6px; }
.board-wrap { position: relative; flex: 1 1 0; width: 100%; min-height: 0; }
.board-wrap canvas { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; touch-action: none; }
.board-frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; border-radius: 22px; pointer-events: none;
  width: var(--board, 300px); height: var(--board, 300px);
  background: linear-gradient(#2b1440, #150a20);
  box-shadow: 0 0 0 3px #3d1d58, 0 0 0 6px #0f0716, 0 0 0 8px rgba(200, 107, 255, .5), 0 0 50px rgba(200, 107, 255, .35), inset 0 0 40px rgba(0, 0, 0, .6);
  transition: box-shadow .8s;
}
body.mood-t1 .board-frame { box-shadow: 0 0 0 3px #26306e, 0 0 0 6px #0f0716, 0 0 0 8px rgba(107, 140, 255, .7), 0 0 60px rgba(107, 140, 255, .45), inset 0 0 40px rgba(0, 0, 0, .6); }
body.mood-t2 .board-frame { box-shadow: 0 0 0 3px #5c1a7e, 0 0 0 6px #0f0716, 0 0 0 8px rgba(255, 216, 74, .8), 0 0 70px rgba(200, 107, 255, .6), inset 0 0 40px rgba(0, 0, 0, .6); }
body.mood-t3 .board-frame { box-shadow: 0 0 0 3px #7a1030, 0 0 0 6px #0f0716, 0 0 0 8px rgba(255, 74, 58, .9), 0 0 80px rgba(255, 74, 58, .6), inset 0 0 40px rgba(0, 0, 0, .6); }

.msg { min-height: 22px; font-weight: 900; font-size: 14px; color: var(--muted); text-align: center; letter-spacing: .3px; }
.msg.hot { color: var(--gold); }

/* free spins bar */
.fs-bar { display: flex; align-items: stretch; gap: 8px; width: min(100%, var(--board, 360px)); }
.fs-bar > div { flex: 1; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 12px; padding: 4px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fs-bar span { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 900; }
.fs-bar b { font-family: var(--display); font-weight: 400; font-size: 20px; }
.fs-name { font-family: var(--display); font-size: 18px; color: var(--gold); text-shadow: 0 2px 0 var(--ink); }

/* ---------------------------------------------------------------- HUD */
.hud { grid-area: hud; position: relative; padding: 6px 10px calc(10px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .55) 30%); }
.meters { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 6px; }
.meter { background: rgba(0, 0, 0, .38); border: 1px solid var(--line); border-radius: 14px; padding: 5px 8px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.meter span { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 900; }
.meter b { font-family: var(--display); font-weight: 400; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.meter.win b { color: var(--gold); }
.meter.win.pop b { animation: pop .35s; }
@keyframes pop { 40% { transform: scale(1.25); } }
.bet-row { display: flex; align-items: center; gap: 6px; }
.mini { width: 28px; height: 28px; border-radius: 9px; background: rgba(255, 255, 255, .1); font-weight: 900; font-size: 18px; line-height: 1; }

.controls { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; gap: 6px; }
.ctl { height: 54px; border-radius: 16px; background: linear-gradient(#3a1d52, #24113a); border: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 22px; box-shadow: 0 3px 0 #10071a; }
.ctl span { font-size: 11px; font-weight: 900; letter-spacing: .4px; }
.ctl:active { transform: translateY(2px); box-shadow: 0 1px 0 #10071a; }
.ctl.on { background: linear-gradient(#0f6d58, #0a3f36); border-color: var(--hagen); }
#buyBtn { background: linear-gradient(#7b3fbf, #4b1677); border-color: var(--tom); }

.spin {
  position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #fff59a, var(--gold) 45%, var(--gold2) 80%);
  box-shadow: 0 5px 0 #a8650a, 0 0 0 5px rgba(22, 10, 31, .8), 0 0 30px rgba(255, 216, 74, .55);
  color: var(--ink); transition: transform .12s;
}
.spin:active { transform: scale(.95); }
.spin-ico { width: 44px; height: 44px; stroke-width: 5; }
.spin-skip { display: none; font-family: var(--display); font-size: 22px; }
.spin-auto { position: absolute; bottom: -4px; right: -4px; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--hagen); color: var(--ink); font-weight: 900; font-size: 13px; display: grid; place-items: center; }
.spin-auto:empty { display: none; }
.spin.busy .spin-ico { animation: spinning .8s linear infinite; }
.spin.can-skip .spin-ico { display: none; }
.spin.can-skip .spin-skip { display: block; }
.spin.can-skip { background: radial-gradient(circle at 50% 35%, #ffd0f0, #ff6fc0 50%, #b02a7a); box-shadow: 0 5px 0 #6d1049, 0 0 0 5px rgba(22, 10, 31, .8), 0 0 30px rgba(255, 111, 192, .55); }
.spin.auto-on { box-shadow: 0 5px 0 #0b5e4b, 0 0 0 5px rgba(22, 10, 31, .8), 0 0 30px rgba(77, 255, 200, .6); }
@keyframes spinning { to { transform: rotate(360deg); } }
.feature-chip { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 900; background: var(--hagen); color: var(--ink); box-shadow: 0 4px 14px rgba(77, 255, 200, .5); white-space: nowrap; }

/* ---------------------------------------------------------------- overlays in the board */
.overlay { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; pointer-events: auto; }
.ov { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; width: var(--board, 320px); height: var(--board, 320px); border-radius: 22px; background: rgba(12, 5, 18, .82); backdrop-filter: blur(3px); opacity: 0; transform: scale(.9); transition: opacity .25s, transform .35s cubic-bezier(.2, 1.6, .4, 1); overflow: hidden; padding: 16px; }
.ov.in { opacity: 1; transform: none; }
.ov.banner { background: transparent; backdrop-filter: none; }
.ov-burst { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255, 216, 74, .16) 0 10deg, transparent 10deg 20deg); animation: rot 9s linear infinite; z-index: -1; }
.ov-burst.t1 { background: repeating-conic-gradient(from 0deg, rgba(107, 140, 255, .2) 0 10deg, transparent 10deg 20deg); }
.ov-burst.t2 { background: repeating-conic-gradient(from 0deg, rgba(200, 107, 255, .24) 0 10deg, transparent 10deg 20deg); }
.ov-burst.t3 { background: repeating-conic-gradient(from 0deg, rgba(255, 74, 58, .26) 0 10deg, transparent 10deg 20deg); }
@keyframes rot { to { transform: rotate(360deg); } }
.ov-kicker { font-weight: 900; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; color: var(--slime); }
.ov-title { font-family: var(--display); font-size: clamp(34px, 11vw, 64px); line-height: .95; color: var(--gold); text-shadow: 0 4px 0 var(--ink), 0 0 26px rgba(255, 216, 74, .6); }
.ov-title.t1 { color: #9db2ff; text-shadow: 0 4px 0 var(--ink), 0 0 26px rgba(107, 140, 255, .8); }
.ov-title.t2 { color: var(--tom); text-shadow: 0 4px 0 var(--ink), 0 0 26px rgba(200, 107, 255, .9); }
.ov-title.t3 { color: #ff5a48; text-shadow: 0 4px 0 var(--ink), 0 0 30px rgba(255, 74, 58, 1); animation: quake .25s infinite; }
@keyframes quake { 25% { transform: translate(1px, -1px) rotate(-.5deg); } 75% { transform: translate(-1px, 1px) rotate(.5deg); } }
.ov-spins { font-size: 18px; font-weight: 900; } .ov-spins b { font-family: var(--display); font-size: 36px; color: var(--hagen); font-weight: 400; }
.ov-sub { color: var(--muted); font-weight: 800; font-size: 13px; max-width: 90%; }
.ov-tap { margin-top: 10px; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.ov-amount { font-family: var(--display); font-size: clamp(36px, 12vw, 70px); color: #fff; text-shadow: 0 4px 0 var(--ink), 0 0 20px rgba(255, 255, 255, .4); }
.ov-x { font-weight: 900; color: var(--gold); font-size: 16px; }
.ov-title.win.mega { color: #ff9a3c; } .ov-title.win.epic { color: var(--tom); } .ov-title.win.monster { color: var(--hagen); animation: quake .2s infinite; } .ov-title.win.max { color: #ff5a48; animation: quake .15s infinite; }
.ov-banner { font-family: var(--display); font-size: clamp(30px, 9vw, 54px); color: var(--gold); text-shadow: 0 4px 0 var(--ink), 0 0 30px rgba(255, 216, 74, .8); }

/* ---------------------------------------------------------------- sheets (panels) */
.sheet-root { position: fixed; inset: 0; z-index: 30; background: rgba(5, 2, 8, .6); display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(2px); }
.sheet { width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; background: linear-gradient(var(--panel2), var(--panel)); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 16px 16px calc(18px + var(--safe-b)); animation: up .25s cubic-bezier(.2, 1.2, .4, 1); -webkit-user-select: text; user-select: text; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet h2 { font-family: var(--display); font-weight: 400; font-size: 28px; margin: 0 0 4px; color: var(--gold); }
.sheet h3 { font-size: 15px; margin: 18px 0 8px; color: var(--hagen); text-transform: uppercase; letter-spacing: 1px; }
.sheet p, .sheet li { color: #ddd0ee; font-size: 14px; line-height: 1.45; font-weight: 700; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: -16px; background: var(--panel2); margin: -16px -16px 8px; padding: 14px 16px 8px; z-index: 1; }
.close { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 20px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card { border-radius: 16px; padding: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.card.sel { border-color: var(--hagen); box-shadow: 0 0 0 2px var(--hagen) inset; }
.card h4 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--gold); }
.card .price { font-family: var(--display); font-size: 22px; color: #fff; }
.card .tag { font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.card p { margin: 0; font-size: 12.5px; }
.card .vol { font-size: 11px; font-weight: 900; color: var(--slime); }
.confirm { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 216, 74, .08); border: 1px solid rgba(255, 216, 74, .4); display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row > .btn-main, .row > .btn-ghost { flex: 1; }
.pt { width: 100%; border-collapse: collapse; font-size: 13px; }
.pt th, .pt td { padding: 4px 3px; text-align: right; border-bottom: 1px solid var(--line); font-weight: 800; }
.pt th:first-child, .pt td:first-child { text-align: left; }
.pt img { width: 34px; height: 34px; vertical-align: middle; }
.pt thead th { color: var(--muted); font-size: 11px; }
.sym-row { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.sym-row img { width: 64px; height: 64px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); font-weight: 900; }
.chip.on { background: var(--hagen); color: var(--ink); }
.field { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 800; }
.field input[type=number] { width: 120px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); color: var(--text); font: inherit; }
.field input[type=range] { width: 140px; accent-color: var(--hagen); }
.switch { width: 46px; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, .15); position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch.on { background: var(--hagen); } .switch.on::after { left: 23px; }
.hist { list-style: none; padding: 0; margin: 0; }
.hist li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hist .pos { color: var(--hagen); } .hist small { color: var(--muted); font-size: 11px; }
.fine { font-size: 12px !important; color: var(--muted) !important; }

.toast { position: fixed; z-index: 40; left: 50%; top: calc(64px + var(--safe-t)); transform: translateX(-50%); max-width: 90vw; padding: 10px 16px; border-radius: 14px; background: #2b0f1c; border: 1px solid var(--danger); font-weight: 900; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.toast.ok { background: #0b2b24; border-color: var(--hagen); }

/* ---------------------------------------------------------------- offer cards (bonus buy / feature spins) */
.sheet { position: relative; }
.cards.offers { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.fcard { position: relative; overflow: hidden; isolation: isolate; border: 0; padding: 12px; border-radius: 18px; background: none; gap: 8px; min-height: 44px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s; -webkit-user-select: none; user-select: none; }
.fcard::after { content: ""; position: absolute; inset: 2px; border-radius: 16px; z-index: -1; background: radial-gradient(120% 70% at 85% 0%, var(--ca), transparent 62%), linear-gradient(#2c1542, #160a22); }
.card-ring { position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; translate: -50% -50%; z-index: -2; background: conic-gradient(from 0deg, var(--c1), transparent 22%, var(--c2) 50%, transparent 72%, var(--c1)); opacity: .55; animation: rot 6s linear infinite; }
.fcard.sel .card-ring { animation-duration: 1.8s; opacity: 1; }
.fcard.sel { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 0 2px var(--c1), 0 12px 36px var(--ca); }
.fcard:active { transform: scale(.97); }
@media (hover: hover) { .fcard:hover { transform: translateY(-3px); box-shadow: 0 10px 30px var(--ca); } .fcard:hover .card-ring { opacity: .85; } }
.card-top { display: flex; align-items: center; gap: 8px; }
.card-art { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); animation: bob 2.4s ease-in-out infinite; }
.fcard.sel .card-art { animation: hop .5s ease-out 2, bob 2.4s ease-in-out 1s infinite; }
.fcard h4 { color: var(--c1); text-shadow: 0 2px 0 var(--ink), 0 0 16px var(--ca); line-height: 1; margin-top: 2px; }
.card-feat { display: flex; flex-direction: column; gap: 3px; }
.card-feat span { font-size: 12.5px; font-weight: 800; color: #e6dbf3; padding-left: 16px; position: relative; line-height: 1.3; }
.card-feat span::before { content: ""; position: absolute; left: 2px; top: .38em; width: 8px; height: 8px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 6px var(--c1); }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.card-meta b { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--gold); text-transform: none; }
.vol-dots { display: inline-flex; gap: 3px; } .vol-dots i { width: 8px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .15); }
.vol-dots i.on { background: var(--c1); box-shadow: 0 0 5px var(--c1); }
.fcard .price { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); font-size: inherit; }
.fcard .price b { font-family: var(--display); font-weight: 400; font-size: 24px; color: #fff; }
.fcard .price small { font-family: var(--ui); font-size: 11px; font-weight: 900; color: var(--muted); text-align: right; }
.fcard.sel .price b { animation: pricePulse 1.2s ease-in-out infinite; }
@keyframes pricePulse { 50% { color: var(--c1); text-shadow: 0 0 14px var(--ca); } }
.fconfirm { border-color: var(--c1); background: radial-gradient(120% 120% at 0 0, var(--ca), transparent 60%), rgba(0, 0, 0, .3); box-shadow: 0 0 24px var(--ca); animation: up .25s cubic-bezier(.2, 1.2, .4, 1); }
.fc-sum { display: flex; align-items: center; gap: 10px; } .fc-sum img { width: 52px; height: 52px; flex: none; } .fc-sum p { margin: 0; }
.buy-go { animation: goPulse 1.3s ease-in-out infinite; min-height: 48px; }
@keyframes goPulse { 50% { box-shadow: 0 5px 0 #a8650a, 0 0 0 6px rgba(255, 216, 74, .25), 0 10px 34px rgba(255, 180, 31, .7); } }
.sheet.launch .fcard.sel { animation: launch .42s ease-in forwards; z-index: 2; }
.sheet.launch .fcard:not(.sel), .sheet.launch .fconfirm, .sheet.launch > p { transition: opacity .2s; opacity: .25; }
.sheet.launch::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .85), rgba(255, 216, 74, .35) 35%, transparent 70%); animation: celflash .42s ease-out forwards; }
@keyframes launch { 35% { transform: scale(1.08); filter: brightness(1.5); } 100% { transform: scale(1.25); filter: brightness(2.2); opacity: 0; } }
.cards.offers.three { grid-template-columns: 1fr; gap: 10px; }
.offers.three .fcard { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "top price" "feat feat" "m1 m2"; align-items: center; column-gap: 14px; row-gap: 6px; }
.offers.three .card-top { grid-area: top; } .offers.three .card-feat { grid-area: feat; } .offers.three .m1 { grid-area: m1; } .offers.three .m2 { grid-area: m2; }
.offers.three .price { grid-area: price; justify-self: end; flex-direction: column; align-items: flex-end; gap: 0; margin: 0; padding: 6px 10px; }
.offers.three .card-art { width: 50px; height: 50px; }
.card-meta > span:first-child { white-space: nowrap; }
.buy-go { padding-inline: 14px; white-space: nowrap; }
@media (max-width: 520px) { .offers.three .card-meta { display: none; } .offers.three .fcard { grid-template-areas: "top price" "feat feat"; } .card-meta { font-size: 10px; letter-spacing: .3px; } .card-meta b { font-size: 14px; } }
@media (max-width: 359px) { .cards.offers { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- living world (background layer, compositor-only animations) */
.bg-fog { background: radial-gradient(60% 22% at 30% 88%, rgba(185, 166, 207, .12), transparent 70%), radial-gradient(50% 18% at 75% 94%, rgba(185, 166, 207, .09), transparent 70%); animation: fog 22s ease-in-out infinite alternate; }
@keyframes fog { to { transform: translateX(7%) scaleY(1.15); } }
.bg-spots .spot { position: absolute; top: -12%; left: calc(var(--l) - 20vmax); width: 40vmax; height: 125vh; transform-origin: 50% 0; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: linear-gradient(var(--spot, rgba(255, 236, 190, .13)), transparent 82%); animation: sweep var(--d) ease-in-out infinite alternate; }
.spot.s1 { --l: 16%; --d: 9s; --a: -20deg; --b: 12deg; }
.spot.s2 { --l: 84%; --d: 11s; --a: 18deg; --b: -12deg; animation-delay: -4s !important; }
.spot.s3 { --l: 50%; --d: 14s; --a: -9deg; --b: 9deg; opacity: .55; }
@media (max-width: 700px) { .spot.s3, .bg-embers i:nth-child(n+9) { display: none; } }
@keyframes sweep { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }
body.mood-t1 .spot { --spot: rgba(120, 150, 255, .2); }
body.mood-t2 .spot { --spot: rgba(214, 140, 255, .22); }
body.mood-t2 .spot.s3 { --spot: rgba(255, 216, 74, .2); }
body.mood-t3 .spot { --spot: rgba(255, 80, 60, .22); }
body.mood-t2 .spot, body.mood-t3 .spot { animation-duration: calc(var(--d) * .5); }
.peek { position: absolute; display: flex; gap: 10px; transform: scale(var(--s)); opacity: .6; transition: opacity .3s; animation: look calc(var(--d) * 1.7) ease-in-out infinite alternate; }
.peek b { width: 13px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c), 0 0 20px var(--c); animation: eyeblink var(--d) infinite var(--dl); }
.peek b:first-child { rotate: 14deg; } .peek b:last-child { rotate: -14deg; }
@keyframes eyeblink { 0%, 90%, 100% { scale: 1 1; } 93% { scale: 1 .08; } 96% { scale: 1 1; } }
@keyframes look { to { translate: 6px -3px; } }
.bg-mons img { position: absolute; width: clamp(96px, 15vmax, 230px); height: auto; opacity: .38; transition: opacity .35s; }
.bg-mon.l { left: calc(-1 * clamp(26px, 3.6vmax, 64px)); bottom: 24%; rotate: 16deg; animation: lurk 7s ease-in-out infinite alternate; }
.bg-mon.r { right: calc(-1 * clamp(26px, 3.6vmax, 64px)); top: 15%; rotate: -16deg; animation: lurk 8.5s ease-in-out infinite alternate-reverse; }
@keyframes lurk { to { translate: 0 -12px; } }
.bg.r-win .peek, .bg.r-big .peek { opacity: 1; }
.bg.r-win .bg-mons img, .bg.r-big .bg-mons img { opacity: .8; animation: hop .42s ease-out 2; }
@keyframes hop { 50% { translate: 0 -20px; } }
.bg-flash { background: radial-gradient(90% 70% at 50% 10%, rgba(220, 200, 255, .55), transparent 70%); opacity: 0; }
body.mood-t2 .bg-flash { animation: lightning 7s infinite; }
@keyframes lightning { 0%, 86%, 100% { opacity: 0; } 87% { opacity: .6; } 88% { opacity: 0; } 90% { opacity: .4; } 92% { opacity: 0; } }
.bg.r-big .bg-flash { animation: zap .7s ease-out; }
@keyframes zap { 0% { opacity: .7; } 100% { opacity: 0; } }
body.mood-t3 .bg-vignette { animation: redpulse 1.8s ease-in-out infinite; }
@keyframes redpulse { 50% { box-shadow: inset 0 0 120px rgba(255, 50, 40, .35); } }
.bg-embers i { position: absolute; bottom: -12px; width: 4px; height: 4px; border-radius: 50%; background: #ffb057; box-shadow: 0 0 8px #ff5a48; opacity: 0; }
body.mood-t3 .bg-embers i, body.mood-t2 .bg-embers i:nth-child(odd) { animation: ember var(--d) linear infinite var(--dl); }
body.mood-t2 .bg-embers i { background: #e4b5ff; box-shadow: 0 0 8px #c86bff; }
@keyframes ember { 10% { opacity: .9; } 100% { transform: translate(var(--dx), -105vh); opacity: 0; } }
.bg.still *, .bg.still { animation: none !important; }

/* ---------------------------------------------------------------- win show (full screen) + effects canvas */
.fx { position: fixed; inset: 0; z-index: 26; pointer-events: none; }
.celebrate { position: fixed; inset: 0; z-index: 25; overflow: hidden; touch-action: none; cursor: pointer; --spd: 1; --lvl: 0; --tc: var(--gold); --glow: rgba(255, 216, 74, .7); --ray: rgba(255, 216, 74, .16); transition: opacity .2s; }
.celebrate.out { opacity: 0; }
.celebrate[data-tier=mega] { --tc: #ff9a3c; --glow: rgba(255, 140, 50, .85); --ray: rgba(255, 154, 60, .2); }
.celebrate[data-tier=epic] { --tc: #dc9bff; --glow: rgba(200, 107, 255, .95); --ray: rgba(200, 107, 255, .22); }
.celebrate[data-tier=monster] { --tc: #4dffc8; --glow: rgba(77, 255, 200, .95); --ray: rgba(77, 255, 200, .22); }
.celebrate[data-tier=max] { --tc: #ffd84a; --glow: rgba(255, 90, 72, 1); --ray: rgba(255, 216, 74, .26); }
.cel-dim { position: absolute; inset: 0; background: radial-gradient(75% 60% at 50% 40%, rgba(46, 14, 66, .6), rgba(6, 2, 10, .92)); opacity: 0; transition: opacity calc(.35s * var(--spd)); }
.celebrate.in .cel-dim { opacity: 1; }
.cel-rays { position: absolute; left: 50%; top: 40%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: repeating-conic-gradient(from 0deg, var(--ray) 0 7deg, transparent 7deg 14deg); -webkit-mask-image: radial-gradient(circle, #000 0 12%, transparent 42%); mask-image: radial-gradient(circle, #000 0 12%, transparent 42%); opacity: 0; transition: opacity .4s; animation: rot calc(16s - var(--lvl) * 2.6s) linear infinite; }
.celebrate.in .cel-rays { opacity: calc(.55 + var(--lvl) * .11); }
.cel-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 40%, #fff, rgba(255, 255, 255, .45) 35%, transparent 72%); }
.cel-flash.go { animation: celflash calc(.5s * var(--spd)) ease-out; }
@keyframes celflash { 0% { opacity: var(--fl, .6); } 100% { opacity: 0; } }
.cel-stage { position: absolute; inset: 0; }
.cel-mons { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cel-mon { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55)); user-select: none; -webkit-user-drag: none; }
.cel-text { position: absolute; left: 0; right: 0; top: 38%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 12px; text-align: center; pointer-events: none; }
.celebrate[data-tier=monster] .cel-text, .celebrate[data-tier=max] .cel-text { animation: quake .18s infinite; }
.cel-title { font-family: var(--display); white-space: nowrap; font-size: clamp(34px, min(11.5vw, 15vh), 116px); line-height: .9; letter-spacing: 1px; color: var(--tc); -webkit-text-stroke: 2px var(--ink); text-shadow: 0 6px 0 var(--ink), 0 0 30px var(--glow), 0 0 70px var(--glow); }
.celebrate[data-tier=max] .cel-title { background: linear-gradient(90deg, #ffd84a, #ff5a48, #ff6fc0, #c86bff, #4dffc8, #ffd84a); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 6px 0 var(--ink)) drop-shadow(0 0 26px rgba(255, 90, 72, .9)); animation: sheen 1.6s linear infinite; }
@keyframes sheen { to { background-position: 300% 0; } }
.cel-title.slam { animation: slam calc(.55s * var(--spd)) cubic-bezier(.2, 1.5, .4, 1) both; }
.celebrate[data-tier=max] .cel-title.slam { animation: slam calc(.55s * var(--spd)) cubic-bezier(.2, 1.5, .4, 1) both, sheen 1.6s linear infinite; }
@keyframes slam { 0% { transform: scale(2.6) rotate(-7deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.cel-amount { font-family: var(--display); font-size: clamp(36px, min(12.5vw, 14vh), 100px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 6px 0 var(--ink), 0 0 28px rgba(255, 255, 255, .45); }
.cel-amount.slam { animation: bump calc(.4s * var(--spd)) ease-out; }
@keyframes bump { 35% { transform: scale(1.2); } }
.celebrate.done .cel-amount { animation: shine 1.1s ease-in-out infinite; }
@keyframes shine { 50% { transform: scale(1.06); text-shadow: 0 6px 0 var(--ink), 0 0 40px var(--glow), 0 0 80px var(--glow); } }
.cel-x { font-family: var(--display); font-size: clamp(18px, min(5vw, 6vh), 34px); color: var(--tc); text-shadow: 0 3px 0 var(--ink); }
.cel-hint { margin-top: min(18px, 2.5vh); font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, .7); animation: blink 1.2s infinite; }

/* ---------------------------------------------------------------- landscape / desktop: HUD beside the board */
@media (min-aspect-ratio: 5/4) and (min-width: 640px) {
  .app { grid-template-columns: 1fr minmax(300px, 380px); grid-template-rows: auto 1fr; grid-template-areas: "top top" "stage hud"; }
  .hud { justify-content: center; background: none; padding: 10px 18px 18px 6px; gap: 14px; transform: translateX(calc(-1 * var(--hud-pull, 0px))); }
  .meters { grid-template-columns: 1fr 1fr; }
  .meter.bet { grid-column: span 2; }
  .meter b { font-size: 24px; }
  .controls { grid-template-columns: 1fr 1fr; grid-template-areas: "spin spin" "buy feature" "auto speed"; gap: 10px; }
  .spin { grid-area: spin; justify-self: center; width: 110px; height: 110px; }
  #buyBtn { grid-area: buy; } #featureBtn { grid-area: feature; } #autoBtn { grid-area: auto; } #speedBtn { grid-area: speed; }
  .ctl { flex-direction: row; gap: 8px; height: 50px; } .ctl span { font-size: 13px; }
  .feature-chip { position: static; transform: none; align-self: center; }
  .sheet-root { align-items: center; }
  .sheet { border-radius: 22px; border-bottom: 1px solid var(--line); }
}
@media (min-aspect-ratio: 5/4) and (min-width: 640px) and (max-height: 520px) {
  .topbar { padding: 4px 10px 0; } .icon-btn { width: 34px; height: 34px; font-size: 17px; }
  .brand-title small { display: none; } .brand-logo { width: 26px; height: 26px; } .brand-title b { font-size: 20px; }
  .hud { gap: 6px; padding: 4px 12px calc(6px + var(--safe-b)) 4px; }
  .meter { padding: 2px 6px; } .meter b { font-size: 17px; } .meter span { font-size: 9px; }
  .controls { gap: 6px; } .spin { width: 72px; height: 72px; } .spin-ico { width: 34px; height: 34px; }
  .ctl { height: 38px; font-size: 18px; } .ctl span { font-size: 12px; }
  .stage { padding: 2px 6px; gap: 2px; } .msg { min-height: 0; font-size: 12px; }
  .fs-bar b { font-size: 16px; white-space: nowrap; } .fs-name { font-size: 15px; white-space: nowrap; } .fs-bar > div { padding: 1px 6px; flex-direction: row; gap: 6px; }
}
@media (max-height: 560px) and (max-aspect-ratio: 5/4) { .brand-title small { display: none; } .ctl { height: 46px; } .spin { width: 70px; height: 70px; } }
@media (prefers-reduced-motion: reduce) {
  .bg-glow, .bg-lights, .ov-burst, .ov-title, .ov-tap, .bg *, .cel-rays, .cel-text, .cel-title, .cel-amount, .cel-hint, .card-ring, .card-art, .fcard .price b, .buy-go { animation: none !important; }
  .ov { transition: opacity .15s; transform: none; }
}

/* ===========================================================================
   MOBILE SAFE RENDERING PATH — body.lowfx (Touch-/Schmalgeraete; ?fx=full / ?fx=safe zum Gegentesten)
   Uebertragen von Velvet Vendetta 1.4.3 (docs/crew-games/CHANGELOG-1.4.2.md): dort flackerte es rund um Vollbild-
   Ebenen auf echten Geraeten. Dieselben Kompositor-Risiken gab es hier beim Bonuskauf (Sheet -> Bestaetigung ->
   Bonus-Intro -> Freispiele -> Gewinnshow):
     1. backdrop-filter ueber grosse Flaechen (.sheet-root, .ov)              -> stale/teilweise Frames, Geisterbilder
     2. uebergrosse rotierende/maskierte conic-gradients (.cel-rays 220vmax,
        .ov-burst, .card-ring)                                                -> Texturkante > GPU-Limit, Kachelung
     3. dauerhaft animierte, grossflaechig geblurrte Glow-Ebenen (.bg-glow),
        grosse rotierende Spotlights, animierter Nebel                         -> Neu-Rasterung grosser Flaechen
     4. background-clip:text + Filter (MAX-Titel)                              -> leerer/doppelter Text
     5. Opacity-/Box-Shadow-Transitionen grosser Ebenen beim Moduswechsel      -> stehengebliebene Vollbild-Ebenen
   Desktop bleibt unveraendert. Gleicher Look, nur statisch/guenstiger.
   =========================================================================== */
body.lowfx .sheet-root, body.lowfx .ov { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lowfx .sheet-root { background: rgba(5, 2, 8, .78); }
body.lowfx .ov { background: rgba(12, 5, 18, .9); }
body.lowfx .ov-burst { animation: none !important; inset: 0; background: radial-gradient(circle, rgba(255, 216, 74, .2), transparent 65%); }
body.lowfx .ov-burst.t1 { background: radial-gradient(circle, rgba(107, 140, 255, .26), transparent 65%); }
body.lowfx .ov-burst.t2 { background: radial-gradient(circle, rgba(200, 107, 255, .3), transparent 65%); }
body.lowfx .ov-burst.t3 { background: radial-gradient(circle, rgba(255, 74, 58, .3), transparent 65%); }
body.lowfx .cel-rays { display: none !important; }
body.lowfx .cel-dim { transition: none; background: radial-gradient(70% 55% at 50% 40%, color-mix(in srgb, var(--tc) 22%, rgba(46, 14, 66, .7)), rgba(6, 2, 10, .94) 70%); }
body.lowfx .celebrate { transition: none; }
body.lowfx .card-ring { animation: none !important; width: 100%; left: 0; top: 0; translate: none; inset: 0; background: linear-gradient(135deg, var(--c1), transparent 45%, var(--c2)); }
body.lowfx .bg-glow { animation: none !important; filter: none !important; opacity: .5; }
body.lowfx .bg-spots .spot { animation: none !important; transform: rotate(var(--a)); }
body.lowfx .bg-fog { animation: none !important; }
body.lowfx .bg > div { transition: none; }
body.lowfx .board-frame { transition: none; }
body.lowfx .celebrate[data-tier=max] .cel-title { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--tc); filter: none; text-shadow: 0 6px 0 var(--ink), 0 0 26px rgba(255, 90, 72, .9); }
body.lowfx .cel-mon { filter: none; }
body.lowfx .sheet.launch::after { animation-duration: .3s; }