/* HAHUMI 8 preview — «мир вместо меню», «уютная поделка». Only under html.ui8 (?ui=8). */
html.ui8 body .app-shell{flex-direction:column!important}
/* the rail becomes a slim paper top bar everywhere: logo · place · hero chip · gear */
html.ui8 body .rail{position:sticky!important;top:0!important;z-index:40!important;display:flex!important;flex-direction:row!important;align-items:center!important;
  flex:none!important;align-self:stretch!important;width:auto!important;min-width:0!important;height:64px!important;min-height:0!important;max-height:none!important;padding:8px clamp(12px,2.4vw,28px)!important;gap:14px!important;
  background:#fbf1dc!important;background-image:url(/assets/paper722/paper-722.webp?v=7.22.0)!important;background-size:420px!important;color:#4b3527!important;
  border:0!important;border-bottom:3px solid #d4b07f!important;box-shadow:0 2px 0 #8a6340,0 8px 18px rgba(60,40,20,.12)!important;overflow:visible!important;border-radius:0!important}
html.ui8 body .rail::before,html.ui8 body .rail::after{display:none!important}
html.ui8 body .rail .nav-list,html.ui8 body .rail .rail-label,html.ui8 body .rail .rail-divider,html.ui8 body .rail .vault-pill,html.ui8 body .rail .logo small{display:none!important}
html.ui8 body .rail .logo{display:flex!important;align-items:center;gap:8px;margin:0!important;padding:0!important;cursor:pointer;flex:none}
html.ui8 body .rail .logo-mark{width:44px!important;height:44px!important;flex:none}
html.ui8 body .rail .logo strong{font-size:22px!important}
html.ui8 body .rail .rail-bottom{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;margin:0 0 0 auto!important;padding:0!important;border:0!important;position:static!important;width:auto!important}
html.ui8 body .rail .pet-rail{background:#f3e3c3!important;color:#4b3527!important;border-radius:999px!important;padding:4px 14px 4px 4px!important;box-shadow:0 2px 0 #d4b07f,0 3px 0 #8a6340!important;max-width:min(40vw,320px)}
html.ui8 body .rail .pet-rail *{color:inherit!important}
html.ui8 body .rail .pet-rail .rail624-pic{width:36px!important;height:36px!important;flex:0 0 36px!important;background:#fff8ee!important;border-radius:50%!important}
html.ui8 body .rail .pet-rail .rail624-pic svg{width:36px!important;height:36px!important}
html.ui8 body .rail .pet-rail .rail624-txt strong{font-size:15px!important}
html.ui8 body .rail .pet-rail .rail624-txt small{font-size:11px!important;opacity:.75}
/* tools: back · place · gear */
.ui8-tools{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.ui8-back,.ui8-gear{display:inline-flex;align-items:center;gap:6px;height:42px;border:0;border-radius:999px;cursor:pointer;color:#4b3527;
  background:#f3e3c3;box-shadow:0 2px 0 #d4b07f,0 3px 0 #8a6340;font:700 14px/1 var(--text,system-ui),sans-serif;padding:0 14px 0 10px}
.ui8-gear{width:42px;padding:0;justify-content:center;order:3}
.ui8-back svg,.ui8-gear svg{width:22px;height:22px}
.ui8-back:active,.ui8-gear:active{transform:translateY(2px);box-shadow:0 1px 0 #d4b07f}
.ui8-place{font:800 18px/1.1 var(--display,system-ui),sans-serif;color:#2f241d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ui8[data-ui8-view="welcome"] .ui8-back{display:none}
html.ui8 body .rail .ui8-gear{margin-left:0}
html.ui8 body .rail .rail-bottom{order:4}
html.ui8 body .rail .ui8-tools{order:2}
html.ui8 body .rail .ui8-tools .ui8-gear{order:9}
/* the content uses the whole width now */
html.ui8 body .main{width:100%!important;max-width:none!important;margin:0!important}
html.ui8 body .main>.top{display:none!important}
/* the old «На улицу» chip in the room heading: the bar has it */
html.ui8 #homeView .hero-heading .switch622-add{display:none!important}
/* street signpost on the square */
.ui8-sign{position:absolute;right:clamp(10px,2.5%,40px);bottom:clamp(90px,16%,170px);z-index:6;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.ui8-sign::after{content:"";position:absolute;right:46%;top:6px;bottom:-60px;width:10px;border-radius:4px;background:#8a6340;box-shadow:inset -3px 0 0 #6b4a30;z-index:-1}
.ui8-arrow{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;color:#2f241d;font:800 15px/1 var(--display,system-ui),sans-serif;
  padding:11px 22px 11px 14px;background:#f3e3c3 url(/assets/paper722/paper-722.webp?v=7.22.0);background-size:300px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);filter:drop-shadow(0 3px 0 #8a6340) drop-shadow(0 8px 10px rgba(60,40,20,.25))}
.ui8-arrow:nth-child(2){transform:rotate(-3deg);background-color:#e9d2a6}
.ui8-arrow:first-child{transform:rotate(2deg)}
.ui8-arrow svg{width:20px;height:20px}
.ui8-arrow:hover{filter:drop-shadow(0 3px 0 #8a6340) drop-shadow(0 10px 14px rgba(60,40,20,.32)) brightness(1.04)}
.ui8-arrow[hidden]{display:none}
@media (max-width:740px){.ui8-sign{bottom:auto;top:clamp(150px,22%,220px);right:8px}.ui8-arrow{font-size:13px;padding:9px 18px 9px 10px}.ui8-sign::after{display:none}}
/* phones: no bottom tab bar in the world-instead-of-menu mode */
@media (max-width:740px){
  html.ui8 body .nav-list{display:none!important}
  html.ui8 body .rail{height:56px!important;gap:8px!important}
  html.ui8 body .rail .logo strong{display:none!important}
  html.ui8 body .rail .logo-mark{width:38px!important;height:38px!important}
  html.ui8 body .rail .pet-rail .rail624-txt small{display:none!important}
  html.ui8 #homeView .stage{height:calc(100dvh - 56px - var(--head728,65px) - 222px)!important}
  .ui8-back span{display:none}.ui8-back{padding:0;width:42px;justify-content:center}
}
/* beat the home-state green sidebar paint (cardboard722 line 244) */
html.ui8 body[data-state][data-state] .rail{background-image:url(/assets/paper722/paper-722.webp?v=7.22.0)!important;background-size:420px!important;background-blend-mode:normal!important;background-color:#fbf1dc!important}
html.ui8 body[data-state] .rail .logo strong,html.ui8 body[data-state] .rail .logo{color:#4b3527!important}
html.ui8 body[data-state] .rail .logo strong{font-size:0!important;color:transparent!important}
html.ui8 body[data-state] .rail .logo strong::before,html.ui8 body[data-state] .rail .logo strong::after{display:none!important}
.ui8-tools .ui8-gear{margin-left:auto}
html.ui8 body[data-state] .rail .lang613{position:static!important;inset:auto!important;transform:none!important;margin:0!important;order:-1}
html.ui8 body[data-state] .rail .rail-bottom>.ui8-gear{order:5}

/* ===== 7.39 · places of the world, not pages ===== */
/* paper «turn» when you arrive somewhere */
@keyframes ui8In{from{opacity:0;transform:translateY(16px) rotate(-.6deg)}to{opacity:1;transform:none}}
html.ui8 .ui8-enter{animation:ui8In .42s cubic-bezier(.2,.8,.25,1) both}
@media (prefers-reduced-motion:reduce){html.ui8 .ui8-enter{animation:none}}

/* --- ALBUM: an open kraft book --- */
html.ui8 #memoryView{position:relative;max-width:1260px;margin:22px auto 40px!important;padding:34px clamp(18px,4vw,56px) 40px clamp(30px,5vw,72px)!important;
  background:#a9764a url(/assets/paper722/kraft-722.webp?v=7.22.0)!important;background-size:380px!important;background-blend-mode:multiply!important;border-radius:14px 26px 26px 14px!important;
  box-shadow:inset 0 0 0 3px rgba(255,236,200,.18),0 4px 0 #6b4a30,0 9px 0 #4b3527,0 22px 40px rgba(40,25,10,.28)}
html.ui8 #memoryView::before{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:18px;border-radius:8px;
  background:repeating-linear-gradient(180deg,#6b4a30 0 10px,#4b3527 10px 13px);box-shadow:inset -2px 0 0 rgba(0,0,0,.25)}
html.ui8 #memoryView>.hero-heading{background:#fbf1dc url(/assets/paper722/paper-722.webp?v=7.22.0);background-size:420px;border-radius:10px;padding:22px 26px!important;
  box-shadow:0 2px 0 #d4b07f,0 4px 0 #8a6340;transform:rotate(-.4deg);margin-bottom:22px!important}
html.ui8 #memoryView>.hero-heading .eyebrow{color:#a2452f!important}
html.ui8 #memoryView>section,html.ui8 #memoryView>div:not(.hero-heading){background-color:#fdf6e6!important;
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(138,99,64,.10) 31px 32px),url(/assets/paper722/paper-722.webp?v=7.22.0)!important;
  background-size:auto,420px!important;border-radius:6px 12px 12px 6px!important;box-shadow:inset 14px 0 18px -14px rgba(60,40,20,.35),0 2px 0 #d4b07f,0 4px 0 #8a6340!important;
  padding:24px clamp(16px,2.4vw,32px)!important;margin-bottom:22px!important}
html.ui8 #memoryView .memory-grid>article{background:transparent!important;box-shadow:none!important;border:0!important}
html.ui8 #memoryView .pass614-art{transform:rotate(-2deg);box-shadow:0 3px 0 #d4b07f,0 10px 18px rgba(60,40,20,.22)!important}

/* --- JOKE DUEL: a stage on the town square --- */
html.ui8 #friendsView{position:relative;max-width:1260px;margin:22px auto 40px!important;padding:28px clamp(16px,3vw,40px) 34px!important;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(251,241,220,.0),rgba(251,241,220,.18) 40%,rgba(75,53,39,.55)),url(/assets/street/street-plate713.webp?v=7.28.0) center 72%/cover;
  box-shadow:0 4px 0 #8a6340,0 9px 0 #4b3527,0 22px 40px rgba(40,25,10,.28)}
html.ui8 #friendsView>.hero-heading{background:rgba(251,241,220,.92);border-radius:16px;padding:20px 24px!important;box-shadow:0 2px 0 #d4b07f,0 4px 0 #8a6340;max-width:760px}
html.ui8 #friendsView>.hero-heading .hd734{display:none!important}
html.ui8 #friendsView .friends-poster.duel733{background:#fbf1dc url(/assets/paper722/paper-722.webp?v=7.22.0)!important;background-size:420px!important;
  border-radius:18px!important;box-shadow:0 3px 0 #d4b07f,0 6px 0 #8a6340,0 18px 30px rgba(40,25,10,.3)!important;margin-top:18px!important}
html.ui8 #friendsView .friends-poster.duel733::before{content:"";display:block;height:14px;margin:-6px -6px 14px;border-radius:10px;
  background:repeating-linear-gradient(90deg,#e07a3e 0 26px,#fbf1dc 26px 52px);box-shadow:0 3px 0 #a2452f}
html.ui8 #friendsView .pair63-studio{background:rgba(251,241,220,.94)!important;margin-top:18px!important}

/* --- SETTINGS: a cardboard tool box --- */
html.ui8 #settingsView{position:relative;max-width:1100px;margin:22px auto 40px!important;padding:30px clamp(16px,3vw,40px) 36px!important;
  background:#b98852 url(/assets/paper722/kraft-722.webp?v=7.22.0)!important;background-size:380px!important;background-blend-mode:multiply!important;border-radius:20px!important;
  box-shadow:inset 0 10px 0 rgba(0,0,0,.08),0 4px 0 #6b4a30,0 9px 0 #4b3527,0 22px 40px rgba(40,25,10,.28)}
html.ui8 #settingsView::before{content:"";position:absolute;left:50%;top:-2px;width:min(240px,40%);height:22px;translate:-50% 0;border-radius:0 0 18px 18px;
  background:#6b4a30;box-shadow:inset 0 -4px 0 #4b3527}
html.ui8 #settingsView>.hero-heading{background:rgba(251,241,220,.95);border-radius:14px;padding:20px 24px!important;box-shadow:0 2px 0 #d4b07f,0 4px 0 #8a6340;margin-bottom:20px!important}
html.ui8 #settingsView .settings-card{transform:rotate(-.25deg)}
html.ui8 #settingsView .settings-card:nth-child(2n){transform:rotate(.3deg)}
@media (max-width:740px){
  html.ui8 #memoryView,html.ui8 #friendsView,html.ui8 #settingsView{margin:10px 8px 24px!important;padding:18px 12px 22px 22px!important}
  html.ui8 #friendsView,html.ui8 #settingsView{padding-left:12px!important}
  html.ui8 #memoryView::before{left:5px;width:10px}
}