:root{
  --paper:#F6F1E6;
  --paper-2:#FFFDF7;
  --paper-3:#F0EADB;
  --grid:#E7DECC;
  --grid-2:#DCD1BB;
  --ink:#4A443A;
  --ink-2:#6B6355;
  --ink-3:#A79C88;
  --line:#E0D6C2;
  --line-2:#CFC2A9;
  --blue:#5B72A8;
  --blue-soft:#8FA6C9;
  --green:#5F9459;
  --green-ink:#4E7A48;
  --amber:#D98B33;
  --amber-ink:#A96A15;
  --red:#C0605F;
  --red-ink:#B0504F;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  --radius:6px;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  overscroll-behavior:none;
}
button{font-family:var(--mono);font-size:11px;cursor:pointer;}
kbd{
  font-family:var(--mono);font-size:9px;border:1px solid var(--line-2);
  border-radius:3px;padding:0 3px;color:var(--ink-3);margin-left:4px;
}

#hud{
  flex:0 0 auto;height:38px;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;background:var(--paper-2);border-bottom:1px solid var(--line);
  position:relative;z-index:20;
}
.hud-left,.hud-right{display:flex;align-items:center;gap:14px;min-width:0;}
.stats{display:flex;align-items:center;gap:14px;min-width:0;}
.brand{font-size:13px;letter-spacing:1px;color:var(--ink);}
.brand-sub{color:var(--ink-3);margin-left:4px;letter-spacing:0;}
.brand-accent{color:var(--amber-ink);}
.stat{display:flex;align-items:baseline;gap:5px;}
.stat .k{font-size:9px;color:var(--ink-3);letter-spacing:.5px;}
.stat .v{font-size:12px;color:var(--ink);}
.stat .d{font-size:10px;color:var(--ink-3);}
.pos{color:var(--green-ink);} .neg{color:var(--red-ink);} .warn{color:var(--amber-ink);}
.clock{color:var(--ink-3);font-size:11px;}
.speeds{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.spd{background:transparent;border:0;padding:4px 9px;color:var(--ink-2);border-right:1px solid var(--line);}
.spd:last-child{border-right:0;}
.spd:hover{background:var(--paper-3);}
.spd.active{background:var(--blue);color:#fff;}
.ghost{background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  padding:4px 9px;color:var(--ink-2);}
.ghost:hover{background:var(--paper-3);}

#stage{flex:1 1 auto;position:relative;overflow:hidden;}
#map{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;}

.panel{
  position:absolute;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 2px 6px rgba(160,146,120,.18);
  z-index:10;
}
.panel-head{
  padding:6px 10px;border-bottom:1px solid var(--line);font-size:10px;
  letter-spacing:1px;color:var(--ink-3);display:flex;justify-content:space-between;
}
.panel-body{padding:8px 10px;}
.hint{color:var(--ink-3);line-height:1.6;margin:0;}

#inspector{left:12px;top:12px;width:252px;}
#logpanel{right:12px;bottom:12px;width:292px;}
#alerts{right:12px;top:12px;width:308px;padding:0;display:none;border-color:var(--red);}

.log{max-height:150px;overflow-y:auto;padding:6px 8px;}
.log div{line-height:1.55;font-size:10px;color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.log .t{color:var(--ink-3);}
.log .ok{color:var(--green-ink);}
.log .bad{color:var(--red-ink);}
.log .wr{color:var(--amber-ink);}
.log .info{color:var(--blue);}

.row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;
  font-size:11px;color:var(--ink-2);}
.row b{color:var(--ink);font-weight:400;}
.bar{height:7px;background:var(--paper-3);border-radius:4px;overflow:hidden;margin:3px 0 7px;}
.bar i{display:block;height:100%;border-radius:4px;transition:width .25s;}
.sect{font-size:9px;color:var(--ink-3);letter-spacing:1px;margin:10px 0 4px;
  border-top:1px dashed var(--line);padding-top:7px;}
.btn{
  display:block;width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:6px 8px;
  color:var(--ink);margin-bottom:5px;line-height:1.4;
}
.btn:hover:not(:disabled){background:var(--paper-3);border-color:var(--blue-soft);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn .c{float:right;color:var(--ink-2);}
.btn.danger{border-color:#E7C4C3;color:var(--red-ink);}
.btn.danger:hover:not(:disabled){background:#FBEFEE;}
.btn.go{border-color:var(--green);color:var(--green-ink);}
.tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:9px;
  letter-spacing:.5px;}
.tag.b{background:#E9EDF6;color:#3F5387;}
.tag.g{background:#E7F0E4;color:var(--green-ink);}
.tag.a{background:#FAEEDA;color:var(--amber-ink);}
.tag.r{background:#F9E9E8;color:var(--red-ink);}

#toolbar{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--radius);padding:6px 8px;
  box-shadow:0 2px 6px rgba(160,146,120,.18);z-index:10;
}
.tool{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:6px 10px;color:var(--ink);}
.tool:hover{background:var(--paper-3);}
.tool.on{background:var(--blue);color:#fff;border-color:var(--blue);}
.tool.on kbd{color:#dfe6f5;border-color:#8fa0c9;}
.tier-picker{display:flex;gap:4px;}
.tp{background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:4px 7px;color:var(--ink-2);font-size:10px;line-height:1.3;text-align:center;}
.tp:hover{background:var(--paper-3);}
.tp.sel{border-color:var(--blue);background:#EDF1F8;color:#3F5387;}
.tp small{display:block;font-size:8px;color:var(--ink-3);}
.tp.sel small{color:#5B72A8;}
.build-hint{color:var(--ink-3);font-size:10px;min-width:158px;}

#toast-wrap{position:absolute;left:50%;top:14px;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:6px;z-index:15;align-items:center;}
.toast{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--radius);padding:7px 14px;font-size:11px;color:var(--ink);
  box-shadow:0 2px 8px rgba(160,146,120,.25);animation:pop .3s ease-out;}
.toast.bad{border-left-color:var(--red);}
.toast.good{border-left-color:var(--green);}
.toast.wr{border-left-color:var(--amber);}
@keyframes pop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.alert{padding:9px 11px;border-bottom:1px solid var(--line);font-size:12.5px;
  color:var(--ink-2);display:flex;align-items:center;justify-content:space-between;gap:9px;}
.alert:last-child{border-bottom:0;}
.alert[data-i]{cursor:pointer;}
.alert .mini{
  background:#FBEFEE;border:1px solid #E7C4C3;border-radius:4px;
  padding:4px 8px;font-size:11px;color:var(--red-ink);white-space:nowrap;margin-left:auto;
}
.alert .mini:hover:not(:disabled){background:#F6E1E0;border-color:var(--red);}
.alert .mini:disabled{opacity:.45;cursor:not-allowed;}
.alert[data-i]:hover{background:var(--paper-3);}
.alert b{color:var(--red-ink);font-weight:400;font-size:12.5px;letter-spacing:.3px;}
.alert .rem{color:var(--ink-3);font-size:11.5px;}

#outage{
  position:absolute;left:50%;top:12px;transform:translateX(-50%);
  background:#FBEEED;border:1px solid var(--red);border-left:4px solid var(--red);
  border-radius:var(--radius);padding:8px 16px;z-index:16;cursor:pointer;
  box-shadow:0 3px 12px rgba(160,120,118,.3);display:flex;flex-direction:column;gap:2px;
  max-width:min(560px,70vw);animation:pulseBorder 1.6s ease-in-out infinite;
}
#outage.hidden{display:none;}
#outage b{color:var(--red-ink);font-weight:400;font-size:14.5px;}
#outage span{color:var(--ink-2);font-size:12px;}
#outage:hover{background:#F7E3E2;}
@keyframes pulseBorder{
  0%,100%{box-shadow:0 3px 12px rgba(160,120,118,.3);}
  50%{box-shadow:0 3px 18px rgba(192,96,95,.55);}
}
.ghost.muted{color:var(--ink-3);opacity:.6;}
.btn small{color:var(--ink-3);}

#modal{position:absolute;inset:0;background:rgba(74,68,58,.35);z-index:40;
  display:flex;align-items:center;justify-content:center;}
#modal.hidden{display:none;}
.modal-card{background:var(--paper-2);border:1px solid var(--line);border-radius:8px;
  width:min(680px,90vw);max-height:82vh;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 8px 30px rgba(120,105,80,.3);}
.modal-head{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;color:var(--ink-3);}
.modal-body{padding:14px 18px;overflow-y:auto;line-height:1.75;font-size:11.5px;color:var(--ink-2);}
.modal-body h3{font-size:12px;color:var(--ink);font-weight:400;letter-spacing:.5px;
  margin:16px 0 6px;border-bottom:1px dashed var(--line);padding-bottom:4px;}
.modal-body h3:first-child{margin-top:0;}
.modal-body ul{margin:4px 0;padding-left:18px;}
.modal-body li{margin:3px 0;}
.modal-body b{color:var(--ink);font-weight:400;}
.swatch{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:4px;}
.modal-body table{width:100%;border-collapse:collapse;margin:6px 0;}
.modal-body td,.modal-body th{padding:3px 6px;border-bottom:1px solid var(--line);
  text-align:left;font-weight:400;}
.modal-body th{color:var(--ink-3);font-size:9px;letter-spacing:.5px;}

.gameover{text-align:center;padding:20px;}
.gameover h2{font-size:18px;font-weight:400;color:var(--red-ink);margin:0 0 8px;}

/* ============ paneli kapatma düğmesi (mobil sayfa altı çekmeceleri) ============ */
.sheet-close{
  display:none;background:transparent;border:0;color:var(--ink-3);
  font-size:15px;line-height:1;padding:2px 4px;margin:-4px -4px -4px 0;
}

/* ============ MOBİL / DOKUNMATİK ============ */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1100px) {

  body{font-size:13px;}
  button{font-size:12px;}

  #hud{
    height:auto;flex-wrap:wrap;padding:5px 8px 4px;gap:6px;
    padding-top:calc(5px + env(safe-area-inset-top));
  }
  .hud-left{order:2;flex:1 1 100%;gap:8px;}
  .hud-right{order:1;flex:1 1 100%;justify-content:space-between;gap:6px;}
  .brand{display:none;}
  .stats{
    overflow-x:auto;gap:14px;flex:1 1 auto;padding-bottom:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .stats::-webkit-scrollbar{display:none;}
  .stat{flex:0 0 auto;}
  .stat .k{font-size:8.5px;}
  .stat .v{font-size:13px;}
  .hide-sm{display:none;}
  .clock{font-size:12px;}
  .spd{padding:8px 11px;font-size:12px;}
  .ghost{padding:8px 11px;font-size:13px;}

  /* denetim paneli: alttan açılan çekmece */
  #inspector{
    left:0;right:0;top:auto;bottom:58px;width:auto;
    max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border-radius:12px 12px 0 0;border-bottom:0;
    box-shadow:0 -3px 14px rgba(160,146,120,.28);
  }
  #inspector.empty{display:none;}
  #inspector .panel-head{position:sticky;top:0;background:var(--paper-2);z-index:2;font-size:11px;}
  .sheet-close{display:block;}
  .row{font-size:13px;padding:5px 0;}
  .sect{font-size:10px;}
  .btn{padding:10px 10px;font-size:12.5px;margin-bottom:7px;}
  .btn small{font-size:11px;}
  .tag{font-size:10px;padding:2px 7px;}
  .bar{height:9px;}

  /* olay akışı: varsayılan gizli, ≡ ile açılır */
  #logpanel{display:none;}
  body.log-open #logpanel{
    display:block;left:0;right:0;bottom:58px;width:auto;
    border-radius:12px 12px 0 0;z-index:12;
  }
  body.log-open #inspector{display:none;}
  .log{max-height:38vh;}
  .log div{font-size:11.5px;white-space:normal;}

  /* uyarılar: üstte tam genişlik */
  #alerts{left:8px;right:8px;top:6px;width:auto;}
  .alert{font-size:13px;padding:10px 11px;}
  .alert .mini{padding:7px 10px;font-size:12px;}

  #outage{left:8px;right:8px;top:6px;transform:none;max-width:none;padding:10px 14px;}
  #outage b{font-size:14px;}

  /* araç çubuğu: ekranın altına sabit, geniş dokunma hedefleri */
  #toolbar{
    left:0;right:0;bottom:0;transform:none;border-radius:0;
    border-left:0;border-right:0;border-bottom:0;justify-content:center;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));gap:6px;
  }
  .tool{padding:10px 13px;font-size:12.5px;}
  .tool kbd{display:none;}
  .tier-picker{gap:5px;overflow-x:auto;scrollbar-width:none;}
  .tier-picker::-webkit-scrollbar{display:none;}
  .tp{padding:8px 10px;font-size:12px;min-width:42px;}
  .tp small{font-size:9px;}
  .build-hint{display:none;}

  #toast-wrap{left:8px;right:8px;transform:none;align-items:stretch;top:auto;bottom:66px;}
  .toast{font-size:12.5px;padding:9px 14px;}

  .modal-card{width:94vw;max-height:86vh;}
  .modal-body{font-size:13px;padding:12px 14px;}
  .modal-body table{font-size:12px;}
}

/* çok dar ekran: harita için daha fazla yer */
@media (max-width: 420px) {
  .stats{gap:11px;}
  .stat .v{font-size:12.5px;}
  .spd{padding:7px 9px;}
  #inspector{max-height:42vh;}
}

/* yatay tutulan telefon: yükseklik az, panelleri kısalt */
@media (max-height: 480px) and (pointer: coarse) {
  #inspector{max-height:60vh;bottom:52px;}
  .log{max-height:32vh;}
  #toolbar{padding:5px 8px calc(5px + env(safe-area-inset-bottom));}
}

/* ============ zorluk kademesi ============ */
.diffbadge{
  background:#F9E9E8;border:1px solid var(--red);color:var(--red-ink);
  border-radius:var(--radius);padding:3px 8px;font-size:10px;letter-spacing:.5px;
}
.diffbox{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;margin-bottom:16px;
}
.diffbox-head{font-size:10px;letter-spacing:1px;color:var(--ink-3);margin-bottom:7px;}
.diffrow{display:flex;gap:6px;margin-bottom:8px;}
.diffbtn{
  flex:1;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:8px 10px;color:var(--ink-2);font-size:12.5px;
}
.diffbtn:hover{background:var(--paper-3);}
.diffbtn.sel{background:var(--blue);border-color:var(--blue);color:#fff;}
.diffhint{margin:0;font-size:11.5px;line-height:1.6;color:var(--ink-2);}
.diffhint.muted{color:var(--ink-3);margin-top:5px;font-size:11px;}

/* ============ credit rozeti (fatihyigit.com) ============ */
#credit{
  position:absolute;left:14px;bottom:42px;z-index:11;
  display:flex;align-items:center;gap:9px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:999px;
  padding:5px 14px 5px 5px;box-shadow:0 2px 6px rgba(160,146,120,.16);
  pointer-events:none;user-select:none;
}
#credit img{
  width:44px;height:44px;border-radius:50%;display:block;
  border:1px solid var(--line);
}
#credit span{
  font-family:var(--mono);font-size:13px;color:var(--ink-2);letter-spacing:.3px;
}

@media (max-width: 860px), (pointer: coarse) and (max-width: 1100px) {
  #credit{left:10px;bottom:66px;padding:4px 11px 4px 4px;gap:7px;}
  #credit img{width:32px;height:32px;}
  #credit span{font-size:11px;}
}
@media (max-height: 480px) and (pointer: coarse) {
  #credit{bottom:58px;}
}