:root {
  --u: 4px;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --gold: #e2a63d;
  --line: rgba(196, 140, 62, .78);
  --txt: #f6ead6;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #070402; overflow: hidden; }
body { font-family: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--txt); user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
#app { position: relative; height: 100%; margin: 0 auto; overflow: hidden; background: #120904; touch-action: manipulation; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 85% at 50% 44%, transparent 52%, rgba(0, 0, 0, .62) 100%); }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%, rgba(255, 70, 30, .05), rgba(190, 0, 0, .5)); transition: opacity .6s ease; }
#flash.on { opacity: 1; transition: none; }
#flash.gold { background: radial-gradient(circle at 50% 70%, rgba(255, 210, 90, .25), rgba(255, 170, 30, .0) 70%); }
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud > .bubble, #hud > .banner, #hud > .toast { pointer-events: none; }

.panel {
  position: absolute;
  background: linear-gradient(180deg, rgba(40, 23, 12, .86), rgba(17, 9, 4, .88));
  border: max(1px, calc(var(--u) * .22)) solid var(--line);
  border-radius: calc(var(--u) * 1.3);
  box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.8) rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 220, 160, .1);
}
.lbl { font-weight: 600; color: #f1dfc0; }
.ico { width: 1em; height: 1em; display: block; flex: none; }

/* bakiye */
.balance { left: calc(var(--u) * 1.8); top: calc(var(--st) + var(--u) * 1.9); width: calc(var(--u) * 33.4); height: calc(var(--u) * 8.3); display: flex; align-items: center; gap: calc(var(--u) * 1.3); padding: 0 calc(var(--u) * 1.1) 0 calc(var(--u) * 1.4); }
.balance .wallet { font-size: calc(var(--u) * 5.6); color: #f0b33f; filter: drop-shadow(0 0 calc(var(--u) * .6) rgba(240, 160, 40, .4)); }
.bal-txt { flex: 1; min-width: 0; }
.bal-txt .lbl { font-size: calc(var(--u) * 1.85); letter-spacing: .04em; display: flex; align-items: center; gap: calc(var(--u) * .8); }
.demo { font-size: .7em; padding: .05em .45em; border-radius: 99px; background: rgba(240, 179, 63, .18); color: #f0b33f; letter-spacing: .06em; }
.bal-txt .val { font-size: calc(var(--u) * 3.25); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; color: #fff6e6; }
.plus { width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6be06a, #23962d); border: max(1px, calc(var(--u) * .25)) solid #a8f5a0; color: #fff; font-size: calc(var(--u) * 4); font-weight: 700; line-height: 1; display: grid; place-items: center; box-shadow: 0 0 calc(var(--u) * 1.2) rgba(80, 220, 90, .35); }

.btn-hist { left: calc(var(--u) * 68.9); top: calc(var(--st) + var(--u) * 1.9); width: calc(var(--u) * 20.8); height: calc(var(--u) * 7.3); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.1); font-size: calc(var(--u) * 2); font-weight: 600; }
.btn-hist .ico { font-size: calc(var(--u) * 3.6); }
.btn-menu { left: calc(var(--u) * 91.6); top: calc(var(--st) + var(--u) * 1.9); width: calc(var(--u) * 6.5); height: calc(var(--u) * 7.3); display: grid; place-items: center; color: #f0b33f; }
.btn-menu .ico { font-size: calc(var(--u) * 4.2); }

/* çarpan */
.mult { left: calc(var(--u) * 1.8); top: calc(var(--st) + var(--u) * 12.4); width: calc(var(--u) * 33.4); height: calc(var(--u) * 13.4); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6); overflow: hidden; }
.mult .lbl { font-size: calc(var(--u) * 2.15); display: flex; align-items: center; gap: calc(var(--u) * .7); position: relative; z-index: 2; }
.dot { width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-radius: 50%; background: #ff3b2a; box-shadow: 0 0 calc(var(--u) * 1) #ff3b2a; display: inline-block; }
.mult.fly .dot { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.mval { position: relative; z-index: 2; margin-top: calc(var(--u) * .2); font-size: calc(var(--u) * 7); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; background: linear-gradient(180deg, #ff8f5a, #ff3b22 60%, #d81b10); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 calc(var(--u) * 1.1) rgba(255, 60, 30, .55)); font-variant-numeric: tabular-nums; }
.mval.fly { background-image: linear-gradient(180deg, #fff0b0, #ffc23e 55%, #ff8a1e); filter: drop-shadow(0 0 calc(var(--u) * 1.2) rgba(255, 170, 40, .6)); }
.mval.wait { background-image: linear-gradient(180deg, #f4e6cc, #c9b08a); filter: none; opacity: .8; }
.mval.won { background-image: linear-gradient(180deg, #d6ffb8, #57e05e 60%, #20a83a); filter: drop-shadow(0 0 calc(var(--u) * 1.1) rgba(60, 220, 90, .5)); }
#graph { position: absolute; right: 0; bottom: 0; width: 62%; height: 78%; z-index: 1; }
.cd { position: absolute; left: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1); height: calc(var(--u) * .55); border-radius: 9px; background: rgba(255, 255, 255, .1); overflow: hidden; z-index: 3; opacity: 0; transition: opacity .3s; }
.mult.bet .cd { opacity: 1; }
.cd i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #f0b33f, #ffd77a); transform-origin: left; }

/* sonuçlar */
.results { left: calc(var(--u) * 57.7); top: calc(var(--st) + var(--u) * 11.9); width: calc(var(--u) * 40.3); height: calc(var(--u) * 9.4); padding: calc(var(--u) * .9) calc(var(--u) * 1.2); overflow: hidden; }
.results .lbl { font-size: calc(var(--u) * 2.05); margin-bottom: calc(var(--u) * .7); }
.chips { display: flex; gap: calc(var(--u) * .75); flex-wrap: nowrap; overflow: hidden; }
.chip { flex: none; font-size: calc(var(--u) * 1.95); font-weight: 700; padding: calc(var(--u) * .45) calc(var(--u) * .95); border-radius: 99px; border: max(1px, calc(var(--u) * .2)) solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .4); color: #f3eee6; font-variant-numeric: tabular-nums; }
.chip.c2 { color: #6cf07a; border-color: #3a9e47; background: rgba(20, 70, 25, .45); }
.chip.c3 { color: #ff8a52; border-color: #d0442a; background: rgba(90, 25, 10, .45); }
.chip.c4 { color: #c79bff; border-color: #8d5ad8; background: rgba(70, 30, 120, .5); }
.chip.c5 { color: #ffd65a; border-color: #e3a81e; background: rgba(90, 60, 0, .55); }
.chip.new { animation: chipIn .45s ease-out; }
@keyframes chipIn { from { transform: translateX(-60%) scale(.6); opacity: 0; } }

.viewers { left: calc(var(--u) * 1.8); top: 48.4%; width: calc(var(--u) * 16.3); height: calc(var(--u) * 7.1); display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: 0 calc(var(--u) * 1.3); }
.viewers .ico { font-size: calc(var(--u) * 4.6); color: #f0b33f; }
.viewers .lbl { font-size: calc(var(--u) * 1.95); }
.viewers .v { font-size: calc(var(--u) * 2.25); font-weight: 700; font-variant-numeric: tabular-nums; }

/* bahis */
.betbox { left: calc(var(--u) * 72.9); bottom: calc(var(--sb) + var(--u) * 39); width: calc(var(--u) * 25.1); height: calc(var(--u) * 10.1); padding: calc(var(--u) * .9) calc(var(--u) * .8); text-align: center; }
.betbox .lbl { font-size: calc(var(--u) * 2.1); }
.betrow { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--u) * .7); }
.sq { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); border-radius: calc(var(--u) * .9); border: max(1px, calc(var(--u) * .2)) solid rgba(230, 200, 150, .55); background: rgba(0, 0, 0, .35); font-size: calc(var(--u) * 3.6); font-weight: 600; line-height: 1; display: grid; place-items: center; }
.sq:active { background: rgba(240, 179, 63, .25); }
.sq:disabled { opacity: .35; }
.betval { font-size: calc(var(--u) * 3.3); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ana butonlar: Oyna + Bozdur, alt ortada yan yana */
.actions { position: absolute; left: calc(var(--u) * 1.8); right: calc(var(--u) * 1.9); bottom: calc(var(--sb) + var(--u) * 16.6); height: calc(var(--u) * 12.8); display: grid; grid-template-columns: 1fr 1.3fr; gap: calc(var(--u) * 1.6); }
.act { position: relative; border-radius: calc(var(--u) * 1.5); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); transition: transform .08s, filter .2s, background .25s, opacity .25s; }
.act:active { transform: translateY(1px) scale(.98); }
.act.play { background: linear-gradient(180deg, #ffe08a, #f6bd3a 42%, #dc951a); border: max(1px, calc(var(--u) * .3)) solid #ffe9a8; color: #2b1600;
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(240, 160, 30, .35), inset 0 calc(var(--u) * -.5) 0 rgba(150, 80, 0, .35); }
.act .pi { width: calc(var(--u) * 4); height: calc(var(--u) * 4); flex: none; }
.ptxt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.act .t1 { font-size: calc(var(--u) * 4.2); font-weight: 800; }
.act .t2 { font-size: calc(var(--u) * 1.9); font-weight: 700; opacity: .8; font-variant-numeric: tabular-nums; }
.act .t2:empty { display: none; }
.act.play.cancel { background: linear-gradient(180deg, #9c3626, #6a170e); border-color: #ec8d74; color: #ffe6db; box-shadow: none; }
.act.play.cancel .pi, .act.play.busy .pi { display: none; }
.act.play.busy { background: linear-gradient(180deg, #4a3220, #2c1c10); border-color: rgba(230, 190, 120, .45); color: #d9c3a0; box-shadow: none; }
.act.play.busy .t1 { font-size: calc(var(--u) * 3.2); }
.act.cash { flex-direction: column; gap: 0; background: linear-gradient(180deg, #b6ff9a, #4fd85c 45%, #1f9c37); border: max(1px, calc(var(--u) * .3)) solid #dcffd0; color: #04230c;
  box-shadow: 0 0 calc(var(--u) * 3) rgba(80, 230, 100, .55); animation: pulse .9s infinite; }
.act.cash .c1 { font-size: calc(var(--u) * 2.6); font-weight: 900; letter-spacing: .08em; }
.act.cash .c2 { font-size: calc(var(--u) * 4.8); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.act.cash.off .c2 { font-size: calc(var(--u) * 2.3); font-weight: 700; }
.act.cash.off { background: linear-gradient(180deg, rgba(40, 23, 12, .9), rgba(17, 9, 4, .92)); border-color: rgba(120, 200, 120, .35); color: rgba(200, 235, 200, .45); box-shadow: none; animation: none; }
.act.cash.won { background: linear-gradient(180deg, #fff0b0, #f6c44a 50%, #d9930f); border-color: #fff3c4; color: #3a2100; box-shadow: 0 0 calc(var(--u) * 3) rgba(255, 200, 60, .55); animation: none; }
@keyframes pulse { 50% { filter: brightness(1.14); } }

/* otomatik bozdur: sağ sütunda küçük panel */
.auto { left: calc(var(--u) * 72.9); bottom: calc(var(--sb) + var(--u) * 29.4); width: calc(var(--u) * 25.1); height: calc(var(--u) * 8.4); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auto .lbl { font-size: calc(var(--u) * 1.85); }
.aval { font-size: calc(var(--u) * 3.6); font-weight: 800; line-height: 1.1; background: linear-gradient(180deg, #fff2c0, #f2c04a 55%, #d99018); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.aval.off { font-size: calc(var(--u) * 2.8); background-image: linear-gradient(180deg, #e6d7bd, #a99273); }

/* canlı kazanç sayacı (ıstakanın üstünde) */
.ticker { position: absolute; left: 50%; top: 60%; transform: translate(-50%, 8px) scale(.9); opacity: 0; pointer-events: none; text-align: center; transition: opacity .25s, transform .25s; }
.ticker.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ticker .tk1 { font-size: calc(var(--u) * 7.2); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #9dff8a; -webkit-text-stroke: calc(var(--u) * .25) #0b3a10; text-shadow: 0 calc(var(--u) * .5) 0 #0b3a10, 0 0 calc(var(--u) * 3) rgba(90, 255, 90, .55); }
.ticker .tk2 { margin-top: calc(var(--u) * .6); display: inline-block; font-size: calc(var(--u) * 2.1); font-weight: 700; padding: calc(var(--u) * .4) calc(var(--u) * 1.6); border-radius: 99px; background: rgba(10, 5, 2, .75); color: #e8f5dd; }
.ticker.won .tk1 { color: #ffe08a; -webkit-text-stroke-color: #4a2a00; text-shadow: 0 calc(var(--u) * .5) 0 #4a2a00, 0 0 calc(var(--u) * 3) rgba(255, 190, 40, .6); }
.ticker.lost .tk1 { color: #ff6a4a; -webkit-text-stroke-color: #3a0600; text-shadow: 0 calc(var(--u) * .5) 0 #3a0600, 0 0 calc(var(--u) * 3) rgba(255, 50, 20, .55); }

.bottom { position: absolute; left: calc(var(--u) * 1.8); right: calc(var(--u) * 1.9); bottom: calc(var(--sb) + var(--u) * 3.7); height: calc(var(--u) * 10.3); }
.nav { top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .5); font-size: calc(var(--u) * 2.1); font-weight: 600; }
.nav .ico { font-size: calc(var(--u) * 4.1); color: #f0b33f; }
.nav:nth-child(1) { left: 0; width: calc(var(--u) * 20.7); }
.nav:nth-child(2) { left: calc(var(--u) * 22.7); width: calc(var(--u) * 22.9); }
.nav:nth-child(3) { left: calc(var(--u) * 49.1); width: calc(var(--u) * 24.9); }
.nav:nth-child(4) { left: calc(var(--u) * 76.1); width: calc(var(--u) * 20.2); }
.nav:active, .btn-hist:active, .btn-menu:active, .auto:active { filter: brightness(1.25); }

/* konuşma balonu */
.bubble { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%) scale(.6); opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
  background: #fff7e8; color: #2a1608; font-weight: 700; font-size: calc(var(--u) * 2.6); padding: calc(var(--u) * 1) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 2); border: max(1px, calc(var(--u) * .3)) solid #2a1608;
  white-space: nowrap; box-shadow: 0 calc(var(--u) * .6) 0 rgba(0, 0, 0, .35); }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -1.6); width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); background: #fff7e8; border-right: inherit; border-bottom: inherit; transform: translateX(-50%) rotate(45deg); }
.bubble.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.bubble.loud { background: #ffd23a; font-size: calc(var(--u) * 3.4); }
.bubble.loud::after { background: #ffd23a; }

/* büyük yazı */
.banner { position: absolute; left: 0; right: 0; top: 40%; text-align: center; opacity: 0; transform: scale(.7); transition: opacity .2s, transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.banner.on { opacity: 1; transform: scale(1); }
.banner .b1 { font-size: calc(var(--u) * 11); font-weight: 900; letter-spacing: .02em; line-height: 1; color: #ffe08a; -webkit-text-stroke: calc(var(--u) * .35) #4a1e00; text-shadow: 0 calc(var(--u) * .8) 0 #4a1e00, 0 0 calc(var(--u) * 4) rgba(255, 150, 30, .7); }
.banner .b2 { margin-top: calc(var(--u) * 1); display: inline-block; font-size: calc(var(--u) * 3); font-weight: 800; padding: calc(var(--u) * .6) calc(var(--u) * 2.2); border-radius: 99px; background: rgba(20, 8, 2, .85); border: max(1px, calc(var(--u) * .25)) solid var(--line); }
.banner .b3 { margin-top: calc(var(--u) * .8); font-size: calc(var(--u) * 2.4); font-weight: 700; color: #ffb9a6; text-shadow: 0 2px 4px #000; }
.banner .b3:empty { display: none; }
.banner.lose .b1 { color: #ff5a3a; -webkit-text-stroke-color: #3a0600; text-shadow: 0 calc(var(--u) * .8) 0 #3a0600, 0 0 calc(var(--u) * 4) rgba(255, 40, 20, .75); }
.banner.win .b1 { color: #b8ff8a; -webkit-text-stroke-color: #0d3a06; text-shadow: 0 calc(var(--u) * .8) 0 #0d3a06, 0 0 calc(var(--u) * 4) rgba(90, 255, 90, .6); }
.banner.win .b2 { color: #b8ff8a; }

.toast { position: absolute; left: 50%; top: calc(var(--st) + var(--u) * 28); transform: translate(-50%, -10px); opacity: 0; transition: .25s; background: rgba(20, 8, 2, .92); border: max(1px, calc(var(--u) * .2)) solid var(--line); border-radius: 99px; padding: calc(var(--u) * 1) calc(var(--u) * 2.4); font-size: calc(var(--u) * 2.3); font-weight: 600; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* modal */
.modal { position: absolute; inset: 0; background: rgba(5, 2, 0, .62); display: flex; align-items: flex-end; justify-content: center; z-index: 20; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal.hidden { display: none; }
.card { width: 100%; max-height: 78%; display: flex; flex-direction: column; background: linear-gradient(180deg, #2a170b, #140a04); border-top: max(1px, calc(var(--u) * .3)) solid var(--line); border-radius: calc(var(--u) * 3) calc(var(--u) * 3) 0 0; padding-bottom: var(--sb); animation: up .28s ease-out; }
@keyframes up { from { transform: translateY(40%); opacity: 0; } }
.mhead { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 2); font-size: calc(var(--u) * 3.6); font-weight: 800; color: #ffd27a; }
.mclose { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: calc(var(--u) * 3); }
.mbody { overflow: auto; padding: 0 calc(var(--u) * 4) calc(var(--u) * 4); font-size: calc(var(--u) * 2.6); line-height: 1.45; color: #ead9bd; }
.mbody p { margin: 0 0 calc(var(--u) * 2); }
.mbody h4 { margin: calc(var(--u) * 2) 0 calc(var(--u) * 1); color: #ffd27a; font-size: calc(var(--u) * 2.8); }
.rows { display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); }
.row { display: grid; grid-template-columns: 1fr auto auto; gap: calc(var(--u) * 2); align-items: center; padding: calc(var(--u) * 1.6) calc(var(--u) * 2); border-radius: calc(var(--u) * 1.4); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); font-variant-numeric: tabular-nums; }
.row small { display: block; color: #a8916f; font-size: .8em; }
.row .pos { color: #6cf07a; font-weight: 700; }
.row .neg { color: #ff7a5a; font-weight: 700; }
.empty { text-align: center; color: #a8916f; padding: calc(var(--u) * 6) 0; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.4); margin-bottom: calc(var(--u) * 3); }
.stat { background: rgba(255, 255, 255, .05); border-radius: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.6); text-align: center; }
.stat b { display: block; font-size: calc(var(--u) * 3.6); color: #ffd27a; }
.stat span { font-size: calc(var(--u) * 2); color: #b9a07a; }
.chipwall { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); }
.chipwall .chip { font-size: calc(var(--u) * 2.3); }
.opt { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 2) 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.tgl { width: calc(var(--u) * 11); height: calc(var(--u) * 6); border-radius: 99px; background: rgba(255, 255, 255, .15); position: relative; transition: .2s; }
.tgl::after { content: ""; position: absolute; top: 10%; left: 6%; width: calc(var(--u) * 4.8); height: 80%; border-radius: 50%; background: #fff; transition: .2s; }
.tgl.on { background: #3fbf4e; }
.tgl.on::after { left: calc(94% - var(--u) * 4.8); }
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.4); }
.pick { padding: calc(var(--u) * 2.2) 0; border-radius: calc(var(--u) * 1.4); background: rgba(255, 255, 255, .06); border: max(1px, calc(var(--u) * .2)) solid rgba(255, 255, 255, .1); font-size: calc(var(--u) * 3); font-weight: 700; }
.pick.sel { border-color: #f0b33f; background: rgba(240, 179, 63, .18); color: #ffd27a; }
.ach { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--u) * 2); align-items: center; padding: calc(var(--u) * 1.8) 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ach .em { font-size: calc(var(--u) * 5); }
.ach .bar { height: calc(var(--u) * 1); border-radius: 9px; background: rgba(255, 255, 255, .1); margin-top: calc(var(--u) * .8); overflow: hidden; }
.ach .bar i { display: block; height: 100%; background: linear-gradient(90deg, #f0b33f, #ffd77a); }
.ach .ok { color: #6cf07a; font-weight: 800; }
.btnrow { display: flex; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 3); }
.btnrow button { flex: 1; padding: calc(var(--u) * 2.4) 0; border-radius: calc(var(--u) * 1.4); font-weight: 800; font-size: calc(var(--u) * 3); background: rgba(255, 255, 255, .08); }
.btnrow .primary { background: linear-gradient(180deg, #ffe08a, #f6bd3a 42%, #dc951a); color: #2b1600; }

#loading { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--st) + var(--u) * 12) calc(var(--u) * 6) calc(var(--sb) + var(--u) * 10); background: #0c0502 url(img/loading.jpg) center 42% / cover no-repeat; transition: opacity .6s, transform .6s; overflow: hidden; }
#loading::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 5, 2, .92) 0%, rgba(10, 5, 2, .55) 22%, rgba(10, 5, 2, 0) 40%, rgba(10, 5, 2, 0) 58%, rgba(10, 5, 2, .7) 76%, rgba(10, 5, 2, .97) 100%); pointer-events: none; }
#loading::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55)); pointer-events: none; }
#loading > * { position: relative; z-index: 1; }
#loading.done { opacity: 0; transform: scale(1.04); pointer-events: none; }
.ld-top, .ld-bottom { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ld-brand { font-size: calc(var(--u) * 2.2); font-weight: 800; letter-spacing: .42em; padding-left: .42em; color: #f0c56a; opacity: .9; margin-bottom: calc(var(--u) * 1.6); }
.ld-logo { display: flex; flex-direction: column; align-items: center; font-weight: 900; line-height: .95; font-size: calc(var(--u) * 6.4); letter-spacing: .16em; padding-left: .16em; color: #ffcf7a; text-shadow: 0 calc(var(--u) * .5) 0 #4a1e05, 0 0 calc(var(--u) * 4) rgba(255, 120, 20, .55); }
.ld-logo b { text-shadow: none; font-size: 2.35em; letter-spacing: .05em; padding-left: 0; background: linear-gradient(180deg, #fffbe8 0%, #ffe48e 38%, #ffc53e 58%, #f7a91f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 calc(var(--u) * .7) 0 #4a1e05) drop-shadow(0 0 calc(var(--u) * 3) rgba(255, 140, 20, .55)); }
.ld-tag { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 2.7); font-weight: 600; color: #f2dcb6; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.enter, .ld-hint { display: none; }
.ld-txt { display: flex; align-items: center; gap: calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.8); font-weight: 600; color: #e9cfa4; }
.ld-txt i { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: 50%; border: calc(var(--u) * .5) solid rgba(255, 210, 120, .25); border-top-color: #ffcf6a; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading.ready .ld-txt { display: none; }
#loading.ready .enter { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2.2); width: calc(var(--u) * 76); height: calc(var(--u) * 13); border-radius: calc(var(--u) * 2.4); background: linear-gradient(180deg, #ffe597, #f6bd3a 45%, #d8890f); border: max(1px, calc(var(--u) * .35)) solid #fff0b8; color: #2b1600; font-weight: 900; font-size: calc(var(--u) * 4.6); letter-spacing: .06em; box-shadow: 0 calc(var(--u) * .9) 0 #7a4304, 0 0 calc(var(--u) * 6) rgba(255, 170, 40, .5); animation: pulse 1.4s infinite; }
#loading.ready .enter:active { transform: translateY(calc(var(--u) * .6)); box-shadow: 0 calc(var(--u) * .3) 0 #7a4304, 0 0 calc(var(--u) * 5) rgba(255, 170, 40, .45); }
.enter svg { width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); }
#loading.ready .ld-hint { display: block; margin-top: calc(var(--u) * 2.6); font-size: calc(var(--u) * 2.2); color: #c9a77a; letter-spacing: .03em; }
.bubble.side { background: #f1e2c4; font-size: calc(var(--u) * 2.2); padding: calc(var(--u) * .8) calc(var(--u) * 1.4); }
.bubble.side::after { background: #f1e2c4; }

/* hızlı ses / müzik düğmeleri */
.quick { position: absolute; right: calc(var(--u) * 1.9); top: calc(var(--st) + var(--u) * 22.6); display: flex; gap: calc(var(--u) * 1.2); }
.qb { position: relative; width: calc(var(--u) * 9.4); height: calc(var(--u) * 7); display: grid; place-items: center; color: #f0b33f; }
.qb .ico { font-size: calc(var(--u) * 4); }
.qb .sl { display: none; }
.qb.off { color: #8c7558; }
.qb.off .sl { display: inline; color: #ff5a3a; }
.qb.off .wv { display: none; }
.qb:active { filter: brightness(1.25); }

.chip.lost { color: #ff7a5a; border-color: #b8301c; background: rgba(90, 15, 5, .5); }

/* hamle seçenekleri: ortadan / yandan / çifte */
/* yarış paneli: SEN / DAYI eksikleri ve bu turun şansları */
.race { position: absolute; left: calc(var(--u) * 1.8); right: calc(var(--u) * 1.9); bottom: calc(var(--sb) + var(--u) * 31.2); height: calc(var(--u) * 10.6); padding: calc(var(--u) * .9) calc(var(--u) * 1.6); display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * .9); }
.race .rhint { font-size: calc(var(--u) * 2.3); font-weight: 600; text-align: center; color: #f1dfc0; }
.race .rhint b { color: #ffd27a; }
.race .rrow { display: none; align-items: center; gap: calc(var(--u) * 1.4); }
.race.on .rhint { display: none; }
.race.on .rrow { display: flex; }
.race .who { width: calc(var(--u) * 7.2); font-size: calc(var(--u) * 2.2); font-weight: 900; letter-spacing: .06em; }
.race .me .who { color: #9dff8a; } .race .kab .who { color: #ff8a6a; }
.race .pips { display: flex; gap: calc(var(--u) * .6); }
.race .pips i { width: calc(var(--u) * 2.6); height: calc(var(--u) * 3.6); border-radius: calc(var(--u) * .5); border: max(1px, calc(var(--u) * .25)) solid; display: block; }
.race .pips i.ok { background: linear-gradient(180deg, #c9ffb8, #4fd85c); border-color: #e6ffdc; box-shadow: 0 0 calc(var(--u) * 1) rgba(110, 255, 110, .45); }
.race .pips i.need { background: rgba(120, 20, 10, .45); border-color: #ff7a5a; animation: needp 1.2s infinite; }
.race .kab .pips i.ok { background: linear-gradient(180deg, #ffb39a, #e2553a); border-color: #ffd2c4; box-shadow: 0 0 calc(var(--u) * 1) rgba(255, 90, 60, .45); }
.race .rbar { display: block; width: calc(var(--u) * 14); height: calc(var(--u) * 2.2); border-radius: 99px; background: rgba(30, 18, 10, .8); border: max(1px, calc(var(--u) * .2)) solid rgba(255, 170, 140, .45); overflow: hidden; }
.race .rbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb24a, #ff5a3a); box-shadow: 0 0 calc(var(--u) * 1) rgba(255, 90, 60, .6); transition: width .5s; }
.race .pips i.kneed { background: rgba(30, 18, 10, .7); border-color: rgba(255, 170, 140, .5); }
.race .rtxt { flex: 1; text-align: right; font-size: calc(var(--u) * 1.95); font-weight: 600; opacity: .92; white-space: nowrap; font-variant-numeric: tabular-nums; }
.race .rtxt b { font-weight: 900; }
.race.hot .kab .rtxt { color: #ff8a6a; animation: blink .8s infinite; }
@keyframes needp { 50% { box-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 90, 60, .7); } }
.choices { position: absolute; left: calc(var(--u) * 1.8); width: calc(var(--u) * 69.4); bottom: calc(var(--sb) + var(--u) * 28.4); height: calc(var(--u) * 10.4); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.2); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.choices.on { opacity: 1; pointer-events: auto; transform: none; }
.ch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .2); border-radius: calc(var(--u) * 1.3); background: linear-gradient(180deg, rgba(40, 23, 12, .94), rgba(17, 9, 4, .95)); border: max(1px, calc(var(--u) * .25)) solid var(--line); box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.6) rgba(0, 0, 0, .5); }
.ch b { font-size: calc(var(--u) * 1.95); font-weight: 800; letter-spacing: .02em; }
.ch .cf { font-size: calc(var(--u) * 3.1); font-weight: 900; font-variant-numeric: tabular-nums; }
.ch .cr { font-size: calc(var(--u) * 1.6); font-weight: 600; opacity: .85; }
.ch.orta { border-color: #4caf5a; } .ch.orta .cf { color: #8af08f; }
.ch.yan { border-color: #e0a83a; } .ch.yan .cf { color: #ffd27a; }
.ch.cifte { border-color: #e2553a; } .ch.cifte .cf { color: #ff8a6a; }
.ch:active { transform: translateY(1px) scale(.98); }
.ch.dis { opacity: .35; }
.aval.range { font-size: calc(var(--u) * 2.9); }

/* bahis fişleri: gerçek kumarhane fişi gibi (kenarda beyaz dilimler, ortada kesikli halka) */
.chipbar { position: absolute; left: calc(var(--u) * 1.8); right: calc(var(--u) * 1.9); bottom: calc(var(--sb) + var(--u) * 2.4); height: calc(var(--u) * 12.6); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 1.2); border-radius: calc(var(--u) * 7); background: linear-gradient(180deg, rgba(20, 11, 5, .78), rgba(8, 4, 2, .86)); border: max(1px, calc(var(--u) * .22)) solid rgba(196, 140, 62, .45); box-shadow: inset 0 calc(var(--u) * .4) calc(var(--u) * 1.4) rgba(0, 0, 0, .6); }
.bchip { --c: #c62828; --d: #6d0f0f; --s: #f6efe2; --t: #fff; position: relative; width: calc(var(--u) * 11.2); height: calc(var(--u) * 11.2); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, var(--c) 0 55%, rgba(0, 0, 0, .25) 56% 58%, transparent 59%), repeating-conic-gradient(from 11deg, var(--s) 0 14deg, var(--c) 14deg 45deg);
  box-shadow: 0 calc(var(--u) * .7) 0 var(--d), 0 calc(var(--u) * 1.2) calc(var(--u) * 1.6) rgba(0, 0, 0, .6), inset 0 0 0 calc(var(--u) * .3) rgba(0, 0, 0, .28);
  transition: transform .16s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, opacity .25s, filter .25s; }
.bchip::before { content: ""; position: absolute; inset: 24%; border-radius: 50%; border: max(1px, calc(var(--u) * .32)) dashed rgba(255, 255, 255, .75); }
.bchip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .35), transparent 45%); pointer-events: none; }
.bchip b { position: relative; z-index: 1; font-size: calc(var(--u) * 3.1); font-weight: 900; color: var(--t); letter-spacing: -.02em; text-shadow: 0 calc(var(--u) * .25) 0 rgba(0, 0, 0, .45); }
.bchip.k10 { --c: #ece6da; --d: #8d8676; --s: #2f6fd6; --t: #2a2016; }
.bchip.k10 b { text-shadow: none; }
.bchip.k50 { --c: #cf2b2b; --d: #6d0f0f; }
.bchip.k100 { --c: #1f8f45; --d: #0b4a20; }
.bchip.k500 { --c: #23232a; --d: #000; --s: #e8c46a; }
.bchip.k1k { --c: #7a35c4; --d: #3a1166; }
.bchip.k5k { --c: #e3a51f; --d: #7a4d00; --s: #fff4cf; --t: #3a2200; }
.bchip.k5k b { text-shadow: none; }
.bchip:active { transform: translateY(calc(var(--u) * .5)) scale(.96); }
.bchip.sel { transform: translateY(calc(var(--u) * -1.3)) scale(1.1); box-shadow: 0 calc(var(--u) * .7) 0 var(--d), 0 0 0 calc(var(--u) * .5) #ffe08a, 0 0 calc(var(--u) * 3) rgba(255, 200, 80, .8); }
.chipbar.lock .bchip:not(.sel) { opacity: .32; filter: saturate(.4); }
.chipbar.lock .bchip.sel { transform: translateY(calc(var(--u) * -.6)) scale(1.04); }

/* menü: büyük, dokunması kolay kutular */
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
.menu button { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 1.8); background: linear-gradient(180deg, rgba(255, 220, 160, .08), rgba(255, 220, 160, .03)); border: 1px solid rgba(255, 210, 140, .18); font-weight: 700; font-size: calc(var(--u) * 2.8); text-align: left; color: #f6ead6; }
.menu button:active { background: rgba(255, 220, 160, .14); }
.menu .ico { font-size: calc(var(--u) * 5); color: #f0b33f; }
.menu small { display: block; font-size: .72em; font-weight: 500; color: #b89a72; margin-top: calc(var(--u) * .3); }

/* masaüstü / yatay ekran: açılış ekranı tüm pencereyi kaplar (yatay görsel); oyun çerçevesinin yanları bulanık kahvehane */
@media (min-aspect-ratio: 1/1) {
  body::before { content: ""; position: fixed; inset: -60px; background: #070402 url(img/loading-wide2.jpg) center / cover no-repeat; filter: blur(26px) brightness(.38) saturate(1.15); pointer-events: none; }
  #app { box-shadow: 0 0 80px rgba(0, 0, 0, .85); }
  #loading { position: fixed; --u: .9vh; padding: calc(var(--u) * 7) 6vw calc(var(--u) * 8); background-image: url(img/loading-wide2.jpg); background-position: center 30%; }
  #loading::before { background: linear-gradient(180deg, rgba(10, 5, 2, .9) 0%, rgba(10, 5, 2, .45) 24%, rgba(10, 5, 2, 0) 42%, rgba(10, 5, 2, 0) 60%, rgba(10, 5, 2, .75) 82%, rgba(10, 5, 2, .97) 100%); }
  #loading.ready .enter { width: calc(var(--u) * 46); }
}