/* Math Escape City — prototype styles. Mobile first: picture on top, lock panel under it.
   Wide screens: the lock panel floats over the lower part of the room picture. */
:root {
  --bg: #1a1033; --bar: #140b28; --panel: #241645; --panel2: #2f1e5a; --line: #4a3584;
  --ink: #24304a; --paper: #fffdf6; --text: #fff8ec; --muted: #cfc3ee;
  --gold: #ffcf4d; --gold2: #d8951c; --brass: linear-gradient(180deg, #ffe08a, #e0a43a 55%, #b9791c);
  --teal: #3fd6c6; --good: #4fcf63; --bad: #ff7a7a; --help: #ffc24d;
  --leo: #2f6fdb; --mia: #d94f8a; --gus: #2f9e5b;
  --r: 18px;
  --top: 52px;
}
* { box-sizing: border-box; }
html { touch-action: manipulation; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: Nunito, system-ui, sans-serif; font-weight: 700; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
h2, h3, .logo, .btn, .qlabel, .talk b { font-family: 'Baloo 2', Nunito, sans-serif; }
[hidden] { display: none !important; }

#app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
#top { height: var(--top); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px; padding-top: env(safe-area-inset-top); background: var(--bar); border-bottom: 2px solid var(--line); position: relative; z-index: 5; }
.tb { width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel2); font-size: 20px; display: grid; place-items: center; padding: 0; position: relative; }
#place { flex: 1; min-width: 0; font: 700 17px 'Baloo 2', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gold); }
#coins { flex: none; background: #3a2470; border: 2px solid var(--gold2); border-radius: 999px; padding: 3px 12px; font-weight: 900; white-space: nowrap; }
#coins.pop { animation: pop .5s; }
.music.off::after { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; background: #ff3b3b; border-radius: 2px; transform: rotate(-40deg); box-shadow: 0 0 0 1.5px #1a1033; }
.music.off { opacity: .85; }

#stage { flex: 1; min-height: 0; position: relative; display: flex; }
#frame { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.scene { position: relative; width: 100%; aspect-ratio: 3 / 2; flex: none; overflow: hidden; background: #000; }
.scene .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.scene .bg.over { transition: opacity 1.6s ease; }
#fx { position: absolute; inset: 0; pointer-events: none; }
#avatar { position: absolute; right: 1%; bottom: -2%; height: 50%; pointer-events: none; filter: drop-shadow(0 6px 8px #0008); transform-origin: bottom center; }
#avatar.popin { animation: popin .6s cubic-bezier(.2, 1.5, .4, 1); }
#avatar.bounce { animation: bounce .7s ease; }
#avatar.shake { animation: shake .45s ease; }
#panel { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 28px; background: var(--panel); -webkit-overflow-scrolling: touch; }
#panel.padopen, .ovbody.padopen { padding-bottom: 260px; }

/* ---------- wide screens: lock panel over the bottom of the room ---------- */
@media (min-width: 720px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  #stage { align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #2b1a55, #120a24); }
  #frame { flex: none; display: block; width: min(100vw, (100dvh - var(--top)) * 1.5); aspect-ratio: 3 / 2; }
  .scene { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  #panel { position: absolute; left: 50%; bottom: 2.5%; transform: translateX(-50%); width: min(66%, 780px); max-height: 72%; border-radius: 22px; background: #241645ee; border: 2px solid #ffffff22; box-shadow: 0 16px 40px #0009; backdrop-filter: blur(6px); }
  #avatar { right: auto; left: 1%; height: 46%; bottom: 0; }
  body[data-mode="story"] #panel { width: min(90%, 820px); background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; overflow: visible; }
  body[data-mode="win"] #panel { width: min(80%, 820px); max-height: 92%; bottom: 4%; }
}
/* phone held sideways: picture left, panel right */
@media (orientation: landscape) and (max-height: 559px) {
  #frame { flex-direction: row; }
  .scene { width: auto; height: 100%; aspect-ratio: 3 / 2; max-width: 55%; }
}

/* ---------- buttons ---------- */
.btn { border: 0; border-radius: 999px; padding: 12px 22px; font-size: 19px; font-weight: 800; min-height: 50px; }
.btn.go { background: var(--brass); color: #3b2300; box-shadow: 0 4px 0 #8a5a12, 0 8px 18px #0005; }
.btn.go:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a5a12; }
.btn.go:disabled { filter: grayscale(.7) brightness(.8); }
.btn.ghost { background: transparent; border: 2px solid var(--muted); color: var(--text); }
.btn.big { font-size: 24px; padding: 14px 34px; }
.qactions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0 4px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* ---------- dialogue box (same look as the science comic line box) ---------- */
.talk { display: block; background: #e9d5b5; color: #3b2614; border: 3px solid #5a3a22; border-radius: 18px; padding: 10px 16px 12px; box-shadow: 0 5px 0 #0004; margin: 10px 0 0; animation: talkin .35s ease both; }
.talk .tx { min-width: 0; }
.talk .nm { display: block; font-size: 16px; font-weight: 800; letter-spacing: .02em; line-height: 1.15; color: #5a3a22; }
.t-leo .nm { color: #1f5bbf; } .t-mia .nm { color: #b8336e; } .t-gus .nm { color: #23784a; }
.talk .tx b:not(.nm) { color: #7a3d00; }
.talk span { display: block; font-size: 17px; font-weight: 800; line-height: 1.35; }
.t-nar span { font-style: italic; }
.talk em.coin { font-style: normal; color: #8a4f00; white-space: nowrap; }
.talk .partial { margin-top: 8px; }
.storybox { cursor: pointer; }
.storybox .talk span { font-size: clamp(17px, 2.1vw, 22px); }
.storynav { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.storynav .btn { min-height: 40px; padding: 6px 14px; font-size: 15px; }
.tapnext { color: var(--gold); font-weight: 900; animation: blink 1.4s infinite; }
@media (min-width: 720px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  .storynav { background: #140b28cc; border-radius: 999px; padding: 4px 6px 4px 12px; }
  .storynav .tapnext { padding-right: 10px; }
}

/* ---------- title: the whole picture is visible (contain), a blurred copy fills the rest ---------- */
#full { position: fixed; inset: 0; z-index: 40; overflow: auto; background: #1a1033; }
.titlebg { position: fixed; inset: 0; background: #1a1033 center / cover no-repeat; }   /* a tiny pre-blurred, pre-darkened picture: no CSS blur (blank pages on some iPhones) */
.titlewrap { position: relative; z-index: 2; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 0 20px; }
.titlepic { display: block; width: 100%; max-width: min(100vw, 980px); max-height: 62vh; object-fit: contain; aspect-ratio: 3 / 2; border-radius: 0; box-shadow: 0 10px 40px #0009; }
.titlecard { text-align: center; padding: 0 16px; margin-top: -26px; }
.logo { display: flex; flex-direction: column; line-height: .9; font-weight: 800; font-size: clamp(40px, 11vw, 80px); color: #fff3c4; text-shadow: 0 4px 0 #8a4fd8, 0 8px 0 #3b1d79, 0 12px 26px #000a; transform: rotate(-3deg); }
.logo span:nth-child(2) { color: var(--gold); font-size: 1.15em; }
.house { font-size: 18px; margin: 14px 0 12px; text-shadow: 0 2px 6px #000; }
.titlebtns { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.tiny { font-size: 13px; color: var(--muted); text-shadow: 0 1px 4px #000; }
@media (min-width: 720px) and (min-aspect-ratio: 5/4) {
  .titlewrap { justify-content: flex-end; }
  .titlepic { position: fixed; inset: 0; max-width: none; max-height: none; width: 100%; height: 100%; object-fit: contain; box-shadow: none; z-index: -1; }
  .titlecard { margin: 0 0 4vh; }
}

/* ---------- rooms ---------- */
.roomhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.roomhead h2 { margin: 0; font-size: 22px; line-height: 1; color: var(--gold); }
.skill { display: inline-block; margin-top: 4px; font-size: 13px; background: #3a2470; border-radius: 999px; padding: 2px 10px; color: var(--muted); }
.clues { display: flex; gap: 4px; }
.clue { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 2px dashed #8d7cc4; color: #8d7cc4; font-size: 14px; font-weight: 900; }
.clue.got { border: 2px solid var(--gold); background: var(--brass); color: #3b2300; clip-path: polygon(0 0, 60% 0, 60% 15%, 75% 15%, 75% 0, 100% 0, 100% 100%, 0 100%); animation: pop .5s; }
.floors { display: flex; gap: 6px; font-size: 24px; }
.floor { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #1a1033; border: 2px solid var(--line); }
.floor.on { background: #ffe9a6; border-color: var(--gold); box-shadow: 0 0 14px var(--gold); }
.keys { font-size: 22px; }

.qcard { background: var(--panel2); border: 2px solid var(--line); border-radius: var(--r); padding: 12px; }
.qcard.solved { border-color: var(--good); box-shadow: 0 0 0 3px #4fcf6344; }
.qhead { display: flex; align-items: center; gap: 8px; }
.qlabel { font-size: 15px; font-weight: 800; color: var(--teal); flex: 1; }
.say { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: #1a1033; font-size: 20px; flex: none; }
.qtext { font-size: 20px; line-height: 1.35; margin: 6px 0 10px; font-weight: 800; }
.qtext.small { font-size: 16px; color: var(--muted); }
.dots { display: flex; gap: 4px; } .dots i { width: 12px; height: 12px; border-radius: 50%; background: #1a1033; border: 2px solid var(--line); }
.dots i.ok { background: var(--good); border-color: var(--good); } .dots i.help { background: var(--help); border-color: var(--help); }
.dots.ten i { width: 10px; height: 10px; }
.how { font-size: 14px; color: var(--muted); margin: 8px 0 4px; text-align: center; }
.goal { font-size: 17px; line-height: 1.4; }
.demo-out { text-align: center; font-size: 20px; background: #1a1033; border-radius: 12px; padding: 8px; color: var(--gold); }

/* ---------- lock skins ---------- */
.lock { position: relative; border-radius: 16px; padding: 10px; background: #1a1033; border: 3px solid #b9791c; box-shadow: inset 0 0 0 2px #ffe08a55, 0 4px 0 #0005; }
.lockname { font: 800 13px 'Baloo 2', sans-serif; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.skin-tile { background: repeating-linear-gradient(90deg, #3a2516 0 34px, #432b19 34px 68px); }
.skin-memory { background: radial-gradient(circle at 30% 20%, #3c2a77, #1a1033); border-color: #8a5cf0; }
.skin-slider { background: linear-gradient(180deg, #16314a, #10203a); border-color: #3fa2d6; }
.skin-dial { background: radial-gradient(circle, #2b1c11, #160d07); }
.skin-balance { background: linear-gradient(180deg, #23304f, #161d33); border-color: #9bb0d6; }
.skin-pattern { background: linear-gradient(180deg, #fff6df, #f3e2b8); border-color: #b9791c; color: var(--ink); }
.skin-pattern .lockname, .skin-pattern .how { color: #8a5a12; }
.skin-repair { background: linear-gradient(180deg, #2c2140, #1a1328); border-color: #c08a3a; }

/* number boxes + the in-game pad */
.labels { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; margin-top: 8px; }
.labels label { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.nbox { min-width: 54px; height: 50px; border-radius: 12px; border: 3px dashed var(--gold); background: #fff8e6; color: var(--ink); font-size: 24px; font-weight: 900; padding: 0 8px; }
.nbox.filled { border-style: solid; }
.nbox.bad { border-color: var(--bad); border-style: solid; background: #ffe3e3; }
.nbox.editing { border-color: var(--teal); box-shadow: 0 0 0 4px #3fd6c655; }
.sentence .op { font-size: 28px; font-weight: 900; color: var(--gold); }
#pad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #140b28f2; border-top: 3px solid var(--gold2); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px #0008; }
.padrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 400px; margin: 0 auto; }
.padrow button, .kp button { height: 44px; border-radius: 14px; border: 0; background: var(--brass); color: #3b2300; font-size: 26px; font-weight: 900; box-shadow: 0 3px 0 #8a5a12; }
.padrow button:active, .kp button:active { transform: translateY(2px); box-shadow: none; }
.padrow .clr, .kp .clr { background: linear-gradient(180deg, #ffb59b, #f07a52); color: #4a1200; box-shadow: 0 3px 0 #a8401f; font-size: 15px; }
.padrow .del, .kp .del { background: linear-gradient(180deg, #ffe3a3, #f2b44a); font-size: 15px; }
.padrow .wide, .kp .wide { grid-column: 1 / -1; font-size: 20px; }
.padrow .ok, .kp .ok { background: linear-gradient(180deg, #8ff0a0, #3db556); color: #0d3b17; box-shadow: 0 3px 0 #1d7a33; }

/* train */
.yard { display: flex; flex-direction: column; gap: 8px; }
.crate { background: repeating-linear-gradient(0deg, #8a5a2b 0 12px, #7a4d22 12px 24px); border: 3px solid #5c3815; border-radius: 10px; padding: 6px; min-height: 52px; position: relative; }
.crate .tag { position: absolute; top: -10px; left: 10px; background: #5c3815; color: #ffe8c2; font-size: 11px; padding: 0 8px; border-radius: 6px; }
.pile { display: flex; flex-wrap: wrap; gap: 2px; }
.can { font-size: 24px; line-height: 1; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; display: inline-block; padding: 2px; border-radius: 6px; }
.can.dragging { opacity: .3; }
.rail { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; padding: 4px 0 8px; border-bottom: 6px double #9b8b78; }
.engine { font-size: 38px; line-height: 1; }
.car { flex: 1 1 64px; min-width: 64px; max-width: 110px; min-height: 84px; position: relative; background: linear-gradient(180deg, #d9573b, #a33a24); border: 3px solid #6b2214; border-radius: 10px 10px 6px 6px; padding: 4px 4px 18px; display: flex; flex-direction: column; justify-content: flex-end; touch-action: manipulation; }
.car .load { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.car .load .can { font-size: 21px; padding: 1px; }
.car .cno { position: absolute; top: 2px; left: 6px; font-size: 12px; color: #ffd9cc; }
.car .wheels { position: absolute; left: 6px; right: 6px; bottom: -10px; display: flex; justify-content: space-between; }
.car .wheels i { width: 18px; height: 18px; border-radius: 50%; background: #333; border: 3px solid #aaa; }
.car.over, .car.glow { box-shadow: 0 0 0 4px var(--gold); }
.car.pulse, .cell.pulse { animation: pulse 0.8s ease 3; box-shadow: 0 0 0 4px var(--bad); }
.dragghost { position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%, -60%) scale(1.3); font-size: 30px; filter: drop-shadow(0 4px 6px #0008); }

/* memory cards */
.mem { display: flex; gap: 10px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.mcard { flex: 1 1 130px; max-width: 190px; min-height: 160px; border-radius: 14px; border: 0; padding: 0; background: transparent; position: relative; }
.mcard.target { flex: 0 0 96px; background: var(--paper); color: var(--ink); border: 3px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mcard.target small { font-size: 12px; color: #8a5a12; } .mcard.target span { font: 800 30px 'Baloo 2', sans-serif; }
.mcard .back, .mcard .front { position: absolute; inset: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mcard .back { background: repeating-conic-gradient(#6b3fd0 0 25%, #7d52e0 0 50%) 0 0 / 22px 22px; border: 3px solid #c9b6ff; font: 800 48px 'Baloo 2'; color: #fff; }
.mcard .front { display: none; background: var(--paper); color: var(--ink); border: 3px solid #c9b6ff; padding: 6px; gap: 6px; }
.mcard.flipped { animation: flipin .45s ease; }
.mcard.flipped .back { display: none; } .mcard.flipped .front { display: flex; }
.mcard .front .mdl { gap: 3px; } .mcard .front .grp { min-width: 0; min-height: 0; padding: 2px 4px; border-width: 2px; } .mcard .front .it { font-size: 13px; }
.mcard .cap { font-size: 14px; font-weight: 900; }
.mcard.sel .front { border-color: var(--good); box-shadow: 0 0 0 4px #4fcf6388; }
@keyframes flipin { 0% { transform: scaleX(1); } 50% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* number line */
.nlwrap { background: #0c1a2c; border-radius: 12px; padding: 4px; touch-action: none; }
.nl { width: 100%; height: auto; display: block; }
.nl-line { stroke: #ffd36b; stroke-width: 4; stroke-linecap: round; }
.nl-tick { stroke: #ffe9b0; stroke-width: 2; }
.nl-num { fill: #fff; font: 800 17px Nunito; text-anchor: middle; }
.nl-arc { fill: none; stroke: var(--teal); stroke-width: 3; }
.nl-arc.bad { stroke: var(--bad); stroke-dasharray: 5 4; }
.nl-j { fill: var(--teal); font: 800 14px Nunito; text-anchor: middle; }
.nl-duck { font-size: 28px; text-anchor: middle; }
.hopbtns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.hop, .undo { min-height: 46px; padding: 0 12px; border-radius: 12px; border: 2px solid #3fa2d6; background: #16314a; font-weight: 900; font-size: 16px; }
.undo { border-color: var(--muted); background: transparent; }

/* dial */
.dials { display: flex; gap: 14px; justify-content: center; padding: 6px; }
.wheel { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wheel button { width: 64px; height: 44px; border-radius: 12px; border: 0; background: var(--brass); color: #3b2300; font-size: 20px; box-shadow: 0 3px 0 #8a5a12; }
.dwin { width: 70px; height: 84px; border-radius: 14px; background: linear-gradient(180deg, #111 0%, #3b3b3b 20%, #f2f2f2 50%, #3b3b3b 80%, #111 100%); border: 4px solid #b9791c; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.dwin span { font: 800 46px 'Baloo 2', sans-serif; color: #1a1033; }
.dwin span.roll { animation: roll .2s ease; }

/* bell grid */
.cargo { background: var(--paper); color: var(--ink); border: 3px solid var(--gold2); border-radius: 10px; padding: 6px 10px; text-align: center; margin-bottom: 8px; transform: rotate(-1deg); font-size: 16px; }
.gridwrap { display: flex; justify-content: center; }
.grid { display: grid; grid-template-columns: repeat(var(--cn), 44px); gap: 5px; touch-action: none; }
.cell { width: 44px; height: 44px; border-radius: 50%; border: 2px dashed #ffe08a88; background: #00000033; font-size: 22px; padding: 0; display: grid; place-items: center; }
.cell.on { border: 2px solid var(--gold); background: radial-gradient(circle, #fff3b0, #e0a43a); }
.cell.flash { animation: flash .5s ease; }
.ringrow { display: flex; justify-content: center; }
.ring { min-height: 46px; border-radius: 999px; border: 2px solid var(--gold); background: #3a2516; padding: 0 18px; font-weight: 900; font-size: 16px; }
.left { font-size: 15px; } .left b { color: var(--gold); font-size: 20px; }

/* balance */
.scale { position: relative; height: 250px; margin: 6px auto 0; max-width: 520px; }
.beam { position: absolute; left: 6%; right: 6%; top: 34px; height: 10px; border-radius: 6px; background: var(--brass); transition: transform .8s cubic-bezier(.3, 1.6, .5, 1); }
.post { position: absolute; left: calc(50% - 8px); top: 30px; width: 16px; bottom: 0; background: linear-gradient(90deg, #b9791c, #ffe08a, #b9791c); border-radius: 6px 6px 0 0; z-index: 0; }
.post::before { content: ''; position: absolute; left: -20px; right: -20px; bottom: 0; height: 12px; background: #8a5a12; border-radius: 6px; }
.pan { position: absolute; top: 44px; width: 44%; display: flex; flex-direction: column; align-items: center; transition: transform .8s cubic-bezier(.3, 1.6, .5, 1); z-index: 1; }
.pan.L { left: 0; } .pan.Rt { right: 0; }
.pan small { font-size: 13px; color: var(--muted); margin-top: 2px; }
.dish { width: 100%; min-height: 100px; background: #ffffff14; border: 3px solid #9bb0d6; border-top: 0; border-radius: 0 0 50% 50% / 0 0 40% 40%; padding: 6px; display: flex; align-items: center; justify-content: center; }
.dish .mdl { gap: 3px; } .dish .grp { padding: 2px 4px; min-width: 0; min-height: 0; max-width: none; flex-wrap: nowrap; border-width: 2px; border-radius: 12px; } .dish .it { font-size: 11px; }
.pan small { white-space: nowrap; }

/* pattern notes */
.staff { position: relative; background: #fffdf6; border-radius: 10px; min-height: 92px; padding: 10px 8px; border: 2px solid #d9c7a0; }
.staff.over { box-shadow: 0 0 0 4px var(--gold); }
.staff .lines { position: absolute; inset: 18px 8px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.staff .lines i { height: 2px; background: #c9b48a; }
.notes { position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; min-height: 70px; }
.notes .ph { color: #b09a70; font-size: 15px; }
.snote { min-width: 50px; height: 54px; border-radius: 27px 27px 27px 6px; border: 0; font: 800 26px 'Baloo 2'; color: #fff; background: #2f3a63; transform: translateY(calc((var(--k) - 1) * 6px)); animation: pop .3s; }
.snote.sym { background: #b9791c; border-radius: 50%; width: 46px; min-width: 46px; height: 46px; }
.palette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.note-tile { min-width: 56px; height: 56px; border-radius: 28px 28px 28px 8px; border: 3px solid #2f3a63; background: #fff; color: #2f3a63; font: 800 26px 'Baloo 2'; touch-action: none; }
.note-tile.dragghost { width: 56px; }
.clear { min-height: 56px; border-radius: 14px; border: 2px solid #b09a70; background: transparent; color: #8a5a12; padding: 0 12px; }

/* keypad + choice (generated questions) */
.pic { display: flex; justify-content: center; background: #fffdf6; border-radius: 12px; padding: 8px; margin-bottom: 8px; color: var(--ink); }
.kp-wrap { display: flex; flex-direction: column; gap: 6px; }
.kp-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kp-note { min-height: 18px; color: #ffb59b; font-size: 14px; }
.kp-disp.bad { border-color: var(--bad); }
.kp-disp { cursor: pointer; min-width: 120px; height: 58px; border-radius: 14px; background: #fff8e6; color: var(--ink); border: 3px dashed var(--gold); display: grid; place-items: center; font: 800 34px 'Baloo 2'; padding: 0 12px; }
.kp-disp.filled { border-style: solid; }
.kp { display: grid; grid-template-columns: repeat(4, 66px); gap: 6px; }
.choices { display: grid; gap: 8px; }
.choice { min-height: 56px; border-radius: 14px; border: 3px solid #c9b6ff; background: #fffdf6; color: var(--ink); font: 800 24px 'Baloo 2'; }
.choice.sel { border-color: var(--good); box-shadow: 0 0 0 4px #4fcf6366; }
@media (min-width: 720px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  .kp-wrap { flex-direction: row; align-items: center; justify-content: center; }
  .kp-wrap .pic { margin: 0; flex: 1; }
  .kp { grid-template-columns: repeat(4, 62px); } .kp button { height: 44px; }
  .choices { grid-template-columns: repeat(3, 1fr); }
}

/* picture models */
.mdl { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; color: var(--ink); }
.grp { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 1px; max-width: 92px; min-width: 44px; min-height: 44px; padding: 5px 6px; border-radius: 22px; border: 3px solid #8a5cf0; background: #f3eeff; }
.groups.wide .grp { max-width: 118px; }
.grp.empty { border-style: dashed; background: transparent; color: #8a5cf0; }
.grp.hl { border-color: var(--gold2); background: #fff2c6; }
.it { font-size: 18px; line-height: 1.1; }
.run { position: absolute; bottom: -12px; right: -6px; background: var(--gold); color: #3b2300; border-radius: 999px; font: 800 13px Nunito; padding: 0 7px; border: 2px solid #fff; }
.array { flex-direction: column; align-items: flex-start; gap: 4px; }
.arow { position: relative; display: flex; gap: 2px; padding: 2px 34px 2px 6px; border-radius: 10px; background: #f3eeff; border: 2px solid #c9b6ff; }
.arow.empty { border-style: dashed; background: transparent; min-width: 120px; }
.arow .run { bottom: auto; top: 50%; transform: translateY(-50%); right: 2px; }
.asrows { flex-direction: column; align-items: flex-start; } .asrows .grp { max-width: none; min-width: 200px; justify-content: flex-start; border-radius: 10px; }
.pop { animation: pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.partial { background: #fff; border-radius: 12px; padding: 8px 6px 14px; }
.partial .nl { background: #0c1a2c; border-radius: 10px; }
.mnote { margin: 6px 0 0; font-size: 14px; text-align: center; }
.mstage { background: #fffdf6; border-radius: 14px; padding: 12px 8px 18px; min-height: 110px; display: flex; justify-content: center; align-items: center; }
.mstage .nl { background: #0c1a2c; border-radius: 10px; }
.msteps { text-align: center; font-size: 19px; min-height: 30px; margin: 10px 0 0; }
.msteps .final { color: var(--gold); font-size: 22px; }

/* rewards */
.reward { text-align: center; }
.reward h3 { margin: 4px 0 10px; font-size: 22px; color: var(--gold); }
.reward .tipzone { text-align: left; }
.cargocard { display: inline-flex; flex-direction: column; gap: 6px; background: var(--paper); color: var(--ink); border: 4px solid var(--gold2); border-radius: 14px; padding: 10px 14px 18px; transform: rotate(-2deg); }
.cargocard span { font-size: 12px; letter-spacing: .1em; color: #8a5a12; } .cargocard b { font: 800 26px 'Baloo 2'; }
.keyhalf .key { height: 90px; width: auto; color: var(--gold); filter: drop-shadow(0 0 10px #ffcf4d); }
.keyjoin { position: relative; width: 240px; height: 110px; margin: 0 auto; }
.kh { position: absolute; inset: 0; touch-action: none; cursor: grab; transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.kh .key { width: 100%; height: 100%; color: var(--gold); filter: drop-shadow(0 0 8px #ffcf4d88); }
.kh.kl { transform: translate(-34px, -8px) rotate(-10deg); } .kh.kr { transform: translate(34px, 8px) rotate(10deg); }
.kh.over .key { filter: drop-shadow(0 0 16px #fff); }
.keyjoin.joined .kh { transform: none; }
.keyjoin.joined .key { animation: glowkey 1.2s ease .6s; }
.stamp { display: inline-block; font: 800 22px 'Baloo 2'; color: #c0392b; border: 4px solid #c0392b; border-radius: 12px; padding: 4px 16px; transform: rotate(-8deg); background: #fff3; }
.score { font-size: 18px; } .score b { color: var(--gold); font-size: 22px; }
.skillbars { display: grid; gap: 6px; max-width: 360px; margin: 0 auto; }
.sb { display: flex; justify-content: space-between; background: #1a1033; border-radius: 10px; padding: 6px 12px; }
.board .tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.taskcard { border-radius: 16px; border: 3px solid var(--gold2); background: linear-gradient(180deg, #3a2470, #2a1a52); padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; min-height: 110px; }
.taskcard .fl { font-size: 13px; color: var(--muted); } .taskcard b { font: 800 19px 'Baloo 2'; color: var(--gold); line-height: 1.1; }
.taskcard.done { border-color: var(--good); background: linear-gradient(180deg, #24513a, #183a29); }
.solution .msteps b { color: var(--gold); }

/* scene effects */
.doorglow { position: absolute; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #fff5c0cc, #ffcf4d55 40%, #ffcf4d00 70%); animation: breathe 1.8s ease-in-out infinite; mix-blend-mode: screen; }
.dooropen { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, #fff8d8 0%, #ffe08acc 20%, #ffcf4d00 60%); animation: open 2s ease forwards; mix-blend-mode: screen; }
.sparkles { position: absolute; inset: 0; background-image: radial-gradient(#fff 1.5px, transparent 2px), radial-gradient(#ffe08a 1.5px, transparent 2px); background-size: 60px 60px, 90px 90px; background-position: 0 0, 30px 40px; animation: twinkle 3s linear infinite; opacity: .6; }
.finger { position: absolute; z-index: 5; font-size: 36px; pointer-events: none; transform: translate(-30%, -10%); transition: left .4s ease, top .4s ease; filter: drop-shadow(0 3px 4px #0009); }
.finger.tap { animation: tapf .25s ease; }
.toast { position: fixed; left: 50%; top: calc(var(--top) + 12px); transform: translateX(-50%); z-index: 70; background: var(--brass); color: #3b2300; font-weight: 900; padding: 10px 20px; border-radius: 999px; box-shadow: 0 8px 20px #0007; animation: drop .4s cubic-bezier(.2, 1.5, .4, 1); white-space: nowrap; }
.toast.out { opacity: 0; transition: opacity .4s; }

/* win */
.win h3 { color: var(--gold); margin: 16px 0 6px; }
.winhead { display: flex; gap: 14px; align-items: center; }
.winhead h2 { margin: 0; color: var(--gold); font-size: 26px; } .winhead p { margin: 2px 0 0; }
.gusframe { width: 96px; height: 120px; flex: none; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #3b2a10, #0b0614 70%); border: 3px solid var(--gold); box-shadow: 0 0 18px #ffcf4d88; }
.gusframe img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.coinsum { margin-top: 12px; background: #1a1033; border-radius: 16px; padding: 10px 14px; text-align: center; }
.coinsum .big { font: 800 34px 'Baloo 2'; color: var(--gold); }
.coinsum ul { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.coinsum li { background: #2f1e5a; border-radius: 999px; padding: 3px 12px; font-size: 14px; } .coinsum li b { color: var(--gold); }
.coinsum small { color: var(--muted); }
.rep { width: 100%; border-collapse: collapse; font-size: 15px; }
.rep th { font-size: 12px; color: var(--muted); text-align: center; padding: 4px; } .rep th:first-child { text-align: left; }
.rep td { padding: 8px 4px; border-top: 1px solid var(--line); text-align: center; font-weight: 900; font-size: 18px; }
.rep td:first-child { text-align: left; font-size: 15px; } .rep td small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.rep .g { color: var(--good); } .rep .y { color: var(--help); } .rep .p { color: #b9a3ff; }
.nexthouse { text-align: center; color: var(--muted); }

/* animations */
@keyframes fadein { from { opacity: 0; } }
@keyframes pop { 0% { transform: scale(.4); } 100% { transform: none; } }
@keyframes popin { from { transform: translateY(40%) scale(.7); } }
@keyframes bounce { 0%, 100% { transform: none; } 30% { transform: translateY(-14%) scale(1.04); } 60% { transform: translateY(0) scale(.98, 1.02); } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6%) rotate(-3deg); } 50% { transform: translateX(5%) rotate(3deg); } 80% { transform: translateX(-3%); } }
.shake { animation: shake .4s ease; }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes flash { 0% { box-shadow: 0 0 0 0 #fff; transform: scale(1); } 40% { box-shadow: 0 0 20px 8px #fff3b0; transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes roll { from { transform: translateY(-40%); opacity: .2; } }
@keyframes breathe { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes open { from { opacity: 0; } to { opacity: 1; } }
@keyframes twinkle { to { background-position: 0 60px, 30px 130px; } }
@keyframes tapf { 50% { transform: translate(-30%, -10%) scale(.8); } }
@keyframes drop { from { transform: translate(-50%, -30px); opacity: 0; } }
@keyframes talkin { from { transform: translateY(10px); } }
@keyframes blink { 50% { opacity: .4; } }
@keyframes drift { from { transform: scale(1.05); } to { transform: scale(1.15) translateY(-2%); } }
@keyframes glowkey { 50% { filter: drop-shadow(0 0 26px #fff); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; } }

/* walking through a door (same feel as the main site's school gate) */
.walk-in { position: fixed; z-index: 300; background: center / cover no-repeat; transform-origin: 50% 50%; transition: transform .85s cubic-bezier(.55, 0, .75, .4); will-change: transform; pointer-events: none; }
.walk-in.go { transform: scale(5.5); }
.walk-glow { position: fixed; inset: 0; z-index: 301; background: #fff3d6; opacity: 0; pointer-events: none; transition: opacity .35s ease-in .5s; }
.walk-glow.go { opacity: 1; }
.walk-glow.go.out { opacity: 0; transition: opacity .7s ease-out 0s; }
#frame.walked-in, #room.walked-in { animation: walk-settle .9s cubic-bezier(.2, .7, .3, 1); }
@keyframes walk-settle { from { transform: scale(1.08); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .walk-glow { transition: opacity .3s ease !important; } }

/* ---------- point-and-click rooms ---------- */
#room { flex: 1; align-self: stretch; min-height: 0; display: flex; flex-direction: column; position: relative; width: 100%; }
#vpwrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
#vp { flex: none; width: 100%; overflow: hidden; background: #000; }
#rscene { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
#rscene .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#rscene .bg.over { transition: opacity 1.6s ease; }
#rfx, #spots { position: absolute; inset: 0; }
#rfx { pointer-events: none; }
.panbtn { display: none; }
#friend { position: absolute; left: 4px; top: calc(100vw / 1.5 + 8px); height: min(200px, calc(100% - 100vw / 1.5 - 12px)); pointer-events: none; filter: drop-shadow(0 6px 8px #0008); z-index: 3; }
#friend.popin { animation: popin .6s cubic-bezier(.2, 1.5, .4, 1); }
#friend.shake, .ovfriend.shake { animation: shake .45s ease; }
#say { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 10px 96px; background: var(--panel) radial-gradient(ellipse at 20% 0%, #3a2470, transparent 70%); }
#say::after { content: 'Tap anything in the room to explore.'; display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }
#say .talk { margin-top: 8px; }
#inv { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #140b28; border-top: 2px solid var(--gold2); overflow-x: auto; min-height: 72px; }
.invlabel { font-size: 24px; flex: none; }
.slot { position: relative; flex: none; width: 54px; height: 54px; border-radius: 14px; border: 2px solid var(--gold2); background: radial-gradient(circle, #3a2470, #241645); display: grid; place-items: center; padding: 0; }
.slot .ic { font-size: 28px; line-height: 1; display: grid; place-items: center; } .slot .ic svg { width: 40px; height: 30px; color: var(--gold); }
.slot b { position: absolute; right: -4px; bottom: -4px; background: var(--gold); color: #3b2300; border-radius: 999px; font-size: 12px; min-width: 20px; padding: 0 5px; }
.slot.empty { border-style: dashed; border-color: #6c5aa8; background: transparent; } .slot.empty b { background: #3a2470; color: #8d7cc4; position: static; }
/* hotspots: invisible, at least 44 × 44 px */
.hs { position: absolute; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; background: transparent; border: 0; border-radius: 14px; padding: 0; z-index: 2; }
.hs:focus-visible { outline: 3px dashed #fff8; }
.hs.wig { animation: wig .4s ease; }
.hs .ok { position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--good); color: #fff; font: 900 13px Nunito; display: grid; place-items: center; font-style: normal; box-shadow: 0 0 8px #4fcf63; }
.hs .tw { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, #fff 0 2px, #fff6 3px, transparent 9px); animation: twinkle2 5s ease-in-out infinite; }
.hs.nudge { box-shadow: 0 0 0 3px #ffe08aaa, 0 0 26px 8px #ffcf4d88; animation: nudge 1.2s ease-in-out 4; }
.hs .keyglint { position: absolute; inset: 0; display: grid; place-items: center; animation: glint 1.6s ease-in-out infinite; pointer-events: none; }
.hs .keyglint svg { width: 60px; height: 40px; color: var(--gold); filter: drop-shadow(0 0 8px #fff); }
.bulb { position: absolute; width: 1.6%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, #ffe9a0 45%, #ffcf4d00 72%); box-shadow: 0 0 14px 6px #ffd76a99; animation: breathe2 2.4s ease-in-out infinite; }
.spark { position: absolute; transform: translate(-50%, -50%); font-size: 26px; pointer-events: none; animation: spark .9s ease-out forwards; z-index: 4; }
.fly { position: fixed; z-index: 80; font-size: 34px; transform: none; transition: transform .8s cubic-bezier(.5, -0.3, .4, 1); pointer-events: none; margin: -20px 0 0 -20px; filter: drop-shadow(0 0 10px #ffcf4d); }
.fly svg { width: 60px; height: 40px; color: var(--gold); }
@keyframes wig { 30% { transform: translate(-50%, -50%) rotate(-4deg); } 60% { transform: translate(-50%, -50%) rotate(3deg); } }
@keyframes twinkle2 { 0%, 70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 80% { opacity: .9; transform: translate(-50%, -50%) scale(1.3) rotate(45deg); } 90% { opacity: 0; } }
@keyframes nudge { 50% { box-shadow: 0 0 0 5px #fff8, 0 0 40px 14px #ffcf4daa; } }
@keyframes glint { 50% { transform: scale(1.12); filter: brightness(1.3); } }
@keyframes breathe2 { 50% { opacity: .65; } }
@keyframes spark { from { opacity: 1; transform: translate(-50%, -50%) scale(.6); } to { opacity: 0; transform: translate(-50%, -110%) scale(1.4); } }
/* wide screens: whole room picture, line box over its bottom, bag under it */
@media (min-width: 720px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  #room { background: radial-gradient(ellipse at center, #2b1a55, #120a24); }
  #vpwrap { display: block; }
  #vp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; }
  #rscene { width: auto; height: min(100%, 100vw / 1.5); max-width: 100%; }
  #say { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(66%, 760px); background: transparent; padding: 0; overflow: visible; z-index: 4; }
  #say::after { display: none; }
  #friend { top: auto; bottom: 0; right: auto; left: 1%; height: 44%; }
  #inv { justify-content: center; }
}
/* the close-up overlay for a puzzle */
#ov { position: fixed; inset: 0; z-index: 45; background: #0d0720ee; display: flex; justify-content: center; }
.ovbox { width: 100%; max-width: 860px; height: 100%; display: flex; flex-direction: column; background: var(--panel); animation: zoomin .35s ease; }
.ovhead { position: relative; flex: none; height: 118px; background-size: 420% auto; background-repeat: no-repeat; border-bottom: 3px solid var(--gold2); }
.ovhead::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 40%, #0d0720cc); }
.ovtitle { position: absolute; left: 14px; bottom: 8px; z-index: 2; font: 800 22px 'Baloo 2', sans-serif; color: var(--gold); text-shadow: 0 2px 6px #000; }
.ovx { position: absolute; left: 10px; top: 10px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff8; background: #0009; color: #fff; font-size: 22px; padding: 0; }
.ovfriend { position: absolute; right: 8px; bottom: -6px; height: 128px; z-index: 2; filter: drop-shadow(0 4px 8px #000a); }
.ovbody { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 28px; }
.ovbody.center { text-align: center; }
.ovbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 2px solid var(--line); }
.ovbar .ovtitle { position: static; } .ovbar .ovx { position: static; }
.ovbox.item { height: auto; max-height: 100%; margin: auto 12px; border-radius: 20px; border: 3px solid var(--gold2); max-width: 520px; }
.itembig { margin: 14px 0; } .bigpiece { font-size: 80px; } .bigpiece b { font-size: 40px; color: var(--gold); }
.keyhalf svg { color: var(--gold); }
.slot .ic svg, .btn .ic svg { color: var(--gold); }
.btn .ic svg { width: 36px; height: 24px; vertical-align: middle; color: #3b2300; }
.kh.ghostkey .key { color: #ffffff22; filter: none; }
.wheel small { font-size: 13px; color: var(--gold); text-transform: uppercase; }
@media (min-width: 720px) and (min-height: 560px) { .ovbox { height: calc(100% - 32px); margin-top: 16px; border-radius: 22px; overflow: hidden; border: 2px solid #ffffff22; } .ovhead { height: 150px; } .ovfriend { height: 160px; } }
@keyframes zoomin { from { transform: scale(.92); } }

/* clue cards and their jigsaw pieces (card = 200 × 140) */
.ccard { position: relative; width: 200px; height: 140px; border-radius: 10px; color: var(--ink); font-family: 'Baloo 2', sans-serif; overflow: hidden; }
.ccard > * { position: absolute; white-space: nowrap; line-height: 1; }
.ccard.cargo { background: #fffdf6; border: 4px solid var(--gold2); box-sizing: border-box; }
.ccard.bells { background: linear-gradient(180deg, #fff6df, #f1dfb2); border: 4px solid #8a5a12; box-sizing: border-box; }
.ccard .ct { left: 8px; top: 5px; font: 800 10px Nunito, sans-serif; letter-spacing: .08em; color: #8a5a12; }
.ccard .ca { left: 0; width: 96px; top: 22px; text-align: right; font-size: 24px; font-weight: 800; }
.ccard .cb { left: 100px; top: 22px; font-size: 24px; font-weight: 800; padding-left: 6px; }
.ccard .cg { display: inline-block; border: 2px solid #8a5cf0; border-radius: 12px; background: #f3eeff; padding: 2px 6px; font-size: 15px; }
.ccard .g1 { left: 10px; top: 72px; } .ccard .g2 { left: 10px; top: 102px; } .ccard .g3 { left: 108px; top: 72px; } .ccard .g4 { left: 108px; top: 102px; }
.ccard .br { left: 28px; font-size: 20px; letter-spacing: 6px; } .ccard .r1 { top: 20px; } .ccard .r2 { top: 44px; }
.ccard .bt { left: 6px; top: 82px; width: 92px; white-space: normal; text-align: center; font-size: 18px; font-weight: 800; color: #5a3a22; }
.ccard .matd { left: 106px; top: 76px; width: 84px; height: 56px; }
.ccard .mat { position: absolute; left: 4px; top: 14px; width: 76px; height: 26px; border-radius: 6px; background: repeating-linear-gradient(90deg, #a0662e 0 6px, #7f4d1f 6px 12px); }
.ccard .kk { position: absolute; left: 30px; top: 10px; font-size: 22px; font-style: normal; transform: rotate(-20deg); }
.ccard .matd small { position: absolute; left: 0; top: 46px; font: 800 9px Nunito, sans-serif; color: #8a5a12; }
.pc { position: relative; overflow: hidden; filter: drop-shadow(0 2px 2px #0006); }
.pcfull { position: absolute; width: 200px; height: 140px; }
.pmini { display: block; width: 46px; height: 34px; overflow: hidden; } .pmini .pc { transform: scale(.42); transform-origin: 0 0; }
.cmini { display: block; width: 48px; height: 34px; overflow: hidden; } .cmini .ccard { transform: scale(.24); transform-origin: 0 0; }
.cardbig { width: 300px; height: 210px; margin: 8px auto; } .cardbig > * { transform: scale(1.5); transform-origin: 0 0; }
.pboard { position: relative; width: 200px; height: 140px; }
.pslot { position: absolute; } .pslot.missing { opacity: .14; filter: grayscale(1); }
.fly .pmini, .fly .cmini { transform: scale(1.4); }
@media (max-width: 360px) { .cardbig { width: 260px; height: 182px; } .cardbig > * { transform: scale(1.3); } }

/* ---------- zoom into a place (title → city, confirm → city, city → lighthouse) ---------- */
.zoomer { transition: transform .85s cubic-bezier(.55, 0, .75, .4); will-change: transform; }
.zoomer.go { transform: scale(5.5); }
#city.walked-in, #full.walked-in { animation: walk-settle .9s cubic-bezier(.2, .7, .3, 1); }

/* ---------- art placeholders (until the real picture file is dropped in) ---------- */
.artph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #fff8ec; overflow: hidden; }
.artph::before { content: ''; position: absolute; inset: 4%; border: 2px dashed #ffffff70; border-radius: 16px; pointer-events: none; }
.artph .pi { font-size: clamp(40px, 9vw, 110px); line-height: 1; filter: drop-shadow(0 6px 12px #0006); }
.artph .pc { position: relative; font: 800 clamp(14px, 2.2vw, 24px) 'Baloo 2', sans-serif; background: #1a103399; padding: 4px 14px; border-radius: 999px; }
.mapph .roads { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapph .roads line { stroke: #f4e4c1; stroke-width: .9; stroke-dasharray: 2 1.4; stroke-linecap: round; opacity: .85; vector-effect: non-scaling-stroke; stroke-width: 3; }
.mapph .fogtint { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #b48ae633, #6a45a866 80%); }
.mapph .pc { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); white-space: nowrap; }

/* ---------- pick your grade ---------- */
.gpick { position: relative; z-index: 2; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
.gcard { width: 100%; max-width: 760px; background: #1a1033e8; border: 2px solid #ffffff22; border-radius: 22px; padding: 22px 16px 20px; text-align: center; box-shadow: 0 16px 40px #0009; animation: fadein .5s ease both; }
.gcard h2 { margin: 0 0 4px; font-size: clamp(26px, 6.4vw, 38px); line-height: 1.1; color: #fff3c4; text-shadow: 0 3px 0 #3b1d79; }
.gcard p { margin: 0 0 16px; color: var(--muted); font-size: 16px; }
.ggrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 86px; padding: 10px 8px; border-radius: 16px; border: 2px solid var(--gold2); background: #3a2470; box-shadow: 0 4px 0 #1a1033; }
.gbtn b { font: 800 23px/1.1 'Baloo 2', sans-serif; color: #fff3c4; }
.gbtn small { font-size: 13.5px; line-height: 1.2; color: var(--gold); }
.gbtn.on { background: #4f3394; box-shadow: 0 0 0 3px #ffcf4d99, 0 4px 0 #1a1033; }
.gbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a1033; }
.gback { margin-top: 16px; display: flex; justify-content: center; }
@media (min-width: 600px) { .ggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gbtn { min-height: 96px; } }

/* ---------- opening: one WHOLE picture per beat (ChatGPT art), slow Ken Burns, line box + buttons under it ----------
   No blur filters here: big blurred full-screen layers blank the page on some iPhones. */
#full:has(.comic) { overflow: hidden; }
.comic { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse 90% 70% at 50% 35%, #3a2470, #1a1033 60%, #0d0719); cursor: pointer; }
.ctop { position: relative; z-index: 2; flex: none; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
.cdots { justify-self: center; display: flex; gap: 7px; }
.cdots i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff38; transition: background .4s; }
.cdots i.on { background: var(--gold); }
.csound.off { opacity: .8; }
.cstage { position: relative; z-index: 1; flex: 1; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.cpic { position: relative; width: min(100cqw, 100cqh * 1.5); aspect-ratio: 3 / 2; overflow: hidden; background: #120a24; box-shadow: 0 10px 40px #0009; }
.cline { position: relative; z-index: 2; flex: none; width: 100%; max-width: 860px; margin: 0 auto; padding: 2px 14px calc(14px + env(safe-area-inset-bottom)); }
.ccap .talk { min-height: 92px; margin-top: 8px; }
.ccap .talk span { font-size: clamp(18px, 2.2vw, 23px); }
.ccap .talk.wait { opacity: .35; animation: none; }
.ccap .talk.jolt { animation: jolt .45s ease; }
@keyframes jolt { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.cnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.cnav.one { grid-template-columns: 1fr; }
.cnav .btn { min-height: 52px; padding: 8px 12px; font-size: 18px; white-space: nowrap; }
.cnav .btn.ghost { background: #140b28aa; }
.cnav .btn.big { font-size: clamp(20px, 5.4vw, 26px); animation: popin .5s cubic-bezier(.2, 1.5, .4, 1) both, pulse 1.6s ease-in-out .8s infinite; }
@media (min-width: 720px) { .cpic { border-radius: 18px; } .cnav.one { max-width: 420px; margin-left: auto; margin-right: auto; } }
/* phones held upright: slim top bar, a 3:2 picture slot across the full width, caption, buttons */
@media (max-width: 719px) and (orientation: portrait) {
  .comic { justify-content: flex-start; }
  .ctop { padding: calc(4px + env(safe-area-inset-top)) 10px 4px; grid-template-columns: 38px 1fr 38px; }
  .ctop .tb { width: 38px; height: 38px; font-size: 18px; }
  .cstage { flex: none; height: calc(100vw / 1.5); margin-top: auto; }
  .cline { margin-bottom: auto; }   /* picture + line box + buttons sit in the middle, no empty band under them */
}

/* picture layers: the outer box does the change (crossfade or zoom-in), the inner .kb box does the slow camera move */
.oplayer { position: absolute; inset: 0; overflow: hidden; transition: opacity .8s ease, transform .8s cubic-bezier(.4, 0, .2, 1); }
.oplayer.fadein, .oplayer.fadeout { opacity: 0; }
.oplayer.zoomin { opacity: 0; transform: scale(.94); }
.oplayer.zoomout { opacity: 0; transform: scale(1.35); transition: opacity .7s ease-in, transform .8s cubic-bezier(.5, 0, .75, .3); }
.kb { position: absolute; inset: 0; transform-origin: 50% 50%; }
.kb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 3.6s cubic-bezier(.45, 0, .3, 1); }
/* 2nd line on the same picture: a gentle camera move instead of a new picture */
.kb.cam-right > img { transform: scale(1.1) translateX(-3.5%); }
.kb.cam-left > img { transform: scale(1.1) translateX(3.5%); }
.kb.cam-up > img { transform: scale(1.1) translateY(3.5%); }
.kb.cam-in > img { transform: scale(1.12); }
.kb-in { animation: kb-in 14s ease-out both; }
.kb-out { animation: kb-out 14s ease-out both; }
.kb-left { animation: kb-left 14s ease-in-out both; }
.kb-right { animation: kb-right 14s ease-in-out both; }
.kb-up { transform-origin: 50% 30%; animation: kb-up 14s ease-out both; }
.kb-pan3 { animation: kb-in 14s ease-out both; }
@keyframes kb-in { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes kb-out { from { transform: scale(1.1); } to { transform: scale(1.01); } }
@keyframes kb-left { from { transform: scale(1.08) translateX(2.5%); } to { transform: scale(1.08) translateX(-2.5%); } }
@keyframes kb-right { from { transform: scale(1.08) translateX(-2.5%); } to { transform: scale(1.08) translateX(2.5%); } }
@keyframes kb-up { from { transform: scale(1.02) translateY(1.5%); } to { transform: scale(1.12) translateY(-1%); } }
/* phones: the three doors are small, so the camera visits them one by one, left to right */
@media (max-width: 719px) and (orientation: portrait) {
  .kb-pan3 { animation: kb-pan3 10s ease-in-out both; }
}
@keyframes kb-pan3 { 0%, 12% { transform: scale(1.75) translateX(20%); } 44%, 56% { transform: scale(1.75) translateX(0); } 88%, 100% { transform: scale(1.75) translateX(-20%); } }
@media (prefers-reduced-motion: reduce) { .kb { animation: none !important; } .oplayer { transition: opacity .4s ease !important; transform: none !important; } }

/* a picture that is not drawn yet: a tidy card with its file name and what it will show */
.opph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 6% 10%; text-align: center; background: linear-gradient(160deg, #3a2470, #241645 55%, #1a1033); }
.opph::before { content: ''; position: absolute; inset: 4%; border: 2px dashed #ffffff55; border-radius: 16px; pointer-events: none; }
.opph .pi { font-size: clamp(30px, 7cqw, 70px); line-height: 1; opacity: .85; }
.opph b { font: 800 clamp(16px, 3.4cqw, 30px)/1.2 'Baloo 2', sans-serif; color: #fff3c4; }
.opph small { max-width: 34em; font-size: clamp(13px, 2.2cqw, 19px); line-height: 1.35; color: var(--muted); }

/* picture 9 while a grade's house is not drawn yet: a close-up of the city map, a glowing marker and the house name */
.mcrop { position: absolute; inset: 0; overflow: hidden; background: #120a24; }
.mcrop img { position: absolute; max-width: none; display: block; }
.hpin { position: absolute; z-index: 2; transform: translate(-50%, -50%); pointer-events: none; }
.hring { display: block; width: 11cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff6c0cc 0 14%, #ffd36b77 34%, #ffd36b00 70%); box-shadow: 0 0 0 .3cqw #fff3b0aa; opacity: .5; }
.hpin.on .hring { opacity: 1; animation: hpulse 1.2s ease-in-out infinite alternate; }
.hlabel { position: absolute; left: 50%; top: 100%; transform: translate(-50%, .6cqw); white-space: nowrap; font: 800 max(13px, 2.4cqw)/1.2 'Baloo 2', sans-serif; color: #fff3c4; background: #1a1033e6; border: 2px solid var(--gold); border-radius: 999px; padding: .3cqw 1.6cqw; box-shadow: 0 .4cqw 1cqw #0008; }
@keyframes hpulse { from { transform: scale(.85); } to { transform: scale(1.15); } }
.hname { font: 800 4.2cqw/1.15 'Baloo 2', sans-serif; color: #2b1a55; background: #fff8ecee; padding: .4cqw 2.4cqw; border-radius: 999px; box-shadow: 0 .5cqw 1.2cqw #0004; }

/* ---------- city: the real map ---------- */
.cmap:not(.ph) .dzone { width: auto; height: auto; transform: translate(-50%, -50%); z-index: 2; }
.cmap:not(.ph) .dlabel { position: static; transform: none; }
.cmap:not(.ph) .dzone.wig { animation: wigc .4s ease; }
@keyframes wigc { 30% { transform: translate(-50%, -50%) rotate(-3deg); } 60% { transform: translate(-50%, -50%) rotate(2deg); } }
.dzone.mine .dlabel { border-color: var(--gold); box-shadow: 0 0 0 2px #ffcf4d66, 0 3px 10px #0007; }
.lhmark:not(.goal) .pin { animation: none; }
.lhmark.goal { z-index: 4; }
.lhmark.goal .pin { animation: lhpulse 1.6s ease-out infinite, hbounce 1.1s ease-in-out infinite; }
.lhmark.goal .lhname { background: #3a2470ee; border: 1.5px solid var(--gold); }
.lhmark.goal.nudge .pin { animation: lhpulse 1.6s ease-out infinite, pulse .5s ease 3; }
@keyframes hbounce { 50% { transform: translateY(-20%); } }
.cdbtn.mine { border-color: var(--gold); box-shadow: inset 0 0 0 2px #ffcf4d55; }
.cacts.n3 { grid-template-columns: 1fr; }
/* small map (phones): the district names live in the list under the map; only the house markers stay on it */
@container (max-width: 599px) { .cmap:not(.ph) .dlabel { display: none; } }
.lhmark.al .lhname, .lhmark.ar .lhname { position: absolute; top: 100%; }
.lhmark.al .lhname { left: 0; } .lhmark.ar .lhname { right: 0; }

/* ---------- city main screen ---------- */
#city { --ar: 1.5; flex: 1; align-self: stretch; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at center, #2b1a55, #120a24); }
.cmapwrap { flex: none; height: calc(100vw / var(--ar)); max-height: 58%; container-type: size; display: flex; align-items: center; justify-content: center; }
.cmap { position: relative; width: min(100cqw, 100cqh * var(--ar)); aspect-ratio: var(--ar); overflow: hidden; container-type: inline-size; background: #000; }
.cmap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dzone { position: absolute; width: 27%; height: 27%; transform: translate(-50%, -14%); background: transparent; border: 0; padding: 0; border-radius: 22px; }
.dzone.wig { animation: wigz .4s ease; }
.dzone:focus-visible { outline: 3px dashed #fff9; }
.dlabel { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; background: #1a1033dd; border: 2px solid var(--gold2); border-radius: 12px; padding: .35cqw 1.1cqw .45cqw; white-space: nowrap; box-shadow: 0 3px 10px #0007; line-height: 1.05; }
.dlabel b { font: 800 max(10px, 1.65cqw) 'Baloo 2', sans-serif; color: #fff3c4; }
.dlabel small { font-size: max(9px, 1.25cqw); font-weight: 900; color: var(--gold); }
.dzone.locked .dlabel { border-color: #8d7cc4; } .dzone.locked .dlabel small { color: var(--muted); }
.hdot { position: absolute; width: max(7px, 1.7cqw); aspect-ratio: 1; transform: translate(-50%, -50%); background: #3a2a63; border: 1.5px solid #e9d5b5aa; clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%); pointer-events: none; }
.dzone.locked .hdot { opacity: .75; }
.lhmark { position: absolute; transform: translate(-50%, -50%); min-width: 46px; min-height: 46px; display: flex; flex-direction: column; align-items: center; background: transparent; border: 0; padding: 0; z-index: 3; }
.lhmark .pin { width: max(40px, 5.4cqw); aspect-ratio: 1; display: grid; place-items: center; font-size: max(22px, 3cqw); border-radius: 50%; background: var(--brass); border: 3px solid #fff3c4; box-shadow: 0 0 0 0 #ffcf4daa, 0 4px 10px #0008; animation: lhpulse 1.8s ease-out infinite; }
.lhmark .lhname { margin-top: 2px; font: 800 max(10px, 1.5cqw) 'Baloo 2', sans-serif; color: #fff3c4; background: #1a1033dd; border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.lhmark.lit .pin { box-shadow: 0 0 22px 8px #fff3b0, 0 4px 10px #0008; }
.lhmark.nudge .pin { animation: lhpulse 1.8s ease-out infinite, pulse .5s ease 3; }
.mapcap { position: absolute; left: 50%; bottom: 2.5%; transform: translateX(-50%); font: 800 max(10px, 1.4cqw) 'Baloo 2', sans-serif; color: #fff8ec; background: #1a103399; border: 1.5px dashed #ffffff80; border-radius: 999px; padding: 1px 10px; white-space: nowrap; pointer-events: none; }
.cbottom { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); background: var(--panel) radial-gradient(ellipse at 20% 0%, #3a2470, transparent 70%); }
.csayrow { display: flex; align-items: flex-end; gap: 6px; }
.cfriend { flex: none; height: 118px; filter: drop-shadow(0 6px 8px #0008); }
.cfriend.popin { animation: popin .5s cubic-bezier(.2, 1.5, .4, 1); }
.csay { flex: 1; min-width: 0; } .csay .talk { margin: 0 0 6px; }
.cdlist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cdbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; border-radius: 14px; border: 2px solid #6c5aa8; background: #2f1e5a; padding: 7px 10px; min-height: 54px; }
.cdbtn b { font: 800 16px 'Baloo 2', sans-serif; line-height: 1.1; color: #fff3c4; }
.cdbtn small { font-size: 12.5px; color: var(--muted); }
.cdbtn.open { border-color: var(--gold2); background: #3a2470; } .cdbtn.open small { color: var(--gold); }
.cacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cacts .btn { min-height: 46px; padding: 6px 10px; font-size: 14.5px; line-height: 1.15; }
@keyframes wigz { 30% { transform: translate(-50%, -14%) rotate(-3deg); } 60% { transform: translate(-50%, -14%) rotate(2deg); } }
@keyframes lhpulse { 0% { box-shadow: 0 0 0 0 #ffcf4dcc, 0 4px 10px #0008; } 100% { box-shadow: 0 0 0 18px #ffcf4d00, 0 4px 10px #0008; } }
/* wide screens: the whole map as big as it fits, line box + actions under it */
@media (min-width: 720px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  .cmapwrap { flex: 1; height: auto; max-height: none; padding: 10px 10px 0; }
  .cmap { border-radius: 18px; box-shadow: 0 12px 40px #0009; }
  .cbottom { flex: none; flex-direction: row; align-items: flex-end; width: 100%; max-width: 1100px; margin: 0 auto; background: transparent; overflow: visible; padding: 4px 16px 12px; }
  .csayrow { flex: 1; min-width: 0; } .cfriend { height: 104px; }
  .cdlist { display: none; }
  .cacts { flex: none; grid-template-columns: 1fr; width: 250px; }
}
@media (orientation: landscape) and (max-height: 559px) {
  #city { flex-direction: row; }
  .cmapwrap { flex: 1; height: 100%; max-height: none; }
  .cbottom { flex: none; width: 40%; }
  .cdlist { display: none; }
}
.artph:not(.mapph) .pc { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.artph:not(.mapph) .pi { margin-top: -18%; }

/* ---------- city main screen (2026-10-23): the crisp city picture, zoomed on your district, one glowing house ---------- */
.dhead { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #1a1033; border-bottom: 2px solid var(--line); }
.dhead h2 { flex: 1; min-width: 0; margin: 0; font-size: clamp(19px, 5vw, 26px); line-height: 1.15; color: #fff3c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dhead small { font-size: .72em; color: var(--gold); }
.dhead { min-height: 62px; }
.dhead .tocity { flex: none; min-height: 44px; padding: 6px 14px; font-size: 16px; background: #2f1e5a; white-space: nowrap; }
.dstage { flex: 1; min-height: 220px; position: relative; }
.dmap { position: absolute; inset: 8px; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 26px #0008; background: #2b1a55; }
.dpan { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.dimg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* the one glowing house: a soft golden halo + a tidy name tag */
.hmark { position: absolute; z-index: 2; width: 64px; height: 64px; transform: translate(-50%, -50%); padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hmark .halo { position: absolute; inset: -26px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff8d8 0 12%, #ffe07ae6 26%, #ffc83a99 46%, #ffc23a00 70%); animation: halo 2s ease-in-out infinite; }
.hmark.lit .halo { background: radial-gradient(circle, #ffffff 0 18%, #fff3b0dd 36%, #ffd75a77 56%, #ffd75a00 72%); }
.hmark.nudge .halo { animation: halo 2s ease-in-out infinite, haloTap .45s ease 3; }
@keyframes halo { 0%, 100% { transform: scale(.82); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes haloTap { 50% { filter: brightness(1.5); } }
.hmark .hname { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 2px); white-space: nowrap; font: 800 14px/1.3 'Baloo 2', sans-serif; color: #fff3c4; background: #1a1033e6; border: 1.5px solid var(--gold); border-radius: 999px; padding: 1px 10px; box-shadow: 0 3px 8px #0007; }
.hmark.al .hname { left: 8px; transform: translate(0, 2px); } .hmark.ar .hname { left: auto; right: 8px; transform: translate(0, 2px); }
.hmark .hname { display: flex; align-items: center; gap: 6px; }
.hthumb { width: 26px; height: 26px; margin-left: -7px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff3c4; flex: none; }
.hmark.up .hname { top: auto; bottom: 100%; transform: translate(-50%, -2px); }
.hmark.up.al .hname, .hmark.up.ar .hname { transform: translate(0, -2px); }
.dmap { cursor: default; }
.cbottom.dbottom { flex: none; overflow: visible; gap: 10px; padding-top: 8px; }
.dbottom .cfriend { height: 92px; }
.dbottom .cacts { grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  .dhead { padding: 10px 20px; } .dstage { margin: 0 auto; width: 100%; max-width: 1200px; }
  .dbottom .cacts { grid-template-columns: 1fr; }
}


/* the ChatGPT opening (OPENING_MODE 'gpt'): one full-screen frame */
#full:has(.gptop) { overflow: hidden; }
.gptop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #15182b; }

/* ---------- city overview (2026-10-23): the whole city from above, six district labels; tap one = zoom into it ---------- */
.cacts.one { grid-template-columns: 1fr; }
.dmap.whole { background: radial-gradient(ellipse 80% 60% at 50% 30%, #3a2470, transparent 70%), linear-gradient(180deg, #24164a 0%, #1b3466 55%, #0d4f86 100%); }
.dmap.whole { cursor: pointer; }
.whole .dpan { container-type: inline-size; box-shadow: 0 6px 24px #0009; }
.dpan.fly { transition: transform .9s cubic-bezier(.45, 0, .2, 1); will-change: transform; }
.hmark { transition: opacity .5s ease .1s; }
.dmap.zooming .hmark { opacity: 0; transition: none; }
.olab { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: .45em; min-height: 44px; min-width: 44px; padding: 4px 14px; border-radius: 999px;
  background: #1a1033e8; border: 2px solid var(--gold2); box-shadow: 0 3px 10px #0009; white-space: nowrap; line-height: 1.1; cursor: pointer; font-size: clamp(12px, 1.75cqw, 22px); -webkit-tap-highlight-color: transparent; }
.olab b { font: 800 1em 'Baloo 2', sans-serif; color: #fff3c4; }
.olab b i { font-style: normal; }
.olab small { font: 900 .85em 'Nunito', sans-serif; color: var(--gold); }
.olab:active { filter: brightness(1.2); }
.olab.mine { border-color: var(--gold); background: #3a2470f0; animation: olabPulse 1.6s ease-in-out infinite; }
@keyframes olabPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 #ffcf4d99, 0 3px 10px #0009; } 50% { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 7px #ffcf4d00, 0 3px 10px #0009; } }
.olab.picked { animation: olabPick .35s ease both; border-color: #fff; }
@keyframes olabPick { 50% { transform: translate(-50%, -50%) scale(1.15); } }
.labelsin .olab { animation: fadein .6s ease both; }
.labelsin .olab.mine { animation: fadein .6s ease both, olabPulse 1.6s ease-in-out .6s infinite; }
@media (prefers-reduced-motion: reduce) { .olab.mine, .labelsin .olab, .labelsin .olab.mine { animation: none; } }

/* ---------- overview (2026-10-23 b): pins on the real districts, phones swipe the full-height map ---------- */
.olab { font-size: clamp(12.5px, 1.55cqw, 19px); padding: 4px 12px; gap: 0; }
.olab .sep { color: var(--gold); font-weight: 900; white-space: pre; }
.olab b { font: 900 1em 'Nunito', sans-serif; color: var(--gold); }
.olab .dn { font: 800 1em 'Baloo 2', sans-serif; color: #fff3c4; }
@container (max-width: 700px) {
  .olab { flex-direction: column; padding: 3px 10px; border-radius: 14px; font-size: 12.5px; line-height: 1.05; }
  .olab .sep { display: none; }
  .olab b { font-size: 11.5px; }
}
.dmap.whole.panmode { touch-action: none; cursor: grab; border-radius: 14px; }
.dmap.whole.panmode:active { cursor: grabbing; }
.dmap.whole.panmode .dpan { box-shadow: none; }
.dpan.glide { transition: transform .45s cubic-bezier(.3, 0, .2, 1); }
.ovarrow { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); width: 34px; height: 54px; padding: 0; border: 2px solid #fff3c4aa; background: #1a1033cc; color: #fff3c4; font-size: 16px; display: grid; place-items: center; box-shadow: 0 3px 10px #0008; }
.ovarrow.l { left: 0; border-left: 0; border-radius: 0 14px 14px 0; } .ovarrow.r { right: 0; border-right: 0; border-radius: 14px 0 0 14px; }
.ovarrow[hidden] { display: none; }
.ovarrow:not([hidden]) { animation: ovhint 1.6s ease-in-out 3; }
@keyframes ovhint { 50% { opacity: .55; } }
/* a finished house: a small gold star, its name on hover / focus; tap = play it again */
.hmark.donemark { width: 48px; height: 48px; z-index: 3; }
.dstar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcf4d 55%, #c98a1a); border: 2px solid #fff; color: #7a4a00; font-size: 17px; line-height: 1; box-shadow: 0 0 12px 3px #ffe08a99, 0 3px 8px #0008; }
.donemark .hname { display: none; font-size: 13px; }
.donemark:hover .hname, .donemark:focus-visible .hname { display: flex; }
.dmap.zooming .donemark { opacity: 0; }
/* opening picture 9: the six first houses */
.montage { position: absolute; inset: 0; overflow: hidden; background: #120a24; }
.montage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; display: block; }
.montage img.on { opacity: 1; z-index: 2; transition: opacity .45s ease; animation: mpush 1.6s ease-out both; }
.montage img.was { opacity: 1; z-index: 1; transform: scale(1.06); }
@keyframes mpush { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .montage img.on { animation: none; } .montage img.was { transform: none; } .ovarrow { animation: none !important; } }

/* free trial + notify (owner, 2026-10-23): equal-width buttons, no orphan rows */
.titlebtns .btn { width: min(330px, 100%); }
.qactions.two { display: grid; grid-template-columns: 1fr 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
@media (max-width: 520px) { .qactions.two { grid-template-columns: 1fr; } }
.olab.trlock { opacity: .78; filter: grayscale(.5); }

/* owner 2026-10-23: the tapped puzzle object flashes; the fixed toy train really rolls */
.objflash { position: absolute; pointer-events: none; animation: objflash .52s ease-out; -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 55%, transparent 75%); }
@keyframes objflash { 0% { filter: brightness(1); transform: scale(1); } 35% { filter: brightness(1.9) saturate(1.3); transform: scale(1.06); } 100% { filter: brightness(1); transform: scale(1); } }
.trainfx { position: absolute; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); animation: chug .6s ease-in-out infinite; }
.trainfx.roll { animation: trainroll 2.4s cubic-bezier(.3, 0, .3, 1), chug .3s ease-in-out 2.4s infinite; animation-iteration-count: 1, infinite; }
@keyframes chug { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(.4%, -1.5%); } }
@keyframes trainroll { 0% { transform: translateX(0); } 12% { transform: translateX(-1.5%) translateY(-2%); } 50% { transform: translateX(5%); } 75% { transform: translateX(-2%) translateY(-1.5%); } 100% { transform: translateX(0); } }
.puff { position: absolute; left: 33%; top: 39%; width: 3%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fffe 0 40%, #fff0 70%); pointer-events: none; opacity: 0; animation: puff 1.8s ease-out infinite; }
.puff.p2 { animation-delay: .6s; } .puff.p3 { animation-delay: 1.2s; }
@keyframes puff { 0% { opacity: .9; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(-60%, -260%) scale(2.2); } }
@media (prefers-reduced-motion: reduce) { .trainfx, .trainfx.roll, .puff { animation: none; } }
.slot.arriving { opacity: .25; } .slot.landed { animation: popin .5s cubic-bezier(.2, 1.5, .4, 1); }

/* owner 2026-10-23: on short screens (laptops with a dock) the bottom of a lock was hidden.
   The buttons now stay pinned at the bottom of the puzzle, and the picture header, Leo and the bell dots shrink to fit. */
.ovbody .qactions { position: sticky; bottom: -28px; z-index: 4; margin: 12px -14px -28px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #24164500, var(--panel) 30%); }
@media (max-height: 860px) { .cell { width: min(44px, 5.4vh); height: min(44px, 5.4vh); font-size: min(22px, 2.8vh); } }
@media (min-width: 720px) and (max-height: 860px) { .ovbox { height: calc(100% - 16px); margin-top: 8px; } .ovhead { height: 88px; } .ovfriend { height: 104px; } .ovtitle { font-size: 20px; } }
.trialtag { display: inline-block; margin: 2px auto 8px; padding: 4px 14px; border-radius: 999px; background: var(--gold); color: #3b2300; font: 800 16px 'Baloo 2', sans-serif; }