/* ==========================================================================
   PAWNEST — ARCADE (Oyun Merkezi) ortak stilleri
   Hub kartları + oyun içi HUD, tuval, kaplama (overlay), buton düzenleri.
   ========================================================================== */

/* ---- HUB ---- */
.arcade-hero { text-align:center; margin-bottom: var(--s-10); }
.game-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: var(--s-5); }
.game-tile {
  position:relative; border-radius: var(--r-xl); overflow:hidden; padding: var(--s-6);
  color:#fff; min-height:190px; display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid rgba(255,255,255,.15); box-shadow: var(--shadow-md);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base); isolation:isolate;
}
.game-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.game-tile .emoji { position:absolute; top:10px; right:14px; font-size:64px; opacity:.25; z-index:-1; }
.game-tile .cat { font-size: var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.06em; opacity:.9; }
.game-tile h3 { color:#fff; font-size: var(--text-xl); margin:4px 0 6px; }
.game-tile p { font-size: var(--text-sm); opacity:.92; margin-bottom: var(--s-4); }
.game-tile .play { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.2); backdrop-filter:blur(4px); padding:8px 14px; border-radius: var(--r-full); font-weight:700; font-size: var(--text-sm); align-self:flex-start; }
.game-tile .rec { position:absolute; top:12px; left:12px; background:var(--gold-500); color:#3a2a00; font-size:10px; font-weight:800; padding:3px 9px; border-radius:var(--r-full); }

/* Tile renk temaları */
.gt-teal   { background:linear-gradient(140deg,#14b8a0,#0f766e); }
.gt-purple { background:linear-gradient(140deg,#8b5cf6,#6d28d9); }
.gt-coral  { background:linear-gradient(140deg,#fb7185,#e11d48); }
.gt-blue   { background:linear-gradient(140deg,#38bdf8,#2563eb); }
.gt-green  { background:linear-gradient(140deg,#34d399,#059669); }
.gt-amber  { background:linear-gradient(140deg,#fbbf24,#d97706); }
.gt-slate  { background:linear-gradient(140deg,#64748b,#334155); }
.gt-pink   { background:linear-gradient(140deg,#f472b6,#be185d); }
.gt-indigo { background:linear-gradient(140deg,#818cf8,#4338ca); }
.gt-rose   { background:linear-gradient(140deg,#fb923c,#c2410c); }

/* ---- OYUN İÇİ ORTAK ---- */
.game-wrap { max-width: 720px; margin:0 auto; }
.game-topbar { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom: var(--s-5); flex-wrap:wrap; }
.game-title { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:var(--text-xl); }
.hud { display:flex; gap:var(--s-2); flex-wrap:wrap; }
.hud .chip { font-family:var(--font-display); font-weight:800; }
.board-wrap { position:relative; border-radius: var(--r-xl); overflow:hidden; box-shadow: var(--shadow-lg); border:1px solid var(--border); background:var(--surface); }
.board-wrap canvas { display:block; width:100%; touch-action:none; }

.overlay {
  position:absolute; inset:0; background:rgba(10,20,18,.62); backdrop-filter:blur(5px);
  display:grid; place-items:center; text-align:center; color:#fff; padding:var(--s-4); z-index:5;
  overflow-y:auto;                          /* içerik uzarsa kaydırılabilsin, taşmasın */
}
.overlay h2, .overlay h3 { color:#fff; }
.overlay .btn { margin-top: var(--s-2); }
.overlay-card { max-width:340px; width:100%; }

.mini-note { font-size:var(--text-xs); color:var(--ink-mute); text-align:center; margin-top:var(--s-4); }

/* Sıra tabanlı oyun ortak öğeleri */
.cell-btn { border:1.5px solid var(--border); background:var(--surface); border-radius:var(--r-md); padding:12px; font-weight:700; cursor:pointer; transition:all var(--t-fast); }
.cell-btn:hover { border-color:var(--brand-400); }
.cell-btn.sel { border-color:var(--brand-500); background:var(--brand-50); }
[data-theme="dark"] .cell-btn.sel { background:rgba(45,212,191,.1); }

.rack { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.tile-btn {
  width:46px; height:52px; border-radius:10px; border:none; cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:20px;
  background:linear-gradient(180deg,#fff,#f1efe9); color:#1c1917; box-shadow: var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; position:relative; transition:transform var(--t-fast);
}
.tile-btn small { position:absolute; right:5px; bottom:3px; font-size:9px; opacity:.6; }
.tile-btn:hover { transform:translateY(-3px); }
.tile-btn:disabled { opacity:.35; cursor:default; transform:none; }
.tile-btn.picked { outline:3px solid var(--brand-400); }

.pill-row { display:flex; gap:8px; flex-wrap:wrap; }
.vs-bar { display:flex; align-items:center; gap:var(--s-3); }
.vs-bar .side { flex:1; }
.bar { height:12px; border-radius:var(--r-full); background:var(--surface-2); overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:var(--r-full); transition:width .4s var(--ease); }
.bar.me > i { background:linear-gradient(90deg,var(--brand-400),var(--brand-600)); }
.bar.foe > i { background:linear-gradient(90deg,var(--coral-400),var(--coral-600)); }

/* Kart oyunu */
.lane { background:var(--surface-2); border-radius:var(--r-lg); padding:10px; min-height:90px; text-align:center; }
.card-mini { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:56px; height:74px; border-radius:8px; background:var(--surface); border:1.5px solid var(--border); margin:3px; font-size:22px; cursor:pointer; box-shadow:var(--shadow-sm); }
.card-mini b { font-size:12px; }
.card-mini.foe { background:#fee2e2; border-color:#fca5a5; }
[data-theme="dark"] .card-mini.foe { background:rgba(244,63,94,.15); }

/* Satranç / ızgara */
.grid-board { display:grid; gap:0; border-radius:var(--r-md); overflow:hidden; border:2px solid var(--brand-700); width:min(100%,420px); margin:0 auto; aspect-ratio:1; }
.sq { display:flex; align-items:center; justify-content:center; font-size:min(7vw,30px); cursor:pointer; user-select:none; aspect-ratio:1; }
.sq.light { background:#e9f5f2; }
.sq.dark { background:#bfe6dd; }
.sq.sel { outline:3px solid var(--gold-500); outline-offset:-3px; }
.sq.move { box-shadow: inset 0 0 0 4px rgba(20,184,160,.55); }
.pcell { width:80%; height:80%; border-radius:50%; display:grid; place-items:center; line-height:1; }
.pcell.me  { background:radial-gradient(circle at 35% 30%, rgba(20,184,160,.35), rgba(20,184,160,.12)); }
.pcell.foe { background:radial-gradient(circle at 35% 30%, rgba(244,63,94,.35), rgba(244,63,94,.12)); }

.leaderboard-mini li { display:flex; justify-content:space-between; padding:9px 12px; border-bottom:1px solid var(--border); font-size:var(--text-sm); }
.leaderboard-mini li .rank { font-family:var(--font-display); font-weight:800; width:26px; }

/* ===== KELİME USTASI (Kelimelik) ===== */
.kel-scores { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.kel-scores .ks { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:8px 14px; text-align:center; min-width:88px; transition:all var(--t-fast); }
.kel-scores .ks.on { border-color:var(--brand-500); box-shadow:var(--shadow-brand); }
.kel-scores .ks b { display:block; font-size:var(--text-xs); color:var(--ink-soft); }
.kel-scores .ks span { font-family:var(--font-display); font-weight:800; font-size:1.5rem; }
.kel-scores .kmid { display:flex; flex-direction:column; gap:4px; align-items:center; }

.kel-board { display:grid; grid-template-columns:repeat(15,1fr); gap:2px; background:var(--brand-800);
  padding:5px; border-radius:var(--r-md); width:100%; max-width:560px; margin:0 auto; box-shadow:var(--shadow-lg); aspect-ratio:1; }
.kcell { background:#dff2ee; border-radius:2px; display:flex; align-items:center; justify-content:center;
  position:relative; aspect-ratio:1; overflow:hidden; cursor:pointer; }
[data-theme="dark"] .kcell { background:#173040; }
.kcell.tw { background:#e0524d; } .kcell.dw { background:#f0a58e; }
.kcell.tl { background:#2f7fd1; } .kcell.dl { background:#a9d3f0; }
.kcell.center { background:#e0a020; }
.kcell .bonlbl { font-size:clamp(6px,1.4vw,10px); font-weight:800; color:rgba(255,255,255,.92); font-family:var(--font-display); letter-spacing:-.5px; }
.kcell.dl .bonlbl, .kcell.center .bonlbl { color:rgba(20,30,40,.7); }
.ktile { position:absolute; inset:1px; border-radius:3px; background:linear-gradient(180deg,#fff7e0,#f3e2b8);
  color:#3a2a00; display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:800; font-size:clamp(10px,2.3vw,20px); box-shadow:inset 0 -2px 0 rgba(0,0,0,.12); }
.ktile i { position:absolute; right:1px; bottom:0; font-size:clamp(5px,1.1vw,9px); font-style:normal; opacity:.7; }
.ktile.pending { background:linear-gradient(180deg,#c9f7ec,#8fe6d3); animation:ppop .2s var(--ease-bounce); }
@keyframes ppop { from{transform:scale(1.25)} to{transform:none} }

.kel-info { text-align:center; font-size:var(--text-sm); color:var(--ink-soft); margin:10px auto; min-height:20px; font-weight:600; }
.krack { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.krtile { width:clamp(36px,10vw,50px); height:clamp(42px,12vw,58px); border-radius:8px; border:none;
  background:linear-gradient(180deg,#fff7e0,#f0dcae); color:#3a2a00; font-family:var(--font-display);
  font-weight:800; font-size:clamp(16px,4vw,24px); position:relative; cursor:pointer; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; transition:transform var(--t-fast); }
.krtile i { position:absolute; right:4px; bottom:2px; font-size:10px; font-style:normal; opacity:.65; }
.krtile:hover { transform:translateY(-3px); }
.krtile.sel { outline:3px solid var(--brand-500); transform:translateY(-4px); }
.krtile.used { opacity:.25; }
.kel-controls { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
@media (max-width:520px){ .kel-scores .ks{min-width:70px;padding:6px 8px} .kel-scores .ks span{font-size:1.2rem} }

/* oyuncu şeridi (avatarlı skor) */
.kel-players{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.kel-players .kp{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:8px 12px; min-width:130px; transition:all var(--t-fast); }
.kel-players .kp.on{ border-color:var(--brand-500); box-shadow:var(--shadow-brand); }
.kel-players .kp b{ display:block; font-size:var(--text-sm); }
.kel-players .kp span{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; }
.kel-players .kp-mid{ display:flex; flex-direction:column; gap:4px; align-items:center; }
@media (max-width:520px){ .kel-players .kp{min-width:96px;padding:6px 8px} .kel-players .kp span{font-size:1.1rem} .kel-players .kp b{font-size:11px} }

/* eşleştirme ekranı */
.mm-spinner{ font-size:56px; animation:mmspin 2s linear infinite; display:inline-block; }
@keyframes mmspin{ 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.15)} 100%{transform:rotate(360deg) scale(1)} }
.mm-dots{ display:inline-block; width:22px; text-align:left; }

/* mini sohbet */
.kchat{ max-width:560px; margin:14px auto 0; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.kchat-head{ padding:10px 14px; background:var(--surface-2); font-weight:700; font-size:var(--text-sm); font-family:var(--font-display); }
.kchat-body{ height:150px; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:7px; }
.kmsg{ max-width:80%; padding:8px 12px; border-radius:14px; font-size:var(--text-sm); }
.kmsg.them{ background:var(--surface-2); align-self:flex-start; border-bottom-left-radius:5px; }
.kmsg.me{ background:var(--brand-500); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.kchat-input{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); }
.kchat-input input{ flex:1; padding:9px 12px; border:1px solid var(--border); border-radius:var(--r-full); background:var(--bg); color:var(--ink); }

/* ===== PATİ PATLAT (match-3) ===== */
.seker-hud { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.seker-stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:8px 14px; text-align:center; min-width:74px; }
.seker-stat b { display:block; font-size:var(--text-xs); color:var(--ink-soft); }
.seker-stat span { font-family:var(--font-display); font-weight:800; font-size:1.35rem; }
.seker-progress { height:12px; border-radius:var(--r-full); background:var(--surface-2); overflow:hidden; margin-bottom:12px; }
.seker-progress > i { display:block; height:100%; background:linear-gradient(90deg,#f472b6,#f43f5e,#f59e0b); border-radius:var(--r-full); transition:width .4s var(--ease); }

.sboard { position:relative; margin:0 auto; border-radius:16px; background:linear-gradient(160deg,#fde9f4,#e7f5ff); box-shadow:var(--shadow-lg), inset 0 2px 10px rgba(0,0,0,.06); touch-action:none; overflow:hidden; }
[data-theme="dark"] .sboard { background:linear-gradient(160deg,#241726,#101f2b); }
.candy { position:absolute; width:var(--cs); height:var(--cs); display:grid; place-items:center; cursor:pointer; transition:transform .22s var(--ease); will-change:transform; z-index:1; }
.candy .face { width:84%; height:84%; border-radius:28%; display:grid; place-items:center; font-size:calc(var(--cs)*.44);
  box-shadow: inset 0 -4px 7px rgba(0,0,0,.22), inset 0 3px 5px rgba(255,255,255,.35), 0 2px 5px rgba(0,0,0,.18);
  position:relative; transition:transform .15s var(--ease-bounce); }
.candy.sel { z-index:3; } .candy.sel .face { transform:scale(1.12); outline:3px solid #fff; box-shadow:0 0 0 4px var(--brand-500), var(--shadow-md); }
.candy.pop .face { animation:cpop .3s forwards; }
@keyframes cpop { 0%{transform:scale(1)} 45%{transform:scale(1.25) rotate(8deg)} 100%{transform:scale(0) rotate(30deg); opacity:0} }
.candy.spawn .face { animation:cspawn .3s var(--ease-bounce); }
@keyframes cspawn { from{transform:scale(0)} to{transform:scale(1)} }
.c0 .face{background:radial-gradient(circle at 34% 28%,#7dd3fc,#0ea5e9)}
.c1 .face{background:radial-gradient(circle at 34% 28%,#fcd34d,#f59e0b)}
.c2 .face{background:radial-gradient(circle at 34% 28%,#f9a8d4,#ec4899)}
.c3 .face{background:radial-gradient(circle at 34% 28%,#6ee7b7,#10b981)}
.c4 .face{background:radial-gradient(circle at 34% 28%,#fda4af,#f43f5e)}
.c5 .face{background:radial-gradient(circle at 34% 28%,#c4b5fd,#8b5cf6)}
/* çizgili */
.candy.sp-h .face::after,.candy.sp-v .face::after{content:"";position:absolute;inset:0;border-radius:28%;
  background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.55) 5px 9px);mix-blend-mode:overlay}
.candy.sp-v .face::after{background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.55) 5px 9px)}
/* sarmalı */
.candy.sp-w .face{box-shadow:0 0 0 3px #fff, 0 0 14px 3px rgba(255,215,0,.9), inset 0 -4px 7px rgba(0,0,0,.22);animation:wpulse 1s infinite}
@keyframes wpulse{50%{box-shadow:0 0 0 3px #fff,0 0 22px 6px rgba(255,180,0,1),inset 0 -4px 7px rgba(0,0,0,.22)}}
/* renk bombası */
.candy.sp-b .face{background:radial-gradient(circle at 32% 26%,#fff,#64748b 40%,#0f172a 90%);animation:bspin 3s linear infinite}
.candy.sp-b .face::before{content:"✦";color:#fff;font-size:calc(var(--cs)*.4);text-shadow:0 0 8px #fff}
@keyframes bspin{to{transform:rotate(360deg)}}
.flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%);pointer-events:none;animation:fl .4s forwards;z-index:5}
@keyframes fl{to{opacity:0;transform:scale(1.6)}}
.seker-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}