/* Blok: sahifa joylashuvi. Taxta, bo'laklar va effektlar canvas'da (app.js); bu yerda faqat kataklar qanday joylashishi va matnlar. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; }

#app { position: fixed; inset: 0; display: grid; touch-action: none; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
#app > .gu-bar { grid-area: bar; }
#modes { grid-area: modes; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 0; }
#modeSeg button { min-height: 40px; }
#restart { width: 44px; height: 44px; flex: none; }
#restart:disabled { opacity: .32; cursor: default; }
#hud { grid-area: hud; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 8px 14px 8px; }
#boardWrap { grid-area: board; position: relative; width: var(--bs); height: var(--bs); justify-self: center; }
#trayWrap { grid-area: tray; position: relative; height: var(--trayh); padding: 0 10px; }
#extra { grid-area: extra; display: none; }

@media (max-width: 350px) { #app > .gu-bar h1 { display: none; } #modeSeg button { padding: 0 8px; font-size: 13px; } }
/* telefon portret: yuqorida rejim va hisob, o'rtada taxta, pastda (bosh barmoq yetadigan joyda) bo'laklar */
#app[data-l="port"] { grid-template: "bar" auto "modes" auto "." minmax(0, 1fr) "hud" auto "board" auto "tray" auto "." minmax(env(safe-area-inset-bottom), .6fr) / minmax(0, 1fr); }
#app[data-l="port"] #trayWrap { margin-top: 8px; }
/* telefon landscape: chapda taxta, o'ngda boshqaruv */
#app[data-l="land"] { grid-template: "board bar" auto "board modes" auto "board hud" auto "board tray" minmax(0, 1fr) / auto minmax(0, 1fr); column-gap: 8px; padding-bottom: env(safe-area-inset-bottom); }
#app[data-l="land"] #boardWrap { align-self: center; margin-left: 8px; }
#app[data-l="land"] #trayWrap { align-self: center; }
#app[data-l="land"] > .gu-bar { height: calc(44px + env(safe-area-inset-top)); }
#app[data-l="land"] #hud { padding: 4px 12px 4px; }
#app[data-l="land"] #modes { padding-top: 4px; }
#app.narrow[data-l="land"] .gu-bar h1 { display: none; }
#app.narrow[data-l="land"] .gu-bar { padding-left: 2px; padding-right: 4px; gap: 2px; }
#app.narrow[data-l="land"] .gu-bar .gu-acts { gap: 1px; }
#app.narrow[data-l="land"] .gu-bar .gu-tb, #app.narrow[data-l="land"] .gu-bar .gu-home { width: 36px; }
#app.narrow[data-l="land"] #modes { padding-left: 6px; padding-right: 4px; gap: 2px; }
#app.narrow[data-l="land"] #modeSeg button { padding: 0 7px; font-size: 12.5px; min-height: 36px; }
#app.narrow[data-l="land"] #restart { width: 38px; height: 38px; }
/* kompyuter: yuqori panel to'liq kenglikda, chapda katta taxta, o'ngda hisob, bo'laklar, qisqa qoidalar va reyting */
#app[data-l="desk"] { grid-template: "bar bar" auto "board modes" auto "board hud" auto "board tray" auto "board extra" minmax(0, 1fr) / var(--bs) var(--side); column-gap: 32px; justify-content: center; }
#app[data-l="desk"] > .gu-bar { width: 100vw; justify-self: center; }
#app[data-l="desk"] #boardWrap { align-self: start; margin-top: 20px; }
#app[data-l="desk"] #modes { padding: 20px 0 0; }
#app[data-l="desk"] #hud { padding: 14px 2px 10px; }
#app[data-l="desk"] #trayWrap { padding: 0; }
#app[data-l="desk"] #extra { display: block; min-height: 0; overflow: auto; padding: 14px 0 16px; touch-action: pan-y; }

/* hisob */
#hud .f { display: flex; flex-direction: column; min-width: 0; }
#hud .f.r { align-items: flex-end; text-align: right; }
#hud .gu-label { white-space: nowrap; }
#hud b { font-size: var(--score, 30px); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#hud .f.r b { font-size: calc(var(--score, 30px) * .62); line-height: calc(1.12 / .62); font-weight: 700; color: var(--mut); }
#hud .f.r.up b, #hud .f.r.up .gu-label { color: var(--acc-text); }
#tag { font-style: normal; letter-spacing: .02em; text-transform: none; font-weight: 600; margin-left: 7px; color: var(--amber); }
#combo { text-align: center; white-space: nowrap; font-size: 15px; font-weight: 750; letter-spacing: .01em; color: var(--amber); padding-bottom: 4px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .18s; }
#combo.on { opacity: 1; }

/* taxta */
#board { position: absolute; display: block; border-radius: 12px; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -18px var(--shadow); }
:root[data-theme="light"] #board { box-shadow: 0 16px 34px -20px rgba(28,34,48,.5); }
#hint { position: absolute; left: 10%; right: 10%; top: 50%; transform: translateY(-50%); text-align: center; font-size: 15px; line-height: 1.4; color: var(--mut); pointer-events: none; }
#pops { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.pop { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; color: #fbf8ef; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 10px rgba(0,0,0,.4); animation: pop .95s cubic-bezier(.22,.7,.3,1) forwards; will-change: transform, opacity; }
.pop b { display: block; font-size: 22px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pop small { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: .03em; opacity: .85; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } 14% { opacity: 1; } 62% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 22px)); } }

/* bo'laklar */
#tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 100%; border-radius: 14px; background: var(--sur); border: 1px solid var(--line); }
.slot { position: relative; display: grid; place-items: center; cursor: grab; min-width: 0; }
.slot canvas { display: block; pointer-events: none; transition: opacity .16s; }
@media (hover: hover) { .slot:not(.off):hover canvas { transform: translateY(-2px); } .slot canvas { transition: opacity .16s, transform .12s; } }
.slot.up canvas { opacity: 0; transition: none; }
.slot.off canvas { opacity: .3; }
.slot.kb::after { content: ""; position: absolute; inset: 4px; border-radius: 11px; border: 1.5px solid var(--acc-text); }
.slot.in canvas { animation: slot-in .24s cubic-bezier(.2,.8,.3,1) backwards; }
.slot[data-i="1"].in canvas { animation-delay: .04s; }
.slot[data-i="2"].in canvas { animation-delay: .08s; }
@keyframes slot-in { from { opacity: 0; transform: translateY(12px) scale(.94); } }
#app.dragging, #app.dragging .slot { cursor: grabbing; }
#app.gameover .slot { cursor: default; }
#tray[hidden] { display: none; }
#float { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; transform-origin: 0 0; will-change: transform; visibility: hidden; }
#float.on { visibility: visible; }

/* o'yin tugaganda: taxta ustida natija, bo'laklar o'rnida (barmoq shu yerda) tugmalar */
#over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; animation: over-in .4s .28s ease backwards; touch-action: pan-y; }
@keyframes over-in { from { opacity: 0; transform: translateY(8px); } }
#over::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 62% 56% at 50% 50%, rgba(10, 12, 16, .58), rgba(10, 12, 16, 0) 100%); }
:root[data-theme="light"] #over::before { background: radial-gradient(ellipse 62% 56% at 50% 50%, rgba(226, 228, 233, .72), rgba(226, 228, 233, 0) 100%); }
#over .lbl { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d9d6ca; }
#over .num { font-size: clamp(44px, calc(var(--bs) * .16), 76px); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #f7f4ea; }
#over .sub { font-size: 14.5px; line-height: 1.38; color: #e4e1d6; max-width: 34ch; min-height: 20px; }
#over .sub b { font-weight: 750; color: #fff; }
#over .sub a { color: inherit; }
#over .row { display: flex; gap: 8px; margin-top: 10px; }
#over .row > div { min-width: 76px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.075); }
#over .row small { display: block; font-size: 11px; color: #bdb9ac; }
#over .row b { display: block; font-size: 16px; font-weight: 750; color: #f7f4ea; font-variant-numeric: tabular-nums; }
#over .nm { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 10px; border: 0; border-radius: 9px; background: rgba(255,255,255,.075); color: #e4e1d6; font-size: 13px; font-weight: 600; cursor: pointer; }
#over .nm svg { width: 14px; height: 14px; }
:root[data-theme="light"] #over .lbl { color: #434957; }
:root[data-theme="light"] #over .num { color: #12141a; }
:root[data-theme="light"] #over .sub { color: #2d323d; }
:root[data-theme="light"] #over .sub b { color: #12141a; }
:root[data-theme="light"] #over .row > div, :root[data-theme="light"] #over .nm { background: rgba(255,255,255,.58); }
:root[data-theme="light"] #over .row small { color: #525866; }
:root[data-theme="light"] #over .row b { color: #12141a; }
:root[data-theme="light"] #over .nm { color: #2d323d; }
#overActs { position: absolute; inset: 0 10px; display: flex; align-items: center; justify-content: center; gap: 10px; animation: over-in .3s .34s ease backwards; }
#app[data-l="desk"] #overActs { inset: 0; }
#overActs .gu-btn { min-height: 56px; font-size: 16.5px; }
#overActs .gu-btn.primary { flex: 1 1 auto; max-width: 340px; }
#overActs .gu-btn.share { flex: 0 0 auto; padding: 0 18px; }
@media (max-width: 374px) { #overActs .gu-btn.share span { display: none; } }

/* kompyuterdagi yon panel */
#extra h3 { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
#extra .box { padding: 12px 14px; margin-bottom: 12px; background: var(--sur); border: 1px solid var(--line); border-radius: 14px; }
#extra .gu-table { font-size: 13.5px; }
#extra .gu-table td, #extra .gu-table th { padding: 5px 4px; }

/* muqova rejimi (?bare=1): faqat taxta */
html.bare .gu-bar, html.bare #modes, html.bare #hud, html.bare #trayWrap, html.bare #extra { display: none !important; }
html.bare #app { display: block; }
html.bare #boardWrap { position: absolute; left: 50%; top: 50%; margin: 0 !important; transform: translate(-50%, calc(-50% + var(--oy, 0%))); }
html.bare #board { box-shadow: none; }

/* qoidalar oynasi */
.rules { font-size: 14.5px; color: var(--fg); }
.rules h3 { margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
.rules ul { margin: 0; padding-left: 18px; }
.rules li { margin: 4px 0; }
.rules .pts { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rules .pts td { padding: 5px 0; border-top: 1px solid var(--line); }
.rules .pts td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 12px; }
.rules .pts tr:first-child td { border-top: 0; }
.keys { color: var(--mut); font-size: 13.5px; }
.lb .gu-seg { margin-bottom: 8px; display: flex; width: 100%; }
.lb .gu-seg button { flex: 1; }
.lb .gu-stats { margin: 0 0 12px; }
.lb .list { min-height: 180px; max-height: 44vh; overflow: auto; }