/* Little Rabbit: paper white, scholar blue, petal pink, sage, and soft gold. */
@import url("./pet-game-extras.css?v=2");
:root {
  --pet-paper: #fbfaf9;
  --pet-cloud: #edf1f5;
  --pet-blue: #a9b7ca;
  --pet-blue-deep: #596b88;
  --pet-lavender: #c8c5d2;
  --pet-pink: #efc7c9;
  --pet-star: #e8c899;
  --pet-sage: #aeb9ae;
  --pet-ink: #43516b;
  --pet-muted: #69768b;
  --pet-line: #e3e4e8;
  --pet-shadow: 0 10px 24px #53617b13;
  --ink: var(--pet-ink);
  --ink-soft: var(--pet-muted);
  --cream: var(--pet-paper);
  --paper: var(--pet-paper);
  --gold: var(--pet-star);
  --gold-deep: #b18456;
  --teal: #657c83;
  --teal-deep: #4b666e;
  --coral: #bd7987;
  --font: 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
  --display: 'Fredoka', 'Noto Sans SC', sans-serif;
}
html { scroll-behavior: smooth; }
body { color: var(--pet-ink); background: var(--pet-paper); }
.site { min-height: 100dvh; color: var(--pet-ink); background: var(--pet-paper); font-family: var(--font); font-weight: 400; }
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site :is(a, button, input):focus-visible { outline: 3px solid #7b96c6; outline-offset: 4px; }
.site :is(p, h1, h2, h3) { overflow-wrap: break-word; }
.site-bar { width: min(1160px, calc(100% - 64px)); padding: 22px 0; gap: 24px; }
.brand { gap: 10px; flex-shrink: 0; }
.brand-mark { width: 48px; height: 54px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.brand-mark img { width: 48px; height: 56px; object-fit: contain; }
.brand p { color: #7b88a3; letter-spacing: .12em; font-size: 9px; font-weight: 700; }
.brand strong { color: #4b5d84; font-size: 21px; letter-spacing: .06em; font-weight: 800; }
.site-bar nav { gap: 6px; }
.site-bar nav a { color: #687591; background: transparent; border: 1px solid transparent; padding: 10px 13px; font-size: 13px; font-weight: 500; border-radius: 13px; }
.site-bar nav a:hover { background: #f0f2f8; }
.site-bar nav a.is-active { background: #eaf0f9; border-color: #e1e8f4; color: #526e9d; }
.hub-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
.hub-bar :is(.account-link, .account-chip) { border: 1px solid #dae2ef; border-radius: 13px; background: #fff; color: #536b97; min-width: 76px; font-size: 13px; font-weight: 600; padding: 11px 18px; box-shadow: 0 3px 0 #e8ecf4; }
.hub-bar .account-role { color: #6b6994; background: #ece9f6; }
.hub-bar .account-email { color: #526581; }
.pet-home .hero { width: min(1160px, calc(100% - 64px)); margin: 20px auto 48px; min-height: 460px; display: grid; grid-template-columns: 1.12fr 1fr; gap: 16px; align-items: center; padding: 42px 44px; position: relative; border: 1px solid #e6eaf4; border-radius: 36px; background: radial-gradient(ellipse at 90% 0%, #ebe8f580, transparent 60%), linear-gradient(125deg, #f2f6fc, #eef2fc 55%, #f4eff7); text-align: left; isolation: isolate; }
.pet-home .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: repeating-linear-gradient(90deg, #ffffff28 0 25px, transparent 25px 50px), repeating-linear-gradient(0deg, #ffffff28 0 25px, transparent 25px 50px); mask-image: linear-gradient(110deg, transparent 36%, #000); }
.pet-home .hero::after { content: none; }
.hero-copy { min-width: 0; position: relative; z-index: 2; }
.hero-eyebrow { display: flex; align-items: center; gap: 8px; color: #7180a0; font-size: 12px; font-weight: 500; margin: 0 0 22px; }
.hero-eyebrow > span { color: #b5925c; font-size: 19px; }
.pet-home .hero h1 { color: #485b83; font-size: clamp(34px, 3.7vw, 50px); font-weight: 800; line-height: 1.38; letter-spacing: -.04em; margin: 0; }
.pet-home .hero h1 span { color: #7c91bd; position: relative; white-space: nowrap; }
.pet-home .hero h1 span::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 7px; border-radius: 50%; background: #d8cbea80; }
.hero-description { color: #6b7893; font-size: 14px; line-height: 1.95; margin: 24px 0; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.meow-button { display: inline-flex; align-items: center; justify-content: center; gap: 30px; padding: 15px 23px; border: 1px solid #7e94bb; border-radius: 16px; color: #fff; background: linear-gradient(#91a8cf, #7b95c1); box-shadow: inset 0 1px 0 #c5d5f0, 0 4px 0 #d5deee; text-decoration: none; font-size: 14px; font-weight: 600; transition: transform .18s, box-shadow .18s; }
.meow-button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #c5d5f0, 0 6px 0 #d5deee; }
.hero-note { color: #6c7891; font-size: 12px; }
.site .meow-button, body[data-auth-page] .site .auth-form-panel .auth-btn { color: #37527e; background: linear-gradient(#bdcfeb,#a7bee0); border-color: #9bb2d7; }
body[data-auth-page] .site .auth-form-panel .auth-btn:hover:not(:disabled) { color: #314c79; background: #a6bfdf; }
.hero-topics { display: flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 10px; color: #71809e; flex-wrap: wrap; }
.hero-topics i { width: 3px; height: 3px; background: #aab6cf; border-radius: 50%; }
.hero-scene { min-width: 0; height: 382px; position: relative; display: grid; place-items: center; }
.scene-orbit { position: absolute; width: 310px; height: 310px; border: 1px solid #ffffffda; border-radius: 50%; background: radial-gradient(circle, #fff8, #fff0 70%); }
.scene-orbit::after { content: ''; position: absolute; inset: -22px; border: 1px dashed #cad5e780; border-radius: 50%; }
.hero-pet, .auth-pet { position: relative; z-index: 2; display: block; padding: 0; background: transparent; border: 0; cursor: pointer; transform-origin: center bottom; border-radius: 38%; transition: transform .25s; }
.hero-pet { width: 280px; height: 358px; }
.hero-pet img, .auth-pet img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 15px 14px #7187b220); }
.hero-pet:hover, .auth-pet:hover { transform: translateY(-6px) rotate(-2deg); }
.scene-star { position: absolute; z-index: 3; color: #d8b679; text-shadow: 0 2px 0 #fff9; font-size: 36px; }
.star-one { right: 8%; top: 16%; transform: rotate(12deg); }
.star-two { left: 3%; bottom: 16%; font-size: 25px; }
.scene-word { position: absolute; z-index: 3; padding: 10px 17px; font-family: var(--display); color: #7a86b4; background: #fffc; border: 1px solid #fff; box-shadow: 0 6px 17px #7e91b612; border-radius: 16px; }
.word-hello { left: 0; top: 13%; transform: rotate(-9deg); font-size: 22px; }
.word-abc { right: -7px; bottom: 21%; transform: rotate(8deg); font-size: 22px; background: #fcf6ea; color: #9a8667; }
.word-abc small { font-size: 15px; color: #b29aba; }
.pet-hint { position: absolute; bottom: -16px; margin: 0; color: #7480a0; font-size: 11px; letter-spacing: .06em; }
.pet-hint span { color: #c293a4; font-size: 16px; }
.scene-cloud { position: absolute; z-index: 1; height: 32px; width: 88px; border-radius: 40px; background: #fffc; box-shadow: 0 7px 17px #8497c00b; }
.scene-cloud::before, .scene-cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.scene-cloud::before { width: 40px; height: 40px; left: 12px; bottom: 10px; }
.scene-cloud::after { width: 48px; height: 48px; right: 9px; bottom: 5px; }
.cloud-one { bottom: 22px; left: 6px; transform: scale(.8); }
.cloud-two { top: 26px; right: 5px; transform: scale(.55); }
.path-heading { width: min(1160px, calc(100% - 64px)); margin: 0 auto 20px; display: flex; align-items: end; justify-content: space-between; gap: 16px; scroll-margin-top: 20px; }
.kicker, .hall-label { color: #8090ae; font-family: var(--font); font-weight: 600; font-size: 10px; letter-spacing: .15em; }
.path-heading h2 { margin: 7px 0 0; font-size: 24px; color: #485979; font-weight: 700; letter-spacing: -.02em; }
.path-heading > p { color: #7d879c; font-size: 12px; margin: 0 0 3px; }
.tier-select, .hall { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.tier-select { gap: 16px; }
.tier-card { padding: 24px; min-height: 254px; border-radius: 24px; border: 1px solid #e4e8f0; color: var(--pet-ink); box-shadow: 0 6px 0 #eff1f6, 0 10px 25px #758bad09; transition: transform .2s, box-shadow .2s; }
.tier-card::before, .edition-card::before { display: none; }
.tier-card.primary { background: linear-gradient(150deg, #f4f8fe, #eaf1fc); }
.tier-card.junior { background: linear-gradient(150deg, #faf8ff, #f0edf9); }
.tier-card.senior { background: linear-gradient(150deg, #fffafa, #faeff2); opacity: 1; }
.tier-card.university { background: linear-gradient(150deg, #fffdf8, #f8f2e7); opacity: 1; }
.path-icon { display: inline-grid; width: 46px; height: 46px; place-items: center; margin-bottom: 7px; border-radius: 15px; border: 1px solid #ffffffd9; box-shadow: inset 0 2px 1px #fff, 0 4px 7px #8498b71a; font-family: var(--display); font-size: 22px; color: #7d99c2; background: #dce8f9; }
.junior .path-icon { background: #e8e2f4; color: #9890b8; }
.senior .path-icon { background: #f4e0e5; color: #b68b9b; }
.university .path-icon { background: #f1e6ce; color: #b89c6b; }
.tier-card > .tier-badge { float: right; font-size: 10px; margin-top: 5px; padding: 4px 9px; }
.tier-badge, .tag { color: #687899; background: #fffb; border: 1px solid #dfe5f0; border-radius: 9px; font-size: 10px; letter-spacing: 0; font-weight: 500; }
.tier-card h2 { color: #4e6085; font-size: 22px; font-weight: 700; margin: 10px 0; }
.tier-card p { color: #71809b; font-size: 12px; line-height: 1.8; min-height: 44px; margin: 0; }
.tier-card ul { gap: 9px; margin: 14px 0; }
.tier-card li { padding: 0; border: 0; background: none; color: #73829c; font-size: 10px; }
.tier-card li + li::before { content: '·'; margin-right: 9px; }
.tier-card:is(.primary,.junior,.senior,.university) strong { display: flex; align-items: center; justify-content: space-between; padding: 13px 0 0; margin-top: 14px; color: #627eac; border: 0; border-top: 1px solid #ccd7e65c; border-radius: 0; background: none; font-size: 12px; font-weight: 600; }
.tier-card strong::after { content: '↗'; font-size: 19px; }
.tier-card:is(.senior,.university) strong { color: #8b8296; }
.tier-card:hover, .tier-card.is-active { border-color: #b9cbe7; transform: translateY(-3px); box-shadow: 0 6px 0 #e6ecf6, 0 12px 30px #647fab12; }
.hall { margin-top: 48px; }
.tier-panel-head { padding: 0 0 22px; margin-bottom: 24px; background: none; border: 0; border-bottom: 1px solid var(--pet-line); border-radius: 0; }
.tier-panel-title { color: #495a7c; font-size: 27px; font-weight: 700; }
.hall-group-copy { color: #78839a; font-size: 13px; line-height: 1.8; margin-top: 10px; }
.hall-group-head { margin: 26px 0 20px; }
.hall-group-title { font-size: 22px; font-weight: 700; color: #4e5f80; }
.hall-group { margin-bottom: 36px; }
.edition-grid, .unit-grid { gap: 16px; }
.edition-card, .unit-card { color: var(--pet-ink); background: #fff; border: 1px solid var(--pet-line); border-radius: 20px; box-shadow: 0 4px 0 #f0f2f7; padding: 22px; }
.edition-card:is(.general,.pep,.fltrp,.powerup) { background: #fff; }
.edition-card:is(.general,.pep,.fltrp,.powerup).is-active { background: #eff4fc; border-color: #b5c8e6; box-shadow: 0 4px 0 #e5edf9; }
.edition-card h3, .unit-card h3 { color: #52678c; font-size: 22px; }
.edition-card p, .unit-card p { color: #78829b; font-size: 13px; font-weight: 400; }
.edition-card:is(.general,.pep,.fltrp,.powerup) strong, .unit-card strong, .soon-link { color: #637daa; background: #eef3fc; border: 1px solid #d8e2f2; box-shadow: none; border-radius: 11px; padding: 10px 13px; font-size: 12px; }
.edition-panel-head { border-color: var(--pet-line); background: #f2f5fa; color: var(--pet-muted); border-radius: 14px; }
.unit-note { color: #76829d; background: #f0f4fb; border-color: #dee6f3; }
.soon-board:is(.junior-soon,.senior-soon,.university-soon,.pep-soon,.fltrp-soon,.powerup-soon), .soon-board { color: var(--pet-ink); border: 1px dashed #cbd6e7; background: #f4f5fb; border-radius: 24px; box-shadow: none; }
.soon-board p { color: #77819b; }
.pet-home .game-grid { gap: 20px; }
.game-card { display: flex; flex-direction: column; min-height: 0; border: 1px solid #e0e6ef; border-radius: 24px; overflow: hidden; background: #fff; color: var(--pet-ink); box-shadow: 0 6px 0 #edf0f6; }
.game-card > img, .game-card > .card-art { position: relative; inset: auto; width: 100%; height: 190px; min-height: 190px; object-fit: cover; opacity: 1; }
.game-card > img { transform: none; filter: saturate(.75); }
.game-card::after { display: none; }
.game-card:hover { transform: translateY(-3px); box-shadow: 0 6px 0 #e4eaf4, var(--pet-shadow); }
.game-card .game-copy { position: relative; inset: auto; padding: 22px; margin: 0; background: #fff; display: flex; flex-direction: column; flex: 1; }
.game-copy h2 { color: #4c6186; text-shadow: none; font-size: 22px; line-height: 1.45; font-weight: 700; }
.game-copy p { color: #75839b; font-size: 13px; line-height: 1.8; }
.game-copy ul { margin-bottom: 18px; }
.game-copy li { color: #79859e; background: #f3f5fa; border: 1px solid #e9edf4; font-size: 10px; }
.game-copy strong { margin-top: auto; align-self: flex-start; color: #fff; border: 1px solid #8399c0; background: #829bc4; padding: 10px 16px; border-radius: 12px; font-size: 13px; box-shadow: 0 3px 0 #e1e7f3; }
.site-foot { width: min(1160px, calc(100% - 64px)); border-top: 1px solid var(--pet-line); margin: 48px auto 0; padding: 22px 0 34px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.site-foot p { color: #7c88a1; font-size: 11px; margin: 0; }
.footer-motto { font-weight: 600; }
.footer-motto span { font-weight: 400; }
.site-foot .legal-links a { color: #7183a3; font-size: 11px; }
/* Account and legal pages */
body[data-auth-page] .site { background: radial-gradient(ellipse at 85% 15%, #ede9f780, transparent 44%), radial-gradient(ellipse at 10% 80%, #e4effa88, transparent 40%), var(--pet-paper); }
body[data-auth-page] .site-bar nav a { border-color: transparent; }
.auth-main { width: min(1060px, calc(100% - 64px)); margin: 34px auto 60px; }
body[data-auth-page] :is(.auth-shell,.auth-card,.legal-card) { background: #fff; color: var(--pet-ink); border: 1px solid #e1e6f0; border-radius: 30px; box-shadow: 0 15px 48px #7384ac14; }
body[data-auth-page] .auth-shell { grid-template-columns: 1fr 1.04fr; }
body[data-auth-page] .auth-intro { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 38px 32px 28px; border-right: 1px solid #e1e7f2; background: repeating-linear-gradient(90deg,#ffffff30 0 24px,transparent 24px 48px),repeating-linear-gradient(0deg,#ffffff30 0 24px,transparent 24px 48px),linear-gradient(145deg,#eef3fc,#edeaf7); }
body[data-auth-page] .auth-intro h2 { font-size: 29px; line-height: 1.5; color: #576b94; font-weight: 700; max-width: none; }
body[data-auth-page] .auth-intro-copy { color: #7886a1; font-size: 12px; line-height: 1.8; margin-top: 15px; }
.auth-pet-scene { flex: 1; position: relative; min-height: 290px; width: 100%; display: grid; place-items: center; }
.auth-pet { width: 225px; height: 290px; }
.auth-pet-scene .scene-star { left: 10%; top: 17%; }
body[data-auth-page] .auth-local-note { color: #7181a0; font-size: 12px; border-top: 0; margin: 10px 0 0; padding: 0; }
body[data-auth-page] .guest-link { color: #647eaf; font-weight: 500; }
body[data-auth-page] .auth-form-panel { background: #fff; padding: 44px 46px 32px; color: var(--pet-ink); }
.form-eyebrow { color: #90a0bd; font-size: 9px; letter-spacing: .12em; margin: 0 0 10px; font-weight: 600; }
body[data-auth-page] .auth-form-panel h1 { color: #4c6086; font-size: 28px; font-weight: 700; }
body[data-auth-page] .auth-form-panel .lede { color: #808ba0; font-size: 12px; line-height: 1.8; }
body[data-auth-page] .auth-mode-switch { background: #f2f4f9; border: 1px solid #e9edf4; border-radius: 14px; padding: 5px; margin: 28px 0 24px; }
body[data-auth-page] .auth-mode { color: #8590a5; font-size: 13px; font-weight: 500; border-radius: 10px; padding: 10px; }
body[data-auth-page] .auth-mode.is-active { background: #fff; color: #6079a7; box-shadow: 0 2px 5px #566d9920; }
body[data-auth-page] .auth-form-panel label { color: #5b6b89; font-size: 12px; font-weight: 500; gap: 9px; }
body[data-auth-page] :is(input[type=email], input[type=text], input[type=password]) { color: #4d5f81; font-family: var(--font); font-size: 15px; font-weight: 400; background: #fbfcfe; border: 1px solid #dce3ef; border-radius: 12px; padding: 14px 16px; box-shadow: inset 0 2px 3px #e8edf440; min-width: 0; }
body[data-auth-page] input::placeholder { color: #9aa4b6; font-weight: 400; font-size: 13px; }
body[data-auth-page] input:focus { outline: 3px solid #b6caed55; border-color: #91a9d0; }
body[data-auth-page] .auth-form-panel .auth-btn, body[data-auth-page] .auth-btn { color: #fff; font-size: 14px; font-weight: 600; background: linear-gradient(#8fa7ce,#7a93bf); border: 1px solid #7c92bb; border-radius: 13px; box-shadow: 0 4px 0 #e2e8f3; min-height: 48px; }
body[data-auth-page] .auth-form-panel .auth-btn:hover:not(:disabled) { background: #7089b7; }
body[data-auth-page] .auth-form-panel :is(.agree,.form-hint) { color: #838ea5; font-size: 11px; font-weight: 400; line-height: 1.75; }
body[data-auth-page] .auth-form-panel .agree { align-items: start; }
body[data-auth-page] input[type=checkbox] { accent-color: #809cc8; }
body[data-auth-page] .auth-form-panel a { color: #667eaa; }
body[data-auth-page] .auth-guest-mobile { color: #7c889f; }
body[data-auth-page] :is(.setup-card,.email-binding-box,.delete-box,.role-card) { border-color: #dfe5f1; }
body[data-auth-page] .setup-card { background: #faf2e2; color: #8c7959; border: 1px solid #eee0c9; border-radius: 14px; }
body[data-auth-page] .setup-card strong { color: #8c7959; }
body[data-auth-page] :is(.status,.progress-list span,.legal-card p,.legal-card li,.email-binding-box p,.auth-card .lede) { color: #7886a0; }
body[data-auth-page] .status[data-kind=error] { color: #ad4e68; }
body[data-auth-page] .status[data-kind=success] { color: #448376; }
body[data-auth-page] .role-card { background: #f6f8fc; color: #596c94; box-shadow: none; }
/* Shared game chrome; the illustrated worlds and gameplay cues keep their identities. */
.app { --ink: var(--pet-ink); --ink-soft: var(--pet-muted); }
.game-frame { box-shadow: inset 0 0 0 5px #edf2f8cc, inset 0 0 0 8px #9fb7d8b3; }
:is(.app,.screen) :is(.panel,.board,.home-panel,.result-card) { color: #485b80; background: #fbfcffed; border: 1px solid #d5dfef; border-radius: 24px; box-shadow: 0 8px 28px #354a7320; text-shadow: none; }
:is(.app,.screen) :is(.panel,.board) :is(h1,h2,h3) { color: #4d638c; text-shadow: none; }
:is(.app,.screen) :is(.panel,.board) :is(.lede,.tip,.world-en) { color: #6e7f9e; }
:is(.app,.screen) :is(.world-card,.help-card,.level-card,.stage-card) { color: #516b95; background: linear-gradient(135deg,#f9fbff,#eaf1fd); border: 1px solid #cbd9ef; border-radius: 18px; box-shadow: 0 4px 0 #dfe7f5; }
:is(.app,.screen) :is(.world-card,.help-card,.level-card,.stage-card):nth-child(3n + 2) { background: linear-gradient(135deg,#fbfaff,#eeebf8); }
:is(.app,.screen) :is(.world-card,.help-card,.level-card,.stage-card):nth-child(3n) { background: linear-gradient(135deg,#fffaf7,#f8efe5); }
:is(.app,.screen) :is(.world-card,.help-card,.level-card,.stage-card) :is(p,h3,strong,.world-en,.tip,.stars) { color: #5e749b; }
:is(.app,.screen) :is(.world-card,.level-card,.stage-card):hover { transform: translateY(-2px); }
:is(button,a):is(.primary,.ghost,.back,.link-btn,.listen,.hall-back,.listen-btn) { border: 1px solid #c8d5eb; border-radius: 13px; background: linear-gradient(#fff,#edf2fa); color: #57719e; box-shadow: 0 4px 0 #dce5f4; text-shadow: none; }
:is(button,a).primary { background: linear-gradient(#9cb6dc,#7f9aca); color: #fff; border-color: #7f96bf; }
.sign { color: #4d628b; background: linear-gradient(135deg,#fffdfa,#edf2fa); border: 1px solid #cbd8ed; border-radius: 20px; box-shadow: 0 6px 0 #afbfd750; text-shadow: none; }
.sign h1, .title-stack h1 { color: #52678c; text-shadow: none; }
.nail { background: radial-gradient(circle at 35% 30%,#fff,#b2c8e4); box-shadow: 0 1px 2px #8fa6c6; }
.title-kicker,.title-en,.board-kicker { color: #6f8ab8; }
.coin-badge,.home-progress { color: #697c9e; background: #f9f3e6; border: 1px solid #e8dbc2; box-shadow: 0 3px 0 #e5dbc955; }
/* One companion, shared by the hero and the floating button. */
.pet-companion { position: fixed; right: max(16px,env(safe-area-inset-right)); bottom: max(18px,env(safe-area-inset-bottom)); z-index: 80; width: 94px; display: grid; justify-items: center; pointer-events: none; }
.pet-companion[hidden], [data-pet-response][hidden] { display: none !important; }
.pet-companion__button { width: 86px; height: 112px; padding: 0; border: 0; border-radius: 40%; background: transparent; pointer-events: auto; cursor: pointer; transition: transform .2s; transform-origin: center bottom; }
.pet-companion__button img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 7px #647b9e26); }
.pet-companion__button:hover { transform: translateY(-4px); }
.pet-companion__button:focus-visible, [data-pet-interact]:focus-visible { outline: 3px solid #859fca; outline-offset: 4px; }
.pet-companion__label { border: 1px solid #dde5f1; border-radius: 12px; padding: 3px 11px; color: #6f83a6; background: #fffdf8eb; font: 10px var(--font); }
.pet-companion__bubble, .hero-pet-bubble { width: max-content; max-width: 230px; padding: 12px 16px; color: #5c7198; background: #fffefbef; border: 1px solid #d8e2f2; border-radius: 18px; box-shadow: 0 8px 25px #6c84b022; font: 13px/1.6 var(--font); }
.pet-companion__bubble { position: absolute; right: 10px; bottom: 132px; margin: 0; }
.hero-pet-bubble { position: absolute; z-index: 6; top: 0; left: 50%; transform: translateX(-50%); margin: 0; }
[data-pet-interact].is-talking { animation: pet-hop .55s ease; }
@keyframes pet-hop { 30% { transform: translateY(-14px) rotate(-4deg); } 60% { transform: translateY(-4px) rotate(3deg); } 100% { transform: none; } }
@media (max-width: 1020px) {
  .site-bar,.pet-home .hero,.path-heading,.tier-select,.hall,.site-foot { width: calc(100% - 48px); }
  .hub-bar { grid-template-columns: minmax(0,1fr) auto; row-gap: 14px; }
  .hub-bar .site-account { grid-column: 2; }
  .hub-bar nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; }
  .pet-home .hero { padding: 34px 30px; grid-template-columns: 1.1fr 1fr; }
  .pet-home .hero h1 { font-size: 36px; }
  .hero-scene { height: 330px; }
  .hero-pet { width: 245px; height: 320px; }
  .scene-orbit { width: 245px; height: 245px; }
  .word-hello { left: -12px; }
  .word-abc { right: -16px; }
  .hero-description { font-size: 13px; }
  .hero-topics { font-size: 9px; gap: 7px; }
  .auth-main { width: calc(100% - 48px); }
  body[data-auth-page] .auth-form-panel { padding: 36px 30px; }
}
@media (max-width: 720px) {
  .site-bar,.pet-home .hero,.path-heading,.tier-select,.hall,.site-foot { width: calc(100% - 32px); }
  .site-bar { padding: 16px 0; gap: 12px; }
  .brand strong { font-size: 18px; }
  .brand p { font-size: 8px; }
  .brand-mark,.brand-mark img { width: 39px; height: 47px; }
  .hub-bar nav { grid-template-columns: repeat(4,minmax(0,1fr)); min-width: 0; gap: 3px; }
  .hub-bar nav a { padding: 9px 2px; font-size: 10px; white-space: normal; border-radius: 10px; }
  .hub-bar :is(.account-link,.account-chip) { min-width: 61px; padding: 9px 13px; font-size: 12px; }
  .pet-home .hero { margin: 8px auto 32px; padding: 28px 24px 30px; grid-template-columns: minmax(0,1fr); gap: 18px; min-height: 0; border-radius: 28px; }
  .hero-copy { text-align: center; }
  .hero-eyebrow { justify-content: center; font-size: 10px; margin-bottom: 14px; }
  .pet-home .hero h1 { font-size: clamp(28px,8vw,38px); line-height: 1.45; letter-spacing: -.04em; }
  .hero-description { font-size: 11px; line-height: 1.9; margin: 18px 0; }
  .hero-actions { justify-content: center; gap: 12px; }
  .meow-button { padding: 12px 19px; border-radius: 13px; font-size: 13px; gap: 20px; }
  .hero-note { font-size: 10px; }
  .hero-topics { display: none; }
  .hero-scene { height: 255px; width: min(330px,100%); margin: 0 auto; }
  .hero-pet { width: 190px; height: 248px; }
  .scene-orbit { width: 216px; height: 216px; }
  .scene-orbit::after { inset: -12px; }
  .word-hello { left: 0; top: 20%; font-size: 18px; padding: 7px 11px; }
  .word-abc { right: -2px; bottom: 25%; font-size: 18px; padding: 8px 12px; }
  .star-one { font-size: 24px; top: 10%; right: 8%; }
  .star-two { font-size: 20px; bottom: 8%; }
  .cloud-one { bottom: 0; }
  .cloud-two { top: 12px; right: -7px; }
  .pet-hint { bottom: -14px; font-size: 10px; }
  .path-heading { align-items: start; flex-direction: column; gap: 8px; margin-bottom: 18px; }
  .path-heading h2 { font-size: 22px; }
  .path-heading > p { font-size: 11px; }
  .tier-select { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .tier-card { min-width: 0; padding: 18px 15px 15px; border-radius: 20px; min-height: 0; }
  .path-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 20px; }
  .tier-card > .tier-badge { font-size: 9px; padding: 3px 6px; }
  .tier-card h2 { font-size: clamp(15px,4vw,20px); white-space: nowrap; }
  .tier-card p { font-size: 11px; min-height: 60px; }
  .tier-card ul { display: none; }
  .tier-card:is(.primary,.junior,.senior,.university) strong { margin-top: 12px; padding-top: 10px; font-size: 11px; }
  .hall { margin-top: 36px; }
  .tier-panel-title { font-size: 24px; }
  .hall-group-copy { font-size: 12px; }
  .edition-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .edition-card { min-width: 0; padding: 17px 14px; border-radius: 18px; }
  .edition-card h3 { font-size: 19px; }
  .edition-card p { font-size: 11px; }
  .edition-card:is(.general,.pep,.fltrp,.powerup) strong { font-size: 11px; padding: 9px 10px; }
  .pet-home .game-grid { grid-template-columns: minmax(0,1fr); }
  .game-card { min-height: 0; }
  .game-card > img,.game-card > .card-art { height: 180px; min-height: 180px; }
  .game-copy h2 { font-size: 21px; }
  .site-foot { flex-direction: column; align-items: start; padding-bottom: 100px; gap: 12px; }
  body[data-auth-page] .site-bar nav a { padding: 8px 0; font-size: 12px; }
  .auth-main { width: calc(100% - 32px); margin: 12px auto 35px; }
  body[data-auth-page] .auth-shell { grid-template-columns: minmax(0,1fr); border-radius: 25px; }
  body[data-auth-page] .auth-intro { display: flex; min-height: 148px; padding: 22px 132px 20px 22px; text-align: left; align-items: start; justify-content: center; border-right: 0; border-bottom: 1px solid #e1e7f2; }
  body[data-auth-page] .auth-intro > .kicker { font-size: 7px; letter-spacing: .08em; }
  body[data-auth-page] .auth-intro h2 { font-size: 20px; line-height: 1.5; margin-top: 8px; }
  body[data-auth-page] .auth-intro-copy, body[data-auth-page] .auth-local-note { display: none; }
  .auth-pet-scene { position: absolute; right: 8px; top: 7px; width: 116px; min-height: 0; height: 142px; }
  .auth-pet { width: 114px; height: 142px; }
  .auth-pet-scene .scene-star { font-size: 16px; left: -4px; top: 7px; }
  .auth-pet-scene .hero-pet-bubble { left: auto; right: 0; transform: none; top: 0; max-width: 220px; font-size: 11px; }
  body[data-auth-page] .auth-form-panel { padding: 26px 23px; }
  body[data-auth-page] .auth-form-panel h1 { font-size: 24px; }
  body[data-auth-page] .auth-form-panel input:is([type=email],[type=text],[type=password]) { font-size: 16px; }
  body[data-auth-page] .auth-guest-mobile { display: block; font-size: 11px; line-height: 1.8; }
  .pet-companion { width: 70px; right: 10px; bottom: max(14px,env(safe-area-inset-bottom)); }
  .pet-companion__button { width: 68px; height: 88px; }
  .pet-companion__label { font-size: 9px; }
  .pet-companion__bubble { bottom: 111px; font-size: 12px; max-width: min(216px,calc(100vw - 40px)); }
}
@media (max-width: 360px) {
  .pet-home .hero { padding-inline: 18px; }
  .pet-home .hero h1 { font-size: 28px; }
  .hero-actions { gap: 10px; }
  .hero-note { font-size: 9px; }
  .tier-card { padding: 15px 12px; }
  body[data-auth-page] .auth-intro { padding-left: 18px; padding-right: 118px; }
  body[data-auth-page] .auth-intro h2 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site *, .pet-companion *, [data-pet-interact] { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shared Little Rabbit surfaces. Keep each game's illustrated play field intact. */
body, .site { background: var(--pet-paper); color: var(--pet-ink); }
.site-bar { padding: 15px 0; }
.brand p { color: #a36b7b; letter-spacing: 0; }
.brand strong { color: #495a76; letter-spacing: 0; }
.brand-mark img { mix-blend-mode: multiply; }
.site-bar nav a { color: #586980; border-radius: 8px; }
.site-bar nav a:hover, .site-bar nav a.is-active { color: #435c7d; background: #e9eef3; border-color: #d6e0e7; }
.hub-bar :is(.account-link,.account-chip) { color: #526985; background: #fff; border-color: #dce2e7; border-radius: 8px; box-shadow: none; }

.pet-home .hero {
  width: 100%; min-height: 430px; margin: 0 0 34px; padding: 48px max(32px, calc((100vw - 1160px) / 2));
  display: block; position: relative; overflow: hidden; isolation: isolate; text-align: left;
  border: 0; border-top: 1px solid #e8e8eb; border-bottom: 1px solid #eadfe0; border-radius: 0;
  background: #faf7f7; box-shadow: none;
}
.pet-home .hero::before, .pet-home .hero::after { content: none; }
.pet-home .hero-copy { width: min(56%, 570px); max-width: 570px; }
.hero-eyebrow { color: #9f6878; margin-bottom: 16px; font-size: 12px; }
.hero-eyebrow > span { color: #ba9258; }
.pet-home .hero h1 { color: #455978; font-size: 46px; line-height: 1.25; letter-spacing: 0; }
.pet-home .hero h1 span { color: #a96d80; }
.pet-home .hero h1 span::after { height: 4px; bottom: -5px; border-radius: 0; background: #ebc7cd; }
.hero-description { color: #657185; font-size: 14px; line-height: 1.75; margin: 18px 0 23px; }
.meow-button, .site .meow-button { gap: 12px; padding: 12px 18px; color: #fff; background: #5c7393; border: 1px solid #506684; border-radius: 8px; box-shadow: none; }
.meow-button:hover { background: #4e6484; box-shadow: none; }
.hero-note { color: #687b76; }
.hero-topics { color: #788285; margin-top: 24px; }
.hero-topics i { background: #c4979f; }
.hero-scene { position: absolute; top: 18px; right: max(30px, calc((100vw - 1160px) / 2 + 18px)); width: 360px; height: 385px; }
.hero-pet { width: 270px; height: 350px; }
.hero-pet img, .auth-pet img, .pet-companion__button img {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 72% 54% at 50% 51%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 54% at 50% 51%, #000 70%, transparent 100%);
  filter: drop-shadow(0 8px 12px #716c7a18);
}
.hero-pet:hover, .auth-pet:hover { transform: translateY(-5px); }
.pet-hint { bottom: 0; color: #8a6d79; letter-spacing: 0; }
.pet-hint span { color: #bb7788; }
.path-heading { margin-bottom: 17px; }
.kicker, .hall-label { color: #a66b7c; letter-spacing: 0; }
.path-heading h2, .tier-panel-title, .hall-group-title { color: #465b78; letter-spacing: 0; }
.path-heading > p, .hall-group-copy { color: #68768a; }

.tier-card { min-height: 234px; border: 1px solid #dfe3e7; border-radius: 8px; box-shadow: none; }
.tier-card.primary { background: #eef2f4; }
.tier-card.junior { background: #f3eef1; }
.tier-card.senior { background: #f4f0f4; }
.tier-card.university { background: #f3f2eb; }
.tier-card:hover, .tier-card.is-active { border-color: #9eafc2; transform: translateY(-2px); box-shadow: var(--pet-shadow); }
.path-icon { color: #607e9e; background: #dce6ec; border: 1px solid #d5e0e9; border-radius: 8px; box-shadow: none; }
.junior .path-icon { color: #a36478; background: #ecdce2; border-color: #e5d0d8; }
.senior .path-icon { color: #7c7696; background: #e9e5ee; border-color: #ddd7e5; }
.university .path-icon { color: #967747; background: #efe3cd; border-color: #e8d9bd; }
.tier-badge, .tag { color: #5e6e81; background: #fffdfa; border-color: #e4e4e6; border-radius: 6px; }
.tier-card h2, .edition-card h3, .unit-card h3 { color: #485c79; }
.tier-card p, .edition-card p, .unit-card p { color: #68778a; }
.tier-card:is(.primary,.junior,.senior,.university) strong { color: #516f91; border-top-color: #cbd4db; }
.hall { margin-top: 38px; }
.tier-panel-head { border-bottom-color: #e2e4e7; }
.edition-card, .unit-card, .game-card { border-color: #e0e4e7; border-radius: 8px; box-shadow: none; }
.edition-card:is(.general,.pep,.fltrp,.powerup).is-active { background: #eff2f5; border-color: #9baec1; box-shadow: none; }
.edition-card:is(.general,.pep,.fltrp,.powerup) strong, .unit-card strong, .soon-link { color: #526c88; background: #eef2f5; border-color: #d6e0e8; border-radius: 8px; }
.edition-panel-head, .unit-note { color: #5f6f82; background: #f0f2f3; border-color: #e0e4e5; border-radius: 8px; }
.soon-board:is(.junior-soon,.senior-soon,.university-soon,.pep-soon,.fltrp-soon,.powerup-soon), .soon-board { background: #f6f5f5; border-color: #d9dce0; border-radius: 8px; }
.game-card { background: #fff; }
.game-card:hover { box-shadow: var(--pet-shadow); }
.game-card > img { filter: saturate(.88); }
.game-copy h2 { color: #455c78; }
.game-copy p, .game-copy li { color: #677689; }
.game-copy li { background: #f3f5f5; border-color: #e7e9e9; }
.game-copy strong, .site .game-card .game-copy strong { color: #fff; background: #5c7393; border-color: #506684; border-radius: 8px; box-shadow: none; }
.site-foot { border-top-color: #e3e4e8; }
.site-foot p, .site-foot .legal-links a { color: #64758a; }

body[data-auth-page] .site { background: var(--pet-paper); }
body[data-auth-page] :is(.auth-shell,.auth-card,.legal-card), .site :is(.legal-card,.auth-card) { border-color: #dfe3e7; border-radius: 8px; box-shadow: none; }
body[data-auth-page] .auth-intro { background: #eff1f4; border-color: #e0e3e7; }
body[data-auth-page] .auth-intro h2, body[data-auth-page] .auth-form-panel h1 { color: #495e7a; }
body[data-auth-page] .auth-intro-copy { color: #637386; }
body[data-auth-page] .auth-form-panel { background: #fff; }
body[data-auth-page] .auth-mode-switch { background: #edf0f2; border-color: #dce1e4; border-radius: 8px; }
body[data-auth-page] .auth-mode { border-radius: 6px; }
body[data-auth-page] .auth-mode.is-active { color: #526b88; box-shadow: none; }
body[data-auth-page] :is(input[type=email],input[type=text],input[type=password]) { background: #fff; border-color: #d7dfe4; border-radius: 8px; box-shadow: none; }
body[data-auth-page] .site .auth-form-panel .auth-btn, body[data-auth-page] .site .auth-btn, .site .auth-card .auth-btn { color: #fff; background: #5c7393; border-color: #506684; border-radius: 8px; box-shadow: none; }
body[data-auth-page] .site .auth-form-panel .auth-btn:hover:not(:disabled) { color: #fff; background: #4e6484; }
body[data-auth-page] .role-card, body[data-auth-page] .setup-card { border-radius: 8px; }
body[data-auth-page] .role-card { background: #f0f3f5; }
body[data-auth-page] .setup-card { background: #f8f2e8; }
body[data-auth-page] .auth-form-panel a, body[data-auth-page] .guest-link, .site .auth-card a, .site .legal-card a { color: #526e91; }

.game-frame { box-shadow: inset 0 0 0 5px #eef1f3cc, inset 0 0 0 8px #a8b8c9b3; }
:is(.app,.screen) :is(.panel,.board,.home-panel,.result-card) { color: #475a75; background: #fffefaed; border-color: #dce2e6; border-radius: 8px; box-shadow: 0 6px 20px #52617a16; }
:is(.app,.screen) :is(.world-card,.help-card,.level-card,.stage-card) { color: #50647e; background: #eef2f4; border-color: #d7e0e6; border-radius: 8px; box-shadow: none; }
:is(.app,.screen) :is(.world-card,.help-card,.level-card,.stage-card):nth-child(3n + 2) { background: #f4edef; }
:is(.app,.screen) :is(.world-card,.help-card,.level-card,.stage-card):nth-child(3n) { background: #f2f2eb; }
:is(button,a):is(.primary,.ghost,.back,.link-btn,.listen,.hall-back,.listen-btn) { color: #516c8a; background: #f0f3f5; border-color: #d1dce4; border-radius: 8px; box-shadow: none; }
:is(button,a).primary { color: #fff; background: #5c7393; border-color: #506684; }
.pet-companion__label { color: #9a6074; background: #fffdfa; border-color: #e8dadd; border-radius: 6px; }
.pet-companion__bubble, .hero-pet-bubble { color: #52647d; background: #fffdfa; border-color: #e4d9de; border-radius: 8px; box-shadow: var(--pet-shadow); }

@media (max-width: 1020px) {
  .pet-home .hero { width: 100%; padding-inline: 30px; }
  .pet-home .hero-copy { width: 58%; }
  .hero-scene { right: 25px; }
}
@media (max-width: 720px) {
  .pet-home .hero { width: 100%; margin: 0 0 25px; min-height: 0; padding: 24px 20px 12px; border-radius: 0; }
  .pet-home .hero-copy { width: 100%; max-width: none; text-align: left; }
  .hero-eyebrow { justify-content: flex-start; }
  .pet-home .hero h1 { font-size: 30px; line-height: 1.3; letter-spacing: 0; }
  .hero-description { font-size: 12px; margin: 14px 0 17px; }
  .hero-actions { justify-content: flex-start; }
  .hero-topics { display: flex; font-size: 10px; gap: 7px; margin-top: 16px; }
  .hero-scene { position: relative; top: auto; right: auto; width: min(100%, 300px); height: 215px; margin: 4px auto 0; }
  .hero-pet { width: 170px; height: 210px; }
  .pet-hint { bottom: -2px; }
  .hero-pet-bubble { top: 0; left: 50%; }
  .tier-card { border-radius: 8px; }
  .tier-card h2 { font-size: 17px; white-space: normal; }
  .edition-card, .unit-card, .game-card { border-radius: 8px; }
  body[data-auth-page] .auth-shell { border-radius: 8px; }
  body[data-auth-page] .auth-intro { border-radius: 0; }
  body[data-auth-page] .auth-form-panel { border-radius: 0; }
}