/* Mamut Kral: "savana çıkartması" (inceleme/04-gorsel-yon.md).
   Krem paneller, sıcak koyu kahve kalın çizgi, altın ana düğme, başlıklarda Baloo 2 (800). Tek tema. */
:root {
  --ink: #3b2715;          /* çizgi ve yazı */
  --ink2: #6b5134;         /* ikincil yazı */
  --ink3: #8c7556;         /* soluk yazı */
  --cream: #fff4dc;        /* panel */
  --cream2: #f0dcb4;       /* panel içi vurgu, seçili satır */
  --paper: #fbf3dc;        /* giriş alanı, kutucuk */
  --sand: #dcb66e;
  --sand-dk: #c89f55;
  --gold: #f2b134;
  --gold-lt: #ffd66b;
  --gold-dk: #b97a14;
  --red: #d4553a;
  --teal: #2f9c95;
  --leaf: #5f7d2e;
  --steel: #e1e7ec;
  --threat: #e0654a;       /* seni yiyebilir (renk körü modunda turuncu) */
  --prey: #6fae45;         /* yiyebilirsin (renk körü modunda mavi) */
  --line: 3px solid var(--ink);
  --lift: 0 4px 0 rgba(59, 39, 21, 0.35);
  --display: 'Baloo Baslik', 'Baloo 2', system-ui, sans-serif;
  --body: 'Baloo 2', system-ui, 'Segoe UI', sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  color-scheme: light;
}
body.cb { --threat: #f08a24; --prey: #4f9be0; }

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--sand);
}
body {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#game {
  position: fixed;
  inset: 0;
  display: block;
  touch-action: none;
  outline: none;
}
/* kişisel mod: tacı sende olunca sadece senin ekranında ince bir buzul tonu (js/ui.js setMamutMoment) */
#mamutOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(159, 216, 235, 0) 45%, rgba(74, 147, 171, 0.26) 100%);
  opacity: 0;
  transition: opacity 1.1s ease;
}
body.mamut-moment #mamutOverlay { opacity: 1; }
/* kişisel mod: HUD vurgu renkleri sıcak altından soğuk buz tonuna döner (sadece HUD, menü/pencereler etkilenmez) */
body.mamut-moment #hud {
  --gold: #8fd4e8;
  --gold-lt: #d3f1f8;
  --gold-dk: #4a93ab;
  --teal: #3f86c2;
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
button { font-family: inherit; color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.kbd {
  display: inline-block;
  font-family: var(--body);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 6px 3px;
  border-radius: 6px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-bottom-width: 3px;
  color: var(--ink);
}
body.touch .kb-only { display: none !important; }
body:not(.touch) .touch-only { display: none !important; }

/* ---------- Düğmeler ---------- */
.btn {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 9px 20px 8px;
  border-radius: 14px;
  border: var(--line);
  background: var(--cream);
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.15s ease;
}
.btn:hover { background: #fffaf0; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--gold); }
.btn.primary:hover { background: #f7bf4d; }
.btn.danger { color: #a3311d; background: #fbe3d8; }
.btn.small { font-size: 15px; padding: 6px 12px 5px; border-radius: 12px; }
.btn.pool { font-size: 16px; padding: 7px 16px 6px; background: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px 10px; padding-bottom: 4px; }

.small-btn {
  font-size: 13px;
  font-weight: 800;
  padding: 5px 12px 4px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.small-btn:hover { background: #fff; }

.chips-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  font: 800 14px var(--body);
  min-height: 36px;
  padding: 6px 14px 5px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.chip-btn:hover { background: #fff; }
.chip-btn[aria-pressed="true"] { background: var(--gold); box-shadow: inset 0 -3px 0 rgba(59, 39, 21, 0.25); }
.chip-btn.yes { background: #dcebc5; }

/* ---------- HUD ---------- */
.panel {
  position: fixed;
  background: rgba(255, 244, 220, 0.95);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--lift);
}
.hud-top {
  position: fixed;
  top: calc(12px + var(--sat));
  left: calc(12px + var(--sal));
  right: calc(12px + var(--sar));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
.hud-top > .panel { position: static; pointer-events: auto; }
.hud-tl {
  width: auto;
  max-width: min(320px, calc(100vw - 190px));
  padding: 7px 10px;
  display: grid;
  gap: 6px;
}
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.crown-time-chip { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.crown-time-chip svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.crown-time-chip .ctc-bg { fill: none; stroke: rgba(59, 39, 21, 0.18); stroke-width: 3; }
.crown-time-chip .ctc-ring {
  fill: none;
  stroke: var(--gold-dk);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 94.2px;
  stroke-dashoffset: calc(94.2px * (1 - var(--frac, 1)));
  transition: stroke-dashoffset 0.2s linear;
}
.crown-time-chip.hot .ctc-ring { stroke: #d0634e; }
.crown-time-chip .ctc-crown {
  width: 15px;
  height: 12px;
  background: var(--gold-dk);
  clip-path: polygon(0 100%, 0 20%, 28% 55%, 50% 0, 72% 55%, 100% 20%, 100% 100%);
}
.crown-time-chip.hot .ctc-crown { background: #d0634e; }
/* serbest renk paleti (özelleştirme, renk satırı) */
.color-palette { flex: 1 1 100%; width: 100%; height: 64px; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--ink); cursor: crosshair; touch-action: none; }
.color-palette.on { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 3px #ffd66b; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hud-tl .chips:not(:has(.chip:not([hidden]))) { display: none; }
/* anlık kilo değişimi (duraklat düğmesinin yanında) ve nedenleri */
.kilo-rate { font-variant-numeric: tabular-nums; min-width: 0; }
.kilo-rate.up { background: #dcebc5; color: #2f6b2a; }
.kilo-rate.down { background: #f6d6cb; color: #8e2418; }
.kilo-why { font-size: 12.5px; line-height: 1.35; color: var(--ink2); padding: 2px 4px 0; }
.kilo-why b { color: var(--ink); font-weight: 800; }
.chip {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  padding: 2px 8px 1px 5px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink2);
}
.chip .kbd { font-size: 9px; padding: 2px 4px 1px; border-width: 1.5px; border-bottom-width: 2px; }
.chip.dash { --cd: 0%; }
.chip.dash::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--cd);
  background: rgba(59, 39, 21, 0.22);
}
.chip.dash.ready { color: var(--ink); background: #dcebc5; }
.chip.dash.hurt { background: #f3d2c4; color: #8e2418; }
.chip.dash.sprinting, #tDash.sprinting { box-shadow: 0 0 0 3px rgba(242, 177, 52, 0.85), 0 0 12px rgba(242, 177, 52, 0.7); }
.chip.leaf { background: #cfe0a8; color: var(--ink); padding-left: 8px; }
.chip.shieldc { background: #e4f3f7; color: var(--ink); padding-left: 8px; }

/* etki süresi olan durumlar (hız/hortum yemi): uzun yazı yerine ikon + çevresinde geri sayım halkası */
.chip-ring { position: relative; flex: none; width: 26px; height: 26px; display: grid; place-items: center; }
.chip-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.chip-ring .cr-bg { fill: none; stroke: rgba(59, 39, 21, 0.18); stroke-width: 2.6; }
.chip-ring .cr-ring {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 75.4px;
  stroke-dashoffset: calc(75.4px * (1 - var(--frac, 1)));
  transition: stroke-dashoffset 0.2s linear;
}
.chip-ring .cr-ico { width: 13px; height: 13px; display: grid; place-items: center; }
.chip-ring.boost .cr-ico.cr-bolt { background: var(--gold); clip-path: polygon(45% 0, 8% 58% ,40% 58%, 30% 100%, 92% 35%, 55% 35%); }
.chip-ring.trunkc .cr-ico.cr-x2 { width: auto; height: auto; font-size: 11px; font-weight: 800; color: var(--ink); }

.top-center {
  position: fixed;
  top: calc(12px + var(--sat));
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.crown-info {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  background: rgba(255, 244, 220, 0.95);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 14px 2px;
  text-align: center;
  box-shadow: 0 3px 0 rgba(59, 39, 21, 0.3);
}
.crown-info.hot { background: var(--gold); }
/* üst kutu (LİSTE 11): maçta tek satır taç süresi ve ince çubuk; kısa uyarılar birkaç sn kendi renginde (js/ui.js updateMatchBar) */
.match-bar {
  position: relative;
  pointer-events: auto;
  min-width: 150px;
  max-width: 100%;
  background: rgba(255, 244, 220, 0.95);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 2px 12px 4px;
  text-align: center;
  box-shadow: 0 3px 0 rgba(59, 39, 21, 0.3);
}
.match-bar.active { background: rgba(227, 241, 246, 0.95); }
.mb-line { display: flex; justify-content: center; align-items: baseline; gap: 8px; }
.mb-phase { font-family: var(--display); font-size: 14px; color: var(--ink); }
.mb-time { font-size: 13px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mb-time:empty { display: none; }
.mb-sub { font-size: 11.5px; font-weight: 700; color: var(--ink2); line-height: 1.2; font-variant-numeric: tabular-nums; }
.mb-sub:empty { display: none; }
.mb-track { height: 4px; border-radius: 2px; background: rgba(59, 39, 21, 0.15); overflow: hidden; margin-top: 2px; }
.mb-track[hidden] { display: none; }
.mb-fill { height: 100%; width: 0; background: var(--teal); border-radius: 2px; transition: width 0.2s linear; }
.match-bar.warm .mb-fill { background: var(--gold-dk); }
/* kısa uyarı: başlık + tek satır, kendi renginde */
.match-bar.alert { padding: 3px 14px 4px; }
.match-bar.alert .mb-phase { font-size: 16px; }
.match-bar.alert .mb-sub { color: var(--ink); font-size: 12px; }
.match-bar.tone-cream { background: var(--cream); }
.match-bar.tone-gold { background: var(--gold); }
.match-bar.tone-orange { background: #f4a640; }
.match-bar.tone-red { background: #f4a88a; }
.match-bar.tone-blue { background: #bfe6f7; }
.match-bar.pop { animation: mb-pop 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes mb-pop { from { transform: scale(0.8); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .match-bar.pop { animation: none; } }
@media (max-width: 480px) { .mb-phase { font-size: 13px; } .mb-time { font-size: 12px; } .mb-sub { font-size: 11px; } .match-bar.alert .mb-phase { font-size: 14.5px; } }
.tip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 3px 10px 3px 4px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  background: rgba(255, 244, 220, 0.92);
  border: 2px solid var(--ink);
  border-radius: 13px;
  box-shadow: 0 3px 0 rgba(59, 39, 21, 0.3);
}
.tip.show { animation: tip-in 0.3s cubic-bezier(0.2, 1.5, 0.4, 1); }
.tip-ico { flex: none; width: 18px; height: 18px; display: grid; place-items: center; font: 400 12px var(--display); background: var(--gold); border: 2px solid var(--ink); border-radius: 50%; }
@keyframes tip-in { from { opacity: 0; transform: translateY(-8px) scale(0.9); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .tip { font-size: 11.5px; padding: 3px 8px 2px 4px; } }
@media (prefers-reduced-motion: reduce) { .tip.show { animation: none; } }
.crown-panel {
  width: 100%;
  background: var(--gold);
  border: var(--line);
  border-radius: 22px;
  padding: 7px 16px 9px;
  text-align: center;
  box-shadow: var(--lift);
}
.crown-title {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.crown-bar { height: 10px; border-radius: 5px; background: rgba(185, 122, 20, 0.45); overflow: hidden; margin: 4px 6px 5px; }
#crownFill { height: 100%; background: var(--cream); border-radius: 5px; }
.crown-hint { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.crown-panel.over { background: #e0724f; animation: throb 0.5s ease-in-out infinite alternate; }
.crown-panel.over .crown-bar { background: rgba(92, 21, 16, 0.35); }
@keyframes throb { from { transform: scale(1); } to { transform: scale(1.03); } }

/* liderlik, ifade ve sohbet daireleri ve altlarında açılan tek panel (LİSTE 17) */
.hud-tr { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.dock-btns { display: flex; flex-direction: row-reverse; gap: 7px; pointer-events: auto; }
.dock-btn {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: rgba(255, 244, 220, 0.95);
  color: var(--ink);
  box-shadow: 0 3px 0 rgba(59, 39, 21, 0.3);
  cursor: pointer;
  pointer-events: auto;
}
.dock-btn:hover { background: #fff; }
.dock-btn[aria-expanded="true"] { background: var(--gold); }
.dock-btn .kbd { position: absolute; right: -6px; bottom: -6px; font-size: 9px; padding: 2px 4px 1px; border-width: 1.5px; border-bottom-width: 2px; }
.dock-ico { width: 22px; height: 22px; display: block; }
.board-box { position: static; width: 210px; padding: 8px 10px 6px; pointer-events: auto; animation: dockPop 0.14s ease-out; }
.board-box[hidden] { display: none; }
@keyframes dockPop { from { transform: translateY(-6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .board-box, .hud-tr .emote-panel { animation: none; } }
/* mini harita ve duyuru kutusunu daireye çeviren küçük düğme (köşede, "–") */
.fold-btn {
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
}
.fold-btn::after { content: ''; width: 10px; height: 2.5px; border-radius: 2px; background: currentColor; }
.fold-btn:hover { background: #fff; }
body.touch .fold-btn::before, body.touch .dock-btn::before { content: ''; position: absolute; inset: -7px; }
#mmKapat { top: -9px; left: -9px; }
#mbKapat { top: -9px; right: -9px; }
#mbAc { pointer-events: auto; }
#mbAc.yeni { background: var(--gold); animation: mbYeni 0.6s ease-in-out infinite alternate; }
@keyframes mbYeni { to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { #mbAc.yeni { animation: none; } }
.board-net { margin: 0 0 6px; font-size: 12px; font-weight: 800; color: var(--teal); }
#boardList { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
#boardList li {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 6px;
  align-items: center;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.45;
  padding: 0 5px;
  border-radius: 8px;
}
/* satırları hizalamak kolaylaşsın diye bir aşağı bir soluk ton (sen/taç sahibi renkleri üstüne biner) */
#boardList li:not(.gap):not(.sep):nth-of-type(even) { background: rgba(59, 39, 21, 0.05); }
#boardList li.me { background: var(--cream2); }
#boardList li.crowned { box-shadow: inset 3px 0 0 var(--gold-dk); }
#boardList li.human .b-name { color: #1f6f6a; }
#boardList li.gap { display: block; text-align: center; color: var(--ink3); line-height: 1; }
#boardList li.sep {
  display: block;
  margin-top: 4px;
  padding-top: 3px;
  border-top: 2px solid rgba(59, 39, 21, 0.2);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  line-height: 1.4;
}
.b-rank { color: var(--ink3); font-variant-numeric: tabular-nums; text-align: right; }
.b-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.b-name .avatar { box-shadow: none; }
.b-lv { font-family: var(--display); font-weight: 400; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.b-crown {
  flex: none;
  width: 14px;
  height: 11px;
  background: var(--gold-dk);
  clip-path: polygon(0 100%, 0 20%, 28% 55%, 50% 0, 72% 55%, 100% 20%, 100% 100%);
}
.b-on {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5fbf6a;
  box-shadow: 0 0 0 1.5px var(--ink);
}

#feed {
  position: fixed;
  left: calc(12px + var(--sal));
  top: calc(150px + var(--sat));
  display: grid;
  gap: 4px;
  pointer-events: none;
  max-width: 300px;
}
.feed-item {
  justify-self: start;
  font-size: 13px;
  font-weight: 800;
  padding: 2px 10px 1px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  background: rgba(255, 244, 220, 0.9);
  color: var(--ink2);
}
.feed-item.me { color: var(--ink); background: var(--cream); }
.feed-item.gold { background: var(--gold-lt); color: var(--ink); }
.feed-item.red { background: #f6c7b6; color: var(--ink); }

#announce {
  position: fixed;
  left: 50%;
  top: 24%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  width: min(640px, calc(100vw - 32px));
}
#announce.show { animation: ann-in 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
#annMain {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--cream);
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  text-wrap: balance;
}
#annSub {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--cream);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-wrap: balance;
}
#announce.tone-gold #annMain { color: var(--gold-lt); }
#announce.tone-red #annMain { color: #f4a88a; }
@keyframes ann-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* sağ alt (dokunmatikte sağ üst): mini harita kendi kutusunda, ifade ve sohbet düğmeleri onun altında ve ondan bağımsız */
.hud-br {
  position: fixed;
  right: calc(12px + var(--sar));
  bottom: calc(12px + var(--sab));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.mm-card {
  position: relative;
  padding: 5px;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--lift);
}
.mm-card[hidden] { display: none; }
#minimap { display: block; width: 260px; height: 260px; border-radius: 9px; box-shadow: inset 0 0 0 2px var(--sand-dk); }
.mm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; padding: 4px 2px 0; font-size: 10px; font-weight: 800; color: var(--ink2); line-height: 1.2; }
.mm-legend span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.mm-legend .d { width: 8px; height: 8px; display: inline-block; border: 1.3px solid var(--ink); border-radius: 50%; }
.mm-legend .d.red { background: var(--threat); border: 0; border-radius: 0; width: 9px; height: 8px; clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; position: relative; }
.mm-legend .d.green { background: var(--prey); border: 0; border-radius: 0; width: 9px; height: 8px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.mm-legend .d.ring { background: #fff; border-width: 1.8px; }
.mm-legend span[hidden] { display: none; }
.mm-legend .dm { width: 8px; height: 10px; display: inline-block; background: var(--ink); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); position: relative; }
.mm-legend .dm::after { content: ''; position: absolute; inset: 1.6px; background: #8fdcf5; clip-path: inherit; }
.mm-legend .sq { width: 7px; height: 7px; border: 1.5px solid var(--ink); background: var(--cream); display: inline-block; }
#minimap + .mm-legend { max-width: 260px; }

.hint { font-size: 13px; color: var(--ink2); padding-left: 6px; }

/* ---------- Dokunmatik düğmeler ---------- */
#touchBtns { display: none; }
body.touch #touchBtns {
  position: fixed;
  right: calc(16px + var(--sar));
  bottom: calc(16px + var(--sab));
  display: grid;
  gap: 12px;
  justify-items: end;
}
body.touch.btns-left #touchBtns { right: auto; left: calc(16px + var(--sal)); justify-items: start; }
.t-grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 12px;
  align-items: end;
  justify-items: center;
}
#tDash, #tTrap, #tSpray, #tSwing {
  --cd: 0%;
  border-radius: 50%;
  border: var(--line);
  box-shadow: 0 4px 0 rgba(59, 39, 21, 0.45);
  font-family: var(--display);
  color: var(--ink);
  line-height: 1;
  letter-spacing: 0;
  touch-action: none;
}
#tDash {
  grid-column: 2; grid-row: 2;
  width: 92px; height: 92px;
  font-size: 20px;
  background: linear-gradient(to top, rgba(59, 39, 21, 0.4) var(--cd), transparent var(--cd)), rgba(242, 177, 52, 0.9);
}
/* dokunmatik: üstte küçük Bırak ve Kapan, altta iri Hortum ve köşede Atıl */
#tSwing {
  grid-column: 1; grid-row: 2;
  width: 96px; height: 96px;
  padding: 0;
  font-size: 17px;
  background: linear-gradient(to top, rgba(59, 39, 21, 0.4) var(--cd), transparent var(--cd)), rgba(208, 99, 78, 0.92);
  color: #fff4dc;
  text-shadow: 0 1px 0 rgba(59, 39, 21, 0.6);
}
@keyframes trunkGlow { 0%, 100% { box-shadow: 0 0 0 3px rgba(242, 160, 58, 0.9), 0 0 10px rgba(242, 160, 58, 0.6); } 50% { box-shadow: 0 0 0 5px rgba(242, 160, 58, 1), 0 0 22px rgba(242, 160, 58, 0.9); } }
#tSwing.boosted, .chip.boosted { animation: trunkGlow 0.9s ease-in-out infinite; }
@keyframes waterGlow { 0%, 100% { box-shadow: 0 0 0 3px rgba(91, 189, 232, 0.9), 0 0 10px rgba(91, 189, 232, 0.6); } 50% { box-shadow: 0 0 0 5px rgba(91, 189, 232, 1), 0 0 22px rgba(91, 189, 232, 0.9); } }
#tSpray.wboost, .chip.wboost { animation: waterGlow 0.9s ease-in-out infinite; }
#tSwing.hurt { opacity: 0.7; font-size: 13px; background: rgba(160, 120, 100, 0.9); }
#tTrap {
  grid-column: 2; grid-row: 1;
  width: 72px; height: 72px;
  padding: 0;
  font-size: 15px;
  background: linear-gradient(to top, rgba(59, 39, 21, 0.4) var(--cd), transparent var(--cd)), rgba(225, 231, 236, 0.92);
}
#tSpray {
  grid-column: 1; grid-row: 1;
  width: 72px; height: 72px;
  padding: 0;
  font-size: 15px;
  background: rgba(236, 201, 120, 0.92);
}
#tTrap.locked { opacity: 0.4; }
body.btns-left #tSpray, body.btns-left #tSwing { grid-column: 2; }
body.btns-left #tDash, body.btns-left #tTrap { grid-column: 1; }
#tDrop {
  font-family: var(--display);
  font-size: 16px;
  padding: 10px 16px;
  border-radius: 16px;
  border: var(--line);
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(59, 39, 21, 0.45);
  touch-action: none;
}

/* dokunmatikte oyun ekranı sade: ses düğmesi yok (Ayarlar'da), küçük duraklat simgesi */
body.touch #muteBtn { display: none; }
body.touch #dashChip, body.touch #trapChip, body.touch #sprayChip { display: none; }
/* dokunmatikte hortum çipi sadece yaralıyken (geri sayım); bekleme düğmenin kendisinde görünür */
body.touch #swingChip:not(.hurt) { display: none; }
body.touch .hud-top { flex-direction: column; right: auto; }
body.touch .hud-tl { padding: 4px; border-radius: 28px; }
body.touch .hud-tl .chips:not(:has(.chip:not([hidden]):not(#dashChip):not(#trapChip):not(#sprayChip):not(#swingChip:not(.hurt)))) { display: none; }
#pauseBtn { display: inline-flex; align-items: center; gap: 7px; }
.pb-ico {
  flex: none;
  width: 10px;
  height: 12px;
  border-left: 3.5px solid currentColor;
  border-right: 3.5px solid currentColor;
}
#pauseBtn.paused .pb-ico { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
body.touch #pauseBtn { position: relative; width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 50%; }
body.touch #pauseBtn::before { content: ''; position: absolute; inset: -9px; } /* dokunma alanı görünenden büyük */
body.touch #pauseBtn .pb-txt { display: none; }
body.touch #pauseBtn .pb-ico { width: 9px; height: 11px; border-left-width: 3px; border-right-width: 3px; }
body.touch #pauseBtn.paused .pb-ico { width: 10px; margin-left: 2px; }
/* tablo sadece başlığından dokunulabilir, altındaki oyun alanına (joystick) dokunuş geçer */
/* tablo dokunuşu geçirir, altındaki oyun alanına (joystick) dokunuş gider; daireler solda başlar */
body.touch .hud-tr { align-items: flex-start; }
body.touch .dock-btns { flex-direction: row; }
body.touch .dock-btn { width: 34px; height: 34px; }
body.touch .board-box { pointer-events: none; width: 140px; padding: 5px 7px 4px; }
body.touch #boardList li { font-size: 11px; line-height: 1.4; grid-template-columns: 16px 1fr auto; gap: 4px; padding: 0 3px; }
body.touch .b-lv { font-size: 11px; }
body.touch #boardList li.sep { font-size: 10px; }
/* dokunmatik: mini harita sağ üstte (joystick genelde solda) */
body.touch .hud-br { top: calc(12px + var(--sat)); bottom: auto; left: auto; right: calc(12px + var(--sar)); }
body.touch .mm-card { padding: 3px; border-radius: 12px; }
body.touch #minimap { width: 224px; height: 224px; }
body.touch #minimap + .mm-legend { max-width: 224px; }

/* ---------- Menüler ---------- */
.overlay {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(24px + var(--sat)) max(16px, var(--sar)) calc(24px + var(--sab)) max(16px, var(--sal));
}
.menu-overlay {
  background: linear-gradient(90deg, rgba(59, 39, 21, 0.55) 0%, rgba(59, 39, 21, 0.32) 45%, rgba(59, 39, 21, 0) 80%);
  display: flex;
  align-items: safe center;
}
.menu-inner {
  width: 100%;
  max-width: 460px;
  min-width: 0;
  margin-left: clamp(0px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.menu-inner > * { min-width: 0; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand > div { min-width: 0; }
#logoCanvas { width: 104px; height: 104px; flex: none; }
.logo-img { display: block; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(59, 39, 21, 0.35)); }
h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 60px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--gold-lt);
  -webkit-text-stroke: 9px var(--ink);
  paint-order: stroke fill;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.tagline {
  display: inline-block;
  margin: 8px 0 0;
  padding: 2px 10px 1px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  background: rgba(255, 244, 220, 0.92);
  border: 2px solid var(--ink);
  border-radius: 999px;
}

.play-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--cream);
  border: var(--line);
  border-radius: 22px;
  box-shadow: var(--lift);
}
.play-row { display: flex; gap: 10px; align-items: center; margin: 0; }
#nameInput {
  flex: 1;
  min-width: 0;
  font: 800 19px var(--body);
  color: var(--ink);
  background: var(--paper);
  border: var(--line);
  border-radius: 14px;
  padding: 10px 14px 8px;
  -webkit-user-select: text;
  user-select: text;
}
#nameInput::placeholder { color: var(--ink3); }
#nameInput.locked { background: var(--cream2); cursor: default; }
.me-avatar { position: relative; display: grid; place-items: center; flex: none; }
.avatar-badge { top: -6px; right: -6px; }
.avatar-rank { position: absolute; bottom: -3px; left: 0; }
.play-big {
  width: 100%;
  font-size: 30px;
  padding: 12px 20px 11px;
  border-radius: 18px;
  box-shadow: 0 6px 0 var(--gold-dk), 0 6px 0 2px var(--ink);
}
.play-big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--gold-dk), 0 2px 0 2px var(--ink); }
.acc-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.over-class { margin-top: 2px; }
.class-card-wrap { max-width: 860px; }
.class-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.class-card {
  display: grid; align-content: start; gap: 4px; padding: 8px 10px 10px; text-align: left; cursor: pointer;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; font: inherit; color: var(--ink);
}
.class-card:hover { background: #fff; }
.class-card[aria-pressed="true"] { background: #fff3cf; box-shadow: 0 0 0 3px var(--gold), var(--lift); }
.class-prev { width: 100%; height: 104px; display: block; }
.class-card h3 { display: flex; align-items: center; gap: 6px; margin: 0; font: 800 18px var(--body); }
.class-card h3 svg { width: 20px; height: 20px; color: var(--ink2); }
.class-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; line-height: 1.25; }
.class-card li { position: relative; padding-left: 16px; }
.class-card li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.class-card li.plus::before { content: '+'; color: #3f8a4a; }
.class-card li.minus::before { content: '−'; color: var(--red); }
.class-card li.minus { color: var(--ink2); }
.class-rules { display: grid; gap: 6px; }
.class-stats { display: grid; gap: 6px; margin-top: 8px; }
.class-stats-tbl { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 4px 8px; font-size: 13px; align-items: center; overflow-x: auto; }
.cst-h { font-weight: 800; color: var(--ink2); font-size: 12px; line-height: 1.15; }
.cst-n { display: flex; align-items: center; gap: 4px; font-weight: 800; min-width: 0; }
.cst-n svg { width: 15px; height: 15px; flex: none; color: var(--ink2); }
.class-rule { margin: 0; }
.class-rule svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--ink2); }
.acc-cta { font-size: 16px; padding: 7px 14px 6px; background: #d6e9ec; }
.acc-cta-note { color: var(--ink2); font-size: 13px; line-height: 1.3; flex: 1 1 200px; min-width: 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 10px; }
.tiles-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; grid-template-rows: repeat(2, auto); }
.tile {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 86px;
  padding: 8px 4px 6px;
  background: var(--cream);
  border: var(--line);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.tile:hover { background: #fffaf0; }
.tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
/* hyphens: uzun kelimeler (Almanca vb.) dilin hece kurallarıyla bölünsün, harf ortasından değil (LİSTE 12) */
.tile-lbl { font: 800 14px/1.1 var(--body); text-align: center; max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; hyphens: auto; }
.tile-ico { display: block; width: 38px; height: 38px; background: center / contain no-repeat; }
.tile-lock { position: absolute; top: 4px; right: 6px; font-size: 13px; }
.tile-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  font: 400 12px var(--display);
  color: #fff;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
#skinPreview { width: 76px; height: 46px; display: block; }
.ico-how { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 40 40'%3E%3Ccircle r='17' fill='%232f9c95' stroke='%233b2715' stroke-width='2.5'/%3E%3Cpath d='M-6 -5 C -6 -12, 7 -12, 7 -5 C 7 0, 1 0, 1 5' fill='none' stroke='%23fff4dc' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='1' cy='11' r='2.6' fill='%23fff4dc'/%3E%3C/svg%3E"); }
.ico-set { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 40 40'%3E%3Ccircle r='17' fill='%23f2b134' stroke='%233b2715' stroke-width='2.5'/%3E%3Cpath d='M-2.94 -8.08L-2.65 -11.50L2.65 -11.50L2.94 -8.08A8.6 8.6 0 0 1 3.63 -7.79L6.25 -10.01L10.01 -6.25L7.79 -3.63A8.6 8.6 0 0 1 8.08 -2.94L11.50 -2.65L11.50 2.65L8.08 2.94A8.6 8.6 0 0 1 7.79 3.63L10.01 6.25L6.25 10.01L3.63 7.79A8.6 8.6 0 0 1 2.94 8.08L2.65 11.50L-2.65 11.50L-2.94 8.08A8.6 8.6 0 0 1 -3.63 7.79L-6.25 10.01L-10.01 6.25L-7.79 3.63A8.6 8.6 0 0 1 -8.08 2.94L-11.50 2.65L-11.50 -2.65L-8.08 -2.94A8.6 8.6 0 0 1 -7.79 -3.63L-10.01 -6.25L-6.25 -10.01L-3.63 -7.79A8.6 8.6 0 0 1 -2.94 -8.08Z' fill='%23fff4dc' stroke='%233b2715' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle r='3.6' fill='%23f2b134' stroke='%233b2715' stroke-width='2'/%3E%3C/svg%3E"); }
/* yeni kutucuk simgeleri: çizgili SVG, renkli daire zemin üstünde (ico-how/ico-set ile aynı dil) */
.tile-ico-svg {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  color: #fff4dc;
}
.tile-ico-svg svg { width: 20px; height: 20px; }
#classTile .tile-ico-svg { background: #d4553a; }
#classTile .tile-ico-svg svg { width: 22px; height: 22px; }
#fsBtn .tile-ico-svg { background: var(--teal); }
#langBtn .tile-ico-svg { background: #a585d0; }
#menuChatBtn .tile-ico-svg { background: #6f93d8; }
#gameTypeBtn .tile-ico-svg { background: #d9a35e; }

.net-line { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); background: rgba(255, 244, 220, 0.9); border: 2px solid var(--ink); border-radius: 14px; padding: 5px 12px 4px; }
/* oyna düğmesinin hemen altında küçük, rozetsiz durum yazısı */
.net-line-small { justify-self: center; background: none; border: none; box-shadow: none; padding: 0; font-size: 12px; font-weight: 700; color: var(--ink2); text-align: center; }
/* kutucuk ızgarasının altında, sol hizalı öneri düğmesi */
.tiles-fb { justify-self: start; }
/* oyun türü penceresi: seçenekler alt alta, tam genişlik */
.game-mode-sel { justify-content: center; }
.game-mode-sel .chip-btn { min-width: 96px; text-align: center; }
.game-mode-note { margin: -4px 0 0; text-align: center; }
.game-type-row { flex-direction: column; }
.game-type-row .btn { width: 100%; text-align: center; }
.pool-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pool-row:not(:has(:not([hidden]))) { display: none; }
.friends-line {
  justify-self: start;
  border: 2px solid var(--ink);
  background: #dcebc5;
  color: var(--ink);
  font: 800 14px var(--body);
  padding: 5px 12px 4px;
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
}
.friends-line.live::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  background: #5fbf6a;
  box-shadow: 0 0 0 1.5px var(--ink);
  vertical-align: 0;
}

/* ---------- Pencereler ---------- */
.center-overlay {
  background: rgba(59, 39, 21, 0.45);
  display: grid;
  place-items: safe center;
}

/* Maç ara ekranı (LİSTE 9 Grup E4): hafif saydam, dünya arkada görünür/incelenebilir kalsın diye tam karartma yok */
.intermission-overlay {
  background: rgba(59, 39, 21, 0.2);
  display: grid;
  place-items: safe start center;
  padding-top: calc(32px + var(--sat));
}
.intermission-card { max-width: 420px; }
.intermission-timer { margin: -6px 0 0; font-size: 14px; font-weight: 800; color: var(--teal); }
.intermission-son { margin: 0; padding: 4px 12px 3px; border: 2px solid var(--ink); border-radius: 12px; background: var(--gold); font-size: 15px; font-weight: 800; color: var(--ink); text-align: center; text-wrap: balance; }
.intermission-son[hidden] { display: none; }
.intermission-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 40vh; overflow-y: auto; }
.intermission-board li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.5;
  padding: 3px 6px;
  border-radius: 8px;
}
.intermission-board li:nth-of-type(even) { background: rgba(59, 39, 21, 0.05); }
.intermission-board li.me { background: var(--cream2); }
.intermission-board li.ih { font-size: 11px; color: var(--ink3); background: none; letter-spacing: 0.05em; padding-block: 0; }
.intermission-board li.bot .i-name { color: var(--ink2); font-weight: 700; }
.intermission-board .i-rank { color: var(--ink3); }
.intermission-board .i-score { color: var(--gold-dk); }
.card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--cream);
  border: var(--line);
  border-radius: 24px;
  padding: 22px;
  display: grid;
  gap: 14px;
  box-shadow: 0 6px 0 rgba(59, 39, 21, 0.45);
}
.card.wide { max-width: 580px; }
.card h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
}
.card > h2:first-of-type { padding-right: 44px; }
.x-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font: 800 26px/1 var(--body);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  z-index: 1;
}
.x-close span { margin-top: -3px; }
.x-close:hover { background: #fff; }
.x-close:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.over-cause { margin: -4px 0 0; font-size: 17px; font-weight: 800; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat {
  display: grid;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.stat-k { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink3); }
.stat-v { font-family: var(--display); font-size: 22px; font-variant-numeric: tabular-nums; }
.over-best { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink2); }
.over-best.record { color: var(--gold-dk); font-family: var(--display); font-size: 20px; }
.pause-note { margin: -4px 0 0; font-size: 15px; color: var(--ink2); }
#pauseFsNote { margin: 0; }
.more-btn {
  justify-self: start;
  background: none;
  border: 0;
  padding: 2px 0;
  color: var(--teal);
  font: 800 14px var(--body);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.confirm { padding: 10px 12px; border-radius: 14px; background: #fbe3d8; border: 2px solid var(--ink); }
.confirm p { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.acc-save { position: sticky; bottom: -1px; justify-content: flex-end; padding: 10px 0 4px; background: linear-gradient(180deg, rgba(255, 244, 220, 0), var(--cream) 40%); }

/* Özelleştirme ve ayarlar */
#customPreview {
  width: 100%;
  height: 170px;
  border-radius: 16px;
  background: var(--sand);
  border: var(--line);
}
.opt-rows { display: grid; gap: 10px; }
#lookRows { display: grid; gap: 10px; }
.opt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opt-lbl {
  width: 128px;
  flex: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
}
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  cursor: pointer;
  padding: 0;
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--cream), 0 0 0 5.5px var(--ink); }
.swatches-inline { display: contents; }
/* palet açma düğmesi: rengarenk halka (ortası boş), açıkken altın halkayla vurgulanır */
.palette-toggle {
  background: conic-gradient(#e94f4f, #f2b134, #e9e24f, #6fbf6f, #4fa8e9, #9a6fd6, #d64fa0, #e94f4f);
  position: relative;
}
.palette-toggle::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--ink);
}
.palette-toggle[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--cream), 0 0 0 5.5px #f2b134; }
.opt-note { flex-basis: 100%; margin: -4px 0 0 138px; font-size: 12px; color: var(--ink3); }
@media (max-width: 480px) { .opt-note { margin-left: 0; } }
.vol-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
#volRange { width: min(220px, 55vw); accent-color: var(--gold-dk); }
.vol-val { min-width: 52px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink2); }

/* Hesap penceresi */
.acc-lead { margin: 0; font-size: 15px; color: var(--ink2); }
.acc-h { margin: 6px 0 0; font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--gold-dk); }
.acc-sub { margin: 0; font-size: 13px; color: var(--ink2); }
#gsiBtn { min-height: 44px; color: var(--ink2); font-size: 14px; }
.nick-input {
  flex: 1 1 140px;
  min-width: 0;
  font: 800 16px var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 6px 10px 5px;
  -webkit-user-select: text;
  user-select: text;
}
.nick-box.first { border: 3px solid var(--gold-dk); border-radius: 16px; padding: 4px 12px 8px; background: #fbe9bf; }
.nick-status { min-height: 1.3em; margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--ink2); }
.nick-status.ok { color: #3f7a26; }
.nick-status.bad { color: #b23a22; }
.name-row { display: grid; gap: 4px; margin-top: 6px; }
.name-lbl { font-weight: 800; font-size: 14px; }
.name-lbl span { font-weight: 600; font-size: 12px; color: var(--ink3); }
.name-field { display: flex; gap: 8px; align-items: center; min-width: 0; }
.name-field .nick-input, .handle-field { flex: 1 1 auto; min-width: 0; }
.handle-field { display: flex; align-items: center; gap: 2px; min-width: 0; }
.handle-field > span { font-weight: 800; color: var(--gold-dk); font-size: 18px; }
.handle-field .nick-input { flex: 1; min-width: 0; }
.handle-now { margin: 0; font-weight: 800; color: var(--gold-dk); font-size: 16px; }
.acc-stats { grid-template-columns: repeat(3, 1fr); }
.acc-stats .stat-v { font-size: 18px; }
.acc-friends { justify-self: start; margin-top: 4px; }
.top-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.top-list li.empty { font-size: 14px; color: var(--ink3); }
.top-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  font: 800 14px var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid rgba(59, 39, 21, 0.25);
  border-radius: 12px;
  padding: 7px 10px 6px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.top-row:hover { border-color: var(--ink); }
.top-row span:nth-child(1) { color: var(--ink3); }
.top-row span:nth-child(n+3) { color: var(--ink2); font-size: 13px; }
.top-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.top-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.privacy { font-size: 13px; color: var(--ink2); }
.privacy summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.privacy p { margin: 6px 0 0; }
.privacy a { color: var(--teal); font-weight: 800; }
.avatar {
  display: inline-grid; place-items: center; flex: none;
  border-radius: 50%; overflow: hidden; line-height: 1;
  box-shadow: 0 0 0 2px var(--ink);
}
.avatar img { width: 100%; height: 100%; display: block; }
.avatar-pick { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.avatar-btn { padding: 2px; border-radius: 50%; border: 3px solid transparent; background: none; cursor: pointer; }
.avatar-btn[aria-pressed="true"] { border-color: var(--gold-dk); }
.avatar-btn:hover { border-color: var(--cream2); }

/* Oyuncu çipi, profil, arkadaş listesi */
.person-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 10px 3px 3px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.person-chip:hover { background: #fff; }
.pc-names { display: grid; min-width: 0; line-height: 1.15; }
.pc-names b, .pc-names span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-handle { font-size: 12px; color: var(--ink3); font-weight: 700; }
.status-pill { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1.5px solid var(--ink); }
.status-pill.playing { background: #dcebc5; color: var(--ink); }
.status-pill.online { background: #d6e9ec; color: var(--ink); }
.friend-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.friend-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.friend-row .person-chip { flex: 0 1 auto; }
.profile-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-nick { margin: 0; }
.who-names { display: grid; min-width: 0; line-height: 1.1; }
.who-names small { font-size: 14px; color: var(--ink2); }
.rel-note { align-self: center; font-weight: 800; color: var(--ink2); }
.vs-box, .pair-block { display: grid; gap: 6px; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }
.pair-h { margin: 0; font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--gold-dk); }
.pair-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pair-lbl { font-size: 13px; color: var(--ink2); min-width: 150px; }
.pair-val { font-size: 13px; font-weight: 800; }
.stats-block { display: grid; gap: 8px; }
.stats-body { display: grid; gap: 10px; }
.stats-body > .pair-block { margin-top: 4px; }
.stats-who { display: flex; align-items: center; gap: 10px; }
.met-when { font-size: 12px; color: var(--ink3); }
.killer-card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
.kc-guest { font-weight: 800; color: var(--ink2); }

/* Nasıl oynanır */
.rules-h { margin: 4px 0 0; font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--gold-dk); }
.rules-h span { font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--ink3); }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: start; }
.rule { border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }
.rule summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
}
.rule summary::-webkit-details-marker { display: none; }
.rule summary::after {
  content: '';
  margin-left: auto;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ink2);
  transform: rotate(-90deg);
  transition: transform 0.15s;
}
.rule[open] summary::after { transform: none; }
.rule[open] { background: #fff; }
.rule summary svg { width: 24px; height: 24px; flex: none; }
.rule summary b { font-weight: 800; }
.rule p { margin: 0; padding: 0 12px 10px 46px; font-size: 14px; line-height: 1.45; color: var(--ink2); }
.rule p b { color: var(--ink); }
.c-green { color: #3f7a26; font-weight: 800; }
.c-red { color: #b23a22; font-weight: 800; }
.c-blue { color: #2c6f9e; font-weight: 800; }
body.cb .c-green { color: #2c6f9e; }
body.cb .c-red { color: #b8600e; }
.howto { display: grid; gap: 8px; }
.howto-goal { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.howto-h { margin: 4px 0 0; font-size: 15px; font-weight: 800; }
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--ink2);
}
.controls > span { display: inline-flex; align-items: center; gap: 5px; }
.controls-note { flex-basis: 100%; font-size: 13px; color: var(--ink3); }

#perfBox {
  position: fixed;
  left: 50%;
  bottom: calc(10px + var(--sab));
  transform: translateX(-50%);
  font: 800 12px var(--body);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: rgba(255, 244, 220, 0.9);
  border: 2px solid var(--ink);
  padding: 2px 10px 1px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 5;
}

/* ---------- Dar ekranlar ---------- */
@media (max-width: 760px) {
  .board-box { width: 150px; padding: 7px 9px 5px; }
  #boardList li { font-size: 12px; grid-template-columns: 16px 1fr auto; }
  #minimap { width: 169px; height: 169px; }
  #feed { display: none; }
  .top-center { top: calc(122px + var(--sat)); width: min(320px, calc(100vw - 32px)); }
  #annMain { font-size: 32px; -webkit-text-stroke-width: 7px; }
  #annSub { font-size: 14px; }
  .rules { grid-template-columns: 1fr; }
  .menu-overlay { background: rgba(59, 39, 21, 0.35); }
  .menu-inner { margin: 0 auto; }
  #logoCanvas { width: 84px; height: 84px; }
  .hint { display: none; }
}
@media (max-width: 480px) {
  .chip { font-size: 12px; }
  .tagline { font-size: 13px; border-radius: 12px; padding: 2px 9px 1px; }
  .btn.pool { font-size: 15px; padding: 6px 14px 5px; }
  .opt-lbl { width: 100%; }
  .acc-stats { grid-template-columns: 1fr 1fr; }
  /* telefonda taç bilgisi mini haritanın ve açıklamasının altında, sağa yaslı */
  body.touch .top-center {
    top: calc(12px + var(--sat) + 172px + 44px);
    left: auto;
    right: calc(12px + var(--sar));
    transform: none;
    width: min(210px, calc(100vw - 190px));
    justify-items: end;
  }
  .crown-panel { padding: 6px 12px 7px; }
  .crown-title { font-size: 17px; }
  .crown-hint { display: none; }
  #announce { top: 35%; }
  body.touch #announce { top: 40%; }
}
@media (max-width: 400px) {
  h1 { font-size: 36px; -webkit-text-stroke-width: 7px; }
  #logoCanvas { width: 68px; height: 68px; }
  .btn { padding-left: 16px; padding-right: 16px; }
  .tiles { gap: 8px; }
  .tile-lbl { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #announce.show { animation: none; opacity: 1; }
  .crown-panel.over { animation: none; }
}

/* ---------- Yatay telefon (kısa ekran) ---------- */
@media (max-height: 500px) {
  .hud-tl { padding: 6px 10px; gap: 5px; }
  .board-box { width: 160px; padding: 6px 9px 4px; }
  #boardList li { font-size: 12px; line-height: 1.35; }
  #annMain { font-size: 28px; -webkit-text-stroke-width: 6px; }
  #annSub { font-size: 13px; }
  #announce { top: 36%; }
  #feed { display: none; }
  .top-center { top: calc(10px + var(--sat)); left: 50%; transform: translateX(-50%); width: min(300px, calc(100vw - 420px)); justify-items: center; }
  body.touch .top-center { top: calc(10px + var(--sat)); left: 50%; right: auto; transform: translateX(-50%); width: min(300px, calc(100vw - 380px)); justify-items: center; }
  .crown-panel { padding: 4px 12px 6px; }
  .crown-title { font-size: 16px; }
  .crown-hint { display: none; }
  #tDash { width: 78px; height: 78px; }
  #tSwing { width: 86px; height: 86px; font-size: 15px; }
  #tSpray, #tTrap { width: 62px; height: 62px; font-size: 13px; padding: 0; }
  #tDrop { font-size: 15px; padding: 7px 14px 6px; }
  body.touch #minimap { width: 190px; height: 190px; }
  body.touch .mm-legend { display: none; }
}

/* Yatay telefon ana menüsü: solda başlık ve Oyna, sağda kutucuklar */
@media (orientation: landscape) and (max-height: 500px) {
  .menu-overlay { background: rgba(59, 39, 21, 0.35); align-items: flex-start; padding: calc(10px + var(--sat)) calc(16px + var(--sar)) calc(14px + var(--sab)) calc(16px + var(--sal)); }
  .menu-inner {
    max-width: 900px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 10px;
    align-items: start;
  }
  .menu-inner > * { grid-column: 1; }
  .brand { grid-column: 1 / -1; gap: 10px; }
  .tiles, .friends-line, .net-line, .pool-row { grid-column: 2; }
  .play-card { grid-row: 2 / span 5; padding: 10px; gap: 8px; }
  .tiles { grid-row: 2; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 8px; }
  .tile { min-height: 64px; padding: 5px 4px 4px; }
  .tile-ico { width: 30px; height: 30px; }
  #skinPreview { width: 60px; height: 34px; }
  #logoCanvas { width: 52px; height: 52px; }
  h1 { font-size: 32px; -webkit-text-stroke-width: 6px; }
  .tagline { margin-top: 3px; font-size: 12px; }
  #nameInput { font-size: 16px; padding-top: 7px; padding-bottom: 6px; }
  .play-big { font-size: 24px; padding: 8px 16px 7px; }
  .net-line { font-size: 12px; }
  #custom .card.wide {
    max-width: min(940px, calc(100vw - 24px));
    display: grid;
    grid-template-columns: minmax(200px, 38%) minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
  }
  #custom .card > * { grid-column: 2; }
  #custom .card > .x-close { grid-column: auto; }
  #custom .card > h2 { grid-column: 1 / -1; margin-bottom: 4px; }
  #custom #customPreview {
    grid-column: 1;
    grid-row: 2 / span 20;
    position: sticky;
    top: 8px;
    height: min(300px, calc(100vh - 90px));
  }
  .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
  .rule summary { padding: 6px 10px; font-size: 14px; }
  .rule summary svg { width: 20px; height: 20px; }
  .rule p { padding: 0 10px 8px 40px; font-size: 13px; }
  .howto-goal { font-size: 13px; }
}

/* ---------- Yerleşim düzeltmeleri (yerlesim_denetimi.py ile bulunanlar) ---------- */
/* ızgara izleri içeriğin doğal genişliğine göre büyümesin (isim alanı + profil resmi kartı taşırıyordu) */
.play-card, .card, .center-overlay { grid-template-columns: minmax(0, 1fr); }
.play-card > *, .card > * { min-width: 0; }
.play-row { min-width: 0; }
#nameInput { width: 100%; }
.btn { max-width: 100%; overflow-wrap: anywhere; }
/* Görünüm kutucuğundaki önizleme kutucuğa göre küçülür */
#skinPreview { width: 100%; max-width: 76px; height: auto; aspect-ratio: 76 / 46; }
@media (max-width: 360px) {
  .tiles { gap: 6px; }
  .tile { padding-left: 2px; padding-right: 2px; border-radius: 16px; }
  .tile-lbl { font-size: 11.5px; }
}
/* dokunma alanları */
body.touch #volRange { height: 32px; }
.privacy summary { padding: 6px 0; }

/* Dikey telefon oyun ekranı: taç paneli, taç bilgisi ve ipucu tam genişlikte, mini harita satırının altında.
   Sol sütun (durum + liderler) ve mini harita dar ekranda birbirine binmesin. */
@media (orientation: portrait) {
  body.touch .top-center {
    top: calc(var(--sat) + 12px + var(--mm) + 50px);
    left: calc(12px + var(--sal));
    right: calc(12px + var(--sar));
    width: auto;
    max-width: 460px;
    margin: 0 auto;
    transform: none;
    justify-items: center;
  }
  body.touch { --mm: min(224px, calc(100vw - 36px - 140px - 8px)); }
  body.touch #minimap { width: var(--mm); height: var(--mm); }
  body.touch #minimap + .mm-legend { max-width: var(--mm); }
  body.touch .hud-tl { max-width: calc(100vw - var(--mm) - 44px); }
  body.touch .crown-title { white-space: normal; }
}
@media (orientation: portrait) and (max-width: 360px) {
  body.touch .board-box { width: 128px; }
  body.touch { --mm: min(224px, calc(100vw - 36px - 128px - 8px)); }
  .mm-legend { gap: 1px 5px; font-size: 9px; }
}

/* Kısa yatay telefon: mini harita dokunmatik düğmelerle çakışmasın; "Tacı bırak" düğmelerin yanında */
@media (orientation: landscape) and (max-height: 500px) {
  /* Önceki boyutun 1.3 katı; ama sağ alttaki tuş takımına (yüksekliği ~28 + 1.66 x B, B = js/ayak.js layout) inmeyecek kadar.
     İfade ve sohbet düğmeleri haritanın altında sola yaslı: hemen altlarındaki Kapan tırnağı sağ kenara yakın. */
  body.touch { --mmy: min(190px, calc((100vh - 290px) * 1.3), calc(100vh - (28px + 1.66 * clamp(70px, 20vh, 88px)) - 34px)); }
  body.touch #minimap { width: var(--mmy); height: var(--mmy); }
  body.touch .hud-tl { max-width: min(320px, 45vw); }
}

/* En küçük dikey telefonlar: durum kutucukları küçük ve yan yana; taç paneli varken ipucu yerine panelin kendi kısa açıklaması */
@media (orientation: portrait) and (max-width: 380px) {
  body.touch .chip { font-size: 10px; padding: 1px 6px 0 5px; }
  body.touch .chips { gap: 3px; }
}
@media (orientation: portrait) and (max-height: 700px) {
  body.touch .top-center:has(#crownPanel:not([hidden])) #tip { display: none; }
  body.touch .crown-panel .crown-hint { display: block; font-size: 11px; }
  body.touch .crown-panel { padding: 5px 10px 6px; }
  body.touch .crown-title { font-size: 15px; }
}
@media (orientation: landscape) and (max-height: 400px) {
  body.touch .top-center:has(#crownPanel:not([hidden])) #tip { display: none; }
}
@media (orientation: portrait) and (max-width: 380px) and (max-height: 700px) {
  body.touch .crown-panel .crown-hint { display: none; }
  body.touch .crown-title { font-size: 14px; }
  body.touch .crown-bar { margin: 3px 4px 2px; height: 8px; }
  body.touch #tDrop { font-size: 13px; padding: 6px 10px 5px; }
}

/* dokunmatik düğme yazıları dairenin içinde kalsın (yatayda "Kapan" taşıyordu) */
#tSpray, #tTrap, #tDash, #tSwing { padding: 0; }
/* Tam ekran düğmesi: dört köşe simgesi + kısa yazı */
.fs-ico::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9V3h6M15 3h6v6M21 15v6h-6M9 21H3v-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9V3h6M15 3h6v6M21 15v6h-6M9 21H3v-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "Nasıl oynanır"da oyundaki duraklat simgesi (emoji yerine): iki koyu çubuk */
.pause-kbd { display: inline-grid; place-items: center; min-width: 22px; }
.pause-kbd .pb-ico { display: block; width: 8px; height: 10px; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); }

/* Menü: tek başına zorluk seçimi (Oyna'nın altında) */
.diff-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.diff-lbl { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); margin-right: 2px; }
.diff-row .chip-btn { min-height: 32px; padding: 4px 14px 3px; font-size: 14px; }
@media (orientation: landscape) and (max-height: 500px) { .diff-row .chip-btn { min-height: 32px; padding: 3px 11px 2px; font-size: 13px; } }

/* Öneri penceresi ve menüdeki sade düğme */
.btn.fb-btn { font-size: 14px; background: transparent; box-shadow: none; border-style: dashed; }
.fb-list { margin: 0; padding-left: 24px; display: grid; gap: 8px; font-weight: 800; }
.fb-list textarea { vertical-align: top; width: 100%; resize: vertical; min-height: 52px; font: 700 15px/1.35 var(--body); color: var(--ink); background: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px; padding: 6px 10px; -webkit-user-select: text; user-select: text; }
.btn.fb-add { justify-self: start; font-size: 14px; padding: 4px 12px 3px; }
#adminLink { margin: 8px 0 0; }

/* Pencere alt çubuğu: "Kaydet ve çık" / "Kaydetmeden çık" sığdığı sürece tek satırda, çok darda alt alta */
.acc-save { gap: 8px; }
.acc-save .btn { flex: 1 1 auto; min-width: 0; font-size: 16px; padding: 8px 14px 7px; white-space: nowrap; }
.acc-save .btn:only-child { flex: 0 0 auto; }
@media (max-width: 440px) { .acc-save .btn { font-size: 15px; padding: 8px 11px 7px; } }
@media (max-width: 360px) { .acc-save .btn { font-size: 14px; padding: 7px 10px 6px; } }

/* Hortum düğmesiyle 4 dokunmatik düğme: küçük ekranlarda yer açılır */
/* dar dikey telefon: 2x2 ama küçük (toplam yükseklik eski 3 düğmeli düzenden az) */
@media (orientation: portrait) and (max-width: 400px) {
  body.touch .t-grid { gap: 9px; }
  body.touch #tDash { width: 76px; height: 76px; font-size: 18px; }
  body.touch #tSwing { width: 80px; height: 80px; font-size: 15px; }
  body.touch #tSpray, body.touch #tTrap { width: 60px; height: 60px; font-size: 13px; }
}
/* yatay kısa ekran: köşede büyük Atıl, çevresinde çeyrek yay üzerinde daha küçük Hortum (sol), Bırak (çapraz), Kapan (üst).
   "Tacı bırak" yayın soluna geçer, mini haritaya değmez. Yay 160x160: Atıl merkezi (124,124), 64 px'lik küçükler 92 birim uzakta
   (45 derece aralıkla aralarında ~6 px boşluk kalır). */
@media (orientation: landscape) and (max-height: 500px) {
  body.touch #touchBtns { display: flex; align-items: flex-end; gap: 10px; }
  body.touch.btns-left #touchBtns { flex-direction: row-reverse; }
  body.touch .t-grid { display: block; position: relative; width: 160px; height: 160px; }
  body.touch .t-grid > button { position: absolute; margin: 0; }
  body.touch #tDash { width: 72px; height: 72px; left: 88px; top: 88px; font-size: 18px; }
  body.touch #tSwing, body.touch #tSpray, body.touch #tTrap { width: 64px; height: 64px; font-size: 13px; }
  body.touch #tSwing { left: 0; top: 92px; }
  body.touch #tSpray { left: 27px; top: 27px; }
  body.touch #tTrap { left: 92px; top: 0; }
  body.touch.btns-left #tDash { left: 0; }
  body.touch.btns-left #tSwing { left: 96px; }
  body.touch.btns-left #tSpray { left: 69px; }
  body.touch.btns-left #tTrap { left: 4px; }
}

/* Yatay telefon ana menüsü: solda ana sütun (başlık, Oyna, kutucuklar), sağda ikincil sütun (arkadaşlar, havuz,
   tam ekran, öneri, rekor). İki sütun yüksekliği paylaştığı için kısa ekranlarda da alttan taşmaz. Arkadaki canlı dünya
   sağ tarafta kalır; soldan sağa açılan karartma yazıları okunur tutar. */
.menu-main, .menu-side { display: contents; }
@media (orientation: landscape) and (max-height: 780px) {
  .menu-overlay {
    background: linear-gradient(90deg, rgba(59, 39, 21, 0.5) 0, rgba(59, 39, 21, 0.32) 55%, rgba(59, 39, 21, 0) 80%);
    overflow-y: auto;
  }
  .menu-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: none;
    margin: 0;
  }
  .menu-main { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; flex: 0 1 min(400px, 52vw); min-width: 0; }
  .menu-side { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; flex: 0 1 min(230px, 32vw); min-width: 0; align-content: start; padding-top: 4px; }
  .menu-inner > *, .brand, .tiles, .friends-line, .net-line, .pool-row, .play-card { grid-column: 1; grid-row: auto; }
  .brand { gap: 8px; }
  h1 { font-size: 26px; -webkit-text-stroke-width: 5px; }
  .tagline { font-size: 11px; }
  #logoCanvas { width: 44px; height: 44px; }
  .play-card { padding: 8px 10px; gap: 6px; }
  .play-big { font-size: 22px; padding: 6px 14px 5px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .tile { min-height: 54px; padding: 4px 2px 3px; }
  .tile-lbl { font-size: 11px; }
  .tile-ico { width: 24px; height: 24px; }
  #skinPreview { width: 48px; height: 26px; }
  .pool-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .btn.pool { font-size: 13px; padding: 5px 11px 4px; text-align: center; }
  .net-line { font-size: 12px; }
  .friends-line { font-size: 12px; }
}

/* ana ekranda dokunulabilir satır ve profil resmi */
#menuForm.signed #nameInput, #meAvatar { cursor: pointer; }

/* ---------- İfadeler ---------- */
#emoteBtn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 4px; }
#emoteBtnIco { width: 26px; height: 26px; display: block; }
#emoteBtn.cool { opacity: 0.5; }
body.touch #emoteBtnIco { width: 26px; height: 26px; }
.emote-panel {
  z-index: 6;
  padding: 8px 10px 10px;
  display: grid;
  gap: 6px;
  pointer-events: auto;
}
.hud-tr .emote-panel { position: static; animation: dockPop 0.14s ease-out; }
.emote-panel[hidden] { display: none; }
.emote-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--display); font-size: 15px; color: var(--ink); }
.emote-keys { font-family: inherit; font-size: 11px; font-weight: 700; color: var(--ink2); }
.emote-grid { display: grid; grid-template-columns: repeat(4, auto); gap: 6px; }
.emote-cell {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 70px;
  padding: 4px 2px 3px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: 700 11px/1.1 "Baloo 2", system-ui, sans-serif;
  cursor: pointer;
  touch-action: none;
}
.emote-cell:hover { background: #fff; }
.emote-cell canvas { width: 46px; height: 46px; display: block; }
.emote-cell span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.emote-cell .ek { position: absolute; top: 2px; left: 6px; font-size: 10px; font-weight: 800; color: var(--ink2); }
body.touch .emote-cell .ek { display: none; }
body.touch .emote-cell { width: 58px; padding: 3px 1px 2px; font-size: 10px; }
body.touch .emote-cell canvas { width: 40px; height: 40px; }
@media (max-height: 500px) {
  .emote-panel { padding: 5px 8px 8px; gap: 4px; }
  .emote-head { font-size: 13px; }
  .emote-grid { gap: 4px; }
  body.touch .emote-cell { width: 54px; }
  body.touch .emote-cell span { display: none; }
  body.touch .emote-cell canvas { width: 44px; height: 44px; }
}

/* Kısa yatay ekran (telefon yan): pencereler daha az boşluk ve daha küçük başlıkla alttan taşmadan sığsın.
   Duraklat penceresinde dört düğme tek satırda. (yatay_menu.py ve ayarlar_tasma.py ile ölçülür.) */
@media (orientation: landscape) and (max-height: 500px) {
  .overlay:not(.menu-overlay) { padding-top: calc(10px + var(--sat)); padding-bottom: calc(10px + var(--sab)); }
  .card { padding: 14px 16px; gap: 9px; border-radius: 20px; }
  .card h2 { font-size: 27px; }
  .card > h2:first-of-type { padding-right: 40px; }
  .x-close { top: 8px; right: 8px; }
  .pause-note { font-size: 13px; margin-top: 0; }
  #pause .card { max-width: min(560px, 100%); }
  #pause .btn-row { flex-wrap: nowrap; gap: 8px; }
  #pause .btn-row .btn { flex: 1 1 auto; min-width: 0; font-size: 15px; padding: 7px 10px 6px; white-space: nowrap; }
  .btn.fb-btn { background: rgba(255, 244, 220, 0.88); }
}

/* Dar ekranda En iyiler satırı iki satır: üstte isim, altında sayılar (isim sıfıra sıkışmasın) */
@media (max-width: 440px) {
  .top-row { grid-template-columns: 26px repeat(3, auto); gap: 2px 10px; justify-content: stretch; }
  .top-row > span:nth-child(1) { grid-row: 1 / span 2; align-self: center; }
  .top-row > .top-who { grid-column: 2 / -1; grid-row: 1; }
  .top-row > span:nth-child(3) { grid-column: 2; grid-row: 2; }
  .top-row > span:nth-child(4) { grid-column: 3; grid-row: 2; }
  .top-row > span:nth-child(5) { grid-column: 4; grid-row: 2; justify-self: start; }
}

/* En kısa yatay ekranlarda (568x320 gibi) hesap çağrısının notu ve alanlar sıkışır */
@media (orientation: landscape) and (max-height: 400px) {
  .acc-cta-note { display: none; }
  .acc-cta { font-size: 14px; padding: 5px 12px 4px; }
  #nameInput { font-size: 15px; padding-top: 5px; padding-bottom: 4px; }
  .play-big { font-size: 20px; padding: 4px 14px 3px; box-shadow: 0 3px 0 var(--gold-dk), 0 3px 0 2px var(--ink); }
  .brand { gap: 6px; }
  h1 { font-size: 22px; -webkit-text-stroke-width: 4px; }
  #logoCanvas { width: 38px; height: 38px; }
  .tile { min-height: 46px; }
  .tile-ico { width: 20px; height: 20px; }
  .tile-lbl { font-size: 10px; line-height: 1.05; }
  .play-card { gap: 4px; }
  .menu-overlay { padding-top: calc(8px + var(--sat)); padding-bottom: calc(8px + var(--sab)); }
}

/* ---------- Ölüm ekranı: neden resmi + gövde + düğmeler ---------- */
.over-card { max-width: 460px; padding: 0 0 18px; gap: 0; overflow: hidden; }
.over-card > .over-art { display: block; }
.over-art { width: 100%; line-height: 0; background: var(--cream2); border-bottom: var(--line); }
.over-art svg { display: block; width: 100%; height: auto; }
.over-body { display: grid; gap: 10px; padding: 14px 20px 6px; min-width: 0; }
.over-body h2 { font-size: 34px; }
.over-body .over-cause { margin: 0; line-height: 1.3; }
.over-body .killer-card { margin-top: 0; }
.over-actions { display: grid; gap: 10px; padding: 8px 20px 0; }
.over-again { width: 100%; font-size: 22px; padding: 10px 16px 9px; }
/* son dakikada elenen oyuncu (LİSTE 18): doğma düğmeleri görünür ama kilitli, basınca nedeni yazar */
.btn.kilitli { opacity: 0.45; filter: grayscale(0.6); }
.over-kilit { margin: 0; font-size: 13.5px; font-weight: 800; color: #b23a2a; text-align: center; text-wrap: balance; }
.over-kilit[hidden] { display: none; }
.over-sub { display: flex; gap: 8px; }
.over-sub .btn { flex: 1 1 auto; font-size: 15px; padding: 8px 8px 7px; line-height: 1.1; min-width: 0; white-space: nowrap; text-align: center; }
@media (max-width: 360px) {
  .over-body { padding: 12px 14px 4px; }
  .over-actions { padding: 8px 14px 0; }
  .over-sub { gap: 6px; }
  .over-sub .btn { font-size: 14px; padding: 8px 4px 7px; }
}
@media (orientation: portrait) and (max-height: 620px) { .over-art svg { max-height: 118px; } .over-body { gap: 6px; padding-top: 10px; } .over-body h2 { font-size: 30px; } }
/* yatay geniş ekran: solda resim, sağda gövde ve düğmeler */
@media (orientation: landscape) and (min-width: 540px) {
  .over-card {
    max-width: min(820px, calc(100vw - 24px));
    grid-template-columns: minmax(230px, 40%) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    padding: 0;
  }
  .over-card > .over-art { grid-column: 1; grid-row: 1 / span 2; border-bottom: 0; border-right: var(--line); align-self: stretch; display: grid; }
  .over-art svg { height: 100%; }
  .over-card > .over-body { grid-column: 2; grid-row: 1; padding: 16px 20px 6px 18px; }
  .over-card > .over-actions { grid-column: 2; grid-row: 2; padding: 6px 20px 18px 18px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .over-card > .over-actions { padding-bottom: 14px; }
  .over-card > .over-body { padding-top: 10px; gap: 6px; }
  .over-body h2 { font-size: 26px; }
  .over-body .over-cause { font-size: 14px; }
  .over-body .stat { padding: 5px 10px; }
  .over-body .stat-v { font-size: 19px; }
  .over-again { font-size: 19px; padding: 7px 12px 6px; }
  .over-sub .btn { font-size: 14px; padding: 6px 4px 5px; }
  .over-actions { gap: 8px; }
}

/* ---------- Özel oda ---------- */
.room-note { background: #fbe3d8; cursor: pointer; }
.room-here { display: grid; gap: 6px; padding: 12px 14px; border: var(--line); border-radius: 16px; background: var(--paper); }
.room-here > * { margin: 0; min-width: 0; }
.room-code { font-family: var(--display); font-size: 20px; letter-spacing: 0.14em; color: var(--ink); }
.room-code.big { font-size: 34px; line-height: 1; }
.room-code-in { text-transform: uppercase; letter-spacing: 0.14em; }
.room-mine { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.room-rank { margin: 0; font-size: 13px; font-weight: 800; color: #a3311d; }
.room-rank.yes { color: #3f7a26; }
.room-det { border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); padding: 0 12px; }
.room-det > summary { cursor: pointer; font-weight: 800; padding: 9px 0 8px; }
.room-det[open] > summary { border-bottom: 2px dashed var(--sand-dk); margin-bottom: 8px; }
.room-grp { display: grid; gap: 10px; padding-bottom: 10px; }
.room-gh { margin: 4px 0 0; font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--gold-dk); }
.room-row { display: grid; gap: 2px; padding: 6px 8px 5px; border-radius: 10px; }
.room-row.chg { background: rgba(242, 177, 52, 0.22); }
.room-rh { display: flex; justify-content: space-between; gap: 10px; font-weight: 800; font-size: 14px; }
.room-rv { font-variant-numeric: tabular-nums; color: var(--ink2); white-space: nowrap; }
.room-row input[type=range] { width: 100%; accent-color: var(--gold-dk); }
body.touch .room-row input[type=range] { height: 32px; }
#roomMakeBtn { justify-self: start; }
@media (max-height: 780px) and (orientation: landscape) {
  #roomView .card { padding: 12px 16px; gap: 8px; }
  .room-code.big { font-size: 26px; }
}

/* Hesap rütbesi (js/rutbe.js) */
.rank-badge { display: inline-flex; flex: none; line-height: 0; }
.rank-badge svg { display: block; }
.rank-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank-line.detail {
  gap: 12px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
}
.rank-txt { display: grid; gap: 3px; min-width: 0; flex: 1; }
.rank-name { font: 800 15px/1.1 var(--body); color: var(--ink); letter-spacing: 0.01em; }
.rank-line.detail .rank-name { font: 400 19px/1.1 var(--display); }
.rank-sub { font: 700 12px/1.2 var(--body); color: var(--ink3); font-variant-numeric: tabular-nums; }
.rank-bar { height: 10px; border: 2px solid var(--ink); border-radius: 6px; background: var(--cream2); overflow: hidden; }
.rank-bar i { display: block; height: 100%; background: var(--gold); border-right: 2px solid var(--ink); }
.person-chip .rank-badge { margin-left: 2px; }
.top-row.rank-row { grid-template-columns: 34px 1fr auto auto; }
.rank-up {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  border: 2px solid var(--gold-dk);
  border-radius: 12px;
  background: #fff3c9;
  font: 800 15px var(--body);
  color: var(--ink);
  animation: rank-pop 0.5s ease-out;
}
@keyframes rank-pop { from { transform: scale(0.85); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rank-up { animation: none; } }
@media (max-width: 440px) {
  .top-row.rank-row { grid-template-columns: 26px repeat(2, auto); }
}

/* ---------- Sohbet (js/sohbet.js) ---------- */
.chat-ico { width: 20px; height: 20px; display: block; flex: none; }
.chat-menu-btn[aria-expanded="true"] { background: var(--gold); }
.chat-menu-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.chat-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font: 800 11px/1 var(--body);
  color: #fff;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.chat-badge[hidden] { display: none; }
.chat-panel {
  z-index: 7;
  left: calc(16px + var(--sal));
  bottom: calc(16px + var(--sab));
  width: min(380px, calc(100vw - 32px - var(--sal) - var(--sar)));
  max-height: min(560px, calc(100dvh - 32px - var(--sat) - var(--sab)));
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--cream);
  pointer-events: auto;
  animation: chatUp 0.16s ease-out;
}
.chat-panel[hidden] { display: none; }
@keyframes chatUp { from { transform: translateY(10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chat-panel { animation: none; } }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-head h2 { margin: 0; font: 400 21px/1.1 var(--display); color: var(--ink); }
.chat-x {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  font: 800 22px/1 var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}
.chat-x span { margin-top: -3px; }
.chat-list {
  flex: 1 1 auto;
  min-height: 90px;
  max-height: 230px;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 6px;
  background: var(--paper);
  border: 2px solid rgba(59, 39, 21, 0.25);
  border-radius: 12px;
}
.chat-empty { margin: 4px; font-size: 13px; color: var(--ink3); }
.chat-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 3px 6px; border-radius: 8px; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.chat-row.mine { background: rgba(47, 156, 149, 0.1); }
.chat-row.tagged { background: #fff3c9; box-shadow: inset 3px 0 0 var(--gold-dk); }
.chat-who { padding: 0; border: 0; background: none; font: 800 14px var(--body); color: var(--gold-dk); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.chat-who:disabled { color: var(--teal); text-decoration: none; cursor: default; }
.chat-text { color: var(--ink); }
.chat-tag { color: var(--teal); }
.chat-acts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px; }
.chat-acts .danger { border-color: var(--red); color: var(--red); }
.chat-note { margin: 0; padding: 4px 8px; font-size: 13px; font-weight: 700; color: var(--ink); background: #fff3c9; border-radius: 8px; }
.chat-to { display: flex; align-items: center; gap: 6px; font: 800 14px var(--body); color: var(--teal); }
.chat-to[hidden] { display: none; }
.chat-presets { display: flex; flex-wrap: wrap; gap: 5px; max-height: 150px; overflow-y: auto; padding: 2px; }
.chat-preset {
  padding: 4px 10px 3px;
  font: 700 13px/1.2 var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
}
.chat-preset:hover { background: #fff; }
.chat-preset:active { transform: translateY(1px); }
.chat-form { display: flex; gap: 6px; }
.chat-form[hidden] { display: none; }
.chat-form input { flex: 1; min-width: 0; font: 700 15px var(--body); padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); }
.chat-form .btn { padding: 5px 14px; font-size: 14px; }
.chat-rule { margin: 0; font-size: 12px; color: var(--ink3); line-height: 1.3; }
.chat-muted { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.chat-muted[hidden] { display: none; }
.chat-feed { display: grid; gap: 3px; }
.chat-feed[hidden] { display: none; }
.chat-feed-row {
  display: block;
  max-width: 100%;
  padding: 2px 8px;
  text-align: left;
  font: 700 12px/1.3 var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid rgba(59, 39, 21, 0.35);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-feed-row.tagged { background: #fff3c9; border-color: var(--gold-dk); }
.chat-feed-row b { color: var(--gold-dk); }
@media (max-width: 520px) {
  .chat-panel { left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); bottom: calc(8px + var(--sab)); width: auto; }
  .chat-list { max-height: 34dvh; }
}

/* ---------- Hamle tuş takımı: yay düzeni (js/ayak.js, LİSTE 11) ---------- */
/* hamle çipleri tuşların içine taşındı: durum çipleri (hız, hortum yemi, erime, gizli) kalır */
#swingChip, #dashChip, #sprayChip, #trapChip { display: none !important; }
#touchBtns, body.touch #touchBtns {
  position: fixed;
  left: var(--sal);
  right: auto;
  bottom: var(--sab);
  display: grid;
  gap: 8px;
  justify-items: start;
  pointer-events: none;
  z-index: 4;
}
body.touch #touchBtns { left: auto; right: var(--sar); justify-items: end; }
body.touch.btns-left #touchBtns { right: auto; left: var(--sal); justify-items: start; }
#touchBtns > * { pointer-events: auto; }
#ayak { display: block; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
#ayak .kp { cursor: pointer; }
#ayak .kp-ico { opacity: 0.55; }
#ayak .kp.ready .kp-ico { opacity: 1; }
#ayak .kp-glow, #ayak .kp-ph, #ayak .kp-hold, #ayak .kp-div, #ayak .kp-sico { pointer-events: none; }
#ayak .kp.full .kp-glow { opacity: 0.8; }
#ayak .kp.glow .kp-glow { opacity: 1; animation: ayGlow 0.9s ease-in-out infinite; }
#ayak .kp.locked { opacity: 0.55; }
#ayak .kp.hurt .kp-base { fill: #d7b3a4; }
#ayak .kp.busy { opacity: 0.8; }
#ayak text { font-family: var(--display); fill: var(--ink); paint-order: stroke; stroke: #fff6dc; stroke-width: 3px; pointer-events: none; }
#ayak .kp-key { display: none; font-family: var(--body); font-weight: 800; }
#ayak.desk .kp-key { display: inline; }
#ayak.desk .kp-ph2 { display: none; }
@keyframes ayGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Kısa yatay telefon: "Tacı bırak" büyük ayak tuş takımının üstüne değil soluna, alta yaslı (üstte mini harita var).
   Yukarıdaki genel #touchBtns kuralından sonra gelmeli, yoksa o kural bunu ezer. */
@media (orientation: landscape) and (max-height: 500px) {
  body.touch #touchBtns { display: flex; align-items: flex-end; gap: 0; }
  body.touch.btns-left #touchBtns { flex-direction: row-reverse; }
  body.touch #tDrop { margin: 0 8px 14px; }
}

/* Dikey telefon: "Tacı bırak" büyük ayak tuş takımının üstüne değil, kutusunun boş sol üst köşesine (çeyrek dairenin dışı)
   oturur; üstüne dizilince kısa ekranlarda taç paneline biniyordu. Sol altta sabit joystick olduğu için sola alınmaz. */
@media (orientation: portrait) {
  body.touch #tDrop { position: absolute; left: 0; top: 0; margin: 0; font-size: 13px; padding: 6px 9px 5px; border-radius: 12px; }
}
@media (orientation: portrait) and (max-width: 340px) {
  body.touch #tDrop { font-size: 11.5px; padding: 5px 6px 4px; }
}
/* Alçak masaüstü ekranı: büyüyen mini harita sağ üstteki liderlere ve üst ortadaki ipucuna yaklaşmasın */
@media (max-height: 700px) and (min-width: 761px) {
  body:not(.touch) #minimap { width: min(260px, calc(100vh - 370px)); height: min(260px, calc(100vh - 370px)); }
  body:not(.touch) #minimap + .mm-legend { max-width: min(260px, calc(100vh - 370px)); }
}

/* Maç sonu buzunda elenen oyuncunun izleme şeridi (js/buz.js, js/ui.js updateElim) */
.elim-bar {
  position: fixed; top: calc(12px + var(--sat)); left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  padding: 6px 8px 6px 14px; background: #dff3fb; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: var(--lift);
  font-family: var(--display); font-size: 15px; color: var(--ink);
}
.elim-bar[hidden] { display: none; }
.elim-bar .btn { padding: 4px 12px; font-size: 14px; }

/* ---------- Deneme alanı (test modu, LİSTE 15, js/deneme_ui.js) ---------- */
.dn-giris-kutu { max-width: 480px; }
.dn-genis { width: 100%; }
.dn-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dn-satir label { font-weight: 700; font-size: 14px; }
.dn-durum.bad { color: var(--red); font-weight: 700; }
.dn-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dn-liste-sat { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.dn-ac-btn {
  position: fixed;
  left: max(10px, var(--sal));
  top: calc(50% - 20px);
  z-index: 40;
  font: 800 14px var(--body);
  color: var(--ink);
  background: var(--gold-lt);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: var(--lift);
  cursor: pointer;
}
.dn-panel {
  position: fixed;
  left: max(8px, var(--sal));
  top: calc(8px + var(--sat));
  bottom: calc(8px + var(--sab));
  width: min(340px, calc(100vw - 16px));
  z-index: 45;
  display: flex;
  flex-direction: column;
  background: rgba(255, 244, 220, 0.97);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--lift);
  color: var(--ink);
  font: 600 14px var(--body);
}
.dn-bas { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 2px solid var(--cream2); }
.dn-bas b { font: 400 22px var(--display); }
.dn-fps { flex: 1; font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.dn-x { width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); font: 800 18px var(--body); cursor: pointer; }
.dn-govde { overflow-y: auto; padding: 8px 10px 12px; display: grid; gap: 8px; }
.dn-bolum { display: grid; gap: 8px; padding: 8px; border: 2px solid var(--cream2); border-radius: 12px; background: var(--paper); }
.dn-bolum > summary { font: 800 15px var(--body); cursor: pointer; }
.dn-hedef { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dn-bilgi { font-size: 12.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.dn-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dn-dugmeler[hidden] { display: none; }
.dn-etiket { font-size: 13px; font-weight: 800; }
.dn-kutu { display: flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.dn-kutu input { width: 18px; height: 18px; }
.dn-sel { font: 700 14px var(--body); color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: 10px; padding: 4px 6px; max-width: 170px; }
.dn-sayi { flex: 0 0 70px; }
.dn-panel .chip-btn { padding: 4px 9px; font-size: 13px; }
.dn-panel .chip-btn[aria-pressed="true"] { background: var(--gold); }
.dn-tehlike { color: var(--red); }
.dn-panel input[type="range"] { flex: 1 1 120px; accent-color: var(--gold-dk); }

/* ---------- Uygulamalı tur: Dede Hortum (LİSTE 15, js/ogretici.js) ---------- */
.og-kutu {
  position: fixed;
  top: calc(10px + var(--sat));
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 24px));
  z-index: 50;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.og-kutu[hidden] { display: none; }
.og-dede { flex: none; width: 96px; height: 96px; filter: drop-shadow(0 4px 0 rgba(59, 39, 21, 0.3)); }
.og-dede svg { width: 100%; height: 100%; display: block; overflow: visible; }
.og-dede-kucuk { width: 72px; height: 72px; }
.og-balon {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-top: 8px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--lift);
  padding: 8px 14px 10px;
  color: var(--ink);
  cursor: pointer;
}
.og-balon::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 26px;
  border: 11px solid transparent;
  border-right-color: var(--ink);
  border-left: 0;
}
.og-balon::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 28px;
  border: 9px solid transparent;
  border-right-color: var(--cream);
  border-left: 0;
}
.og-ust { display: flex; align-items: baseline; gap: 8px; }
.og-ad { font: 400 19px var(--display); color: var(--gold-dk); }
.og-ilerleme { margin-left: auto; font: 700 12px var(--body); color: var(--ink3); font-variant-numeric: tabular-nums; }
.og-metin { margin: 2px 0 0; font: 700 17px/1.35 var(--body); min-height: 2.7em; text-wrap: pretty; }
.og-istem {
  margin: 8px 0 0;
  padding: 6px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--gold-lt);
  font: 800 17px var(--body);
  text-align: center;
  animation: og-nabiz 0.7s ease-in-out infinite alternate;
}
.og-istem[hidden] { display: none; }
.og-alt { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.og-sayac { flex: 1; font: 800 14px var(--body); color: var(--ink2); font-variant-numeric: tabular-nums; }
.og-dugme {
  font: 800 14px var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 4px 12px;
  cursor: pointer;
}
.og-dugme[hidden] { display: none; }
.og-devam { background: var(--gold); }
.og-atla { font-size: 12.5px; color: var(--ink2); }
.og-bitir {
  position: absolute;
  right: 4px;
  bottom: -30px;
  font: 800 12.5px var(--body);
  color: var(--ink);
  background: rgba(255, 244, 220, 0.9);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 2px 10px;
  cursor: pointer;
}
.og-gorevde .og-metin { min-height: 0; }
.og-gorevde .og-dede { width: 72px; height: 72px; }
/* zaman durunca: kenarlarda soğuk bir hare */
.og-dondu {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(40, 70, 110, 0) 55%, rgba(40, 70, 110, 0.38) 100%);
  box-shadow: inset 0 0 0 4px rgba(242, 177, 52, 0.55);
}
.og-dondu[hidden] { display: none; }
/* Dede'nin hareketleri */
.og-hortum { transform-box: view-box; transform-origin: 60px 68px; }
.og-konusuyor .og-hortum { animation: og-sallan 0.34s ease-in-out infinite alternate; }
.og-goz { transform-box: fill-box; transform-origin: center; animation: og-kirp 4.6s infinite; }
.og-konusuyor .og-kas { animation: og-kas 0.68s ease-in-out infinite alternate; }
@keyframes og-sallan { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes og-kirp { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes og-kas { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@keyframes og-nabiz { from { transform: scale(1); } to { transform: scale(1.04); } }
/* tuş takımında parlayan tuş */
#ayak .kp.og-vurgu .kp-glow { opacity: 1 !important; fill: #ffd66b; animation: og-isik 0.6s ease-in-out infinite alternate; }
#ayak .kp.og-vurgu .kp-ring { stroke: #f27a1a; stroke-width: 5px; }
@keyframes og-isik { from { opacity: 0.55; } to { opacity: 1; } }
.og-kart { max-width: 500px; }
.og-kart-bas { display: flex; align-items: center; gap: 12px; }
.og-kart p { margin: 0; font-weight: 700; }
.og-dersler { display: flex; flex-wrap: wrap; gap: 8px; }
.og-dersler .btn { flex: 1 1 140px; }
.og-rehber { display: flex; gap: 12px; align-items: center; background: var(--paper); border: 2px solid var(--cream2); border-radius: 14px; padding: 10px; }
.og-rehber p { margin: 0 0 8px; font-weight: 700; }
.og-rehber-sag { flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .og-dede { width: 64px; height: 64px; }
  .og-gorevde .og-dede { width: 52px; height: 52px; }
  .og-metin { font-size: 15px; }
  .og-rehber { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .og-konusuyor .og-hortum, .og-goz, .og-konusuyor .og-kas, .og-istem, #ayak .kp.og-vurgu .kp-glow { animation: none; }
}
/* geniş ekranda balon üst ortadaki taç göstergesinin altında */
@media (min-width: 900px) and (min-height: 560px) {
  .og-kutu { top: calc(62px + var(--sat)); }
}
/* yatay telefon: alçak ekranda balon küçük */
@media (max-height: 500px) {
  .og-kutu { top: calc(4px + var(--sat)); width: min(600px, calc(100vw - 24px)); }
  .og-dede, .og-gorevde .og-dede { width: 54px; height: 54px; }
  .og-balon { margin-top: 2px; padding: 4px 10px 6px; border-width: 2.5px; }
  .og-balon::before { top: 16px; }
  .og-balon::after { top: 18px; }
  .og-ad { font-size: 15px; }
  .og-metin { font-size: 14px; line-height: 1.3; min-height: 0; }
  .og-istem { margin-top: 4px; padding: 3px 10px; font-size: 14px; }
  .og-alt { margin-top: 3px; }
  .og-dugme { padding: 2px 10px; font-size: 13px; }
  .og-bitir { bottom: -26px; }
}