:root {
  --font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --cream: #f3ead7;
  --muted: rgba(243, 234, 215, .66);
  --faint: rgba(243, 234, 215, .42);
  --gold: #c9a45c;
  --gold-hi: #ecd29a;
  --gold-lo: #8f6d33;
  --line: rgba(201, 164, 92, .3);
  --green: #93d69a;
  --red: #f08a76;
  --amber: #f2b650;
  --panel: linear-gradient(180deg, rgba(40, 27, 17, .88) 0%, rgba(24, 16, 10, .88) 100%);
  --modal: linear-gradient(180deg, rgba(46, 31, 21, .97) 0%, rgba(25, 16, 10, .98) 100%);
  --shadow: 0 10px 28px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #120b07; overscroll-behavior: none; font-family: var(--font); color: var(--cream); user-select: none; -webkit-user-select: none; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.hidden { display: none !important; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ekranlar */
.screen { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#loader { background: radial-gradient(60% 50% at 50% 0%, #3d2918 0%, #1c120b 60%, #0f0905 100%); transition: opacity .6s var(--ease); }
#loader.fade { opacity: 0; pointer-events: none; }
.logo { display: flex; gap: 10px; margin-bottom: 26px; }
.lt { width: 50px; height: 66px; border-radius: 8px; background: linear-gradient(180deg, #faf5ea, #e6dcc7); box-shadow: inset 0 -5px 0 #cdbf9f, 0 8px 18px rgba(0, 0, 0, .5); display: grid; place-items: center; font: 900 34px var(--font); position: relative; padding-bottom: 12px; animation: bob 2.4s ease-in-out infinite; }
.lt i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: currentColor; bottom: 13px; left: 50%; transform: translateX(-50%); }
.lt.r { color: #d3202c; } .lt.k { color: #1c1a18; animation-delay: .2s; } .lt.b { color: #1c5fd0; animation-delay: .4s; }
.logo.small .lt { width: 40px; height: 54px; font-size: 27px; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.brand { font: 800 58px var(--serif); margin: 0; letter-spacing: -.5px; background: linear-gradient(180deg, #f6e2b0, #b8893e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand em { font-style: italic; }
.sub { font-size: 12px; letter-spacing: 4px; color: var(--gold); margin: 8px 0 30px; font-weight: 600; text-align: center; }
.bar { width: min(310px, 76vw); height: 3px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; }
.bar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8f6d33, #ecd29a); transition: width .3s var(--ease); }
.ldrow { width: min(310px, 76vw); display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 10px; }
.ldrow span:last-child { color: var(--gold-hi); font-weight: 700; }
.credit { margin-top: 34px; font-size: 12px; color: var(--faint); letter-spacing: 1px; }
.credit span { color: var(--gold); }

.card { background: var(--modal); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06); padding: 26px 26px 22px; width: min(440px, 92vw); max-height: 88vh; overflow: auto; }
#menu, #modal { background: rgba(10, 6, 3, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.menu-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.menu-card .logo { margin-bottom: 12px; }
.menu-card .brand { font-size: 46px; }
.menu-card .sub { letter-spacing: 1px; font-size: 13px; margin: 4px 0 18px; color: var(--muted); font-weight: 400; }
.field { width: 100%; display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; text-align: left; }
.field > span { font-size: 11px; letter-spacing: 2px; color: var(--gold); font-weight: 700; text-transform: uppercase; }
.field input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); color: var(--cream); font: 600 16px var(--font); outline: none; user-select: text; }
.field input:focus { border-color: var(--gold); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { flex: 1; min-width: 44px; padding: 10px 8px; border-radius: 11px; border: 1px solid rgba(243, 234, 215, .1); background: rgba(255, 255, 255, .04); font-weight: 600; font-size: 14px; transition: all .15s; }
.chips button.on { background: linear-gradient(180deg, #ecd29a, #b8893e); color: #22160c; border-color: transparent; box-shadow: 0 4px 14px rgba(201, 164, 92, .35); }
.primary { margin-top: 8px; width: 100%; padding: 15px; border-radius: 14px; background: linear-gradient(180deg, #ecd29a, #b8893e); color: #22160c; font: 800 17px var(--font); letter-spacing: .3px; box-shadow: 0 8px 24px rgba(201, 164, 92, .3), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .12s; }
.primary:active { transform: scale(.98); }
.secondary { margin-top: 8px; width: 100%; padding: 13px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); font: 700 15px var(--font); }
.menu-links { margin-top: 14px; display: flex; gap: 10px; color: var(--faint); font-size: 13px; }
.link { color: var(--gold-hi); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tlwrap { position: absolute; left: 14px; top: calc(14px + var(--sat)); display: flex; align-items: flex-start; gap: 8px; }
.tl { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.tl .cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 42px; }
.tl small { font-size: 10px; letter-spacing: 1.6px; color: var(--gold-hi); font-weight: 700; }
.tl b { font-size: 22px; font-weight: 700; line-height: 1; }
.tl b span { font-size: 13px; color: var(--muted); font-weight: 500; }
.tl .arrow { color: var(--gold); margin-top: 14px; }
.tl .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.pill { font-size: 10px; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.mini { width: 30px; height: 40px; border-radius: 5px; background: linear-gradient(180deg, #faf5ea, #e2d7c0); box-shadow: inset 0 -3px 0 #c9bb9a, 0 3px 8px rgba(0, 0, 0, .4); display: grid; place-items: center; font: 800 18px var(--font); position: relative; padding-bottom: 8px; }
.mini::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: currentColor; bottom: 8px; left: 50%; transform: translateX(-50%); }
.mini.empty::after { display: none; }
.mini.okey { outline: 2px solid var(--gold); outline-offset: 2px; }
.mini.okey::before { content: "★"; position: absolute; top: -9px; right: -9px; font-size: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); color: #22160c; display: grid; place-items: center; }
.mini.xs { width: 20px; height: 27px; font-size: 12px; padding-bottom: 6px; border-radius: 4px; }
.mini.xs::after { width: 3px; height: 3px; bottom: 5px; }
.mini.fake { color: #156b3a; }
.c0 { color: #d3202c; } .c1 { color: #1c1a18; } .c2 { color: #1c5fd0; } .c3 { color: #e19a14; }

.icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--cream); transition: background .15s; }
.icon:hover { background: rgba(255, 255, 255, .07); }
.icon.off .wave { display: none; }
.tl2 { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.logbox { position: absolute; top: calc(92px + var(--sat)); left: 14px; width: 290px; max-height: 45vh; overflow: auto; padding: 10px 12px; }
.logbox ol { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.logbox li { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(243, 234, 215, .06); color: var(--muted); }
.logbox li time { color: var(--faint); font-variant-numeric: tabular-nums; }
.logbox li.open { color: var(--gold-hi); } .logbox li.bad { color: var(--red); } .logbox li.win { color: var(--green); font-weight: 700; } .logbox li.sys { color: var(--cream); }

.tr { position: absolute; right: 14px; top: calc(14px + var(--sat)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.btnbar { display: flex; align-items: center; padding: 4px; gap: 2px; }
.vsep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.status { width: 250px; padding: 11px 14px 12px; }
.st-head { display: flex; align-items: baseline; gap: 7px; }
.st-head b { font: 700 17px var(--serif); }
.st-head em { font-style: normal; color: var(--gold-hi); font-weight: 600; font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); align-self: center; flex: none; }
.dot.live { background: var(--gold-hi); box-shadow: 0 0 12px var(--gold-hi); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.st-text { font-size: 12.5px; color: var(--muted); margin: 4px 0 8px; min-height: 16px; }
.meters { display: flex; gap: 14px; }
.meter { flex: 1; display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.meter b { color: var(--cream); font-size: 14px; }
.meter b small { color: var(--faint); font-weight: 500; font-size: 10px; }
.meter i { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); margin-top: 5px; overflow: hidden; }
.meter u { display: block; height: 100%; width: 0; background: var(--gold); transition: width .4s var(--ease); text-decoration: none; }
.meter.ok b { color: var(--green); } .meter.ok u { background: var(--green); }

.toast { position: absolute; top: calc(18% + var(--sat)); left: 50%; transform: translate(-50%, -8px); padding: 11px 18px 11px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14.5px; font-weight: 500; opacity: 0; transition: all .3s var(--ease); pointer-events: none !important; display: flex; align-items: center; gap: 10px; max-width: 88vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast::before { content: "i"; width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--serif); border: 1.5px solid var(--gold); color: var(--gold-hi); }
.toast.good::before { content: "✓"; border-color: var(--green); color: var(--green); }
.toast.bad::before { content: "!"; border-color: var(--red); color: var(--red); }
.toast.warn::before { content: "!"; border-color: var(--amber); color: var(--amber); }

.badge { position: absolute; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 150px; transition: box-shadow .3s, border-color .3s; }
.badge .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--serif); background: radial-gradient(circle at 35% 30%, #e8d3a0, #8f6d33); color: #22160c; position: relative; flex: none; border: 2px solid rgba(236, 210, 154, .5); }
.badge[data-seat="1"] .av { background: radial-gradient(circle at 35% 30%, #d2766c, #6c1f19); color: #fff1e2; }
.badge[data-seat="2"] .av { background: radial-gradient(circle at 35% 30%, #a8c49a, #3e5b33); color: #fff1e2; }
.badge[data-seat="3"] .av { background: radial-gradient(circle at 35% 30%, #86a8c2, #24435c); color: #fff1e2; }
.badge .d { position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; border-radius: 50%; background: var(--cream); color: #22160c; font: 800 9px var(--font); display: grid; place-items: center; }
.badge .nm { font-weight: 700; font-size: 15px; }
.badge .meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.badge .meta b { color: var(--cream); }
.badge .tag { position: absolute; top: -11px; right: 14px; font-size: 10px; font-weight: 800; letter-spacing: .6px; padding: 2px 8px; border-radius: 99px; background: linear-gradient(180deg, #ecd29a, #b8893e); color: #22160c; }
.badge .tag.cift { background: linear-gradient(180deg, #b6e3bb, #5c9d62); }
.badge.active { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(236, 210, 154, .35), 0 0 26px rgba(236, 210, 154, .35), var(--shadow); }
.badge .think { display: none; font-size: 11px; color: var(--gold-hi); }
.badge.active .think { display: inline; }
.seat0 { left: 14px; bottom: calc(14px + var(--sab)); }
.seat1 { right: 14px; top: 43%; }
.seat2 { left: 50%; top: calc(16% + var(--sat)); transform: translateX(-50%); }
.seat3 { left: 14px; top: 43%; }

.toolbar { position: absolute; bottom: calc(12px + var(--sab)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; padding: 6px; }
.tb { min-width: 52px; height: 52px; padding: 5px 8px 4px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgba(243, 234, 215, .08); background: rgba(255, 255, 255, .03); transition: all .15s; }
.tb span { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tb:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.tb:disabled { opacity: .32; cursor: default; }
.tb.gold:not(:disabled) { border-color: var(--gold); background: rgba(201, 164, 92, .12); }
.tb.glow:not(:disabled) { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(236, 210, 154, .3), 0 0 16px rgba(236, 210, 154, .4); animation: pulse2 1.2s infinite; }
@keyframes pulse2 { 50% { box-shadow: 0 0 0 2px rgba(236, 210, 154, .1), 0 0 4px rgba(236, 210, 154, .1); } }

/* modallar */
.card h2 { font: 800 30px var(--serif); margin: 0 0 4px; text-align: center; color: var(--gold-hi); }
.card .lead { text-align: center; color: var(--muted); margin: 0 0 16px; font-size: 14px; }
table.score { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; }
table.score th { font-size: 10.5px; letter-spacing: 1.5px; color: var(--gold); text-align: right; padding: 6px 6px; font-weight: 700; }
table.score th:first-child, table.score td:first-child { text-align: left; }
table.score td { padding: 9px 6px; text-align: right; border-top: 1px solid rgba(243, 234, 215, .08); font-variant-numeric: tabular-nums; }
table.score tr.me td { color: var(--gold-hi); font-weight: 700; }
table.score tr.win td:first-child::after { content: " 👑"; }
.neg { color: var(--green) !important; }
.rules { font-size: 14px; line-height: 1.55; color: var(--muted); }
.rules h3 { color: var(--gold-hi); font: 700 16px var(--serif); margin: 14px 0 4px; }
.rules b { color: var(--cream); }
.row2 { display: flex; gap: 8px; }
.row2 > * { flex: 1; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 8px 0 16px; }
.podium div { text-align: center; }
.podium .col { width: 76px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, rgba(236, 210, 154, .35), rgba(201, 164, 92, .08)); display: grid; place-items: center; font: 800 22px var(--serif); color: var(--gold-hi); }
.podium .nm { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.podium .pt { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.toggle { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid rgba(243, 234, 215, .08); font-size: 15px; }
.switch { width: 46px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, .12); position: relative; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); transition: transform .2s var(--ease); }
.switch.on { background: var(--gold); }
.switch.on::after { transform: translateX(20px); }

@media (min-width: 821px) and (max-width: 1240px) {
  .seat0 { bottom: calc(88px + var(--sab)); }
}
@media (max-width: 820px) {
  .tlwrap { left: 8px; top: calc(8px + var(--sat)); flex-direction: column; gap: 6px; }
  .tl { padding: 8px 10px; gap: 7px; }
  .tl .cell { min-width: 30px; }
  .tl b { font-size: 17px; }
  .mini { width: 24px; height: 32px; font-size: 14px; padding-bottom: 7px; }
  .mini::after { bottom: 6px; width: 3px; height: 3px; }
  .pill { display: none; }
  .tl2 { width: 36px; height: 36px; }
  .tr { right: 8px; top: calc(8px + var(--sat)); }
  .btnbar .icon { width: 36px; height: 36px; }
  .status { width: 200px; padding: 8px 10px; }
  .st-head b { font-size: 14px; }
  .st-text { font-size: 11px; }
  .badge { min-width: 0; padding: 5px 11px 5px 5px; gap: 7px; }
  .badge .av { width: 28px; height: 28px; font-size: 12px; }
  .badge .nm { font-size: 12.5px; }
  .badge .meta { font-size: 10.5px; }
  .seat0 { bottom: calc(80px + var(--sab)); left: 8px; }
  .seat1 { right: 8px; top: 34%; }
  .seat3 { left: 8px; top: 34%; }
  .seat2 { top: calc(22% + var(--sat)); }
  .toolbar { gap: 2px; padding: 4px; bottom: calc(8px + var(--sab)); max-width: calc(100vw - 12px); }
  .tb { min-width: 0; width: calc((100vw - 60px) / 10); max-width: 52px; height: 50px; padding: 4px 2px; }
  .tb span { font-size: 9px; }
  .tb svg { width: 18px; height: 18px; }
  .toolbar .vsep { margin: 0 1px; }
  .logbox { top: calc(120px + var(--sat)); left: 8px; width: min(290px, 80vw); }
}
@media (max-width: 480px) {
  #btnScore, #btnView, .btnbar .vsep { display: none; }
  .tl { gap: 5px; padding: 7px 9px; }
  .tl small { font-size: 8.5px; letter-spacing: 1px; }
  .tl .arrow { margin-top: 10px; }
  .tl .sep { margin: 0 1px; }
  .tr { gap: 6px; }
  .status { position: fixed; left: 8px; right: 8px; top: calc(74px + var(--sat)); width: auto; display: flex; align-items: center; gap: 12px; padding: 7px 12px; }
  .st-head { flex: none; }
  .status .meters { flex: 1; gap: 10px; }
  .st-text { display: none; }
  .tlwrap { flex-direction: row; }
  .logbox { top: calc(124px + var(--sat)); }
  .seat2 { top: calc(19% + var(--sat)); }
  .seat1, .seat3 { top: 27%; }
  .badge .meta { font-size: 10px; }
  .seat0 { bottom: calc(76px + var(--sab)); }
}

/* ================= Rahat Mod (telefon) ================= */
#toast { z-index: 45; position: fixed; }
body.flat-mode #scene, body.flat-mode #hud { display: none !important; }
#flat {
  --tw: min(calc((100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)) / 15), calc((48dvh - 22px) / 2 / 1.34), 66px);
  --th: calc(var(--tw) * 1.34);
  --cw: min(calc(var(--tw) * .72), 44px);
  --side: max(70px, calc(var(--tw) * 1.3));
  position: fixed; inset: 0; z-index: 8; overflow: hidden;
  padding: max(5px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));
  background: radial-gradient(120% 90% at 50% 20%, #2b5d7c 0%, #173d57 55%, #0e2a3e 100%);
  display: grid; gap: 5px;
  grid-template-columns: var(--side) 1fr var(--side);
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "s2 opps s1" "s3 table s0" "act act act" "rack rack rack";
  font-family: var(--font); color: #eef5fb;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
#flat::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: repeating-radial-gradient(circle at 20% 30%, #fff 0 2px, transparent 2px 22px), repeating-radial-gradient(circle at 80% 70%, #fff 0 2px, transparent 2px 26px); }
#flat button { font-family: inherit; color: inherit; }
#flat svg { width: 18px; height: 18px; }

/* masanın üst şeridi: menü + okey + durum */
.f-opps { grid-area: opps; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.f-nav { flex: none; display: flex; gap: 4px; margin-right: auto; }
.f-nav button { width: 38px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--gold-hi) !important;
  background: linear-gradient(180deg, rgba(20, 60, 88, .95), rgba(10, 36, 56, .95)); border: 1px solid rgba(236, 210, 154, .4); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.f-nav button svg { stroke-width: 2.4; }
.f-opps .f-opp:last-child { margin-right: auto; }
.f-chip { flex: none; display: flex; align-items: center; gap: 5px; padding: 2px 7px 2px 6px; border-radius: 9px; background: rgba(4, 18, 30, .55); border: 1px solid rgba(255, 255, 255, .1); height: 30px; }
.f-chip small { font-size: 8.5px; letter-spacing: 1px; font-weight: 700; color: #9cc5ef; }
.f-chip b { font-size: 14px; font-weight: 800; }
.f-chip.okey { border-color: rgba(236, 210, 154, .6); }
.f-chip.okey small { color: var(--gold-hi); }
.f-status { position: absolute; left: 8px; bottom: 7px; z-index: 2; max-width: 60%; pointer-events: none; font-size: 12px; color: rgba(238, 245, 251, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 10px; border-radius: 99px; background: rgba(4, 18, 30, .45); }
.f-status b { color: #fff; }
.f-status.live { background: rgba(236, 210, 154, .18); color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(236, 210, 154, .5); }
.f-status.live b { color: var(--gold-hi); }
.dots i { display: inline-block; width: 4px; height: 4px; margin-left: 3px; border-radius: 50%; background: currentColor; animation: fdot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes fdot { 50% { opacity: .2; transform: translateY(-2px); } }

/* açılır menü */
.f-pop { position: fixed; z-index: 30;
  display: flex; flex-direction: column; min-width: 190px; padding: 6px; border-radius: 14px;
  background: rgba(8, 26, 40, .97); border: 1px solid rgba(236, 210, 154, .3); box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  transform-origin: top left; animation: fpopin .16s var(--ease); }
.f-pop.hidden { display: none; }
.f-pophead { padding: 6px 12px 8px; font-size: 11px; letter-spacing: .5px; color: rgba(238, 245, 251, .55); border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 4px; }
.f-pophead b { color: var(--gold-hi); }
.f-pop button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; text-align: left; }
.f-pop button:active, .f-pop button:hover { background: rgba(255, 255, 255, .08); }
.f-pop button svg { color: var(--gold-hi); flex: none; }
.f-pop button.off .wave { display: none; }
@keyframes fpopin { from { opacity: 0; transform: scale(.92) translateY(-4px); } }

/* taş */
.ft { position: relative; display: inline-grid; place-items: center; width: var(--tw); height: var(--th); border-radius: calc(var(--tw) * .13);
  background: linear-gradient(180deg, #fffdf7 0%, #f3ecdc 70%, #e4d9c2 100%);
  box-shadow: inset 0 calc(var(--tw) * -.07) 0 #cfc2a4, 0 2px 4px rgba(0, 0, 0, .35);
  font: 800 calc(var(--tw) * .6) / 1 var(--font); padding-bottom: calc(var(--th) * .2); letter-spacing: -.03em;
  transition: transform .15s var(--ease), box-shadow .15s; }
.ft i { position: absolute; left: 50%; bottom: calc(var(--th) * .17); width: calc(var(--tw) * .15); height: calc(var(--tw) * .15); border-radius: 50%; background: currentColor; transform: translateX(-50%); }
.ft.fake { color: #157a41; font-size: calc(var(--tw) * .55); }
.ft.fake i { display: none; }
.ft.wild::after { content: "★"; position: absolute; top: 2px; right: 3px; font-size: calc(var(--tw) * .24); color: #c9a45c; }
.ft.back { background: linear-gradient(180deg, #f7f1e3, #e3d8c1); }
.ft.back::before { content: ""; position: absolute; inset: 18%; border: 2px solid rgba(143, 109, 51, .35); border-radius: 4px; }
.ft.sm { --tw: clamp(18px, 5.2vmin, 30px); --th: calc(var(--tw) * 1.34); font-size: calc(var(--tw) * .6); padding-bottom: calc(var(--tw) * .26); box-shadow: inset 0 -2px 0 #cfc2a4, 0 1px 2px rgba(0, 0, 0, .3); }
.ft.sm i { width: 3px; height: 3px; bottom: calc(var(--tw) * .2); }
.ft.xs { --tw: 20px; --th: 26px; font-size: 13px; padding-bottom: 6px; border-radius: 4px; }
.ft.xs i { width: 3px; height: 3px; bottom: 5px; }
.ft.xs.wild::after { display: none; }

/* rakipler */
.f-opp { position: relative; flex: 0 1 200px; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; align-content: center;
  padding: 4px 14px 4px 4px; border-radius: 99px; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s;
  background: linear-gradient(180deg, rgba(10, 34, 52, .95), rgba(4, 16, 26, .95)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.f-opp:active { transform: scale(.97); }
.f-opp .av { grid-row: 1 / 3; width: 42px; height: 42px; font-size: 18px; }
.f-opp .nm { font-weight: 800; font-size: 13.5px; line-height: 1.15; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-opp .meta { font-size: 11px; line-height: 1.2; color: rgba(238, 245, 251, .7); white-space: nowrap; overflow: hidden; }
.f-opp .meta b { color: #9fe0a6; } .f-opp .meta em { color: var(--red); font-style: normal; font-weight: 700; }
.f-opp .cnt { color: #fff; font-weight: 800; }
.f-opp > .d { position: absolute; left: 34px; bottom: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--cream); color: #22160c; font: 800 8px var(--font); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.f-opp .tag { position: absolute; top: -8px; right: 10px; font-size: 8.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: linear-gradient(180deg, #ecd29a, #b8893e); color: #22160c; white-space: nowrap; }
.f-opp .tag.cift { background: linear-gradient(180deg, #b6e3bb, #5c9d62); }
.f-opp.active { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(236, 210, 154, .35), 0 0 20px rgba(236, 210, 154, .4); }
.f-opp.active .av { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 14px rgba(236, 210, 154, .6); }
.f-opp.gifted, .badge.gifted { animation: fgift .7s var(--ease); }
@keyframes fgift { 30% { transform: scale(1.12); box-shadow: 0 0 0 3px #ffd98a, 0 0 30px rgba(255, 217, 138, .8); } }

/* avatar (kart, profil) */
.av { position: relative; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--serif); font-weight: 700; overflow: hidden; flex: none;
  background: radial-gradient(circle at 35% 30%, #d8ba7a, #7a5522); border: 2px solid rgba(255, 255, 255, .3); box-shadow: inset 0 -4px 10px rgba(0, 0, 0, .3); }
.av.s1 { background: radial-gradient(circle at 35% 30%, #e0857a, #6c1f19); }
.av.s2 { background: radial-gradient(circle at 35% 30%, #b4d0a4, #3e5b33); }
.av.s3 { background: radial-gradient(circle at 35% 30%, #93b6d0, #24435c); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.badge .av { overflow: visible; }
.badge .av img { border-radius: 50%; }
.badge { cursor: pointer; pointer-events: auto; }

/* profil */
.prof { display: flex; flex-direction: column; align-items: center; text-align: center; }
.prof .av.big { width: 92px; height: 92px; font-size: 40px; border-width: 3px; box-shadow: 0 0 0 4px rgba(236, 210, 154, .35), 0 12px 30px rgba(0, 0, 0, .5); margin-bottom: 10px; }
.prof h2 { margin: 0 0 2px; }
.prof .lead { margin: 0 0 14px; }
.prof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-bottom: 14px; }
.prof-stats div { padding: 9px 4px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(243, 234, 215, .08); }
.prof-stats b { display: block; font-size: 17px; color: var(--gold-hi); }
.prof-stats span { font-size: 11px; color: var(--muted); }
.gift-title { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
.gifts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; margin-bottom: 10px; }
.gifts button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(243, 234, 215, .12); transition: transform .12s, background .12s; }
.gifts button:hover, .gifts button:active { background: rgba(236, 210, 154, .16); transform: translateY(-2px); }
.gifts i { font-style: normal; font-size: 24px; line-height: 1; }
.gifts span { font-size: 10.5px; color: var(--muted); }
.gift-got { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
@media (max-width: 480px) { .gifts { grid-template-columns: repeat(3, 1fr); } }
@media (max-height: 460px) {
  .prof .av.big { width: 58px; height: 58px; font-size: 26px; margin-bottom: 4px; }
  .prof .lead { margin-bottom: 8px; font-size: 12.5px; }
  .prof-stats { margin-bottom: 8px; } .prof-stats div { padding: 5px 4px; } .prof-stats b { font-size: 15px; }
  .gifts button { padding: 5px 2px; } .gifts i { font-size: 20px; }
  .prof h2 { font-size: 22px; }
}
.gift-fly { position: fixed; z-index: 70; font-size: 34px; transform: translate(-50%, -50%) scale(.6); pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
  transition: left .65s cubic-bezier(.3, .7, .3, 1), top .65s cubic-bezier(.5, -0.4, .6, 1), transform .65s; }
.gift-fly.go { transform: translate(-50%, -50%) scale(1.25); }
.gift-fly.pop { transition: transform .35s, opacity .35s; transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
.bubble { position: fixed; z-index: 70; transform: translateX(-50%); padding: 7px 12px; border-radius: 14px; background: #fffaf0; color: #2a1c10; font: 700 13px var(--font); white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4); animation: fbub .3s var(--ease); pointer-events: none; transition: opacity .35s, transform .35s; }
.bubble::before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: #fffaf0; }
.bubble.out { opacity: 0; transform: translate(-50%, -6px); }
@keyframes fbub { from { opacity: 0; transform: translate(-50%, 6px) scale(.9); } }

/* atma yuvaları — dört köşe */
.f-slot { position: relative; display: grid; place-items: center; min-height: calc(var(--th) * .9); border-radius: 10px; border: 2px dashed rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .12); }
.f-slot[data-dslot="3"] { grid-area: s3; } .f-slot[data-dslot="0"] { grid-area: s0; }
.f-slot[data-dslot="2"] { grid-area: s2; } .f-slot[data-dslot="1"] { grid-area: s1; }
.f-slot { --st: calc(var(--th) * .84 / 1.34); }
.f-slot .ft { --tw: var(--st); --th: calc(var(--tw) * 1.34); }
.f-slot.far { --st: calc(var(--th) * .56 / 1.34); min-height: calc(var(--th) * .66); border-width: 1px; }
.f-slot small { position: absolute; top: 3px; right: 6px; font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .55); }
.f-slot em { position: absolute; bottom: 4px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: rgba(255, 255, 255, .35); pointer-events: none; }
.f-slot .ft + em { display: none; }
.f-slot.glow { border-color: var(--gold-hi); border-style: solid; box-shadow: 0 0 18px rgba(236, 210, 154, .5); cursor: pointer; animation: fglow 1.1s infinite; }
.f-slot.mine.ready { border-color: rgba(147, 214, 154, .6); }
.f-slot.over, .f-slot.mine.ready.over { border-color: #93d69a; border-style: solid; background: rgba(147, 214, 154, .18); }
@keyframes fglow { 50% { box-shadow: 0 0 4px rgba(236, 210, 154, .2); } }

/* masa */
.f-table { grid-area: table; position: relative; display: flex; gap: 8px; border-radius: 14px; padding: 8px; min-height: 0; min-width: 0; overflow: hidden;
  background: linear-gradient(180deg, rgba(6, 30, 48, .55), rgba(3, 18, 30, .6)); border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .35); }
.f-melds { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; touch-action: pan-y; }
.f-empty { margin: auto; font: 700 20px var(--serif); color: rgba(255, 255, 255, .12); letter-spacing: 2px; text-align: center; }
.f-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.f-mrow .own { font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); }
.f-mrow .own.s0 { background: rgba(236, 210, 154, .2); color: var(--gold-hi); }
.f-meld { display: flex; gap: 1px; padding: 3px; border-radius: 7px; background: rgba(0, 0, 0, .18); border: 1px solid transparent; transition: all .15s; }
.f-meld.over, .f-meld.hint { border-color: #8fd3ff; background: rgba(143, 211, 255, .2); box-shadow: 0 0 12px rgba(143, 211, 255, .4); }
.f-center { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 4px; }
.f-gost { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.f-gost small { font-size: 8.5px; letter-spacing: 1px; font-weight: 700; color: #9cc5ef; }
.f-gost .ft { --tw: calc(var(--cw) * .86); --th: calc(var(--tw) * 1.34); }
.f-gost.okey small { color: var(--gold-hi); }
.f-gost.okey .ft { box-shadow: inset 0 calc(var(--tw) * -.07) 0 #cfc2a4, 0 0 0 2px rgba(236, 210, 154, .8), 0 0 12px rgba(236, 210, 154, .4); }
.f-deck { position: relative; width: calc(var(--cw) + 10px); height: calc(var(--cw) * 1.34 + 10px); border-radius: 10px; }
.f-deck .ft { --tw: var(--cw); --th: calc(var(--tw) * 1.34); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.f-deck .ft:nth-child(1) { transform: translate(calc(-50% + 4px), calc(-50% + 4px)); }
.f-deck .ft:nth-child(2) { transform: translate(calc(-50% + 2px), calc(-50% + 2px)); }
.f-deck b { position: absolute; bottom: -8px; right: -8px; min-width: 22px; height: 22px; border-radius: 11px; background: #0b2233; border: 1px solid rgba(255, 255, 255, .25); font-size: 11px; display: grid; place-items: center; padding: 0 5px; z-index: 2; }
.f-deck.glow .ft:last-of-type { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(236, 210, 154, .7); animation: fglow 1.1s infinite; }
.f-deck:disabled { cursor: default; }

/* eylemler */
.f-actions { grid-area: act; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.f-actions::-webkit-scrollbar { display: none; }
.f-actions .grp { display: flex; gap: 4px; flex: none; }
.f-actions button { height: 32px; padding: 0 11px; border-radius: 9px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: linear-gradient(180deg, rgba(20, 60, 88, .95), rgba(10, 36, 56, .95)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.f-actions button.ico { padding: 0 8px; }
.f-actions button:disabled { opacity: .35; }
.f-actions button.gold:not(:disabled) { background: linear-gradient(180deg, #ecd29a, #b8893e); color: #22160c; border-color: transparent; }
.f-actions button[data-a="isle"]:not(:disabled) { border-color: rgba(143, 211, 255, .5); }
.f-actions button.glow:not(:disabled) { box-shadow: 0 0 0 2px rgba(236, 210, 154, .5), 0 0 16px rgba(236, 210, 154, .5); animation: fglow 1.1s infinite; }
.f-meter { display: flex; gap: 10px; font-size: 12px; color: rgba(238, 245, 251, .7); white-space: nowrap; flex: none; }
.f-meter b { color: #fff; } .f-meter .ok, .f-meter .ok b { color: #9fe0a6; }

/* ıstaka */
.f-rack { grid-area: rack; display: grid; grid-template-columns: repeat(15, var(--tw)); grid-auto-rows: var(--th); gap: 4px 0; justify-content: center;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); margin: 0 -6px; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #c98f4e 0%, #a86e35 12%, #8d5a29 60%, #6f4420 100%);
  box-shadow: inset 0 3px 0 rgba(255, 220, 170, .35), inset 0 -3px 8px rgba(0, 0, 0, .35), 0 -6px 20px rgba(0, 0, 0, .35); }
.f-rslot { position: relative; display: grid; place-items: center; }
.f-rslot:nth-child(15n + 1)::before { content: ""; position: absolute; left: -8px; right: calc(-14 * var(--tw) - 8px); bottom: -3px; height: 5px; background: rgba(60, 30, 10, .45); border-radius: 3px; pointer-events: none; }
.f-rslot.over { background: rgba(255, 240, 200, .25); border-radius: 6px; }
.f-rack .ft { width: calc(var(--tw) - 2px); cursor: grab; }
.f-rack .ft.sel { transform: translateY(-9px); box-shadow: inset 0 calc(var(--tw) * -.07) 0 #cfc2a4, 0 0 0 2px var(--gold-hi), 0 8px 14px rgba(0, 0, 0, .45); }
.f-rack .ft.hint { box-shadow: inset 0 calc(var(--tw) * -.07) 0 #cfc2a4, 0 0 0 2px #7cff9a, 0 0 14px rgba(124, 255, 154, .7); animation: fglow 1.1s infinite; }
.f-rack .ft.taken { box-shadow: inset 0 calc(var(--tw) * -.07) 0 #cfc2a4, 0 0 0 2px #ff9a4a, 0 0 12px rgba(255, 154, 74, .6); }
.f-rack .ft.dragging { opacity: .25; }
.f-rack .ft.pop { animation: fpop .45s var(--ease); }
@keyframes fpop { 0% { transform: translateY(-40px) scale(1.15); opacity: 0; } 60% { transform: translateY(3px); opacity: 1; } }
.ft.ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; box-shadow: inset 0 -4px 0 #cfc2a4, 0 14px 28px rgba(0, 0, 0, .55); transition: none; }
#flat.dealing .f-rack .ft { animation: fdeal .5s var(--ease) both; }
#flat.dealing .f-rslot:nth-child(3n) .ft { animation-delay: .08s; } #flat.dealing .f-rslot:nth-child(3n+1) .ft { animation-delay: .16s; }
#flat.dealing .f-rslot:nth-child(n+16) .ft { animation-delay: .3s; }
@keyframes fdeal { from { transform: translateY(-60px) rotate(-8deg); opacity: 0; } }

/* dar yatay ekranlar */
@media (orientation: landscape) and (max-width: 760px) {
  .f-opp { padding-right: 10px; column-gap: 6px; }
  .f-opp .av { width: 36px; height: 36px; font-size: 15px; }
  .f-opp > .d { left: 28px; }
  .f-status { font-size: 11px; padding: 5px 8px; }
  .f-actions button { height: 30px; padding: 0 8px; font-size: 11.5px; }
  .f-meter { gap: 6px; font-size: 11px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  #flat { gap: 4px; }
  .f-actions button { height: 29px; }
}

/* dikey telefon */
@media (orientation: portrait) {
  #flat {
    --tw: min(calc((100vw - 16px) / 10), 54px);
    --side: calc(var(--tw) * 1.2);
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "opps" "table" "act" "rack";
  }
  .f-slot { grid-area: table !important; margin: 6px; width: calc(var(--side) + 4px); z-index: 3; background: rgba(6, 24, 38, .85); }
  .f-slot.far { --st: calc(var(--side) * .56); min-height: calc(var(--side) * .95); align-self: start; }
  .f-slot[data-dslot="3"], .f-slot[data-dslot="0"] { align-self: end; }
  .f-slot[data-dslot="2"], .f-slot[data-dslot="3"] { justify-self: start; }
  .f-slot[data-dslot="1"], .f-slot[data-dslot="0"] { justify-self: end; }
  .f-table { padding: calc(var(--side) * .95 + 14px) 8px calc(var(--th) * .9 + 14px); }
  .f-status { left: 50%; bottom: auto; top: 12px; transform: translateX(-50%); max-width: 48%; font-size: 11px; padding: 5px 9px; }
  .f-opps { gap: 5px; }
  .f-nav { flex-direction: column; gap: 3px; margin-right: 0; }
  .f-nav button { width: 34px; height: 26px; }
  .f-opps .f-opp:last-child { margin-right: 0; }
  .f-opp { flex: 1 1 0; padding: 3px 6px 3px 3px; column-gap: 5px; }
  .f-opp .av { width: 34px; height: 34px; font-size: 14px; }
  .f-opp > .d { left: 26px; }
  .f-opp .nm { font-size: 12px; } .f-opp .meta { font-size: 10px; }
  .f-actions { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 5px; }
  .f-actions button { height: 30px; padding: 0 8px; font-size: 11.5px; }
  .f-meter { order: -1; flex-basis: 100%; justify-content: center; }
  .f-rack { --tw: calc((100vw - 14px) / 15); --th: calc(var(--tw) * 1.85); padding-left: 4px; padding-right: 4px; margin: 0; }
  .f-rack .ft { font-size: calc(var(--tw) * .78); }
  .f-rslot:nth-child(15n + 1)::before { left: -4px; right: calc(-14 * var(--tw) - 4px); }
}
.loglist { list-style: none; margin: 0 0 14px; padding: 0; max-height: 55vh; overflow: auto; font-size: 13px; color: var(--muted); }
.loglist li { padding: 5px 0; border-bottom: 1px solid rgba(243, 234, 215, .06); }
.loglist time { color: var(--faint); margin-right: 6px; font-variant-numeric: tabular-nums; }
.loglist .open { color: var(--gold-hi); } .loglist .bad { color: var(--red); } .loglist .win { color: var(--green); font-weight: 700; }

/* modal kapatma */
.card { position: relative; }
.mx { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--cream);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(243, 234, 215, .16); transition: background .15s, transform .15s; }
.mx:hover, .mx:active { background: rgba(255, 255, 255, .16); transform: scale(.94); }
.mx svg, .px svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (max-height: 460px) {
  .card { padding: 16px 18px 14px; max-height: 94vh; }
  .card h2 { font-size: 24px; }
  .card .lead { margin-bottom: 8px; }
  .toggle { padding: 6px 0; }
  .card .primary, .card .secondary { margin-top: 6px; padding-top: 11px; padding-bottom: 11px; }
}
.f-pophead { display: flex; align-items: center; gap: 4px; }
.f-pophead .px, .ch-head .px { margin-left: auto; width: 28px; height: 28px; padding: 0 !important; border-radius: 50%; display: grid; place-items: center; justify-content: center; background: rgba(255, 255, 255, .08); color: #eef5fb; }

/* taş uçuşları */
.ft.arriving { visibility: hidden; }
.ft.fly { position: fixed; left: 0; top: 0; z-index: 65; pointer-events: none; transition: none; transform-origin: 50% 50%; will-change: transform;
  box-shadow: inset 0 calc(var(--tw) * -.07) 0 #cfc2a4, 0 12px 26px rgba(0, 0, 0, .5); backface-visibility: hidden; }
.ft.fly.reveal { box-shadow: inset 0 calc(var(--tw) * -.07) 0 #cfc2a4, 0 0 0 2px #ffd98a, 0 0 22px rgba(255, 217, 138, .85), 0 16px 30px rgba(0, 0, 0, .5); }
.ft.fly .cap { position: absolute; left: 50%; top: 100%; margin-top: 4px; transform: translateX(-50%); font: 800 9px var(--font); letter-spacing: 1.5px; color: #ffe6ad;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8); white-space: nowrap; animation: fcap 1.35s both; }
@keyframes fcap { 0%, 22% { opacity: 0; } 32%, 62% { opacity: 1; } 75%, 100% { opacity: 0; } }
.ft.land { animation: fland .38s var(--ease); }
@keyframes fland { 0% { transform: scale(1.12); filter: brightness(1.15); } 60% { transform: scale(.97); } }
.f-meld.flash { animation: fmflash .8s var(--ease); }
@keyframes fmflash { 25% { border-color: #ffd98a; background: rgba(255, 217, 138, .25); box-shadow: 0 0 18px rgba(255, 217, 138, .6); } }
.f-rack .ft.fresh { box-shadow: inset 0 calc(var(--tw) * -.07) 0 #cfc2a4, 0 0 0 2px #ffd98a, 0 0 12px rgba(255, 217, 138, .55); }
.f-rack .ft.fresh::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #ffd98a; box-shadow: 0 0 6px #ffd98a; }
.f-rack .ft.fresh.sel, .f-rack .ft.fresh.hint { box-shadow: inset 0 calc(var(--tw) * -.07) 0 #cfc2a4, 0 0 0 2px var(--gold-hi), 0 8px 14px rgba(0, 0, 0, .45); }

/* mesaj butonu + paneli */
.f-actions { position: relative; }
.f-actions button.chatb { flex: none; margin-left: 2px; width: 34px; padding: 0 !important; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(180deg, #2f7fb0, #17506f); border-color: rgba(143, 211, 255, .45); }
.f-actions button.chatb svg { width: 17px; height: 17px; }
@media (orientation: portrait) {
  .f-actions button.chatb { position: absolute; right: 2px; top: -2px; width: 30px; height: 30px; }
}
.f-chatbox { position: fixed; z-index: 66; width: min(320px, calc(100vw - 16px)); max-height: min(330px, 70vh); display: flex; flex-direction: column; padding: 8px; border-radius: 16px;
  background: rgba(8, 26, 40, .97); border: 1px solid rgba(236, 210, 154, .3); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); font-family: var(--font); color: #eef5fb;
  animation: fpopin .16s var(--ease); transform-origin: bottom right; }
.ch-head { display: flex; align-items: center; padding: 2px 4px 6px 6px; font-size: 13px; }
.ch-head b { color: var(--gold-hi); }
.ch-tabs { display: flex; gap: 4px; margin-bottom: 6px; overflow-x: auto; scrollbar-width: none; }
.ch-tabs button { flex: none; padding: 5px 10px; border-radius: 99px; font: 700 11.5px var(--font); color: rgba(238, 245, 251, .75); background: rgba(255, 255, 255, .06); }
.ch-tabs button.on { background: linear-gradient(180deg, #ecd29a, #b8893e); color: #22160c; }
.ch-list { display: flex; flex-wrap: wrap; gap: 5px; overflow-y: auto; padding: 2px; }
.ch-list button { padding: 7px 11px; border-radius: 12px 12px 12px 3px; font: 600 12.5px var(--font); color: #2a1c10; background: #fffaf0; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .12s; }
.ch-list button:active, .ch-list button:hover { transform: translateY(-1px) scale(1.03); background: #ffeec9; }
.ch-list.emo button { font-size: 22px; padding: 4px 8px; border-radius: 12px; background: rgba(255, 255, 255, .08); box-shadow: none; }
.bubble { max-width: 70vw; white-space: normal; text-align: center; }
.bubble.up::before { top: auto; bottom: -6px; border-top: 6px solid #fffaf0; border-bottom: 0; }
.bubble::before { left: calc(50% + var(--ax, 0px)); }
.bubble.me { background: linear-gradient(180deg, #fff3cf, #ffe2a0); }
.bubble.me.up::before { border-top-color: #ffe2a0; }

/* olay duyurusu */
.ann { position: fixed; z-index: 64; transform: translate(-50%, 0); display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 99px; overflow: hidden;
  font-family: var(--font); color: #fff; pointer-events: none; white-space: nowrap;
  background: linear-gradient(180deg, rgba(34, 24, 12, .96), rgba(16, 10, 4, .96)); border: 1.5px solid #e2bf76;
  box-shadow: 0 0 0 4px rgba(226, 191, 118, .15), 0 14px 34px rgba(0, 0, 0, .55), 0 0 30px rgba(226, 191, 118, .3);
  animation: fannin .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.ann.out { animation: fannout .4s ease-in both; }
@keyframes fannin { from { opacity: 0; transform: translate(-50%, -14px) scale(.6); } }
@keyframes fannout { to { opacity: 0; transform: translate(-50%, -10px) scale(.9); } }
.ann .av { width: 38px; height: 38px; font-size: 16px; }
.ann .tx { display: flex; flex-direction: column; line-height: 1.1; }
.ann .tx small { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: rgba(255, 240, 210, .7); }
.ann .tx b { font: 800 16px var(--serif); color: #ffe6ad; letter-spacing: .3px; }
.ann .pt { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 50px; height: 38px; padding: 0 10px; border-radius: 99px;
  background: linear-gradient(180deg, #ffe39e, #c8963f); color: #2a1a08; line-height: 1; }
.ann .pt b { font: 900 17px var(--font); }
.ann .pt span { font-size: 8px; font-weight: 800; letter-spacing: 1px; margin-top: 1px; }
.ann.cift .pt { background: linear-gradient(180deg, #c7f0cb, #5c9d62); }
.ann.penalty { border-color: #ff6b5e; box-shadow: 0 0 0 4px rgba(255, 107, 94, .15), 0 14px 34px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 107, 94, .3); }
.ann.penalty .tx b { color: #ffb1a8; }
.ann.penalty .pt { background: linear-gradient(180deg, #ff9d90, #c0392b); color: #fff; }
.ann.finish { border-color: #9fe0a6; }
.ann.finish .pt { background: linear-gradient(180deg, #d8ffcf, #4fae5a); }
.ann .shine { position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); animation: fshine 1.6s .4s ease-in-out; }
@keyframes fshine { to { left: 120%; } }
@media (max-height: 460px) {
  .ann .av { width: 32px; height: 32px; } .ann .pt { height: 32px; min-width: 44px; } .ann .tx b { font-size: 14px; }
}

/* ================= online lobi ================= */
#lobby { z-index: 40; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; user-select: none;
  background: radial-gradient(120% 70% at 50% -10%, rgba(38, 92, 58, .55), transparent 60%), radial-gradient(90% 60% at 50% 110%, rgba(120, 70, 30, .35), transparent 70%), #140c07; }
#modal { z-index: 60; }
#toast { z-index: 80; }
.room { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 6, 3, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lbfade .25s var(--ease); }
@keyframes lbfade { from { opacity: 0; } }
.lb { width: min(620px, 100%); padding: calc(10px + var(--sat)) 14px calc(24px + var(--sab)); display: flex; flex-direction: column; gap: 12px; }
.lb-top { display: flex; align-items: center; gap: 10px; }
.lb-back { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--cream); background: rgba(255, 255, 255, .06); border: 1px solid rgba(243, 234, 215, .1); flex: none; }
.lb-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.lb-brand .lt { width: 26px; height: 34px; font-size: 17px; border-radius: 5px; box-shadow: inset 0 -3px 0 #cdbf9f, 0 4px 10px rgba(0, 0, 0, .5); animation: none; }
.lb-brand .lt i { width: 4px; height: 4px; bottom: 6px; }
.lb-brand b { font: 800 22px var(--serif); color: var(--gold-hi); white-space: nowrap; }
.lb-brand em { font-style: normal; color: var(--cream); }
.lb-me { display: flex; align-items: center; gap: 8px; flex: none; }
.lb-login { padding: 9px 16px; border-radius: 12px; background: linear-gradient(180deg, #ecd29a, #b8893e); color: #22160c; font-weight: 800; font-size: 14px; }
.lb-jeton { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 10px; border-radius: 99px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); font-size: 14px; }
.lb-jeton b { color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.lb-jeton span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #ecd29a, #b8893e); color: #22160c; font-weight: 900; }
.lb-prof { position: relative; }
.lb-prof .dot { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); border: 2px solid #140c07; }
.lav { position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, #6b4a2a, #3a2616); border: 2px solid rgba(236, 210, 154, .55); font: 800 15px var(--font); color: var(--gold-hi); }
.lav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.lav.big { width: 64px; height: 64px; font-size: 26px; }
.prof .lav.big { width: 92px; height: 92px; font-size: 40px; border-width: 3px; margin-bottom: 10px; box-shadow: 0 0 0 4px rgba(236, 210, 154, .3); }
.lb-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(243, 234, 215, .08); position: sticky; top: calc(4px + var(--sat)); z-index: 3; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lb-tabs button { padding: 10px 4px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--muted); }
.lb-tabs button.on { background: linear-gradient(180deg, rgba(236, 210, 154, .22), rgba(201, 164, 92, .1)); color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(236, 210, 154, .3); }
.lb-body section { display: flex; flex-direction: column; gap: 12px; animation: lbfade .25s var(--ease); }
.lb-body .field { margin: 0; }
.lb-quick, .lb-return, .lb-bots, .lb-body section[data-sec="create"] { padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lb-quick { background: radial-gradient(120% 90% at 100% 0%, rgba(236, 210, 154, .16), transparent 55%), var(--panel); }
.lb-qhead { display: flex; flex-direction: column; margin-bottom: 10px; }
.lb-qhead b { font: 800 20px var(--serif); color: var(--gold-hi); }
.lb-qhead small, .lb-note { color: var(--muted); font-size: 12.5px; }
.lb-note { margin: 0; text-align: center; line-height: 1.45; }
.lb-note a { color: var(--gold-hi); }
.chips.stakes button { min-width: 66px; font-size: 13px; padding: 9px 6px; }
.lb-return { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-color: var(--amber); font-weight: 700; }
.lb-code { display: flex; gap: 8px; }
.lb-code input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); color: var(--cream); font: 700 16px var(--font); letter-spacing: 3px; text-transform: uppercase; outline: none; user-select: text; -webkit-user-select: text; }
.lb-code input::placeholder { letter-spacing: .5px; text-transform: none; color: var(--faint); font-weight: 500; }
.lb-btn { padding: 11px 18px; border-radius: 12px; font-weight: 800; font-size: 14px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); white-space: nowrap; }
.lb-btn.gold { background: linear-gradient(180deg, #ecd29a, #b8893e); color: #22160c; border-color: transparent; box-shadow: 0 4px 14px rgba(201, 164, 92, .3); }
.lb-btn:disabled { opacity: .45; }
.lb-btn:active:not(:disabled), .lb-jeton:active, .pack:active { transform: scale(.97); }
.lb-listhead { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 0; }
.lb-listhead b { font: 800 18px var(--serif); color: var(--gold-hi); }
.lb-listhead span { font-size: 12px; color: var(--green); }
.lb-listhead span:not(:empty)::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 6px; box-shadow: 0 0 8px var(--green); }
.lb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.lb-empty { grid-column: 1 / -1; padding: 26px 16px; text-align: center; color: var(--muted); border-radius: 16px; border: 1px dashed var(--line); line-height: 1.6; }
.tcard { padding: 13px; border-radius: 16px; background: linear-gradient(180deg, rgba(34, 72, 48, .55), rgba(20, 38, 26, .6)); border: 1px solid rgba(147, 214, 154, .18); display: flex; flex-direction: column; gap: 9px; }
.tcard.busy { background: rgba(255, 255, 255, .035); border-color: rgba(243, 234, 215, .08); }
.tcard .th { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tcard .th b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard .stk { flex: none; padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .35); color: var(--gold-hi); font-size: 12.5px; font-weight: 800; }
.tcard .tm { font-size: 12px; color: var(--muted); }
.tcard .tm em { font-style: normal; color: var(--amber); }
.tcard .tm em.wait { color: var(--green); }
.tseats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ts { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.ts small { font-size: 10.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ts.empty .lav { background: transparent; border-style: dashed; border-color: rgba(243, 234, 215, .25); color: var(--faint); }
.ts.bot .lav { filter: saturate(.4); opacity: .8; }
.tcard .lb-btn { width: 100%; }
.lb-top10 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-top10 li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(243, 234, 215, .06); }
.lb-top10 li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.lb-top10 .rk { width: 22px; text-align: center; font: 800 16px var(--serif); color: var(--muted); }
.lb-top10 .sc { font-weight: 800; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.lb-top10 .sc small { font-weight: 500; color: var(--muted); font-size: 11px; }
.lb-top10 li.m0 { background: linear-gradient(90deg, rgba(236, 210, 154, .2), rgba(236, 210, 154, .04)); border-color: rgba(236, 210, 154, .35); }
.lb-top10 li.m0 .rk { color: #ffd76a; } .lb-top10 li.m1 .rk { color: #d9dde3; } .lb-top10 li.m2 .rk { color: #d49a61; }
.lb-bots { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.lb-bots .logo { margin-bottom: 6px; }
.lb-bots p { color: var(--muted); font-size: 14px; margin: 0 0 6px; line-height: 1.5; }
.toggle small { display: block; font-size: 11.5px; color: var(--muted); }
/* bekleme odası */
.room-card { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.room-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.room-meta span { padding: 4px 10px; border-radius: 99px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(243, 234, 215, .1); font-size: 12.5px; font-weight: 700; }
.room-seats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rs { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(243, 234, 215, .1); min-width: 0; }
.rs small.cl { color: var(--gold-hi); font-weight: 700; }
.rs b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs small { font-size: 11px; color: var(--muted); }
.rs.me { border-color: rgba(236, 210, 154, .5); background: rgba(236, 210, 154, .08); }
.rs.empty { border-style: dashed; opacity: .7; }
.rs.empty .lav { background: transparent; border-style: dashed; color: var(--faint); }
.room-status { text-align: center; margin: 14px 0 10px; font-size: 14px; color: var(--muted); min-height: 20px; }
.room-status b { color: var(--gold-hi); font-size: 16px; }
.room-invite { padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(243, 234, 215, .08); }
.room-code { text-align: center; font-size: 13px; color: var(--muted); }
.room-code b { display: block; font: 800 28px var(--font); letter-spacing: 8px; color: var(--gold-hi); margin-top: 2px; user-select: text; -webkit-user-select: text; }
.room-invite .secondary { margin-top: 8px; padding: 11px; font-size: 14px; }
/* mağaza */
.shop-card { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.jt { color: var(--gold-hi); }
.packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 4px 0 12px; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; padding: 16px 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); transition: transform .15s; }
.pack i { font-style: normal; font-size: 28px; line-height: 1; }
.pack b { font: 800 22px var(--font); color: var(--gold-hi); margin-top: 6px; }
.pack span { font-size: 12px; color: var(--muted); }
.pack u { text-decoration: none; margin-top: 10px; padding: 7px 16px; border-radius: 99px; background: linear-gradient(180deg, #ecd29a, #b8893e); color: #22160c; font-weight: 800; font-size: 14px; }
.pack.best { border-color: var(--gold-hi); background: radial-gradient(100% 80% at 50% 0%, rgba(236, 210, 154, .2), rgba(255, 255, 255, .04)); }
.pack em { position: absolute; top: -9px; padding: 2px 8px; border-radius: 99px; background: var(--red); color: #fff; font: 800 9.5px var(--font); letter-spacing: .6px; font-style: normal; }
.bonus { width: 100%; margin-bottom: 10px; padding: 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(147, 214, 154, .2), rgba(147, 214, 154, .08)); border: 1px solid rgba(147, 214, 154, .45); font-weight: 700; font-size: 15px; animation: bonuspulse 1.8s ease-in-out infinite; }
.bonus b { color: var(--green); }
@keyframes bonuspulse { 50% { box-shadow: 0 0 0 4px rgba(147, 214, 154, .12); } }
.logins { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.abtn { display: block; text-align: center; padding: 13px; border-radius: 14px; font-weight: 800; font-size: 15px; text-decoration: none; color: var(--cream); border: 1px solid var(--line); background: rgba(255, 255, 255, .05); }
.abtn.g { background: #fff; color: #1f1f1f; border-color: #fff; }
.abtn.ap { background: #000; color: #fff; border-color: #333; }
.card .lead.small { font-size: 12.5px; margin: 6px 0 0; }
.card .lead a { color: var(--gold-hi); }
.card a.primary { display: block; text-align: center; text-decoration: none; }
.gift-title small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.gifts button b { color: var(--gold-hi); font-size: 11px; }
/* hamle sayacı */
[data-k="tm"] { display: inline-block; min-width: 38px; padding: 1px 7px; border-radius: 99px; background: rgba(0, 0, 0, .35); color: var(--gold-hi); font-weight: 800; font-variant-numeric: tabular-nums; }
[data-k="tm"].low { background: var(--red); color: #fff; animation: tmblink .5s ease-in-out infinite alternate; }
@keyframes tmblink { to { opacity: .6; } }
body.timing .f-opp.active::after, body.timing .badge.active::after { content: ""; position: absolute; left: 8%; bottom: -5px; height: 3px; width: calc(var(--turnpct) * .84); border-radius: 3px; background: var(--gold-hi); box-shadow: 0 0 6px var(--gold); transition: width .25s linear; }
@media (min-width: 700px) { .room-seats { grid-template-columns: repeat(4, 1fr); } }
@media (max-height: 500px) and (orientation: landscape) {
  .room-card, .shop-card { padding: 16px; }
  .card.room-card h2, .card.shop-card h2 { font-size: 22px; }
  .room-seats { grid-template-columns: repeat(4, 1fr); }
  .rs .lav.big { width: 44px; height: 44px; font-size: 18px; }
  .room-status { margin: 8px 0 6px; }
  .packs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  table.score { font-size: 13px; }
  table.score th { letter-spacing: .3px; font-size: 9.5px; padding: 6px 3px; }
  table.score td { padding: 8px 3px; }
  table.score td:first-child { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* 3D → Basit Mod geçişi: her ekranda belirgin */
.modepill { position: absolute; left: 50%; top: calc(14px + var(--sat)); transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 7px; padding: 9px 16px 9px 12px; border-radius: 99px;
  background: linear-gradient(180deg, #ecd29a, #b8893e); color: #22160c; font: 800 14px var(--font); box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 3px rgba(236, 210, 154, .25); white-space: nowrap; }
.modepill i { font-style: normal; font-size: 16px; }
.modepill:active { transform: translateX(-50%) scale(.96); }
@media (max-width: 1100px) { .modepill { left: auto; right: 10px; transform: none; top: auto; bottom: calc(100px + var(--sab)); padding: 10px 14px 10px 11px; font-size: 13.5px; } .modepill:active { transform: scale(.96); } }
@media (orientation: landscape) and (max-height: 500px) { .modepill { top: auto; bottom: calc(12px + var(--sab)); right: 12px; } }
/* hızlı oyun kurulumu */
.lb-qlabel { font-size: 11px; letter-spacing: 1.6px; color: var(--gold); font-weight: 700; text-transform: uppercase; margin: 12px 0 6px; }
.lb-qhead + .lb-qlabel { margin-top: 2px; }
.lb-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lb-modes button { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; padding: 10px; border-radius: 14px; border: 1px solid rgba(243, 234, 215, .12); background: rgba(255, 255, 255, .04); }
.lb-modes i { grid-row: span 2; font-style: normal; font-size: 22px; }
.lb-modes b { font-size: 14px; }
.lb-modes small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.lb-modes button.on { border-color: var(--gold-hi); background: linear-gradient(180deg, rgba(236, 210, 154, .2), rgba(201, 164, 92, .06)); box-shadow: inset 0 0 0 1px rgba(236, 210, 154, .35); }
.lb-modes button.on b { color: var(--gold-hi); }
.lb-tabs { grid-template-columns: repeat(5, 1fr); }
.lb-tabs button { font-size: 12.5px; padding: 10px 2px; }
.ts { position: relative; }
.ts em, .rs b em { font-style: normal; font: 800 8.5px var(--font); letter-spacing: .5px; padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: var(--muted); }
.ts em { position: absolute; top: 26px; }
.tcard.take { background: linear-gradient(180deg, rgba(92, 70, 30, .5), rgba(40, 28, 14, .6)); border-color: rgba(236, 210, 154, .3); }
.tnote { display: block; text-align: center; font-size: 11px; color: var(--muted); margin-top: -3px; }
.rs.bot .lav { filter: saturate(.4); opacity: .8; }
.room.claiming .room-invite, .room.claiming #roomStart { display: none; }
.lb-jeton small { font-size: 10.5px; color: var(--amber); font-weight: 700; }
/* profil */
.pf { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.pf-head { display: flex; align-items: center; gap: 14px; }
.pf-head .lav.big { width: 68px; height: 68px; font-size: 28px; }
.pf-head h3 { margin: 0; font: 800 22px var(--serif); color: var(--gold-hi); }
.pf-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.pf-jeton { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: radial-gradient(120% 120% at 0% 0%, rgba(236, 210, 154, .22), rgba(255, 255, 255, .03)); border: 1px solid var(--line); }
.pf-jeton > i { font-style: normal; font-size: 32px; }
.pf-jeton div { flex: 1; display: flex; align-items: baseline; gap: 6px; }
.pf-jeton b { font: 800 28px var(--font); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.pf-jeton span { color: var(--muted); font-size: 13px; }
.pf-refill { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: rgba(242, 182, 80, .1); border: 1px solid rgba(242, 182, 80, .45); font-size: 13px; line-height: 1.45; }
.pf-refill > b { color: var(--amber); font-size: 14px; }
.pf .bonus { margin: 0; }
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pf-stats div { padding: 10px 4px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(243, 234, 215, .07); text-align: center; }
.pf-stats b { display: block; font-size: 16px; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.pf-stats b small { font-size: 11px; color: var(--muted); font-weight: 600; }
.pf-stats span { font-size: 10.5px; color: var(--muted); }
.pf-stats .minus, .pf-log .minus { color: var(--red); }
.pf-sub { font-size: 11px; letter-spacing: 1.6px; color: var(--gold); font-weight: 700; text-transform: uppercase; margin-top: 4px; }
.pf-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-log li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); font-size: 13.5px; }
.pf-log li span { flex: 1; min-width: 0; }
.pf-log li small { display: block; font-size: 11px; color: var(--faint); }
.pf-log li b { white-space: nowrap; font-size: 13px; }
.pf-log .plus { color: var(--green); }
.pf-log li.empty { justify-content: center; color: var(--muted); }
.card .pf { max-height: 70vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
@media (max-width: 400px) { .pf-stats { grid-template-columns: repeat(2, 1fr); } }
/* oyun içi menüde hesap özeti */
.menu-me { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); text-align: left; }
.menu-me .av { width: 40px; height: 40px; flex: none; }
.menu-me span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.menu-me small { font-size: 12px; color: var(--muted); }
.menu-me em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--gold-hi); }

/* ---- izleyici / koltuk bekleyen ---- */
body.watching #hud .toolbar, body.watching #hud .meters, body.watching #flat .f-actions, body.watching #flat .f-rack, body.watching #hud .badge.seat0 { display: none !important; }
.watchbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + var(--sab)); z-index: 30; width: min(560px, calc(100vw - 16px)); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "msg msg" "seat btns"; gap: 8px 10px; align-items: center;
  padding: 11px 12px; border-radius: 16px; background: var(--modal); border: 1px solid var(--line); box-shadow: var(--shadow); }
.wb-msg { grid-area: msg; font-size: 13.5px; line-height: 1.35; color: var(--cream); }
.wb-msg b { color: var(--gold-hi); }
.wb-seat { grid-area: seat; display: flex; align-items: center; gap: 8px; min-width: 0; }
.wb-seat .av, .wb-seat .lav { width: 34px; height: 34px; flex: none; }
.wb-seat span { display: flex; flex-direction: column; min-width: 0; }
.wb-seat b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-seat small { font-size: 11.5px; color: var(--muted); }
.wb-btns { grid-area: btns; display: flex; gap: 6px; }
.wb-btns button { padding: 9px 13px; font-size: 13px; border-radius: 11px; width: auto; margin: 0; }
.watch-note { margin: 4px 0 0; padding: 9px 12px; border-radius: 12px; background: rgba(242, 182, 80, .1); border: 1px solid rgba(242, 182, 80, .4); }
.tbtns { display: flex; gap: 6px; }
.tbtns .lb-btn:first-child { flex: 1; }
.tcard .tbtns .lb-btn[data-watch] { width: auto; flex: none; }
.ts.open .lav { filter: none; opacity: 1; border: 1.5px dashed var(--green); background: rgba(147, 214, 154, .12); }
.ts.open em { background: var(--green); color: #10240f; }
.ts.open small { color: var(--green); font-weight: 700; }
/* ---- misafir girişi ---- */
.guest-box { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px; }
.guest-box input, .lb-qname input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); color: var(--cream); font: 600 15px var(--font); outline: none; user-select: text; -webkit-user-select: text; }
.guest-box input:focus, .lb-qname input:focus { border-color: var(--gold); }
.guest-box small { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.4; }
.or { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; color: var(--faint); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pf-guest { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 14px; background: rgba(120, 170, 255, .08); border: 1px solid rgba(120, 170, 255, .35); font-size: 12.5px; line-height: 1.45; }
.pf-guest .lb-btn { flex: none; padding: 9px 13px; }
/* ---- masa adı ---- */
.lb-qname { margin: 4px 0 2px; border-radius: 12px; }
.lb-qname summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--gold-hi); padding: 6px 0; list-style: none; }
.lb-qname summary::-webkit-details-marker { display: none; }
.lb-qname summary small { color: var(--faint); font-weight: 500; }
.lb-qname[open] { display: flex; flex-direction: column; gap: 8px; }
.lb-hint { font-size: 11.5px; color: var(--faint); }
.name-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.name-ideas button { padding: 6px 10px; border-radius: 999px; font-size: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.name-ideas button:active { transform: scale(.96); }
.name-field span small { font-weight: 500; color: var(--faint); margin-left: 4px; }
.name-field input { font-size: 16px !important; font-weight: 700 !important; }
body.watching #flat .f-slot.mine em { display: none; }

/* ================= TAVLA ================= */
.tv-logo { display: flex; gap: 12px; margin-bottom: 22px; }
.tv-logo .die { width: 56px; height: 56px; border-radius: 13px; background: linear-gradient(160deg, #fffdf6, #e9e1cf); box-shadow: inset 0 -4px 0 #cfc3a6, 0 10px 22px rgba(0, 0, 0, .5); position: relative; animation: roll 2.6s var(--ease) infinite; }
.tv-logo .die.b { animation-delay: .25s; }
.tv-logo .die i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #1d1a17; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .5); }
.tv-logo .die i:nth-child(1) { top: 9px; left: 9px; } .tv-logo .die i:nth-child(2) { top: 22px; left: 22px; background: #c81d28; } .tv-logo .die i:nth-child(3) { bottom: 9px; right: 9px; }
.tv-logo .die.b i:nth-child(1) { top: 11px; left: 11px; background: #1d1a17; } .tv-logo .die.b i:nth-child(2) { top: auto; left: auto; bottom: 11px; right: 11px; background: #1d1a17; }
.tv-logo.small { margin-bottom: 12px; } .tv-logo.small .die { width: 42px; height: 42px; border-radius: 10px; }
.tv-logo.small .die i { width: 8px; height: 8px; } .tv-logo.small .die i:nth-child(2) { top: 17px; left: 17px; } .tv-logo.small .die.b i:nth-child(2) { top: auto; left: auto; }
@keyframes roll { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-10px) rotate(-12deg); } 80% { transform: translateY(0) rotate(4deg); } }
.tv-mini { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(160deg, #fffdf6, #e9e1cf); box-shadow: inset 0 -3px 0 #cfc3a6; position: relative; flex: none; }
.tv-mini::before, .tv-mini::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #1d1a17; top: 5px; left: 5px; }
.tv-mini::after { top: auto; left: auto; bottom: 7px; right: 5px; box-shadow: -5px -5px 0 #c81d28; }

#hud .tv-top { position: absolute; top: calc(8px + var(--sat)); left: 8px; right: 8px; display: flex; align-items: center; gap: 8px; }
#hud .tv-top .icon { background: rgba(20, 13, 8, .6); border: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); flex: none; }
#hud .tv-top .pl { flex: 1; max-width: 420px; margin: 0 auto; }
.pl { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); transition: box-shadow .3s, border-color .3s; min-width: 0; }
.pl .lav { width: 38px; height: 38px; }
.pl.on { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(236, 210, 154, .35), 0 0 24px rgba(236, 210, 154, .35), var(--shadow); }
.pl-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-tx b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tx small { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.pl-tx small em { font-style: normal; color: var(--amber); }
.chk { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
.chk.w { background: radial-gradient(circle at 35% 30%, #fff, #e6dccb 70%, #bfb39c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.chk.b { background: radial-gradient(circle at 35% 30%, #5a4f48, #26211f 70%, #0f0c0b); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.pl-sc { display: flex; align-items: baseline; gap: 1px; padding-left: 6px; border-left: 1px solid var(--line); }
.pl-sc b { font: 800 24px var(--serif); color: var(--gold-hi); line-height: 1; }
.pl-sc small { font-size: 12px; color: var(--faint); }
.pl-tm { position: absolute; left: 3px; top: 3px; width: 42px; height: 42px; border-radius: 50%; pointer-events: none; display: grid; place-items: center; font: 800 15px var(--font); color: #fff; text-shadow: 0 1px 3px #000;
  background: conic-gradient(var(--gold-hi) calc(var(--p, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 19px, #000 19.5px); mask: radial-gradient(circle, transparent 19px, #000 19.5px); }
.pl-tm.low { background: conic-gradient(var(--red) calc(var(--p, 0) * 360deg), transparent 0); }
.pl-tm:not(:empty) { -webkit-mask: none; mask: none; background: rgba(200, 40, 40, .55); }

.tv-status { position: absolute; top: calc(66px + var(--sat)); left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(15, 10, 6, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 13px; color: var(--cream); white-space: nowrap; pointer-events: none !important; max-width: calc(100vw - 20px); overflow: hidden; text-overflow: ellipsis; }
.tv-status:empty { display: none; }
.tv-status b { color: var(--gold-hi); }
.tv-status small { color: var(--faint); font-size: 11px; }

#hud .tv-bottom { position: absolute; left: 8px; right: 8px; bottom: calc(8px + var(--sab)); display: flex; flex-direction: column; gap: 8px; align-items: stretch; max-width: 560px; margin: 0 auto; }
.tv-actions { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; }
.tv-roll { display: flex; align-items: center; gap: 10px; padding: 0 28px; height: 58px; border-radius: 18px; font: 900 19px var(--font); letter-spacing: 1.5px; color: #22160c; background: linear-gradient(180deg, #fbe7b4, #d6a64f 55%, #b8893e); box-shadow: 0 10px 28px rgba(214, 166, 79, .45), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(0, 0, 0, .15); animation: pulse 1.6s ease-in-out infinite; }
.tv-roll:active { transform: scale(.96); }
@keyframes pulse { 50% { box-shadow: 0 10px 36px rgba(236, 210, 154, .75), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(0, 0, 0, .15); transform: translateY(-2px); } }
.tv-dd { display: flex; gap: 4px; }
.tv-dd i { width: 20px; height: 20px; border-radius: 5px; background: #fffdf6; box-shadow: inset 0 -2px 0 #cfc3a6; position: relative; }
.tv-dd i::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #c81d28; top: 7.5px; left: 7.5px; }
.tv-dd i + i::after { background: #1d1a17; top: 4px; left: 4px; box-shadow: 7px 7px 0 #1d1a17; }
.tv-btn { height: 50px; min-width: 50px; padding: 0 14px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font: 700 14px var(--font); }
.tv-btn:active { transform: scale(.95); }
.tv-dice { display: flex; gap: 6px; }
.dchip { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(160deg, #fffdf6, #e6dcc7); box-shadow: inset 0 -3px 0 #cabd9e, 0 4px 10px rgba(0, 0, 0, .4); display: grid; grid-template-columns: repeat(3, 1fr); padding: 5px; gap: 1px; transition: all .25s var(--ease); }
.dchip s { border-radius: 50%; } .dchip s.p { background: #1d1a17; margin: 1px; }
.dchip.used { opacity: .3; transform: scale(.85); filter: grayscale(1); }
.dchip:not(.mine) { transform: scale(.85); }
body.watching #hud .tv-actions > .tv-btn { display: none; }

.chatbox { position: fixed; z-index: 66; left: 50%; transform: translateX(-50%); bottom: calc(140px + var(--sab)); width: min(340px, calc(100vw - 16px)); display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-radius: 18px; background: var(--modal); border: 1px solid var(--line); box-shadow: var(--shadow); }
.chatbox > button { padding: 8px 11px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(243, 234, 215, .12); font-size: 13.5px; }
.chatbox form { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.chatbox input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); color: var(--cream); font: 500 15px var(--font); outline: none; user-select: text; }
.chatbox form button { padding: 0 14px; border-radius: 12px; background: var(--gold); color: #22160c; font-weight: 700; }
.bubble { left: 50%; transition: all .4s var(--ease); }
.bubble.opp { top: calc(62px + var(--sat)); }
.bubble.me { bottom: calc(140px + var(--sab)); }
.bubble.me::before { top: auto; bottom: -6px; border-top: 6px solid #ffe2a0; border-bottom: 0; }

.room-seats.two, .room-seats.two { grid-template-columns: repeat(2, 1fr) !important; }
.tv-end { text-align: center; display: flex; flex-direction: column; align-items: center; }
.tv-end h2 { font: 800 30px var(--serif); margin: 4px 0 6px; color: var(--cream); }
.tv-end.win h2 { background: linear-gradient(180deg, #fbe7b4, #c9a45c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv-end .trophy { font-size: 56px; line-height: 1; filter: drop-shadow(0 8px 20px rgba(236, 210, 154, .45)); animation: pop .6s var(--ease); }
@keyframes pop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
.tv-final { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 2px; width: 100%; }
.tv-final > div { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; opacity: .75; }
.tv-final > div.lead { opacity: 1; }
.tv-final > div b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tv-final strong { font: 800 38px var(--serif); color: var(--gold-hi); line-height: 1; }
.tv-final > span { color: var(--faint); font-size: 22px; }
.tv-pot { margin: 10px 0 6px; padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font-weight: 700; color: var(--muted); }
.tv-pot.win { color: var(--gold-hi); background: rgba(236, 210, 154, .12); }
.tv-end .row2, .tv-end .primary, .tv-end .secondary { width: 100%; }
.rules p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: left; }
.rules b { color: var(--cream); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { top: 110vh; transform: translateX(40px) rotate(720deg); } }

@media (orientation: landscape) and (max-height: 520px) {
  #hud .tv-top { left: 8px; right: auto; width: min(215px, 24vw); }
  #hud .tv-top .pl { max-width: none; }
  #hud .tv-top .icon { position: fixed; top: calc(8px + var(--sat)); }
  #btnBack { right: 58px; } #btnMenu { right: 8px; }
  #hud .tv-bottom { display: contents; }
  #hud .tv-bottom .pl.me { position: absolute; left: 8px; bottom: calc(8px + var(--sab)); width: min(215px, 24vw); }
  .tv-actions { position: absolute; right: 8px; bottom: calc(8px + var(--sab)); width: min(215px, 24vw); flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .tv-actions .tv-dice { justify-content: center; }
  .tv-roll { justify-content: center; padding: 0 12px; height: 54px; font-size: 17px; }
  .tv-status { top: calc(60px + var(--sat)); left: auto; right: 8px; transform: none; width: min(215px, 24vw); white-space: normal; text-align: center; border-radius: 14px; }
  .pl { padding-right: 9px; gap: 7px; }
  .pl .lav { width: 34px; height: 34px; }
  .pl-tm { width: 38px; height: 38px; }
  .pl-sc b { font-size: 20px; }
  .bubble.opp { top: calc(62px + var(--sat)); left: 13%; }
  .bubble.me { bottom: 70px; left: 13%; }
  .chatbox { left: auto; right: 8px; transform: none; bottom: 10px; width: min(300px, 40vw); }
}
@media (min-width: 900px) and (orientation: landscape) and (min-height: 521px) {
  #hud .tv-top { left: 50%; right: auto; transform: translateX(-50%); width: min(520px, 60vw); }
}
body.watching #hud .tv-bottom { bottom: calc(96px + var(--sab)); }
@media (orientation: landscape) and (max-height: 520px) { body.watching #hud .tv-bottom .pl.me { bottom: calc(96px + var(--sab)); } }

/* zar adı: kahvehane usulü */
.dice-call { position: fixed; left: 50%; top: 40%; z-index: 40; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none; text-align: center; animation: dcall 1.6s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.dice-call b { font: 800 clamp(30px, 8vw, 54px)/1 'Playfair Display', Georgia, serif; letter-spacing: .5px; white-space: nowrap;
  background: linear-gradient(180deg, #fff6d8 0%, #f3cf7a 45%, #b77f2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(60, 30, 5, .9)) drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.dice-call small { white-space: nowrap; font: 700 13px var(--font, system-ui); color: #f7e7c4; padding: 4px 12px; border-radius: 99px; background: rgba(20, 10, 4, .72); border: 1px solid rgba(243, 207, 122, .35); }
.dice-call small:empty { display: none; }
.dice-call.dbl { animation-duration: 2.3s; }
.dice-call.dbl b { font-size: clamp(38px, 11vw, 72px); }
.dice-call.duses b { background: linear-gradient(180deg, #fffbe8 0%, #ffd36b 40%, #ff8a2a 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 0 rgba(90, 30, 0, .95)) drop-shadow(0 0 24px rgba(255, 180, 60, .85)); animation: dglow .5s ease-in-out 3 alternate; }
.dice-call.hepyek b { background: linear-gradient(180deg, #f1f1f1, #a9b3bd); -webkit-background-clip: text; background-clip: text; }
.dice-call.hepyek { animation-name: dcall, dwobble; animation-duration: 2.3s, .6s; animation-delay: 0s, .25s; }
@keyframes dcall {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  24% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(.96); }
}
@keyframes dglow { to { filter: drop-shadow(0 3px 0 rgba(90, 30, 0, .95)) drop-shadow(0 0 40px rgba(255, 200, 80, 1)); } }
@keyframes dwobble { 25% { rotate: -5deg; } 75% { rotate: 5deg; } }