/* /2048/style.css — sokin ranglar: neytral kulrangdan firuza orqali kahrabogacha (OKLCH da tenglashtirilgan, har son uchun matn kontrasti ≥ 4.5); ikkala mavzu alohida loyihalangan.
   Toshlar faqat transform bilan harakatlanadi. O'lchamlar (--p qadam, --g oraliq, --t tosh, --r radius, --bw taxta) app.js fit() dan: butun piksel, shuning uchun raqamlar xira emas. */
:root { --p: 80px; --g: 10px; --t: 70px; --r: 8px; --bw: 330px; --n: 4; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; top: 0; right: 0; bottom: 0; left: 0; touch-action: none; }
.gu-modal, .gu-modal * { touch-action: pan-y; }
:root[data-theme="dark"] { --well: #161a22; --well-line: rgba(255,255,255,.06); --cell: #1e232d; --dim: rgba(11,13,18,.76); --hi: rgba(255,255,255,.08); --lo: rgba(0,0,0,.16); --drop: rgba(0,0,0,.34); --warn: #e0a84a; --go: #2fa597; --go-ink: #04201e; }
:root[data-theme="light"] { --well: #cdd2da; --well-line: rgba(15,20,30,.06); --cell: #dde0e6; --dim: rgba(244,245,248,.8); --hi: rgba(255,255,255,.55); --lo: rgba(20,30,50,.07); --drop: rgba(30,40,60,.17); --warn: #8a5e08; --go: #137b79; --go-ink: #ffffff; }

/* joylashuv: telefon portret (asosiy) */
#app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
.gu-bar { position: relative; grid-column: 1; grid-row: 1; }
#hud { grid-column: 1; grid-row: 2; width: var(--bw); max-width: 100%; justify-self: center; display: grid; gap: 8px; padding-top: 8px; }
#stage { grid-column: 1; grid-row: 3; min-height: 0; display: grid; place-items: center; padding: 4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); }
#ctl { grid-column: 1; grid-row: 4; width: var(--bw); max-width: 100%; justify-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px 0 calc(10px + env(safe-area-inset-bottom)); }
#ctl .gu-btn { min-height: 48px; padding: 0 10px; white-space: nowrap; }
#btnUndo b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--sur2); font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
#keys { display: none; }
#mini { display: none; }

#modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.7fr); width: 100%; }
#modes button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; padding: 0 4px; font-variant-numeric: tabular-nums; }
#modes svg { width: 15px; height: 15px; flex: none; }
#modes button { position: relative; }
#modes button::before { content: ""; position: absolute; top: -3px; bottom: -3px; left: 0; right: 0; } /* bosish maydoni 44 px: panel ichki chekkasigacha */
#modes .fresh::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--acc-text); }
#scores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#scores, #status { transform: translateY(var(--lift, 0)); } /* baland telefonda ochko paneli taxtaga yopishib turadi: bo'sh joy tepada va pastda teng */
.sc { position: relative; background: var(--sur); border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px 7px; min-width: 0; }
.sc small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); line-height: 1.3; }
.sc b { display: block; font-size: 25px; line-height: 1.12; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc b.long { font-size: 21px; line-height: 1.34; } .sc b.xlong { font-size: 17px; line-height: 1.65; } .sc b.xxlong { font-size: 14px; line-height: 2; }
.plus { position: absolute; right: 12px; top: 7px; font-weight: 750; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--acc-text); pointer-events: none; }
#status { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 18px; font-size: 12.5px; line-height: 18px; color: var(--mut); white-space: nowrap; overflow: hidden; }
#status span { overflow: hidden; text-overflow: ellipsis; }
#status svg { width: 13px; height: 13px; flex: none; }
#status.warn { color: var(--warn); }

/* taxta */
#board { position: relative; width: var(--bw); height: var(--bw); border-radius: calc(var(--r) + var(--g) * .7); background: var(--well); box-shadow: inset 0 0 0 1px var(--well-line); }
#cells, #tiles { position: absolute; top: calc(var(--g) / 2); right: calc(var(--g) / 2); bottom: calc(var(--g) / 2); left: calc(var(--g) / 2); }
#cells { display: grid; grid-template-columns: repeat(var(--n), var(--p)); grid-auto-rows: var(--p); }
.cell { margin: calc(var(--g) / 2); border-radius: var(--r); background: var(--cell); }
.tile { position: absolute; left: 0; top: 0; width: var(--p); height: var(--p); padding: calc(var(--g) / 2); will-change: transform; pointer-events: none; contain: layout style; }
.face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--r); font-weight: 750; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; box-shadow: inset 0 1px 0 var(--hi), inset 0 -1px 0 var(--lo), 0 1px 2px var(--drop); }
.face sup { font-size: .62em; vertical-align: .46em; line-height: 0; margin-left: .04em; }
.d1, .d2 { font-size: min(calc(var(--t) * .47), 60px); }
.d3 { font-size: min(calc(var(--t) * .41), 54px); }
.d4 { font-size: calc(var(--t) * .325); }
.d5 { font-size: calc(var(--t) * .27); letter-spacing: -.03em; }
.d6 { font-size: calc(var(--t) * .232); letter-spacing: -.035em; }
.d7 { font-size: calc(var(--t) * .3); line-height: 1.04; letter-spacing: -.03em; text-align: center; }
.dx { font-size: calc(var(--t) * .34); letter-spacing: -.02em; }

/* sonlar: neytral → firuza → kahrabo */
[data-theme="dark"] .e1 { background-color: #323740; color: #f4f6f8; }
[data-theme="dark"] .e2 { background-color: #3b454f; color: #f4f6f8; }
[data-theme="dark"] .e3 { background-color: #38515d; color: #f4f6f8; }
[data-theme="dark"] .e4 { background-color: #2f606a; color: #f4f6f8; }
[data-theme="dark"] .e5 { background-color: #217075; color: #f4f6f8; }
[data-theme="dark"] .e6 { background-color: #137b79; color: #f4f6f8; }
[data-theme="dark"] .e7 { background-color: #309588; color: #0d1316; }
[data-theme="dark"] .e8 { background-color: #63a080; color: #0d1316; }
[data-theme="dark"] .e9 { background-color: #93a771; color: #0d1316; }
[data-theme="dark"] .e10 { background-color: #c1ac5a; color: #0d1316; }
[data-theme="dark"] .e11 { background-color: #ebac39; color: #0d1316; }
[data-theme="dark"] .e12 { background-color: #e69527; color: #0d1316; }
[data-theme="dark"] .e13 { background-color: #d77d29; color: #0d1316; }
[data-theme="dark"] .e14 { background-color: #a85d30; color: #f4f6f8; }
[data-theme="dark"] .e15 { background-color: #8f4f2e; color: #f4f6f8; }
[data-theme="dark"] .e16 { background-color: #754029; color: #f4f6f8; }
[data-theme="dark"] .e17 { background-color: #573324; color: #f4f6f8; }
[data-theme="light"] .e1 { background-color: #f9fafc; color: #121a1f; }
[data-theme="light"] .e2 { background-color: #e8eef2; color: #121a1f; }
[data-theme="light"] .e3 { background-color: #cae1e7; color: #121a1f; }
[data-theme="light"] .e4 { background-color: #a7d6dc; color: #121a1f; }
[data-theme="light"] .e5 { background-color: #7ec8ca; color: #121a1f; }
[data-theme="light"] .e6 { background-color: #53b5b2; color: #121a1f; }
[data-theme="light"] .e7 { background-color: #309e93; color: #121a1f; }
[data-theme="light"] .e8 { background-color: #69a686; color: #121a1f; }
[data-theme="light"] .e9 { background-color: #99ae76; color: #121a1f; }
[data-theme="light"] .e10 { background-color: #c9b259; color: #121a1f; }
[data-theme="light"] .e11 { background-color: #efad32; color: #121a1f; }
[data-theme="light"] .e12 { background-color: #e68f1b; color: #121a1f; }
[data-theme="light"] .e13 { background-color: #d4741e; color: #121a1f; }
[data-theme="light"] .e14 { background-color: #b25d25; color: #ffffff; }
[data-theme="light"] .e15 { background-color: #924924; color: #ffffff; }
[data-theme="light"] .e16 { background-color: #753b20; color: #ffffff; }
[data-theme="light"] .e17 { background-color: #532c1a; color: #ffffff; }
.face.e17 { box-shadow: inset 0 0 0 1px rgba(235,172,57,.5), 0 1px 2px var(--drop); } /* 131072 va undan kattasi: ingichka kahrabo halqa */

/* taxta ustidagi oyna: o'yin tugadi, 2048, Kunlik */
#over { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; display: grid; place-items: center; padding: 12px; border-radius: inherit; background: var(--dim); -webkit-backdrop-filter: blur(7px) saturate(.85); backdrop-filter: blur(7px) saturate(.85); text-align: center; overflow: hidden; }
.ov { display: grid; gap: 9px; width: min(100%, 340px); }
.ov-label { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
.ov-score { font-size: clamp(40px, calc(var(--bw) * .15), 66px); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ov-title { font-size: clamp(25px, calc(var(--bw) * .085), 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.ov-text { margin: 0; font-size: 14px; line-height: 1.38; color: var(--mut); }
.ov-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: 13.5px; line-height: 19px; color: var(--mut); font-variant-numeric: tabular-nums; }
.ov-line b { color: var(--fg); font-weight: 700; }
.ov-rank { min-height: 18px; font-size: 13px; line-height: 18px; color: var(--mut); font-variant-numeric: tabular-nums; }
.ov-rank b { color: var(--fg); font-weight: 700; }
.ov-rank.warn { color: var(--warn); }
.ov-rank button { display: block; margin: 2px auto 0; padding: 0; border: 0; background: none; color: var(--acc-text); font-weight: 650; cursor: pointer; }
.ov-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 1px; }
.ov-acts .gu-btn { min-height: 44px; padding: 0 6px; font-size: 13.5px; gap: 5px; background: var(--sur); white-space: nowrap; min-width: 0; }
.ov-acts .gu-btn b { font-weight: 750; }
.narrow .ov-acts svg { display: none; }
.narrow .ov-acts .gu-btn { padding: 0 3px; font-size: 13px; }
#board.narrow #over { padding: 8px; }
.narrow .ov { gap: 7px; }
.narrow .ov-score { font-size: 38px; }
.ov-score.long, .narrow .ov-score.long { font-size: clamp(27px, calc(var(--bw) * .095), 44px); line-height: 1.2; }
.narrow .ov .primary { min-height: 44px; font-size: 15px; margin-top: 2px; }
.gu-btn.primary { background: var(--go); color: var(--go-ink); }
.ov .primary { min-height: 48px; font-size: 16px; margin-top: 3px; }
#app .gu-btn:focus-visible, #app .gu-seg button:focus-visible, #app .gu-tb:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.ov-next { font-size: 12.5px; color: var(--mut); font-variant-numeric: tabular-nums; }

/* oyna ichidagi panel: reyting, statistika, qoidalar */
.sheet { display: grid; gap: 12px; }
.sheet .gu-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.sheet .gu-seg button { padding: 0 4px; min-height: 40px; }
.pane { min-height: 330px; display: grid; gap: 10px; align-content: start; }
.pane p { margin: 0; color: var(--mut); font-size: 14px; }
.pane p b { color: var(--fg); }
.pane h3 { margin: 4px 0 0; font-size: 14.5px; }
.rows { display: grid; }
.lb td { padding: 6px 5px; }
.lb .t { width: 1%; white-space: nowrap; text-align: right; }
.mt { display: inline-block; min-width: 36px; padding: 2px 5px; border-radius: 5px; font-size: 11px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.lb .nm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--mut); }
.me-row b { color: var(--fg); }

/* ?shot=…&ui=0 — faqat taxta (muqova) */
.bare .gu-bar, .bare #hud, .bare #ctl, .bare #mini { display: none !important; }
.bare #app { display: block; background: var(--bg); overflow: hidden; }
.bare #stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0; }

/* telefon landscape: taxta butun balandlikda, panellar yonda */
@media (orientation: landscape) and (max-height: 560px) {
  #app { grid-template-columns: minmax(0, 1fr) clamp(290px, 40vw, 380px); grid-template-rows: auto auto minmax(0, 1fr); }
  .gu-bar { grid-column: 2; grid-row: 1; height: 44px; padding-top: 0; padding-left: 4px; border-bottom: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #stage { grid-column: 1; grid-row: 1 / -1; padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  #hud { grid-column: 2; grid-row: 2; width: auto; justify-self: stretch; padding: 0 max(10px, env(safe-area-inset-right)) 0 4px; gap: 6px; }
  #scores, #status { transform: none; }
  #ctl { grid-column: 2; grid-row: 3; width: auto; justify-self: stretch; align-self: end; padding: 0 max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 4px; }
  #ctl .gu-btn { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 620px) { /* eng kichik telefonlar: panel torroq, sarlavha o'rniga taxta */
  #app { grid-template-columns: minmax(0, 1fr) 268px; }
  .gu-bar h1 { display: none; }
  #ctl svg, #modes svg { display: none; }
  .sc { padding: 5px 8px 6px; }
  .sc b { font-size: 22px; line-height: 1.27; } .sc b.long { font-size: 18px; line-height: 1.55; } .sc b.xlong { font-size: 14px; line-height: 2; } .sc b.xxlong { font-size: 12px; line-height: 2.3; }
}

/* kompyuter va planshet: taxta o'rtada, yonida panel, hafta reytingi */
@media (min-width: 900px) and (min-height: 561px) {
  #app { --col: min(calc(100vh - 84px), calc(100vw - 440px), 780px); grid-template-columns: minmax(0, 1fr) var(--col) 340px minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); column-gap: 28px; }
  .gu-bar { grid-column: 1 / -1; grid-row: 1; }
  #stage { grid-column: 2; grid-row: 2 / -1; padding: 16px 0; place-items: start center; }
  #hud { grid-column: 3; grid-row: 2; width: auto; justify-self: stretch; padding-top: 16px; gap: 10px; }
  #scores, #status { transform: none; }
  #ctl { grid-column: 3; grid-row: 3; width: auto; justify-self: stretch; padding: 10px 0 0; }
  #keys { display: block; grid-column: 1 / -1; margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); }
  #keys kbd { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 5px; background: var(--sur2); border: 1px solid var(--line); font: 600 11.5px/18px var(--font); text-align: center; color: var(--fg); }
  #mini { display: block; grid-column: 3; grid-row: 4; align-self: start; margin-top: 14px; padding: 12px 14px; background: var(--sur); border: 1px solid var(--line); border-radius: var(--r); }
  #mini[hidden] { display: none !important; }
  #mini h2 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
  .sc b { font-size: 30px; } .sc b.long { font-size: 25px; line-height: 1.35; } .sc b.xlong { font-size: 20px; line-height: 1.68; } .sc b.xxlong { font-size: 16px; line-height: 2.1; }
  #status { justify-content: flex-start; }
}