/* ============ BLACKJACK PRO — Neon Casino (Mobile-first) ============ */
:root{
  --bg:#0a0a12;
  --bg2:#12101f;
  --panel:rgba(20,18,36,0.75);
  --panel-border:rgba(255,215,0,0.22);
  --neon-red:#ff2d55;
  --neon-green:#00ff9d;
  --neon-gold:#ffd700;
  --neon-cyan:#00e5ff;
  --neon-purple:#b026ff;
  --text:#f5f3ff;
  --muted:#9a96b8;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  overflow-x:hidden;min-height:100vh;min-height:100dvh;
}
.hidden{display:none !important}
.accent{
  background:linear-gradient(90deg,var(--neon-gold),var(--neon-red),var(--neon-green),var(--neon-cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:'Cinzel',serif;
}
button{font-family:inherit}
input{font-family:inherit}

/* ============ LOGIN ============ */
.login-screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.login-bg{position:absolute;inset:0;background:
  radial-gradient(900px 500px at 20% 20%,rgba(176,38,255,0.18),transparent 60%),
  radial-gradient(800px 450px at 80% 80%,rgba(0,229,255,0.15),transparent 60%),
  var(--bg);}
.login-bg::after{content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 50%,black,transparent 75%);}
.login-card{position:relative;z-index:2;width:100%;max-width:380px;
  background:var(--panel);border:1px solid var(--panel-border);border-radius:22px;
  padding:34px 26px;backdrop-filter:blur(20px);
  box-shadow:0 0 60px rgba(255,215,0,0.12);text-align:center;}
.login-suits{display:flex;justify-content:center;gap:14px;font-size:20px;margin-bottom:12px}
.suit.red{color:var(--neon-red);text-shadow:0 0 14px var(--neon-red)}
.suit.gold{color:var(--neon-gold);text-shadow:0 0 14px var(--neon-gold)}
.login-title{font-family:'Cinzel',serif;font-size:28px;font-weight:900}
.login-sub{color:var(--muted);margin:6px 0 24px;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.field input{width:100%;padding:13px 15px;font-size:15px;color:var(--text);
  background:rgba(10,10,18,0.6);border:1px solid rgba(255,255,255,0.12);border-radius:11px;outline:none;transition:all .25s}
.field input:focus{border-color:var(--neon-gold);box-shadow:0 0 0 3px rgba(255,215,0,0.15)}
.login-error{color:var(--neon-red);font-size:12px;min-height:16px;margin-bottom:6px}
.btn-login{width:100%;padding:15px;font-size:15px;font-weight:700;cursor:pointer;
  background:linear-gradient(135deg,var(--neon-red),var(--neon-purple));color:#fff;border:none;border-radius:11px;
  box-shadow:0 0 30px rgba(255,45,85,0.35);transition:all .25s}
.btn-login:hover{transform:translateY(-2px)}

/* ============ APP ============ */
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 4%;
  border-bottom:1px solid rgba(255,255,255,0.07);background:rgba(10,10,18,0.8);
  backdrop-filter:blur(12px);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:8px}
.brand-suit{font-size:22px;color:var(--neon-red);text-shadow:0 0 14px var(--neon-red)}
.brand h1{font-family:'Cinzel',serif;font-size:18px;font-weight:900;letter-spacing:.5px}
.topbar-right{display:flex;align-items:center;gap:10px}
.chip{font-size:10px;color:var(--neon-gold);border:1px solid rgba(255,215,0,0.4);padding:6px 11px;border-radius:999px;background:rgba(255,215,0,0.07)}
.btn-logout{padding:8px 14px;cursor:pointer;background:transparent;color:var(--muted);
  border:1px solid rgba(255,255,255,0.15);border-radius:9px;font-size:13px;transition:all .2s}
.btn-logout:hover{color:var(--neon-red);border-color:var(--neon-red)}

/* ============ GAME ============ */
.game{flex:1;max-width:1100px;margin:0 auto;width:100%;padding:16px 3% 40px;display:flex;flex-direction:column;gap:16px}

.hands{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hand-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;
  padding:16px;backdrop-filter:blur(14px)}
.hand-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.hand-icon{font-size:18px}
.hand-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;flex:1}
.hand-status{font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.5px;white-space:nowrap}
.hand-status.hit{color:var(--neon-red);background:rgba(255,45,85,0.12);border:1px solid rgba(255,45,85,0.4)}
.hand-status.stand{color:var(--neon-green);background:rgba(0,255,157,0.12);border:1px solid rgba(0,255,157,0.4)}
.hand-total{font-family:'Cinzel',serif;font-weight:900;font-size:26px;color:var(--neon-red);text-shadow:0 0 18px var(--neon-red)}
.hand-total.gold{color:var(--neon-gold);text-shadow:0 0 18px var(--neon-gold)}
.hand-cards{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;margin-bottom:12px}
.mini-card{font-family:'Cinzel',serif;font-weight:700;font-size:15px;padding:7px 11px;border-radius:9px;
  border:1px solid rgba(255,255,255,0.16);background:rgba(0,0,0,0.45);color:var(--text);min-width:34px;text-align:center;
  animation:deal .3s ease}
.mini-card.ace{color:var(--neon-cyan);border-color:var(--neon-cyan)}
@keyframes deal{from{opacity:0;transform:scale(.5) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}

.hand-adder{display:flex;flex-direction:column;gap:10px}
.add-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.add-chips.single{grid-template-columns:repeat(5,1fr)}
.panel-note{font-size:11px;color:var(--muted);margin:0 0 12px;line-height:1.5;background:rgba(0,0,0,0.25);padding:8px 11px;border-radius:9px;border-left:3px solid var(--neon-gold)}
.panel-note b{color:var(--neon-gold)}
.add-chips button{padding:11px 0;font-size:16px;font-weight:700;cursor:pointer;color:var(--text);
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:10px;
  font-family:'Cinzel',serif;transition:all .18s;touch-action:manipulation}
.add-chips button:hover{border-color:var(--neon-gold);color:var(--neon-gold);transform:translateY(-1px)}
.add-chips button:active{transform:scale(.96)}
.manual-add{display:flex;gap:8px}
.manual-add input{flex:1;padding:11px 13px;font-size:15px;color:var(--text);background:rgba(10,10,18,0.6);
  border:1px solid rgba(255,255,255,0.12);border-radius:10px;outline:none}
.manual-add input:focus{border-color:var(--neon-cyan);box-shadow:0 0 0 3px rgba(0,229,255,0.15)}
.btn-add{padding:11px 20px;font-size:20px;font-weight:700;cursor:pointer;color:#0a0a12;
  background:var(--neon-green);border:none;border-radius:10px;box-shadow:0 0 20px rgba(0,255,157,0.3)}
.btn-add:active{transform:scale(.96)}
.btn-undo{width:100%;padding:9px;font-size:13px;cursor:pointer;color:var(--muted);
  background:transparent;border:1px dashed rgba(255,255,255,0.18);border-radius:9px;transition:all .2s}
.btn-undo:hover{color:var(--neon-red);border-color:var(--neon-red)}
.btn-stand{width:100%;padding:13px;font-size:15px;font-weight:700;cursor:pointer;color:#04241a;
  background:linear-gradient(135deg,var(--neon-green),#00b377);border:none;border-radius:11px;
  box-shadow:0 0 22px rgba(0,255,157,0.25);transition:all .2s}
.btn-stand:hover{transform:translateY(-1px)}
.btn-stand:active{transform:scale(.98)}
.btn-stand.used{background:rgba(0,255,157,0.15);color:var(--neon-green);box-shadow:none;border:1px solid rgba(0,255,157,0.4)}

/* Split */
.split-row{margin:0 0 12px}
.btn-split{width:100%;padding:13px;font-size:15px;font-weight:700;cursor:pointer;color:#0a0a12;
  background:linear-gradient(135deg,var(--neon-purple),var(--neon-cyan));border:none;border-radius:11px;
  box-shadow:0 0 26px rgba(176,38,255,0.3);animation:splitPulse 1.6s infinite}
.btn-split:hover{transform:translateY(-1px)}
.btn-split:active{transform:scale(.98)}
@keyframes splitPulse{0%,100%{box-shadow:0 0 18px rgba(176,38,255,0.3)}50%{box-shadow:0 0 38px rgba(176,38,255,0.55)}}

/* Oyuncu elleri (split) */
.player-hands{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.split-hand{border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:10px 12px;background:rgba(0,0,0,0.3)}
.split-hand.active{border-color:var(--neon-gold);box-shadow:0 0 20px rgba(255,215,0,0.15)}
.split-hand-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.split-hand-label{font-size:11px;color:var(--neon-gold);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.split-hand-total{font-family:'Cinzel',serif;font-weight:900;font-size:20px;color:var(--neon-cyan);text-shadow:0 0 14px var(--neon-cyan)}
.split-hand-cards{display:flex;flex-wrap:wrap;gap:6px;min-height:32px}

/* ============ RESULT ============ */
.result-wrap{}
.result-box{border-radius:18px;border:1px solid rgba(255,255,255,0.08);background:var(--panel);
  min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:20px 16px;backdrop-filter:blur(14px);transition:border-color .3s,box-shadow .3s}
.result-empty{color:var(--muted);font-size:13px}
.empty-orb{width:54px;height:54px;margin:0 auto 10px;border-radius:50%;font-size:24px;
  display:flex;align-items:center;justify-content:center;color:var(--neon-gold);
  border:2px dashed rgba(255,215,0,0.4);box-shadow:0 0 30px rgba(255,215,0,0.1)}
.result-content{}
.result-verdict{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(2rem,8vw,3.4rem);line-height:1;margin-bottom:4px;letter-spacing:2px}
.result-detail{font-size:17px;font-weight:600;margin-bottom:10px}
.result-rule{font-size:12px;color:var(--muted);background:rgba(0,0,0,0.4);padding:6px 14px;border-radius:999px;display:inline-block}
.result-box.v-hit{border-color:var(--neon-red);box-shadow:0 0 40px rgba(255,45,85,0.2)}
.result-box.v-stand{border-color:var(--neon-green);box-shadow:0 0 40px rgba(0,255,157,0.2)}
.result-box.v-double{border-color:var(--neon-cyan);box-shadow:0 0 40px rgba(0,229,255,0.2)}
.result-box.v-split{border-color:var(--neon-purple);box-shadow:0 0 40px rgba(176,38,255,0.2)}
.result-box.v-surrender{border-color:var(--neon-gold);box-shadow:0 0 40px rgba(255,159,26,0.2)}
.v-hit .result-verdict{color:var(--neon-red);text-shadow:0 0 26px var(--neon-red)}
.v-stand .result-verdict{color:var(--neon-green);text-shadow:0 0 26px var(--neon-green)}
.v-double .result-verdict{color:var(--neon-cyan);text-shadow:0 0 26px var(--neon-cyan)}
.v-split .result-verdict{color:var(--neon-purple);text-shadow:0 0 26px var(--neon-purple)}
.v-surrender .result-verdict{color:var(--neon-gold);text-shadow:0 0 26px var(--neon-gold)}

/* ============ STATS ============ */
.stats-bar{display:flex;flex-direction:column;gap:12px;align-items:center}
.stats-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:480px}
.btn-win,.btn-lose{padding:16px 10px;font-size:16px;font-weight:700;cursor:pointer;border:none;border-radius:12px;transition:all .2s;touch-action:manipulation}
.btn-win{background:linear-gradient(135deg,var(--neon-green),#00b377);color:#04241a;box-shadow:0 0 26px rgba(0,255,157,0.25)}
.btn-win:active{transform:scale(.97)}
.btn-lose{background:linear-gradient(135deg,var(--neon-red),#a1001f);color:#fff;box-shadow:0 0 26px rgba(255,45,85,0.25)}
.btn-lose:active{transform:scale(.97)}
.btn-reset{grid-column:1/-1;padding:12px;font-size:14px;cursor:pointer;color:var(--muted);
  background:transparent;border:1px solid rgba(255,255,255,0.15);border-radius:11px;transition:all .2s}
.btn-reset:hover{color:var(--neon-cyan);border-color:var(--neon-cyan)}
.btn-clear{color:var(--neon-cyan);border-color:rgba(0,229,255,0.35);font-weight:600}
.btn-clear:hover{background:rgba(0,229,255,0.1);color:#fff}
.stats-readout{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:14px}
.st{font-weight:600}
.st-win{color:var(--neon-green)}
.st-lose{color:var(--neon-red)}
.st-push{color:var(--neon-gold)}
.st-rate{color:var(--neon-cyan)}
.st-streak{color:var(--neon-purple)}
.btn-danger{color:var(--neon-red);border-color:rgba(255,45,85,0.35);font-weight:600}
.btn-danger:hover{background:rgba(255,45,85,0.1);color:#fff}

/* Modal */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(5,5,10,0.8);backdrop-filter:blur(8px)}
.modal-box{width:100%;max-width:520px;max-height:80vh;display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--panel-border);border-radius:18px;overflow:hidden;
  box-shadow:0 0 60px rgba(255,215,0,0.15)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,0.08)}
.modal-head h3{font-family:'Cinzel',serif;font-size:16px;color:var(--neon-gold)}
.btn-close{padding:6px 12px;cursor:pointer;background:transparent;color:var(--muted);
  border:1px solid rgba(255,255,255,0.15);border-radius:8px;font-size:14px;transition:all .2s}
.btn-close:hover{color:var(--neon-red);border-color:var(--neon-red)}
.modal-body{padding:16px 20px;overflow-y:auto}
.stats-table{display:flex;flex-direction:column;gap:8px}
.stats-row{display:grid;grid-template-columns:1fr auto auto auto auto;gap:10px;align-items:center;
  padding:10px 14px;background:rgba(0,0,0,0.3);border-radius:10px;border:1px solid rgba(255,255,255,0.08)}
.stats-row.today{border-color:var(--neon-gold);box-shadow:0 0 16px rgba(255,215,0,0.12)}
.stats-row .d{font-weight:700;color:var(--text)}
.stats-row .d small{color:var(--muted);font-weight:400;font-size:11px;display:block}
.stats-row .v{font-size:14px;text-align:center}
.stats-row .v.w{color:var(--neon-green)}
.stats-row .v.l{color:var(--neon-red)}
.stats-row .v.t{color:var(--neon-gold)}
.stats-row .v.rate{color:var(--neon-cyan)}
.stats-total{font-family:'Cinzel',serif;font-size:15px;color:var(--neon-gold);padding:10px 14px;text-align:center;
  background:rgba(255,215,0,0.08);border-radius:10px;border:1px solid rgba(255,215,0,0.25)}
.stats-empty{color:var(--muted);text-align:center;padding:30px 0}

/* ============ FOOTER ============ */
.footer{text-align:center;padding:22px 4%;border-top:1px solid rgba(255,255,255,0.06);color:var(--muted);font-size:12px}
.foot-note{margin-top:5px;opacity:0.7;font-size:11px}

/* ============ RESPONSIVE (mobil) ============ */
@media(max-width:640px){
  .hands{grid-template-columns:1fr}
  .chip{display:none}
  .topbar{padding:12px 3%}
  .game{padding:12px 3% 30px;gap:12px}
  .add-chips button{padding:12px 0;font-size:17px}
  .btn-win,.btn-lose{padding:15px 8px;font-size:15px}
  .stats-buttons{max-width:100%}
}
@media(min-width:641px){
  .result-box{min-height:150px}
}