/* Feslottet – HUD (SHELL WP). DESIGN §3.2. All sizes scale with --u (set by hud.js: min(w/1470, h/773)). No emoji: icons are SVG/CSS. */
:root { --u: 1; --hud-gold: #f5c542; --hud-gold2: #e0a91e; --hud-gold3: #b77d08; --hud-tray-h: 0px; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 18; font-family: var(--font); color: var(--ink); }
#hud > * { pointer-events: auto; }
#hud.hidden > * { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s; }
.hud-btn { position: absolute; cursor: pointer; -webkit-tap-highlight-color: transparent; border: 0; padding: 0; background: none; outline: none; }
.hud-btn:focus-visible { outline: 3px dashed var(--lilac); outline-offset: 4px; }
.hud-btn .svgi { width: 100%; height: 100%; display: block; pointer-events: none; overflow: visible; }

/* ------------------------------------------------------------ Pungen (top-left) */
.hud-purse { top: calc(14px * var(--u)); left: calc(14px * var(--u)); height: calc(84px * var(--u)); display: flex; align-items: center;
  gap: calc(10px * var(--u)); padding: 0 calc(12px * var(--u)) 0 calc(12px * var(--u));
  background: linear-gradient(180deg, #fffdf6 0%, #fff1d2 100%); border: calc(4px * var(--u)) solid #fff; border-radius: calc(30px * var(--u));
  box-shadow: 0 calc(5px * var(--u)) 0 rgba(150, 100, 20, .22), 0 calc(10px * var(--u)) calc(24px * var(--u)) rgba(60, 40, 110, .2); transition: transform .12s; }
.hud-purse:active { transform: scale(.97); }
.hud-purse.jiggle { animation: hudJiggle .5s ease-in-out; }
@keyframes hudJiggle { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-3deg) scale(1.03); } 45% { transform: rotate(3deg) scale(1.04); } 70% { transform: rotate(-1.5deg); } }
.hud-purse .pouch { width: calc(40px * var(--u)); height: calc(52px * var(--u)); flex: none; margin-right: calc(-2px * var(--u)); }
.hud-tiers { position: relative; height: calc(50px * var(--u)); min-width: calc(8px * var(--u)); flex: none; transition: width .35s ease, height .35s ease; }
.hud-tiers:empty { display: none; }
.coin10 { position: absolute; top: 0; width: calc(50px * var(--u)); height: calc(50px * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff7c2 0%, #ffe066 28%, var(--hud-gold) 58%, var(--hud-gold2) 100%);
  box-shadow: inset 0 0 0 calc(3px * var(--u)) #f0b628, inset 0 0 0 calc(5px * var(--u)) #ffeaa0, 0 calc(3px * var(--u)) 0 var(--hud-gold3), 0 calc(4px * var(--u)) calc(8px * var(--u)) rgba(120, 80, 0, .35);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(19px * var(--u)); color: #a06a00; letter-spacing: -.5px;
  text-shadow: 0 1px 0 #fff3b8; transition: left .35s ease, transform .35s ease; }
.hud-tiers .coin10 { width: calc(50px * var(--u) * var(--cs, 1)); height: calc(50px * var(--u) * var(--cs, 1)); font-size: calc(19px * var(--u) * var(--cf, 1)); transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease, transform .35s ease; }
.hud-tiers .coin10.coin100 { font-size: calc(15px * var(--u) * var(--cf, 1)); }
.coin10.new { animation: coinDrop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes coinDrop { 0% { transform: translateY(calc(-60px * var(--u))) scale(.4) rotateY(0); opacity: 0; } 60% { opacity: 1; transform: translateY(0) scale(1.15) rotateY(360deg); } 100% { transform: none; } }
.hud-frame { display: grid; grid-template-columns: repeat(5, calc(17px * var(--u))); grid-auto-rows: calc(17px * var(--u)); gap: calc(4px * var(--u));
  padding: calc(6px * var(--u)); background: #fff; border-radius: calc(12px * var(--u)); border: calc(2px * var(--u)) solid #f1dfb2; flex: none; position: relative; }
.hud-frame .cell { border-radius: 50%; background: #fbf3df; box-shadow: inset 0 0 0 calc(1.5px * var(--u)) #efdfb6; position: relative; }
.hud-frame .cell.on { background: radial-gradient(circle at 35% 30%, #fff7c2, #ffd84a 45%, var(--hud-gold2)); box-shadow: 0 calc(1.5px * var(--u)) 0 var(--hud-gold3); }
.hud-frame .cell.on.new { animation: onePop .35s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes onePop { 0% { transform: scale(0) translateY(calc(-14px * var(--u))); } 100% { transform: none; } }
.hud-frame.bundle .cell.on { animation: bundleIn .5s ease-in forwards; }
@keyframes bundleIn { to { transform: translate(var(--bx), var(--by)) scale(.6); opacity: .0; } }
.hud-chip { min-width: calc(66px * var(--u)); height: calc(56px * var(--u)); padding: 0 calc(10px * var(--u)); border-radius: calc(17px * var(--u)); background: #fff;
  border: calc(3px * var(--u)) solid var(--hud-gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(38px * var(--u));
  color: var(--ink); box-shadow: 0 calc(3px * var(--u)) 0 rgba(200, 150, 30, .3); font-variant-numeric: tabular-nums; flex: none; }
.hud-chip.bump { animation: chipBump .35s ease; }
@keyframes chipBump { 50% { transform: scale(1.18); background: #fff6cc; } }
.hud-bundler { position: fixed; z-index: 30; pointer-events: none; width: calc(50px * var(--u)); height: calc(50px * var(--u)); margin: calc(-25px * var(--u)) 0 0 calc(-25px * var(--u)); }
.hud-bundler .coin10 { position: absolute; left: 0; top: 0; animation: bundleSpin .7s ease-out; }
@keyframes bundleSpin { 0% { transform: scale(.2) rotateY(0); } 70% { transform: scale(1.35) rotateY(540deg); } 100% { transform: scale(1) rotateY(720deg); } }
.hud-klink { position: fixed; z-index: 31; pointer-events: none; width: calc(90px * var(--u)); height: calc(90px * var(--u)); margin: calc(-45px * var(--u)) 0 0 calc(-45px * var(--u));
  border-radius: 50%; border: calc(4px * var(--u)) solid #ffe27a; animation: klink .6s ease-out forwards; }
@keyframes klink { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* ------------------------------------------------------------ Kart (top-right) */
.hud-map { top: calc(14px * var(--u)); right: calc(14px * var(--u)); width: calc(86px * var(--u)); height: calc(86px * var(--u)); border-radius: calc(26px * var(--u));
  background: linear-gradient(160deg, #fff8e6, #f6e2b8); border: calc(4px * var(--u)) solid #fff;
  box-shadow: 0 calc(5px * var(--u)) 0 rgba(150, 110, 40, .25), 0 calc(10px * var(--u)) calc(24px * var(--u)) rgba(60, 40, 110, .2); padding: calc(7px * var(--u)); transition: transform .12s; }
.hud-map:hover { transform: translateY(-2px) rotate(-2deg); }
.hud-map:active { transform: scale(.94); }
.hud-map.on { background: linear-gradient(160deg, #fff, #ffe9f3); box-shadow: 0 0 0 calc(5px * var(--u)) rgba(255, 127, 176, .45), 0 calc(10px * var(--u)) calc(24px * var(--u)) rgba(60, 40, 110, .2); }

/* ------------------------------------------------------------ Staven (bottom-centre) */
.hud-wand { left: 50%; bottom: calc(16px * var(--u)); width: calc(108px * var(--u)); height: calc(108px * var(--u)); margin-left: calc(-54px * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fbeaff 0%, #d9c2ff 45%, #b493f5 100%); border: calc(5px * var(--u)) solid #fff;
  box-shadow: 0 calc(6px * var(--u)) 0 #8d6fd6, 0 calc(12px * var(--u)) calc(28px * var(--u)) rgba(90, 50, 170, .35); transition: transform .15s, opacity .25s, bottom .25s; }
.hud-wand:hover { transform: translateY(-3px) scale(1.03); }
.hud-wand:active { transform: scale(.95); }
.hud-wand .svgi { position: absolute; inset: 10%; width: 80%; height: 80%; }
.hud-wand .tw { animation: twinkle 1.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hud-wand .tw.b { animation-delay: .6s; } .hud-wand .tw.c { animation-delay: 1.2s; }
@keyframes twinkle { 0%,100% { opacity: .2; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.1); } }
.hud-gems { position: absolute; inset: 0; pointer-events: none; }
.hud-gem { position: absolute; width: calc(16px * var(--u)); height: calc(16px * var(--u)); margin: calc(-8px * var(--u)) 0 0 calc(-8px * var(--u)); transform: rotate(45deg); border-radius: calc(3px * var(--u));
  border: calc(2px * var(--u)) solid #fff; box-shadow: 0 0 calc(6px * var(--u)) rgba(255, 255, 255, .9), 0 calc(2px * var(--u)) 0 rgba(60, 40, 110, .3); }
.hud-gem.new { animation: gemIn .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gemIn { 0% { transform: rotate(45deg) scale(0); } 60% { transform: rotate(225deg) scale(1.8); } 100% { transform: rotate(45deg) scale(1); } }
body.hud-task #hud .hud-wand, body.tray-open #hud .hud-wand { opacity: 0; pointer-events: none; transform: translateY(calc(30px * var(--u))) scale(.8); }

/* ------------------------------------------------------------ Puff (bottom-right) */
.hud-puff { right: calc(16px * var(--u)); bottom: calc(14px * var(--u)); width: calc(96px * var(--u)); height: calc(88px * var(--u)); transition: bottom .25s, transform .15s; z-index: 2; }
.hud-puff .svgi { animation: puffFloat 3.2s ease-in-out infinite; filter: drop-shadow(0 calc(5px * var(--u)) calc(6px * var(--u)) rgba(80, 100, 160, .3)); }
@keyframes puffFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(-5px * var(--u))); } }
.hud-puff:active .svgi { transform: scale(.92); }
.hud-puff .mouth-o { display: none; }
.hud-puff.talk .mouth-o { display: inline; animation: talk .28s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
.hud-puff.talk .mouth-s { display: none; }
@keyframes talk { from { transform: scaleY(.45); } to { transform: scaleY(1.1); } }
.hud-puff .halo { position: absolute; left: 50%; top: 50%; width: 130%; height: 130%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 230, 120, .85) 0%, rgba(255, 220, 90, .35) 45%, rgba(255, 220, 90, 0) 70%); transition: opacity .3s; }
.hud-puff.glow .halo { opacity: 1; animation: halo 1.1s ease-in-out infinite alternate; }
.hud-puff.glow .svgi { animation: puffFloat 1.2s ease-in-out infinite; }
@keyframes halo { from { transform: translate(-50%, -50%) scale(.9); } to { transform: translate(-50%, -50%) scale(1.12); } }
.hud-puff .spark { position: absolute; width: calc(12px * var(--u)); height: calc(12px * var(--u)); opacity: 0; pointer-events: none; }
.hud-puff.glow .spark { animation: sparkle 1.4s ease-in-out infinite; }
.hud-puff .spark.s2 { animation-delay: .45s !important; } .hud-puff .spark.s3 { animation-delay: .9s !important; }
@keyframes sparkle { 0%,100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(90deg); } }
body.hud-task .hud-puff { z-index: 26; }
body.hud-task #hud { z-index: 26; pointer-events: none; }

/* ------------------------------------------------------------ gear (bottom-left, parent) */
.hud-gear { left: calc(10px * var(--u)); bottom: calc(10px * var(--u)); width: calc(34px * var(--u)); height: calc(34px * var(--u)); opacity: .4; transition: opacity .2s; touch-action: none; }
.hud-gear:hover, .hud-gear.hold { opacity: .95; }
.hud-gear .ring { stroke-dasharray: 100; stroke-dashoffset: 100; }
.hud-gear.hold .ring { stroke-dashoffset: 0; transition: stroke-dashoffset 3s linear; }

/* ------------------------------------------------------------ subtitle (DESIGN: Andika 24px, max 760px, bottom 132px) */
#sub { bottom: calc(136px * var(--u)); font-size: calc(25px * var(--u)); max-width: min(760px, 62vw); padding: calc(9px * var(--u)) calc(22px * var(--u));
  border-radius: calc(20px * var(--u)); border: 3px solid #fff; background: rgba(255, 253, 248, .95); line-height: 1.25; transition: opacity .15s, bottom .25s; }
#sub[data-voice=""]::before, #sub:not([data-voice])::before { content: ''; display: inline-block; width: calc(26px * var(--u)); height: calc(16px * var(--u)); margin-right: calc(10px * var(--u)); vertical-align: -1px;
  background: radial-gradient(circle at 30% 70%, #fff 0 34%, transparent 36%), radial-gradient(circle at 62% 45%, #fff 0 40%, transparent 42%), radial-gradient(circle at 85% 72%, #fff 0 28%, transparent 30%);
  filter: drop-shadow(0 0 1.5px #9cc4ef) drop-shadow(0 1px 0 #9cc4ef); }
body.tray-open #sub { bottom: calc(var(--hud-tray-h) + 14px * var(--u)); }
body.screen-on #sub { z-index: 120; }

/* ------------------------------------------------------------ region banner + fades */
.hud-place { position: fixed; left: 50%; top: calc(18px * var(--u)); transform: translate(-50%, calc(-140px * var(--u))); z-index: 17; pointer-events: auto; cursor: pointer;
  padding: calc(8px * var(--u)) calc(40px * var(--u)) calc(10px * var(--u)); font-size: calc(40px * var(--u)); font-weight: 700; color: #6a3f12; white-space: nowrap;
  background: linear-gradient(#fff7df, #f6dfae); border: calc(4px * var(--u)) solid #fff; border-radius: calc(18px * var(--u));
  box-shadow: 0 calc(5px * var(--u)) 0 #d6b06a, 0 calc(12px * var(--u)) calc(26px * var(--u)) rgba(90, 60, 20, .25); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.hud-place.on { transform: translate(-50%, 0); }
.hud-place::before, .hud-place::after { content: ''; position: absolute; top: 50%; width: calc(26px * var(--u)); height: calc(36px * var(--u)); margin-top: calc(-14px * var(--u)); background: #f0c97a; z-index: -1;
  border-radius: 4px; }
.hud-place::before { left: calc(-18px * var(--u)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.hud-place::after { right: calc(-18px * var(--u)); clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.hud-fade { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at 50% 50%, #fffef8 0%, #fff4fb 55%, #f1e6ff 100%); }
.hud-fade.on { opacity: 1; pointer-events: auto; }
.hud-fade .fs { position: absolute; width: 14px; height: 14px; background: #ffd84a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sparkle 1s ease-in-out infinite; }

/* ------------------------------------------------------------ tower-floor ceremony + gem toast */
.hud-cer { position: fixed; left: 50%; top: 42%; z-index: 28; pointer-events: none; transform: translate(-50%, -50%) scale(.3); opacity: 0; transition: all .45s cubic-bezier(.3, 1.5, .5, 1);
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hud-cer.on { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.hud-cer .tw-svg { width: calc(210px * var(--u)); height: calc(266px * var(--u)); filter: drop-shadow(0 8px 14px rgba(80, 50, 140, .35)); position: relative; }
.hud-cer .disk { position: absolute; left: 50%; top: 46%; width: calc(300px * var(--u)); height: calc(300px * var(--u)); margin: calc(-150px * var(--u)) 0 0 calc(-150px * var(--u)); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 246, 200, .85) 45%, rgba(255, 240, 170, 0) 70%); }
.hud-cer .coin10 { position: absolute; left: 72%; top: 58%; width: calc(70px * var(--u)); height: calc(70px * var(--u)); font-size: calc(26px * var(--u)); opacity: 0; transform: scale(.2); transition: all .45s cubic-bezier(.3, 1.6, .5, 1); }
.hud-cer.coin .coin10 { opacity: 1; transform: scale(1) rotate(-8deg); }
.hud-cer .tw-new { animation: floorIn .9s cubic-bezier(.3, 1.5, .5, 1) .25s both; transform-origin: center bottom; transform-box: fill-box; }
@keyframes floorIn { 0% { transform: translateY(-60px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.hud-cer .rays { position: absolute; left: 50%; top: 46%; width: calc(460px * var(--u)); height: calc(460px * var(--u)); margin: calc(-230px * var(--u)) 0 0 calc(-230px * var(--u)); z-index: -1;
  background: repeating-conic-gradient(rgba(255, 230, 140, .55) 0 10deg, rgba(255, 230, 140, 0) 10deg 22deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ home arrow (3D-anchored HTML) */
.hud-homearrow { position: fixed; left: 0; top: 0; z-index: 11; pointer-events: none; width: calc(54px * var(--u)); height: calc(54px * var(--u)); margin: calc(-27px * var(--u)) 0 0 calc(-27px * var(--u)); display: none;
  filter: drop-shadow(0 0 6px rgba(255, 220, 120, .95)); }

/* ------------------------------------------------------------ parent gate + parent page (plain text, for the parent) */
.panel-wrap.gate .panel { width: calc(430px * var(--u)); text-align: center; }
.gate h3 { margin: 6px 0 4px; font-size: 22px; color: var(--ink2); font-weight: 700; }
.gate .q { font-size: 46px; font-weight: 700; margin: 6px 0 12px; }
.gate .ans { display: inline-block; min-width: 140px; height: 64px; line-height: 60px; font-size: 40px; font-weight: 700; border: 3px solid var(--line); border-radius: 16px; background: #fff; margin-bottom: 12px; }
.gate .pad { display: grid; grid-template-columns: repeat(3, 84px); gap: 10px; justify-content: center; }
.gate .pad .kbtn { min-width: 84px; min-height: 64px; font-size: 30px; padding: 0; }
.gate .ans.wrong { animation: shake .35s; border-color: var(--red); }

.panel-wrap.parent .panel { width: min(1180px, 96vw); max-height: 94vh; padding: 22px 26px 30px; background: #fbf9ff; }
.pp { font-family: var(--font); color: #2f2748; font-size: 15px; line-height: 1.35; user-select: text; -webkit-user-select: text; }
.pp h2 { font-size: 26px; margin: 0 0 2px; }
.pp h3 { font-size: 18px; margin: 22px 0 8px; color: #4a3f6b; border-bottom: 2px solid #ece6fa; padding-bottom: 4px; }
.pp .sub { color: #6b6385; font-size: 14px; }
.pp .kpis { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 2px; }
.pp .kpi { background: #fff; border: 1px solid #e6e0f5; border-radius: 12px; padding: 8px 14px; min-width: 118px; }
.pp .kpi b { display: block; font-size: 24px; }
.pp .kpi span { color: #6b6385; font-size: 13px; }
.pp .strands { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 12px; }
.pp .card { background: #fff; border: 1px solid #e6e0f5; border-radius: 14px; padding: 12px 14px; }
.pp .card .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pp .card .nm { font-weight: 700; font-size: 16px; }
.pp .card .rg { font-weight: 700; font-size: 16px; color: #5b3fc4; white-space: nowrap; }
.pp .card .ds { color: #5d5677; font-size: 13.5px; min-height: 18px; margin: 2px 0 6px; }
.pp .ladder { display: flex; gap: 3px; margin: 6px 0; flex-wrap: wrap; }
.pp .ladder i { display: block; width: 24px; height: 18px; border-radius: 4px; background: #eeeaf6; font-style: normal; font-size: 10px; text-align: center; line-height: 18px; color: #8a83a3; }
.pp .ladder i.p { background: #9fd9b4; color: #1e5a35; }
.pp .ladder i.v { background: repeating-linear-gradient(45deg, #cfeedd 0 4px, #a8dcbd 4px 8px); color: #1e5a35; }
.pp .ladder i.m { background: #f2c94c; color: #6b4e00; }
.pp .ladder i.c { outline: 2px solid #5b3fc4; outline-offset: 1px; font-weight: 700; color: #2f2748; }
.pp .meta { display: flex; gap: 14px; color: #5d5677; font-size: 13px; flex-wrap: wrap; }
.pp .meta b { color: #2f2748; }
.pp svg text { font-family: var(--font); }
.pp .legend { display: flex; gap: 14px; flex-wrap: wrap; color: #5d5677; font-size: 12.5px; margin-top: 4px; }
.pp .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pp table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.pp th { text-align: left; color: #6b6385; font-weight: 700; font-size: 12.5px; padding: 4px 8px; border-bottom: 1px solid #e6e0f5; }
.pp td { padding: 3px 8px; border-bottom: 1px solid #f1eef8; font-variant-numeric: tabular-nums; }
.pp td.oA { color: #1f8a4c; font-weight: 700; } .pp td.oB { color: #b07d00; font-weight: 700; } .pp td.oC { color: #c23a4a; font-weight: 700; }
.pp .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp .chips span { background: #fff; border: 1px solid #e6e0f5; border-radius: 999px; padding: 2px 10px; font-size: 13.5px; }
.pp .chips span b { color: #5b3fc4; margin-left: 4px; }
.pp .empty { color: #8a83a3; font-style: italic; }
.pp .scroll { max-height: 330px; overflow: auto; border: 1px solid #ece6fa; border-radius: 10px; background: #fff; }
.pp .set { display: grid; grid-template-columns: 210px 1fr; gap: 10px 14px; align-items: center; }
.pp .set label { font-weight: 700; color: #4a3f6b; }
.pp .seg { display: inline-flex; border: 1px solid #d9d0f0; border-radius: 10px; overflow: hidden; }
.pp .seg button { border: 0; background: #fff; padding: 8px 14px; font-size: 14px; cursor: pointer; color: #4a3f6b; min-width: 54px; border-right: 1px solid #ece6fa; }
.pp .seg button:last-child { border-right: 0; }
.pp .seg button.on { background: #5b3fc4; color: #fff; font-weight: 700; }
.pp .act { border: 1px solid #d9d0f0; background: #fff; border-radius: 10px; padding: 8px 14px; font-size: 14px; cursor: pointer; color: #3b2f5c; margin-right: 6px; }
.pp .act:hover { background: #f4f0ff; }
.pp .act.danger { border-color: #f0b8c0; color: #b02a3c; position: relative; overflow: hidden; }
.pp .act.danger .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(240, 90, 110, .25); }
.pp .act.danger.hold .fill { width: 100%; transition: width 2s linear; }
.pp .note { color: #6b6385; font-size: 13px; margin-top: 4px; }
.pp .heat td { padding: 0; border: 0; }
.pp .heat td.h { width: 44px; height: 30px; text-align: center; font-size: 12px; color: #2f2748; border: 2px solid #fbf9ff; border-radius: 6px; }
.pp .heat th { border: 0; padding: 2px 6px; }
@media (max-width: 900px) { .pp .two { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ map panel (canvas parchment) */
.panel-wrap.map .panel { padding: 10px; background: #f6e9cc; border-color: #fff; }
.map-wrap { line-height: 0; }
.map-cv { display: block; width: min(1000px, 86vw, calc((92vh - 30px) * 1.6667)); height: auto; aspect-ratio: 1000 / 600; cursor: pointer; border-radius: 18px; }
body.screen-on #panels { z-index: 110; }
body.screen-on #toasts { z-index: 111; }

/* Staven: a slow sparkle orbit invites a tap (no text) */
.hud-wand::before { content: ''; position: absolute; inset: calc(-10px * var(--u)); border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 62%, rgba(255, 246, 192, .95) 74%, rgba(255, 255, 255, 0) 86%);
  -webkit-mask: radial-gradient(circle, transparent 0 63%, #000 65% 70%, transparent 72%); mask: radial-gradient(circle, transparent 0 63%, #000 65% 70%, transparent 72%);
  animation: spin 3.2s linear infinite; }
.hud-puff.glow .svgi { filter: drop-shadow(0 0 calc(8px * var(--u)) rgba(255, 205, 70, .95)) drop-shadow(0 0 calc(3px * var(--u)) #ffd84a); }

/* morning: the fade becomes a sunrise (new day) */
.hud-fade .sun { position: absolute; left: 50%; bottom: -40%; width: calc(240px * var(--u)); height: calc(240px * var(--u)); transform: translateX(-50%) rotate(-20deg);
  transition: bottom 1.2s cubic-bezier(.2, .9, .3, 1.1), transform 1.2s ease; filter: drop-shadow(0 0 calc(30px * var(--u)) rgba(255, 210, 90, .9)); }
.hud-fade.sunrise { background: linear-gradient(180deg, #ffe9f4 0%, #fff3d6 55%, #ffd9a8 100%); }
.hud-fade.sunrise.on .sun { bottom: 34%; transform: translateX(-50%) rotate(0deg); }
.hud-fade:not(.sunrise) .sun { display: none; }

/* ------------------------------------------------------------ the spell bar is open: Staven steps aside */
body.wand-open #hud .hud-wand { opacity: 0; pointer-events: none; transform: translateY(calc(30px * var(--u))) scale(.8); }

/* ------------------------------------------------------------ first-run onboarding: big Puff, the tapping hand, highlights */
.onb-puff { position: fixed; left: 50%; top: 34%; z-index: 96; pointer-events: none; width: calc(270px * var(--u)); height: calc(243px * var(--u));
  transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform .7s cubic-bezier(.3, 1.5, .5, 1), opacity .4s; }
.onb-puff.in { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.onb-puff.in .svgi { animation: puffFloat 2.6s ease-in-out infinite; }
.onb-puff.home { transition: transform .7s cubic-bezier(.5, 0, .7, .4), opacity .7s ease-in; opacity: .4;
  transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--ts)); }
.onb-puff .svgi { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 calc(10px * var(--u)) calc(14px * var(--u)) rgba(80, 100, 160, .35)); }
.onb-puff .mouth-o { display: none; }
.onb-puff.talk .mouth-o { display: inline; animation: talk .28s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
.onb-puff.talk .mouth-s { display: none; }
.onb-puff .glow { position: absolute; left: 50%; top: 55%; width: 170%; height: 170%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 246, 200, .95) 0%, rgba(255, 220, 240, .55) 40%, rgba(255, 220, 240, 0) 70%); animation: halo 1.6s ease-in-out infinite alternate; }
.hud-puff.onb-pop .svgi { animation: onbPop .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes onbPop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.onb-hand { position: fixed; left: 0; top: 0; z-index: 97; pointer-events: none; width: calc(78px * var(--u)); height: calc(101px * var(--u)); display: none;
  transform: translate(-37.5%, -4%); transform-origin: 37.5% 4%; filter: drop-shadow(0 0 calc(10px * var(--u)) rgba(255, 220, 110, .95)) drop-shadow(0 calc(4px * var(--u)) calc(4px * var(--u)) rgba(70, 40, 130, .35)); }
.onb-hand.on { display: block; }
.onb-hand.down { transform: translate(-37.5%, -4%) rotate(180deg); }
.onb-hand .tap { width: 100%; height: 100%; animation: onbTap 1.3s ease-in-out infinite; }
@keyframes onbTap { 0%, 100% { transform: translateY(calc(26px * var(--u))); } 45% { transform: translateY(calc(26px * var(--u))); } 62% { transform: translateY(calc(4px * var(--u))) scale(.94); } 75% { transform: translateY(calc(6px * var(--u))) scale(.96); } }
.onb-ring { position: fixed; left: 0; top: 0; z-index: 96; pointer-events: none; width: calc(70px * var(--u)); height: calc(70px * var(--u)); margin: calc(-35px * var(--u)) 0 0 calc(-35px * var(--u));
  border-radius: 50%; border: calc(5px * var(--u)) solid #ffe066; box-shadow: 0 0 calc(12px * var(--u)) rgba(255, 220, 110, .9), inset 0 0 calc(10px * var(--u)) rgba(255, 255, 255, .8); display: none; opacity: 0; }
.onb-ring.on { display: block; animation: onbRing 1.3s ease-out infinite; }
@keyframes onbRing { 0%, 55% { transform: scale(.3); opacity: 0; } 62% { transform: scale(.45); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
body.onb-wand #hud .hud-wand { animation: onbWand 1s ease-in-out infinite alternate; }
@keyframes onbWand { from { box-shadow: 0 calc(6px * var(--u)) 0 #8d6fd6, 0 0 0 calc(6px * var(--u)) rgba(255, 230, 120, .6); } to { box-shadow: 0 calc(6px * var(--u)) 0 #8d6fd6, 0 0 0 calc(22px * var(--u)) rgba(255, 230, 120, 0), 0 0 calc(40px * var(--u)) rgba(255, 230, 120, .9); } }
.hud-wand.onb-press { transform: scale(.9) !important; }
.onb-hand.left { transform: translate(-37.5%, -4%) rotate(-90deg); }
.pp .explain { background: #fff; border: 1px solid #e6e0f5; border-left: 4px solid #b9a5f0; border-radius: 10px; padding: 8px 12px; color: #4a4366; font-size: 14px; line-height: 1.45; margin: 4px 0 10px; max-width: 1060px; }
.pp h4 { font-size: 14px; margin: 6px 0 6px; color: #6b6385; }
.pp .chips span.sp { background: #f3fbf6; border-color: #cfeedd; }
.pp .chips span.nr { background: #fff8ec; border-color: #f3e0bb; }
.pp .chips span.nr s { color: #a06a00; text-decoration-color: rgba(200, 80, 80, .55); }
.pp { text-align: left; }
.pp .chips { justify-content: flex-start; }
.pp table.heat { width: auto; }
.pp .heat th:first-child { min-width: 96px; }
body.overview-on #hud .hud-wand { opacity: 0; pointer-events: none; transform: translateY(calc(30px * var(--u))) scale(.8); }
/* a hundred: rose-gold «100» coin (shown before the tens) */
.coin10.coin100 { background: radial-gradient(circle at 34% 30%, #fff4fa 0%, #ffc6df 30%, #ff94c0 60%, #d95c94 100%); color: #8a1f55; font-size: calc(15px * var(--u)); letter-spacing: -.8px;
  box-shadow: inset 0 0 0 calc(3px * var(--u)) #f07cae, inset 0 0 0 calc(5px * var(--u)) #ffd6e8, 0 calc(3px * var(--u)) 0 #b34477, 0 calc(4px * var(--u)) calc(8px * var(--u)) rgba(120, 20, 70, .35); text-shadow: 0 1px 0 #ffe3f0; }
/* the parent gate / page sit above everything of the child's HUD (even during a task) */
body.parent-open #hud { z-index: 18 !important; }
/* a closing panel (no .on any more) never catches taps while it fades out (its removal runs on a real-time timer) */
#panels .panel-wrap:not(.on) { pointer-events: none; }
/* an open panel (map, shop, cards): the region banner never peeks out above it */
body.panel-on .hud-place { visibility: hidden; }
/* a shop panel shows its own purse (and would cover the bottom of this one): the HUD purse fades out meanwhile */
body.shop-on #hud .hud-purse { opacity: 0; pointer-events: none; transition: opacity .2s; }

/* ================================================================== DESIGN2 WP10: album button, Kikkert chip, map glow, kingdom banner, cloud ride */
/* Vennealbumet: a book with a paw, left of the Kart button (album.css owns .bf-bump / .al-new) */
.hud-album { top: calc(14px * var(--u)); right: calc(112px * var(--u)); width: calc(86px * var(--u)); height: calc(86px * var(--u)); border-radius: calc(26px * var(--u));
  background: linear-gradient(160deg, #fff4fb, #f3dcff); border: calc(4px * var(--u)) solid #fff; padding: calc(8px * var(--u));
  box-shadow: 0 calc(5px * var(--u)) 0 rgba(150, 90, 170, .25), 0 calc(10px * var(--u)) calc(24px * var(--u)) rgba(60, 40, 110, .2); transition: transform .12s; }
.hud-album:hover { transform: translateY(-2px) rotate(2deg); }
.hud-album:active { transform: scale(.94); }
.hud-album-n { position: absolute; right: calc(-8px * var(--u)); bottom: calc(-8px * var(--u)); min-width: calc(34px * var(--u)); height: calc(34px * var(--u)); padding: 0 calc(5px * var(--u));
  border-radius: calc(17px * var(--u)); background: #fff; border: calc(3px * var(--u)) solid #c9b8ff; color: var(--ink); font-weight: 700; font-size: calc(20px * var(--u));
  display: none; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; pointer-events: none; box-shadow: 0 calc(2px * var(--u)) 0 rgba(120, 90, 170, .3); }
.hud-album-n.on { display: flex; }
body.hud-task #hud .hud-album { opacity: .35; pointer-events: none; }
/* the Kikkert chip (only once she owns the binoculars) */
.hud-kikkert { top: calc(24px * var(--u)); right: calc(210px * var(--u)); width: calc(68px * var(--u)); height: calc(68px * var(--u)); border-radius: 50%; display: none;
  background: radial-gradient(circle at 38% 30%, #ffffff, #e8f4ff 60%, #c9e3fb); border: calc(4px * var(--u)) solid #fff; padding: calc(6px * var(--u));
  box-shadow: 0 calc(4px * var(--u)) 0 rgba(90, 120, 170, .25), 0 calc(8px * var(--u)) calc(18px * var(--u)) rgba(60, 40, 110, .18); }
.hud-kikkert.on { display: block; }
body.hud-task #hud .hud-kikkert { opacity: 0; pointer-events: none; }
/* the Kart button glows: a far quest target, or a new kingdom on the map */
.hud-map.glow { animation: mapGlow 1.1s ease-in-out infinite alternate; }
@keyframes mapGlow { from { box-shadow: 0 calc(5px * var(--u)) 0 rgba(150, 110, 40, .25), 0 0 0 calc(4px * var(--u)) rgba(255, 216, 74, .55); }
  to { box-shadow: 0 calc(5px * var(--u)) 0 rgba(150, 110, 40, .25), 0 0 0 calc(12px * var(--u)) rgba(255, 216, 74, 0), 0 0 calc(34px * var(--u)) rgba(255, 210, 80, .95); transform: scale(1.06); } }
.hud-map.glow::after { content: ''; position: absolute; right: calc(-6px * var(--u)); top: calc(-8px * var(--u)); width: calc(26px * var(--u)); height: calc(26px * var(--u));
  background: #ffd84a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sparkle 1.2s ease-in-out infinite; }
/* the region banner of a kingdom: its crest in front of the castle name */
.hud-place.realm { display: flex; align-items: center; gap: calc(12px * var(--u)); padding-left: calc(18px * var(--u)); }
.hud-place .hud-crest { width: calc(52px * var(--u)); height: calc(52px * var(--u)); flex: none; filter: drop-shadow(0 calc(2px * var(--u)) calc(3px * var(--u)) rgba(90, 60, 20, .35)); }
/* the cloud ride (F.Travel): blue sky with clouds drifting past */
.trav-sky { position: fixed; inset: 0; z-index: 91; pointer-events: none; opacity: 0; transition: opacity .32s ease-in;
  background: linear-gradient(180deg, #a9dcff 0%, #cdeeff 45%, #fff3fb 100%); overflow: hidden; }
.trav-sky.on { opacity: 1; pointer-events: auto; }
.trav-sky.out { opacity: 0; transition: opacity .55s ease-out; }
.trav-c { position: absolute; width: calc(220px * var(--u) * var(--s, 1)); height: calc(80px * var(--u) * var(--s, 1)); margin-left: -110px; animation: travDrift 1.3s linear infinite; }
.trav-c i { position: absolute; bottom: 0; border-radius: 50%; background: #fff; box-shadow: 0 calc(6px * var(--u)) calc(14px * var(--u)) rgba(120, 160, 210, .25); }
.trav-c i:nth-child(1) { left: 0; width: 45%; height: 70%; } .trav-c i:nth-child(2) { left: 25%; width: 50%; height: 100%; } .trav-c i:nth-child(3) { left: 55%; width: 45%; height: 65%; }
@keyframes travDrift { from { transform: translate(40vw, 0); } to { transform: translate(-60vw, 0); } }
.trav-fe { position: absolute; left: 50%; top: 52%; width: calc(70px * var(--u)); height: calc(70px * var(--u)); margin: calc(-35px * var(--u)) 0 0 calc(-35px * var(--u));
  background: radial-gradient(circle, #fff 0 30%, rgba(255, 216, 74, .8) 32%, rgba(255, 216, 74, 0) 70%); border-radius: 50%; animation: halo .5s ease-in-out infinite alternate; }

/* the royal-quest basket (WP8 F.RQuest carry → quests_realm.js): what she carries for a deliver step; a HUD chip under the purse, tap = show the way */
.rq-basket { top: calc(112px * var(--u)); left: calc(14px * var(--u)); width: calc(86px * var(--u)); height: calc(86px * var(--u)); border-radius: calc(26px * var(--u));
  display: none; align-items: center; justify-content: center; background: linear-gradient(160deg, #fffdf6, #ffe9bf); border: calc(4px * var(--u)) solid #fff;
  box-shadow: 0 calc(5px * var(--u)) 0 rgba(150, 100, 20, .22), 0 calc(10px * var(--u)) calc(24px * var(--u)) rgba(60, 40, 110, .2); transition: transform .12s, opacity .2s; }
.rq-basket::before { content: ''; position: absolute; left: 22%; right: 22%; top: calc(-14px * var(--u)); height: calc(26px * var(--u)); border: calc(5px * var(--u)) solid #d39a3a;
  border-bottom: 0; border-radius: calc(20px * var(--u)) calc(20px * var(--u)) 0 0; pointer-events: none; }
.rq-basket-img { width: calc(66px * var(--u)); height: calc(66px * var(--u)); display: block; pointer-events: none; }
.rq-basket:hover { transform: translateY(-2px) rotate(-2deg); }
.rq-basket:active { transform: scale(.94); }
.rq-basket.rq-in { animation: rqBasketIn .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rqBasketIn { 0% { transform: scale(.2); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
body.hud-task #hud .rq-basket, body.shop-on #hud .rq-basket { opacity: .35; pointer-events: none; }
/* the outdoor map is open: its frame would cover half the purse chip at 1470×773 (review WP10 #5) – the purse and basket fade like in a shop */
body.map-open #hud .hud-purse, body.map-open #hud .rq-basket { opacity: 0; pointer-events: none; transition: opacity .2s; }

/* lead: the open album / map is a full book – world speech bubbles and labels (fixed layers above #panels) wait behind it */
body.album-open #bubbles, body.album-open #labels, body.map-open #bubbles, body.map-open #labels { visibility: hidden; }

/* ------------------------------------------------------------ natural audit D11 (#54): during a task the purse collapses to the pouch
   (its gold coin) + the count – the big coins and the ten-frame never reach down over a task board's plaques. hud.js sets body.hud-mini
   on taskStart and takes it off when coins arrive (the payoff) or the task ends. */
body.hud-mini #hud .hud-purse { height: calc(60px * var(--u)); gap: calc(6px * var(--u)); padding: 0 calc(8px * var(--u)); border-radius: calc(22px * var(--u)); }
body.hud-mini #hud .hud-purse .hud-tiers, body.hud-mini #hud .hud-purse .hud-frame { display: none; }
body.hud-mini #hud .hud-purse .pouch { width: calc(30px * var(--u)); height: calc(39px * var(--u)); }
body.hud-mini #hud .hud-purse .hud-chip { min-width: calc(48px * var(--u)); height: calc(40px * var(--u)); font-size: calc(26px * var(--u)); border-radius: calc(13px * var(--u)); }

/* ================================================================== economy plan §5 (owner «hud»): notes in the purse (js/game/purse.js)
   a sky-blue «100» note (the task prop fx_n2_lapp100: sky + ice) and a lilac «1000» note, fanned before the tens; silent merges / breaks */
.hud-notes { position: relative; flex: none; height: 0; width: 0; transition: width .35s ease; }
.hud-notes:not(.has) { display: none; }
.pnote { position: absolute; width: calc(44px * var(--u)); height: calc(24px * var(--u)); border-radius: calc(4px * var(--u)); box-sizing: border-box;
  background: linear-gradient(160deg, #f4fbff 0%, #d9f1fd 55%, #c3e7fa 100%); border: calc(2.5px * var(--u)) solid #6cc2ec;
  box-shadow: inset 0 0 0 calc(2px * var(--u)) #eefaff, 0 calc(2px * var(--u)) 0 rgba(60, 120, 160, .35), 0 calc(3px * var(--u)) calc(6px * var(--u)) rgba(40, 70, 110, .2);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(13px * var(--u)); color: #2a5a78; letter-spacing: -.4px; line-height: 1;
  transform-origin: 50% 80%; transition: left .35s ease, top .35s ease; }
.pnote::before { content: ''; position: absolute; left: 12%; top: 50%; width: calc(7px * var(--u)); height: calc(7px * var(--u)); margin-top: calc(-3.5px * var(--u)); border-radius: 50%; background: rgba(108, 194, 236, .45); }
.pnote::after { content: ''; position: absolute; right: 12%; top: 50%; width: calc(7px * var(--u)); height: calc(7px * var(--u)); margin-top: calc(-3.5px * var(--u)); border-radius: 50%; background: rgba(108, 194, 236, .45); }
.pnote span { position: relative; z-index: 1; }
.pnote.n1000 { width: calc(50px * var(--u)); height: calc(28px * var(--u)); font-size: calc(12.5px * var(--u)); color: #573c9a;
  background: linear-gradient(160deg, #fbf8ff 0%, #ece2ff 55%, #dccbff 100%); border-color: #a68be8; box-shadow: inset 0 0 0 calc(2px * var(--u)) #f7f2ff, 0 calc(2px * var(--u)) 0 rgba(110, 80, 170, .35), 0 calc(3px * var(--u)) calc(6px * var(--u)) rgba(60, 40, 110, .22); }
.pnote.n1000::before, .pnote.n1000::after { background: rgba(166, 139, 232, .45); }
.hud-notes .pnote.new { animation: noteIn .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes noteIn { 0% { transform: translateY(calc(-14px * var(--u))) scale(.5); opacity: .2; } 100% { opacity: 1; } }
/* a merge / break flies in screen space (fixed, centred on its point) */
.hud-pfly { position: fixed; z-index: 31; pointer-events: none; width: 0; height: 0; }
.hud-pfly > * { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.hud-pfly.coin .coin10 { width: calc(50px * var(--u) * var(--cs, 1)); height: calc(50px * var(--u) * var(--cs, 1)); font-size: calc(19px * var(--u) * var(--cf, 1)); }
.hud-pfly.unfold > .pnote { animation: noteUnfold .3s ease-out both; }
@keyframes noteUnfold { 0% { transform: translate(-50%, -50%) scale(.25, .1); } 70% { transform: translate(-50%, -50%) scale(1.15); } 100% { transform: translate(-50%, -50%) scale(1); } }
.hud-pfly.fold > .pnote { animation: noteFold .3s ease-in both; }
@keyframes noteFold { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.18); } 100% { transform: translate(-50%, -50%) scale(.2, .1); opacity: .2; } }
.hud-pfly .pband { width: calc(14px * var(--u)); height: calc(32px * var(--u)); border-radius: calc(3px * var(--u)); background: linear-gradient(90deg, #f7d55a, #ffe999, #e8b52c);
  box-shadow: 0 0 calc(8px * var(--u)) rgba(255, 210, 80, .9); animation: bandIn .3s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes bandIn { 0% { transform: translate(-50%, -50%) scaleY(0); } 100% { transform: translate(-50%, -50%) scaleY(1); } }
/* a later purse tap above 100: each coin group lights up in turn (silent) */
#hud .pnote.lit, #hud .coin10.lit, #hud .hud-frame .cell.lit, #hud .hud-chip.lit { animation: purseLit .42s ease-out; }
@keyframes purseLit { 0% { filter: brightness(1); } 40% { filter: brightness(1.35) drop-shadow(0 0 calc(6px * var(--u)) #fff2a0); } 100% { filter: none; } }
/* the static purse picture (F.Purse.el) for panels and cards */
.ppurse { display: inline-flex; align-items: center; gap: 8px; }
.ppurse .pp-notes { position: relative; height: 50px; flex: none; }
.ppurse .pp-notes .pnote { --u: 1; }
.ppurse .pp-tens { display: grid; grid-template-columns: repeat(5, 30px); gap: 4px; }
.ppurse .pp-tens .coin10 { position: relative; width: 30px; height: 30px; font-size: 12px; }
.ppurse .pp-frame { display: grid; grid-template-columns: repeat(5, 14px); grid-auto-rows: 14px; gap: 3px; padding: 5px; background: #fff; border-radius: 10px; border: 2px solid #f1dfb2; }
.ppurse .pp-cell { border-radius: 50%; background: #fbf3df; box-shadow: inset 0 0 0 1.5px #efdfb6; }
.ppurse .pp-cell.on { background: radial-gradient(circle at 35% 30%, #fff7c2, #ffd84a 45%, #e0a91e); }
.ppurse .pp-num { min-width: 46px; height: 40px; padding: 0 8px; border-radius: 13px; background: #fff; border: 3px solid #f5c542; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; }
/* clarity R10: the gold home arrow is gone (Puff's clouds show the way home) */
.hud-homearrow { display: none !important; }

/* ================================================================== the goal card (js/ui/goal.js; clarity §3.3.1 + economy §4) */
.hud-goal { left: calc(14px * var(--u)); top: calc(108px * var(--u)); height: calc(84px * var(--u)); min-width: calc(84px * var(--u)); box-sizing: border-box;
  display: flex; align-items: center; gap: calc(8px * var(--u)); padding: 0 calc(12px * var(--u));
  background: linear-gradient(180deg, #fffdf6 0%, #fff4dc 100%); border: calc(4px * var(--u)) solid #fff; border-radius: calc(24px * var(--u));
  box-shadow: 0 calc(5px * var(--u)) 0 rgba(150, 100, 20, .2), 0 calc(10px * var(--u)) calc(24px * var(--u)) rgba(60, 40, 110, .18);
  opacity: 0; pointer-events: none !important; transition: opacity .25s; }
.hud-goal.on { opacity: 1; pointer-events: auto !important; }
#hud.hidden > .hud-goal { opacity: 0 !important; }
.hud-goal .hg-face { width: calc(56px * var(--u)); height: calc(56px * var(--u)); border-radius: 50%; overflow: hidden; flex: none; background: radial-gradient(circle at 40% 35%, #fff, #ffe6f1);
  box-shadow: 0 0 0 calc(3px * var(--u)) #ffd0e3; }
.hud-goal.noface .hg-face { display: none; }
.hud-goal .hg-face img { width: 118%; height: 118%; margin: -9% 0 0 -9%; display: block; pointer-events: none; }
.hud-goal .hg-pic { width: calc(58px * var(--u)); height: calc(58px * var(--u)); flex: none; position: relative; }
.hud-goal .hg-pic img { width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 calc(2px * var(--u)) calc(2px * var(--u)) rgba(90, 60, 20, .25)); }
.hud-goal .hg-pic.hop { animation: hgHop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hgHop { 40% { transform: translateY(calc(-12px * var(--u))) scale(1.12); } }
.hud-goal .hg-done { position: absolute; right: calc(-10px * var(--u)); top: calc(-10px * var(--u)); width: calc(32px * var(--u)); height: calc(32px * var(--u)); border-radius: 50%;
  background: #4cc06a; border: calc(3px * var(--u)) solid #fff; box-shadow: 0 calc(2px * var(--u)) 0 #2f8f4a; display: none; }
.hud-goal .hg-done svg { width: 100%; height: 100%; display: block; }
.hud-goal.back .hg-done { display: block; }
.hud-goal .hg-done.pop { animation: hgPop .55s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes hgPop { 0% { transform: scale(.2); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }
.hud-goal .hg-bar, .hud-goal .hg-price { display: none; }
.hud-goal.arrived { animation: hgGlow 1.2s ease-out; }
@keyframes hgGlow { 0% { box-shadow: 0 0 0 calc(10px * var(--u)) rgba(255, 216, 74, .7), 0 calc(10px * var(--u)) calc(24px * var(--u)) rgba(60, 40, 110, .18); } 100% { box-shadow: 0 calc(5px * var(--u)) 0 rgba(150, 100, 20, .2), 0 calc(10px * var(--u)) calc(24px * var(--u)) rgba(60, 40, 110, .18); } }
.hud-goal:active { transform: scale(.97); }
.hud-goal.tap { animation: hudJiggle .45s ease-in-out; }
/* savings mode: the picture + a bar model (whole = the price on its end tag, gold = her coins with her number at its edge, «?» = the rest) */
.hud-goal.save .hg-pic { width: auto; min-width: calc(52px * var(--u)); height: calc(70px * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hud-goal.save .hg-pic img { width: calc(50px * var(--u)); height: calc(50px * var(--u)); flex: none; }
.hud-goal .hg-word { margin-top: calc(1px * var(--u)); font-weight: 700; font-size: calc(14px * var(--u)); line-height: 1.05; letter-spacing: .03em; color: var(--ink); white-space: nowrap; pointer-events: none; }
.hud-goal.save .hg-bar { display: block; position: relative; width: calc(150px * var(--u)); height: calc(26px * var(--u)); margin-bottom: calc(18px * var(--u)); border-radius: calc(8px * var(--u));
  border: calc(2.5px * var(--u)) solid #d9b25a; box-sizing: border-box; overflow: visible;
  background: repeating-linear-gradient(135deg, #fbf3df 0 calc(6px * var(--u)), #efe2c0 calc(6px * var(--u)) calc(12px * var(--u))); }
.hud-goal .hg-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: calc(5px * var(--u)) 0 0 calc(5px * var(--u)); transition: width .6s ease;
  background: linear-gradient(180deg, #fff3a8 0%, #ffd84a 45%, #e8ad25 100%); box-shadow: inset 0 calc(-2px * var(--u)) 0 rgba(180, 120, 10, .35); }
.hud-goal .hg-gap { position: absolute; right: calc(8px * var(--u)); top: 0; bottom: 0; display: flex; align-items: center; font-weight: 700; font-size: calc(18px * var(--u)); color: #b08a3a; }
.hud-goal .hg-have { position: absolute; top: 100%; margin-top: calc(1px * var(--u)); transform: translateX(-50%); font-weight: 700; font-size: calc(17px * var(--u)); color: #8a5a00; line-height: 1.05;
  font-variant-numeric: tabular-nums; transition: left .6s ease; white-space: nowrap; }
.hud-goal.save .hg-price { display: flex; align-items: center; justify-content: center; min-width: calc(48px * var(--u)); height: calc(32px * var(--u)); padding: 0 calc(6px * var(--u));
  margin-bottom: calc(18px * var(--u)); margin-left: calc(-4px * var(--u)); border-radius: calc(9px * var(--u)); background: #fff; border: calc(2.5px * var(--u)) solid #d9b25a;
  font-weight: 700; font-size: calc(19px * var(--u)); color: var(--ink); font-variant-numeric: tabular-nums; }
.hud-goal .hg-bar.shim .hg-fill { animation: hgShim .7s ease-out; }
@keyframes hgShim { 40% { filter: brightness(1.3) drop-shadow(0 0 calc(5px * var(--u)) #fff2a0); } }
.hud-goal.enough { background: linear-gradient(180deg, #fffbe6 0%, #ffeaa6 100%); }
.hud-goal.enough .hg-bar { border-color: #e8ad25; }
.hud-goal.gold { animation: hgGold 1.2s ease-out; }
@keyframes hgGold { 0%, 100% { box-shadow: 0 calc(5px * var(--u)) 0 rgba(150, 100, 20, .2), 0 calc(10px * var(--u)) calc(24px * var(--u)) rgba(60, 40, 110, .18); }
  30% { box-shadow: 0 0 0 calc(8px * var(--u)) rgba(255, 216, 74, .8), 0 0 calc(34px * var(--u)) rgba(255, 210, 80, .95); } }
/* the royal-quest basket chip shares the card's spot: the card shows what she carries (clarity §3.1.8) */
body.goal-on #hud .rq-basket { display: none !important; }