/* Yakvia — game lobby, daily quests and the result screen (28. 9. 2026).
   Game surfaces are dark (Mountain Brown) with orange play buttons, so they
   never read as the light travel cards. Colours only through brand.css. */

/* the dashed trail of the old hero ran into the game row — the row is the journey now */
.hero-home .hero-trail { display: none; }

/* ---------- lobby (#/hry) ---------- */
.lobby { background: var(--hero); color: var(--hero-ink); border-radius: 22px; padding: 22px; margin-top: 6px; display: flex; flex-direction: column; gap: 16px;
  background-image: radial-gradient(circle at 88% -20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%); }
.lobby-hud { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.lh-player { display: flex; align-items: center; gap: 12px; color: var(--hero-ink); text-decoration: none; min-width: 260px; flex: 1; }
.lh-av { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--hero-ink) 12%, transparent); display: grid; place-items: center; overflow: hidden; flex: none;
  box-shadow: 0 0 0 3px var(--accent); }
.lh-av svg { width: 58px; height: auto; margin-top: 8px; }
.lh-id { display: flex; flex-direction: column; gap: 4px; flex: 1; max-width: 380px; }
.lh-id strong { font-size: 1.1rem; }
.lh-xp { display: flex; align-items: center; gap: 10px; }
.lh-xp .xpbar.big { margin: 0; height: 10px; background: color-mix(in srgb, var(--hero-ink) 18%, transparent); flex: 1; }
.lh-xp small { opacity: .85; white-space: nowrap; }
.lh-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.lh-stat { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--hero-ink) 10%, transparent);
  color: var(--hero-ink); text-decoration: none; min-width: 110px; }
a.lh-stat:hover { background: color-mix(in srgb, var(--hero-ink) 18%, transparent); }
.lh-stat .ico { width: 24px; height: 24px; color: var(--accent); }
.lh-stat span { display: flex; flex-direction: column; line-height: 1.15; }
.lh-stat strong { font-size: 1.15rem; }
.lh-stat small { font-size: .74rem; opacity: .8; }
.lh-stat.cold .ico { color: color-mix(in srgb, var(--hero-ink) 55%, transparent); }
.lh-stat.hot .ico { animation: flame 1.6s ease-in-out infinite; }
@keyframes flame { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(-4deg); } }
.bump { animation: bump .5s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

.lobby-main { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: stretch; }
.lobby-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.lobby-sub > span:first-child { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; font-weight: var(--w-medium); opacity: .85; }
.lobby-note { font-size: .82rem; opacity: .75; }

/* ---------- daily quests ---------- */
.quests { background: color-mix(in srgb, var(--hero-ink) 8%, transparent); border: 1px solid color-mix(in srgb, var(--hero-ink) 14%, transparent);
  border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.q-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.q-head strong { font-size: 1.05rem; }
.q-reset { font-size: .78rem; opacity: .75; }
.quest { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--hero-ink) 7%, transparent); }
.quest.done:not(.claimed) { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.quest.claimed { opacity: .6; }
.q-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.q-text { font-weight: var(--w-medium); font-size: .95rem; }
.q-reward { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--w-bold); font-size: .88rem; white-space: nowrap; }
.q-reward .ico { width: 18px; height: 18px; }
.q-state { font-size: .82rem; font-weight: var(--w-semibold); white-space: nowrap; }
.q-claim { padding: 6px 12px; font-size: .85rem; white-space: nowrap; animation: pop .35s ease; }
.q-bottom { display: flex; align-items: center; gap: 10px; }
.q-bar { flex: 1; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--hero-ink) 16%, transparent); overflow: hidden; }
.q-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .6s ease; }
.q-prog { font-size: .78rem; opacity: .8; min-width: 54px; text-align: right; }
.q-bonus { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .85rem; padding: 8px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--hero-ink) 30%, transparent); }
.q-bonus .ico { width: 18px; height: 18px; }
.q-bonus.ready { border-style: solid; border-color: var(--accent); }
.coin-fly { position: fixed; z-index: 200; transform: translate(-50%, 0); display: inline-flex; align-items: center; gap: 4px; font-weight: var(--w-bold);
  color: var(--accent-ink); background: var(--accent); padding: 4px 10px; border-radius: 999px; pointer-events: none; animation: coinfly 1.1s ease-out forwards; }
.coin-fly .ico { width: 18px; height: 18px; }
@keyframes coinfly { from { opacity: 1; transform: translate(-50%, 0) scale(1); } to { opacity: 0; transform: translate(-50%, -70px) scale(1.2); } }

.duel-bot { position: relative; }
.duel-bot.fit { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.duel-fit { position: absolute; top: 10px; right: 10px; }

@media (max-width: 900px) {
  .lobby-main { grid-template-columns: 1fr; }
  .lobby { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lh-stat.hot .ico, .bump, .coin-fly, .q-claim { animation: none; }
}

/* ---------- result screen ---------- */
.rs { max-width: 1120px; }
.rs-hero { background: var(--hero); color: var(--hero-ink); border-radius: 22px; padding: 26px 28px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center;
  position: relative; overflow: hidden; background-image: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%); }
.rs-hero .kicker { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; font-weight: var(--w-medium); opacity: .85; }
.rs-score { font-size: clamp(3.2rem, 8vw, 5.2rem); font-weight: var(--w-bold); letter-spacing: -.04em; line-height: 1; margin-top: 8px; }
.rs-of { opacity: .8; margin-top: 4px; }
.rs-grade { font-size: 1.35rem; font-weight: var(--w-semibold); margin-top: 12px; }
.rs-squares { font-size: 1.4rem; letter-spacing: 2px; margin-top: 6px; }
.rs-best { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: var(--w-bold); animation: pop .4s ease .9s both; }
/* the daily challenge in the leaderboards (2. 10. 2026): the place, or where a guest would be */
.rs-lb { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--hero-ink) 12%, transparent); font-weight: var(--w-semibold); }
.rs-lb a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rs-duel { margin-top: 12px; display: flex; gap: 12px; align-items: center; }
.rs-duel .opp-av svg { width: 56px; height: auto; }
.rs-hero .row { margin-top: 16px; }
.rs-gauge { display: grid; place-items: center; }
.rs-gauge svg { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.rs-gauge .g-bg { stroke: color-mix(in srgb, var(--hero-ink) 16%, transparent); }
.rs-gauge .g-val { stroke: var(--accent); transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }
.rs-gauge .g-pct { fill: var(--hero-ink); font-weight: 700; font-size: 34px; }
.rs-gauge .g-lab { fill: var(--hero-ink); opacity: .75; font-size: 13px; }

.rs-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.rs-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); }
.rs-kpi strong { display: block; font-size: 1.45rem; letter-spacing: -.02em; }
.rs-kpi span { font-size: .82rem; color: var(--ink-2); }

.rs-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: 16px; }
.rs-grid .card h3 { margin-bottom: 10px; }
.rs-map { height: 380px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.rs-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); margin-top: 8px; }
.rs-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.rs-pin { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); cursor: pointer; }
.rs-pin.guess { background: var(--accent); color: var(--accent-ink); }
.rs-pin.real { background: var(--secondary); color: #fff; }

.rs-bars { display: flex; flex-direction: column; gap: 12px; }
.rs-bar-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; }
.rs-bar-n { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-weight: var(--w-bold); font-size: .8rem; }
.rs-bar-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; }
.rs-bar-top span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-bar-top strong { white-space: nowrap; }
.rs-bar-track { height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.rs-bar-track i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.rs-bar-meta { font-size: .78rem; color: var(--ink-2); }
.rs-note { font-size: .8rem; color: var(--ink-2); margin: 12px 0 0; }

.rs-rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 16px; }
.rs-reward { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.rs-reward h4 { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: var(--w-semibold); }
.rs-reward .big { font-size: 1.5rem; font-weight: var(--w-bold); }
.rs-reward .xpbar.big { max-width: none; margin: 4px 0 0; }
.rs-reward .xpbar.big i { transition: width 1s ease; }
.rs-levelup { color: var(--accent-text); font-weight: var(--w-bold); animation: pop .4s ease; }

.rs-history { margin-top: 16px; }
.rs-history svg { width: 100%; height: auto; display: block; overflow: visible; }
.rs-history .h-grid { stroke: var(--line); stroke-width: 1; }
.rs-history .h-ax { fill: var(--ink-2); font-size: 11px; }
.rs-history .h-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: draw-line 1.6s ease .4s forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .rs-history .h-line { animation: none; stroke-dashoffset: 0; } }
.rs-history .h-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.rs-history .h-dot.now { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.rs-history .h-hit { fill: transparent; cursor: pointer; }
.chart-wrap { position: relative; }

.rs-rounds { margin-top: 16px; }
.rs-rounds table { width: 100%; border-collapse: collapse; }
.rs-rounds td, .rs-rounds th { padding: 9px 6px; border-bottom: 1px solid var(--surface-2); text-align: left; font-size: .92rem; }
.rs-rounds td.num, .rs-rounds th.num { text-align: right; }
.rs-rounds a { font-weight: var(--w-semibold); }
.rs-bottom { margin-top: 18px; justify-content: center; }

.confetti { position: fixed; top: -12px; width: 9px; height: 14px; border-radius: 2px; z-index: 300; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: .9; } }

@media (max-width: 900px) {
  .rs-hero, .rs-grid { grid-template-columns: 1fr; }
  .rs-kpis { grid-template-columns: repeat(2, 1fr); }
  .rs-map { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-gauge .g-val, .rs-bar-track i, .rs-reward .xpbar.big i { transition: none; }
  .rs-best, .rs-levelup { animation: none; }
}

/* phone header: five chips + profile did not fit into 375 px and the fixed
   header clipped the profile button off the right edge (checked 28. 9. 2026) */
@media (max-width: 480px) {
  .hdr-actions { gap: 6px; }
  .hdr-actions .chip { padding: 6px 9px; }
  .lang summary { padding: 6px 8px; }
  .lang .lang-code { display: none; }
}

/* phone: four game tiles in two columns were 155 px wide and the tag sat on the
   title — a swipeable row of wide tiles instead */
@media (max-width: 560px) {
  .play-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 4px; scrollbar-width: none; }
  .play-row::-webkit-scrollbar { display: none; }
  .play-row .play-tile { flex: 0 0 78%; scroll-snap-align: start; }
  .play-tile.big { min-height: 220px; }
  .play-tile.big .pt-text strong { font-size: 1.5rem; }
  .play-tile.big .pt-play { width: 60px; height: 60px; }
}

/* work in progress (Filip 1. 10. 2026: avatar and clothes design) */
.wip-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px dashed var(--accent); font-weight: var(--w-medium); }

/* ---------- game tiles, style E „kousek světa“ (Filip 1. 10. 2026) ----------
   navrhy/dlazdice-her.html: the photo is the top of a floating island, thick
   with grass and earth (a stack of box-shadows on the rotated square), and the
   game's emblem stands on it. --c1 = the game's colour, the light behind. */
.gtile { --c1: #8DC468; position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 18px; padding: 0 0 16px; overflow: hidden;
  color: var(--hero-ink); text-decoration: none;
  background: radial-gradient(120% 85% at 50% 22%, color-mix(in srgb, var(--c1) 42%, transparent), transparent 64%), color-mix(in srgb, var(--hero-ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero-ink) 12%, transparent); transition: transform .2s ease, border-color .2s ease; }
a.gtile:hover { border-color: var(--c1); transform: translateY(-3px); }
.gtile.s-daily { --c1: #FFC27A; } .gtile.s-free { --c1: #8DC468; } .gtile.s-duel { --c1: #FF9A45; } .gtile.s-theme { --c1: #5E8F45; }
.gtile.s-km { --c1: #FFFFFF; } .gtile.s-flag { --c1: #7FB25C; } .gtile.s-city { --c1: #FFB25C; }
.gt-isl { position: relative; display: block; height: 190px; flex: none; }
.gt-shadow { position: absolute; left: 50%; top: 156px; width: 150px; height: 26px; margin-left: -75px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); animation: gt-shadow 4.5s ease-in-out infinite; }
.gt-slab { position: absolute; left: 50%; top: 50%; width: 126px; height: 126px; margin: -70px 0 0 -63px; border-radius: 14px;
  background: #6E5239 center / cover no-repeat; transform: rotateX(56deg) rotateZ(-45deg); animation: gt-float 4.5s ease-in-out infinite;
  box-shadow: -1px 1px 0 #A5D27F, -2px 2px 0 #86BD62, -3px 3px 0 #5B8F3D, -4px 4px 0 #8A6A4C, -5px 5px 0 #84654A, -6px 6px 0 #7E6046, -7px 7px 0 #785B42,
    -8px 8px 0 #72563E, -9px 9px 0 #6C513A, -10px 10px 0 #664C36, -11px 11px 0 #604732, -12px 12px 0 #5A422E, -13px 13px 0 #543D2A, -14px 14px 0 #4E3826,
    -15px 15px 0 #483322, -16px 16px 0 #422F1F; }
.gt-emw { position: absolute; left: 50%; top: 4px; width: 94px; height: 94px; margin-left: -47px; transition: transform .35s cubic-bezier(.3, 1.7, .5, 1); }
a.gtile:hover .gt-emw { transform: translateY(-12px) scale(1.08); }
.gt-em { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .45)); animation: gt-bob 4.5s ease-in-out infinite; }
.gt-em svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gt-chips { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; align-items: center; z-index: 3; }
.gt-cost { font-size: .74rem; font-weight: var(--w-bold); background: rgba(20, 14, 9, .66); color: #fff; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.gt-tx { padding: 0 66px 0 16px; display: flex; flex-direction: column; gap: 2px; }
.gt-tx strong { font-size: 1.12rem; font-weight: 800; line-height: 1.15; }
.gt-tx span { font-size: .82rem; opacity: .85; }
.gt-go { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; transition: transform .2s ease; }
/* the triangle is drawn with its centroid in the middle of the 24-box — no extra
   shift (Filip 1. 10. 2026: „trojúhelníky jsou mírně napravo“) */
.gt-go svg { width: 18px; height: 18px; fill: currentColor; }
a.gtile:hover .gt-go { transform: scale(1.12); }
.gtile.soon .gt-slab { filter: grayscale(.7) brightness(.82); }
.gtile.soon .gt-go { opacity: .45; }
.gtile-box { container-type: inline-size; display: grid; }
.gtile.big { flex-direction: row; align-items: center; min-height: 250px; height: 100%; padding: 0; }
.gtile.big .gt-isl { flex: 0 0 46%; height: 250px; }
.gtile.big .gt-slab { width: 168px; height: 168px; margin: -96px 0 0 -84px; }
.gtile.big .gt-shadow { top: 196px; width: 200px; height: 34px; margin-left: -100px; }
.gtile.big .gt-emw { width: 124px; height: 124px; margin-left: -62px; top: 10px; }
.gtile.big .gt-tx { padding: 24px 110px 24px 8px; }
.gtile.big .gt-tx strong { font-size: 2rem; letter-spacing: -.01em; }
.gtile.big .gt-tx span { font-size: 1rem; }
.gtile.big .gt-go { width: 66px; height: 66px; right: 24px; bottom: 24px; animation: pulse-play 2.2s ease-in-out infinite; }
.gtile.big .gt-go svg { width: 28px; height: 28px; }
@container (max-width: 640px) {
  .gtile.big { flex-direction: column; align-items: stretch; padding-bottom: 18px; }
  .gtile.big .gt-isl { flex: none; height: 230px; }
  .gtile.big .gt-tx { padding: 0 90px 0 18px; }
  .gtile.big .gt-tx strong { font-size: 1.5rem; }
}
@keyframes gt-float { 0%, 100% { transform: rotateX(56deg) rotateZ(-45deg) translateZ(0); } 50% { transform: rotateX(56deg) rotateZ(-45deg) translateZ(9px); } }
@keyframes gt-shadow { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(.82); opacity: .6; } }
@keyframes gt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .gt-slab, .gt-shadow, .gt-em, .gtile.big .gt-go { animation: none; } }
@media (max-width: 560px) { .play-row .gtile { flex: 0 0 78%; scroll-snap-align: start; } }

/* All the games by how much everybody plays them (Filip 2. 10. 2026: „nejhranější bude
   vždycky jako první a třeba i o trochu větší … spíš excentricky umístěné“): the first
   tile takes two columns and two rows, the rest sit around it — off-centre, not a row
   of equals. Six games fill the 3 × 3 grid exactly. */
.play-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; grid-auto-flow: row dense; }
.play-bento > .gtile.top { grid-column: span 2; grid-row: span 2; justify-content: center; padding-bottom: 22px; }
.gtile.top .gt-isl { height: 300px; }
.gtile.top .gt-slab { width: 176px; height: 176px; margin: -100px 0 0 -88px; }
.gtile.top .gt-shadow { top: 236px; width: 210px; height: 36px; margin-left: -105px; }
.gtile.top .gt-emw { width: 130px; height: 130px; margin-left: -65px; top: 22px; }
.gtile.top .gt-tx { padding: 0 96px 0 22px; }
.gtile.top .gt-tx strong { font-size: 1.7rem; letter-spacing: -.01em; }
.gtile.top .gt-tx span { font-size: .98rem; }
.gtile.top .gt-go { width: 60px; height: 60px; right: 22px; bottom: 22px; }
.gtile.top .gt-go svg { width: 24px; height: 24px; }
@media (max-width: 1080px) {
  .play-bento { grid-template-columns: repeat(2, 1fr); }
  .play-bento > .gtile.top { grid-row: span 1; }
  .gtile.top .gt-isl { height: 240px; }
  .gtile.top .gt-shadow { top: 206px; }
}
/* phone: one row to swipe, like the other rows — the first still first and wider */
@media (max-width: 560px) {
  .play-bento { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 4px; scrollbar-width: none; }
  .play-bento::-webkit-scrollbar { display: none; }
  .play-bento > .gtile { flex: 0 0 72%; scroll-snap-align: start; }
  .play-bento > .gtile.top { flex-basis: 88%; }
  .gtile.top .gt-isl { height: 220px; }
  .gtile.top .gt-tx strong { font-size: 1.35rem; }
}
/* narrow tiles (four in the home hero): chips stack, the emblem shrinks — the
   „zdarma“ chip sat on the calendar at 265 px */
.gtile:not(.big) { container-type: inline-size; }
@container (max-width: 300px) {
  .gt-chips { flex-direction: column; align-items: flex-start; gap: 4px; }
  .gt-emw { width: 80px; height: 80px; margin-left: -40px; top: 14px; }
}

/* ---------- Kolo štěstí (Filip 1. 10. 2026) ---------- */
.lh-wheel { font: inherit; border: 0; cursor: pointer; text-align: left; }
.lh-wheel .wh-mini { width: 30px; height: 30px; flex: none; display: block; }
.lh-wheel .wh-mini svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lh-wheel.ready { background: color-mix(in srgb, var(--accent) 26%, transparent); box-shadow: inset 0 0 0 1px var(--accent); animation: wh-ready 2.2s ease-in-out infinite; }
.lh-wheel.ready .wh-mini { animation: wh-tick 2.2s ease-in-out infinite; }
@keyframes wh-ready { 0%, 100% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  50% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); } }
@keyframes wh-tick { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-24deg); } 94% { transform: rotate(10deg); } }
/* Filip 2. 10. 2026: „třes vyskakovacího okna během točení je dost agresivní“ — three causes:
   the card sat in the middle and jumped up when the prize text grew under the wheel; the
   drop-shadow filter on the wheel's box was painted again for every frame of the spin; the win
   „pop“ shrank the wheel to 85 % and faded it out. Now: the card hangs from the top and only
   grows down, the shadow is a box-shadow (painted once) and the disc turns on its own layer. */
.wh-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding: max(16px, 7vh) 16px 16px; background: rgba(30, 22, 15, .62); backdrop-filter: blur(3px); }
.wh-card { position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; text-align: center; padding: 22px 20px 18px; }
.wh-card h2 { margin: 0 0 4px; }
.wh-close { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-2); }
.wh-stage { position: relative; width: min(300px, 78vw); aspect-ratio: 1; margin: 18px auto 14px; }
.wh-wheel { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: 0 10px 22px rgba(0, 0, 0, .28); }
.wh-disc { width: 100%; height: 100%; display: block; transition: transform 4.6s cubic-bezier(.12, .67, .1, 1); will-change: transform; backface-visibility: hidden; }
.wh-pointer { position: absolute; left: 50%; top: -10px; width: 0; height: 0; margin-left: -14px; z-index: 2; border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-top: 26px solid var(--accent); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.wh-wheel.won { animation: wh-win .7s ease-out; }
@keyframes wh-win { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }
.wh-spin { min-width: 200px; }
.wh-result { min-height: 5.4em; margin-top: 12px; }   /* room for the prize: the card must not grow under the player */
.wh-won { display: block; font-size: 1.3rem; color: var(--accent-text); }
.wh-reg { margin: 4px 0 0; font-size: .92rem; }
.wh-odds { margin-top: 8px; text-align: left; }
.wh-odds summary { cursor: pointer; font-weight: var(--w-semibold); }
.wh-odds .table { margin: 8px 0; font-size: .9rem; }
.news-dot { position: absolute; top: 8px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: news-ping 1.8s ease-out infinite; }
@keyframes news-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); } 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); } }
.energy-meter i.over { background: var(--secondary); }
.ne-reg { color: var(--ink-2); margin: -4px 0 10px; }
@media (prefers-reduced-motion: reduce) { .lh-wheel.ready, .lh-wheel.ready .wh-mini, .news-dot, .wh-wheel.won { animation: none; } .wh-disc { transition: none; } }
.wheel-chip { font: inherit; cursor: pointer; padding: 4px 8px; }
.wheel-chip .wh-mini { width: 22px; height: 22px; display: block; }
.wheel-chip .wh-mini svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wheel-chip.ready { border-color: var(--accent); animation: wh-ready 2.2s ease-in-out infinite; }
.wheel-chip.ready .wh-mini { animation: wh-tick 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .wheel-chip.ready, .wheel-chip.ready .wh-mini { animation: none; } }

/* ---------- zvoneček: upozornění (Filip 1. a 2. 10. 2026) ---------- */
.bell-chip { position: relative; font: inherit; cursor: pointer; padding: 4px 9px; }
.bell-chip .ico { width: 20px; height: 20px; }
.bell-n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent);
  color: var(--accent-ink); font-size: .68rem; font-weight: var(--w-bold); line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface);
  animation: news-ping 1.8s ease-out 3; }
.bell-chip.has .ico { color: var(--accent-text); }
.bell-chip.ring .ico { animation: bell-ring .9s ease; transform-origin: 50% 10%; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.notes-panel { position: fixed; z-index: 150; width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow: auto; padding: 12px; box-shadow: 0 18px 40px rgba(30, 22, 15, .25); }
.np-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 4px 10px; border-bottom: 1px solid var(--line); }
.np-empty { margin: 14px 4px; }
.np-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.np-item { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: start; text-align: left; padding: 10px 8px; border: 0; border-radius: 12px;
  background: none; cursor: pointer; font: inherit; color: var(--ink); }
.np-item:hover { background: var(--surface-2); }
.np-item.unread { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.np-item.unread .np-text strong::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.np-item.done { opacity: .6; }
.np-ico { font-size: 1.3rem; line-height: 1.2; text-align: center; }
.np-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-text span { font-size: .86rem; color: var(--ink-2); }
.np-time { color: var(--ink-2); white-space: nowrap; }
.np-foot { margin: 8px 4px 2px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .bell-n, .bell-chip.ring .ico { animation: none; } }
/* the game chips (streak, energy, wheel, Yakoiny) — only on the game pages.
   Phone: with the bell, language and profile they did not fit 375 px (415 px,
   2. 10. 2026; hiding the streak still left the profile 13 px off the edge). So on a
   wrapping header the group gets a line of its own and the bell, language and profile
   sit next to the logo — in the same place as on every other page. */
.hdr-game { display: contents; }
@media (max-width: 720px) {
  .hdr-actions { display: contents; }
  .hdr-actions > .bell-chip { margin-left: auto; }
  .hdr-game { order: 2; flex: 1 1 100%; display: flex; align-items: center; gap: 6px; }
}
/* a signed-in player keeps just the profile icon next to the logo */
@media (max-width: 480px) {
  .hdr-me > span:not(.ico) { display: none; }
}

/* ---------- the XP boost (Filip 2. 10. 2026: the city of the day solved = 10 min of double XP,
   with a countdown) and the small celebrations („všude malé animace nebo interakce“) ---------- */
.boost-chip { gap: 6px; font-weight: var(--w-bold); background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  border-color: var(--accent); animation: boost-glow 2.4s ease-in-out infinite; }
.boost-chip.inline { display: inline-flex; vertical-align: middle; padding: 3px 10px; }
.lh-stats .boost-chip.lh-boost { align-self: center; }
.mesto-boost { margin: 8px 0 0; font-weight: var(--w-semibold); }
.rs-boost { font-size: .55em; opacity: .9; }
@keyframes boost-glow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 28%, transparent); } }
.fx-burst { position: fixed; z-index: 300; pointer-events: none; font-size: 1.5rem; transform: translate(-50%, -50%);
  animation: fx-fly 1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes fx-fly { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.55) rotate(25deg); opacity: 0; } }
@keyframes mr-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bar-grow { from { width: 0; } }
@keyframes flag-in { from { opacity: 0; transform: scale(.82) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes me-glow { 50% { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); } }
@keyframes pop-in { 0% { transform: scale(.92); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: none; } }
.mesto-row.fresh { animation: mr-in .35s ease-out both; }
.mesto-row.fresh .mr-bar i { animation: bar-grow .8s cubic-bezier(.2, .8, .2, 1) both; }
.mesto-done { animation: pop-in .5s ease both; }
.ms-bubble.fresh { animation: mr-in .35s ease-out both; }
.mesto-sum.moving .ms-yak { animation: yak-bob 2.4s ease-in-out infinite; }
.mt-c.fresh { animation: camp-in .45s ease-out both; }
.mt-yak.climb { animation: yak-climb .9s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes yak-bob { 50% { transform: translateY(-4px); } }
@keyframes camp-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
/* SVG: px = units of the map; the yak starts where it stood (--fx/--fy from mesto.js) */
@keyframes yak-climb { from { transform: translate(var(--fx), var(--fy)); } to { transform: none; } }
.flag-big.in { animation: flag-in .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.reveal { animation: mr-in .3s ease-out both; }
.reveal.hit .place { animation: pop-in .5s ease both; }
.lb-table tr.me td, .lb li.me { animation: me-glow 1.4s ease 2; }
@media (prefers-reduced-motion: reduce) {
  .boost-chip, .fx-burst, .mesto-row.fresh, .mesto-row.fresh .mr-bar i, .mesto-done, .ms-bubble.fresh, .mesto-sum.moving .ms-yak,
  .mt-c.fresh, .mt-yak.climb, .flag-big.in, .reveal, .reveal.hit .place, .lb-table tr.me td, .lb li.me { animation: none; }
}
/* a phone: the game chips wrap when the boost adds one */
@media (max-width: 720px) { .hdr-game { flex-wrap: wrap; } }

/* ---------- Hádej vlajku (2. 10. 2026) ---------- */
.flag-quiz { max-width: 980px; }
.flag-card { display: grid; grid-template-columns: minmax(200px, 340px) 1fr; gap: 20px; align-items: center; }
.flag-frame { background: var(--surface-2); border-radius: 14px; padding: 14px; display: grid; place-items: center; min-height: 180px; }
.flag-big { width: 100%; max-width: 320px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 6px; box-shadow: var(--shadow); background: var(--surface); }
.flag-map { height: min(56vh, 440px); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-top: 14px; cursor: crosshair; }
.flag-mini { width: 28px; height: 21px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); vertical-align: middle; background: var(--surface-2); }
.flag-mini.big { width: 64px; height: 48px; }
.flag-missing { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; }
.flag-mini.big.flag-missing { font-size: 30px; }
@media (max-width: 640px) {
  .flag-card { grid-template-columns: 1fr; gap: 12px; }
  .flag-frame { min-height: 0; padding: 10px; }
  .flag-big { max-width: 220px; }
  .flag-map { height: 52vh; }
}

/* ---------- Hádej město (2. 10. 2026). The look Filip chose on 2. 10. from navrhy/hadej-mesto.html,
   „kombinace C a E“: E = the yak says in a bubble how the last guess went, the guesses in coloured
   height bands; C = the climb map, a trail up the mountain with a camp for every guess.
   The bands and the map are tokens in brand.css (--zone-*, --map-*) ---------- */
.mesto .card + .card { margin-top: 14px; }
.mesto-form { display: flex; gap: 8px; margin: 12px 0; }
.mesto-form[hidden] { display: none; }
.mesto-field { position: relative; flex: 1; }
.mesto-q { width: 100%; font-size: 1.05rem; }
.mesto-sug { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 320px; overflow: auto; }
.mesto-sug button { width: 100%; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 8px 10px; border: 0; background: none;
  border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.mesto-sug li.active button, .mesto-sug button:hover { background: var(--surface-2); }
.mesto-sug small { color: var(--ink-2); white-space: nowrap; }
/* ---------- nahlášení a rychlá zpětná vazba (Filip 2. 10. 2026, feedback.js) ---------- */
.fb-overlay { position: fixed; inset: 0; z-index: 210; display: grid; place-items: end center; padding: 16px; background: rgba(30, 22, 15, .38); }
@media (min-width: 640px) { .fb-overlay { place-items: center; } }
.fb-card { width: min(420px, 100%); text-align: left; animation: mr-in .2s ease-out; }
.fb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fb-x { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-2); }
.fb-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.fb-reason { font: inherit; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.fb-reason[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); font-weight: var(--w-semibold); }
.fb-card textarea.input { width: 100%; resize: vertical; }
.fb-note { margin: 8px 0 0; }
.fb-actions { margin-top: 12px; }
.fb-flag { font: inherit; cursor: pointer; opacity: .78; }
.fb-flag:hover, .fb-flag:focus-visible { opacity: 1; }
.fb-rate { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.fb-vote { font-size: 1.25rem; line-height: 1; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 10px; cursor: pointer; transition: transform .15s ease; }
.fb-vote:hover { transform: scale(1.08); }
.foot-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fb-card { animation: none; } .fb-vote { transition: none; } }
.mesto-sug.guess::before { content: 'Myslel(a) jsi…?'; display: block; padding: 6px 10px 2px; font-size: .8rem; color: var(--ink-2); }
/* E: the yak, the bubble with the last guess, the highest height */
.mesto-sum { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 4px;
  padding: 12px 14px; border-radius: 16px; background: var(--hero); color: var(--hero-ink); }
.ms-yak { width: 56px; height: 56px; border-radius: 14px; display: block; }
.ms-bubble { position: relative; padding: 8px 12px; border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: var(--w-semibold); }
.ms-bubble::before { content: ''; position: absolute; left: -7px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 0; border-right-color: var(--surface); }
.ms-peak { font-size: 1.6rem; font-weight: var(--w-bold); line-height: 1.1; white-space: nowrap; text-align: right; }
.ms-peak small { display: block; font-size: .7rem; font-weight: var(--w-medium); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
/* the climb: C (map) beside E (list), one under the other on a phone */
.mesto-climb { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
/* the map = the still art (mesto-map.mountainArt, drawn once) under the camps (climbLayer, every guess) */
.mesto-map { position: relative; border-radius: 16px; overflow: hidden; background: var(--map-sky-low); }
.mesto-map svg { width: 100%; height: auto; display: block; }
.mt-camps { position: absolute; inset: 0; }
.mt-sky-a { stop-color: var(--map-sky-top); }
.mt-sky-b { stop-color: var(--map-sky-low); }
.mt-sun { fill: var(--map-sun); }
.mt-glow { fill: var(--map-sun); opacity: .35; }
.mt-far { fill: var(--map-far); }
.mt-far2 { fill: var(--map-far-2); }
.mt-farsnow { fill: var(--map-snow); opacity: .8; }
.mt-cloud { fill: var(--map-snow); opacity: .92; }
.mt-cloud.front { opacity: .8; }
.mt-rock-a { stop-color: var(--map-rock); }
.mt-rock-b { stop-color: var(--map-rock-low); }
.mt-snowcap { fill: var(--map-snow); }
.mt-gully { fill: none; stroke: var(--map-rock-line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .32; }
.mt-pine { fill: var(--map-pine); }
.mt-shade { fill: var(--map-shade); opacity: .26; }   /* the light comes from the upper left */
.mt-arete { fill: none; stroke: var(--map-snow); stroke-width: 1.2; opacity: .55; stroke-linejoin: round; }
.mt-meadow { fill: var(--map-meadow); }
.mt-meadow2 { fill: var(--map-meadow-2); }
.mt-water { fill: var(--map-water); }
.mt-ripple { fill: none; stroke: var(--map-snow); stroke-width: 1.5; stroke-linecap: round; opacity: .6; }
.mt-ridge { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 6; }   /* --zone-ridge vanished on the dawn sky */
.mt-scale, .mt-top { paint-order: stroke; stroke: var(--map-paper); stroke-width: 3; stroke-linejoin: round; }
.mt-scale { font-size: 11px; font-weight: var(--w-semibold); fill: var(--ink-2); }
.mt-top { font-size: 12px; font-weight: var(--w-bold); fill: var(--ink); }
/* the trail: orange dots with a dark edge — seen on the rock and on the snow alike */
.mt-trail-case, .mt-trail { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 7; }
.mt-trail-case { stroke: var(--ink); stroke-opacity: .45; stroke-width: 6; }
.mt-trail { stroke: var(--accent); stroke-width: 3.2; }
.mt-camp { fill: var(--ink); stroke: var(--surface); stroke-width: 3; }
.mt-c.best .mt-camp { fill: var(--accent); }
.mt-n { font-size: 11px; font-weight: 800; fill: var(--surface); text-anchor: middle; }
.mt-c.best .mt-n { fill: var(--accent-ink); }   /* white on Yak Orange is 2.35:1 */
.mt-label { font-size: 12.5px; fill: var(--ink); paint-order: stroke; stroke: var(--map-paper); stroke-width: 3; stroke-linejoin: round; }
.mt-c.best .mt-label { font-weight: var(--w-bold); }
.mt-win { font-size: 14px; font-weight: var(--w-bold); fill: var(--accent-text); paint-order: stroke; stroke: var(--map-paper); stroke-width: 4; stroke-linejoin: round; }
.mesto-list-head { margin: 0 0 8px; }
/* E: a guess — the band on the left edge, the name with the bar under it, the height and km on the right */
.mesto-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mesto-row { position: relative; display: grid; grid-template-columns: 1.9em minmax(0, 1fr) auto; grid-template-areas: "n name t" "n bar t";
  column-gap: 10px; row-gap: 5px; align-items: center; padding: 8px 12px 8px 16px; border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.mesto-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--z); }
.mesto-row.best { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: inset 0 0 0 2px var(--accent); }
.mr-n { grid-area: n; color: var(--ink-2); }
.mr-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-name small { color: var(--ink-2); }
.mr-bar { grid-area: bar; height: 8px; border-radius: 99px; background: var(--surface); overflow: hidden; }
.mr-bar i { display: block; height: 100%; width: var(--pct); border-radius: inherit;
  background: linear-gradient(90deg, var(--zone-sea), var(--zone-hills) 18%, var(--zone-forest) 35%, var(--zone-rock) 55%, var(--zone-camp) 75%, var(--zone-ridge));
  background-size: var(--full) 100%; }
.mr-t { grid-area: t; font-weight: var(--w-bold); white-space: nowrap; text-align: right; }
.mr-km { display: block; font-size: .76rem; font-weight: var(--w-regular); color: var(--ink-2); }
.mesto-hints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mesto-hint { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mesto-hint.open { background: color-mix(in srgb, var(--secondary) 12%, var(--surface)); }
.mesto-done { margin-top: 12px; }
/* side by side the list grows longer than the map: the map stays in view (150 px = the header, as .side) */
@media (min-width: 761px) { .mesto-map { position: sticky; top: 150px; } }
@media (max-width: 760px) { .mesto-climb { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .mesto-form { flex-direction: column; }
  /* the yak and the height on top, the bubble under them — beside each other it was 3 words a line */
  .mesto-sum { grid-template-columns: 44px minmax(0, 1fr); row-gap: 10px; padding: 10px 12px; }
  .ms-yak { width: 44px; height: 44px; border-radius: 12px; }
  .ms-peak { grid-column: 2; grid-row: 1; }
  .ms-bubble { grid-column: 1 / -1; grid-row: 2; }
  .ms-bubble::before { left: 15px; top: -7px; margin-top: 0; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--surface); }
  .mesto-hints { grid-template-columns: 1fr; }
}