/* My place (version 1.4): the home page as a window into the child's place, the gentle offer, and the page “Pick your favorite place”.
   Sizes follow --k (the age group); every button and tile is 44 px or more; movement stops in calm mode and with reduced motion. */

/* ================================================================ the home page: a window into the place */
.hm-place { padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); }
.hm-place > .hm-win { grid-area: 1 / 1; } .hm-place > .hm-under { grid-area: 2 / 1; }
.hm-win { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 2.7 / 1; min-height: 196px; max-height: min(400px, calc(40 * var(--dvh, 1vh)));
  width: 100%; background: linear-gradient(180deg, #9cc8f0, #d8ecfb); }
.hm-win[data-slot="morning"] { background: linear-gradient(180deg, #b4cdea, #f4e6d2); }
.hm-win[data-slot="evening"] { background: linear-gradient(180deg, #f1a57c, #fde3c8); }
.hm-win[data-slot="night"] { background: linear-gradient(180deg, #141a48, #2a2f6e); }
.hm-pic { position: absolute; inset: 0; z-index: 0; }
.hm-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; display: block; animation: hm-pic-in .45s ease both; }
.hm-pic.wait img { filter: saturate(.92); }
@keyframes hm-pic-in { from { opacity: 0; } to { opacity: 1; } }
/* a soft shade at the top and at the foot of the picture, so the greeting and the two friends stand out on any place */
.hm-win::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 20, 60, .16), rgba(10, 20, 60, 0) 26%, rgba(10, 20, 60, 0) 62%, rgba(10, 20, 60, .28)); }
.hm-hi { position: absolute; z-index: 3; left: 14px; top: 12px; margin: 0; max-width: calc(100% - 150px); padding: 7px 18px; border-radius: 18px; font-size: calc(27px * var(--k)); line-height: 1.12; text-wrap: balance;
  color: var(--text); background: color-mix(in srgb, var(--panel) 90%, transparent); box-shadow: 0 4px 0 rgba(10, 20, 60, .18); text-shadow: none; }
.hm-who { position: absolute; z-index: 2; left: 16px; bottom: -4px; display: flex; align-items: flex-end; gap: 0; pointer-events: none; filter: drop-shadow(0 8px 8px rgba(10, 20, 60, .3)); }
.hm-place .hm-me { width: calc(118px * var(--k)); align-self: flex-end; }
.hm-bud { width: calc(74px * var(--k)); margin: 0 0 8px -6px; }
/* the one big button: it lies on the picture (below the picture on a phone, where the picture is small) */
.hm-build { grid-area: 1 / 1; align-self: end; justify-self: end; position: relative; z-index: 3; margin: 0 16px 18px 0; box-shadow: 0 0 0 4px #fff, 0 6px 0 4px #b97700, 0 14px 22px rgba(10, 20, 60, .35); }
.hm-build:active { box-shadow: 0 0 0 4px #fff, 0 1px 0 4px #b97700; }
/* with the play mode: two big buttons side by side — “Play in my place” and “Build my place” */
.hm-go { grid-area: 1 / 1; align-self: end; justify-self: end; position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin: 0 16px 18px 0; max-width: calc(100% - 32px); }
.hm-go .hm-build, .hm-go .hm-play { grid-area: auto; margin: 0; } .hm-play { box-shadow: 0 0 0 4px #fff, 0 6px 0 4px #128a47, 0 14px 22px rgba(10, 20, 60, .35); } .hm-play:active { box-shadow: 0 0 0 4px #fff, 0 1px 0 4px #128a47; }
@media (max-width: 559px) { .hm-go { grid-area: 2 / 1; justify-self: stretch; margin: 12px var(--kpad) 0; max-width: none; } .hm-go > * { flex: 1 1 150px; } .hm-place > .hm-go ~ .hm-under { grid-area: 3 / 1; } }
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) { .hm-go { margin: 0 12px 12px 0; gap: 8px; } .hm-go .kbtn { min-height: 48px; font-size: 16px; padding: 6px 16px; } }
.hm-stars .hm-lv { justify-content: center; }
.hm-tools { position: absolute; z-index: 3; right: 12px; top: 12px; display: flex; gap: 10px; }
.hm-tools .hm-bg { position: static; }
.hm-under { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "txt acts lvl"; gap: 8px 16px; align-items: center; padding: 12px var(--kpad) var(--kpad); }
.hm-place .hm-acts { flex-wrap: nowrap; align-self: center; }
@media (min-width: 900px) { .hm-place .hm-level { width: calc(190px * var(--k)); padding: 8px 12px; gap: 4px; } .hm-place .hm-level small { display: none; } }
@media (max-width: 1239px) { .hm-under { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt lvl" "acts lvl"; } }
.hm-place .hm-txt { align-self: center; }
.hm-place .hm-txt .buddy-row .who { display: none; } .hm-place .hm-txt .kbubble::after { display: none; }   /* the buddy stands in the picture */
.hm-place .hm-txt .buddy-row { align-items: center; }
@media (max-width: 899px) { .hm-under { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "acts" "lvl"; } .hm-win { aspect-ratio: 2.1 / 1; } }
@media (max-width: 559px) {
  .hm-win { aspect-ratio: 16 / 10; min-height: 180px; } .hm-hi { font-size: calc(17px * var(--k)); left: 8px; top: 8px; padding: 6px 12px; max-width: calc(100% - 120px); border-radius: 14px; }
  .hm-place .hm-me { width: calc(84px * var(--k)); } .hm-bud { width: calc(54px * var(--k)); margin-bottom: 5px; } .hm-who { left: 8px; } .hm-tools { right: 8px; top: 8px; gap: 8px; }
  .hm-build { grid-area: 2 / 1; justify-self: stretch; margin: 12px var(--kpad) 0; } .hm-place > .hm-under { grid-area: 3 / 1; }
  .hm-under { padding: 10px var(--kpad) var(--kpad); gap: 8px; } }
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  .hm-win { aspect-ratio: auto; height: 168px; min-height: 0; max-height: none; } .hm-hi { font-size: 19px; padding: 5px 14px; left: 10px; top: 8px; }
  .hm-place .hm-me { width: 70px; } .hm-bud { width: 46px; margin-bottom: 4px; } .hm-build { min-height: 48px; font-size: 16px; padding: 6px 20px; margin: 0 12px 12px 0; } .hm-tools { top: 8px; right: 10px; }
  .hm-under { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "txt acts lvl"; padding: 8px 12px 10px; gap: 6px 12px; } .hm-place .hm-txt .kbubble { padding: 6px 12px; font-size: 14.5px; } }
body.calm .hm-pic img { animation: none; }
@media (prefers-reduced-motion: reduce) { .hm-pic img { animation: none; } }

/* ---- the gentle offer (once) and the quiet entries at the foot of the page */
.hm-offer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 18px; align-items: center; }
.hm-offer .main h2 { margin: 0; font-size: calc(19px * var(--k)); line-height: 1.2; } .hm-offer .main p { margin: 4px 0 0; }
.hm-offerpics { display: flex; } .hm-offerpics span { width: calc(74px * var(--k)); aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, #a9d3f7, #dff0fd); border: 3px solid var(--panel); box-shadow: 0 3px 0 var(--line); font-size: 26px; }
.hm-offerpics span + span { margin-left: -18px; } .hm-offerpics span:nth-child(2) { transform: translateY(-5px) rotate(3deg); } .hm-offerpics span:nth-child(1) { transform: rotate(-4deg); }
.hm-offerpics img, .hm-offerpics svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-offeracts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hm-offeracts .kbtn { min-width: calc(112px * var(--k)); }   /* “Choose” and “Later”: the same size, the same weight */
@media (max-width: 699px) { .hm-offer { grid-template-columns: auto minmax(0, 1fr); } .hm-offeracts { grid-column: 1 / -1; } .hm-offerpics span { width: 58px; } .hm-offerpics span:nth-child(3) { display: none; } }
.hm-quiet { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hm-quiet:empty { display: none; }
.hm-quiet a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 18px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: calc(14px * var(--k)); color: var(--muted); background: color-mix(in srgb, var(--bg2) 90%, transparent); box-shadow: inset 0 0 0 2px var(--line); text-shadow: none; }
.hm-quiet a:hover { color: var(--text); }

/* ---- five big tiles: My Place first */
.kgrid.jumbo.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1599px) and (min-width: 1100px) { .kgrid.jumbo.n5 .ktile { font-size: calc(19.5px * var(--k)); } .kgrid.jumbo.n5 .ktile small { font-size: calc(13.5px * var(--k)); } }
@media (max-width: 1099px) and (min-width: 700px) { .kgrid.jumbo.n5 { gap: calc(12px * var(--k)); } .kgrid.jumbo.n5 .ktile { font-size: calc(17.5px * var(--k)); padding: 10px 6px; } .kgrid.jumbo.n5 .ktile .e { font-size: calc(54px * var(--k)); } .kgrid.jumbo.n5 .ktile small { font-size: calc(12.5px * var(--k)); } }
@media (max-width: 699px) { .kgrid.jumbo.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kgrid.jumbo.n5 .ktile:first-child { grid-column: 1 / -1; flex-direction: row; min-height: calc(92px * var(--k)); gap: 14px; justify-content: center; text-align: left; } .kgrid.jumbo.n5 .ktile:first-child .e { font-size: calc(50px * var(--k)); }
  .kgrid.jumbo.n5 .ktile:first-child small { display: none; } }
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) { .kgrid.jumbo.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kgrid.jumbo.n5 .ktile:first-child { grid-column: auto; flex-direction: column; min-height: 118px; gap: 6px; text-align: center; } .kgrid.jumbo.n5 .ktile:first-child .e { font-size: 46px; } }

/* ================================================================ “Pick your favorite place” */
.mp { display: grid; gap: calc(16px * var(--k)); }
.mp-ask { display: grid; gap: 8px; padding-block: 12px; }
.mp-lines { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.mp-under { margin: 0; font-size: calc(17px * var(--k)); font-weight: 700; }
.mp-seen { margin: 0; display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 6px 14px; border-radius: 14px; font-size: max(14.5px, calc(14.5px * var(--k))); font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--c-calendar, #4aa8ff) 16%, var(--panel)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-calendar, #4aa8ff) 45%, transparent); }
.mp-group { display: grid; gap: 10px; min-width: 0; }
.mp-h { margin: 4px 2px 0; font-size: calc(20px * var(--k)); display: flex; align-items: center; gap: 8px; }
.mp-grid { display: grid; gap: calc(14px * var(--k)); grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(190px * var(--k))), 1fr)); }
.mp-tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; cursor: pointer; text-align: center; font: inherit; color: var(--text); background: var(--panel); border: 0;
  border-radius: var(--kr); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-room) 45%, var(--line2)), 0 5px 0 color-mix(in srgb, var(--c-room) 35%, var(--line)); transition: transform .16s var(--spring, ease), box-shadow .1s; text-shadow: none; }
.mp-tile:hover { transform: translateY(-3px); } .mp-tile:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--line2), 0 1px 0 var(--line); }
.mp-tile:focus-visible { outline: 4px solid var(--gold); outline-offset: 2px; }
.mp-tile.on { box-shadow: inset 0 0 0 4px #f5a800, 0 5px 0 #c98a00; }
.mp-tile.on::after { content: "✓"; position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f5a800; color: #2a1a00; font-weight: 900; font-size: 17px; box-shadow: 0 0 0 3px #fff; }
.mp-pic { display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(180deg, #a9d3f7, #dff0fd); border-radius: var(--kr) var(--kr) 0 0; }
.mp-pic img, .mp-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; } .mp-pic img { animation: hm-pic-in .35s ease both; }
.mp-pic .e { font-size: calc(46px * var(--k)); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15)); }
.mp-name { display: block; padding: 9px 8px 11px; font-weight: 800; font-size: calc(16px * var(--k)); line-height: 1.15; overflow-wrap: anywhere; min-height: calc(40px * var(--k)); align-content: center; }
.mp-foot { display: flex; justify-content: center; padding: 4px 0 8px; } .mp-later { min-width: min(100%, 260px); }
@media (max-width: 559px) { .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mp-name { font-size: calc(15px * var(--k)); padding: 8px 6px 10px; } .mp-h { font-size: calc(18px * var(--k)); } }
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) { .mp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
body.calm .mp-tile, body.calm .mp-tile:hover { transition: none; transform: none; } body.calm .mp-pic img { animation: none; }
@media (prefers-reduced-motion: reduce) { .mp-tile, .mp-tile:hover { transition: none; transform: none; } .mp-pic img { animation: none; } }

/* one tap shows the choice large; a second tap chooses it */
.mp-over .modal { width: min(560px, 100%); } .mp-over .mh h2:empty { display: none; }
.mp-confirm { display: grid; gap: 10px; justify-items: center; text-align: center; }
.mp-big, .mp-readypic { width: 100%; aspect-ratio: 3 / 2; max-height: calc(40 * var(--dvh, 1vh)); border-radius: var(--kr); overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, #a9d3f7, #dff0fd); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c-room) 40%, var(--line)); }
.mp-big img, .mp-big svg, .mp-readypic img { width: 100%; height: 100%; object-fit: cover; display: block; } .mp-big .e, .mp-readypic .e { font-size: 72px; }
.mp-confirm h2 { margin: 2px 0 0; font-size: calc(24px * var(--k)); } .mp-confirm p { margin: 0; }
.mp-read { justify-content: center; } .mp-read:empty { display: none; }
.mp-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; } .mp-yn .kbtn { white-space: normal; padding-inline: 12px; }
.mp-busy { display: flex; align-items: center; gap: 10px; justify-content: center; min-height: 32px; } .mp-busy[hidden] { display: none; }
@media (max-width: 419px) { .mp-yn { grid-template-columns: 1fr; } }
@media (max-height: 520px) and (orientation: landscape) { .mp-confirm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px 14px; } .mp-big { grid-row: 1 / span 5; max-height: calc(70 * var(--dvh, 1vh)); } .mp-yn { grid-template-columns: 1fr; } .mp-confirm h2 { font-size: 20px; } }

/* “This is your place. Change anything you like.” */
.mp-ready { display: grid; gap: 14px; justify-items: center; max-width: 860px; margin: 0 auto; }
.mp-readypic { aspect-ratio: 2.1 / 1; max-height: calc(46 * var(--dvh, 1vh)); }
.mp-ready .mp-yn { max-width: 560px; } .mp-ready .mp-seen { justify-self: center; }
@media (max-width: 559px) { .mp-readypic { aspect-ratio: 16 / 10; } }

/* ================================================================ Earlier builders */
.wd-newway { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; } .wd-newway > .e { font-size: calc(40px * var(--k)); } .wd-newway .main { display: grid; gap: 2px; } .wd-newway .main b { font-size: calc(17px * var(--k)); }
@media (max-width: 559px) { .wd-newway { grid-template-columns: auto minmax(0, 1fr); } .wd-newway .kbtn { grid-column: 1 / -1; } }