/* style.css — lined-notebook paper look, ink-blue HUD (multiply blend), paper menu/pause/death cards. */

:root {
  --ink: #1a30c0;
  --red: #d02030;
  --paper: #f6f3e6;
  --paper-line: #c9d6f2;
  --mark: rgba(255, 214, 64, 0.55);
}

* { box-sizing: border-box; }

/* [hidden] boshqa display qoidalaridan (masalan .setting-row{display:contents}) yutqazib
   qolmasin — bir xil o'ziga xoslikda keyingi qoida g'alaba qiladi, shuning uchun !important */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  font-family: 'Patrick Hand', cursive;
  color: var(--ink);
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html.touch, html.touch body {
  height: 100dvh;
}

body {
  background-image:
    repeating-linear-gradient(var(--paper), var(--paper) 31px, var(--paper-line) 32px),
    linear-gradient(90deg, transparent 78px, var(--red) 79px, var(--red) 80px, transparent 81px);
  background-size: 100% 32px, 100% 100%;
}

#c {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- HUD ---------- */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  color: var(--ink);
  font-size: 22px;
  transition: opacity 0.2s ease;
}

#hud.nogame {
  opacity: 0;
  visibility: hidden;
}

.hud-tl, .hud-tr, .hud-bl, .hud-br {
  position: absolute;
  line-height: 1.4;
}

.hud-tl {
  top: 4%;
  left: 9%; /* clears the red margin line */
  transform: rotate(-1.5deg);
  font-size: 1.3em;
  font-weight: bold;
}

.hud-tr {
  top: 4%;
  right: 4%;
  text-align: right;
  transform: rotate(1deg);
}

#wave { font-size: 1.3em; font-weight: bold; }
#left { font-size: 0.85em; }

/* v3: in-game "now playing" line + a faint key hint, both under #left. */
#music-now {
  margin-top: 6px;
  font-size: 18px;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#music-hint {
  font-size: 0.8em;
  opacity: 0;
  margin-top: 2px;
  transition: opacity 0.3s ease;
}

#music-hint.show { opacity: 0.6; }

#osh {
  margin-left: 14px;
  font-size: 0.7em;
  font-weight: normal;
  vertical-align: middle;
}

.hud-bl {
  bottom: 5%;
  left: 9%;
  transform: rotate(1.5deg);
  width: 220px;
}

/* §G: MASALLIQ tally + qozon recipe line, small handwritten text above the health bar. */
#tally {
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 8px;
}

.tally-h {
  font-weight: bold;
  font-size: 0.95em;
  margin-bottom: 2px;
}

#recipe {
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 10px;
  opacity: 0.85;
}

.hp-label {
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 2px;
}

#hp {
  width: 200px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(246, 243, 230, 0.6);
}

#hpfill {
  height: 100%;
  width: 100%;
  background: var(--red);
  transition: width 0.15s ease;
}

#hpnum { font-size: 0.85em; margin-top: 2px; }

#ammo { margin-top: 8px; font-size: 1.1em; }
#ammo b { font-size: 1.2em; }

.hud-br {
  bottom: 5%;
  right: 4%;
  text-align: right;
  transform: rotate(-1deg);
}

#weapons { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
#weapons .w { opacity: 0.5; font-size: 0.95em; }
#weapons .w.active { opacity: 1; font-weight: bold; }
#weapons .w i { font-style: normal; border: 1px solid var(--ink); border-radius: 50%; padding: 0 5px; margin-right: 4px; }

#wname { font-size: 1.2em; font-weight: bold; margin-top: 4px; }
#whint { font-size: 0.8em; }

#banner {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -10px) rotate(-1deg);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#banner.show {
  opacity: 1;
  transform: translate(-50%, 0) rotate(-1deg);
}

#banner-title {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 4em;
  margin: 0;
}

#banner-sub {
  font-size: 1.3em;
  margin: 4px 0 0;
}

#hint {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#hint.show { opacity: 1; }

#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}

#crosshair .ch-h, #crosshair .ch-v {
  position: absolute;
  background: var(--ink);
  top: 50%;
  left: 50%;
}

#crosshair .ch-h { width: 16px; height: 2px; transform: translate(-50%, -50%) rotate(-1deg); }
#crosshair .ch-v { width: 2px; height: 16px; transform: translate(-50%, -50%) rotate(-1deg); }

#hitmarker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 3px solid var(--red);
  opacity: 0;
  transition: opacity 0.12s ease;
}

#hitmarker.show { opacity: 1; }

/* ---------- overlays: menu / pause / death ---------- */

#menu, #pause, #death {
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(26, 48, 192, 0.05), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(26, 48, 192, 0.05), transparent 40%),
    rgba(246, 243, 230, 0.4);
}

#menu:not([hidden]), #pause:not([hidden]), #death:not([hidden]) {
  display: flex;
}

#menu[hidden], #pause[hidden], #death[hidden] {
  display: none;
}

/* pauzadan ochilgan sozlamalar #pause ustidan chiqishi kerak */
#menu { z-index: 2; }

/* pauzadan "Sozlamalar" bosilganda: chap ustun yashiriladi, faqat sozlamalar/boshqaruv qoladi */
#menu.settings-only .menu-left { display: none; }
#menu.settings-only .menu-cols { justify-content: center; }
#menu.settings-only .menu-right { flex: 0 1 420px; }

.paper {
  background: var(--paper);
  color: var(--ink);
  padding: 12px 24px;
  border-radius: 4px 18px 4px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(26, 48, 192, 0.15);
  transform: rotate(-0.6deg);
  max-width: 640px;
  width: 90%;
  max-height: 96vh;
  overflow-y: auto;
  text-align: center;
}

#menu .paper { max-width: 760px; }

/* v4: chap ustun — sarlavha/kirish/musiqa/BOSHLASH, o'ng ustun — SOZLAMALAR/BOSHQARUV tablari;
   qator (flex row) tanlangani ekran baland bo'lmaganda (telefon landshaft) ham joy tejaladi. */
.menu-cols {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  text-align: left;
}

.menu-left { flex: 1 1 46%; min-width: 0; text-align: center; }
.menu-right { flex: 1 1 54%; min-width: 0; text-align: left; position: relative; }

#btn-settings-close { display: block; margin: 0 0 6px; font-size: 0.8em; padding: 4px 12px; }

.tabs { display: flex; gap: 6px; margin-bottom: 6px; }

.tab-btn {
  flex: 1;
  font-size: 0.85em;
  padding: 5px 8px;
  transform: none;
  box-shadow: none;
  border-radius: 10px 10px 3px 3px;
}
.tab-btn:hover, .tab-btn:active { transform: none; box-shadow: none; }
.tab-btn.active { background: var(--ink); color: var(--paper); }

.tab-panel { min-height: 0; }

/* v5: REYTING — o'zining kartasi (lb-me) + top-50 ro'yxat (lb-list), panel ichida aylanadi */
.lb-avatar { flex: 0 0 auto; display: inline-flex; }
.lb-avatar svg { display: block; width: 100%; height: 100%; }

#lb-me {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 6px 10px;
  margin: 0 0 8px;
  font-size: 0.9em;
}
#lb-me.lb-me--empty { flex-direction: column; align-items: stretch; text-align: center; gap: 6px; border-style: dashed; }
#lb-me .lb-avatar { width: 30px; height: 30px; }
/* ism o'z qatorida to'liq kenglikni oladi — rank/link bilan joy talashmaydi (M3) */
.lb-me-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lb-me-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; }
.lb-me-sub { display: flex; align-items: center; gap: 8px; font-size: 0.82em; opacity: 0.85; }
.lb-me-rank { white-space: nowrap; }
.lb-edit { font-size: 0.95em; }
.lb-hint { margin: 0; font-size: 0.8em; opacity: 0.75; }
.lb-open-btn { width: 100%; font-size: 0.92em; padding: 5px 16px; }

#lb-state { font-size: 0.85em; opacity: 0.75; padding: 10px 4px; text-align: center; }

#lb-list { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; }
.lb-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; font-size: 0.85em; border-radius: 6px; }
.lb-row--me { background: var(--mark); }
.lb-col-rank { flex: 0 0 auto; width: 1.8em; opacity: 0.8; }
.lb-row .lb-avatar { width: 22px; height: 22px; }
.lb-col-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; }
.lb-col-score { flex: 0 0 auto; }
.lb-col-wave { flex: 0 0 auto; opacity: 0.75; white-space: nowrap; }

.title {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 52px;
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* sarlavha bosh harflari balandligiga nisbatan taxminan 1.3x — SVG viewBox qozon chizig'iga
   tor moslashtirilgan (icons/icon.svg dagi kabi ortiqcha bo'sh joysiz), o'lcham shunchaki em bilan */
.title-doodle { width: 0.95em; height: 0.95em; flex-shrink: 0; transform: rotate(-6deg) translateY(0.05em); }

.title-underline { display: block; margin: -4px auto 4px; }

.intro {
  font-size: 0.95em;
  margin: 2px 0 8px;
  line-height: 1.2;
}

#best-line {
  font-size: 0.8em;
  margin: -4px 0 8px;
  opacity: 0.75;
}

/* v3: music opt-in speech bubble + playlist card, in the menu between the intro and BOSHLASH. */
#music-ask {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 6px 16px;
  margin: 0 0 8px;
  transform: rotate(-1deg);
  text-align: left;
  font-size: 0.85em;
}

#music-question:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
}

#music-question p { margin: 0; white-space: nowrap; }

#music-ask h4 {
  margin: 0 0 8px;
  font-size: 1.15em;
}

.music-ask-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#music-ask button {
  font-size: 0.92em;
  padding: 6px 16px;
}

#music-ask button.outline {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

#music-tracks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

@media (min-width: 480px) {
  #music-tracks { grid-template-columns: 1fr 1fr; }
}

.music-track {
  font-size: 0.82em;
  padding: 6px 10px;
  text-align: left;
  white-space: normal;
  line-height: 1.25;
  border-radius: 10px;
  transform: none;
}

.music-track:hover { transform: scale(1.02); }
.music-track:active { transform: scale(0.98); }

#music-any.wide {
  width: 100%;
  font-size: 1em;
}

/* "sticker" tugmalar: qog'oz fon, siyoh chegara, biroz og'gan, bosilganda siljiydi */
button {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.3em;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 6px 24px;
  cursor: pointer;
  transform: rotate(-1deg);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 3px 4px 0 rgba(26, 48, 192, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

button:hover { transform: rotate(-1deg) scale(1.03); }
button:active { transform: rotate(-1deg) translate(2px, 3px); box-shadow: 1px 2px 0 rgba(26, 48, 192, 0.3); }

/* asosiy chaqiruv tugmalari (BOSHLASH, Qayta boshlash, Davom etish) — siyohga to'la */
button.primary {
  color: #fff;
  background: var(--ink);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.25);
}
button.primary:active { box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.25); }

button.outline { background: transparent; box-shadow: none; border-width: 2px; }
button.outline:active { box-shadow: none; }

#btn-menu, .btn-danger { border-color: var(--red); color: var(--red); box-shadow: 3px 4px 0 rgba(208, 32, 48, 0.3); }
#btn-menu:active, .btn-danger:active { box-shadow: 1px 2px 0 rgba(208, 32, 48, 0.3); }

.button-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }

.controls-h {
  font-size: 0.95em;
  text-align: left;
  border-bottom: 1px solid rgba(26, 48, 192, 0.3);
  padding-bottom: 1px;
  margin: 4px 0 3px;
}

/* v3: BOSHQARUV — compact two-column key/action grid, row-major (11 items, last row single). */
.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
  text-align: left;
  font-size: 0.78em;
  margin-bottom: 4px;
}

.controls-grid div { white-space: nowrap; }

/* v4: SOZLAMALAR — 2 ustunli jadval, har bir sozlama o'z qatorida: chapda nom, o'ngda boshqaruv. */
.settings-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  row-gap: 9px;
  column-gap: 12px;
  text-align: left;
  font-size: 0.85em;
}

.setting-row { display: contents; }

.settings-label { font-weight: bold; text-align: right; white-space: nowrap; }

.settings-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-control input[type="range"] {
  width: 140px;
  accent-color: var(--ink);
}

#sens-val { width: 3.2em; text-align: right; }

.toggle-label { min-width: 3.6em; }

.link-btn {
  background: none;
  color: var(--ink);
  box-shadow: none;
  border: none;
  padding: 0;
  font-family: 'Patrick Hand', cursive;
  font-size: 1em;
  text-decoration: underline;
  cursor: pointer;
  transform: none;
}

.link-btn:hover { transform: none; opacity: 0.7; }
.link-btn:active { transform: none; opacity: 0.55; }

/* Grafika: Avto/Past/O'rta/Yuqori segmentli tanlov */
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.seg button {
  font-size: 0.8em;
  color: var(--ink);
  background: var(--paper);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 3px 10px;
  transform: none;
}
.seg button + button { border-left: 2px solid var(--ink); }
.seg button:hover, .seg button:active { transform: none; box-shadow: none; }
.seg button.active { background: var(--ink); color: var(--paper); }

/* ink-style toggle switch: hand-drawn pill + knob, ink blue when on, paper when off */
.ink-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.ink-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.ink-toggle-track {
  width: 40px;
  height: 20px;
  display: inline-block;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px 10px 999px 10px / 10px 999px 10px 999px;
  position: relative;
  transition: background 0.15s ease;
}

.ink-toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.15s ease, background 0.15s ease;
}

.ink-toggle input:checked + .ink-toggle-track {
  background: var(--ink);
}

.ink-toggle input:checked + .ink-toggle-track .ink-toggle-knob {
  transform: translateX(18px);
  background: var(--paper);
}

.ink-toggle input:focus-visible + .ink-toggle-track {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

#pause h2, #death h2 {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 3.5em;
  margin: 0 0 8px;
}

#death-stats {
  font-size: 1.2em;
  margin: 0 0 20px;
}

#death-tally {
  font-size: 1em;
  line-height: 1.5;
  margin: -8px 0 20px;
}

#death-online { font-size: 0.95em; margin: -8px 0 14px; }

/* o'qituvchi shtampidek: qizil, burchakka og'dirilgan "Yangi rekord!" belgisi */
#death-stamp {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--red);
  border: 3px solid var(--red);
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 0.9em;
  font-weight: bold;
  transform: rotate(10deg);
  opacity: 0.85;
}

#death .paper { position: relative; }

#death-share-hint {
  font-size: 0.8em;
  margin: 8px 0 0;
  opacity: 0.75;
}

#ios-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 4px 10px;
  margin: 0 0 8px;
  font-size: 0.75em;
  text-align: left;
}

#ios-hint-close {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--ink);
  padding: 0 4px;
  font-size: 1.1em;
  transform: none;
}

#ios-hint-close:hover, #ios-hint-close:active { transform: none; }

#btn-resume-touch { margin-top: 6px; }

/* v5: profil modali — #menu (z-index 2) ustida, #portrait-overlay (9999) ostida */
#profile-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background: rgba(26, 48, 192, 0.15);
}
#profile-modal:not([hidden]) { display: flex; }
#profile-modal[hidden] { display: none; }
#profile-modal .paper { max-width: 360px; max-height: 100dvh; text-align: left; }
#profile-modal h2 {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 2.4em;
  margin: 0 0 6px;
  text-align: center;
}
.modal-label { display: block; font-weight: bold; font-size: 0.85em; margin: 4px 0 2px; }
#profile-nickname {
  width: 100%;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.1em;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  margin: 0 0 8px;
}
#profile-nickname:focus { outline: 2px solid var(--red); }
#profile-stats { font-size: 0.82em; opacity: 0.8; margin: 0 0 6px; }
#profile-error { font-size: 0.85em; color: var(--red); margin: 4px 0; min-height: 1.1em; }

#avatar-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.avatar-opt {
  padding: 5px;
  border-width: 2px;
  border-radius: 12px;
  transform: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-opt:hover, .avatar-opt:active { transform: none; box-shadow: none; }
.avatar-opt svg { width: 30px; height: 30px; display: block; }
/* to'liq siyoh fon SVG rangini yashirib qo'yardi — qog'oz fon + qalinroq chegara + belgilagich tus */
.avatar-opt.selected { background: var(--mark); border-width: 3px; }

/* ---------- mobile / touch ---------- */

/* #hud ota-blendi (multiply) ostida farzandlarning o'z blend-rejimi hech qachon "chiqib
   ketolmaydi" (Chromium'da tekshirilgan) — shuning uchun telefonda butun HUD normal rejimga
   o'tadi, qog'oz-fon "halo" pastda shu tufayli ko'rinadi. */
html.touch #hud {
  font-size: 15px;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  mix-blend-mode: normal;
}

/* to'liq boshqaruv paneli bo'sh qolishi uchun sog'liq/o'q blokini yuqoriga, qurollarni
   o'ng yuqoriga ko'chiramiz — pastki chap/o'ng joystick va tugmalar uchun ochiq qoladi */
html.touch .hud-tl { top: 4px; left: 4px; transform: none; }
html.touch .hud-tr { top: 4px; right: 4px; }

/* SOG'LIQ qatori bitta qatorga: nom | tasma | son, resept chipi va o'q soni to'liq kenglikda */
html.touch .hud-bl {
  top: 44px;
  bottom: auto;
  left: 4px;
  width: 175px;
  transform: none;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
}
html.touch .hud-bl #recipe { grid-column: 1 / -1; }
html.touch .hud-bl .hp-label { grid-column: 1; margin: 0; }
html.touch .hud-bl #hp { grid-column: 2; width: 66px; }
html.touch .hud-bl #hpnum { grid-column: 3; margin: 0; }
html.touch .hud-bl #ammo { grid-column: 1 / -1; margin-top: 4px; }

/* qurollar ro'yxati bitta ixcham qatorga, hud-tr (to'lqin/dushman) tagidan yetarli joy bilan */
html.touch .hud-br {
  top: 82px;
  bottom: auto;
  right: 4px;
  transform: none;
}
html.touch #weapons { flex-direction: row; gap: 8px; }
html.touch #weapons .w { font-size: 0.85em; white-space: nowrap; }

html.touch #hp { width: 130px; }
html.touch #music-hint { display: none; }

/* daftar sahifasi ustida o'qilishi uchun HUD blok fonlariga qog'oz "halo" foni */
html.touch .hud-tl, html.touch .hud-tr, html.touch .hud-bl, html.touch .hud-br {
  background: rgba(246, 243, 230, 0.7);
  padding: 3px 8px;
  border-radius: 8px;
}

/* qurol nomi/maslahati o'ng pastdagi ro'yxatda takrorlanadi — telefonda bekor */
html.touch #wname, html.touch #whint { display: none; }

/* masalliq: uzun ro'yxat o'rniga bitta ixcham "qozon: N/M" chip + mini progress-bar (hud.js) */
html.touch #tally { display: none !important; }
.recipe-bar {
  display: inline-block;
  width: 46px;
  height: 6px;
  margin-left: 6px;
  vertical-align: middle;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(246, 243, 230, 0.8);
}
.recipe-bar > span { display: block; height: 100%; background: var(--ink); }

/* banner (to'lqin sarlavhasi) va countdown hint bir-biriga urilmasin deb ikkalasi ham
   yuqoriga, kichikroq va aniq oraliqqa ko'chiriladi */
html.touch #banner { top: 46px; }
html.touch #banner-title { font-size: 2.4em; }
html.touch #banner-sub { font-size: 1em; }
html.touch #hint { bottom: auto; top: 32%; }

#touch {
  position: fixed;
  inset: 0;
  touch-action: none;
  z-index: 50;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#touch[hidden] { display: none; }

#joyzone { position: absolute; left: 0; top: 0; width: 45%; height: 100%; }
#lookzone { position: absolute; right: 0; top: 0; width: 55%; height: 100%; }

#joybase {
  position: fixed;
  width: 96px;
  height: 96px;
  margin-left: -48px;
  margin-top: -48px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: rgba(246, 243, 230, 0.55);
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

#joybase.show { opacity: 1; }

#joyknob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.85;
  transform: translate(-50%, -50%);
}

/* hand-drawn sticker tugmalar: qog'oz fon + siyoh chegara, biroz og'gan */
.tk {
  position: absolute;
  font-family: 'Patrick Hand', cursive;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 0 3px 0 rgba(26, 48, 192, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  padding: 0;
}

.tk:active { filter: brightness(0.95); }

/* pastki o'ng burchakda to'plangan: HUD matni yuqorida, tugmalar pastda — bir-biriga urilmasin
   deb piksellarda joylashtirilgan (foiz balandlik bo'yicha ikkita nishon o'lchamda ishonchsiz) */
.tk-fire { right: 14px; bottom: 14px; width: 88px; height: 88px; font-size: 17px; font-weight: bold; transform: rotate(-3deg); }
.tk-jump { right: 118px; bottom: 14px; width: 60px; height: 60px; font-size: 12px; transform: rotate(2deg); }
.tk-aim { right: 14px; bottom: 112px; width: 56px; height: 56px; font-size: 11px; transform: rotate(-2deg); }
.tk-aim.active { background: var(--ink); color: var(--paper); }
.tk-reload { right: 118px; bottom: 104px; width: 56px; height: 56px; font-size: 10px; transform: rotate(3deg); }
.tk-weapon { right: 66px; bottom: 172px; width: 52px; height: 52px; font-size: 10px; transform: rotate(-2deg); }
.tk-pause {
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  font-size: 13px;
  border-radius: 50%;
}

#portrait-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}

#portrait-overlay p { font-size: 1.4em; margin: 0; }

@media (orientation: portrait) {
  html.touch #portrait-overlay { display: flex; }
}

/* past landshaft telefonlar (844x390, 667x375) — skrollsiz sig'ishi uchun paper/menu ixchamlashadi */
@media (max-height: 460px) {
  .paper { padding: 6px 18px; max-height: 94vh; }
  .title { font-size: 34px; }
  .title-underline { width: 140px; height: 10px; margin: -2px auto 2px; }
  .intro { font-size: 0.8em; margin: 0 0 4px; }
  #best-line { margin: -2px 0 4px; font-size: 0.72em; }
  #ios-hint { font-size: 0.65em; padding: 2px 8px; margin-bottom: 4px; }
  #music-ask { padding: 3px 12px; margin-bottom: 4px; }
  #music-ask h4 { margin-bottom: 4px; }
  #music-tracks { margin-bottom: 6px; }
  button { font-size: 1.05em; padding: 4px 18px; }
  .menu-cols { gap: 14px; }
  .tabs { margin-bottom: 4px; }
  .controls-grid { font-size: 0.72em; gap: 1px 10px; }
  .settings-grid { font-size: 0.72em; row-gap: 4px; }
  .settings-control input[type="range"] { width: 90px; }
  #pause h2, #death h2 { font-size: 2.2em; margin-bottom: 4px; }
  #death-online { font-size: 0.8em; margin: -4px 0 6px; }
  #lb-me { font-size: 0.78em; padding: 4px 8px; }
  #lb-list { max-height: 96px; }
  .lb-row { font-size: 0.75em; }
  #avatar-picker { gap: 4px; margin: 6px 0; }
  .avatar-opt svg { width: 22px; height: 22px; }
  #profile-modal .paper { padding: 6px 16px; }
  #profile-stats { font-size: 0.72em; }
}

/* katta ekranlar (desktop) — karta va matn kattaroq, bo'sh joy kamroq ko'rinadi */
@media (min-width: 860px) and (min-height: 560px) {
  #menu .paper { max-width: 980px; padding: 26px 44px; }
  .paper { max-width: 720px; }
  .title { font-size: 76px; }
  .intro { font-size: 1.2em; }
  #best-line { font-size: 1em; }
  .menu-cols { gap: 44px; }
  .tabs { margin-bottom: 14px; }
  .tab-btn { font-size: 1.1em; padding: 10px 16px; }
  .controls-grid, .settings-grid { font-size: 1.05em; row-gap: 14px; }
  .settings-control input[type="range"] { width: 170px; }
  .seg button { font-size: 1em; padding: 7px 18px; }
  button { font-size: 1.5em; padding: 10px 34px; }
  #pause h2, #death h2 { font-size: 4.2em; }
  #death-stats { font-size: 1.4em; }
  #lb-list { max-height: 320px; }
  .lb-row, #lb-me { font-size: 1em; }
}