/* Alem uygulaması — görsel sistem v2 ("Alem Gecesi")
   Alem ailesinin mor-pembe enerjisi, uygulamaya özel düzen: degrade başlıklar, katmanlı kartlar,
   oyun alanında parlak toplar. Açık ve koyu tema eşit kalitede. */
:root{
  --ground:#F5F1FB;--surface:#FFFFFF;--raised:#FFFFFF;--muted:#EFE8F8;--text:#1D1530;--text2:#5C5070;--text3:#857A98;--sep:#E7DFF2;
  --brand:#6D35D8;--brand-deep:#3E1C8F;--brand2:#C43B8E;--tint:#6D35D8;--on-tint:#FFFFFF;--gold:#FFC93C;--gold-ink:#4A2B00;
  --grad:linear-gradient(135deg,#3E1C8F 0%,#6D35D8 48%,#C43B8E 100%);--grad-soft:linear-gradient(135deg,#F1E9FF,#FFE9F4);
  --danger:#C0263F;--danger-surface:#FDE8EC;--warning:#7A4B00;--warning-surface:#FFF3D6;--success:#0E8A63;--success-surface:#E0F6EE;
  --admin:#7A35D6;--op:#D2234B;--voice:#0E8A63;--mention:#FFF4CC;
  --shadow:0 1px 2px rgba(40,16,80,.06),0 6px 18px rgba(40,16,80,.08);--shadow-lg:0 10px 30px rgba(40,16,80,.18);
  --radius:18px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,system-ui,sans-serif;-webkit-text-size-adjust:100%;
}
@media (prefers-color-scheme:dark){:root{
  --ground:#110C1B;--surface:#1B1428;--raised:#231A33;--muted:#2A2040;--text:#F4EEFC;--text2:#C0B4D3;--text3:#9388A8;--sep:#30264A;
  --tint:#B894FF;--on-tint:#1B0F33;--grad-soft:linear-gradient(135deg,#2A1D47,#3A1B37);
  --danger:#FF8196;--danger-surface:#3D1622;--warning:#F7C96A;--warning-surface:#35270A;--success:#5FD4A6;--success-surface:#0F2E24;
  --admin:#C9A8FF;--op:#FF7D93;--voice:#5FD4A6;--mention:#3A2F14;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.28);color-scheme:dark}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ground);color:var(--text);overscroll-behavior:none}
body{position:fixed;inset:0;overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:var(--tint)}
:focus-visible{outline:2px solid var(--tint);outline-offset:2px;border-radius:10px}
::selection{background:var(--brand);color:#fff}
[hidden]{display:none!important}
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.s{width:20px;height:20px}svg.i.xs{width:16px;height:16px}
.coin{width:22px;height:22px;flex:none;display:inline-block;vertical-align:middle}
.coin.lg{width:44px;height:44px}
#app{position:absolute;inset:0;display:flex;flex-direction:column}
.splash{margin:auto;text-align:center;color:var(--text2)}.splash img{border-radius:20px;box-shadow:var(--shadow-lg)}
.screen{flex:1;min-height:0;display:flex;flex-direction:column}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pad{padding:16px}

/* ---- Ana sekmelerin degrade başlığı ---- */
.hero{flex:none;background:var(--grad);color:#fff;padding:calc(var(--safe-top) + 12px) 20px 30px;border-radius:0 0 28px 28px;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(62,28,143,.25)}
.hero::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
.hero .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;position:relative;z-index:1}
.hero .hello{font-size:14px;opacity:.85;margin:0}
.hero h1{font-size:30px;line-height:36px;font-weight:800;letter-spacing:-.025em;margin:2px 0 0}
.chip-balance{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 5px;border-radius:18px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-weight:800;font-variant-numeric:tabular-nums;font-size:15px}
.chip-balance .coin{width:26px;height:26px}
.hero-stats{display:flex;gap:10px;margin-top:16px;position:relative;z-index:1}
.hero-stats div{flex:1;background:rgba(255,255,255,.14);border-radius:14px;padding:10px 12px}
.hero-stats b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}.hero-stats span{font-size:12.5px;opacity:.85}
.hero .iconbtn{color:#fff;background:rgba(255,255,255,.14)}
.lift{margin-top:14px}

.iconbtn{min-width:44px;min-height:44px;display:inline-grid;place-items:center;border-radius:14px;color:var(--tint);position:relative}
.iconbtn:active{transform:scale(.96)}

/* ---- Sekme çubuğu ---- */
.tabs{flex:none;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--sep);padding:6px 6px calc(6px + var(--safe-bottom))}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;font-size:11.5px;font-weight:650;color:var(--text3);position:relative}
.tabs button .ic{display:grid;place-items:center;width:58px;height:30px;border-radius:15px;transition:background .2s}
.tabs button[aria-current="page"]{color:var(--brand)}
.tabs button[aria-current="page"] .ic{background:color-mix(in srgb,var(--brand) 16%,transparent)}
@media (prefers-color-scheme:dark){.tabs button[aria-current="page"]{color:var(--tint)}.tabs button[aria-current="page"] .ic{background:color-mix(in srgb,var(--tint) 20%,transparent)}}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:linear-gradient(135deg,#FF4D7A,#D2234B);color:#fff;font-size:11px;font-weight:800;display:inline-grid;place-items:center;line-height:1;box-shadow:0 0 0 2px var(--surface)}
.tabs .badge{position:absolute;top:2px;left:calc(50% + 8px)}

/* ---- Giriş / kayıt ---- */
.auth-wrap{min-height:100%;display:flex;flex-direction:column;background:var(--grad)}
.auth-top{color:#fff;padding:calc(var(--safe-top) + 28px) 24px 36px;position:relative;overflow:hidden}
.auth-top::before,.auth-top::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.auth-top::before{width:260px;height:260px;right:-80px;top:-90px;background:radial-gradient(circle,rgba(255,201,60,.35),transparent 70%)}
.auth-top::after{width:200px;height:200px;left:-70px;bottom:-110px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.auth-top .logo{height:44px;width:auto;display:block;margin-bottom:26px;position:relative;z-index:1}
.auth-top h1{font-size:34px;line-height:38px;font-weight:850;letter-spacing:-.03em;margin:0;position:relative;z-index:1}
.auth-top h1 em{font-style:normal;color:var(--gold)}
.auth-top p{margin:10px 0 0;font-size:15.5px;line-height:22px;opacity:.9;max-width:330px;position:relative;z-index:1}
.auth-card{flex:1;background:var(--ground);border-radius:28px 28px 0 0;padding:22px 20px calc(var(--safe-bottom) + 28px);box-shadow:0 -10px 30px rgba(30,10,60,.25)}
.auth-card>*{max-width:440px;margin-left:auto;margin-right:auto}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--muted);border-radius:14px;padding:4px;margin-bottom:20px}
.seg button{min-height:40px;border-radius:11px;font-size:14px;font-weight:700;color:var(--text2)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--brand);box-shadow:0 1px 4px rgba(40,16,80,.14)}
@media (prefers-color-scheme:dark){.seg button[aria-selected="true"]{color:var(--tint)}}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:13px;font-weight:650;color:var(--text2);margin:0 0 7px 4px}
.input{display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--sep);border-radius:14px;min-height:52px;padding:0 15px;transition:border-color .15s,box-shadow .15s}
.input:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.input input,.input textarea{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;padding:13px 0}
.input textarea{resize:none;min-height:74px;line-height:21px}
.help{font-size:12.5px;color:var(--text3);margin:7px 4px 0;line-height:17px}
.help.err{color:var(--danger);font-weight:500}.help.ok{color:var(--success);font-weight:650}
.check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:20px;color:var(--text2);margin:6px 0 18px}
.check input{width:22px;height:22px;margin:0;accent-color:var(--brand);flex:none}
.callout{display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:var(--warning-surface);color:var(--warning);font-size:13.5px;line-height:19px;margin-bottom:16px}
.callout.info{background:var(--grad-soft);color:var(--text2)}.callout.danger{background:var(--danger-surface);color:var(--danger)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:16px;font-size:16px;font-weight:750;background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(109,53,216,.28);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.secondary{background:var(--muted);color:var(--text);box-shadow:none}
.btn.gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 6px 16px rgba(255,180,0,.3)}
.btn.danger{background:var(--danger);color:#fff;box-shadow:none}
.btn.link{background:none;color:var(--tint);min-height:44px;width:auto;box-shadow:none;font-weight:650}
.btn.sm{width:auto;min-height:40px;padding:0 16px;font-size:14px;border-radius:12px}
.turnstile{min-height:66px;margin:2px 0 16px}
.fine{font-size:12.5px;line-height:18px;color:var(--text3);text-align:center;margin:18px 0 0}
.code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.code input{height:60px;border-radius:14px;border:1.5px solid var(--sep);background:var(--surface);text-align:center;font-size:26px;font-weight:750;width:100%;font-variant-numeric:tabular-nums}
.code input:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}

/* ---- Oda kartları ---- */
.section-title{font-size:13px;font-weight:750;color:var(--text2);padding:20px 22px 8px;display:flex;justify-content:space-between}
.cards-list{display:grid;gap:12px;padding:0 16px}
.room-card{display:flex;align-items:center;gap:14px;width:100%;padding:14px;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);text-align:left;position:relative}
.room-card:active{transform:scale(.99)}
.room-card .main{flex:1;min-width:0}
.room-card .t{display:block;font-size:17px;font-weight:750;letter-spacing:-.01em}
.room-card .d{display:block;font-size:13.5px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-card .meta{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;font-size:12px;font-weight:650;background:var(--muted);color:var(--text2)}
.tag.live{background:var(--success-surface);color:var(--success)}
.pulse{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.rtile{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#6D35D8,#9B4BE0);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.rtile svg{width:26px;height:26px}
.rtile.t-general{background:linear-gradient(135deg,#6D35D8,#A64BDE)}
.rtile.t-muhabbet{background:linear-gradient(135deg,#E0457B,#F08A4B)}
.rtile.t-radio{background:linear-gradient(135deg,#0E8A9A,#36B37E)}
.rtile.t-game{background:linear-gradient(135deg,#F2A516,#E85D2A)}
.rtile.t-staff{background:linear-gradient(135deg,#3E1C8F,#5B4FA8)}
.room-card .chev{color:var(--text3)}
.room-card .badge{position:absolute;top:10px;right:12px}
.empty{text-align:center;color:var(--text2);padding:40px 28px}.empty h2{color:var(--text);font-size:19px;margin:14px 0 6px}.empty p{margin:0;font-size:15px;line-height:21px}
.empty .art{width:72px;height:72px;border-radius:24px;margin:0 auto;display:grid;place-items:center;background:var(--grad-soft);color:var(--brand)}
.empty .art svg{width:32px;height:32px}
.guest-cta{margin:0 16px 4px;padding:14px 16px;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}
.guest-cta p{margin:0;font-size:14px;line-height:19px;color:var(--text2);flex:1}.guest-cta b{color:var(--text)}

/* ---- Liste satırları ---- */
.list{background:var(--surface);margin:0 16px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 14px;text-align:left;position:relative;color:inherit;text-decoration:none}
.row+.row::before{content:"";position:absolute;top:0;left:64px;right:0;height:1px;background:var(--sep)}
.row:active{background:var(--muted)}
.row .main{flex:1;min-width:0}
.row .t,.row .d{display:block}
.row .t{font-size:16px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .d{font-size:13px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .chev{color:var(--text3)}
.row .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--muted);color:var(--brand);flex:none}
@media (prefers-color-scheme:dark){.row .ico{color:var(--tint)}}
.row.destructive{color:var(--danger)}.row.destructive .ico{background:var(--danger-surface);color:var(--danger)}

/* ---- Oda ekranı ---- */
.roombar{flex:none;background:var(--grad);color:#fff;padding:calc(var(--safe-top) + 4px) 6px 10px;display:flex;align-items:center;gap:2px;box-shadow:0 6px 18px rgba(62,28,143,.22);position:relative;z-index:2}
.roombar .iconbtn{color:#fff}
.roomhead{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:2px 4px;text-align:left;border-radius:14px;color:#fff}
.roomhead .rtile{width:40px;height:40px;border-radius:13px;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.roomhead .rtile svg{width:22px;height:22px}
.roomhead .tt{font-size:17.5px;font-weight:800;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.roomhead .ss{font-size:12.5px;opacity:.92;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.roomhead .ss .pulse{color:#7CF0BE}
.strip{flex:none;display:flex;align-items:center;gap:12px;margin:10px 12px 0;padding:8px 10px 8px 8px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.strip .play{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#0E8A9A,#36B37E);color:#fff;flex:none}
.strip .play.on{background:linear-gradient(135deg,#C43B8E,#6D35D8)}
.strip .txt{flex:1;min-width:0}.strip .t1{font-size:14px;font-weight:750;display:flex;gap:8px;align-items:center}.strip .t2{font-size:12.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onair{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:850;letter-spacing:.06em;color:#fff;background:#E2334E;border-radius:6px;padding:2px 6px}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px;color:var(--brand2)}.eq i{width:3px;background:currentColor;border-radius:2px;animation:eq 1s ease-in-out infinite}.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.banner{flex:none;margin:10px 12px 0;padding:10px 14px;border-radius:14px;font-size:13.5px;background:var(--warning-surface);color:var(--warning);display:flex;gap:8px;align-items:center}
.activity{flex:none;text-align:center;font-size:12px;color:var(--text3);padding:8px 14px 0;min-height:22px}
.feed{padding:6px 0 14px}
.msg{display:grid;grid-template-columns:38px 1fr;gap:11px;padding:8px 16px 3px}
.msg.cont{padding-top:1px}.msg.cont .av{visibility:hidden;height:0}
.msg.mention{background:var(--mention);box-shadow:inset 3px 0 0 var(--gold)}
.msg.mine .nick{color:var(--brand)}
@media (prefers-color-scheme:dark){.msg.mine .nick{color:var(--tint)}}
.msg.bot{display:block;padding:6px 16px}
.botline{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:14px;background:var(--grad-soft);font-size:14px;line-height:19px;color:var(--text2)}
.botline .bi{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--grad);color:#fff;flex:none}
.botline .bi svg{width:15px;height:15px}
.botline b{color:var(--text)}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13.5px;font-weight:750;letter-spacing:.02em;flex:none;background:var(--av,#5B4FA8);overflow:hidden;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.av img{width:100%;height:100%;object-fit:cover}
.av.xl{width:88px;height:88px;font-size:30px;box-shadow:0 0 0 4px rgba(255,255,255,.9),var(--shadow-lg)}
.who{display:flex;align-items:baseline;gap:7px;min-width:0}
.nick{font-size:14.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.nick .px{font-weight:900}
.r-admin{color:var(--admin)}.r-op{color:var(--op)}.r-voice{color:var(--voice)}.r-member{color:var(--text)}
.bottag{font-size:10px;font-weight:850;letter-spacing:.06em;color:#fff;background:var(--brand);border-radius:5px;padding:1px 5px}
.time{font-size:11.5px;color:var(--text3);font-variant-numeric:tabular-nums;flex:none}
.text{font-size:16px;line-height:22px;overflow-wrap:anywhere;white-space:pre-wrap}
.text b{font-weight:750}.text mark{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);font-weight:700;border-radius:5px;padding:0 3px}
@media (prefers-color-scheme:dark){.text mark{color:var(--tint)}}
.tc-blue{color:#2E6BD6}.tc-green{color:#1F8A4C}.tc-purple{color:#7B3FC4}.tc-rose{color:#C0306F}.tc-orange{color:#C2620F}.tc-teal{color:#11808A}.tc-gray{color:var(--text2)}
@media (prefers-color-scheme:dark){.tc-blue{color:#86AEFF}.tc-green{color:#6FD69A}.tc-purple{color:#C9A8FF}.tc-rose{color:#FF8DB8}.tc-orange{color:#FFB070}.tc-teal{color:#6ED8E0}}
.composer{flex:none;display:flex;align-items:flex-end;gap:8px;padding:8px 10px calc(10px + var(--safe-bottom)) 12px;background:var(--surface);border-top:1px solid var(--sep)}
.composer .box{flex:1;display:flex;align-items:center;background:var(--muted);border-radius:24px;padding:0 16px;min-height:46px}
.composer textarea{flex:1;border:0;outline:0;background:transparent;resize:none;font-size:16px;line-height:21px;max-height:120px;padding:12px 0}
.send{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;flex:none;box-shadow:0 4px 12px rgba(109,53,216,.35)}
.send:disabled{background:var(--muted);color:var(--text3);box-shadow:none}
.locked{flex:none;display:flex;gap:10px;align-items:center;padding:14px 16px calc(14px + var(--safe-bottom));border-top:1px solid var(--sep);background:var(--surface);color:var(--text2);font-size:14px}

/* ---- Tombala ---- */
.tombala{flex:none;margin:10px 12px 0;border-radius:20px;background:linear-gradient(160deg,#2A1360,#4B1F8F 55%,#7A2475);color:#fff;padding:12px;box-shadow:var(--shadow-lg)}
.tb-head{display:flex;align-items:center;gap:12px}
.ball{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:22px;color:#fff;flex:none;font-variant-numeric:tabular-nums;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.7) 0 8%,transparent 32%),var(--b,#E2334E);box-shadow:inset 0 -4px 8px rgba(0,0,0,.25),0 3px 10px rgba(0,0,0,.35);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ball.sm{width:30px;height:30px;font-size:12.5px;font-weight:850;box-shadow:inset 0 -2px 4px rgba(0,0,0,.25)}
.tb-info{flex:1;min-width:0}.tb-info b{display:block;font-size:16px;font-weight:850}.tb-info span{font-size:12.5px;opacity:.85}
.tb-recent{display:flex;gap:6px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.cards{display:flex;gap:10px;overflow-x:auto;margin-top:10px;padding-bottom:4px;scroll-snap-type:x mandatory}
.card{flex:none;width:min(320px,82vw);border-radius:14px;padding:8px;background:#fff;color:#1D1530;scroll-snap-align:start;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.card h4{margin:0 0 6px 2px;font-size:12px;color:#5C5070;font-weight:850;letter-spacing:.04em;display:flex;justify-content:space-between}
.grid{display:grid;grid-template-columns:repeat(9,1fr);gap:3px}
.cell{aspect-ratio:1;border-radius:7px;display:grid;place-items:center;font-size:13.5px;font-weight:850;background:#F1ECF8;color:#1D1530;font-variant-numeric:tabular-nums;min-width:0;position:relative}
.cell.blank{background:repeating-linear-gradient(45deg,#F7F3FC,#F7F3FC 4px,#EFE8F8 4px,#EFE8F8 8px)}
.cell.drawn{background:#FFE7A3;color:#4A2B00}
.cell.marked{background:linear-gradient(135deg,#6D35D8,#C43B8E);color:#fff}
.cell.marked::after{content:"✓";position:absolute;right:2px;bottom:0;font-size:9px;opacity:.9}
.prizes{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.prize{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px 0 4px;border-radius:13px;background:rgba(255,255,255,.14);font-size:12px;font-weight:700}
.prize .coin{width:18px;height:18px}.prize.won{background:var(--gold);color:var(--gold-ink)}
.tb-note{font-size:11.5px;opacity:.75;margin:8px 2px 0}
.pick{display:grid;grid-template-columns:1fr;gap:10px;padding:0 16px 16px}
.pick .card{width:auto;box-shadow:var(--shadow);border:2px solid transparent}.pick .card:active{border-color:var(--brand)}.pick .card[aria-disabled="true"]{opacity:.4}

/* ---- Sheet ---- */
.scrim{position:fixed;inset:0;background:rgba(18,8,40,.48);z-index:20;animation:fade .18s ease-out}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;background:var(--ground);border-radius:26px 26px 0 0;max-height:90%;display:flex;flex-direction:column;padding-bottom:var(--safe-bottom);box-shadow:0 -10px 30px rgba(18,8,40,.25);animation:rise .26s cubic-bezier(.2,.8,.2,1)}
.sheet.tall{height:90%}
@media (min-width:700px){.sheet{left:50%;width:560px;margin-left:-280px}}
.grab{height:24px;display:grid;place-items:center;flex:none}.grab::after{content:"";width:40px;height:5px;border-radius:3px;background:var(--text3);opacity:.45}
.sheethead{display:flex;align-items:center;justify-content:space-between;padding:0 10px 6px 20px;flex:none}.sheethead h2{font-size:19px;font-weight:800;margin:0;letter-spacing:-.01em}
.pcard{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px 6px}
.pcard .pn{font-size:24px;font-weight:850;margin-top:14px;letter-spacing:-.02em;overflow-wrap:anywhere}
.pcard .bio{color:var(--text2);font-size:15px;margin:6px 0 0;line-height:21px}
.pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border-radius:13px;font-size:12.5px;font-weight:700;background:var(--muted);color:var(--text2);margin-top:8px}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 16px 0}
.quick button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:72px;border-radius:18px;background:var(--surface);color:var(--brand);box-shadow:var(--shadow)}
@media (prefers-color-scheme:dark){.quick button{color:var(--tint)}}
.quick button span{font-size:13px;font-weight:650;color:var(--text)}
.quick button.warn{color:var(--danger)}
.quick button:disabled{opacity:.45}
.actions{margin:14px 16px 8px}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px 16px 0}.photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
#toast{position:fixed;left:16px;right:16px;bottom:calc(92px + var(--safe-bottom));z-index:40;background:#1D1530;color:#fff;padding:14px 16px;border-radius:16px;font-size:14.5px;box-shadow:var(--shadow-lg);animation:rise .2s ease-out}
@media (min-width:700px){#toast{left:50%;width:420px;margin-left:-210px}}

/* ---- Cüzdan ---- */
.wallet-card{margin:16px 16px 0;position:relative;z-index:1;border-radius:24px;padding:20px;background:linear-gradient(140deg,#FFF6D8,#F7E3A1 55%,#E9C46A);color:#3D2A05;box-shadow:var(--shadow-lg);overflow:hidden}
.wallet-card::after{content:"";position:absolute;right:-30px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.6),transparent 70%)}
.wallet-card .lbl{font-size:13px;font-weight:700;opacity:.75}
.wallet-card .big{font-size:44px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:12px;line-height:1;margin-top:8px}
.wallet-card .big small{font-size:16px;font-weight:750;opacity:.7;letter-spacing:0}
.wallet-card p{margin:12px 0 0;font-size:13px;line-height:18px;color:#5A4513;position:relative;z-index:1}
.earn{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px}
.earn div{background:var(--surface);border-radius:16px;padding:12px 8px;box-shadow:var(--shadow);text-align:center}
.earn b{display:block;font-size:18px;font-weight:850;color:var(--success);font-variant-numeric:tabular-nums}.earn span{font-size:12px;color:var(--text2);line-height:16px;display:block;margin-top:2px}
.amount{font-weight:850;font-variant-numeric:tabular-nums;font-size:16px}.amount.plus{color:var(--success)}.amount.minus{color:var(--danger)}

/* ---- Profil ---- */
.profile-hero{flex:none;background:var(--grad);color:#fff;padding:calc(var(--safe-top) + 12px) 20px 30px;border-radius:0 0 28px 28px;text-align:center;position:relative;overflow:hidden}
.profile-hero .bar{display:flex;justify-content:space-between;align-items:center;min-height:44px;text-align:left}
.profile-hero .bar b{font-size:17px;font-weight:800}
.profile-hero .pn{font-size:25px;font-weight:850;margin-top:12px;letter-spacing:-.02em}
.profile-hero .pill{background:rgba(255,255,255,.18);color:#fff}
.profile-hero .av.xl{margin:6px auto 0}
.profile-hero .bio{margin:8px auto 0;opacity:.9;font-size:14.5px;max-width:320px}
.switch{appearance:none;width:51px;height:31px;border-radius:16px;background:var(--sep);position:relative;flex:none;transition:background .2s;margin:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch:checked{background:var(--success)}.switch:checked::after{transform:translateX(20px)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--success);display:inline-block}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:900px){#app{max-width:760px;margin:0 auto;border-left:1px solid var(--sep);border-right:1px solid var(--sep)}}

/* ---- Karşılama ve giriş (v3) ----
   Gece göğü zemin, cam kart, Apple/Google/e-posta seçenekleri alt sayfada. Misafir girişi yok. */
.welcome{min-height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(130% 70% at 85% -5%,#8E47E6 0%,rgba(142,71,230,0) 55%),linear-gradient(168deg,#22105E 0%,#3E1C8F 38%,#6A2CB8 70%,#A9358C 100%)}
.welcome::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 72% 12%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 88% 34%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 42%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 55% 6%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 6% 52%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 64% 47%,#fff 50%,transparent 51%)}
.wl-sky i{position:absolute;border-radius:50%;filter:blur(8px);pointer-events:none}
.wl-sky .g1{width:300px;height:300px;right:-110px;top:-90px;background:radial-gradient(circle,rgba(255,201,60,.42),transparent 68%)}
.wl-sky .g2{width:340px;height:340px;left:-150px;top:42%;background:radial-gradient(circle,rgba(234,76,150,.38),transparent 68%)}
.wl-sky .g3{width:220px;height:220px;right:-60px;top:46%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.wl-hero{position:relative;z-index:1;padding:calc(var(--safe-top) + 22px) 24px 22px;text-align:center;max-width:460px;margin:0 auto;width:100%}
.wl-mark{display:block;width:72px;height:72px;margin:0 auto 10px;border-radius:21px;box-shadow:0 18px 40px rgba(20,6,60,.45),0 0 0 1px rgba(255,255,255,.18),0 0 60px rgba(255,201,60,.18)}
.wl-brand{display:block;font-size:15px;font-weight:750;letter-spacing:.02em;opacity:.92;margin-bottom:14px}.wl-brand span{opacity:.6;font-weight:600}
.wl-hero h1{font-size:32px;line-height:36px;font-weight:850;letter-spacing:-.03em;margin:0}
.wl-hero h1 em{font-style:normal;color:var(--gold);display:block}
.wl-hero>p{margin:10px auto 0;font-size:15.5px;line-height:22px;opacity:.86;max-width:300px}
.wl-feats{list-style:none;margin:20px 0 0;padding:6px;text-align:left;border-radius:22px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 12px 30px rgba(20,6,60,.25)}
.wl-feats li{display:flex;align-items:center;gap:14px;padding:8px 12px}
.wl-feats li+li{border-top:1px solid rgba(255,255,255,.1)}
.wl-feats .rtile{width:40px;height:40px;border-radius:13px;box-shadow:0 0 0 1px rgba(255,255,255,.22)}.wl-feats .rtile svg{width:22px;height:22px}
.wl-feats b{display:block;font-size:15.5px;font-weight:700}.wl-feats small{display:block;font-size:13px;opacity:.72;margin-top:1px}
.wl-sheet{position:relative;z-index:1;margin-top:auto;background:var(--ground);color:var(--text);border-radius:30px 30px 0 0;padding:20px 20px calc(var(--safe-bottom) + 16px);box-shadow:0 -12px 34px rgba(20,6,60,.3);display:grid;gap:10px}
.wl-sheet>*{width:100%;max-width:440px;margin-left:auto;margin-right:auto}
.sbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;border-radius:16px;font-size:16.5px;font-weight:650;letter-spacing:-.01em}
.sbtn:active{transform:translateY(1px)}.sbtn:disabled{opacity:.6}
.sbtn.apple{background:#000;color:#fff}
.sbtn.google{background:#fff;color:#1F1F1F;box-shadow:inset 0 0 0 1px #DADCE0}
.bmark{width:20px;height:20px;flex:none;display:block}
@media (prefers-color-scheme:dark){.sbtn.apple{background:#fff;color:#000}.sbtn.google{background:#131314;color:#E3E3E3;box-shadow:inset 0 0 0 1px #8E918F}}
.or{display:flex;align-items:center;gap:12px;color:var(--text3);font-size:13px;font-weight:600;margin:2px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--sep)}
.wl-login{margin:2px 0 0;text-align:center;font-size:14.5px;color:var(--text2)}
.wl-login .btn.link{display:inline-flex;min-height:36px;padding:0 4px;font-size:14.5px;font-weight:750}
.wl-sheet .fine{margin:4px 0 0}
.fine a,.check a{color:var(--tint)}

.auth-top.compact{padding:calc(var(--safe-top) + 8px) 24px 30px}
.auth-bar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin:0 -8px 18px;position:relative;z-index:1}
.auth-mark{justify-self:center;border-radius:12px;box-shadow:0 8px 20px rgba(20,6,60,.35),0 0 0 1px rgba(255,255,255,.2)}
.iconbtn.glass{color:#fff;background:rgba(255,255,255,.14)}
.auth-top.compact h1{font-size:30px;line-height:34px}
.field>span.input{display:flex;margin:0}
.input>svg.i{color:var(--text3);margin-right:10px;transition:color .15s}
.input:focus-within>svg.i{color:var(--tint)}
.reveal{min-width:40px;min-height:40px;margin-right:-10px;display:grid;place-items:center;color:var(--text3);border-radius:10px}.reveal.on{color:var(--tint)}
.linked{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:18px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--sep)}
.linked .bmark{width:24px;height:24px}
.lk-t{flex:1;min-width:0}.lk-t b{display:block;font-size:15px}.lk-t small{display:block;font-size:13px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-ok{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--success-surface);color:var(--success)}
@media (max-height:740px){.wl-feats{display:none}.wl-hero{padding-top:calc(var(--safe-top) + 34px)}.wl-hero>p{max-width:280px}}
.suggest{margin:-6px 0 16px}
.sg-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 8px 4px;font-size:13px;font-weight:650;color:var(--text2)}
.sg-more{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 10px;border-radius:10px;color:var(--tint);font-size:13px;font-weight:700}
.sg-more:disabled{opacity:.5}
.sg-list{display:flex;flex-wrap:wrap;gap:8px}
.sg{min-height:38px;padding:0 14px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--sep);font-size:14.5px;font-weight:650;color:var(--text)}
.sg[aria-pressed="true"]{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(109,53,216,.28)}
.sg:active{transform:scale(.97)}
#complete .callout{margin-bottom:10px}