/* HAHUMI 6.27 (boot) — first frame = the right screen, a calm load, a clear hero on phones, reflow at 400 %.
 * Must be linked in <head> after home60.css (render-blocking on purpose: these rules decide the very first frame). */

/* 1. First frame. boot627.js (first thing in <body>) sets html[data-boot627] and the same body[data-state/data-welcome/
 * data-web/data-daypart] home60.js will set, so the first paint is the welcome itself — not an empty shell with
 * «Дом / Память / Друзья / Настройки» and a footer. home60.js drops data-boot627 once it has drawn the real screen. */
html[data-boot627=welcome] #mainContent[hidden],html[data-boot627=welcome] #welcomeView[hidden]{display:block!important}
html[data-boot627] #authScreen{display:none!important}
/* the few milliseconds while boot627.js asks IndexedDB whether a home lives here: the page background only */
html[data-boot627=wait] .app-shell{visibility:hidden}
html[data-boot627] footer{visibility:hidden}
html[data-boot627=app] .app-shell{visibility:hidden} /* someone lives here: their home appears whole (nav + room + chat at once), not piece by piece */
/* English visitors: the Russian words stay out of sight until i18n613.js has translated them (it sets html[data-lang]) */
html[data-lang627=en]:not([data-lang]) .app-shell{visibility:hidden}
/* the seven heroes arrive with home60.js; their row keeps its height, so nothing below it jumps */

/* 2. Display font: preloaded in <head>; the welcome title waits for it (block, ~0.1–0.4 s) instead of being drawn in a
 * fallback and re-flowing from 3 to 4 lines. Same files as home60.css (one download). */
@font-face{font-family:"Hahumi Display Boot";src:url(/assets/fonts/hahumi-display-cyrillic-800.woff2?v=6.30.0-cardboard) format("woff2");font-weight:651 1000;font-display:block;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Hahumi Display Boot";src:url(/assets/fonts/hahumi-display-latin-800.woff2?v=6.30.0-cardboard) format("woff2");font-weight:651 1000;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
#w613Title{font-family:"Hahumi Display Boot",var(--display)}
/* …and its box already has the final height while the font is on its way (4 lines; 5 below 360 px), so nothing jumps */
html[data-font-wait627] #w613Title{height:4lh;overflow:visible}
/* «С характером.» stays one line (non-breaking space) and needs 8.9 em: below 390 px the title scales with the screen
 * instead of sticking out (it made the landing 372 px wide at 320 px — horizontal scroll at 400 % zoom) */
@media (max-width:420px){#w613Title{font-size:min(40px,calc((100vw - 36px) / 9))}}

/* 3. The painted street is static HTML: no flat placeholder first. A 300-byte blurred preview of the very same picture
 * holds its place; the picture fades in once decoded (boot627.js lifts html[data-street-wait]). avif, else webp. */
.st619[data-static627] .st619-bg::before{content:"";position:absolute;inset:-24px;background:url(data:image/webp;base64,UklGRo4AAABXRUJQVlA4IIIAAAAwBACdASogABQAPrVUo00nJKMiKAgA4BaJZAC7My/IdD1V0I6UqU8gWeAA/vw3wRcESKbrQeuWpirnHXy8lgg33VZz56ukj1wiaio6g0FvO1laAhzggJ4BwQaF9FijTOIwP8uB3cGRbuQ4QxV2hLEykGLzm6i9VdjXL3qtiFWBJwAA) center bottom/cover no-repeat;filter:blur(16px)}
.st619[data-static627] .st619-art{background-image:url(/assets/street/street-desktop.svg);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
@media (max-width:700px){
 .st619[data-static627] .st619-bg::before{background-image:url(data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAABQBQCdASoYAB4APqlGnUmmJCMhMAwAwBUJQBWGYzX/7JVAxkHP+ZY40GCC0zMH+GoRGUAA/vOpoitF27Wj9OLELME3kbcM9M/q2kClkFMnslYOLjyfb6LH+8g2u316+cu2STTjlOwE68eQwUBh650lvsNdCw+Ix9gDGelz57Nx7MjZe8l/tApQ45N9dDiMAAA=)}
 .st619[data-static627] .st619-art{background-image:url(/assets/street/street-mobile.svg)}
}
.st619[data-static627][data-art=placeholder] .st619-bg::before{display:none}
.st619[data-static627][data-art=placeholder] .st619-art{background-image:none}
html[data-street-wait] .st619[data-static627] .st619-art{opacity:0}
html[data-street627=off] .st619-bg{display:none}
@media (prefers-reduced-motion:reduce){.st619[data-static627] .st619-art{transition:none}}

/* 4. Home room on first entry: scene617.js keeps the vector room hidden while the painted one loads (.wait627),
 * so the wall colour goes straight to the painting instead of flat cartoon → painting in under half a second. */
.scene617.wait627>div:not(.s617-photo):not(.s617-dim){visibility:hidden}
.stage.wait627 .room613{visibility:hidden}

/* 5. Reflow at 400 % zoom (320×256 CSS px, WCAG 1.4.10). The 6.26 low-screen rule put the nav into the header row:
 * «Настройки» ended at x=388 and the page was 455 px wide. On narrow low screens the bar wraps: the nav gets its own row
 * and the header scrolls away with the page instead of covering half of a 256 px screen. */
@media (max-height:520px) and (max-width:740px){
 .rail{position:relative;flex-wrap:wrap;height:auto;min-height:60px;row-gap:6px;padding-top:8px;padding-bottom:8px}
 .nav-list{order:9;flex:1 1 100%;width:100%;min-width:0;margin:0}
 .nav-btn{min-width:0;flex:1 1 0;padding-inline:2px}
 body[data-welcome="1"] .nav-list{display:none}
}
/* focus never lands under the sticky top bar or the fixed tab bar */
@media (max-width:740px){html{scroll-padding-top:72px;scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
@media (max-width:740px) and (max-height:520px){html{scroll-padding-top:8px;scroll-padding-bottom:8px}}

/* 6. Phone tab bar: fully opaque — no chat lines or «Резервная копия» showing through (was 97 % surface, no blur) */
@media (max-width:740px){.nav-list{background:var(--surface,#FFFEFC)!important;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* 7. Phones: one clear hero. The face and the speech bubble are never covered.
 *  - the toast leaves the top bar (it covered the «hahumi» wordmark) and sits just above the tab bar;
 *  - the dare banner (markup: game agent, renderDare625) sits in the free strip above the bubble, between the look
 *    button and the side buttons, instead of over the name reaction line (it covered 39–49 % of it);
 *  - the «Погладь…» hint waits until the hero has spoken (1.5 s) and stays over the feet, above the care dock;
 *  - the wish card sits low, over the feet, not over the face/belly (6.26 lifted it for a hint that was not even shown). */
@media (max-width:740px){
 html body[data-state=home] .toast{top:auto!important;bottom:calc(max(10px,env(safe-area-inset-bottom,0px)) + 80px)!important}
 html body[data-state=home][data-welcome="1"] .toast{bottom:calc(max(10px,env(safe-area-inset-bottom,0px)) + 16px)!important}
 .stage .dare625{top:10px!important;bottom:auto!important;max-width:min(232px,calc(100% - 132px));min-height:44px;padding:6px 12px;font-size:12px;line-height:1.25}
 .stage .coach613{bottom:84px!important;top:auto!important}
 /* the gift button («Подарить», bottom-right of the stage) sat 12–20 px under the hint's ×: the hint ends before it */
 .stage:has(.souv614-give) .coach613{right:62px!important}
 .stage .care69-wish,.stage:has(.coach613:not([hidden])) .care69-wish{top:auto!important;bottom:86px!important}
 .coach613:not([hidden]){animation:fix627-late .01s linear 1.5s both}
}
@media (max-width:740px) and (prefers-reduced-motion:no-preference){
 .coach613.pop{animation:coach613-in2 .45s var(--spring,cubic-bezier(.3,1.5,.5,1)) 1.5s both}
}
@keyframes fix627-late{from{visibility:hidden}to{visibility:visible}}

/* 8. Tablet (741–1179): the wish card left the hero's cheek — it now sits low on the left, above the care dock */
@media (min-width:741px) and (max-width:1179px){
 .stage .care69-wish{top:auto!important;bottom:104px!important;max-width:min(40%,260px)}
}

/* 9. Tap targets I own (phone top bar): the logo link and the language switch reach 44 px */
@media (max-width:740px){
 body[data-web="1"] .logo[role="link"]{min-height:44px;align-items:center}
 .lang613{min-height:44px;min-width:44px}
}

/* 7.21: from 360 px the static first frame is the painted cardboard plate itself (boot627.js picks day/sunset) */
@media (min-width:360px){
 html[data-plate627] .st619[data-static627] .st619-bg::before{background-image:url(data:image/webp;base64,UklGRsAAAABXRUJQVlA4ILQAAACwBACdASogAA8APu1Ct1apoqakGAEwHYlsAJ0ygxgGxVp6deZuL1PIdRq80IgAAP7yb0pWZXn3Pfe48lN2Feqo7mGzZK1VziTJI3Qy06RsfnfZapG7mq0ELtZTpoLbHI8JJE/8Hvnl5pqJFgttA3q+X813v6V7tvpGtdssZ2bMCbyIZ95uOnexuzbIBagm+TfFunp83Y8xKmGWNkFIorsDkMTShFHhzTAv7ux4FFgCCl0AAAA=);background-position:center}
 html[data-plate627=day] .st619[data-static627] .st619-art{background-image:url(/assets/street/street-plate713.webp?v=7.28.0);background-position:center}
 html[data-plate627=sunset] .st619[data-static627] .st619-art{background-image:url(/assets/street/street-plate736-evening.webp?v=7.36.0);background-position:center}
}

/* 7.27: phones (360–740 px) start on the owner's vertical phone plate */
@media (min-width:360px) and (max-width:740px){
 html[data-plate627] .st619[data-static627] .st619-bg::before{background-image:url(data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAACwBACdASoQACEAPuVkpk2pJiOiNVgIASAciWwAnTLyAji8ua9v6+RF98NHbNYAAP6xdJGSB4EeVKAeMscCcrTqY/ZkTPm6v2ttqW0jSnQL/illJvP6ReL+v9FEEnyBPj7KLAWgEiItpgPxzvXfYki8f/Q9oGakgV7W6t0LzblKYacft8WZE1yNMMoDAznx7SKxUp4Y0H0gz34lvcEN8UmQAAA=)}
 html[data-plate627=day] .st619[data-static627] .st619-art{background-image:url(/assets/street/street-phone727.webp?v=7.27.0)}
 html[data-plate627=sunset] .st619[data-static627] .st619-art{background-image:url(/assets/street/street-phone736-evening.webp?v=7.36.0)}
}

/* 7.31 portrait tablets start on the vertical plate too */
@media (min-width:741px) and (max-width:1100px) and (orientation:portrait){
 html[data-plate627=day] .st619[data-static627] .st619-art{background-image:url(/assets/street/street-phone727.webp?v=7.27.0)}
 html[data-plate627=sunset] .st619[data-static627] .st619-art{background-image:url(/assets/street/street-phone736-evening.webp?v=7.36.0)}
}