/* Lanky Orbit - illustrated, paper-textured UI */
:root {
--ink: #3a2630; --cream: #fdecda; --paper: #fff3de; --mustard: #e8a919; --yellow: #fec54f; --green: #52775a; --forest: #2f5233;
--burgundy: #7a1f3d; --rust: #e0602f; --brown: #5c3a28; --lavender: #b283a5; --blue: #1b6fa6; --sky: #a9cbe6;
--font: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
--sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
--tv: 0px; /* extra title-safe margin on TV / handheld consoles */
}
body.tv { --tv: 3vmin; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--cream); color: var(--ink); font-family: var(--font); overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; background: var(--cream); }
.hidden { display: none !important; }
/* paper grain over everything */
#app::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 60; opacity: 1; mix-blend-mode: normal;
background: url('../assets/paper-wc.webp') 0 0 / 256px 256px repeat; /* watercolour paper: neutral grey tooth + soft mottling, so colours keep their brightness */
}
/* ------------------------------------------------------------------ buttons / cards */
.btn {
font: 700 22px/1 var(--font); color: var(--ink); background: var(--paper); border: 3px solid var(--ink);
border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; padding: 15px 30px; min-height: 58px; min-width: 120px; cursor: pointer;
box-shadow: 4px 5px 0 rgba(58, 38, 48, 0.9); transition: transform 0.12s, box-shadow 0.12s, background 0.12s; letter-spacing: 0.3px;
position: relative; touch-action: manipulation;
}
.btn:hover, .btn.focus { transform: translate(-1px, -2px) rotate(-1deg); box-shadow: 6px 8px 0 rgba(58, 38, 48, 0.9); background: #fff; }
.btn:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 rgba(58, 38, 48, 0.9); }
.btn.primary { background: var(--yellow); }
.btn.primary:hover, .btn.primary.focus { background: #ffd36f; }
.btn.big { font-size: 34px; padding: 18px 56px; min-height: 76px; }
.btn.small { font-size: 18px; padding: 10px 20px; min-height: 46px; min-width: 90px; }
.btn.ghost { background: transparent; box-shadow: none; border-width: 2px; opacity: 0.8; }
.btn.focus, .btn:focus-visible, .icon-btn:focus-visible, input[type=range]:focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.icon-btn {
width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); cursor: pointer; display: grid; place-items: center;
box-shadow: 3px 4px 0 rgba(58, 38, 48, 0.9); padding: 0;
}
.icon-btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 rgba(58, 38, 48, 0.9); }
.card { background: var(--paper); border: 3px solid var(--ink); border-radius: 22px 12px 26px 14px; box-shadow: 6px 7px 0 rgba(58, 38, 48, 0.16); }
small { font-weight: 500; opacity: 0.7; letter-spacing: 0.4px; }
/* ------------------------------------------------------------------ screens */
.screen { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity 0.35s; z-index: 20; }
.screen.show { display: flex; }
.screen.vis { opacity: 1; }
.screen.center { align-items: center; justify-content: center; }
/* loading */
#screen-loading { background: var(--cream); z-index: 40; }
.load-card { text-align: center; }
.load-card h2 { font-size: 54px; margin: 0 0 6px; }
.load-card p { margin: 0 0 18px; opacity: 0.75; font-size: 20px; }
.load-bar { width: min(320px, 70vw); height: 18px; border: 3px solid var(--ink); border-radius: 12px; margin: 0 auto; overflow: hidden; background: var(--paper); }
.load-bar i { display: block; height: 100%; width: 0; background: var(--yellow); transition: width 0.15s; }
/* start screen */
.menu { background: var(--cream); overflow: hidden; }
.menu-bg { position: absolute; inset: -4%; background: var(--cream) url("../assets/universe-bg.jpg") center / cover no-repeat; animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.05) translate(-1.5%, 0.5%); } to { transform: scale(1.12) translate(1.5%, -1%); } }
.menu-inner { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 4vw;
padding: calc(18px + var(--sat) + var(--tv)) calc(24px + var(--sar) + var(--tv)) calc(18px + var(--sab) + var(--tv)) calc(24px + var(--sal) + var(--tv)); }
.menu-left { flex: 0 1 560px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.title { margin: 0; line-height: 0.82; font-size: clamp(64px, 14vmin, 150px); font-weight: 700; display: flex; flex-direction: column; letter-spacing: -1px; }
.title span { display: block; color: var(--ink); text-shadow: 5px 6px 0 var(--mustard), 9px 11px 0 rgba(122, 31, 61, 0.35); transform-origin: left; }
.title .t1 { transform: rotate(-3deg); }
.title .t2 { transform: rotate(1.5deg) translateX(4vmin); color: var(--burgundy); text-shadow: 5px 6px 0 var(--sky), 9px 11px 0 rgba(27, 111, 166, 0.35); }
.tag { margin: 4px 0 2px; font-size: clamp(16px, 2.4vmin, 22px); max-width: 28em; font-weight: 500; line-height: 1.3; }
.menu-buttons { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.row2 { display: flex; gap: 14px; flex-wrap: wrap; }
.hiscore { display: flex; gap: 22px; padding: 14px 20px; flex-wrap: wrap; }
.hiscore div { display: flex; flex-direction: column; min-width: 90px; }
.hiscore b { font-size: 26px; line-height: 1.1; }
#menu-world { font-size: 18px; line-height: 1.5; }
.menu-right { flex: 0 1 36vw; display: flex; align-items: center; justify-content: center; position: relative; height: 82%; }
#menu-char { height: 100%; max-height: 82vh; width: auto; object-fit: contain; transform-origin: 50% 100%; animation: bob 3.6s ease-in-out infinite; position: relative; z-index: 1; filter: drop-shadow(0 0 0 transparent); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-1.8%) rotate(0.8deg); } }
.char-shadow { position: absolute; bottom: 4%; left: 50%; width: 38%; height: 3%; transform: translateX(-50%); background: rgba(58, 38, 48, 0.2); border-radius: 50%; animation: shadow 3.6s ease-in-out infinite; }
@keyframes shadow { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(0.88); opacity: 0.7; } }
.snd-btn { position: absolute; top: calc(14px + var(--sat) + var(--tv)); right: calc(14px + var(--sar) + var(--tv)); z-index: 3; }
.pad-hint { position: absolute; bottom: calc(10px + var(--sab) + var(--tv)); left: 0; right: 0; text-align: center; margin: 0; font-size: 15px; opacity: 0.7; z-index: 3; }
/* sound icon (CSS only) */
.snd-ico { width: 26px; height: 26px; display: block; background: var(--ink);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
body.muted .snd-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
/* panels (how / settings / pause / game over) */
.panel { background: rgba(253, 236, 218, 0.84); overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.panel-inner { margin: auto; width: min(920px, 100%); padding: calc(22px + var(--sat) + var(--tv)) calc(22px + var(--sar) + var(--tv)) calc(22px + var(--sab) + var(--tv)) calc(22px + var(--sal) + var(--tv)); text-align: center; }
.panel-inner.narrow { width: min(480px, 100%); background: var(--paper); border: 3px solid var(--ink); border-radius: 28px 16px 32px 18px; box-shadow: 8px 10px 0 rgba(58, 38, 48, 0.2); margin: auto; padding: 24px 26px 28px; max-height: 96%; overflow: auto; position: relative; }
.panel h2 { font-size: clamp(34px, 6vmin, 52px); margin: 0 0 6px; letter-spacing: -0.5px; }
.panel h3 { margin: 22px 0 8px; font-size: 22px; color: var(--burgundy); }
.lede { margin: 0 0 14px; font-size: 18px; opacity: 0.8; }
.panel-actions { display: flex; gap: 14px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; align-items: stretch; }
.stack .btn { width: 100%; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 4px; font-size: 20px; font-weight: 600; }
.set-row input[type=range] { width: 52%; accent-color: var(--green); height: 30px; }
.toggle { min-width: 110px; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; text-align: left; }
.how-card { padding: 12px 14px; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px 10px 20px 12px; }
.how-card b { display: block; font-size: 20px; margin-bottom: 4px; color: var(--burgundy); }
.how-card p { margin: 0; font-size: 16px; line-height: 1.35; }
kbd, .key { display: inline-block; font: 700 15px/1 var(--font); background: #fff; border: 2.5px solid var(--ink); border-radius: 8px; padding: 4px 8px; margin: 1px 2px; box-shadow: 0 2px 0 var(--ink); }
.icon-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.icon-row .it { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px 8px 18px 10px; padding: 6px 12px 6px 6px; font-size: 15px; text-align: left; }
.icon-row .it img { width: 44px; height: 44px; }
.icon-row.wide .it { width: min(290px, 100%); }
.it span small { display: block; line-height: 1.2; }
/* game over */
.over .panel-inner { position: relative; }
.big-score { margin: 6px 0 12px; }
.big-score b { display: block; font-size: 64px; line-height: 1; color: var(--burgundy); text-shadow: 3px 4px 0 var(--yellow); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-grid div { background: var(--cream); border: 2.5px solid var(--ink); border-radius: 14px 8px 16px 10px; padding: 8px; }
.stat-grid b { display: block; font-size: 24px; }
.stamp { position: absolute; top: 12px; right: 10px; font-size: 18px !important; transform: rotate(8deg) scale(0); background: var(--rust); color: var(--paper); font-weight: 700; font-size: 22px; padding: 8px 18px; border: 3px solid var(--ink); border-radius: 14px 6px 16px 8px; box-shadow: 3px 4px 0 var(--ink); z-index: 3; opacity: 0; }
.over.record .stamp { animation: stamp 0.7s 0.35s cubic-bezier(.2, 1.6, .4, 1) forwards, wiggle 2.4s 1.2s ease-in-out infinite; }
.over.record h2 { color: var(--rust); }
@keyframes stamp { 0% { transform: rotate(-20deg) scale(3); opacity: 0; } 100% { transform: rotate(8deg) scale(1); opacity: 1; } }
@keyframes wiggle { 0%, 100% { transform: rotate(8deg) scale(1); } 50% { transform: rotate(5deg) scale(1.06); } }
.over.record .big-score b { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* ------------------------------------------------------------------ HUD */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#hud button { pointer-events: auto; }
.hud-tl { position: absolute; top: calc(10px + var(--sat) + var(--tv)); left: calc(14px + var(--sal) + var(--tv)); display: flex; flex-direction: column; gap: 3px; }
.score-row { display: flex; align-items: baseline; gap: 10px; }
#hud-score { font-size: clamp(34px, 6.4vmin, 54px); font-weight: 700; line-height: 1; }
.hud-tl, .banner, #toast, .tut-card { paint-order: stroke fill; }
.hud-tl span, .hud-tl b, .banner { -webkit-text-stroke: 6px var(--cream); text-shadow: none; }
.mult { font-size: clamp(20px, 3.6vmin, 30px); font-weight: 700; color: var(--rust); transition: transform 0.15s; display: inline-block; }
.mult.bump { transform: scale(1.4) rotate(-6deg); }
.sub-row { display: flex; align-items: center; gap: 8px; font-size: clamp(15px, 2.6vmin, 20px); font-weight: 600; }
.sub-row .sep { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: 0.5; }
.sub-row .best-l { opacity: 0.8; }
.ico { width: 26px; height: 26px; }
.hp { display: inline-flex; gap: 5px; margin-left: 10px; }
.hp i { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ink); background: linear-gradient(90deg, #fec54f 52%, #52775a 52%); transition: transform 0.2s, opacity 0.2s; }
.hp i.lost { opacity: 0.22; transform: scale(0.8); filter: grayscale(1); }
.bars { display: flex; gap: 8px; margin-top: 3px; }
.bar { width: clamp(70px, 12vmin, 110px); height: 10px; border: 2.5px solid var(--ink); border-radius: 8px; background: rgba(255, 243, 222, 0.8); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; }
.bar.combo i { background: var(--rust); }
.bar.energy i { background: #7ba2c8; }
.lvrow { display: flex; align-items: center; gap: 8px; font-size: clamp(13px, 2.3vmin, 17px); font-weight: 700; margin-top: 2px; }
.lvrow span { -webkit-text-stroke: 5px var(--cream); paint-order: stroke fill; }
.lvbar { width: clamp(60px, 10vmin, 90px); height: 8px; }
.bar.lvbar i { background: var(--green); transition: width 0.4s; }
.pus { display: flex; gap: 8px; margin-top: 5px; flex-wrap: wrap; max-width: 60vw; }
.pu { width: 46px; height: 46px; border-radius: 50%; position: relative; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--f) * 1turn), rgba(58, 38, 48, 0.18) 0); animation: pop 0.3s; }
.pu::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--paper); }
.pu img { width: 34px; height: 34px; position: relative; }
.pu.low { animation: blink 0.5s steps(2) infinite; }
@keyframes pop { from { transform: scale(0.3); } to { transform: scale(1); } }
@keyframes blink { 50% { opacity: 0.35; } }
.hud-pause { position: absolute; top: calc(10px + var(--sat) + var(--tv)); right: calc(14px + var(--sar) + var(--tv)); width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); cursor: pointer; display: grid; place-items: center; box-shadow: 3px 4px 0 rgba(58, 38, 48, 0.9); padding: 0; }
.hud-pause svg { fill: var(--ink); }
.hud-pause:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.banner { position: absolute; top: 17%; left: 0; right: 0; text-align: center; font-size: clamp(30px, 6.5vmin, 58px); font-weight: 700; opacity: 0; transform: scale(0.7); color: var(--burgundy); }
.banner small { display: block; font-size: 0.45em; color: var(--ink); opacity: 0.9; margin-top: 2px; }
.banner.go { animation: banner 2.4s ease forwards; }
@keyframes banner { 0% { opacity: 0; transform: scale(0.7) rotate(-3deg); } 12% { opacity: 1; transform: scale(1.08) rotate(1deg); } 20% { transform: scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
#toast { position: absolute; left: 50%; bottom: calc(26% + var(--sab)); transform: translateX(-50%) translateY(10px); background: var(--paper); border: 3px solid var(--ink); border-radius: 18px 8px 20px 10px; padding: 10px 20px; font-weight: 600; font-size: clamp(16px, 2.8vmin, 22px); opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; z-index: 30; box-shadow: 4px 5px 0 rgba(58, 38, 48, 0.85); text-align: center; max-width: 86vw; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#pad-toast { position: absolute; top: calc(12px + var(--sat)); left: 50%; transform: translateX(-50%); font-weight: 600; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 16px; opacity: 0; transition: opacity 0.3s; z-index: 35; pointer-events: none; }
#pad-toast.on { opacity: 1; }
/* tutorial */
#tut { position: absolute; top: calc(12px + var(--sat) + var(--tv)); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 12; }
.tut-card { pointer-events: auto; background: var(--paper); border: 3px solid var(--ink); border-radius: 22px 10px 24px 12px; padding: 12px 22px 12px; text-align: center; width: clamp(300px, calc(100vw - 460px), 560px); box-shadow: 5px 6px 0 rgba(58, 38, 48, 0.85); animation: pop 0.3s; }
@media (max-width: 760px) { #tut { top: calc(150px + var(--sat)); } .tut-card { width: min(94vw, 480px); } }
.tut-card h3 { margin: 4px 0 2px; font-size: 26px; color: var(--burgundy); }
.tut-card p { margin: 0 0 8px; font-size: 18px; line-height: 1.4; }
.tut-card .btn.small { min-height: 38px; font-size: 15px; padding: 6px 14px; }
.tut-dots { display: flex; gap: 8px; justify-content: center; }
.tut-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--cream); }
.tut-dots i.done { background: var(--green); }
.tut-dots i.now { background: var(--yellow); transform: scale(1.3); }
.tut-card.ok { animation: okflash 0.5s; }
@keyframes okflash { 30% { background: #cfe8c9; transform: scale(1.04); } }
/* ------------------------------------------------------------------ on-screen controls */
#touch { position: absolute; inset: 0; pointer-events: none; z-index: 11; }
.tz { position: absolute; bottom: calc(14px + var(--sab) + var(--tv)); display: flex; gap: 14px; align-items: flex-end; }
.tz.left { left: calc(14px + var(--sal) + var(--tv)); }
.tz.right { right: calc(14px + var(--sar) + var(--tv)); }
.tbtn { pointer-events: auto; width: 84px; height: 84px; border-radius: 50%; border: 3.5px solid var(--ink); background: rgba(255, 243, 222, 0.78); display: grid; place-items: center; padding: 0; position: relative; touch-action: none; box-shadow: 3px 4px 0 rgba(58, 38, 48, 0.85); }
.tbtn.big { width: 104px; height: 104px; background: rgba(254, 197, 79, 0.85); }
.tbtn svg { width: 46%; fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tbtn small { position: absolute; bottom: 7px; font-size: 11px; font-weight: 700; opacity: 0.75; }
.tbtn.down { transform: translate(2px, 3px) scale(0.96); box-shadow: 1px 1px 0 var(--ink); background: var(--yellow); }
#touch.fadehint .tbtn { opacity: 0.55; }
#wipe { position: absolute; inset: 0; background: var(--mustard); clip-path: circle(0% at 50% 55%); transition: clip-path 0.36s cubic-bezier(.6, 0, .3, 1); pointer-events: none; z-index: 50; }
#wipe::after { content: ""; position: absolute; inset: 0; background: var(--green); clip-path: circle(0% at 50% 55%); transition: clip-path 0.36s 0.06s cubic-bezier(.6, 0, .3, 1); }
#wipe.on { clip-path: circle(150% at 50% 55%); }
#wipe.on::after { clip-path: circle(120% at 50% 55%); }
/* portrait / narrow layouts */
@media (max-aspect-ratio: 1/1) {
.menu-inner { flex-direction: column-reverse; justify-content: flex-end; gap: 0; }
.menu-left { flex: 0 0 auto; align-items: center; text-align: center; }
.menu-buttons { align-items: center; }
.row2 { justify-content: center; }
.title { align-items: center; }
.title .t2 { transform: rotate(1.5deg); }
.menu-right { flex: 1 1 auto; height: auto; min-height: 0; width: 100%; }
#menu-char { max-height: 100%; height: 100%; }
.hiscore { justify-content: center; }
.tbtn { width: 78px; height: 78px; } .tbtn.big { width: 96px; height: 96px; }
}
@media (max-height: 520px) {
.title { font-size: clamp(48px, 17vh, 110px); }
.tag { display: none; }
.btn.big { font-size: 26px; min-height: 60px; padding: 10px 40px; }
.btn { min-height: 48px; padding: 10px 22px; font-size: 19px; }
.panel h3 { margin-top: 12px; }
.tbtn { width: 70px; height: 70px; } .tbtn.big { width: 86px; height: 86px; }
#tut { top: calc(60px + var(--sat)); }
.tut-card p { font-size: 15px; margin-bottom: 4px; }
.tut-card h3 { font-size: 20px; }
.panel-inner.narrow { padding: 14px 22px 16px; }
.stack { gap: 8px; margin-top: 8px; } .set-row { padding: 4px; font-size: 17px; }
.big-score b { font-size: 46px; }
}
@media (max-width: 430px) {
.tz { gap: 8px; } .tz.left { left: calc(8px + var(--sal)); } .tz.right { right: calc(8px + var(--sar)); }
.tbtn { width: 64px; height: 64px; } .tbtn.big { width: 82px; height: 82px; }
}
@media (prefers-reduced-motion: reduce) {
.menu-bg, #menu-char, .char-shadow { animation: none; }
.screen, #wipe { transition: none; }
}
/* ------------------------------------------------------------------ Pink Dimension */
#dim { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 48; pointer-events: none; opacity: 0; }
#host { position: absolute; right: calc(6px + var(--sar)); top: calc(78px + var(--sat) + var(--tv)); width: clamp(140px, 21vw, 270px); z-index: 14; pointer-events: none; transform: translateX(125%); transition: transform 0.45s cubic-bezier(.2, 1.3, .4, 1); }
#host.on { transform: none; }
#host img, #host canvas { display: block; width: 100%; height: auto; filter: drop-shadow(3px 4px 0 rgba(122, 26, 134, 0.35)); }
#host .bubble { position: absolute; right: 90%; top: 4%; width: clamp(170px, 24vw, 300px); background: #fef6f1; border: 3px solid #8a2494; border-radius: 20px 8px 22px 10px; padding: 9px 13px; font-weight: 600; font-size: clamp(13px, 2vmin, 18px); line-height: 1.28; color: #5a1a64; box-shadow: 4px 5px 0 rgba(122, 26, 134, 0.35); }
#host .bubble::after { content: ''; position: absolute; right: -13px; top: 26px; width: 16px; height: 16px; background: #fef6f1; border-right: 3px solid #8a2494; border-top: 3px solid #8a2494; transform: rotate(45deg); }
@media (max-width: 700px) { #host { width: 110px; top: calc(70px + var(--sat)); } #host .bubble { right: 0; top: 100%; margin-top: 4px; width: min(66vw, 280px); } #host .bubble::after { display: none; } }
/* ---------------------------------------------------------------- coins, outfit shop, wardrobe, missions */
.coin { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--ink); vertical-align: middle; position: relative; flex: none;
background: radial-gradient(circle at 35% 30%, #fff3b0 0 18%, #f6c945 40%, #e0a020 100%); }
.coin::after { content: ""; position: absolute; inset: 27%; background: #c9831a; opacity: 0.85; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.coin.sm { width: 17px; height: 17px; border-width: 2px; margin: 0 4px 2px 3px; }
.coin-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--brown); color: var(--cream); border: 3px solid var(--ink); border-radius: 999px; padding: 5px 16px 5px 8px; font: 700 22px var(--font); box-shadow: 3px 4px 0 rgba(58, 38, 48, 0.3); cursor: default; }
button.coin-pill { cursor: pointer; }
.menu-coins { position: absolute; top: calc(16px + var(--sat) + var(--tv)); left: calc(18px + var(--sal) + var(--tv)); z-index: 3; }
.coin-row { align-items: center; }
.coin-row .coin { margin-right: 6px; }
.run-coins { color: #b9790a; font-weight: 700; margin-left: 8px; font-size: 0.85em; }
.over-coins { margin: 4px 0 14px; padding: 10px 14px; background: #fff7e0; border: 2.5px solid var(--ink); border-radius: 16px 10px 18px 12px; text-align: left; }
.oc-head { display: flex; align-items: center; gap: 10px; font: 700 24px var(--font); } .oc-head small { margin-left: auto; font-size: 14px; opacity: 0.7; }
.oc-rows { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 14px; } .oc-rows b { color: #b9790a; }
.oc-done { margin-top: 8px; padding: 6px 10px; background: var(--yellow); border-radius: 10px; font-weight: 600; font-size: 14px; }
.screen.outfits { background: radial-gradient(120% 90% at 20% 0%, #fff3de 0, #fbe3c4 55%, #f3d3ae 100%); overflow: auto; align-items: flex-start; }
.of-wrap { width: min(1240px, 100%); margin: 0 auto; padding: calc(14px + var(--sat) + var(--tv)) calc(18px + var(--sar) + var(--tv)) calc(24px + var(--sab) + var(--tv)) calc(18px + var(--sal) + var(--tv)); }
.of-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.of-title { margin: 0; font: 700 clamp(34px, 5vw, 56px) var(--font); color: var(--ink); transform: rotate(-4deg); letter-spacing: 1px; text-transform: uppercase; }
.of-back { width: 52px; height: 52px; border-radius: 50%; background: var(--brown); color: var(--cream); border: 3px solid var(--ink); display: grid; place-items: center; cursor: pointer; }
.of-back.focus, .of-back:hover { background: #7a5236; }
.of-modes { display: flex; gap: 8px; margin-left: 12px; } .of-top .coin-pill { margin-left: auto; }
.chip { min-width: 0 !important; min-height: 40px !important; font-size: 16px !important; padding: 6px 16px !important; border-radius: 18px 10px 20px 12px; background: #f6dcc0; box-shadow: 2px 3px 0 rgba(58, 38, 48, 0.5); white-space: nowrap; }
.chip.on { background: #e8602f; color: #fff; }
.of-cats { display: flex; gap: 10px; margin: 14px 0 12px; overflow-x: auto; padding: 4px 4px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.of-main { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 18px; align-items: start; }
.of-left { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; }
.of-stage { position: relative; padding: 8px 6px 4px; background: radial-gradient(circle at 50% 40%, #ffe9b8 0, #fbd48c 40%, #f1bd78 100%); text-align: center; overflow: hidden; }
.of-stage canvas { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
.of-count { font: 600 14px var(--font); padding: 2px 0 4px; opacity: 0.75; }
.of-pose { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.of-pose .chip { min-height: 34px !important; font-size: 14px !important; padding: 4px 11px !important; }
.of-info { padding: 12px 14px; text-align: center; } .of-info h3 { margin: 0; font: 700 28px var(--font); }
.of-info p { margin: 6px 0 10px; font-size: 15px; line-height: 1.3; } .rar { display: inline-block; color: #fff; font: 700 12px var(--font); padding: 2px 10px; border-radius: 10px; letter-spacing: 0.5px; text-transform: uppercase; }
.of-state { font: 700 20px var(--font); color: var(--forest); margin-bottom: 8px; } .of-bal { margin-top: 8px; font-size: 14px; opacity: 0.8; }
.of-earn { padding: 10px 12px; } .of-earn h4, .of-hist h4 { margin: 0 0 6px; font: 700 18px var(--font); text-align: left; }
.gift { display: inline-block; width: 18px; height: 16px; background: var(--rust); border: 2px solid var(--ink); border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.earn-row { display: flex !important; width: 100%; justify-content: space-between; align-items: center; text-align: left; font-size: 14px !important; min-height: 0 !important; padding: 6px 10px !important; margin: 4px 0; box-shadow: 2px 2px 0 rgba(58, 38, 48, 0.4) !important; background: #fff7e8; }
.earn-row b { font-weight: 700; white-space: nowrap; color: #8a5a10; }
.of-hist { padding: 10px 12px; display: none; } .screen.wardrobe .of-hist { display: block; }
.hrow { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; border-bottom: 1px solid rgba(58, 38, 48, 0.25); }
.of-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.of-empty { grid-column: 1 / -1; text-align: center; padding: 30px; opacity: 0.7; }
.ocard { position: relative; display: flex !important; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 8px !important; min-height: 0 !important; min-width: 0 !important; background: #fdf0dc !important; border-radius: 18px 10px 20px 12px; box-shadow: 3px 4px 0 rgba(58, 38, 48, 0.28) !important; font-size: 15px !important; overflow: hidden; }
.ocard canvas { width: 82px; height: 110px; } .ocard .nm { font: 700 16px var(--font); line-height: 1.1; text-align: center; }
.ocard .rbar { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rar); }
.ocard.sel { outline: 4px solid #f0a020; outline-offset: -4px; background: #fff7e0 !important; }
.ocard.locked canvas { filter: saturate(0.55) brightness(0.92); }
.screen.wardrobe .ocard.locked canvas { filter: brightness(0.3) contrast(0.9) saturate(0); opacity: 0.55; }
.otag { font: 700 14px var(--font); padding: 2px 10px; border-radius: 12px; background: #ffe08a; display: inline-flex; align-items: center; }
.otag.eq { background: #14b87a; color: #fff; } .otag.own { background: #bff1dc; } .otag.price { background: #ffe08a; }
.modal { position: absolute; inset: 0; background: rgba(40, 20, 34, 0.62); display: flex; align-items: center; justify-content: center; z-index: 8; padding: 16px; }
.modal-card { position: relative; width: min(420px, 100%); background: #fff3de; border: 3px solid var(--ink); border-radius: 26px 14px 30px 16px; padding: 22px 24px 22px; text-align: center; box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.3); overflow: hidden; }
.modal-card h3 { margin: 0 0 6px; font: 700 30px var(--font); } .modal-card h4 { margin: 4px 0; font: 700 24px var(--font); } .modal-card p { margin: 6px 0; }
.modal-card .mthumb { height: 150px; filter: drop-shadow(0 6px 0 rgba(58, 38, 48, 0.15)); } .mp { font: 700 26px var(--font); } .mb { opacity: 0.75; font-size: 14px; }
.mbtns { display: flex; gap: 12px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.modal-card.unlocked { background: linear-gradient(#fff6dc, #ffe2a0); animation: pop 0.5s cubic-bezier(.2, 1.4, .4, 1); } .modal-card.legend { background: linear-gradient(#fff2b8, #f6b94a 70%, #e98d2b); }
.modal-card > * { position: relative; z-index: 1; } .modal-card #of-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; }
.legend { display: inline-block; background: var(--burgundy); color: #ffe27a; font: 700 14px var(--font); padding: 3px 14px; border-radius: 12px; letter-spacing: 2px; margin-bottom: 4px; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mi .mi-top { display: flex; align-items: center; justify-content: space-between; } .mi h3 { margin: 14px 0 6px; text-align: left; font-size: 20px; }
.mrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 8px 10px; margin: 6px 0; background: #fff7e8; border: 2px solid var(--ink); border-radius: 12px 8px 14px 9px; }
.mrow .mr { font-weight: 700; color: #8a5a10; } .mrow .mbar { grid-column: 1 / 3; height: 8px; background: #eed7b8; border-radius: 5px; overflow: hidden; } .mrow .mbar i { display: block; height: 100%; background: var(--green); }
.mrow small { grid-column: 1 / 3; opacity: 0.7; } .mrow.done { background: #e4f0dc; } .mrow.done .mr { color: var(--forest); } .mrow.ach { grid-template-columns: 1fr auto; }
@media (max-width: 760px) {
.of-main { grid-template-columns: 1fr; } .of-left { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.of-stage { flex: 1 1 200px; max-width: 250px; } .of-pose { flex: 1 1 100%; } .of-info { flex: 1 1 200px; } .of-earn, .of-hist { flex: 1 1 100%; }
.of-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; } .of-modes { margin-left: 0; order: 5; width: 100%; }
.ocard canvas { width: 70px; height: 94px; } .menu-coins { top: calc(10px + var(--sat)); left: calc(10px + var(--sal)); font-size: 18px; }
}
.of-cats .chip, .of-modes .chip, .of-pose .chip { flex: none; }
.coin-pill b { line-height: 1; }
#host .bubble { opacity: 0; transform: translateX(14px) scale(0.92); transition: opacity 0.25s, transform 0.3s cubic-bezier(.2,1.4,.4,1); }
#host.talk .bubble { opacity: 1; transform: none; }
/* ---------------------------------------------------------------- type system
Fredoka (variable, weights 100-400) = primary: headings, buttons, body, labels (weight does the hierarchy).
Agrave Pro = the game name only, always capitals. Fredoka = the one supporting face, for numerals and bold emphasis
(scores, coins, timers, prices) where Playwrite's thin handwriting is hard to read quickly. */
@font-face { font-family: "Fredoka"; src: url("../assets/fonts/Fredoka-VF.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Agrave Pro"; src: url("../assets/fonts/AgravePro-VF.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --font: "Fredoka", "Trebuchet MS", system-ui, sans-serif; --font-ui: "Fredoka", "Trebuchet MS", system-ui, sans-serif; --font-title: "Agrave Pro", "Fredoka", cursive; }
html, body { font-family: var(--font); font-synthesis: none; font-weight: 300; }
.btn { font-size: 17px; font-weight: 400; letter-spacing: 0.2px; }
.btn.big { font-size: 28px; } .btn.small { font-size: 14px; } .chip { font-size: 13px !important; }
.panel h2, .of-title, .mi h2 { font-weight: 400; letter-spacing: 0; }
.panel h3, .modal-card h3, .modal-card h4, .of-info h3, .of-earn h4, .of-hist h4, .tut-card h3 { font-weight: 400; letter-spacing: 0; }
p, small, .lede, .otag, .rar, .of-desc, .mrow .mt, .earn-row span, .hrow, .bubble, #host .bubble, #toast, #level-banner small, .tut-card p, .how-card p, .it small { font-weight: 300; }
.lede, .tag { line-height: 1.5; }
.panel h2 { font-size: clamp(26px, 5vmin, 42px); } .panel h3 { font-size: 18px; } .tut-card h3 { font-size: 20px; } .of-info h3 { font-size: 22px; }
.how-card b, .it b, .stat-grid small, .hiscore small, .set-row span { font-weight: 400; }
body { letter-spacing: 0.1px; line-height: 1.35; }
/* numerals + bold emphasis -> Fredoka */
#hud-score, #hud-mult, #hud-dist, #hud-best, #hud-coll, #hud-coins, .run-coins, #hud-lv, #hud-spd, .mult, .big-score b, .stat-grid b, .hiscore b, .coin-pill, .coin-pill b, .otag.price, .otag.eq, .mp, .mb, .oc-head, .oc-rows, .mrow .mr, .mrow small, .of-count, .ocard .nm, .rar, .legend, kbd, .key, .stamp, #level-banner, .earn-row b, .of-bal, .of-state { font-family: var(--font-ui); font-weight: 600; }
#level-banner small { font-family: var(--font); }
.ocard .nm { font-size: 14px; font-weight: 600; } .hiscore b { font-weight: 600; }
/* the game name: Agrave Pro, capitals */
.title, .title span, .load-card h2 { font-family: var(--font-title); text-transform: uppercase; font-weight: 400; letter-spacing: 3px; }
.title { font-size: clamp(54px, 12vmin, 128px); line-height: 0.95; }
.load-card h2 { font-size: 46px; letter-spacing: 4px; }
/* ---------------------------------------------------------------- progress dashboard + saved indicator */
#save-ind { position: fixed; top: calc(8px + var(--sat)); left: 50%; transform: translate(-50%, -14px); z-index: 60; pointer-events: none; opacity: 0; transition: opacity 0.3s, transform 0.3s; background: rgba(58, 38, 48, 0.88); color: #fdecda; font: 600 13px var(--font-ui); padding: 4px 14px; border-radius: 14px; letter-spacing: 0.3px; }
#save-ind.on { opacity: 0.92; transform: translate(-50%, 0); } #save-ind.ok { background: rgba(47, 82, 51, 0.92); } #save-ind.warn { background: rgba(160, 70, 30, 0.94); }
#btn-continue small { display: block; font-size: 13px; font-weight: 300; margin-top: 4px; opacity: 0.8; letter-spacing: 0; } .btn#pg-continue small { display: block; font-size: 12px; font-weight: 300; margin-top: 3px; }
.screen.progress, #screen-progress { overflow: auto; align-items: flex-start; background: radial-gradient(120% 90% at 20% 0%, #fff3de 0, #fbe3c4 55%, #f3d3ae 100%); }
.pg { text-align: left; } .pg-top { display: flex; align-items: center; justify-content: space-between; } .pg h3 { margin: 18px 0 8px; }
.pg-hero { display: grid; grid-template-columns: 140px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; margin-top: 8px; }
.pg-ring { position: relative; width: 120px; height: 120px; display: grid; place-items: center; } .pg-ring svg { position: absolute; transform: rotate(-90deg); } .pg-ring circle { fill: none; stroke-width: 12; }
.pg-ring .trk { stroke: #eed7b8; } .pg-ring .val { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 0.8s; }
.pg-ring b { font: 600 30px var(--font-ui); margin-top: -8px; } .pg-ring small { position: absolute; bottom: 26px; font-size: 11px; opacity: 0.7; }
.pg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 14px; } .pg-stats small { display: block; font-size: 12px; opacity: 0.7; } .pg-stats b { font: 600 18px var(--font-ui); }
.pg-cont { display: flex; flex-direction: column; gap: 8px; align-items: stretch; max-width: 240px; } .pg-sync { font-size: 12px; line-height: 1.4; opacity: 0.85; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pg-tile { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; min-height: 0 !important; padding: 10px 12px !important; font-size: 14px !important; } .pg-tile b { font-weight: 400; } .pg-tile small { font-size: 12px; opacity: 0.75; }
.pg-tile.done { background: #e4f0dc !important; } .pg-tile.lock { opacity: 0.5; filter: grayscale(0.6); } .pg-tile.open { background: #fff3c9 !important; }
.pg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pg-act { padding: 8px 12px; font-size: 13px; max-height: 240px; overflow: auto; }
.pg-act .row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(58, 38, 48, 0.25); } .pg-act .row small { opacity: 0.65; white-space: nowrap; font-family: var(--font-ui); } .pg-act .row.done { color: var(--forest); }
.modal-card textarea, .pg-in { width: 100%; box-sizing: border-box; font: 300 12px/1.35 monospace; padding: 8px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); resize: none; word-break: break-all; } .pg-in { font: 400 16px var(--font); }
.pg-msg { min-height: 1.3em; font-size: 13px; margin: 6px 0 0; } .pg-msg.ok { color: var(--forest); } .pg-msg.bad { color: #b3261e; }
@media (max-width: 760px) { .pg-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } .pg-cont { max-width: none; width: 100%; } .pg-two { grid-template-columns: 1fr; } }
.screen.menu { overflow-y: auto; } .menu-buttons { gap: 10px; } .menu-buttons .row2 { gap: 10px; } .menu-buttons .btn:not(.big) { font-size: 15px; padding: 9px 16px; min-height: 0; }
.menu-coins { left: auto; right: calc(86px + var(--sar) + var(--tv)); }
.title { font-size: clamp(40px, 9.5vmin, 104px); margin-top: 6px; }
@media (max-width: 760px) { .menu-coins { right: calc(76px + var(--sar)); left: auto; } }
/* ---------------------------------------------------------------- the logo (crayon lettering, animated + extra vibrant) */
.logo { position: relative; margin: 0 0 4px; width: min(500px, 46vw); line-height: 0; animation: logoIn 0.95s cubic-bezier(.2, 1.5, .4, 1) both, logoBob 5.5s ease-in-out 0.95s infinite; transform-origin: 50% 60%; }
.logo img { display: block; width: 100%; height: auto; max-height: 38vh; object-fit: contain; object-position: left center; filter: saturate(1.4) contrast(1.07) brightness(1.02) drop-shadow(0 5px 0 rgba(122, 31, 61, 0.16)); animation: logoHue 9s ease-in-out infinite; }
.logo .sp { position: absolute; width: 22px; height: 22px; background: #ffd21f; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: spark 2.4s ease-in-out infinite; pointer-events: none; }
.logo .s1 { left: 10%; top: 4%; } .logo .s2 { right: 2%; top: 34%; width: 16px; height: 16px; animation-delay: -0.8s; background: #f4985a; } .logo .s3 { left: 1%; top: 58%; width: 18px; height: 18px; animation-delay: -1.5s; }
.logo .s4 { right: 14%; bottom: -2%; width: 20px; height: 20px; animation-delay: -0.4s; } .logo .s5 { left: 46%; top: -4%; width: 14px; height: 14px; animation-delay: -1.1s; background: #ff7a1a; }
@keyframes logoIn { 0% { transform: scale(0.3) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes logoBob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-9px) rotate(1.2deg); } }
@keyframes logoHue { 0%, 100% { filter: saturate(1.4) contrast(1.07) drop-shadow(0 5px 0 rgba(122, 31, 61, 0.16)); } 50% { filter: saturate(1.65) contrast(1.1) hue-rotate(-6deg) drop-shadow(0 5px 0 rgba(122, 31, 61, 0.16)); } }
@keyframes spark { 0%, 100% { transform: scale(0.2) rotate(0); opacity: 0; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.load-logo { width: min(420px, 78vw); height: auto; display: block; margin: 0 auto 8px; animation: logoBob 3s ease-in-out infinite; filter: saturate(1.4) contrast(1.07); }
@media (max-width: 760px) { .logo { width: min(78vw, 360px); margin: 0 auto 4px; } .logo img { object-position: center; max-height: 26vh; } }
@media (prefers-reduced-motion: reduce) { .logo, .logo img, .logo .sp, .load-logo { animation: none; } .logo .sp { opacity: 0.8; transform: none; } }
/* ================================================================ design tokens + layout rhythm (final pass)
4-pt spacing scale, one type scale, two text weights per face, consistent control sizes, groups separated by larger gaps than their members. */
:root {
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
--fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 40px;
--green: #14b87a; --forest: #0a8a5b; --mustard: #ffb81c; --yellow: #ffd23f; --rust: #ff5a1f; --lavender: #c183ff; --blue: #1f7bff; --sky: #8fd3ff;
}
#app::after { opacity: 0.6; }
/* controls */
.btn { font-size: var(--fs-md); padding: var(--sp-3) var(--sp-5); min-height: 48px; min-width: 96px; }
.btn.small { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); min-height: 44px; min-width: 80px; }
.btn.big { font-size: var(--fs-xl); padding: var(--sp-4) var(--sp-6); min-height: 64px; }
.btn.primary { background: linear-gradient(#ffe066, #ffc21a); }
.btn.primary:hover, .btn.primary.focus { background: linear-gradient(#fff0a0, #ffd23f); }
.icon-btn { width: 48px; height: 48px; }
/* home page: vivid, grouped */
.menu-bg { filter: saturate(1.55) brightness(1.06) contrast(1.04); }
.menu::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(55% 50% at 18% 22%, rgba(255, 61, 154, 0.2), transparent 72%), radial-gradient(48% 50% at 88% 72%, rgba(39, 211, 195, 0.24), transparent 72%), radial-gradient(40% 40% at 70% 12%, rgba(255, 198, 25, 0.22), transparent 70%); }
.menu-left { gap: 0; }
.logo { margin: 0 0 var(--sp-3); }
.tag { margin: 0 0 var(--sp-5); font-size: var(--fs-md); font-weight: 400; max-width: 26em; line-height: 1.5; background: none; padding: 0; color: var(--ink); }
.menu-buttons { gap: var(--sp-3); margin-bottom: var(--sp-5); }
.row2, .menu-buttons .row2 { gap: var(--sp-3); }
.menu-buttons .btn:not(.big) { font-size: var(--fs-md); padding: var(--sp-3) var(--sp-4); min-height: 46px; min-width: 0; }
[data-act="outfits"].btn { background: #fbd9c3; } [data-act="missions"].btn { background: #aeeaf7; } [data-act="progress"].btn { background: #dccbff; }
[data-act="outfits"].btn:hover, [data-act="missions"].btn:hover, [data-act="progress"].btn:hover, .btn.focus { background: #fff; }
.hiscore { gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: #fffaf0; }
.hiscore div { min-width: 96px; gap: var(--sp-1); }
.hiscore small { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 400; opacity: 0.65; }
.hiscore b { font-size: var(--fs-xl); } #menu-world { font-size: var(--fs-md); line-height: 1.3; }
#btn-continue small { margin-top: var(--sp-1); font-size: var(--fs-sm); }
.coin-pill { padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-2); font-size: var(--fs-lg); }
/* panels, settings, pause, game over */
.panel-inner { padding: var(--sp-5); }
.panel-inner.narrow { padding: var(--sp-5); }
.panel h2 { font-size: clamp(26px, 5vmin, var(--fs-2xl)); margin: 0 0 var(--sp-2); }
.panel h3 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-3); }
.lede { font-size: var(--fs-md); margin: 0 0 var(--sp-4); }
.set-row { padding: var(--sp-3) var(--sp-1); font-size: var(--fs-md); font-weight: 400; border-bottom: 1px solid rgba(58, 38, 48, 0.18); }
.set-row:last-of-type { border-bottom: 0; }
.stack { gap: var(--sp-3); margin-top: var(--sp-4); }
.panel-actions { gap: var(--sp-3); margin-top: var(--sp-5); }
.how-grid { gap: var(--sp-3); } .how-card { padding: var(--sp-3) var(--sp-4); } .how-card b { font-size: var(--fs-md); font-weight: 400; margin-bottom: var(--sp-1); } .how-card p { font-size: var(--fs-sm); line-height: 1.45; }
.icon-row { gap: var(--sp-3); } .icon-row .it { padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); font-size: var(--fs-sm); }
.stat-grid { gap: var(--sp-3); } .stat-grid div { padding: var(--sp-3); } .stat-grid small { font-size: var(--fs-xs); } .stat-grid b { font-size: var(--fs-lg); }
.big-score { margin: var(--sp-2) 0 var(--sp-4); } .big-score b { font-size: 56px; }
.over-coins { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); } .oc-head { font-size: var(--fs-lg); } .oc-rows { gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-sm); }
/* shop + wardrobe */
.of-wrap { padding-top: calc(var(--sp-4) + var(--sat) + var(--tv)); padding-bottom: calc(var(--sp-5) + var(--sab) + var(--tv)); }
.of-top { gap: var(--sp-3); } .of-cats { margin: var(--sp-4) 0 var(--sp-3); gap: var(--sp-2); } .of-main { gap: var(--sp-5); } .of-left { gap: var(--sp-3); } .of-grid { gap: var(--sp-3); }
.chip { font-size: var(--fs-sm) !important; padding: var(--sp-2) var(--sp-4) !important; min-height: 40px !important; }
.of-pose .chip { font-size: var(--fs-xs) !important; padding: var(--sp-1) var(--sp-3) !important; min-height: 36px !important; }
.ocard { padding: var(--sp-3) var(--sp-2) !important; gap: var(--sp-1); } .ocard .nm { font-size: var(--fs-sm); }
.of-info { padding: var(--sp-4); } .of-info h3 { font-size: var(--fs-lg); } .of-info p { font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-3); line-height: 1.45; }
.of-earn, .of-hist { padding: var(--sp-3) var(--sp-4); } .of-earn h4, .of-hist h4 { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.earn-row { padding: var(--sp-2) var(--sp-3) !important; margin: var(--sp-1) 0; font-size: var(--fs-sm) !important; }
.modal-card { padding: var(--sp-5); } .modal-card h3 { font-size: var(--fs-xl); margin: 0 0 var(--sp-2); } .modal-card h4 { font-size: var(--fs-lg); margin: var(--sp-2) 0; } .modal-card p { font-size: var(--fs-md); margin: var(--sp-2) 0; }
.mbtns { gap: var(--sp-3); margin-top: var(--sp-5); }
/* dashboard + missions */
.pg-hero { gap: var(--sp-5); padding: var(--sp-5); } .pg h3 { margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-lg); } .pg-grid { gap: var(--sp-3); }
.pg-tile { padding: var(--sp-3) var(--sp-4) !important; font-size: var(--fs-sm) !important; } .pg-tile small { font-size: var(--fs-xs); }
.pg-act { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); } .pg-act .row { padding: var(--sp-2) 0; } .pg-two { gap: var(--sp-5); } .pg-stats { gap: var(--sp-3) var(--sp-5); } .pg-sync { font-size: var(--fs-xs); }
.mrow { padding: var(--sp-3) var(--sp-4); margin: var(--sp-2) 0; gap: var(--sp-1) var(--sp-3); } .mi h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-lg); } .mrow .mt { font-size: var(--fs-sm); }
.pg-ring .val { stroke: #14b87a; } .mrow .mbar i { background: #14b87a; } .mrow.done, .pg-tile.done { background: #c9f6e2 !important; } .pg-act .row.done { color: #0a8a5b; } .pg-msg.ok { color: #0a8a5b; }
@media (max-width: 760px) {
.menu-left { align-items: center; } .tag { display: block; font-size: var(--fs-sm); text-align: center; margin-bottom: var(--sp-4); } .menu-buttons { align-items: center; margin-bottom: var(--sp-4); } .row2 { justify-content: center; }
.btn.big { font-size: var(--fs-lg); min-height: 56px; padding: var(--sp-3) var(--sp-5); } .panel-inner, .panel-inner.narrow { padding: var(--sp-4); }
}
/* ---------------------------------------------------------------- logo v2: alive (jelly squash, sway, wiggle, shine sweep, orbiting comet) + bright sticker shadow */
.logo { width: min(500px, 46vw, 56vh); }
.logo img { width: 100%; height: auto; max-height: none; object-fit: fill; transform-origin: 50% 62%;
filter: saturate(1.35) contrast(1.05) drop-shadow(0 0 2px #fff) drop-shadow(3px 4px 0 #f37649) drop-shadow(7px 9px 0 #ffc619) drop-shadow(0 0 16px rgba(255, 255, 255, 0.85));
animation: logoJelly 2.9s ease-in-out infinite, logoWig 7s ease-in-out 1.2s infinite; }
.logo::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%) 120% 0 / 260% 100% no-repeat;
-webkit-mask: url("../assets/logo.webp") center / 100% 100% no-repeat; mask: url("../assets/logo.webp") center / 100% 100% no-repeat; animation: logoShine 5s ease-in-out 1.6s infinite; }
.logo .orbit-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 3px rgba(255, 214, 60, 0.9)); }
@keyframes logoJelly { 0%, 100% { scale: 1 1; } 25% { scale: 1.03 0.97; } 50% { scale: 0.985 1.02; } 75% { scale: 1.02 0.985; } }
@keyframes logoWig { 0%, 86%, 100% { rotate: 0deg; } 88% { rotate: -3.5deg; } 90% { rotate: 3deg; } 92% { rotate: -2.2deg; } 94% { rotate: 1.4deg; } 96% { rotate: -0.6deg; } }
@keyframes logoShine { 0% { background-position: 130% 0; } 38%, 100% { background-position: -40% 0; } }
@keyframes logoBob { 0%, 100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(-11px) rotate(1.6deg); } }
.load-logo { filter: saturate(1.35) drop-shadow(0 0 2px #fff) drop-shadow(3px 4px 0 #f37649) drop-shadow(6px 8px 0 #ffc619); animation: logoBob 3s ease-in-out infinite, logoJelly 2.9s ease-in-out infinite; }
.logo .sp { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)); }
@media (max-width: 760px) { .logo { width: min(78vw, 360px, 40vh); } }
@media (prefers-reduced-motion: reduce) { .logo img, .logo::after, .load-logo { animation: none; } .logo .orbit-fx { display: none; } }
/* ================================================================ HOME PAGE v3: storybook scene + pill buttons ================================================================ */
.screen.menu { background: #ffe9ce; overflow: hidden; }
.menu::before { display: none; }
.scene { position: absolute; left: 50%; bottom: 0; width: max(100vw, 177.68vh); aspect-ratio: 1672 / 941; transform: translateX(-50%); transform-origin: 50% 100%; animation: sceneDrift 42s ease-in-out infinite alternate; z-index: 0; }
@keyframes sceneDrift { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50.6%) scale(1.035); } }
.scene > *, .scene .sc-island > * { position: absolute; }
.sc-bg { inset: 0; width: 100%; height: 100%; display: block; }
/* floating things (positions are percentages of the 1672x941 artwork) */
.sc-planet { left: 37.4%; top: 0.1%; width: 19.5%; animation: planetOrbit 16s ease-in-out infinite alternate; }
.sc-planet img { position: static; width: 100%; display: block; animation: planetSpin 11s ease-in-out infinite alternate; transform-origin: 50% 50%; filter: saturate(1.15); }
@keyframes planetOrbit { 0% { transform: translate(-3.5%, 6%); } 50% { transform: translate(3%, -4%); } 100% { transform: translate(9%, 5%); } }
@keyframes planetSpin { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.sc-island { left: 30.7%; top: 26.2%; width: 18.2%; animation: islandBob 6.5s ease-in-out infinite; }
.sc-island > img { position: static; width: 100%; display: block; }
@keyframes islandBob { 0%, 100% { transform: translateY(0) rotate(-0.8deg); } 50% { transform: translateY(-7%) rotate(0.9deg); } }
.sc-comet { left: 75.4%; top: 1.4%; width: 21.5%; opacity: 0; animation: cometFly 13s ease-in infinite 2s; }
@keyframes cometFly { 0% { transform: translate(70%, -50%); opacity: 0; } 4% { opacity: 1; } 24% { transform: translate(-380%, 230%); opacity: 1; } 28%, 100% { transform: translate(-420%, 260%); opacity: 0; } }
/* waterfalls: flowing streaks over the painted falls + a breathing mist at the foot */
.wf { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, 0.8) 9px 15px, rgba(190, 235, 255, 0) 15px 28px), linear-gradient(90deg, rgba(120, 200, 255, 0.28), rgba(255, 255, 255, 0.18), rgba(120, 200, 255, 0.28));
background-size: 100% 28px, 100% 100%; mix-blend-mode: screen; -webkit-mask: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent); mask: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent); animation: fall 0.9s linear infinite; border-radius: 4px; }
.wf1 { left: 57%; top: 37%; width: 14%; height: 56%; } .wf2 { left: 88.9%; top: 37.6%; width: 3%; height: 18.8%; }
@keyframes fall { from { background-position: 0 0, 0 0; } to { background-position: 0 28px, 0 0; } }
.mist { border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); animation: mist 2.6s ease-in-out infinite; pointer-events: none; }
.m1 { left: 50%; top: 82%; width: 28%; height: 20%; } .m2 { left: 86.8%; top: 52.5%; width: 7%; height: 5.5%; }
@keyframes mist { 0%, 100% { transform: scale(0.85); opacity: 0.55; } 50% { transform: scale(1.15); opacity: 0.95; } }
.tw { width: 1.6%; aspect-ratio: 1; background: #ffc619; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.6s ease-in-out infinite; transform: translate(-50%, -50%); pointer-events: none; }
.t1 { left: 21.6%; top: 5.5%; } .t2 { left: 10.6%; top: 12.3%; animation-delay: -0.7s; width: 1.2%; } .t3 { left: 67.9%; top: 6.1%; animation-delay: -1.3s; } .t4 { left: 66%; top: 11.5%; animation-delay: -1.9s; width: 1%; } .t5 { left: 84.3%; top: 26.2%; animation-delay: -0.4s; width: 1.2%; } .t6 { left: 3.1%; top: 45.8%; animation-delay: -1.1s; width: 1.3%; }
@keyframes twinkle { 0%, 100% { transform: translate(-50%, -50%) scale(0.55) rotate(0); opacity: 0.35; } 50% { transform: translate(-50%, -50%) scale(1.35) rotate(25deg); opacity: 1; } }
/* the hero, sitting on the moon */
.sc-hero { left: 52.8%; top: 22.5%; width: 35%; aspect-ratio: 1000 / 914; }
.sc-hero canvas, .sc-hero #menu-char { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 8px 0 rgba(122, 31, 61, 0.14)); }
.sc-hero #menu-char { inset: -6% 8% 0 8%; width: 84%; height: 106%; animation: bob 3.6s ease-in-out infinite; }
.h1 { left: 82%; top: 8%; width: 6%; animation-delay: -0.5s; } .h2 { left: 14%; top: 22%; width: 5%; animation-delay: -1.2s; background: #f4985a; } .h3 { left: 90%; top: 40%; width: 4%; animation-delay: -1.8s; }
/* left column */
.menu-ui { position: absolute; z-index: 3; left: calc(4vw + var(--sal) + var(--tv)); top: calc(3vh + var(--sat) + var(--tv)); width: min(42vw, 560px); display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.menu-ui .logo { width: min(440px, 33vw, 40vh); margin: 0 0 var(--sp-2); }
.menu-ui .tag { margin: 0 0 var(--sp-4); font-size: clamp(15px, 2.3vh, 20px); font-weight: 400; line-height: 1.4; text-decoration: underline wavy #ffc619 2px; text-underline-offset: 8px; transform: rotate(-1.4deg); transform-origin: left; max-width: 22em; }
.menu-buttons { width: 100%; gap: var(--sp-3); margin: 0; align-items: stretch; }
.pill-main { width: 100%; display: grid !important; grid-template-columns: 1fr auto; align-items: center; justify-items: start; column-gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-6) !important; min-height: 78px !important; text-align: left; font-family: var(--font-ui); font-weight: 800; box-shadow: 0 6px 0 #7a4a10, 0 10px 18px rgba(122, 74, 16, 0.25) !important; border-color: #4a2a10 !important; }
.pill-main .pm-t { font-size: clamp(28px, 4.6vh, 40px); line-height: 1; grid-column: 1; } .pill-main small { grid-column: 1; font-family: var(--font); font-size: var(--fs-md) !important; font-weight: 400; opacity: 0.85; margin: 0 !important; } .pill-main .pm-play { grid-column: 2; grid-row: 1 / span 2; }
.pill-new { width: 100%; min-height: 54px; background: linear-gradient(#fce3d3, #f9c6a4) !important; font-family: var(--font-ui); font-weight: 800; font-size: var(--fs-lg) !important; box-shadow: 0 5px 0 #844630 !important; border-color: #5a1a3a !important; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.btn.tile { border-radius: 24px !important; min-height: 92px !important; min-width: 0 !important; padding: var(--sp-2) var(--sp-2) var(--sp-3) !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-md) !important; background: #fffaf0 !important; box-shadow: 0 5px 0 rgba(58, 38, 48, 0.9) !important; }
.btn.tile:hover, .btn.tile.focus { background: #fff !important; transform: translateY(-3px) rotate(-1deg) !important; }
.menu-top { position: absolute; z-index: 4; top: calc(14px + var(--sat) + var(--tv)); right: calc(16px + var(--sar) + var(--tv)); display: flex; align-items: center; gap: var(--sp-3); }
.menu-top .menu-coins, .menu-top .snd-btn { position: static; } .qm { font: 800 24px var(--font-ui); color: #3a2630; }
/* records bar */
.menu-stats { position: absolute; z-index: 3; left: calc(2.5vw + var(--sal)); right: calc(2.5vw + var(--sar)); bottom: calc(14px + var(--sab) + var(--tv)); display: grid; grid-template-columns: 1fr 1fr 1.25fr 1.5fr; align-items: center; background: rgba(255, 250, 240, 0.96); border: 3px solid #3a2630; border-radius: 999px; padding: var(--sp-3) var(--sp-5); box-shadow: 0 5px 0 rgba(58, 38, 48, 0.85); }
.ms { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-left: 2px solid rgba(58, 38, 48, 0.25); min-width: 0; } .ms:first-child { border-left: 0; padding-left: 0; }
.ms .msi { flex: none; display: grid; place-items: center; } .ms small { display: block; font: 400 var(--fs-xs) var(--font); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.ms b { display: block; font: 800 var(--fs-xl) var(--font-ui); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #menu-world { font-size: var(--fs-lg); } #menu-next { font-size: var(--fs-md); }
.ms-next > div { flex: 1; min-width: 0; } .nu { display: inline-block !important; background: #f8ba91; color: #fff; opacity: 1 !important; padding: 1px 10px; border-radius: 999px; font-weight: 600; letter-spacing: 0.06em; }
.nbar { position: relative; height: 12px; background: #f1e4db; border-radius: 999px; margin-top: 5px; overflow: hidden; border: 1.5px solid rgba(58, 38, 48, 0.5); } .nbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f4985a, #f8ba91); border-radius: 999px; transition: width 0.8s; } .nbar em { position: absolute; right: 6px; top: -3px; font: 700 10px var(--font-ui); font-style: normal; color: #5a1a3a; }
.pad-hint { bottom: calc(86px + var(--sab)); }
/* ---- pill buttons everywhere ---- */
.btn { border-radius: 999px; }
.btn.small { border-radius: 999px; }
.chip { border-radius: 999px !important; }
.ocard, .pg-tile, .earn-row { border-radius: 22px !important; }
.earn-row { border-radius: 18px !important; }
.btn.primary { background: linear-gradient(#ffe066, #ffc21a); }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
.scene { left: 36%; width: max(190vw, 177.68vh); }
.menu-ui { left: 0; right: 0; width: auto; align-items: center; padding: 0 var(--sp-4); top: calc(56px + var(--sat)); }
.menu-ui .logo { width: min(64vw, 300px, 26vh); margin: 0 auto var(--sp-1); } .menu-ui .tag { text-align: center; font-size: var(--fs-sm); margin-bottom: var(--sp-3); transform: none; text-underline-offset: 6px; }
.menu-buttons { max-width: 420px; margin: 0 auto; } .pill-main { min-height: 64px !important; } .btn.tile { min-height: 76px !important; } .btn.tile svg { width: 30px; height: 30px; }
.menu-top { gap: var(--sp-2); } .menu-top .icon-btn { width: 44px; height: 44px; }
.menu-stats { grid-template-columns: 1fr 1fr; border-radius: 26px; gap: var(--sp-2) 0; padding: var(--sp-3) var(--sp-4); bottom: calc(8px + var(--sab)); } .ms { padding: 0 var(--sp-2); } .ms:nth-child(3) { border-left: 0; padding-left: 0; } .ms b { font-size: var(--fs-lg); } #menu-world { font-size: var(--fs-md); }
.sc-hero { z-index: 0; }
}
@media (max-height: 560px) and (min-aspect-ratio: 1/1) { .menu-ui .tag { display: none; } .pill-main { min-height: 62px !important; } .btn.tile { min-height: 70px !important; } .btn.tile svg { width: 30px; height: 30px; } .ms .msi svg { width: 28px; height: 28px; } .ms b { font-size: var(--fs-lg); } .menu-stats { padding: var(--sp-2) var(--sp-5); } }
@media (prefers-reduced-motion: reduce) { .scene, .sc-planet, .sc-planet img, .sc-island, .sc-comet, .wf, .mist, .tw, .sc-hero #menu-char { animation: none; } .sc-comet { display: none; } }
.pill-main.hidden, .pill-new.hidden, .btn.hidden { display: none !important; }
/* ================================================================ paper system: every button, card and page looks printed on textured paper ================================================================ */
:root { --paper-tex: url('../assets/paper-wc.webp'); }
/* buttons: wobbly hand-cut edge, printed paper grain, glossy ink highlight */
.btn { filter: url(#rough); }
.btn { overflow: visible; box-shadow: 0 5px 0 rgba(58, 38, 48, 0.92), inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 0 rgba(120, 60, 40, 0.1); }
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--paper-tex) 0 0 / 200px 200px; mix-blend-mode: normal; opacity: 0.8; pointer-events: none; }
.btn:active { box-shadow: 0 1px 0 rgba(58, 38, 48, 0.92), inset 0 2px 0 rgba(255, 255, 255, 0.5) !important; }
.btn.primary, .pill-main { box-shadow: 0 6px 0 #7a4a10, inset 0 3px 0 rgba(255, 255, 255, 0.7), inset 0 -4px 0 rgba(160, 90, 10, 0.18) !important; }
.btn.tile, .ocard { box-shadow: 0 5px 0 rgba(58, 38, 48, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.8) !important; }
.ocard.sel { outline-color: #f4985a; }
/* cards and panels: paper stock with stitched edge */
.card, .panel-inner.narrow, .modal-card, .of-info, .of-stage, .mrow, .pg-hero, .pg-act, .how-card, .over-coins, .stat-grid div, .icon-row .it, .hiscore, .menu-stats, .coin-pill {
background-image: var(--paper-tex); background-size: 260px; background-blend-mode: normal; background-color: #fff3de; }
.panel-inner.narrow, .modal-card { background-color: #fff5e4; border-radius: 30px 18px 34px 20px; box-shadow: 0 8px 0 rgba(58, 38, 48, 0.22), 0 18px 28px rgba(122, 31, 61, 0.15); outline: 2px solid rgba(255, 79, 168, 0.45); outline-offset: -11px; }
.coin-pill { background-color: #5c3a28; background-blend-mode: normal; } .menu-stats { background-color: #fff7ea; }
.mrow.done, .pg-tile.done { background-color: #d6f7e7 !important; } .of-stage { background-color: #ffdca0; }
.panel h2 { color: #7a1f3d; text-shadow: 3px 3px 0 #fbdbc6; } .panel h3, .of-info h3, .mi h3, .pg h3 { color: #7a1f3d; }
.panel h3 { position: relative; display: inline-block; } .panel h3::after { content: ""; display: block; height: 5px; margin-top: 3px; border-radius: 5px; background: repeating-linear-gradient(90deg, #f6aa78 0 10px, transparent 10px 16px); opacity: 0.7; }
/* pages: pink storybook skies with floating planets and islands (the same world as the home page) */
#screen-how, #screen-settings, #screen-missions, #screen-progress, #screen-outfits {
background-image: url("../assets/home/planet.webp"), url("../assets/home/island.webp"), url("../assets/home/comet.webp"), linear-gradient(rgba(255, 228, 238, 0.74), rgba(255, 196, 226, 0.7)), url("../assets/home/bg.jpg");
background-repeat: no-repeat; background-size: clamp(120px, 15vw, 220px), clamp(110px, 14vw, 200px), clamp(110px, 16vw, 230px), auto, cover;
background-position: 94% 5%, 3% 94%, 62% 12%, 0 0, 50% 85%; background-attachment: fixed; animation: pageFloat 15s ease-in-out infinite alternate; }
@keyframes pageFloat { 0% { background-position: 94% 5%, 3% 94%, 62% 12%, 0 0, 50% 85%; } 100% { background-position: 91% 9%, 4.5% 89%, 52% 18%, 0 0, 50% 85%; } }
#screen-pause, #screen-over { background: radial-gradient(90% 90% at 50% 40%, rgba(255, 200, 228, 0.55), rgba(255, 150, 200, 0.35)); }
#screen-over .panel-inner.narrow, #screen-pause .panel-inner.narrow { background-color: #fff5e4; }
.screen.panel::after, .screen.outfits::after { content: ""; position: absolute; inset: 0; background: var(--paper-tex) 0 0 / 256px 256px; mix-blend-mode: normal; opacity: 0.7; pointer-events: none; }
.screen.panel > *, .screen.outfits > * { position: relative; z-index: 1; }
.screen.panel .modal, .screen.outfits .modal { position: absolute; z-index: 8; }
@media (prefers-reduced-motion: reduce) { #screen-how, #screen-settings, #screen-missions, #screen-progress, #screen-outfits { animation: none; } }
/* waterfalls v2: soft streaks that run down inside the painted falls (no hard white bars) */
.wf { background: repeating-linear-gradient(180deg, rgba(230, 246, 255, 0) 0 16px, rgba(230, 246, 255, 0.5) 16px 34px, rgba(230, 246, 255, 0) 34px 52px); background-size: 100% 52px; mix-blend-mode: soft-light; opacity: 0.85; border-radius: 3px;
-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 7px), linear-gradient(180deg, transparent, #000 14%, #000 70%, transparent); mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 7px), linear-gradient(180deg, transparent, #000 14%, #000 70%, transparent);
-webkit-mask-composite: source-in; mask-composite: intersect; animation: fall2 1.4s linear infinite; }
@keyframes fall2 { from { background-position: 0 0; } to { background-position: 0 52px; } }
.mist { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); }
.scene .sc-island > img, .scene .sc-planet > img { position: static; }
/* ================================================================ playful HUD: sticker score, burst multiplier, pill meters ================================================================ */
.hud-tl { gap: 7px; align-items: flex-start; }
.hud-tl .hpill span, .hud-tl .hpill b, .hud-tl .score-row span { -webkit-text-stroke: 0; paint-order: normal; }
.score-row { position: relative; display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
#hud-score { font: 800 clamp(40px, 8.6vh, 74px)/1 var(--font-ui); color: #5a1230; padding: 0 clamp(12px, 2vh, 20px) 3px; background: #fff3e0; border-radius: 34px 44px 36px 42px; box-shadow: 0 0 0 3px #fff3e0, 0 5px 0 3px rgba(122, 31, 61, 0.28); text-shadow: 3px 3px 0 #fbdbc6; letter-spacing: -1px; transform: rotate(-2deg); transition: transform 0.12s; }
#hud-mult { display: grid; place-items: center; width: clamp(46px, 8vh, 64px); aspect-ratio: 1; font: 800 clamp(16px, 3vh, 24px) var(--font-ui); color: #4a1230; background: #ffc619; clip-path: polygon(50% 0, 61% 14%, 79% 8%, 80% 27%, 96% 34%, 86% 50%, 96% 66%, 80% 73%, 79% 92%, 61% 86%, 50% 100%, 39% 86%, 21% 92%, 20% 73%, 4% 66%, 14% 50%, 4% 34%, 20% 27%, 21% 8%, 39% 14%); margin-left: -8px; animation: multWob 3s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(122, 31, 61, 0.4)); }
@keyframes multWob { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
#hud-mult.bump { animation: none; transform: scale(1.35) rotate(10deg); }
.zap { position: absolute; width: 4px; height: clamp(12px, 2.4vh, 20px); background: #ff6a4d; border-radius: 3px; left: -6px; top: 8%; transform-origin: 50% 100%; animation: zapPulse 1.6s ease-in-out infinite; }
.z1 { transform: rotate(-52deg); } .z2 { top: -6%; left: 10px; transform: rotate(-18deg); animation-delay: -0.5s; } .z3 { top: 36%; left: -14px; transform: rotate(-80deg); animation-delay: -1s; }
@keyframes zapPulse { 0%, 100% { opacity: 0.4; scale: 0.8; } 50% { opacity: 1; scale: 1.15; } }
.hpill { display: inline-flex; align-items: center; gap: 8px; background-color: #fff7e8; background-image: var(--paper-tex); background-size: 260px; background-blend-mode: normal; border: 3px solid #4a1230; border-radius: 999px; padding: 3px 14px 3px 10px; box-shadow: 0 4px 0 rgba(74, 18, 48, 0.3); font: 800 clamp(14px, 2.7vh, 22px)/1.1 var(--font-ui); color: #3a1226; position: relative; }
.hpill .sep { width: 3px; height: 1.1em; border-radius: 2px; background: rgba(74, 18, 48, 0.28); opacity: 1; }
.hpill .best-l { font-weight: 500; opacity: 1; } .hpill .best-l b { font-weight: 800; }
.hpill .ico { width: 24px; height: 24px; }
.hrow { display: flex; gap: 8px; }
.hp { display: inline-flex; gap: 6px; } .hp i { width: clamp(20px, 3.4vh, 28px); aspect-ratio: 1; border-radius: 50%; border: 2.5px solid #4a1230; background: conic-gradient(#ffc619 0 50%, #2f9a5a 50% 100%); transition: filter 0.2s, opacity 0.2s; } .hp i.lost { background: #efe5d6; filter: grayscale(1); opacity: 0.8; }
.coin-row { padding-right: 8px; } .coin-row .coin { margin: 0; width: clamp(22px, 3.6vh, 30px); height: clamp(22px, 3.6vh, 30px); }
.rc { background: #ffd23f; color: #2a7a3a !important; border: 2.5px solid #4a1230; border-radius: 999px; padding: 0 10px; font-size: 0.82em; margin: 0 0 0 4px; box-shadow: 0 2px 0 rgba(74, 18, 48, 0.3); } .rc:empty { display: none; }
.bars { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }
.bar-pill { padding: 3px 12px 3px 8px; } .bar-pill .bar { flex: none; width: clamp(110px, 17vh, 170px); height: clamp(12px, 2vh, 16px); border: 2.5px solid #4a1230; border-radius: 999px; background: #fff; overflow: hidden; box-shadow: none; }
.bar-pill .bar i { display: block; height: 100%; border-radius: 999px; }
.combo .bar i { background: linear-gradient(90deg, #ff6a4d, #ff9a5a); } .energy .bar i { background: linear-gradient(90deg, #8c8cf0, #a9a9ff); }
.lvrow { padding-right: 12px; padding-bottom: 6px; } .lvchip { background: #ffd23f; border-radius: 999px; padding: 1px 12px; font-weight: 800; box-shadow: inset 0 -3px 0 rgba(160, 90, 10, 0.2); } .lvname { font-weight: 500; font-family: var(--font); }
.lvrow .lvbar { position: absolute; left: 16px; right: 16px; bottom: 2px; height: 4px; border: 0; background: rgba(74, 18, 48, 0.12); border-radius: 4px; overflow: hidden; } .lvrow .lvbar i { background: #3aa86a; display: block; height: 100%; }
.hud-pause { filter: none; }
@media (max-width: 760px), (max-height: 520px) { .hud-tl { gap: 5px; } .hpill { padding: 2px 10px 2px 7px; } .bar-pill .bar { width: 84px; } .lvname { display: none; } }
@media (prefers-reduced-motion: reduce) { #hud-mult, .zap { animation: none; } }
/* ================================================================ tips with personality (pop-up cards guided by Lanky) ================================================================ */
.tipcard { position: absolute; z-index: 31; right: calc(14px + var(--sar)); top: max(calc(150px + var(--sat)), 25%); display: none; align-items: center; gap: 12px; max-width: min(64vw, 400px); padding: 10px 20px 12px 10px; pointer-events: none; transform-origin: 100% 0; opacity: 0;
background-color: #fff3de; background-image: var(--paper-tex); background-size: 260px; background-blend-mode: normal; border: 3px solid #4a1230; border-radius: 28px 18px 32px 20px; box-shadow: 5px 7px 0 #f9c5a2; font: 400 clamp(14px, 2.5vh, 19px)/1.32 var(--font); color: #3a1226; }
.tipcard.on { display: flex; } .tipcard.pop { animation: tipIn 0.5s cubic-bezier(.2, 1.6, .4, 1) forwards; } .tipcard.out { animation: tipOut 0.34s ease-in forwards; }
@keyframes tipIn { 0% { opacity: 0; transform: translateY(-16px) scale(0.55) rotate(5deg); } 100% { opacity: 1; transform: rotate(-1.2deg); } }
@keyframes tipOut { 0% { opacity: 1; transform: rotate(-1.2deg); } 100% { opacity: 0; transform: translateY(-18px) scale(0.8) rotate(4deg); } }
.tc-guide { flex: none; width: clamp(54px, 9vh, 72px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid #4a1230; background: radial-gradient(circle at 40% 35%, #fff0b8, #ffc619); animation: tcBob 1.6s ease-in-out infinite; box-shadow: 0 3px 0 rgba(74, 18, 48, 0.3); }
.tc-guide canvas { display: block; width: 100%; height: 100%; } @keyframes tcBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
.tc-text b { font-family: var(--font-ui); font-weight: 800; color: #cf6640; letter-spacing: 0.02em; }
.tipcard .dd { position: absolute; pointer-events: none; }
.tipcard .d1 { right: -12px; top: -16px; width: 22px; height: 22px; background: #ffc619; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.8s ease-in-out infinite; }
.tipcard .d2 { left: -14px; bottom: -12px; width: 20px; height: 20px; border-radius: 50%; background: #f8ba91; border: 2.5px solid #4a1230; }
.tipcard[data-d="planet"] .d2::after { content: ""; position: absolute; left: -10px; right: -10px; top: 6px; height: 7px; border: 2.5px solid #4a1230; border-radius: 50%; transform: rotate(-18deg); }
.tipcard[data-d="coin"] .d2 { background: radial-gradient(circle at 35% 30%, #fff3b0, #f6c945 45%, #e0a020); }
.tipcard[data-d="star"] .d2 { background: #ffd23f; border: 0; border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.tipcard[data-d="squig"] .d2 { background: none; border: 0; border-radius: 0; width: 28px; height: 10px; border-bottom: 3px solid #f4985a; border-radius: 0 0 50% 50%; }
.tipcard .d3 { right: 30px; bottom: -14px; width: 7px; height: 7px; border-radius: 50%; background: #ffb81c; }
@media (max-width: 760px) { .tipcard { right: 8px; top: auto; bottom: calc(26% + var(--sab)); max-width: 78vw; } }
/* ================================================================ level intro banners: cloud / ticket / torn paper / flag ================================================================ */
.banner { top: 15%; font-size: inherit; -webkit-text-stroke: 0 !important; }
.banner .lb { position: relative; display: inline-block; padding: clamp(12px, 2.4vh, 20px) clamp(34px, 7vh, 64px) clamp(14px, 2.6vh, 22px); text-align: center; color: #4a1230;
filter: drop-shadow(3px 0 0 #4a1230) drop-shadow(-3px 0 0 #4a1230) drop-shadow(0 3px 0 #4a1230) drop-shadow(0 -3px 0 #4a1230) drop-shadow(5px 8px 0 #f9c5a2); }
.lb .lb-bg { position: absolute; inset: 0; z-index: 0; background-color: #fff3de; background-image: var(--paper-tex); background-size: 260px; background-blend-mode: normal; }
.lb .lb-t, .lb .lb-s { position: relative; z-index: 1; display: block; -webkit-text-stroke: 0; }
.lb .lb-t { font: 800 clamp(30px, 6.6vh, 58px)/1 var(--font-ui); letter-spacing: -0.5px; } .lb .lb-s { font: 400 clamp(16px, 3.1vh, 27px)/1.2 var(--font); margin-top: 4px; }
.lb .lb-d { position: absolute; z-index: 2; pointer-events: none; }
.lb .lb-d1 { width: clamp(22px, 4vh, 34px); aspect-ratio: 1; background: #ffc619; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.6s ease-in-out infinite; }
.lb .lb-d2 { width: clamp(24px, 4.4vh, 38px); aspect-ratio: 1; border-radius: 50%; background: #f8ba91; border: 3px solid #4a1230; }
.lb .lb-d2::after { content: ""; position: absolute; left: -45%; right: -45%; top: 38%; height: 26%; border: 3px solid #4a1230; border-radius: 50%; transform: rotate(-18deg); }
.lb.v1 .lb-bg { background-color: #fff3de; border-radius: 52% 48% 55% 45% / 62% 58% 42% 38%; } .lb.v1 .lb-d1 { left: -8px; bottom: -4px; } .lb.v1 .lb-d2 { left: -22px; top: -16px; }
.lb.v2 .lb-bg { background-color: #ffcf2e; border-radius: 10px; -webkit-mask: radial-gradient(circle 13px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 13px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
.lb.v2::after { content: ""; position: absolute; inset: 8px 22px; border-left: 2.5px solid rgba(74, 18, 48, 0.55); border-right: 2.5px solid rgba(74, 18, 48, 0.55); z-index: 1; pointer-events: none; } .lb.v2 .lb-d1 { left: 50%; top: -22px; margin-left: -17px; } .lb.v2 .lb-d2 { display: none; }
.lb.v3 .lb-bg { clip-path: polygon(0 0, 100% 3%, 98% 78%, 94% 92%, 86% 80%, 78% 96%, 68% 84%, 58% 98%, 48% 86%, 38% 96%, 28% 82%, 18% 95%, 8% 84%, 0 92%); } .lb.v3::before { content: ""; position: absolute; left: 50%; top: -16px; width: 74px; height: 24px; margin-left: -37px; z-index: 3; background: repeating-linear-gradient(45deg, #f9c5a2 0 8px, #fbdbc6 8px 16px); border: 2px solid #4a1230; transform: rotate(-3deg); opacity: 0.92; } .lb.v3 .lb-d1 { display: none; } .lb.v3 .lb-d2 { right: -20px; bottom: -14px; background: #58c49a; }
.lb.v4 .lb-bg { background-color: #facbac; clip-path: polygon(0 4%, 12% 0, 26% 6%, 40% 1%, 56% 6%, 72% 0, 88% 6%, 100% 2%, 93% 50%, 100% 98%, 84% 94%, 70% 100%, 54% 94%, 38% 100%, 22% 94%, 8% 99%, 0 96%); } .lb.v4 .lb-d1 { right: -10px; top: -18px; } .lb.v4 .lb-d2 { display: none; }
.banner.go { animation: bannerPop 2.6s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes bannerPop { 0% { opacity: 0; transform: translateY(-40px) scale(0.5) rotate(-6deg); } 14% { opacity: 1; transform: translateY(0) scale(1.08) rotate(1.5deg); } 22% { transform: scale(1) rotate(-0.6deg); } 80% { opacity: 1; transform: rotate(0); } 100% { opacity: 0; transform: translateY(-22px) scale(0.92); } }
/* ================================================================ level markers: orbital progression path + compact HUD badge ================================================================ */
.orbit { position: relative; display: flex; align-items: flex-start; gap: clamp(14px, 3.4vw, 40px); padding: var(--sp-4) var(--sp-3) var(--sp-5); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.o-rocket, .o-flag { flex: none; align-self: center; margin-top: -14px; } .o-rocket { animation: tcBob 2.2s ease-in-out infinite; }
.o-node { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; padding: 0 !important; min-width: 64px !important; min-height: 0 !important; border-radius: 0 !important; }
.o-node::after { display: none !important; }
.o-node::before { content: ""; position: absolute; top: 28px; right: 100%; width: clamp(14px, 3.4vw, 40px); height: 6px; background: #4a1230; border-radius: 3px; margin-right: 0; }
.o-node .o-c { position: relative; z-index: 1; display: grid; place-items: center; width: clamp(50px, 8vh, 62px); aspect-ratio: 1; border-radius: 50%; border: 3px solid #4a1230; background: #fff3de; box-shadow: 0 5px 0 #f9c5a2; font: 800 clamp(22px, 3.6vh, 30px) var(--font-ui); color: #4a1230; transition: transform 0.15s; }
.o-node small { font: 400 var(--fs-xs) var(--font); max-width: 92px; text-align: center; line-height: 1.2; opacity: 0.85; }
.o-node:hover:not([disabled]) .o-c, .o-node.focus .o-c { transform: translateY(-4px) rotate(-4deg); }
.o-node.sel .o-c { animation: oSel 0.45s cubic-bezier(.2, 1.6, .4, 1); } @keyframes oSel { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-8deg); } 100% { transform: scale(1); } }
.o-node.current .o-c { background: radial-gradient(circle at 38% 32%, #fff0a0, #ffc619); animation: oPulse 1.8s ease-in-out infinite; } @keyframes oPulse { 0%, 100% { box-shadow: 0 5px 0 #f9c5a2, 0 0 0 0 rgba(255, 198, 25, 0.7); } 50% { box-shadow: 0 5px 0 #f9c5a2, 0 0 0 11px rgba(255, 198, 25, 0); } }
.o-node.done .o-c { background: #d6f7e7; } .o-node.done .o-ck { position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: 50%; background: #14b87a; border: 2.5px solid #4a1230; } .o-node.done .o-ck::after { content: ""; position: absolute; left: 5px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.o-node.open .o-c { background: #fff3de; }
.o-node.lock .o-c { background: #e3d8cc; box-shadow: 0 5px 0 #cdb7c8; color: #8a7a6a; } .o-node.lock { opacity: 0.8; } .o-node.lock::before { background: repeating-linear-gradient(90deg, #4a1230 0 8px, transparent 8px 14px); opacity: 0.5; }
.o-node.newly .o-c { animation: oUnlock 0.9s cubic-bezier(.2, 1.7, .4, 1); } @keyframes oUnlock { 0% { transform: scale(0.3) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.3) rotate(8deg); opacity: 1; } 100% { transform: scale(1); } }
.o-node.newly::after { display: block !important; content: ""; position: absolute; top: -10px; left: 50%; width: 22px; height: 22px; margin-left: -11px; background: #ffc619; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.2s ease-in-out 3; z-index: 2; }
.orbit .o-node:first-of-type::before { left: auto; }
/* compact HUD badge */
.lvrow { position: relative; } .lvrow::after { content: ""; position: absolute; right: -9px; top: -11px; width: 18px; height: 18px; background: #ffc619; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.4s ease-in-out infinite; }
.lvrow.lvpop { animation: lvPop 0.8s cubic-bezier(.2, 1.7, .4, 1); } @keyframes lvPop { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-3deg); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tipcard.pop, .tc-guide, .o-node .o-c, .banner.go { animation: none; } .tipcard.pop { opacity: 1; } }
#pg-levels { display: block !important; } .orbit { width: 100%; }
/* world map */
.tiles { grid-template-columns: repeat(4, 1fr) !important; } .tiles .btn.tile { font-size: var(--fs-sm) !important; } .tiles .btn.tile svg { width: 34px; height: 34px; }
#screen-map { background-image: url("../assets/home/planet.webp"), url("../assets/home/island.webp"), url("../assets/home/comet.webp"), linear-gradient(rgba(255, 228, 238, 0.74), rgba(255, 196, 226, 0.7)), url("../assets/home/bg.jpg"); background-repeat: no-repeat; background-size: clamp(120px, 15vw, 220px), clamp(110px, 14vw, 200px), clamp(110px, 16vw, 230px), auto, cover; background-position: 94% 5%, 3% 94%, 62% 12%, 0 0, 50% 85%; background-attachment: fixed; animation: pageFloat 15s ease-in-out infinite alternate; overflow: auto; align-items: flex-start; }
.wmap { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) clamp(14px, 3vw, 36px); padding: var(--sp-4) 0 var(--sp-5); }
.m-world { position: relative; display: flex !important; flex-direction: column; align-items: center; gap: 6px; background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; padding: 0 !important; min-width: 96px !important; min-height: 0 !important; border-radius: 0 !important; }
.m-world::after { display: none !important; } .m-world:nth-child(even) { margin-top: 26px; }
.m-world .m-p { position: relative; display: grid; place-items: center; width: clamp(78px, 11vh, 100px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 247, 232, 0.8); border: 3px solid #4a1230; box-shadow: 0 5px 0 #f9c5a2; transition: transform 0.15s; }
.m-world .m-p img { width: 86%; height: 86%; object-fit: contain; animation: tcBob 4s ease-in-out infinite; } .m-world:nth-child(2n) .m-p img { animation-delay: -1.3s; } .m-world:nth-child(3n) .m-p img { animation-delay: -2.4s; }
.m-world small { font: 400 var(--fs-xs) var(--font); text-align: center; max-width: 110px; line-height: 1.2; }
.m-world:hover:not([disabled]) .m-p, .m-world.focus .m-p { transform: translateY(-5px) rotate(-5deg); }
.m-world.current .m-p { background: radial-gradient(circle at 38% 32%, #fff3b0, #ffc619); animation: oPulse 1.8s ease-in-out infinite; }
.m-world.done .m-p { background: #d6f7e7; } .m-world.done .o-ck { position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%; background: #14b87a; border: 2.5px solid #4a1230; } .m-world.done .o-ck::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.m-world.lock .m-p { background: #e3d8cc; box-shadow: 0 5px 0 #cdb7c8; } .m-world.lock img { filter: grayscale(1) brightness(1.05); opacity: 0.45; } .m-world.lock { opacity: 0.85; } .m-lock { position: absolute; font-size: 28px; }
@media (max-width: 760px) { .tiles { gap: var(--sp-2) !important; } .tiles .btn.tile { min-height: 70px !important; font-size: var(--fs-xs) !important; } }
.of-mix { display: none; padding: var(--sp-3) var(--sp-4); text-align: left; } .screen.wardrobe .of-mix { display: block; } .of-mix h4 { margin: 0 0 var(--sp-1); font: 400 var(--fs-md) var(--font); } .mix-note { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); opacity: 0.75; }
.mix-row { margin: var(--sp-2) 0; } .mix-row > b { display: block; font: 600 var(--fs-xs) var(--font-ui); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; margin-bottom: var(--sp-1); } .mix-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); } .mix-chips .chip { font-size: var(--fs-xs) !important; min-height: 34px !important; padding: var(--sp-1) var(--sp-3) !important; } .mix-chips .chip[disabled] { opacity: 0.5; }
/* ================================================================ game over card: ribbon banner, starburst score, cheering Lanky ================================================================ */
#screen-over .panel-inner.ov-card { width: min(560px, 100%); padding: 22px 22px 22px; background-image: none; }
.ov-banner { position: relative; margin: 8px 6px 14px; }
.ov-banner h2 { position: relative; margin: 0; padding: 12px 24px 10px; font-size: 38px; line-height: 1.05; color: var(--burgundy); background: #f9c7a5; border: 3px solid var(--ink); border-radius: 10px 30px 12px 26px; transform: rotate(-2.2deg); text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.55); box-shadow: 0 4px 0 rgba(58, 38, 48, 0.25); z-index: 1; }
.ov-banner h2::before, .ov-banner h2::after { content: ''; position: absolute; top: 12px; width: 44px; height: 100%; background: #d99e77; border: 3px solid var(--ink); z-index: -1; }
.ov-banner h2::before { left: -22px; border-radius: 6px 0 0 6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%); }
.ov-banner h2::after { right: -22px; border-radius: 0 6px 6px 0; clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }
.ov-crown { position: absolute; left: 50%; top: -22px; width: 54px; height: 40px; margin-left: -62px; z-index: 3; display: none; transform: rotate(-8deg); background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 6l5 4 5-8 5 8 5-4-2 11H4z' fill='%23fec54f' stroke='%233a2630' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ov-planet { position: absolute; left: -22px; top: 6px; width: 62px; height: 46px; z-index: 2; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cellipse cx='32' cy='26' rx='30' ry='9' fill='none' stroke='%233a2630' stroke-width='6' transform='rotate(-18 32 26)'/%3E%3Ccircle cx='32' cy='24' r='15' fill='%23ff8ac8' stroke='%233a2630' stroke-width='3'/%3E%3Cellipse cx='32' cy='26' rx='30' ry='9' fill='none' stroke='%23ffb4de' stroke-width='3' transform='rotate(-18 32 26)' stroke-dasharray='34 99' stroke-dashoffset='-36'/%3E%3C/svg%3E"); }
.over.record .ov-crown { display: block; animation: wiggle 2.4s ease-in-out infinite; }
.over:not(.record) .ov-banner h2 { background: #d9c2e6; }
.ov-top { position: relative; min-height: 150px; display: flex; align-items: center; justify-content: flex-start; padding-left: 8px; }
.ov-top .big-score { position: relative; margin: 0; width: 56%; text-align: center; }
.ov-top .big-score small { position: relative; z-index: 2; display: block; font-size: 20px; margin-bottom: -2px; }
.ov-top .burst { position: absolute; left: 50%; top: 52%; width: 250px; height: 150px; transform: translate(-50%, -42%); background: var(--yellow); z-index: 0; }
.ov-top .big-score b { position: relative; z-index: 1; font-size: 72px; text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.6); }
#over-hero { position: absolute; right: -6px; bottom: -8px; width: 190px; height: 190px; pointer-events: none; z-index: 2; }
.ov-stats div { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; }
.ov-stats svg { flex: 0 0 34px; width: 34px; height: 34px; }
.ov-stats span { min-width: 0; } .ov-stats small { display: block; font-size: 14px; } .ov-stats b { font-size: 26px; line-height: 1.05; }
.over-coins { position: relative; margin: 16px 0 14px; padding: 14px 14px 12px; border-radius: 22px 12px 24px 14px; background: #fffaf0; }
.oc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oc-head .coin.big { width: 46px; height: 46px; flex: 0 0 46px; }
.oc-pill { padding: 8px 20px; font-size: 26px; color: var(--burgundy); background: #fbd4ba; border: 2.5px solid var(--ink); border-radius: 40px 34px 42px 30px; box-shadow: 0 3px 0 rgba(58, 38, 48, 0.2); }
.oc-bal { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 16px; }
.oc-bal em { font-style: normal; font-weight: 700; font-size: 20px; padding: 2px 14px 2px 8px; background: var(--yellow); border-radius: 20px; } .oc-bal .coin { margin-right: -4px; }
.oc-rows { display: flex; flex-wrap: wrap; margin-top: 12px; gap: 6px 0; }
.oc-rows span { flex: 1 1 18%; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 14px; padding: 0 4px; border-left: 2px solid rgba(58, 38, 48, 0.18); }
.oc-rows span:first-child { border-left: 0; } .oc-rows b { font-size: 20px; color: #b9790a; }
.oc-done { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; background: #ffe58a; border-radius: 14px; font-size: 16px; line-height: 1.25; }
.oc-done strong { display: block; font-size: 20px; } .medal { flex: 0 0 44px; height: 52px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52'%3E%3Cpath d='M12 30l-6 20 10-5 5 6 3-17zM32 30l6 20-10-5-5 6-3-17z' fill='%23ff8ac8' stroke='%233a2630' stroke-width='2.4' stroke-linejoin='round'/%3E%3Ccircle cx='22' cy='20' r='16' fill='%23fec54f' stroke='%233a2630' stroke-width='3'/%3E%3Ccircle cx='22' cy='20' r='10' fill='none' stroke='%23e8a919' stroke-width='2'/%3E%3Cpath d='M22 12l2.4 5 5.4.7-4 3.7 1 5.4-4.8-2.7-4.8 2.7 1-5.4-4-3.7 5.4-.7z' fill='%23e0602f' stroke='%233a2630' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ov-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ov-btns .btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; } .ov-btns .btn svg { width: 28px; height: 28px; flex: 0 0 28px; }
.ov-btns .ov-retry, .ov-btns .ov-menu, .ov-btns.solo .btn { grid-column: 1 / -1; }
.ov-btns .ov-retry { font-size: 30px; font-style: italic; padding-block: 14px; } .ov-btns .ov-retry svg { width: 34px; height: 34px; }
.ov-btns .pinky { background: #fbd4ba; } .ov-btns .pinky .lbl { line-height: 1.1; }
.ov-btns .btn.hidden { display: none; }
@media (max-width: 520px) { .ov-banner h2 { font-size: 30px; } #over-hero { width: 140px; height: 140px; } .ov-top .big-score b { font-size: 56px; } .ov-top .burst { width: 200px; height: 120px; } .ov-top { min-height: 120px; } .oc-pill { font-size: 22px; } .oc-rows span { flex-basis: 30%; } .oc-rows span:nth-child(4) { border-left: 0; } }
/* ---- playful pass: sparkles, speech bubble, confetti, pop-in, bouncy icons ---- */
.ov-banner .sp { position: absolute; width: 22px; height: 22px; z-index: 4; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='%23fff2a8' stroke='%233a2630' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); animation: twinkle 1.6s ease-in-out infinite; }
.ov-banner .s1 { left: 6%; top: -14px; } .ov-banner .s2 { right: 4%; top: -10px; width: 28px; height: 28px; animation-delay: .5s; } .ov-banner .s3 { right: -8px; bottom: -10px; width: 18px; height: 18px; animation-delay: .9s; } .ov-banner .s4 { left: 30%; bottom: -14px; width: 16px; height: 16px; animation-delay: .3s; }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .7; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }
.ov-banner h2 { animation: ovbob 3s ease-in-out infinite; } @keyframes ovbob { 0%, 100% { transform: rotate(-2.2deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-3px); } }
.ov-top .burst { animation: burstspin 14s linear infinite; } @keyframes burstspin { to { transform: translate(-50%, -42%) rotate(360deg); } }
.ov-top .big-score b { display: inline-block; animation: scorepop .7s .15s cubic-bezier(.2, 1.7, .4, 1) both; } @keyframes scorepop { from { transform: scale(0) rotate(-12deg); } to { transform: scale(1) rotate(0); } }
.ov-bubble { position: absolute; right: 118px; top: -14px; max-width: 170px; padding: 8px 12px; font-size: 15px; line-height: 1.2; text-align: center; background: #fff; border: 2.5px solid var(--ink); border-radius: 18px 18px 18px 6px; box-shadow: 2px 3px 0 rgba(58, 38, 48, .25); z-index: 3; transform-origin: 100% 100%; animation: bubpop .5s .8s cubic-bezier(.2, 1.7, .4, 1) both; }
.ov-bubble::after { content: ''; position: absolute; right: -9px; bottom: 6px; width: 14px; height: 14px; background: #fff; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: skewX(40deg) rotate(-30deg); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
@keyframes bubpop { from { transform: scale(0) rotate(8deg); } to { transform: scale(1) rotate(0); } }
.ov-conf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; border-radius: inherit; }
.ov-conf i { position: absolute; top: -14px; width: 10px; height: 14px; border: 1.5px solid var(--ink); border-radius: 3px; animation: confall 3s linear infinite; }
@keyframes confall { 0% { transform: translateY(0) rotate(var(--r)); opacity: 1; } 100% { transform: translateY(760px) rotate(calc(var(--r) + 540deg)); opacity: .9; } }
.ov-card { position: relative; overflow-x: hidden; }
.ov-stats div { animation: statpop .5s cubic-bezier(.2, 1.6, .4, 1) both; } .ov-stats div:nth-child(1) { animation-delay: .25s; } .ov-stats div:nth-child(2) { animation-delay: .35s; } .ov-stats div:nth-child(3) { animation-delay: .45s; } .ov-stats div:nth-child(4) { animation-delay: .55s; }
@keyframes statpop { from { transform: scale(.6) translateY(14px); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ov-stats svg { animation: iconbob 2.6s ease-in-out infinite; transform-origin: 50% 90%; } .ov-stats div:nth-child(2) svg { animation-delay: .4s; } .ov-stats div:nth-child(3) svg { animation-delay: .8s; } .ov-stats div:nth-child(4) svg { animation-delay: 1.2s; }
@keyframes iconbob { 0%, 80%, 100% { transform: translateY(0) rotate(0); } 88% { transform: translateY(-5px) rotate(-8deg); } 94% { transform: translateY(-2px) rotate(6deg); } }
.ov-stats .tw { animation: twinkle 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.over-coins { animation: statpop .5s .65s cubic-bezier(.2, 1.6, .4, 1) both; }
.oc-head .coin.big { animation: coinspin 3s ease-in-out infinite; } @keyframes coinspin { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
.oc-pill { animation: ovbob 2.4s ease-in-out infinite; }
.oc-done .medal { animation: wiggle 2s ease-in-out infinite; }
.ov-btns .btn { transition: transform .15s; } .ov-btns .btn:hover, .ov-btns .btn:focus-visible { transform: translateY(-3px) rotate(-1.2deg) scale(1.03); } .ov-btns .btn:active { transform: scale(.96); }
.ov-btns .btn svg { transition: transform .25s; } .ov-btns .btn:hover svg { transform: rotate(-18deg) scale(1.15); } .ov-retry:hover svg { transform: rotate(300deg) !important; }
.ov-btns .ov-retry { animation: retrypulse 2s 1.4s ease-in-out infinite; } @keyframes retrypulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.ov-btns .ov-retry:hover { animation: none; }
.ov-btns .ov-menu { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .ov-card *, .ov-card { animation: none !important; } }
@media (max-width: 520px) { .ov-bubble { right: 90px; max-width: 130px; font-size: 13px; } }
.ov-top .big-score { width: 50%; } .ov-bubble { top: -30px; right: 96px; max-width: 150px; }
/* ---- results card, round 3: art matched to the supplied reference (ribbon, coin stack, clouds, moon, motion marks); title is burgundy, never red-on-pink ---- */
#screen-over { background: url(../assets/results/cloud.svg) left -30px bottom -14px / 300px auto no-repeat, url(../assets/results/cloud.svg) right -40px bottom -10px / 280px auto no-repeat, url(../assets/results/moon.svg) right -46px top -56px / 190px auto no-repeat, radial-gradient(90% 90% at 50% 40%, rgba(255, 214, 234, 0.9), rgba(255, 170, 212, 0.55)); }
.ov-banner { margin: 22px 4px 10px; }
.ov-banner h2, .over.record .ov-banner h2, .over:not(.record) .ov-banner h2 { background: url(../assets/results/ribbon.svg) center / 100% 100% no-repeat; border: 0; box-shadow: none; border-radius: 0; padding: 30px 40px 36px; font-family: 'Fredoka', sans-serif; font-weight: 800; font-style: italic; font-size: 46px; letter-spacing: .5px; color: var(--burgundy); text-shadow: 0 2px 0 rgba(255, 255, 255, .45); transform: rotate(-3deg); }
.ov-banner h2::before, .ov-banner h2::after { display: none; }
.over:not(.record) .ov-banner h2 { filter: hue-rotate(75deg) saturate(.7) brightness(1.08); font-size: 40px; }
.over.record h2 { color: var(--burgundy); }
.ov-crown { width: 66px; height: 50px; top: -34px; margin-left: -130px; }
.ov-planet { width: 92px; height: 68px; left: -26px; top: 36px; }
.ov-top .burst { background: #ffd23f; }
.ov-top .big-score small { font-size: 22px; font-weight: 700; padding: 0 12px; background: radial-gradient(closest-side, #fffaf0 70%, transparent); }
.mk { position: absolute; width: 46px; height: 58px; background: url(../assets/results/marks.svg) center / contain no-repeat; z-index: 2; animation: twinkle 1.8s ease-in-out infinite; }
.mk-l { right: 168px; top: 10px; } .mk-r { right: 4px; top: 6px; transform: scaleX(-1); animation-delay: .6s; }
.oc-head { padding-left: 96px; min-height: 52px; }
.oc-stack { position: absolute; left: 4px; top: -30px; width: 100px; height: 84px; background: url(../assets/results/coins.svg) center / contain no-repeat; animation: iconbob 3s ease-in-out infinite; }
.oc-pill { background: #fbd4ba url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='.7' fill='%23fff' opacity='.5'/%3E%3C/svg%3E"); border-radius: 44px 30px 46px 28px / 30px 40px 28px 44px; }
@media (max-width: 520px) { .ov-banner h2 { font-size: 34px; padding: 24px 28px 30px; } .ov-crown { margin-left: -100px; } .mk-l { right: 120px; } }
.ov-top .big-score small { background: none; padding: 0; }
.ov-top .burst { animation: burstpulse 2.6s ease-in-out infinite; } @keyframes burstpulse { 0%, 100% { transform: translate(-50%, -42%) scale(1) rotate(-2deg); } 50% { transform: translate(-50%, -42%) scale(1.07) rotate(2deg); } }
/* ---- round 4: the supplied illustrations (background removed) replace my drawn stand-ins ---- */
.ov-crown { background: url(../assets/results/crown.png) center / contain no-repeat; width: 78px; height: 66px; top: -42px; margin-left: -150px; }
.ov-planet { background: url(../assets/results/pink_planet.png) center / contain no-repeat; width: 104px; height: 70px; left: -30px; top: 34px; }
.ov-banner .sp { background: url(../assets/results/sparkle_small.png) center / contain no-repeat; }
.ov-banner .s2, .ov-banner .s1 { background-image: url(../assets/results/sparkle_large.png); }
.ov-banner .s1 { width: 30px; height: 30px; } .ov-banner .s2 { width: 36px; height: 36px; }
.oc-stack { background: url(../assets/results/coin_stack.png) center / contain no-repeat; width: 104px; height: 92px; left: -2px; top: -36px; }
.medal { background: url(../assets/results/achievement_medal.png) center / contain no-repeat; flex-basis: 46px; height: 58px; }
.ov-btns .pinky img { width: 44px; height: 38px; flex: 0 0 44px; object-fit: contain; margin: -6px 0; transition: transform .25s; } .ov-btns .pinky:hover img { transform: rotate(-12deg) scale(1.12); }
/* ================= round 5: built from the supplied transparent PNGs. Text is live HTML laid over the PNG frames (baked text was erased from the frames) ================= */
#screen-over { background: url(../assets/results/purple_cloud_left.png) left -20px bottom -8px / 300px auto no-repeat, url(../assets/results/purple_cloud_right.png) right -30px bottom -8px / 280px auto no-repeat, url(../assets/results/moon.svg) right -46px top -56px / 190px auto no-repeat, radial-gradient(90% 90% at 50% 40%, rgba(255, 214, 234, 0.9), rgba(255, 170, 212, 0.55)); }
.ov-banner h2, .over.record .ov-banner h2, .over:not(.record) .ov-banner h2 { background: url(../assets/results/ui_ribbon.png) center / 100% 100% no-repeat; padding: 30px 50px 44px; font-size: 48px; transform: rotate(-1.5deg); animation: none; }
.over:not(.record) .ov-banner h2 { filter: hue-rotate(75deg) saturate(.75) brightness(1.08); font-size: 42px; }
.ov-top .burst { width: 330px; height: 106px; top: 56%; transform: translate(-50%, -40%); background: url(../assets/results/ui_sunburst.png) center / 100% 100% no-repeat; clip-path: none; animation: burstpulse2 2.6s ease-in-out infinite; }
@keyframes burstpulse2 { 0%, 100% { transform: translate(-50%, -40%) scale(1) rotate(-1.5deg); } 50% { transform: translate(-50%, -40%) scale(1.06) rotate(1.5deg); } }
.ov-host { position: absolute; right: -14px; bottom: -22px; width: 150px; height: auto; z-index: 2; pointer-events: none; animation: hostbob 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hostbob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
.mk-l { background: url(../assets/results/orange_motion_marks_left.png) center / contain no-repeat; width: 52px; height: 52px; right: 148px; top: 4px; }
.mk-r { background: url(../assets/results/orange_motion_marks_right.png) center / contain no-repeat; width: 52px; height: 52px; right: -8px; top: -4px; transform: none; }
.ov-stats { gap: 8px; }
.ov-stats div { container-type: inline-size; aspect-ratio: 469 / 144; background: no-repeat center / 100% 100%; border: 0; border-radius: 0; padding: 0 0 0 31%; align-items: center; }
.ov-stats .st-dist { background-image: url(../assets/results/ui_stat_distance.png); } .ov-stats .st-best { background-image: url(../assets/results/ui_stat_best_score.png); }
.ov-stats .st-coll { background-image: url(../assets/results/ui_stat_collected.png); } .ov-stats .st-combo { background-image: url(../assets/results/ui_stat_best_combo.png); }
.ov-stats small { font-size: 5.6cqw; line-height: 1.1; } .ov-stats b { font-size: 11.5cqw; line-height: 1.05; } .ov-stats svg { display: none; }
.over-coins { background: none; border: 0; padding: 0; margin: 12px 0 10px; animation: statpop .5s .65s cubic-bezier(.2, 1.6, .4, 1) both; }
.oc-head { container-type: inline-size; position: relative; display: block; aspect-ratio: 986 / 135; padding: 0; min-height: 0; background: url(../assets/results/ui_coinpanel.png) center / 100% 100% no-repeat; }
.oc-head > * { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; background: none; border: 0; box-shadow: none; animation: none; text-align: center; white-space: nowrap; }
.oc-pill { left: 25.5%; width: 23%; font-size: 5.4cqw; color: var(--burgundy); }
.oc-lbl { left: 59.5%; width: 14%; font-size: 2.6cqw; color: var(--ink); }
.oc-num { left: 81%; width: 9%; font-size: 4.8cqw; font-style: normal; font-weight: 700; color: var(--ink); }
.oc-stack, .oc-bal { display: none; }
.oc-rows { margin-top: 8px; padding: 10px 6px; background: #fffaf0; border: 2.5px solid var(--ink); border-radius: 16px 10px 18px 12px; }
.oc-done { position: relative; display: block; aspect-ratio: 866 / 156; margin-top: 8px; padding: 0 17% 0 19%; background: url(../assets/results/ui_achv.png) center / 100% 100% no-repeat; border-radius: 0; container-type: inline-size; text-align: center; }
.oc-done > div { position: absolute; inset: 0 12% 0 17%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 3.1cqw; line-height: 1.2; }
.oc-done strong { font-size: 4.4cqw; color: var(--burgundy); }
.oc-done .medal { position: absolute; left: -1%; top: 50%; width: 11%; height: auto; aspect-ratio: 194 / 205; flex: none; transform: translateY(-50%); background: url(../assets/results/achievement_medal.png) center / contain no-repeat; z-index: 2; animation: wiggle 2s ease-in-out infinite; }
.ov-btns { grid-template-columns: 320fr 407fr; align-items: end; }
.ov-btns .btn { container-type: inline-size; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; border: 0; box-shadow: none; filter: none; border-radius: 0; padding: 0; }
.ov-btns .btn::before, .ov-btns .btn::after { display: none; }
.ov-btns .ov-retry { grid-column: 1 / -1; justify-self: center; width: min(100%, 440px); aspect-ratio: 592 / 145; background-image: url(../assets/results/ui_retry.png); padding-left: 42%; animation: retrypulse 2s 1.4s ease-in-out infinite; font-size: 9.5cqw; }
.ov-btns .ov-retry .lbl { font-family: 'Fredoka', sans-serif; font-weight: 800; font-style: italic; font-size: 10.5cqw; color: var(--burgundy); }
.ov-btns .ov-outfits { aspect-ratio: 320 / 141; background-image: url(../assets/results/ui_outfits.png); padding-left: 46%; }
.ov-btns .ov-revive { aspect-ratio: 407 / 141; background-image: url(../assets/results/ui_revive.png); padding-left: 44%; }
.ov-btns .ov-outfits .lbl { font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 9cqw; color: var(--burgundy); }
.ov-btns .ov-revive .lbl { display: flex; flex-direction: column; line-height: 1.05; }
.ov-btns .ov-revive b { font-family: 'Fredoka', sans-serif; font-weight: 800; font-style: italic; font-size: 9.5cqw; color: var(--burgundy); } .ov-btns .ov-revive small { font-size: 6cqw; }
.ov-btns.solo .ov-outfits { grid-column: 1 / -1; justify-self: center; width: 60%; }
.ov-btns .ov-menu { aspect-ratio: auto; background: #fffaf0; border: 2.5px solid var(--ink); border-radius: 22px 12px 24px 14px; padding: 8px; }
.ov-btns .btn svg, .ov-btns .pinky img { display: none; }
@media (max-width: 520px) { .ov-host { width: 118px; } .ov-top .burst { width: 250px; height: 80px; } .mk-l { right: 112px; } .ov-banner h2 { font-size: 36px; padding: 24px 34px 34px; } }
/* ================= round 6: sturdier type, roomier lines, hover fix, fun scrollbars, mobile fixes, leaderboard, dimension preview ================= */
html, body { font-family: var(--font-ui); font-weight: 500; line-height: 1.5; letter-spacing: 0; }
p, small, .lede, .tag, .otag, .rar, .of-desc, .mrow .mt, .earn-row span, .hrow, .how-card p, .tut-card p, .it small, .set-row span, .mb, .of-count, .of-empty, .mix-note, .load-card p, .pad-hint, .pg-stats small, .pg-tile small, .pg-act .row small, .hiscore small, .ms small, .oc-bal, .pg-msg { font-family: var(--font-ui); font-weight: 500; opacity: 1; color: #4a2f3a; line-height: 1.5; letter-spacing: 0.01em; }
small { opacity: 1; font-weight: 600; }
.tag, .lede { font-size: clamp(15px, 4.2vw, 19px); font-weight: 600; color: var(--ink); line-height: 1.45; text-wrap: balance; }
.bubble, #host .bubble, #toast, .tc-text, #level-banner small { font-family: var(--font); font-weight: 400; color: var(--ink); line-height: 1.5; }
#toast:not(.on) { opacity: 0; }
.btn small, #btn-continue small, .btn#pg-continue small, .pill-main small { opacity: 1; font-family: var(--font-ui); font-weight: 600; line-height: 1.35; margin-top: 4px; color: inherit; }
h2, h3, h4, .panel h2, .panel h3, .modal-card h3 { line-height: 1.2; }
.btn { line-height: 1.25; } .modal-card p, .how-card p, .tut-card p, .mrow .mt { line-height: 1.55; }
.ms small { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(10px, 2.9vw, 12px); color: #5a3a46; }
.ms > div { min-width: 0; } .ms b { line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.nu { color: #4a1230 !important; font-weight: 800 !important; font-size: clamp(10px, 2.7vw, 12px) !important; white-space: nowrap; padding: 2px 10px !important; letter-spacing: 0.05em; }
.hiscore small { font-weight: 700; color: #5a3a46; }
.of-count, .mb, .of-empty, .mix-note, .pg-tile small { font-weight: 600; }
.mix-row > b, .pg-stats small { opacity: 1; color: #5a3a46; font-weight: 700; }
.tiles .btn.tile span { line-height: 1.2; }
/* hover bug: selected chips are white-on-orange, and .btn:hover turned the background white. Keep every state readable. */
.btn:hover, .btn.focus { color: var(--ink); }
.chip:hover, .chip.focus { background: #ffe3c2; color: var(--ink); }
.chip.on, .chip.on:hover, .chip.on.focus { background: #e8602f; color: #fff; }
.chip[disabled] { color: #6a5058; }
.btn.primary:hover, .btn.primary.focus { color: var(--ink); }
.ocard:hover, .ocard.focus { background: #fff1d6 !important; color: var(--ink); } .ocard:hover .nm, .ocard.focus .nm { color: var(--ink); }
/* fun scrollbars (desktop and Android; iPhone Safari draws its own, so scrolling there gets the little rocket bar from fun-scroll.js) */
* { scrollbar-width: thin; scrollbar-color: #f6aa78 #fef2ea; }
::-webkit-scrollbar { width: 18px; height: 18px; }
::-webkit-scrollbar-track { margin: 8px; border: 2.5px solid #3a2630; border-radius: 12px; background: repeating-linear-gradient(135deg, #fdede2 0 8px, #fff6e6 8px 16px); }
::-webkit-scrollbar-thumb { border: 3px solid #3a2630; border-radius: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.6 7 .6-5.4 4.6 1.7 7-5.9-3.8-5.9 3.8 1.7-7L2.4 9.2l7-.6z' fill='%23fff2a8' stroke='%233a2630' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(180deg, #ffd23f, #f8ba91); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7); }
::-webkit-scrollbar-thumb:hover { background-color: #f6aa78; filter: brightness(1.08); }
::-webkit-scrollbar-corner { background: transparent; }
.fxbar { position: fixed; z-index: 90; width: 16px; border: 2.5px solid #3a2630; border-radius: 12px; background: repeating-linear-gradient(135deg, #fdede2 0 7px, #fff6e6 7px 14px); opacity: 0; transition: opacity 0.3s; pointer-events: none; box-shadow: 2px 3px 0 rgba(58, 38, 48, 0.25); }
.fxbar.on { opacity: 1; }
.fxbar i { position: absolute; left: -4px; right: -4px; min-height: 34px; border: 3px solid #3a2630; border-radius: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.6 7 .6-5.4 4.6 1.7 7-5.9-3.8-5.9 3.8 1.7-7L2.4 9.2l7-.6z' fill='%23fff2a8' stroke='%233a2630' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat, linear-gradient(180deg, #ffd23f, #f8ba91); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7); }
@media (pointer: coarse) { .panel, .panel-inner, .modal-card, .orbit { scrollbar-width: none; } .panel::-webkit-scrollbar, .panel-inner::-webkit-scrollbar, .modal-card::-webkit-scrollbar { display: none; } }
/* tips: compact, translucent, top-right under the pause button so the track stays visible on phones */
@media (max-width: 760px), (max-height: 480px) {
.tipcard { top: calc(var(--sat) + 70px) !important; bottom: auto !important; right: 8px !important; left: auto !important; max-width: min(48vw, 250px) !important; padding: 6px 12px 8px 6px !important; gap: 8px !important; background-color: rgba(255, 246, 228, 0.9); }
.tipcard .tc-guide { width: 42px !important; height: 42px !important; flex: none; } .tipcard .tc-guide canvas { width: 100% !important; height: 100% !important; }
.tipcard .tc-text { font-size: 12.5px !important; line-height: 1.45 !important; }
.tipcard .dd { display: none; }
}
/* mobile layout */
@media (max-width: 430px) {
.menu-stats { gap: 8px 10px; padding: 12px 14px; } .ms { gap: 8px; } .ms .msi svg { width: 28px; height: 28px; }
.ms b { font-size: 16px; } .tiles .btn.tile { font-size: 11px !important; padding: 6px 2px 8px !important; } .tiles .btn.tile svg { width: 28px; height: 28px; }
.pill-main { padding-left: 18px !important; } .pill-main .pm-t { font-size: 28px; }
}
.tiles { grid-template-columns: repeat(5, 1fr) !important; }
@media (max-width: 760px) { .tiles .btn.tile span { font-size: 11px; } }
/* leaderboard */
.bd-name { text-align: left; margin: 8px 0 12px; } .bd-name label { display: block; font-weight: 700; margin-bottom: 4px; } .bd-row { display: flex; gap: 8px; } .bd-row input { flex: 1; min-width: 0; }
.bd-tabs { justify-content: center; }
.bd-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.bd-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; background: #fffaf0; border: 2.5px solid var(--ink); border-radius: 16px 10px 18px 12px; box-shadow: 2px 3px 0 rgba(58, 38, 48, 0.25); }
.bd-rk { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fef2ea; font: 800 18px var(--font-ui); }
.bd-item.r1 .bd-rk { background: #ffd23f; } .bd-item.r2 .bd-rk { background: #dfe8f2; } .bd-item.r3 .bd-rk { background: #f0a878; }
.bd-who b, .bd-val b { display: block; font: 800 18px var(--font-ui); line-height: 1.3; } .bd-who small, .bd-val small { display: block; font-size: 13px; } .bd-val { text-align: right; }
.bd-item.fresh { background: #fff0a8; animation: statpop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.bd-empty { padding: 20px; text-align: center; font-weight: 600; } .bd-note { font-size: 13px; margin: 8px 0 0; }
/* dimension preview */
#map-pv { position: fixed; inset: 0; z-index: 60; } .mp-card { width: min(460px, 100%); }
.mp-card canvas { display: block; width: 100%; height: auto; border-radius: 14px; margin-bottom: 12px; }
.mp-card h3 { font: 800 26px var(--font-ui); } .mp-state { font-weight: 700; color: #a85638; } .mp-card .mbtns { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
/* ---- PNG results card tuning ---- */
.over-coins { width: 100%; align-self: stretch; }
.ov-top .big-score { width: 54%; } .ov-top .burst { width: 290px; height: 94px; }
.ov-btns .ov-retry .lbl { font-size: 12cqw; } .ov-btns .ov-outfits .lbl { font-size: 12.5cqw; }
.ov-btns .ov-revive b { font-size: 11.5cqw; } .ov-btns .ov-revive small { font-size: 7.6cqw; font-weight: 700; color: var(--burgundy); }
.ov-btns .ov-retry { padding-left: 41%; } .ov-btns .ov-outfits { padding-left: 44%; } .ov-btns .ov-revive { padding-left: 43%; }
.ov-btns .btn .lbl { white-space: nowrap; }
.oc-pill { font-size: 5.8cqw; font-weight: 800; font-family: var(--font-ui); } .oc-lbl { font-size: 2.9cqw; font-weight: 700; } .oc-num { font-size: 5cqw; font-family: var(--font-ui); font-weight: 800; }
.oc-done > div { font-size: 3.4cqw; font-weight: 600; } .oc-done strong { font-size: 4.8cqw; font-family: var(--font-ui); font-weight: 800; }
.ov-stats small { font-weight: 700; color: #5a3a46; } .ov-stats b { font-family: var(--font-ui); font-weight: 800; }
.ov-btns .btn, .ov-btns .btn.primary { box-shadow: none !important; background-color: transparent !important; }
.ov-btns .btn.focus, .ov-btns .btn:focus-visible { outline: 3px solid #1f7bff; outline-offset: 3px; border-radius: 30px; }
.ov-stats div { padding-left: 38%; } .ov-stats small { font-size: 6.4cqw; white-space: nowrap; } .ov-stats b { font-size: 12.5cqw; }
.oc-pill { font-size: 4.6cqw; } .oc-num { font-size: 4.6cqw; }
.oc-done > div { font-size: 3.7cqw; } .oc-done strong { font-size: 5.2cqw; }
.oc-done .medal { width: 13%; left: 1%; top: -8%; transform: none; }
/* ---- tuning 2: non-record ribbon colour, button art in every state, fixed label sizes ---- */
.over:not(.record) .ov-banner h2 { filter: hue-rotate(-68deg) saturate(.85) brightness(1.1); font-size: 38px; white-space: nowrap; padding-inline: 44px; }
.ov-btns .ov-retry, .ov-btns .ov-retry.focus, .ov-btns .ov-retry:hover { background-image: url(../assets/results/ui_retry.png) !important; background-size: 100% 100% !important; }
.ov-btns .ov-outfits, .ov-btns .ov-outfits.focus, .ov-btns .ov-outfits:hover { background-image: url(../assets/results/ui_outfits.png) !important; background-size: 100% 100% !important; }
.ov-btns .ov-revive, .ov-btns .ov-revive.focus, .ov-btns .ov-revive:hover { background-image: url(../assets/results/ui_revive.png) !important; background-size: 100% 100% !important; }
.ov-btns .ov-retry .lbl { font-size: 38px; } .ov-btns .ov-outfits .lbl { font-size: 21px; } .ov-btns .ov-revive b { font-size: 21px; } .ov-btns .ov-revive small { font-size: 13px; }
.ov-btns.solo .ov-outfits { width: min(60%, 260px); justify-self: center; }
@media (max-width: 430px) { .ov-btns .ov-retry .lbl { font-size: 28px; } .ov-btns .ov-outfits .lbl { font-size: 16px; } .ov-btns .ov-revive b { font-size: 16px; } .ov-btns .ov-revive small { font-size: 11px; } .over:not(.record) .ov-banner h2 { font-size: 30px; padding-inline: 34px; } }
/* ================= the mix: your PNG illustrations (crown, planet, sparkles, coins, medal, chest, host, clouds, marks) on CSS-built frames with real padding and flowing text ================= */
.ov-banner h2, .over.record .ov-banner h2, .over:not(.record) .ov-banner h2 { background: url(../assets/results/ribbon.svg) center / 100% 100% no-repeat; filter: none; padding: 26px clamp(36px, 11vw, 60px) 38px; font-size: clamp(30px, 8.4vw, 46px); line-height: 1.12; text-wrap: balance; white-space: normal; }
.over:not(.record) .ov-banner h2 { filter: hue-rotate(-68deg) saturate(.85) brightness(1.1); font-size: clamp(28px, 7.4vw, 40px); }
.ov-top { min-height: 168px; }
.ov-top .burst { background: #ffd23f !important; clip-path: polygon(100.0% 50.0%,87.3% 55.9%,96.2% 65.3%,81.6% 66.9%,85.4% 78.3%,71.1% 75.3%,69.1% 87.0%,57.4% 79.8%,50.0% 90.0%,42.6% 79.8%,30.9% 87.0%,28.9% 75.3%,14.6% 78.3%,18.4% 66.9%,3.8% 65.3%,12.7% 55.9%,0.0% 50.0%,12.7% 44.1%,3.8% 34.7%,18.4% 33.1%,14.6% 21.7%,28.9% 24.7%,30.9% 13.0%,42.6% 20.2%,50.0% 10.0%,57.4% 20.2%,69.1% 13.0%,71.1% 24.7%,85.4% 21.7%,81.6% 33.1%,96.2% 34.7%,87.3% 44.1%); width: 270px; height: 150px; top: 50%; }
.ov-top .big-score small { margin-bottom: 2px; }
#screen-over .ov-stats { gap: 12px; }
#screen-over .ov-stats div { container-type: normal; aspect-ratio: auto; background: #fffaf0 !important; background-image: none !important; border: 2.5px solid var(--ink); border-radius: 18px 10px 20px 12px; box-shadow: 2px 3px 0 rgba(58, 38, 48, .25); padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
#screen-over .ov-stats svg, #screen-over .ov-stats img { display: block; flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; }
#screen-over .ov-stats small { font-size: 13px; line-height: 1.3; white-space: normal; display: block; } #screen-over .ov-stats b { font-size: 26px; line-height: 1.15; }
#screen-over .over-coins { background: #fffaf0; border: 2.5px solid var(--ink); border-radius: 22px 12px 24px 14px; padding: 16px 16px 14px; box-shadow: 2px 3px 0 rgba(58, 38, 48, .25); margin: 26px 0 14px; }
#screen-over .oc-head { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; aspect-ratio: auto; background: none; container-type: normal; }
#screen-over .oc-head::before { content: ''; flex: 0 0 86px; height: 72px; margin: -34px 0 -8px -6px; background: url(../assets/results/coin_stack.png) center / contain no-repeat; }
#screen-over .oc-head > * { position: static; transform: none; width: auto; }
#screen-over .oc-pill { padding: 8px 20px; font-size: 24px; font-weight: 800; background: #fbd4ba; border: 2.5px solid var(--ink); border-radius: 44px 30px 46px 28px / 30px 40px 28px 44px; box-shadow: 0 3px 0 rgba(58, 38, 48, .2); }
#screen-over .oc-lbl { margin-left: auto; font-size: 14px; font-weight: 700; }
#screen-over .oc-num { padding: 4px 16px; font-size: 22px; background: #ffd23f; border-radius: 20px; }
#screen-over .oc-rows { background: none; border: 0; padding: 0; margin-top: 14px; }
#screen-over .oc-rows span { flex: 1 1 30%; padding: 4px 6px; font-size: 14px; line-height: 1.35; }
#screen-over .oc-done { aspect-ratio: auto; container-type: normal; background: #ffe58a; border-radius: 16px; padding: 12px 14px 12px 76px; min-height: 64px; margin-top: 14px; display: block; text-align: left; }
#screen-over .oc-done > div { position: static; display: block; font-size: 15px; line-height: 1.45; }
#screen-over .oc-done strong { display: block; font-size: 19px; line-height: 1.3; margin-bottom: 2px; }
#screen-over .oc-done .medal { left: 12px; top: 50%; transform: translateY(-50%); width: 50px; height: 60px; aspect-ratio: auto; }
#over-btns { grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
#over-btns .btn { container-type: normal; aspect-ratio: auto; width: 100%; min-height: 64px; padding: 10px 18px; display: flex; align-items: center; justify-content: center; gap: 12px; background-image: none !important; background-size: auto !important; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 5px 0 rgba(58, 38, 48, .9) !important; }
#over-btns .ov-retry { background-color: #ffd23f !important; background-image: linear-gradient(#ffe88f, #ffc619) !important; min-height: 76px; width: 100%; grid-column: 1 / -1; box-shadow: 0 6px 0 #7a4a10 !important; }
#over-btns .ov-outfits { background-color: #fffaf0 !important; } #over-btns .ov-revive { background-color: #fbd4ba !important; }
#over-btns.solo .ov-outfits { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
#over-btns .ov-menu { grid-column: 1 / -1; min-height: 52px; background-color: #fffaf0 !important; border-radius: 999px; }
#over-btns .btn svg { display: block; flex: 0 0 30px; width: 30px; height: 30px; } #over-btns .ov-retry svg { flex-basis: 36px; width: 36px; height: 36px; }
#over-btns .pinky img { display: block; flex: 0 0 44px; width: 44px; height: 38px; margin: 0; }
#over-btns .ov-retry .lbl { font-size: 32px; } #over-btns .ov-outfits .lbl { font-size: 21px; } #over-btns .ov-revive b { font-size: 20px; } #over-btns .ov-revive small { font-size: 13px; }
#over-btns .btn .lbl { white-space: normal; line-height: 1.2; text-align: left; }
@media (max-width: 430px) { #over-btns .ov-retry .lbl { font-size: 28px; } #over-btns .ov-outfits .lbl, #over-btns .ov-revive b { font-size: 17px; } #over-btns .ov-revive small { font-size: 12px; } #screen-over .ov-stats b { font-size: 22px; } #screen-over .oc-pill { font-size: 20px; } #over-btns .btn { padding: 8px 12px; gap: 8px; } }
#screen-over .oc-done .medal { top: calc(50% - 30px); transform: none; }
/* ================= progress dashboard: fun stat cards ================= */
.pg-hero { grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 20px 24px; padding: 18px 20px; }
.pg-hero .pg-cont { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; max-width: none; }
.pg-hero .pg-cont .btn { flex: 1 1 260px; } .pg-hero .pg-sync { flex: 1 1 220px; }
.pg-ringwrap { display: grid; justify-items: center; gap: 10px; align-self: center; }
.pg-ring { width: 150px; height: 150px; filter: drop-shadow(0 6px 0 rgba(58, 38, 48, 0.12)); }
.pg-ring svg { width: 150px; height: 150px; } .pg-ring circle { stroke-width: 13; }
.pg-ring .trk { stroke: #f2dfc6; } .pg-ring .val { stroke: url(#pgg) !important; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1); }
.pg-ring b { font: 800 38px var(--font-ui); margin-top: -10px; color: var(--burgundy); } .pg-ring small { bottom: 36px; font-size: 12px; font-weight: 700; opacity: 1; }
.pg-cheer { margin: 0; text-align: center; font-weight: 700; font-size: 14px; line-height: 1.4; color: #a85638; max-width: 190px; text-wrap: balance; }
.pg-stats { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; align-content: start; }
.st { --c: #ffc619; position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 14px 14px; background: #fffaf0; border: 2.5px solid var(--ink); border-radius: 18px 10px 20px 12px; box-shadow: 3px 4px 0 rgba(58, 38, 48, 0.22); overflow: hidden; animation: stIn 0.5s cubic-bezier(.2, 1.6, .4, 1) both; transition: transform 0.18s; }
.st::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c); }
.st:hover { transform: translateY(-3px) rotate(-0.8deg); }
@keyframes stIn { from { transform: scale(.6) translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.st-ic { width: 46px; height: 46px; display: block; margin-left: 6px; } .st-ic svg { width: 100%; height: 100%; display: block; }
.st:hover .st-ic { animation: stHop .6s ease; } @keyframes stHop { 30% { transform: translateY(-7px) rotate(-10deg); } 60% { transform: translateY(0) rotate(6deg); } }
.st-t { min-width: 0; display: grid; gap: 2px; } .pg-stats .st small { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #5a3a46; }
.pg-stats .st b { display: block; font: 800 24px/1.15 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.st-bar { grid-column: 1 / -1; display: block; height: 10px; margin-top: 4px; border: 2px solid var(--ink); border-radius: 99px; background: #f2dfc6; overflow: hidden; }
.st-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--c) repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.st-rank { grid-column: 1 / -1; background: linear-gradient(135deg, #fff3c9, #fde9db); padding-bottom: 16px; }
.st-rank .st-ic { width: 58px; height: 58px; } .st-rank { grid-template-columns: 62px minmax(0, 1fr); }
.pg-stats .st-rank b { font-size: 30px; color: var(--burgundy); } .pg-stats .st-rank .st-sub { font-size: 13px; font-weight: 600; }
@media (max-width: 760px) { .pg-hero { grid-template-columns: 1fr; justify-items: stretch; padding: 16px 14px; } .pg-ringwrap { justify-self: center; } .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pg-hero .pg-cont { text-align: left; } }
@media (max-width: 400px) { .pg-stats { grid-template-columns: minmax(0, 1fr); } .st-ic { width: 40px; height: 40px; } .st { grid-template-columns: 40px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .st, .st:hover .st-ic { animation: none; } .st-bar i, .pg-ring .val { transition: none; } }
/* ---- profile card ---- */
.pf-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; margin-top: 8px; background: linear-gradient(135deg, #fff3c9, #fdede2); }
.pf-av { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: #f8ba91; font: 800 26px var(--font-ui); font-style: normal; color: var(--burgundy); box-shadow: 0 4px 0 rgba(58, 38, 48, 0.25); }
.pf-av.ghost { background: #fffaf0; color: #8a6a76; border-style: solid; }
.pf-t { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; } .pf-t b { font: 800 20px/1.25 var(--font-ui); color: var(--burgundy); } .pf-t small { font-size: 14px; font-weight: 600; line-height: 1.45; color: #4a2f3a; }
.pf-b { display: flex; flex-wrap: wrap; gap: 10px; } .pf-b .btn { flex: 1 1 auto; }
.pf-l { display: block; text-align: left; margin: 10px 0 4px; font-weight: 700; font-size: 14px; }
@media (max-width: 520px) { .pf-card { padding: 14px; } .pf-b { width: 100%; } .pf-b .btn { flex: 1 1 140px; } }
/* ================= touch controls v2: colour-coded chunky buttons, label pills sitting below (never touching the icon), squish + ripple on press ================= */
.tz { bottom: calc(30px + var(--sab) + var(--tv)); gap: 18px; }
.tbtn { --a: #a8ecf5; --b: #4fc3e0; border: 4px solid var(--ink); background: linear-gradient(160deg, var(--a), var(--b)); box-shadow: 0 6px 0 rgba(58, 38, 48, 0.92), 0 10px 14px rgba(58, 38, 48, 0.18); opacity: 0.94; transition: transform 0.12s, box-shadow 0.12s, filter 0.12s; -webkit-tap-highlight-color: transparent; }
.tbtn.big { --a: #ffe88f; --b: #ffa726; background: linear-gradient(160deg, var(--a), var(--b)); animation: tJumpPulse 2.6s ease-in-out infinite; }
.tbtn.t-slide { --a: #e6d2ff; --b: #a47be8; }
.tbtn::before { content: ''; position: absolute; left: 16%; top: 9%; width: 42%; height: 26%; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transform: rotate(-24deg); pointer-events: none; }
.tbtn svg { position: relative; width: 52%; stroke-width: 5.5; margin-top: -2px; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.45)); }
.tbtn svg .acc { stroke: #fff; stroke-width: 3.4; opacity: 0.95; filter: none; }
.tbtn small { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); padding: 1px 11px 2px; background: #fff7e8; border: 2.5px solid var(--ink); border-radius: 99px; font: 800 12px/1.35 var(--font-ui); letter-spacing: 0.02em; color: var(--ink); opacity: 1; box-shadow: 0 2px 0 rgba(58, 38, 48, 0.35); white-space: nowrap; pointer-events: none; }
.tbtn.big small { font-size: 13px; padding-inline: 14px; bottom: -16px; }
.tbtn::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 4px solid #fff; opacity: 0; pointer-events: none; }
.tbtn.down { transform: translateY(5px) scale(0.95); box-shadow: 0 1px 0 rgba(58, 38, 48, 0.92); filter: brightness(1.08) saturate(1.1); background: linear-gradient(160deg, var(--a), var(--b)); }
.tbtn.down::after { animation: tRing 0.4s ease-out; }
@keyframes tRing { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.45); opacity: 0; } }
@keyframes tJumpPulse { 0%, 100% { box-shadow: 0 6px 0 rgba(58, 38, 48, 0.92), 0 0 0 0 rgba(255, 183, 28, 0.55); } 50% { box-shadow: 0 6px 0 rgba(58, 38, 48, 0.92), 0 0 0 12px rgba(255, 183, 28, 0); } }
#touch.fadehint .tbtn { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .tbtn.big, .tbtn.down::after { animation: none; } }
@media (max-width: 400px) { .tz { gap: 12px; } .tbtn small { font-size: 11px; padding-inline: 9px; } }
/* ================= outfits: responsive preview (always visible), scrolling pose chips, landscape-phone layout ================= */
.of-stage canvas { width: auto; max-width: 100%; height: clamp(180px, 34vh, 400px); aspect-ratio: 340 / 400; }
.of-pose { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 8px; padding: 2px 4px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.of-pose::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
.of-left { align-items: stretch; gap: 10px; }
.of-stage { flex: 1 1 44%; max-width: none; min-width: 150px; } .of-stage canvas { height: clamp(170px, 30vh, 280px); }
.of-info { flex: 1 1 48%; min-width: 150px; align-self: stretch; display: grid; align-content: center; justify-items: center; gap: 6px; }
.of-top { gap: 10px; } .of-title { font-size: clamp(30px, 9vw, 44px); } .of-pose { flex: 1 1 100%; }
}
@media (max-width: 420px) { .of-stage, .of-info { flex-basis: 100%; } .of-stage canvas { height: clamp(160px, 27vh, 240px); } }
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
.of-main { grid-template-columns: minmax(230px, 290px) 1fr; gap: 12px; }
.of-left { position: sticky; top: 4px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-height: calc(100vh - 8px); overflow-y: auto; scrollbar-width: none; align-self: start; }
.of-left::-webkit-scrollbar { display: none; }
.of-stage { flex: none; max-width: none; min-width: 0; padding: 4px 4px 2px; } .of-stage canvas { height: min(38vh, 180px); }
.of-pose { flex: none; } .of-info { flex: none; padding: 8px 10px; display: block; } .of-info p { margin: 4px 0 6px; font-size: 13px; line-height: 1.4; } .of-info h3 { font-size: 20px; }
.of-top { gap: 8px; } .of-title { font-size: 30px; } .of-back { width: 42px; height: 42px; } .of-cats { margin: 6px 0; }
}.of-main, .of-left, .of-pose, .of-stage, .of-info, .of-grid, .of-wrap { min-width: 0; max-width: 100%; }
@media (max-width: 760px) { .of-main { grid-template-columns: minmax(0, 1fr); } .of-left > * { min-width: 0; } .of-stage, .of-info { min-width: min(150px, 100%); } }
.menu-ui .tag { max-width: min(34ch, 100%); margin-inline: auto; text-wrap: balance; line-height: 1.45; }
/* ================= Lanky's Great Escape: the storybook ================= */
.story-btn { position: relative; display: flex !important; align-items: center; justify-content: center; gap: 14px; width: 100%; margin-top: var(--sp-3, 12px); padding: 12px 20px !important; min-height: 68px; text-align: left; border-radius: 26px !important; background: linear-gradient(135deg, #fff3c9, #fce5d6) !important; font-family: var(--font-ui); box-shadow: 0 5px 0 rgba(58, 38, 48, 0.9) !important; overflow: visible; }
.story-btn:hover, .story-btn.focus { background: linear-gradient(135deg, #fff8dc, #fbdbc6) !important; transform: translateY(-3px) rotate(-0.6deg) !important; }
.story-btn .sb-ic { width: 52px; height: 42px; flex: none; transform-origin: 50% 80%; animation: sbRock 3.2s ease-in-out infinite; }
.story-btn .sb-r { transform-origin: 28px 8px; animation: sbFlip 3.2s ease-in-out infinite; }
.story-btn .sb-s { animation: twinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.story-btn .sb-t { display: grid; gap: 2px; } .story-btn .sb-t b { font: 800 clamp(17px, 4.8vw, 21px)/1.2 var(--font-ui); color: var(--burgundy); } .story-btn .sb-t small { font: 600 13px/1.3 var(--font-ui); color: #5a3a46; margin: 0; opacity: 1; }
.story-btn .sb-sp { position: absolute; width: 16px; height: 16px; background: #ffc619; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.7s ease-in-out infinite; pointer-events: none; }
.story-btn .sb-sp.s1 { right: 16px; top: -7px; } .story-btn .sb-sp.s2 { left: 10px; bottom: -6px; width: 12px; height: 12px; animation-delay: .8s; background: #f4985a; }
@keyframes sbRock { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-2px); } }
@keyframes sbFlip { 0%, 60%, 100% { transform: scaleX(1); } 75% { transform: scaleX(0.35) skewY(-6deg); } 88% { transform: scaleX(1); } }
#screen-story { background: radial-gradient(120% 90% at 50% 20%, #844630 0%, #5c1a3a 55%, #3a0f26 100%); }
.bk { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: calc(10px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal)); }
.bk-bar { flex: none; display: flex; align-items: center; gap: 8px; color: #fff3de; }
.bk-ttl { flex: 1; min-width: 0; text-align: center; font: 800 clamp(14px, 3.6vw, 18px)/1.3 var(--font-ui); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-tools { display: flex; gap: 8px; }
.bk-btn, .bk-nb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 14px; font: 800 14px/1.2 var(--font-ui); color: var(--ink); background: #fff3de; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); cursor: pointer; transition: transform 0.12s; touch-action: manipulation; }
.bk-btn:hover, .bk-nb:hover, .bk-btn:focus-visible, .bk-nb:focus-visible { transform: translateY(-2px); background: #fff; color: var(--ink); } .bk-btn:active, .bk-nb:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
.bk-btn.ico { padding: 6px 10px; } .bk-btn.off { background: #d9c2cc; } .bk-btn.off .sw { display: none; }
.bk-nb { min-height: 52px; padding: 8px 22px; font-size: 17px; } .bk-nb.primary { background: #ffd23f; } .bk-nb[disabled] { opacity: 0.4; pointer-events: none; }
.bk-snd { position: absolute; z-index: 20; top: calc(58px + var(--sat)); right: calc(12px + var(--sar)); width: min(340px, calc(100% - 24px)); padding: 14px 16px; background: #fff3de; border: 3px solid var(--ink); border-radius: 20px 10px 22px 12px; box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.35); display: grid; gap: 10px; color: var(--ink); }
.bk-snd[hidden], .bk-cover[hidden], .bk-endbtns[hidden] { display: none; }
.bk-sr { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bk-sr label { font: 700 15px/1.3 var(--font-ui); } .bk-sr input[type=range] { flex: 1; max-width: 160px; accent-color: #f4985a; }
.bk-tg { min-width: 64px; padding: 4px 14px; font: 800 14px var(--font-ui); background: #e7d6dc; border: 2.5px solid var(--ink); border-radius: 99px; color: var(--ink); cursor: pointer; } .bk-tg.on { background: #52c7b8; }
.bk-note { margin: 0; font: 600 13px/1.45 var(--font-ui); color: #7a1f3d; }
.bk-book { position: relative; flex: 1 1 auto; min-height: 0; display: flex; perspective: 2200px; }
.bk-spread { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); background: #fdf0dc; border: 4px solid var(--ink); border-radius: 12px 26px 26px 12px; box-shadow: 0 10px 0 rgba(0, 0, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.35); overflow: hidden; }
.bk-spread::before { content: ''; position: absolute; inset: 8px; border: 2px solid rgba(255, 79, 168, 0.5); border-radius: 8px 20px 20px 8px; pointer-events: none; z-index: 2; }
.bk-page { position: relative; min-width: 0; min-height: 0; }
.bk-art { padding: 18px 10px 18px 18px; background: linear-gradient(90deg, #fdf0dc, #f7e3c8); }
.bk-frame { position: relative; width: 100%; height: 100%; border: 3.5px solid var(--ink); border-radius: 18px 10px 20px 12px; overflow: hidden; background: #fdecda; box-shadow: 4px 5px 0 rgba(58, 38, 48, 0.28); }
.bk-frame canvas { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; touch-action: manipulation; }
.bk-txt { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 26px 30px 26px 26px; background: linear-gradient(90deg, #f3dcc0 0, #fdf0dc 14%); overflow: auto; }
.bk-pn { position: absolute; right: 18px; bottom: 16px; width: 46px; height: 46px; display: grid; place-items: center; font: 800 20px var(--font-ui); color: var(--burgundy); background: #ffd23f; border: 3px solid var(--ink); border-radius: 50% 42% 50% 44%; transform: rotate(-6deg); box-shadow: 2px 3px 0 rgba(58, 38, 48, 0.3); }
.bk-txt h3 { margin: 0; font: 800 clamp(22px, 3.2vw, 32px)/1.2 var(--font-ui); color: var(--burgundy); text-shadow: 2px 2px 0 #fbdbc6; }
.bk-p { margin: 0; font: 400 clamp(17px, 2.2vw, 22px)/1.75 var(--font); color: var(--ink); }
.bk-p .para { display: block; margin-bottom: 0.7em; } .bk-p .w { color: #6a4a56; transition: color 0.2s, background-color 0.2s; border-radius: 6px; padding: 0 1px; } .bk-p .w.on { color: var(--ink); } .bk-p .w.cur { background: rgba(255, 210, 63, 0.7); }
.bk-p .endq { font-size: clamp(19px, 2.6vw, 25px); color: var(--burgundy); }
.bk-endbtns { display: grid; gap: 12px; margin-top: 4px; } .bk-go { min-height: 62px; font: 800 clamp(17px, 2.6vw, 22px) var(--font-ui) !important; border-radius: 999px !important; } .bk-row2 { display: flex; gap: 10px; flex-wrap: wrap; } .bk-row2 .btn { flex: 1 1 140px; border-radius: 999px !important; font-family: var(--font-ui); font-weight: 800; }
.bk-cover { position: absolute; inset: 0; z-index: 3; display: grid; justify-items: center; align-content: start; padding: clamp(18px, 5vh, 46px) 20px 0; text-align: center; pointer-events: none; }
.bk-cover > * { pointer-events: auto; }
.bk-bigt { margin: 0; display: grid; gap: 0; font: 900 clamp(40px, 9vw, 96px)/0.95 var(--font-ui); font-style: italic; color: var(--burgundy); letter-spacing: -0.01em; text-shadow: 4px 4px 0 #fbdbc6, 7px 8px 0 rgba(255, 255, 255, 0.5); transform: rotate(-3deg); animation: coverBob 4s ease-in-out infinite; }
.bk-bigt span:last-child { color: #e0602f; text-shadow: 4px 4px 0 #fff2a8, 7px 8px 0 rgba(122, 31, 61, 0.25); }
.bk-sub { margin: 14px 0 0; padding: 6px 18px; font: 700 clamp(14px, 2.4vw, 20px)/1.4 var(--font-ui); color: var(--ink); background: rgba(255, 247, 232, 0.88); border: 2.5px solid var(--ink); border-radius: 999px; }
.bk-start { position: absolute; bottom: clamp(18px, 5vh, 36px); left: 50%; transform: translateX(-50%); min-height: 66px; padding: 10px 40px !important; font: 800 clamp(20px, 3.6vw, 26px) var(--font-ui) !important; border-radius: 999px !important; animation: startPulse 2s ease-in-out infinite; white-space: nowrap; }
@keyframes coverBob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-6px); } }
@keyframes startPulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }
.bk-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-dots { display: flex; gap: 7px; } .bk-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid #fff3de; background: transparent; } .bk-dots i.done { background: rgba(255, 243, 222, 0.55); } .bk-dots i.on { background: #ffd23f; border-color: #ffd23f; transform: scale(1.3); }
.story.is-cover .bk-txt, .story.is-cover .bk-nav { display: none; } .story.is-cover .bk-spread { grid-template-columns: minmax(0, 1fr); } .story.is-cover .bk-art { padding: 18px; }
.story.is-end .bk-pn { background: #f8ba91; }
.bk-leaf { position: absolute; inset: 0; z-index: 8; pointer-events: none; transform-origin: left center; backface-visibility: hidden; border-radius: 12px 26px 26px 12px; overflow: hidden; box-shadow: 14px 0 30px rgba(0, 0, 0, 0.4); }
.bk-leaf .bk-spread { position: absolute; inset: 0; box-shadow: none; }
.bk-leaf.fwd { animation: leafFwd 0.85s cubic-bezier(0.55, 0.05, 0.3, 1) forwards; } .bk-leaf.back { transform-origin: right center; animation: leafBack 0.85s cubic-bezier(0.55, 0.05, 0.3, 1) forwards; }
.bk-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(58, 38, 48, 0.0), rgba(58, 38, 48, 0.35)); opacity: 0; animation: shadeIn 0.85s ease-in forwards; }
.bk-leaf.back .bk-shade { background: linear-gradient(270deg, rgba(58, 38, 48, 0), rgba(58, 38, 48, 0.35)); }
@keyframes leafFwd { 0% { transform: rotateY(0) skewY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotateY(-118deg) skewY(-2deg); opacity: 0; } }
@keyframes leafBack { 0% { transform: rotateY(0) skewY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotateY(118deg) skewY(2deg); opacity: 0; } }
@keyframes shadeIn { to { opacity: 1; } }
.bk-book.fadeSwap .bk-spread { animation: fadeSwap 0.38s ease; } @keyframes fadeSwap { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 820px), (max-aspect-ratio: 1/1) {
.bk-spread { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: 14px; }
.bk-spread::before { border-radius: 10px; }
.bk-art { padding: 14px 14px 6px; background: #fdf0dc; } .bk-txt { padding: 10px 18px 16px; gap: 8px; justify-content: flex-start; background: #fdf0dc; }
.bk-p { font-size: clamp(16px, 4.4vw, 19px); line-height: 1.65; } .bk-txt h3 { font-size: clamp(20px, 5.6vw, 26px); } .bk-pn { right: 14px; bottom: 12px; width: 40px; height: 40px; font-size: 17px; }
.bk-nb { padding: 8px 16px; font-size: 16px; } .bk-nb span { display: inline; } .bk-dots { gap: 5px; } .bk-dots i { width: 10px; height: 10px; }
.bk-bar .bk-btn span, .bk-bar .bk-btn b { font-size: 13px; } .bk-ttl { display: none; }
.bk-bar { justify-content: space-between; } .bk-tools { margin-left: auto; }
}
@media (max-width: 420px) { .bk-btn { padding: 6px 10px; } .bk-tools { gap: 6px; } .bk-nb { padding: 8px 12px; } }
@media (max-height: 520px) and (min-aspect-ratio: 5/4) { .bk-txt { padding: 10px 20px; gap: 6px; } .bk-p { font-size: 15px; line-height: 1.5; } .bk-txt h3 { font-size: 19px; } .bk-nb { min-height: 42px; } .bk-bk-btn { min-height: 34px; } .bk-bigt { font-size: clamp(30px, 8vh, 56px); } .bk-start { min-height: 50px; bottom: 12px; } .bk-pn { display: none; } }
@media (prefers-reduced-motion: reduce) { .story-btn .sb-ic, .story-btn .sb-r, .story-btn .sb-s, .story-btn .sb-sp, .bk-bigt, .bk-start { animation: none; } }
.bk-btn svg, .bk-nb svg { flex: none; width: 18px; height: 18px; display: block; } .bk-nb svg { width: 20px; height: 20px; }
/* ---- main menu: keep every button (incl. Lanky's Great Escape) visible, tappable and clear of the stats card ---- */
.menu-ui { padding: 6px 6px 4px; scrollbar-width: thin; overscroll-behavior: contain; } .menu-ui::-webkit-scrollbar { width: 10px; } .menu-ui::-webkit-scrollbar-track { margin: 4px; }
.menu-ui, .menu-buttons { pointer-events: auto; } .menu-stats { pointer-events: none; } .menu-stats * { pointer-events: none; }
.story-btn { z-index: 5; position: relative; }
@media (max-height: 820px) { .menu-ui .logo { width: min(440px, 33vw, 26vh); } .story-btn { min-height: 58px; padding-block: 8px !important; } .btn.tile { min-height: 66px !important; } .pill-main { min-height: 62px !important; } .menu-ui .tag { margin-bottom: 8px; } }
@media (max-width: 760px) and (max-height: 720px) { .menu-ui { top: calc(50px + var(--sat)); } .menu-ui .logo { width: min(52vw, 220px, 17vh); } .menu-ui .tag { font-size: 13px; line-height: 1.35; margin-bottom: 6px; } .pill-main { min-height: 54px !important; } .pill-main .pm-t { font-size: 24px; } .pill-new { min-height: 46px; } .btn.tile { min-height: 58px !important; padding-block: 4px !important; } .btn.tile svg { width: 24px; height: 24px; } .story-btn { min-height: 52px; } .story-btn .sb-ic { width: 40px; height: 32px; } .story-btn .sb-t small { display: none; } .menu-buttons { gap: 8px; } .menu-stats { padding: 8px 12px; gap: 4px 0; } .ms .msi svg { width: 22px; height: 22px; } .ms b { font-size: 14px; } }
@media (max-height: 560px) and (min-aspect-ratio: 1/1) { .menu-ui .logo { width: min(260px, 22vw, 20vh); } .story-btn { min-height: 48px; } .story-btn .sb-t small { display: none; } .story-btn .sb-ic { width: 36px; height: 30px; } .menu-buttons { gap: 6px; } .btn.tile { min-height: 52px !important; } .pill-main { min-height: 50px !important; } .pill-new { min-height: 42px; } }
/* ---- menu stats: the supplied badges + Lanky running ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ms-hsb { height: clamp(46px, 7vh, 66px); width: auto; display: block; transform: rotate(-4deg); filter: drop-shadow(0 2px 0 rgba(58, 38, 48, 0.2)); }
.runner { width: 52px; height: 52px; display: block; }
.ms-planet { width: 54px; height: auto; display: block; animation: sbRock 4s ease-in-out infinite; }
.ms-suit { height: 52px; width: auto; display: block; filter: drop-shadow(0 2px 0 rgba(58, 38, 48, 0.2)); }
.ms-nub { display: block; height: 30px; width: auto; max-width: 100%; margin-bottom: 4px; }
.ms-next small.nu { display: none; }
@media (max-width: 760px) { .ms-hsb { height: 40px; } .runner { width: 40px; height: 40px; } .ms-planet { width: 42px; } .ms-suit { height: 42px; } .ms-nub { height: 24px; } }
/* ================= progress screen v3: back button, journey trail, fun Continue, tight bottom ================= */
.pg-top { gap: 12px; } .pg-top h2 { flex: 1; margin: 0; }
.pg-back { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--brown); color: var(--cream); border: 3px solid var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 rgba(58, 38, 48, 0.4); transition: transform 0.12s; } .pg-back:hover, .pg-back.focus { background: #7a5236; transform: translateX(-2px); }
#screen-progress .panel-inner.pg { width: min(1040px, 100%); margin: 0 auto; padding-bottom: calc(18px + var(--sab)); min-height: 0; height: auto; max-height: none; }
#screen-progress { align-items: flex-start; }
.pg-hero { display: grid; grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.05fr); gap: 20px 26px; align-items: start; padding: 18px 20px; }
.pg-trailwrap { display: grid; gap: 8px; align-self: center; }
.pg-trail { position: relative; width: 100%; aspect-ratio: 600 / 190; }
.pg-trail svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tr-bg { fill: none; stroke: #e9cfae; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 2 18; } .tr-fg { fill: none; stroke: url(#trg); stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray 1.4s cubic-bezier(.3, .7, .2, 1); filter: drop-shadow(0 3px 0 rgba(58, 38, 48, 0.18)); }
.tr-n { animation: trPop 0.6s cubic-bezier(.2, 1.6, .4, 1) both; } .tr-n image { filter: drop-shadow(0 3px 0 rgba(58, 38, 48, 0.25)); }
.tr-ring { fill: rgba(255, 250, 240, 0.9); stroke: #3a2630; stroke-width: 3; } .tr-n.lock { opacity: 0.55; } .tr-n.lock image { filter: grayscale(1) brightness(1.05); } .tr-n.done .tr-ring { stroke: #52c7b8; } .tr-n.cur .tr-ring { stroke: #f4985a; stroke-width: 4; animation: trPulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.tr-lb { font: 800 14px var(--font-ui); fill: #5a3a46; } .tr-flag { transform-origin: 566px 112px; animation: sbRock 3s ease-in-out infinite; }
@keyframes trPop { from { transform: scale(0.2); opacity: 0; } to { opacity: 1; } } @keyframes trPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.tr-runner { position: absolute; width: 15%; height: auto; aspect-ratio: 1; transform: translate(-50%, -86%); z-index: 2; transition: left 1.4s cubic-bezier(.3, .7, .2, 1), top 1.4s cubic-bezier(.3, .7, .2, 1); pointer-events: none; filter: drop-shadow(0 4px 0 rgba(58, 38, 48, 0.18)); }
.tr-you { position: absolute; z-index: 3; transform: translate(-50%, -178%); padding: 3px 12px; font: 800 12px/1.4 var(--font-ui); color: var(--burgundy); background: #fff3de; border: 2.5px solid var(--ink); border-radius: 99px; white-space: nowrap; box-shadow: 0 3px 0 rgba(58, 38, 48, 0.25); pointer-events: none; transition: left 1.4s cubic-bezier(.3, .7, .2, 1), top 1.4s cubic-bezier(.3, .7, .2, 1); animation: sbRock 2.4s ease-in-out infinite; }
.tr-you::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; background: #fff3de; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.pg-trailtxt { display: grid; justify-items: center; text-align: center; gap: 2px; } .pg-trailtxt b { font: 900 clamp(38px, 6vw, 56px)/1 var(--font-ui); color: var(--burgundy); text-shadow: 3px 3px 0 #fbdbc6; font-variant-numeric: tabular-nums; } .pg-trailtxt span { font: 700 15px/1.4 var(--font-ui); color: #5a3a46; }
.pg-cheer { margin: 6px 0 0; font: 800 15px/1.4 var(--font-ui); color: #a85638; text-wrap: balance; }
.pg-stats { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.st-ic img, .st-ic canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.st-hs { grid-template-columns: 96px minmax(0, 1fr); } .st-hs .st-ic { width: 92px; height: 72px; margin-left: 2px; transform: rotate(-4deg); } .st-hs .st-t small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .st-hs .st-t b { font-size: 28px; }
.st .st-ic { transition: transform 0.2s; }
.pg-go { display: grid; justify-items: center; gap: 10px; margin: 20px 0 6px; }
#pg-continue { position: relative; display: flex; align-items: center; gap: 14px; width: min(100%, 560px); min-height: 84px; padding: 10px 22px 10px 14px; text-align: left; border-radius: 999px; overflow: hidden; border: 4px solid var(--ink); background: linear-gradient(100deg, #ffe27a 0%, #ffc619 45%, #ff9f43 100%); box-shadow: 0 7px 0 #7a4a10, 0 14px 22px rgba(122, 74, 16, 0.25); transition: transform 0.15s, box-shadow 0.15s; }
#pg-continue::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0 14px, transparent 14px 34px); opacity: 0.7; pointer-events: none; }
#pg-continue::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 70px; left: -120px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); transform: skewX(-20deg); animation: pgShine 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes pgShine { 0%, 55% { left: -120px; } 100% { left: 115%; } }
#pg-continue:hover, #pg-continue.focus { transform: translateY(-3px) scale(1.02); background: linear-gradient(100deg, #fff0a0, #ffd23f 45%, #ffae5a 100%); } #pg-continue:active { transform: translateY(4px); box-shadow: 0 2px 0 #7a4a10; }
.pgc-run { position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%; background: #fff3de; border: 3px solid var(--ink); display: grid; place-items: center; overflow: hidden; } .pgc-run .runner { width: 58px; height: 58px; }
.pgc-t { position: relative; flex: 1; min-width: 0; display: grid; gap: 2px; } .pgc-t b { font: 900 clamp(20px, 4.6vw, 28px)/1.15 var(--font-ui); color: var(--burgundy); text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.55); } .pgc-t small { font: 700 14px/1.35 var(--font-ui); color: #5a3a46; opacity: 1; margin: 0; }
.pgc-play { position: relative; flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #f4985a; color: #fff; border: 3px solid var(--ink); animation: pgcWig 1.8s ease-in-out infinite; } @keyframes pgcWig { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12) rotate(-6deg); } }
.pgc-sp { position: absolute; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.6s ease-in-out infinite; } .pgc-sp.s1 { left: 90px; top: 8px; } .pgc-sp.s2 { right: 90px; bottom: 8px; animation-delay: .5s; } .pgc-sp.s3 { right: 18px; top: 10px; width: 10px; height: 10px; animation-delay: 1s; }
.pg-sync { text-align: center; max-width: 560px; font-size: 13px; line-height: 1.5; color: #5a3a46; opacity: 1; }
.panel-actions { margin-top: 18px; }
@media (max-width: 900px) { .pg-hero { grid-template-columns: minmax(0, 1fr); } .pg-trailwrap { max-width: 560px; justify-self: center; width: 100%; } }
@media (max-width: 760px) { #pg-continue { min-height: 76px; border-radius: 40px; } .pgc-run { width: 56px; height: 56px; } .pgc-run .runner { width: 48px; height: 48px; } .pgc-play { width: 40px; height: 40px; } .pgc-sp.s1 { left: 74px; } }
@media (prefers-reduced-motion: reduce) { .tr-fg, .tr-runner, .tr-you { transition: none; } .tr-n, .tr-flag, .tr-you, .pgc-play, #pg-continue::after, .pgc-sp { animation: none; } }
/* ---- Lanky's Great Escape button v2: a little storybook scene ---- */
.story-btn { overflow: hidden !important; padding: 10px 16px 10px 12px !important; gap: 12px !important; background: linear-gradient(105deg, #fff3c9 0%, #fde9db 55%, #fbdbc6 100%) !important; border: 3.5px solid var(--ink) !important; }
.story-btn::before { content: ''; position: absolute; inset: 5px; border: 2px solid rgba(255, 79, 168, 0.55); border-radius: 22px; pointer-events: none; }
.story-btn::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 60px; left: -100px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-20deg); animation: pgShine 3.8s 1s ease-in-out infinite; pointer-events: none; }
.sb-art { position: relative; flex: none; width: 66px; height: 54px; }
.sb-art .sb-ic { position: absolute; left: 4px; bottom: 0; width: 58px; height: 36px; animation: none; transform: none; z-index: 2; }
.sb-art .sb-lanky { position: absolute; left: 12px; bottom: 10px; width: 46px; height: 46px; z-index: 1; animation: sbPeek 2.6s ease-in-out infinite; filter: drop-shadow(0 2px 0 rgba(58, 38, 48, 0.2)); }
@keyframes sbPeek { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
.story-btn .sb-r { transform-origin: 28px 8px; animation: sbFlip 2.8s ease-in-out infinite; }
.story-btn .sb-t { position: relative; flex: 1; min-width: 0; } .story-btn .sb-t b { font-size: clamp(17px, 4.8vw, 21px); text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.6); }
.sb-go { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #f4985a; color: #fff; border: 3px solid var(--ink); animation: pgcWig 1.8s ease-in-out infinite; }
.sb-new { position: absolute; top: 6px; right: 58px; transform: rotate(8deg); padding: 0 8px; font: 900 11px/1.5 var(--font-ui); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: #e0602f; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 1px 2px 0 rgba(58, 38, 48, 0.4); animation: sbRock 2s ease-in-out infinite; pointer-events: none; }
.story-btn:hover .sb-lanky, .story-btn.focus .sb-lanky { animation-duration: 0.9s; }
@media (max-width: 760px) { .sb-art { width: 58px; } .sb-art .sb-ic { width: 52px; height: 32px; } .sb-art .sb-lanky { width: 40px; height: 40px; left: 10px; } .sb-new { right: 52px; top: 4px; } .sb-go { width: 32px; height: 32px; } }
@media (max-width: 760px) and (max-height: 720px) { .story-btn .sb-t small { display: none; } .sb-art { height: 44px; } }
@media (prefers-reduced-motion: reduce) { .story-btn::after, .sb-art .sb-lanky, .story-btn .sb-r, .sb-go, .sb-new { animation: none; } }
/* ---- Lanky's Great Escape: the supplied banner artwork, used as-is (transparent WebP, native aspect ratio) with a glow behind it ---- */
.story-banner { position: relative; display: block; width: min(100%, 560px); margin: var(--sp-3, 12px) 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; z-index: 5; animation: sbnFloat 4.5s ease-in-out infinite; transition: transform 0.18s cubic-bezier(.2, 1.4, .4, 1); }
.menu-buttons .story-banner, .menu-ui .story-banner { align-self: center; }
.sbn-glow { position: absolute; left: -6%; right: -6%; top: -22%; bottom: -22%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 226, 122, 0.95) 0%, rgba(255, 150, 200, 0.7) 42%, rgba(255, 111, 174, 0) 76%); filter: blur(12px); opacity: 0.75; animation: sbnGlow 3.2s ease-in-out infinite; transition: opacity 0.2s; }
.sbn-img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 2000 / 667; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 5px 8px rgba(122, 31, 61, 0.28)); }
.story-banner:hover, .story-banner.focus, .story-banner:focus-visible { transform: translateY(-4px) scale(1.03) rotate(-0.6deg); animation-play-state: paused; outline: none; }
.story-banner:hover .sbn-glow, .story-banner.focus .sbn-glow, .story-banner:focus-visible .sbn-glow { opacity: 1; animation-duration: 1.4s; }
.story-banner.focus .sbn-img, .story-banner:focus-visible .sbn-img { filter: drop-shadow(0 0 0 #1f7bff) drop-shadow(0 0 6px rgba(31, 123, 255, 0.9)) drop-shadow(0 5px 8px rgba(122, 31, 61, 0.28)); }
.story-banner:active { transform: translateY(2px) scale(0.975); }
@keyframes sbnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sbnGlow { 0%, 100% { opacity: 0.6; transform: scale(0.97); } 50% { opacity: 0.95; transform: scale(1.04); } }
.menu-ui { overflow: visible !important; }
@media (prefers-reduced-motion: reduce) { .story-banner, .sbn-glow { animation: none; } }
/* ---- Comet Cape / next-unlock charge indicator: layered, compact, driven by the real charge value (--p) ---- */
.ms-next .nbar { display: none; }
.comet { --p: 0; position: relative; display: flex; align-items: center; gap: 4px; margin-top: 3px; min-height: 22px; }
.cm-cape { flex: none; width: 27px; height: 22px; margin-right: -2px; transform-origin: 90% 20%; animation: cmFlutter 2.4s ease-in-out infinite; filter: drop-shadow(0 1px 0 rgba(58, 38, 48, 0.25)); }
@keyframes cmFlutter { 0%, 100% { transform: rotate(-4deg) skewX(0deg); } 35% { transform: rotate(5deg) skewX(-6deg); } 70% { transform: rotate(-2deg) skewX(4deg); } }
.cm-bar { position: relative; flex: 1; min-width: 0; height: 14px; border: 2px solid #5a1a3a; border-radius: 99px; background: #fff0da; overflow: visible; box-shadow: 0 2px 0 rgba(232, 160, 120, 0.55); }
.cm-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; display: block; border-radius: 99px; overflow: hidden; transition: width 0.9s cubic-bezier(.3, .8, .2, 1); background: linear-gradient(90deg, #f4985a 0%, #f7b487 55%, #ff9a6a 100%); }
.cm-fill::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M0 7 Q10 0 20 7 T40 7' fill='none' stroke='%23ffd9ea' stroke-width='2.4' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") 0 50% / 40px 100% repeat-x; animation: cmWave 1.6s linear infinite; }
.cm-fill::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 38%; background: linear-gradient(90deg, rgba(255, 210, 63, 0), rgba(255, 210, 63, 0.75)); opacity: 0.25; transition: opacity 0.6s; }
@keyframes cmWave { to { background-position-x: -40px; } }
.cm-star { position: absolute; top: 50%; left: calc(var(--p) * (100% - 10px) + 5px); width: 21px; height: 21px; margin: 0; transform: translate(-50%, -50%); transition: left 0.9s cubic-bezier(.3, .8, .2, 1); pointer-events: none; z-index: 2; animation: cmStar 2s ease-in-out infinite; font-weight: 400; }
.cm-star svg { display: block; width: 100%; height: 100%; }
@keyframes cmStar { 0%, 100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); } 50% { transform: translate(-50%, -54%) rotate(8deg) scale(1.1); } }
.cm-spk { position: absolute; top: 50%; width: 6px; height: 6px; background: #fff7c8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; pointer-events: none; z-index: 3; }
.cm-spk.s1 { left: calc(var(--p) * 100% - 12px); animation: cmSpk 2.6s 0.2s ease-out infinite; } .cm-spk.s2 { left: calc(var(--p) * 100% - 24px); animation: cmSpk 2.6s 1.1s ease-out infinite; } .cm-spk.s3 { left: calc(var(--p) * 100% + 6px); animation: cmSpk 2.6s 1.8s ease-out infinite; }
@keyframes cmSpk { 0% { opacity: 0; transform: translateY(0) scale(0.4); } 25% { opacity: 1; transform: translateY(-9px) scale(1); } 100% { opacity: 0; transform: translateY(-13px) scale(0.3) rotate(90deg); } }
.comet em { flex: none; min-width: 24px; font: 800 10px/1 var(--font-ui); font-style: normal; color: #5a1a3a; text-align: right; }
.comet.lvl2 .cm-fill::after, .comet.lvl3 .cm-fill::after { opacity: 0.55; } .comet.lvl3 .cm-fill { filter: saturate(1.25) brightness(1.06); } .comet.lvl3 .cm-spk { animation-duration: 1.9s; }
.comet.is-ready em { position: absolute; right: -4px; top: -17px; z-index: 4; min-width: 0; padding: 2px 9px 3px; font: 900 11px/1 var(--font-ui); font-style: italic; color: #5a1a3a; background: #ffd23f; border: 2px solid #5a1a3a; border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; box-shadow: 0 2px 0 rgba(58, 38, 48, 0.3); text-decoration: underline wavy #e0602f 1.5px; text-underline-offset: 2px; transform-origin: 70% 100%; animation: cmReady 2.4s ease-in-out infinite; }
.comet.is-ready .cm-bar { animation: cmGlow 1.8s ease-in-out infinite; } .comet.is-ready .cm-fill::after { opacity: 0.8; } .comet.is-ready .cm-spk { animation-duration: 1.2s; }
.comet.is-ready.pop em { animation: cmPop 0.6s cubic-bezier(.2, 1.7, .4, 1) both, cmReady 2.4s 0.6s ease-in-out infinite; }
@keyframes cmGlow { 0%, 100% { box-shadow: 0 2px 0 rgba(232, 160, 120, 0.55), 0 0 0 0 rgba(255, 79, 168, 0); } 50% { box-shadow: 0 2px 0 rgba(232, 160, 120, 0.55), 0 0 9px 2px rgba(255, 79, 168, 0.85); } }
@keyframes cmReady { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) scale(1.05); } } @keyframes cmPop { 0% { transform: scale(0) rotate(-20deg); } 70% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1) rotate(-3deg); } }
.ms-next .ms-nub { height: 22px; margin-bottom: 1px; } .ms-next b#menu-next { line-height: 1.2; }
@media (max-width: 760px) { .cm-cape { width: 23px; height: 19px; } .cm-bar { height: 12px; } .cm-star { width: 18px; height: 18px; } .comet em { font-size: 9px; } .ms-next .ms-nub { height: 20px; } }
@media (prefers-reduced-motion: reduce) { .cm-cape, .cm-fill::before, .cm-star, .cm-spk, .comet.is-ready em, .comet.is-ready .cm-bar { animation: none; } .cm-spk { display: none; } .cm-fill, .cm-star { transition: none; } }
@media (max-height: 760px) { .story-banner { width: min(100%, 440px); } }
@media (max-height: 560px) and (min-aspect-ratio: 1/1) { .story-banner { width: min(100%, 230px); margin-top: 4px; } .menu-ui .logo { width: min(200px, 18vw, 16vh); } }
/* ---- tagline: supplied artwork slot (assets/menu/tagline.webp); the text version shows only if the artwork file is missing ---- */
.tag-wrap { width: 100%; display: flex; justify-content: flex-start; margin: 0 0 var(--sp-3, 10px); } .tag-wrap .tag-text { display: none; }
.tag-wrap.no-art .tag-text { display: block; }
.tag-art { display: block; width: min(100%, 400px); height: auto; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 4px 6px rgba(122, 31, 61, 0.2)); animation: sbnFloat 5.5s ease-in-out infinite; }
@media (max-width: 760px) { .tag-wrap { justify-content: center; } .tag-art { width: min(92%, 340px); } }
@media (max-height: 720px) { .tag-art { width: min(100%, 280px); } }
@media (max-height: 560px) and (min-aspect-ratio: 1/1) { .tag-wrap { display: none; } }
@media (prefers-reduced-motion: reduce) { .tag-art { animation: none; } }
/* ---- tagline motion: gentle float + tilt, a shine that sweeps across the cloud only, soft pink glow, and a few twinkling sparkles. The artwork itself is never edited. ---- */
.tag-fx { position: relative; display: block; width: min(100%, 400px); animation: tgFloat 6s ease-in-out infinite; transform-origin: 50% 60%; }
.tag-fx .tag-art { position: relative; z-index: 1; width: 100%; animation: none; }
.tg-glow { position: absolute; left: -4%; right: -4%; top: -12%; bottom: -12%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 150, 215, 0.85), rgba(255, 150, 215, 0) 78%); filter: blur(10px); opacity: 0.45; animation: tgGlow 3.6s ease-in-out infinite; }
.tg-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; -webkit-mask: url(../assets/menu/tagline.webp) center / 100% 100% no-repeat; mask: url(../assets/menu/tagline.webp) center / 100% 100% no-repeat; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%) -150% 0 / 250% 100% no-repeat; animation: tgShine 5.2s 1.2s ease-in-out infinite; mix-blend-mode: soft-light; }
.tg-sp { position: absolute; z-index: 3; width: 13px; height: 13px; pointer-events: none; background: #fff6a8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: tgSpark 3.4s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(255, 210, 63, 0.9)); }
.tg-sp.a { left: 6%; top: 4%; animation-delay: 0s; } .tg-sp.b { left: 30%; top: -6%; width: 9px; height: 9px; animation-delay: 0.9s; background: #fff; } .tg-sp.c { right: 24%; top: -4%; width: 11px; height: 11px; animation-delay: 1.7s; } .tg-sp.d { right: 3%; bottom: 14%; animation-delay: 2.3s; } .tg-sp.e { left: 42%; bottom: -5%; width: 9px; height: 9px; animation-delay: 1.2s; background: #fce3d3; }
@keyframes tgFloat { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-4px) rotate(0.6deg); } }
@keyframes tgGlow { 0%, 100% { opacity: 0.3; transform: scale(0.97); } 50% { opacity: 0.6; transform: scale(1.03); } }
@keyframes tgShine { 0%, 45% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
@keyframes tgSpark { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 40% { opacity: 1; transform: scale(1) rotate(20deg); } 70% { opacity: 0.6; transform: scale(0.7) rotate(45deg); } }
@media (max-width: 760px) { .tag-fx { width: min(92%, 340px); } }
@media (max-height: 720px) { .tag-fx { width: min(100%, 280px); } }
@media (prefers-reduced-motion: reduce) { .tag-fx, .tg-glow, .tg-shine, .tg-sp { animation: none; } .tg-sp, .tg-shine { display: none; } }
/* ================= main-menu tiles: the five supplied illustrated buttons (each its own transparent PNG), coloured glow, idle personality ================= */
.tiles { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: clamp(2px, 1vw, 10px) !important; align-items: end; }
.tiles .btn.tile.tile-art { position: relative; display: block !important; aspect-ratio: 1 / 1.12; width: 100%; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0; background: none !important; border: 0 !important; border-radius: 24px !important; box-shadow: none !important; overflow: visible; transform: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: none; }
.tile-art .ta-glow { position: absolute; left: -14%; right: -14%; top: -10%; bottom: -8%; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--gc) 0%, color-mix(in srgb, var(--gc) 45%, transparent) 48%, transparent 76%); filter: blur(7px); opacity: 0.5; animation: taGlow 3.6s ease-in-out infinite; transition: opacity 0.25s; }
.tile-art.ta-outfits { --gc: #f6aa78; } .tile-art.ta-missions { --gc: #b58cff; } .tile-art.ta-map { --gc: #3ee0cf; } .tile-art.ta-progress { --gc: #ffb02e; } .tile-art.ta-ranks { --gc: #4aa8ff; }
.tile-art.ta-missions .ta-glow { animation-delay: .5s; } .tile-art.ta-map .ta-glow { animation-delay: 1s; } .tile-art.ta-progress .ta-glow { animation-delay: 1.5s; } .tile-art.ta-ranks .ta-glow { animation-delay: 2s; }
.tile-art .ta-wrap { position: absolute; inset: 0; z-index: 1; display: block; transform-origin: 50% 85%; transition: transform 0.28s cubic-bezier(.2, 1.5, .4, 1); }
.tile-art .ta-idle { position: absolute; inset: 0; display: block; transform-origin: 50% 85%; animation: taFloat 4.6s ease-in-out infinite; }
.tile-art .ta-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; user-select: none; -webkit-user-drag: none; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(58, 38, 48, 0.28)); }
.tile-art:hover .ta-wrap, .tile-art.focus .ta-wrap, .tile-art:focus-visible .ta-wrap { transform: scale(1.1) translateY(-2%); } .tile-art:hover .ta-glow, .tile-art.focus .ta-glow, .tile-art:focus-visible .ta-glow { opacity: 0.95; }
.tile-art:active .ta-wrap { animation: taClick 0.45s cubic-bezier(.2, 1.6, .4, 1); }
.tile-art.focus, .tile-art:focus-visible { outline: 3px solid #1f7bff; outline-offset: 2px; }
.tile-art:nth-child(2) .ta-idle { animation-delay: -0.9s; } .tile-art:nth-child(3) .ta-idle { animation-delay: -1.8s; } .tile-art:nth-child(4) .ta-idle { animation-delay: -2.7s; } .tile-art:nth-child(5) .ta-idle { animation-delay: -3.6s; }
/* per-button personality (whole-illustration motion + sparkle overlays; the artwork itself is never edited) */
.ta-outfits .ta-idle { animation: taHop 3.2s ease-in-out infinite; } .ta-missions .ta-idle { animation: taSway 3.6s ease-in-out infinite; transform-origin: 22% 88%; } .ta-map .ta-idle { animation: taFloat 5.4s ease-in-out infinite; } .ta-progress .ta-idle { animation: taCheer 4.2s ease-in-out infinite; } .ta-ranks .ta-idle { animation: taPulse 2.8s ease-in-out infinite; }
.ta-sp { position: absolute; z-index: 2; width: 13%; aspect-ratio: 1; pointer-events: none; background: #fff6a8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: taSpark 3.4s ease-in-out infinite; filter: drop-shadow(0 0 2px rgba(255, 210, 63, 0.9)); }
.ta-outfits .ta-sp.s1 { left: 4%; top: 12%; } .ta-outfits .ta-sp.s2 { right: 6%; top: 52%; animation-delay: 1.6s; width: 10%; }
.ta-progress .ta-sp.s1 { left: 14%; top: 8%; animation-delay: .4s; } .ta-progress .ta-sp.s2 { right: 12%; top: 50%; animation-delay: 2s; width: 10%; }
.ta-ranks .ta-sp.s3 { right: 6%; top: 3%; width: 17%; background: #fffbe0; animation: taTwinkle 2.2s ease-in-out infinite; }
.ta-orbit { position: absolute; z-index: 2; left: 22%; top: 8%; width: 62%; aspect-ratio: 1; pointer-events: none; transform: rotate(-14deg) scaleY(0.38); animation: taOrbit 6.5s linear infinite; }
.ta-orbit b { position: absolute; left: 100%; top: 50%; width: 11%; aspect-ratio: 1; margin: -5.5% 0 0 -9%; border-radius: 50%; background: #fff6a8; box-shadow: 0 0 5px 1px rgba(255, 220, 90, 0.95); transform: scaleY(2.6); }
@keyframes taGlow { 0%, 100% { opacity: 0.38; transform: scale(0.96); } 50% { opacity: 0.62; transform: scale(1.04); } }
@keyframes taFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5%); } }
@keyframes taHop { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.04, 0.95); } 30% { transform: translateY(-6%) scale(0.98, 1.03); } 46% { transform: translateY(0) scale(1.03, 0.97); } 58% { transform: scale(1); } }
@keyframes taSway { 0%, 100% { transform: rotate(-2.2deg) skewX(0deg); } 50% { transform: rotate(2.6deg) skewX(-2deg); } }
@keyframes taCheer { 0%, 62%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-7%) rotate(-3deg) scale(1.03); } 78% { transform: translateY(0) rotate(2deg); } 86% { transform: translateY(-3%) rotate(-1deg); } 93% { transform: translateY(0); } }
@keyframes taPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes taClick { 0% { transform: scale(1.1); } 30% { transform: scale(0.88, 0.92) translateY(2%); } 62% { transform: scale(1.14, 1.1) translateY(-6%); } 100% { transform: scale(1.1) translateY(-2%); } }
@keyframes taSpark { 0%, 60%, 100% { opacity: 0; transform: scale(0.3) rotate(0); } 75% { opacity: 1; transform: scale(1) rotate(20deg); } 90% { opacity: 0.5; transform: scale(0.6) rotate(45deg); } }
@keyframes taTwinkle { 0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(25deg); } }
@keyframes taOrbit { from { transform: rotate(-14deg) scaleY(0.38) rotate(0deg); } to { transform: rotate(-14deg) scaleY(0.38) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tile-art .ta-idle, .ta-sp, .ta-orbit, .tile-art .ta-glow { animation: none; } .ta-sp, .ta-orbit { display: none; } .tile-art:active .ta-wrap { animation: none; } }
/* ================= floating-sticker hover: lift 5px, scale 1.06, brighter/bigger glow, deeper soft shadow, a little character animation and 3 sparkles. No outlines, dashes or extra containers. ================= */
.tile-art .ta-wrap { transition: transform 0.23s cubic-bezier(.34, 1.56, .64, 1); }
.tile-art .ta-glow { transition: opacity 0.23s ease, left 0.23s cubic-bezier(.34, 1.56, .64, 1), right 0.23s cubic-bezier(.34, 1.56, .64, 1), top 0.23s cubic-bezier(.34, 1.56, .64, 1), bottom 0.23s cubic-bezier(.34, 1.56, .64, 1), filter 0.23s ease; }
.tile-art .ta-img { transition: filter 0.23s ease; }
.tiles .btn.tile.tile-art.focus, .tiles .btn.tile.tile-art:focus-visible, .tiles .btn.tile.tile-art:focus { outline: none !important; box-shadow: none !important; }
.ta-hs { position: absolute; z-index: 3; width: 14%; aspect-ratio: 1; pointer-events: none; opacity: 0; background: #fff6a8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px rgba(255, 210, 63, 0.95)); }
.ta-hs.h1 { left: -5%; top: 8%; } .ta-hs.h2 { right: -4%; top: 0; width: 11%; background: #fce3d3; } .ta-hs.h3 { right: -7%; top: 58%; width: 10%; background: #fff; }
.tile-art.is-pressed .ta-wrap, .tile-art:active .ta-wrap { animation: none; transform: translateY(-3px) scale(1.03); }
.tile-art.is-pressed .ta-glow, .tile-art:active .ta-glow { opacity: 1; left: -22%; right: -22%; top: -18%; bottom: -14%; filter: blur(8px) brightness(1.2); }
.tile-art.is-pressed .ta-img, .tile-art:active .ta-img { filter: drop-shadow(0 9px 7px rgba(58, 38, 48, 0.38)); animation: var(--hv) 0.55s ease; }
.tile-art.is-pressed .ta-hs, .tile-art:active .ta-hs { animation: taHs 0.75s ease-out both; } .tile-art.is-pressed .ta-hs.h2, .tile-art:active .ta-hs.h2 { animation-delay: 0.08s; } .tile-art.is-pressed .ta-hs.h3, .tile-art:active .ta-hs.h3 { animation-delay: 0.16s; }
.tile-art.focus .ta-wrap, .tile-art:focus-visible .ta-wrap { transform: translateY(-5px) scale(1.06); }
.tile-art.focus .ta-glow, .tile-art:focus-visible .ta-glow { opacity: 1; left: -22%; right: -22%; top: -18%; bottom: -14%; filter: blur(8px) brightness(1.2); }
.tile-art.focus .ta-img, .tile-art:focus-visible .ta-img { filter: drop-shadow(0 9px 7px rgba(58, 38, 48, 0.38)); animation: var(--hv) 0.55s ease; }
.tile-art.focus .ta-hs, .tile-art:focus-visible .ta-hs { animation: taHs 0.75s ease-out both; } .tile-art.focus .ta-hs.h2, .tile-art:focus-visible .ta-hs.h2 { animation-delay: 0.08s; } .tile-art.focus .ta-hs.h3, .tile-art:focus-visible .ta-hs.h3 { animation-delay: 0.16s; }
@media (hover: hover) {
.tile-art:hover .ta-wrap { transform: translateY(-5px) scale(1.06); }
.tile-art:hover .ta-glow { opacity: 1; left: -22%; right: -22%; top: -18%; bottom: -14%; filter: blur(8px) brightness(1.2); }
.tile-art:hover .ta-img { filter: drop-shadow(0 9px 7px rgba(58, 38, 48, 0.38)); animation: var(--hv) 0.55s ease; }
.tile-art:hover .ta-hs { animation: taHs 0.75s ease-out both; } .tile-art:hover .ta-hs.h2 { animation-delay: 0.08s; } .tile-art:hover .ta-hs.h3 { animation-delay: 0.16s; }
.tile-art.ta-map:hover .ta-orbit { animation-duration: 2.2s; }
}
.tile-art.ta-outfits { --hv: taHvShirt; } .tile-art.ta-missions { --hv: taHvFlag; } .tile-art.ta-map { --hv: taHvPlanet; } .tile-art.ta-progress { --hv: taHvTrophy; } .tile-art.ta-ranks { --hv: taHvBars; }
.ta-missions .ta-img { transform-origin: 22% 90%; } .ta-ranks .ta-img { transform-origin: 50% 95%; }
@keyframes taHs { 0% { opacity: 0; transform: scale(0.2) rotate(0); } 35% { opacity: 1; transform: scale(1.1) rotate(25deg); } 100% { opacity: 0; transform: scale(0.5) rotate(60deg) translateY(-10px); } }
@keyframes taHvShirt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 55% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } }
@keyframes taHvFlag { 0%, 100% { transform: rotate(0) skewX(0); } 25% { transform: rotate(-4deg) skewX(-4deg); } 55% { transform: rotate(3deg) skewX(3deg); } 80% { transform: rotate(-1.5deg) skewX(-1.5deg); } }
@keyframes taHvPlanet { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(-5deg) scale(1.03); } 100% { transform: rotate(0) scale(1); } }
@keyframes taHvTrophy { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-5%) rotate(-4deg); } 50% { transform: translateY(0) rotate(3deg); } 75% { transform: translateY(-2.5%) rotate(-1deg); } }
@keyframes taHvBars { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(0.97, 1.06); } 60% { transform: scale(1.03, 0.97); } }
@media (prefers-reduced-motion: reduce) { .tile-art .ta-img, .tile-art:hover .ta-img, .tile-art.focus .ta-img, .tile-art.is-pressed .ta-img, .tile-art:active .ta-img { animation: none; } .ta-hs { display: none; } }@keyframes taGlowHot { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.tile-art.focus .ta-glow, .tile-art:focus-visible .ta-glow, .tile-art.is-pressed .ta-glow, .tile-art:active .ta-glow { animation: taGlowHot 1.6s ease-in-out infinite; }
@media (hover: hover) { .tile-art:hover .ta-glow { animation: taGlowHot 1.6s ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce) { .tile-art.focus .ta-glow, .tile-art:hover .ta-glow, .tile-art.is-pressed .ta-glow { animation: none; opacity: 1; } }
/* ================= game-wide floating-sticker hover / focus / pressed state (replaces the dashed "stitched" outline everywhere) ================= */
:is(.btn, .icon-btn, .ocard, .pg-tile, .m-world, .o-node, .bk-btn, .bk-nb, .pg-back):not(.tile-art):not(.story-banner):not(.tbtn):not(.bk-start) { transition: transform 0.23s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.23s ease, background-color 0.15s ease !important; }
:is(.btn, .icon-btn, .ocard, .pg-tile, .m-world, .o-node, .bk-btn, .bk-nb, .pg-back):not(.tile-art):not(.story-banner):not(.tbtn):not(.bk-start):not([disabled]).focus,
:is(.btn, .icon-btn, .ocard, .pg-tile, .m-world, .o-node, .bk-btn, .bk-nb, .pg-back):not(.tile-art):not(.story-banner):not(.tbtn):not(.bk-start):not([disabled]):focus-visible,
:is(.btn, .icon-btn, .ocard, .pg-tile, .m-world, .o-node, .bk-btn, .bk-nb, .pg-back):not(.tile-art):not(.story-banner):not(.tbtn):not(.bk-start):not([disabled]).is-pressed,
:is(.btn, .icon-btn, .ocard, .pg-tile, .m-world, .o-node, .bk-btn, .bk-nb, .pg-back):not(.tile-art):not(.story-banner):not(.tbtn):not(.bk-start):not([disabled]):active { transform: translateY(-5px) scale(1.06) !important; box-shadow: 0 6px 0 rgba(58, 38, 48, 0.9), 0 14px 16px rgba(58, 38, 48, 0.26), 0 0 20px 4px rgba(255, 138, 200, 0.5) !important; outline: none !important; }
@media (hover: hover) { :is(.btn, .icon-btn, .ocard, .pg-tile, .m-world, .o-node, .bk-btn, .bk-nb, .pg-back):not(.tile-art):not(.story-banner):not(.tbtn):not(.bk-start):not([disabled]):hover { transform: translateY(-5px) scale(1.06) !important; box-shadow: 0 6px 0 rgba(58, 38, 48, 0.9), 0 14px 16px rgba(58, 38, 48, 0.26), 0 0 20px 4px rgba(255, 138, 200, 0.5) !important; outline: none !important; } }
.btn.focus, .btn:focus-visible, .btn:focus, .icon-btn:focus-visible, .icon-btn.focus, .ocard.focus, .ocard:focus-visible, .pg-tile.focus, .pg-tile:focus-visible, .m-world.focus, .m-world:focus-visible, .o-node.focus, .o-node:focus-visible, .ov-btns .btn.focus, .ov-btns .btn:focus-visible, .tile-art.focus, .tile-art:focus-visible, .bk-btn:focus-visible, .bk-nb:focus-visible, .story-banner:focus-visible, .tbtn:focus-visible { outline: none !important; outline-offset: 0 !important; }
input[type=range]:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.hv-sparks { position: fixed; z-index: 9999; pointer-events: none; }
.hv-sp { position: absolute; width: 13px; height: 13px; margin: -6px 0 0 -6px; background: #fff6a8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px rgba(255, 210, 63, 0.95)); opacity: 0; animation: hvSp 0.75s ease-out both; }
.hv-sp.b { background: #fce3d3; width: 10px; height: 10px; } .hv-sp.c { background: #fff; width: 9px; height: 9px; }
@keyframes hvSp { 0% { opacity: 0; transform: scale(0.2) rotate(0); } 35% { opacity: 1; transform: scale(1.1) rotate(25deg); } 100% { opacity: 0; transform: scale(0.5) rotate(60deg) translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .hv-sparks { display: none; } :is(.btn, .icon-btn, .ocard, .pg-tile, .m-world, .o-node, .bk-btn, .bk-nb):hover { transform: none !important; } }
/* ---- Lanky's Great Escape banner: same floating-sticker hover / press as the rest of the game ---- */
.story-banner { transition: transform 0.23s cubic-bezier(.34, 1.56, .64, 1); }
.story-banner .sbn-glow { transition: opacity 0.23s ease, left 0.23s cubic-bezier(.34, 1.56, .64, 1), right 0.23s cubic-bezier(.34, 1.56, .64, 1), top 0.23s cubic-bezier(.34, 1.56, .64, 1), bottom 0.23s cubic-bezier(.34, 1.56, .64, 1); }
.story-banner .sbn-img { transition: filter 0.23s ease; }
.story-banner.focus, .story-banner:focus-visible, .story-banner.is-pressed, .story-banner:active { animation: none; transform: translateY(-5px) scale(1.06); outline: none; }
.story-banner.focus .sbn-glow, .story-banner:focus-visible .sbn-glow, .story-banner.is-pressed .sbn-glow, .story-banner:active .sbn-glow { left: -14%; right: -14%; top: -32%; bottom: -30%; opacity: 1; animation: taGlowHot 1.6s ease-in-out infinite; }
.story-banner.focus .sbn-img, .story-banner:focus-visible .sbn-img, .story-banner.is-pressed .sbn-img, .story-banner:active .sbn-img { filter: drop-shadow(0 10px 8px rgba(122, 31, 61, 0.4)); animation: sbnHv 0.6s ease; }
@media (hover: hover) {
.story-banner:hover { animation: none; transform: translateY(-5px) scale(1.06); outline: none; }
.story-banner:hover .sbn-glow { left: -14%; right: -14%; top: -32%; bottom: -30%; opacity: 1; animation: taGlowHot 1.6s ease-in-out infinite; }
.story-banner:hover .sbn-img { filter: drop-shadow(0 10px 8px rgba(122, 31, 61, 0.4)); animation: sbnHv 0.6s ease; }
}
@keyframes sbnHv { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.4deg); } 55% { transform: rotate(1.2deg); } 80% { transform: rotate(-0.5deg); } }
@media (prefers-reduced-motion: reduce) { .story-banner:hover .sbn-img, .story-banner.focus .sbn-img, .story-banner:active .sbn-img { animation: none; } }
/* ================= OUTFITS: Lanky's illustrated dressing room ================= */
#screen-outfits.screen { background: radial-gradient(circle at 6% 3%, rgba(255, 205, 120, 0.55), transparent 26%), radial-gradient(circle at 97% 6%, rgba(190, 160, 255, 0.5), transparent 28%), radial-gradient(circle at 50% 105%, rgba(255, 140, 190, 0.4), transparent 42%), radial-gradient(circle at 0% 60%, rgba(160, 225, 205, 0.35), transparent 24%), #fbe5d8; }
#screen-outfits .of-wrap { position: relative; }
.of-deco { position: absolute; pointer-events: none; z-index: 0; }
.of-deco.d-planet { right: 17%; top: -2px; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8fd8a8, #2f8f8c 62%, #1d5f6a); border: 3px solid #3a2630; animation: ofSpin 18s linear infinite; }
.of-deco.d-planet b { position: absolute; left: -22%; right: -22%; top: 38%; height: 26%; border: 5px solid #f6aa78; border-radius: 50%; transform: rotate(-16deg); }
.of-deco.d-star { width: 18px; height: 18px; background: #ffd23f; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.4s ease-in-out infinite; } .of-deco.s1 { right: 28%; top: 6px; } .of-deco.s2 { right: 12%; top: 54px; width: 12px; height: 12px; animation-delay: .7s; } .of-deco.s3 { right: 31%; top: 46px; width: 10px; height: 10px; animation-delay: 1.4s; }
@keyframes ofSpin { to { transform: rotate(360deg); } }
.of-top { position: relative; z-index: 2; }
#screen-outfits .of-title { position: relative; z-index: 1; font: 400 clamp(40px, 6vw, 66px)/1 var(--font); color: #5a1030; text-transform: none; letter-spacing: 0; transform: rotate(-3deg); padding: 2px 16px; }
#screen-outfits .of-title::before { content: ''; position: absolute; left: -2px; right: -4px; bottom: 6%; height: 52%; z-index: -1; background: #ffd23f; border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; transform: rotate(1.5deg) skewX(-6deg); opacity: 0.95; }
#screen-outfits .of-back { background: #7a1f3d; }
#screen-outfits .of-modes .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px !important; padding: 6px 18px !important; font: 800 17px var(--font-ui) !important; background: #fff3de; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px !important; box-shadow: 0 4px 0 rgba(58, 38, 48, 0.85); }
#screen-outfits .of-modes .chip.on { background: #e8602f; color: #fff; }
#screen-outfits .of-modes .chip svg { flex: none; }
#screen-outfits .of-top .coin-pill { background-color: #5c1a3a; }
/* category chips: painted colour fill when selected, pressed look, tiny hand-drawn icon */
#screen-outfits .of-cats { gap: 8px; padding: 6px 6px 12px; }
.cat-chip { display: inline-flex !important; align-items: center; gap: 7px; min-height: 42px !important; padding: 5px 16px 5px 12px !important; font: 800 15px/1.2 var(--font-ui) !important; color: var(--ink) !important; background: #fff5e6 !important; border: 2.5px solid var(--ink) !important; border-radius: 999px !important; box-shadow: 0 4px 0 rgba(58, 38, 48, 0.8) !important; white-space: nowrap; }
.cat-chip svg { flex: none; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6)); }
.cat-chip.on { transform: translateY(3px) !important; box-shadow: 0 1px 0 rgba(58, 38, 48, 0.8), inset 0 3px 0 rgba(0, 0, 0, 0.14) !important; color: #3a1020 !important; }
.cat-chip.on[data-cat="all"] { background: #ffd23f !important; } .cat-chip.on[data-cat="space"] { background: #f9c4a0 !important; } .cat-chip.on[data-cat="adventure"] { background: #a9dc8f !important; } .cat-chip.on[data-cat="hats"] { background: #f8b88d !important; } .cat-chip.on[data-cat="capes"] { background: #ff9a7a !important; } .cat-chip.on[data-cat="special"] { background: #ffe27a !important; } .cat-chip.on[data-cat="owned"] { background: #8fe0c8 !important; }
/* the dressing room */
#screen-outfits .of-main { grid-template-columns: minmax(300px, 410px) minmax(0, 1fr); gap: 20px; }
#screen-outfits .of-stage { position: relative; padding: 0; display: block; overflow: hidden; border: 3.5px solid #3a2630; border-radius: 36px 22px 40px 26px; background: linear-gradient(170deg, #6d3fa6 0%, #a85fc4 55%, #daa480 100%); box-shadow: 0 8px 0 rgba(58, 38, 48, 0.28), 0 18px 26px rgba(122, 31, 61, 0.22); }
#screen-outfits .of-stage::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0.4; mix-blend-mode: soft-light; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ds-scene { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.ds-arch { position: absolute; left: 11%; right: 11%; top: 5%; bottom: 17%; border-radius: 50% 50% 0 0 / 34% 34% 0 0; background: radial-gradient(circle at 50% 38%, #fbd5bc 0%, #efb792 48%, #c1826b 100%); border: 3px solid #4a1d6a; box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.18), inset 0 -20px 30px rgba(74, 29, 106, 0.3); }
.ds-spot { position: absolute; left: 18%; right: 18%; top: 8%; height: 66%; border-radius: 50%; background: radial-gradient(ellipse at 50% 42%, rgba(255, 248, 205, 0.95), rgba(255, 220, 240, 0) 68%); animation: dsPulse 4s ease-in-out infinite; }
@keyframes dsPulse { 0%, 100% { opacity: 0.75; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.04); } }
.ds-plant { position: absolute; transform-origin: 50% 100%; animation: dsSway 5s ease-in-out infinite; } .ds-plant.pl { left: -3%; bottom: 13%; width: 31%; } .ds-plant.pr { right: -2%; bottom: 14%; width: 24%; animation-delay: -2s; } @keyframes dsSway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.ds-chest { position: absolute; left: 4%; bottom: 14%; width: 26%; z-index: 2; filter: drop-shadow(0 4px 0 rgba(58, 38, 48, 0.3)); }
.ds-plat { position: absolute; left: 7%; right: 7%; bottom: 4%; height: 21%; z-index: 1; border-radius: 50%; background: linear-gradient(#c68ae0, #8a4fb8); border: 3px solid #3a2050; box-shadow: 0 9px 0 rgba(40, 18, 60, 0.4); }
.ds-plat b { position: absolute; left: 5%; right: 5%; top: 6%; height: 62%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #f0c4f5, #cf8be0); border: 2.5px solid rgba(58, 32, 80, 0.55); }
.ds-mirror { position: absolute; right: 3%; bottom: 17%; width: 23%; height: 49%; z-index: 2; transform: rotate(6deg); transform-origin: 50% 100%; }
.ds-glass { position: absolute; inset: 0; border: 6px solid #ffc619; border-radius: 48% 48% 10% 10% / 24% 24% 6% 6%; background: linear-gradient(160deg, #e8dcff, #b6a3e6 60%, #9a8cd8); box-shadow: 0 0 0 3px #3a2630, inset 0 0 0 3px #b8780a, 3px 6px 0 rgba(58, 38, 48, 0.3); overflow: hidden; }
.ds-glass canvas { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.ds-shimmer { position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-18deg); animation: dsShim 4.5s 1s ease-in-out infinite; }
@keyframes dsShim { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.ds-star { position: absolute; z-index: 2; width: 18px; height: 18px; background: #fff6a8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.6s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255, 220, 90, 0.9)); }
.ds-star.s1 { left: 14%; top: 14%; } .ds-star.s2 { right: 12%; top: 10%; width: 24px; height: 24px; animation-delay: .8s; } .ds-star.s3 { left: 40%; top: 4%; width: 12px; height: 12px; animation-delay: 1.5s; } .ds-star.s4 { right: 8%; top: 38%; width: 14px; height: 14px; animation-delay: 2s; }
.ds-planet { position: absolute; left: 6%; top: 22%; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd08a, #f08a3c 65%, #b9561c); border: 2.5px solid #3a2630; animation: ofSpin 16s linear infinite; }
.ds-planet b { position: absolute; left: -30%; right: -30%; top: 38%; height: 24%; border: 3.5px solid #fff3de; border-radius: 50%; transform: rotate(-20deg); }
#screen-outfits #of-prev { position: relative; z-index: 4; display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 440 / 520; margin: 0; }
#screen-outfits .of-count { position: absolute; z-index: 5; left: 50%; bottom: 4%; transform: translateX(-50%); padding: 5px 18px 6px; font: 800 15px/1.2 var(--font-ui); background: #fff3de; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 rgba(58, 38, 48, 0.4); opacity: 1; white-space: nowrap; }
.of-stage.swap #of-prev { animation: dsSwap 0.6s cubic-bezier(.3, 1.5, .5, 1); } .of-stage.swap .ds-spot { animation: dsFlash 0.6s ease-out; }
@keyframes dsSwap { 0% { transform: scale(0.82) rotate(-4deg); filter: brightness(1.6) saturate(0.4); } 55% { transform: scale(1.06) rotate(2deg); filter: brightness(1.15); } 100% { transform: scale(1) rotate(0); filter: none; } }
@keyframes dsFlash { 0% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0.8; transform: scale(1); } }
/* animation buttons */
#screen-outfits .of-pose { gap: 8px; padding: 4px 4px 10px; }
.pose-chip { display: inline-flex !important; align-items: center; gap: 6px; min-height: 40px !important; padding: 4px 14px 4px 10px !important; font: 800 14px/1.2 var(--font-ui) !important; color: var(--ink) !important; background: #fff5e6 !important; border: 2.5px solid var(--ink) !important; border-radius: 999px !important; box-shadow: 0 4px 0 rgba(58, 38, 48, 0.8) !important; white-space: nowrap; }
.pose-chip.on { background: #ffd23f !important; transform: translateY(3px) !important; box-shadow: 0 1px 0 rgba(58, 38, 48, 0.8), inset 0 3px 0 rgba(0, 0, 0, 0.12) !important; }
/* painted paper info panel */
#screen-outfits .of-info { position: relative; padding: 18px 22px 20px; text-align: center; background: radial-gradient(circle at 0% 0%, rgba(255, 205, 80, 0.75), transparent 34%), radial-gradient(circle at 100% 100%, rgba(255, 150, 200, 0.65), transparent 36%), radial-gradient(circle at 100% 0%, rgba(255, 205, 80, 0.4), transparent 22%), #fff4da; border: 0; border-radius: 34px 18px 40px 22px / 24px 36px 22px 34px; box-shadow: 0 5px 0 rgba(58, 38, 48, 0.18), 0 12px 20px rgba(122, 31, 61, 0.14); }
#screen-outfits .of-info h3 { margin: 0; font: 400 clamp(30px, 4vw, 40px)/1.15 var(--font); color: #3a1020; font-style: italic; }
#screen-outfits .of-info .rar { margin: 6px 0 2px; padding: 3px 14px; font: 800 13px var(--font-ui); color: #fff; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.08em; }
#screen-outfits .of-info p { margin: 8px 0 12px; font: 500 15px/1.5 var(--font-ui); color: #3a1020; }
#screen-outfits .of-info .btn.primary { min-height: 56px; padding: 8px 34px; font: 900 20px var(--font-ui); border-radius: 999px !important; background: linear-gradient(#ffe27a, #ffc619) !important; border: 3px solid var(--ink); box-shadow: 0 5px 0 #7a4a10 !important; text-transform: uppercase; letter-spacing: 0.04em; }
#screen-outfits .of-state { display: inline-block; padding: 10px 28px; margin-bottom: 8px; font: 900 20px var(--font-ui); color: #fff; background: #2f9a54; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 #1d5f36; }
#screen-outfits .of-bal { font: 700 14px var(--font-ui); opacity: 1; color: #5a3a46; }
/* outfit collection: individual painted collectible cards */
#screen-outfits .of-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; }
#screen-outfits .ocard { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: flex-end; aspect-ratio: 0.8; padding: 8px 6px 10px !important; overflow: hidden; background: linear-gradient(165deg, var(--c1), var(--c2)) !important; border: 0 !important; border-radius: 28px 18px 30px 20px / 22px 30px 20px 28px !important; box-shadow: 0 5px 0 rgba(58, 38, 48, 0.28), inset 0 0 0 3px rgba(255, 255, 255, 0.28) !important; color: var(--ink); }
.oc-paint { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.85; transition: filter 0.22s, opacity 0.22s; background: radial-gradient(ellipse 70% 38% at 25% 18%, rgba(255, 255, 255, 0.42), transparent 70%), radial-gradient(ellipse 55% 30% at 78% 40%, rgba(255, 255, 255, 0.22), transparent 70%), radial-gradient(ellipse 80% 40% at 50% 100%, rgba(255, 255, 255, 0.55), transparent 70%), repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.07) 0 9px, transparent 9px 19px); }
#screen-outfits .ocard::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.35; mix-blend-mode: soft-light; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
#screen-outfits .ocard canvas { position: relative; z-index: 2; width: 86%; height: auto; aspect-ratio: 3 / 4; margin: 0 0 -4px; filter: drop-shadow(0 4px 3px rgba(58, 38, 48, 0.25)); }
.oc-foot { position: relative; z-index: 3; width: 100%; display: grid; justify-items: center; gap: 4px; padding-top: 14px; background: radial-gradient(ellipse 85% 100% at 50% 100%, rgba(255, 246, 228, 0.97) 55%, rgba(255, 246, 228, 0) 100%); }
#screen-outfits .ocard .nm { font: 800 17px/1.15 var(--font-ui); color: #3a1020; }
#screen-outfits .otag { font: 800 14px var(--font-ui); padding: 3px 14px; border-radius: 99px; border: 2px solid rgba(58, 38, 48, 0.6); }
#screen-outfits .otag.own { background: #bff1dc; color: #1d5f46; } #screen-outfits .otag.price { background: #ffe27a; color: #5a3a10; } #screen-outfits .otag.eq { background: #2f9a54; color: #fff; border-color: var(--ink); }
.oc-badge { position: absolute; z-index: 4; top: 8px; right: 8px; padding: 2px 10px; font: 900 11px/1.5 var(--font-ui); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: #f4985a; border: 2px solid var(--ink); border-radius: 99px; transform: rotate(6deg); box-shadow: 0 2px 0 rgba(58, 38, 48, 0.4); }
#screen-outfits .ocard .rbar { display: none; }
/* rarity: simple -> elaborate */
#screen-outfits .ocard.r-uncommon { box-shadow: 0 5px 0 rgba(58, 38, 48, 0.28), inset 0 0 0 3px rgba(255, 255, 255, 0.5) !important; }
#screen-outfits .ocard.r-rare { box-shadow: 0 5px 0 rgba(58, 38, 48, 0.28), inset 0 0 0 3px rgba(255, 255, 255, 0.55), inset 0 0 0 8px rgba(255, 255, 255, 0.14), 0 0 14px rgba(120, 170, 255, 0.55) !important; }
#screen-outfits .ocard.r-legendary { box-shadow: 0 5px 0 rgba(58, 38, 48, 0.28), inset 0 0 0 3px #ffd23f, inset 0 0 0 7px rgba(255, 255, 255, 0.35), 0 0 18px rgba(255, 190, 40, 0.8) !important; animation: ocLeg 3s ease-in-out infinite; }
@keyframes ocLeg { 0%, 100% { filter: brightness(1) url(#rough); } 50% { filter: brightness(1.06) url(#rough); } }
.os { position: absolute; z-index: 3; width: 14px; height: 14px; background: #fff6a8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.4s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(255, 220, 90, 0.9)); } .os.s1 { left: 10%; top: 12%; } .os.s2 { right: 12%; top: 34%; width: 10px; height: 10px; animation-delay: .9s; } .os.s3 { left: 16%; top: 48%; width: 9px; height: 9px; animation-delay: 1.6s; }
/* equipped + selected + hover */
#screen-outfits .ocard.eq { box-shadow: 0 5px 0 rgba(58, 38, 48, 0.28), inset 0 0 0 4px #f4985a, 0 0 20px 3px rgba(255, 79, 168, 0.55) !important; animation: ocFloat 3.6s ease-in-out infinite; }
#screen-outfits .ocard.sel:not(.eq) { box-shadow: 0 5px 0 rgba(58, 38, 48, 0.28), inset 0 0 0 4px #ffd23f, 0 0 16px 2px rgba(255, 210, 63, 0.7) !important; outline: none; }
@keyframes ocFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
#screen-outfits .ocard.focus, #screen-outfits .ocard:hover { background: linear-gradient(165deg, var(--c1), var(--c2)) !important; box-shadow: 0 7px 0 rgba(58, 38, 48, 0.3), 0 14px 18px rgba(58, 38, 48, 0.22), 0 0 26px 6px var(--c2) !important; }
#screen-outfits .ocard.focus .oc-paint, #screen-outfits .ocard:hover .oc-paint { opacity: 1; filter: brightness(1.14) saturate(1.1); }
#screen-outfits .ocard.pop canvas { animation: ocPopImg 0.55s cubic-bezier(.3, 1.6, .5, 1); } @keyframes ocPopImg { 0% { transform: scale(0.8) rotate(-5deg); } 60% { transform: scale(1.1) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
#screen-outfits .ocard.locked canvas { filter: saturate(0.85) drop-shadow(0 4px 3px rgba(58, 38, 48, 0.25)); }
.screen.wardrobe .ocard.locked canvas { filter: brightness(0.3) contrast(0.9) saturate(0); opacity: 0.55; }
#screen-outfits .of-earn, #screen-outfits .of-hist, #screen-outfits .of-mix { background: #fff4e0; border: 0; border-radius: 26px 16px 28px 18px / 20px 28px 18px 26px; box-shadow: 0 4px 0 rgba(58, 38, 48, 0.16); }
@media (max-width: 760px) { #screen-outfits .of-main { grid-template-columns: minmax(0, 1fr); } #screen-outfits #of-prev { aspect-ratio: 440 / 520; height: auto; } #screen-outfits .of-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px 10px; } #screen-outfits .ocard .nm { font-size: 15px; } .of-deco { display: none; } #screen-outfits .of-info h3 { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .of-deco, .ds-plant, .ds-spot, .ds-star, .ds-planet, .ds-shimmer, .os, #screen-outfits .ocard.eq, #screen-outfits .ocard.r-legendary { animation: none; } .of-stage.swap #of-prev { animation: none; } }.of-deco.d-planet, .ds-planet { animation: ofBob 6s ease-in-out infinite; } .ds-planet { animation-duration: 5s; }
@keyframes ofBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.of-deco.d-planet b, .ds-planet b { animation: ofRing 7s ease-in-out infinite; } @keyframes ofRing { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(-9deg); } }
/* ---- hover fix: round / irregular items (World Map planets, level nodes, progress tiles) never get a rectangular bar-shadow; the glow goes on the illustration itself ---- */
#app :is(.m-world, .o-node, .pg-back):not([disabled]):is(:hover, .focus, :focus-visible, :active, .is-pressed) { box-shadow: none !important; background: transparent !important; outline: none !important; filter: none !important; }
#app :is(.m-world, .o-node):not([disabled]):is(:hover, .focus, :focus-visible, :active, .is-pressed) :is(.m-p, .o-c) { box-shadow: 0 5px 0 rgba(58, 38, 48, 0.25), 0 0 22px 5px rgba(255, 138, 200, 0.6) !important; filter: brightness(1.08); }
#app .pg-back:not([disabled]):is(:hover, .focus, :focus-visible, :active, .is-pressed) { box-shadow: 0 0 16px 3px rgba(255, 138, 200, 0.6) !important; background: #7a5236 !important; }
#app :is(.pg-tile, .pg-act, .st):not([disabled]):is(:hover, .focus, :focus-visible, :active, .is-pressed) { box-shadow: 0 8px 12px rgba(58, 38, 48, 0.22), 0 0 18px 3px rgba(255, 138, 200, 0.4) !important; outline: none !important; }
/* ---- scroll rows (category / pose / leaderboard tabs) must not crop the lift + glow of their buttons ---- */
.of-cats, .bd-tabs { padding: 18px 18px 26px !important; margin: 2px -14px -2px !important; }
.of-pose { padding: 18px 18px 26px !important; margin: -12px -14px -14px !important; }
.mix-chips { padding: 14px 12px 20px; margin: -10px -8px -12px; }
.panel-inner.narrow { padding-left: max(26px, 5%); padding-right: max(26px, 5%); }
:is(.btn, .icon-btn, .ocard, .pg-tile, .bk-btn, .bk-nb):not(.tile-art):not(.story-banner):not(.tbtn):not(.bk-start):not([disabled]):is(:hover, .focus, :focus-visible, :active, .is-pressed) { box-shadow: 0 6px 0 rgba(58, 38, 48, 0.9), 0 12px 14px rgba(58, 38, 48, 0.24), 0 0 14px 2px rgba(255, 138, 200, 0.5) !important; }
/* ================= MISSIONS: the illustrated mission board ================= */
#screen-missions.screen { background: radial-gradient(circle at 4% 2%, rgba(255, 205, 120, 0.5), transparent 26%), radial-gradient(circle at 98% 6%, rgba(190, 160, 255, 0.45), transparent 28%), radial-gradient(circle at 50% 104%, rgba(255, 140, 190, 0.4), transparent 42%), #fbe5d8; }
#screen-missions .panel-inner.narrow.mi { position: relative; width: min(620px, 100%); background: #fff1e2; border-radius: 34px 20px 38px 24px / 24px 36px 22px 32px; box-shadow: 0 8px 0 rgba(58, 38, 48, 0.18), 0 18px 28px rgba(122, 31, 61, 0.16); outline: none; padding: 20px clamp(14px, 4vw, 26px) 22px; overflow: hidden auto; }
.mi::before { content: ''; position: absolute; right: -26px; top: -22px; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b78cf0, #7a50c0 62%, #4d2f8a); border: 3px solid #3a2630; animation: ofBob 6s ease-in-out infinite; }
.mi::after { content: ''; position: absolute; right: -34px; top: 14px; width: 112px; height: 30px; border: 5px solid #f7b487; border-radius: 50%; transform: rotate(-18deg); pointer-events: none; }
.mi .mi-top { position: relative; z-index: 1; align-items: center; margin-bottom: 4px; }
.mi .mi-top h2 { position: relative; z-index: 0; margin: 0; font: 400 clamp(40px, 8vw, 58px)/1.1 var(--font); font-style: italic; color: #4a1030; text-shadow: none; transform: rotate(-3deg); padding: 0 16px 0 6px; }
.mi .mi-top h2::before { content: ''; position: absolute; left: -8px; right: 0; bottom: 8%; height: 50%; z-index: -1; background: #ffd23f; border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; transform: rotate(1.5deg) skewX(-8deg); }
.mi .mi-top .coin-pill { margin-right: 58px; background-color: #5c3a28; }
.mh { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 8px; font: 400 clamp(24px, 5vw, 30px)/1.2 var(--font); font-style: italic; color: #3a1020; text-align: center; }
.mh span { position: relative; z-index: 0; padding: 2px 22px; } .mh span::before { content: ''; position: absolute; left: 0; right: 0; top: 18%; bottom: 8%; z-index: -1; border-radius: 45% 55% 50% 50% / 60% 50% 50% 40%; transform: rotate(-1deg) skewX(-10deg); }
.mh.daily span::before { background: #f9c4a0; opacity: 0.8; } .mh.weekly span::before { background: #c79bf0; opacity: 0.85; } .mh.ach span::before { background: #ffd23f; opacity: 0.95; }
.mh-st { flex: none; width: 24px; height: 24px; background: #ffd23f; border: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 1px 0 #3a2630); animation: twinkle 2.6s ease-in-out infinite; } .mh-st:last-child { animation-delay: 1.2s; }
.mlist { display: grid; gap: 10px; }
.mcard { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 14px 10px 8px; background: linear-gradient(100deg, #fff6e6, #fbe4cc); border: 2.5px solid rgba(90, 40, 60, 0.55); border-radius: 28px 18px 30px 20px / 20px 28px 20px 26px; box-shadow: 0 4px 0 rgba(58, 38, 48, 0.15); transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.22s; }
.mcard:hover { transform: translateY(-3px) scale(1.012); box-shadow: 0 8px 0 rgba(58, 38, 48, 0.16), 0 0 20px 3px rgba(255, 138, 200, 0.4); }
.mcard.done { background: linear-gradient(100deg, #dff3d6, #bfe6b8); border-color: rgba(47, 110, 68, 0.6); box-shadow: 0 4px 0 rgba(30, 90, 50, 0.18), 0 0 18px 2px rgba(120, 210, 130, 0.45); }
.mcard.done:hover { box-shadow: 0 8px 0 rgba(30, 90, 50, 0.2), 0 0 24px 5px rgba(120, 210, 130, 0.65); }
.mc-ill { position: relative; display: grid; place-items: center; height: 68px; padding-right: 12px; border-right: 2.5px solid rgba(90, 40, 60, 0.25); animation: ofBob 5s ease-in-out infinite; } .mcard:nth-child(2) .mc-ill { animation-delay: -1.5s; } .mcard:nth-child(3) .mc-ill { animation-delay: -3s; }
.mc-ill svg { width: 66px; height: 60px; display: block; } .mc-ill canvas.runner { width: 64px; height: 64px; display: block; }
.mc-body { display: grid; gap: 5px; min-width: 0; } .mc-body .mt { font: 700 17px/1.3 var(--font-ui); color: #3a1020; } .mc-body small { font: 700 14px/1.3 var(--font-ui); color: #5a3a46; }
.mc-bar { position: relative; display: block; height: 14px; background: #f0dcc0; border: 2px solid rgba(90, 40, 60, 0.55); border-radius: 99px; overflow: visible; }
.mc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; display: block; border-radius: 99px; background: linear-gradient(90deg, #2f9a54, #3ec9a0); transition: width 1.1s cubic-bezier(.3, .8, .2, 1); overflow: visible; }
.mc-fill::before { content: ''; position: absolute; inset: 0; border-radius: 99px; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0 7px, transparent 7px 16px); } .mc-fill::after { content: ''; position: absolute; top: 0; bottom: 0; width: 34px; left: -40px; border-radius: 99px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); animation: mcShim 3.4s ease-in-out infinite; clip-path: inset(0 round 99px); }
@keyframes mcShim { 0%, 40% { left: -40px; } 100% { left: 110%; } }
.mc-star { position: absolute; right: -9px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: #ffd23f; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 1px 0 #3a2630); animation: twinkle 2.2s ease-in-out infinite; }
.mc-fill[data-w="0"] .mc-star { display: none; }
.mc-rw { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px 6px 16px; font: 900 19px/1 var(--font-ui); color: #5a3a10; background: linear-gradient(#ffe58a, #ffc619); border: 2.5px solid #3a2630; border-radius: 99px; box-shadow: 0 3px 0 #a6700a; overflow: hidden; }
.mc-rw::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 24px; left: -40px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-20deg); animation: mcShim 3.8s ease-in-out infinite; } .mc-rw .coin { width: 22px; height: 22px; }
.mcard:hover .mc-rw .coin { animation: mcCoin 0.5s ease; } @keyframes mcCoin { 30% { transform: translateY(-6px) rotate(-12deg); } 60% { transform: translateY(0) rotate(8deg); } }
.mc-done { position: relative; display: grid; place-items: center; width: 108px; height: 68px; animation: mcPop 0.7s cubic-bezier(.3, 1.7, .5, 1) both; } .mc-done .mc-cloud { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(30, 90, 50, 0.3)); }
.mc-done b { position: relative; margin-top: 18px; font: 900 13px/1 var(--font-ui); font-style: italic; color: #fff; transform: rotate(-6deg); text-shadow: 0 1px 0 #1d5f36; }
.sp { position: absolute; width: 11px; height: 11px; background: #fff6a8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px rgba(255, 210, 63, 0.95)); animation: twinkle 2.2s ease-in-out infinite; pointer-events: none; }
.mc-done .sp.a { left: -4px; top: 4px; } .mc-done .sp.b { right: -2px; top: -2px; width: 14px; height: 14px; animation-delay: .7s; } .mc-done .sp.c { right: 6px; bottom: -4px; width: 9px; height: 9px; animation-delay: 1.3s; }
@keyframes mcPop { 0% { transform: scale(0) rotate(-14deg); } 70% { transform: scale(1.15) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
/* achievements as medals */
.mdls { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 8px; padding-bottom: 6px; }
.mdl { position: relative; display: grid; justify-items: center; gap: 3px; text-align: center; transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1); } .mdl:hover { transform: translateY(-4px) scale(1.05); }
.mdl-badge { position: relative; display: block; width: 72px; height: 72px; } .mdl-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mdl.on .mdl-badge { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mc) 70%, transparent)) drop-shadow(0 3px 0 rgba(58, 38, 48, 0.28)); animation: ofBob 5s ease-in-out infinite; } .mdl.on:nth-child(2n) .mdl-badge { animation-delay: -2s; }
.mdl.off .mdl-badge { filter: grayscale(0.85) brightness(1.05) drop-shadow(0 3px 0 rgba(58, 38, 48, 0.2)); opacity: 0.8; } .mdl.off .mdl-ic { opacity: 0.35; }
.mdl-lock { z-index: 2; } .mdl-t { font: 700 12.5px/1.25 var(--font-ui); color: #3a1020; max-width: 100px; } .mdl-r { font: 800 12px/1.2 var(--font-ui); color: #8a5a10; display: inline-flex; align-items: center; gap: 3px; }
.mdl.on .sp.a { right: -2px; top: -2px; } .mdl.on .sp.b { left: -4px; bottom: 6px; width: 8px; height: 8px; animation-delay: 1s; }
.mi .panel-actions { margin-top: 14px; }
@media (max-width: 520px) { .mcard { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 10px 8px 6px; } .mc-ill svg { width: 54px; height: 50px; } .mc-ill canvas.runner { width: 54px; height: 54px; } .mc-ill { height: 58px; padding-right: 8px; } .mc-body .mt { font-size: 15px; } .mc-rw { font-size: 16px; padding: 5px 10px 5px 12px; } .mc-done { width: 88px; height: 58px; } .mc-done b { font-size: 11px; margin-top: 14px; } .mi::before { width: 70px; height: 70px; right: -24px; } .mi::after { width: 90px; right: -30px; } .mi .mi-top .coin-pill { margin-right: 44px; } .mdls { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .mdl-badge { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .mi::before, .mc-ill, .mdl.on .mdl-badge, .mc-fill::after, .mc-rw::after, .mc-star, .mh-st, .sp, .mc-done { animation: none; } .mc-fill { transition: none; } }
.mh::after, .mh span::after { content: none !important; display: none !important; } .panel h3.mh { display: flex; }
.of-cats, .bd-tabs { margin: 2px -6px -2px !important; padding: 18px 12px 26px !important; } .of-pose { margin: -12px -6px -14px !important; padding: 18px 12px 26px !important; } .mix-chips { margin: -10px -4px -12px; padding: 14px 8px 20px; }
/* ---- no more plain underlines; separators are painted squiggles, headings get a brush stroke behind them ---- */
:root { --sq-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='12' viewBox='0 0 64 12'%3E%3Cg fill='%23ff8ac8'%3E%3Ccircle cx='8' cy='6' r='2.4'/%3E%3Ccircle cx='24' cy='6' r='2.4'/%3E%3Ccircle cx='40' cy='6' r='2.4'/%3E%3Ccircle cx='56' cy='6' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); --sq-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='64' viewBox='0 0 12 64'%3E%3Cg fill='%23ff8ac8'%3E%3Ccircle cx='6' cy='8' r='2.4'/%3E%3Ccircle cx='6' cy='24' r='2.4'/%3E%3Ccircle cx='6' cy='40' r='2.4'/%3E%3Ccircle cx='6' cy='56' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); }
.panel h3::after { content: none !important; display: none !important; }
.panel h3:not(.mh) { z-index: 0; padding: 0 12px; margin-left: -4px; }
.panel h3:not(.mh)::before { content: ''; position: absolute; left: 0; right: 0; top: 36%; bottom: -2%; z-index: -1; background: #fcdfcc; border-radius: 45% 55% 50% 50% / 60% 50% 50% 40%; transform: rotate(-1deg) skewX(-10deg); opacity: 0.85; }
.panel .pg > h3::before { background: #ffd9a0; } .panel .pg > h3:nth-of-type(2n)::before { background: #d9c2f5; }
.comet.is-ready em, .menu-ui .tag { text-decoration: none !important; }
.hrow, .pg-act .row, .set-row { border-bottom: 0 !important; padding-bottom: 12px; background: var(--sq-h) left bottom / 64px 12px repeat-x; }
.ms { border-left: 0 !important; position: relative; }
.ms + .ms::before { content: ''; position: absolute; left: -6px; top: 8%; bottom: 8%; width: 12px; background: var(--sq-v) center / 12px 64px repeat-y; }
@media (max-width: 760px) { .ms + .ms::before { display: none; } .ms:nth-child(2n)::before { display: block; } }
.oc-rows span { border-left: 0 !important; position: relative; } .oc-rows span + span::before { content: ''; position: absolute; left: -2px; top: 6%; bottom: 6%; width: 12px; background: var(--sq-v) center / 12px 64px repeat-y; }
.mc-ill { border-right: 0 !important; } .mc-ill::after { content: ''; position: absolute; right: -2px; top: 4%; bottom: 4%; width: 12px; background: var(--sq-v) center / 12px 64px repeat-y; }
#screen-outfits .of-modes { flex-wrap: wrap; max-width: 100%; margin-left: 0; } #screen-outfits .of-modes .chip { padding: 5px 14px !important; font-size: 15px !important; min-height: 42px !important; } @media (max-width: 420px) { #screen-outfits .of-modes { gap: 6px; } #screen-outfits .of-modes .chip { padding: 4px 12px !important; font-size: 14px !important; } #screen-outfits .of-title { font-size: 40px; } }
.pg-stats { grid-template-columns: repeat(auto-fill, minmax(min(176px, 100%), 1fr)); } .pg-hero { min-width: 0; } .pg-hero > * { min-width: 0; }
/* missions: the decorative planet sits fully inside the card so its ring is never sliced by the card edge */
.mi::before { right: 22px; top: 14px; width: 62px; height: 62px; z-index: 0; }
.mi::after { right: 8px; top: 34px; width: 90px; height: 24px; border-width: 4.5px; z-index: 1; }
.mi .mi-top .coin-pill { margin-right: 100px; }
@media (max-width: 520px) { .mi::before { right: 16px; top: 12px; width: 48px; height: 48px; } .mi::after { right: 6px; top: 27px; width: 70px; height: 20px; border-width: 4px; } .mi .mi-top .coin-pill { margin-right: 76px; } }
.mc-fill { overflow: hidden !important; }
.mc-star { position: absolute !important; right: auto !important; top: 50% !important; left: 0; width: 20px; height: 20px; transform: translate(-50%, -50%) !important; transition: left 1.1s cubic-bezier(.3, .8, .2, 1); z-index: 2; }
.mc-star[data-w="0"] { display: none; }
@media (max-width: 380px) {
.mi::before, .mi::after { display: none; } .mi .mi-top .coin-pill { margin-right: 0; }
.mcard { grid-template-columns: 52px minmax(0, 1fr); } .mc-rw, .mc-done { grid-column: 1 / -1; justify-self: end; } .mc-ill svg { width: 46px; height: 44px; } .mc-ill canvas.runner { width: 46px; height: 46px; } .mc-ill { height: 52px; padding-right: 6px; } .mc-body .mt { font-size: 14px; } .mh { font-size: 22px; } .mh span { padding: 2px 12px; }
}
.mi .mi-top { flex-wrap: wrap; gap: 6px 10px; } @media (max-width: 380px) { .mi .mi-top h2 { font-size: 40px; } }
/* ================= loading screen: a painted, moving little adventure ================= */
#screen-loading { overflow: hidden; background: radial-gradient(circle at 18% 12%, #ffe6a8 0, transparent 38%), radial-gradient(circle at 86% 18%, #f4c4ff 0, transparent 40%), radial-gradient(circle at 70% 92%, #f9c5a2 0, transparent 46%), radial-gradient(circle at 8% 88%, #a8ecdc 0, transparent 38%), #fdecda; }
.ld-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ld-blob { position: absolute; border-radius: 46% 54% 50% 50% / 56% 44% 56% 44%; filter: blur(2px); opacity: 0.55; animation: ldDrift 14s ease-in-out infinite; }
.ld-blob.b1 { left: -8%; top: 8%; width: 36vmax; height: 26vmax; background: #fce3d3; } .ld-blob.b2 { right: -10%; top: 30%; width: 34vmax; height: 24vmax; background: #d9c4ff; animation-delay: -4s; } .ld-blob.b3 { left: 10%; bottom: -10%; width: 40vmax; height: 24vmax; background: #b9f0dc; animation-delay: -8s; } .ld-blob.b4 { right: 12%; bottom: -8%; width: 28vmax; height: 20vmax; background: #ffe39a; animation-delay: -2s; }
@keyframes ldDrift { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(2vmax, -2vmax) rotate(6deg); } }
.ld-planet { position: absolute; left: 6%; top: 10%; width: clamp(90px, 16vmin, 170px); height: auto; animation: ldBob 7s ease-in-out infinite, ldSpin 70s linear infinite; filter: drop-shadow(0 6px 0 rgba(58, 38, 48, 0.15)); }
.ld-comet { position: absolute; left: 0; top: 0; width: clamp(80px, 14vmin, 150px); opacity: 0; animation: ldComet 7s 1s ease-in infinite; }
@keyframes ldComet { 0% { transform: translate(110vw, -6vh) rotate(0); opacity: 0; } 8% { opacity: 1; } 55% { transform: translate(-20vw, 62vh); opacity: 1; } 56%, 100% { opacity: 0; transform: translate(-20vw, 62vh); } }
@keyframes ldBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } @keyframes ldSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
.ld-orb { position: absolute; border-radius: 50%; border: 3px solid #3a2630; animation: ldBob 6s ease-in-out infinite; } .ld-orb.o1 { right: 9%; top: 14%; width: clamp(46px, 8vmin, 84px); aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #ffd08a, #f08a3c 62%, #b9561c); } .ld-orb.o2 { left: 12%; bottom: 14%; width: clamp(36px, 6vmin, 62px); aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #a6e3ae, #2f9a8c 62%, #1d5f6a); animation-delay: -2s; } .ld-orb.o3 { right: 18%; bottom: 20%; width: clamp(24px, 4vmin, 40px); aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #e3acf4, #a76ae0 62%, #6a3a9a); animation-delay: -4s; }
.ld-orb b { position: absolute; left: -32%; right: -32%; top: 36%; height: 26%; border: 4px solid #f6aa78; border-radius: 50%; transform: rotate(-18deg); }
.ld-st { position: absolute; width: 18px; height: 18px; background: #ffc619; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.4s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(255, 190, 40, 0.8)); }
.ld-st.s1 { left: 22%; top: 20%; } .ld-st.s2 { left: 38%; top: 8%; width: 12px; height: 12px; animation-delay: .5s; background: #fff; } .ld-st.s3 { right: 28%; top: 12%; animation-delay: 1s; background: #f8ba91; } .ld-st.s4 { right: 8%; top: 44%; width: 14px; height: 14px; animation-delay: 1.5s; } .ld-st.s5 { left: 7%; top: 52%; width: 14px; height: 14px; animation-delay: .9s; background: #f8ba91; } .ld-st.s6 { left: 30%; bottom: 10%; animation-delay: .3s; } .ld-st.s7 { right: 34%; bottom: 8%; width: 12px; height: 12px; animation-delay: 1.8s; background: #fff; } .ld-st.s8 { left: 48%; top: 6%; width: 10px; height: 10px; animation-delay: 1.2s; } .ld-st.s9 { right: 14%; bottom: 36%; animation-delay: 2.1s; background: #a8ecdc; }
.load-card { position: relative; z-index: 2; display: grid; justify-items: center; gap: 0; width: min(94vw, 520px); }
.load-logo { width: min(66vw, 340px); height: auto; margin-bottom: 8px; animation: ldLogo 3.6s ease-in-out infinite; filter: drop-shadow(0 8px 0 rgba(122, 31, 61, 0.15)); }
@keyframes ldLogo { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg) scale(1.02); } }
.ld-track { position: relative; width: min(420px, 82vw); margin: 34px auto 10px; padding-top: 2px; }
.ld-bar { position: relative; height: 24px; border: 3.5px solid #3a2630; border-radius: 99px; background: #fff0da; overflow: hidden; box-shadow: 0 4px 0 rgba(58, 38, 48, 0.85), 0 0 22px 3px rgba(255, 138, 200, 0.45); }
#load-fill { position: relative; display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #f4985a, #f8ba91 45%, #ffc619 100%); transition: width 0.25s ease; }
#load-fill::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24'%3E%3Cpath d='M0 12 Q11 2 22 12 T44 12' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") 0 50% / 44px 100% repeat-x; animation: ldWave 0.9s linear infinite; }
#load-fill::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; left: -60px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); animation: ldShine 1.8s ease-in-out infinite; }
@keyframes ldWave { to { background-position-x: -44px; } } @keyframes ldShine { 0% { left: -60px; } 100% { left: 110%; } }
.ld-runner { position: absolute; z-index: 3; left: calc(var(--p) * 100%); bottom: 14px; width: 66px; height: 66px; transform: translateX(-55%); transition: left 0.25s ease; filter: drop-shadow(0 4px 0 rgba(58, 38, 48, 0.2)); pointer-events: none; }
.ld-pct { position: absolute; right: -4px; top: -40px; padding: 2px 12px 3px; font: 900 15px/1.2 var(--font-ui); color: #5a1a3a; background: #ffd23f; border: 2.5px solid #3a2630; border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; box-shadow: 0 3px 0 rgba(58, 38, 48, 0.3); transform: rotate(5deg); }
.load-card #load-msg { margin: 8px 0 2px; font: 800 clamp(18px, 4.6vw, 22px)/1.3 var(--font-ui); color: #4a1030; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6); }
.ld-quip { margin: 0; min-height: 1.6em; font: 600 clamp(14px, 3.6vw, 16px)/1.5 var(--font); color: #764d3e; } .ld-quip.in { animation: ldQuip 0.5s cubic-bezier(.3, 1.5, .5, 1); } @keyframes ldQuip { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ld-blob, .ld-planet, .ld-comet, .ld-orb, .ld-st, .load-logo, #load-fill::before, #load-fill::after, .ld-quip.in { animation: none; } .ld-comet { display: none; } }
.ld-runner { width: 88px; height: 88px; bottom: 12px; } .ld-track { margin-top: 48px; } .ld-pct { top: -52px; }
/* ================================================================== AVATAR STUDIO ================================================================== */
.screen.avs { background: radial-gradient(90% 70% at 15% 0%, #fef2ea 0, transparent 60%), radial-gradient(80% 70% at 100% 100%, #e6f1ff 0, transparent 60%), linear-gradient(160deg, #fff3de, #fbe0c8 60%, #f6d3c2); overflow: hidden; z-index: 22; }
.av-wrap { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: calc(12px + var(--sat) + var(--tv)) calc(18px + var(--sar) + var(--tv)) calc(12px + var(--sab) + var(--tv)) calc(18px + var(--sal) + var(--tv)); max-width: 1280px; margin: 0 auto; box-sizing: border-box; }
.av-deco { position: absolute; pointer-events: none; z-index: 0; background: #ffd23f; clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%); opacity: 0.85; animation: avTw 3.6s ease-in-out infinite; }
.av-deco.ad1 { width: 26px; height: 26px; left: 3%; top: 14%; } .av-deco.ad2 { width: 18px; height: 18px; right: 6%; top: 9%; background: #f8ba91; animation-delay: 1.1s; } .av-deco.ad3 { width: 22px; height: 22px; left: 46%; bottom: 4%; background: #b58cff; animation-delay: 2s; } .av-deco.ad4 { width: 14px; height: 14px; left: 41%; top: 18%; background: #8fe8ff; animation-delay: .6s; }
@keyframes avTw { 0%, 100% { transform: scale(0.7) rotate(0); opacity: 0.45; } 50% { transform: scale(1.1) rotate(25deg); opacity: 1; } }
.av-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.av-title { margin: 0; font: 700 clamp(28px, 4.4vmin, 42px)/1 var(--font); color: var(--burgundy); flex: 1; text-align: left; letter-spacing: -0.5px; text-shadow: 3px 3px 0 rgba(255, 210, 63, 0.85); }
.av-save-top { flex: 0 0 auto; }
.av-main { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 44%) minmax(0, 1fr); gap: 18px; }
.av-left { min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 12px; padding: 4px 8px 22px 4px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.av-right { min-height: 0; display: flex; flex-direction: column; gap: 10px; background: rgba(255, 250, 240, 0.78); border: 3px solid var(--ink); border-radius: 26px 14px 28px 16px; box-shadow: 6px 8px 0 rgba(58, 38, 48, 0.16); padding: 12px 12px 8px; overflow: hidden; }
/* stage */
.av-stage { position: relative; width: min(100%, 48vh, 470px); aspect-ratio: 1; margin: 6px auto 4px; flex: 0 0 auto; }
.av-halo { position: absolute; inset: -7%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 63, 0.55) 0, rgba(255, 138, 200, 0.28) 48%, transparent 70%); animation: avHalo 5s ease-in-out infinite; }
@keyframes avHalo { 0%, 100% { transform: scale(0.96); opacity: 0.8; } 50% { transform: scale(1.04); opacity: 1; } }
.av-canvas-wrap { position: absolute; inset: 0; border-radius: 50%; border: 5px solid var(--ink); background: var(--paper); box-shadow: 0 10px 0 rgba(58, 38, 48, 0.2); overflow: hidden; animation: avFloat 5.5s ease-in-out infinite; }
@keyframes avFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.av-canvas-wrap.pop { animation: avPop 0.34s cubic-bezier(.3, 1.6, .5, 1), avFloat 5.5s ease-in-out 0.34s infinite; }
@keyframes avPop { 0% { transform: scale(0.96); } 55% { transform: scale(1.035); } 100% { transform: scale(1); } }
.av-canvas-wrap.shake { animation: avShake 0.5s ease, avFloat 5.5s ease-in-out 0.5s infinite; }
@keyframes avShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg) scale(1.03); } 45% { transform: rotate(3.5deg) scale(1.03); } 70% { transform: rotate(-2deg); } }
#av-canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.av-pill { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); background: #fff3de; border: 3px solid var(--ink); border-radius: 999px; padding: 3px 14px; font: 700 14px var(--font); color: var(--ink); white-space: nowrap; box-shadow: 2px 3px 0 rgba(58, 38, 48, 0.25); }
.av-pill.dirty { background: #ffd23f; }
/* background strip */
.av-bgstrip { display: flex; gap: 8px; overflow-x: auto; padding: 14px 10px 14px; margin: 4px -4px 0; scrollbar-width: thin; -webkit-overflow-scrolling: touch; touch-action: pan-x; flex: 0 0 auto; }
.av-bgchip { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); padding: 0; cursor: pointer; overflow: hidden; box-shadow: 2px 3px 0 rgba(58, 38, 48, 0.25); transition: transform 0.15s; }
.av-bgchip canvas { width: 100%; height: 100%; display: block; }
.av-bgchip:hover, .av-bgchip:focus-visible { transform: translateY(-4px) scale(1.08); outline: none; }
.av-bgchip.on { border-color: #df7f5c; box-shadow: 0 0 0 4px #ffd23f, 2px 3px 0 rgba(58, 38, 48, 0.25); transform: translateY(-3px); }
.av-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; flex: 0 0 auto; }
.av-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.av-block { background: rgba(255, 250, 240, 0.7); border: 3px solid var(--ink); border-radius: 20px 12px 22px 14px; padding: 8px 12px 12px; box-shadow: 4px 5px 0 rgba(58, 38, 48, 0.14); flex: 0 0 auto; }
.av-block h4 { margin: 2px 0 8px; font: 700 18px var(--font); color: var(--burgundy); } .av-block h4 small { font: 600 13px var(--font); color: #8a6a5c; }
.av-presets { display: flex; gap: 8px; overflow-x: auto; padding: 10px 6px 14px; margin: -4px -6px -6px; scrollbar-width: thin; touch-action: pan-x; }
.av-presets .chip { flex: 0 0 auto; }
.av-lookname { display: flex; gap: 8px; margin-bottom: 8px; } .av-lookname input { flex: 1; min-width: 0; font: 600 17px var(--font); padding: 8px 12px; border: 3px solid var(--ink); border-radius: 14px 8px 16px 10px; background: #fffdf6; color: var(--ink); -webkit-user-select: text; user-select: text; }
.av-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.av-look { position: relative; border: 3px solid var(--ink); border-radius: 18px 10px 20px 12px; background: #fffdf6; padding: 6px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; box-shadow: 2px 3px 0 rgba(58, 38, 48, 0.2); transition: transform 0.15s; }
.av-look.on { background: #ffe7a0; border-color: #df7f5c; transform: translateY(-2px); }
.av-look-b { background: none; border: 0; padding: 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 700 14px var(--font); color: var(--ink); width: 100%; min-width: 0; }
.av-look-b img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); display: block; } .av-look-b b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .av-look-b small { font: 600 12px var(--font); color: #8a6a5c; }
.av-look.empty { border-style: solid; background: rgba(255, 253, 246, 0.6); } .av-plus { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #c69a8a; display: grid; place-items: center; font: 700 28px/1 var(--font); color: #bc7960; }
.av-look-a { display: flex; gap: 4px; } .av-mini-b { font: 700 12px var(--font); border: 2px solid var(--ink); background: #ffd23f; border-radius: 10px; padding: 3px 8px; cursor: pointer; color: var(--ink); } .av-mini-b.del { background: #f6dcc0; padding: 3px 8px; font-size: 14px; line-height: 1; }
.av-cta { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; } .av-cta .btn { flex: 1 1 150px; } .av-save-big { font-size: 24px !important; }
/* categories */
.av-cats { display: flex; gap: 8px; overflow-x: auto; padding: 14px 8px 20px; margin: -6px -4px -8px; scrollbar-width: thin; touch-action: pan-x; flex: 0 0 auto; -webkit-overflow-scrolling: touch; }
.av-cat { flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 6px; border: 3px solid var(--ink); border-radius: 20px 10px 22px 12px; background: #fff3de; cursor: pointer; font: 700 14px/1.05 var(--font); color: var(--ink); box-shadow: 3px 4px 0 rgba(58, 38, 48, 0.22); transition: transform 0.15s, background 0.15s; }
.av-cat canvas { width: 52px; height: 52px; display: block; }
.av-cat:hover, .av-cat:focus-visible { transform: translateY(-4px) scale(1.05); outline: none; } .av-cat.on { background: #ffd23f; transform: translateY(-3px); box-shadow: 3px 7px 0 rgba(58, 38, 48, 0.28); }
.av-panel { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 26px 6px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.av-sec { margin: 0 0 18px; } .av-h { position: relative; z-index: 0; display: inline-block; margin: 6px 0 10px; padding: 0 12px; font: 700 22px var(--font); color: var(--burgundy); text-align: left; }
.av-h::before { content: ''; position: absolute; left: 0; right: 0; top: 40%; bottom: -4%; z-index: -1; background: #fcdfcc; border-radius: 45% 55% 50% 50% / 60% 50% 50% 40%; transform: rotate(-1deg) skewX(-10deg); opacity: 0.85; } .av-sec:nth-of-type(2n) .av-h::before { background: #ffd9a0; } .av-sec:nth-of-type(3n) .av-h::before { background: #d9c2f5; }
.av-h small { font: 600 13px var(--font); color: #8a6a5c; margin-left: 4px; } .av-sub { margin: 10px 0 6px; font: 700 16px var(--font); color: #7a4a5c; text-align: left; } .av-note { margin: 8px 0 0; font: 600 14px var(--font); color: #8a6a5c; text-align: left; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 12px 10px; padding: 6px 4px 8px; background: var(--sq-h) left bottom / 64px 12px repeat-x; padding-bottom: 16px; }
.av-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; border: 0; cursor: pointer; font: 700 13px/1.1 var(--font); color: var(--ink); min-width: 0; -webkit-tap-highlight-color: transparent; }
.av-th { position: relative; display: block; width: 100%; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 22px 12px 24px 14px; background: radial-gradient(circle at 50% 38%, #fffdf6, #fbe8cf); overflow: hidden; box-shadow: 2px 3px 0 rgba(58, 38, 48, 0.22); transition: transform 0.18s cubic-bezier(.3, 1.5, .5, 1), box-shadow 0.18s; }
.av-th canvas { width: 100%; height: 100%; display: block; } .av-none .av-th { display: grid; place-items: center; }
.av-opt:hover .av-th, .av-opt:focus-visible .av-th { transform: translateY(-5px) scale(1.06); box-shadow: 3px 9px 12px rgba(58, 38, 48, 0.22); } .av-opt:focus-visible { outline: none; }
.av-opt:active .av-th { transform: translateY(-1px) scale(0.98); }
.av-opt.on .av-th { border-color: #df7f5c; background: radial-gradient(circle at 50% 38%, #fffbe8, #ffe39a); box-shadow: 0 0 0 4px #ffd23f, 2px 3px 0 rgba(58, 38, 48, 0.22); }
.av-tick { position: absolute; right: 5px; top: 5px; width: 24px; height: 24px; border-radius: 50%; background: #52a85a; border: 2.5px solid var(--ink); } .av-tick::after { content: ''; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(40deg); }
.av-lbl { max-width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.av-opt.locked .av-th canvas { filter: grayscale(0.9) brightness(0.8); opacity: 0.6; } .av-lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #b283a5; border: 3px solid var(--ink); display: grid; place-items: center; } .av-need { font: 600 11px/1.1 var(--font); color: #865d4e; max-width: 100%; }
.av-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; } .av-chips .chip { min-height: 38px !important; }
.av-sw { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px 8px; }
.av-swatch { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--ink); background: var(--c); cursor: pointer; padding: 0; box-shadow: 2px 3px 0 rgba(58, 38, 48, 0.25); transition: transform 0.15s; display: block; }
.av-swatch:hover, .av-swatch:focus-visible { transform: translateY(-3px) scale(1.12); outline: none; } .av-swatch.on { box-shadow: 0 0 0 4px #ffd23f, 0 0 0 7px #df7f5c; transform: scale(1.08); }
.av-swatch.orig { background: conic-gradient(#8a5a3a, #d9692a, #ebab81, #3e72e2, #8a5a3a); }
.av-custom { overflow: hidden; background: conic-gradient(#df7f5c, #fec54f, #52a85a, #3e72e2, #8650d6, #df7f5c); } .av-custom input { position: absolute; inset: -6px; width: 60px; height: 60px; opacity: 0; cursor: pointer; }
/* modals */
.av-modal { position: absolute; inset: 0; z-index: 30; background: rgba(58, 38, 48, 0.55); display: flex; align-items: center; justify-content: center; padding: 14px; overflow: auto; backdrop-filter: blur(3px); } .av-modal[hidden] { display: none; }
.av-mcard { width: min(560px, 100%); max-height: 100%; overflow: auto; background: var(--paper); border: 4px solid var(--ink); border-radius: 28px 16px 32px 18px; box-shadow: 8px 10px 0 rgba(58, 38, 48, 0.3); padding: 16px 18px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.av-mtabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.av-mprev { width: 100%; display: grid; place-items: center; min-height: 0; } #av-exp-canvas { max-width: 100%; max-height: min(52vh, 560px); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 4px 6px 0 rgba(58, 38, 48, 0.25); background: #fff3de; display: block; } #av-exp-canvas.story { max-height: min(56vh, 600px); } .av-fallback { max-width: 100%; max-height: 48vh; border-radius: 16px; margin-top: 8px; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
.av-minfo { margin: 0; font: 600 15px/1.35 var(--font); color: #6a4a3c; } .av-minfo b { color: var(--burgundy); } .av-merr { margin: 0; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 14px; background: #ffd9d0; font: 700 15px/1.3 var(--font); color: #7a1f1f; } .av-merr[hidden] { display: none; }
.av-mbtns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .av-mbtns .btn { flex: 1 1 140px; } .av-mbtns [hidden] { display: none !important; }
.av-dcard h3 { margin: 4px 0 0; font: 700 32px var(--font); color: var(--burgundy); } .av-dcard p { margin: 0 0 6px; font: 600 17px/1.35 var(--font); } .av-dpic img { border-radius: 50%; border: 5px solid var(--ink); box-shadow: 0 8px 0 rgba(58, 38, 48, 0.2); background: var(--paper); animation: avPop 0.5s cubic-bezier(.3, 1.6, .5, 1); }
/* menu chip + mini avatars around the game */
.av-chip { position: relative; width: 62px; height: 62px; padding: 0; border-radius: 50%; border: 3px solid var(--ink); background: #fff3de; cursor: pointer; box-shadow: 3px 4px 0 rgba(58, 38, 48, 0.3); transition: transform 0.18s cubic-bezier(.3, 1.5, .5, 1), box-shadow 0.18s; flex: 0 0 auto; }
.av-chip .avc-pic { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: block; } .av-chip .avc-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.av-chip .avc-plus { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: #df7f5c; color: #fff; border: 3px solid var(--ink); font: 700 18px/20px var(--font); text-align: center; font-style: normal; animation: avTw 2.6s ease-in-out infinite; }
.av-chip.has .avc-plus { background: #ffd23f; color: var(--ink); font-size: 14px; animation: none; } .av-chip.has .avc-plus::before { content: '\270E'; }
.av-chip.has .avc-plus { text-indent: -999px; overflow: hidden; } .av-chip.has .avc-plus::before { text-indent: 0; position: absolute; left: 0; right: 0; top: 0; }
.av-chip:hover, .av-chip:focus-visible, .av-chip.focus { transform: translateY(-5px) scale(1.08); box-shadow: 3px 10px 14px rgba(58, 38, 48, 0.25); outline: none; }
.av-mini { border-radius: 50%; border: 2.5px solid var(--ink); background: var(--paper); object-fit: cover; vertical-align: middle; flex: 0 0 auto; }
@media (max-width: 820px), (max-aspect-ratio: 1/1) {
.av-main { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; gap: 10px; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding-right: 2px; }
.av-left, .av-right { display: contents; }
.av-stage { order: 1; position: sticky; top: 0; z-index: 3; width: min(60vw, 34vh, 300px); margin: 4px auto 14px; } .av-bgstrip { order: 2; } .av-actions { order: 3; } .av-cats { order: 4; background: rgba(255, 250, 240, 0.85); } .av-panel { order: 5; overflow: visible; flex: 0 0 auto; background: rgba(255, 250, 240, 0.78); border: 3px solid var(--ink); border-radius: 22px 12px 24px 14px; padding: 10px 10px 18px; }
.av-block:nth-of-type(1) { order: 6; } .av-left > .av-block { order: 6; } .av-cta { order: 7; position: sticky; bottom: 0; z-index: 3; padding: 8px 0 2px; background: linear-gradient(transparent, #f7dcc6 40%); }
.av-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 10px 8px; } .av-canvas-wrap { box-shadow: 0 6px 0 rgba(58, 38, 48, 0.2); }
.av-save-top { display: none; }
}
@media (max-width: 480px) { .av-title { font-size: 28px; } .av-cat { width: 74px; } .av-cat canvas { width: 44px; height: 44px; } .av-chip { width: 50px; height: 50px; } }
@media (max-height: 520px) and (min-aspect-ratio: 1/1) { .av-stage { width: min(100%, 52vh); } .av-top { gap: 8px; } .av-title { font-size: 26px; } .av-main { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .av-deco, .av-halo, .av-canvas-wrap, .av-canvas-wrap.pop, .av-chip .avc-plus { animation: none !important; } }
/* avatar in profile card + leaderboard */
.pf-avbtn { position: relative; flex: 0 0 66px; width: 66px; height: 66px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; transition: transform 0.18s cubic-bezier(.3, 1.5, .5, 1); }
.pf-avbtn .pf-img { width: 66px; height: 66px; border-width: 3px; box-shadow: 0 4px 0 rgba(58, 38, 48, 0.25); display: block; } .pf-avbtn i { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font: 700 12px var(--font); font-style: normal; background: #ffd23f; border: 2px solid var(--ink); border-radius: 999px; padding: 0 8px; color: var(--ink); }
.pf-avbtn:hover, .pf-avbtn:focus-visible { transform: translateY(-4px) scale(1.07); outline: none; }
.bd-av { width: 38px; height: 38px; margin: 0 8px 0 2px; flex: 0 0 auto; } .bd-item { align-items: center; }
/* avatar prototype parked until production artwork exists (see docs/avatar/AVATAR_PRODUCTION_SPEC.md) */
.av-bgchip img { width: 100%; height: 100%; object-fit: cover; display: block; } .av-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* world picker */
.av-worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 14px; padding: 6px 4px 12px; }
.av-world { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 12px; text-align: left; cursor: pointer; background: #fffaf0; border: 3px solid var(--ink); border-radius: 24px 14px 26px 16px; box-shadow: 3px 5px 0 rgba(58, 38, 48, 0.2); font: inherit; color: var(--ink); transition: transform 0.2s cubic-bezier(.3, 1.5, .5, 1), box-shadow 0.2s; }
.av-world .avw-img { position: relative; display: block; aspect-ratio: 1; border-radius: 16px 9px 18px 11px; overflow: hidden; border: 3px solid var(--ink); background: #fde0bd; outline: 3px solid transparent; }
.av-world img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.5s ease; }
.av-world b { font: 700 18px/1.1 var(--font); color: var(--burgundy); margin-top: 4px; } .av-world small { font: 600 13px/1.25 var(--font); color: #7a5a56; }
.av-world:hover, .av-world:focus-visible { transform: translateY(-5px) scale(1.02); box-shadow: 3px 12px 14px rgba(58, 38, 48, 0.22); outline: none; } .av-world:hover img { transform: scale(1.06); }
.av-world.on { background: #fff1c0; border-color: #df7f5c; box-shadow: 0 0 0 4px #ffd23f, 3px 6px 0 rgba(58, 38, 48, 0.22); }
.avw-eye { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 250, 240, 0.92); border: 2.5px solid var(--ink); } .avw-eye::before { content: ''; position: absolute; left: 5px; top: 9px; width: 16px; height: 9px; border: 2.5px solid var(--ink); border-radius: 50%; } .avw-eye::after { content: ''; position: absolute; left: 11px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.avw-ok { position: absolute; left: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: #52a85a; border: 3px solid var(--ink); animation: avPop 0.4s cubic-bezier(.3, 1.6, .5, 1); } .avw-ok::after { content: ''; position: absolute; left: 8px; top: 3px; width: 7px; height: 13px; border: solid #fff; border-width: 0 3.5px 3.5px 0; transform: rotate(40deg); }
#av-fade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; z-index: 2; }
.av-spk { position: absolute; z-index: 4; width: 16px; height: 16px; background: #ffd23f; pointer-events: none; clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%); animation: avSpk 1.2s ease-out forwards; }
@keyframes avSpk { 0% { transform: scale(0) rotate(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-34px) scale(1.2) rotate(120deg); opacity: 0; } }
@media (max-width: 820px), (max-aspect-ratio: 1/1) { .av-worlds { display: flex; overflow-x: auto; gap: 12px; padding: 6px 6px 16px; scroll-snap-type: x proximity; touch-action: pan-x; } .av-world { flex: 0 0 min(64vw, 250px); scroll-snap-align: start; } }
@media (prefers-reduced-motion: reduce) { .av-spk, .avw-ok, .av-world img { animation: none !important; transition: none !important; } #av-fade { display: none; } }
/* ---- hand-drawn dressing room replaces the CSS-built scene ---- */
#screen-outfits .of-stage { position: relative; display: block; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; overflow: visible; aspect-ratio: 1376 / 1143; container-type: inline-size; filter: drop-shadow(0 10px 14px rgba(74, 29, 106, 0.28)); }
#screen-outfits .of-stage .dr-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; pointer-events: none; -webkit-user-drag: none; }
#screen-outfits .of-stage #of-prev { position: absolute; z-index: 4; left: 29%; width: 42%; height: auto; bottom: 20.5%; aspect-ratio: 440 / 520; margin: 0; filter: drop-shadow(0 6px 5px rgba(60, 20, 70, 0.28)); }
#screen-outfits .of-stage .dr-mirror { position: absolute; z-index: 3; left: 75.6%; top: 30.5%; width: 11.2%; height: 40.5%; transform: rotate(7deg); overflow: hidden; border-radius: 46% 46% 3% 3% / 18% 18% 2% 2%; }
#screen-outfits .of-stage .dr-mirror canvas { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0.9; mix-blend-mode: multiply; }
#screen-outfits .of-stage .of-count { position: absolute; z-index: 5; left: 40%; top: 84.2%; width: 28%; height: 8.6%; transform: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: flex; align-items: center; justify-content: center; gap: 0.25em; font: 800 4.3cqw/1 var(--font-ui); color: #3a2630; white-space: nowrap; }
#screen-outfits .of-stage .of-count .coin { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
@media (max-width: 760px) { #screen-outfits .of-stage { max-width: 420px; margin: 0 auto; } }
#app #screen-outfits .of-stage, #screen-outfits .of-stage.card { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; }
#screen-outfits .of-stage #of-prev { left: 20%; width: 60%; bottom: 20.2%; }
#screen-outfits .of-stage .dr-mirror canvas { transform: scale(1.7); transform-origin: 50% 100%; }
/* bigger dressing room + bigger Lanky (figure ~71% of the stage height, feet on the podium top) */
@media (min-width: 761px) { #screen-outfits .of-main { grid-template-columns: minmax(340px, min(44vw, 590px)) minmax(0, 1fr); } }
#screen-outfits .of-stage #of-prev { left: 16%; width: 68%; bottom: 15.3%; }
#screen-outfits .of-stage .dr-mirror canvas { transform: scale(1.5); }
@media (max-width: 760px) { #screen-outfits .of-stage { max-width: 480px; } }
/* painted backdrop behind the dressing-room illustration (no more see-through box) */
#app #screen-outfits .of-stage, #screen-outfits .of-stage.card { background: #2a1d4a url("../assets/outfits/dressing-bg.webp") center / cover no-repeat !important; border: 3.5px solid #3a2630 !important; border-radius: 36px 22px 40px 26px !important; box-shadow: 0 8px 0 rgba(58, 38, 48, 0.28), 0 18px 26px rgba(122, 31, 61, 0.22) !important; overflow: hidden !important; filter: none !important; }
#screen-outfits .of-stage .dr-art { inset: 2% 1% 0 1%; width: 98%; height: 98%; }
/* ===== Painted-paper finish, game wide (gouache look: paper tooth + fibres over every screen incl. the game canvas) ===== */
body::after { content: none; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9989; background: radial-gradient(120% 90% at 50% 45%, rgba(255, 238, 214, 0) 55%, rgba(120, 70, 110, 0.10) 100%); }
@media (prefers-reduced-motion: reduce), (prefers-contrast: more) { body::after { opacity: 0.35; } }
/* level progress bar: sits inside the LV pill, inset evenly from both rounded ends */
.lvrow { padding-bottom: 11px; }
.lvrow .lvbar { position: absolute; left: 20px; right: 20px; width: auto; bottom: 4px; height: 5px; margin: 0; transform: none; border: 0; background: rgba(74, 18, 48, 0.14); border-radius: 5px; overflow: hidden; }
.lvrow .lvbar i { display: block; height: 100%; border-radius: 5px; background: #3aa86a; }
/* ================= World map v2: painted sky, lit trail, world nodes ================= */
#map-worlds { overflow-x: auto; padding: 6px 4px 10px; }
.wm2 { position: relative; width: 100%; min-width: 760px; aspect-ratio: 2 / 1; background: #2a1d63 url("../assets/map/map-bg.webp") center / cover no-repeat; border: 4px solid #4a1230; border-radius: 28px 18px 30px 20px; box-shadow: 0 8px 0 rgba(74, 18, 48, 0.35), inset 0 0 60px rgba(20, 10, 60, 0.45); overflow: hidden; }
.wm-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wm-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wm-trail .seg-o { stroke: #2a1448; stroke-width: 17px; }
.wm-trail .seg { stroke-width: 10px; }
.wm-trail .seg.lit { stroke: #ffd23f; filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.75)); }
.wm-trail .seg.dim { stroke: #8574b8; opacity: 0.8; }
.m-node { position: absolute; transform: translate(-50%, -52%); width: 14%; display: flex !important; flex-direction: column; align-items: center; background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; padding: 0 !important; cursor: pointer; z-index: 2; transition: transform 0.18s; }
.m-node::after { display: none !important; }
.m-node:hover, .m-node:focus-visible { transform: translate(-50%, -57%) scale(1.07); outline: none; }
.m-node .m-glow { position: absolute; left: 50%; top: 4%; width: 92%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 120, 0.7), rgba(255, 226, 120, 0) 68%); opacity: 0; }
.m-node.open .m-glow, .m-node.current .m-glow { opacity: 1; animation: mnGlow 2.4s ease-in-out infinite; }
.m-node.done .m-glow { opacity: 0.8; background: radial-gradient(circle, rgba(130, 235, 170, 0.65), rgba(130, 235, 170, 0) 68%); }
.m-node.portal .m-glow { background: radial-gradient(circle, rgba(160, 140, 255, 0.85), rgba(160, 140, 255, 0) 68%); opacity: 1; }
.m-node .m-p { position: relative; display: grid; place-items: center; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff7e8, #f5e4d8); border: 4px solid #4a1230; box-shadow: 0 6px 0 rgba(30, 12, 70, 0.7); }
.m-node.portal .m-p { border-color: #3a2a8a; background: radial-gradient(circle at 35% 28%, #efe9ff, #bfb2ff); }
.m-node.portal .m-p::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(200, 190, 255, 0.85); border-top-color: transparent; border-bottom-color: transparent; animation: mnSpin 6s linear infinite; }
.m-node .m-p img { width: 84%; height: 84%; object-fit: contain; animation: tcBob 4s ease-in-out infinite; }
.m-node .o-ck { position: absolute; right: -6px; top: -6px; }
.m-node.lock .m-p { background: radial-gradient(circle at 35% 28%, #b9aed6, #7d6fa6); }
.m-node.lock .m-p img { opacity: 0.42; filter: grayscale(0.8); animation: none; }
.m-node .m-lock { position: absolute; font-size: clamp(16px, 2.4vw, 26px); }
.m-node .m-rib { margin-top: 9px; padding: 3px 10px 4px; background: #fff7e8; border: 3px solid #4a1230; border-radius: 10px 6px 11px 7px; font: 800 clamp(10px, 1.45vw, 15px)/1.1 var(--font-ui); color: #3a1226; text-align: center; box-shadow: 0 3px 0 rgba(30, 12, 70, 0.6); max-width: 130%; }
.m-node .m-rib em { display: block; font-style: normal; font-size: 0.72em; letter-spacing: 0.06em; text-transform: uppercase; color: #a85638; }
.m-node.lock .m-rib { background: #d9d0ec; color: #5a4c80; } .m-node.portal .m-rib { background: #ece6ff; } .m-node.portal .m-rib em { color: #5a46c8; }
.m-node.current .m-p { animation: oPulse 1.8s ease-in-out infinite; }
.m-here { position: absolute; top: -34%; left: 50%; transform: translateX(-50%); z-index: 3; animation: mnHere 1.3s ease-in-out infinite; pointer-events: none; }
.m-here b { display: block; padding: 3px 10px; background: #ffd23f; border: 3px solid #4a1230; border-radius: 12px; font: 800 clamp(10px, 1.4vw, 14px)/1 var(--font-ui); color: #3a1226; white-space: nowrap; position: relative; }
.m-here b::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 12px; height: 12px; background: #ffd23f; border-right: 3px solid #4a1230; border-bottom: 3px solid #4a1230; transform: translateX(-50%) rotate(45deg); }
@keyframes mnGlow { 0%, 100% { transform: translateX(-50%) scale(0.92); opacity: 0.75; } 50% { transform: translateX(-50%) scale(1.08); opacity: 1; } }
@keyframes mnSpin { to { transform: rotate(360deg); } }
@keyframes mnHere { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }
.tr-bg { stroke-dasharray: none !important; }
#screen-map .panel-inner.pg { width: min(1180px, 96vw); max-width: none; }
.wm2 { aspect-ratio: 16 / 9; min-width: 640px; }
.m-node .m-stars { display: block; margin-top: 1px; font-size: 1.1em; color: #e8a000; letter-spacing: 0.1em; }
/* ================= social: daily challenge, community goal, challenge banner, emotes ================= */
.pill-daily { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; padding: 8px 14px !important; background: linear-gradient(180deg, #ffe27a, #ffc619) !important; }
.pill-daily .pd-t { font: 800 clamp(15px, 2.6vh, 19px)/1.1 var(--font-ui); color: #3a1226; }
.pill-daily small { font: 600 clamp(11px, 1.7vh, 13px)/1.2 var(--font); color: #7a3a10; }
.comm-chip { width: 100%; margin-top: 6px; padding: 6px 12px 8px; background: rgba(255, 247, 232, 0.9); border: 3px solid #4a1230; border-radius: 16px; box-shadow: 0 3px 0 rgba(74, 18, 48, 0.3); }
.comm-chip .cc-t { display: block; font: 700 clamp(11px, 1.7vh, 13px)/1.2 var(--font-ui); color: #3a1226; text-align: center; }
.comm-chip .cc-bar { display: block; height: 8px; margin-top: 5px; border-radius: 6px; background: rgba(74, 18, 48, 0.14); overflow: hidden; }
.comm-chip .cc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f7b182, #ffc619); border-radius: 6px; transition: width 0.6s; }
.ch-ban { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #fff7e8; border: 3px solid #4a1230; border-radius: 999px; box-shadow: 0 5px 0 rgba(74, 18, 48, 0.35); font: 700 14px var(--font-ui); color: #3a1226; max-width: 94vw; flex-wrap: wrap; justify-content: center; }
.ch-ban b { color: #a85638; } .ch-ban.hidden { display: none; }
.bd-item { grid-template-columns: 44px 1fr auto; } .bd-emo { grid-column: 2 / 4; display: flex; gap: 6px; margin-top: 4px; }
.bd-emo .emo { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; font-size: 15px; line-height: 1.3; background: #fff; border: 2px solid #4a1230; border-radius: 999px; cursor: pointer; box-shadow: 0 2px 0 rgba(74, 18, 48, 0.3); }
.bd-emo .emo small { font: 800 11px var(--font-ui); color: #7a3a10; }
.bd-emo .emo.sent, .bd-emo .emo:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.ov-share { background: #fff0a8 !important; }
/* score hop + fx-design */
#hud-score.bump { animation: scoreHop 0.26s cubic-bezier(.2, 1.8, .4, 1); transform-origin: 50% 60%; }
@keyframes scoreHop { 0% { transform: scale(1); } 40% { transform: scale(1.16) rotate(-2deg); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #hud-score.bump { animation: none; } }
/* ================= level path v2: Launch -> levels -> Finish, one connected trail ================= */
.orbit { align-items: flex-start; gap: clamp(22px, 4.6vw, 56px); padding: 14px 18px 22px; }
.o-start, .o-flag { position: relative; flex: none; align-self: flex-start; margin-top: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.o-start svg, .o-flag svg { display: block; height: clamp(50px, 8vh, 62px); width: auto; margin-top: 0; filter: drop-shadow(0 3px 0 rgba(74, 18, 48, 0.25)); }
.o-start small, .o-flag small { font: 800 var(--fs-xs) var(--font-ui); color: #4a1230; letter-spacing: 0.04em; text-transform: uppercase; }
.o-start .o-rk { animation: tcBob 2.2s ease-in-out infinite; }
.o-flag::before, .o-node::before { content: ""; position: absolute; top: 28px; right: 100%; width: clamp(22px, 4.6vw, 56px); height: 10px; margin-top: -2px; background: #7b5a78; border: 2.5px solid #4a1230; border-radius: 8px; box-sizing: border-box; }
.o-node.done::before, .o-node.current::before, .o-node.open::before, .o-flag.won::before { background: linear-gradient(180deg, #5fe3b4, #14b87a); }
.o-node.lock::before { background: #cdb7c8; opacity: 0.8; }
.o-flag:not(.won)::before { background: #cdb7c8; opacity: 0.8; }
.o-flag.won::before { background: linear-gradient(180deg, #ffe27a, #ffc619); }
.o-flag.won svg { animation: tcBob 1.8s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255, 198, 25, 0.8)); }
.orbit .o-node:first-of-type::before { left: auto; }
.o-node .o-c { width: clamp(56px, 9vh, 70px); box-shadow: 0 6px 0 rgba(74, 18, 48, 0.28); }
.o-node small { max-width: 104px; font-weight: 600; }
.o-node.current small { font-weight: 800; color: #a85638; }
.o-node.lock::before { background-image: none !important; }
/* ================= sticker headings v2: butter-yellow wavy cloud, burgundy layered edge, chunky rounded burgundy lettering, one star + one sparkle + three little ticks ================= */
:root { --h-cloud: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe9b4'/%3E%3Cstop offset='1' stop-color='%23ffcf78'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M14 30C6 18 20 6 38 10C50 0 74 4 84 10C102 2 128 6 140 12C160 4 188 14 186 28C196 40 180 54 160 52C146 60 118 56 108 52C90 60 62 56 52 52C32 58 8 48 14 30Z' fill='url(%23g)'/%3E%3C/svg%3E"); --h-cloud-back: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe9b4'/%3E%3Cstop offset='1' stop-color='%23ffcf78'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M14 30C6 18 20 6 38 10C50 0 74 4 84 10C102 2 128 6 140 12C160 4 188 14 186 28C196 40 180 54 160 52C146 60 118 56 108 52C90 60 62 56 52 52C32 58 8 48 14 30Z' fill='%23a24457'/%3E%3C/svg%3E"); --h-star: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath transform='translate(2 3)' d='M24 3l6.2 13.2 14.4 1.8-10.6 9.9 2.8 14.3L24 34.900 11.2 42.200 14 27.900 3.400 18l14.400-1.800z' fill='%23a24457'/%3E%3Cpath d='M24 3l6.2 13.2 14.4 1.8-10.6 9.9 2.8 14.3L24 34.900 11.2 42.200 14 27.900 3.400 18l14.400-1.800z' fill='%23ffd45e' stroke='%23a24457' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M17 14l4-5' stroke='%23fff3c4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); --h-spark: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4q2 18 20 20-18 2-20 20-2-18-20-20 18-2 20-20z' fill='%23ffd45e' stroke='%23a24457' stroke-width='3.500' stroke-linejoin='round'/%3E%3C/svg%3E"); --h-ticks: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg stroke='%23a24457' stroke-width='4.500' stroke-linecap='round'%3E%3Cpath d='M36 6l-4 9'/%3E%3Cpath d='M22 11l-7 7'/%3E%3Cpath d='M12 24l-9 2'/%3E%3C/g%3E%3C/svg%3E"); }
.panel h2:not(#over-title), .of-title, .av-title, #screen-outfits .of-title, .mi .mi-top h2, .panel h3:not(.mh) {
position: relative; display: inline-block; z-index: 0; margin-left: 0 !important; transform: rotate(-1.5deg) !important; text-transform: none !important; font-style: normal !important;
font-family: var(--font-ui) !important; font-weight: 900 !important; letter-spacing: 0.01em !important; color: #773b25 !important; text-shadow: 0 1.5px 0 rgba(255, 244, 214, 0.55) !important; line-height: 1.05 !important;
padding: 0.2em 1.45em 0.3em 0.8em !important;
background: var(--h-star) right 0.1em top -0.05em / 0.95em 0.95em no-repeat, var(--h-spark) right 0.02em bottom 0.28em / 0.48em 0.48em no-repeat, var(--h-ticks) left -0.12em top -0.2em / 0.7em 0.7em no-repeat !important;
}
.panel h2:not(#over-title)::before, .of-title::before, .av-title::before, #screen-outfits .of-title::before, .mi .mi-top h2::before, .panel h3:not(.mh)::before,
.panel h2:not(#over-title)::after, .of-title::after, .av-title::after, #screen-outfits .of-title::after, .mi .mi-top h2::after, .panel h3:not(.mh)::after {
content: '' !important; display: block !important; position: absolute !important; left: 0.05em !important; right: 0.85em !important; top: 0.02em !important; bottom: 0 !important; height: auto !important; opacity: 1 !important; border: 0 !important; border-radius: 0 !important; clip-path: none !important; margin: 0 !important;
background-repeat: no-repeat !important; background-size: 100% 100% !important; background-position: center !important; filter: none !important; animation: none !important;
}
.panel h2:not(#over-title)::before, .of-title::before, .av-title::before, #screen-outfits .of-title::before, .mi .mi-top h2::before, .panel h3:not(.mh)::before, .panel .pg > h3::before, .panel .pg > h3:nth-of-type(2n)::before { z-index: -1 !important; background-color: transparent !important; background-image: var(--h-cloud) !important; transform: none !important; }
.panel h2:not(#over-title)::after, .of-title::after, .av-title::after, #screen-outfits .of-title::after, .mi .mi-top h2::after, .panel h3:not(.mh)::after { z-index: -2 !important; background-image: var(--h-cloud-back) !important; transform: translate(0.03em, 0.12em) !important; opacity: 0.92 !important; }
.panel h2:not(#over-title) { font-size: clamp(34px, 6vw, 54px) !important; }
.panel h3:not(.mh) { font-size: clamp(20px, 3.4vw, 28px) !important; margin-top: 22px !important; margin-bottom: 12px !important; }
.mp-card h3 { font-size: 24px !important; }
@media (prefers-reduced-motion: no-preference) { .panel h2:not(#over-title):hover, .panel h3:not(.mh):hover { transform: rotate(-0.5deg) scale(1.02) !important; transition: transform 0.2s; } }
.panel h2:not(#over-title), .of-title, .av-title, .mi .mi-top h2, .pg-top h2 { flex: 0 0 auto !important; width: fit-content !important; max-width: 100%; }
/* ================= planets with rings, done properly: the far half of the ring sits BEHIND the planet, the near half passes in front, and the planet no longer spins its ring around ================= */
.ld-orb, .ld-orb.o1, .ld-orb.o2, .ld-orb.o3, .of-deco.d-planet, .ds-planet { background: none !important; border: 0 !important; animation-name: none; }
.ld-orb { animation: ldBob 6s ease-in-out infinite !important; } .ld-orb.o2 { animation-delay: -2s !important; } .ld-orb.o3 { animation-delay: -4s !important; }
.of-deco.d-planet { animation: ofBob 6s ease-in-out infinite !important; } .ds-planet { animation: ofBob 6s ease-in-out infinite !important; }
.ld-orb::after, .of-deco.d-planet::after, .ds-planet::after { content: ''; position: absolute; inset: 0; z-index: 2; box-sizing: border-box; border-radius: 50%; }
.ld-orb::after { border: 3px solid #3a2630; }
.ld-orb.o1::after { background: radial-gradient(circle at 35% 30%, #ffd08a, #f08a3c 62%, #b9561c); }
.ld-orb.o2::after { background: radial-gradient(circle at 35% 30%, #a6e3ae, #2f9a8c 62%, #1d5f6a); }
.ld-orb.o3::after { background: radial-gradient(circle at 35% 30%, #e3acf4, #a76ae0 62%, #6a3a9a); }
.of-deco.d-planet::after { border: 3px solid #3a2630; background: radial-gradient(circle at 35% 30%, #8fd8a8, #2f8f8c 62%, #1d5f6a); }
.ds-planet::after { border: 2.5px solid #3a2630; background: radial-gradient(circle at 35% 30%, #ffd08a, #f08a3c 65%, #b9561c); }
.ld-orb::before, .ld-orb b, .of-deco.d-planet::before, .of-deco.d-planet b, .ds-planet::before, .ds-planet b { content: ''; position: absolute; box-sizing: border-box; border-radius: 50%; }
.ld-orb::before, .ld-orb b { left: -32%; right: -32%; top: 36%; height: 26%; border: 4px solid #f6aa78; transform: rotate(-18deg); }
.of-deco.d-planet::before, .of-deco.d-planet b { left: -22%; right: -22%; top: 38%; height: 26%; border: 5px solid #f6aa78; transform: rotate(-16deg); }
.ds-planet::before, .ds-planet b { left: -30%; right: -30%; top: 38%; height: 24%; border: 3.5px solid #fff3de; transform: rotate(-20deg); }
.ld-orb::before, .of-deco.d-planet::before, .ds-planet::before { z-index: 1; clip-path: inset(0 0 50% 0); } /* far half: behind the planet body */
.ld-orb b, .of-deco.d-planet b, .ds-planet b { z-index: 3; clip-path: inset(50% 0 0 0); animation: none !important; } /* near half: in front */
.of-deco.d-planet::before, .ds-planet::before { animation: none; }
.ld-planet { animation: ldBob 7s ease-in-out infinite !important; }
/* sticker headings v2, continued: avatar studio section titles ("Hair 39 styles") and the Missions section banners */
.av-h, .mh span {
position: relative; display: inline-block; z-index: 0; margin-left: 0; transform: rotate(-1.5deg) !important; text-transform: none !important; font-style: normal !important;
font-family: var(--font-ui) !important; font-weight: 900 !important; letter-spacing: 0.01em !important; color: #773b25 !important; text-shadow: 0 1.5px 0 rgba(255, 244, 214, 0.55) !important; line-height: 1.05 !important;
padding: 0.2em 1.35em 0.3em 0.8em !important;
background: var(--h-star) right 0.1em top -0.05em / 0.85em 0.85em no-repeat, var(--h-spark) right 0.02em bottom 0.28em / 0.44em 0.44em no-repeat, var(--h-ticks) left -0.12em top -0.2em / 0.62em 0.62em no-repeat !important;
}
.av-h { font-size: clamp(19px, 3vw, 24px) !important; margin: 10px 0 12px !important; }
.mh span { font-size: clamp(20px, 4vw, 26px) !important; }
.av-h::before, .av-h::after, .mh span::before, .mh span::after {
content: '' !important; display: block !important; position: absolute !important; left: 0.05em !important; right: 0.8em !important; top: 0.02em !important; bottom: 0 !important; height: auto !important; opacity: 1 !important; border: 0 !important; border-radius: 0 !important; clip-path: none !important; margin: 0 !important;
background-repeat: no-repeat !important; background-size: 100% 100% !important; background-position: center !important; filter: none !important; animation: none !important;
}
.av-h::before, .mh span::before, .av-sec:nth-of-type(2n) .av-h::before, .mh.daily span::before, .mh.weekly span::before, .mh.ach span::before { z-index: -1 !important; background-color: transparent !important; background-image: var(--h-cloud) !important; transform: none !important; }
.av-h::after, .mh span::after { z-index: -2 !important; background-image: var(--h-cloud-back) !important; transform: translate(0.03em, 0.12em) !important; opacity: 0.92 !important; }
.av-h small { font: 700 0.62em var(--font-ui) !important; color: #9c604a !important; margin-left: 6px !important; text-shadow: none !important; }
.mh .mh-st { display: none !important; }
.mh { gap: 0 !important; }
/* ringed planets that were drawn as a flat oval over a ball: one SVG now, ring behind the planet at the top and in front at the bottom */
.mi::before { right: -34px !important; top: -26px !important; width: 124px !important; height: 83px !important; border: 0 !important; border-radius: 0 !important; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23b78cf0'/%3E%3Cstop offset='.62' stop-color='%237a50c0'/%3E%3Cstop offset='1' stop-color='%234d2f8a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='rotate(-18 60 40)' fill='none' stroke-linecap='butt'%3E%3Cpath d='M6 40A54 15 0 0 1 114 40' stroke='%233a2630' stroke-width='11'/%3E%3Cpath d='M6 40A54 15 0 0 1 114 40' stroke='%23ff7f9a' stroke-width='7'/%3E%3C/g%3E%3Ccircle cx='60' cy='40' r='25' fill='url(%23g)' stroke='%233a2630' stroke-width='3.500'/%3E%3Cpath d='M44 27a20 20 0 0 1 12-9' stroke='%23fff' stroke-opacity='.55' stroke-width='3.500' stroke-linecap='round' fill='none'/%3E%3Cg transform='rotate(-18 60 40)' fill='none' stroke-linecap='butt'%3E%3Cpath d='M6 40A54 15 0 0 0 114 40' stroke='%233a2630' stroke-width='11'/%3E%3Cpath d='M6 40A54 15 0 0 0 114 40' stroke='%23ff7f9a' stroke-width='7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important; }
.mi::after { content: none !important; display: none !important; }
.lb .lb-d2 { width: clamp(44px, 7.4vh, 64px) !important; aspect-ratio: 3 / 2 !important; border: 0 !important; border-radius: 0 !important; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23ffb4de'/%3E%3Cstop offset='.62' stop-color='%23ff8ac8'/%3E%3Cstop offset='1' stop-color='%23d9529a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='rotate(-18 60 40)' fill='none' stroke-linecap='butt'%3E%3Cpath d='M6 40A54 15 0 0 1 114 40' stroke='%233a2630' stroke-width='10'/%3E%3Cpath d='M6 40A54 15 0 0 1 114 40' stroke='%23ffd23f' stroke-width='6'/%3E%3C/g%3E%3Ccircle cx='60' cy='40' r='25' fill='url(%23g)' stroke='%233a2630' stroke-width='3.500'/%3E%3Cpath d='M44 27a20 20 0 0 1 12-9' stroke='%23fff' stroke-opacity='.55' stroke-width='3.500' stroke-linecap='round' fill='none'/%3E%3Cg transform='rotate(-18 60 40)' fill='none' stroke-linecap='butt'%3E%3Cpath d='M6 40A54 15 0 0 0 114 40' stroke='%233a2630' stroke-width='10'/%3E%3Cpath d='M6 40A54 15 0 0 0 114 40' stroke='%23ffd23f' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important; }
.lb .lb-d2::after { content: none !important; display: none !important; }
.tipcard[data-d="planet"] .d2 { width: 44px !important; height: 30px !important; left: -22px !important; bottom: -14px !important; border: 0 !important; border-radius: 0 !important; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23ffb4de'/%3E%3Cstop offset='.62' stop-color='%23ff8ac8'/%3E%3Cstop offset='1' stop-color='%23d9529a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='rotate(-18 60 40)' fill='none' stroke-linecap='butt'%3E%3Cpath d='M6 40A54 15 0 0 1 114 40' stroke='%233a2630' stroke-width='10'/%3E%3Cpath d='M6 40A54 15 0 0 1 114 40' stroke='%23ffd23f' stroke-width='6'/%3E%3C/g%3E%3Ccircle cx='60' cy='40' r='25' fill='url(%23g)' stroke='%233a2630' stroke-width='3.500'/%3E%3Cpath d='M44 27a20 20 0 0 1 12-9' stroke='%23fff' stroke-opacity='.55' stroke-width='3.500' stroke-linecap='round' fill='none'/%3E%3Cg transform='rotate(-18 60 40)' fill='none' stroke-linecap='butt'%3E%3Cpath d='M6 40A54 15 0 0 0 114 40' stroke='%233a2630' stroke-width='10'/%3E%3Cpath d='M6 40A54 15 0 0 0 114 40' stroke='%23ffd23f' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important; }
.tipcard[data-d="planet"] .d2::after { content: none !important; display: none !important; }
.ld-pct { border-radius: 99px !important; background: #ffe27a !important; border: 3px solid #3a1226 !important; box-shadow: 0 3px 0 rgba(58, 18, 38, 0.35) !important; font-weight: 900 !important; transform: rotate(-4deg) !important; }
/* game-over speech bubble + score badge, redrawn as stickers: cream paper bubble with a curved tail and a burgundy layered edge, butter-yellow cloud behind the score */
.ov-bubble { max-width: 190px !important; padding: 9px 15px 10px !important; font: 800 clamp(14px, 2.2vh, 17px)/1.2 var(--font-ui) !important; color: #773b25 !important; text-align: center !important; background: #fff7e8 !important; border: 3px solid #773b25 !important; border-radius: 24px 20px 22px 12px / 22px 24px 20px 14px !important; box-shadow: 0 5px 0 #9c604a, 0 9px 12px rgba(58, 18, 38, 0.18) !important; transform: rotate(-2deg); }
.ov-bubble::before { content: ''; position: absolute; left: -12px; top: -14px; width: 24px; height: 24px; background: var(--h-star) center / contain no-repeat; }
.ov-bubble::after { content: '' !important; position: absolute; right: -19px !important; bottom: -13px !important; width: 28px !important; height: 30px !important; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 34'%3E%3Cpath d='M2 4C14 5 24 14 30 31C19 26 10 25 2 26' fill='%23fff7e8' stroke='%237d1f3f' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M2.500 7V23' stroke='%23fff7e8' stroke-width='5' stroke-linecap='butt'/%3E%3C/svg%3E") center / contain no-repeat !important; border: 0 !important; transform: none !important; clip-path: none !important; }
.ov-top .burst { clip-path: none !important; background: var(--h-cloud) center / 100% 100% no-repeat !important; filter: drop-shadow(0 7px 0 #9c604a); border-radius: 0; width: 270px !important; height: 128px !important; animation: burstsoft 3s ease-in-out infinite !important; }
@keyframes burstsoft { 0%, 100% { transform: translate(-50%, -42%) rotate(-2deg) scale(1); } 50% { transform: translate(-50%, -42%) rotate(1.5deg) scale(1.04); } }
.ov-top .big-score b { color: #773b25; text-shadow: 0 2px 0 rgba(255, 244, 214, 0.6); font-family: var(--font-ui); font-weight: 900; }
.ov-top .big-score small { font-family: var(--font-ui); font-weight: 800; color: #9c604a; }
@media (max-width: 520px) { .ov-top .burst { width: 210px !important; height: 100px !important; } }
/* sticker headings: never wider than their row. Smaller type inside narrow panels, one line, and header rows wrap instead of letting the title run over the coin pill. */
.panel h2:not(#over-title), .of-title, .av-title, .mi .mi-top h2 { font-size: clamp(26px, 4.6vw, 52px) !important; white-space: nowrap; min-width: 0; max-width: 100%; }
.panel-inner.narrow h2:not(#over-title), .panel-inner.narrow .of-title { font-size: clamp(26px, 7.4vw, 42px) !important; }
.pg-top, .mi-top, .of-top { flex-wrap: wrap !important; gap: 8px 14px !important; }
.pg-top .coin-pill, .mi-top .coin-pill, .of-top .coin-pill { flex: none; margin-left: auto; }
.panel h3:not(.mh), .av-h { max-width: 100%; }
@media (max-width: 520px) { .panel h2:not(#over-title) { font-size: clamp(26px, 9vw, 40px) !important; } .panel h3:not(.mh) { font-size: clamp(18px, 5.4vw, 24px) !important; } }
/* game over, re-staged: Lanky stands on a little pink moon in a spotlight right under his speech bubble, the score cloud sits beside him, and the sparkle marks frame the pair */
.ov-top { min-height: 190px !important; align-items: flex-start !important; padding-left: 4px; }
.ov-top .big-score { width: 54% !important; margin-top: 26px !important; }
.ov-top::before { content: ''; position: absolute; right: -4px; bottom: -22px; width: 214px; height: 176px; z-index: 1; pointer-events: none;
background: radial-gradient(ellipse 14% 4% at 36% 87%, rgba(162, 68, 87, 0.45) 0 98%, transparent 100%), radial-gradient(ellipse 10% 3.5% at 66% 89%, rgba(162, 68, 87, 0.45) 0 98%, transparent 100%), radial-gradient(ellipse 46% 15% at 50% 88%, #f9c5a2 0 98%, transparent 100%), radial-gradient(ellipse 46% 15% at 50% 91%, #9c604a 0 98%, transparent 100%), radial-gradient(circle at 50% 52%, rgba(255, 226, 122, 0.95), rgba(255, 226, 122, 0) 62%); }
#over-hero { right: 4px !important; bottom: -4px !important; width: 206px !important; height: 206px !important; z-index: 2 !important; filter: drop-shadow(2.5px 0 0 #fff7e8) drop-shadow(-2.5px 0 0 #fff7e8) drop-shadow(0 2.5px 0 #fff7e8) drop-shadow(0 -2.5px 0 #fff7e8) drop-shadow(0 6px 0 rgba(122, 31, 61, 0.28)); }
.ov-bubble { right: 18px !important; top: -34px !important; max-width: 176px !important; transform-origin: 70% 100% !important; z-index: 4 !important; }
.ov-bubble::after { right: 44px !important; bottom: -27px !important; width: 30px !important; height: 28px !important; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 32'%3E%3Cpath d='M5 2C7 15 14 24 28 30C21 19 24 9 30 2' fill='%23fff7e8' stroke='%237d1f3f' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M7.500 2.500H28' stroke='%23fff7e8' stroke-width='5'/%3E%3C/svg%3E") center / contain no-repeat !important; }
.mk-l { right: 196px !important; top: 6px !important; } .mk-r { right: -6px !important; top: -18px !important; }
@media (max-width: 520px) { .ov-top::before { width: 168px; height: 142px; } #over-hero { width: 162px !important; height: 162px !important; } .ov-bubble { right: 6px !important; max-width: 140px !important; font-size: 13px !important; } .ov-bubble::after { right: 30px !important; } .ov-top { min-height: 160px !important; } }
.ov-top { margin-bottom: 30px !important; min-height: 200px !important; }
.ov-top::before { width: 258px !important; height: 200px !important; right: -22px !important; bottom: -14px !important; }
#over-hero { width: 252px !important; height: 252px !important; right: -18px !important; bottom: -14px !important; }
.ov-bubble { right: 30px !important; top: -42px !important; }
.mk-l { right: 230px !important; }
@media (max-width: 520px) { .ov-top::before { width: 200px !important; height: 160px !important; } #over-hero { width: 196px !important; height: 196px !important; } }
/* coin payout: the coin stack tucks into the +coins pill so they read as one thing; the piggy bank balance is a matching cream chip */
#screen-over .oc-head { gap: 0 !important; flex-wrap: nowrap !important; align-items: center; }
#screen-over .oc-head::before { flex: 0 0 62px !important; width: 62px; height: 54px !important; margin: -8px -26px -4px -2px !important; position: relative; z-index: 2; filter: drop-shadow(0 3px 0 rgba(122, 31, 61, 0.25)); }
#screen-over .oc-pill { position: relative; z-index: 1; padding: 7px 18px 8px 34px !important; font: 900 clamp(20px, 3.4vh, 26px)/1.1 var(--font-ui) !important; color: #773b25 !important; background: linear-gradient(180deg, #ffeaa6, #ffd45e) !important; border: 3px solid #773b25 !important; border-radius: 99px !important; box-shadow: 0 4px 0 #9c604a !important; white-space: nowrap; }
#screen-over .oc-lbl { margin-left: auto !important; padding-left: 10px; font: 800 12px var(--font-ui) !important; letter-spacing: 0.06em; text-transform: uppercase; color: #9c604a !important; }
#screen-over .oc-num { margin-left: 6px; padding: 4px 14px !important; font: 900 clamp(18px, 3vh, 22px) var(--font-ui) !important; font-style: normal; color: #773b25 !important; background: #fff7e8 !important; border: 3px solid #773b25 !important; border-radius: 99px !important; box-shadow: 0 3px 0 #9c604a !important; }
#screen-over .oc-rows b { font-family: var(--font-ui); font-weight: 900; color: #b9790a; }
#screen-over .oc-pill, #screen-over .oc-lbl, #screen-over .oc-num { left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; height: auto !important; transform: none !important; position: relative !important; }
#screen-over .oc-head { padding: 0 0 0 4px; min-height: 52px; }
.ov-btns .ov-share { grid-column: 1 / -1 !important; width: 100% !important; font-family: var(--font-ui) !important; font-weight: 800 !important; }
.ov-btns .ov-menu { grid-column: 1 / -1 !important; }
/* ======================= GAME OVER v3: a whimsical results sheet. Cream paper cards with burgundy ink + a layered edge, a butter cloud for the coin payout with the piggy bank,
icon columns with yellow value pills, a big Go again with the astronaut cheering, and a pink moon-hill at the bottom. Text is always burgundy on cream for contrast. ======================= */
#screen-over .ov-stats { gap: 12px !important; margin-top: 6px; }
#screen-over .ov-stats div { aspect-ratio: auto !important; background: #fff7e8 !important; border: 3px solid #773b25 !important; border-radius: 28px 22px 30px 20px / 22px 28px 20px 26px !important; box-shadow: 0 4px 0 #9c604a !important; padding: 10px 16px 10px 12px !important; gap: 12px !important; position: relative; container-type: normal !important; }
#screen-over .ov-stats svg, #screen-over .ov-stats img { display: block !important; flex: 0 0 46px !important; width: 46px !important; height: 46px !important; object-fit: contain; }
#screen-over .ov-stats small { font: 800 clamp(13px, 2.1vh, 15px)/1.1 var(--font-ui) !important; color: #9c604a !important; opacity: 1 !important; }
#screen-over .ov-stats b { font: 900 clamp(26px, 4.4vh, 34px)/1 var(--font-ui) !important; color: #773b25 !important; }
#screen-over .ov-stats div::after { content: ''; position: absolute; right: 10px; top: 8px; width: 20px; height: 20px; background: var(--h-ticks) center / contain no-repeat; opacity: 0.85; transform: scaleX(-1); }
#screen-over .over-coins { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 20px 0 14px !important; }
#screen-over .oc-head { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: nowrap !important; padding: 0 !important; min-height: 0 !important; }
#screen-over .oc-head::before { display: none !important; }
#screen-over .oc-cloud { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 86px; padding: 14px 10px 16px 84px; isolation: isolate; }
#screen-over .oc-cloud::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--h-cloud) center / 100% 100% no-repeat; filter: drop-shadow(0 6px 0 #9c604a); }
#screen-over .oc-cloud::before { content: ''; position: absolute; left: -10px; top: 50%; width: 84px; height: 70px; transform: translateY(-46%) rotate(-3deg); background: url(../assets/results/coin_stack.png) center / contain no-repeat; filter: drop-shadow(0 3px 0 rgba(122, 31, 61, 0.3)); z-index: 2; }
#screen-over .oc-pill { position: relative !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; animation: none !important; font: 900 clamp(26px, 4.6vh, 36px)/1 var(--font-ui) !important; color: #773b25 !important; text-shadow: 0 2px 0 rgba(255, 244, 214, 0.7) !important; white-space: nowrap; transform: rotate(-2deg) !important; }
#screen-over .oc-pig { flex: 0 0 auto; width: 64px; height: 54px; margin-right: 2px; transform: rotate(4deg); filter: drop-shadow(0 3px 0 rgba(122, 31, 61, 0.25)); }
#screen-over .oc-lbl { margin: 0 -2px 0 auto !important; padding: 0 !important; width: 46px !important; font: 900 12px/1.05 var(--font-ui) !important; letter-spacing: 0.06em; text-transform: uppercase; color: #9c604a !important; text-align: right; }
#screen-over .oc-num { margin: 0 !important; padding: 5px 14px !important; font: 900 clamp(20px, 3.4vh, 26px)/1 var(--font-ui) !important; font-style: normal; color: #773b25 !important; background: #fff7e8 !important; border: 3px solid #773b25 !important; border-radius: 99px !important; box-shadow: 0 3px 0 #9c604a !important; }
#screen-over .oc-rows { position: relative; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 12px 4px; margin-top: 18px !important; padding: 16px 10px 20px !important; background: #fff7e8 radial-gradient(ellipse 34% 26px at 12% 104%, #fce3d3 0 99%, transparent 100%), radial-gradient(ellipse 40% 30px at 52% 106%, #fce3d3 0 99%, transparent 100%), radial-gradient(ellipse 34% 26px at 92% 104%, #fce3d3 0 99%, transparent 100%); border: 3px solid #773b25; border-radius: 28px 22px 30px 20px / 22px 28px 20px 26px; box-shadow: 0 4px 0 #9c604a; overflow: hidden; }
#screen-over .oc-rows span { flex: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px; padding: 0 2px !important; border: 0 !important; background: none !important; text-align: center; }
#screen-over .oc-rows span::before, #screen-over .oc-rows span::after { display: none !important; }
#screen-over .oc-ic svg { display: block; width: 38px; height: 38px; }
#screen-over .oc-rows em { font: 800 clamp(12px, 1.9vh, 14px)/1.1 var(--font-ui); font-style: normal; color: #773b25; }
#screen-over .oc-rows b { padding: 2px 14px 3px; font: 900 clamp(17px, 2.8vh, 21px)/1.1 var(--font-ui) !important; color: #773b25 !important; background: #ffe27a; border-radius: 99px; }
#screen-over .ov-btns { position: relative; gap: 14px !important; padding-bottom: 66px !important; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40C40 22 80 26 120 36C170 50 210 22 260 24C320 28 350 40 400 30V80H0z' fill='%23ffc2dd'/%3E%3Cpath d='M0 58C50 44 100 52 150 58C210 66 260 46 320 52C360 56 380 60 400 56V80H0z' fill='%23ff9ccb'/%3E%3Cellipse cx='70' cy='66' rx='20' ry='5' fill='%23e57aae' opacity='.5'/%3E%3Cellipse cx='250' cy='68' rx='28' ry='5' fill='%23e57aae' opacity='.5'/%3E%3Cellipse cx='350' cy='64' rx='14' ry='4' fill='%23e57aae' opacity='.5'/%3E%3C/svg%3E") bottom center / 100% 64px no-repeat; margin-bottom: -6px; }
#screen-over .ov-btns .btn { aspect-ratio: auto !important; background-image: none !important; border: 3px solid #773b25 !important; border-radius: 34px 28px 36px 26px / 28px 34px 26px 32px !important; box-shadow: 0 5px 0 #9c604a !important; padding: 12px 16px !important; container-type: normal !important; min-height: 70px; position: relative; overflow: visible; font-family: var(--font-ui) !important; }
#screen-over .ov-btns .btn .lbl, #screen-over .ov-btns .btn b { font: 900 clamp(20px, 3.2vh, 26px)/1.1 var(--font-ui) !important; font-style: normal !important; color: #773b25 !important; }
#screen-over .ov-btns .ov-retry { grid-column: 1 / -1 !important; justify-self: stretch !important; width: 100% !important; min-height: 96px; padding: 14px 40px 14px 118px !important; background: linear-gradient(180deg, #fff0a8, #ffd23f) !important; animation: retrypulse 2s 1.4s ease-in-out infinite; }
#screen-over .ov-btns .ov-retry .lbl { font-size: clamp(30px, 5.4vh, 42px) !important; text-shadow: 0 2px 0 rgba(255, 246, 214, 0.7); }
#screen-over .ov-btns .ov-retry::before { content: '' !important; display: block !important; position: absolute; left: 2px; bottom: 4px; width: 118px; height: 130px; background: url(../assets/zerog/zero_g_interaction/zero_g_interaction_10.webp) center bottom / contain no-repeat; filter: drop-shadow(0 4px 0 rgba(122, 31, 61, 0.28)); pointer-events: none; transform: rotate(-4deg); }
#screen-over .ov-btns .ov-retry::after { content: '' !important; display: block !important; position: absolute; right: 12px; top: 50%; width: 34px; height: 40px; transform: translateY(-50%); background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg stroke='%23f08a3c' stroke-width='4.500' stroke-linecap='round'%3E%3Cpath d='M44 8L30 12'/%3E%3Cpath d='M46 24H30'/%3E%3Cpath d='M44 40L30 36'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
#screen-over .ov-btns .ov-outfits { background: #fff7e8 !important; }
#screen-over .ov-btns .pinky { background: linear-gradient(180deg, #fce3d3, #f9c5a2) !important; }
#screen-over .ov-btns .pinky img { width: 52px !important; height: 46px !important; flex: 0 0 52px !important; }
#screen-over .ov-btns .pinky small { font: 700 13px var(--font-ui) !important; color: #9c604a !important; }
#screen-over .ov-btns .ov-share { grid-column: 1 / -1 !important; background: #fff7e8 !important; padding-left: 96px !important; }
#screen-over .ov-btns .ov-share::before { content: '' !important; display: block !important; position: absolute; left: 14px; top: 50%; width: 74px; height: 38px; transform: translateY(-50%); background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M6 36q-2-14 10-14 6 0 10 5l4 9z' fill='%23ffd23f' stroke='%237d1f3f' stroke-width='2.600' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='28' r='1.500' fill='%237d1f3f'/%3E%3Cpath d='M74 36q2-14-10-14-6 0-10 5l-4 9z' fill='%23ff9ccb' stroke='%237d1f3f' stroke-width='2.600' stroke-linejoin='round'/%3E%3Ccircle cx='64' cy='28' r='1.500' fill='%237d1f3f'/%3E%3Cpath d='M40 4v8M30 7l3 6M50 7l-3 6' stroke='%23f08a3c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
#screen-over .ov-btns .ov-menu { grid-column: 1 / -1 !important; background: none !important; border: 0 !important; box-shadow: none !important; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 12px; font: 800 20px var(--font-ui) !important; color: #773b25 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
#screen-over .ov-btns .ov-menu::before, #screen-over .ov-btns .ov-menu::after { content: '' !important; display: block !important; flex: 1 1 0; height: 4px; max-width: 90px; border-radius: 4px; background: #773b25; opacity: 0.45; position: static; box-shadow: none; }
#screen-over .ov-btns .ov-menu::before { margin-right: 4px; }
@media (max-width: 520px) { #screen-over .oc-cloud { padding-left: 74px; } #screen-over .oc-pig { width: 48px; height: 42px; } #screen-over .ov-btns .ov-retry { padding-left: 100px !important; } #screen-over .ov-btns .ov-retry::before { width: 98px; height: 110px; } }
#screen-over .oc-lbl { width: auto !important; max-width: 64px; white-space: normal; flex: 0 0 auto; }
#screen-over .ov-btns .ov-retry { padding-left: 150px !important; min-height: 104px; }
#screen-over .ov-btns .ov-retry::before { left: -4px !important; bottom: 2px !important; width: 150px !important; height: 168px !important; }
#screen-over .ov-btns .ov-share { font: 900 clamp(18px, 2.9vh, 24px)/1.1 var(--font-ui) !important; color: #773b25 !important; justify-content: center; }
#screen-over .ov-btns .ov-menu { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12L12 4l9 8v8H3z' fill='none' stroke='%237d1f3f' stroke-width='2.400' stroke-linejoin='round'/%3E%3Cpath d='M10 20v-6h4v6' fill='none' stroke='%237d1f3f' stroke-width='2.400' stroke-linejoin='round'/%3E%3C/svg%3E") calc(50% - 66px) center / 22px no-repeat !important; padding-left: 28px; }
@media (max-width: 520px) { #screen-over .ov-btns .ov-retry { padding-left: 118px !important; } #screen-over .ov-btns .ov-retry::before { width: 120px !important; height: 136px !important; } }
/* ================= Responsive v2 (mobile-first fixes from the 320-1440 audit) ================= */
/* phone portrait: the world map is a tall painted scroll with the trail winding down it, so there is no sideways swipe at all */
.wm2.wm-v { min-width: 0; aspect-ratio: 9 / 18; }
.wm2.wm-v .m-node { width: 31%; }
.wm2.wm-v .m-rib { font-size: clamp(12px, 3.6vw, 15px); max-width: 118%; }
.wm2.wm-v .m-here b { font-size: clamp(11px, 3.2vw, 14px); }
.wm2.wm-v .m-lock { font-size: clamp(20px, 6vw, 28px); }
#map-worlds { overflow-x: hidden; }
@media (min-width: 701px) { #map-worlds { overflow-x: auto; } }
/* touch targets: at least 44px on anything you tap, grown with an invisible hit area where the art has to stay small */
@media (pointer: coarse), (max-width: 760px), (max-height: 560px) {
.pill-main, .pill-daily, .pill-new, .bk-btn, .bk-nb, .icon-btn, .pg-back, .btn { min-height: 44px; }
.bk-btn.ico, .icon-btn { min-width: 44px; }
.pill-daily { padding-top: 6px !important; padding-bottom: 6px !important; }
.tiles .btn.tile.tile-art { min-width: 44px !important; }
.tiles .btn.tile.tile-art::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
.pill-main { min-height: 44px !important; } .pill-daily { min-height: 44px; } .pill-daily small { display: none; }
}
/* the Game Over score burst can never poke past the card */
.ov-top .burst, #over-burst { max-width: 100%; }
/* nothing in a scrolling panel is wider than the panel, long words wrap instead of pushing */
.panel-inner, .modal-card, .pg, .ov-card { max-width: 100%; min-width: 0; overflow-wrap: break-word; }
/* one catch-all for people who ask for less motion */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* ================= Picture-book finish v3: grainy gouache, hand-drawn ink, festival bunting (vivid colour stays vivid: sparse specks only) ================= */
body::after { content: '' !important; position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; background: url('../assets/grain-picturebook.webp') 0 0 / 384px 384px repeat; opacity: 0.9; }
@media (prefers-contrast: more) { body::after { opacity: 0.4; } }
/* hand-drawn ink: warm dark-plum outline, hard offset shadow, slightly uneven corners */
.panel-inner.narrow, .modal-card, .ocard, .pg-tile, .comm-chip { border-color: #3a1f2e !important; box-shadow: 6px 8px 0 rgba(58, 31, 46, 0.32) !important; outline: 0 !important; }
.btn, .icon-btn, .bk-btn, .bk-nb, .coin-pill, .hpill { border-color: #3a1f2e; }
.btn { box-shadow: 0 4px 0 rgba(58, 31, 46, 0.55); }
/* festival bunting strung along the top of every popup and panel card */
.modal-card::before, .panel-inner.narrow::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 2; pointer-events: none; background: url("data:image/svg+xml;utf8,") center top / auto 26px repeat-x; }
.modal-card, .panel-inner.narrow { padding-top: 38px !important; }
/* cartoon line-boil: titles wobble between two hand-drawn poses */
@keyframes boil { 0% { transform: rotate(-0.5deg) translateY(0); } 50% { transform: rotate(0.5deg) translateY(-1px); } 100% { transform: rotate(-0.5deg) translateY(0); } }
.panel-inner h2, .modal-card h3, .of-title, .ov-banner h2 { animation: boil 1.2s steps(2, end) infinite; }
/* things on the page sit a hair crooked, like they were placed by hand */
.tiles .tile:nth-child(odd) { rotate: -1.2deg; } .tiles .tile:nth-child(even) { rotate: 1.2deg; }
.ocard:nth-child(3n+1) { rotate: -0.6deg; } .ocard:nth-child(3n+2) { rotate: 0.5deg; }
.coin-pill { min-height: 44px; }
.menu-ui.tight .tag-wrap, .menu-ui.tight .comm-chip, .menu-ui.tight .pill-daily small { display: none !important; }
.menu-ui.tight .pill-daily, .menu-ui.tight .pill-main { min-height: 54px !important; }
/* landscape phones: the records card becomes a slim one-line strip so the buttons and tiles keep full finger size instead of being scaled down */
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
.menu-stats { display: flex !important; flex-wrap: nowrap; gap: 18px; padding: 6px 16px !important; min-height: 0 !important; grid-template-columns: none !important; align-items: center; justify-content: center; }
.menu-stats .ms { margin: 0 !important; padding: 0 !important; min-width: 0; } .menu-stats .ms.ms-next, .menu-stats .ms:nth-child(2) { display: none !important; }
.menu-stats .msi { width: 30px !important; height: 30px !important; } .menu-stats .msi img, .menu-stats .msi canvas { width: 30px !important; height: 30px !important; }
.menu-stats .ms b { font-size: 16px !important; } .menu-stats small { font-size: 10px !important; }
}
.menu-ui.tight .pill-daily, .menu-ui.tight .pill-main { min-height: 58px !important; }
/* ===== Avatar studio: category sticker-tabs (no clipped labels, each tab its own colour, bouncy pick, swipe fade) ===== */
.av-cats { gap: 10px !important; padding: 16px 30px 22px 10px !important; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.av-cat { width: auto !important; min-width: 84px; max-width: none; padding: 8px 10px 8px !important; scroll-snap-align: center; position: relative; background: var(--tint, #fff3de) !important; gap: 3px !important; }
.av-cat > span:last-child { font: 800 13px/1.1 var(--font-ui, var(--font)) !important; white-space: nowrap; letter-spacing: 0.01em; }
.av-cat canvas, .av-cat img { width: 58px !important; height: 58px !important; border-radius: 16px; background: rgba(255, 255, 255, 0.55); }
.av-cat:nth-child(6n+1) { --tint: #ffe3a0; } .av-cat:nth-child(6n+2) { --tint: #fce3d3; } .av-cat:nth-child(6n+3) { --tint: #cfeee0; } .av-cat:nth-child(6n+4) { --tint: #d3e4ff; } .av-cat:nth-child(6n+5) { --tint: #e4d6ff; } .av-cat:nth-child(6n) { --tint: #ffd9b8; }
.av-cat:nth-child(odd) { rotate: -1.4deg; } .av-cat:nth-child(even) { rotate: 1.2deg; }
.av-cat.on { background: #ffc619 !important; rotate: 0deg; animation: avCatPop 0.45s cubic-bezier(.2, 1.5, .4, 1); box-shadow: 4px 8px 0 rgba(58, 31, 46, 0.35) !important; }
.av-cat.on::after { content: '\2605'; position: absolute; right: -8px; top: -10px; width: 24px; height: 24px; display: grid; place-items: center; font-size: 15px; color: #ffc619; background: #3a1f2e; border-radius: 50%; border: 2px solid #fff3de; }
@keyframes avCatPop { 0% { transform: scale(0.88) translateY(4px); } 100% { transform: scale(1) translateY(-3px); } }
@media (max-width: 480px) { .av-cat { min-width: 76px; padding: 7px 8px !important; } .av-cat canvas, .av-cat img { width: 50px !important; height: 50px !important; } .av-cat > span:last-child { font-size: 12px !important; } }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
.av-cats { background: none !important; }
.av-cta { flex-wrap: nowrap !important; gap: 8px !important; padding: 8px 10px calc(8px + var(--sab)) !important; }
.av-cta .btn { flex: 1 1 0 !important; min-width: 0; min-height: 50px !important; padding: 6px 10px !important; font-size: 17px !important; line-height: 1.1; white-space: normal; }
.av-cta .av-save-big { font-size: 19px !important; flex: 1.3 1 0 !important; }
.av-main { padding-bottom: 84px !important; }
.av-pill { max-width: 70%; }
}
@media (max-width: 760px), (max-aspect-ratio: 1/1) { .av-bgstrip { margin-top: 30px !important; } }
/* avatar studio: painted backdrops instead of flat white boxes, with properly curved corners */
.av-cats { background: radial-gradient(circle at 10% 15%, rgba(255,255,255,.45) 0 14%, transparent 15%), linear-gradient(120deg, #fbd5bb, #ffd98a 48%, #a8e6d2) !important; border: 3px solid #3a1f2e !important; border-radius: 30px 18px 34px 20px !important; box-shadow: 5px 7px 0 rgba(58, 31, 46, 0.3) !important; margin: 10px 2px 16px !important; padding: 16px 28px 20px 14px !important; -webkit-mask-image: none !important; mask-image: none !important; }
.av-panel { background-color: #fff1d6 !important; background-image: url("data:image/svg+xml;utf8,") !important; background-size: 44px 44px !important; border: 3px solid #3a1f2e !important; border-radius: 30px 18px 34px 20px !important; box-shadow: 5px 7px 0 rgba(58, 31, 46, 0.28) !important; }
.av-bgstrip { border-radius: 26px; }
.av-cta { background: linear-gradient(120deg, #fdefe5, #fff0c8) !important; border: 3px solid #3a1f2e !important; border-radius: 30px 20px 32px 22px !important; box-shadow: 4px 6px 0 rgba(58, 31, 46, 0.3) !important; margin: 0 6px 8px !important; }
/* Daily Challenge: a whimsical sunny sticker-ticket, content centred, with a spinning star badge and twinkles */
.pill-daily { position: relative; justify-content: center !important; align-items: center; gap: 3px !important; min-height: 62px; padding: 9px 18px 9px 62px !important; text-align: center; border: 3px solid #3a1f2e !important; border-radius: 30px 16px 32px 18px !important; background: url("data:image/svg+xml;utf8,"), linear-gradient(115deg, #ffe45e, #ffb43a 58%, #f8bd96) !important; background-size: 26px 26px, auto !important; box-shadow: 0 5px 0 rgba(58, 31, 46, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.35) !important; rotate: -1.2deg; animation: pdWiggle 3.2s ease-in-out infinite; overflow: visible !important; }
.pill-daily .pd-t { font: 900 clamp(18px, 3.2vh, 23px)/1.05 var(--font-ui, var(--font)); color: #fff7e2; letter-spacing: 0.02em; -webkit-text-stroke: 0.6px #3a1f2e; text-shadow: 2px 2px 0 #a85638, 3px 3px 0 #3a1f2e; }
.pill-daily small { display: inline-block; margin-top: 1px; padding: 1px 10px 2px; font: 800 clamp(11px, 1.8vh, 13px)/1.25 var(--font-ui, var(--font)); color: #5a2410; background: rgba(255, 247, 226, 0.85); border: 2px solid #3a1f2e; border-radius: 12px 8px 13px 9px; }
.pill-daily::before { content: '\2605'; position: absolute; left: 10px; top: 50%; width: 40px; height: 40px; margin-top: -20px; display: grid; place-items: center; font-size: 24px; line-height: 1; color: #ffe45e; background: #dd683e; border: 3px solid #3a1f2e; border-radius: 50%; box-shadow: 2px 3px 0 rgba(58, 31, 46, 0.5); animation: pdSpin 6s linear infinite; }
.pill-daily::after { content: '\2726 \2727'; position: absolute; right: 12px; top: -9px; font-size: 16px; letter-spacing: 6px; color: #fff; text-shadow: 0 0 0 #3a1f2e, 1px 1px 0 #3a1f2e; animation: pdTwinkle 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes pdWiggle { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(0.7deg) scale(1.015); } }
@keyframes pdSpin { to { transform: rotate(360deg); } }
@keyframes pdTwinkle { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
@media (max-width: 760px) { .menu-buttons { padding-inline: 14px; box-sizing: border-box; } .menu-stats .ms b { white-space: normal; } }
/* World Map intro: big bold line, wavy yellow highlighter strip, little rocket, burst lines and sparkles (picture-book heading) */
.lede.hop { position: relative; display: block; text-align: left; margin: 6px 0 22px !important; padding: 8px 74px 34px 22px; font-size: inherit; }
.hop-a { display: block; font: 900 clamp(26px, 7.6vw, 40px)/1.04 var(--font-ui, var(--font)); color: #4a1230; letter-spacing: -0.01em; text-shadow: 2px 3px 0 rgba(255, 255, 255, 0.55); animation: boil 1.2s steps(2, end) infinite; }
.hop-b { display: inline-block; margin: 6px 0 0 -10px; padding: 6px 18px 8px 16px; font: 800 clamp(14px, 4vw, 20px)/1.25 var(--font-ui, var(--font)); color: #4a1230; background: #ffe39a; border-radius: 46% 54% 48% 52% / 70% 60% 40% 30%; box-shadow: 2px 4px 0 rgba(122, 31, 61, 0.2); }
.hop-burst { position: absolute; left: 4px; top: -6px; width: 34px; height: 28px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.hop-rocket { position: absolute; right: 2px; bottom: -4px; width: 78px; height: 58px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: hopFly 2.6s ease-in-out infinite; }
.hop-spark { position: absolute; width: 22px; height: 22px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: pdTwinkle 1.8s ease-in-out infinite; }
.hop-spark.s1 { right: 8px; top: 10px; } .hop-spark.s2 { left: 2px; bottom: 6px; width: 18px; height: 18px; animation-delay: -0.9s; }
@keyframes hopFly { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(5px, -6px) rotate(4deg); } }
.lede.hop { padding-right: 16px !important; } .hop-a { font-size: clamp(24px, 7vw, 40px); white-space: nowrap; } .hop-b { margin-right: 70px; }
/* ===== Whimsy layer: bubbles, confetti, tickle/boing/spin, living menu critters, tactile buttons ===== */
.whim-bubble { position: fixed; z-index: 2147482000; transform: translate(-50%, -100%) scale(0.6); opacity: 0; pointer-events: none; max-width: 200px; padding: 8px 14px 10px; font: 800 15px/1.2 var(--font-ui, var(--font)); color: #3a1f2e; text-align: center; background: #fff7e2; border: 3px solid #3a1f2e; border-radius: 22px 16px 24px 14px; box-shadow: 3px 5px 0 rgba(58, 31, 46, 0.35); transition: opacity 0.15s, transform 0.25s cubic-bezier(.2, 1.6, .4, 1); }
.whim-bubble::after { content: ''; position: absolute; left: 50%; bottom: -11px; width: 14px; height: 14px; margin-left: -7px; background: #fff7e2; border-right: 3px solid #3a1f2e; border-bottom: 3px solid #3a1f2e; transform: rotate(45deg); }
.whim-bubble.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.whim-conf { position: fixed; z-index: 2147482000; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; animation: whimConf 1.2s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes whimConf { to { transform: translate(var(--dx), calc(var(--dy) + 140px)) rotate(var(--rot)); opacity: 0; } }
.whim-giggle { animation: whimGiggle 0.5s ease-in-out; } @keyframes whimGiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-3deg) scale(1.03, 0.97); } 45% { transform: rotate(3deg) scale(0.97, 1.04); } 70% { transform: rotate(-2deg); } }
.whim-boing { animation: whimBoing 0.45s cubic-bezier(.2, 1.6, .4, 1); } @keyframes whimBoing { 0% { transform: scale(1, 1); } 30% { transform: scale(1.12, 0.86); } 60% { transform: scale(0.94, 1.1); } 100% { transform: scale(1, 1); } }
.whim-spin { animation: whimSpin 1.3s cubic-bezier(.3, 1.3, .5, 1); } @keyframes whimSpin { to { transform: rotate(720deg) scale(1.15); } }
.whim-critters { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.wc { position: absolute; display: block; background: center / contain no-repeat; }
.wc-whale { width: 118px; height: 68px; top: 30%; left: -140px; background-image: url("data:image/svg+xml;utf8,"); pointer-events: auto; cursor: pointer; animation: wcSwim 70s linear infinite, wcBob 5s ease-in-out infinite; }
.wc-ufo { width: 64px; height: 42px; top: 12%; right: 12%; background-image: url("data:image/svg+xml;utf8,"); pointer-events: auto; cursor: pointer; animation: wcBob 3.4s ease-in-out infinite; }
.wc-ufo.whim-zip { animation: wcZip 1.1s ease-in-out; }
.wc-jelly { width: 38px; height: 58px; bottom: 34%; left: 8%; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.92; animation: wcFloat 7s ease-in-out infinite; }
.wc-star { width: 90px; height: 30px; top: 8%; left: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0; animation: wcShoot 16s ease-in infinite 4s; }
@keyframes wcSwim { to { left: calc(100% + 160px); } }
@keyframes wcBob { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -10px; rotate: 2deg; } }
@keyframes wcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 8px -34px; } }
@keyframes wcZip { 0% { translate: 0 0; } 25% { translate: -90px -20px; rotate: -14deg; } 55% { translate: 60px 10px; rotate: 10deg; } 100% { translate: 0 0; rotate: 0deg; } }
@keyframes wcShoot { 0% { opacity: 0; transform: translate(0, 0); } 3% { opacity: 1; } 12% { opacity: 1; transform: translate(70vw, 22vh); } 14%, 100% { opacity: 0; transform: translate(80vw, 26vh); } }
/* tactile: every button squishes when pressed and boings back */
.btn:active, .icon-btn:active, .tile-art:active, .av-cat:active, .story-banner:active, .bk-btn:active { transform: scale(0.94, 0.9) translateY(2px) !important; transition: transform 0.06s !important; }
@media (prefers-reduced-motion: reduce) { .whim-critters { display: none; } }
.wc-whale { top: 71%; } .wc-ufo { top: 21%; right: 3%; } .wc-jelly { bottom: auto; top: 40%; left: auto; right: 2%; }
@media (min-aspect-ratio: 1/1) { .wc-whale { top: 38%; } .wc-ufo { top: 12%; right: 10%; } .wc-jelly { top: 55%; right: auto; left: 6%; } }
/* ===== Level path: a whimsical starry trail (painted dusk hills, ringed planet, wavy golden path, hovering rocket, sleepy locked planets) ===== */
.orbit { background: url("data:image/svg+xml;utf8,") repeat-x left bottom / 640px 100%, linear-gradient(180deg, #2d2478 0%, #6a4fc4 42%, #f9c7a5 100%) !important; background-attachment: local, scroll !important; border: 3px solid #3a1f2e; border-radius: 34px 20px 36px 22px; box-shadow: 5px 8px 0 rgba(58, 31, 46, 0.3); padding: 30px 26px 26px !important; gap: clamp(22px, 4.4vw, 54px) !important; -webkit-mask-image: none; }
.orbit .o-node::before { top: 22px !important; height: 14px !important; width: clamp(22px, 4.4vw, 54px) !important; background: url("data:image/svg+xml;utf8,") repeat-x center / 40px 14px !important; border-radius: 0 !important; opacity: 1 !important; }
.orbit .o-node.lock::before { background: url("data:image/svg+xml;utf8,") repeat-x center / 40px 14px !important; opacity: 0.4 !important; filter: grayscale(0.7); }
.orbit .o-node .o-c { border-width: 3.5px; box-shadow: 0 6px 0 rgba(58, 31, 46, 0.55) !important; animation: lvFloat 3.6s ease-in-out infinite; }
.orbit .o-node:nth-child(even) .o-c { animation-delay: -1.8s; } .orbit .o-node:nth-child(3n) .o-c { animation-delay: -0.9s; }
.orbit .o-node.current .o-c { animation: oPulse 1.8s ease-in-out infinite, lvFloat 3.6s ease-in-out infinite; }
.orbit .o-node.current .o-c::before { content: ''; position: absolute; top: -44px; left: 50%; width: 38px; height: 38px; margin-left: -19px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: lvHop 1.4s ease-in-out infinite; }
.orbit .o-node.lock .o-c { background: radial-gradient(circle at 35% 30%, #d9d0ff, #a89ad8) !important; }
.orbit .o-node.lock .o-c::after { content: ''; position: absolute; top: -18px; right: -14px; width: 28px; height: 28px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: lvZ 2.4s ease-in-out infinite; }
.orbit .o-node small { font: 800 clamp(11px, 1.8vh, 14px)/1.15 var(--font-ui, var(--font)); color: #fff7e2; opacity: 1; text-shadow: 0 2px 0 rgba(42, 20, 72, 0.85), 0 0 8px rgba(42, 20, 72, 0.6); }
.orbit .o-start small, .orbit .o-flag small { color: #fff7e2; text-shadow: 0 2px 0 rgba(42, 20, 72, 0.85); }
.orbit .o-rk { animation: lvFly 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
.orbit .o-flag svg { animation: lvWave 2.2s ease-in-out infinite; transform-origin: 25% 90%; }
@keyframes lvFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes lvHop { 0%, 100% { translate: 0 0; rotate: -6deg; } 50% { translate: 0 -8px; rotate: 6deg; } }
@keyframes lvZ { 0%, 100% { opacity: 0.4; translate: 0 2px; } 50% { opacity: 1; translate: 3px -5px; } }
@keyframes lvFly { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(4px, -8px) rotate(4deg); } }
@keyframes lvWave { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-7deg); } }
@media (prefers-reduced-motion: reduce) { .orbit .o-node .o-c, .orbit .o-rk, .orbit .o-flag svg, .orbit .o-node.current .o-c::before, .orbit .o-node.lock .o-c::after { animation: none !important; } }
.orbit .o-node::before, .orbit .o-node.lock::before { background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100% !important; }
/* ===== Leaderboard v2: a storybook of paper-cut cards, rosette medals, framed avatars, flower stickers and a painted night-sky scene ===== */
#screen-board { background-color: #f3d4c0 !important; background-image: url('../assets/home/planet.webp'), url('../assets/frost/mtn-mid.webp'), linear-gradient(180deg, #f6ddcc 0%, #f0c8ae 55%, #ebc0a3 100%) !important; background-position: right -22px bottom 150px, left bottom, 0 0 !important; background-repeat: no-repeat, repeat-x, no-repeat !important; background-size: 150px auto, auto 190px, cover !important; background-attachment: local, local, scroll !important; }
#screen-board .panel-inner { position: relative; z-index: 1; padding-bottom: 210px !important; }
.bd-list { gap: 26px !important; margin: 14px 0 8px !important; padding: 8px 4px 0; }
.bd-item { --paper: #fbf1e6; --under: #fce3d3; --rib: 0; position: relative; isolation: isolate; display: grid !important; grid-template-columns: auto auto minmax(0, 1fr) !important; grid-template-areas: 'rk av who' 'val val emo'; align-items: center; column-gap: 10px !important; row-gap: 4px; padding: 16px 20px 18px 12px !important; margin-inline: 4px; border: 0 !important; background: var(--paper) !important; border-radius: 38px 58px 42px 62px / 52px 40px 58px 42px !important; box-shadow: none !important; filter: drop-shadow(0 5px 0 rgba(122, 31, 61, 0.2)) drop-shadow(0 12px 12px rgba(122, 31, 61, 0.14)); text-align: left; min-width: 0; }
.bd-item::before { content: ''; position: absolute; z-index: -1; inset: 6px -5px -8px 5px; background: var(--under); border-radius: inherit; transform: rotate(-1.1deg); }
.bd-item::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55), transparent 42%), radial-gradient(circle at 84% 78%, rgba(255, 190, 210, 0.3), transparent 46%), radial-gradient(circle at 60% 10%, rgba(190, 170, 255, 0.18), transparent 38%); pointer-events: none; }
.bd-item.r1 { --paper: #ffe487; --under: #fad2b8; padding-top: 22px !important; }
.bd-item.r1::after { background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.6), transparent 40%), radial-gradient(circle at 80% 80%, rgba(255, 160, 60, 0.28), transparent 50%), radial-gradient(circle at 55% 30%, rgba(255, 220, 120, 0.5), transparent 45%); }
.bd-item.r2 { --paper: #f6eefa; --under: #d9ccff; } .bd-item.r3 { --paper: #fbeadd; --under: #ffcfae; }
.bd-item.fresh { --paper: #fff3a8; animation: statpop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.bd-rk { grid-area: rk; position: relative; width: 66px !important; height: 90px !important; border: 0 !important; border-radius: 0 !important; background: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat !important; padding-bottom: 26px; font: 900 28px/1 var(--font-ui) !important; color: #4a1230; display: grid; place-items: center; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6); margin-bottom: -8px; }
.bd-item.r1 .bd-rk { background-image: url("data:image/svg+xml;utf8,") !important; width: 78px !important; height: 106px !important; padding-bottom: 30px; font-size: 34px !important; }
.bd-item.r2 .bd-rk { background-image: url("data:image/svg+xml;utf8,") !important; } .bd-item.r3 .bd-rk { background-image: url("data:image/svg+xml;utf8,") !important; }
.bd-item.r1 .bd-rk::before { content: ''; position: absolute; left: 50%; top: -22px; width: 52px; height: 38px; margin-left: -26px; transform: rotate(-9deg); background: url("data:image/svg+xml;utf8,") center / contain no-repeat; filter: drop-shadow(0 2px 0 rgba(58, 31, 46, 0.35)); animation: bdCrown 2.8s ease-in-out infinite; }
@keyframes bdCrown { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-3px); } }
.bd-item .bd-av { grid-area: av; width: 64px !important; height: 64px !important; margin: 0 !important; border-radius: 50%; border: 4px solid #fff6e8 !important; box-shadow: 0 0 0 3px #3a1f2e, 0 6px 0 3px rgba(58, 31, 46, 0.25) !important; background: #fff6e8; overflow: hidden; }
.bd-item.r1 .bd-av { width: 76px !important; height: 76px !important; box-shadow: 0 0 0 3px #3a1f2e, 0 0 0 7px #ffc61a, 0 0 0 10px #3a1f2e, 0 7px 0 10px rgba(58, 31, 46, 0.25) !important; }
.bd-item .bd-who { grid-area: who; min-width: 0; }
.bd-item .bd-who b { font: 900 clamp(22px, 6.4vw, 30px)/1.1 var(--font-ui) !important; color: #4a1230; overflow-wrap: anywhere; }
.bd-item.r1 .bd-who b { font-size: clamp(26px, 7.4vw, 36px) !important; }
.bd-item .bd-who small { display: inline-block !important; margin-top: 5px; padding: 2px 14px 3px; font: 800 clamp(12px, 3.3vw, 15px)/1.25 var(--font-ui) !important; color: #7a1f55; background: rgba(255, 150, 200, 0.4); border-radius: 999px 40px 999px 44px; max-width: 100%; }
.bd-item.r2 .bd-who small { background: rgba(170, 140, 240, 0.35); color: #4a3a8a; } .bd-item.r3 .bd-who small { background: rgba(255, 160, 100, 0.35); color: #8a3a10; }
.bd-item .bd-val { grid-area: val; text-align: left !important; min-width: 0; padding-left: 4px; }
.bd-item .bd-val b { display: inline-flex !important; align-items: center; gap: 6px; font: 900 clamp(24px, 7.2vw, 32px)/1.1 var(--font-ui) !important; color: #4a1230; white-space: nowrap; }
.bd-item .bd-val b::after { content: ''; width: 22px; height: 22px; flex: none; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: pdTwinkle 2.2s ease-in-out infinite; }
.bd-item.r1 .bd-val b { font-size: clamp(28px, 8.4vw, 38px) !important; }
.bd-item .bd-val small { display: inline-block !important; position: relative; margin-top: 6px; padding: 3px 14px 4px 32px; font: 800 clamp(12px, 3.3vw, 15px)/1.2 var(--font-ui) !important; color: #5a2410; background: rgba(255, 255, 255, 0.62); border-radius: 999px; white-space: nowrap; }
.bd-item .bd-val small::before { content: ''; position: absolute; left: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.bd-item .bd-emo { grid-area: emo; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 0 !important; }
.bd-emo .emo { position: relative; width: 52px; height: 52px; padding: 0 !important; display: grid !important; place-items: center; font-size: 24px !important; background: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 3px 0 rgba(122, 58, 16, 0.28)); transition: transform 0.2s cubic-bezier(.34, 1.6, .64, 1); }
.bd-emo .emo:not(:disabled):not(.sent):hover, .bd-emo .emo:not(:disabled):not(.sent):active { transform: scale(1.14) rotate(-6deg); }
.bd-emo .emo small { position: absolute; right: -2px; bottom: -2px; min-width: 20px; padding: 1px 5px; font: 900 11px/1.3 var(--font-ui) !important; color: #fff; background: #dd683e; border: 2px solid #fff6ea; border-radius: 999px; }
.bd-emo .emo.sent, .bd-emo .emo:disabled { filter: grayscale(0.7) drop-shadow(0 2px 0 rgba(122, 58, 16, 0.15)); opacity: 0.6 !important; }
@media (min-width: 640px) { .bd-item { grid-template-columns: auto auto minmax(0, 1fr) auto !important; grid-template-areas: 'rk av who val' '. . emo emo'; column-gap: 18px !important; padding-inline: 18px 28px !important; } .bd-item .bd-val { padding-left: 0; text-align: right !important; } .bd-item .bd-val small { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .bd-item.r1 .bd-rk::before, .bd-item .bd-val b::after { animation: none; } }
/* leaderboard v2 fixes: medal art, paper-face stacking, a borderless page so the painted scene shows, tighter phones */
.bd-item { background: none !important; }
.bd-item::before { z-index: -2 !important; }
.bd-item::after { z-index: -1 !important; background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55), transparent 42%), radial-gradient(circle at 84% 78%, rgba(255, 190, 210, 0.3), transparent 46%), var(--paper) !important; }
.bd-item.r1::after { background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.6), transparent 40%), radial-gradient(circle at 80% 80%, rgba(255, 160, 60, 0.28), transparent 50%), radial-gradient(circle at 55% 30%, rgba(255, 225, 130, 0.55), transparent 45%), var(--paper) !important; }
.bd-rk { background-image: url("data:image/svg+xml;utf8,") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; background-color: transparent !important; }
.bd-item.r1 .bd-rk { background-image: url("data:image/svg+xml;utf8,") !important; } .bd-item.r2 .bd-rk { background-image: url("data:image/svg+xml;utf8,") !important; } .bd-item.r3 .bd-rk { background-image: url("data:image/svg+xml;utf8,") !important; }
#screen-board .panel-inner.narrow { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; width: min(560px, 100%); padding-top: 24px !important; }
#screen-board .panel-inner.narrow::before { display: none !important; }
#screen-board .bd-tabs .chip { background-color: rgba(255, 246, 232, 0.92); }
@media (max-width: 430px) { .bd-item { padding: 14px 14px 16px 8px !important; column-gap: 8px !important; } .bd-rk { width: 56px !important; height: 77px !important; font-size: 24px !important; padding-bottom: 22px; } .bd-item.r1 .bd-rk { width: 66px !important; height: 90px !important; font-size: 29px !important; } .bd-item .bd-av { width: 54px !important; height: 54px !important; } .bd-item.r1 .bd-av { width: 64px !important; height: 64px !important; } .bd-emo .emo { width: 46px; height: 46px; font-size: 21px !important; } }
.bd-item { grid-template-areas: 'rk av who' 'val val val' 'emo emo emo' !important; }
.bd-item .bd-emo { justify-self: end; flex-wrap: nowrap; }
@media (min-width: 640px) { .bd-item { grid-template-areas: 'rk av who val' '. . emo emo' !important; } }
.bd-item.r1 { column-gap: 16px !important; }
.lede.hop.how .hop-a { white-space: normal; font-size: clamp(22px, 6.2vw, 34px); } .lede.hop.how .hop-b { margin-right: 74px; }
.how-card p b, .how-card .hint b, .how-card span b { display: inline !important; font-size: inherit !important; margin: 0 !important; font-weight: 800; color: var(--burgundy); }
/* ===== Paper pieces, game-wide: ribbon banners, world tags and taped notes (replace the flat blobs and bare text) ===== */
.lede.hop .hop-b { position: relative; isolation: isolate; display: inline-block; margin: 14px 26px 0 14px; padding: 11px 38px 13px 26px; font: 800 clamp(14px, 4vw, 19px)/1.3 var(--font-ui, var(--font)); color: #4a1230; background: url("data:image/svg+xml;utf8,") no-repeat right 10px top 7px / 17px 17px, linear-gradient(180deg, #fff3b4 0%, #ffd96a 100%); border: 3px solid #3a1f2e; border-radius: 12px 8px 14px 9px !important; box-shadow: 3px 5px 0 rgba(58, 31, 46, 0.3); rotate: -1.2deg; text-align: left; }
.lede.hop .hop-b::before, .lede.hop .hop-b::after { content: ''; position: absolute; z-index: -1; top: 10px; bottom: -9px; width: 30px; background: #f0a82a; box-shadow: inset 0 -4px 0 rgba(122, 58, 16, 0.25); }
.lede.hop .hop-b::before { left: -20px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.lede.hop .hop-b::after { right: -20px; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }
.lede.hop.how .hop-b { margin-right: 80px; }
.bd-item .bd-who small { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 7px; padding: 4px 16px 5px 8px !important; font: 800 clamp(12px, 3.3vw, 15px)/1.2 var(--font-ui, var(--font)) !important; color: #5a2410 !important; background: #fff9ee !important; border: 2.5px solid #3a1f2e; border-radius: 999px !important; box-shadow: 0 3px 0 rgba(58, 31, 46, 0.25); rotate: -1deg; max-width: 100%; white-space: normal; text-align: left; }
.bd-item .bd-who small::before { content: ''; flex: none; width: 24px; height: 19px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.bd-item.r2 .bd-who small { background: #f4efff !important; } .bd-item.r3 .bd-who small { background: #fff1e4 !important; } .bd-item.r1 .bd-who small { background: #fffbe6 !important; }
#board-note { position: relative; display: block; width: fit-content; max-width: min(92%, 440px); margin: 34px auto 10px !important; padding: 16px 24px 18px !important; font: 700 clamp(13px, 3.6vw, 15px)/1.45 var(--font-ui, var(--font)) !important; color: #4a1230; text-align: center; background: url("data:image/svg+xml;utf8,") no-repeat right 9px bottom 8px / 18px 18px, #fff6e6; border: 3px solid #3a1f2e; border-radius: 22px 14px 24px 16px; box-shadow: 4px 6px 0 rgba(58, 31, 46, 0.3); rotate: 0.7deg; }
#board-note::before { content: ''; position: absolute; left: 50%; top: -14px; width: 84px; height: 24px; margin-left: -42px; rotate: -3deg; background: repeating-linear-gradient(135deg, rgba(255, 160, 200, 0.85) 0 9px, rgba(255, 236, 190, 0.85) 9px 18px); border: 2px solid rgba(58, 31, 46, 0.5); border-radius: 3px; }
.lede:not(.hop) { display: block; width: fit-content; max-width: min(94%, 520px); margin-inline: auto; padding: 10px 22px 12px; background: rgba(255, 246, 230, 0.92); border: 2.5px solid #3a1f2e; border-radius: 18px 12px 20px 14px; box-shadow: 3px 5px 0 rgba(58, 31, 46, 0.25); color: #4a1230; rotate: -0.5deg; }
/* Piggy bank: pig + label + balance live in their own chip, never squeezed onto the coin pill (wraps under it on phones) */
#screen-over .oc-head { flex-wrap: wrap !important; gap: 10px 12px !important; justify-content: center; }
#screen-over .oc-cloud { flex: 1 1 220px !important; padding-right: 18px !important; justify-content: center !important; }
#screen-over .oc-bank { flex: 1 1 210px; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; padding: 10px 16px 10px 12px; background: #fff7e8; border: 3px solid #773b25; border-radius: 28px 18px 30px 20px; box-shadow: 0 4px 0 #9c604a; rotate: 0.8deg; }
#screen-over .oc-bank .oc-pig { flex: 0 0 auto; width: 54px !important; height: 46px !important; margin: 0 !important; }
#screen-over .oc-bank .oc-lbl { flex: 1 1 auto; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font: 900 12px/1.15 var(--font-ui) !important; letter-spacing: 0.07em; text-transform: uppercase; color: #9c604a !important; text-align: left !important; white-space: normal !important; }
#screen-over .oc-bank .oc-num { flex: 0 0 auto; margin: 0 !important; }
#screen-board .bd-tabs .chip.on { background-color: #e0602f !important; color: #fff7e8 !important; }
/* ================= GAME OVER v4: one composition. Stage (the moment) > result (score + 4 chips) > earnings > one dominant action.
Spacing scale: 8 / 12 / 16 / 24. Mobile first; landscape becomes two columns. All colours come from the planet you crashed on. ================= */
#screen-over.go-screen { --g1: 8px; --g2: 12px; --g3: 16px; --g4: 24px; --ink: #3a1f2e; --go-a: #fdecda; --go-b: #f7dcc0; --go-c: #a9cbe6; --go-d: #e8a919; --go-e: #1b6fa6;
display: block !important; align-items: initial !important; justify-content: initial !important; padding: 0 !important; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--go-c) 45%, #fff) 0%, transparent 70%), linear-gradient(180deg, #f9e3d5 0%, #f0c8ae 100%) !important; }
.go { box-sizing: border-box; width: min(480px, 100%); min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: var(--g3); padding: calc(var(--sat) + 12px) calc(var(--sar) + 14px) 0 calc(var(--sal) + 14px); }
.go > * { min-width: 0; }
/* 1. the moment */
.go-stage { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: var(--g1); padding: var(--g3) var(--g3) var(--g3); min-height: clamp(270px, 40svh, 360px); overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--go-c) 55%, #fff) 0%, var(--go-a) 70%, var(--go-b) 100%); border: 3px solid var(--ink); border-radius: 40px 26px 42px 28px; box-shadow: 0 6px 0 rgba(58, 31, 46, 0.35); animation: goDrop 0.55s cubic-bezier(.2, 1.4, .4, 1) both; }
.go-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.go-planet { position: absolute; right: -34px; top: 22px; width: 118px; height: 118px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--go-d) 40%, #fff), var(--go-d) 60%, color-mix(in srgb, var(--go-d) 70%, #000)); border: 3px solid var(--ink); }
.go-planet::after { content: ''; position: absolute; left: -26px; right: -26px; top: 42%; height: 30px; border: 5px solid color-mix(in srgb, var(--go-e) 60%, #fff); border-radius: 50%; transform: rotate(-16deg); clip-path: inset(48% 0 0 0); }
.go-cloud { position: absolute; width: 96px; height: 30px; border-radius: 40px; background: rgba(255, 255, 255, 0.7); box-shadow: 22px -12px 0 -2px rgba(255, 255, 255, 0.7); animation: goDrift 9s ease-in-out infinite alternate; } .go-cloud.l { left: 8%; top: 42%; } .go-cloud.r { right: 6%; bottom: 20%; animation-delay: -4s; transform: scale(0.8); }
.go-sp { position: absolute; width: 16px; height: 16px; background: #ffc61a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: pdTwinkle 1.8s ease-in-out infinite; } .go-sp.a { left: 12%; top: 16%; } .go-sp.b { left: 34%; top: 8%; width: 11px; height: 11px; animation-delay: -0.6s; } .go-sp.c { right: 30%; top: 30%; width: 12px; height: 12px; animation-delay: -1.2s; }
.go-bubble { position: relative; max-width: min(88%, 300px); padding: 10px 18px 12px; font: 800 clamp(14px, 3.9vw, 17px)/1.3 var(--font-ui, var(--font)); text-align: center; color: #4a1230; background: #fff9ee; border: 3px solid var(--ink); border-radius: 22px 16px 24px 14px; box-shadow: 0 4px 0 rgba(58, 31, 46, 0.3); animation: goPop 0.5s 0.35s cubic-bezier(.2, 1.6, .4, 1) both; }
.go-bubble::after { content: ''; position: absolute; left: 50%; bottom: -11px; width: 16px; height: 16px; margin-left: -8px; background: #fff9ee; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.go-hero { position: relative; width: clamp(148px, 44vw, 200px); aspect-ratio: 1; margin-top: var(--g2); animation: goFall 0.7s cubic-bezier(.3, 1.4, .5, 1) both; }
.go-hero canvas, .go-host { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.go-shadow { position: absolute; left: 18%; right: 18%; bottom: -2%; height: 12%; border-radius: 50%; background: rgba(58, 31, 46, 0.22); z-index: -1; }
.go-dizzy { position: absolute; left: 50%; top: 4%; width: 0; height: 0; animation: goFade 3.2s 0.8s forwards; } .go-dizzy i { position: absolute; width: 16px; height: 16px; margin: -8px; background: #ffc61a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: goOrbit 1.3s linear infinite; } .go-dizzy i:nth-child(2) { animation-delay: -0.43s; background: #f7b182; } .go-dizzy i:nth-child(3) { animation-delay: -0.86s; background: #52c7b8; }
.record .go-dizzy { display: none; }
.go-title { margin: var(--g1) 0 0; font: 900 clamp(30px, 9vw, 42px)/1.05 var(--font-ui, var(--font)); text-align: center; color: #4a1230; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.7); animation: goPop 0.5s 0.5s cubic-bezier(.2, 1.6, .4, 1) both; }
.record .go-title { color: #a85638; text-shadow: 0 3px 0 #fff3a8, 0 6px 0 rgba(58, 31, 46, 0.25); }
.record .go-hero::before { content: ''; position: absolute; left: 50%; top: -22px; width: 54px; height: 40px; margin-left: -27px; z-index: 3; background: url('../assets/results/crown.png') center / contain no-repeat; animation: bdCrown 2.8s ease-in-out infinite; }
.go-conf { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
/* 2. the result */
.go-result { display: flex; flex-direction: column; gap: var(--g2); animation: goRise 0.5s 0.25s ease-out both; }
.go-score { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.go-score small { font: 800 12px/1 var(--font-ui, var(--font)); letter-spacing: 0.09em; text-transform: uppercase; color: #844630; }
.go-score b { margin-top: 2px; font: 900 clamp(54px, 17vw, 78px)/1 var(--font-ui, var(--font)); color: #4a1230; text-shadow: 0 4px 0 #fff3a8, 0 8px 0 rgba(58, 31, 46, 0.2); }
.go-score .burst { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(86%, 320px); height: 120%; transform: translate(-50%, -50%); }
.go-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g1); }
.go-chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; background: #fff9ee; border: 3px solid var(--ink); border-radius: 20px 14px 22px 16px; box-shadow: 0 4px 0 rgba(58, 31, 46, 0.25); }
.go-chip > svg, .go-chip > img { flex: none; width: 34px; height: 34px; object-fit: contain; }
.go-chip span { display: flex; flex-direction: column; min-width: 0; }
.go-chip small { font: 800 10.5px/1.15 var(--font-ui, var(--font)); letter-spacing: 0.06em; text-transform: uppercase; color: #844630; }
.go-chip b { font: 900 clamp(18px, 5.4vw, 24px)/1.1 var(--font-ui, var(--font)); color: #4a1230; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-chip:nth-child(1) { animation: goRise 0.4s 0.35s ease-out both; } .go-chip:nth-child(2) { animation: goRise 0.4s 0.42s ease-out both; } .go-chip:nth-child(3) { animation: goRise 0.4s 0.49s ease-out both; } .go-chip:nth-child(4) { animation: goRise 0.4s 0.56s ease-out both; }
/* 3. progress / earnings: a single card */
.go-coins { padding: var(--g3); background: #fff4dc; border: 3px solid var(--ink); border-radius: 28px 18px 30px 20px; box-shadow: 0 5px 0 rgba(58, 31, 46, 0.28); margin: 0; animation: goRise 0.5s 0.5s ease-out both; }
.go-coins.hidden { display: none; }
/* 4. the next action: always in reach, one dominant button */
.go-actions { position: sticky; bottom: 0; z-index: 6; margin: auto calc(-1 * (var(--sar) + 14px)) 0 calc(-1 * (var(--sal) + 14px)); padding: 22px calc(var(--sar) + 14px) calc(var(--sab) + 12px) calc(var(--sal) + 14px); display: flex; flex-direction: column; gap: var(--g2); background: linear-gradient(180deg, rgba(244, 170, 203, 0) 0, #f0c8ae 26px); }
#screen-over #over-btns .go-retry { width: 100%; min-height: 66px; padding: 8px 20px !important; display: flex; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, #fff29a, #ffc619) !important; border: 3px solid var(--ink) !important; border-radius: 34px 24px 36px 26px !important; box-shadow: 0 6px 0 #9c604a !important; animation: goPulse 2.2s 1s ease-in-out infinite; }
#screen-over #over-btns .go-retry svg { width: 30px; height: 30px; flex: none; }
#screen-over #over-btns .go-retry .lbl { font: 900 clamp(26px, 7.6vw, 32px)/1 var(--font-ui, var(--font)) !important; color: #4a1230; }
.go-row { display: flex; gap: var(--g2); }
.go-row > .btn { flex: 1 1 0; min-width: 0; }
#screen-over #over-btns .go-alt { min-height: 52px; padding: 8px 12px !important; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff9ee !important; border: 3px solid var(--ink) !important; border-radius: 24px 16px 26px 18px !important; box-shadow: 0 4px 0 rgba(58, 31, 46, 0.35) !important; }
#screen-over #over-btns .go-alt svg, #screen-over #over-btns .go-alt img { width: 26px; height: 26px; flex: none; object-fit: contain; }
#screen-over #over-btns .go-alt .lbl { font: 900 clamp(15px, 4.4vw, 18px)/1.1 var(--font-ui, var(--font)) !important; color: #4a1230; text-align: left; }
#screen-over #over-btns .go-alt .lbl b { display: block; font: inherit; } #screen-over #over-btns .go-alt .lbl small { display: block; font: 700 11px/1.1 var(--font-ui, var(--font)); opacity: 0.8; }
#screen-over #over-btns .pinky.go-alt { background: #fce5d6 !important; }
#screen-over #over-btns .go-alt.hidden { display: none !important; }
.go-links { display: flex; justify-content: center; gap: var(--g4); flex-wrap: wrap; }
#screen-over #over-btns .go-link { min-height: 44px; padding: 6px 12px !important; background: none !important; border: 0 !important; box-shadow: none !important; font: 800 15px/1.2 var(--font-ui, var(--font)) !important; color: #773b25 !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
#screen-over #over-btns .go-retry:active, #screen-over #over-btns .go-alt:active { transform: translateY(3px) scale(0.98) !important; box-shadow: 0 2px 0 rgba(58, 31, 46, 0.4) !important; }
@media (min-width: 520px) { .go-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .go-chip { flex-direction: column; align-items: flex-start; gap: 6px; } }
/* landscape phones: two columns, Lanky on the left, everything else on the right */
@media (orientation: landscape) and (max-height: 560px) {
.go { width: min(940px, 100%); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-areas: 'stage result' 'stage coins' 'stage actions'; column-gap: var(--g4); row-gap: var(--g2); align-content: start; padding-top: calc(var(--sat) + 10px); }
.go-stage { grid-area: stage; position: sticky; top: calc(var(--sat) + 10px); align-self: start; min-height: 0; height: calc(100svh - var(--sat) - 20px - var(--sab)); justify-content: center; }
.go-hero { width: clamp(110px, 34svh, 170px); } .go-title { font-size: clamp(24px, 7svh, 34px); }
.go-result { grid-area: result; } .go-coins { grid-area: coins; } .go-actions { grid-area: actions; margin: 0; padding: 12px 0 calc(var(--sab) + 10px); }
.go-score b { font-size: clamp(40px, 13svh, 58px); } .go-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes goDrop { 0% { transform: translateY(-40px) scale(0.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes goFall { 0% { transform: translateY(-120px) rotate(-14deg) scale(0.9, 1.1); opacity: 0; } 55% { transform: translateY(6px) rotate(4deg) scale(1.08, 0.9); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes goPop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes goRise { 0% { transform: translateY(16px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes goDrift { to { translate: 26px 0; } }
@keyframes goOrbit { from { transform: rotate(0deg) translateX(34px) scaleY(0.4); } to { transform: rotate(360deg) translateX(34px) scaleY(0.4); } }
@keyframes goFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes goPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
/* v4b: only the primary action is pinned; secondary actions flow below the content */
.go-cta { position: sticky; bottom: 0; z-index: 6; margin: 0 calc(-1 * (var(--sar) + 14px)) 0 calc(-1 * (var(--sal) + 14px)); padding: 20px calc(var(--sar) + 14px) 8px calc(var(--sal) + 14px); background: linear-gradient(180deg, rgba(244, 170, 203, 0) 0, #f0c8ae 22px); }
.go-actions { position: static !important; margin: 0 !important; padding: 4px 0 calc(var(--sab) + 18px) !important; background: none !important; }
#screen-over .go-cta .go-retry { width: 100%; min-height: 66px; padding: 8px 20px !important; display: flex; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, #fff29a, #ffc619) !important; border: 3px solid #3a1f2e !important; border-radius: 34px 24px 36px 26px !important; box-shadow: 0 6px 0 #9c604a !important; animation: goPulse 2.2s 1s ease-in-out infinite; }
#screen-over .go-cta .go-retry svg { width: 30px; height: 30px; flex: none; }
#screen-over .go-cta .go-retry .lbl { font: 900 clamp(26px, 7.6vw, 32px)/1 var(--font-ui, var(--font)) !important; color: #4a1230; }
#screen-over .go-cta .go-retry:active { transform: translateY(3px) scale(0.98) !important; box-shadow: 0 2px 0 rgba(58, 31, 46, 0.4) !important; }
@media (orientation: landscape) and (max-height: 560px) { .go-cta { grid-area: actions; margin: 0; padding: 10px 0 6px; background: none; position: sticky; bottom: 0; } .go-actions { grid-area: auto; } .go { grid-template-areas: 'stage result' 'stage coins' 'stage actions' 'stage more'; } .go-actions { grid-area: more; } }
.go-hero { margin-bottom: 14px; } .go-title { margin-top: var(--g2) !important; }
/* ===== Game Over actions v5: a paper-cutout playground. Cloud buttons (scalloped 9-slice borders), a ribbon banner with a rocket, a collectible reward badge, Lanky peeking over a cloud bank ===== */
#screen-over #over-btns { position: relative; display: grid; gap: 16px; padding: 6px 0 calc(var(--sab) + 8px) !important; }
#screen-over .go-row { display: flex; gap: 12px; align-items: stretch; }
#screen-over .go-row > .btn { flex: 1 1 0; min-width: 0; }
#screen-over #over-btns .go-alt { position: relative; box-sizing: border-box; min-height: 96px; margin: 0; padding: 0 !important; border: 22px solid transparent !important; border-image: url("data:image/svg+xml;utf8,") 40 fill / 22px round !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; filter: drop-shadow(0 5px 0 rgba(122, 31, 61, 0.24)) drop-shadow(0 10px 8px rgba(122, 31, 61, 0.12)); display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1), filter 0.2s; animation: goPop 0.5s 0.55s cubic-bezier(.2, 1.6, .4, 1) both; }
#screen-over #over-btns .go-alt > svg, #screen-over #over-btns .go-alt > img { display: none !important; }
#screen-over #over-btns .go-alt::before { content: ''; flex: none; width: 52px; height: 50px; background: center / contain no-repeat; margin-left: -6px; }
#screen-over #over-btns .go-alt .lbl { position: relative; font: 900 clamp(18px, 5.2vw, 22px)/1.1 var(--font-ui, var(--font)) !important; color: #4a1230; text-align: left; }
#screen-over #over-btns .go-alt .lbl b { display: block; font: inherit; }
/* Dress up: lavender-rimmed cream cloud, a pink hanger holding a tiny tee, a sparkle and a yellow underline */
#screen-over #over-btns .ov-outfits::before { background-image: url("data:image/svg+xml;utf8,"); animation: goSway 3.4s ease-in-out infinite; transform-origin: 50% 18%; }
#screen-over #over-btns .ov-outfits .lbl::after { content: ''; position: absolute; left: 0; right: 4px; bottom: -7px; height: 5px; border-radius: 4px; background: #ffd23f; transform: rotate(-1.5deg); }
#screen-over #over-btns .ov-outfits::after { content: ''; position: absolute; right: -26px; top: -30px; width: 30px; height: 30px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: pdTwinkle 2s ease-in-out infinite; }
/* Rescue me: butter cloud, a glowing pink chest, and the cost as a collectible gem badge */
#screen-over #over-btns .ov-revive { border-image-source: url("data:image/svg+xml;utf8,") !important; }
#screen-over #over-btns .ov-revive::before { background-image: url("data:image/svg+xml;utf8,"); width: 60px; height: 54px; margin-left: -10px; animation: goBob 2.6s ease-in-out infinite; }
#screen-over #over-btns .ov-revive::after { content: ''; position: absolute; left: -22px; top: -26px; width: 36px; height: 28px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
#screen-over #over-btns .ov-revive .lbl small { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 12px 3px 8px; font: 800 12px/1.1 var(--font-ui, var(--font)); color: #5a2a8a; background: #f4dcff; border-radius: 999px; box-shadow: inset 0 -2px 0 rgba(122, 58, 160, 0.18); opacity: 1; }
#screen-over #over-btns .ov-revive .lbl small::before { content: ''; width: 16px; height: 16px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
/* the bottom band */
#screen-over .go-links { position: relative; isolation: isolate; display: grid; grid-template-columns: 116px minmax(0, 1fr) 78px; grid-template-areas: 'ch ch ch' 'peek home planet'; align-items: end; gap: 26px 6px; padding: 0 0 66px; margin-top: 2px; background: url("data:image/svg+xml;utf8,") repeat-x center bottom / 400px 72px; }
#screen-over .go-links::before { content: ''; grid-area: peek; width: 116px; height: 96px; margin-bottom: -58px; background: url('../assets/results/lanky-peek.webp') center bottom / contain no-repeat; animation: goPeek 3.6s ease-in-out infinite; z-index: 2; filter: drop-shadow(0 3px 0 rgba(122, 31, 61, 0.2)); }
#screen-over .go-links::after { content: ''; grid-area: planet; justify-self: end; width: 78px; height: 62px; margin-bottom: -36px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: goBob 5s ease-in-out infinite; z-index: 2; }
/* Challenge a friend: a scalloped paper banner with a rocket and a dotted flight path */
#screen-over #over-btns .go-link { position: relative; border-radius: 0 !important; background: none !important; box-shadow: none !important; text-decoration: none !important; }
#screen-over #over-btns .ov-share { grid-area: ch; justify-self: center; width: min(100%, 330px); min-height: 60px; padding: 0 56px 0 8px !important; border: 14px solid transparent !important; border-image: url("data:image/svg+xml;utf8,") 40 fill / 14px round !important; filter: drop-shadow(0 4px 0 rgba(122, 31, 61, 0.24)); rotate: -1.4deg; font: 900 clamp(17px, 5vw, 20px)/1.15 var(--font-ui, var(--font)) !important; color: #4a1230 !important; transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1); animation: goPop 0.5s 0.65s cubic-bezier(.2, 1.6, .4, 1) both; }
#screen-over #over-btns .ov-share::before { content: ''; position: absolute; right: -24px; top: 50%; width: 62px; height: 62px; margin-top: -34px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; animation: goFly 2.6s ease-in-out infinite; }
#screen-over #over-btns .ov-share::after { content: ''; position: absolute; left: 22%; top: calc(100% + 4px); width: 52%; height: 28px; background: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; opacity: 0.8; pointer-events: none; }
/* Back home: smaller, secondary, a lavender cloud with a little house */
#screen-over #over-btns .ov-menu { grid-area: home; justify-self: center; min-height: 52px; padding: 0 6px 0 34px !important; border: 12px solid transparent !important; border-image: url("data:image/svg+xml;utf8,") 40 fill / 12px round !important; filter: drop-shadow(0 3px 0 rgba(122, 31, 61, 0.2)); font: 900 15px/1.1 var(--font-ui, var(--font)) !important; color: #4a1230 !important; transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1); }
#screen-over #over-btns .ov-menu::before { content: ''; position: absolute; left: 2px; top: 50%; width: 30px; height: 30px; margin-top: -15px; background: C:\Users\Ona center / contain no-repeat; }
/* tactile: lift on hover, squash on press */
@media (hover: hover) { #screen-over #over-btns .go-alt:hover, #screen-over #over-btns .ov-share:hover, #screen-over #over-btns .ov-menu:hover { transform: translateY(-4px) rotate(-1deg) scale(1.03); } }
#screen-over #over-btns .go-alt:active, #screen-over #over-btns .ov-share:active, #screen-over #over-btns .ov-menu:active { transform: translateY(3px) scale(0.96) !important; filter: drop-shadow(0 1px 0 rgba(122, 31, 61, 0.3)); }
#screen-over #over-btns .go-alt.hidden { display: none !important; }
@keyframes goSway { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes goBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes goFly { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 4px -6px; rotate: 6deg; } }
@keyframes goPeek { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 360px) { #screen-over .go-links { grid-template-columns: 96px minmax(0, 1fr) 62px; } #screen-over .go-links::before { width: 96px; height: 80px; } #screen-over .go-links::after { width: 62px; } #screen-over #over-btns .go-alt::before { width: 40px; height: 40px; margin-left: -8px; } #screen-over #over-btns .ov-revive::before { width: 46px; height: 42px; } #screen-over #over-btns .go-alt { border-width: 18px !important; border-image-width: 18px !important; } }
@media (orientation: landscape) and (max-height: 560px) { #screen-over .go-links { padding-bottom: 54px; } }
@media (prefers-reduced-motion: reduce) { #screen-over #over-btns *, #screen-over .go-links::before, #screen-over .go-links::after { animation: none !important; } }
#screen-over #over-btns .ov-menu::before { background: url("data:image/svg+xml;utf8,") center / contain no-repeat !important; }
/* use the painted planet (green gouache world with the pink ring) for the stage and the bottom band */
.go-planet { right: -28px !important; top: 16px !important; width: 150px !important; height: 112px !important; background: url('../assets/home/planet.webp') center / contain no-repeat !important; border: 0 !important; border-radius: 0 !important; filter: drop-shadow(0 4px 0 rgba(58, 31, 46, 0.18)); animation: goBob 6s ease-in-out infinite; }
.go-planet::after { display: none !important; }
#screen-over .go-links::after { background: url('../assets/home/planet.webp') center / contain no-repeat !important; width: 84px !important; height: 64px !important; }
/* v5b: one stretched cloud per button (no tiling seams), compact content */
#screen-over #over-btns .go-alt { border: 0 !important; border-image: none !important; padding: 16px 18px 18px 14px !important; min-height: 92px; background: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat !important; gap: 6px; }
#screen-over #over-btns .ov-revive { background-image: url("data:image/svg+xml;utf8,") !important; }
#screen-over .go-row { align-items: stretch; }
#screen-over #over-btns .go-alt::before { width: 42px; height: 42px; margin-left: 0; }
#screen-over #over-btns .ov-revive::before { width: 48px; height: 44px; margin-left: -2px; }
#screen-over #over-btns .go-alt .lbl { font-size: clamp(16px, 4.6vw, 20px) !important; }
#screen-over #over-btns .ov-revive .lbl small { padding: 2px 10px 2px 6px; font-size: 11px; white-space: nowrap; }
#screen-over #over-btns .ov-share { border: 0 !important; border-image: none !important; padding: 14px 62px 16px 24px !important; min-height: 62px; background: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat !important; }
#screen-over #over-btns .ov-menu { border: 0 !important; border-image: none !important; padding: 10px 14px 12px 44px !important; min-height: 52px; background: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat !important; }
#screen-over #over-btns .ov-menu::before { left: 12px; }
#screen-over #over-btns { grid-auto-rows: auto !important; grid-template-rows: none !important; align-content: start !important; height: auto !important; min-height: 0 !important; }
#screen-over #over-btns .go-row { height: auto !important; align-items: stretch; }
#screen-over #over-btns .pinky.go-alt.ov-revive { background-color: transparent !important; }
#screen-over #over-btns { grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; }
#screen-over #over-btns button.go-alt.ov-revive.pinky.btn { background: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat !important; }
#screen-over #over-btns .ov-share::before { right: -14px !important; }
#screen-over #over-btns .ov-share { padding-right: 52px !important; }
#screen-over .go-links::before { width: 132px !important; height: 112px !important; margin-bottom: -62px !important; }
#screen-over .go-links { grid-template-columns: 132px minmax(0, 1fr) 84px; }
/* ===== Painted lettering + painted buttons (final pass) ===== */
.lt-h { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; animation: none !important; filter: none !important; display: block; text-align: center; line-height: 0; min-height: 0 !important; }
.lt-h::before, .lt-h::after { display: none !important; }
.lt-img { display: inline-block; width: auto; height: auto; max-width: min(100%, 440px); max-height: clamp(64px, 17vw, 104px); object-fit: contain; filter: drop-shadow(0 4px 3px rgba(122, 31, 61, 0.16)); animation: goPop 0.55s cubic-bezier(.2, 1.5, .4, 1) both; }
.panel-inner > h2.lt-h { margin: 6px auto 4px; } .of-title.lt-h, .av-title.lt-h { margin: 0; }
.go-title.lt-h { margin-top: 6px !important; } .go-title .lt-img { max-width: min(100%, 360px); max-height: clamp(78px, 22vw, 118px); }
.record .go-title .lt-img { filter: drop-shadow(0 0 10px rgba(255, 214, 80, 0.8)) drop-shadow(0 4px 3px rgba(122, 31, 61, 0.2)); }
/* buttons: one painted piece per button, fixed proportions, live text on top */
#screen-over #over-btns .go-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
#screen-over #over-btns .go-row > button.go-alt { all: unset; box-sizing: border-box; position: relative; display: block; cursor: pointer; width: 100%; aspect-ratio: 640 / 376; container-type: inline-size; background: url('../assets/ui/btn-dress.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 4px 4px rgba(122, 31, 61, 0.22)); transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1); -webkit-tap-highlight-color: transparent; animation: goPop 0.5s 0.55s cubic-bezier(.2, 1.6, .4, 1) both; }
#screen-over #over-btns .go-row > button.go-alt.ov-revive { background-image: url('../assets/ui/btn-rescue.webp'); }
#screen-over #over-btns .go-row > button.go-alt::before, #screen-over #over-btns .go-row > button.go-alt::after { display: none !important; content: none !important; }
#screen-over #over-btns .go-row > button.go-alt > svg, #screen-over #over-btns .go-row > button.go-alt > img { display: none !important; }
#screen-over #over-btns .go-row > button.go-alt .lbl { position: absolute; left: 43%; right: 4%; top: 45%; transform: translateY(-50%); font: 900 10.2cqw/1.12 var(--font-ui, var(--font)) !important; color: #4a1230; text-align: left; }
#screen-over #over-btns .go-row > button.go-alt .lbl b { display: block; font: inherit; }
#screen-over #over-btns .go-row > button.go-alt.ov-revive .lbl { font-size: 9.4cqw !important; }
#screen-over #over-btns .go-row > button.go-alt .lbl small { display: inline-block; margin-top: 3cqw; padding: 1.2cqw 4cqw 1.4cqw 4cqw; font: 800 5.4cqw/1.1 var(--font-ui, var(--font)); color: #5a2a8a; background: #f1d9ff; border-radius: 999px; white-space: nowrap; box-shadow: inset 0 -1px 0 rgba(122, 58, 160, 0.2); }
#screen-over #over-btns .go-row > button.go-alt:active { transform: translateY(2px) scale(0.97); filter: drop-shadow(0 1px 2px rgba(122, 31, 61, 0.25)); }
#screen-over #over-btns .go-row > button.go-alt.hidden { display: none !important; }
#screen-over #over-btns .go-links { display: grid !important; grid-template-columns: 108px minmax(0, 1fr) 70px; grid-template-areas: 'ch ch ch' 'peek home planet'; align-items: end; gap: 10px 4px; padding: 0 0 54px !important; background: url('data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 80%27 preserveAspectRatio=%27none%27%3E%3Cg fill=%27%23d9cffa%27%3E%3Ccircle cx=%2720%27 cy=%2774%27 r=%2730%27/%3E%3Ccircle cx=%2770%27 cy=%2780%27 r=%2734%27/%3E%3Ccircle cx=%27125%27 cy=%2772%27 r=%2728%27/%3E%3Ccircle cx=%27180%27 cy=%2780%27 r=%2736%27/%3E%3Ccircle cx=%27240%27 cy=%2774%27 r=%2730%27/%3E%3Ccircle cx=%27295%27 cy=%2780%27 r=%2734%27/%3E%3Ccircle cx=%27350%27 cy=%2772%27 r=%2728%27/%3E%3Ccircle cx=%27395%27 cy=%2778%27 r=%2732%27/%3E%3C/g%3E%3Cg fill=%27%23f5f0ff%27%3E%3Ccircle cx=%2746%27 cy=%2784%27 r=%2728%27/%3E%3Ccircle cx=%27100%27 cy=%2786%27 r=%2730%27/%3E%3Ccircle cx=%27160%27 cy=%2786%27 r=%2726%27/%3E%3Ccircle cx=%27215%27 cy=%2788%27 r=%2730%27/%3E%3Ccircle cx=%27270%27 cy=%2786%27 r=%2728%27/%3E%3Ccircle cx=%27325%27 cy=%2788%27 r=%2730%27/%3E%3Ccircle cx=%27380%27 cy=%2786%27 r=%2726%27/%3E%3C/g%3E%3C/svg%3E') repeat-x center bottom / 400px 62px !important; }
#screen-over #over-btns .go-links::before { width: 108px !important; height: 92px !important; margin-bottom: -52px !important; }
#screen-over #over-btns .go-links::after { width: 70px !important; height: 54px !important; margin-bottom: -30px !important; }
#screen-over #over-btns .go-links > button.ov-share { all: unset; box-sizing: border-box; grid-area: ch; position: relative; display: block; cursor: pointer; width: 100%; aspect-ratio: 1100 / 250; container-type: inline-size; background: url('../assets/ui/btn-share.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 4px 4px rgba(122, 31, 61, 0.22)); transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1); animation: goPop 0.5s 0.65s cubic-bezier(.2, 1.6, .4, 1) both; text-align: center; -webkit-tap-highlight-color: transparent; }
#screen-over #over-btns .go-links > button.ov-share::before, #screen-over #over-btns .go-links > button.ov-share::after { display: none !important; content: none !important; }
#screen-over #over-btns .go-links > button.ov-share { font: 900 5.6cqw/1 var(--font-ui, var(--font)); color: #4a1230; padding: 0 !important; }
#screen-over #over-btns .go-links > button.ov-share { display: grid; place-items: center; padding-right: 20cqw !important; padding-left: 4cqw !important; padding-bottom: 4cqw !important; }
#screen-over #over-btns .go-links > button.ov-menu { all: unset; box-sizing: border-box; grid-area: home; justify-self: center; position: relative; display: grid; place-items: center; cursor: pointer; width: 100%; max-width: 168px; aspect-ratio: 560 / 180; container-type: inline-size; background: url('../assets/ui/btn-home.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 3px 3px rgba(122, 31, 61, 0.2)); font: 900 9cqw/1 var(--font-ui, var(--font)); color: #4a1230; padding-left: 26cqw; padding-bottom: 8cqw; transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1); -webkit-tap-highlight-color: transparent; }
#screen-over #over-btns .go-links > button.ov-menu::before { display: none !important; content: none !important; }
#screen-over #over-btns .go-links > button.ov-share:active, #screen-over #over-btns .go-links > button.ov-menu:active { transform: translateY(2px) scale(0.97); }
@media (hover: hover) { #screen-over #over-btns .go-row > button.go-alt:hover, #screen-over #over-btns .go-links > button:hover { transform: translateY(-3px) rotate(-0.8deg); } }
#screen-over #over-btns button:focus-visible { outline: 3px solid #4a1230; outline-offset: 3px; border-radius: 18px; }
/* piggy bank artwork (user-supplied) */
#screen-over .oc-bank .oc-pig { object-fit: contain; width: 62px !important; height: 55px !important; filter: drop-shadow(0 2px 0 rgba(122,31,61,.25)); }
/* Back home: user-supplied house icon */
#screen-over #over-btns .go-links > button.ov-menu::before { display: block !important; content: '' !important; position: absolute; left: 3cqw; top: 50%; width: 32cqw; aspect-ratio: 3 / 2; transform: translateY(-58%) rotate(-3deg); background: url('../assets/ui/icon-home.webp') center / contain no-repeat; pointer-events: none; }
#screen-over #over-btns .go-links > button.ov-menu { padding-left: 33cqw; }
/* ===== Game Over secondary buttons: rounded pills in the same language as the stat cards / Go again ===== */
#screen-over #over-btns .go-row > button.go-alt,
#screen-over #over-btns .go-links > button.ov-share,
#screen-over #over-btns .go-links > button.ov-menu {
aspect-ratio: auto !important; height: auto !important; background-image: none !important; filter: none !important;
border: 3px solid #7a1f3f !important; border-radius: 999px !important;
box-shadow: 0 5px 0 #7a1f3f, inset 0 -6px 0 rgba(122,31,61,.07), inset 0 3px 0 rgba(255,255,255,.7) !important;
display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px; text-align: center;
padding: 10px 18px !important; min-height: 60px; color: #4a1230 !important;
font: 900 clamp(16px, 4.6vw, 20px)/1.1 var(--font-ui, var(--font)) !important;
}
#screen-over #over-btns .go-row > button.go-alt { background-color: #efe6ff !important; min-height: 74px; }
#screen-over #over-btns .go-row > button.go-alt.ov-revive { background-color: #ffe27a !important; }
#screen-over #over-btns .go-links > button.ov-share { background-color: #fff1d6 !important; min-height: 62px; }
#screen-over #over-btns .go-links > button.ov-menu { background-color: #f6f1ff !important; width: auto !important; min-width: 150px; max-width: none !important; min-height: 54px; padding-left: 58px !important; justify-self: center; }
#screen-over #over-btns .go-row > button.go-alt .lbl { position: static !important; transform: none !important; left: auto; right: auto; top: auto; text-align: center !important; font: 900 clamp(16px, 4.6vw, 20px)/1.1 var(--font-ui, var(--font)) !important; }
#screen-over #over-btns .go-row > button.go-alt.ov-revive .lbl { font-size: clamp(15px, 4.2vw, 18px) !important; }
#screen-over #over-btns .go-row > button.go-alt .lbl small { font-size: 12px !important; padding: 2px 9px 3px !important; margin-top: 4px; }
#screen-over #over-btns .go-links > button.ov-menu::before { left: 8px !important; top: 50% !important; width: 48px !important; transform: translateY(-50%) rotate(-3deg) !important; }
#screen-over #over-btns .go-row > button.go-alt:active, #screen-over #over-btns .go-links > button.ov-share:active, #screen-over #over-btns .go-links > button.ov-menu:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 #7a1f3f, inset 0 3px 0 rgba(255,255,255,.6) !important; }
#screen-over #over-btns .go-row:has(> .go-alt.hidden) > .go-alt:not(.hidden) { grid-column: 1 / -1; }
#screen-over #over-btns .go-row > button.go-alt .lbl, #screen-over #over-btns .go-row > button.go-alt .lbl b { background: none !important; text-decoration: none !important; }
#screen-over #over-btns .go-row > button.go-alt .lbl::before, #screen-over #over-btns .go-row > button.go-alt .lbl::after, #screen-over #over-btns .go-row > button.go-alt .lbl b::after { display: none !important; content: none !important; }
#screen-over #over-btns .go-links > button.ov-menu { white-space: nowrap; }
#screen-over #over-btns .go-links > button.ov-menu { padding-left: 70px !important; padding-right: 22px !important; min-width: 180px; }
#screen-over #over-btns .go-links > button.ov-menu::before { left: 10px !important; width: 52px !important; }
/* icons inside the pills (stopgap painted icons until the user's artwork is dropped in) */
#screen-over #over-btns .go-row > button.go-alt::before, #screen-over #over-btns .go-links > button.ov-share::before { display: block !important; content: '' !important; flex: none; width: 54px; height: 54px; margin: 0 2px 0 -4px; background: center / contain no-repeat; filter: drop-shadow(0 2px 0 rgba(122,31,61,.2)); }
#screen-over #over-btns .go-row > button.go-alt.ov-outfits::before { background-image: url('../assets/ui/icon-hanger.webp'); }
#screen-over #over-btns .go-row > button.go-alt.ov-revive::before { background-image: url('../assets/ui/icon-chest.webp'); }
#screen-over #over-btns .go-links > button.ov-share::before { background-image: url('../assets/ui/icon-rocket.webp'); width: 50px; height: 50px; }
/* ===== Whimsy pass: piggy bank + pills ===== */
@keyframes pigBob { 0%,100% { transform: rotate(-4deg) translateY(0) scale(1,1); } 30% { transform: rotate(3deg) translateY(-6px) scale(.96,1.05); } 55% { transform: rotate(-2deg) translateY(0) scale(1.05,.94); } 75% { transform: rotate(2deg) translateY(-2px) scale(1,1); } }
@keyframes coinDrop { 0% { transform: translate(0,-34px) rotate(0) scale(.7); opacity: 0; } 15% { opacity: 1; } 60% { transform: translate(0,10px) rotate(300deg) scale(1); opacity: 1; } 75%,100% { transform: translate(0,16px) rotate(360deg) scale(.2); opacity: 0; } }
@keyframes twinkle { 0%,100% { transform: scale(.6) rotate(0); opacity: .35; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
@keyframes pillWiggle { 0%,86%,100% { transform: rotate(var(--tilt,0deg)); } 90% { transform: rotate(calc(var(--tilt,0deg) - 2.2deg)) translateY(-2px); } 94% { transform: rotate(calc(var(--tilt,0deg) + 2.2deg)) translateY(-2px); } }
@keyframes iconHop { 0%,80%,100% { transform: translateY(0) rotate(0); } 88% { transform: translateY(-7px) rotate(-10deg); } 94% { transform: translateY(0) rotate(6deg); } }
#screen-over .oc-bank { position: relative; overflow: visible !important; padding: 14px 14px 14px 104px !important; min-height: 76px; border: 3px solid #7a1f3f !important; border-radius: 34px 26px 34px 26px / 28px 34px 28px 34px !important; background: radial-gradient(circle at 12px 12px, rgba(255,210,63,.55) 0 3px, transparent 4px) 0 0 / 26px 26px, linear-gradient(160deg, #fdefe5, #fce3d3 55%, #ffe9b8) !important; box-shadow: 0 5px 0 #7a1f3f, inset 0 3px 0 rgba(255,255,255,.7) !important; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#screen-over .oc-bank .oc-pig { position: absolute !important; left: 10px; top: 50%; width: 84px !important; height: auto !important; margin: 0 !important; transform-origin: 50% 90%; translate: 0 -54%; animation: pigBob 2.6s ease-in-out infinite; filter: drop-shadow(0 4px 0 rgba(122,31,61,.25)) !important; }
#screen-over .oc-bank::before { content: ''; position: absolute; left: 54px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a8, #ffc928 60%, #e59a12); border: 2.5px solid #7a1f3f; z-index: 2; animation: coinDrop 2.6s ease-in infinite; }
#screen-over .oc-bank::after { content: '\2726'; position: absolute; right: 118px; top: -10px; font-size: 20px; color: #ffc928; text-shadow: 0 2px 0 #7a1f3f; animation: twinkle 1.8s ease-in-out infinite; }
#screen-over .oc-bank .oc-lbl { font: 900 clamp(15px, 4.4vw, 19px)/1.05 var(--font-ui, var(--font)) !important; color: #7a1f3f; letter-spacing: 0; text-transform: none !important; }
#screen-over .oc-bank .oc-num { font: 900 clamp(20px, 6vw, 26px)/1 var(--font-ui, var(--font)) !important; color: #5a1230; padding: 8px 14px 9px 30px !important; border: 3px solid #7a1f3f !important; border-radius: 999px !important; background: radial-gradient(circle at 16px 50%, #ffd23f 0 8px, #e59a12 9px 10px, transparent 11px), linear-gradient(#fffaf0, #ffeeb8) !important; box-shadow: 0 3px 0 #7a1f3f; transform: rotate(-2deg); }
#screen-over #over-btns .go-row > button.go-alt.ov-outfits { --tilt: -1.4deg; }
#screen-over #over-btns .go-row > button.go-alt.ov-revive { --tilt: 1.2deg; }
#screen-over #over-btns .go-links > button.ov-share { --tilt: -.8deg; }
#screen-over #over-btns .go-links > button.ov-menu { --tilt: 1deg; }
#screen-over #over-btns .go-row > button.go-alt, #screen-over #over-btns .go-links > button.ov-share, #screen-over #over-btns .go-links > button.ov-menu { transform: rotate(var(--tilt,0deg)); animation: pillWiggle 5s ease-in-out infinite !important; }
#screen-over #over-btns .go-row > button.go-alt.ov-revive { animation-delay: 1.3s !important; } #screen-over #over-btns .go-links > button.ov-share { animation-delay: 2.4s !important; } #screen-over #over-btns .go-links > button.ov-menu { animation-delay: 3.4s !important; }
#screen-over #over-btns .go-row > button.go-alt::before, #screen-over #over-btns .go-links > button.ov-share::before, #screen-over #over-btns .go-links > button.ov-menu::before { animation: iconHop 5s ease-in-out infinite; }
#screen-over #over-btns .go-row > button.go-alt::after, #screen-over #over-btns .go-links > button.ov-share::after { display: block !important; content: '\2726' !important; position: absolute; right: 16px; top: -9px; font-size: 18px; line-height: 1; color: #ffc928; text-shadow: 0 2px 0 #7a1f3f; animation: twinkle 2.2s ease-in-out infinite; pointer-events: none; }
#screen-over #over-btns .go-row > button.go-alt.ov-revive::after { right: auto; left: 18px; animation-delay: .7s; }
#screen-over #over-btns .go-links > button.ov-share::after { right: 24px; animation-delay: 1.2s; }
@media (hover: hover) { #screen-over #over-btns .go-row > button.go-alt:hover, #screen-over #over-btns .go-links > button.ov-share:hover, #screen-over #over-btns .go-links > button.ov-menu:hover { transform: translateY(-4px) rotate(calc(var(--tilt,0deg) * -1.5)) scale(1.03) !important; } }
@media (prefers-reduced-motion: reduce) { #screen-over .oc-bank .oc-pig, #screen-over .oc-bank::before, #screen-over .oc-bank::after, #screen-over #over-btns button, #screen-over #over-btns button::before, #screen-over #over-btns button::after { animation: none !important; } #screen-over .oc-bank::before { opacity: 0; } }
/* ===== Your artwork in the icon slots ===== */
@keyframes starWobble { 0%,100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(10deg) scale(1.12); } }
.pill-daily::before { content: '' !important; font-size: 0 !important; width: 48px !important; height: 48px !important; margin-top: -24px !important; left: 8px !important; background: url('../assets/ui/icon-star.webp') center / contain no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 2px 0 rgba(58,31,46,.35)); animation: starWobble 2.4s ease-in-out infinite !important; overflow: visible; }
#screen-over #over-btns .go-row > button.go-alt::before, #screen-over #over-btns .go-links > button.ov-share::before { width: 62px !important; height: 62px !important; margin: -8px 4px -8px -6px !important; filter: drop-shadow(0 3px 0 rgba(122,31,61,.22)); }
#screen-over #over-btns .go-row > button.go-alt.ov-outfits::before { background-image: url('../assets/ui/icon-hanger.webp') !important; }
#screen-over #over-btns .go-row > button.go-alt.ov-revive::before { background-image: url('../assets/ui/icon-chest.webp') !important; }
#screen-over #over-btns .go-links > button.ov-share::before { background-image: url('../assets/ui/icon-friends.webp') !important; width: 84px !important; height: 52px !important; margin: -6px 4px -6px -10px !important; }
#screen-over #over-btns, #screen-over #over-btns .go-row, #screen-over #over-btns .go-links { overflow: visible !important; }
#screen-over #over-btns .go-row > button.go-alt, #screen-over #over-btns .go-links > button.ov-share, #screen-over #over-btns .go-links > button.ov-menu { overflow: visible !important; }
#screen-over #over-btns .go-links > button.ov-share::before { position: static !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; }
#screen-over #over-btns .go-links > button.ov-share::after { left: auto !important; width: auto !important; height: auto !important; background: none !important; right: 22px !important; top: -9px !important; }
#screen-over #over-btns .go-row > button.go-alt::before { position: static !important; }
#screen-over #over-btns .go-links > button.ov-menu::before { background: url('../assets/ui/icon-home.webp') center / contain no-repeat !important; width: 58px !important; height: 44px !important; aspect-ratio: auto !important; }
#screen-over #over-btns .go-links > button.ov-menu { padding-left: 84px !important; padding-right: 24px !important; min-width: 208px; min-height: 58px; }
#screen-over #over-btns .go-links > button.ov-menu::before { left: 8px !important; width: 68px !important; height: 52px !important; top: 50% !important; transform: translateY(-50%) rotate(-3deg) !important; }
@keyframes rocketHover { 0%,100% { transform: translateY(-50%) rotate(8deg); } 50% { transform: translateY(-62%) rotate(2deg); } }
#screen-over #over-btns .go-links > button.ov-share::after { content: '' !important; position: absolute !important; right: 14px !important; top: 50% !important; width: 46px !important; height: 46px !important; background: url('../assets/ui/icon-rocket.webp') center / contain no-repeat !important; text-shadow: none !important; filter: drop-shadow(0 2px 0 rgba(122,31,61,.22)); animation: rocketHover 2.4s ease-in-out infinite !important; }
#screen-over .oc-ic .oc-art { display: block; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(122,31,61,.2)); animation: iconHop 5s ease-in-out infinite; }
#screen-over .oc-ic:has(.oc-art) { width: 60px !important; height: 52px !important; } #screen-over .oc-ic .oc-art { width: 60px; height: 52px; }
/* ===== Menu stats: hand-lettered, playful ===== */
@keyframes msBob { 0%,100% { transform: rotate(var(--r,-2deg)) translateY(0); } 50% { transform: rotate(calc(var(--r,-2deg) * -.6)) translateY(-2px); } }
#screen-menu .ms small, #screen-menu .ms small.sr { display: block; font: 400 clamp(17px, 4.9vw, 21px)/1 var(--font-title) !important; letter-spacing: .2px !important; text-transform: none !important; color: #844630 !important; opacity: 1 !important; margin-bottom: 1px; transform-origin: left center; transform: rotate(-2.5deg); animation: msBob 4.2s ease-in-out infinite; }
#screen-menu .ms:nth-child(2) small { color: #5b3ea8 !important; --r: 2deg; animation-delay: -1s; }
#screen-menu .ms:nth-child(3) small { color: #1f7a78 !important; --r: -1.5deg; animation-delay: -2s; }
#screen-menu .ms b { font: 400 clamp(26px, 8vw, 36px)/1 var(--font-title) !important; letter-spacing: .3px; color: #4a1230 !important; text-shadow: none !important; display: inline-block; transform: rotate(-1.5deg); -webkit-text-stroke: .4px #4a1230; }
#screen-menu .ms:nth-child(3) b { font-size: clamp(22px, 6.4vw, 28px) !important; }
@media (prefers-reduced-motion: reduce) { #screen-menu .ms small { animation: none; } }
/* eyebrow labels = painted cloud tags (text stays in DOM for screen readers) */
#screen-menu .ms:nth-child(2) small, #screen-menu .ms:nth-child(3) small { width: clamp(112px, 32vw, 140px); height: clamp(40px, 11.6vw, 50px); font-size: 0 !important; color: transparent !important; overflow: hidden; white-space: nowrap; text-indent: -999px; background: center / contain no-repeat; transform: rotate(-2deg); margin: 0 0 2px -6px; animation: msBob 4.2s ease-in-out infinite; }
#screen-menu .ms:nth-child(2) small { background-image: url('../assets/lettering/longest-run.webp'); --r: -2deg; }
#screen-menu .ms:nth-child(3) small { background-image: url('../assets/lettering/farthest-planet.webp'); --r: 2deg; animation-delay: -1.5s; }
#screen-menu .ms b { font-size: clamp(28px, 8.4vw, 38px) !important; -webkit-text-stroke: .6px #4a1230; }
/* ===== Agrave Pro for standout in-game titles (level names, banners, tutorial titles) ===== */
#hud-lvn, #level-banner b, #level-banner strong, #level-banner h2, #level-banner > :first-child, #tut-title { font-family: var(--font-title) !important; font-weight: 400 !important; letter-spacing: .3px !important; text-transform: none !important; }
#hud-lvn { font-size: 1.12em; -webkit-text-stroke: .35px currentColor; }
#level-banner > :first-child { font-size: clamp(34px, 10vw, 54px) !important; line-height: 1 !important; -webkit-text-stroke: .6px currentColor; }
#tut-title { font-size: clamp(26px, 7.4vw, 34px) !important; line-height: 1.05; -webkit-text-stroke: .5px currentColor; }
/* Daily Challenge orb: your 5-frame star-planet orbit */
@keyframes orbitFrames { to { background-position: -500% 0; } }
.pill-daily::before { background: url('../assets/ui/star-orbit.webp') 0 0 / 500% 100% no-repeat !important; width: 52px !important; height: 52px !important; margin-top: -26px !important; left: 6px !important; animation: orbitFrames 1.1s steps(5) infinite !important; }
@media (prefers-reduced-motion: reduce) { .pill-daily::before { animation: none !important; } }
@keyframes orbitFrames { from { background-position: 0 0; } to { background-position: -260px 0; } }
.pill-daily::before { background: url('../assets/ui/star-orbit.webp') 0 0 / 260px 52px no-repeat !important; }
/* sparkly score: your smiling star-planet */
@keyframes starFloat { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-7px) rotate(5deg) scale(1.06); } }
#screen-over .go-score { position: relative; }
#screen-over .go-score::before { content: ''; position: absolute; left: clamp(6px, 6vw, 40px); top: 50%; width: clamp(64px, 20vw, 92px); height: clamp(52px, 16vw, 74px); margin-top: -34px; background: url('../assets/ui/icon-sparkle-c3.webp') center / contain no-repeat; filter: drop-shadow(0 3px 0 rgba(122,31,61,.22)); animation: starFloat 3s ease-in-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #screen-over .go-score::before { animation: none; } }
.comet .cm-cape { width: 34px !important; height: 30px !important; object-fit: contain; margin-right: 0 !important; transform-origin: 50% 80%; }
@media (max-width: 760px) { .comet .cm-cape { width: 30px !important; height: 27px !important; } }
/* ===== Settings rows -> soft rounded cards (Paused + Settings) ===== */
.stack .set-row { background: linear-gradient(180deg, #fffaf0, #fff0d8) !important; border: 2.5px solid #7a1f3f !important; border-bottom: 2.5px solid #7a1f3f !important; border-radius: 24px 20px 24px 20px / 20px 24px 20px 24px !important; padding: 10px 14px 10px 18px !important; min-height: 56px; box-shadow: 0 4px 0 rgba(122, 31, 61, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.75); gap: 12px; font-size: clamp(16px, 4.6vw, 19px); }
.stack .set-row:nth-of-type(even) { transform: rotate(0.4deg); } .stack .set-row:nth-of-type(odd) { transform: rotate(-0.4deg); }
.stack .set-row > span { flex: 1 1 auto; white-space: nowrap; font-family: var(--font-ui) !important; font-weight: 700 !important; color: #4a1230 !important; }
.stack .set-row .btn.small { flex: 0 0 auto; min-width: 96px; width: auto !important; padding: 8px 18px !important; min-height: 40px; box-shadow: 0 3px 0 #7a1f3f; background: #ffe27a !important; border-radius: 999px !important; }
.stack .set-row input[type=range] { flex: 0 1 48%; min-width: 110px; }
@media (max-width: 380px) { .stack .set-row { padding: 8px 12px 8px 14px !important; gap: 8px; } .stack .set-row .btn.small { min-width: 84px; padding: 6px 12px !important; } }
.stack .set-row > span { text-align: left !important; justify-content: flex-start !important; }
/* narrow phones: stack Dress up / Rescue, give the Challenge pill room for its icons */
@media (max-width: 400px) {
#screen-over #over-btns .go-row { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
#screen-over #over-btns .go-row > button.go-alt { min-height: 66px; padding-left: 14px !important; padding-right: 14px !important; justify-content: flex-start !important; gap: 10px; }
#screen-over #over-btns .go-row > button.go-alt .lbl { text-align: left !important; flex: 1 1 auto; }
#screen-over #over-btns .go-links > button.ov-share { font-size: 15px !important; padding: 8px 52px 8px 10px !important; gap: 4px; }
#screen-over #over-btns .go-links > button.ov-share::before { width: 66px !important; height: 42px !important; margin: -4px 0 -4px -4px !important; }
#screen-over #over-btns .go-links > button.ov-share::after { width: 36px !important; height: 36px !important; right: 10px !important; }
#screen-over #over-btns .go-links > button.ov-menu { min-width: 170px; padding-left: 74px !important; }
#screen-over #over-btns .go-links > button.ov-menu::before { width: 58px !important; height: 46px !important; }
}
/* ===== Crayon-on-paper texture (replaces the old grain tile). Tune --paper-amt: 0 = off, 1 = as drawn, 1.4 = bolder ===== */
:root { --paper-amt: 1; }
body::after { background: url('../assets/paper-crayon.webp') 0 0 / 512px 512px repeat !important; opacity: var(--paper-amt) !important; mix-blend-mode: normal !important; }
@media (prefers-contrast: more) { :root { --paper-amt: 0.35; } }
/* ===== Friend challenge invitation: a little paper card, not a bare bubble ===== */
@keyframes chbIn { 0% { transform: translateX(-50%) translateY(-18px) rotate(-5deg) scale(.9); opacity: 0; } 70% { transform: translateX(-50%) translateY(4px) rotate(1.5deg) scale(1.02); opacity: 1; } 100% { transform: translateX(-50%) rotate(-1.4deg); opacity: 1; } }
@keyframes chbRocket { 0%,100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-6px) rotate(-4deg); } }
.ch-ban { top: 78px !important; width: min(92vw, 340px); max-width: none !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 16px 16px 14px !important; border: 3px solid #7a1f3f !important; border-radius: 30px 24px 30px 24px / 24px 30px 24px 30px !important; background: radial-gradient(circle at 14px 14px, rgba(255, 210, 63, .5) 0 3px, transparent 4px) 0 0 / 26px 26px, linear-gradient(165deg, #fffaf0, #ffe9c8) !important; box-shadow: 0 6px 0 #7a1f3f, 0 14px 22px rgba(74, 18, 48, .25) !important; transform: translateX(-50%) rotate(-1.4deg) !important; animation: chbIn .6s cubic-bezier(.2, 1.4, .4, 1) both; text-align: center; }
.ch-ban::before, .ch-ban::after { content: '\2726'; position: absolute; color: #ffc928; text-shadow: 0 2px 0 #7a1f3f; font-size: 20px; line-height: 1; }
.ch-ban::before { top: -12px; right: 24px; } .ch-ban::after { bottom: 52px; left: 12px; font-size: 14px; }
.chb-top { display: flex; align-items: center; justify-content: center; gap: 10px; }
.chb-rocket { flex: none; width: 54px; height: 44px; background: url('../assets/ui/icon-rocket.webp') center / contain no-repeat; filter: drop-shadow(0 3px 0 rgba(122, 31, 61, .25)); animation: chbRocket 2.2s ease-in-out infinite; }
.chb-who { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.05; }
.ch-ban .chb-who b { font: 400 clamp(26px, 8vw, 32px)/1 var(--font-title); color: #7a1f3f; -webkit-text-stroke: .4px #7a1f3f; }
.chb-who small { font: 800 13px/1.2 var(--font-ui); color: #844630; }
.chb-goal { font: 800 15px/1.2 var(--font-ui); color: #4a1230; }
.ch-ban .chb-goal b { display: inline-block; margin-left: 4px; padding: 3px 14px 5px; font: 400 clamp(24px, 7vw, 30px)/1 var(--font-title); color: #4a1230; background: #ffe27a; border: 2.5px solid #7a1f3f; border-radius: 999px; box-shadow: 0 3px 0 #7a1f3f; transform: rotate(1.5deg); }
.chb-btns { display: flex; gap: 8px; justify-content: center; align-items: center; }
.ch-ban .chb-btns .btn.small { min-height: 44px; padding: 8px 20px; border-radius: 999px; font: 900 16px/1 var(--font-ui); }
.ch-ban .chb-btns .btn.primary { background: linear-gradient(#ffe97a, #ffc619) !important; border: 3px solid #7a1f3f !important; box-shadow: 0 4px 0 #7a1f3f !important; color: #4a1230 !important; }
.ch-ban .chb-btns .btn:not(.primary) { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #844630 !important; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .ch-ban, .chb-rocket { animation: none !important; } }
/* ===== Leaderboard empty state ===== */
@keyframes bdeBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
.bd-empty { list-style: none; display: flex !important; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px 20px !important; margin: 8px 0; text-align: center; background: radial-gradient(circle at 12px 12px, rgba(255, 210, 63, .45) 0 3px, transparent 4px) 0 0 / 26px 26px, linear-gradient(165deg, #fffaf0, #ffe9c8) !important; border: 3px solid #7a1f3f !important; border-radius: 30px 24px 30px 24px / 24px 30px 24px 30px !important; box-shadow: 0 5px 0 #7a1f3f !important; }
.bde-art { width: 92px; height: 74px; background: url('../assets/ui/icon-sparkle-c3.webp') center / contain no-repeat; filter: drop-shadow(0 4px 0 rgba(122, 31, 61, .2)); animation: bdeBob 2.6s ease-in-out infinite; }
.bde-t { font: 400 clamp(24px, 7vw, 30px)/1.05 var(--font-title); color: #7a1f3f; -webkit-text-stroke: .4px #7a1f3f; }
.bde-s { font: 700 14px/1.3 var(--font-ui); color: #4a2f3a; }
.bde-go { min-height: 46px; margin-top: 4px; padding: 8px 22px !important; border-radius: 999px !important; font: 900 16px/1 var(--font-ui) !important; background: linear-gradient(#ffe97a, #ffc619) !important; border: 3px solid #7a1f3f !important; box-shadow: 0 4px 0 #7a1f3f !important; color: #4a1230 !important; }
@media (prefers-reduced-motion: reduce) { .bde-art { animation: none; } }
/* ===== Game Over colour rebalance: biome night sky + pink as accent (not the whole page) ===== */
#screen-over.go-screen {
background:
radial-gradient(1.6px 1.6px at 12% 8%, #fff8d8 98%, transparent) 0 0 / 180px 150px,
radial-gradient(1.2px 1.2px at 64% 22%, #fff 98%, transparent) 40px 30px / 220px 170px,
radial-gradient(2px 2px at 82% 12%, #ffe9a0 98%, transparent) 0 0 / 260px 200px,
radial-gradient(90% 38% at 50% 100%, color-mix(in srgb, var(--go-d) 55%, #f8bd96) 0%, transparent 72%),
linear-gradient(180deg, color-mix(in srgb, var(--go-e) 42%, #17236a) 0%, color-mix(in srgb, var(--go-e) 34%, #3b2b92) 42%, color-mix(in srgb, var(--go-c) 38%, #c1785e) 100%) !important;
}
/* text that sits straight on the sky */
#screen-over .go-score > small { color: #fff3c9 !important; text-shadow: 0 2px 0 rgba(23, 35, 106, .55); opacity: 1 !important; }
#screen-over .go-score > b { color: #fff6d8 !important; -webkit-text-stroke: 2px #4a1230; paint-order: stroke fill; text-shadow: 0 4px 0 #4a1230, 0 0 22px rgba(255, 214, 80, .55) !important; }
/* pills: one hue each, pink stays on the piggy bank */
#screen-over #over-btns .go-row > button.go-alt.ov-outfits { background-color: #d9f0ff !important; }
#screen-over #over-btns .go-row > button.go-alt.ov-revive { background-color: #ffd86b !important; }
#screen-over #over-btns .go-links > button.ov-share { background-color: #c9f3df !important; }
#screen-over #over-btns .go-links > button.ov-menu { background-color: #efe3ff !important; }
/* leaderboard: no leftover header ribbons, no empty note */
#screen-board h2.lt-h::before, #screen-board h2.lt-h::after, .panel h2.lt-h::before, .panel h2.lt-h::after { display: none !important; content: none !important; }
.bd-note:empty { display: none !important; }
/* ===== Home stats: compact so the menu buttons stay visible on phones ===== */
#screen-menu .menu-stats { padding: 8px 12px 9px !important; gap: 2px 8px !important; border-radius: 22px !important; }
#screen-menu .ms { min-height: 0 !important; gap: 6px !important; align-items: center !important; padding: 0 !important; }
#screen-menu .ms .msi, #screen-menu .ms .msi img, #screen-menu .ms .msi canvas { width: 34px !important; height: 30px !important; max-height: 30px; object-fit: contain; }
#screen-menu .ms .ms-hsb { width: 44px !important; height: 34px !important; }
#screen-menu .ms > div { display: flex !important; flex-direction: column; justify-content: center; min-width: 0; line-height: 1; }
#screen-menu .ms:nth-child(2) small, #screen-menu .ms:nth-child(3) small { width: clamp(92px, 27vw, 112px) !important; height: clamp(30px, 8.6vw, 38px) !important; margin: 0 0 0 -4px !important; }
#screen-menu .ms b { font-size: clamp(21px, 6.2vw, 26px) !important; line-height: 1 !important; margin-top: -1px; }
#screen-menu .ms:nth-child(3) b { font-size: clamp(16px, 4.8vw, 20px) !important; white-space: nowrap; }
#screen-menu .ms-next .ms-nub { height: 18px !important; width: auto !important; }
#screen-menu .ms-next b { font-size: clamp(17px, 5vw, 21px) !important; white-space: nowrap; }
#screen-menu .ms-next .comet { margin-top: 3px !important; }
#screen-menu .ms-next .ms-nub { width: 58px !important; height: 21px !important; max-width: none !important; object-fit: contain; display: block; margin: 0 0 1px -2px; }
/* the little speck: a leftover background doodle on every painted heading */
#app h2.lt-h, .screen h2.lt-h, .panel h2.lt-h, .panel-inner > h2.lt-h, .pg-top > h2.lt-h, h2.lt-h.lt-h { background: none !important; background-image: none !important; }
/* stats panel alignment: fixed icon column, left-aligned text, equal rows */
#screen-menu .menu-stats { align-items: center !important; row-gap: 6px !important; }
#screen-menu .ms { display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; }
#screen-menu .ms .msi { flex: 0 0 40px !important; width: 40px !important; height: 36px !important; display: grid !important; place-items: center !important; margin: 0 !important; }
#screen-menu .ms .msi img, #screen-menu .ms .msi canvas { width: 38px !important; height: 34px !important; }
#screen-menu .ms > div { align-items: flex-start !important; text-align: left !important; flex: 1 1 auto; }
#screen-menu .ms:nth-child(2) small, #screen-menu .ms:nth-child(3) small { margin: 0 0 1px 0 !important; transform-origin: left center; }
#screen-menu .ms b { display: block !important; transform: rotate(-1deg); margin: 0 0 0 2px !important; }
#screen-menu .ms-next { align-items: flex-start !important; }
#screen-menu .ms-next > div { width: 100%; }
#screen-menu .ms-next .comet { align-self: stretch !important; width: 100% !important; margin-top: 5px !important; }
#screen-menu .ms-next b { margin-bottom: 2px !important; }
#screen-over .oc-bank { padding-left: 92px !important; gap: 6px !important; }
#screen-over .oc-bank .oc-pig { width: 76px !important; }
#screen-over .oc-bank .oc-lbl { white-space: nowrap; font-size: clamp(14px, 4vw, 18px) !important; }
#screen-over .oc-bank .oc-num { padding: 7px 12px 8px 28px !important; font-size: clamp(19px, 5.4vw, 24px) !important; }
/* Challenge a friend: one icon only (your high-five astronauts), no extra rocket */
#screen-over #over-btns .go-links > button.ov-share::after { display: none !important; content: none !important; animation: none !important; }
#screen-over #over-btns .go-links > button.ov-share::before { width: 92px !important; height: 62px !important; margin: -8px 6px -8px -8px !important; }
#screen-over #over-btns .go-links > button.ov-share { padding: 8px 18px 8px 10px !important; }
@media (max-width: 400px) {
#screen-over #over-btns .go-links > button.ov-share { padding: 8px 12px 8px 8px !important; font-size: 15px !important; }
#screen-over #over-btns .go-links > button.ov-share::before { width: 78px !important; height: 54px !important; margin: -6px 4px -6px -6px !important; }
}
/* ===== Challenge a friend: the hero pill (shimmer + glow + twinkles) ===== */
@keyframes shimmerSweep { 0% { background-position: 170% 0, 0 0; } 55%, 100% { background-position: -70% 0, 0 0; } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 5px 0 #7a1f3f, 0 0 0 rgba(255, 214, 90, 0), inset 0 3px 0 rgba(255, 255, 255, .8); } 50% { box-shadow: 0 5px 0 #7a1f3f, 0 0 26px rgba(255, 214, 90, .85), inset 0 3px 0 rgba(255, 255, 255, .8); } }
#screen-over #over-btns .go-links > button.ov-share {
min-height: 76px !important; font-size: clamp(17px, 5vw, 21px) !important; font-weight: 900 !important; color: #4a1230 !important;
background-image: linear-gradient(105deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.9) 48%, rgba(255,255,255,0) 60%), linear-gradient(135deg, #fff0a8 0%, #fcddc9 52%, #bff0dc 100%) !important;
background-size: 260% 100%, 100% 100% !important; background-repeat: no-repeat !important; background-position: 170% 0, 0 0 !important;
animation: pillWiggle 5s ease-in-out infinite, shimmerSweep 3.4s ease-in-out infinite, glowPulse 2.6s ease-in-out infinite !important; animation-delay: 0s, .6s, 0s !important;
}
#screen-over #over-btns .go-links > button.ov-share::after { display: block !important; content: '\2726' !important; position: absolute !important; right: 18px !important; top: -11px !important; left: auto !important; width: auto !important; height: auto !important; background: none !important; font-size: 22px !important; line-height: 1; color: #ffc928; text-shadow: 0 2px 0 #7a1f3f; animation: twinkle 1.8s ease-in-out infinite !important; }
@media (prefers-reduced-motion: reduce) { #screen-over #over-btns .go-links > button.ov-share { animation: none !important; } }
@media (max-width: 400px) { #screen-over #over-btns .go-links > button.ov-share::before { width: 96px !important; height: 66px !important; margin: -10px 2px -10px -8px !important; } #screen-over #over-btns .go-links > button.ov-share { min-height: 80px !important; } }
#screen-over #over-btns .go-links > button.ov-share::before { filter: drop-shadow(0 3px 0 rgba(122,31,61,.25)) drop-shadow(0 0 8px rgba(255,214,90,.6)); }
/* more glow on Challenge a friend */
@keyframes glowPulse2 {
0%, 100% { box-shadow: 0 5px 0 #7a1f3f, 0 0 14px 2px rgba(255, 214, 90, .55), 0 0 34px 6px rgba(255, 143, 191, .35), inset 0 3px 0 rgba(255,255,255,.85), inset 0 0 18px rgba(255, 236, 150, .5); }
50% { box-shadow: 0 5px 0 #7a1f3f, 0 0 26px 7px rgba(255, 224, 100, .95), 0 0 58px 16px rgba(255, 143, 191, .6), 0 0 90px 24px rgba(160, 220, 255, .3), inset 0 3px 0 rgba(255,255,255,.9), inset 0 0 26px rgba(255, 240, 160, .8); }
}
#screen-over #over-btns .go-links > button.ov-share { animation: pillWiggle 5s ease-in-out infinite, shimmerSweep 3.4s ease-in-out infinite, glowPulse2 2.2s ease-in-out infinite !important; animation-delay: 0s, .6s, 0s !important; }
#screen-over #over-btns .go-links > button.ov-share::before { filter: drop-shadow(0 3px 0 rgba(122,31,61,.25)) drop-shadow(0 0 12px rgba(255,224,100,.95)) !important; }
#screen-over #over-btns .go-links { overflow: visible !important; }
/* glow that actually animates: drive a registered custom property (important box-shadow can't be animated directly) */
@property --gl { syntax: ''; inherits: false; initial-value: 0; }
@keyframes glowVar { from { --gl: 0; } to { --gl: 1; } }
#screen-over #over-btns .go-links > button.ov-share {
box-shadow: 0 5px 0 #7a1f3f,
0 0 calc(14px + 22px * var(--gl)) calc(2px + 8px * var(--gl)) rgba(255, 222, 96, calc(0.55 + 0.4 * var(--gl))),
0 0 calc(34px + 34px * var(--gl)) calc(4px + 14px * var(--gl)) rgba(255, 143, 191, calc(0.35 + 0.35 * var(--gl))),
inset 0 3px 0 rgba(255, 255, 255, .9), inset 0 0 calc(14px + 14px * var(--gl)) rgba(255, 240, 160, calc(0.5 + 0.35 * var(--gl))) !important;
animation: pillWiggle 5s ease-in-out infinite, shimmerSweep 3.4s ease-in-out infinite, glowVar 1.6s ease-in-out infinite alternate !important; animation-delay: 0s, .6s, 0s !important;
}
@media (prefers-reduced-motion: reduce) { #screen-over #over-btns .go-links > button.ov-share { animation: none !important; --gl: .6; } }
#screen-over #over-btns .go-links > button.ov-share {
box-shadow: 0 5px 0 #7a1f3f,
0 0 calc(22px + 26px * var(--gl)) calc(5px + 10px * var(--gl)) rgba(255, 226, 90, calc(0.8 + 0.2 * var(--gl))),
0 0 calc(46px + 40px * var(--gl)) calc(10px + 16px * var(--gl)) rgba(255, 130, 190, calc(0.5 + 0.4 * var(--gl))),
inset 0 3px 0 rgba(255, 255, 255, .9), inset 0 0 calc(16px + 16px * var(--gl)) rgba(255, 240, 160, calc(0.55 + 0.35 * var(--gl))) !important;
}
/* no dotted dividers in the home stats panel */
#screen-menu .menu-stats .ms::before, #screen-menu .menu-stats .ms-next::before, #screen-menu .menu-stats .ms::after { display: none !important; content: none !important; background: none !important; }
/* glow stays UNDER neighbours (Dress up / Rescue sit above it) and is tighter so it never tints them; shadows never take taps */
#screen-over #over-btns .go-row { position: relative; z-index: 3; }
#screen-over #over-btns .go-links { position: relative; z-index: 1; }
#screen-over #over-btns .go-links > button.ov-share { z-index: 0; }
#screen-over #over-btns .go-links > button.ov-share {
box-shadow: 0 5px 0 #7a1f3f,
0 0 calc(10px + 12px * var(--gl)) calc(1px + 4px * var(--gl)) rgba(255, 226, 90, calc(0.7 + 0.3 * var(--gl))),
0 0 calc(22px + 18px * var(--gl)) calc(2px + 6px * var(--gl)) rgba(255, 130, 190, calc(0.4 + 0.35 * var(--gl))),
inset 0 3px 0 rgba(255, 255, 255, .9), inset 0 0 calc(14px + 14px * var(--gl)) rgba(255, 240, 160, calc(0.5 + 0.35 * var(--gl))) !important;
}
#screen-over #over-btns .go-row > button.go-alt.ov-revive { position: relative; z-index: 4; }
#screen-over #over-btns .go-links > button.ov-share::before, #screen-over #over-btns .go-links > button.ov-share::after, #screen-over #over-btns .go-links > button.ov-menu::before { pointer-events: none; }
/* very small phones: the top bar must fit (avatar, coins, sound, settings, help) */
@media (max-width: 360px) {
#screen-menu .menu-top { gap: 5px !important; padding-inline: 8px !important; max-width: 100vw; box-sizing: border-box; justify-content: center; }
#screen-menu .menu-top .icon-btn { width: 40px !important; height: 40px !important; min-width: 40px; flex: 0 0 40px; }
#screen-menu .menu-top .av-chip { width: 44px !important; height: 44px !important; flex: 0 0 44px; }
#screen-menu .menu-top .coin-pill { padding-inline: 10px !important; min-width: 0; flex: 0 1 auto; font-size: 15px; }
}
/* Settings rows = same soft cards as Paused */
#screen-settings .set-row { background: linear-gradient(180deg, #fffaf0, #fff0d8) !important; border: 2.5px solid #7a1f3f !important; border-radius: 24px 20px 24px 20px / 20px 24px 20px 24px !important; padding: 10px 14px 10px 18px !important; min-height: 56px; box-shadow: 0 4px 0 rgba(122, 31, 61, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.75); gap: 12px; margin-bottom: 10px; font-size: clamp(16px, 4.6vw, 19px); }
#screen-settings .set-row:nth-of-type(even) { transform: rotate(0.4deg); } #screen-settings .set-row:nth-of-type(odd) { transform: rotate(-0.4deg); }
#screen-settings .set-row > span { flex: 1 1 auto; white-space: nowrap; font-weight: 700 !important; color: #4a1230 !important; text-align: left; }
#screen-settings .set-row .btn.small { flex: 0 0 auto; min-width: 96px; min-height: 40px; padding: 8px 18px !important; box-shadow: 0 3px 0 #7a1f3f; background: #ffe27a !important; border-radius: 999px !important; }
#screen-settings .set-row input[type=range] { flex: 0 1 48%; min-width: 110px; }
/* ===== Home critters: your whale, UFO and octopus (painted art + extra life) ===== */
@keyframes ufoPatrol { 0%, 100% { left: 68%; } 50% { left: 14%; } }
@keyframes ufoTilt { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes thrust { 0%, 100% { opacity: .55; scale: .85 .8; } 50% { opacity: 1; scale: 1.1 1.25; } }
@keyframes twinkle2 { 0%, 100% { opacity: 0; scale: .3; } 50% { opacity: 1; scale: 1; } }
@keyframes spout { 0% { translate: 0 0; opacity: 0; scale: .4; } 20% { opacity: .95; } 100% { translate: var(--sx, 0) -46px; opacity: 0; scale: 1.1; } }
@keyframes octPulse { 0%, 100% { scale: 1 1; } 35% { scale: .9 1.14; } 55% { scale: 1.08 .92; } }
@keyframes octDrift { 0% { translate: 0 0; rotate: -6deg; } 50% { translate: 26px -70px; rotate: 6deg; } 100% { translate: 0 0; rotate: -6deg; } }
@keyframes whimLeap { 0% { translate: 0 0; rotate: 0deg; } 45% { translate: 40px -110px; rotate: -28deg; } 100% { translate: 0 0; rotate: 0deg; } }
@keyframes whimJet { 0% { translate: 0 0; scale: 1; } 20% { scale: .75 1.3; } 55% { translate: 0 -150px; scale: 1.1 .9; } 100% { translate: 0 0; scale: 1; } }
@keyframes popOut { 0% { translate: 0 0; opacity: 1; scale: 1; } 100% { translate: var(--dx) var(--dy); opacity: 0; scale: .2; } }
.wc-pop { position: absolute; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #7a1f3f; pointer-events: none; z-index: 3; animation: popOut .75s cubic-bezier(.2, .8, .3, 1) forwards; }
.wc-whale, .wc-ufo, .wc-jelly { background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; filter: drop-shadow(0 4px 0 rgba(122, 31, 61, .22)); -webkit-tap-highlight-color: transparent; }
.wc-whale { background-image: url('../assets/home/critter-whale.webp') !important; width: 150px; height: 114px; top: 26%; animation: wcSwim 62s linear infinite, wcBob 4.6s ease-in-out infinite !important; pointer-events: auto; }
.wc-whale::before, .wc-whale::after { content: ''; position: absolute; top: 4%; left: 66%; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9fd8ff 70%); border: 1.5px solid #5aa6e0; --sx: 8px; animation: spout 2.2s ease-out infinite; }
.wc-whale::after { left: 72%; --sx: -10px; animation-delay: 1.1s; width: 7px; height: 7px; }
.wc-whale.whim-leap { animation: wcSwim 62s linear infinite, whimLeap 1.1s cubic-bezier(.3, .9, .4, 1) !important; }
.wc-ufo { background-image: url('../assets/home/critter-ufo.webp') !important; width: 92px; height: 74px; top: 11%; right: auto; left: 68%; animation: ufoPatrol 22s ease-in-out infinite, wcBob 3s ease-in-out infinite, ufoTilt 5s ease-in-out infinite !important; pointer-events: auto; filter: drop-shadow(0 4px 0 rgba(122,31,61,.22)) drop-shadow(0 0 12px rgba(255, 214, 90, .75)); }
.wc-ufo::before { content: ''; position: absolute; left: 22%; right: 22%; bottom: -16px; height: 26px; background: radial-gradient(ellipse at 50% 0%, rgba(255, 226, 100, .95), rgba(255, 190, 60, 0) 70%); filter: blur(2px); transform-origin: 50% 0; animation: thrust .7s ease-in-out infinite; z-index: -1; }
.wc-ufo::after { content: '\2726'; position: absolute; right: -6px; top: -8px; font-size: 18px; color: #ffc928; text-shadow: 0 2px 0 #7a1f3f; animation: twinkle2 1.6s ease-in-out infinite; }
.wc-ufo.whim-zip { animation: wcZip 1.1s ease-in-out, ufoPatrol 22s ease-in-out infinite !important; }
.wc-jelly { background-image: url('../assets/home/critter-octopus.webp') !important; width: 74px; height: 62px; bottom: 30%; left: 7%; opacity: 1 !important; pointer-events: auto; animation: octDrift 9s ease-in-out infinite, octPulse 2.4s ease-in-out infinite !important; transform-origin: 50% 40%; cursor: pointer; }
.wc-jelly.whim-jet { animation: whimJet 1s cubic-bezier(.3, .9, .4, 1), octPulse 2.4s ease-in-out infinite !important; }
.wc-whale, .wc-ufo, .wc-jelly { cursor: pointer; }
@media (max-width: 420px) { .wc-whale { width: 118px; height: 90px; } .wc-ufo { width: 74px; height: 60px; } .wc-jelly { width: 58px; height: 49px; } }
@media (prefers-reduced-motion: reduce) { .wc-pop { display: none; } }
#screen-menu > .whim-critters { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
#screen-menu > .whim-critters .wc { pointer-events: auto; }
#screen-menu > .whim-critters .wc-star { pointer-events: none; }
/* keep the swimmers in the open band between the tiles and the stats panel */
#screen-menu > .whim-critters .wc-whale { top: 61vh !important; bottom: auto !important; }
#screen-menu > .whim-critters .wc-jelly { top: 63vh !important; bottom: auto !important; left: 5% !important; }
@media (max-height: 640px) { #screen-menu > .whim-critters .wc-whale { top: 46vh !important; } #screen-menu > .whim-critters .wc-jelly { top: 40vh !important; } }
/* eyebrow cloud tags: hug the left edge so they line up with the values */
#screen-menu .ms:nth-child(2) small, #screen-menu .ms:nth-child(3) small { background-position: left center !important; margin-left: -4px !important; }
#screen-menu .ms b { margin-left: 0 !important; }
/* ===== Home stats: one shared structure. Every cell = [44px icon column][text column]; label tag and value share the same left edge ===== */
#screen-menu .menu-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 14px !important; row-gap: 10px !important; align-items: center !important; padding: 10px 14px 12px !important; }
#screen-menu .menu-stats .ms { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 8px !important; align-items: center !important; position: relative; padding: 0 !important; min-height: 56px; }
#screen-menu .menu-stats .ms .msi { grid-column: 1; justify-self: center; width: 44px !important; height: 44px !important; display: grid !important; place-items: center !important; }
#screen-menu .menu-stats .ms .msi img, #screen-menu .menu-stats .ms .msi canvas { width: 42px !important; height: 40px !important; object-fit: contain; }
#screen-menu .menu-stats .ms > div { grid-column: 2; display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 2px; text-align: left !important; min-width: 0; }
#screen-menu .menu-stats .ms small { margin: 0 !important; transform: none !important; animation: none !important; transform-origin: left center; }
#screen-menu .menu-stats .ms:nth-child(2) small, #screen-menu .menu-stats .ms:nth-child(3) small { background-position: left center !important; margin-left: -6px !important; }
#screen-menu .menu-stats .ms b { margin: 0 !important; transform: none !important; display: block !important; text-align: left; }
/* high score: badge IS its label, so the value sits centred on the badge's row */
#screen-menu .menu-stats .ms:nth-child(1) > div { justify-content: center; }
/* next unlock: helmet becomes the icon in the same column */
#screen-menu .menu-stats .ms-next { padding-left: 52px !important; display: block !important; min-height: 56px; }
#screen-menu .menu-stats .ms-next > div { display: flex !important; flex-direction: column; align-items: flex-start; width: 100%; gap: 2px; }
#screen-menu .menu-stats .ms-next .comet { position: static !important; width: 100% !important; }
#screen-menu .menu-stats .ms-next .cm-cape { position: absolute !important; left: 2px; top: 50%; translate: 0 -50%; width: 40px !important; height: 36px !important; margin: 0 !important; z-index: 2; }
#screen-menu .menu-stats .ms-next .cm-bar { margin-left: 0 !important; }
/* ===== Next Unlock "Ready!" badge: a bouncy gold-and-pink sticker pinned to the card's top-right (no longer floating over the bar) ===== */
@keyframes readyBounce { 0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); } 50% { transform: translateY(-3px) rotate(3deg) scale(1.08); } }
@keyframes readyShine { 0% { background-position: 160% 0, 0 0; } 60%, 100% { background-position: -60% 0, 0 0; } }
#screen-menu .menu-stats .ms-next { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#screen-menu .ms-next .comet.is-ready em {
position: absolute !important; right: 0 !important; top: -4px !important; left: auto !important; z-index: 5;
padding: 4px 10px 5px 21px !important; font: 900 clamp(11px, 3.2vw, 13px)/1 var(--font-ui) !important; font-style: normal !important; color: #4a1230 !important; letter-spacing: .2px;
background-image: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.85) 48%, rgba(255,255,255,0) 61%), linear-gradient(135deg, #fff3a0 0%, #ffc928 52%, #f9c6a4 100%) !important;
background-size: 260% 100%, 100% 100% !important; background-repeat: no-repeat !important;
border: 2.5px solid #7a1f3f !important; border-radius: 999px !important; box-shadow: 0 3px 0 #7a1f3f, 0 0 12px rgba(255, 214, 90, .85) !important; text-decoration: none !important;
transform-origin: 50% 100%; animation: readyBounce 1.7s ease-in-out infinite, readyShine 2.8s ease-in-out infinite !important; white-space: nowrap; pointer-events: none;
}
#screen-menu .ms-next .comet.is-ready em::before { content: '\2605'; position: absolute; left: 5px; top: 50%; transform: translateY(-52%); font-size: 12px; color: #f5a169; text-shadow: 0 1px 0 #7a1f3f; }
#screen-menu .ms-next .comet.is-ready em::after { content: '\2726'; position: absolute; right: -9px; top: -11px; font-size: 15px; color: #ffc928; text-shadow: 0 2px 0 #7a1f3f; animation: twinkle 1.6s ease-in-out infinite; }
#screen-menu .ms-next .comet.is-ready.pop em { animation: cmPop .6s cubic-bezier(.2,1.7,.4,1) both, readyBounce 1.7s .6s ease-in-out infinite, readyShine 2.8s ease-in-out infinite !important; }
@media (max-width: 360px) { #screen-menu .ms-next .comet.is-ready em { top: -6px !important; padding: 3px 8px 4px 18px !important; } }
@media (prefers-reduced-motion: reduce) { #screen-menu .ms-next .comet.is-ready em, #screen-menu .ms-next .comet.is-ready em::after { animation: none !important; } }
/* Ready! takes the place of the "Next Unlock" tag (same slot, same left edge) instead of overlapping it */
#screen-menu .ms-next:has(.comet.is-ready) .ms-nub { visibility: hidden; }
#screen-menu .ms-next .comet.is-ready em { left: 52px !important; right: auto !important; top: -3px !important; }
@media (max-width: 360px) { #screen-menu .ms-next .comet.is-ready em { top: -4px !important; } }
/* desktop: keep the stats panel a tidy card instead of a full-width strip */
@media (min-width: 900px) { #screen-menu .menu-stats { left: 50% !important; right: auto !important; width: min(680px, calc(100% - 64px)) !important; margin-left: calc(min(680px, 100% - 64px) / -2) !important; } }
/* Back home: sparkles around the moon-house icon */
@keyframes homeTwinkle { 0%, 100% { opacity: 0; scale: .3; rotate: 0deg; } 50% { opacity: 1; scale: 1.1; rotate: 25deg; } }
#screen-over #over-btns .go-links > button.ov-menu::after { display: block !important; content: '\2726' !important; position: absolute !important; left: 6px; top: -10px; right: auto; bottom: auto; width: auto; height: auto; background: none !important; font-size: 17px; line-height: 1; color: #ffc928; text-shadow: 0 2px 0 #7a1f3f; pointer-events: none; animation: homeTwinkle 2s ease-in-out infinite !important; }
#screen-over #over-btns .go-links > button.ov-menu { --sp2: '\2727'; }
#screen-over #over-btns .go-links > button.ov-menu > .lbl, #screen-over #over-btns .go-links > button.ov-menu { text-shadow: none; }
#screen-over #over-btns .go-links > button.ov-menu::before { filter: drop-shadow(0 2px 0 rgba(122,31,61,.22)) drop-shadow(0 0 8px rgba(255, 224, 100, .85)); }
@media (prefers-reduced-motion: reduce) { #screen-over #over-btns .go-links > button.ov-menu::after { animation: none !important; opacity: 1; } }
/* ===== Back home: whimsical (orbiting star, glow halo, shimmer, hopping house) ===== */
@keyframes homeOrbit { to { transform: rotate(360deg); } }
@keyframes homeHop { 0%, 70%, 100% { translate: 0 0; rotate: -3deg; } 78% { translate: 0 -7px; rotate: 5deg; } 86% { translate: 0 0; rotate: -4deg; } }
@keyframes homeShine { 0% { background-position: 170% 0, 0 0; } 55%, 100% { background-position: -70% 0, 0 0; } }
#screen-over #over-btns .go-links > button.ov-menu {
background-image: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.85) 49%, rgba(255,255,255,0) 60%), linear-gradient(135deg, #efe3ff 0%, #d5ecff 55%, #fdefe5 100%) !important;
background-size: 260% 100%, 100% 100% !important; background-repeat: no-repeat !important; background-position: 170% 0, 0 0 !important;
animation: pillWiggle 5s ease-in-out infinite 3.4s, homeShine 4s ease-in-out infinite 1s !important;
}
#screen-over #over-btns .go-links > button.ov-menu::before { animation: homeHop 3.2s ease-in-out infinite !important; filter: drop-shadow(0 2px 0 rgba(122,31,61,.22)) drop-shadow(0 0 10px rgba(255, 224, 100, .95)) drop-shadow(0 0 18px rgba(190, 150, 255, .6)) !important; }
#screen-over #over-btns .go-links > button.ov-menu::after {
display: block !important; content: '\2726' !important; position: absolute !important; left: 6px !important; top: 50% !important; right: auto !important; bottom: auto !important; width: 72px !important; height: 64px !important; margin-top: -32px; background: none !important;
text-align: center; font-size: 17px; line-height: 1; color: #ffc928; text-shadow: 0 2px 0 #7a1f3f, 0 0 8px rgba(255, 214, 90, .9); transform-origin: 50% 50%; pointer-events: none;
animation: homeOrbit 3.6s linear infinite !important; opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) { #screen-over #over-btns .go-links > button.ov-menu, #screen-over #over-btns .go-links > button.ov-menu::before, #screen-over #over-btns .go-links > button.ov-menu::after { animation: none !important; } }
/* label room + size fixes on the Game Over pills */
#screen-over #over-btns .go-links > button.ov-menu { padding-left: 92px !important; padding-right: 26px !important; min-width: 216px !important; justify-content: flex-start !important; }
#screen-over #over-btns .go-links > button.ov-menu::before { left: 8px !important; width: 70px !important; }
@media (max-width: 400px) { #screen-over #over-btns .go-links > button.ov-menu { padding-left: 88px !important; min-width: 204px !important; } #screen-over #over-btns .go-links > button.ov-menu::before { width: 66px !important; } }
#screen-over #over-btns .go-row > button.go-alt .lbl, #screen-over #over-btns .go-row > button.go-alt .lbl b { font-size: clamp(20px, 5.8vw, 24px) !important; line-height: 1.1 !important; }
#screen-over #over-btns .go-row > button.go-alt.ov-revive .lbl, #screen-over #over-btns .go-row > button.go-alt.ov-revive .lbl b { font-size: clamp(19px, 5.4vw, 22px) !important; }
#screen-over #over-btns .go-row > button.go-alt .lbl small { font-size: 13px !important; }
#screen-over #over-btns .go-links > button.ov-share { font-size: clamp(18px, 5.2vw, 22px) !important; }
#screen-over #over-btns .go-links > button.ov-menu { font-size: clamp(18px, 5.2vw, 22px) !important; }
@media (max-width: 400px) { #screen-over #over-btns .go-links > button.ov-share { font-size: 17px !important; } }
/* ===== Dressing room header: clear hierarchy (1 title row > 2 mode switch > 3 category chips) ===== */
#screen-outfits .of-deco.d-planet { display: none !important; } /* the stray pink bars: a broken ring from this old decoration */
#screen-outfits .of-top { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'back title coins' 'modes modes modes'; align-items: center; gap: 10px 10px; padding: 4px 0 2px !important; }
#screen-outfits .of-top .of-back { grid-area: back; }
#screen-outfits .of-top .of-title { grid-area: title; justify-self: center; margin: 0 !important; }
#screen-outfits .of-top .of-title .lt-img { max-height: clamp(46px, 13vw, 70px) !important; }
#screen-outfits .of-top .coin-pill { grid-area: coins; justify-self: end; }
/* the one big switch */
#screen-outfits .of-modes { grid-area: modes; display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; background: linear-gradient(180deg, rgba(122,31,61,.16), rgba(122,31,61,.07)); border: 2.5px solid #7a1f3f; border-radius: 999px; box-shadow: inset 0 3px 0 rgba(122,31,61,.18), 0 3px 0 rgba(122,31,61,.35); position: relative; }
#screen-outfits .of-modes .btn.chip { min-height: 46px; border-radius: 999px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #5a2a3a !important; font: 900 clamp(15px, 4.4vw, 18px)/1 var(--font-ui) !important; display: flex; align-items: center; justify-content: center; gap: 8px; transform: none !important; }
#screen-outfits .of-modes .btn.chip svg { width: 22px; height: 22px; flex: none; }
#screen-outfits .of-modes .btn.chip.on { color: #fff !important; text-shadow: 0 1px 0 rgba(74,18,48,.4); box-shadow: 0 3px 0 #7a1f3f, inset 0 2px 0 rgba(255,255,255,.45) !important; }
#screen-outfits .of-modes #of-mode-shop.on { background: linear-gradient(180deg, #ff9a52, #e2672b) !important; }
#screen-outfits .of-modes #of-mode-ward.on, #screen-outfits .of-modes .btn.chip.on:not(#of-mode-shop) { background: linear-gradient(180deg, #52d6b4, #1fa38a) !important; }
#screen-outfits .of-modes .btn.chip.on svg { animation: modePop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes modePop { 0% { transform: scale(.5) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
/* what each side is for, in plain words */
#screen-outfits .of-top::after { content: none; }
#screen-outfits .of-modes::after { content: 'Browse and unlock new looks'; position: absolute; left: 0; right: 0; top: calc(100% + 6px); text-align: center; font: 700 13px/1.2 var(--font-ui); color: #5a2a3a; pointer-events: none; }
#screen-outfits .of-modes:has(.btn.chip.on:not(#of-mode-shop))::after { content: 'Everything you own: tap to wear it'; }
#screen-outfits .of-top { padding-bottom: 24px !important; }
/* category chips = secondary: one tidy scrolling line with soft edges */
#screen-outfits .of-cats { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden; padding: 6px 14px 10px !important; margin: 0 -12px !important; height: auto !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
#screen-outfits .of-cats::-webkit-scrollbar { display: none; }
#screen-outfits .of-cats .btn.chip { flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; padding: 6px 14px !important; font: 800 14px/1 var(--font-ui) !important; background: #fffaf0 !important; border: 2px solid #7a1f3f !important; box-shadow: 0 2px 0 rgba(122,31,61,.85) !important; }
#screen-outfits .of-cats .btn.chip.on { background: #ffe27a !important; box-shadow: 0 3px 0 #7a1f3f !important; transform: translateY(-1px); }
@media (min-width: 900px) { #screen-outfits .of-top { grid-template-columns: auto auto minmax(260px, 420px) 1fr auto; grid-template-areas: 'back title modes . coins'; padding-bottom: 28px !important; } #screen-outfits .of-top .of-title { justify-self: start; } #screen-outfits .of-cats { margin: 0 !important; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap !important; overflow: visible !important; } }
/* small phones: let the title breathe, shrink the coin pill, make the pose row scroll instead of clipping */
#screen-outfits .of-top .of-title { min-width: 0; max-width: 100%; }
#screen-outfits .of-top .of-title .lt-img { max-width: 100% !important; width: auto; height: auto; }
@media (max-width: 380px) {
#screen-outfits .of-top { gap: 8px 6px; }
#screen-outfits .of-top .of-back { width: 42px !important; height: 42px !important; }
#screen-outfits .of-top .coin-pill { padding: 6px 10px !important; font-size: 15px; gap: 5px; }
#screen-outfits .of-top .of-title .lt-img { max-height: 54px !important; }
}
#screen-outfits .of-pose { display: flex !important; flex-wrap: nowrap !important; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 6px 12px 10px; margin: 0 -8px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 22px), transparent 100%); }
#screen-outfits .of-pose::-webkit-scrollbar { display: none; }
#screen-outfits .of-pose .btn { flex: 0 0 auto; min-height: 40px; }
@media (min-width: 900px) { #screen-outfits .of-pose { flex-wrap: wrap !important; overflow: visible; margin: 0; -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 599px) { #screen-outfits .of-top .of-title { justify-self: stretch !important; width: 100%; display: flex; justify-content: center; } #screen-outfits .of-top .of-title .lt-img { width: 100% !important; max-width: 150px !important; max-height: 60px !important; object-fit: contain; } }
@media (max-width: 599px) { #screen-outfits .of-top .of-title { height: auto !important; line-height: 0; } #screen-outfits .of-top .of-title .lt-img { flex: 0 0 auto !important; width: clamp(104px, 34vw, 140px) !important; height: auto !important; max-height: none !important; } }
/* dressing room: Lanky must be crisp and true to his game colours: the stage grain/soft-light layer now sits BEHIND him (above the backdrop, below the mirror + character) */
.of-stage.card::after { z-index: 2 !important; }
#of-prev { image-rendering: auto; }
.of-stage .dr-mirror { z-index: 3; }
/* ===== Dressing room: playful tabs + chips (8px spacing grid, 40px+ tap targets) ===== */
@keyframes chipBounce { 0% { transform: scale(.9) rotate(-3deg); } 60% { transform: scale(1.08) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes tabTwinkle { 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: 1; scale: 1.1; } }
#screen-outfits .of-modes .btn.chip { position: relative; transition: background .2s, color .2s; }
#screen-outfits .of-modes .btn.chip.on::after { content: '\2726'; position: absolute; right: 12px; top: -7px; font-size: 16px; color: #ffe27a; text-shadow: 0 2px 0 #7a1f3f; animation: tabTwinkle 1.8s ease-in-out infinite; pointer-events: none; }
#screen-outfits .of-modes .btn.chip:active { transform: scale(.96) !important; }
#screen-outfits .of-cats .btn.chip.on, #screen-outfits .of-pose .btn.on { animation: chipBounce .4s cubic-bezier(.2, 1.6, .4, 1); }
/* each category gets its own colour so the row is scannable at a glance */
#screen-outfits .of-cats .btn.chip:nth-child(1).on { background: #ffe27a !important; }
#screen-outfits .of-cats .btn.chip:nth-child(2) { border-color: #5b3ea8 !important; box-shadow: 0 2px 0 #5b3ea8 !important; } #screen-outfits .of-cats .btn.chip:nth-child(2).on { background: #d9ccff !important; }
#screen-outfits .of-cats .btn.chip:nth-child(3) { border-color: #1f7a64 !important; box-shadow: 0 2px 0 #1f7a64 !important; } #screen-outfits .of-cats .btn.chip:nth-child(3).on { background: #bff0dc !important; }
#screen-outfits .of-cats .btn.chip:nth-child(4) { border-color: #b3541e !important; box-shadow: 0 2px 0 #b3541e !important; } #screen-outfits .of-cats .btn.chip:nth-child(4).on { background: #ffd0a8 !important; }
#screen-outfits .of-cats .btn.chip:nth-child(5) { border-color: #994d31 !important; box-shadow: 0 2px 0 #994d31 !important; } #screen-outfits .of-cats .btn.chip:nth-child(5).on { background: #fcddc9 !important; }
#screen-outfits .of-cats .btn.chip:nth-child(6) { border-color: #a8780a !important; box-shadow: 0 2px 0 #a8780a !important; } #screen-outfits .of-cats .btn.chip:nth-child(6).on { background: #fff0a0 !important; }
#screen-outfits .of-cats .btn.chip:nth-child(7) { border-color: #2e5f8a !important; box-shadow: 0 2px 0 #2e5f8a !important; } #screen-outfits .of-cats .btn.chip:nth-child(7).on { background: #c9e6ff !important; }
#screen-outfits .of-pose .btn { border-radius: 999px !important; }
@media (prefers-reduced-motion: reduce) { #screen-outfits .of-modes .btn.chip.on::after, #screen-outfits .of-cats .btn.chip.on, #screen-outfits .of-pose .btn.on { animation: none; } }
/* ===== Dressing room: whimsical hint line + outfit info card ===== */
@keyframes hintBob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-3px) rotate(1.2deg); } }
@keyframes nameWiggle { 0%, 100% { transform: rotate(-1.5deg) scale(1); } 50% { transform: rotate(1.5deg) scale(1.03); } }
@keyframes bubblePop { 0% { transform: scale(.9) rotate(-2deg); opacity: .6; } 60% { transform: scale(1.03) rotate(.6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
#screen-outfits .of-modes::after { content: '\2726 Pick a look, give it a twirl! \2726' !important; font: 400 clamp(19px, 5.4vw, 23px)/1.1 var(--font-title) !important; color: #7a1f3f !important; -webkit-text-stroke: .4px #7a1f3f; letter-spacing: .3px; top: calc(100% + 4px) !important; animation: hintBob 3s ease-in-out infinite; text-shadow: 0 2px 0 rgba(255, 226, 122, .9); }
#screen-outfits .of-modes:has(.btn.chip.on:not(#of-mode-shop))::after { content: '\2726 Your closet of wonders: tap to wear! \2726' !important; }
#screen-outfits .of-top { padding-bottom: 34px !important; }
#screen-outfits .of-info.card { position: relative; background: radial-gradient(circle at 14px 14px, rgba(255, 210, 63, .38) 0 3px, transparent 4px) 0 0 / 28px 28px, linear-gradient(165deg, #fffaf0, #ffeccf) !important; border: 3px solid #7a1f3f !important; border-radius: 34px 28px 34px 28px / 28px 34px 28px 34px !important; box-shadow: 0 6px 0 #7a1f3f, 0 14px 22px rgba(74, 18, 48, .18) !important; padding: 22px 18px 20px !important; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: rotate(-.5deg); }
#screen-outfits .of-info.card::before, #screen-outfits .of-info.card::after { content: '\2726'; position: absolute; color: #ffc928; text-shadow: 0 2px 0 #7a1f3f; line-height: 1; animation: twinkle 2s ease-in-out infinite; pointer-events: none; }
#screen-outfits .of-info.card::before { left: 16px; top: 12px; font-size: 22px; } #screen-outfits .of-info.card::after { right: 18px; top: 40px; font-size: 16px; animation-delay: .8s; }
#screen-outfits #of-name { margin: 0; font: 400 clamp(34px, 10vw, 46px)/1 var(--font-title) !important; color: #4a1230 !important; -webkit-text-stroke: .7px #4a1230; letter-spacing: .5px; text-shadow: 0 3px 0 #ffe27a; animation: nameWiggle 3.4s ease-in-out infinite; }
#screen-outfits #of-rar { display: inline-flex !important; align-items: center; gap: 6px; padding: 5px 14px 6px 12px !important; font: 900 12px/1 var(--font-ui) !important; letter-spacing: 1px; text-transform: uppercase; color: #fff !important; background: #8a7a6a; border: 2.5px solid #7a1f3f !important; border-radius: 999px !important; box-shadow: 0 3px 0 #7a1f3f; transform: rotate(-3deg); }
#screen-outfits #of-rar::before { content: '\2605'; color: #ffe27a; text-shadow: 0 1px 0 #7a1f3f; font-size: 13px; }
/* the description is Lanky chatting: a speech bubble with a little tail */
#screen-outfits #of-desc { position: relative; margin: 6px 0 2px !important; padding: 14px 18px 14px !important; max-width: 30ch; font: 700 clamp(15px, 4.2vw, 17px)/1.35 var(--font-ui) !important; color: #4a1230 !important; background: #fff; border: 2.5px solid #7a1f3f; border-radius: 22px 26px 22px 26px / 26px 22px 26px 22px; box-shadow: 0 3px 0 rgba(122, 31, 61, .85); animation: bubblePop .5s cubic-bezier(.2, 1.5, .4, 1) both; }
#screen-outfits #of-desc::before { content: ''; position: absolute; left: 50%; top: -11px; width: 18px; height: 18px; background: #fff; border-left: 2.5px solid #7a1f3f; border-top: 2.5px solid #7a1f3f; transform: translateX(-50%) rotate(45deg); border-top-left-radius: 4px; }
#screen-outfits #of-act { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { #screen-outfits .of-modes::after, #screen-outfits #of-name, #screen-outfits #of-desc, #screen-outfits .of-info.card::before, #screen-outfits .of-info.card::after { animation: none !important; } }
/* ===== Home stats: bigger icons (high-score badge, running Lanky, planet, helmet) ===== */
#screen-menu .menu-stats .ms { grid-template-columns: 60px minmax(0, 1fr) !important; column-gap: 8px !important; min-height: 64px; }
#screen-menu .menu-stats .ms .msi { width: 60px !important; height: 58px !important; }
#screen-menu .menu-stats .ms .msi img, #screen-menu .menu-stats .ms .msi canvas { width: 58px !important; height: 56px !important; }
#screen-menu .menu-stats .ms .ms-hsb { width: 64px !important; height: 52px !important; }
#screen-menu .menu-stats .ms .msi canvas.runner { width: 60px !important; height: 60px !important; }
#screen-menu .menu-stats .ms-next { padding-left: 68px !important; min-height: 64px; }
#screen-menu .menu-stats .ms-next .cm-cape { width: 56px !important; height: 52px !important; left: 0; }
#screen-menu .ms-next .comet.is-ready em { left: 68px !important; }
@media (max-width: 360px) { #screen-menu .menu-stats .ms { grid-template-columns: 52px minmax(0, 1fr) !important; } #screen-menu .menu-stats .ms .msi { width: 52px !important; } #screen-menu .menu-stats .ms .msi img, #screen-menu .menu-stats .ms .msi canvas { width: 50px !important; height: 48px !important; } #screen-menu .menu-stats .ms .ms-hsb { width: 54px !important; height: 44px !important; } #screen-menu .menu-stats .ms-next { padding-left: 58px !important; } #screen-menu .ms-next .comet.is-ready em { left: 58px !important; } #screen-menu .menu-stats .ms-next .cm-cape { width: 48px !important; height: 44px !important; } }
/* ===== Get More Coins: a colourful treasure board ===== */
@keyframes earnBob { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg) translateY(-2px); } }
@keyframes iconPop { 0%, 80%, 100% { transform: scale(1) rotate(0); } 88% { transform: scale(1.2) rotate(-8deg); } 94% { transform: scale(1.05) rotate(5deg); } }
#screen-outfits .of-earn.card { position: relative; padding: 18px 14px 16px !important; background: radial-gradient(circle at 12px 12px, rgba(255, 140, 190, .35) 0 3px, transparent 4px) 0 0 / 30px 30px, radial-gradient(circle at 27px 27px, rgba(120, 200, 255, .35) 0 3px, transparent 4px) 0 0 / 30px 30px, linear-gradient(170deg, #fff6c9, #fdede2 55%, #d9f1ff) !important; border: 3px solid #7a1f3f !important; border-radius: 34px 28px 34px 28px / 28px 34px 28px 34px !important; box-shadow: 0 6px 0 #7a1f3f, 0 14px 22px rgba(74, 18, 48, .16) !important; display: grid; gap: 10px; }
#screen-outfits .of-earn h4 { margin: 0 0 4px !important; display: flex; align-items: center; justify-content: center; gap: 10px; font: 400 clamp(26px, 7.6vw, 34px)/1 var(--font-title) !important; color: #7a1f3f !important; -webkit-text-stroke: .5px #7a1f3f; text-align: center; animation: earnBob 3.4s ease-in-out infinite; text-shadow: 0 3px 0 #ffd23f; }
#screen-outfits .of-earn h4 .gift { width: 38px !important; height: 38px !important; flex: none; border-radius: 12px; background: linear-gradient(135deg, #ff9a52, #f5a169) !important; border: 2.5px solid #7a1f3f; box-shadow: 0 3px 0 #7a1f3f; transform: rotate(-8deg); position: relative; }
#screen-outfits .of-earn h4 .gift::after { content: '\1FA99'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; background: none; }
#screen-outfits .earn-row.btn { display: grid !important; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: 'ic lb' 'ic rw'; column-gap: 12px; row-gap: 4px; align-items: center; text-align: left; min-height: 64px; padding: 10px 14px 10px 10px !important; border: 2.5px solid #7a1f3f !important; border-radius: 26px 22px 26px 22px / 22px 26px 22px 26px !important; box-shadow: 0 4px 0 #7a1f3f !important; background: var(--er, #fff) !important; transform: rotate(var(--rt, 0deg)); transition: transform .15s; position: relative; }
#screen-outfits .earn-row.btn::before { grid-area: ic; width: 52px; height: 52px; display: grid; place-items: center; font-size: 28px; line-height: 1; border-radius: 18px; background: var(--ec, #fff); border: 2.5px solid #7a1f3f; box-shadow: 0 3px 0 rgba(122, 31, 61, .85), inset 0 2px 0 rgba(255, 255, 255, .55); content: var(--ei, '\2B50'); animation: iconPop 5s ease-in-out infinite; animation-delay: var(--ed, 0s); }
#screen-outfits .earn-row.btn > span { grid-area: lb; font: 800 clamp(14px, 4vw, 16px)/1.2 var(--font-ui); color: #4a1230; white-space: normal; }
#screen-outfits .earn-row.btn > b { grid-area: rw; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 4px 10px; font: 900 clamp(14px, 4vw, 16px)/1.1 var(--font-ui); color: #5a3a00; background: linear-gradient(#fff3a8, #ffd23f); border: 2px solid #7a1f3f; border-radius: 999px; box-shadow: 0 2px 0 #7a1f3f; white-space: nowrap; }
#screen-outfits .earn-row.btn:active { transform: translateY(3px) scale(.98) rotate(0) !important; box-shadow: 0 1px 0 #7a1f3f !important; }
@media (hover: hover) { #screen-outfits .earn-row.btn:hover { transform: translateY(-2px) rotate(0); } }
#screen-outfits .earn-row.btn:nth-of-type(1) { --er: #ffe3d6; --ec: #ff9a6b; --ei: '\1F3C3'; --rt: -.5deg; --ed: 0s; }
#screen-outfits .earn-row.btn:nth-of-type(2) { --er: #ece3ff; --ec: #a98bff; --ei: '\1F4DC'; --rt: .5deg; --ed: .7s; }
#screen-outfits .earn-row.btn:nth-of-type(3) { --er: #d8f6ee; --ec: #4fd1b0; --ei: '\1F680'; --rt: -.4deg; --ed: 1.4s; }
#screen-outfits .earn-row.btn:nth-of-type(4) { --er: #fff4bf; --ec: #ffd23f; --ei: '\1F319'; --rt: .6deg; --ed: 2.1s; }
#screen-outfits .earn-row.btn:nth-of-type(5) { --er: #fdeade; --ec: #f7b182; --ei: '\1FA90'; --rt: -.6deg; --ed: 2.8s; }
#screen-outfits .earn-row.btn:nth-of-type(6) { --er: #d9ecff; --ec: #6bb5ff; --ei: '\1F9D1\200D\1F680'; --rt: .4deg; --ed: 3.5s; }
#screen-outfits .earn-row.btn:nth-of-type(7) { --er: #e6f7c8; --ec: #9be05a; --ei: '\1F4C5'; --rt: -.3deg; --ed: 4.2s; }
@media (prefers-reduced-motion: reduce) { #screen-outfits .of-earn h4, #screen-outfits .earn-row.btn::before { animation: none; } }
/* the running Lanky and the high-score burst: as big as the cell allows (Lanky is slender, so height is what counts) */
#screen-menu .menu-stats .ms:nth-child(2) { min-height: 76px; }
#screen-menu .menu-stats .ms:nth-child(2) .msi { height: 76px !important; }
#screen-menu .menu-stats .ms:nth-child(2) .msi canvas.runner { width: 66px !important; height: 76px !important; max-height: none !important; }
#screen-menu .menu-stats .ms:nth-child(1) { min-height: 70px; }
#screen-menu .menu-stats .ms:nth-child(1) .msi { height: 68px !important; width: 68px !important; }
#screen-menu .menu-stats .ms:nth-child(1) .ms-hsb { width: 68px !important; height: 60px !important; max-width: none !important; max-height: none !important; object-fit: contain; }
#screen-menu .menu-stats .ms:nth-child(1), #screen-menu .menu-stats .ms:nth-child(2) { grid-template-columns: 68px minmax(0, 1fr) !important; }
@media (max-width: 360px) { #screen-menu .menu-stats .ms:nth-child(2) .msi canvas.runner { width: 58px !important; height: 66px !important; } #screen-menu .menu-stats .ms:nth-child(2) .msi { height: 66px !important; } #screen-menu .menu-stats .ms:nth-child(1), #screen-menu .menu-stats .ms:nth-child(2) { grid-template-columns: 56px minmax(0, 1fr) !important; } #screen-menu .menu-stats .ms:nth-child(1) .msi, #screen-menu .menu-stats .ms:nth-child(1) .ms-hsb { width: 56px !important; height: 52px !important; } }
/* Longest run: Lanky is top-aligned with the label tag and kept clear of the helmet below */
#screen-menu .menu-stats { row-gap: 14px !important; }
#screen-menu .menu-stats .ms:nth-child(2) { align-items: start !important; min-height: 72px; }
#screen-menu .menu-stats .ms:nth-child(2) .msi { align-self: start !important; height: 72px !important; margin-top: -2px; }
#screen-menu .menu-stats .ms:nth-child(2) .msi canvas.runner { width: 63px !important; height: 72px !important; }
#screen-menu .menu-stats .ms:nth-child(2) > div { align-self: start !important; justify-content: flex-start !important; padding-top: 2px; }
#screen-menu .menu-stats .ms-next { align-self: end; }
@media (max-width: 360px) { #screen-menu .menu-stats .ms:nth-child(2) { min-height: 64px; } #screen-menu .menu-stats .ms:nth-child(2) .msi { height: 64px !important; } #screen-menu .menu-stats .ms:nth-child(2) .msi canvas.runner { width: 56px !important; height: 64px !important; } }
/* =====================================================================================================================
HOME STATS v4 - matches the reference: three paper cards (High score | Farthest planet | Longest run) + a full-width Next Unlock strip.
Mobile: cards are compact and stacked (icon over label over value); >= 700px: cards go horizontal exactly like the reference.
Long values never overflow: container-relative type sizes + ellipsis / 2-line clamp.
===================================================================================================================== */
@keyframes cardSpark { 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: 1; scale: 1.1; } }
@keyframes badgeSway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes cardBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
#screen-menu #mstats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto; gap: 10px !important; padding: 12px !important; align-items: stretch !important; border-radius: 28px !important; }
#screen-menu #mstats .ms:not(.ms-next) {
order: 3; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; text-align: center !important; position: relative; min-height: 0 !important; height: auto !important;
padding: 12px 8px 12px !important; grid-template-columns: none !important; container-type: inline-size; overflow: visible;
background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 240, 226, .78)) !important; border: 2px solid rgba(122, 31, 61, .38) !important; border-radius: 26px !important; box-shadow: 0 3px 0 rgba(122, 31, 61, .2), inset 0 2px 0 rgba(255, 255, 255, .8) !important;
}
#screen-menu #mstats .ms:nth-child(1) { order: 1; transform: rotate(-.5deg); }
#screen-menu #mstats .ms:nth-child(3) { order: 2; transform: rotate(.4deg); }
#screen-menu #mstats .ms:nth-child(2) { order: 3; transform: rotate(-.3deg); }
#screen-menu #mstats .ms:not(.ms-next)::after { display: block !important; content: '\2726' !important; position: absolute; right: 10px; top: 6px; font-size: 15px; line-height: 1; color: #ffc928; text-shadow: 0 2px 0 #7a1f3f; pointer-events: none; animation: cardSpark 2.4s ease-in-out infinite; }
#screen-menu #mstats .ms:nth-child(3)::after { animation-delay: .8s; } #screen-menu #mstats .ms:nth-child(2)::after { animation-delay: 1.6s; }
/* icons (all existing art, reused) */
#screen-menu #mstats .ms .msi { width: 100% !important; height: 60px !important; flex: none; display: grid !important; place-items: center !important; margin: 0 !important; }
#screen-menu #mstats .ms .msi img { width: auto !important; height: 56px !important; max-width: 100% !important; object-fit: contain; animation: badgeSway 4s ease-in-out infinite; }
#screen-menu #mstats .ms .msi .ms-hsb { height: 60px !important; }
#screen-menu #mstats .ms .msi canvas.runner { width: 56px !important; height: 64px !important; animation: none; margin-top: -4px; }
/* text */
#screen-menu #mstats .ms > div { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 3px !important; width: 100%; min-width: 0; text-align: center !important; }
#screen-menu #mstats .ms:nth-child(3) small, #screen-menu #mstats .ms:nth-child(2) small { width: min(100%, 124px) !important; height: 34px !important; margin: 0 auto !important; background-position: center !important; transform: rotate(-1.5deg) !important; animation: none !important; }
#screen-menu #mstats .ms b { display: block !important; max-width: 100%; margin: 0 !important; transform: none !important; text-align: center !important; font-family: var(--font-title) !important; font-weight: 400 !important; color: #3a1226 !important; -webkit-text-stroke: .5px #3a1226; line-height: 1.02 !important; font-size: clamp(19px, 19cqw, 34px) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-menu #mstats .ms:nth-child(3) b { font-size: clamp(16px, 15cqw, 26px) !important; white-space: normal; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; }
#screen-menu #mstats .ms:nth-child(1) > div b::after { content: ''; display: block; width: 78%; height: 5px; margin: 3px auto 0; border-radius: 6px; background: linear-gradient(90deg, #f6aa78, #f9c6a4); transform: rotate(-1.2deg); }
/* Next Unlock strip */
#screen-menu #mstats .ms-next { order: 4; grid-column: 1 / -1; display: grid !important; grid-template-columns: 60px auto minmax(0, 1fr); grid-template-areas: 'cape badge name' 'bar bar bar'; align-items: center; gap: 6px 10px; padding: 10px 14px 12px 8px !important; position: relative; min-height: 0 !important; container-type: inline-size;
background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 240, 226, .78)) !important; border: 2px solid rgba(122, 31, 61, .38) !important; border-radius: 26px !important; box-shadow: 0 3px 0 rgba(122, 31, 61, .2), inset 0 2px 0 rgba(255, 255, 255, .8) !important; }
#screen-menu #mstats .ms-next > div, #screen-menu #mstats .ms-next .comet { display: contents !important; }
#screen-menu #mstats .ms-next .ms-nub, #screen-menu #mstats .ms-next small.sr { display: none !important; }
#screen-menu #mstats .ms-next .cm-cape { grid-area: cape; position: static !important; translate: none !important; width: 58px !important; height: 54px !important; margin: 0 !important; object-fit: contain; animation: cardBob 3s ease-in-out infinite; }
#screen-menu #mstats .ms-next em#menu-next-n { grid-area: badge; position: static !important; justify-self: start; display: inline-flex !important; align-items: center; padding: 5px 12px 6px 22px !important; font: 900 clamp(13px, 3.6vw, 15px)/1 var(--font-ui) !important; font-style: normal !important; color: #4a1230 !important; white-space: nowrap; background-image: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.85) 48%, rgba(255,255,255,0) 61%), linear-gradient(135deg, #e7e0ff, #fce3d3) !important; background-size: 260% 100%, 100% 100% !important; background-repeat: no-repeat !important; border: 2.5px solid #7a1f3f !important; border-radius: 999px !important; box-shadow: 0 3px 0 #7a1f3f !important; text-decoration: none !important; transform: none; animation: none; top: auto !important; left: auto !important; right: auto !important; position: relative !important; }
#screen-menu #mstats .ms-next .comet.is-ready em#menu-next-n { background-image: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.85) 48%, rgba(255,255,255,0) 61%), linear-gradient(135deg, #fff3a0 0%, #ffc928 52%, #f9c6a4 100%) !important; box-shadow: 0 3px 0 #7a1f3f, 0 0 14px rgba(255, 214, 90, .85) !important; animation: readyBounce 1.7s ease-in-out infinite, readyShine 2.8s ease-in-out infinite !important; }
#screen-menu #mstats .ms-next em#menu-next-n::before { content: '\2605'; position: absolute; left: 6px; top: 50%; transform: translateY(-52%); font-size: 12px; color: #f5a169; text-shadow: 0 1px 0 #7a1f3f; }
#screen-menu #mstats .ms-next em#menu-next-n::after { content: '\2726'; position: absolute; right: -8px; top: -10px; font-size: 14px; color: #ffc928; text-shadow: 0 2px 0 #7a1f3f; animation: twinkle 1.6s ease-in-out infinite; }
#screen-menu #mstats .ms-next b#menu-next { grid-area: name; justify-self: start; min-width: 0; max-width: 100%; display: block !important; font-size: clamp(22px, 7vw, 30px) !important; line-height: 1 !important; text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-menu #mstats .ms-next b#menu-next::before { content: 'Next unlock'; display: block; font: 800 11px/1.1 var(--font-ui); letter-spacing: .3px; color: #844630; -webkit-text-stroke: 0; margin-bottom: 1px; }
#screen-menu #mstats .ms-next .cm-bar { grid-area: bar; width: 100% !important; margin: 0 !important; height: 14px !important; }
#screen-menu #mstats .ms-next::before, #screen-menu #mstats .ms-next::after { display: none !important; }
/* roomier screens: the reference layout, cards horizontal */
@media (min-width: 700px) {
#screen-menu #mstats .ms:not(.ms-next) { flex-direction: row !important; text-align: left !important; justify-content: flex-start !important; padding: 12px 16px 12px 14px !important; gap: 12px !important; }
#screen-menu #mstats .ms .msi { width: 84px !important; height: 70px !important; }
#screen-menu #mstats .ms .msi img { height: 66px !important; } #screen-menu #mstats .ms .msi .ms-hsb { height: 68px !important; } #screen-menu #mstats .ms .msi canvas.runner { height: 72px !important; width: 62px !important; }
#screen-menu #mstats .ms > div { align-items: flex-start !important; text-align: left !important; }
#screen-menu #mstats .ms:nth-child(3) small, #screen-menu #mstats .ms:nth-child(2) small { margin: 0 !important; }
#screen-menu #mstats .ms b { text-align: left !important; font-size: clamp(22px, 13cqw, 38px) !important; }
#screen-menu #mstats .ms:nth-child(3) b { font-size: clamp(20px, 11cqw, 30px) !important; }
#screen-menu #mstats .ms:nth-child(1) > div b::after { margin-left: 0; }
#screen-menu #mstats .ms-next { grid-template-columns: 84px auto auto minmax(0, 1fr); grid-template-areas: 'cape badge name bar'; gap: 14px; padding: 10px 24px 10px 14px !important; }
#screen-menu #mstats .ms-next .cm-cape { width: 74px !important; height: 68px !important; }
#screen-menu #mstats .ms-next b#menu-next { font-size: clamp(26px, 3.4vw, 40px) !important; padding-left: 14px; border-left: 2px solid rgba(122, 31, 61, .3); }
}
@media (max-width: 360px) { #screen-menu #mstats { gap: 8px !important; padding: 10px !important; } #screen-menu #mstats .ms:not(.ms-next) { padding: 10px 4px 10px !important; } #screen-menu #mstats .ms .msi { height: 52px !important; } #screen-menu #mstats .ms .msi img { height: 48px !important; } #screen-menu #mstats .ms .msi canvas.runner { height: 56px !important; width: 48px !important; } #screen-menu #mstats .ms:nth-child(3) small, #screen-menu #mstats .ms:nth-child(2) small { height: 30px !important; } #screen-menu #mstats .ms-next { grid-template-columns: 50px auto minmax(0, 1fr); } #screen-menu #mstats .ms-next .cm-cape { width: 48px !important; height: 44px !important; } }
@media (prefers-reduced-motion: reduce) { #screen-menu #mstats .ms::after, #screen-menu #mstats .ms .msi img, #screen-menu #mstats .ms-next .cm-cape, #screen-menu #mstats .ms-next em#menu-next-n, #screen-menu #mstats .ms-next em#menu-next-n::after { animation: none !important; } }
/* v4 tuning: values get full card width (never collapse), bigger type, tighter cards so the panel stays short on phones */
#screen-menu #mstats .ms:not(.ms-next) b { width: 100% !important; font-size: clamp(22px, 23cqw, 34px) !important; }
#screen-menu #mstats .ms:nth-child(3) b { font-size: clamp(17px, 16cqw, 26px) !important; }
#screen-menu #mstats .ms:not(.ms-next) { padding: 8px 6px 10px !important; }
#screen-menu #mstats .ms .msi { height: 52px !important; }
#screen-menu #mstats .ms .msi img { height: 50px !important; } #screen-menu #mstats .ms .msi .ms-hsb { height: 54px !important; } #screen-menu #mstats .ms .msi canvas.runner { height: 58px !important; width: 50px !important; }
#screen-menu #mstats .ms:nth-child(3) small, #screen-menu #mstats .ms:nth-child(2) small { height: 30px !important; }
#screen-menu #mstats { padding: 10px !important; gap: 8px !important; }
#screen-menu #mstats .ms-next { padding: 8px 12px 10px 8px !important; }
@media (min-width: 700px) { #screen-menu #mstats .ms:not(.ms-next) b { font-size: clamp(24px, 12cqw, 40px) !important; width: auto !important; } #screen-menu #mstats .ms:nth-child(3) b { font-size: clamp(20px, 10cqw, 30px) !important; } #screen-menu #mstats .ms .msi { height: 70px !important; } }
#screen-menu #mstats .ms:nth-child(1) .msi { height: 58px !important; margin-bottom: 6px !important; }
#screen-menu #mstats .ms:nth-child(1) .msi .ms-hsb { height: 50px !important; width: auto !important; max-width: 88% !important; }
#screen-menu #mstats .ms-next { grid-template-columns: 60px max-content minmax(0, 1fr) !important; }
#screen-menu #mstats .ms-next em#menu-next-n { width: max-content !important; }
#screen-menu #mstats .ms-next b#menu-next { padding-left: 12px; border-left: 2px solid rgba(122, 31, 61, .28); }
@media (min-width: 700px) { #screen-menu #mstats .ms-next { grid-template-columns: 84px max-content max-content minmax(0, 1fr) !important; } }
#screen-menu #mstats .ms:nth-child(1) .msi { height: 64px !important; margin-bottom: 10px !important; overflow: visible; }
#screen-menu #mstats .ms:nth-child(1) .msi .ms-hsb { height: 46px !important; max-width: 80% !important; }
#screen-menu #mstats .ms:nth-child(1) > div { margin-top: 4px; }
@media (min-width: 700px) { #screen-menu #mstats .ms:nth-child(1) .msi { height: 70px !important; margin-bottom: 0 !important; } #screen-menu #mstats .ms:nth-child(1) .msi .ms-hsb { height: 66px !important; max-width: 100% !important; } #screen-menu #mstats .ms:nth-child(1) > div { margin-top: 0; } }
/* desktop: make sure the v4 icon sizes win over older desktop-only rules */
@media (min-width: 700px) {
html body #screen-menu #mstats .ms .msi { width: 84px !important; height: 70px !important; flex: 0 0 84px !important; }
html body #screen-menu #mstats .ms .msi img { width: auto !important; height: 66px !important; max-width: 100% !important; max-height: none !important; }
html body #screen-menu #mstats .ms .msi .ms-hsb { height: 66px !important; width: auto !important; max-width: 100% !important; }
html body #screen-menu #mstats .ms .msi canvas.runner { width: 62px !important; height: 72px !important; max-height: none !important; }
html body #screen-menu #mstats .ms:nth-child(1) .msi { margin-bottom: 0 !important; }
}
/* ===== Shooting star: cleaned artwork + real glow + a proper streak ===== */
@keyframes cometFly2 {
0% { transform: translate(90%, -60%) rotate(0deg) scale(.7); opacity: 0; filter: drop-shadow(0 0 4px #ffd23f) drop-shadow(0 0 10px #ff9a52); }
5% { opacity: 1; }
14% { filter: drop-shadow(0 0 10px #fff3a0) drop-shadow(0 0 22px #ffc928) drop-shadow(0 0 40px #f8bd96); }
26% { transform: translate(-380%, 230%) rotate(-4deg) scale(1.05); opacity: 1; filter: drop-shadow(0 0 12px #fff3a0) drop-shadow(0 0 28px #ffc928) drop-shadow(0 0 50px #f8bd96); }
31%, 100% { transform: translate(-440%, 270%) rotate(-6deg) scale(.9); opacity: 0; filter: drop-shadow(0 0 4px #ffd23f); }
}
.sc-comet { animation: cometFly2 11s cubic-bezier(.3, .1, .6, 1) infinite 2s !important; will-change: transform, opacity, filter; pointer-events: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .sc-comet { animation: none !important; display: none; } }
/* =====================================================================================================================
HOME STATS v5 - colourful + accessible. One game-palette hue per stat; every icon sits on a card of a clearly different hue;
all text is deep burgundy (#3a1226) on light pastels (contrast 9:1+). Solid outlines separate every surface (not colour alone).
Palette (all already used in the game): butter #ffe27a, lavender #d9ccff, mint #bff0dc, peach #ffd9b8, pink #fcddc9, sky #c9e6ff, burgundy #7a1f3f.
===================================================================================================================== */
@keyframes panelDrift { to { background-position: 60px 30px, -40px 50px, 0 0; } }
#screen-menu #mstats { background: radial-gradient(circle at 10px 10px, rgba(255, 140, 190, .45) 0 3px, transparent 4px) 0 0 / 34px 34px, radial-gradient(circle at 26px 24px, rgba(90, 190, 255, .45) 0 3px, transparent 4px) 0 0 / 34px 34px, linear-gradient(160deg, #fff6c9 0%, #fdefe5 48%, #d4efff 100%) !important; border: 3px solid #7a1f3f !important; box-shadow: 0 5px 0 #7a1f3f, 0 14px 24px rgba(74, 18, 48, .22) !important; animation: panelDrift 24s linear infinite; }
/* the cards: solid outline + hard shadow (shape, not just colour, marks each one) */
#screen-menu #mstats .ms:not(.ms-next), #screen-menu #mstats .ms-next { border: 2.5px solid #7a1f3f !important; box-shadow: 0 4px 0 #7a1f3f, inset 0 3px 0 rgba(255, 255, 255, .6) !important; color: #3a1226; }
#screen-menu #mstats .ms:nth-child(1) { background: linear-gradient(180deg, #e6dcff, #cdbcff) !important; } /* high score: lavender, so the golden star pops */
#screen-menu #mstats .ms:nth-child(3) { background: linear-gradient(180deg, #ffe6cc, #ffc99a) !important; } /* farthest planet: peach, so the teal planet pops */
#screen-menu #mstats .ms:nth-child(2) { background: linear-gradient(180deg, #fde7d8, #fbd5bc) !important; } /* longest run: pink, so the green runner pops */
#screen-menu #mstats .ms-next { background: linear-gradient(180deg, #d3f6e6, #a9ebcf) !important; } /* next unlock: mint, so the pink/white helmet pops */
/* high score tag: same painted tag as the others so all three cards share one structure */
#screen-menu #mstats .ms:nth-child(1) small { display: block !important; width: min(100%, 124px) !important; height: 34px !important; margin: 0 auto !important; overflow: hidden; white-space: nowrap; text-indent: -999px; font-size: 0 !important; color: transparent !important; background: url('../assets/lettering/high-score.webp') center / contain no-repeat !important; transform: rotate(-1.5deg) !important; animation: none !important; }
#screen-menu #mstats .ms:nth-child(1) .ms-hsb { filter: drop-shadow(0 3px 0 rgba(122, 31, 61, .3)) drop-shadow(0 0 8px rgba(255, 226, 90, .8)); }
/* values: big, dark, never clipped */
#screen-menu #mstats .ms b { color: #3a1226 !important; -webkit-text-stroke: .6px #3a1226; }
#screen-menu #mstats .ms:nth-child(1) > div b::after { background: linear-gradient(90deg, #f4985a, #ff8c5a); height: 5px; border: 1.5px solid #7a1f3f; box-sizing: content-box; }
/* next-unlock caption: playful, still literal */
@keyframes capBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
#screen-menu #mstats .ms-next b#menu-next::before { content: '\2726 Next unlock!' !important; font: 400 clamp(16px, 4.6vw, 20px)/1 var(--font-title) !important; color: #7a1f3f !important; -webkit-text-stroke: .3px #7a1f3f; letter-spacing: .4px; animation: capBob 2.6s ease-in-out infinite; margin-bottom: 2px; }
#screen-menu #mstats .ms-next:has(.comet.is-ready) b#menu-next::before { content: '\2726 Grab it now! \2726' !important; color: #984122 !important; }
/* progress: fill + outline + end-star + the percentage/Ready badge = three non-colour cues */
#screen-menu #mstats .ms-next .cm-bar { background: #fff !important; border: 2.5px solid #7a1f3f !important; box-shadow: inset 0 2px 0 rgba(122, 31, 61, .18) !important; }
#screen-menu #mstats .ms-next .cm-fill { background: linear-gradient(90deg, #f4985a, #ff8c5a 60%, #ffc928) !important; }
#screen-menu #mstats .ms-next em#menu-next-n { background-image: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.85) 48%, rgba(255,255,255,0) 61%), linear-gradient(135deg, #fff3a0, #ffc928 55%, #fad1b5) !important; color: #3a1226 !important; }
/* interaction states (keyboard + touch + mouse) */
#screen-menu #mstats .ms-next { transition: transform .15s; cursor: pointer; }
#screen-menu #mstats .ms-next:hover { transform: translateY(-2px); }
#screen-menu #mstats .ms-next:active { transform: translateY(3px) scale(.985); box-shadow: 0 1px 0 #7a1f3f, inset 0 3px 0 rgba(255, 255, 255, .5) !important; }
#screen-menu #mstats .ms-next:focus-visible { outline: 3px solid #3a1226; outline-offset: 3px; }
@media (min-width: 700px) {
/* desktop: one identical structure in all three cards - icon vertically centred, tag over value, same left edges and same heights */
#screen-menu #mstats .ms:not(.ms-next) { display: grid !important; grid-template-columns: 84px minmax(0, 1fr) !important; align-items: center !important; column-gap: 12px !important; min-height: 92px !important; padding: 10px 16px 10px 12px !important; }
#screen-menu #mstats .ms:not(.ms-next) .msi { grid-column: 1; align-self: center !important; justify-self: center; margin: 0 !important; }
#screen-menu #mstats .ms:not(.ms-next) > div { grid-column: 2; align-self: center !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 4px !important; margin: 0 !important; }
#screen-menu #mstats .ms:not(.ms-next) small { margin: 0 !important; width: 118px !important; }
#screen-menu #mstats .ms:not(.ms-next) b { margin: 0 !important; text-align: left !important; }
#screen-menu #mstats .ms:nth-child(1) > div b::after { margin: 3px 0 0 0 !important; width: 80%; }
#screen-menu #mstats .ms-next { min-height: 92px !important; }
}
@media (prefers-reduced-motion: reduce) { #screen-menu #mstats, #screen-menu #mstats .ms-next b#menu-next::before { animation: none !important; } }
/* desktop alignment, strict: identical icon box, identical tag row, identical value row in all three cards */
@media (min-width: 700px) {
html body #screen-menu #mstats .ms:not(.ms-next) { min-height: 104px !important; align-items: center !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi { height: 76px !important; width: 84px !important; display: grid !important; place-items: center !important; align-self: center !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi img { height: 70px !important; width: auto !important; max-width: 84px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { height: 76px !important; width: 66px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) > div { display: grid !important; grid-template-rows: 36px 44px; align-content: center; align-items: center; justify-items: start; gap: 4px; align-self: center !important; }
html body #screen-menu #mstats .ms:not(.ms-next) b { height: 44px; display: flex !important; align-items: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: clamp(24px, 2.2vw, 36px) !important; line-height: 1 !important; }
html body #screen-menu #mstats .ms:nth-child(3) b { font-size: clamp(18px, 1.7vw, 26px) !important; -webkit-line-clamp: unset; display: flex !important; }
html body #screen-menu #mstats .ms:nth-child(1) > div b::after { display: none !important; }
html body #screen-menu #mstats .ms:nth-child(1) > div b { border-bottom: 5px solid #f4985a; border-radius: 0 0 4px 4px; padding-bottom: 2px; height: auto; align-self: start; margin-top: 4px; }
}
/* short phones: compact stats so the panel never covers the menu buttons or the story banner */
@media (max-width: 699px) and (max-height: 900px) {
html body #screen-menu #mstats { padding: 8px !important; gap: 6px !important; border-radius: 22px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) { padding: 6px 4px 8px !important; gap: 2px !important; }
html body #screen-menu #mstats .ms .msi { height: 38px !important; }
html body #screen-menu #mstats .ms .msi img { height: 36px !important; } html body #screen-menu #mstats .ms .msi .ms-hsb { height: 38px !important; }
html body #screen-menu #mstats .ms .msi canvas.runner { height: 42px !important; width: 36px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) small { height: 24px !important; width: min(100%, 100px) !important; }
html body #screen-menu #mstats .ms:nth-child(1) .msi { margin-bottom: 2px !important; height: 40px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) b { font-size: clamp(17px, 18cqw, 24px) !important; }
html body #screen-menu #mstats .ms:nth-child(3) b { font-size: clamp(14px, 13cqw, 19px) !important; -webkit-line-clamp: 1 !important; }
html body #screen-menu #mstats .ms-next { padding: 6px 10px 8px 6px !important; grid-template-columns: 46px max-content minmax(0, 1fr) !important; gap: 4px 8px !important; }
html body #screen-menu #mstats .ms-next .cm-cape { width: 44px !important; height: 40px !important; }
html body #screen-menu #mstats .ms-next b#menu-next { font-size: 20px !important; }
html body #screen-menu #mstats .ms-next b#menu-next::before { font-size: 13px !important; }
html body #screen-menu #mstats .ms-next .cm-bar { height: 12px !important; }
}
@media (max-width: 699px) and (max-height: 900px) {
html body #screen-menu #mstats .ms:nth-child(1) > div b::after { display: none !important; }
html body #screen-menu #mstats .ms:nth-child(3) b { white-space: nowrap !important; display: block !important; overflow: hidden; text-overflow: ellipsis; }
html body #screen-menu #mstats .ms:not(.ms-next) { padding: 4px 3px 6px !important; }
html body #screen-menu #mstats .ms .msi { height: 34px !important; } html body #screen-menu #mstats .ms .msi img { height: 32px !important; } html body #screen-menu #mstats .ms:nth-child(1) .msi { height: 36px !important; margin-bottom: 0 !important; }
html body #screen-menu #mstats .ms:not(.ms-next) small { height: 22px !important; }
html body #screen-menu #mstats { padding: 6px !important; gap: 5px !important; }
}
/* =====================================================================================================================
HOME STATS v6 - art-directed layout. Illustrations are the heroes; labels/values support them.
Grid rules (desktop): top cards = [illustration box 108px][text column]; text column = [tag][value] centred as one group on the same axis in all 3 cards.
Achievement strip = [helmet] [title block] [progress block]. Phones: top cards stack (icon / tag / value), achievement strip stacks in two rows.
Everything is contained: the end-star sits INSIDE the bar's gutter, no element is positioned outside its card.
===================================================================================================================== */
html body #screen-menu #mstats { box-sizing: border-box; max-width: 100%; overflow: hidden; }
/* ---------- top cards ---------- */
html body #screen-menu #mstats .ms:not(.ms-next) { box-sizing: border-box; min-width: 0; overflow: hidden; container-type: inline-size; }
@media (min-width: 700px) {
html body #screen-menu #mstats { left: 50% !important; right: auto !important; width: min(1040px, calc(100% - 48px)) !important; margin-left: calc(min(1040px, 100% - 48px) / -2) !important; padding: 14px !important; gap: 12px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) { display: grid !important; grid-template-columns: 108px minmax(0, 1fr) !important; column-gap: 14px !important; align-items: center !important; justify-items: start; min-height: 120px !important; height: 120px !important; padding: 10px 18px 10px 12px !important; text-align: left !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi { width: 108px !important; height: 100px !important; flex: none !important; display: grid !important; place-items: center !important; margin: 0 !important; align-self: center !important; justify-self: center; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi img { width: auto !important; height: auto !important; max-width: 108px !important; max-height: 100px !important; object-fit: contain; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { width: 80px !important; height: 100px !important; max-height: none !important; }
html body #screen-menu #mstats .ms:not(.ms-next) > div { display: grid !important; grid-template-rows: 46px auto; gap: 4px !important; align-content: center !important; justify-items: start !important; align-self: center !important; min-width: 0; width: 100%; margin: 0 !important; }
html body #screen-menu #mstats .ms:not(.ms-next) small { width: min(100%, 164px) !important; height: 46px !important; margin: 0 !important; background-position: left center !important; align-self: end; transform: rotate(-1deg) !important; }
html body #screen-menu #mstats .ms:not(.ms-next) b { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; text-align: left !important; font-size: clamp(30px, 3.2vw, 42px) !important; line-height: 1.05 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0 !important; padding: 0 !important; align-self: start; }
html body #screen-menu #mstats .ms:nth-child(3) b { font-size: clamp(22px, 2.3vw, 31px) !important; white-space: normal; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: balance; }
html body #screen-menu #mstats .ms:nth-child(1) > div b::after { display: block !important; content: '' !important; width: 70%; height: 6px; margin: 4px 0 0 2px; border-radius: 6px; background: linear-gradient(90deg, #f4985a, #ff8c5a); border: 1.5px solid #7a1f3f; box-sizing: content-box; }
html body #screen-menu #mstats .ms:not(.ms-next)::after { right: 12px; top: 8px; }
/* ---------- achievement strip ---------- */
html body #screen-menu #mstats .ms-next { display: grid !important; grid-template-columns: 150px minmax(0, 1.05fr) minmax(0, 1.5fr) !important; grid-template-rows: auto auto; grid-template-areas: 'cape name badge' 'cape name bar' !important; column-gap: 24px !important; row-gap: 8px !important; align-items: center; min-height: 132px !important; padding: 12px 36px 12px 14px !important; box-sizing: border-box; overflow: hidden; }
html body #screen-menu #mstats .ms-next .cm-cape { grid-area: cape; justify-self: center; width: 128px !important; height: 116px !important; margin: 0 !important; object-fit: contain; }
html body #screen-menu #mstats .ms-next b#menu-next { grid-area: name; align-self: center; justify-self: start; border-left: 0 !important; padding: 0 0 12px 0 !important; margin: 0; font-size: clamp(34px, 3.8vw, 52px) !important; line-height: 1 !important; position: relative; }
html body #screen-menu #mstats .ms-next b#menu-next::after { content: ''; position: absolute; left: 0; bottom: 0; width: min(92%, 260px); height: 9px; border-radius: 8px; background: #ffd23f; transform: rotate(-1.2deg); box-shadow: 0 0 0 1.5px rgba(122, 31, 61, .35); z-index: -1; }
html body #screen-menu #mstats .ms-next b#menu-next::before { font-size: clamp(17px, 1.6vw, 22px) !important; margin-bottom: 4px; }
html body #screen-menu #mstats .ms-next em#menu-next-n { grid-area: badge; justify-self: start; align-self: end; font-size: 17px !important; padding: 6px 16px 7px 26px !important; }
html body #screen-menu #mstats .ms-next .cm-bar { grid-area: bar; align-self: start; width: calc(100% - 26px) !important; height: 22px !important; margin: 0 !important; position: relative; overflow: visible; }
html body #screen-menu #mstats .ms-next .cm-star { position: absolute !important; right: -24px !important; top: 50% !important; transform: translateY(-50%) !important; width: 32px !important; height: 32px !important; z-index: 3; }
}
/* ---------- phones ---------- */
@media (max-width: 699px) {
html body #screen-menu #mstats .ms:not(.ms-next) .msi { height: 62px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi img { height: 60px !important; max-width: 90% !important; width: auto !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { height: 66px !important; width: 54px !important; }
html body #screen-menu #mstats .ms-next { grid-template-columns: 84px minmax(0, 1fr) !important; grid-template-areas: 'cape name' 'badge bar' !important; column-gap: 10px !important; row-gap: 8px !important; padding: 10px 28px 12px 8px !important; align-items: center; overflow: hidden; }
html body #screen-menu #mstats .ms-next .cm-cape { grid-area: cape; justify-self: center; width: 76px !important; height: 70px !important; }
html body #screen-menu #mstats .ms-next b#menu-next { grid-area: name; border-left: 0 !important; padding: 0 0 8px 0 !important; position: relative; font-size: clamp(26px, 8vw, 34px) !important; }
html body #screen-menu #mstats .ms-next b#menu-next::after { content: ''; position: absolute; left: 0; bottom: 0; width: min(92%, 200px); height: 7px; border-radius: 6px; background: #ffd23f; transform: rotate(-1.2deg); z-index: -1; }
html body #screen-menu #mstats .ms-next em#menu-next-n { grid-area: badge; justify-self: center; }
html body #screen-menu #mstats .ms-next .cm-bar { grid-area: bar; align-self: center; width: calc(100% - 4px) !important; height: 16px !important; margin: 0 !important; position: relative; overflow: visible; }
html body #screen-menu #mstats .ms-next .cm-star { position: absolute !important; right: -22px !important; top: 50% !important; transform: translateY(-50%) !important; width: 28px !important; height: 28px !important; z-index: 3; }
}
/* short phones: tuck it in so nothing is covered (keeps the earlier compact rules' intent) */
@media (max-width: 699px) and (max-height: 900px) {
html body #screen-menu #mstats .ms:not(.ms-next) .msi { height: 40px !important; } html body #screen-menu #mstats .ms:not(.ms-next) .msi img { height: 38px !important; } html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { height: 44px !important; width: 38px !important; }
html body #screen-menu #mstats .ms-next { grid-template-columns: 56px minmax(0, 1fr) !important; padding: 6px 24px 8px 6px !important; row-gap: 4px !important; }
html body #screen-menu #mstats .ms-next .cm-cape { width: 52px !important; height: 48px !important; }
html body #screen-menu #mstats .ms-next b#menu-next { font-size: 22px !important; padding-bottom: 6px !important; }
html body #screen-menu #mstats .ms-next .cm-bar { height: 12px !important; }
html body #screen-menu #mstats .ms-next .cm-star { width: 22px !important; height: 22px !important; right: -18px !important; }
}
/* desktop panels get less tall when the window is short, so the menu above is never covered */
@media (min-width: 700px) and (max-height: 860px) {
html body #screen-menu #mstats .ms:not(.ms-next) { min-height: 104px !important; height: 104px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi { height: 88px !important; } html body #screen-menu #mstats .ms:not(.ms-next) .msi img { max-height: 88px !important; } html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { height: 88px !important; width: 70px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) small { height: 40px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) > div { grid-template-rows: 40px auto; }
html body #screen-menu #mstats .ms-next { min-height: 108px !important; }
html body #screen-menu #mstats .ms-next .cm-cape { width: 104px !important; height: 94px !important; }
html body #screen-menu #mstats .ms-next b#menu-next { font-size: clamp(30px, 3.2vw, 44px) !important; }
}
/* v6 fixes: remove the legacy 30px caps on icon boxes; wide screens keep the panel clear of the menu column */
html body #screen-menu #mstats .ms .msi, html body #screen-menu #mstats .ms .msi img, html body #screen-menu #mstats .ms .msi canvas { max-height: none !important; min-height: 0 !important; }
@media (min-width: 1000px) {
html body #screen-menu #mstats { left: auto !important; right: 24px !important; margin-left: 0 !important; width: min(820px, calc(100% - 480px)) !important; }
html body #screen-menu #mstats .ms:not(.ms-next) { grid-template-columns: 96px minmax(0, 1fr) !important; column-gap: 12px !important; padding: 8px 14px 8px 8px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi { width: 96px !important; height: 96px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi img { max-width: 96px !important; max-height: 96px !important; height: auto !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { width: 76px !important; height: 96px !important; }
html body #screen-menu #mstats .ms-next { grid-template-columns: 124px minmax(0, 1fr) minmax(0, 1.25fr) !important; column-gap: 18px !important; padding-right: 34px !important; }
html body #screen-menu #mstats .ms-next .cm-cape { width: 112px !important; height: 100px !important; }
}
@media (min-width: 700px) and (max-width: 999px) {
html body #screen-menu #mstats .ms:not(.ms-next) .msi { height: 90px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) { grid-template-columns: 92px minmax(0, 1fr) !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi img { max-width: 92px !important; max-height: 90px !important; height: auto !important; }
}
/* bigger heroes: Lanky and the other illustrations get real presence; planet name never clips */
@media (min-width: 1000px) {
html body #screen-menu #mstats { width: min(800px, calc(100% - 500px)) !important; }
html body #screen-menu #mstats .ms:not(.ms-next) { height: 124px !important; min-height: 124px !important; grid-template-columns: 104px minmax(0, 1fr) !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi { width: 104px !important; height: 116px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi img { max-width: 104px !important; max-height: 104px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { width: 102px !important; height: 116px !important; }
html body #screen-menu #mstats .ms:nth-child(3) b { font-size: clamp(20px, 1.75vw, 26px) !important; -webkit-line-clamp: 2; line-height: 1.08 !important; max-height: 2.3em; }
}
@media (min-width: 700px) and (max-width: 999px) {
html body #screen-menu #mstats .ms:not(.ms-next) { height: 124px !important; min-height: 124px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { width: 86px !important; height: 104px !important; }
}
@media (max-width: 699px) {
html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { width: 62px !important; height: 74px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi { height: 72px !important; }
}
@media (max-width: 699px) and (max-height: 900px) {
html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { width: 44px !important; height: 52px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi { height: 48px !important; }
}
/* ===== v6 layout switch: side-by-side cards only when there is room (>=1300px); otherwise stacked cards with big art ===== */
@media (min-width: 1300px) { html body #screen-menu #mstats { width: min(980px, calc(100% - 500px)) !important; } }
@media (min-width: 700px) and (max-width: 1299px) {
html body #screen-menu #mstats .ms:not(.ms-next) { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; height: auto !important; min-height: 0 !important; padding: 10px 8px 12px !important; gap: 4px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi { width: 100% !important; height: 84px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi img { max-width: 92% !important; max-height: 82px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { width: 72px !important; height: 84px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) > div { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100%; gap: 3px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) small { width: min(100%, 130px) !important; height: 36px !important; background-position: center !important; margin: 0 auto !important; }
html body #screen-menu #mstats .ms:not(.ms-next) b { text-align: center !important; font-size: clamp(22px, 19cqw, 34px) !important; white-space: nowrap !important; display: block !important; }
html body #screen-menu #mstats .ms:nth-child(3) b { font-size: clamp(17px, 14cqw, 24px) !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; text-align: center !important; }
html body #screen-menu #mstats .ms:nth-child(1) > div b::after { margin: 4px auto 0 !important; }
html body #screen-menu #mstats .ms-next { grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1.2fr) !important; min-height: 0 !important; }
html body #screen-menu #mstats .ms-next .cm-cape { width: 92px !important; height: 84px !important; }
html body #screen-menu #mstats .ms-next b#menu-next { font-size: clamp(24px, 2.8vw, 34px) !important; }
}
/* phones: Ready! lives in the content column (never outside the card) */
@media (max-width: 699px) {
html body #screen-menu #mstats .ms-next { grid-template-columns: 84px minmax(0, 1fr) !important; grid-template-areas: 'cape name' 'cape badge' 'cape bar' !important; row-gap: 6px !important; }
html body #screen-menu #mstats .ms-next em#menu-next-n { grid-area: badge; justify-self: start !important; }
html body #screen-menu #mstats .ms-next .cm-cape { align-self: center; }
}
@media (max-width: 699px) and (max-height: 900px) {
html body #screen-menu #mstats .ms-next { grid-template-columns: 56px max-content minmax(0, 1fr) !important; grid-template-areas: 'cape name name' 'cape badge bar' !important; column-gap: 8px !important; }
html body #screen-menu #mstats .ms-next em#menu-next-n { justify-self: start !important; padding: 4px 10px 5px 20px !important; font-size: 13px !important; }
html body #screen-menu #mstats .ms-next .cm-bar { margin-right: 4px !important; }
}
/* ===== Icy Lanky: a frosted halo, a cold glow and drifting snowflakes make the runner pop off the pink card ===== */
@keyframes frostPulse { 0%, 100% { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #6fd8ff) drop-shadow(0 0 12px #bff0ff); } 50% { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #4cc7ff) drop-shadow(0 0 20px #d8f8ff); } }
@keyframes flakeDrift { 0% { transform: translate(0, -4px) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-6px, 22px) rotate(160deg); opacity: 0; } }
html body #screen-menu #mstats .ms:nth-child(2) .msi { position: relative; overflow: visible; }
html body #screen-menu #mstats .ms:nth-child(2) .msi::before { content: ''; position: absolute; left: 50%; top: 50%; width: 88%; aspect-ratio: 1; max-height: 96%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 38% 30%, #ffffff 0%, #d9f6ff 38%, #9fe0ff 72%, rgba(159, 224, 255, 0) 74%); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 0 14px rgba(120, 214, 255, .85), inset 0 0 12px rgba(255, 255, 255, .9); pointer-events: none; z-index: 0; }
html body #screen-menu #mstats .ms:nth-child(2) .msi canvas.runner { position: relative; z-index: 1; animation: frostPulse 2.6s ease-in-out infinite !important; }
html body #screen-menu #mstats .ms:nth-child(2) .msi::after { content: '\2744'; position: absolute; right: 4%; top: -2px; font-size: 16px; line-height: 1; color: #fff; text-shadow: 0 0 6px #4cc7ff, 0 1px 0 #2e86c1; z-index: 2; pointer-events: none; animation: flakeDrift 3.2s ease-in infinite; }
@media (prefers-reduced-motion: reduce) { html body #screen-menu #mstats .ms:nth-child(2) .msi canvas.runner, html body #screen-menu #mstats .ms:nth-child(2) .msi::after { animation: none !important; } html body #screen-menu #mstats .ms:nth-child(2) .msi canvas.runner { filter: drop-shadow(0 0 6px #6fd8ff); } }
/* compact: shave the last pixels so the story banner is never covered on short phones */
@media (max-width: 699px) and (max-height: 900px) {
html body #screen-menu #mstats .ms:not(.ms-next) .msi { height: 36px !important; } html body #screen-menu #mstats .ms:not(.ms-next) .msi img { height: 34px !important; } html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { height: 40px !important; width: 34px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) small { height: 20px !important; }
html body #screen-menu #mstats .ms-next b#menu-next::before { display: none !important; }
html body #screen-menu #mstats .ms-next .cm-cape { width: 46px !important; height: 42px !important; }
html body #screen-menu #mstats .ms-next { padding: 4px 22px 6px 6px !important; }
}
/* icy halo = a real circle sized to his box; Lanky is allowed to stand taller than the other icons */
html body #screen-menu #mstats .ms:nth-child(2) .msi::before { width: auto !important; height: min(100%, 92px) !important; aspect-ratio: 1 !important; max-height: none !important; }
@media (max-width: 699px) and (max-height: 900px) {
html body #screen-menu #mstats .ms:nth-child(2) .msi { height: 40px !important; overflow: visible !important; }
html body #screen-menu #mstats .ms:nth-child(2) .msi canvas.runner { width: 50px !important; height: 58px !important; margin-top: -10px !important; margin-bottom: -8px; }
html body #screen-menu #mstats .ms:nth-child(2) .msi::before { height: 54px !important; top: 46% !important; }
html body #screen-menu #mstats { padding: 5px !important; gap: 4px !important; }
}
@media (max-width: 699px) and (min-height: 901px) {
html body #screen-menu #mstats .ms:nth-child(2) .msi canvas.runner { width: 70px !important; height: 82px !important; margin-top: -8px; }
html body #screen-menu #mstats .ms:nth-child(2) .msi { height: 72px !important; }
html body #screen-menu #mstats .ms:nth-child(2) .msi::before { height: 70px !important; }
}
/* stacked cards: identical vertical rhythm (icon box, tag row, value row) in all three */
@media (max-width: 1299px) {
html body #screen-menu #mstats .ms:not(.ms-next) { justify-content: flex-start !important; }
html body #screen-menu #mstats .ms:nth-child(1) .msi, html body #screen-menu #mstats .ms:nth-child(2) .msi, html body #screen-menu #mstats .ms:nth-child(3) .msi { margin: 0 0 4px 0 !important; }
html body #screen-menu #mstats .ms:not(.ms-next) > div { margin: 0 !important; padding: 0 !important; justify-content: flex-start !important; }
html body #screen-menu #mstats .ms:not(.ms-next) small { flex: none; }
html body #screen-menu #mstats .ms:nth-child(1) > div { margin-top: 0 !important; }
}
/* every phone: badge and bar share one row under the title (saves ~30px, still one clear 3-area layout) */
@media (max-width: 699px) {
html body #screen-menu #mstats .ms-next { grid-template-columns: 64px max-content minmax(0, 1fr) !important; grid-template-areas: 'cape name name' 'cape badge bar' !important; column-gap: 10px !important; row-gap: 6px !important; padding: 6px 24px 8px 6px !important; }
html body #screen-menu #mstats .ms-next .cm-cape { width: 60px !important; height: 56px !important; }
html body #screen-menu #mstats .ms-next b#menu-next { font-size: clamp(24px, 7vw, 30px) !important; padding-bottom: 6px !important; }
html body #screen-menu #mstats .ms-next em#menu-next-n { font-size: 14px !important; padding: 4px 11px 5px 20px !important; }
}
/* the menu area stops above the stats panel on single-column layouts, and scrolls (never hides) if it is taller */
@media (max-width: 999px) {
html body #screen-menu .menu-ui { bottom: calc(var(--stats-h, 0px) + 18px) !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; }
html body #screen-menu .menu-ui::-webkit-scrollbar { display: none; }
}
@media (max-width: 999px) { html body #screen-menu .menu-ui { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%); padding-bottom: 20px; } }
html body #screen-menu #mstats .ms:not(.ms-next) small { position: relative; z-index: 3; }
/* ===== outfit abilities: dressing-room line + card star + HUD pill ===== */
@keyframes abPop { 0% { transform: scale(.9) rotate(-2deg); } 60% { transform: scale(1.04) rotate(1deg); } 100% { transform: scale(1) rotate(0); } }
#screen-outfits #of-abil { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 34ch; margin: 2px 0 4px; padding: 10px 14px; text-align: left; background: linear-gradient(135deg, #fff3a8, #fce3d3 60%, #d9ccff); border: 2.5px solid #7a1f3f; border-radius: 22px; box-shadow: 0 3px 0 #7a1f3f; animation: abPop .45s cubic-bezier(.2, 1.5, .4, 1) both; }
#screen-outfits #of-abil[hidden] { display: none; }
#screen-outfits #of-abil .ab-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 26px; font-style: normal; background: #fff; border: 2.5px solid #7a1f3f; border-radius: 14px; box-shadow: 0 2px 0 #7a1f3f; transform: rotate(-6deg); }
#screen-outfits #of-abil .ab-tx { display: flex; flex-direction: column; min-width: 0; }
#screen-outfits #of-abil b { font: 400 clamp(19px, 5vw, 23px)/1.05 var(--font-title); color: #7a1f3f; -webkit-text-stroke: .3px #7a1f3f; }
#screen-outfits #of-abil small { font: 700 13px/1.3 var(--font-ui); color: #3a1226; }
.ocard .oc-ab { position: absolute; top: 8px; left: 8px; z-index: 5; width: 26px; height: 26px; display: grid; place-items: center; font-size: 14px; font-style: normal; color: #7a1f3f; background: linear-gradient(#fff3a0, #ffc928); border: 2px solid #7a1f3f; border-radius: 50%; box-shadow: 0 2px 0 #7a1f3f; pointer-events: none; }
.hud-ability { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 96px); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; max-width: min(86vw, 320px); background: rgba(255, 250, 240, .92); border: 2.5px solid var(--ha, #7a1f3f); border-radius: 999px; box-shadow: 0 3px 0 rgba(58, 18, 38, .85); pointer-events: none; font: 800 13px/1 var(--font-ui); color: #3a1226; }
.hud-ability.hidden { display: none; }
.hud-ability .ha-ic { width: 26px; height: 26px; display: grid; place-items: center; font-style: normal; font-size: 16px; background: var(--ha, #fff); border-radius: 50%; border: 2px solid #3a1226; }
.hud-ability .ha-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-ability .ha-bar { display: none; width: 46px; height: 8px; border: 2px solid #3a1226; border-radius: 6px; background: #fff; overflow: hidden; }
.hud-ability .ha-bar i { display: block; height: 100%; width: 0; background: var(--ha, #c9a0ff); }
.hud-ability.timed .ha-bar { display: block; }
.hud-ability.live { animation: abPop .4s ease both; box-shadow: 0 3px 0 rgba(58, 18, 38, .85), 0 0 14px var(--ha, #fff); }
@media (prefers-reduced-motion: reduce) { #screen-outfits #of-abil, .hud-ability.live { animation: none; } }
/* BUGFIX: the Game Over screen must be hidden when it is not showing (it was forced to display:block, so an invisible copy sat over the menu and the game and swallowed taps) */
#screen-over.go-screen:not(.show) { display: none !important; }
#screen-over.go-screen.show { display: block !important; }
#screen-over.go-screen:not(.vis) { pointer-events: none !important; }
/* the stats panel itself is decoration (taps pass through to the scene), but the Next unlock card is a real button */
html body #screen-menu #mstats .ms-next { pointer-events: auto !important; }
/* phones up to 900px tall: slimmer logo block so the whole menu column (down to the story banner) fits above the stats panel */
@media (max-width: 699px) and (max-height: 900px) {
html body #screen-menu .menu-ui { top: calc(46px + var(--sat, 0px)) !important; }
html body #screen-menu .menu-ui .logo { width: min(46vw, 180px, 15vh) !important; margin-bottom: 0 !important; }
html body #screen-menu .menu-ui .tag-wrap { display: none !important; }
}
/* tablets (700-999px): compact side-by-side cards so the panel stays short and the story banner stays visible */
@media (min-width: 700px) and (max-width: 999px) {
html body #screen-menu #mstats .ms:not(.ms-next) { display: grid !important; grid-template-columns: 78px minmax(0, 1fr) !important; column-gap: 10px !important; align-items: center !important; justify-items: start; height: 96px !important; min-height: 96px !important; padding: 6px 12px 6px 8px !important; text-align: left !important; flex-direction: initial !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi { width: 78px !important; height: 82px !important; margin: 0 !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi img { max-width: 78px !important; max-height: 78px !important; height: auto !important; }
html body #screen-menu #mstats .ms:not(.ms-next) .msi canvas.runner { width: 60px !important; height: 82px !important; }
html body #screen-menu #mstats .ms:not(.ms-next) > div { display: grid !important; grid-template-rows: 34px auto; gap: 2px !important; align-items: center; justify-items: start !important; align-content: center; width: 100%; }
html body #screen-menu #mstats .ms:not(.ms-next) small { width: min(100%, 118px) !important; height: 34px !important; margin: 0 !important; background-position: left center !important; }
html body #screen-menu #mstats .ms:not(.ms-next) b { text-align: left !important; width: 100% !important; font-size: clamp(22px, 3.4vw, 30px) !important; }
html body #screen-menu #mstats .ms:nth-child(3) b { font-size: clamp(17px, 2.6vw, 22px) !important; -webkit-line-clamp: 2; }
html body #screen-menu #mstats .ms:nth-child(1) > div b::after { margin: 3px 0 0 0 !important; width: 70%; }
html body #screen-menu #mstats .ms-next { min-height: 92px !important; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.3fr) !important; }
html body #screen-menu #mstats .ms-next .cm-cape { width: 76px !important; height: 70px !important; }
}
/* BUGFIX: long level/world names ("The Bioluminescent Deep") were clipped at the right edge of the level banner on phones: let the title wrap inside the ticket */
.lb { max-width: min(94vw, 560px); box-sizing: border-box; }
.lb .lb-t, .lb .lb-s { white-space: normal !important; overflow-wrap: anywhere; text-wrap: balance; text-align: center; max-width: 100%; }
.lb .lb-t { font-size: clamp(26px, 8.4vw, 44px) !important; line-height: 1.05 !important; padding-inline: 8px; }
.lb .lb-s { font-size: clamp(15px, 4.4vw, 22px) !important; padding-inline: 8px; }
/* the in-run HUD no longer shows the player's best (distracting while running); the value is still shown on Game Over and the menu */
#hud-best, .best-l { display: none !important; }
/* home refinement (Part 14, keep-and-refine): a second, differently shaped floating island and three varied painted clouds in the sky (assets/home) */
.scene .sc-island2 { left: 57.5%; top: 15%; width: 9.5%; height: auto; animation: islandBob2 8.5s ease-in-out infinite; z-index: 0; pointer-events: none; }
@keyframes islandBob2 { 0%, 100% { transform: translateY(0) rotate(0.6deg); } 50% { transform: translateY(-5%) rotate(-0.8deg); } }
.scene .sc-cl { height: auto; pointer-events: none; opacity: 0.92; z-index: 0; }
.scene .c1 { left: 56%; top: 13%; width: 11%; animation: cloudDrift 26s ease-in-out infinite alternate; }
.scene .c2 { left: 2%; top: 20%; width: 9.5%; animation: cloudDrift 34s ease-in-out infinite alternate-reverse; }
.scene .c3 { left: 24%; top: 6%; width: 8%; animation: cloudDrift 30s ease-in-out infinite alternate; }
@keyframes cloudDrift { from { transform: translateX(-12%); } to { transform: translateX(14%); } }
@media (prefers-reduced-motion: reduce) { .scene .sc-island2, .scene .sc-cl { animation: none; } }
/* ---- homepage colour balance: pink stays an accent, not the ground. Yellow/ochre lead, green+teal, lavender and blue each get a real role. ---- */
#screen-menu .pill-new { background: linear-gradient(#f4e1d5, #e2bfa7) !important; box-shadow: 0 5px 0 #85523f !important; border-color: #5a1f3a !important; }
#screen-menu .pill-daily { background: radial-gradient(circle at 12px 10px, rgba(255, 255, 255, .55) 0 2.5px, transparent 3.5px) 0 0 / 22px 22px, linear-gradient(180deg, #ffe27a 0%, #f7b93d 52%, #f28a76 100%) !important; }
#screen-menu .pill-daily .pd-t { text-shadow: 2px 2px 0 #a3452e, 3px 3px 0 #3a1f2e; }
#screen-menu #mstats { background: radial-gradient(circle at 10px 10px, rgba(124, 201, 143, .5) 0 3px, transparent 4px) 0 0 / 34px 34px, radial-gradient(circle at 26px 24px, rgba(185, 164, 229, .55) 0 3px, transparent 4px) 0 0 / 34px 34px, linear-gradient(160deg, #fff3c2 0%, #f7ecd0 48%, #d6efe4 100%) !important; }
#screen-menu #mstats .ms:nth-child(1) { background: linear-gradient(180deg, #e8defc, #cdbcf5) !important; }
#screen-menu #mstats .ms:nth-child(3) { background: linear-gradient(180deg, #fff6dc, #f4e3b6) !important; }
#screen-menu #mstats .ms:nth-child(2) { background: linear-gradient(180deg, #f4e3d8, #e1c2ae) !important; }
#screen-menu #mstats .ms:nth-child(1) > div b { border-bottom-color: #f2b92f !important; }
#screen-menu #mstats .ms:nth-child(1) > div b::after { background: linear-gradient(90deg, #ffd65a, #ddae3e) !important; }
#screen-menu #mstats .ms:nth-child(3) { box-shadow: 0 4px 0 #315b43, inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -5px 0 rgba(67, 143, 145, .28) !important; border-color: #315b43 !important; }
#screen-menu #mstats .ms:nth-child(2) { box-shadow: 0 4px 0 #7a1f3f, inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -5px 0 rgba(141, 201, 233, .55) !important; }
#screen-menu #mstats .ms-next .cm-fill { background: linear-gradient(90deg, #7cc98f, #ffd65a 62%, #f2a33a) !important; }
/* the home background is now one painted scene that already contains the ringed planet, both floating islands with waterfalls, the clouds and the shooting star,
so the separate floating sprites (and the waterfall/mist overlays that sat on the old island) are retired on the home screen */
#screen-menu .scene .sc-island2, #screen-menu .scene .sc-cl { display: none !important; } /* the planet, island and comet sprites are back: the background was painted clean underneath them */
/* ---- less pink on the home page: New Run goes sage/mint, Longest Run goes sky blue; pink stays in the stickers, the ring and the accents ---- */
#screen-menu .pill-new { background: linear-gradient(#cfeedd, #93cfb0) !important; box-shadow: 0 5px 0 #2f5b46 !important; border-color: #2a4a38 !important; color: #23402f; }
#screen-menu #mstats .ms:nth-child(2) { background: linear-gradient(180deg, #dff0fb, #b3d8f1) !important; box-shadow: 0 4px 0 #7a1f3f, inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -5px 0 rgba(185, 164, 229, .6) !important; }
/* ---- loading screen: the painted galaxy scene (assets/home/load-bg.jpg) with Lanky running along the progress bar ---- */
#screen-loading { background: #0d2a4f url('../assets/home/load-bg.jpg') center / cover no-repeat !important; }
#screen-loading .ld-blob, #screen-loading .ld-orb, #screen-loading .ld-planet, #screen-loading .ld-comet, #screen-loading .ld-st { display: none !important; }
#screen-loading .load-card p, #screen-loading #load-msg, #screen-loading .load-card small { color: #fff3d6 !important; text-shadow: 0 2px 0 rgba(13, 30, 60, .8), 0 0 14px rgba(13, 30, 60, .7); opacity: 1 !important; }
#screen-loading .ld-bar { box-shadow: 0 4px 0 rgba(13, 30, 60, .9), 0 0 22px 3px rgba(255, 214, 90, .5) !important; }
#screen-loading .load-logo { filter: saturate(1.3) drop-shadow(0 0 2px #fff3d6) drop-shadow(0 0 3px #fff3d6) drop-shadow(0 0 16px rgba(255, 243, 214, .85)) drop-shadow(4px 5px 0 #f2a33a) !important; }
/* loading: a warm halo behind the logo so the burgundy lettering lifts off the night sky */
#screen-loading .load-card::before { content: ''; position: absolute; left: 50%; top: -6%; width: min(118vw, 560px); height: min(58vw, 270px); transform: translateX(-50%); z-index: -1; pointer-events: none; border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(255, 243, 200, .92) 0%, rgba(255, 222, 140, .62) 34%, rgba(255, 190, 110, .28) 58%, rgba(255, 190, 110, 0) 74%); filter: blur(6px); animation: ldHalo 3.6s ease-in-out infinite; }
@keyframes ldHalo { 0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { #screen-loading .load-card::before { animation: none; } }
/* loading: Lanky gets his own warm glow so the green-and-yellow figure pops off the dark sky */
#screen-loading .ld-runner { filter: drop-shadow(0 0 3px rgba(255, 243, 200, .95)) drop-shadow(0 0 12px rgba(255, 226, 140, .9)) drop-shadow(0 0 26px rgba(255, 200, 100, .7)) drop-shadow(0 4px 0 rgba(13, 30, 60, .55)) !important; }
#screen-loading .ld-runner { border-radius: 50%; background: radial-gradient(circle at 50% 52%, rgba(255, 236, 160, .75) 0%, rgba(255, 214, 110, .42) 42%, rgba(255, 200, 100, 0) 72%); box-shadow: 0 0 22px 8px rgba(255, 220, 130, .45); }
/* loading: the progress bar is a painted piece (assets/ui/ld-track.webp + ld-fill.webp): burgundy crayon outline, cream paper trough, a buttery stroke with painted seeds */
#screen-loading .ld-track { --bw: min(420px, 82vw); }
#screen-loading .ld-bar { height: calc(var(--bw) * 0.088); border: 0 !important; border-radius: 0; background: url('../assets/ui/ld-track.webp') center / 100% 100% no-repeat !important; box-shadow: none !important; overflow: visible; padding: 0 1.4%; box-sizing: border-box; display: flex; align-items: center; filter: drop-shadow(0 3px 0 rgba(13, 30, 60, .7)) drop-shadow(0 0 14px rgba(255, 214, 90, .35)); }
#screen-loading #load-fill { height: 63.6%; background: url('../assets/ui/ld-fill.webp') left center / calc(var(--bw) * 0.972) 100% no-repeat !important; border-radius: 99px; flex: none; overflow: hidden; }
#screen-loading #load-fill::before, #screen-loading #load-fill::after { display: none !important; }
#screen-loading .ld-runner { bottom: calc(var(--bw) * 0.044 + 3px); }
/* ---- hand-drawn pass on the CSS-drawn buttons: a chalky tooth layer (assets/chalk-tooth.webp) sits over each fill, like dry gouache on grainy paper ---- */
#screen-menu .pill-main, .btn.primary { background: url('../assets/chalk-tooth.webp') 0 0 / 150px 150px, linear-gradient(rgb(255, 240, 160), rgb(255, 210, 63)) !important; }
#screen-menu .pill-new { background: url('../assets/chalk-tooth.webp') 30px 20px / 150px 150px, linear-gradient(#cfeedd, #93cfb0) !important; }
#screen-menu .pill-daily { background: url('../assets/chalk-tooth.webp') 60px 10px / 150px 150px, radial-gradient(circle at 12px 10px, rgba(255, 255, 255, .55) 0 2.5px, transparent 3.5px) 0 0 / 22px 22px, linear-gradient(180deg, #ffe27a 0%, #f7b93d 52%, #f28a76 100%) !important; }
/* ---- hand-drawn pass, part 2: every remaining CSS-drawn button, and the home stats board, gets the chalky tooth layer ---- */
.hud-pause, .av-chip, .icon-btn, .btn.small.chip, .btn.chip, .bk-btn, .bk-tg, .bk-nb, .btn.small, .btn.small.toggle, .btn.av-exp-btn, .btn.go-alt.ov-outfits, .av-pill, .btn:not(.primary):not(.tile):not(.ghost):not(.pill-new):not(.pill-daily):not(.pill-main):not(.pinky):not(.go-link) { background-image: url('../assets/chalk-tooth.webp') !important; background-size: 150px 150px !important; background-repeat: repeat !important; }
.btn.small.ghost, .btn.ghost { background-image: none !important; }
.tbtn.t-move { background: url('../assets/chalk-tooth.webp') 0 0 / 150px 150px, linear-gradient(160deg, rgb(168, 236, 245), rgb(79, 195, 224)) !important; }
.tbtn.t-slide { background: url('../assets/chalk-tooth.webp') 0 0 / 150px 150px, linear-gradient(160deg, rgb(230, 210, 255), rgb(164, 123, 232)) !important; }
.tbtn.big.t-jump { background: url('../assets/chalk-tooth.webp') 0 0 / 150px 150px, linear-gradient(160deg, rgb(255, 232, 143), rgb(255, 167, 38)) !important; }
.btn.small.chip.on { background: url('../assets/chalk-tooth.webp') 0 0 / 150px 150px, linear-gradient(rgb(255, 154, 82), rgb(226, 103, 43)) !important; }
.btn.primary.go-retry { background: url('../assets/chalk-tooth.webp') 0 0 / 150px 150px, linear-gradient(rgb(255, 242, 154), rgb(255, 198, 25)) !important; }
/* stats board */
#screen-menu #mstats { background: url('../assets/chalk-tooth.webp') 0 0 / 150px 150px, radial-gradient(circle at 10px 10px, rgba(124, 201, 143, .5) 0 3px, transparent 4px) 0 0 / 34px 34px, radial-gradient(circle at 26px 24px, rgba(185, 164, 229, .55) 0 3px, transparent 4px) 0 0 / 34px 34px, linear-gradient(160deg, #fff3c2 0%, #f7ecd0 48%, #d6efe4 100%) !important; }
#screen-menu #mstats .ms:nth-child(1) { background: url('../assets/chalk-tooth.webp') 20px 30px / 150px 150px, linear-gradient(180deg, #e8defc, #cdbcf5) !important; }
#screen-menu #mstats .ms:nth-child(3) { background: url('../assets/chalk-tooth.webp') 70px 10px / 150px 150px, linear-gradient(180deg, #fff6dc, #f4e3b6) !important; }
#screen-menu #mstats .ms:nth-child(2) { background: url('../assets/chalk-tooth.webp') 40px 80px / 150px 150px, linear-gradient(180deg, #dff0fb, #b3d8f1) !important; }
#screen-menu #mstats .ms-next { background: url('../assets/chalk-tooth.webp') 100px 40px / 150px 150px, linear-gradient(180deg, #d3f6e6, #a9ebcf) !important; }
/* ---- stats board, hand-drawn: no grain layer; the board and each card are now painted panels whose outline and edge wobble like a hand-cut shape (SVG displacement on a background layer only, so text stays crisp) ---- */
#screen-menu #mstats { background: none !important; border: 0 !important; box-shadow: none !important; isolation: isolate; }
#screen-menu #mstats::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border: 3px solid #7a1f3f; border-radius: 34px 20px 38px 24px / 22px 36px 20px 34px;
background: radial-gradient(ellipse 46% 60% at 12% 20%, rgba(168, 220, 192, .55), transparent 70%), radial-gradient(ellipse 40% 55% at 88% 78%, rgba(185, 164, 229, .5), transparent 70%), radial-gradient(ellipse 50% 40% at 70% 10%, rgba(255, 214, 90, .45), transparent 70%), #f7ecd0;
box-shadow: 0 6px 0 #7a1f3f, 0 14px 22px rgba(74, 18, 48, .2); filter: url(#hd0); }
#screen-menu #mstats .ms { background: none !important; border: 0 !important; box-shadow: none !important; position: relative; isolation: isolate; }
#screen-menu #mstats .ms::before { content: ''; display: block !important; position: absolute; inset: 0; z-index: -1; pointer-events: none; border: 2.5px solid #7a1f3f; box-shadow: 0 4px 0 #7a1f3f; }
#screen-menu #mstats .ms:nth-child(1)::before { background: radial-gradient(ellipse 60% 50% at 25% 15%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(180deg, #e8defc, #cdbcf5); border-radius: 26px 16px 28px 18px / 18px 28px 16px 26px; filter: url(#hd1); }
#screen-menu #mstats .ms:nth-child(3)::before { background: radial-gradient(ellipse 60% 50% at 70% 15%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(180deg, #fff6dc, #f4e3b6); border-color: #315b43; box-shadow: 0 4px 0 #315b43; border-radius: 18px 28px 20px 26px / 26px 18px 28px 20px; filter: url(#hd2); }
#screen-menu #mstats .ms:nth-child(2)::before { background: radial-gradient(ellipse 60% 50% at 30% 12%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(180deg, #dff0fb, #b3d8f1); border-radius: 22px 26px 16px 28px / 28px 16px 26px 20px; filter: url(#hd3); }
#screen-menu #mstats .ms-next::before { background: radial-gradient(ellipse 50% 60% at 15% 25%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(180deg, #d3f6e6, #a9ebcf); border-radius: 28px 20px 30px 18px / 20px 30px 18px 28px; filter: url(#hd1); }
#screen-menu #mstats .ms:nth-child(1), #screen-menu #mstats .ms:nth-child(2), #screen-menu #mstats .ms:nth-child(3), #screen-menu #mstats .ms-next { background: none !important; box-shadow: none !important; }
#screen-menu #mstats .ms::before, #screen-menu #mstats .ms-next::before { content: '' !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; display: block !important; }
#screen-menu #mstats .ms:nth-child(1)::before { background: radial-gradient(ellipse 60% 50% at 25% 15%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(180deg, #e8defc, #cdbcf5) !important; }
#screen-menu #mstats .ms:nth-child(3)::before { background: radial-gradient(ellipse 60% 50% at 70% 15%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(180deg, #fff6dc, #f4e3b6) !important; }
#screen-menu #mstats .ms:nth-child(2)::before { background: radial-gradient(ellipse 60% 50% at 30% 12%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(180deg, #dff0fb, #b3d8f1) !important; }
#screen-menu #mstats .ms-next::before { background: radial-gradient(ellipse 50% 60% at 15% 25%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(180deg, #d3f6e6, #a9ebcf) !important; }
/* ---- Lanky's Great Escape: it should read as the thing to tap. Hand-drawn art (chalk pass), a warm pulsing halo, a gentle jiggle every few seconds and a painted shine that sweeps across it ---- */
.story-banner { filter: drop-shadow(0 4px 0 rgba(99, 36, 63, .55)) drop-shadow(0 10px 14px rgba(99, 36, 63, .28)); animation: sbnFloat 4.5s ease-in-out infinite, sbnJiggle 6s ease-in-out infinite 2s; }
@keyframes sbnJiggle { 0%, 82%, 100% { rotate: 0deg; scale: 1; } 86% { rotate: -1.6deg; scale: 1.035; } 90% { rotate: 1.4deg; scale: 1.035; } 94% { rotate: -.8deg; scale: 1.02; } }
.story-banner .sbn-glow { position: absolute; inset: -14% -6%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 226, 120, .9) 0%, rgba(255, 190, 110, .55) 40%, rgba(255, 190, 110, 0) 72%) !important; filter: blur(8px); animation: sbnHalo 2.6s ease-in-out infinite; }
@keyframes sbnHalo { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }
.story-banner::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .8) 50%, transparent 62%) -160% 0 / 260% 100% no-repeat; -webkit-mask: url('../assets/menu/great-escape-banner.webp') center / 100% 100% no-repeat; mask: url('../assets/menu/great-escape-banner.webp') center / 100% 100% no-repeat; animation: sbnShine 4.2s ease-in-out infinite 1s; }
@keyframes sbnShine { 0% { background-position: -160% 0; } 45%, 100% { background-position: 160% 0; } }
.story-banner:active { scale: .97; }
@media (prefers-reduced-motion: reduce) { .story-banner, .story-banner .sbn-glow, .story-banner::after { animation: none; } }
/* short iPhones (SE / 8 / 8 Plus): the Astronaut row hides so the stats board stops covering the Great Escape banner; it is back on every taller screen */
@media (max-height: 740px) { #screen-menu #mstats .ms-next { display: none !important; } }
/* ---- responsive architecture: iPhone sideways-scroll fix (measured root causes, see report) ----
1. #screen-menu (and the loading screen) were overflow:hidden but still 500px wider than the phone because the painted scene is wider than the screen (width: max(100vw, 177.68vh)); `overflow: clip` makes them non-scrollable boxes, so nothing can pan sideways, programmatically or by touch.
2. .menu-ui (the scrolling button column) was scrolling 5-7px sideways because the logo's twinkling sparkles hung past its right edge; the logo now keeps its sparkles inside the column. */
#screen-menu, #screen-loading { overflow: hidden; overflow: clip; overscroll-behavior: none; }
html body #screen-menu .menu-ui { overflow-x: hidden; overflow-x: clip; touch-action: pan-y; overscroll-behavior-x: none; }
#screen-menu .menu-ui .logo { max-width: calc(100% - 30px); margin-inline: auto; }
html, body { overscroll-behavior-x: none; }
/* ---- cleanup pass: the speckly chalk-tooth layer on buttons read as dirt, so it is gone; buttons are clean painted fills again. The hand-made feel stays in the edges and the art. ---- */
.hud-pause, .av-chip, .icon-btn, .btn.small.chip, .btn.chip, .bk-btn, .bk-tg, .bk-nb, .btn.small, .btn.small.toggle, .btn.av-exp-btn, .btn.go-alt.ov-outfits, .av-pill, .btn:not(.primary):not(.tile):not(.ghost):not(.pill-new):not(.pill-daily):not(.pill-main):not(.pinky):not(.go-link) { background-image: none !important; }
#screen-menu .pill-main, .btn.primary { background: linear-gradient(rgb(255, 240, 160), rgb(255, 210, 63)) !important; }
#screen-menu .pill-new { background: linear-gradient(#cfeedd, #93cfb0) !important; }
#screen-menu .pill-daily { background: radial-gradient(circle at 12px 10px, rgba(255, 255, 255, .55) 0 2.5px, transparent 3.5px) 0 0 / 22px 22px, linear-gradient(180deg, #ffe27a 0%, #f7b93d 52%, #f28a76 100%) !important; }
.tbtn.t-move { background: linear-gradient(160deg, rgb(168, 236, 245), rgb(79, 195, 224)) !important; }
.tbtn.t-slide { background: linear-gradient(160deg, rgb(230, 210, 255), rgb(164, 123, 232)) !important; }
.tbtn.big.t-jump { background: linear-gradient(160deg, rgb(255, 232, 143), rgb(255, 167, 38)) !important; }
.btn.small.chip.on { background: linear-gradient(rgb(255, 154, 82), rgb(226, 103, 43)) !important; }
.btn.primary.go-retry { background: linear-gradient(rgb(255, 242, 154), rgb(255, 198, 25)) !important; }
/* hard-crop fix: the hand-drawn stats panels wobble a few px past their box, so their boxes must not clip them (this was slicing the Astronaut card flat at the top and bottom) */
#screen-menu #mstats, #screen-menu #mstats .ms, #screen-menu #mstats .ms-next { overflow: visible !important; }
/* ---- cleanup pass: the speckly chalk-tooth layer on buttons read as dirt, so it is gone; buttons are clean painted fills again. The hand-made feel stays in the edges and the art. ---- */
.hud-pause, .av-chip, .icon-btn, .btn.small.chip, .btn.chip, .bk-btn, .bk-tg, .bk-nb, .btn.small, .btn.small.toggle, .btn.av-exp-btn, .btn.go-alt.ov-outfits, .av-pill, .btn:not(.primary):not(.tile):not(.ghost):not(.pill-new):not(.pill-daily):not(.pill-main):not(.pinky):not(.go-link) { background-image: none !important; }
#screen-menu .pill-main, .btn.primary { background: linear-gradient(rgb(255, 240, 160), rgb(255, 210, 63)) !important; }
#screen-menu .pill-new { background: linear-gradient(#cfeedd, #93cfb0) !important; }
#screen-menu .pill-daily { background: radial-gradient(circle at 12px 10px, rgba(255, 255, 255, .55) 0 2.5px, transparent 3.5px) 0 0 / 22px 22px, linear-gradient(180deg, #ffe27a 0%, #f7b93d 52%, #f28a76 100%) !important; }
.tbtn.t-move { background: linear-gradient(160deg, rgb(168, 236, 245), rgb(79, 195, 224)) !important; }
.tbtn.t-slide { background: linear-gradient(160deg, rgb(230, 210, 255), rgb(164, 123, 232)) !important; }
.tbtn.big.t-jump { background: linear-gradient(160deg, rgb(255, 232, 143), rgb(255, 167, 38)) !important; }
.btn.small.chip.on { background: linear-gradient(rgb(255, 154, 82), rgb(226, 103, 43)) !important; }
.btn.primary.go-retry { background: linear-gradient(rgb(255, 242, 154), rgb(255, 198, 25)) !important; }
/* hard-crop fix: the hand-drawn stats panels wobble a few px past their box, so their boxes must not clip them (this was slicing the Astronaut card flat at the top and bottom) */
#screen-menu #mstats, #screen-menu #mstats .ms, #screen-menu #mstats .ms-next { overflow: visible !important; }
/* Great Escape: calmer. No filter on the animated box (that was the flicker), shadow lives on the still image, jiggle is transform-only, no mask shine */
.story-banner { filter: none !important; animation: sbnFloat 4.5s ease-in-out infinite !important; }
.story-banner::after { display: none !important; }
.story-banner .sbn-img { filter: drop-shadow(0 3px 0 rgba(99, 36, 63, .5)); animation: sbnJiggle 6s ease-in-out infinite 2s; will-change: transform; }
@keyframes sbnJiggle { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(-1.4deg) scale(1.03); } 90% { transform: rotate(1.2deg) scale(1.03); } 94% { transform: rotate(-.6deg) scale(1.015); } }
.story-banner .sbn-glow { filter: blur(10px); opacity: .8; }
/* ---- Lanky's Great Escape = a button, and it should look like one: it bobs, its play disc sends out tap ripples, little stars twinkle round it, it jiggles for attention every few seconds and squishes when pressed ---- */
.story-banner { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease; }
.story-banner:active { transform: scale(.955) translateY(2px); }
.story-banner:focus-visible { outline: 3px dashed #63243f; outline-offset: 5px; border-radius: 40px; }
.story-banner .sbn-ring { position: absolute; left: 86.2%; top: 50%; width: 15%; aspect-ratio: 1; margin: -7.5% 0 0 -7.5%; border: 3px solid #ffd65a; border-radius: 50%; pointer-events: none; opacity: 0; animation: sbnRipple 2.4s ease-out infinite; z-index: 3; }
.story-banner .sbn-ring.r2 { animation-delay: 1.2s; border-color: #fff3c4; }
@keyframes sbnRipple { 0% { transform: scale(.78); opacity: .95; } 80%, 100% { transform: scale(1.55); opacity: 0; } }
.story-banner .sbn-spk { position: absolute; width: 5.2%; aspect-ratio: 1; pointer-events: none; z-index: 3; background: #ffd65a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 1px 0 #63243f); animation: sbnTw 1.9s ease-in-out infinite; }
.story-banner .sbn-spk.k1 { left: -1.5%; top: 6%; } .story-banner .sbn-spk.k2 { right: -1%; top: -4%; width: 4%; animation-delay: -.7s; background: #fff3c4; } .story-banner .sbn-spk.k3 { left: 41%; bottom: -5%; width: 3.6%; animation-delay: -1.2s; background: #a8dcc0; }
@keyframes sbnTw { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1.15) rotate(30deg); opacity: 1; } }
.story-banner { animation: sbnFloat 3.8s ease-in-out infinite !important; }
@media (prefers-reduced-motion: reduce) { .story-banner .sbn-ring, .story-banner .sbn-spk, .story-banner .sbn-img { animation: none; } .story-banner .sbn-ring { opacity: .6; transform: scale(1.1); } }
/* ---- Avatar Studio: the two sticky pieces now read as deliberate. Lanky's preview is a framed medallion (cream halo + ink ring + shadow) that stays put while the options scroll behind it; Save / Share is a solid bottom dock that is always on screen instead of floating in the middle of the list. ---- */
@media (max-width: 899px) {
#screen-avatar .av-stage { top: 6px !important; width: min(52vw, 30vh, 260px) !important; border-radius: 50%; background: #fff1dc; box-shadow: 0 0 0 7px #fff1dc, 0 0 0 10px #3a1f2e, 0 12px 0 10px rgba(58, 31, 46, .22), 0 16px 24px 10px rgba(58, 31, 46, .2); margin: 10px auto 22px !important; }
#screen-avatar .av-cta { order: 99 !important; position: sticky !important; bottom: 0 !important; z-index: 6; margin: 16px -8px 0 !important; border: 3px solid #3a1f2e !important; border-bottom: 0 !important; border-radius: 30px 24px 0 0 !important; background: linear-gradient(180deg, #fff6e6, #ffe9d2) !important;
box-shadow: 0 -6px 0 rgba(58, 31, 46, .12), 0 -14px 22px rgba(58, 31, 46, .3) !important; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important; outline: 2px dashed rgba(99, 36, 63, .35); outline-offset: -9px; }
}
@media (max-width: 899px) { #screen-avatar .av-main { padding-bottom: 0 !important; } #screen-avatar .av-cta { bottom: 0 !important; } }
@media (max-width: 899px) {
#screen-avatar .av-main.av-scrolled .av-stage { width: min(24vw, 96px) !important; margin: 6px auto 12px !important; transition: width .25s ease; box-shadow: 0 0 0 5px #fff1dc, 0 0 0 7px #3a1f2e, 0 8px 0 7px rgba(58, 31, 46, .2), 0 10px 16px 6px rgba(58, 31, 46, .2); }
#screen-avatar .av-main.av-scrolled .av-stage .av-pill { opacity: 0; pointer-events: none; }
#screen-avatar .av-stage { transition: width .25s ease; }
}
/* soft scroll edges (see js/whimsy.js): content melts into the panel edge instead of being sliced off */
[data-sfade] { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft, 0px), #000 calc(100% - var(--fb, 0px)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft, 0px), #000 calc(100% - var(--fb, 0px)), transparent 100%); }
@media (max-width: 899px) { #screen-avatar .av-main.av-scrolled .av-stage { top: 26px !important; } }
/* ---- Game Over: (1) the stray "aoe" was a corrupted sparkle character in the piggy-bank decoration, now fixed at the source; (2) Dress up / Rescue me / Challenge icons share one size and one baseline; (3) the action stack keeps clear of the right edge so scaled/focused buttons and their shadows are never sliced by the scroll bar ---- */
#screen-over #over-btns .go-row > button.go-alt::before { width: 58px !important; height: 58px !important; margin: 0 0 0 -4px !important; align-self: center !important; transform: none !important; top: auto !important; }
#screen-over #over-btns .go-row > button.go-alt.ov-revive { min-height: 85px; }
#screen-over .go-actions { margin-inline: 12px !important; }
/* ---- scrolling system: scrollbars that belong to the game (cream track, burgundy-ringed rose thumb with a butter centre), smooth deliberate scrolling, momentum on iOS, and room under the last item for the home indicator ---- */
html { scroll-behavior: auto; }
.screen, .panel-inner, .av-main, #map-worlds, .modal-card { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; scrollbar-color: #d3a07e #f4e9cd; }
@media (prefers-reduced-motion: no-preference) { .screen, .panel-inner, .av-main { scroll-behavior: smooth; } }
@media (hover: hover) and (pointer: fine) {
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #f4e9cd; border-radius: 99px; border: 2px solid #63243f; box-shadow: inset 0 2px 0 rgba(99, 36, 63, .15); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd65a, #ebb490); border: 2.5px solid #63243f; border-radius: 99px; min-height: 44px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffe27a, #d3a07e); }
::-webkit-scrollbar-corner { background: transparent; }
}
#screen-progress, #screen-how, #screen-over, #screen-settings .panel-inner, #screen-missions .panel-inner, #screen-board .panel-inner, #screen-pause .panel-inner { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
/* Game Over "Go again!": the shadow and the pink fade were being sliced. The wobble filter's region was only 6% tall (the 6px shadow fell outside it and showed as a thin cut line under the button), and the sticky bar ended hard at the screen edge. Bigger filter region (index.html), more room under the button, and a softer, longer fade. */
.go-cta { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; background: linear-gradient(180deg, rgba(244, 170, 203, 0) 0, rgba(244, 170, 203, .82) 30px, #f0c8ae 58px) !important; }
/* Longest run: the drifting snowflake was random decoration, removed. The icy halo around the runner stays. */
html body #screen-menu #mstats .ms:nth-child(2) .msi::after { content: none !important; display: none !important; }
/* Game Over icons are illustrated image art now (pin, cookie, Go again arrow) */
#screen-over .go-cta .go-retry .go-retry-ic { width: 34px; height: 34px; flex: none; object-fit: contain; }
#screen-over .go-chip img { width: 34px; height: 34px; object-fit: contain; flex: none; }
/* Game Over bottom: the lavender cloud scallops were a background of the narrow button grid, so they stopped in hard vertical cuts short of the screen edges and Lanky stood on a clipped strip. They are now a full-bleed cloud bank across the whole screen foot; Lanky stands on top of it. */
#screen-over .go-links { background-image: none !important; }
#screen-over .go { position: relative; padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
#screen-over .go::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 100vw; height: 96px; transform: translateX(-50%); pointer-events: none; z-index: 0;
background: url("data:image/svg+xml;utf8,") repeat-x left bottom / 150px 96px; }
#screen-over .go-links { position: relative; z-index: 1; }
html body #screen-over #over-btns .go-links, html body #screen-over .go-actions .go-links, html body #screen-over .go-links { background-image: none !important; background: none !important; }
#screen-over .go::after { z-index: 2 !important; }
#screen-over .go-links::before { translate: 0 54px; } #screen-over .go-links::after { translate: 0 40px; }
/* Game Over "Go again!": no more pink box. The sticky bar was a solid pink gradient with hard left/right/bottom edges sitting on the dark sky; the button now floats on its own shadow and the content simply slides beneath it. */
html body #screen-over .go-cta { background: none !important; background-image: none !important; box-shadow: none !important; }
/* Game Over foot: no dark strip under the cloud bank (the 24px scroll padding sat below it), and Lanky now sinks into the clouds instead of hovering above them with his legs sliced */
html body #screen-over { padding-bottom: 0 !important; }
#screen-over .go-links::before { translate: 0 86px !important; }
/* Game Over: Dress up! and Rescue me! sit side by side as a matched pair: same height (the row stretches both to the taller one), same icon size, content centred */
#screen-over #over-btns .go-row { align-items: stretch !important; }
#screen-over #over-btns .go-row > button.go-alt { align-self: stretch !important; height: auto !important; min-height: 96px !important; justify-content: center; }
#screen-over #over-btns .go-row:not(.solo) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#screen-over #over-btns .go-row > button.go-alt { flex: 1 1 0 !important; min-width: 0 !important; }
/* ---- Missions: each section's heading stays pinned (on a soft paper fade) while its cards scroll under it, and a hand-brushed ribbon with stars separates the sections ---- */
#mi-body .msec { position: relative; }
#mi-body .msec .mh { position: sticky; top: 0; z-index: 4; margin-left: -6px; margin-right: -6px; padding: 8px 6px 12px; background: linear-gradient(180deg, #fff1e2 0%, #fff1e2 66%, rgba(255, 241, 226, 0) 100%); }
#mi-body .msec + .msec::before { content: ''; display: block; height: 46px; margin: 4px 0 -10px; background: url('../assets/ui/divider.webp') center / min(100%, 420px) auto no-repeat; }
/* Your Progress is a long page (about 3,300px). Its Back button used to scroll away with the content, so it now stays put as a round button in the corner. */
#screen-progress .pg-back { position: fixed !important; top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); z-index: 12; box-shadow: 0 4px 0 rgba(99, 36, 63, .55), 0 8px 14px rgba(99, 36, 63, .22); }
/* ---- Your Progress journey trail, redrawn: a hand-cut painted sky patch holds a snake of eight bobbing planets (4 along the top, 4 back along the bottom), the finish flag is planted on the last world,
Lanky stands on the world you are at with a speech bubble beside him, and everything is laid out in one square box that scales with the screen. ---- */
.pg-trail { aspect-ratio: 1 / 1 !important; width: 100%; max-width: 480px; margin-inline: auto; container-type: inline-size; background: url('../assets/ui/trail-bg.webp') center / 100% 100% no-repeat; }
.pg-trail svg { overflow: visible; }
.tr-bg { stroke: #ffffff !important; stroke-width: 13 !important; stroke-dasharray: 1 24 !important; stroke-linecap: round; opacity: .95; animation: trMarch 2.4s linear infinite; }
.tr-fg { stroke-width: 11 !important; }
@keyframes trMarch { to { stroke-dashoffset: -50; } }
.tr-sh { fill: rgba(99, 36, 63, .22); transform: translate(3px, 6px); }
.tr-ring { fill: #fff8ea; stroke: #63243f; stroke-width: 3.4; }
.tr-n { animation: trPop .6s cubic-bezier(.2, 1.6, .4, 1) both, trBob 4.2s ease-in-out infinite; transform-box: fill-box; }
.tr-n:nth-of-type(odd) { animation-delay: 0s, -1.3s; } .tr-n:nth-of-type(3n) { animation-delay: 0s, -2.4s; }
@keyframes trBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.tr-n.cur .tr-ring { stroke: #ebb490; stroke-width: 5; }
.tr-n.done .tr-ring { stroke: #315b43; }
.tr-pill { fill: #fff8ea; stroke: #63243f; stroke-width: 2.6; } .tr-lb { font: 900 15px var(--font-ui, sans-serif); fill: #63243f; }
.tr-flag { transform-box: fill-box; transform-origin: 20% 90%; animation: sbRock 2.6s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(99, 36, 63, .3)); }
.tr-runner { width: 22% !important; transform: translate(-50%, -100%) !important; }
.tr-you { font-size: clamp(11px, 3.6cqw, 16px) !important; padding: .28em .9em !important; border-color: #63243f !important; background: #fff8ea !important; transform: translate(0, -50%) !important; animation: trBubble 2.6s ease-in-out infinite !important; }
.tr-you.to-l { transform: translate(-100%, -50%) !important; }
.tr-you::after { bottom: auto !important; top: 50% !important; width: .62em !important; height: .62em !important; background: #fff8ea !important; border: 0 !important; border-left: 2.5px solid #63243f !important; border-bottom: 2.5px solid #63243f !important; }
.tr-you.to-r::after { left: -.42em !important; transform: translateY(-50%) rotate(45deg) !important; }
.tr-you.to-l::after { left: auto !important; right: -.42em !important; transform: translateY(-50%) rotate(-135deg) !important; }
@keyframes trBubble { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .tr-bg, .tr-n, .tr-flag, .tr-you { animation: none !important; } }
.pg-trail { aspect-ratio: 400 / 440 !important; }
.tr-you, .tr-you.to-l, .tr-you.to-r { transform: translate(-50%, -100%) !important; }
.tr-you::after, .tr-you.to-r::after, .tr-you.to-l::after { top: auto !important; bottom: -.4em !important; left: 50% !important; right: auto !important; border: 0 !important; border-right: 2.5px solid #63243f !important; border-bottom: 2.5px solid #63243f !important; transform: translateX(-50%) rotate(45deg) !important; }
/* ---- level ladder (World Map): painted scalloped medals instead of plain circles, a brushed trail link instead of the boxed squiggle, and the supplied rocket + flag art ---- */
.orbit .o-node::before { background: url('../assets/ui/trail-link.webp') center / 100% 100% no-repeat !important; height: 30px !important; top: 14px !important; border-radius: 0 !important; width: clamp(18px, 3.6vw, 44px) !important; opacity: .95; }
.orbit .o-node.lock::before { background: url('../assets/ui/trail-link.webp') center / 100% 100% no-repeat !important; opacity: .38; filter: grayscale(.6); }
.o-node .o-c { width: clamp(62px, 9.4vh, 76px) !important; border: 0 !important; border-radius: 0 !important; background: url('../assets/ui/medal-open.webp') center / contain no-repeat !important; box-shadow: none !important; color: #63243f !important; filter: drop-shadow(0 4px 0 rgba(99, 36, 63, .35)); }
.o-node.done .o-c { background-image: url('../assets/ui/medal-done.webp') !important; }
.o-node.current .o-c { background-image: url('../assets/ui/medal-cur.webp') !important; animation: oPulse2 1.8s ease-in-out infinite !important; }
.o-node.lock .o-c { background-image: url('../assets/ui/medal-lock.webp') !important; color: #8a7a9a !important; }
@keyframes oPulse2 { 0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 4px 0 rgba(99, 36, 63, .35)); } 50% { transform: scale(1.07) rotate(-2deg); filter: drop-shadow(0 4px 0 rgba(99, 36, 63, .35)) drop-shadow(0 0 10px rgba(255, 198, 25, .8)); } }
.o-start .o-rk, .o-flag .o-fl { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(99, 36, 63, .3)); }
.o-start small, .o-flag small { font: 800 12px var(--font-ui, sans-serif); color: #63243f; }
.o-node small { font-weight: 700; opacity: 1; color: #63243f; text-shadow: 0 1px 0 rgba(255, 248, 234, .9); }
/* the boxed squiggle was a 2.5px border inherited by the connector pseudo-element */
.orbit .o-node::before { border: 0 !important; box-shadow: none !important; outline: 0 !important; }
/* ---- Dimensions list: each world is a painted planet sticker + name + a coloured status chip, in a responsive grid ---- */
#pg-dims { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px 16px; }
#pg-dims .pg-tile { display: flex !important; align-items: center; gap: 14px; text-align: left; padding: 12px 14px !important; min-height: 84px; border: 3px solid #63243f !important; border-radius: 26px 20px 28px 22px !important; background: #fff8ea !important; box-shadow: 0 5px 0 rgba(99, 36, 63, .85) !important; }
#pg-dims .pg-tile:nth-child(even) { border-radius: 20px 28px 22px 26px !important; transform: rotate(.5deg); } #pg-dims .pg-tile:nth-child(odd) { transform: rotate(-.5deg); }
#pg-dims .pgt-pl { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 3px solid #63243f; box-shadow: 0 3px 0 rgba(99, 36, 63, .35); display: grid; place-items: center; }
#pg-dims .pgt-pl img { width: 42px; height: 42px; object-fit: contain; }
#pg-dims .pg-tile.done .pgt-pl { border-color: #315b43; background: #e4f7ee; } #pg-dims .pg-tile.lock .pgt-pl { background: #ece5f2; } #pg-dims .pg-tile.lock .pgt-pl img { filter: grayscale(1); opacity: .55; }
#pg-dims .pgt-ck { position: absolute; right: -8px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: #52c7b8; border: 2.5px solid #63243f; } #pg-dims .pgt-ck::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
#pg-dims .pgt-lk { position: absolute; inset: 0; margin: auto; width: 20px; height: 22px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
#pg-dims .pgt-tx { display: grid; gap: 4px; min-width: 0; } #pg-dims .pgt-tx b { font: 800 clamp(15px, 4.2vw, 18px)/1.15 var(--font-ui, sans-serif); color: #63243f; overflow-wrap: anywhere; }
#pg-dims .pgt-tx small { justify-self: start; padding: 2px 11px; border-radius: 99px; border: 2px solid #63243f; font: 800 12px var(--font-ui, sans-serif); background: #ffe27a; color: #63243f; }
#pg-dims .pg-tile.done .pgt-tx small { background: #a8dcc0; } #pg-dims .pg-tile.lock .pgt-tx small { background: #d8cfe3; color: #5a4a6a; }
/* hover / focus / press: the global lift-and-glow put a rectangular box-shadow on the whole level button, which showed as a square with cropped shadows behind the round medal. Shaped things now glow through drop-shadow on their own artwork, and their box gets no shadow. */
@media (hover: hover) { .orbit .o-node:not([disabled]):hover { box-shadow: none !important; transform: none !important; outline: 0 !important; } }
.orbit .o-node, .orbit .o-node.focus, .orbit .o-node:focus-visible, .orbit .o-node:active, .orbit .o-node.is-pressed, .orbit .o-node:not([disabled]).focus, .orbit .o-node:not([disabled]):active { box-shadow: none !important; transform: none !important; outline: 0 !important; }
@media (hover: hover) { .orbit .o-node:not([disabled]):hover .o-c { transform: translateY(-5px) scale(1.08) rotate(-3deg); filter: drop-shadow(0 7px 0 rgba(99, 36, 63, .4)) drop-shadow(0 0 12px rgba(255, 198, 25, .75)); } }
.orbit .o-node.focus .o-c, .orbit .o-node:focus-visible .o-c { transform: translateY(-5px) scale(1.08) rotate(-3deg); filter: drop-shadow(0 7px 0 rgba(99, 36, 63, .4)) drop-shadow(0 0 12px rgba(255, 198, 25, .75)); }
.orbit .o-node:active .o-c { transform: translateY(1px) scale(.96); }
.orbit .o-node .o-c { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), filter .18s ease; }
.m-node:hover, .m-node.focus, .m-node:active, .m-node:focus-visible { box-shadow: none !important; }
html body .orbit .o-node .o-c, html body .orbit .o-node:hover .o-c, html body .orbit .o-node.focus .o-c, html body .orbit .o-node:focus-visible .o-c, html body .orbit .o-node:active .o-c, html body .orbit .o-node.current .o-c, html body .orbit .o-node.done .o-c, html body .orbit .o-node.open .o-c, html body .orbit .o-node.lock .o-c { box-shadow: none !important; background-color: transparent !important; border-radius: 0 !important; }
/* ---- Leaderboard: responsive. The panel can grow on big screens, and each entry re-flows by the room it has (container query on the list): stacked card on phones, two-line card on mid widths, one clean row on desktop, so names and scores are never squeezed. ---- */
#screen-board .panel-inner.narrow { max-width: min(940px, 100%) !important; width: 100%; }
#screen-board .bd-list { container-type: inline-size; display: grid; gap: 16px; }
#screen-board .bd-who { min-width: 0; overflow-wrap: anywhere; }
@container (min-width: 470px) { .bd-item { grid-template-columns: 78px 76px minmax(0, 1fr) !important; grid-template-areas: "rk av who" "rk av val" "emo emo emo" !important; align-items: center; column-gap: 14px; } .bd-item .bd-emo { justify-self: end; } }
@container (min-width: 700px) { .bd-item { grid-template-columns: 90px 80px minmax(0, 1fr) auto auto !important; grid-template-areas: "rk av who val emo" !important; padding: 16px 26px 16px 18px !important; column-gap: 20px; } .bd-item .bd-val { justify-self: end; text-align: right; } .bd-item .bd-emo { justify-self: end; } }
/* ---- "Hop between worlds" banner: a painted paper ribbon (assets/ui/hop-ribbon.webp) with the supplied rocket sticker, replacing the CSS-built ribbon and line-art rocket ---- */
.lede.hop .hop-b { display: block !important; width: min(100%, 460px); margin: 8px auto 0 !important; padding: clamp(26px, 7vw, 38px) clamp(54px, 14vw, 84px) clamp(28px, 7.4vw, 40px) !important; text-align: center; background: url('../assets/ui/hop-ribbon.webp') center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #63243f !important; font-weight: 800; filter: drop-shadow(0 4px 0 rgba(99, 36, 63, .28)); }
.lede.hop .hop-b::before, .lede.hop .hop-b::after { content: none !important; display: none !important; }
.lede.hop .hop-rocket { background: url('../assets/ui/icon-rocket.webp') center / contain no-repeat !important; width: clamp(54px, 14vw, 76px) !important; height: clamp(54px, 14vw, 76px) !important; right: -2px !important; bottom: -14px !important; filter: drop-shadow(0 3px 0 rgba(99, 36, 63, .3)); animation: tcBob 2.4s ease-in-out infinite; }
/* ---- Leaderboard note: a painted paper note, taped on with washi tape, with Lanky peeking over its edge and twinkling stars. Replaces the plain striped box. ---- */
#screen-board .bd-note:not(:empty) { position: relative; display: block !important; width: min(100%, 520px); margin: 30px auto 16px !important; padding: 34px clamp(24px, 7vw, 46px) 34px clamp(24px, 6vw, 40px) !important; text-align: center; font: 800 clamp(14px, 3.9vw, 17px)/1.4 var(--font-ui, sans-serif) !important; color: #63243f !important; background: url('../assets/ui/note-paper.webp') center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 5px 0 rgba(99, 36, 63, .3)); rotate: -1deg; animation: noteSway 5s ease-in-out infinite; }
#screen-board .bd-note:not(:empty)::before { content: '' !important; position: absolute !important; left: 50% !important; top: -26px !important; width: 124px !important; height: 38px !important; transform: translateX(-50%) rotate(-3deg) !important; background: url('../assets/ui/washi.webp') center / 100% 100% no-repeat !important; border: 0 !important; filter: drop-shadow(0 3px 0 rgba(99, 36, 63, .25)); }
#screen-board .bd-note:not(:empty)::after { content: '' !important; position: absolute !important; right: -6px !important; bottom: -22px !important; left: auto !important; top: auto !important; width: clamp(54px, 15vw, 74px) !important; height: clamp(46px, 13vw, 62px) !important; background: url('../assets/results/lanky-peek.webp') center / contain no-repeat !important; border: 0 !important; transform: rotate(6deg) !important; animation: tcBob 2.6s ease-in-out infinite; }
@keyframes noteSway { 0%, 100% { rotate: -1deg; } 50% { rotate: .6deg; } }
@media (prefers-reduced-motion: reduce) { #screen-board .bd-note:not(:empty), #screen-board .bd-note:not(:empty)::after { animation: none; } }
/* the real source of the square hover: the generic "glow" rule at #app :is(.m-world, .o-node) ... :is(.m-p, .o-c) puts a rectangular box-shadow on the medal's box. Beat its specificity and glow through drop-shadow on the artwork instead. */
#app .orbit .o-node:not([disabled]):is(:hover, .focus, :focus-visible, :active, .is-pressed) .o-c { box-shadow: none !important; background-color: transparent !important; filter: drop-shadow(0 7px 0 rgba(99, 36, 63, .4)) drop-shadow(0 0 12px rgba(255, 198, 25, .75)) !important; }
#app .orbit .o-node:not([disabled]):is(:hover, .focus, :focus-visible, :active, .is-pressed) { box-shadow: none !important; background: none !important; filter: none !important; }
/* ---- Leaderboard, less pink and more painted: the rank ribbons are chalky gouache art (gold + crown, silver, bronze, mint) instead of vector SVG, and the page sits on a cream / mint / lavender wash instead of solid pink ---- */
#screen-board { background-color: #ece6f4 !important; background-image: url('../assets/home/planet.webp'), url('../assets/frost/mtn-mid.webp'), linear-gradient(180deg, #f6efe2 0%, #e7efe9 48%, #dfe6f3 100%) !important; }
.bd-item { --under: #bfe3d2 !important; } .bd-item.r1 { --under: #f2c24a !important; } .bd-item.r2 { --under: #c4cbf0 !important; } .bd-item.r3 { --under: #f0b48a !important; }
#screen-board .bd-item .bd-rk { background: url('../assets/ui/rank-n.webp') center bottom / contain no-repeat !important; width: 70px !important; height: 104px !important; color: #63243f; font: 900 22px/1 var(--font-ui, sans-serif); display: grid; place-items: start center; padding-top: 25px; filter: drop-shadow(0 4px 0 rgba(99, 36, 63, .25)); }
#screen-board .bd-item.r1 .bd-rk { background-image: url('../assets/ui/rank-1.webp') !important; padding-top: 38px; height: 120px !important; margin-top: -12px; }
#screen-board .bd-item.r2 .bd-rk { background-image: url('../assets/ui/rank-2.webp') !important; }
#screen-board .bd-item.r3 .bd-rk { background-image: url('../assets/ui/rank-3.webp') !important; }
#screen-board .bd-item.r1 .bd-rk::before, #screen-board .bd-item.r1 .bd-rk::after, #screen-board .bd-item .bd-rk::after { content: none !important; display: none !important; }
/* ---- "70% of the galaxy explored": a collectible progress badge. A big painted rosette holds the percentage, a little planet orbits it, a ribbon carries the caption and a sticker pill carries the cheer. It scales with its container (container queries), so it fits a phone and a desktop panel. ---- */
.pg-trailwrap { container-type: inline-size; }
.pg-trailtxt { display: grid !important; justify-items: center; gap: clamp(6px, 2.4cqw, 12px); text-align: center; padding-top: clamp(6px, 2cqw, 14px); }
.pg-trailtxt b#pg-pct { position: relative; display: grid; place-items: center; width: clamp(130px, 38cqw, 190px); aspect-ratio: 1; margin: 6px 0 2px; background: url('../assets/ui/medal-open.webp') center / contain no-repeat; font: 900 clamp(34px, 11cqw, 54px)/1 var(--font-ui, sans-serif); color: #63243f; text-shadow: 0 2px 0 #fff8ea, 2px 3px 0 rgba(255, 198, 25, .9); filter: drop-shadow(0 6px 0 rgba(99, 36, 63, .3)); animation: pgBadge 3.6s ease-in-out infinite; }
.pg-trailtxt b#pg-pct::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; border: 3px dotted rgba(99, 36, 63, .55); animation: pgOrbit 14s linear infinite; pointer-events: none; }
.pg-trailtxt b#pg-pct::after { content: ''; position: absolute; left: 50%; top: -17%; width: clamp(20px, 6cqw, 30px); aspect-ratio: 1; margin-left: -.5em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c8f0e0, #438f91 70%); border: 2.5px solid #63243f; animation: pgOrbitDot 14s linear infinite; transform-origin: 50% calc(50cqw * 0 + 120%); pointer-events: none; }
@keyframes pgBadge { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.04); } }
@keyframes pgOrbit { to { transform: rotate(360deg); } }
@keyframes pgOrbitDot { to { transform: rotate(360deg); } }
.pg-trailtxt > span { display: block; width: min(100%, 360px); padding: clamp(16px, 5cqw, 24px) clamp(40px, 12cqw, 60px) clamp(18px, 5.4cqw, 26px); background: url('../assets/ui/hop-ribbon.webp') center / 100% 100% no-repeat; font: 800 clamp(13px, 3.8cqw, 17px)/1.2 var(--font-ui, sans-serif); color: #63243f; filter: drop-shadow(0 3px 0 rgba(99, 36, 63, .25)); }
.pg-trailtxt .pg-cheer { margin: 0; padding: 7px 18px 8px; max-width: 100%; border: 3px solid #63243f; border-radius: 26px 18px 28px 20px; background: #fff8ea; box-shadow: 0 4px 0 rgba(99, 36, 63, .85); font: 800 clamp(14px, 4cqw, 18px)/1.25 var(--font-ui, sans-serif); color: #315b43; rotate: -1deg; }
.pg-trailtxt .pg-cheer:empty { display: none; }
.pg-trailtxt .pg-cheer::before { content: '\2726 '; color: #e8a919; } .pg-trailtxt .pg-cheer::after { content: ' \2726'; color: #438f91; }
@media (prefers-reduced-motion: reduce) { .pg-trailtxt b#pg-pct, .pg-trailtxt b#pg-pct::before, .pg-trailtxt b#pg-pct::after { animation: none; } }
/* ---- painted-in-one-hand pass: rank ribbons / level medals / stat icons are tonal gouache (no outlines) like the creatures. The live number sits exactly on each plate; the world chip never breaks letter by letter; the note is a parchment scroll. ---- */
#screen-board .bd-item .bd-rk { --rkh: 104px; box-sizing: border-box; display: grid !important; place-items: center !important; width: 68px !important; height: var(--rkh) !important; padding: 0 0 calc(var(--rkh) * .396) !important; margin: 0 !important; font: 900 clamp(20px, 5vw, 24px)/1 var(--font-ui, sans-serif) !important; color: #5a2438 !important; text-shadow: 0 1px 0 rgba(255, 248, 234, .8); background-position: center bottom !important; background-size: contain !important; filter: drop-shadow(0 3px 0 rgba(90, 36, 56, .22)); }
#screen-board .bd-item.r1 .bd-rk { --rkh: 124px; padding-bottom: calc(var(--rkh) * .079) !important; height: var(--rkh) !important; margin-top: -10px !important; }
#screen-board .bd-who { overflow-wrap: normal !important; word-break: normal !important; }
#screen-board .bd-who * { white-space: nowrap; }
#screen-board .bd-who > :first-child { white-space: normal; overflow-wrap: anywhere; }
@container (min-width: 700px) { .bd-item { grid-template-columns: 90px 84px minmax(220px, 1.3fr) minmax(0, auto) auto !important; } }
#screen-board .bd-note:not(:empty) { width: min(100%, 560px); padding: 46px clamp(60px, 14vw, 84px) 44px !important; background: url('../assets/ui/scroll.webp') center / 100% 100% no-repeat !important; filter: drop-shadow(0 5px 0 rgba(90, 36, 56, .22)); rotate: -0.6deg; }
#screen-board .bd-note:not(:empty)::before { content: '' !important; position: absolute !important; left: 50% !important; top: -26px !important; width: 50px !important; height: 44px !important; transform: translateX(-50%) rotate(-6deg) !important; background: url('../assets/results/crown.png') center / contain no-repeat !important; filter: drop-shadow(0 3px 0 rgba(90, 36, 56, .3)); animation: tcBob 2.6s ease-in-out infinite; }
#screen-board .bd-note:not(:empty)::after { content: '' !important; position: absolute !important; right: 34px !important; bottom: 18px !important; left: auto !important; top: auto !important; width: 22px !important; height: 22px !important; background: url('../assets/results/sparkle_small.png') center / contain no-repeat !important; transform: none !important; animation: twinkle 1.8s ease-in-out infinite; }
.pg-ach-note, .pg-trailtxt b#pg-pct { text-shadow: 0 2px 0 #fff8ea; }
/* ---- Leaderboard that survives real life: a thousand players (top 10 first, "Show more" in pages of 25, your own spot pinned below a dotted gap, rows past #10 are compact), and huge scores (200,000 or 12,345,678 never squeeze the row: the figure shrinks to fit, never wraps, and past a million it shortens to 12.3M with the full number on hover/long-press). ---- */
#screen-board .bd-val { min-width: 0; max-width: 100%; }
#screen-board .bd-val b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-variant-numeric: tabular-nums; font-size: clamp(20px, 6.6cqw, 36px) !important; line-height: 1.05; }
#screen-board .bd-val small { white-space: nowrap; }
#screen-board .bd-item.cmp { padding: 8px 14px 8px 8px !important; row-gap: 0 !important; --rkh: 62px; }
#screen-board .bd-item.cmp .bd-rk { --rkh: 62px; width: 44px !important; font-size: 15px !important; padding-bottom: calc(var(--rkh) * .396) !important; }
#screen-board .bd-item.cmp .bd-emo { display: none !important; }
#screen-board .bd-item.cmp .bd-av { width: 30px !important; height: 30px !important; }
#screen-board .bd-item.cmp .bd-val b { font-size: clamp(17px, 5.2cqw, 28px) !important; }
#screen-board .bd-more { list-style: none; display: grid; place-items: center; padding: 4px 0 2px; }
#screen-board .bd-more .btn { min-height: 52px; padding: 8px 24px; font: 800 16px var(--font-ui, sans-serif); background: #ffd65a; border: 3px solid #5a2438; border-radius: 26px 20px 28px 22px; box-shadow: 0 5px 0 #5a2438; color: #5a2438; }
#screen-board .bd-more .btn small { font-weight: 700; opacity: .8; }
#screen-board .bd-gap { list-style: none; display: flex; justify-content: center; gap: 9px; padding: 2px 0 0; } #screen-board .bd-gap i { width: 9px; height: 9px; border-radius: 50%; background: #438f91; }
#screen-board .bd-you { outline: 3px dashed #438f91; outline-offset: 3px; }
/* leaderboard: world chip may never outgrow its row; long names shrink with an ellipsis */
#screen-board .bd-item .bd-who small { max-width: 100% !important; min-width: 0; box-sizing: border-box; display: inline-flex !important; overflow: hidden; }
#screen-board .bd-item .bd-who small > :last-child, #screen-board .bd-item .bd-who small { text-overflow: ellipsis; }
#screen-board .bd-item .bd-who small { padding-right: 12px !important; }
#screen-board .bd-item .bd-who small { display: block !important; width: fit-content; white-space: nowrap !important; text-overflow: ellipsis; overflow: hidden; }
#screen-board .bd-item .bd-who small::before { display: inline-block; vertical-align: middle; margin-right: 6px; }
/* leaderboard: the footnote scroll is removed */
html body #screen-board .bd-note, html body #screen-board #board-note { display: none !important; }
/* spacing rhythm: content never butts against the Back / action row; lists end with air, the action row has its own safe bottom room */
html body .panel-inner > .panel-actions { margin-top: clamp(32px, 7vw, 48px) !important; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
html body #screen-board .bd-list { margin-bottom: 0 !important; padding-bottom: 6px; }
html body #screen-board .bd-list > li.bd-you { margin-bottom: 6px; }
html body .panel-inner > .panel-actions { margin-top: clamp(44px, 10vw, 64px) !important; }
/* progress stat cards: one icon size, optically even */
html body #screen-progress .st-ic { display: grid; place-items: center; flex: none; width: 64px; height: 64px; }
html body #screen-progress .st-ic img { width: 58px !important; height: 58px !important; object-fit: contain; }
html body #screen-progress .st-ic img[src*="high_score"] { width: 80px !important; height: 64px !important; }
html body #screen-progress .st-ic img[src*="astronaut"] { width: 70px !important; height: 70px !important; }
/* very narrow screens (<=370px wide, e.g. iPhone SE / small Androids): slimmer ribbon + avatar so the name and world chip keep their room */
@container (max-width: 370px) {
#screen-board .bd-item { column-gap: 8px !important; padding-inline: 10px 12px !important; }
#screen-board .bd-item .bd-rk { --rkh: 84px; width: 52px !important; font-size: 18px !important; }
#screen-board .bd-item.r1 .bd-rk { --rkh: 100px; }
#screen-board .bd-item .bd-av { width: 50px !important; height: 50px !important; }
#screen-board .bd-item .bd-who b { font-size: clamp(18px, 6vw, 24px) !important; overflow-wrap: anywhere; }
#screen-board .bd-item .bd-who small { font-size: 12px !important; padding: 3px 10px 3px 6px !important; }
}
@container (max-width: 370px) { #screen-board .bd-item { column-gap: 12px !important; } }
/* less pink: the submenu pages share one calm storybook wash (cream -> mint -> misty sky) that sits with the Cream Nebula / Green Galaxy palette */
html body #screen-progress, html body #screen-missions.screen, html body #screen-outfits.screen, html body #screen-settings, html body #screen-how {
background: radial-gradient(circle at 6% 2%, rgba(255, 224, 150, .5), transparent 28%), radial-gradient(circle at 98% 8%, rgba(150, 214, 200, .5), transparent 30%), linear-gradient(180deg, #f7f0df 0%, #e4efe4 52%, #d9e6ee 100%) !important;
background-color: #e8f0e6 !important;
}
html body #screen-map { background-image: url("../assets/home/planet.webp"), url("../assets/home/island.webp"), url("../assets/home/comet.webp"), linear-gradient(rgba(246, 240, 222, .78), rgba(206, 228, 216, .74)), url("../assets/home/bg.jpg") !important; }
html body #screen-progress .pg-stats .st-rank { background: linear-gradient(135deg, #fff3c9, #d9efe2) !important; }
/* levels strip: one continuous sky (no tiled 640px picture -> no hard seam/box when it scrolls sideways). Gradient layers use local attachment so they span the full scroll width */
html body .orbit {
background-color: #5a4a9a !important;
background-image:
radial-gradient(circle at 18px 22px, rgba(255, 224, 150, .9) 0 2px, transparent 3px),
radial-gradient(circle at 70px 56px, rgba(255, 255, 255, .7) 0 1.6px, transparent 2.6px),
radial-gradient(ellipse 140px 26px at 50% 100%, rgba(255, 255, 255, .0), transparent),
linear-gradient(180deg, transparent 0 66%, #6fb7a4 66% 74%, #4f9a8a 74% 100%),
linear-gradient(180deg, #4d3f8f 0%, #7d63b8 38%, #d5b49e 62%, #f3c9b0 66%) !important;
background-size: 96px 90px, 130px 110px, auto, 100% 100%, 100% 100% !important;
background-position: 0 0, 30px 20px, 0 0, 0 0, 0 0 !important;
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat !important;
background-attachment: local, local, local, local, local !important;
}
html body #screen-progress .pf-card { background: linear-gradient(135deg, #fff3c9, #dcefe4) !important; }
/* no pink dot trims anywhere: dotted row separators and polka-dot card patterns are gone; a plain soft hairline separates rows instead */
html body { --sq-h: none; --sq-v: none; }
html body .hrow, html body .pg-act .row, html body .set-row, html body .av-grid { background-image: none !important; }
html body .pg-act .row { border-bottom: 1.5px solid rgba(58, 38, 48, .14) !important; padding-bottom: 8px; }
html body #screen-outfits .of-earn.card { background: linear-gradient(170deg, #fff6d6, #e9f3e2 60%, #dcecf1) !important; }
html body #screen-menu #mstats { background: linear-gradient(160deg, #fff6d6 0%, #eaf2df 52%, #d9ebf0 100%) !important; }
/* Missions: painted art laid out on an even grid (84px art column, 16px card padding, 14px column gap) */
html body #screen-missions .mcard { display: grid !important; grid-template-columns: 84px minmax(0, 1fr) !important; grid-template-areas: "ill body" "ill right" !important; column-gap: 14px !important; row-gap: 6px !important; align-items: center !important; padding: 14px 16px !important; min-height: 0 !important; }
html body #screen-missions .mcard .mc-ill { grid-area: ill; width: 84px !important; height: 84px !important; display: grid; place-items: center; margin: 0 !important; position: relative; }
html body #screen-missions .mcard .mc-ill > img, html body #screen-missions .mcard .mc-ill > canvas, html body #screen-missions .mcard .mc-ill > svg { width: 84px !important; height: 76px !important; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(90, 36, 56, .2)); }
html body #screen-missions .mcard .mc-body { grid-area: body; min-width: 0; }
html body #screen-missions .mcard .mc-rw, html body #screen-missions .mcard .mc-done { grid-area: right; justify-self: end; position: relative; }
html body #screen-missions .mcard .mc-done { display: grid; justify-items: center; gap: 0; }
html body #screen-missions .mcard .mc-done img.mc-cloud { width: 96px !important; height: auto !important; position: static !important; filter: drop-shadow(0 3px 0 rgba(29, 95, 54, .25)); }
html body #screen-missions .mcard .mc-done b { position: static !important; margin-top: -6px; font: 800 12px/1.1 var(--font-ui) !important; color: #1d5f36 !important; text-shadow: none !important; }
html body #screen-missions .mdl-badge { position: relative; display: block; width: 78px; height: 78px; margin: 0 auto; }
html body #screen-missions .mdl-badge .mdl-bg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; filter: drop-shadow(0 3px 0 rgba(90, 36, 56, .22)); }
html body #screen-missions .mdl-badge .mdl-ic { position: absolute; left: 22%; top: 20%; width: 56% !important; height: 56% !important; object-fit: contain; }
html body #screen-missions .mdl.off .mdl-bg, html body #screen-missions .mdl.off .mdl-ic { filter: grayscale(.85) opacity(.55); }
/* Outfits earn list: painted icons instead of emoji */
html body #screen-outfits .earn-row.btn::before { content: '' !important; font-size: 0 !important; background-color: #fff6dc !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 74% !important; border: 2px solid rgba(90, 36, 56, .25); }
html body #screen-outfits .earn-row.btn:nth-of-type(1)::before { background-image: url('../assets/ui/er-run.webp') !important; }
html body #screen-outfits .earn-row.btn:nth-of-type(2)::before { background-image: url('../assets/ui/er-scroll.webp') !important; }
html body #screen-outfits .earn-row.btn:nth-of-type(3)::before { background-image: url('../assets/ui/er-rocket.webp') !important; }
html body #screen-outfits .earn-row.btn:nth-of-type(4)::before { background-image: url('../assets/ui/er-moon.webp') !important; }
html body #screen-outfits .earn-row.btn:nth-of-type(5)::before { background-image: url('../assets/ui/er-planet.webp') !important; }
html body #screen-outfits .earn-row.btn:nth-of-type(6)::before { background-image: url('../assets/ui/er-astro.webp') !important; }
html body #screen-outfits .earn-row.btn:nth-of-type(7)::before { background-image: url('../assets/ui/er-calendar.webp') !important; }
html body #screen-outfits .of-earn h4 .gift::after { content: '' !important; background: url('../assets/ui/er-coin.webp') center / 80% no-repeat !important; font-size: 0 !important; }
html body #screen-outfits .of-info.card { background-image: none !important; background-color: #fff6dc !important; }
html body #screen-outfits .earn-row.btn::before { background-color: transparent !important; border: 0 !important; background-size: 100% !important; filter: drop-shadow(0 3px 0 rgba(90, 36, 56, .22)); }
/* painted Outfits tab icons */
html body #screen-outfits img.ti { width: 26px; height: 26px; object-fit: contain; flex: none; display: block; filter: drop-shadow(0 1.5px 0 rgba(90, 36, 56, .25)); }
html body #screen-outfits .of-pose img.ti { width: 24px; height: 24px; }
html body #screen-outfits .of-modes img.ti { width: 30px; height: 30px; }
/* painted bunting: whole pennants only (background-repeat: round fits an exact number of tiles, so the ends never crop) */
html body .modal-card::before, html body .panel-inner.narrow::before { height: 40px !important; background: url('../assets/ui/bunting.webp') left top / auto 40px repeat-x !important; background-repeat: round !important; opacity: .95; }
html body .modal-card, html body .panel-inner.narrow { padding-top: 46px !important; }
/* Avatar Studio status pill: never narrower than its text (iPhone showed a short yellow blob with the words spilling out), and it sits clear under the medallion */
html body #screen-avatar .av-pill, html body .av-pill { max-width: none !important; width: max-content !important; min-width: 0; padding: 5px 16px 6px !important; bottom: -24px !important; z-index: 5; }
html body #screen-avatar .av-stage { margin-bottom: 26px; }
/* trail progress line: plain stroke (no gradient/filter) so Safari cannot paint stray strips outside the card */
html body .tr-fg { stroke: #52c7b8 !important; filter: none !important; }
/* outfit purchase modal now lives directly in #app: always centred on the visible screen, above every page */
html body #app > #of-modal { position: fixed !important; inset: 0 !important; z-index: 60 !important; }
html body #app > #of-modal.hidden { display: none !important; }
/* leaderboard rank ribbons: deterministic geometry. The ribbon is its own sprite-shaped box (aspect-ratio from the 264x430 art) and the number is placed with padding computed from the plate centre (130/430 of the height, 198/430 for the crown), so it sits dead-centre in every browser, including iOS Safari. */
html body #screen-board .bd-item .bd-rk { --w: 68px; --fs: 22px; box-sizing: border-box; display: block !important; width: var(--w) !important; height: calc(var(--w) * 1.6288) !important; margin: 0 !important; padding: calc(var(--w) * .4924 - var(--fs) * .5) 0 0 !important; font-size: var(--fs) !important; line-height: 1 !important; text-align: center; background-size: 100% 100% !important; background-position: center !important; background-repeat: no-repeat !important; place-items: normal !important; align-self: center; justify-self: center; }
html body #screen-board .bd-item.r1 .bd-rk { padding: calc(var(--w) * .75 - var(--fs) * .5) 0 0 !important; margin: 0 !important; }
html body #screen-board .bd-item.cmp .bd-rk { --w: 40px; --fs: 14px; }
@container (max-width: 370px) { html body #screen-board .bd-item .bd-rk { --w: 56px; --fs: 19px; } html body #screen-board .bd-item.cmp .bd-rk { --w: 40px; --fs: 14px; } }
/* ================= "?" screen: topic tabs + the "Take Lanky home" install guide (painted, storybook) ================= */
html body #screen-how .how-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 22px; }
html body #screen-how .how-tabs .btn.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 18px 6px 12px !important; font: 800 16px/1 var(--font-ui) !important; border-radius: 999px !important; }
html body #screen-how .how-tabs .btn.chip.on { background: linear-gradient(180deg, #ffe27a, #f6c844) !important; }
html body #screen-how img.hti { width: 30px; height: 30px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 0 rgba(90, 36, 56, .22)); }
html body #screen-how .how-pane { display: none; }
html body #screen-how .how-pane.on { display: block; animation: howIn .35s ease-out both; }
@keyframes howIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html body #screen-how .how-pane.on { animation: none; } }
html body #screen-how .hw-hero { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; text-align: left; padding: 16px 18px; margin: 4px 0 16px; background: linear-gradient(135deg, #fff3c9, #dcefe4); border: 3px solid #5a2438; border-radius: 30px 22px 32px 24px / 24px 32px 22px 30px; box-shadow: 0 5px 0 rgba(90, 36, 56, .85); }
html body #screen-how .hw-hero-img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(90, 36, 56, .25)); transform: rotate(-6deg); }
html body #screen-how .hw-title { display: block; font: 900 clamp(24px, 6.4vw, 32px)/1.1 var(--font-ui); color: #5a2438; margin-bottom: 4px; }
html body #screen-how .hw-hero p { margin: 0; font: 600 16px/1.4 var(--font-ui); color: #4a2f3a; }
html body #screen-how .hw-done { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 16px; font: 800 16px/1.3 var(--font-ui); color: #1d5f36; background: #dff3e4; border: 2.5px solid #3aa862; border-radius: 22px 16px 22px 16px; }
html body #screen-how .hw-done[hidden], html body #screen-how .hw-now[hidden] { display: none !important; }
html body #screen-how .hw-spk { width: 26px; height: 26px; flex: none; background: url('../assets/ui/as-sparkle.webp') center / contain no-repeat; }
html body #screen-how .hw-os { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
html body #screen-how .hw-os .btn.chip { min-height: 44px; padding: 6px 16px !important; font: 800 15px/1 var(--font-ui) !important; border-radius: 999px !important; }
html body #screen-how .hw-os .btn.chip.on { background: linear-gradient(180deg, #bfe6dc, #8fd3c0) !important; }
html body #screen-how .hw-steps { display: none; list-style: none; margin: 0; padding: 0; gap: 12px; }
html body #screen-how .hw-steps.on { display: grid; }
html body #screen-how .hw-steps li { display: grid; grid-template-columns: 52px 64px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 12px 16px 12px 12px; background: #fff8e8; border: 2.5px solid #5a2438; border-radius: 26px 20px 26px 20px / 20px 26px 20px 26px; box-shadow: 0 4px 0 rgba(90, 36, 56, .85); }
html body #screen-how .hw-steps li:nth-child(even) { background: #f3f8ee; }
html body #screen-how .hw-n { display: grid; place-items: center; width: 52px; height: 52px; font: 900 22px/1 var(--font-ui); font-style: normal; color: #5a2438; background: url('../assets/ui/mb-ffc619.webp') center / 100% 100% no-repeat; }
html body #screen-how .hw-steps li > img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(90, 36, 56, .22)); }
html body #screen-how .hw-steps li > span { font: 600 16px/1.4 var(--font-ui); color: #4a2f3a; }
html body #screen-how .hw-steps li b { color: #5a2438; font-weight: 800; }
html body #screen-how .hw-now { display: flex; margin: 18px auto 0; }
html body #screen-how .hw-tip { margin: 18px 0 0; padding: 12px 16px; text-align: left; font: 600 15px/1.45 var(--font-ui); color: #4a2f3a; background: rgba(255, 224, 150, .45); border: 2px dashed rgba(90, 36, 56, .45); border-radius: 20px 16px 20px 16px; }
html body #screen-how .hw-tip b { color: #5a2438; }
@media (max-width: 420px) {
html body #screen-how .hw-steps li { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "n t" "i t"; row-gap: 6px; }
html body #screen-how .hw-steps li .hw-n { grid-area: n; width: 44px; height: 44px; font-size: 19px; }
html body #screen-how .hw-steps li > img { grid-area: i; width: 44px; height: 44px; }
html body #screen-how .hw-steps li > span { grid-area: t; }
html body #screen-how .hw-hero { grid-template-columns: 64px minmax(0, 1fr); }
html body #screen-how .hw-hero-img { width: 64px; height: 64px; }
}
html body #screen-how .how-tabs .btn.chip.on, html body #screen-how .how-tabs .btn.chip.on span, html body #screen-how .hw-os .btn.chip.on, html body #screen-how .hw-os .btn.chip.on span { color: #5a2438 !important; text-shadow: none !important; }
html body #screen-how .icon-row, html body #screen-how .icon-row.wide { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; justify-items: stretch; }
html body #screen-how .icon-row .it { width: 100% !important; max-width: none !important; box-sizing: border-box; margin: 0 !important; }
@media (min-width: 700px) { html body #screen-how .icon-row, html body #screen-how .icon-row.wide { grid-template-columns: 1fr 1fr !important; } }
/* rank ribbons v3: one size variable drives width, height (art aspect 264:430), number size and number position, so the ribbon can never be stretched and the number stays dead-centre at every width. The size scales with the board's width. */
html body #screen-board .bd-item .bd-rk,
html body #screen-board .bd-item.r1 .bd-rk,
html body #screen-board .bd-item.r2 .bd-rk,
html body #screen-board .bd-item.r3 .bd-rk { --w: clamp(52px, 19cqw, 84px); --fs: calc(var(--w) * .34); width: var(--w) !important; height: calc(var(--w) * 1.6288) !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; font-size: var(--fs) !important; padding: calc(var(--w) * .4924 - var(--fs) * .5) 0 0 !important; background-size: 100% 100% !important; }
html body #screen-board .bd-item.r1 .bd-rk { padding: calc(var(--w) * .75 - var(--fs) * .5) 0 0 !important; }
html body #screen-board .bd-item.cmp .bd-rk { --w: clamp(36px, 11cqw, 46px); --fs: calc(var(--w) * .36); }
@container (max-width: 370px) { html body #screen-board .bd-item .bd-rk, html body #screen-board .bd-item.r1 .bd-rk { --w: clamp(48px, 18cqw, 64px); } html body #screen-board .bd-item.cmp .bd-rk { --w: clamp(36px, 11cqw, 46px); } }
/* Game Over: the full-body Lanky astronaut (the old image stopped at the waist, so he always looked cut off) */
html body #screen-over .go-links::before { background: url('../assets/results/lanky-astro-v3.webp') center bottom / contain no-repeat !important; width: clamp(92px, 28vw, 128px) !important; height: clamp(134px, 40vw, 186px) !important; margin: 10px 0 0 !important; align-self: end; justify-self: start; }
html body #screen-over .go-links { padding-bottom: 28px; }
html body #screen-over #over-btns .go-links::before { width: clamp(92px, 28vw, 128px) !important; height: clamp(134px, 40vw, 186px) !important; margin: 0 !important; translate: none !important; align-self: end !important; justify-self: start !important; }
html body #screen-over #over-btns .go-links { padding-bottom: 24px !important; }
/* the full-body astronaut is Lanky's real tall, slender astronaut art (aspect 0.57) */
html body #screen-over #over-btns .go-links::before { width: clamp(70px, 21vw, 98px) !important; height: clamp(124px, 37vw, 172px) !important; }
html body #screen-over #over-btns .go-links::before { width: clamp(84px, 25vw, 118px) !important; height: clamp(144px, 43vw, 202px) !important; }
/* tall slender Lanky astronaut, bigger; new file name so no browser/home-screen cache can show the older drawing */
html body #screen-over #over-btns .go-links::before { background-image: url('../assets/results/lanky-astro-v3.webp') !important; width: clamp(100px, 30vw, 140px) !important; height: clamp(172px, 52vw, 240px) !important; background-size: contain !important; background-position: center bottom !important; }
/* locked levels: the painted scalloped lavender medal (an older flat gradient was painting a hard square behind the padlock) */
html body .orbit .o-node.lock .o-c { background: url('../assets/ui/medal-lock.webp') center / contain no-repeat !important; background-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 4px 0 rgba(99, 36, 63, .28)); }
/* levels strip: just the medals and the finish flag. No rocket, no squiggle links between medals, no dash before the flag */
html body .orbit .o-start, html body .orbit .o-node::before, html body .orbit .o-node.lock::before, html body .orbit .o-flag::before { display: none !important; content: none !important; }
/* Dimensions tiles: icon, name and status pill all share one centre line */
html body #screen-progress .pg-tile .pgt-tx { justify-items: center !important; text-align: center !important; }
html body #screen-progress .pg-tile .pgt-tx b { text-align: center !important; }
html body #screen-progress .pg-tile .pgt-tx small { justify-self: center !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
/* no rocket marker above the current level medal */
html body .orbit .o-node.current .o-c::before, html body .orbit .o-node .o-c::before { content: none !important; display: none !important; }
/* ---- polish from desktop review ---- */
/* coin pill: sits level with the page title, never floating low at the far edge */
html body .pg-top, html body .mi-top, html body #screen-board .pg-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px; flex-wrap: nowrap; }
html body .pg-top h2, html body .mi-top h2 { margin: 0 !important; }
html body .pg-top .coin-pill, html body .mi-top .coin-pill { margin: 0 !important; align-self: center !important; flex: none; }
/* leaderboard score: never cropped; the little sparkle ornament that got cut off is gone, and the score column is as wide as its number */
html body #screen-board .bd-val b { overflow: visible !important; text-overflow: clip !important; max-width: none !important; padding-right: 4px; }
html body #screen-board .bd-val b::after, html body #screen-board .bd-val::after { display: none !important; content: none !important; }
@container (min-width: 700px) { html body #screen-board .bd-item { grid-template-columns: 90px 84px minmax(180px, 1fr) max-content auto !important; column-gap: 24px !important; } }
html body #screen-board .bd-item .bd-emo { margin-left: 8px; }
/* Mix & match: the selected "None" chip had white text on a light chip */
html body #screen-outfits .of-mix .btn.chip.on { background: linear-gradient(180deg, #ffe27a, #f6c844) !important; color: #5a2438 !important; text-shadow: none !important; }
html body #screen-outfits .of-mix .btn.chip.on * { color: #5a2438 !important; }
/* ---- new crayon logo (2:1, its own orbit swoosh baked in) ---- */
html body .logo { width: min(560px, 54vw) !important; }
html body .logo .orbit-fx { display: none !important; }
html body .load-logo { filter: drop-shadow(0 5px 0 rgba(90, 36, 56, .22)) !important; width: min(480px, 74vw); height: auto; }
html body #screen-menu .logo { width: min(190px, 52vw) !important; margin: 10px auto 0 !important; }
html body #screen-menu .menu-ui .logo { width: min(54vw, 230px, 20.5vh) !important; margin: 4px auto 0 !important; }
html body #screen-menu .menu-ui .logo { margin: 14px auto 0 !important; }
/* logo: one consistent look everywhere - a soft white highlight and a faint burgundy ground shadow. No saturation boost, no hue cycling, no pink / orange glows. */
html body .logo img, html body #screen-loading .load-logo, html body .load-logo { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 0 10px rgba(255, 255, 255, .55)) drop-shadow(0 4px 0 rgba(90, 36, 56, .2)) !important; }
html body .logo img { animation: none !important; }
html body .logo .sp, html body .logo .s1, html body .logo .s2, html body .logo .s3 { background: #fff6dc !important; }
/* share preview: no filename / size / logo note under the image */
html body #av-minfo { display: none !important; }
/* leaderboard cheer stickers: painted icons instead of emoji, plus a one-line explainer */
html body #screen-board .bd-emo .emo img { width: 72%; height: 72%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(90, 36, 56, .2)); }
html body #screen-board .bd-emo .emo { font-size: 0 !important; display: inline-grid; place-items: center; }
html body #screen-board .bd-emo .emo small { font-size: 12px !important; }
html body #screen-board li.bd-legend { list-style: none; margin: 0 0 12px; padding: 10px 14px; text-align: left; font: 600 14px/1.4 var(--font-ui); color: #4a2f3a; background: rgba(255, 224, 150, .4); border: 2px dashed rgba(90, 36, 56, .4); border-radius: 18px 14px 18px 14px; }
html body #screen-board li.bd-legend b { color: #5a2438; }
/* Avatar Studio: the long styles grid scrolls inside its own panel (with a chunky, visible scrollbar) so the page stays short and the page scrollbar is no longer a hair-thin sliver */
@media (max-width: 900px) {
html body #screen-avatar #av-panel { max-height: min(58vh, 520px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 8px; scrollbar-width: auto; scrollbar-color: #d3a07e rgba(90, 36, 56, .12); }
html body #screen-avatar #av-panel::-webkit-scrollbar { width: 12px; }
html body #screen-avatar #av-panel::-webkit-scrollbar-track { background: rgba(90, 36, 56, .10); border-radius: 999px; }
html body #screen-avatar #av-panel::-webkit-scrollbar-thumb { background: #d3a07e; border: 3px solid rgba(255, 249, 236, .9); border-radius: 999px; min-height: 60px; }
}
/* Avatar backgrounds strip: centred when it fits, scrolls (from the left edge) when it does not */
html body #screen-avatar .av-bgstrip { justify-content: flex-start !important; }
html body #screen-avatar .av-bgstrip > :first-child { margin-left: auto !important; }
html body #screen-avatar .av-bgstrip > :last-child { margin-right: auto !important; }
/* World completion percentage on the map ribbons and the preview card */
html body .m-node .m-rib .m-pct { display: block; margin-top: 2px; font: 800 0.8em/1 var(--font-ui); color: #2f7a4a; letter-spacing: 0.02em; }
html body #map-pv .mp-state small { display: block; margin-top: 6px; font-weight: 700; line-height: 1.6; color: #5a3a48; }
/* World map with twelve worlds: taller on phones held upright, wider (scrolls sideways) on landscape */
html body .wm2 { min-width: 980px !important; }
html body .wm2.wm-v { min-width: 0 !important; aspect-ratio: 9 / 24 !important; }
/* Crayon pass: banners use a hand-drawn ticket sprite (see Crayon.ticketBg) instead of CSS shapes */
html body .banner .lb { filter: none !important; animation: lbPop 0.7s cubic-bezier(.2,1.6,.4,1) both, lbWiggle 2.4s ease-in-out 0.7s infinite; transform-origin: 50% 60%; }
html body .banner .lb .lb-bg { inset: -36px -44px !important; background-color: transparent !important; background-image: none; border-radius: 0 !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; border: 0 !important; background-repeat: no-repeat !important; }
html body .banner .lb::before, html body .banner .lb::after, html body .banner .lb .lb-d { display: none !important; }
html body .banner .lb .lb-t { color: #4a2f5a !important; text-shadow: 2px 3px 0 rgba(255, 255, 255, 0.75), -1px -1px 0 rgba(255, 190, 110, 0.55); letter-spacing: 0.5px; transform: rotate(-1.6deg); }
html body .banner .lb .lb-s { color: #6a3f5a !important; transform: rotate(0.8deg); text-shadow: 1px 2px 0 rgba(255, 255, 255, 0.7); }
@keyframes lbPop { 0% { transform: scale(0.2) rotate(-14deg); opacity: 0; } 60% { transform: scale(1.14) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes lbWiggle { 0%, 100% { rotate: -1deg; } 50% { rotate: 1.2deg; } }
html body #map-pv .mp-card canvas { border-radius: 10px 6px 12px 7px; }
/* Crayon HUD: the stats pills and bars are hand-drawn sprites (Crayon.hudStyle) instead of thick vector borders */
html body #hud .hpill { background: var(--cr-pill) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; filter: none !important; }
html body #hud .score-row { background: var(--cr-score) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; filter: none !important; }
html body #hud .bar-pill .bar { background: var(--cr-bar) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; overflow: hidden; padding: 3px 4px; box-sizing: border-box; }
html body #hud .bar-pill .bar i { border-radius: 999px; }
html body #hud .cr-ico { display: inline-block; flex: none; }
html body #hud .lvchip { background: #ffd23f; box-shadow: none; transform: rotate(-1.5deg); border-radius: 999px 900px 999px 920px; }
/* hand-drawn tip card and toasts */
html body .tipcard.on, html body #toast .t, html body #toast > div { background: var(--cr-card) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; filter: none !important; }
/* the popup garland is a string of tiny hand-drawn planets, stars, moons and rockets now (see Crayon.hudStyle), not party bunting */
html body .modal-card::before, html body .panel-inner.narrow::before { height: 46px !important; background: var(--cosmo-strip) left top / auto 46px repeat-x !important; background-repeat: repeat-x !important; opacity: 1 !important; }
/* world card: a taped field note, hand-drawn stickers, a progress planet and crayon buttons */
html body #map-pv #mp-desc { background: var(--cr-note) center / 100% 100% no-repeat; padding: 26px 26px 22px; margin: 10px 4px 6px; transform: rotate(-0.8deg); font: 400 clamp(16px, 4vw, 19px)/1.35 var(--font); color: #4a2f5a; text-wrap: balance; }
html body #map-pv .mp-state { display: block; text-align: center; }
html body #map-pv .mp-stamp { display: inline-block; font: 800 20px var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: #2f8a6a; border: 4px double #2f8a6a; border-radius: 10px 14px 9px 13px; padding: 2px 14px; transform: rotate(-5deg); margin: 2px 0 6px; background: rgba(120, 220, 180, 0.14); }
html body #map-pv .mp-tag { display: inline-block; font: 800 15px var(--font-ui); color: #6a4a90; background: #efe6ff; border-radius: 12px 9px 13px 10px; padding: 3px 12px; transform: rotate(-2deg); }
html body #map-pv .mp-prog { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
html body #map-pv .mp-planet { width: 92px; height: 92px; flex: none; animation: mpBob 3.4s ease-in-out infinite; }
html body #map-pv .mp-stickers { display: flex; flex-wrap: wrap; gap: 6px 4px; justify-content: center; flex: 1 1 200px; }
html body #map-pv .mp-st { width: 66px; text-align: center; transform: rotate(var(--r, 0deg)); transition: transform 0.2s; }
html body #map-pv .mp-st img { width: 54px; height: 54px; display: block; margin: 0 auto; }
html body #map-pv .mp-st small { display: block; font: 700 11px/1.1 var(--font); color: #6a4a5a; margin-top: 1px; }
html body #map-pv .mp-st.done img { animation: mpPop 0.5s cubic-bezier(.2, 1.7, .4, 1) both; }
html body #map-pv .mp-st:not(.done) small { opacity: 0.6; }
html body #map-pv .mbtns .btn { background: var(--cr-pill) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; min-width: 120px; min-height: 54px; }
html body #map-pv .mbtns .btn.primary { background: var(--cr-pill-gold) center / 100% 100% no-repeat !important; }
@keyframes mpBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes mpPop { 0% { transform: scale(0.3) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
/* ======================= Mini-games: crayon cards, a tiny green helper called Pip, big friendly tap targets ======================= */
.mg-root { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 10px; background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.5) 0 1.6px, transparent 2.4px) 0 0 / 130px 110px, radial-gradient(circle at 70% 60%, rgba(255, 230, 150, 0.5) 0 1.4px, transparent 2.2px) 0 0 / 170px 150px, rgba(36, 26, 66, 0.72); opacity: 0; transition: opacity 0.22s; touch-action: manipulation; }
.mg-root.on { opacity: 1; }
.mg-card { position: relative; width: min(440px, 96vw); max-height: 96vh; overflow: auto; background: var(--cr-card) center / 100% 100% no-repeat; padding: 50px 20px 18px; text-align: center; color: #4a2f5a; font-family: var(--font); animation: mgIn 0.45s cubic-bezier(.2, 1.5, .4, 1) both; -webkit-overflow-scrolling: touch; }
.mg-card::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 40px; background: var(--cosmo-strip) left top / auto 40px repeat-x; pointer-events: none; }
.mg-title { margin: -4px 0 6px; }
.mg-title span { display: inline-block; background: var(--h-cloud-back) center / 100% 100% no-repeat; position: relative; padding: 0; }
.mg-title span { background: var(--h-cloud) center / 100% 100% no-repeat; padding: 10px 26px 12px; font: 800 clamp(18px, 5vw, 23px)/1.1 var(--font-ui); color: #7a1f4a; transform: rotate(-1.5deg); text-shadow: 1px 2px 0 rgba(255, 255, 255, 0.8); }
.mg-card[data-tier="3"] .mg-title span { background-image: var(--cr-pill-gold); }
.mg-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; text-align: left; }
.mg-pip { width: 66px; height: 76px; flex: none; animation: mgBob 2.2s ease-in-out infinite; }
.mg-say { flex: 1; min-height: 52px; display: flex; align-items: center; background: var(--cr-note) center / 100% 100% no-repeat; padding: 10px 16px 10px 20px; font: 400 clamp(14px, 3.8vw, 17px)/1.25 var(--font); }
.mg-say:empty, .mg-say span:empty { }
.mg-area { position: relative; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 8px 0; }
.mg-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mg-how { margin: 0; font: 400 clamp(16px, 4.2vw, 19px)/1.35 var(--font); max-width: 330px; }
.mg-rew { font: 800 14px var(--font-ui); color: #6a4a90; background: #efe6ff; padding: 4px 14px; border-radius: 12px 9px 13px 10px; transform: rotate(-1.5deg); }
.mg-go, .mg-mini { font: 800 clamp(18px, 5vw, 22px) var(--font-ui); color: #4a2f5a; background: var(--cr-pill-gold) center / 100% 100% no-repeat; border: 0; min-width: 170px; min-height: 58px; padding: 6px 26px; cursor: pointer; transition: transform 0.12s; }
.mg-go:active, .mg-mini:active { transform: scale(0.94) rotate(-2deg); }
.mg-mini { min-width: 120px; min-height: 46px; font-size: 16px; background-image: var(--cr-pill); }
.mg-mini:disabled { opacity: 0.5; }
.mg-bar { display: none; height: 22px; margin: 6px 4px 2px; background: var(--cr-bar) center / 100% 100% no-repeat; padding: 4px 6px; box-sizing: border-box; }
.mg-bar.on { display: block; }
.mg-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #52d6a0, #ffd23f); transition: width 0.1s linear; }
.mg-bar.low i { background: #ff7a5a; animation: mgPulse 0.5s infinite; }
.mg-foot { margin-top: 4px; }
.mg-skip { background: none; border: 0; font: 700 15px var(--font); color: #7a6a9a; text-decoration: underline wavy #c4b8e8; padding: 8px 14px; cursor: pointer; }
/* tiles */
.mg-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.mg-grid.g5 { grid-template-columns: repeat(3, 1fr); }
.mg-tile, .mg-dial, .mg-card .f i { width: clamp(78px, 24vw, 98px); aspect-ratio: 1; background: var(--mg-tile) center / 100% 100% no-repeat; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, filter 0.15s; }
.mg-tile.lit { background-image: var(--mg-tile-lit); transform: scale(1.14) rotate(-4deg); filter: drop-shadow(0 0 14px rgba(255, 220, 90, 0.95)); }
.mg-tile:active { transform: scale(0.93); }
.mg-sym { width: 66%; height: 66%; pointer-events: none; user-select: none; }
.mg-ci { width: 30px; height: 30px; vertical-align: middle; }
/* wires */
.mg-wires { position: relative; display: flex; justify-content: space-between; width: min(320px, 92%); padding: 6px 4px; }
.mg-wsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mg-wcol { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }
.mg-plug { width: 54px; height: 44px; border: 3.5px solid #4a2f5a; background: var(--c); border-radius: 46% 54% 50% 50% / 52% 48% 56% 44%; cursor: pointer; box-shadow: 3px 4px 0 rgba(74, 47, 90, 0.35); transition: transform 0.12s; position: relative; }
.mg-plug.l::after, .mg-plug.r::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff6e4; border: 2.5px solid #4a2f5a; }
.mg-plug.l::after { right: -7px; } .mg-plug.r::after { left: -7px; }
.mg-plug.sel { transform: scale(1.2) rotate(-5deg); filter: drop-shadow(0 0 10px #fff2a8); }
.mg-plug.done { opacity: 0.75; transform: scale(0.94); }
/* constellation */
.mg-sky { position: relative; width: 300px; max-width: 92%; aspect-ratio: 300 / 230; background: var(--mg-sky) center / 100% 100% no-repeat; }
.mg-star { position: absolute; width: 46px; height: 46px; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer; transition: transform 0.15s; }
.mg-star img { width: 100%; height: 100%; pointer-events: none; }
.mg-star b { position: absolute; left: 0; right: 0; bottom: -10px; font: 800 14px var(--font-ui); color: #fff8d0; text-shadow: 0 2px 0 #2b2a66; }
.mg-star.hit { transform: translate(-50%, -50%) scale(1.25) rotate(18deg); filter: drop-shadow(0 0 10px #ffd23f); }
/* lock */
.mg-clues { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.mg-clue { background: var(--cr-note) center / 100% 100% no-repeat; padding: 7px 22px; font: 400 16px var(--font); display: flex; align-items: center; gap: 6px; }
.mg-dials { display: flex; gap: 12px; }
.mg-dial { background-image: var(--mg-tile-teal); }
.mg-dial.turn { animation: mgTurn 0.3s; }
.mg-tries { font: 800 15px var(--font-ui); color: #6a4a90; }
/* mining */
.mg-mine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mg-hole { width: clamp(74px, 22vw, 92px); aspect-ratio: 1; background: var(--mg-hole) center / 100% 100% no-repeat; border: 0; padding: 0; position: relative; overflow: hidden; cursor: pointer; }
.mg-hole span { position: absolute; left: 14%; right: 14%; bottom: 8%; height: 70%; transform: translateY(100%); transition: transform 0.14s cubic-bezier(.2, 1.6, .4, 1); display: block; }
.mg-hole span img { width: 100%; height: 100%; }
.mg-hole.up span { transform: translateY(0); } .mg-hole.hit { animation: mgPop 0.2s; }
/* match cards */
.mg-cards { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); perspective: 700px; }
.mg-cards.c8, .mg-cards.c10 { grid-template-columns: repeat(4, 1fr); } .mg-cards.c10 { grid-template-columns: repeat(5, 1fr); }
.mg-card .f { }
.mg-cards .mg-card { width: clamp(58px, 17vw, 78px); aspect-ratio: 1; background: none; border: 0; padding: 0; position: relative; cursor: pointer; overflow: visible; animation: none; max-height: none; text-align: center; }
.mg-cards .mg-card::before { display: none; }
.mg-cards .mg-card .f { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.4s; }
.mg-cards .mg-card.up .f, .mg-cards .mg-card.done .f { transform: rotateY(180deg); }
.mg-cards .mg-card .f i { position: absolute; inset: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mg-cards .mg-card .back { background-image: var(--mg-tile-dark); } .mg-cards .mg-card .back::after { content: "\2605"; color: #ffd23f; font-size: 26px; }
.mg-cards .mg-card .front { transform: rotateY(180deg); } .mg-cards .mg-card.done .front { background-image: var(--mg-tile-teal); }
/* code */
.mg-key { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mg-keyi { background: var(--cr-note) center / 100% 100% no-repeat; padding: 6px 14px; display: flex; align-items: center; gap: 4px; font: 800 18px var(--font-ui); }
.mg-msg { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mg-m { width: 48px; height: 48px; background: var(--mg-tile) center / 100% 100% no-repeat; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; }
.mg-m .mg-ci { width: 34px; height: 34px; } .mg-m.cur { background-image: var(--mg-tile-lit); transform: scale(1.14) rotate(-3deg); } .mg-m.ok { background-image: var(--mg-tile-teal); opacity: 0.8; }
.mg-pad { display: flex; gap: 10px; } .mg-num { width: clamp(58px, 18vw, 72px); aspect-ratio: 1; background: var(--mg-tile) center / 100% 100% no-repeat; border: 0; font: 800 30px var(--font-ui); color: #4a2f5a; cursor: pointer; } .mg-num:active { transform: scale(0.9); }
/* escape */
.mg-path { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mg-ar { width: 44px; height: 44px; display: block; opacity: 0.85; transition: transform 0.15s; } .mg-ar i, .mg-d i { display: block; width: 100%; height: 100%; background: var(--mg-arrow) center / contain no-repeat; }
.mg-ar.up i, .mg-d.up i { transform: rotate(-90deg); } .mg-ar.down i, .mg-d.down i { transform: rotate(90deg); } .mg-ar.left i, .mg-d.left i { transform: rotate(180deg); }
.mg-ar.cur { transform: scale(1.3); opacity: 1; } .mg-ar.cur i { background-image: var(--mg-arrow-lit); filter: drop-shadow(0 0 8px #ffd23f); } .mg-ar.ok { opacity: 0.25; }
.mg-dpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 210px; }
.mg-d { width: 64px; height: 64px; background: var(--mg-tile) center / 100% 100% no-repeat; border: 0; padding: 12px; cursor: pointer; } .mg-d:active { transform: scale(0.9); background-image: var(--mg-tile-lit); }
.mg-d.up { grid-column: 2; grid-row: 1; } .mg-d.left { grid-column: 1; grid-row: 2; } .mg-d.down { grid-column: 2; grid-row: 2; } .mg-d.right { grid-column: 3; grid-row: 2; }
/* results */
.mg-win { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 2px; width: 100%; }
.mg-coin { font: 900 clamp(44px, 14vw, 62px)/1 var(--font-ui); color: #ffc619; -webkit-text-stroke: 4px #4a2f5a; paint-order: stroke fill; text-shadow: 3px 4px 0 rgba(74, 47, 90, 0.4); animation: mgCoin 0.7s cubic-bezier(.2, 1.8, .4, 1) both; transform: rotate(-3deg); }
.mg-sub { font: 400 17px var(--font); } .mg-oops { font: 900 38px var(--font-ui); color: #7a1f4a; transform: rotate(-3deg); }
.mg-streak { font: 800 17px var(--font-ui); color: #fff; background: #ff8a4a; border: 3px solid #4a2f5a; border-radius: 14px 10px 15px 11px; padding: 4px 14px; transform: rotate(-2deg); animation: mgPop 0.5s 0.3s both; } .mg-streak.soft { background: #efe6ff; color: #6a4a90; border-color: #bda8e8; }
.mg-life { font: 800 17px var(--font-ui); color: #b0301a; background: #ffe0d8; border-radius: 12px; padding: 4px 14px; animation: mgPop 0.5s 0.5s both; } .mg-journal { font: 700 14px var(--font); color: #2f7a8a; background: #dff6f2; border-radius: 12px; padding: 3px 12px; }
.mg-confetti { position: absolute; top: -6px; width: 9px; height: 14px; border-radius: 3px; animation: mgFall 1.6s ease-in both; pointer-events: none; }
.mg-shake { animation: mgShake 0.35s; }
/* the in-run prompt */
.mg-prompt { position: fixed; left: 50%; bottom: calc(168px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 40; display: none; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.2s, transform 0.25s cubic-bezier(.2, 1.6, .4, 1); }
.mg-prompt.on { display: flex; opacity: 1; transform: translate(-50%, 0); }
.mg-try { display: flex; align-items: center; gap: 8px; max-width: min(78vw, 340px); background: var(--cr-pill-gold) center / 100% 100% no-repeat; border: 0; padding: 14px 24px 16px 18px; font: 800 clamp(14px, 4vw, 17px)/1.1 var(--font-ui); color: #4a2f5a; cursor: pointer; animation: mgBob 1.4s ease-in-out infinite; }
.mg-try[data-tier="3"] { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'/%3E"), var(--cr-pill-gold); filter: hue-rotate(-18deg) saturate(1.25); }
.mg-try i { width: 26px; height: 26px; flex: none; background: var(--mg-arrow) center / contain no-repeat; display: none; } .mg-try span { text-align: left; }
.mg-try::before { content: "?"; display: inline-flex; width: 26px; height: 26px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: #fff6e4; border: 2.5px solid #4a2f5a; font: 900 17px var(--font-ui); }
.mg-try[data-tier="3"]::before { content: "!"; background: #ffb8a0; color: #b0301a; }
.mg-no { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid #4a2f5a; background: #fff6e4; font: 800 20px/1 var(--font-ui); color: #6a4a90; cursor: pointer; }
@keyframes mgIn { 0% { transform: scale(0.6) rotate(-4deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes mgBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes mgPop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes mgCoin { 0% { transform: scale(0.2) rotate(-30deg); } 100% { transform: scale(1) rotate(-3deg); } }
@keyframes mgShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px) rotate(-1deg); } 50% { transform: translateX(8px) rotate(1deg); } 80% { transform: translateX(-5px); } }
@keyframes mgTurn { 0% { transform: rotateX(90deg) scale(0.8); } 100% { transform: none; } }
@keyframes mgFall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(260px) rotate(300deg); opacity: 0; } }
@keyframes mgPulse { 50% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .mg-pip, .mg-try, .mg-confetti { animation: none; } }
.mg-prev { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 62px; font: 900 24px var(--font-ui); color: #6a4a90; transform: rotate(-1.5deg); }
.mg-pv { width: 54px; height: 54px; animation: mgBob 2s ease-in-out infinite; } .mg-pv:nth-of-type(2) { animation-delay: 0.3s; } .mg-pv:nth-of-type(3) { animation-delay: 0.6s; }
.pv-plug { display: inline-block; width: 38px; height: 30px; border: 3px solid #4a2f5a; border-radius: 46% 54% 50% 50%; background: var(--c); } .mg-prev s { display: inline-block; width: 70px; height: 5px; border-radius: 4px; background: #ffd23f; border-top: 2px solid #4a2f5a; transform: rotate(-4deg); }
.mg-prev u { display: inline-block; width: 22px; height: 0; border-top: 4px dashed #ffd23f; }
.pv-dial { width: 62px; height: 62px; background: var(--mg-tile-teal) center / 100% 100% no-repeat; display: flex; align-items: center; justify-content: center; } .pv-dial .mg-pv { width: 40px; height: 40px; animation: none; }
.pv-card { width: 52px; height: 52px; background: var(--mg-tile-dark) center / 100% 100% no-repeat; color: #ffd23f; display: flex; align-items: center; justify-content: center; font-size: 22px; } .pv-card.up { background-image: var(--mg-tile); } .pv-card .mg-pv { width: 34px; height: 34px; animation: none; }
.pv-ar { display: inline-block; font-size: 38px; color: #ffd23f; -webkit-text-stroke: 2.5px #4a2f5a; paint-order: stroke fill; } .pv-ar.d { transform: rotate(90deg); } .pv-ar.u { transform: rotate(-90deg); }
/* 9-slice crayon frames: corners stay crisp, edges stretch thin, so tall cards do not get fat empty bands */
.mg-card { background: none !important; border: 22px solid transparent; border-image: var(--cr-card) 31 fill / 22px stretch; padding: 34px 6px 4px; }
.mg-card::before { left: -6px; right: -6px; top: -14px; }
.mg-say, .mg-clue, .mg-keyi, html body #map-pv #mp-desc { background: none !important; border: 18px solid transparent; border-image: var(--cr-note) 28 fill / 18px stretch; }
.mg-say { padding: 0 6px; min-height: 44px; } .mg-clue { padding: 0 6px; } .mg-keyi { padding: 0 4px; border-width: 12px; border-image-width: 12px; }
html body #map-pv #mp-desc { padding: 4px 8px; margin: 10px 2px 6px; }
.mg-title span { display: inline-block; max-width: 100%; }
.mg-card { overflow-x: hidden; } .mg-card::before { left: 0 !important; right: 0 !important; }
/* painted headings are crayon signboards now: no extra CSS plate behind them */
html body .lt-board::before, html body .lt-board::after { display: none !important; }
html body .lt-board .lt-img { filter: drop-shadow(0 3px 0 rgba(74, 47, 90, 0.18)); }
/* ---- mini-game accessibility: visible focus, 44px targets, readable contrast, reduced motion, relaxed mode ---- */
.mg-root button:focus-visible, .mg-root input:focus-visible { outline: 4px dashed #ffb000; outline-offset: 3px; }
.mg-prompt button:focus-visible { outline: 4px dashed #ffb000; outline-offset: 3px; }
.mg-no { width: 46px; height: 46px; } .mg-skip { min-height: 44px; min-width: 88px; color: #4a3a6a; font-size: 16px; }
.mg-relax { display: flex; align-items: center; gap: 10px; font: 700 15px/1.2 var(--font); color: #4a2f5a; cursor: pointer; padding: 6px 4px; min-height: 44px; text-align: left; }
.mg-relax input { width: 24px; height: 24px; flex: none; accent-color: #52a88a; }
.mg-plug .g { font: 900 20px/1 var(--font-ui); color: #4a2f5a; text-shadow: 0 0 3px #fff, 0 0 3px #fff; pointer-events: none; display: flex; align-items: center; justify-content: center; height: 100%; }
.mg-tries, .mg-sub { color: #3f2a5a; }
.mg-pip.hop { animation: mgHop 0.6s cubic-bezier(.2, 1.6, .4, 1); }
.mg-puff { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; z-index: 5; pointer-events: none; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: mgPuff 0.65s ease-out both; }
@keyframes mgPuff { 0% { transform: translate(0, 0) scale(0.4) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.6) rotate(200deg); opacity: 0; } }
@keyframes mgHop { 0% { transform: translateY(0); } 35% { transform: translateY(-16px) rotate(-8deg); } 70% { transform: translateY(0) rotate(6deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mg-card, .mg-pip, .mg-try, .mg-pv, .mg-coin, .mg-streak, .mg-life, .mg-confetti, .mg-puff, .mg-shake, .mg-dial.turn, .mg-pip.hop { animation: none !important; } .mg-cards .mg-card .f, .mg-tile, .mg-hole span, .mg-m { transition: none !important; } .mg-root { transition: none; } }
@media (forced-colors: active) { .mg-card, .mg-tile, .mg-plug, .mg-hole, .mg-num, .mg-d, .mg-go { border: 2px solid CanvasText; } }
/* ---- eight crayon menu tiles: two rows of four, bigger and bouncier ---- */
.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; row-gap: clamp(6px, 2vw, 16px) !important; }
.tile-art.ta-patches { --gc: #ff9a3d; } .tile-art.ta-discovery { --gc: #ffd23f; } .tile-art.ta-companions { --gc: #52d6c0; }
.tile-art.ta-outfits { --gc: #ff9a3d; } .tile-art.ta-ranks { --gc: #4aa8ff; }
.tiles .btn.tile.tile-art { aspect-ratio: 1 / 1.0; }
.tile-art .ta-img { filter: drop-shadow(0 3px 0 rgba(42, 24, 80, 0.45)) drop-shadow(0 7px 8px rgba(42, 24, 80, 0.25)); }
.tile-art:hover .ta-img, .tile-art:focus-visible .ta-img { filter: drop-shadow(0 4px 0 rgba(42, 24, 80, 0.55)) drop-shadow(0 0 12px var(--gc)) saturate(1.15); }
.tile-art:nth-child(6) .ta-idle { animation-delay: -3.6s; } .tile-art:nth-child(7) .ta-idle { animation-delay: -4.2s; } .tile-art:nth-child(8) .ta-idle { animation-delay: -1.3s; }
.tile-art .ta-wrap { animation: taWiggleIn 0.7s cubic-bezier(.2, 1.6, .4, 1) backwards; } .tile-art:nth-child(2) .ta-wrap { animation-delay: .06s; } .tile-art:nth-child(3) .ta-wrap { animation-delay: .12s; } .tile-art:nth-child(4) .ta-wrap { animation-delay: .18s; } .tile-art:nth-child(5) .ta-wrap { animation-delay: .24s; } .tile-art:nth-child(6) .ta-wrap { animation-delay: .3s; } .tile-art:nth-child(7) .ta-wrap { animation-delay: .36s; } .tile-art:nth-child(8) .ta-wrap { animation-delay: .42s; }
@keyframes taWiggleIn { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: none; } }
/* ---- Patches / Companions / Discoveries popups: big, bouncy, legible ---- */
.pt-root, .cp-root, .un-root { animation: popBg .25s ease-out both; }
.pt-card, .cp-card, .un-card { animation: popCard .55s cubic-bezier(.2, 1.5, .4, 1) both; color: #231445 !important; }
@keyframes popBg { from { background-color: rgba(20, 14, 36, 0); } }
@keyframes popCard { 0% { transform: translateY(40px) scale(.7) rotate(-3deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pop-ico { display: block; width: min(210px, 52%); margin: -6px auto 0; filter: drop-shadow(0 4px 0 rgba(42, 24, 80, .35)); animation: icoBob 3.2s ease-in-out infinite; }
@keyframes icoBob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
.pt-h, .cp-h, .un-h { text-align: center !important; margin: 2px 40px 6px !important; font: 400 clamp(30px, 8vw, 42px)/1.05 var(--font-title) !important; color: #ffd23f !important; -webkit-text-stroke: 7px #2a1850; paint-order: stroke fill; text-shadow: 0 4px 0 #2a1850, 0 0 18px rgba(255, 210, 63, .45); letter-spacing: .01em; transform: rotate(-1.5deg); }
.pt-sub, .cp-sub, .un-sub { text-align: center; font: 700 16px/1.3 var(--font-ui) !important; color: #3a2468 !important; opacity: 1 !important; }
.pt-next { font: 800 16px/1.3 var(--font-ui) !important; color: #2a1850; background: #fff3c4 !important; border: 3px solid #2a1850 !important; border-radius: 14px !important; text-align: center; box-shadow: 0 3px 0 rgba(42, 24, 80, .3); }
.pt-grid { gap: 12px !important; }
.pt-item { background: rgba(255, 255, 255, .55) !important; border: 3px solid #2a1850 !important; border-radius: 16px !important; padding: 10px 6px 8px !important; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 4px 0 rgba(42, 24, 80, .25); }
.pt-item:hover, .pt-item:focus-visible { transform: translateY(-4px) rotate(-1.5deg) scale(1.04); } .pt-item:active { transform: scale(.96); }
.pt-item.done { background: #fff3c4 !important; box-shadow: 0 4px 0 #e0a520, 0 0 0 3px #ffd23f; animation: taFloat 4.6s ease-in-out infinite; }
.pt-name { font: 800 15px/1.15 var(--font-ui) !important; color: #231445; }
.pt-seals i { width: 14px !important; height: 14px !important; border-color: #2a1850 !important; } .pt-seals i.on { background: #ffd23f !important; border-color: #2a1850 !important; box-shadow: 0 0 6px #ffd23f; }
.pt-detail li { font: 700 17px var(--font-ui) !important; color: #231445; opacity: .85 !important; } .pt-detail li.on { opacity: 1 !important; } .pt-detail li.on i { background: #ffd23f !important; border-color: #2a1850 !important; } .pt-detail h3 { font: 400 30px var(--font-title) !important; color: #e8483a !important; -webkit-text-stroke: 4px #2a1850; paint-order: stroke fill; }
.pt-detail p { font: 700 16px var(--font-ui); color: #3a2468; }
.pt-x, .cp-x, .un-x { background: #ffd23f !important; border-color: #2a1850 !important; color: #2a1850 !important; font-weight: 900 !important; box-shadow: 0 3px 0 rgba(42, 24, 80, .4); } .pt-x:active, .cp-x:active, .un-x:active { transform: scale(.9); }
.cp-item { background: rgba(255, 255, 255, .6) !important; border: 3px solid #2a1850 !important; border-radius: 16px !important; box-shadow: 0 4px 0 rgba(42, 24, 80, .25); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); } .cp-item:hover { transform: translateY(-3px) rotate(1deg); } .cp-item.on { background: #fff3c4 !important; box-shadow: 0 4px 0 #e0a520, 0 0 0 4px #ffd23f !important; }
.cp-item b { font: 900 18px var(--font-ui) !important; color: #231445; } .cp-item small { font: 700 13.5px/1.3 var(--font-ui) !important; color: #3a2468; } .cp-item em { color: #e8483a !important; font-weight: 900 !important; }
.cp-item img { animation: icoBob 3s ease-in-out infinite; }
.un-ent { background: rgba(255, 255, 255, .6) !important; border: 3px solid #2a1850 !important; border-radius: 14px !important; box-shadow: 0 4px 0 rgba(42, 24, 80, .25); } .un-ent b { font: 900 16px var(--font-ui) !important; color: #231445; } .un-ent small { font: 700 13.5px/1.3 var(--font-ui) !important; color: #3a2468; }
.un-tot { color: #e8483a; -webkit-text-stroke: 0; font: 400 44px var(--font-title) !important; text-shadow: 0 3px 0 #2a1850; } .un-tot small { color: #3a2468; font: 800 13px var(--font-ui) !important; } .un-next { font: 800 16px var(--font-ui) !important; color: #231445; } .un-me { font: 700 14px var(--font-ui) !important; color: #3a2468; }
.un-bar { height: 20px !important; border-color: #2a1850 !important; border-radius: 12px !important; } .un-bar i { background: repeating-linear-gradient(45deg, #ff9a3d 0 10px, #ffd23f 10px 20px) !important; }
.un-share { background: #ffd23f !important; border-color: #2a1850 !important; font-weight: 900 !important; box-shadow: 0 4px 0 #2a1850; } .un-share:active { transform: translateY(3px); box-shadow: 0 1px 0 #2a1850; }
@media (prefers-reduced-motion: reduce) { .pt-card, .cp-card, .un-card, .pop-ico, .cp-item img, .pt-item.done { animation: none !important; } }
/* ---- the older panels and pop-ups share the aged astronomy-plate frame ---- */
.panel-inner.narrow, .modal-card, #pg-modal-card { background: var(--lo-plate) center / 100% 100% no-repeat, #f1e5c6 !important; border: 0 !important; border-radius: 6px !important; box-shadow: 0 8px 0 rgba(20, 24, 50, .38) !important; color: #1f2b52; }
.panel h2 { color: #8a1f2e; } .panel h3, .modal-card h3 { color: #1f2b52; }
.panel-actions .btn.small { border: 3px solid #1f2b52; background: #fff3c4; color: #1f2b52; font-weight: 800; box-shadow: 0 3px 0 rgba(31, 43, 82, .4); }
.mg-card::after { display: none !important; }
/* ---- accessibility: puzzle footer controls ---- */
.mg-card { padding-bottom: 30px !important; }
.mg-card .mg-skip { display: block; margin: 12px auto 4px !important; min-height: 48px; min-width: 120px; padding: 10px 22px !important; background: #fff3c4 !important; color: #1f2b52 !important; border: 3px solid #1f2b52 !important; border-radius: 14px !important; font: 900 18px var(--font-ui) !important; letter-spacing: 0; box-shadow: 0 4px 0 rgba(31, 43, 82, .45); text-shadow: none !important; opacity: 1 !important; position: relative; z-index: 2; }
.mg-card .mg-skip:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(31, 43, 82, .45); }
.mg-card .mg-skip:focus-visible, .mg-card .mg-go:focus-visible { outline: 4px dashed #e8483a; outline-offset: 3px; }
/* ---- every title is a crayon signboard now ---- */
.lt-img { max-width: 100%; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 3px 0 rgba(42, 24, 80, .25)); }
.pt-h.lt-board, .cp-h.lt-board, .un-h.lt-board, .rp h3.lt-board, .pt-detail h3.lt-board, .mg-title span.lt-board { background: none !important; padding: 0 !important; margin-left: auto !important; margin-right: auto !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; transform: none !important; box-shadow: none !important; max-width: 100%; }
.pt-h.lt-board, .cp-h.lt-board, .un-h.lt-board { width: min(360px, 92%); }
.mg-title span.lt-board { display: block; width: min(340px, 94%); } .mg-title span.lt-board::before, .mg-title span.lt-board::after { display: none !important; }
.rp h3.lt-board { width: min(300px, 90%); margin-bottom: 8px; } .pt-detail h3.lt-board { width: min(300px, 90%); }
/* "Not now" wears the crayon pill like every other button */
.mg-card .mg-skip { background: var(--cr-pill) center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; min-width: 150px; min-height: 54px; padding: 12px 28px !important; color: #10204a !important; font: 900 19px var(--font-ui) !important; filter: drop-shadow(0 4px 0 rgba(16, 32, 74, .4)); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.mg-card .mg-skip:hover { transform: rotate(-2deg) scale(1.05); } .mg-card .mg-skip:active { transform: translateY(3px) scale(.97); filter: drop-shadow(0 1px 0 rgba(16, 32, 74, .4)); }
.mg-card .mg-skip:focus-visible { outline: 4px dashed #e8483a; outline-offset: 4px; }
/* ===== ONE typeface for every word in the game, chalky and even ===== */
:root { --font-ui: "Fredoka", "Trebuchet MS", system-ui, sans-serif; }
:where(button, input, select, textarea, label, p, li, td, th, small, span, em, b, strong, a, div, dt, dd):not(#hud *):not(.go-score *):not(.lt-h *) { font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif !important; }
body { -webkit-font-smoothing: antialiased; }
/* ===== baby-bright-blue close buttons, identical everywhere ===== */
.pt-x, .cp-x, .un-x, .mg-no { position: absolute !important; right: 10px !important; top: 8px !important; width: 48px !important; height: 48px !important; min-width: 48px; border-radius: 50% !important; padding: 0 !important; background: radial-gradient(circle at 35% 30%, #b9ecff 0%, #5fc8ff 55%, #2fa8f0 100%) !important; border: 4px solid #2a1850 !important; color: #fff !important; font: 900 30px/1 "Fredoka", sans-serif !important; text-shadow: 0 2px 0 #2a1850, 0 0 0 #2a1850; -webkit-text-stroke: 1.5px #2a1850; paint-order: stroke fill; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 0 #1a1038, 0 0 0 2px rgba(255, 255, 255, .55) inset; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); z-index: 5; }
.pt-x:hover, .cp-x:hover, .un-x:hover, .mg-no:hover { transform: rotate(8deg) scale(1.1); } .pt-x:active, .cp-x:active, .un-x:active, .mg-no:active { transform: translateY(3px) scale(.94); box-shadow: 0 1px 0 #1a1038; }
.pt-x:focus-visible, .cp-x:focus-visible, .un-x:focus-visible, .mg-no:focus-visible { outline: 4px dashed #e8483a; outline-offset: 3px; }
/* ===== subtitles are crayon notes, never plain text ===== */
.pt-sub, .cp-sub, .un-sub, .pt-next, .un-next, .mg-how, .pt-detail p, .rp-next, .bk-sub, .of-desc { background: var(--cr-note) center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 24px 18px !important; margin: 8px 4px !important; color: #1f2b52 !important; font-weight: 800 !important; line-height: 1.3 !important; text-shadow: 0.6px 0.6px 0 rgba(255, 250, 232, .7); filter: drop-shadow(0 3px 0 rgba(42, 24, 80, .22)); transform: rotate(-.7deg); }
.un-next, .pt-next { transform: rotate(.6deg); }
.lb-s, #continue-sub, #daily-sub, .pm-t small, .pd-t small, .go-chip small, .comm-chip { color: #10204a; font-weight: 900 !important; letter-spacing: .02em; text-shadow: 0.7px 0.7px 0 rgba(255, 250, 232, .85), 0 0 1px rgba(255, 250, 232, .7); }
.lb-s::before, #continue-sub::before { content: "\2726 "; color: #ff8a2a; } .lb-s::after { content: " \2726"; color: #ff8a2a; }
.cp-item small, .un-ent small, .pt-name, .cp-sub { text-shadow: 0.5px 0.5px 0 rgba(255, 250, 232, .6); }
/* ===== companion cards: vivid, each tinted by its creature ===== */
.cp-item { background: linear-gradient(135deg, color-mix(in srgb, var(--c, #ffd23f) 45%, #fff), #fff 78%) !important; }
.cp-item.on { box-shadow: 0 4px 0 #2a1850, 0 0 0 4px #ffd23f !important; }
.cp-item em { display: inline-block; margin-top: 4px; background: #e8483a; color: #fff !important; border-radius: 10px; padding: 2px 8px; transform: rotate(-3deg); -webkit-text-stroke: 0; font-size: 11px; }
.cp-item img { width: 72px !important; height: 72px !important; filter: drop-shadow(0 3px 0 rgba(42, 24, 80, .35)); }
.cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .cp-item { min-width: 0; overflow: hidden; } .cp-item > span { min-width: 0; overflow-wrap: anywhere; }
.cp-item img { width: 56px !important; height: 56px !important; } .cp-item b { font-size: 16px !important; }
@media (max-width: 430px) { .cp-item { flex-direction: column; text-align: center !important; } }
/* ===== one spacing + alignment system for every full-screen panel ===== */
.panel-inner { padding: calc(20px + var(--sat)) calc(16px + var(--sar)) calc(24px + var(--sab)) calc(16px + var(--sal, 0px)) !important; }
.panel .pg-top, .panel > .panel-inner > .pg-top { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 16px !important; text-align: center; }
.panel h2, .panel h2.lt-h { margin: 0 auto 14px !important; text-align: center !important; display: block; }
.panel .pg-top h2 { margin: 0 !important; }
.panel .coin-pill, .panel .pg-top .coin-pill { margin: 0 auto !important; align-self: center; }
.panel-inner > p, .panel-inner > .sub, .panel p.sub { text-align: center; max-width: 560px; margin-left: auto; margin-right: auto; }
.panel-actions { gap: 12px !important; margin-top: 20px !important; justify-content: center !important; }
.panel-actions .btn { min-width: 112px; min-height: 48px; }
.panel h3 { margin: 20px 0 10px !important; text-align: center; }
@media (max-width: 520px) { .panel-inner { padding-left: 12px !important; padding-right: 12px !important; } .panel-actions .btn { min-width: 0; flex: 1 1 40%; } }
/* ===== the leaderboard cheer hint, and every other hint box, is a wobbly crayon sticky note ===== */
.bd-legend, .bd-note, .bk-note, .mix-note, .pg-ach-note, .hint:not(.fadehint) { list-style: none; background: var(--cr-note) center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; padding: 20px 28px 22px !important; margin: 14px auto !important; max-width: 560px; color: #1f2b52 !important; font-weight: 800 !important; line-height: 1.35 !important; text-shadow: 0.6px 0.6px 0 rgba(255, 250, 232, .75); filter: drop-shadow(0 4px 0 rgba(42, 24, 80, .25)); transform: rotate(-1.2deg); position: relative; }
.bd-legend::before { content: "\1F44F \2B50 \1F680"; position: absolute; top: -16px; right: 18px; font-size: 26px; letter-spacing: 4px; transform: rotate(8deg); filter: drop-shadow(0 2px 0 rgba(42, 24, 80, .3)); animation: taFloat 3.6s ease-in-out infinite; }
.bd-legend b { display: inline-block; color: #e8483a; font: 900 20px "Fredoka", sans-serif; transform: rotate(-2deg); -webkit-text-stroke: 0; text-shadow: 1px 1px 0 #fff3c4, 2px 2px 0 rgba(42, 24, 80, .25); margin-right: 4px; }
/* ===== cheer-a-racer stickers: a tidy crayon row inside the note, not floating emoji ===== */
.bd-legend::before { content: "" !important; position: absolute !important; top: -24px !important; right: 20px !important; width: 150px; height: 46px; background: var(--cheer-strip) center / contain no-repeat !important; font-size: 0 !important; letter-spacing: 0; transform: rotate(4deg) !important; filter: drop-shadow(0 3px 0 rgba(42, 24, 80, .3)) !important; animation: taFloat 3.6s ease-in-out infinite; }
/* ===== the racing-name hello tag ===== */
.bd-name { margin: 10px auto 16px; max-width: 560px; }
.bd-tag { display: block !important; width: min(260px, 100%); margin: 0 auto 10px !important; padding: 0 0 8px; text-align: center; background: #fff8e0; border: 3px solid #10204a; border-radius: 14px; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 5px 0 rgba(16, 32, 74, .35); font-family: "Fredoka", sans-serif; position: relative; }
.bd-tag b { display: block; background: #e8483a; color: #fff; font: 400 26px/1.2 var(--font-title); letter-spacing: .08em; padding: 6px 0 4px; -webkit-text-stroke: 1.5px #10204a; paint-order: stroke fill; }
.bd-tag span { display: block; margin-top: 6px; font: 800 14px "Fredoka"; color: #10204a; letter-spacing: .04em; }
.bd-tag::before { content: ""; position: absolute; left: 50%; top: 5px; width: 36px; height: 6px; margin-left: -18px; border-radius: 4px; background: rgba(16, 32, 74, .45); }
.bd-name .bd-row { display: flex; gap: 10px; align-items: center; justify-content: center; }
.bd-name .pg-in { flex: 1; max-width: 300px; text-align: center; font: 900 22px "Fredoka" !important; color: #10204a; border: 3px dashed #10204a !important; border-radius: 12px !important; background: #fffdf2 !important; min-height: 52px; }
.bd-name .btn.small { background: #ffc21a !important; border: 3px solid #10204a !important; color: #10204a; font: 900 16px "Fredoka" !important; min-height: 52px; box-shadow: 0 4px 0 #10204a; transition: transform .15s cubic-bezier(.34, 1.56, .64, 1); } .bd-name .btn.small:hover { transform: rotate(-2deg) scale(1.05); } .bd-name .btn.small:active { transform: translateY(3px); box-shadow: 0 1px 0 #10204a; }
/* ===== WORLD MAP: a vintage star chart that comes alive ===== */
.wm2 { background: radial-gradient(circle at 18% 22%, rgba(255, 210, 63, .22) 0 3%, transparent 4%), radial-gradient(circle at 82% 70%, rgba(122, 240, 200, .2) 0 3%, transparent 4%), radial-gradient(ellipse at 50% 50%, rgba(31, 111, 184, .55), transparent 70%), #0f1b4d url("../assets/map/map-bg.webp") center / cover no-repeat !important; border: 5px solid #10204a !important; border-radius: 10px !important; box-shadow: inset 0 0 0 6px #f1e5c6, inset 0 0 0 9px #10204a, 0 10px 0 rgba(16, 32, 74, .45) !important; }
.wm2::before { content: ""; position: absolute; left: 1.5%; bottom: 2%; width: 15%; aspect-ratio: 1.2; background: url("assets/menu/icons/patches-c14.webp") center / contain no-repeat; animation: icoBob 4s ease-in-out infinite; pointer-events: none; z-index: 0; filter: drop-shadow(0 3px 0 rgba(16, 32, 74, .5)); }
.wm2::after { content: ""; position: absolute; right: 1.5%; top: 2%; width: 14%; aspect-ratio: 1.2; background: url("assets/menu/icons/discovery-c14.webp") center / contain no-repeat; animation: icoBob 5s ease-in-out infinite reverse; pointer-events: none; z-index: 0; filter: drop-shadow(0 3px 0 rgba(16, 32, 74, .5)); }
.wm-trail .seg-o { stroke: #10204a !important; }
.wm-trail .seg.lit { stroke: #ffc21a !important; stroke-dasharray: 1 14; stroke-width: 11px !important; filter: drop-shadow(0 0 7px rgba(255, 194, 26, .9)) !important; animation: trailDash 1.6s linear infinite; }
.wm-trail .seg.dim { stroke: #5f7fb8 !important; stroke-dasharray: 1 12; opacity: .75 !important; }
@keyframes trailDash { to { stroke-dashoffset: -30; } }
.m-node .m-p { animation: icoBob 3.6s ease-in-out infinite; filter: drop-shadow(0 4px 0 rgba(16, 32, 74, .45)); } .m-node:nth-of-type(even) .m-p { animation-delay: -1.4s; animation-direction: reverse; }
.m-node.lock .m-p { filter: grayscale(.8) brightness(.8) drop-shadow(0 4px 0 rgba(16, 32, 74, .4)); animation: none; }
.m-node .m-rib { background: #fff3c4 !important; border: 3px solid #10204a !important; border-radius: 12px !important; color: #10204a !important; font: 900 13px/1.1 "Fredoka", sans-serif !important; box-shadow: 0 3px 0 rgba(16, 32, 74, .4); padding: 3px 8px 4px !important; transform: rotate(-2deg); text-shadow: none !important; }
.m-node:nth-of-type(even) .m-rib { transform: rotate(2deg); }
.m-node .m-rib em { display: block; font: 800 10px "Fredoka" !important; color: #e8483a; letter-spacing: .08em; text-transform: uppercase; font-style: normal; }
.m-node.done .m-rib { background: #d9f6b8 !important; } .m-node.current .m-rib { background: #ffd23f !important; box-shadow: 0 3px 0 rgba(16, 32, 74, .4), 0 0 14px #ffd23f; }
.m-here { animation: icoBob 1.4s ease-in-out infinite !important; } .m-here b { background: #e8483a !important; color: #fff !important; border: 3px solid #10204a !important; border-radius: 12px !important; font: 900 12px "Fredoka" !important; padding: 2px 8px !important; }
.lede.hop { background: var(--cr-note) center / 100% 100% no-repeat !important; padding: 18px 26px 20px !important; max-width: 560px; margin: 0 auto 16px !important; color: #10204a !important; font-weight: 800 !important; filter: drop-shadow(0 4px 0 rgba(42, 24, 80, .25)); transform: rotate(-.8deg); }
@media (prefers-reduced-motion: reduce) { .wm2::before, .wm2::after, .m-node .m-p, .m-here, .wm-trail .seg.lit, .bd-legend::before { animation: none !important; } }
/* ===== mini-game pieces: bouncy, vivid, never purple ===== */
.mg-card .mg-tile, .mg-card .mg-hole, .mg-card .mg-plug, .mg-card .mg-num, .mg-card .mg-d { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), filter .18s; }
.mg-card .mg-tile:hover, .mg-card .mg-hole:hover, .mg-card .mg-plug:hover, .mg-card .mg-num:hover { transform: translateY(-3px) rotate(-2deg) scale(1.06); filter: drop-shadow(0 0 8px #ffd23f); }
.mg-card .mg-tile:active, .mg-card .mg-hole:active, .mg-card .mg-plug:active { transform: scale(.94); }
.mg-card .mg-bar i { background: repeating-linear-gradient(45deg, #ff8a2a 0 10px, #ffd23f 10px 20px) !important; }
.mg-card .mg-bar { border: 3px solid #10204a !important; border-radius: 12px !important; }
.lede.hop { background: none !important; filter: none !important; transform: none !important; padding: revert !important; max-width: none !important; margin: revert !important; }
/* ---- v164: the profile button, its stat tiles and its shortcut buttons: chunky, tilted, fun, aligned ---- */
html body #screen-menu .menu-buttons .btn.pf-pill { position: relative; display: flex !important; align-items: center; justify-content: center; gap: 12px; width: min(88%, 400px); min-height: 60px; margin: 16px auto 8px !important; padding: 10px 26px !important; background: linear-gradient(180deg, #fff09a 0%, #ffd23f 45%, #ffbb1c 100%) !important; border: 4px solid #10204a !important; border-radius: 26px !important; color: #10204a !important; font: 900 21px/1 "Fredoka", sans-serif !important; letter-spacing: .01em; text-shadow: 0 2px 0 rgba(255, 255, 255, .75) !important; filter: none !important; box-shadow: 0 7px 0 0 #c4681a, 0 7px 0 4px #10204a, 0 16px 20px rgba(16, 32, 74, .28) !important; transform: rotate(-1.6deg); animation: pfPillWiggle 3.4s ease-in-out infinite; }
html body #screen-menu .menu-buttons .btn.pf-pill::before { content: ""; position: absolute; left: 14px; right: 14px; top: 6px; height: 9px; border-radius: 9px; background: rgba(255, 255, 255, .6); pointer-events: none; }
html body #screen-menu .menu-buttons .btn.pf-pill::after { content: "\2726"; position: absolute; right: -10px; top: -16px; font-size: 30px; color: #fff; -webkit-text-stroke: 2px #10204a; paint-order: stroke fill; text-shadow: none !important; transform: rotate(12deg); animation: pfTwinkle 2.2s ease-in-out infinite; pointer-events: none; }
html body #screen-menu .menu-buttons .btn.pf-pill .pf-pi { width: 32px; height: 32px; background: radial-gradient(circle at 35% 30%, #fff 0 14%, #7fd3ff 16% 60%, #2f8fd0 100%); box-shadow: 0 3px 0 rgba(16, 32, 74, .35); flex: 0 0 32px; }
html body #screen-menu .menu-buttons .btn.pf-pill:hover { transform: rotate(1.4deg) scale(1.05); }
html body #screen-menu .menu-buttons .btn.pf-pill:active { transform: translateY(5px) scale(.98); box-shadow: 0 2px 0 0 #c4681a, 0 2px 0 4px #10204a !important; }
@keyframes pfPillWiggle { 0%, 100% { transform: rotate(-1.6deg) translateY(0); } 50% { transform: rotate(1.2deg) translateY(-3px); } }
@keyframes pfTwinkle { 0%, 100% { transform: rotate(12deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.25); } }
html body .pf-root .pf-stats { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 12px !important; margin: 16px 4px 14px !important; }
html body .pf-root .pf-stats span { position: relative; max-width: none !important; padding: 14px 6px 10px !important; border: 4px solid #10204a !important; border-radius: 20px 24px 18px 26px !important; font: 800 13px/1.1 "Fredoka" !important; color: #10204a; box-shadow: 0 6px 0 #10204a !important; transform: rotate(-2.2deg); text-transform: lowercase; }
html body .pf-root .pf-stats span:nth-child(1) { background: linear-gradient(#fff3a8, #ffd94a) !important; }
html body .pf-root .pf-stats span:nth-child(2) { background: linear-gradient(#c4ecff, #7fd3ff) !important; transform: rotate(1.8deg); }
html body .pf-root .pf-stats span:nth-child(3) { background: linear-gradient(#d4f7bf, #9be27a) !important; transform: rotate(-1.2deg); }
html body .pf-root .pf-stats span::before { content: "\2605"; position: absolute; left: 50%; top: -16px; transform: translateX(-50%) rotate(-10deg); font-size: 24px; line-height: 1; color: #ffd23f; -webkit-text-stroke: 2px #10204a; paint-order: stroke fill; }
html body .pf-root .pf-stats b { font: 900 28px/1.05 "Fredoka" !important; color: #10204a !important; text-shadow: 2px 2px 0 rgba(255, 255, 255, .8); margin-bottom: 3px; overflow-wrap: anywhere; }
html body .pf-root .pf-links { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px 12px !important; margin: 10px 0 6px !important; }
html body .pf-root .pf-links .pf-btn { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; text-align: center; font: 900 16px/1.1 "Fredoka" !important; border-radius: 18px !important; border-width: 4px !important; box-shadow: 0 6px 0 #10204a !important; transform: rotate(-1.4deg); }
html body .pf-root .pf-links .pf-btn:nth-child(2) { transform: rotate(1.4deg); background: #7fd3ff; }
html body .pf-root .pf-links .pf-btn:nth-child(3) { transform: rotate(1.2deg); background: #9be27a; }
html body .pf-root .pf-links .pf-btn:nth-child(4) { transform: rotate(-1.2deg); background: #ffa84a; }
html body .pf-root .pf-links .pf-btn:hover { transform: rotate(0) scale(1.06) translateY(-2px); }
html body .pf-root .pf-links .pf-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #10204a !important; }
@media (max-width: 420px) { html body .pf-root .pf-stats b { font-size: 24px !important; } html body .pf-root .pf-links .pf-btn { font-size: 15px !important; } }
@media (prefers-reduced-motion: reduce) { html body #screen-menu .menu-buttons .btn.pf-pill, html body #screen-menu .menu-buttons .btn.pf-pill::after { animation: none; } }
/* ---- v166: all 8 menu icons are alive: every one has its own idle move, the ribbon swings with it ---- */
.ta-patches .ta-idle { animation: taStampIdle 3.4s ease-in-out infinite; transform-origin: 50% 60%; }
.ta-discovery .ta-idle { animation: taLookIdle 4.4s ease-in-out infinite; transform-origin: 50% 80%; }
.ta-companions .ta-idle { animation: taBuddyIdle 2.9s ease-in-out infinite; transform-origin: 50% 92%; }
.ta-outfits .ta-idle, .ta-missions .ta-idle, .ta-map .ta-idle, .ta-progress .ta-idle, .ta-ranks .ta-idle { animation-duration: 2.6s; }
.tiles .tile-art:nth-child(2) .ta-idle { animation-delay: -.5s; } .tiles .tile-art:nth-child(3) .ta-idle { animation-delay: -1s; } .tiles .tile-art:nth-child(4) .ta-idle { animation-delay: -1.5s; }
.tiles .tile-art:nth-child(6) .ta-idle { animation-delay: -.7s; } .tiles .tile-art:nth-child(7) .ta-idle { animation-delay: -1.2s; } .tiles .tile-art:nth-child(8) .ta-idle { animation-delay: -1.9s; }
@keyframes taStampIdle { 0%, 100% { transform: rotate(-2.5deg) scale(1); } 45% { transform: rotate(2.5deg) scale(1.06); } 60% { transform: rotate(1deg) scale(.97); } }
@keyframes taLookIdle { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3.5deg) translateY(-4px); } }
@keyframes taBuddyIdle { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-9px) scale(.97, 1.04); } 55% { transform: translateY(0) scale(1.05, .94); } 70% { transform: translateY(-3px) scale(1, 1); } }
.tiles .tile-art:hover .ta-idle, .tiles .tile-art:focus-visible .ta-idle { animation-duration: .9s; }
.tiles .tile-art:active .ta-img { transform: scale(.92, .88); }
@media (prefers-reduced-motion: reduce) { .ta-patches .ta-idle, .ta-discovery .ta-idle, .ta-companions .ta-idle { animation: none; } }
/* ---- v168: the record-screen host is the new celebration animation (crown baked into every frame) ---- */
.record .go-hero::before { display: none !important; }
#over-host { transform: scale(1.2); transform-origin: 50% 62%; object-fit: contain; filter: none; }
/* ---- v170: "My Explorer Profile": a chunky hand-drawn candy button (it must read as a button), with a smiling crayon star ---- */
html body #screen-menu .menu-buttons .btn.pf-pill { background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 8px), linear-gradient(180deg, #fff09a 0%, #ffd23f 48%, #ffb81c 100%) !important; border: 4px solid #3a2630 !important; border-radius: 28px 32px 26px 34px / 30px 26px 34px 28px !important; color: #3a2630 !important; text-shadow: 0 2px 0 rgba(255, 255, 255, .8) !important; box-shadow: 0 9px 0 0 #c4681a, 0 9px 0 4px #3a2630, 0 20px 22px rgba(58, 38, 48, .3) !important; }
html body #screen-menu .menu-buttons .btn.pf-pill::before { content: "" !important; display: block !important; position: absolute; inset: 7px 16px; height: auto !important; border: 2.5px dashed rgba(190, 100, 20, .65); border-radius: 22px; background: none !important; pointer-events: none; }
html body #screen-menu .menu-buttons .btn.pf-pill::after { content: "" !important; display: block !important; position: absolute; right: -20px; top: -30px; width: 58px; height: 58px; background: url(../assets/ui/star-sticker.webp) center / contain no-repeat !important; -webkit-text-stroke: 0 !important; transform: rotate(14deg); animation: pfStarHop 2.2s ease-in-out infinite !important; pointer-events: none; }
html body #screen-menu .menu-buttons .btn.pf-pill .pf-pi { display: inline-block !important; }
@keyframes pfStarHop { 0%, 100% { transform: rotate(14deg) scale(1) translateY(0); } 40% { transform: rotate(-10deg) scale(1.15) translateY(-6px); } 65% { transform: rotate(8deg) scale(.96) translateY(0); } }
@media (prefers-reduced-motion: reduce) { html body #screen-menu .menu-buttons .btn.pf-pill::after { animation: none !important; } }
/* v172: star sticker removed from the profile button */
html body #screen-menu .menu-buttons .btn.pf-pill::after { display: none !important; content: none !important; }
/* v173: shimmer sweep across the profile button */
html body #screen-menu .menu-buttons .btn.pf-pill { overflow: hidden; }
html body #screen-menu .menu-buttons .btn.pf-pill::after { content: "" !important; display: block !important; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%) !important; transform: translateX(-130%) skewX(-18deg); animation: pfShimmer 3.4s ease-in-out infinite !important; pointer-events: none; right: auto; width: 38%; height: auto; -webkit-text-stroke: 0; mix-blend-mode: soft-light; }
@keyframes pfShimmer { 0%, 55% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(380%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { html body #screen-menu .menu-buttons .btn.pf-pill::after { animation: none !important; opacity: 0; } }
/* v175: the profile button is alive: it rocks and wiggles on hover, squashes flat when pressed, springs back like jelly and pops a burst of crayon sparks */
html body #screen-menu .menu-buttons .btn.pf-pill { transition: box-shadow .14s ease, filter .14s ease; will-change: transform; }
html body #screen-menu .menu-buttons .btn.pf-pill:hover, html body #screen-menu .menu-buttons .btn.pf-pill:focus-visible { animation: pfRock 1.15s ease-in-out infinite !important; box-shadow: 0 13px 0 0 #c4681a, 0 13px 0 4px #3a2630, 0 26px 24px rgba(58, 38, 48, .3) !important; filter: brightness(1.07) saturate(1.12); }
html body #screen-menu .menu-buttons .btn.pf-pill:hover::after, html body #screen-menu .menu-buttons .btn.pf-pill:focus-visible::after { animation-duration: 1.1s !important; animation-delay: 0s !important; }
html body #screen-menu .menu-buttons .btn.pf-pill:hover .pf-pi, html body #screen-menu .menu-buttons .btn.pf-pill:focus-visible .pf-pi { animation: pfBubble .7s ease-in-out infinite; }
html body #screen-menu .menu-buttons .btn.pf-pill.pf-down { animation: none !important; transform: translateY(10px) scale(1.06, .86) rotate(-1.2deg) !important; box-shadow: 0 0 0 0 #c4681a, 0 0 0 4px #3a2630, 0 2px 4px rgba(58, 38, 48, .35) !important; filter: brightness(.97) saturate(1.15); transition: box-shadow .06s; }
html body #screen-menu .menu-buttons .btn.pf-pill.pf-down .pf-pi { transform: scale(1.25, .7); }
html body #screen-menu .menu-buttons .btn.pf-pill.pf-pop { animation: pfJelly .75s cubic-bezier(.25, 1.5, .4, 1) both !important; }
@keyframes pfRock { 0%, 100% { transform: translateY(-4px) rotate(-1.8deg) scale(1.05); } 25% { transform: translateY(-7px) rotate(.4deg) scale(1.07, 1.04); } 50% { transform: translateY(-4px) rotate(1.8deg) scale(1.05); } 75% { transform: translateY(-6px) rotate(-.2deg) scale(1.06, 1.05); } }
@keyframes pfBubble { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-5px) scale(.94, 1.1); } 70% { transform: translateY(0) scale(1.08, .92); } }
@keyframes pfJelly { 0% { transform: translateY(10px) scale(1.06, .86); } 22% { transform: translateY(-14px) scale(.9, 1.16) rotate(1.8deg); } 42% { transform: translateY(2px) scale(1.07, .93) rotate(-1.4deg); } 62% { transform: translateY(-5px) scale(.97, 1.04) rotate(.8deg); } 82% { transform: translateY(0) scale(1.01, .99); } 100% { transform: translateY(0) scale(1) rotate(-1.2deg); } }
.pf-spark { position: fixed; z-index: 99999; width: 26px; height: 26px; margin: -13px 0 0 -13px; background: url(../assets/ui/spark-crayon.webp) center / contain no-repeat; pointer-events: none; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { html body #screen-menu .menu-buttons .btn.pf-pill:hover, html body #screen-menu .menu-buttons .btn.pf-pill:focus-visible, html body #screen-menu .menu-buttons .btn.pf-pill.pf-pop { animation: none !important; } }
/* ---- v176: the 8 home icons really move: bigger, bouncier idles, twinkling crayon sparks, jelly pop on tap ---- */
.tiles .tile-art .ta-wrap::before, .tiles .tile-art .ta-wrap::after { content: ""; position: absolute; width: 22%; aspect-ratio: 1; background: url(../assets/ui/spark-crayon.webp) center / contain no-repeat; pointer-events: none; opacity: 0; z-index: 3; animation: taTwinkle 2.8s ease-in-out infinite; }
.tiles .tile-art .ta-wrap::before { right: -2%; top: -4%; }
.tiles .tile-art .ta-wrap::after { left: -3%; top: 34%; width: 16%; animation-delay: -1.4s; }
.tiles .tile-art:nth-child(2n) .ta-wrap::before { animation-delay: -.7s; } .tiles .tile-art:nth-child(3n) .ta-wrap::after { animation-delay: -.3s; } .tiles .tile-art:nth-child(4n) .ta-wrap::before { animation-delay: -2s; }
@keyframes taTwinkle { 0%, 62%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 74% { opacity: 1; transform: scale(1.1) rotate(35deg); } 88% { opacity: .9; transform: scale(.7) rotate(70deg); } }
.tiles .tile-art.ta-outfits .ta-idle { animation: taV2Hop 2.4s cubic-bezier(.3, .7, .4, 1) infinite; }
.tiles .tile-art.ta-missions .ta-idle { animation: taV2Wave 2.9s ease-in-out infinite; transform-origin: 20% 90%; }
.tiles .tile-art.ta-map .ta-idle { animation: taV2Orbit 4.2s ease-in-out infinite; }
.tiles .tile-art.ta-progress .ta-idle { animation: taV2Cheer 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
.tiles .tile-art.ta-ranks .ta-idle { animation: taV2Grow 2.5s ease-in-out infinite; transform-origin: 50% 95%; }
.tiles .tile-art.ta-patches .ta-idle { animation: taV2Stamp 2.9s ease-in-out infinite; }
.tiles .tile-art.ta-discovery .ta-idle { animation: taV2Look 3.6s ease-in-out infinite; transform-origin: 50% 85%; }
.tiles .tile-art.ta-companions .ta-idle { animation: taV2Buddy 2.2s cubic-bezier(.3, .7, .4, 1) infinite; transform-origin: 50% 95%; }
@keyframes taV2Hop { 0%, 100% { transform: translateY(0) scale(1.04, .95); } 40% { transform: translateY(-13px) scale(.96, 1.06) rotate(-2deg); } 62% { transform: translateY(-13px) rotate(2deg); } 86% { transform: translateY(0) scale(1.05, .94); } }
@keyframes taV2Wave { 0%, 100% { transform: rotate(-4deg) skewX(2deg); } 50% { transform: rotate(5deg) skewX(-3deg) scale(1.04); } }
@keyframes taV2Orbit { 0%, 100% { transform: translate(-3px, 2px) rotate(-4deg); } 25% { transform: translate(3px, -6px) rotate(0deg) scale(1.03); } 50% { transform: translate(5px, 1px) rotate(4deg); } 75% { transform: translate(-1px, -5px) rotate(1deg) scale(1.03); } }
@keyframes taV2Cheer { 0%, 100% { transform: scale(1) rotate(0deg); } 18% { transform: scale(1.1, .93) rotate(-3deg); } 36% { transform: scale(.96, 1.1) translateY(-8px) rotate(3deg); } 56% { transform: scale(1.04) translateY(-3px) rotate(-2deg); } 76% { transform: scale(1); } }
@keyframes taV2Grow { 0%, 100% { transform: scale(1, .94); } 35% { transform: scale(1.04, 1.1); } 60% { transform: scale(.98, 1.02) rotate(1deg); } }
@keyframes taV2Stamp { 0%, 100% { transform: rotate(-3deg) scale(1); } 40% { transform: rotate(3deg) scale(1.08); } 52% { transform: rotate(2deg) scale(.94); } 68% { transform: rotate(-1deg) scale(1.02); } }
@keyframes taV2Look { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-6px) scale(1.04); } }
@keyframes taV2Buddy { 0%, 100% { transform: translateY(0) scale(1.05, .93); } 38% { transform: translateY(-14px) scale(.95, 1.08) rotate(-3deg); } 60% { transform: translateY(-14px) rotate(3deg); } 84% { transform: translateY(0) scale(1.06, .92); } }
.tiles .tile-art:nth-child(2) .ta-idle { animation-delay: -.5s; } .tiles .tile-art:nth-child(3) .ta-idle { animation-delay: -1.1s; } .tiles .tile-art:nth-child(4) .ta-idle { animation-delay: -1.6s; }
.tiles .tile-art:nth-child(6) .ta-idle { animation-delay: -.8s; } .tiles .tile-art:nth-child(7) .ta-idle { animation-delay: -1.4s; } .tiles .tile-art:nth-child(8) .ta-idle { animation-delay: -.3s; }
.tiles .tile-art .ta-img { transition: transform .12s ease, filter .15s ease; }
.tiles .tile-art:hover .ta-img, .tiles .tile-art:focus-visible .ta-img { transform: scale(1.1) rotate(-2deg); filter: brightness(1.07) saturate(1.15); }
.tiles .tile-art.tpop .ta-wrap { animation: taJelly .7s cubic-bezier(.25, 1.5, .4, 1) both; }
.tiles .tile-art.tdown .ta-wrap { transform: translateY(5px) scale(1.07, .88); transition: transform .06s; }
@keyframes taJelly { 0% { transform: translateY(5px) scale(1.07, .88); } 24% { transform: translateY(-11px) scale(.92, 1.14) rotate(2deg); } 46% { transform: translateY(2px) scale(1.05, .95) rotate(-1.5deg); } 68% { transform: translateY(-3px) scale(.98, 1.03); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tiles .tile-art .ta-idle, .tiles .tile-art .ta-wrap::before, .tiles .tile-art .ta-wrap::after { animation: none !important; } }
/* ---- v179: the high-score star pops out of its card, wobbles and twinkles (no ring) ---- */
#screen-menu .menu-stats .ms:first-child .msi { position: relative; width: 44px !important; height: 34px !important; overflow: visible; z-index: 6; }
#screen-menu .menu-stats .msi img.ms-hsb { position: absolute; left: 50%; bottom: -4px; width: 62px !important; height: auto !important; max-width: none; transform: translateX(-50%) rotate(-6deg); transform-origin: 50% 85%; animation: msStarPop 2.6s cubic-bezier(.3, .7, .4, 1) infinite; filter: drop-shadow(0 3px 0 rgba(58, 38, 48, .3)); }
#screen-menu .menu-stats .ms:first-child .msi::before, #screen-menu .menu-stats .ms:first-child .msi::after { content: ""; position: absolute; width: 18px; height: 18px; background: url(../assets/ui/spark-crayon.webp) center / contain no-repeat; pointer-events: none; opacity: 0; animation: taTwinkle 2.4s ease-in-out infinite; z-index: 7; }
#screen-menu .menu-stats .ms:first-child .msi::before { right: -14px; top: -16px; }
#screen-menu .menu-stats .ms:first-child .msi::after { left: -12px; top: 2px; width: 13px; height: 13px; animation-delay: -1.2s; }
@keyframes msStarPop { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-6deg) scale(1.02, .96); } 30% { transform: translateX(-50%) translateY(-9px) rotate(5deg) scale(.96, 1.06); } 52% { transform: translateX(-50%) translateY(-9px) rotate(-3deg) scale(1.02); } 78% { transform: translateX(-50%) translateY(0) rotate(-6deg) scale(1.04, .94); } }
@media (prefers-reduced-motion: reduce) { #screen-menu .menu-stats .msi img.ms-hsb, #screen-menu .menu-stats .ms:first-child .msi::before, #screen-menu .menu-stats .ms:first-child .msi::after { animation: none !important; } }
/* ---- v180: the star on Lanky's Great Escape is its own layer: it pops out, spins and twinkles ---- */
.story-banner .sbn-star { position: absolute; left: 28.87%; top: 3.6%; width: 9.73%; height: auto; z-index: 3; pointer-events: none; transform-origin: 50% 52%; animation: sbnStarPop 3s cubic-bezier(.3, .7, .4, 1) infinite; filter: drop-shadow(0 4px 0 rgba(58, 38, 48, .28)); will-change: transform; }
@keyframes sbnStarPop { 0%, 100% { transform: rotate(-4deg) scale(1.02); } 22% { transform: translateY(-9%) rotate(14deg) scale(1.22); } 38% { transform: translateY(-4%) rotate(-10deg) scale(1.14); } 55% { transform: translateY(-7%) rotate(8deg) scale(1.2); } 74% { transform: rotate(-4deg) scale(1.04, .97); } }
.story-banner:hover .sbn-star, .story-banner:focus-visible .sbn-star { animation-duration: 1.3s; }
.story-banner:active .sbn-star { animation: none; transform: rotate(0) scale(.92); }
@media (prefers-reduced-motion: reduce) { .story-banner .sbn-star { animation: none; } }
/* ---- v181: accessibility: small captions never inherit a headline's hard shadow, and they stay sentence case ---- */
.un-tot small, #screen-menu small, .pt-root small, .cp-root small, .un-root small, .pf-root small { text-shadow: none !important; }
.un-root .un-tot small { display: block; margin-top: 6px; font: 600 16px/1.25 "Fredoka", sans-serif !important; letter-spacing: .01em !important; text-transform: none !important; color: #2a1850 !important; }
.un-root .un-tot { text-shadow: 0 2px 0 rgba(255, 255, 255, .85), 0 4px 0 rgba(42, 24, 80, .35) !important; }
/* ---- v182: long buddy names (e.g. "Pebble") never split mid-word on narrow phones ---- */
html body .pf-root .pf-stats b { overflow-wrap: normal !important; word-break: keep-all !important; font-size: clamp(17px, 5.4vw, 28px) !important; }
html body .pf-root .pf-stats span { min-width: 0; padding-left: 3px !important; padding-right: 3px !important; }
/* ---- v183: the profile popup shows the player's real avatar (same picture as the home chip) with an Edit avatar button ---- */
html body .pf-root .pf-top { gap: 8px; }
html body .pf-root img.pf-av, html body .pf-root .pf-av { width: 104px; height: 104px; border-radius: 50%; border: 5px solid #10204a; background: #fff3c4; box-shadow: 0 5px 0 rgba(16, 32, 74, .4); object-fit: cover; display: block; animation: icoBob 3.2s ease-in-out infinite; }
html body .pf-root .pf-edit-av { min-height: 40px; padding: 4px 16px; font-size: 14px; background: #7fd3ff; margin-top: 2px; }
/* ---- v184: stat names (e.g. farthest planet) wrap between words, never inside one, and clamp to two tidy lines ---- */
html body #screen-menu .menu-stats .ms b { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; font-size: clamp(13px, 4.1vw, 16px) !important; line-height: 1.15 !important; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; }html body #screen-menu .menu-stats .ms b#menu-world { white-space: normal !important; text-overflow: clip !important; max-width: 100% !important; }
/* ---- v186: every mini-game opens with its own hand-drawn crayon scene, and plays on a soft wash of it ---- */
.mg-prev { display: block !important; min-height: 0 !important; transform: none !important; }
.mg-hero { display: block; width: 100%; height: auto; aspect-ratio: 720 / 420; object-fit: cover; border: 4px solid #3d1a3a; border-radius: 20px 24px 18px 26px / 24px 18px 26px 20px; box-shadow: 0 6px 0 rgba(58, 38, 48, .35); transform: rotate(-1.2deg); animation: mgHeroFloat 4.2s ease-in-out infinite; }
@keyframes mgHeroFloat { 0%, 100% { transform: rotate(-1.2deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-4px); } }
.mg-area, #mg-area { border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .mg-hero { animation: none; } }
/* ---- v190: text on the aged-paper plate is easy to read, padded away from the ruler edge, and made into tidy hand-drawn label strips ---- */
:where(.plate, .modal-card, .panel-inner, .pf-card, .un-card, .cp-card, .pt-card, .mg-card) :where(p, small, li, label, td, span, b, div) { text-shadow: 0 1px 0 rgba(255, 249, 226, .9); }
.plate, .modal-card, #pg-modal-card { color: #24143f; }
.rp { margin: 12px 14px 8px !important; padding: 14px 26px 16px !important; background: rgba(255, 250, 232, .55); border: 3px solid #3a2630; border-radius: 16px 20px 14px 22px / 20px 14px 22px 16px; box-shadow: 0 4px 0 rgba(58, 38, 48, .3); }
.rp h3 { color: #6a2a14 !important; font: 800 15px/1.2 "Fredoka", sans-serif !important; letter-spacing: .14em; text-shadow: 0 1px 0 rgba(255, 249, 226, .9); }
.rp table, .rp tbody { display: block; width: 100%; }
.rp tr { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0; padding: 8px 12px; background: #fffaf0; border: 3px solid #3a2630; border-radius: 14px 18px 12px 20px / 18px 12px 20px 14px; box-shadow: 0 3px 0 rgba(58, 38, 48, .32); transform: rotate(-.5deg); }
.rp tr:nth-child(2n) { transform: rotate(.5deg); }
.rp td { border: 0 !important; padding: 0 !important; font: 700 17px/1.2 "Fredoka", sans-serif; color: #24143f; text-shadow: none; }
.rp td:last-child { flex: none; min-width: 54px; text-align: center !important; padding: 3px 12px !important; border: 2.5px solid #3a2630 !important; border-radius: 999px; background: #ffd23f; color: #3a2630 !important; font-weight: 800; }
.rp tr:nth-child(2) td:last-child { background: #9be27a; } .rp tr:nth-child(3) td:last-child { background: #7fd3ff; } .rp tr:nth-child(4) td:last-child { background: #ffb347; } .rp tr:nth-child(5) td:last-child { background: #c9f0e2; }
/* helper notes (Pip, tips): bold, dark, centred inside their torn note */
.mg-say span, .mg-say p { display: flex; align-items: center; justify-content: center; text-align: center !important; min-height: 2.6em; color: #24143f !important; font: 700 17px/1.3 "Fredoka", sans-serif !important; text-shadow: 0 1px 0 rgba(255, 249, 226, .9) !important; padding-inline: 14px; }
.mg-how, .mg-rew { color: #24143f !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(255, 249, 226, .9); }
/* ---- v191: the high-score star stays in the flow of its card (no absolute positioning), so it can never drift out of the card on any screen size ---- */
#screen-menu .menu-stats .ms:first-child .msi { position: relative; width: auto !important; height: auto !important; flex: none; overflow: visible; z-index: 6; }
#screen-menu .menu-stats .msi img.ms-hsb { position: static !important; left: auto !important; bottom: auto !important; width: clamp(46px, 5vw, 66px) !important; height: auto !important; max-width: none; margin: -6px 0 -4px; transform: rotate(-6deg); animation: msStarPop2 2.6s cubic-bezier(.3, .7, .4, 1) infinite; }
@keyframes msStarPop2 { 0%, 100% { transform: translateY(0) rotate(-6deg) scale(1.02, .96); } 30% { transform: translateY(-9px) rotate(5deg) scale(1.08, 1.12); } 52% { transform: translateY(-9px) rotate(-3deg) scale(1.1); } 78% { transform: translateY(0) rotate(-6deg) scale(1.04, .94); } }
#screen-menu .menu-stats .ms:first-child .msi::before { right: -10px; top: -12px; } #screen-menu .menu-stats .ms:first-child .msi::after { left: -10px; top: 6px; }
/* ---- v192: the High score label sticker is the same size as the other two stat stickers on every screen ---- */
html body #screen-menu .menu-stats .ms:nth-child(1) small { width: clamp(112px, 32vw, 140px) !important; height: clamp(40px, 11.6vw, 50px) !important; font-size: 0 !important; color: transparent !important; overflow: hidden; white-space: nowrap; text-indent: -999px; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; margin: 0 0 2px -6px !important; }
/* ---- v193: world map clarity: "You are here" sits under the planet (never over a neighbour's name) and the percentage says what it means ---- */
html body .m-here { top: auto !important; bottom: -34%; left: 50%; z-index: 6; }
html body .m-here b::after { bottom: auto !important; top: -9px; border-right: 0 !important; border-bottom: 0 !important; border-left: 3px solid #10204a; border-top: 3px solid #10204a; }
html body .m-node .m-rib { max-width: 11.5em; }
html body .m-node .m-rib em { text-transform: none !important; letter-spacing: .02em !important; font-size: .78em !important; }
/* ---- v195: lives are counted in halves: each green|yellow head is two knock-outs; the yellow half goes first, then the green ---- */
.hp i.half { background: conic-gradient(#e8dccb 0 50%, #2f9a5a 50% 100%) !important; opacity: 1; filter: none; transform: scale(.92); }
.hp i.lost { background: #efe5d6 !important; }
.hp i.off { display: none; }
/* ---- v196: the star sits centred in its card, level with the planet and the runner, and pops UP from there ---- */
html body #screen-menu .menu-stats .ms:nth-child(1) { align-items: center !important; }
html body #screen-menu .menu-stats .ms:nth-child(1) .msi { align-self: center !important; display: flex !important; align-items: center; justify-content: center; width: 68px !important; height: 68px !important; margin: 0 !important; }
html body #screen-menu .menu-stats .msi img.ms-hsb { margin: 0 !important; width: clamp(54px, 5vw, 72px) !important; align-self: center; }
/* v198 friends */
.fr-root{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(10,14,40,.62);padding:12px}
.fr-root.hidden{display:none}
.fr-card{position:relative;width:min(560px,100%);max-height:min(88vh,100%);overflow:auto;-webkit-overflow-scrolling:touch;padding:22px 18px 18px!important;box-sizing:border-box}
.fr-body{color:#3a2630;font-family:"Fredoka",system-ui,sans-serif;font-weight:700}
.fr-h{margin:0 0 8px;font:900 26px "Fredoka",sans-serif;color:#3a2630;text-align:center}
.fr-s{margin:0 0 8px;font:900 18px "Fredoka",sans-serif;color:#3a2630}
.fr-sec{margin:0 0 14px;padding:12px;border-radius:14px;background:rgba(255,248,230,.75);border:2px dashed rgba(58,38,48,.35)}
.fr-note{margin:0 0 8px;font-size:15px;line-height:1.4;color:#3a2630}
.fr-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.fr-row .pg-in{flex:1 1 140px;min-width:0;min-height:44px;font-size:17px}
.fr-at{font:900 22px "Fredoka",sans-serif;color:#3a2630}
.fr-card .pf-btn{min-height:44px;min-width:44px}
.fr-card .pf-btn[disabled]{opacity:.55}
.fr-line{display:flex;align-items:center;gap:8px;padding:8px 6px;border-bottom:2px dotted rgba(58,38,48,.25);flex-wrap:wrap}
.fr-line:last-child{border-bottom:0}
.fr-who{flex:1 1 120px;min-width:0;display:flex;flex-direction:column;font-size:16px;color:#3a2630}
.fr-who b{overflow-wrap:anywhere}
.fr-who small,.fr-mename small{font-size:13px;color:#5a4048;font-weight:700}
.fr-av{width:36px;height:36px;flex:none;border-radius:50%;border:3px solid #3a2630;display:inline-flex;align-items:center;justify-content:center;font:900 17px "Fredoka",sans-serif;color:#3a2630}
.fr-rk{width:22px;text-align:center;font:900 17px "Fredoka",sans-serif;color:#3a2630}
.fr-sc{font:900 18px "Fredoka",sans-serif;color:#3a2630;margin-right:4px}
.fr-you{background:rgba(255,210,63,.45);border-radius:10px}
.fr-won{background:rgba(155,226,122,.5);border-radius:10px}
.fr-mename{display:flex;align-items:center;gap:10px}
.fr-mename b{display:block;font:900 22px "Fredoka",sans-serif;color:#3a2630;overflow-wrap:anywhere}
.fr-msg{min-height:20px;margin:4px 0 0;font-size:15px;color:#3a2630}
.fr-msg.bad{color:#a02020}.fr-msg.ok{color:#1f6b2a}
.fr-x{position:absolute;right:8px;top:8px}
.pf-pill{position:relative}
.fr-badge{position:absolute;right:-6px;top:-8px;min-width:24px;height:24px;border-radius:12px;background:#ff5a3c;color:#fff;border:3px solid #3a2630;font:900 13px/18px "Fredoka",sans-serif;text-align:center;box-sizing:border-box;padding:0 4px;animation:taJelly 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.fr-badge{animation:none}}
/* v199 friends board: Lankys + podium */
.fr-lanky{flex:none;border-radius:50%;border:3px solid #3a2630;background:#fff3de;object-fit:cover;box-sizing:border-box;width:44px;height:44px}
.fr-lanky.fr-big{border-width:4px}
.fr-lanky.fr-big{width:62px;height:62px}
.fr-pod{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:4px 0 6px}
.fr-pl{flex:1 1 0;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:14px;border:3px solid #3a2630;text-align:center;color:#3a2630;animation:frBob 2.6s ease-in-out infinite}
.fr-pl b{font:900 15px "Fredoka",sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-pl small{font:800 14px "Fredoka",sans-serif}
.fr-pl .fr-lanky{width:62px;height:62px}
.fr-gold{background:#ffd23f;order:2;padding-top:14px}.fr-gold .fr-lanky{width:76px;height:76px}
.fr-silver{background:#d9e6ef;order:1}.fr-bronze{background:#f2b27a;order:3}
.fr-meP{box-shadow:0 0 0 4px rgba(255,255,255,.85)}
.fr-crown{font:900 22px "Fredoka",sans-serif;line-height:1;min-width:26px;height:26px;border-radius:13px;background:#fff3de;border:2px solid #3a2630;display:inline-flex;align-items:center;justify-content:center}
.fr-gold .fr-crown{background:#fff;font-size:20px}
.fr-tease{margin:4px 0 8px;text-align:center;font:900 16px "Fredoka",sans-serif;color:#3a2630}
@keyframes frBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.fr-pl{animation:none}}
.fr-inbox{background:rgba(255,230,140,.7)}
/* v202 podium art */
img.fr-crown{font:0;min-width:0;height:auto!important;border:0!important;background:none!important;border-radius:0!important;display:block;width:34px;margin:0 auto -4px;animation:frWob 2.2s ease-in-out infinite;transform-origin:50% 100%}
img.fr-crown.fr-c0{width:58px;margin-bottom:-6px;filter:drop-shadow(0 3px 0 rgba(58,38,48,.35))}
@keyframes frWob{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.08)}}
@media (prefers-reduced-motion:reduce){img.fr-crown{animation:none}}
/* v203 reward bonus in toasts: bouncy coin + big +N */
.rw-t{display:block;font-weight:900}
.rw-s{display:block;margin-top:2px;font-style:italic;font-weight:800}
.rw-bonus{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:4px 16px 4px 8px;border-radius:999px;background:#fff3de;border:3px solid #7a2438;box-shadow:0 4px 0 rgba(122,36,56,.35);animation:rwPop .7s cubic-bezier(.34,1.8,.5,1) both,rwBob 1.6s .7s ease-in-out infinite}
.rw-coin{width:38px;height:38px;animation:rwSpin 1.4s ease-in-out infinite}
.rw-n{font:900 34px/1 "Fredoka",sans-serif;color:#ffb300;-webkit-text-stroke:2px #7a2438;paint-order:stroke fill;text-shadow:0 3px 0 #7a2438;letter-spacing:.02em;transform:rotate(-4deg);display:inline-block}
.rw-sp{position:absolute;width:12px;height:12px;background:#fff6a8;border:2px solid #7a2438;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:rwTw 1.2s ease-in-out infinite}
.rw-sp0{left:-10px;top:-8px}.rw-sp1{right:-8px;top:-10px;animation-delay:.3s;width:16px;height:16px}.rw-sp2{right:-12px;bottom:-6px;animation-delay:.6s}.rw-sp3{left:34px;top:-12px;animation-delay:.9s;width:9px;height:9px}.rw-sp4{left:-8px;bottom:-8px;animation-delay:.45s;width:9px;height:9px}
@keyframes rwPop{0%{transform:scale(.2) rotate(-18deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes rwBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1.5deg)}}
@keyframes rwSpin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.25)}}
@keyframes rwTw{0%,100%{transform:scale(.4) rotate(0);opacity:.4}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.rw-bonus,.rw-coin,.rw-sp{animation:none}}
/* v204 notification bell */
.fr-bell{position:relative;flex:none;width:48px;height:48px;min-width:44px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;margin-left:6px;-webkit-tap-highlight-color:transparent;transform-origin:50% 8%}
.fr-bell img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(58,38,48,.35));pointer-events:none}
.fr-bell:active{transform:scale(.92)}
.fr-bn{display:none;position:absolute;right:-4px;top:-4px;min-width:24px;height:24px;border-radius:12px;background:#ff5a3c;color:#fff;border:3px solid #3a2630;font:900 13px/18px "Fredoka",sans-serif;text-align:center;box-sizing:border-box;padding:0 4px}
.fr-bell.has .fr-bn{display:block}
.fr-bell.has,.fr-bell.ring{animation:frRing 2.8s ease-in-out infinite}
.fr-bell.ring{animation:frRing .9s ease-in-out 2}
@keyframes frRing{0%,60%,100%{transform:rotate(0)}6%{transform:rotate(16deg)}12%{transform:rotate(-14deg)}18%{transform:rotate(10deg)}24%{transform:rotate(-8deg)}30%{transform:rotate(4deg)}36%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.fr-bell.has,.fr-bell.ring{animation:none}}
/* v205 bell = candy button */
.fr-bell{width:58px!important;height:58px!important;margin-left:8px;border-radius:50%!important;background:radial-gradient(circle at 34% 26%,#b9ecff 0,#6fc3f0 42%,#3d9ad6 100%)!important;border:4px solid #3a2630!important;box-shadow:0 5px 0 #3a2630,inset 0 -5px 0 rgba(30,80,140,.35),inset 0 4px 0 rgba(255,255,255,.55)!important;transition:transform .18s cubic-bezier(.34,1.8,.5,1),box-shadow .12s;animation:frFloat 3.2s ease-in-out infinite!important;overflow:visible}
.fr-bell::before{content:"";position:absolute;left:9px;top:7px;width:16px;height:9px;border-radius:50%;background:rgba(255,255,255,.8);transform:rotate(-28deg);pointer-events:none}
.fr-bell::after{content:"";position:absolute;right:-9px;top:-9px;width:16px;height:16px;background:#fff6a8;border:2px solid #3a2630;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:rwTw 2s ease-in-out infinite;pointer-events:none}
.fr-bell img{position:absolute;left:50%;top:50%;width:38px!important;height:40px!important;margin:-20px 0 0 -19px;transform-origin:50% 12%;animation:frSwing 3.2s ease-in-out infinite;filter:drop-shadow(0 2px 0 rgba(58,38,48,.45))!important}
.fr-bell:hover{transform:translateY(-2px) scale(1.08) rotate(-4deg)}
.fr-bell:hover img{animation:frSwingFast .6s ease-in-out infinite}
.fr-bell:active{transform:translateY(4px) scale(.93,.88)!important;box-shadow:0 1px 0 #3a2630,inset 0 -3px 0 rgba(30,80,140,.35),inset 0 4px 0 rgba(255,255,255,.55)!important}
.fr-bell.has,.fr-bell.ring{animation:frFloat 3.2s ease-in-out infinite!important}
.fr-bell.has img,.fr-bell.ring img{animation:frSwingFast .7s ease-in-out infinite}
.fr-bell.has{background:radial-gradient(circle at 34% 26%,#fff0a0 0,#ffcf3f 45%,#f59a1e 100%)!important}
.fr-bn{right:-6px!important;top:-8px!important;animation:taJelly 1.6s ease-in-out infinite}
@keyframes frFloat{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes frSwing{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(16deg)}82%{transform:rotate(-13deg)}88%{transform:rotate(8deg)}94%{transform:rotate(-4deg)}}
@keyframes frSwingFast{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.fr-bell,.fr-bell img,.fr-bell::after,.fr-bn{animation:none!important}}
/* v206 bell: the bell IS the button (no circle), shape-masked shimmer */
.fr-bell{width:60px!important;height:62px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;animation:frFloat 3.2s ease-in-out infinite!important}
.fr-bell.has{background:none!important}
.fr-bell::before{display:none!important}
.fr-bell::after{right:-4px!important;top:-6px!important}
.fr-bw{position:absolute;inset:0;display:block;transform-origin:50% 10%;animation:frSwing 3.2s ease-in-out infinite;filter:drop-shadow(0 3px 3px rgba(58,38,48,.28))}
.fr-bell img{position:absolute!important;inset:0;left:0!important;top:0!important;width:100%!important;height:100%!important;margin:0!important;animation:none!important;filter:none!important;object-fit:contain}
.fr-sh{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%);background-size:300% 100%;background-position:150% 0;-webkit-mask:url(../assets/ui/fr-bell4.webp) center/contain no-repeat;mask:url(../assets/ui/fr-bell4.webp) center/contain no-repeat;animation:frShim 2.6s ease-in-out infinite}
.fr-bell.has .fr-sh{animation-duration:1.4s}
.fr-bell.has .fr-bw{filter:drop-shadow(0 3px 3px rgba(58,38,48,.28)) drop-shadow(0 0 8px rgba(255,200,60,.95))}
.fr-bell:hover .fr-bw,.fr-bell.has .fr-bw,.fr-bell.ring .fr-bw{animation:frSwingFast .7s ease-in-out infinite}
.fr-bell:hover{transform:translateY(-2px) scale(1.1)!important}
.fr-bell:active{transform:translateY(4px) scale(.94,.88)!important}
.fr-bell:active .fr-bw{filter:drop-shadow(0 1px 1px rgba(58,38,48,.28))}
@keyframes frShim{0%,35%{background-position:150% 0}85%,100%{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.fr-bw,.fr-sh{animation:none!important}}
/* v207 bell: swinging clapper inside the open mouth + press motion */
.fr-bell .fr-cl{transform-origin:49.8% 75%;animation:frClap 3.2s ease-in-out infinite}
.fr-bell:hover .fr-cl,.fr-bell.has .fr-cl,.fr-bell.ring .fr-cl{animation:frClapFast .55s ease-in-out infinite}
@keyframes frClap{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-34deg)}82%{transform:rotate(30deg)}88%{transform:rotate(-20deg)}94%{transform:rotate(10deg)}}
@keyframes frClapFast{0%,100%{transform:rotate(30deg)}50%{transform:rotate(-30deg)}}
.fr-bell.pressed{animation:frPress .34s cubic-bezier(.3,1.6,.5,1) both!important}
.fr-bell.pressed .fr-bw{animation:frSwingFast .12s ease-in-out 3!important;filter:drop-shadow(0 1px 1px rgba(58,38,48,.28))}
.fr-bell.pressed .fr-cl{animation:frClapFast .12s ease-in-out 3!important}
@keyframes frPress{0%{transform:translateY(0) scale(1)}30%{transform:translateY(5px) scale(1.12,.78)}65%{transform:translateY(-4px) scale(.92,1.14)}100%{transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.fr-bell .fr-cl,.fr-bell.pressed{animation:none!important}}
/* v207b: beat the older .fr-bell img{animation:none!important} */
.fr-bell .fr-bw img.fr-cl{animation:frClap 3.2s ease-in-out infinite!important;transform-origin:49.8% 75%}
.fr-bell:hover .fr-bw img.fr-cl,.fr-bell.has .fr-bw img.fr-cl,.fr-bell.ring .fr-bw img.fr-cl{animation:frClapFast .55s ease-in-out infinite!important}
.fr-bell.pressed .fr-bw img.fr-cl{animation:frClapFast .12s ease-in-out 3!important}
@media (prefers-reduced-motion:reduce){.fr-bell .fr-bw img.fr-cl{animation:none!important}}
/* v209: no dark sparkle on the bell; menu buttons never clipped at the sides */
.fr-bell::after{display:none!important}
.menu-ui.tight{padding-left:18px!important;padding-right:18px!important}
/* v209 gold glisten: metallic sweep + soft aura + glints (light only, no dark outlines) */
.fr-bell{isolation:isolate}
.fr-bell .fr-bw::before{content:"";position:absolute;left:-18%;top:-10%;width:136%;height:120%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,226,110,.75) 0,rgba(255,200,60,.35) 38%,rgba(255,200,60,0) 68%);animation:frAura 2.4s ease-in-out infinite;pointer-events:none}
.fr-sh{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 42%,rgba(255,255,255,1) 50%,rgba(255,236,150,.5) 58%,transparent 70%)!important;background-size:300% 100%!important}
.fr-sh2{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 46%,rgba(255,255,255,.9) 50%,transparent 54%);background-size:300% 100%;background-position:150% 0;-webkit-mask:url(../assets/ui/fr-bell4.webp) center/contain no-repeat;mask:url(../assets/ui/fr-bell4.webp) center/contain no-repeat;animation:frShim 2.6s .35s ease-in-out infinite;mix-blend-mode:screen}
.fr-gl{position:absolute;width:15px;height:15px;pointer-events:none;background:radial-gradient(circle,#fff 0,#fff 18%,rgba(255,244,170,.9) 36%,rgba(255,220,90,0) 70%);clip-path:polygon(50% 0,58% 40%,100% 50%,58% 60%,50% 100%,42% 60%,0 50%,42% 40%);filter:drop-shadow(0 0 3px rgba(255,230,120,.95));animation:frGl 2.1s ease-in-out infinite;opacity:0}
.fr-gl.g1{left:2px;top:12px}.fr-gl.g2{right:0;top:24px;width:11px;height:11px;animation-delay:.7s}.fr-gl.g3{left:6px;bottom:10px;width:10px;height:10px;animation-delay:1.3s}.fr-gl.g4{right:6px;top:0;width:12px;height:12px;animation-delay:.35s}
@keyframes frGl{0%,100%{opacity:0;transform:scale(.2) rotate(0)}45%{opacity:1;transform:scale(1.25) rotate(35deg)}70%{opacity:.5;transform:scale(.8) rotate(60deg)}}
@keyframes frAura{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.fr-bell.has .fr-bw::before{animation-duration:1.2s}
@media (prefers-reduced-motion:reduce){.fr-bell .fr-bw::before,.fr-sh2,.fr-gl{animation:none!important}.fr-gl{opacity:.8}}
/* v210 badge fits 2-3 digits */
.fr-bell.big .fr-bn{min-width:30px;padding:0 6px;right:-12px!important}
.fr-bn{white-space:nowrap}
/* v211 avatar filters: labelled rows, colour dots, clear selected state, result count */
.av-fr{display:flex;align-items:flex-start;gap:10px;margin:8px 0}
.av-fl{flex:none;min-width:64px;padding-top:12px;font:900 15px "Fredoka",sans-serif;color:#3a2630;text-transform:uppercase;letter-spacing:.06em}
.av-fr .av-chips{flex:1;display:flex;flex-wrap:wrap;gap:8px;margin:0}
.av-fr .chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;font:800 16px "Fredoka",sans-serif!important}
.av-fr .chip.on{background:#d9692a!important;color:#fff!important;box-shadow:0 0 0 3px #fff3de,0 0 0 6px #3a2630}
.av-sw{width:18px;height:18px;border-radius:50%;border:2px solid #3a2630;flex:none}
.av-ck{width:16px;height:16px;flex:none;background:#fff;clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 70%)}
.av-count{margin:6px 0 10px;font:800 16px "Fredoka",sans-serif;color:#3a2630}
.av-count b{font-weight:900}
.av-reset{margin-left:8px;min-height:40px;padding:4px 14px;border-radius:999px;border:3px solid #3a2630;background:#fff3de;color:#3a2630;font:900 15px "Fredoka",sans-serif;cursor:pointer}
@media (max-width:520px){.av-fr{flex-direction:column;gap:2px}.av-fl{padding-top:0}}
/* v213: pressing the bell never shows a box shadow (leftover from the old round-button look) */
.fr-bell,.fr-bell:hover,.fr-bell:active,.fr-bell:focus,.fr-bell.pressed,.fr-bell.has,.fr-bell.ring{box-shadow:none!important;background:none!important;border:0!important;outline:none}
.fr-bell:focus-visible{outline:3px solid #3a2630;outline-offset:4px;border-radius:16px}
/* v214 badge text: big, bold, high contrast */
.fr-bn,.fr-badge{background:#d42a1c!important;color:#fff!important;border:3px solid #3a2630!important;font:900 17px/22px "Fredoka",sans-serif!important;min-width:30px!important;height:30px!important;padding:0 7px!important;border-radius:15px!important;text-shadow:0 1px 0 rgba(58,38,48,.6);-webkit-text-stroke:0;box-sizing:border-box;letter-spacing:.02em;text-align:center}
.fr-bn{top:-10px!important;right:-10px!important}
.fr-bell.big .fr-bn{min-width:40px!important;right:-16px!important}
/* v215 responsive: 44px chips, compact scrolling filter rows on small screens */
.av-fr .chip,.av-reset{min-height:44px!important;box-sizing:border-box}
@media (max-width:520px){
.av-fr .av-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:4px 4px 10px;margin:0 -4px;scrollbar-width:thin}
.av-fr .chip{flex:none;white-space:nowrap;scroll-snap-align:start}
.av-fr{margin:4px 0}
}
.av-fr,.av-fr .av-chips{min-width:0;max-width:100%}
@media (max-width:520px){.av-fr{display:block}.av-fr .av-chips{display:flex;width:100%}}
.pf-btn,.pf-edit-av{min-height:44px!important}
/* v218 top row never overflows: bell + avatar + coins + 3 buttons must fit even at 320px */
#screen-menu .menu-top{max-width:calc(100vw - 8px)!important;flex-wrap:nowrap!important;justify-content:flex-end!important;right:calc(4px + var(--sar,0px))!important}
#screen-menu .menu-top > *{min-width:0}
@media (max-width:440px){
#screen-menu .menu-top{gap:4px!important;padding-inline:4px!important}
#screen-menu .menu-top .icon-btn{width:38px!important;height:38px!important;min-width:38px!important;flex:0 0 38px!important}
#screen-menu .menu-top .av-chip{width:42px!important;height:42px!important;flex:0 0 42px!important}
#screen-menu .menu-top .coin-pill{padding-inline:8px!important;font-size:14px!important;flex:0 1 auto!important}
#screen-menu .menu-top .fr-bell{width:44px!important;height:46px!important;margin-left:2px!important;flex:0 0 44px!important}
}
@media (max-width:350px){
#screen-menu .menu-top .icon-btn{width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important}
#screen-menu .menu-top .av-chip{width:38px!important;height:38px!important;flex:0 0 38px!important}
#screen-menu .menu-top .fr-bell{width:40px!important;height:42px!important;flex:0 0 40px!important}
}
/* v219 high-score tile shows its label; sliders get 44px touch height */
.st-hs .st-t small{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important}
input[type=range]{min-height:44px;touch-action:pan-y}
/* v220 level trail: the road ahead is clearly visible (bold burgundy dots, not faint white) */
html body .tr-bg{stroke:#63243f!important;stroke-width:15!important;stroke-dasharray:1 22!important;stroke-linecap:round;opacity:.9!important}
html body .tr-fg{stroke-width:13!important}
html body .tr-bg{stroke-width:17!important;stroke-dasharray:1 16!important}
@media (max-width:350px){
#screen-menu .menu-top{gap:3px!important}
#screen-menu .menu-top .icon-btn{width:38px!important;min-width:38px!important;flex:0 0 38px!important;height:44px!important}
#screen-menu .menu-top .coin-pill{padding-inline:6px!important;font-size:13px!important}
#screen-menu .menu-top .av-chip{width:40px!important;height:40px!important;flex:0 0 40px!important}
#screen-menu .menu-top .fr-bell{width:38px!important;height:42px!important;flex:0 0 38px!important}
}
/* v223 landscape phones: the horizontal world strip must scroll */
@media (orientation:landscape){#map-worlds{overflow-x:auto!important;-webkit-overflow-scrolling:touch}}
.pose-chip{min-height:44px!important}
/* v227 helper card: bold, big, dark text on solid cream; tap to close */
html body .tipcard{pointer-events:auto!important;cursor:pointer;max-width:min(86vw,440px)!important;padding:12px 20px 14px 12px!important}
html body .tipcard .tc-text{font:800 17px/1.35 "Fredoka",system-ui,sans-serif!important;color:#2e1822!important;letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,246,228,.9)}
html body .tipcard .tc-text b{font-weight:900!important;color:#b5471f!important}
html body .tipcard.on{background-color:#fff6e4!important;border-radius:20px;box-shadow:0 4px 0 rgba(58,38,48,.35)!important}
@media (max-width:760px){html body .tipcard .tc-text{font-size:16px!important;line-height:1.35!important}html body .tipcard{max-width:min(88vw,330px)!important}}
html body .bubble,html body #host .bubble,html body #toast,html body #level-banner small{font-weight:700!important;color:#2e1822!important}
/* v229 high-score label has a fixed size, so a short number ("0") can't shrink it */
#screen-menu #mstats .ms:nth-child(1) small{width:clamp(112px,32vw,150px)!important;min-width:112px!important;height:clamp(40px,11.6vw,52px)!important;background-position:left center!important;margin:0 0 2px -4px!important}
#screen-menu #mstats .ms:nth-child(1) > div{min-width:clamp(112px,32vw,150px)}
#screen-menu #mstats .ms:nth-child(1) small{height:clamp(46px,12.5vw,56px)!important;width:clamp(120px,34vw,150px)!important;min-width:120px!important;margin-bottom:0!important}
/* v230 high-score label: same size as its neighbours, centred (beats the older "html body" rules) */
html body #screen-menu #mstats .ms:nth-child(1) small{width:clamp(120px,34vw,160px)!important;min-width:120px!important;height:clamp(46px,12.5vw,58px)!important;background-position:center!important;margin:0 auto 2px!important;transform:rotate(-1.5deg)!important;text-align:center}
html body #screen-menu #mstats .ms:nth-child(1) > div{align-items:center;text-align:center}
/* v240 floating back button: always reachable at the top of inner screens */
.nb-top{display:none;position:absolute;z-index:40;left:calc(8px + var(--sal,0px));top:calc(8px + var(--sat,0px));width:48px;height:48px;min-width:48px;padding:0;align-items:center;justify-content:center}
.nb-top.on{display:inline-flex}
#screen-over .nb-top,#screen-pause .nb-top{display:none!important}
/* v240 whimsical "All patches": a stitched yellow patch you can always reach (sticks to the top while you scroll) */
html body .pt-back{position:sticky;top:6px;z-index:5;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 20px 9px 16px;margin:0 0 10px;background:linear-gradient(180deg,#ffe98a,#ffc83d)!important;border:3px solid #4a2f34!important;border-radius:26px 18px 28px 20px!important;box-shadow:0 5px 0 #8a5a1a,inset 0 0 0 3px rgba(255,255,255,.55);color:#3a2630;font:900 18px "Fredoka",system-ui,sans-serif!important;letter-spacing:.01em;transform:rotate(-2deg);transition:transform .2s cubic-bezier(.34,1.8,.5,1),box-shadow .12s;cursor:pointer;background-clip:padding-box}
html body .pt-back::before{content:"";position:absolute;inset:6px;border:2px dashed rgba(122,74,16,.55);border-radius:20px 14px 22px 16px;pointer-events:none}
html body .pt-back::after{content:"\2726";font-size:16px;color:#c26a00;animation:taTwinkle 1.8s ease-in-out infinite}
html body .pt-back:hover{transform:rotate(1.5deg) scale(1.06)}
html body .pt-back:active{transform:translateY(4px) scale(.95,.9) rotate(-2deg);box-shadow:0 1px 0 #8a5a1a,inset 0 0 0 3px rgba(255,255,255,.55)}
@media (prefers-reduced-motion:reduce){html body .pt-back::after{animation:none}}
html body .pt-card.in-detail .pop-ico,html body .pt-card.in-detail .pt-h,html body .pt-card.in-detail .pt-sub,html body .pt-card.in-detail .pt-next{display:none!important}
html body .pt-card.in-detail{padding-top:62px}
html body .pt-card.in-detail .pt-detail .pt-back{margin-top:0}
/* v243 profile tabs */
.pf-tabs{display:flex;gap:8px;margin:6px 0 12px;padding:4px;border-radius:999px;background:rgba(58,38,48,.08)}
.pf-tab{flex:1 1 0;min-height:46px;padding:6px 10px;border:3px solid #3a2630;border-radius:999px;background:#fff3de;color:#3a2630;font:900 17px "Fredoka",system-ui,sans-serif;cursor:pointer;box-shadow:0 3px 0 rgba(58,38,48,.35);transition:transform .15s cubic-bezier(.34,1.8,.5,1)}
.pf-tab.on{background:#d9692a;color:#fff;transform:translateY(1px);box-shadow:0 1px 0 rgba(58,38,48,.35)}
.pf-tab:active{transform:scale(.95)}
.pf-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
/* v244 calm screen: while running, only score, hearts, energy and pause stay on screen */
body.calm #hud .hpill.dist,body.calm #hud .hrow > .hpill:not(.hp-pill),body.calm #hud .coin-row,body.calm #hud .bar-pill.combo,body.calm #hud .lvrow,body.calm #hud .run-coins{display:none!important}
/* v245 manila-folder tabs: tabs stick up from a folder sheet, the open tab joins the page */
.pf-tabs{display:flex;align-items:flex-end;gap:4px;margin:10px 0 0;padding:0 14px;background:none;border-radius:0;position:relative;z-index:2}
.pf-tab{flex:0 1 auto;min-width:92px;min-height:46px;margin:0;padding:8px 20px 6px;border:3px solid #3a2630;border-bottom:0;border-radius:18px 18px 0 0;background:linear-gradient(180deg,#e9c987,#d9b06a);color:#6a4a2a;font:900 18px "Fredoka",system-ui,sans-serif;box-shadow:inset 0 -6px 0 rgba(122,74,16,.18);cursor:pointer;transform:translateY(5px);transition:transform .18s cubic-bezier(.34,1.8,.5,1),filter .12s;position:relative}
.pf-tab:nth-child(2){min-width:104px}.pf-tab:nth-child(3){min-width:96px}
.pf-tab:hover{transform:translateY(2px);filter:brightness(1.05)}
.pf-tab:active{transform:translateY(6px) scale(.97)}
.pf-tab.on{background:linear-gradient(180deg,#fff0b8,#ffe7a0);color:#3a2630;transform:translateY(3px);box-shadow:none;z-index:3;margin-bottom:-3px;padding-bottom:9px}
.pf-tab.on::after{content:"";position:absolute;left:3px;right:3px;bottom:-3px;height:5px;background:#ffe7a0}
.pf-sheet{position:relative;margin:0 0 6px;padding:16px 12px 12px;border:3px solid #3a2630;border-radius:0 20px 20px 20px;background:#ffe7a0;box-shadow:0 5px 0 rgba(58,38,48,.28)}
.pf-sheet::before{content:"";position:absolute;inset:7px;border:2px dashed rgba(138,90,26,.4);border-radius:0 14px 14px 14px;pointer-events:none}
.pf-sheet > *{position:relative}
.pf-sheet .pf-sec{background:rgba(255,250,232,.85)}
@media (max-width:400px){.pf-tabs{padding:0 6px}.pf-tab{min-width:0;flex:1 1 0;padding:8px 8px 6px;font-size:17px}}
@media (prefers-reduced-motion:reduce){.pf-tab{transition:none}}
/* v246 crayon name tag: real name on the line, stamp animation */
.nt{position:relative;container-type:inline-size;width:min(100%,360px);aspect-ratio:962/446;margin:4px auto 12px;transform:rotate(-2deg);filter:drop-shadow(0 6px 0 rgba(31,43,94,.28));-webkit-tap-highlight-color:transparent}
.nt-bg{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.nt-name{position:absolute;left:9%;right:9%;top:57%;bottom:14%;display:flex;align-items:flex-end;justify-content:center;white-space:nowrap;line-height:1;padding-bottom:1%;color:#1f2b5e;font-family:"Agrave Pro","Fredoka",system-ui,sans-serif;font-weight:800;font-size:min(13cqw,calc(86cqw / (var(--n,6) * .58)));letter-spacing:.01em;text-shadow:1px 1px 0 rgba(255,255,255,.45);filter:url(#rough)}
.nt-sp{position:absolute;width:9cqw;height:9cqw;opacity:0;pointer-events:none;background:#ffd234;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 1px #1f2b5e)}
.nt-sp.s1{left:-3%;top:6%}.nt-sp.s2{right:-2%;top:2%;width:11cqw;height:11cqw}.nt-sp.s3{left:12%;bottom:-4%;width:7cqw;height:7cqw}.nt-sp.s4{right:14%;bottom:-5%}.nt-sp.s5{left:44%;top:-6%;width:7cqw;height:7cqw}.nt-sp.s6{right:-4%;bottom:34%;width:7cqw;height:7cqw}.nt-sp.s7{left:-4%;bottom:30%;width:6cqw;height:6cqw}
.nt.stamp{animation:ntStamp .75s cubic-bezier(.3,1.7,.5,1) both}
.nt.stamp .nt-name{animation:ntWrite 1s cubic-bezier(.4,.1,.3,1) .22s both}
.nt.stamp .nt-sp{animation:ntSpark 1.1s ease-out both}
.nt.stamp .nt-sp.s2{animation-delay:.08s}.nt.stamp .nt-sp.s3{animation-delay:.16s}.nt.stamp .nt-sp.s4{animation-delay:.24s}.nt.stamp .nt-sp.s5{animation-delay:.12s}.nt.stamp .nt-sp.s6{animation-delay:.3s}.nt.stamp .nt-sp.s7{animation-delay:.2s}
@keyframes ntStamp{0%{transform:rotate(-9deg) scale(1.55);opacity:.2}50%{transform:rotate(1deg) scale(.93);opacity:1}72%{transform:rotate(-3.5deg) scale(1.04)}100%{transform:rotate(-2deg) scale(1)}}
@keyframes ntWrite{0%{clip-path:inset(-20% 100% -20% 0)}100%{clip-path:inset(-20% -10% -20% 0)}}
@keyframes ntSpark{0%{opacity:0;transform:scale(.2) rotate(0)}30%{opacity:1;transform:scale(1.25) rotate(40deg)}100%{opacity:0;transform:scale(.6) rotate(110deg) translateY(-14px)}}
.pf-namerow{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:nowrap}
.pf-namerow .pg-in{flex:1 1 auto;min-width:0;text-align:center;font:800 20px "Fredoka",sans-serif;min-height:48px}
.pf-namerow .pf-btn{flex:none;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.nt.stamp,.nt.stamp .nt-name,.nt.stamp .nt-sp{animation:none!important}.nt.stamp .nt-sp{opacity:0}}
html body .nt .nt-name{font-family:"Agrave Pro","Fredoka",system-ui,sans-serif!important;font-weight:800!important}
.bd-name .nt{margin-bottom:8px}
.nt-name{top:63%!important;bottom:13%!important;font-size:min(10.5cqw,calc(84cqw / (var(--n,6) * .58)))!important}
html body .nt .nt-name{-webkit-text-stroke:1.6px #1f2b5e;text-shadow:1px 1px 0 rgba(255,255,255,.5)}
/* v251 calmer stamp: no vanishing name, no heavy filters while animating */
html body .nt{filter:none!important;isolation:isolate}
html body .nt::before{content:"";position:absolute;left:2%;right:1%;top:6%;bottom:-3%;border-radius:12% / 22%;background:rgba(31,43,94,.26);transform:translateY(6px);z-index:-1}
html body .nt .nt-name{filter:none!important}
html body .nt.stamp .nt-name{animation:none!important}
html body .nt .nt-name.ink{animation:ntInk .55s cubic-bezier(.3,1.8,.5,1) both!important}
@keyframes ntInk{0%{transform:scale(1.8) rotate(-4deg);opacity:0}45%{opacity:1}65%{transform:scale(.93)}100%{transform:scale(1) rotate(0);opacity:1}}
@media (prefers-reduced-motion:reduce){html body .nt .nt-name.ink{animation:none!important}}
.nt-name{font-size:min(10.5cqw,calc(84cqw / var(--w,3)))!important}
html body #screen-outfits .btn.small.chip.pose-chip,html body #screen-outfits .pose-chip{min-height:44px!important}
/* v263 the swinging bell needs a little room at the right edge on wider screens */
@media (min-width:441px){#screen-menu .menu-top{right:calc(18px + var(--sar,0px))!important}}
/* v265 delightful Hi / Collect buttons: candy pills with our spinning star coin */
.fr-card .pf-btn.fr-hi,.fr-card .pf-btn.fr-collect{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:6px 16px 8px 14px;position:relative;font:900 17px "Fredoka",system-ui,sans-serif;color:#2e1822;border:3px solid #3a2630;border-radius:999px 24px 999px 26px;box-shadow:0 5px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.55);transition:transform .18s cubic-bezier(.34,1.8,.5,1),box-shadow .12s;white-space:nowrap}
.fr-card .pf-btn.fr-hi{background:linear-gradient(180deg,#c6f2a6,#7fd66d)}
.fr-card .pf-btn.fr-collect{background:linear-gradient(180deg,#fff0a0,#ffcf3f)}
.fr-card .pf-btn.fr-collect.all{background:linear-gradient(180deg,#ffe27a,#ffb02e)}
.fr-card .fr-hi:hover,.fr-card .fr-collect:hover{transform:translateY(-2px) rotate(-2deg) scale(1.05)}
.fr-card .fr-hi:active,.fr-card .fr-collect:active{transform:translateY(4px) scale(.94,.9);box-shadow:0 1px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.55)}
.fr-coin{width:26px;height:26px;flex:none;filter:drop-shadow(0 2px 0 rgba(58,38,48,.35));animation:rwSpin 1.8s ease-in-out infinite}
.fr-hi b,.fr-collect b{font-weight:900;font-size:18px;color:#8a4a00;text-shadow:0 1px 0 rgba(255,255,255,.6);letter-spacing:.01em}
.fr-hi:hover .fr-coin,.fr-collect:hover .fr-coin{animation-duration:.5s}
.fr-card .pf-btn.fr-hi.sent{background:linear-gradient(180deg,#f3ead2,#e2d4b0);color:#5a4048;box-shadow:0 3px 0 rgba(58,38,48,.3);opacity:1}
.fr-chk{width:18px;height:18px;flex:none;border-radius:50%;background:#4fc26b;border:2px solid #3a2630;position:relative}
.fr-chk::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.fr-card .pf-btn.fr-hi.pressed{animation:ntPop .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes ntPop{0%{transform:scale(1)}40%{transform:scale(1.15) rotate(-4deg)}100%{transform:scale(1)}}
.fr-fly{position:fixed;z-index:99999;width:36px;height:36px;pointer-events:none;animation:frFlyUp 1s cubic-bezier(.2,.9,.3,1) forwards;filter:drop-shadow(0 3px 0 rgba(58,38,48,.35))}
@keyframes frFlyUp{0%{transform:translateY(0) scale(.6) rotate(0);opacity:0}15%{opacity:1;transform:translateY(-14px) scale(1.2) rotate(40deg)}100%{transform:translateY(-120px) scale(.7) rotate(360deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.fr-coin{animation:none}.fr-fly{animation:none;opacity:0}.fr-card .pf-btn.fr-hi.pressed{animation:none}}
.fr-card .pf-btn.fr-hi,.fr-card .pf-btn.fr-collect{border-radius:26px 22px 28px 24px!important}
/* v267 podium crown = real gold with a shape-masked shimmer (no sparkles); Send hi = mail + coins */
span.fr-crown.gold{position:relative;display:block;width:62px;margin:0 auto -6px;animation:frWob 2.6s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 3px 0 rgba(112,62,14,.4)) drop-shadow(0 0 8px rgba(255,196,50,.75))}
span.fr-crown.gold img{display:block;width:100%;height:auto;border:0!important;background:none!important;border-radius:0!important}
.fr-gshim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.35) 44%,rgba(255,255,255,1) 50%,rgba(255,240,170,.5) 57%,transparent 66%);background-size:300% 100%;background-position:150% 0;-webkit-mask:url(../assets/ui/fr-crown7.webp) center/contain no-repeat;mask:url(../assets/ui/fr-crown7.webp) center/contain no-repeat;animation:frShim 2.2s ease-in-out infinite;mix-blend-mode:screen}
.fr-card .pf-btn.fr-hi{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:5px 16px 6px 10px;background:linear-gradient(180deg,#fff7dc,#ffe9a8)!important;border:3px solid #3a2630!important;border-radius:999px!important;box-shadow:0 5px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.7)!important;color:#2e1822;font:900 17px "Fredoka",system-ui,sans-serif}
.fr-mail{width:36px;height:auto;flex:none;transform-origin:50% 80%;animation:frMailHop 2.6s ease-in-out infinite;filter:drop-shadow(0 2px 0 rgba(58,38,48,.3))}
.fr-pay{display:inline-flex;align-items:center;gap:3px;padding:2px 9px 2px 4px;border-radius:999px;background:rgba(255,200,60,.35);border:2px solid rgba(138,74,0,.5)}
.fr-pay .fr-coin{width:22px;height:22px}
.fr-card .pf-btn.fr-hi:hover .fr-mail{animation:frMailHop .5s ease-in-out infinite}
.fr-card .pf-btn.fr-hi.sent{background:linear-gradient(180deg,#f3ead2,#e2d4b0)!important;box-shadow:0 3px 0 rgba(58,38,48,.3)!important}
.fr-card .pf-btn.fr-hi.sent .fr-mail{animation:none;opacity:.8}
@keyframes frMailHop{0%,70%,100%{transform:translateY(0) rotate(0)}78%{transform:translateY(-6px) rotate(-10deg)}86%{transform:translateY(0) rotate(8deg)}93%{transform:translateY(-2px) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){span.fr-crown.gold,.fr-gshim,.fr-mail{animation:none!important}}
/* the shimmer only appears once the crown itself has loaded (no white blob while it loads) */
span.fr-crown.gold:not(.rd) .fr-gshim{display:none}
span.fr-crown.gold:not(.rd){visibility:hidden}
html body span.fr-crown.gold{background:none!important;border:0!important;border-radius:0!important;min-width:0!important;height:auto!important;font-size:0!important;line-height:0;box-shadow:none!important;padding:0!important}
/* v270 the user's own golden crown on the podium, with a gold glisten: a bright sweep + a slower warm one, both clipped to the crown's shape */
html body span.fr-crown.gold{width:78px!important;margin:0 auto -8px!important;filter:drop-shadow(0 3px 0 rgba(112,62,14,.45)) drop-shadow(0 0 10px rgba(255,190,40,.8))!important;animation:frWob 2.8s ease-in-out infinite,frGlow 2.2s ease-in-out infinite}
html body span.fr-crown.gold::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 42%,rgba(255,236,150,.85) 50%,transparent 58%);background-size:320% 100%;background-position:160% 0;-webkit-mask:url(../assets/ui/fr-crown7.webp) center/contain no-repeat;mask:url(../assets/ui/fr-crown7.webp) center/contain no-repeat;animation:frShim 2.2s 1.1s ease-in-out infinite;mix-blend-mode:screen}
@keyframes frGlow{0%,100%{filter:drop-shadow(0 3px 0 rgba(112,62,14,.45)) drop-shadow(0 0 6px rgba(255,190,40,.55))}50%{filter:drop-shadow(0 3px 0 rgba(112,62,14,.45)) drop-shadow(0 0 14px rgba(255,205,70,1))}}
@media (prefers-reduced-motion:reduce){html body span.fr-crown.gold,html body span.fr-crown.gold::after{animation:none!important}}
/* v271 the crown is WORN: it overlaps the top of the winner's profile picture, tilted a little, with its shadow falling on the avatar */
html body .fr-pl.fr-gold{position:relative;padding-top:12px}
html body .fr-pl.fr-gold .fr-lanky{position:relative;z-index:1}
html body span.fr-crown.gold{position:relative;z-index:3;width:70px!important;margin:0 auto -27px!important;transform-origin:50% 90%;rotate:-5deg}
html body span.fr-crown.gold::before{content:"";position:absolute;left:12%;right:12%;bottom:-8%;height:22%;border-radius:50%;background:rgba(58,38,48,.35);filter:blur(3px);z-index:-1}
/* v271 softer gold glisten so the crown's jewels stay visible while it sweeps */
html body .fr-gshim{background:linear-gradient(105deg,transparent 40%,rgba(255,232,140,.45) 47%,rgba(255,248,200,.8) 50%,rgba(255,232,140,.45) 53%,transparent 60%)!important;background-size:300% 100%!important}
html body span.fr-crown.gold::after{background:linear-gradient(110deg,transparent 44%,rgba(255,226,120,.5) 50%,transparent 56%)!important;background-size:320% 100%!important}
/* v273 friend rows: mailbox "Send hi +5" pill, bay-blue Challenge, plain Remove friend; Friends tab inside the profile */
html body .fr-line .fr-acts{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:6px}
html body .fr-acts .fr-hi{flex:1 1 100%;justify-content:center;min-height:52px}
html body .fr-acts .fr-chal,html body .fr-acts .fr-rm{flex:1 1 calc(50% - 4px);min-height:46px;justify-content:center;white-space:normal;line-height:1.1;text-align:center;border-radius:999px!important}
html body .fr-acts .fr-chal{background:linear-gradient(180deg,#8ae6ff,#14a9f2)!important;color:#05304e!important;border:3px solid #3a2630!important;font:900 17px "Fredoka",system-ui,sans-serif;box-shadow:0 5px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.6)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)}
html body .fr-acts .fr-chal:hover{transform:translateY(-2px) rotate(-1.5deg) scale(1.04)}
html body .fr-acts .fr-chal:active{transform:translateY(4px) scale(.95)}
html body .fr-acts .fr-chal[disabled]{background:linear-gradient(180deg,#d7eef7,#b8d6e4)!important;color:#44606e!important;box-shadow:0 3px 0 rgba(58,38,48,.3)!important}
html body .fr-acts .fr-rm{background:#fff3de!important;color:#7a3a2a!important;border:3px solid #3a2630!important;font:800 15px "Fredoka",system-ui,sans-serif;box-shadow:0 4px 0 rgba(58,38,48,.35)!important}
html body .fr-acts .fr-rm.arm{background:#ffd9c9!important;color:#9a1f10!important}
html body .fr-mail{width:46px!important;height:auto;flex:none}
html body .fr-card .pf-btn.fr-hi{padding:4px 16px 5px 10px}
.pf-tb{display:inline-block;margin-left:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#d42a1c;color:#fff;border:2px solid #3a2630;font:900 13px/18px "Fredoka",sans-serif;text-align:center;font-style:normal;box-sizing:border-box;vertical-align:middle}
.pf-frhost.fr-card{position:static;width:100%!important;max-width:none!important;max-height:none!important;overflow:visible!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;margin:0}
@media (max-width:440px){.pf-tab{padding:8px 6px 6px;font-size:16px;min-width:0}}
/* v273 the crown is as wide as the profile circle (a little wider), resting on its top edge like a crown on a round head */
html body span.fr-crown.gold{width:100px!important;margin:-6px auto -34px!important;rotate:-4deg}
html body .fr-pl.fr-gold{padding-top:16px;overflow:visible}
html body .fr-pl.fr-gold .fr-lanky{width:76px;height:76px}
html body span.fr-crown.gold{width:96px!important;margin:-2px auto -13px!important;rotate:-3deg}
/* v275 My Explorer Profile matches the width of the big buttons above it */
html body #screen-menu .pf-pill{display:flex!important;width:calc(100% - 12px)!important;max-width:none!important;box-sizing:border-box;margin:12px auto 4px!important}
/* v276 four folder tabs must fit even a 320px phone */
@media (max-width:480px){html body .pf-tabs .pf-tab,html body .pf-tabs .pf-tab:nth-child(n){min-width:0!important;flex:1 1 0!important;padding:8px 2px 6px!important;font-size:15px!important;white-space:nowrap;overflow:hidden}
html body .pf-tabs{padding:0 4px;gap:3px}.pf-tab .pf-tb{margin-left:3px;min-width:18px;height:18px;font-size:11px;line-height:14px;padding:0 4px}}
/* v278 confirmation state: the pressed button turns green and says what happened; copy button is icon + short label */
.flash-ok{background:linear-gradient(180deg,#c6f2a6,#6fd05f)!important;color:#173a12!important;border-color:#3a2630!important;animation:flashPop .4s cubic-bezier(.3,1.8,.5,1)}
.flash-ok .ok-chk{display:inline-block;flex:none;width:20px;height:20px;margin-right:6px;border-radius:50%;background:#2fa84f;border:2px solid #3a2630;position:relative;vertical-align:middle}
.flash-ok .ok-chk::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:10px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.flash-ok span{vertical-align:middle;font-weight:900}
@keyframes flashPop{0%{transform:scale(1)}40%{transform:scale(1.12) rotate(-2deg)}100%{transform:scale(1)}}
.fr-copy{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.fr-copy svg{flex:none;color:#3a2630}
.fr-me .fr-row .pf-btn{flex:1 1 auto;min-width:0}
@media (prefers-reduced-motion:reduce){.flash-ok{animation:none}}
/* v279 Remove friend: rich vivid red with white text (every part of the gradient keeps 5:1+ contrast with white) */
html body .fr-acts .fr-rm{background:linear-gradient(180deg,#d42a22,#b3130e)!important;color:#fff!important;border:3px solid #3a2630!important;font:900 16px "Fredoka",system-ui,sans-serif!important;text-shadow:0 1px 0 rgba(0,0,0,.35);box-shadow:0 5px 0 rgba(58,38,48,.5),inset 0 3px 0 rgba(255,255,255,.28)!important}
html body .fr-acts .fr-rm:hover{transform:translateY(-2px) rotate(1.5deg) scale(1.04);filter:brightness(1.06)}
html body .fr-acts .fr-rm:active{transform:translateY(4px) scale(.95)}
html body .fr-acts .fr-rm.arm{background:linear-gradient(180deg,#a8110c,#7d0a07)!important;color:#fff!important;animation:flashPop .4s cubic-bezier(.3,1.8,.5,1)}
html body .fr-acts .fr-rm:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #3a2630}
/* v280 the mailbox delivers: it squashes, a letter pops out of its mouth, flutters away, and it settles (hover = faster) */
html body .fr-card .pf-btn.fr-hi{overflow:visible}
html body .fr-mbx{position:relative;display:inline-block;width:46px;flex:none;overflow:visible}
html body .fr-mbx .fr-mail{display:block;width:100%!important;height:auto;animation:frBox 3.6s ease-in-out infinite;transform-origin:50% 100%}
html body .fr-mbx .fr-letter{position:absolute;left:46%;top:14%;width:24px;height:auto;opacity:0;pointer-events:none;z-index:3;transform-origin:50% 100%;animation:frLetter 3.6s ease-in-out infinite;filter:drop-shadow(0 2px 0 rgba(58,38,48,.35))}
html body .fr-card .pf-btn.fr-hi:hover .fr-mail,html body .fr-card .pf-btn.fr-hi:hover .fr-letter{animation-duration:1.6s}
html body .fr-card .pf-btn.fr-hi.sent .fr-mail{animation:none!important}
@keyframes frBox{0%,56%,100%{transform:translateY(0) scale(1,1) rotate(0)}60%{transform:translateY(1px) scale(1.08,.9) rotate(0)}66%{transform:translateY(-5px) scale(.94,1.1) rotate(-4deg)}74%{transform:translateY(0) scale(1.04,.96) rotate(2deg)}82%{transform:translateY(-1px) scale(1,1) rotate(-1deg)}}
@keyframes frLetter{0%,60%{opacity:0;transform:translate(0,8px) scale(.3) rotate(0)}66%{opacity:1;transform:translate(2px,-4px) scale(1) rotate(-10deg)}76%{opacity:1;transform:translate(12px,-20px) scale(1) rotate(14deg)}88%{opacity:.9;transform:translate(24px,-34px) scale(.9) rotate(30deg)}95%,100%{opacity:0;transform:translate(30px,-44px) scale(.7) rotate(42deg)}}
@media (prefers-reduced-motion:reduce){html body .fr-mbx .fr-mail,html body .fr-mbx .fr-letter{animation:none!important}html body .fr-mbx .fr-letter{opacity:0}}
/* v281 remove-friend confirmation */
.fr-confirm{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,12,30,.62)}
.fr-cf-card{width:min(380px,100%);box-sizing:border-box;padding:22px 18px 18px;border:4px solid #3a2630;border-radius:26px 20px 28px 22px;background:#fff3de;box-shadow:0 8px 0 rgba(58,38,48,.5);text-align:center;color:#3a2630;animation:flashPop .35s cubic-bezier(.3,1.8,.5,1)}
.fr-cf-card h3{margin:0 0 8px;font:900 24px "Fredoka",system-ui,sans-serif;overflow-wrap:anywhere}
.fr-cf-card p{margin:0 0 16px;font:700 16px/1.4 "Fredoka",system-ui,sans-serif}
.fr-cf-row{display:flex;gap:10px;flex-wrap:wrap}
.fr-cf-row .pf-btn{flex:1 1 140px;min-height:50px;border-radius:999px!important;font:900 17px "Fredoka",system-ui,sans-serif;border:3px solid #3a2630!important;box-shadow:0 5px 0 rgba(58,38,48,.45)!important}
.fr-cf-keep{background:linear-gradient(180deg,#8ae6ff,#14a9f2)!important;color:#05304e!important}
.fr-cf-rm{background:linear-gradient(180deg,#d42a22,#b3130e)!important;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.35)}
/* v282 red confirmation: white text, white button, a big X that pops in and wobbles */
.fr-confirm{background:rgba(60,8,8,.72)}
.fr-cf-card{position:relative;padding:74px 18px 18px!important;margin-top:60px;background:linear-gradient(180deg,#d9302a,#a8110c)!important;border:4px solid #3a2630!important;color:#fff!important;box-shadow:0 8px 0 rgba(58,38,48,.6),inset 0 4px 0 rgba(255,255,255,.22)!important}
.fr-cf-card h3{color:#fff!important;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.fr-cf-card p{color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.28)}
.fr-cf-x{position:absolute;left:50%;top:-62px;width:120px;height:120px;margin-left:-60px;animation:xPop .6s cubic-bezier(.3,1.9,.5,1) both,xWob 2.4s .6s ease-in-out infinite;filter:drop-shadow(0 6px 0 rgba(58,38,48,.45))}
.fr-cf-x .xa,.fr-cf-x .xb{stroke-dasharray:90;stroke-dashoffset:90;animation:xDraw .35s ease-out .35s forwards}
.fr-cf-x .xb{animation-delay:.55s}
@keyframes xPop{0%{transform:scale(0) rotate(-120deg)}70%{transform:scale(1.18) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes xWob{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-9deg) scale(1.05)}50%{transform:rotate(0) scale(1)}75%{transform:rotate(9deg) scale(1.05)}}
@keyframes xDraw{to{stroke-dashoffset:0}}
.fr-cf-keep{background:#fff!important;color:#a8110c!important;text-shadow:none!important}
.fr-cf-rm{background:transparent!important;color:#fff!important;border:3px solid #fff!important;box-shadow:0 5px 0 rgba(0,0,0,.25)!important}
.fr-cf-row .pf-btn:hover{transform:translateY(-2px) rotate(-1.5deg) scale(1.04)}
.fr-cf-row .pf-btn:active{transform:translateY(4px) scale(.95)}
.fr-cf-row .pf-btn:focus-visible{outline:4px solid #ffd23f;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fr-cf-x,.fr-cf-x .xa,.fr-cf-x .xb{animation:none!important;stroke-dashoffset:0}}
.fr-cf-h{margin:0 0 8px;font:900 26px/1.15 "Fredoka",system-ui,sans-serif;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3);overflow-wrap:anywhere}
/* v283 "Keep friend" is the safe, green choice */
html body .fr-cf-keep{background:linear-gradient(180deg,#8cf27a,#34c552)!important;color:#0b3012!important;border:3px solid #3a2630!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important;box-shadow:0 5px 0 rgba(0,0,0,.3),inset 0 3px 0 rgba(255,255,255,.55)!important}
/* v285 the "Saved!" pill: short, green, same pill style - never cramped */
html body .av-pill.saved{background:linear-gradient(180deg,#c6f2a6,#6fd05f)!important;color:#143a10!important;font:900 17px "Fredoka",system-ui,sans-serif!important;border-color:#3a2630!important;padding:5px 18px 6px 12px!important;display:inline-flex;align-items:center;gap:6px;animation:flashPop .4s cubic-bezier(.3,1.8,.5,1)}
html body .av-pill.saved::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:#2fa84f url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;border:2px solid #3a2630;box-sizing:border-box}
html body .av-pill.dirty{font-weight:900!important}
/* v286 every page gets its own fun back-button colour (top icon, bottom button and the floating one all match) */
html body #screen-outfits :is([data-act=back],[data-act=avBack],[data-act=mapClose]),html body .nb-top[data-scr=screen-outfits]{background:linear-gradient(180deg,#ffcf8a,#ff8f2e)!important;color:#2e1822!important;border:3px solid #3a2630!important;box-shadow:0 4px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.55)!important;background-image:linear-gradient(180deg,#ffcf8a,#ff8f2e)!important}
html body #screen-missions :is([data-act=back],[data-act=avBack],[data-act=mapClose]),html body .nb-top[data-scr=screen-missions]{background:linear-gradient(180deg,#b9f59a,#4fc95a)!important;color:#2e1822!important;border:3px solid #3a2630!important;box-shadow:0 4px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.55)!important;background-image:linear-gradient(180deg,#b9f59a,#4fc95a)!important}
html body #screen-map :is([data-act=back],[data-act=avBack],[data-act=mapClose]),html body .nb-top[data-scr=screen-map]{background:linear-gradient(180deg,#a9e2ff,#2fa6ee)!important;color:#2e1822!important;border:3px solid #3a2630!important;box-shadow:0 4px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.55)!important;background-image:linear-gradient(180deg,#a9e2ff,#2fa6ee)!important}
html body #screen-progress :is([data-act=back],[data-act=avBack],[data-act=mapClose]),html body .nb-top[data-scr=screen-progress]{background:linear-gradient(180deg,#fff08a,#ffc72c)!important;color:#2e1822!important;border:3px solid #3a2630!important;box-shadow:0 4px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.55)!important;background-image:linear-gradient(180deg,#fff08a,#ffc72c)!important}
html body #screen-board :is([data-act=back],[data-act=avBack],[data-act=mapClose]),html body .nb-top[data-scr=screen-board]{background:linear-gradient(180deg,#ffb8d4,#ff6fa6)!important;color:#2e1822!important;border:3px solid #3a2630!important;box-shadow:0 4px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.55)!important;background-image:linear-gradient(180deg,#ffb8d4,#ff6fa6)!important}
html body #screen-settings :is([data-act=back],[data-act=avBack],[data-act=mapClose]),html body .nb-top[data-scr=screen-settings]{background:linear-gradient(180deg,#a4f2e2,#2fc4ae)!important;color:#2e1822!important;border:3px solid #3a2630!important;box-shadow:0 4px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.55)!important;background-image:linear-gradient(180deg,#a4f2e2,#2fc4ae)!important}
html body #screen-how :is([data-act=back],[data-act=avBack],[data-act=mapClose]),html body .nb-top[data-scr=screen-how]{background:linear-gradient(180deg,#ffb9a6,#ff7a5c)!important;color:#2e1822!important;border:3px solid #3a2630!important;box-shadow:0 4px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.55)!important;background-image:linear-gradient(180deg,#ffb9a6,#ff7a5c)!important}
html body #screen-avatar :is([data-act=back],[data-act=avBack],[data-act=mapClose]),html body .nb-top[data-scr=screen-avatar]{background:linear-gradient(180deg,#e6f78f,#9cd63b)!important;color:#2e1822!important;border:3px solid #3a2630!important;box-shadow:0 4px 0 rgba(58,38,48,.45),inset 0 3px 0 rgba(255,255,255,.55)!important;background-image:linear-gradient(180deg,#e6f78f,#9cd63b)!important}
html body :is(#screen-outfits,#screen-missions,#screen-map,#screen-progress,#screen-board,#screen-settings,#screen-how,#screen-avatar) :is([data-act=back],[data-act=avBack],[data-act=mapClose]):hover,html body .nb-top:hover{transform:translateY(-2px) rotate(-4deg) scale(1.08)}
html body :is([data-act=back],[data-act=avBack],[data-act=mapClose]):active,html body .nb-top:active{transform:translateY(3px) scale(.92)!important}
html body .nb-top svg{color:#2e1822}
/* v291 Shop / My Wardrobe bar: solid cream track, high-contrast tabs */
html body #screen-outfits .of-modes{background:#fff3de!important;background-image:none!important;border:3px solid #3a2630!important;border-radius:999px!important;padding:5px!important;gap:6px!important;box-shadow:0 4px 0 rgba(58,38,48,.4),inset 0 2px 0 rgba(255,255,255,.7)!important}
html body #screen-outfits .of-modes .btn.chip{min-height:50px!important;border-radius:999px!important;background:transparent!important;background-image:none!important;color:#2e1822!important;border:0!important;box-shadow:none!important;font:900 18px "Fredoka",system-ui,sans-serif!important;text-shadow:none!important;opacity:1!important}
html body #screen-outfits .of-modes .btn.chip.on{background:linear-gradient(180deg,#c24d0c,#a83d07)!important;background-image:linear-gradient(180deg,#c24d0c,#a83d07)!important;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.4)!important;box-shadow:0 3px 0 rgba(58,38,48,.45),inset 0 2px 0 rgba(255,255,255,.28)!important;transform:none!important}
html body #screen-outfits .of-modes .btn.chip:not(.on):hover{background:rgba(194,77,12,.14)!important}
html body #screen-outfits .of-modes .btn.chip:focus-visible{outline:3px solid #3a2630;outline-offset:2px}
/* v292 outfits mode bar: the per-tab ID rules (orange / teal) beat the v291 chip rule - win by ID, deep colours, white text >= 5:1 */
html body #screen-outfits .of-modes #of-mode-shop.on{background:linear-gradient(180deg,#c24d0c,#a83d07)!important;background-image:linear-gradient(180deg,#c24d0c,#a83d07)!important;color:#fff!important}
html body #screen-outfits .of-modes #of-mode-ward.on,html body #screen-outfits .of-modes .btn.chip.on:not(#of-mode-shop){background:linear-gradient(180deg,#0f7f6b,#0a6352)!important;background-image:linear-gradient(180deg,#0f7f6b,#0a6352)!important;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.4)!important}
html body #screen-outfits .of-modes::after{font-weight:800!important;color:#6e1536!important}
/* v292b outfits: no thin handwriting - sub-title and item name in bold Fredoka */
html body #screen-outfits .of-modes::after{font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important;font-size:19px!important;letter-spacing:.2px!important;text-shadow:none!important;-webkit-text-stroke:0!important}
html body #screen-outfits #of-name{font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important;font-weight:900!important;color:#2e1822!important;text-shadow:none!important}
/* v294 the crown is WORN: it sits down onto the top of the profile circle (rim overlaps the circle), and throws a soft shadow onto the avatar */
html body span.fr-crown.gold{width:104px!important;margin:-6px auto -30px!important;rotate:-3deg}
html body span.fr-crown.gold::before{left:14%!important;right:14%!important;bottom:-30%!important;height:34%!important;background:radial-gradient(ellipse at 50% 30%,rgba(40,20,36,.62),rgba(40,20,36,.32) 55%,transparent 75%)!important;filter:blur(2.5px)!important;z-index:-1}
html body span.fr-crown.gold{filter:drop-shadow(0 4px 2px rgba(40,20,36,.55)) drop-shadow(0 0 10px rgba(255,190,40,.8))!important}
html body span.fr-crown.gold{margin:-6px auto -17px!important}
/* v294b the profile circle sits IN FRONT of the crown (crown tucked behind its top edge); the circle throws a soft shadow onto the crown */
html body span.fr-crown.gold{z-index:1!important;margin:-6px auto -34px!important}
html body span.fr-crown.gold::before{display:none!important}
html body .fr-pl.fr-gold .fr-lanky{position:relative;z-index:2!important;filter:drop-shadow(0 -3px 5px rgba(40,20,36,.55)) drop-shadow(0 4px 0 rgba(58,38,48,.3))}
html body span.fr-crown.gold{margin:-6px auto -26px!important}
/* v295 worn crown: the user's own gold crown art, true colours, sized to the circle and tucked behind its top edge like a head wearing it */
html body span.fr-crown.gold{width:92px!important;margin:-4px auto -24px!important;rotate:-4deg;filter:drop-shadow(0 3px 2px rgba(60,30,10,.45))!important;animation:frWob 2.8s ease-in-out infinite!important}
html body span.fr-crown.gold::after{opacity:.55}
html body span.fr-crown.gold{width:110px!important;margin:-6px auto -22px!important}
/* v296 the crown is drawn to HUG a round head: its band arches over the circle, the circle sits in front */
html body span.fr-crown.gold{width:96px!important;margin:-4px auto -17px!important;rotate:-3deg}
html body span.fr-crown.gold{width:100px!important;margin:-4px auto -31px!important}
/* v297 back to the placement the user preferred: crown perched on the circle, circle in front */
html body span.fr-crown.gold{width:96px!important;margin:-4px auto -17px!important;rotate:-3deg}
/* v299 the Pink Dimension host's speech bubble: bright butter-yellow paper, thick plum border, chunky dark-plum text, magenta pop shadow, sparkles + a proper tail */
html body #host .bubble{background:linear-gradient(180deg,#fff9c4,#ffe66e)!important;border:4px solid #4a1260!important;border-radius:26px 14px 28px 16px!important;padding:12px 16px 13px!important;font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important;font-weight:800!important;font-size:clamp(17px,2.6vmin,22px)!important;line-height:1.25!important;letter-spacing:.1px;color:#35094a!important;text-shadow:none!important;box-shadow:0 6px 0 #d0359f,0 9px 12px rgba(74,18,96,.35)!important;width:clamp(200px,28vw,330px)!important}
html body #host .bubble::before{content:"\2726";position:absolute;left:-14px;top:-16px;font-size:30px;line-height:1;color:#ff3fa8;-webkit-text-stroke:2px #4a1260;transform:rotate(-12deg);pointer-events:none}
html body #host .bubble::after{background:#ffe66e!important;border-right:4px solid #4a1260!important;border-top:4px solid #4a1260!important;right:-15px!important;top:28px!important;width:18px!important;height:18px!important;border-radius:0 5px 0 0}
@media (max-width:700px){html body #host .bubble{width:min(78vw,340px)!important;right:-4px!important;font-size:18px!important}html body #host .bubble::after{display:block!important;right:56px!important;top:-12px!important;transform:rotate(-45deg)!important;border:0!important;border-left:4px solid #4a1260!important;border-top:4px solid #4a1260!important;background:#fff9c4!important}}
/* v300 every helper bubble (tutorial card, tip card, toast) matches the host bubble: butter-yellow paper, thick plum border, chunky dark-plum text, pop shadow, sparkle */
html body .tut-card,html body .tipcard,html body #toast{background:linear-gradient(180deg,#fff9c4,#ffe66e)!important;background-image:linear-gradient(180deg,#fff9c4,#ffe66e)!important;border:4px solid #4a1260!important;color:#2a0a3c!important;font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important;font-weight:800!important;text-shadow:none!important}
html body .tut-card{border-radius:26px 14px 28px 16px!important;box-shadow:0 6px 0 #d0359f,0 10px 14px rgba(74,18,96,.35)!important}
html body .tut-card h3{font-family:"Fredoka",system-ui,sans-serif!important;font-weight:900!important;color:#b0126a!important;font-size:clamp(24px,3.4vmin,30px)!important;text-shadow:none!important}
html body .tut-card p{font-weight:800!important;color:#2a0a3c!important;font-size:clamp(18px,2.6vmin,22px)!important;line-height:1.3!important}
html body .tut-card .tut-dots i{border-color:#4a1260!important}
html body .tipcard{border-radius:28px 16px 30px 18px!important;box-shadow:0 6px 0 #d0359f,0 10px 14px rgba(74,18,96,.35)!important;font-size:clamp(17px,2.9vh,22px)!important;line-height:1.28!important;max-width:min(78vw,420px)!important}
html body .tipcard .tc-text,html body .tc-text{color:#2a0a3c!important;font-weight:800!important;font-family:"Fredoka",system-ui,sans-serif!important}
html body .tc-text b{color:#b0126a!important;font-weight:900!important}
html body #toast{border-radius:22px 12px 24px 14px!important;box-shadow:0 5px 0 #d0359f,0 8px 12px rgba(74,18,96,.3)!important;font-size:clamp(17px,2.8vmin,21px)!important;line-height:1.28!important;padding:11px 20px!important}
/* v301 the tutorial card heading + skip button read as bold, friendly lettering (the old rule forced thin handwriting) */
html body .tut-card #tut-title{font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important;font-weight:900!important;color:#b0126a!important;-webkit-text-stroke:0!important;letter-spacing:.2px!important}
html body .tut-card .btn,html body .tut-card .btn.small{background:#fff!important;color:#4a1260!important;border:3px solid #4a1260!important;font-family:"Fredoka",system-ui,sans-serif!important;font-weight:800!important;font-size:16px!important;box-shadow:0 3px 0 #d0359f!important}
/* v301 the notification bell + its red badge never touch the screen edge (the badge used to hang past it and get clipped on phones) */
@media (max-width:700px){
html body #screen-menu .menu-top{padding-right:max(18px,var(--sar,0px))!important;box-sizing:border-box}
html body .fr-bell .fr-bn,html body .fr-bell.big .fr-bn{right:-4px!important}
}
/* v304 results: no pink. The piggy-bank strip is warm cream-gold with teal-friendly brown edges, matching the new icon set */
html body #screen-over .oc-bank{background:radial-gradient(circle,rgba(255,206,80,.55) 0 5px,transparent 6px) 0 0/34px 34px,linear-gradient(180deg,#fff9e2,#ffeaa6)!important;border-color:#7a4a28!important;box-shadow:0 5px 0 #a8682e!important}
html body #screen-over .oc-bank .oc-lbl{color:#5b3418!important}
html body #screen-over .oc-bank .oc-num{border-color:#7a4a28!important;color:#4a2a12!important;box-shadow:0 3px 0 #a8682e!important}
html body #screen-over .oc-bank::before{border-color:#7a4a28!important}
html body #screen-over .oc-bank::after{color:#ffc928;text-shadow:0 2px 0 #7a4a28}
/* v305 the bell's red badge hangs ~13px above the bell: give the top row enough room that it (and its wobble) never touches the top of the screen on any phone */
html body #screen-menu .menu-top{top:calc(26px + var(--sat,0px) + var(--tv,0px))!important}
@media (max-height:560px){html body #screen-menu .menu-top{top:calc(22px + var(--sat,0px) + var(--tv,0px))!important}}
/* v305b the badge only pulses in place (the old jelly bounce flung it 11px upward and off the top edge); and it sits inside the bell's corner at every width */
@keyframes bnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
html body .fr-bell .fr-bn,html body .fr-bell.big .fr-bn{animation:bnPulse 1.8s ease-in-out infinite!important;right:-6px!important;top:-8px!important}
html body #screen-menu .menu-top{right:calc(max(18px,var(--sar,0px)) + 4px)!important}
@media (prefers-reduced-motion:reduce){html body .fr-bell .fr-bn{animation:none!important}}
/* v310 Outfits: the pose picker as a rack of bright crayon stickers: each its own colour, a round porthole for Lanky, hand-cut corners, a jaunty tilt, and a bouncy, sparkling selected one */
html body #of-pose{display:flex!important;flex-wrap:wrap!important;gap:14px 12px!important;justify-content:center!important;padding:10px 8px 14px!important;overflow:visible!important}
html body #of-pose .pose-chip{--pc:#ffd24a;--pd:#d49a10;position:relative;display:inline-flex!important;align-items:center!important;gap:9px!important;min-height:60px!important;padding:7px 18px 7px 8px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 55%,#fff),var(--pc))!important;background-image:linear-gradient(180deg,color-mix(in srgb,var(--pc) 55%,#fff),var(--pc))!important;border:4px solid #3a2630!important;border-radius:28px 16px 30px 18px!important;box-shadow:0 6px 0 var(--pd),0 9px 10px rgba(58,38,48,.25)!important;color:#2a1420!important;font:900 20px "Fredoka",system-ui,sans-serif!important;letter-spacing:.2px!important;text-shadow:0 1px 0 rgba(255,255,255,.6)!important;transform:rotate(-1.6deg);transition:transform .18s cubic-bezier(.34,1.8,.5,1),box-shadow .12s!important}
html body #of-pose .pose-chip:nth-child(even){transform:rotate(1.4deg)}
html body #of-pose .pose-chip:nth-child(3n){transform:rotate(-0.6deg) translateY(2px)}
html body #of-pose .pose-chip:nth-child(1){--pc:#ffd24a;--pd:#cf9a0c}
html body #of-pose .pose-chip:nth-child(2){--pc:#ff9a7a;--pd:#d4603c}
html body #of-pose .pose-chip:nth-child(3){--pc:#7ae6bc;--pd:#2fae82}
html body #of-pose .pose-chip:nth-child(4){--pc:#7cc8ff;--pd:#3a8ad4}
html body #of-pose .pose-chip:nth-child(5){--pc:#c0a8ff;--pd:#7a5ad8}
html body #of-pose .pose-chip:nth-child(6){--pc:#b8ec6a;--pd:#76b020}
html body #of-pose .pose-chip:nth-child(7){--pc:#ffb44a;--pd:#d4780c}
html body #of-pose .pose-chip:nth-child(8){--pc:#5ee0d8;--pd:#1fa8a0}
html body #of-pose .pose-chip:nth-child(9){--pc:#ff8fb0;--pd:#d4506e}
html body #of-pose .pose-chip:nth-child(10){--pc:#9ab4ff;--pd:#5a74d8}
html body #of-pose .pose-chip:nth-child(11){--pc:#ffe27a;--pd:#d4a812}
html body #of-pose .pose-chip>:first-child{flex:none;width:48px!important;height:48px!important;padding:5px!important;box-sizing:border-box;object-fit:contain;background:#fffaf0!important;border:3px solid #3a2630;border-radius:50%!important;box-shadow:inset 0 -4px 0 rgba(58,38,48,.12)}
html body #of-pose .pose-chip span{font:inherit!important;color:inherit!important}
html body #of-pose .pose-chip::after{display:none!important}
html body #of-pose .pose-chip:hover{transform:translateY(-4px) rotate(-2.5deg) scale(1.05)!important}
html body #of-pose .pose-chip:active{transform:translateY(4px) scale(.95,.9)!important;box-shadow:0 1px 0 var(--pd)!important}
html body #of-pose .pose-chip.on{background:linear-gradient(180deg,#fffbe8,var(--pc))!important;background-image:linear-gradient(180deg,#fffbe8,var(--pc))!important;border-width:5px!important;box-shadow:0 8px 0 var(--pd),0 0 0 4px rgba(255,255,255,.85),0 14px 18px rgba(58,38,48,.3)!important;transform:translateY(-4px) rotate(-2deg) scale(1.08)!important;animation:poseWob 1.8s ease-in-out infinite}
html body #of-pose .pose-chip.on::after{display:block!important;content:"\2726";position:absolute;right:-8px;top:-16px;width:auto;height:auto;font-size:26px;line-height:1;color:#ffcf2a;-webkit-text-stroke:2px #3a2630;background:none!important;animation:poseTw 1.4s ease-in-out infinite;pointer-events:none}
html body #of-pose .pose-chip.on::before{content:"\2726";position:absolute;left:-10px;bottom:-12px;font-size:18px;line-height:1;color:#ff8ac8;-webkit-text-stroke:1.5px #3a2630;animation:poseTw 1.9s .5s ease-in-out infinite;pointer-events:none}
@keyframes poseWob{0%,100%{rotate:0deg}50%{rotate:1.6deg}}
@keyframes poseTw{0%,100%{transform:scale(.8) rotate(0)}50%{transform:scale(1.25) rotate(24deg)}}
@media (prefers-reduced-motion:reduce){html body #of-pose .pose-chip.on,html body #of-pose .pose-chip.on::after,html body #of-pose .pose-chip.on::before{animation:none!important}}
@media (max-width:440px){html body #of-pose{gap:12px 8px!important}html body #of-pose .pose-chip{min-height:54px!important;padding:6px 14px 6px 6px!important;font-size:18px!important}html body #of-pose .pose-chip>:first-child{width:42px!important;height:42px!important}}
/* v311 - Outfits tab pills: "My Wardrobe" must always fit inside its pill (was clipped on narrow phones) */
html body #screen-outfits .of-modes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html body #screen-outfits .of-modes .btn.chip { min-width: 0 !important; padding: 0 8px !important; gap: 6px !important; white-space: nowrap; font-size: clamp(14px, 4.3vw, 18px) !important; justify-content: center; overflow: visible; }
html body #screen-outfits .of-modes img.ti { width: clamp(22px, 6.4vw, 30px); height: clamp(22px, 6.4vw, 30px); flex: none; }
@media (max-width: 360px) { html body #screen-outfits .of-modes .btn.chip { font-size: 13.5px !important; gap: 4px !important; padding: 0 4px !important; } html body #screen-outfits .of-modes img.ti { width: 20px; height: 20px; } }
/* v312 - Settings: Reminders hint line (clear, high-contrast helper text under the switch) */
html body #screen-settings .set-hint { margin: -4px 4px 8px; padding: 0 6px; font: 700 14px/1.35 var(--font-ui); color: #5a2a3a; text-align: left; max-width: 100%; }
html body #screen-settings .set-row #set-notify.on { background: linear-gradient(180deg, #0f7f6b, #0a6352) !important; color: #fff !important; }
/* v313 - results screen: "Dress up!" and "Rescue" cards. Label text now always fits inside its card (it was running over the border / being cut off). */
html body #screen-over #over-btns .go-row > button.go-alt { gap: 6px !important; padding-left: 10px !important; padding-right: 12px !important; min-width: 0 !important; overflow: visible !important; }
html body #screen-over #over-btns .go-row > button.go-alt::before { width: 46px !important; height: 46px !important; margin: 0 !important; flex: none !important; }
html body #screen-over #over-btns .go-row > button.go-alt .lbl, html body #screen-over #over-btns .go-row > button.go-alt .lbl b { min-width: 0 !important; flex: 1 1 0 !important; font-size: clamp(15px, 4.1vw, 21px) !important; line-height: 1.12 !important; overflow-wrap: anywhere; text-wrap: balance; }
html body #screen-over #over-btns .go-row > button.go-alt .lbl small { white-space: normal !important; font-size: clamp(11px, 3.1vw, 13px) !important; padding: 2px 8px 3px !important; }
@media (max-width: 360px) { html body #screen-over #over-btns .go-row > button.go-alt::before { width: 36px !important; height: 36px !important; } html body #screen-over #over-btns .go-row > button.go-alt .lbl, html body #screen-over #over-btns .go-row > button.go-alt .lbl b { font-size: 14px !important; } }
@media (min-width: 700px) { html body #screen-over #over-btns .go-row > button.go-alt .lbl, html body #screen-over #over-btns .go-row > button.go-alt .lbl b { font-size: 21px !important; } html body #screen-over #over-btns .go-row > button.go-alt::before { width: 56px !important; height: 56px !important; } }
/* v314 - home top bar on small phones: the avatar, coins, sound, settings, help and bell all fit inside the screen (the avatar was pushed off the left edge and the coin counter squeezed) */
@media (max-width: 400px) {
html body #screen-menu .menu-top { box-sizing: border-box !important; left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 8px !important; gap: 3px !important; justify-content: flex-start !important; }
html body #screen-menu .menu-top #menu-avatar { flex: 0 0 38px !important; width: 38px !important; height: 38px !important; }
html body #screen-menu .menu-top .menu-coins { flex: 1 1 auto !important; min-width: 0 !important; margin-left: 0 !important; padding-left: 6px !important; padding-right: 8px !important; font-size: clamp(13px, 4vw, 16px) !important; }
html body #screen-menu .menu-top .icon-btn { flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; height: 44px !important; }
html body #screen-menu .menu-top .fr-bell { flex: 0 0 42px !important; width: 42px !important; min-height: 44px !important; margin-left: 0 !important; }
}
html body #screen-over #over-btns .go-row > button.go-alt.ov-outfits .lbl, html body #screen-over #over-btns .go-row > button.go-alt.ov-revive .lbl, html body #screen-over #over-btns .go-row > button.go-alt.ov-revive .lbl b { font-size: clamp(16px, 4.8vw, 21px) !important; line-height: 1.12 !important; }
@media (max-width: 360px) { html body #screen-over #over-btns .go-row > button.go-alt.ov-outfits .lbl, html body #screen-over #over-btns .go-row > button.go-alt.ov-revive .lbl, html body #screen-over #over-btns .go-row > button.go-alt.ov-revive .lbl b { font-size: 15px !important; } }
/* v315 - run-report record badges ("New best score!", "Farthest run yet!") are die-cut STICKERS: white cut border, thin outline, glossy shine, peeled corner, tilted, with a soft drop shadow */
html body #screen-over .rp .rp-rec { gap: 10px 12px !important; margin: 12px 0 6px !important; }
html body #screen-over .rp .rp-rec b { position: relative !important; display: inline-block !important; font: 900 15px/1.1 var(--font-ui, "Fredoka", system-ui, sans-serif) !important; letter-spacing: .03em !important; color: #fff !important; text-shadow: 0 1.5px 0 rgba(90, 20, 14, .55) !important; padding: 7px 14px 8px !important; border: 3.5px solid #fffdf6 !important; border-radius: 999px !important; background: linear-gradient(180deg, #f0553f 0%, #d63a2c 55%, #c22e22 100%) !important; box-shadow: 0 0 0 1.5px rgba(74, 47, 52, .38), 0 3px 0 rgba(74, 47, 52, .32), 0 7px 12px rgba(58, 31, 46, .3) !important; transform: rotate(-3deg) !important; overflow: hidden; isolation: isolate; }
html body #screen-over .rp .rp-rec b:nth-child(even) { transform: rotate(2.6deg) !important; background: linear-gradient(180deg, #ffb52e 0%, #f09a14 55%, #dc8506 100%) !important; text-shadow: 0 1.5px 0 rgba(96, 50, 0, .6) !important; color: #3a1a06 !important; text-shadow: 0 1px 0 rgba(255, 236, 170, .7) !important; }
html body #screen-over .rp .rp-rec b[style] { background: linear-gradient(180deg, #4d78d8 0%, #2f55b5 55%, #243f94 100%) !important; color: #fff !important; text-shadow: 0 1.5px 0 rgba(10, 20, 70, .55) !important; border-color: #fffdf6 !important; }
html body #screen-over .rp .rp-rec b::before { content: ''; position: absolute; left: 6%; right: 6%; top: 2px; height: 46%; border-radius: 999px 999px 60% 60% / 100% 100% 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .06)); pointer-events: none; z-index: -1; }
html body #screen-over .rp .rp-rec b::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; background: linear-gradient(135deg, rgba(255, 253, 246, 0) 46%, #fffdf6 48%, #e9e1d0 100%); border-top-left-radius: 70%; box-shadow: -1px -1px 2px rgba(58, 31, 46, .18); pointer-events: none; }
html body #screen-over .rp .rp-rec b { white-space: nowrap !important; font-size: clamp(12.5px, 3.8vw, 15px) !important; max-width: 100%; }
html body #screen-over .rp .rp-rec { justify-content: center; }
/* v315b - results stats: big numbers never get cut to "1,3..." on narrow phones */
html body #screen-over .ov-stats b { overflow: visible !important; text-overflow: clip !important; white-space: nowrap; font-size: clamp(17px, 5.4vw, 24px) !important; }
/* v316 - "Hop between worlds." the little burst of rays now sits clear of the first letter and wobbles with the lettering (it used to sit on top of the "H") */
html body .lede.hop .hop-burst { left: -14px !important; top: -20px !important; width: 30px !important; height: 26px !important; transform-origin: 80% 90%; animation: boil 1.2s steps(2, end) infinite; }
html body .lede.hop .hop-a { position: relative; padding-left: 2px; }
/* v316 - world map: the "You are here" marker hugs the world label on EVERY screen size (it was a % of the node height, so it drifted far away on big screens) */
html body .m-node .m-here { top: calc(100% + 3px) !important; bottom: auto !important; left: 50%; }
/* v317 - LEVELS: a night-sky journey. Every level is a little planet with its own colour and orbit ring, joined by a glowing trail; done levels glow gold, the current one has a rocket hovering over it, locked ones sleep. No sideways scrolling: it wraps to fit every screen. */
html body #pg-levels .orbit { position: relative !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 30px 4px !important; padding: 34px 8px 30px !important; overflow: hidden !important; scroll-snap-type: none !important; border: 3px solid #2a1646 !important; border-radius: 26px !important; background: radial-gradient(ellipse 60% 28% at 82% 18%, rgba(255, 240, 200, .35), rgba(255, 240, 200, 0)), linear-gradient(180deg, #24135c 0%, #4a2c8c 38%, #8a58a8 62%, #f0a384 80%, #f6c78a 86%, #5db8a4 86.4%, #2f8f7c 100%) !important; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .18), 0 5px 0 rgba(42, 22, 70, .35) !important; }
html body #pg-levels .orbit::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 8% 14%, #fff 0 1.4px, transparent 2.4px), radial-gradient(circle at 24% 6%, #ffe9a8 0 1.6px, transparent 2.6px), radial-gradient(circle at 41% 20%, #fff 0 1.2px, transparent 2.2px), radial-gradient(circle at 58% 8%, #fff 0 1.8px, transparent 2.8px), radial-gradient(circle at 74% 24%, #ffe9a8 0 1.4px, transparent 2.4px), radial-gradient(circle at 90% 10%, #fff 0 1.6px, transparent 2.6px), radial-gradient(circle at 15% 46%, #fff 0 1.2px, transparent 2.2px), radial-gradient(circle at 52% 40%, #ffe9a8 0 1.2px, transparent 2.2px), radial-gradient(circle at 93% 44%, #fff 0 1.4px, transparent 2.4px); animation: lvTwinkle 3.6s ease-in-out infinite; }
html body #pg-levels .orbit::after { content: ''; position: absolute; left: -4%; right: -4%; bottom: -1px; height: 15%; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 18% 100% at 12% 100%, #3aa38d 0 70%, transparent 72%), radial-gradient(ellipse 22% 100% at 40% 100%, #2c8672 0 70%, transparent 72%), radial-gradient(ellipse 20% 100% at 70% 100%, #3aa38d 0 70%, transparent 72%), radial-gradient(ellipse 18% 100% at 94% 100%, #2c8672 0 70%, transparent 72%); }
@keyframes lvTwinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
html body #pg-levels .o-node { position: relative !important; z-index: 1; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; width: auto !important; flex: none !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; scroll-snap-align: none !important; cursor: pointer; }
html body #pg-levels .o-node:disabled { cursor: default; }
html body #pg-levels .o-node .o-c { position: relative !important; display: grid !important; place-items: center !important; width: 64px !important; height: 64px !important; border-radius: 50% !important; font: 900 28px/1 var(--font-ui, "Fredoka", sans-serif) !important; color: #fff !important; text-shadow: 0 2px 0 rgba(30, 12, 60, .7), 0 0 8px rgba(30, 12, 60, .6) !important; border: 3px solid #fff7e6 !important; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .75) 0 10%, rgba(255, 255, 255, 0) 32%), radial-gradient(circle at 70% 78%, rgba(20, 8, 50, .38), rgba(20, 8, 50, 0) 56%), var(--pl, #3aa38d) !important; box-shadow: 0 4px 0 rgba(30, 12, 60, .5), 0 0 0 3px rgba(30, 12, 60, .55), 0 0 18px var(--glow, rgba(255, 220, 130, .55)) !important; transition: transform .2s; }
html body #pg-levels .o-node .o-c::before { content: ''; position: absolute; left: -22%; right: -22%; top: 34%; height: 34%; border: 3.5px solid rgba(255, 214, 90, .95); border-radius: 50%; transform: rotate(-16deg); pointer-events: none; box-shadow: 0 0 8px rgba(255, 214, 90, .5); clip-path: polygon(0 0, 100% 0, 100% 52%, 0 52%); z-index: 2; opacity: .9; }
html body #pg-levels .o-node:nth-child(1) { --pl: #3aa38d; --glow: rgba(120, 240, 200, .6); } html body #pg-levels .o-node:nth-child(2) { --pl: #e07a3a; --glow: rgba(255, 170, 100, .6); } html body #pg-levels .o-node:nth-child(3) { --pl: #7e6ad0; --glow: rgba(190, 170, 255, .6); } html body #pg-levels .o-node:nth-child(4) { --pl: #3a86d8; --glow: rgba(130, 200, 255, .6); } html body #pg-levels .o-node:nth-child(5) { --pl: #2b3a94; --glow: rgba(150, 160, 255, .6); }
html body #pg-levels .o-node:hover:not(:disabled) .o-c, html body #pg-levels .o-node:focus-visible .o-c { transform: scale(1.1) rotate(-4deg); }
html body #pg-levels .o-node small { display: block !important; max-width: 100% !important; padding: 4px 11px 5px !important; font: 800 13px/1.15 var(--font-ui, "Fredoka", sans-serif) !important; color: #fff !important; text-align: center !important; text-shadow: 0 1px 0 rgba(20, 8, 50, .6) !important; background: rgba(30, 14, 64, .82) !important; border: 2px solid rgba(255, 255, 255, .7) !important; border-radius: 999px !important; white-space: normal !important; text-wrap: balance; overflow: visible !important; }
html body #pg-levels .o-node.done small { background: rgba(120, 78, 8, .86) !important; border-color: #ffe27a !important; }
html body #pg-levels .o-node.done .o-c { box-shadow: 0 4px 0 rgba(30, 12, 60, .5), 0 0 0 3px #f0b82a, 0 0 22px rgba(255, 210, 80, .85) !important; }
html body #pg-levels .o-node .o-ck { position: absolute !important; right: -8px !important; top: -8px !important; width: 26px !important; height: 26px !important; z-index: 3; }
html body #pg-levels .o-node.current .o-c { animation: lvPulse 1.8s ease-in-out infinite; }
@keyframes lvPulse { 0%, 100% { box-shadow: 0 4px 0 rgba(30, 12, 60, .5), 0 0 0 3px #fff3b0, 0 0 14px rgba(255, 236, 150, .7); transform: translateY(0); } 50% { box-shadow: 0 4px 0 rgba(30, 12, 60, .5), 0 0 0 5px #fff3b0, 0 0 30px rgba(255, 236, 150, 1); transform: translateY(-3px); } }
html body #pg-levels .o-node.current::after { content: ''; position: absolute; left: 50%; top: -34px; width: 46px; height: 46px; margin-left: -23px; background: url('../assets/ui/icon-rocket.webp') center / contain no-repeat; filter: drop-shadow(0 3px 0 rgba(30, 12, 60, .45)); animation: lvRocket 2.2s ease-in-out infinite; z-index: 4; pointer-events: none; }
@keyframes lvRocket { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-7px) rotate(4deg); } }
html body #pg-levels .o-node.lock .o-c { filter: saturate(.3) brightness(.75); }
html body #pg-levels .o-node.lock small { opacity: .8; }
html body #pg-levels .o-node.lock .o-c::before { display: none; }
html body #pg-levels .o-node.lock::after { content: 'z z'; position: absolute; right: 14%; top: -14px; font: 900 14px/1 var(--font-ui); color: rgba(255, 255, 255, .75); letter-spacing: 2px; animation: lvZ 3s ease-in-out infinite; pointer-events: none; }
@keyframes lvZ { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-5px); opacity: 1; } }
/* the trail between planets */
html body #pg-levels .o-node:not(:nth-child(3n))::before { content: ''; position: absolute; z-index: 0; left: calc(50% + 40px); width: calc(100% - 80px + 8px); top: 30px; height: 0; border-top: 4px dotted rgba(255, 233, 168, .8); pointer-events: none; }
html body #pg-levels .o-node.done:not(:nth-child(3n))::before { border-top: 5px solid #ffd45a; box-shadow: 0 0 10px rgba(255, 210, 80, .9); border-radius: 4px; }
html body #pg-levels .o-flag { position: relative; z-index: 1; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; padding: 0 !important; background: none !important; }
html body #pg-levels .o-flag .o-fl { width: 60px !important; height: 60px !important; filter: drop-shadow(0 3px 0 rgba(30, 12, 60, .45)); animation: lvRocket 2.6s ease-in-out infinite; transform-origin: 20% 90%; }
html body #pg-levels .o-flag small { display: block !important; padding: 4px 12px 5px !important; font: 800 13px/1.15 var(--font-ui, "Fredoka", sans-serif) !important; color: #fff !important; text-shadow: 0 1px 0 rgba(20, 8, 50, .6) !important; background: rgba(30, 14, 64, .82) !important; border: 2px solid rgba(255, 255, 255, .7) !important; border-radius: 999px !important; }
html body #pg-levels .o-flag.won small { background: rgba(120, 78, 8, .9) !important; border-color: #ffe27a !important; }
@media (min-width: 640px) {
html body #pg-levels .orbit { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; padding: 40px 14px 34px !important; }
html body #pg-levels .o-node:not(:nth-child(3n))::before { display: none; }
html body #pg-levels .o-node:not(:nth-child(5))::before { display: block; content: ''; left: calc(50% + 40px); width: calc(100% - 80px + 8px); }
html body #pg-levels .o-node .o-c { width: 74px !important; height: 74px !important; font-size: 32px !important; } html body #pg-levels .o-node.done:not(:nth-child(5))::before { top: 35px; } html body #pg-levels .o-node:not(:nth-child(5))::before { top: 35px; }
}
@media (max-width: 340px) { html body #pg-levels .o-node .o-c { width: 54px !important; height: 54px !important; font-size: 24px !important; } html body #pg-levels .o-node:not(:nth-child(3n))::before { top: 25px; left: calc(50% + 34px); width: calc(100% - 68px + 8px); } html body #pg-levels .o-node small { font-size: 12px !important; padding: 3px 8px 4px !important; } }
@media (prefers-reduced-motion: reduce) { html body #pg-levels .orbit::before, html body #pg-levels .o-node.current .o-c, html body #pg-levels .o-node.current::after, html body #pg-levels .o-node.lock::after, html body #pg-levels .o-flag .o-fl { animation: none !important; } }
/* v318 - "Save your progress" is now an EXPLORER PASSPORT: a starry night card with a gold-ringed astronaut portrait, a ribbon title, four little "what it keeps" chips and big friendly buttons */
html body :is(#pg-profile, .pf-root) .pf-pass { position: relative; width: 100%; box-sizing: border-box; padding: 30px 14px 14px; border: 3px solid #2a1646; border-radius: 22px; color: #fff; overflow: hidden; background: radial-gradient(circle at 12% 18%, #fff 0 1.3px, transparent 2.3px), radial-gradient(circle at 34% 8%, #ffe9a8 0 1.5px, transparent 2.5px), radial-gradient(circle at 62% 14%, #fff 0 1.2px, transparent 2.2px), radial-gradient(circle at 88% 22%, #ffe9a8 0 1.6px, transparent 2.6px), radial-gradient(circle at 78% 62%, #fff 0 1.1px, transparent 2.1px), radial-gradient(ellipse 70% 60% at 100% 0, rgba(255, 214, 120, .35), transparent 60%), linear-gradient(160deg, #2c1a6e 0%, #4a2c8c 55%, #6a3f9a 100%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .16), 0 5px 0 rgba(42, 22, 70, .35); }
html body :is(#pg-profile, .pf-root) .pf-rib { position: absolute; left: 50%; top: -2px; transform: translateX(-50%); padding: 5px 18px 7px; font: 900 13px/1 var(--font-ui, "Fredoka", sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #3a1a06; background: linear-gradient(180deg, #ffd45a, #f0a81c); border: 2.5px solid #2a1646; border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 3px 0 rgba(42, 22, 70, .4); white-space: nowrap; }
html body :is(#pg-profile, .pf-root) .pf-head { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
html body :is(#pg-profile, .pf-root) .pf-av.ghost { position: relative; flex: 0 0 84px; width: 84px; height: 84px; display: block; border-radius: 50%; border: 4px solid #ffd45a; background: radial-gradient(circle at 34% 28%, #7a5ad0, #2c1a6e 70%); box-shadow: 0 0 0 3px #2a1646, 0 0 22px rgba(255, 214, 90, .6), inset 0 0 12px rgba(0, 0, 0, .35); overflow: visible; color: #fff; animation: pfFloat 3.4s ease-in-out infinite; }
html body :is(#pg-profile, .pf-root) .pf-av.ghost img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
html body :is(#pg-profile, .pf-root) .pf-av.ghost .pf-q { position: absolute; right: -6px; bottom: -4px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #ffd45a; color: #3a1a06; border: 3px solid #2a1646; font: 900 16px/1 var(--font-ui); font-style: normal; }
@keyframes pfFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
html body :is(#pg-profile, .pf-root) .pf-pass .pf-t { flex: 1 1 auto; min-width: 0; }
html body :is(#pg-profile, .pf-root) .pf-pass .pf-t b { font: 900 clamp(20px, 5.6vw, 24px)/1.15 var(--font-ui, "Fredoka", sans-serif); color: #fff; text-shadow: 0 2px 0 rgba(20, 8, 50, .6); }
html body :is(#pg-profile, .pf-root) .pf-pass .pf-t small { font: 700 14.5px/1.35 var(--font-ui, "Fredoka", sans-serif); color: #efe6ff; }
html body :is(#pg-profile, .pf-root) .pf-perks { list-style: none; margin: 14px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
html body :is(#pg-profile, .pf-root) .pf-perks li { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; font: 800 12.5px/1.1 var(--font-ui, "Fredoka", sans-serif); color: #fff; text-align: center; background: rgba(255, 255, 255, .13); border: 2px solid rgba(255, 255, 255, .45); border-radius: 14px; }
html body :is(#pg-profile, .pf-root) .pf-perks li img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
html body :is(#pg-profile, .pf-root) .pf-pass .pf-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html body :is(#pg-profile, .pf-root) .pf-pass .pf-b .btn { min-height: 48px; width: 100%; font: 900 16px/1.1 var(--font-ui, "Fredoka", sans-serif); }
html body :is(#pg-profile, .pf-root) .pf-pass .pf-b .btn.primary { grid-column: 1 / -1; min-height: 54px; font-size: 19px; background: linear-gradient(180deg, #ffe27a, #ffbf2b) !important; color: #3a1a06 !important; border: 3px solid #2a1646 !important; box-shadow: 0 4px 0 #2a1646, 0 0 18px rgba(255, 214, 90, .55) !important; animation: pfGlow 2.4s ease-in-out infinite; }
@keyframes pfGlow { 0%, 100% { box-shadow: 0 4px 0 #2a1646, 0 0 10px rgba(255, 214, 90, .35); } 50% { box-shadow: 0 4px 0 #2a1646, 0 0 24px rgba(255, 214, 90, .85); } }
@media (max-width: 340px) { html body :is(#pg-profile, .pf-root) .pf-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body :is(#pg-profile, .pf-root) .pf-av.ghost { flex-basis: 66px; width: 66px; height: 66px; } }
@media (prefers-reduced-motion: reduce) { html body :is(#pg-profile, .pf-root) .pf-av.ghost, html body :is(#pg-profile, .pf-root) .pf-pass .pf-b .btn.primary { animation: none !important; } }
/* v320 - passport extras: signed-in portrait, check badges, account editor */
html body :is(#pg-profile, .pf-root) .pf-avw { flex: 0 0 84px; width: 84px; height: 84px; display: block; }
html body :is(#pg-profile, .pf-root) .pf-av2 { width: 84px !important; height: 84px !important; border-radius: 50% !important; border: 4px solid #ffd45a !important; background: radial-gradient(circle at 34% 28%, #7a5ad0, #2c1a6e 72%) !important; box-shadow: 0 0 0 3px #2a1646, 0 0 22px rgba(255, 214, 90, .6) !important; object-fit: cover; animation: pfFloat 3.4s ease-in-out infinite; }
html body :is(#pg-profile, .pf-root) .pf-perks li { position: relative; }
html body :is(#pg-profile, .pf-root) .pf-perks li.on { background: rgba(255, 214, 90, .2); border-color: #ffd45a; }
html body :is(#pg-profile, .pf-root) .pf-ck { position: absolute; right: -5px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: #2fb58b; border: 2.5px solid #2a1646; }
html body :is(#pg-profile, .pf-root) .pf-ck::after { content: ''; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
html body .pf-root .pf-pass { margin: 4px 0 8px; }
html body .pf-root .pf-pass .pf-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html body .pf-root .pf-pass .pf-b .btn { min-height: 46px; font: 900 15px "Fredoka", sans-serif; border-radius: 14px; border: 3px solid #2a1646; background: #fff3c4; color: #10204a; box-shadow: 0 4px 0 #2a1646; }
html body .pf-root .pf-pass .pf-b .btn.primary { grid-column: 1 / -1; background: linear-gradient(180deg, #ffe27a, #ffbf2b); color: #3a1a06; }
html body .pf-root .pf-pass .pf-t b { color: #fff; font: 900 22px/1.15 "Fredoka", sans-serif; text-shadow: 0 2px 0 rgba(20, 8, 50, .6); }
html body .pf-root .pf-pass .pf-t small { color: #efe6ff; font: 700 14px/1.35 "Fredoka", sans-serif; }
html body .pf-root .pf-fcol { flex-direction: column; align-items: stretch; }
html body .pf-root .pf-lb { display: grid; gap: 4px; font: 800 14px/1.2 "Fredoka", sans-serif; color: #10204a; text-align: left; }
html body .pf-root .pf-lb small { font-weight: 700; opacity: .85; }
html body .pf-root .pf-lb input { min-height: 46px; font: 700 16px "Fredoka", sans-serif; width: 100%; box-sizing: border-box; }
html body .pf-root .pf-show { display: flex; align-items: center; gap: 8px; font: 800 14px "Fredoka", sans-serif; color: #10204a; min-height: 40px; }
html body .pf-root .pf-show input { width: 22px; height: 22px; }
html body .pf-root .pf-tiny { font-size: 12.5px; opacity: .85; margin-top: 8px; }
/* v317b - levels: make the trail, orbit rings, rocket and sleepy z's win over the older line-art rules */
html body #pg-levels .o-node:not(:nth-child(3n))::before { content: '' !important; display: block !important; position: absolute !important; left: calc(50% + 40px) !important; right: auto !important; width: calc(100% - 72px) !important; top: 30px !important; height: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-top: 4px dotted rgba(255, 233, 168, .85) !important; border-radius: 0 !important; opacity: 1 !important; filter: none !important; z-index: 0 !important; }
html body #pg-levels .o-node.done:not(:nth-child(3n))::before { border-top: 5px solid #ffd45a !important; box-shadow: 0 0 10px rgba(255, 210, 80, .9) !important; border-radius: 4px !important; }
html body #pg-levels .o-node .o-c::before { content: '' !important; display: block !important; position: absolute !important; left: -22% !important; right: -22% !important; top: 34% !important; height: 34% !important; border: 3.5px solid rgba(255, 214, 90, .95) !important; border-radius: 50% !important; background: none !important; transform: rotate(-16deg) !important; z-index: 2 !important; }
html body #pg-levels .o-node.lock .o-c::before { display: none !important; }
html body #pg-levels .o-node.current::after { content: '' !important; display: block !important; position: absolute !important; left: 50% !important; top: -34px !important; width: 46px !important; height: 46px !important; margin-left: -23px !important; background: url('../assets/ui/icon-rocket.webp') center / contain no-repeat !important; clip-path: none !important; animation: lvRocket 2.2s ease-in-out infinite !important; z-index: 4 !important; }
html body #pg-levels .o-node.lock::after { content: 'z z' !important; display: block !important; position: absolute !important; right: 14% !important; top: -14px !important; background: none !important; width: auto !important; height: auto !important; clip-path: none !important; }
@media (min-width: 640px) { html body #pg-levels .o-node:not(:nth-child(3n))::before { display: none !important; } html body #pg-levels .o-node:not(:nth-child(5))::before { display: block !important; top: 35px !important; } }
html body #pg-levels .o-node .o-c::before { top: 56% !important; height: 30% !important; transform: rotate(-12deg) !important; }
/* v319 - richer home-screen icons: the bell, the avatar frame and the high-score star get a warm glow, glossy depth and a little sparkle so they feel like treasures, not flat stickers */
html body #screen-menu .menu-top .fr-bell { filter: drop-shadow(0 3px 0 rgba(58, 31, 46, .35)) drop-shadow(0 0 10px rgba(255, 207, 63, .55)); }
html body #screen-menu .menu-top #menu-avatar { border: 3px solid #ffd45a !important; box-shadow: 0 0 0 2.5px #3a1f2e, 0 4px 0 rgba(58, 31, 46, .45), 0 0 16px rgba(255, 214, 90, .6), inset 0 0 10px rgba(0, 0, 0, .25) !important; background: radial-gradient(circle at 32% 26%, #7a5ad0, #2c1a6e 72%) !important; }
html body #screen-menu .menu-top #menu-avatar::after { content: ''; position: absolute; left: 14%; top: 10%; width: 36%; height: 22%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); transform: rotate(-24deg); pointer-events: none; }
html body #screen-menu .menu-stats .ms:nth-child(1) .msi img { filter: drop-shadow(0 3px 0 rgba(122, 31, 61, .35)) drop-shadow(0 0 12px rgba(255, 214, 90, .75)); animation: hsPulse 3s ease-in-out infinite; }
@keyframes hsPulse { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.07) rotate(3deg); } }
html body #screen-over .ov-score img, html body #screen-over .ov-star, html body #screen-over [class*=star] > img { filter: drop-shadow(0 3px 0 rgba(58, 31, 46, .4)) drop-shadow(0 0 16px rgba(255, 214, 90, .85)); }
@media (prefers-reduced-motion: reduce) { html body #screen-menu .menu-stats .ms:nth-child(1) .msi img { animation: none; } }
/* v321 - last life: the hearts beat in time with the screen-edge pulse */
.hp.low i { animation: hpBeat .92s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes hpBeat { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.22); } 34% { transform: scale(1.02); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .hp.low i { animation: none; } }
/* v322 - world mastery stars on the map + preview */
.m-rib .m-stars.ms { display: block; color: #b9790a; font-size: 12px; letter-spacing: 1px; line-height: 1; margin-top: 1px; }
.mp-mast { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; margin-top: 10px; padding: 8px 10px; border: 2.5px dashed #b9790a; border-radius: 14px; background: rgba(255,226,122,.28); }
.mp-mast b { flex-basis: 100%; font-size: 14px; color: #7a1f3d; }
.mp-mast span { font-size: 13px; color: #6a5560; } .mp-mast span.on { color: #7a4a00; font-weight: 700; }
.mp-mast small { flex-basis: 100%; font-size: 11px; opacity: .75; }
/* v323 - copyright note in Settings */
.set-copy { margin: 14px 4px 4px; font-size: 12px; line-height: 1.45; opacity: .72; text-align: center; color: inherit; }
.set-copy b { font-weight: 800; }