/* Hudud: menyu kit mavzusiga bo'ysunadi (qorong'i/yorug'), o'yin maydoni doim qorong'i. Telefon birinchi: safe-area, tugma ≥ 44 px, brauzer imo-ishoralari o'chiq. */
html, body { overscroll-behavior: none; }
body.ingame { overflow: hidden; position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.ingame .gu-bar, body.ingame #menu { display: none; }

/* ---- menyu */
.hm { max-width: 560px; margin: 0 auto; padding: 14px max(14px, env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); display: grid; gap: 12px; }
.hm-hero { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #0b0d12; aspect-ratio: 1200 / 584; }
.hm-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-start { display: grid; gap: 10px; }
.hm-h { margin: 2px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.hm-lead { margin: 0; color: var(--mut); font-size: 15px; line-height: 1.45; }
.hm-name input { width: 100%; font-weight: 650; }
.hm-play { min-height: 54px; font-size: 18px; border-radius: 14px; }
.hm-invite { margin: 0; padding: 9px 12px; border-radius: 11px; background: var(--glow); color: var(--fg); font-size: 14px; font-weight: 600; }
.hm-online { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--mut); font-size: 13px; line-height: 1.35; }
.hm-online i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.hm-best { margin: 0; color: var(--fg); font-size: 13.5px; font-weight: 600; }
.hm-rules h3, .hm-lb h3 { margin: 0; }
.hm-rules ol { margin: 10px 0 0; padding: 0 0 0 20px; display: grid; gap: 7px; font-size: 14.5px; line-height: 1.4; }
.hm-rules li::marker { color: var(--mut); font-variant-numeric: tabular-nums; font-size: 13px; }
.hm-keys { margin: 10px 0 0; color: var(--mut); font-size: 13px; }
.hm-lb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.hm-lb-head h3 { flex: 1 0 100%; }
.hm-note { margin: 8px 0 0; color: var(--mut); font-size: 12.5px; }
.hu-link { padding: 9px 12px; border-radius: 10px; background: var(--sur2); color: var(--fg) !important; font-size: 14px; font-weight: 600; word-break: break-all; user-select: all; -webkit-user-select: all; }
/* telefon: hero, boshlash, qoidalar, reyting; keng ekran: ikki ustun */
.hm-col { display: contents; }
.hm-hero { order: 1; } .hm-start { order: 2; } .hm-rules { order: 3; } .hm-lb { order: 4; } #sponsors { order: 5; } .gu-foot { order: 6; }
@media (min-width: 960px) {
  .hm { max-width: 1040px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; column-gap: 18px; }
  .hm-col { display: grid; gap: 12px; align-content: start; }
  #sponsors, .gu-foot { grid-column: 1 / -1; }
}
@media (max-height: 480px) { /* telefon yotiq: tugma darhol ko'rinsin */
  .hm-hero { display: none; }
}

/* ---- o'yin: doim qorong'i */
#game { position: fixed; inset: 0; overflow: hidden; background: #07080c; color: #eef0f5; touch-action: none; color-scheme: dark;
  --bg: #0b0d12; --sur: #13161e; --sur2: #1b1f2a; --sur3: #252a38; --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.16); --fg: #eef0f5; --mut: #9aa3b5; --glow: rgba(25,211,197,.14); }
#cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#hud { position: absolute; inset: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
.h-left { position: absolute; left: max(8px, env(safe-area-inset-left)); top: max(6px, env(safe-area-inset-top)); display: grid; gap: 4px; justify-items: start; }
.h-btns { display: flex; gap: 2px; margin-left: -4px; }
.h-ib { pointer-events: auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: rgba(238,240,245,.72); cursor: pointer; }
.h-ib svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.h-ib:hover { color: #fff; background: rgba(255,255,255,.07); }
.h-me { display: flex; align-items: baseline; gap: 8px; text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.h-me b { font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.h-me span { font-size: 12.5px; font-weight: 600; color: rgba(238,240,245,.82); white-space: nowrap; }
.h-map { position: relative; width: 88px; height: 88px; border-radius: 9px; overflow: hidden; background: rgba(9,11,15,.72); box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.h-map canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#mmView { position: absolute; left: 0; top: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 2px; box-sizing: border-box; }
#mmMe { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.h-top { position: absolute; right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); margin: 0; padding: 5px 7px; list-style: none; width: 160px; border-radius: 10px; background: rgba(9,11,15,.58); font-size: 12px; line-height: 1.25; }
.h-top li { display: grid; grid-template-columns: 15px 8px minmax(0, 1fr) auto auto; align-items: center; column-gap: 4px; padding: 2px 0; color: rgba(238,240,245,.86); }
.h-top li.me { color: #fff; font-weight: 700; }
.h-top .i { color: rgba(238,240,245,.5); text-align: right; font-size: 11px; }
.h-top .c { width: 8px; height: 8px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.h-top .n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.h-top .v { color: rgba(238,240,245,.72); font-size: 11.5px; padding-left: 4px; }
.bot { display: inline-block; margin-left: 2px; padding: 0 3px; border-radius: 3px; font-size: 8.5px; font-weight: 800; line-height: 12px; letter-spacing: .03em; color: #0b0d12; background: rgba(238,240,245,.72); vertical-align: 1px; }
.h-feed { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(86vw, 420px); display: grid; gap: 3px; justify-items: center; }
.dead .h-feed, .dead .h-hint { display: none; }
.h-feed div { padding: 3px 10px; border-radius: 8px; background: rgba(9,11,15,.62); font-size: 12px; line-height: 1.3; color: rgba(238,240,245,.88); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; animation: gu-rise .18s ease; }
.h-feed div.mine { color: #fff; font-weight: 700; box-shadow: 0 0 0 1px rgba(255,255,255,.26); }
.h-feed svg { width: 11px; height: 11px; vertical-align: -1px; margin: 0 4px; opacity: .75; }
.h-conn { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(9,11,15,.82); font-size: 13px; font-weight: 600; white-space: nowrap; }
.h-conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: hu-pulse 1s infinite; }
@keyframes hu-pulse { 50% { opacity: .25; } }
.h-hint { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); width: min(84vw, 380px); padding: 9px 14px; border-radius: 11px; background: rgba(9,11,15,.78); text-align: center; font-size: 14px; font-weight: 600; line-height: 1.35; animation: gu-rise .25s ease; }

/* ---- o'lim ekrani */
.over { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 12px max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: linear-gradient(to top, rgba(7,8,12,.72), rgba(7,8,12,.18) 62%); animation: gu-fade .22s ease; touch-action: manipulation; }
.over-card { width: min(440px, 100%); padding: 16px; border-radius: 18px; background: rgba(19,22,30,.96); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 50px rgba(0,0,0,.5); animation: gu-rise .24s cubic-bezier(.2,.8,.3,1); }
.over-card h2 { margin: 0 0 10px; font-size: 18px; font-weight: 750; letter-spacing: -.012em; line-height: 1.28; }
.over-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.over-stats > div { padding: 8px 8px 7px; }
.over-stats small { font-size: 11px; line-height: 1.2; min-height: 2.4em; }
.over-stats b { font-size: 18px; white-space: nowrap; }
.over-note { margin: 10px 0 0; color: var(--mut); font-size: 13px; }
.over-note:empty { display: none; }
.over-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.over-acts .gu-btn { padding: 0 10px; white-space: nowrap; }
.over-again { grid-column: 1 / -1; min-height: 54px; font-size: 18px; border-radius: 14px; }
@media (max-height: 480px) { /* yotiq telefon: ixcham, tugma o'ngda */
  .over { align-items: center; }
  .over-card { width: min(620px, 100%); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 14px; padding: 12px 14px; }
  .over-card h2 { grid-column: 1 / -1; margin-bottom: 8px; font-size: 16px; }
  .over-note { grid-column: 1; margin-top: 6px; font-size: 12.5px; }
  .over-stats { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .over-stats small { min-height: 0; }
  .over-stats > div { padding: 5px 8px; }
  .over-acts { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; align-content: center; }
  .over-again { min-height: 48px; }
  .h-map { width: 72px; height: 72px; }
  .h-me b { font-size: 20px; }
  .h-top { width: 172px; font-size: 11.5px; padding: 3px 6px; }
  .h-top li { padding: 1px 0; }
  .h-btns .h-ib { width: 40px; height: 40px; }
}
@media (min-width: 900px) and (min-height: 560px) {
  .over { align-items: center; }
  .h-left { left: 16px; top: 12px; gap: 6px; }
  .h-map { width: 148px; height: 148px; }
  .h-me b { font-size: 30px; }
  .h-me span { font-size: 14px; }
  .h-top { right: 16px; top: 16px; width: 214px; padding: 8px 10px; font-size: 13.5px; }
  .h-top li { grid-template-columns: 18px 10px minmax(0, 1fr) auto auto; column-gap: 6px; padding: 2.5px 0; }
  .h-top .c { width: 10px; height: 10px; }
  .h-top .i, .h-top .v { font-size: 12.5px; }
  .h-feed { bottom: 18px; }
  .h-feed div { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .h-conn i { animation: none; } }