:root{
  --sky-top:#0d2b4e; --sky-mid:#2a5f8f; --sky-warm:#e8935a;
  --panel:#1c2733; --panel-2:#232f3d; --panel-line:#0f161e;
  --blue:#2f6fb0; --blue-deep:#1c4c85; --blue-glow:#5ea8e8;
  --orange:#d97a3a; --orange-deep:#a5551f; --orange-glow:#f0a862;
  --ink:#eef3f8; --ink-dim:#9fb0c2;
  --green:#4caf6e; --red:#d1493f; --amber:#e0b23c;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  position:relative;
  background: linear-gradient(180deg,#04071a 0%, #0a1233 35%, #141b3d 65%, #1c2440 100%);
  min-height:100vh; color:var(--ink); overflow-x:hidden;
}
/* Nebula katmanı - sabit, hafif renkli lekeler */
body::after{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% -10%, #2a3f7a 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, #5a2f7a 0%, transparent 45%);
}
/* Yıldız katmanı - yavaşça kayan + hafif parıldayan animasyonlu katman */
body::before{
  content:''; position:fixed; inset:-10% -10% -10% -10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 230px 180px, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 300px 40px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 40px 220px, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.2px 1.2px at 120px 260px, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 270px 110px, rgba(255,255,255,0.3), transparent);
  background-repeat: repeat;
  background-size: 340px 260px;
  animation: starDrift 90s linear infinite, starTwinkle 5s ease-in-out infinite;
  will-change: background-position, opacity;
}
@keyframes starDrift{
  from{ background-position: 0 0; }
  to{ background-position: -340px 260px; }
}
@keyframes starTwinkle{
  0%,100%{ opacity:0.85; }
  50%{ opacity:1; }
}
h1,h2,h3{margin:0;}

/* ---------- ICONS (SVG) ---------- */
.icon-svg{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; line-height:0;}
.icon-svg svg{width:1em; height:1em; display:block;}
.brand-badge .icon-svg svg{width:20px; height:20px;}
.module-title .icon-svg svg{width:13px; height:13px;}
.side-title .icon-svg{margin-right:2px;}
.side-title .icon-svg svg{width:16px; height:16px;}
.role-btn .icon-svg svg{width:26px; height:26px;}
.route-slot .icon-svg svg{width:17px; height:17px;}
.slot .icon-svg svg, .focus-slot .icon-svg svg{width:14px; height:14px;}
.bigbtn .icon-svg svg{width:14px; height:14px; vertical-align:-2px;}

/* ---------- HEADER ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; gap:12px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-badge{
  width:38px; height:38px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #cfe6ff, #6fa8dc 45%, #1c4c85 100%);
  border:2px solid #0f2a45; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:18px;
}
.brand-text .t1{font-size:11px; letter-spacing:2px; color:#bcd4ec; font-weight:600;}
.brand-text .t2{font-size:20px; font-weight:800; color:#fff; letter-spacing:0.5px;}
.topbtns{display:flex; gap:8px;}
.iconbtn{
  background:rgba(10,25,40,0.55); border:1px solid rgba(255,255,255,0.18); color:#eef3f8;
  border-radius:10px; padding:8px 14px; font-size:13px; cursor:pointer; backdrop-filter:blur(4px); transition:background .15s;
}
.iconbtn:hover{background:rgba(255,255,255,0.15);}

/* ---------- PLAYERS STRIP ---------- */
.playersstrip{display:flex; gap:10px; padding:0 18px 8px; flex-wrap:wrap;}
.playercard{
  display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:10px;
  background:rgba(10,20,32,0.5); border:1px solid rgba(255,255,255,0.14); font-size:12.5px;
}
.playercard .dot{width:9px; height:9px; border-radius:50%; background:#556; flex:0 0 auto;}
.playercard.online .dot{background:var(--green); box-shadow:0 0 6px var(--green);}
.playercard.pilot{border-color:rgba(94,168,232,0.4);}
.playercard.kopilot{border-color:rgba(240,168,98,0.4);}
.playercard b{color:#fff;}
.playercard .you-tag{font-size:9.5px; background:var(--amber); color:#2b1d00; border-radius:6px; padding:1px 5px; font-weight:800;}

/* ---------- STATUS STRIP ---------- */
.statusstrip{display:flex; gap:10px; padding:0 18px 10px; flex-wrap:wrap;}
.statuscard{
  background:linear-gradient(160deg,#0c1f33,#132a44); border:1px solid rgba(120,170,220,0.25);
  border-radius:12px; padding:9px 14px; min-width:100px; box-shadow: inset 0 0 12px rgba(0,0,0,0.4);
}
.statuscard .label{font-size:10px; letter-spacing:1px; color:#87a3bf; margin-bottom:2px;}
.statuscard .value{font-size:19px; font-weight:800; color:#dff0ff; font-variant-numeric:tabular-nums;}
.statuscard.warn .value{color:var(--amber);}

/* ---------- APPROACH ROUTE ---------- */
.route-wrap{padding:0 18px 8px;}
.route-title{font-size:11px; letter-spacing:1.5px; color:#a9c3dc; margin-bottom:6px; font-weight:600;}
.route{display:flex; align-items:center; gap:4px; background:linear-gradient(180deg,#0c1c2c,#16283b);
  border:1px solid rgba(120,170,220,0.2); border-radius:12px; padding:10px 12px; overflow-x:auto; position:relative;}
.route-slot{flex:1 0 auto; min-width:38px; height:44px; border-radius:8px; background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; position:relative; font-size:18px;}
.route-slot.here{outline:2px solid var(--amber); box-shadow:0 0 10px var(--amber);}
.route-slot.airport{background:linear-gradient(160deg,#274b33,#1d3826); border-color:#4caf6e;}
.route-here-badge{position:absolute; bottom:-16px; font-size:9px; color:var(--amber); font-weight:700; letter-spacing:0.5px; white-space:nowrap;}
.capsule-marker{
  position:absolute; top:-6px; width:26px; height:26px; margin-left:-13px; pointer-events:none; z-index:6;
  display:flex; align-items:center; justify-content:center; color:var(--amber);
  filter:drop-shadow(0 0 6px rgba(224,178,60,0.8));
  transition: left .55s cubic-bezier(.4,1.4,.6,1);
}
.capsule-marker .icon-svg{font-size:22px;}

/* ---------- MISSION HINT ---------- */
.mission-hint{max-width:1180px; margin:0 auto; padding:0 18px 8px; display:none; flex-direction:column; gap:6px;}
.mission-hint-line{border-radius:10px; padding:8px 14px; font-size:12.5px; line-height:1.5; border:1px solid rgba(255,255,255,0.14);}
.mission-hint-line.danger{background:rgba(209,73,63,0.22); border-color:rgba(209,73,63,0.5); color:#ffc4bd;}
.mission-hint-line.warn{background:rgba(224,178,60,0.18); border-color:rgba(224,178,60,0.45); color:#ffe6a8;}
.mission-hint-line.ok{background:rgba(76,175,110,0.18); border-color:rgba(76,175,110,0.45); color:#b9f2cb;}

/* ---------- INFO ICON / TOOLTIP ---------- */
.info-icon{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; background:rgba(255,255,255,0.15); color:#dfeaf5; font-size:10px; font-weight:800;
  cursor:pointer; margin-left:4px; flex:0 0 auto; vertical-align:middle;
}
.info-icon:hover{background:rgba(255,255,255,0.3);}
.tooltip-bubble{
  position:fixed; z-index:250; max-width:270px; background:#101c2c; border:1px solid rgba(255,255,255,0.22);
  border-radius:10px; padding:10px 12px; font-size:12px; line-height:1.55; color:#dfeaf5;
  box-shadow:0 10px 26px rgba(0,0,0,0.55); display:none;
}
.tooltip-bubble.show{display:block;}

/* ---------- TUTORIAL ---------- */
.tutorial-progress{display:flex; gap:6px; justify-content:center; margin-bottom:16px;}
.tprogress-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.2); transition:background .2s;}
.tprogress-dot.active{background:var(--amber);}
.tutorial-nav{display:flex; align-items:center; gap:8px; margin-top:18px;}
#tutorialSlide p{margin:0 0 10px;}
#tutorialSlide ul{margin:0; padding-left:18px;}
#tutorialSlide li{font-size:13.5px; color:#cfe0ef; line-height:1.6;}

/* ---------- COCKPIT ---------- */
.cockpit{display:grid; grid-template-columns: 1fr 1.15fr 1fr; gap:10px; padding:8px 18px 12px; max-width:1180px; margin:0 auto;}
@media(max-width:880px){ .cockpit{grid-template-columns:1fr; } }
.side{border-radius:16px; padding:12px; position:relative; border:1px solid rgba(255,255,255,0.08);}
.side.pilot{background:linear-gradient(165deg, #16375c 0%, #0f2743 60%, #0b1d33 100%); box-shadow: inset 0 0 30px rgba(40,110,190,0.12);}
.side.kopilot{background:linear-gradient(165deg, #5c3116 0%, #43210f 60%, #33170b 100%); box-shadow: inset 0 0 30px rgba(210,120,50,0.12);}
.side-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.side-title{font-size:13px; font-weight:800; letter-spacing:1px;}
.side.pilot .side-title{color:var(--blue-glow);}
.side.kopilot .side-title{color:var(--orange-glow);}
.role-chip{font-size:10px; padding:3px 8px; border-radius:20px; font-weight:700; letter-spacing:0.5px;}
.side.pilot .role-chip{background:rgba(94,168,232,0.18); color:var(--blue-glow); border:1px solid rgba(94,168,232,0.4);}
.side.kopilot .role-chip{background:rgba(240,168,98,0.18); color:var(--orange-glow); border:1px solid rgba(240,168,98,0.4);}
.side.not-mine{opacity:0.88;}
.side.not-mine .module{pointer-events:none;}

.module{background:rgba(6,14,22,0.4); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:9px 10px; margin-bottom:8px;}
.module-title{font-size:10.5px; letter-spacing:0.5px; color:var(--ink-dim); margin-bottom:6px; font-weight:700; display:flex; align-items:center; gap:5px;}
.slotrow{display:flex; gap:6px; flex-wrap:wrap;}
.slot{
  width:42px; height:42px; border-radius:9px; position:relative; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; cursor:pointer; border:2px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.04); transition:transform .12s, box-shadow .12s, border-color .12s; color:#dfeaf5;
}
.slot.blue-allow{border-color:rgba(94,168,232,0.45);}
.slot.orange-allow{border-color:rgba(240,168,98,0.45);}
.slot.filled.blue{background:linear-gradient(160deg,#5ea8e8,#2a5c92); border-color:#bfe1ff; color:#08203a;}
.slot.filled.orange{background:linear-gradient(160deg,#f0a862,#b85e26); border-color:#ffe2c0; color:#3a1c06;}
.slot.valid-target{box-shadow:0 0 0 3px var(--amber); transform:translateY(-2px);}
.slot.opened{background:linear-gradient(160deg,#5fcf86,#2c8a4f); border-color:#c8ffda; color:#062611;}
.slot.activated{background:linear-gradient(160deg,#e8636a,#a52a30); border-color:#ffd2d4; color:#360307;}
.slot.just-unlocked{animation:slotUnlock .6s ease-out;}
@keyframes slotUnlock{
  0%{ box-shadow:0 0 0 0 rgba(200,255,218,0.9); transform:scale(1); }
  40%{ transform:scale(1.12); }
  100%{ box-shadow:0 0 0 14px rgba(200,255,218,0); transform:scale(1); }
}

.focusgrid{display:flex; gap:6px;}
.focus-slot{width:36px; height:36px; border-radius:50%; border:2px dashed rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; font-weight:800; color:#cfe0ef;}
.focus-slot.filled.blue{background:linear-gradient(160deg,#5ea8e8,#2a5c92); border-style:solid; color:#08203a;}
.focus-slot.filled.orange{background:linear-gradient(160deg,#f0a862,#b85e26); border-style:solid; color:#3a1c06;}
.focus-slot.valid-target{box-shadow:0 0 0 3px var(--amber);}

.opp-hint{font-size:11px; color:var(--ink-dim); text-align:center; margin-top:2px;}

/* CENTER */
.center-mod{background:linear-gradient(180deg,#1a2531,#111a24); border-radius:16px; padding:14px; border:1px solid rgba(255,255,255,0.1);
  display:flex; flex-direction:column; align-items:center; gap:10px;}
.dial-wrap{position:relative; width:190px; height:190px;}
.dial-outer{width:190px; height:190px; border-radius:50%; border:6px solid #0a141d; position:relative; overflow:hidden;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 4px 14px rgba(0,0,0,0.4);}
.dial-sky{position:absolute; inset:-20%; background:linear-gradient(180deg,#05070f 0%, #05070f 50%, #b4501f 50%, #7a2410 100%);
  transform-origin:center; transition:transform .5s ease;}
.dial-plane{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:26px; z-index:5; filter:drop-shadow(0 0 3px #000);}
.dial-plane .icon-svg{font-size:26px; color:#eef3f8;}
.dial-x{position:absolute; color:#ff5a5a; font-weight:900; font-size:13px; text-shadow:0 0 4px #000;}
.dial-readout{font-size:11px; color:var(--ink-dim); text-align:center;}
.dial-readout b{color:#fff; font-size:14px;}
.dial-outer.danger{animation:dialDanger 1s ease-in-out infinite;}
@keyframes dialDanger{
  0%,100%{ box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 4px 14px rgba(0,0,0,0.4), 0 0 0 0 rgba(209,73,63,0.55); }
  50%{ box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 4px 14px rgba(0,0,0,0.4), 0 0 0 8px rgba(209,73,63,0); }
}

.engine-row{display:flex; gap:10px; align-items:center; width:100%; justify-content:center;}
.engine-box{width:58px; height:58px; border-radius:12px; border:2px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800;
  background:rgba(255,255,255,0.04); cursor:pointer; position:relative;}
.engine-box.blue-allow{border-color:rgba(94,168,232,0.5);}
.engine-box.orange-allow{border-color:rgba(240,168,98,0.5);}
.engine-box.filled.blue{background:linear-gradient(160deg,#5ea8e8,#2a5c92); color:#08203a;}
.engine-box.filled.orange{background:linear-gradient(160deg,#f0a862,#b85e26); color:#3a1c06;}
.engine-box.valid-target{box-shadow:0 0 0 3px var(--amber);}
.engine-box.pulse-fire{animation:engineFire .7s ease-out;}
@keyframes engineFire{
  0%{ box-shadow:0 0 0 0 rgba(255,180,90,0.8); }
  100%{ box-shadow:0 0 0 16px rgba(255,180,90,0); }
}
.engine-plus{font-size:20px; color:var(--ink-dim);}
.speed-readout{font-size:12px; color:var(--ink-dim);}
.thresholds{display:flex; gap:14px; font-size:10px; color:var(--ink-dim); justify-content:center;}
.thresholds b{color:#fff;}
.center-alerts{font-size:10.5px; color:#8ba3bb; text-align:center; line-height:1.4;}

/* ---------- DICE TRAY ---------- */
.tray-wrap{position:sticky; bottom:0; z-index:20; background:linear-gradient(180deg, rgba(8,16,26,0.4), rgba(6,12,20,0.96) 30%);
  padding:10px 18px 12px; border-top:1px solid rgba(255,255,255,0.1);}
.tray-inner{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.dicepool{display:flex; gap:8px; align-items:center;}
.pool-label{font-size:10px; color:var(--ink-dim); letter-spacing:1px; margin-right:2px;}
.die{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:17px; cursor:pointer; border:2px solid rgba(255,255,255,0.3); transition:transform .12s; position:relative;}
.die.blue{background:linear-gradient(160deg,#6fb4ef,#255a94); color:#08213c;}
.die.orange{background:linear-gradient(160deg,#f5b674,#b8631f); color:#3c1e06;}
.die.placed{opacity:0.22; cursor:default; filter:grayscale(0.6);}
.die.selected{transform:translateY(-6px) scale(1.08); box-shadow:0 0 0 3px var(--amber);}
.die.adjusted::after{content:attr(data-delta); position:absolute; top:-9px; right:-7px; background:var(--amber);
  color:#2b1d00; font-size:9px; border-radius:8px; padding:1px 4px; font-weight:800;}
.die.tumble-in{animation:diceTumble .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes diceTumble{
  0%{ transform:rotate(-200deg) scale(0.3); opacity:0; }
  60%{ transform:rotate(15deg) scale(1.08); opacity:1; }
  100%{ transform:rotate(0deg) scale(1); }
}
.trayctrls{display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap;}
.bigbtn{padding:10px 18px; border-radius:10px; border:none; cursor:pointer; font-weight:800; font-size:13px; letter-spacing:0.3px;}
.bigbtn.primary{background:linear-gradient(160deg,#5fcf86,#2c8a4f); color:#062611; box-shadow:0 3px 10px rgba(76,175,110,0.35);}
.bigbtn.primary:disabled{background:#3a4756; color:#7c8ea1; cursor:not-allowed; box-shadow:none;}
.bigbtn.ghost{background:rgba(255,255,255,0.08); color:#eef3f8; border:1px solid rgba(255,255,255,0.2);}
.bigbtn.ghost:disabled{opacity:0.35; cursor:not-allowed;}
.bigbtn.coffee{background:linear-gradient(160deg,#c99a5b,#7a4e20); color:#2a1a05;}
.bigbtn.coffee:disabled{opacity:0.3; cursor:not-allowed;}
.tray-hint{font-size:11px; color:var(--ink-dim); width:100%;}

/* ---------- LOG ---------- */
.log-wrap{max-width:1180px; margin:0 auto; padding:0 18px 18px;}
.log{background:rgba(6,12,20,0.55); border:1px solid rgba(255,255,255,0.1); border-radius:12px;
  padding:10px 14px; max-height:130px; overflow-y:auto; font-size:12px; color:#b9cbdc; line-height:1.6;}

/* ---------- LOBBY / OVERLAYS ---------- */
.lobby-wrap{max-width:560px; margin:60px auto; padding:0 18px; text-align:center;}
.lobby-card{background:linear-gradient(165deg,#16283f,#0d1826); border:1px solid rgba(255,255,255,0.15);
  border-radius:18px; padding:30px 26px; box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.lobby-card h2{font-size:22px; margin-bottom:10px;}
.lobby-card p{font-size:13.5px; color:#cfe0ef; line-height:1.6; margin-bottom:18px;}
.room-input{width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.06); color:#fff; font-size:18px; font-weight:800; letter-spacing:3px;
  text-align:center; text-transform:uppercase; margin-bottom:14px;}
.role-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:14px;}
.role-btn{flex:1 1 160px; padding:18px 14px; border-radius:14px; border:2px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.05); cursor:pointer; color:#eef3f8; font-weight:700; font-size:14px;}
.role-btn.pilot{border-color:rgba(94,168,232,0.5);}
.role-btn.kopilot{border-color:rgba(240,168,98,0.5);}
.role-btn:disabled{opacity:0.35; cursor:not-allowed;}
.role-btn .emoji, .role-btn .icon-svg{font-size:26px; display:block; margin-bottom:8px;}
.share-box{background:rgba(255,255,255,0.06); border:1px dashed rgba(255,255,255,0.25); border-radius:10px;
  padding:10px 12px; font-size:12px; color:#cfe0ef; word-break:break-all; margin-top:10px;}

.lobby-tabs{display:flex; gap:8px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.12); padding-bottom:2px;}
.lobby-tab{
  flex:1; padding:10px 8px; border:none; background:transparent; color:var(--ink-dim); font-weight:700; font-size:13px;
  cursor:pointer; border-bottom:2px solid transparent; border-radius:8px 8px 0 0;
}
.lobby-tab.active{color:#fff; border-bottom-color:var(--amber); background:rgba(255,255,255,0.05);}
.lobby-pane p{font-size:13px;}
.join-status{min-height:18px; font-size:12px; margin:6px 0 14px; text-align:left;}
.pulse{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--amber); margin-right:6px;
  animation:pulse 1.4s infinite;}
@keyframes pulse{0%{opacity:1;} 50%{opacity:0.25;} 100%{opacity:1;}}

/* ---------- MODALS ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(4,10,18,0.78); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-bg.show{display:flex;}
.modal{background:linear-gradient(165deg,#16283f,#0d1826); border:1px solid rgba(255,255,255,0.15);
  border-radius:18px; padding:26px; max-width:520px; width:100%; max-height:86vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.modal h2{font-size:20px; margin-bottom:10px; color:#fff;}
.modal p, .modal li{font-size:13.5px; color:#cfe0ef; line-height:1.6;}
.modal h3{font-size:13px; color:var(--amber); margin:14px 0 6px;}
.modal ul{padding-left:18px; margin:4px 0;}
.modal .closebtn{margin-top:16px;}
.result-icon{font-size:46px; text-align:center; margin-bottom:6px;}
.result-title{font-size:22px; font-weight:900; text-align:center; margin-bottom:8px;}
.result-title.win{color:#5fcf86;}
.result-title.lose{color:#e8636a;}
.result-detail{font-size:13.5px; color:#cfe0ef; text-align:center; line-height:1.6; margin-bottom:14px;}
.checklist{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.checkline{display:flex; align-items:center; gap:8px; font-size:12.5px; background:rgba(255,255,255,0.05); padding:6px 10px; border-radius:8px;}
.checkline .ok{color:#5fcf86; font-weight:900;}
.checkline .no{color:#e8636a; font-weight:900;}

.toast{position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:200;
  background:rgba(20,32,48,0.95); border:1px solid rgba(255,255,255,0.2); border-radius:10px;
  padding:10px 18px; font-size:13px; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,0.4);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(6px);}

/* ---------- SCREEN FLASH (kazanma/kaybetme anı) ---------- */
.screen-flash{position:fixed; inset:0; z-index:300; pointer-events:none; opacity:0;}
.screen-flash.flash-danger{background:radial-gradient(ellipse at center, transparent 35%, rgba(209,73,63,0.55) 100%); animation:flashPop .9s ease-out forwards;}
.screen-flash.flash-success{background:radial-gradient(ellipse at center, transparent 35%, rgba(76,175,110,0.45) 100%); animation:flashPop .9s ease-out forwards;}
@keyframes flashPop{
  0%{ opacity:0; }
  15%{ opacity:1; }
  100%{ opacity:0; }
}

/* ---------- CONFETTI (başarılı kurtarma) ---------- */
.confetti-piece{position:fixed; top:-20px; z-index:301; pointer-events:none; border-radius:2px;
  animation-name:confettiFall; animation-timing-function:cubic-bezier(.4,.1,.6,.9); animation-fill-mode:forwards;}
@keyframes confettiFall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(105vh) rotate(540deg); opacity:0.9; }
}

/* ---------- METEOR STREAK (meteor kutusu tetiklendiğinde) ---------- */
.meteor-streak{position:fixed; z-index:290; pointer-events:none; color:#ffcf8a;
  filter:drop-shadow(0 0 8px rgba(255,150,60,0.9)); animation:meteorFly 1.1s ease-in forwards;}
.meteor-streak .icon-svg{font-size:34px;}
.meteor-streak::after{content:''; position:absolute; top:50%; right:100%; width:90px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,180,90,0.8)); transform:translateY(-50%);}
@keyframes meteorFly{
  0%{ transform: translate(0,0) rotate(35deg); opacity:0; }
  12%{ opacity:1; }
  100%{ transform: translate(-120vw, 90vh) rotate(35deg); opacity:0.3; }
}

/* ---------- LOBİ / AUTH DEKORU ---------- */
.orbit-deco{width:120px; height:120px; margin:4px auto 18px; position:relative;}
.orbit-deco .planet{position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, #6fa8dc, #1c4c85 70%); box-shadow:0 0 18px rgba(94,168,232,0.5);}
.orbit-deco .ring{position:absolute; top:50%; left:50%; width:100px; height:100px; margin:-50px 0 0 -50px;
  border:1px dashed rgba(255,255,255,0.25); border-radius:50%;}
.orbit-deco .sat{position:absolute; top:50%; left:50%; width:100px; height:100px; margin:-50px 0 0 -50px;
  animation:orbitSpin 10s linear infinite;}
.orbit-deco .sat .icon-svg{position:absolute; top:-8px; left:50%; margin-left:-8px; font-size:16px; color:var(--amber);}
@keyframes orbitSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

@media(prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
}

/* ---------- AUTH (LOGIN / REGISTER) ---------- */
.form-label{display:block; text-align:left; font-size:11.5px; color:var(--ink-dim); margin:10px 0 4px; font-weight:700;}
.auth-input{text-transform:none; letter-spacing:normal; font-size:14px; font-weight:500; text-align:left;}
.field-hint{font-size:10.5px; color:var(--ink-dim); text-align:left; margin:2px 0 0;}
.remember-row{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-dim); margin-top:12px; cursor:pointer;}
.remember-row input{width:15px; height:15px;}
.flash-list{margin-bottom:14px; display:flex; flex-direction:column; gap:6px;}
.flash-msg{border-radius:8px; padding:8px 12px; font-size:12.5px; text-align:left;}
.flash-msg.flash-error{background:rgba(209,73,63,0.18); border:1px solid rgba(209,73,63,0.4); color:#ffb3ad;}
.flash-msg.flash-success{background:rgba(76,175,110,0.18); border:1px solid rgba(76,175,110,0.4); color:#a9f0bf;}
.navbar-user{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-dim);}
.navbar-user form{margin:0;}