/* Sugarplum Castle — HUD and overlays over the 3D canvas. Same chunky look as Sunny Fields. */

:root {
  --ink: #1F2A38;
  --paper: #FFFDF6;
  --sky: #BDE8FF;
  --sun: #FFC93C;
  --pink: #FFC7E0;
  --mint: #C8F5E4;
  --lilac: #D7CBFF;
  --strawberry: #FF5C8A;
  --lemon: #FFF07A;
  --zombie: #B7D36B;
  --bad: #E5383B;
  --font: "Fredoka", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #7CC7F2; overflow: hidden; font-family: var(--font); color: var(--ink); -webkit-tap-highlight-color: transparent; }
#app { position: fixed; inset: 0; }
#app canvas { display: block; width: 100%; height: 100%; touch-action: none; }
button { font-family: var(--font); }
[hidden] { display: none !important; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
.hud-tl { position: absolute; left: 18px; top: 16px; }
.hud-tr { position: absolute; right: 18px; top: 16px; display: flex; gap: 10px; }
.hud-br { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 12px; }
.hud-bl { position: absolute; left: 18px; bottom: 18px; }
.hud-btn { width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--ink); background: var(--paper); box-shadow: 0 6px 0 var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 30px; transition: transform .08s ease, box-shadow .08s ease; }
.hud-btn.big { width: 84px; height: 84px; font-size: 40px; }
.hud-btn:hover { transform: translateY(-2px); }
.hud-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.hud-btn.holding { animation: holdpulse 1.5s linear forwards; }
@keyframes holdpulse { from { box-shadow: 0 6px 0 var(--ink), 0 0 0 0 rgba(255, 201, 60, .9); } to { box-shadow: 0 6px 0 var(--ink), 0 0 0 26px rgba(255, 201, 60, 0); background: var(--sun); } }

/* candy coins: always on screen, top left */
.money { position: relative; display: flex; align-items: center; gap: 10px; }
.jar { position: relative; width: 78px; height: 96px; border: 4px solid var(--ink); border-radius: 14px 14px 28px 28px; background: rgba(255, 255, 255, .7); box-shadow: 0 6px 0 var(--ink); overflow: hidden; display: grid; place-items: center; }
.jar::before { content: ""; position: absolute; left: 14px; right: 14px; top: -8px; height: 14px; border: 4px solid var(--ink); border-radius: 8px; background: var(--strawberry); }
.jar-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: repeating-linear-gradient(135deg, #FFD23F 0 8px, #FFF07A 8px 16px); transition: height .4s ease; }
.jar-n { position: relative; font: 700 32px var(--font); text-shadow: 0 2px 0 #fff, 0 0 6px #fff; font-variant-numeric: tabular-nums; }
.jar.bump { animation: pop .35s ease; }
.money-cap { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.money-cap b { font: 700 18px var(--font); padding: 5px 14px; border: 4px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 5px 0 var(--ink); white-space: nowrap; }
.money-cap small { font: 600 14px var(--font); color: #fff; text-shadow: 0 1px 0 var(--ink), 0 0 6px rgba(31, 42, 56, .6); padding-left: 4px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.money.up .money-cap b { background: var(--mint); }
/* hearts (systems/lives.js): three under the coin jar; a lost one goes dark with a shake, one back pops */
.hearts { display: flex; gap: 4px; box-sizing: content-box; width: 98px; margin-top: 8px; padding: 5px 12px; border: 4px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 5px 0 var(--ink); line-height: 0; }
.hearts .hb { flex: 0 0 30px; width: 30px; height: 30px; }
.hearts .hb svg { width: 100%; height: 100%; display: block; fill: var(--strawberry); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; transition: fill .25s ease, transform .2s ease; }
.hearts .hb:not(.on) svg { fill: #D9D3CB; transform: scale(.8); }
.hearts .hb.hbpop svg { animation: heartpop .5s ease; }   /* (not `.pop`: that is the popover style below) */
.hearts.hshake svg { animation: heartshake .45s ease; }
@keyframes heartpop { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes heartshake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
/* the wanted meter (systems/wanted.js): three stars under the hearts, lit as the mischief mounts; hidden with none */
.wanted { display: flex; gap: 4px; align-items: center; box-sizing: content-box; width: 98px; margin-top: 8px; padding: 4px 12px; border: 4px solid var(--ink); border-radius: 999px; background: #2F3A4A; box-shadow: 0 5px 0 var(--ink); font: 700 22px var(--font); line-height: 1; }
.wanted[hidden] { display: none; }
.wanted .ws { flex: 0 0 30px; width: 30px; text-align: center; color: #5F6875; transition: color .25s ease, transform .2s ease; }
.wanted .ws.on { color: #FFD23F; text-shadow: 0 0 8px rgba(255, 210, 63, .8); }
.wanted .ws.wpop { animation: heartpop .5s ease; }
.wanted.wblue { animation: wantedblue .6s ease infinite alternate; }
@keyframes wantedblue { from { background: #2F3A4A; } to { background: #2F5DA8; } }
.money.down .money-cap b { background: #FFD1DA; }
.money-delta { position: absolute; left: 58px; top: -6px; font: 700 26px var(--font); padding: 4px 14px; border: 4px solid var(--ink); border-radius: 999px; background: var(--mint); box-shadow: 0 4px 0 var(--ink); pointer-events: none; opacity: 0; white-space: nowrap; }
.money-delta.down { background: #FFD1DA; }
.money-delta.go { animation: deltafloat 1.5s ease-out forwards; }
@keyframes deltafloat { 0% { opacity: 0; transform: translateY(14px) scale(.6); } 18% { opacity: 1; transform: translateY(0) scale(1.15); } 30% { transform: translateY(-2px) scale(1); } 75% { opacity: 1; transform: translateY(-16px) scale(1); } 100% { opacity: 0; transform: translateY(-38px) scale(.9); } }

.prompt { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 22px 10px 12px; border: 4px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 6px 0 var(--ink); font: 600 24px var(--font); white-space: nowrap; pointer-events: none; }
.prompt .ico { width: 48px; height: 48px; border-radius: 50%; background: var(--sun); border: 3px solid var(--ink); display: grid; place-items: center; font-size: 26px; }
.prompt.pop { animation: pop .3s ease; }
.hint { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); padding: 10px 20px; border-radius: 999px; background: rgba(31, 42, 56, .82); color: #fff; font: 500 18px var(--font); pointer-events: none; max-width: 70vw; text-align: center; }
@media (max-width: 900px) { .hint { top: 126px; max-width: 90vw; } }
.seat-hint { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); padding: 8px 18px; border-radius: 999px; background: rgba(31, 42, 56, .75); color: #fff; font: 500 17px var(--font); pointer-events: none; }
.crosshair { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgba(255, 255, 255, .8); border: 2px solid rgba(31, 42, 56, .5); pointer-events: none; }
/* the Sky Bus tour's skip button (player/skybus.js): one lock question and straight to the castle */
.skip-bus { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); display: grid; justify-items: center; gap: 1px; padding: 9px 22px 8px; border-radius: 999px; border: 4px solid var(--ink); background: var(--paper); box-shadow: 0 6px 0 var(--ink); color: var(--ink); cursor: pointer; font: 700 19px var(--font); transition: transform .08s ease, box-shadow .08s ease; }
.skip-bus small { font: 500 13px var(--font); opacity: .7; }
.skip-bus:hover { transform: translateX(-50%) translateY(-2px); }
.skip-bus:active { transform: translateX(-50%) translateY(4px); box-shadow: 0 2px 0 var(--ink); }

.fade { position: fixed; inset: 0; background: #FFE6F2; opacity: 0; pointer-events: none; z-index: 30; transition: opacity .4s ease; }
#bootError { position: fixed; left: 50%; top: 24px; transform: translateX(-50%); max-width: 90vw; z-index: 50; background: #1F2A38; color: #fff; font: 500 15px/1.4 "Fredoka", system-ui, sans-serif; padding: 12px 18px; border-radius: 16px; white-space: pre-wrap; }

#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.label { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; transform-origin: 50% 100%; will-change: transform; }
.lname { padding: 3px 12px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); font: 600 16px var(--font); white-space: nowrap; }
.lhearts { display: flex; gap: 2px; }
.lhearts i { width: 12px; height: 12px; background: #D9D3CB; clip-path: path("M6 11 L1.2 6.2 C-0.4 4.6 0.8 1.5 3 1.5 C4.3 1.5 5.3 2.3 6 3.2 C6.7 2.3 7.7 1.5 9 1.5 C11.2 1.5 12.4 4.6 10.8 6.2 Z"); }
.lhearts i.on { background: var(--strawberry); }
.lhearts.stage0 i.on { background: var(--zombie); }
.lhearts.stage1 i.on { background: #8FB8E8; }
.label.player .lname { background: var(--sky); font-weight: 700; font-size: 18px; }
.others { margin-top: 10px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); font: 500 15px var(--font); box-shadow: 0 4px 0 var(--ink); max-width: 260px; }
.others b { font-weight: 700; }
.lbubble { max-width: 260px; margin-top: 4px; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; font: 500 17px var(--font); text-align: center; animation: pop .3s ease; }

#toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); background: var(--ink); color: #fff; font: 500 19px var(--font); padding: 12px 22px; border-radius: 999px; z-index: 40; pointer-events: none; }
.big-toast { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 12px 28px 12px 14px; border: 5px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 8px 0 var(--ink); font: 600 28px var(--font); z-index: 41; pointer-events: none; white-space: nowrap; max-width: 90vw; }
.big-toast .ico { width: 56px; height: 56px; border-radius: 50%; background: var(--pink); border: 3px solid var(--ink); display: grid; place-items: center; font-size: 30px; }
.big-toast.go { animation: bigin .5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes bigin { from { transform: translateX(-50%) translateY(-30px) scale(.8); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* ---------------- Overlays and cards ---------------- */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; background: rgba(255, 253, 246, 0.30); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s ease; }
.overlay.show { opacity: 1; }
.card { background: var(--paper); border: 5px solid var(--ink); border-radius: 34px; box-shadow: 0 14px 0 var(--ink), 0 30px 60px rgba(31, 42, 56, .25); position: relative; }
.round-btn { width: 92px; height: 92px; border-radius: 50%; border: 5px solid var(--ink); background: #fff; color: var(--ink); box-shadow: 0 7px 0 var(--ink); cursor: pointer; flex: 0 0 auto; display: grid; place-items: center; font: 600 34px var(--font); transition: transform .08s ease, box-shadow .08s ease; }
.round-btn svg { width: 60%; height: 60%; }
.round-btn:hover { transform: translateY(-2px); }
.round-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.round-btn.small { width: 60px; height: 60px; font-size: 24px; box-shadow: 0 5px 0 var(--ink); }
.round-btn.wiggle { animation: wiggle .5s ease; }
.round-btn:focus-visible, .tile:focus-visible, .btn:focus-visible, input:focus-visible, .item:focus-visible, .tcard:focus-visible { outline: 5px solid #4FA9E0; outline-offset: 3px; }
.btn { font: 600 22px var(--font); padding: 12px 22px; border: 4px solid var(--ink); border-radius: 16px; background: var(--sun); color: var(--ink); cursor: pointer; box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.btn.quiet { background: #fff; }
.btn.danger { background: #F3D4D4; }
.btn.big { font-size: 30px; padding: 16px 40px; border-radius: 24px; }
.chip { font: 600 18px var(--font); padding: 8px 16px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; cursor: pointer; }
.chip.on { background: var(--sky); }
.chip.small { font-size: 15px; padding: 5px 10px; }   /* the birthday's month and day chips (ui/start.js, the setup card) */
.chip:disabled { opacity: .45; cursor: default; }
.btn.small { font-size: 16px; padding: 6px 12px; border-width: 3px; border-radius: 12px; box-shadow: 0 4px 0 var(--ink); margin-left: auto; }   /* the Post's find and yes buttons (ui/estate.js) */
/* the Castle Book's Kingdom page (ui/book.js kingdom) */
.kbig { padding: 14px 18px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; margin-bottom: 12px; cursor: pointer; }
.kbig b { display: block; font: 700 34px var(--font); }
.kbig small { display: block; font-size: 17px; color: #5A6878; margin-bottom: 8px; }
.kbars { display: flex; height: 22px; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; background: #F3F3F7; }
.kbar { display: block; height: 100%; font: 700 13px var(--font); line-height: 22px; text-align: center; color: var(--ink); background: var(--mint); overflow: hidden; white-space: nowrap; }
.kbar:nth-child(2n) { background: var(--sky); } .kbar:nth-child(3n) { background: var(--pink); } .kbar:nth-child(4n) { background: var(--sun); }
.kline { display: block; margin: 4px 0 12px; }
.ktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ktile { padding: 10px 12px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; text-align: center; cursor: pointer; }
.ktile .kico { font-size: 26px; display: block; } .ktile b { display: block; font: 700 28px var(--font); } .ktile small { color: #5A6878; }
/* the Trophy Shelf's cups on the Kingdom tab (systems/scores.js marks) */
.cups { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.cup { font: 600 18px var(--font); padding: 4px 10px; border: 3px solid var(--ink); border-radius: 999px; background: #F3EEE8; cursor: pointer; }
.cup.bronze { background: #F2D3B8; } .cup.silver { background: #E6ECF2; } .cup.gold { background: #FFE58A; }

.panel { width: min(1100px, 96vw); max-height: 94vh; display: flex; flex-direction: column; padding: 22px 26px 24px; gap: 14px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel-head h2 { margin: 0; font-size: 34px; font-weight: 600; }
.panel-foot { font-size: 18px; color: #5A6878; min-height: 26px; }
.tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.tabs .tab { display: flex; align-items: center; gap: 8px; font: 600 19px var(--font); padding: 8px 16px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; cursor: pointer; position: relative; }
.tabs .tab span { font-size: 22px; }
.tabs .tab small { font-size: 14px; color: #5A6878; font-weight: 500; }
.tabs .tab.on { background: var(--sun); }
.tabs .tab.new::after { content: ""; position: absolute; right: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--strawberry); border: 2px solid #fff; }
.tabs.vertical { flex-direction: column; }
.tabs.vertical .tab { justify-content: flex-start; }
.tabs.vertical .tab small { margin-left: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; overflow: auto; padding: 4px; min-height: 120px; }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; cursor: pointer; box-shadow: 0 5px 0 var(--ink); position: relative; transition: transform .08s ease; font-family: var(--font); color: var(--ink); }
.item:hover { transform: translateY(-2px); }
.item:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.item.on { background: var(--sun); }
.item .ico { font-size: 44px; line-height: 1; }
.item .name { font: 600 16px var(--font); text-align: center; line-height: 1.1; }
.item .count { position: absolute; right: 8px; top: 6px; font: 600 14px var(--font); background: var(--mint); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 8px; }
.item .price { font: 600 16px var(--font); background: var(--lemon); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; }
.item.poor { opacity: .55; }
.item.fresh { animation: glow 1.2s ease-in-out infinite; }
.item.photo { background: var(--lilac); }
.swatchbig { width: 48px; height: 48px; border-radius: 12px; border: 3px solid var(--ink); }
.empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: #5A6878; font-size: 20px; }

/* side panels (decorate, wardrobe) */
.side { position: fixed; top: 0; bottom: 0; left: 0; width: min(420px, 92vw); z-index: 21; background: var(--paper); border-right: 5px solid var(--ink); box-shadow: 10px 0 30px rgba(31, 42, 56, .2); display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.side.right { left: auto; right: 0; border-right: 0; border-left: 5px solid var(--ink); box-shadow: -10px 0 30px rgba(31, 42, 56, .2); }
.side-head { display: flex; justify-content: space-between; align-items: center; }
.side-head h2 { margin: 0; font-size: 28px; font-weight: 600; }
.side .grid { flex: 1; align-content: start; }
.side-hint { font-size: 17px; color: #5A6878; }
.pop { position: fixed; z-index: 22; transform: translate(-50%, -110%); display: flex; gap: 8px; padding: 8px; border: 4px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 0 6px 0 var(--ink); }
.pop .btn { font-size: 18px; padding: 8px 14px; }

/* ---------------- Start screen ---------------- */
#start { background: linear-gradient(160deg, #FFD6EC 0%, #C9E9FF 55%, #FFF3B8 100%); backdrop-filter: none; }
#start::before { content: "🍭 🧁 🍬 🍩 🍭 🧁 🍬 🍩 🍭 🧁 🍬 🍩 🍭 🧁 🍬 🍩"; position: absolute; left: -10%; top: 6%; width: 120%; font-size: 48px; opacity: .35; white-space: nowrap; letter-spacing: 40px; animation: drift 40s linear infinite; }
#start::after { content: "🍩 🍬 🧁 🍭 🍩 🍬 🧁 🍭 🍩 🍬 🧁 🍭 🍩 🍬 🧁 🍭"; position: absolute; left: -10%; bottom: 6%; width: 120%; font-size: 48px; opacity: .35; white-space: nowrap; letter-spacing: 40px; animation: drift 50s linear infinite reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-200px); } }
.start-card { width: min(980px, 96vw); max-height: 94vh; overflow: auto; padding: 30px 34px; display: flex; flex-direction: column; gap: 22px; position: relative; z-index: 1; }
.start-title { text-align: center; }
.start-title .castle { font-size: 72px; display: block; animation: bob 3s ease-in-out infinite; }
.start-title h1 { margin: 4px 0 6px; font-size: clamp(38px, 6vw, 62px); font-weight: 700; color: var(--strawberry); text-shadow: 0 4px 0 #fff, 0 8px 0 rgba(31, 42, 56, .15); }
.start-title p { margin: 0; font-size: 22px; color: #5A6878; }
.pick { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.pick-card { width: 200px; padding: 16px; border: 5px solid var(--ink); border-radius: 26px; background: #fff; box-shadow: 0 8px 0 var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font); color: var(--ink); transition: transform .1s ease; }
.pick-card:hover { transform: translateY(-4px); }
.pick-card img { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--ink); background: var(--sky); }
.pick-card b { font-size: 26px; font-weight: 600; }
.pick-card span { font-size: 16px; color: #5A6878; }
.pick-card.new { background: var(--lemon); justify-content: center; }
.pick-card .plus { font-size: 72px; line-height: 1; }
/* how shall we arrive: the Sky Bus again, or straight in (ui/start.js renderArrive) */
.arrive-ask { margin: 14px 0 18px; font-size: 22px; color: #5A6878; text-align: center; }
.pick.arrive .pick-card { width: 230px; min-height: 200px; justify-content: center; }
.pick.arrive .pick-card span:last-child { text-align: center; }
.pick.arrive #startLast { background: var(--mint); }
.pick.arrive #startBus { background: var(--sky); }
.pick.arrive #startWalk { background: var(--lemon); }
/* a grown-up's look at the royals first (ui/start.js renderGrownup, renderRoyals) */
.pick.arrive #startRoyals { background: var(--lilac); }
.pick.arrive #startOn { background: var(--lemon); }
.pick.royals .pick-card { cursor: default; }
.pick.royals .pick-card:hover { transform: none; }
.pick.royals .pick-card.me { background: var(--lemon); }
.pick.royals .pick-card .btn { font-size: 17px; padding: 8px 14px; margin-top: 6px; }
.pick.royals .pick-card .stay { margin-top: 6px; font-size: 15px; }
.start-foot { text-align: center; color: #5A6878; font-size: 15px; }
.new-head { display: flex; align-items: center; gap: 16px; }
.new-head h2 { margin: 0; font-size: 32px; font-weight: 600; }
.sibs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 18px; color: #5A6878; }
.new-body { display: flex; gap: 26px; align-items: flex-start; }
.preview { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 200px; }
.preview img { width: 190px; height: 190px; border-radius: 50%; border: 5px solid var(--ink); background: var(--sky); box-shadow: 0 8px 0 var(--ink); }
.preview-name { font: 600 22px var(--font); text-align: center; }
.fields { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.fields label { display: flex; align-items: center; gap: 12px; font: 600 20px var(--font); }
.fields input[type="text"] { flex: 1; font: 500 24px var(--font); padding: 10px 16px; border: 4px solid var(--ink); border-radius: 16px; background: #fff; min-width: 0; }
.fields .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fields .row > span { font: 600 18px var(--font); width: 64px; color: #5A6878; }
.swatch { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.swatch.on { outline: 4px solid var(--sun); outline-offset: 2px; }
.modes { gap: 12px; }
.mode-card { flex: 1; min-width: 200px; text-align: left; padding: 12px 14px; border: 4px solid var(--ink); border-radius: 18px; background: #fff; cursor: pointer; font-family: var(--font); color: var(--ink); }
.mode-card.on { background: var(--mint); }
.mode-card b { display: block; font-size: 20px; font-weight: 600; }
.mode-card span { font-size: 15px; color: #5A6878; }
.new-foot { display: flex; justify-content: center; }

/* ---------------- Talk ---------------- */
.overlay.talk { align-items: flex-end; background: rgba(31, 42, 56, .12); backdrop-filter: none; padding-bottom: 3vh; }
.talk-card { width: min(1100px, 96vw); position: relative; display: flex; flex-direction: column; gap: 14px; }
.talk-top { display: flex; align-items: flex-end; gap: 18px; }
.portrait { width: 180px; height: 180px; flex: 0 0 auto; border-radius: 50%; border: 6px solid var(--ink); background: var(--sky) center / cover no-repeat; box-shadow: 0 8px 0 var(--ink); position: relative; animation: bob 2.4s ease-in-out infinite; }
.portrait.stage-0 { background-color: var(--zombie); animation: wobble 1.6s ease-in-out infinite; }
.portrait.stage-1 { background-color: #C9D8F0; }
.portrait .hearts { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); display: flex; gap: 1px; padding: 3px 8px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; font-size: 16px; line-height: 1; }
.portrait .hearts span { color: #D9D3CB; }
.portrait .hearts span.on { color: var(--strawberry); }
.talk-bubble { flex: 1; background: var(--paper); border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 10px 0 var(--ink); padding: 18px 90px 18px 24px; position: relative; min-height: 120px; }
.talk-bubble::before { content: ""; position: absolute; left: -22px; bottom: 30px; border: 14px solid transparent; border-right-color: var(--ink); }
.talk-name { font: 600 18px var(--font); color: var(--strawberry); text-transform: uppercase; letter-spacing: .06em; }
.talk-text { font: 500 clamp(22px, 2.8vw, 32px) var(--font); line-height: 1.25; min-height: 42px; }
#talkSpeak { position: absolute; right: 16px; top: 16px; }
.talk-cards { display: flex; gap: 12px; }
.tcard { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 5px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 8px 0 var(--ink); cursor: pointer; font-family: var(--font); color: var(--ink); text-align: left; position: relative; transition: transform .08s ease; }
.tcard:hover { transform: translateY(-3px); }
.tcard:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--ink); }
.tcard:disabled { opacity: .6; cursor: default; }
.tcard .ico { font-size: 34px; }
.tcard .txt { font: 600 clamp(17px, 1.8vw, 22px) var(--font); line-height: 1.15; }
.tcard .knum { position: absolute; right: 10px; top: 6px; font: 600 13px var(--font); color: #5A6878; }
.tcard.kind { background: var(--pink); }
.tcard.curious { background: var(--lemon); }
.tcard.unkind { background: #D6DBC6; }
.tcard.sorry { background: var(--lilac); }
.tcard.gift { background: var(--mint); }
.tcard.challenge { background: #DDEBFF; }
.talk-close { position: absolute; right: -10px; top: -10px; }

/* ---------------- Castle Book ---------------- */
.book { width: min(1100px, 96vw); }
.book-body { overflow: auto; padding: 4px 2px; }
.book-note { font-size: 18px; color: #5A6878; margin: 6px 0 10px; }
/* the Map tab (ui/book.js): where you are, the level picker, the map window, then the room chips */
.map-here { font: 500 20px var(--font); margin: 2px 0 10px; }
.map-here b { font-weight: 700; }
.map-here small { font-size: 16px; color: #5A6878; }
.map-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.map-pick .grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 999px; background: #F3EEE6; }
.map-pick .gh { font-size: 22px; padding: 0 4px 0 2px; }
.pchip { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--ink); color: var(--ink); font: 700 18px var(--font); cursor: pointer; transition: transform .08s ease; }
.pchip .pn { font-size: 19px; }
.pchip small { font: 600 15px var(--font); }
.pchip i { font-style: normal; font-size: 14px; }
.pchip .me { position: absolute; right: -8px; top: -10px; font-size: 18px; }
.pchip.on { background: var(--sun); }
.pchip.here { box-shadow: 0 3px 0 var(--ink), 0 0 0 4px rgba(255, 92, 138, .35); }
.pchip.locked { opacity: .6; }
.pchip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.map-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.map-title h3 { margin: 0; font-size: 22px; font-weight: 600; }
.map-title h3 small { font-size: 16px; color: #5A6878; font-weight: 500; }
.map-you { padding: 5px 14px; border-radius: 999px; background: #FFE6EF; color: #B4234F; font: 700 16px var(--font); white-space: nowrap; }
.mapview { position: relative; height: clamp(280px, 52vh, 640px); border: 4px solid var(--ink); border-radius: 22px; background: #FFF7EE; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.mapview.drag { cursor: grabbing; }
.mapview.here { border-color: var(--strawberry); box-shadow: 0 0 0 5px rgba(255, 92, 138, .22); }
.mapview svg { width: 100%; height: 100%; display: block; }
.map-tools { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.map-tools button { width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: 0 3px 0 var(--ink); color: var(--ink); font: 700 22px var(--font); cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform .08s ease; }
.map-tools button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.map-pop { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 14px)); display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--ink); font: 600 17px var(--font); white-space: nowrap; z-index: 2; }
.map-pop::after { content: ""; position: absolute; left: 50%; bottom: -19px; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--ink); }
.map-pop .gbtn.go { background: #3FA0F5; color: #fff; }
.map-pop .pop-in { color: #B4234F; padding-right: 6px; }
.map-key { font-size: 15px; color: #5A6878; margin: 8px 0 2px; }
.map-h4 { margin: 12px 0 6px; font-size: 18px; font-weight: 600; }
/* what is drawn on the map: rooms in world metres under the camera, everything written on them in screen pixels (pins) */
.mapsvg text { font-family: var(--font); fill: var(--ink); }
.mapsvg .room rect { stroke-width: 2; cursor: pointer; }
.mapsvg .room.zone rect { stroke-dasharray: 7 4; }
.mapsvg .room.dim rect { stroke-dasharray: 4 4; }
.mapsvg .room.in rect { stroke: var(--strawberry); stroke-width: 3; }
.mapsvg .room.sel rect { stroke: #3FA0F5; stroke-width: 4; }
.mapsvg .water { pointer-events: none; }
.mapsvg .stairs rect, .mapsvg .stairs line { stroke-width: 1.5; pointer-events: none; }
.mapsvg .door { stroke-width: 6; pointer-events: none; }
.mapsvg .pin { pointer-events: none; }
.mapsvg .lb .ico { font-size: 18px; }
.mapsvg .lb .name { font-size: 13px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.mapsvg .lb.dim .name { fill: #8A93A0; }
.mapsvg .lb.dim .ico { opacity: .55; }
.mapsvg .lb.noname .name, .mapsvg .lb.noico .ico { display: none; }
.mapsvg .lb.noname:not(.top) .ico { transform: translateY(12px); }
.mapsvg .note { font-size: 12px; font-weight: 600; fill: #5A6878; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.mapsvg .tag text { font-size: 13px; font-weight: 700; }
.mapsvg .nm { font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.mapsvg .npc.unmet image { filter: grayscale(1); opacity: .6; }
@keyframes mapbob { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.mapsvg .goal .bob { animation: mapbob .55s ease-in-out infinite alternate; }
@media (max-width: 680px) { .mapview { height: clamp(240px, 46vh, 520px); } .map-tools button { width: 40px; height: 40px; } .map-pick .grp { padding: 4px 8px 4px 6px; } .pchip { height: 40px; min-width: 40px; } }
/* lift panel: an old half-moon floor dial, then the floors in one column and the slide in another */
.panel.lift { width: min(920px, 96vw); }
.lift-dial { display: grid; place-items: center; padding: 2px 0 0; }
.lift-dial svg { width: min(300px, 70vw); height: auto; overflow: visible; }
.lift-dial .face { fill: var(--paper); stroke: var(--sun); stroke-width: 10; stroke-linejoin: round; }
.lift-dial .scale { fill: none; stroke: var(--ink); stroke-width: 3; }
.lift-dial line { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.lift-dial text { fill: var(--ink); font: 700 24px var(--font); text-anchor: middle; dominant-baseline: central; }
.lift-dial text.on { fill: #fff; }
.lift-dial .here { fill: var(--strawberry); }
.lift-dial .needle { fill: var(--bad); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .65s cubic-bezier(.45, .05, .3, 1.1); }
.lift-dial .hub { fill: var(--sun); stroke: var(--ink); stroke-width: 3; }
.lift-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; overflow: auto; padding: 4px; align-items: start; }
.lift-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lift-col h3 { margin: 2px 0 0; font-size: 22px; font-weight: 600; color: #5A6878; }
.lbtn.slide { background: var(--pink); }
.lbtn.slide .lnum { background: #fff; font-size: 30px; }
.lbtn.redbtn { background: #FFD1DA; border-color: #C8102E; margin-top: 12px; }   /* the DO NOT PRESS button (ui/lift.js, systems/wanted.js) */
.lbtn.redbtn .lnum { background: #FF5C8A; font-size: 30px; }
@media (max-width: 680px) { .lift-panel { grid-template-columns: 1fr; } }
.lbtn { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 5px 0 var(--ink); cursor: pointer; font-family: var(--font); color: var(--ink); text-align: left; transition: transform .08s ease; }
.lbtn:not(:disabled):hover { transform: translateY(-2px); }
.lbtn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.lbtn .lnum { width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--ink); background: var(--sun); display: grid; place-items: center; font: 700 28px var(--font); flex: 0 0 auto; }
.lbtn .lname2 b { display: block; font-size: 22px; font-weight: 600; }
.lbtn .lname2 small { display: block; font-size: 15px; color: #5A6878; }
.lbtn.here { background: var(--mint); cursor: default; }
.lbtn.here .lnum { background: #fff; }
.lbtn.locked { opacity: .55; cursor: default; background: #F3EEE6; }
.lbtn.locked .lnum { background: #ddd; }
.lbtn .lnum.fruit { font-size: 26px; }
/* the Big Board */
.panel.board { width: min(1000px, 96vw); }
.board-body { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 14px; padding: 4px 2px; }
.bfloor { border: 4px solid var(--ink); border-radius: 22px; background: var(--fl, #fff); padding: 12px 14px; box-shadow: 0 5px 0 var(--ink); }
.bfloor.open { outline: 4px solid var(--strawberry); outline-offset: 3px; }
.bhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bnum { width: 50px; height: 50px; border-radius: 50%; border: 4px solid var(--ink); background: #fff; display: grid; place-items: center; font: 700 26px var(--font); flex: 0 0 auto; }
.bhead b { display: block; font-size: 21px; font-weight: 600; }
.bhead small { display: block; font-size: 15px; color: #3d4a5a; }
.btasks { display: flex; flex-direction: column; gap: 8px; }
.btask { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 16px; background: rgba(255, 255, 255, .85); cursor: pointer; }
.btask.ok { background: #BFF3C8; }
.btask .bico { font-size: 28px; text-align: center; }
.btask .bname { font: 600 17px var(--font); line-height: 1.15; }
.btask .bname small { display: block; font-size: 13px; font-weight: 500; color: #5A6878; }
.btask .bprog { font: 700 20px var(--font); }
.btask .bbar { grid-column: 2 / 4; height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: #F3EEE6; overflow: hidden; }
.btask .bbar b { display: block; height: 100%; background: var(--strawberry); }
@media (max-width: 700px) { .board-body { grid-template-columns: 1fr; } }
/* guide me (systems/guide.js): a chip per level and room under the map, the "guiding you" bar, and the chip on the HUD while the blue arrow is out */
.guide-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gbtn { padding: 6px 12px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--ink); cursor: pointer; font: 600 15px var(--font); color: var(--ink); transition: transform .08s ease; }
.gbtn.area { background: #DDEFFF; }
.gbtn.in { background: #FFE6EF; }
.gbtn.on { background: #3FA0F5; color: #fff; }
.gbtn.stop { background: var(--sun); }
.gbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.guide-now { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 18px; background: #DDEFFF; font: 500 17px var(--font); }
.guide-chip { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; border: 3px solid var(--ink); border-radius: 999px; background: #3FA0F5; color: #fff; box-shadow: 0 4px 0 var(--ink); font: 600 17px var(--font); white-space: nowrap; max-width: 90vw; }
.guide-chip .txt { overflow: hidden; text-overflow: ellipsis; }
.guide-chip .x { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); font: 700 15px var(--font); cursor: pointer; display: grid; place-items: center; padding: 0; }
@media (max-width: 900px) { .guide-chip { top: 178px; } }
/* helping the police with a raid (systems/raids.js): where, and a Cancel help button, under the guide chip */
.raid-chip { position: absolute; left: 50%; top: 122px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; border: 3px solid var(--ink); border-radius: 999px; background: #FF5C8A; color: #fff; box-shadow: 0 4px 0 var(--ink); font: 600 17px var(--font); white-space: nowrap; max-width: 90vw; }
.raid-chip .txt { overflow: hidden; text-overflow: ellipsis; }
.raid-chip .x { height: 32px; padding: 0 12px; border-radius: 999px; border: 3px solid var(--ink); background: #fff; color: var(--ink); font: 700 14px var(--font); cursor: pointer; }
@media (max-width: 900px) { .raid-chip { top: 230px; } }
/* a baby's day out (systems/outings.js): the same chip in Nanny's lilac, the clock in it going red for the last minute */
.raid-chip.outing { background: #8E6BE8; }
.raid-chip.outing.late { background: #E8443A; animation: outingLate 0.8s ease-in-out infinite alternate; }
@keyframes outingLate { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.04); } }
.book h3 { margin: 16px 0 8px; font-size: 22px; font-weight: 600; }
.stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.sticker { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 3px dashed #C9C2B8; border-radius: 18px; background: #F7F2EA; color: #9A9388; font: 500 14px var(--font); text-align: center; cursor: pointer; }
.sticker .ico { font-size: 38px; }
.sticker.got { border: 3px solid var(--ink); background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--ink); transform: rotate(-2deg); }
.sticker.got:nth-child(even) { transform: rotate(2deg); }
.friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.friend { display: flex; align-items: center; gap: 12px; padding: 10px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; cursor: pointer; }
.friend.unmet { opacity: .6; }
.friend img { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--ink); background: var(--sky); flex: 0 0 auto; }
.friend .petico { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--ink); background: var(--lemon); display: grid; place-items: center; font-size: 40px; flex: 0 0 auto; }
.friend b { display: block; font-size: 20px; font-weight: 600; }
.friend small { display: block; font-size: 14px; color: #5A6878; }
.friend .lhearts { margin: 4px 0; }
.friend .lhearts i { width: 14px; height: 14px; }
.todos { display: flex; flex-direction: column; gap: 10px; }
.todo { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; cursor: pointer; }
.todo.done { background: var(--mint); }
.todo .ico { font-size: 36px; }
.todo > div { flex: 1; }
.todo b { font-size: 20px; font-weight: 600; }
.todo small { display: block; color: #5A6878; font-size: 15px; }
.todo .bar { height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: #F3EEE6; margin-top: 6px; overflow: hidden; }
.todo .bar i { display: block; height: 100%; background: var(--strawberry); transition: width .3s; }
.todo .prog { font: 600 22px var(--font); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.photos figure { margin: 0; border: 4px solid var(--ink); border-radius: 16px; overflow: hidden; background: #fff; transform: rotate(-1.5deg); box-shadow: 0 5px 0 var(--ink); }
.photos figure:nth-child(even) { transform: rotate(1.5deg); }
.photos img { width: 100%; display: block; }
.photos figcaption { padding: 6px 10px; font: 600 16px var(--font); text-align: center; }

/* ---------------- Lock puzzle (gate) — shared with Sunny Fields ---------------- */
.gate-card { width: min(1180px, 96vw); max-height: 96vh; padding: clamp(18px, 3vh, 34px) clamp(20px, 3vw, 40px); display: flex; flex-direction: column; gap: clamp(12px, 2vh, 24px); transform: translateY(24px) scale(.98); transition: transform .25s cubic-bezier(.2, .9, .3, 1.2); overflow: hidden; }
.overlay.show .gate-card { transform: none; }
.gate-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gate-prompt { font-weight: 600; font-size: clamp(30px, 4.6vw, 62px); line-height: 1.08; text-wrap: balance; }
.gate-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 40px; }
.gate-visual.empty { display: none; }
.objs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; max-width: 1000px; }
.obj { position: relative; width: clamp(64px, 8vw, 96px); aspect-ratio: 1; transition: transform .25s ease, opacity .4s ease; }
.obj svg { width: 100%; height: 100%; display: block; }
.obj.in { opacity: 0; transform: translateX(60px) scale(.6); }
.obj.in.arrived { opacity: 1; transform: none; }
.obj.leaving.away { opacity: 0; transform: translateY(-50px) rotate(-12deg); }
.obj.counted { animation: pop .35s ease; }
[data-n]::after { content: attr(data-n); position: absolute; right: -8px; top: -10px; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 17px; background: var(--sun); border: 3px solid var(--ink); font: 600 22px var(--font); display: grid; place-items: center; animation: pop .3s ease; }
.groups { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.groups .op { font: 600 64px var(--font); }
.frame { display: grid; gap: 6px; padding: 8px; background: #fff; border: 4px solid var(--ink); border-radius: 16px; }
.frame.f5 { grid-template-columns: repeat(5, 1fr); }
.frame.f10 { grid-template-columns: repeat(5, 1fr); }
.frame-wrap { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.frame-wrap[hidden] { display: none; }
.cell { position: relative; width: clamp(46px, 5.4vw, 66px); aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 10px; background: #FFF6D6; display: grid; place-items: center; }
.cell.on { background: #fff; }
.cell.on.extra { background: var(--mint); }
.cell.removed { background: #F3D4D4; }
.cell.removed::before { content: ""; position: absolute; inset: 10%; background: linear-gradient(45deg, transparent 44%, var(--bad) 44%, var(--bad) 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--bad) 44%, var(--bad) 56%, transparent 56%); pointer-events: none; }
.cell svg { width: 80%; height: 80%; }
.cell .dot { width: 60%; aspect-ratio: 1; border-radius: 50%; background: #9B7FE6; border: 3px solid var(--ink); }
.cell.counted { animation: pop .35s ease; background: var(--sun); }
.numerals { font: 600 clamp(48px, 7vw, 96px)/1 var(--font); letter-spacing: .02em; }
.track, .pattern { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.num, .pshape { width: clamp(80px, 9vw, 120px); aspect-ratio: 1; border: 4px solid var(--ink); border-radius: 18px; background: #fff; display: grid; place-items: center; font: 600 clamp(36px, 4.6vw, 60px) var(--font); }
.num.q, .pshape.q { background: var(--sun); }
.pshape svg { width: 76%; height: 76%; }
.num.counted { animation: pop .35s ease; background: var(--sky); }
.gate-meta { display: flex; align-items: center; gap: 12px; }
.gate-meta:empty { display: none; }
.planks { display: flex; gap: 8px; }
.plank { width: 64px; height: 20px; border: 3px solid var(--ink); border-radius: 6px; background: #E6E0D0; transition: background .3s; }
.plank.on { background: #FFD23F; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.lockbadge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 10px; border: 3px solid var(--ink); border-radius: 999px; background: var(--sun); font: 600 22px var(--font); }
.lockbadge svg { width: 34px; height: 34px; }
.pic svg { width: clamp(120px, 15vw, 190px); height: auto; display: block; }
.pic.small svg { width: clamp(90px, 10vw, 130px); }
.picrow { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; justify-content: center; }
.lrow { display: flex; gap: 10px; }
.lbox { width: clamp(56px, 6.4vw, 84px); aspect-ratio: 1; border: 4px solid var(--ink); border-radius: 16px; background: #fff; display: grid; place-items: center; font: 600 clamp(36px, 4.6vw, 64px)/1 var(--font); text-transform: lowercase; }
.lbox.gap { background: var(--sun); }
.lbox.slot { background: #FFF6D6; border-style: dashed; }
.lbox.slot.filled { background: var(--mint); border-style: solid; animation: pop .35s ease; }
.listen { border: 5px solid var(--ink); border-radius: 30px; background: #fff; box-shadow: 0 8px 0 var(--ink); padding: 14px 36px; display: flex; align-items: center; gap: 20px; cursor: pointer; font: 600 clamp(48px, 6vw, 80px) var(--font); color: var(--ink); }
.listen svg { width: clamp(60px, 7vw, 90px); height: auto; }
.listen:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--ink); }
.tile.letter { text-transform: lowercase; }
.tile.word { font-size: clamp(28px, 4vw, 56px); text-transform: lowercase; word-break: break-word; }
.tile.used { opacity: .35; }
.gate-tiles.many .tile { min-height: clamp(96px, 15vh, 140px); font-size: clamp(44px, 6vw, 84px); }
.hint-track { margin-top: 10px; }
.gate-tiles { display: flex; gap: clamp(12px, 2vw, 26px); justify-content: center; align-items: stretch; }
.tile { flex: 1 1 0; min-width: 0; min-height: clamp(110px, 18vh, 170px); border: 5px solid var(--ink); border-radius: 26px; cursor: pointer; box-shadow: 0 9px 0 var(--ink); font: 600 clamp(56px, 8vw, 104px)/1 var(--font); color: var(--ink); display: grid; place-items: center; padding: 10px; transition: transform .08s ease, box-shadow .08s ease, background .2s ease; font-variant-numeric: tabular-nums; }
.tile.sky { background: var(--sky); } .tile.sun { background: var(--sun); } .tile.pink { background: var(--pink); } .tile.mint { background: var(--mint); }
.tile:hover { transform: translateY(-3px); box-shadow: 0 12px 0 var(--ink); }
.tile:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--ink); }
.tile.shape svg, .tile.object svg { width: clamp(70px, 9vw, 120px); height: auto; }
.tile.group .mini { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 300px; }
.tile.group .mini svg { width: clamp(34px, 3.6vw, 48px); height: auto; }
.tile.wrong { animation: wobble .55s ease; background: #F3D4D4; }
.tile.right { background: #BFF3C8 !important; animation: pop .5s ease; }
.tile.glow { animation: glow 1s ease-in-out infinite; }
.tile.hint { animation: hint 1.6s ease-in-out infinite; }
.tile:disabled { cursor: default; }
.burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 30px; }
.burst span { position: absolute; left: 50%; top: 55%; width: 26px; height: 16px; border-radius: 50%; background: #F9A8C9; border: 2px solid var(--ink); opacity: 0; }
.burst.go span { animation: petal 1s ease-out forwards; }

@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes wobble { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-14px) rotate(-3deg); } 40% { transform: translateX(12px) rotate(3deg); } 60% { transform: translateX(-8px); } 80% { transform: translateX(6px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes glow { 0%, 100% { box-shadow: 0 9px 0 var(--ink), 0 0 0 0 rgba(255, 201, 60, .9); transform: translateY(0); } 50% { box-shadow: 0 9px 0 var(--ink), 0 0 0 18px rgba(255, 201, 60, 0); transform: translateY(-6px); } }
@keyframes hint { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@keyframes petal { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------------- Grown-ups ---------------- */
.gu-card { width: min(900px, 96vw); max-height: 94vh; overflow: auto; padding: 26px 30px 30px; font-size: 18px; }
.gu-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.gu-kicker { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #5A6878; font-weight: 500; }
.gu-card h2 { margin: 2px 0 0; font-size: 34px; font-weight: 600; }
.gu-card h3 { margin: 22px 0 8px; font-size: 20px; font-weight: 600; }
.gu-q { font-size: 26px; margin: 12px 0; }
.gu-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gu-err { min-height: 26px; color: var(--bad); font-weight: 500; margin-top: 8px; }
.gu-body input[type="number"], .gu-body input[type="text"], .gu-body select, .gu-body textarea { font: 500 20px var(--font); padding: 10px 14px; border: 4px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); min-width: 0; }
.gu-body input[type="number"] { width: 170px; }
.gu-body input[type="text"] { width: min(320px, 100%); }
.gu-body textarea { width: min(320px, 100%); resize: vertical; }
.gu-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.gu-tab { font: 600 18px var(--font); padding: 10px 18px; border: 4px solid var(--ink); border-radius: 999px; background: #fff; cursor: pointer; }
.gu-tab.on { background: var(--sky); }
.gu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gu-stat { background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 10px 14px; }
.gu-stat b { display: block; font-size: 30px; font-weight: 600; }
.gu-stat span { color: #5A6878; font-size: 15px; }
.gu-body table { border-collapse: collapse; width: 100%; margin-top: 6px; }
.gu-body th, .gu-body td { text-align: left; padding: 6px 8px; border-bottom: 2px solid #E8E1CF; }
.gu-body th { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: #5A6878; }
.gu-body td.r { text-align: right; font-variant-numeric: tabular-nums; }
.gu-body label.chk { display: inline-flex; align-items: center; gap: 10px; margin-right: 18px; cursor: pointer; }
.gu-body label.chk input { width: 26px; height: 26px; }
.gu-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding-top: 14px; border-top: 3px solid #E8E1CF; color: #5A6878; font-size: 15px; flex-wrap: wrap; }
.gu-foot a { color: var(--ink); }
.gu-lvl { display: inline-block; background: var(--sun); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 600; }

@media (max-width: 720px) {
  .new-body { flex-direction: column; align-items: center; }
  .talk-top { flex-direction: column; align-items: center; }
  .talk-cards { flex-direction: column; }
  .portrait { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .obj, .tile, .gate-card, .overlay { transition: none; }
  .tile.glow, .tile.hint, .burst.go span, .portrait, .start-title .castle { animation: none; }
}

/* ---------------- Ice cream hut ---------------- */
.panel.icecream { width: min(980px, 96vw); }
.ic-top { display: flex; align-items: center; gap: 18px; }
.ic-top .portrait { width: 110px; height: 110px; border-width: 5px; }
.ic-top .portrait .hearts { font-size: 13px; bottom: -14px; }
.ic-bubble { padding: 14px 22px; min-height: 84px; display: flex; flex-direction: column; justify-content: center; }
.ic-bubble .talk-text { font-size: clamp(20px, 2.4vw, 26px); min-height: 0; }
.ic-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ic-item svg { width: 66px; height: 96px; display: block; }
.ic-hand { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; padding: 22px 0; }
.ic-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ic-foot .btn { font-size: 18px; padding: 8px 16px; }
@media (max-width: 720px) { .ic-top { flex-direction: column; } .ic-bubble::before { display: none; } }
/* the food halls' menus */
.panel.menu { width: min(920px, 96vw); }
.panel.menu .book-note { margin: 0; }
.menuitem .ico { font-size: 56px; }

/* Sherbet Speedway: your lap and place while you race (systems/karts.js) */
.race-hud { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); padding: 10px 24px; border: 4px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 6px 0 var(--ink); font: 700 22px var(--font); white-space: nowrap; pointer-events: none; z-index: 6; }

/* Hospital World: at the wheel of an ambulance (world/lands/ambulance.js): the radio line with the siren, beep and get-out buttons either side */
.amb-hud { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 4px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 6px 0 var(--ink); font: 700 20px var(--font); white-space: nowrap; pointer-events: none; z-index: 6; max-width: 96vw; }
.amb-hud .amb-line { padding: 0 8px; min-width: 190px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.amb-hud .amb-btn { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--ink); background: var(--sun); box-shadow: 0 4px 0 var(--ink); font-size: 26px; cursor: pointer; pointer-events: auto; display: grid; place-items: center; padding: 0; transition: transform .08s ease, box-shadow .08s ease; }
.amb-hud .amb-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.amb-hud .amb-btn.on { animation: ambflash .5s steps(1) infinite; }
@keyframes ambflash { 0% { background: #9FD8FF; } 50% { background: #FF7B7B; } }

/* The Sugarplum Express: the Where-to panel (ui/train.js) and the Ticket Office (ui/tickets.js) */
.panel.train { width: min(1060px, 96vw); }
.panel.train .book-note { margin: 0; }
.train-panel { grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: stretch; }   /* six lands in three rows: the whole line on one screen, no scrolling */
@media (max-width: 760px) { .train-panel { grid-template-columns: 1fr; } }
.lbtn.train { border-left: 14px solid var(--land, var(--pink)); padding: 8px 14px; }
.lbtn.train .lname2 { flex: 1; min-width: 0; }
.lbtn.train .tstamps { display: flex; gap: 6px; margin-top: 6px; }
.lbtn.train .tstamps i { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; display: grid; place-items: center; font-style: normal; font-size: 15px; }
.lbtn.train .tstamps i.ok { background: #BFF3C8; font-weight: 700; }
/* a shut land lists what is still to do and, just as importantly, which land to do it in */
.lbtn.train .twhere { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin-top: 7px; align-items: baseline; }
.lbtn.train .twhere b { font: 600 16px var(--font); color: var(--ink); }
.lbtn.train .twhere i { font: 700 15px var(--font); font-style: normal; color: #2F5DA8; white-space: nowrap; }
.btask .bwhere { font-weight: 700; color: #2F5DA8; }
/* the "how to work the port" list on the Docks' welcome card (ui/estate.js 'port') */
.howto { margin: 0 0 10px; padding: 0 0 0 4px; list-style: none; counter-reset: howto; display: flex; flex-direction: column; gap: 8px; }
.howto li { counter-increment: howto; position: relative; padding: 10px 14px 10px 52px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; font: 600 19px var(--font); }
.howto li::before { content: counter(howto); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--ink); background: var(--sun); display: grid; place-items: center; font: 700 18px var(--font); }
.howto kbd { display: inline-block; min-width: 22px; padding: 1px 7px; border: 2px solid var(--ink); border-bottom-width: 4px; border-radius: 7px; background: #F3EEE8; font: 700 16px var(--font); }
.train-foot { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.train-foot .btn { font-size: 18px; padding: 8px 16px; }

/* The sun loungers' smoothie menu (ui/smoothies.js) */
.panel.smoothie { width: min(880px, 96vw); }
.sm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sm-foot .btn { font-size: 18px; padding: 8px 16px; }

/* The tag on a present left in another royal's bedroom (systems/decorate.js) */
#giftCard { z-index: 23; }   /* over the decorate side panel */
.panel.gift { width: min(760px, 96vw); }
.gift-what { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; }
.gift-what .ico { font-size: 44px; line-height: 1; }
.gift-what .swatchbig { width: 48px; height: 48px; border-radius: 12px; border: 3px solid var(--ink); flex: none; }
.gift-what .name { font: 600 26px var(--font); flex: 1; }
.gift-what .from { font-size: 18px; color: #5A6878; }
.gift-note { font: 500 22px var(--font); padding: 12px 16px; border: 4px solid var(--ink); border-radius: 18px; background: #fff; color: var(--ink); resize: none; width: 100%; box-sizing: border-box; }
.gift-note:focus { outline: 4px solid var(--sun); outline-offset: 2px; }
.gift-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.gift-presets .chip { font: 600 18px var(--font); padding: 8px 14px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 var(--ink); }
.gift-presets .chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.gift-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Hospital World's lifts (ui/lift.js renderHospital): a lit floor display over the door instead of the castle's dial */
.hlift { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 6px 18px; border: 4px solid var(--ink); border-radius: 22px; background: #1F2A38; color: #9FE8D0; box-shadow: 0 5px 0 var(--ink); margin: 2px auto 6px; width: max-content; max-width: 90vw; }
.hlift-emoji { font-size: 34px; }
.hlift-num { font: 700 54px var(--font); min-width: 70px; text-align: center; color: #9FE8D0; text-shadow: 0 0 12px #9FE8D0; }
.hlift-name { font: 600 20px var(--font); color: #fff; }
.hlift-name small { display: block; font-size: 14px; color: #B8C4D0; }
.lbtn.hosp .lnum { background: var(--paper); font-size: 24px; }
.lbtn.hosp.here .lnum { background: #fff; }
/* The Adoption Centre's card (ui/adopt.js) and the kids' menu heading in a food hall's menu (ui/menu.js) */
.panel.adopt { width: min(720px, 96vw); }
.adopt-who { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; }
.adopt-who .face { width: 78px; height: 78px; border-radius: 50%; border: 4px solid var(--ink); background: var(--bow, var(--pink)); display: grid; place-items: center; font-size: 46px; line-height: 1; flex: none; }
.adopt-who .who b { display: block; font: 700 30px var(--font); }
.adopt-who .who small { display: block; font-size: 17px; color: #5A6878; }
.panel.adopt .book-note { font-size: 22px; margin: 4px 0; }
.adopt-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.adopt-foot .btn.big { font-size: 24px; padding: 12px 26px; }
.menu-sub { grid-column: 1 / -1; margin: 4px 0 -4px; font: 700 22px var(--font); color: var(--ink); }
.menuitem.kids { background: #FFF6EE; }

/* Marshmallow Meadows: the Staff Agency, the Meadows Post and Toffee Motors (ui/estate.js), the Builder's Book and the build bar (ui/builder.js) */
.panel.adopt.estate { width: min(880px, 96vw); }
.estate-body { overflow: auto; max-height: 62vh; padding: 2px; }
.estate-body .book-note { font-size: 20px; margin: 4px 0 10px; }
.estate-body .book-note.warn { color: #B4232C; background: #FFE9EA; border: 3px solid #F6B3B8; border-radius: 14px; padding: 8px 12px; }
.estate-coins { font: 700 22px var(--font); padding: 6px 14px; border: 3px solid var(--ink); border-radius: 999px; background: var(--sun); margin-right: auto; margin-left: 12px; }
.staff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.staff { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 4px solid var(--ink); border-radius: 18px; background: #fff; }
.staff.hired { background: #E8FBEE; }
.staff.butler { grid-column: 1 / -1; }
.staff .face { width: 60px; height: 60px; border-radius: 50%; border: 4px solid var(--ink); background: var(--bow, var(--pink)); display: grid; place-items: center; font-size: 34px; line-height: 1; flex: none; }
.staff .who { flex: 1; min-width: 0; }
.staff .who b { display: block; font: 700 22px var(--font); }
.staff .who small { display: block; font-size: 15px; color: #5A6878; }
.staff .btn { white-space: nowrap; }
/* the Herald's ladder of titles and the Castle Fund's jars (ui/estate.js 'rank' / 'castle') */
.staff .jprog { display: block; height: 8px; border-radius: 999px; background: #EEE6DD; overflow: hidden; margin: 4px 0; }
.staff .jprog i { display: block; height: 100%; background: var(--sun); border-radius: 999px; transition: width .3s ease; }
.staff .fundbtns { display: flex; flex-direction: column; gap: 4px; }
.ranks { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ranks li { display: flex; align-items: baseline; gap: 12px; padding: 6px 14px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; opacity: .55; }
.ranks li.had, .ranks li.now, .ranks li.next { opacity: 1; }
.ranks li.now { background: #FFF3C4; }
.ranks li.next { background: #E8FBEE; }
.ranks .rname { font: 700 21px var(--font); white-space: nowrap; }
.ranks small { font-size: 15px; color: #5A6878; }
.post-news { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.post-news li { display: flex; align-items: center; gap: 12px; font: 600 21px var(--font); padding: 8px 14px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; }
.post-news li span { font-size: 28px; }
.post-news li.bad { background: #FFE9EA; }
.post-family { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.post-family .chip { font: 600 16px var(--font); padding: 4px 10px; border: 3px solid var(--ink); border-radius: 999px; background: var(--mint); }
.panel.builder { width: min(1100px, 96vw); }
.build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; overflow: auto; padding: 4px; max-height: 62vh; }
.bcard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 4px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 5px 0 var(--ink); cursor: pointer; font-family: var(--font); color: var(--ink); text-align: left; border-top: 14px solid var(--c, var(--pink)); transition: transform .08s ease; }
.bcard:not(:disabled):hover { transform: translateY(-2px); }
.bcard:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.bcard .bico { font-size: 44px; line-height: 1; }
.bcard .bname { font: 700 21px var(--font); }
.bcard .bprice { font: 600 17px var(--font); color: #5A6878; }
.bcard .bdesc { font-size: 14px; color: #5A6878; }
.bcard .bnote { font: 600 14px var(--font); color: #B4232C; }
.bcard.off { opacity: .55; cursor: default; background: #F3EEE6; }
.bcard.poor .bprice { color: #B4232C; }
/* the Homes page once there is a home: the home's line, the improvement cards, the divider before the other homes (ui/builder.js homeHtml) */
.bhome { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 2px 6px 0; font: 700 22px var(--font); }
.bhome small { font: 600 15px var(--font); color: #5A6878; }
.bhome.sub { margin-top: 10px; padding-top: 10px; border-top: 3px dashed #E6D4C0; font-size: 18px; }
.bcard.up.off .bnote { color: #3B7A4A; }
.build-bar { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 18px; border: 4px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 6px 0 var(--ink); font: 700 20px var(--font); white-space: nowrap; z-index: 6; max-width: 96vw; }
.build-bar.bad { background: #FFF0F1; }
.build-bar .bpick { display: flex; flex-direction: column; min-width: 200px; max-width: 40vw; overflow: hidden; }
.build-bar .bpick b { font-size: 21px; }
.build-bar .bpick small { font-size: 14px; font-weight: 500; color: #5A6878; white-space: normal; }
.build-bar .bcoins { padding: 4px 12px; border: 3px solid var(--ink); border-radius: 999px; background: var(--sun); font-size: 18px; }
.build-bar .amb-btn { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; box-shadow: 0 4px 0 var(--ink); font-size: 24px; cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform .08s ease, box-shadow .08s ease; }
.build-bar .amb-btn.go { background: #BFF3C8; font-size: 28px; }
.build-bar .amb-btn.done { background: #FFD9E8; }
.build-bar .amb-btn:disabled { opacity: .45; cursor: default; }
.build-bar .amb-btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
/* Situations Vacant: the day's jobs on the Meadows Post and behind the coin jar (ui/estate.js, systems/jobs.js) */
#hudMoney { cursor: pointer; }
.post-h { margin: 10px 0 6px; font: 700 22px var(--font); }
.jobs { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.job { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; }
.job.done { background: #E8FBEE; opacity: .85; }
.job .jico { font-size: 30px; line-height: 1; flex: none; }
.job .jbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.job .jbody b { font: 700 20px var(--font); }
.job .jbody small { font-size: 14px; color: #5A6878; }
.job .jprog { display: block; height: 8px; border-radius: 999px; background: #EEE6DD; overflow: hidden; margin-top: 4px; }
.job .jprog i { display: block; height: 100%; background: var(--mint); border-radius: 999px; transition: width .3s ease; }
.job .jpay { font: 700 16px var(--font); white-space: nowrap; padding: 4px 10px; border: 3px solid var(--ink); border-radius: 999px; background: var(--sun); }
.job.done .jpay { background: #BFF3C8; }
.job .btn.small { font-size: 14px; padding: 6px 10px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.book-note.forecast { background: #FFF6E6; border: 3px solid #F2DDB8; border-radius: 14px; padding: 8px 12px; }

/* the Lava King's quest pill under the hearts (systems/lavaking.js): the gifts or the balloons, dim till found, gold once given */
.lavaq { display: flex; gap: 3px; align-items: center; box-sizing: content-box; margin-top: 8px; padding: 4px 12px; border: 4px solid var(--ink); border-radius: 999px; background: #3A1A14; box-shadow: 0 5px 0 var(--ink); font: 700 20px var(--font); line-height: 1; cursor: pointer; color: #fff; }
.lavaq[hidden] { display: none; }
.lavaq .lq { font-size: 24px; margin-right: 2px; }
.lavaq i { font-style: normal; flex: 0 0 26px; width: 26px; text-align: center; opacity: .3; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease, transform .2s ease; }
.lavaq i.held { opacity: 1; filter: none; }
.lavaq i.ok { opacity: 1; filter: none; text-shadow: 0 0 8px rgba(255, 210, 63, .9); transform: scale(1.1); }
.lavaq .lw { margin-left: 4px; font-size: 18px; animation: lavawarn .8s ease infinite alternate; }
@keyframes lavawarn { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.15); opacity: 1; } }
/* the lava boots' heat gauge, above the quest pill in Lava World (systems/lavaboots.js) */
.lavaq.boots { background: #2A2426; cursor: default; }
.lavaq.boots .bar { display: block; flex: none; width: 48px; height: 10px; margin-left: 6px; border-radius: 999px; background: #4A3A34; overflow: hidden; opacity: 1; filter: none; }
.lavaq.boots .bar b { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #FFB347, #FF3D00); transition: width .15s linear; }
.lavaq.boots.hot { animation: lavawarn .5s ease infinite alternate; }