/* The phone boards 1:1 (V-home-phone, 390 wide): 24 side padding, one column, flex gap 24, 32 spacers.
   Shown under 834 px; above it the desktop boards (board.css). Values read off V-home-phone.dc.html. */

.hp, .ph, .pf, .tabs { display: none; }

@media (max-width: 833px) {
  .hd, .bh, .bf { display: none !important; }
  .hp { display: flex; flex-direction: column; gap: 24px; position: relative; padding-bottom: 0; }
  .ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 24px 0; }
  .pf { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 24px 0; position: relative; margin-top: 32px; }
  .tabs { display: flex; }
  body { padding-bottom: 96px; }
  main + .bf, .bf { margin-top: 0; }
  main { margin-top: 24px; }
  .page-main-home main { margin-top: 24px; }
}

/* header */
.ph .district { width: 199px; }
.ph-tools { display: flex; align-items: center; gap: 8px; }
.ph-btn { width: 56px; height: 40px; box-sizing: border-box; flex-shrink: 0; border-radius: 999px; border: var(--bw) solid var(--rule); display: flex; align-items: center; justify-content: center; background: none; padding: 0; color: var(--ink); cursor: pointer; }
.ph-btn svg { width: 26px; height: 26px; }
.ph-btn svg[stroke="#2a2a28"], .ph-btn svg [stroke="#2a2a28"], .hp-sq svg[stroke="#2a2a28"], .hp-sq svg [stroke="#2a2a28"], .hp-fav svg[stroke="#2a2a28"], .hp-fav svg [stroke="#2a2a28"] { stroke: var(--ink); }
.ph-btn .lamp-on { display: none; }
:root[data-theme="dark"] .ph-btn .lamp-on { display: inline-flex; }
:root[data-theme="dark"] .ph-btn .lamp-off { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ph-btn .lamp-on { display: inline-flex; } :root:not([data-theme="light"]) .ph-btn .lamp-off { display: none; } }

/* headline: «Куда / сегодня?», the note and the dice */
.hp-h { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 24px; }
.hp-h1 { margin: 0; font: 400 40px/44px 'Dela Gothic One', 'Arial Black', sans-serif; color: var(--orange); }
.hp-line { position: absolute; left: -3%; width: 106%; bottom: -8px; height: 12px; }
.hp-note { position: absolute; left: 203px; top: -18px; font: 400 28px/1 'Marck Script', 'Caveat', cursive; color: var(--orange); transform: rotate(-5deg); white-space: nowrap; display: inline-block; }
.hp-arrow { position: absolute; left: 267px; top: 7px; width: 65px; height: 51px; }
.hp-dice-wrap { padding-bottom: 6px; display: flex; }
.hp-dice { width: 56px; height: 40px; box-sizing: border-box; flex-shrink: 0; border-radius: 999px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.hp-dice .dice { width: 30px; height: 30px; display: inline-flex; }

/* chips and the count row */
.hp-chips { display: flex; gap: 8px; padding: 0 24px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.hp-chips::-webkit-scrollbar { display: none; }
.hp-chip { padding: 0 18px 0 10px; }
.hp-count { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 0 24px; }
.hp-count > span { font-size: 17px; line-height: 24px; font-weight: 600; }
.hp-count > div { display: flex; align-items: center; gap: 8px; }
.hp-sq { width: 48px; height: 32px; box-sizing: border-box; flex-shrink: 0; border-radius: 999px; border: var(--bw) solid var(--rule); display: flex; align-items: center; justify-content: center; }
.hp-sq svg { width: 24px; height: 24px; }

/* the place card */
.hp-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 24px; }
.hp-photo { display: block; position: relative; width: 100%; aspect-ratio: 342 / 196; box-sizing: border-box; border-radius: 20px; background: var(--paper); text-decoration: none; }
.hp-badge { position: absolute; left: 12px; top: 12px; }
.hp-badge .bbadge { background: var(--cream); }
.hp-fav { position: absolute; right: 36px; top: 12px; width: 40px; height: 32px; box-sizing: border-box; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 251, 248, 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.9); }
:root[data-theme="dark"] .hp-fav { background: rgba(29, 26, 24, 0.7); border-color: rgba(255, 255, 255, 0.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hp-fav { background: rgba(29, 26, 24, 0.7); border-color: rgba(255, 255, 255, 0.12); } }
.hp-fav svg { width: 18px; height: 18px; }
.hp-card-txt { display: flex; flex-direction: column; gap: 2px; }
.hp-name-row { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.hp-name-row .bcard-title { color: var(--ink); text-decoration: none; }
.hp-rate { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; font-weight: 600; flex-shrink: 0; }
.hp-stars { display: inline-flex; gap: 1px; align-items: center; }
.hp-stars svg { width: 14px; height: 14px; }
.hp-rv .hp-stars svg { width: 14px; height: 14px; }
.hp-meta { display: flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 18px; color: var(--graphite); }
.hp-meta .bprice { font-size: 13px; line-height: 18px; }
.hp-slots { display: flex; align-items: center; gap: 8px; }
.hp-slot { height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: var(--bw) solid var(--orange); color: var(--orange-deep); text-decoration: none; font: 600 13px/1 'Nunito Sans', sans-serif; }
.hp-slot.off { border-style: dashed; border-color: var(--rule); color: var(--rule); font-weight: 400; }
.hp-today { margin-left: auto; font-size: 13px; line-height: 18px; color: var(--graphite); }

/* festival inside the list */
.hp-pad { padding: 0 24px; }
.hp-fest { position: relative; width: 100%; height: 208px; border-radius: 24px; background: var(--fest-bg); overflow: hidden; }
.hp-fest img { position: absolute; }
.hp-fest .pf1 { left: calc(100% - 128px); top: 18px; width: 78px; } .hp-fest .pf2 { left: calc(100% - 50px); top: 22px; width: 48px; }
.hp-fest .pf3 { left: calc(100% - 42px); top: 92px; width: 46px; } .hp-fest .pf4 { left: calc(100% - 110px); top: 112px; width: 52px; }
.hp-fest-body { position: absolute; left: 20px; top: 20px; bottom: 20px; width: 188px; display: flex; flex-direction: column; }
.hp-fest-title { font: 400 22px/26px 'Dela Gothic One', 'Arial Black', sans-serif; color: var(--orange); margin-top: 6px; }
.hp-fest-act { display: flex; margin-top: auto; }
.hp-fest-btn { padding: 0 14px 0 16px; }
.hp-more { width: 100%; }
.hp-more .ico { width: 20px; height: 20px; }
.hp-spacer { height: 32px; }
.hp-spacer-48 { height: 48px; }

/* sections */
.hp-sec { display: flex; flex-direction: column; gap: 16px; }
.hp-head { display: flex; align-items: flex-end; gap: 12px; justify-content: space-between; padding: 0 24px; }
.hp-head-t { display: flex; flex-direction: column; gap: 2px; }
.hp-head-t h2 { margin: 0; font: 400 28px/32px 'Dela Gothic One', 'Arial Black', sans-serif; color: var(--orange); }
.hp-head-t span { font-size: 13px; line-height: 18px; color: var(--graphite); }
.hp-head-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--orange-deep); }
.hp-head-link .ico { width: 16px; height: 16px; }
.hp-rev-wrap { display: flex; flex-direction: column; }
.hp-hint { height: 30px; margin-bottom: -4px; display: flex; justify-content: flex-end; align-items: flex-end; padding: 0 24px; pointer-events: none; }
.hp-hint > span { position: relative; z-index: 2; transform: translateY(-10px) rotate(2deg); display: inline-flex; align-items: center; gap: 4px; }
.hand-24 { font: 400 24px/1 'Marck Script', 'Caveat', cursive; color: var(--orange); white-space: nowrap; }
.hp-scroll { display: flex; gap: 12px; padding: 0 24px; overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none; }
.hp-scroll::-webkit-scrollbar { display: none; }
.hp-rv { width: 296px; flex: 0 0 296px; scroll-snap-align: start; }
.hp-rv .rv-top { gap: 8px; }
.hp-ph { width: 80px; height: 64px; }
.hp-empty { padding: 20px; }
.hp-colls { gap: 16px; }
.hp-coll { display: flex; flex-direction: column; gap: 10px; width: 240px; flex: 0 0 240px; color: var(--ink); text-decoration: none; scroll-snap-align: start; }
.hp-coll-grid { position: relative; display: grid; grid-template-columns: 116px 116px; gap: 8px; }
.hp-coll-grid > div { width: 116px; height: 80px; border-radius: 14px; background: var(--paper); }
.hp-coll-sticker { position: absolute; left: 88px; top: 52px; width: 64px; height: 64px; border-radius: 999px; background: var(--cream); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 var(--bw) var(--line); }
.hp-coll-sticker img { width: 40px; height: 40px; }
.hp-coll-t { display: flex; flex-direction: column; }
.hp-coll-t span:first-child { font-size: 17px; line-height: 24px; font-weight: 600; }

/* journal */
.hp-art { display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none; }
.hp-art-photo { position: relative; width: 100%; aspect-ratio: 342 / 190; border-radius: 20px; background: var(--paper); }
.hp-art-note { position: absolute; right: 12px; top: 10px; font: 400 24px/1 'Marck Script', 'Caveat', cursive; color: var(--orange); transform: rotate(-4deg); white-space: nowrap; display: inline-block; pointer-events: none; }
.hp-art-row { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); padding: 0 24px; }
.hp-art-thumb { width: 96px; height: 72px; border-radius: 14px; background: var(--paper); flex-shrink: 0; }
.hp-art-row > div { display: flex; flex-direction: column; gap: 2px; }
.hp-art-small { font-size: 17px; line-height: 24px; font-weight: 600; }

/* the page's pencil lines */
.hp-bgline { pointer-events: none; position: relative; height: 0; margin-top: -24px; z-index: 0; }
.hp-bgline svg { position: absolute; left: -44px; width: calc(100% + 88px); height: auto; max-width: none; }
.hp-bgline-1 svg { top: 12px; }
.hp-bgline-2 svg { top: 8px; }

/* phone footer and tab bar */
.pf-doodle { position: absolute; left: 8px; top: -8px; width: 70px; pointer-events: none; }
.pf-doodle svg { width: 70px; height: auto; }
.pf-tag { font: 400 26px/1 'Marck Script', 'Caveat', cursive; color: var(--orange); transform: rotate(-3deg); white-space: nowrap; display: inline-block; }
.pf-logo { color: var(--orange); }
.pf-logo svg { width: 218px; height: auto; }
.pf-city { font-size: 13px; line-height: 18px; color: var(--graphite); padding-top: 6px; }
.tabs { position: fixed; left: max(12px, calc(50% - 240px)); right: max(12px, calc(50% - 240px)); bottom: 16px; z-index: 30; height: 64px; box-sizing: border-box; padding: 0 8px; border-radius: 999px;
  background: rgba(255, 251, 248, 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: var(--bw) solid var(--line); justify-content: space-between; align-items: center; }
:root[data-theme="dark"] .tabs { background: rgba(29, 26, 24, 0.78); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs { background: rgba(29, 26, 24, 0.78); } }
.tabs a { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 999px; text-decoration: none; }
.tabs a svg { width: 28px; height: 28px; }
.tabs .tab-on { width: auto; height: 48px; box-sizing: border-box; gap: 6px; padding: 0 18px 0 12px; background: var(--orange); color: #fff; font: 600 15px/1 'Nunito Sans', sans-serif; }
.tab-badge { position: absolute; right: 4px; top: 4px; min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 4px; border-radius: 999px; background: var(--orange); color: #fff; font: 700 11px/16px 'Nunito Sans', sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--cream); }