/* ═══════════════════════════════════════════════════════════════
   Kingdomland World — design system
   Warm pastel palette, rounded "toy" UI, big touch targets (≥56px).
   ═══════════════════════════════════════════════════════════════ */
:root {
  --sky: #8fd3ff; --sky-2: #cfeeff; --pink: #ff9ec7; --pink-2: #ffd3e6;
  --mint: #8fe3c0; --mint-2: #d4f7e8; --gold: #ffc93c; --gold-2: #ffe7a3;
  --cream: #fff7e8; --lav: #c9b8ff; --lav-2: #ece5ff;
  --ink: #1f2a5c; --ink-2: #4b5689; --navy: #1d2a5b; --white: #fff;
  --ok: #3fbf7f; --bad: #ff6b7a;
  --r-lg: 28px; --r-md: 20px; --r-sm: 14px;
  --shadow: 0 6px 0 rgba(31, 42, 92, .16), 0 14px 30px rgba(31, 42, 92, .18);
  --font-display: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #cfeeff; color: var(--ink); font-family: var(--font); }
body { user-select: none; -webkit-user-select: none; touch-action: none; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { max-width: 100%; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px;
  border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: .2px;
  background: var(--white); color: var(--ink); box-shadow: 0 5px 0 rgba(31,42,92,.18); transition: transform .12s, box-shadow .12s, filter .12s; }
.btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(31,42,92,.18); }
.btn.primary { background: linear-gradient(180deg, #ffd65c, #ffb81f); color: #5a3400; box-shadow: 0 6px 0 #d98e00; }
.btn.pink { background: linear-gradient(180deg, #ffb4d4, #ff82b6); color: #6b0b3a; box-shadow: 0 6px 0 #d9568f; }
.btn.mint { background: linear-gradient(180deg, #a6f0cf, #5fd3a3); color: #0b4a33; box-shadow: 0 6px 0 #33a878; }
.btn.sky { background: linear-gradient(180deg, #b5e4ff, #6cc3ff); color: #083a63; box-shadow: 0 6px 0 #3b93d6; }
.btn.ghost { background: rgba(255,255,255,.75); min-height: 44px; font-size: 16px; padding: 0 16px; }
.btn.huge { min-height: 68px; font-size: 26px; padding: 0 40px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.round { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,.95); box-shadow: var(--shadow); font-size: 24px; display: grid; place-items: center; transition: transform .15s; }
.round:active { transform: translateY(2px); }
.x-btn { position: absolute; top: 14px; right: 14px; width: 52px; height: 52px; border-radius: 50%; background: var(--white);
  box-shadow: 0 4px 0 rgba(31,42,92,.2); font-size: 26px; font-weight: 700; z-index: 5; display: grid; place-items: center; }

/* ── screens ── */
.screen { position: fixed; inset: 0; z-index: 20; }
.scr-loading { display: grid; place-items: center; background: #1d2a5b; overflow: hidden; }
.title-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1); }
.title-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29,42,91,.25) 0%, rgba(29,42,91,.15) 40%, rgba(29,42,91,.85) 100%); }
.title-sparkles { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 30%, #fff 60%, transparent), radial-gradient(3px 3px at 70% 20%, #ffe38a 60%, transparent),
  radial-gradient(2px 2px at 40% 70%, #fff 60%, transparent), radial-gradient(2px 2px at 85% 60%, #ffd6e8 60%, transparent), radial-gradient(3px 3px at 55% 45%, #fff 60%, transparent), radial-gradient(2px 2px at 10% 80%, #ffe38a 60%, transparent);
  animation: twinkle 3s ease-in-out infinite alternate; pointer-events: none; }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
.load-center { position: relative; text-align: center; width: min(560px, 90vw); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.load-logo { width: min(420px, 70vw); height: auto; filter: drop-shadow(0 14px 24px rgba(0,0,0,.45)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.title-tag { margin: 0; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 2.6vw, 22px); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.load-bar { width: min(420px, 80vw); height: 20px; margin-top: 14px; border-radius: 999px; background: rgba(255,255,255,.28); border: 2px solid rgba(255,255,255,.6); overflow: hidden; }
.load-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ff9ec7, #ffc93c); box-shadow: 0 0 16px #ffc93c; transition: width .25s; }
.load-text { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.title-play { margin-top: 8px; animation: popIn .5s cubic-bezier(.2,1.5,.4,1), pulse 1.8s 1s infinite; box-shadow: 0 8px 0 #d98e00, 0 18px 40px rgba(255,201,60,.45); }
.title-foot { position: absolute; bottom: calc(14px + var(--safe-b)); left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-weight: 700; font-size: 13px; }

/* character select */

/* ── HUD ── */
.hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; transition: opacity .3s; }
.has-layer .hud, .has-layer .prompts { opacity: 0; pointer-events: none !important; }
.hud button, .hud canvas, .hud .joystick { pointer-events: auto; }
.hud-tl { position: absolute; top: calc(12px + var(--safe-t)); left: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hud-tr { position: absolute; top: calc(12px + var(--safe-t)); right: 12px; display: flex; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 6px; border-radius: 999px; background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow); font-family: var(--font-display); font-weight: 600; font-size: 20px; transition: transform .15s; }
.chip:hover, .round:hover { transform: translateY(-2px) scale(1.04); }
.chip.stars { padding: 0 18px; background: linear-gradient(180deg, #fff3c4, #ffd65c); color: #5a3400; }
.chip .ic { font-size: 24px; }
.chip-ava { width: 42px; height: 42px; border-radius: 50%; background: var(--pink-2); display: grid; place-items: center; font-size: 24px; overflow: hidden; }
.chip-ava img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.place-pill { padding: 6px 14px; border-radius: 999px; background: rgba(31,42,92,.72); backdrop-filter: blur(8px); color: #fff; font-weight: 700; font-size: 14px; animation: promptIn .3s; }
.chip.bump { animation: bump .5s; }
@keyframes bump { 40% { transform: scale(1.18); } }
.minimap { position: absolute; top: calc(76px + var(--safe-t)); right: 12px; width: 150px; height: 150px; border-radius: 50%;
  box-shadow: var(--shadow); border: 5px solid #fff; background: #bfe8a8; cursor: pointer; }
.joystick { position: absolute; left: 22px; bottom: calc(22px + var(--safe-b)); width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,255,255,.35); border: 3px solid rgba(255,255,255,.8); display: none; touch-action: none; }
.stick { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); }
.touch .joystick { display: block; }
.act-btn { position: absolute; right: 24px; bottom: calc(30px + var(--safe-b)); width: 96px; height: 96px; border-radius: 50%; font-size: 44px;
  background: linear-gradient(180deg, #ffd65c, #ffb81f); box-shadow: 0 7px 0 #d98e00, 0 14px 30px rgba(31,42,92,.25); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { transform: scale(1.07); } }
.key-hint { position: absolute; left: 50%; bottom: calc(10px + var(--safe-b)); transform: translateX(-50%); padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.75); font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: opacity 1s; }
.touch .key-hint { display: none; }

/* world-anchored prompts */
.prompts { position: fixed; inset: 0; pointer-events: none; z-index: 9; }
.prompt { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: auto; display: flex; align-items: center; gap: 10px;
  padding: 10px 22px 10px 12px; border-radius: 999px; background: linear-gradient(180deg, #fff, #fff4dc); border: 3px solid #ffc93c; box-shadow: 0 6px 0 #d98e00, 0 14px 30px rgba(31,42,92,.25); font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--ink); white-space: nowrap; animation: promptIn .25s ease-out; will-change: transform; }
.prompt .p-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--gold-2); }
.prompt .p-key { font-family: var(--font); font-size: 12px; padding: 2px 7px; border-radius: 6px; background: var(--ink); color: #fff; margin-left: 2px; }
.touch .prompt .p-key { display: none; }
.prompt::after { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -10px; border: 10px solid transparent; border-bottom: 0; border-top-color: #ffc93c; }
@keyframes promptIn { from { opacity: 0; margin-top: 10px; } }
.tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); padding: 4px 12px; border-radius: 999px; background: rgba(31,42,92,.78);
  color: #fff; font-weight: 800; font-size: 13px; white-space: nowrap; pointer-events: none; }
.bubble { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); max-width: 240px; padding: 10px 14px; border-radius: 18px; background: #fff;
  box-shadow: var(--shadow); font-weight: 700; font-size: 15px; white-space: normal; text-align: center; pointer-events: none; animation: promptIn .3s; }
.tap-marker { position: fixed; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 4px rgba(255,158,199,.6);
  pointer-events: none; z-index: 8; animation: tap .6s ease-out forwards; }
@keyframes tap { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }

/* ── overlay / panels ── */
.overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(31,42,92,.45); backdrop-filter: blur(4px); animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } }
.panel { position: relative; width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; background: var(--cream);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 26px 26px 24px; animation: popIn .28s cubic-bezier(.2,1.4,.4,1); touch-action: pan-y; user-select: text; }
.panel.narrow { width: min(520px, calc(100vw - 24px)); }
@keyframes popIn { from { transform: scale(.85); opacity: 0; } }
.panel h2 { font-family: var(--font-display); font-size: 32px; margin: 0 60px 4px 0; line-height: 1.1; }
.panel .sub { color: var(--ink-2); margin: 0 0 16px; font-weight: 600; }
.panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.panel-head .emo { font-size: 44px; width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--gold-2); flex: none; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.card { position: relative; background: #fff; border-radius: var(--r-md); box-shadow: 0 5px 0 rgba(31,42,92,.12); overflow: hidden; text-align: left;
  display: flex; flex-direction: column; transition: transform .15s; }
.card:hover { transform: translateY(-3px); }
.card .thumb { aspect-ratio: 16/10; background: var(--sky-2) center/cover; display: grid; place-items: center; font-size: 54px; }
.card .thumb.tall { aspect-ratio: 3/4; }
.card .body { padding: 10px 14px 14px; }
.card .t { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.15; }
.card .d { font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.card .done { position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: 999px; background: var(--ok); color: #fff; font-weight: 800; font-size: 13px; }
.card.locked { filter: grayscale(.8); opacity: .7; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--lav-2); font-size: 12px; font-weight: 800; color: var(--ink-2); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.tabs button { padding: 10px 16px; border-radius: 999px; background: #fff; font-weight: 800; box-shadow: 0 3px 0 rgba(31,42,92,.12); }
.tabs button.on { background: var(--ink); color: #fff; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; } .row.center { justify-content: center; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.todo { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #fff0c2; color: #7a5200; font-size: 12px; font-weight: 800; }

/* lesson player */
.lesson { text-align: center; }
.lesson .stage-img { width: 100%; max-height: 46vh; object-fit: cover; border-radius: var(--r-md); box-shadow: 0 5px 0 rgba(31,42,92,.12); background: var(--sky-2); }
.lesson .big-emoji { font-size: 110px; line-height: 1.1; margin: 8px 0; }
.lesson .say { font-family: var(--font-display); font-size: clamp(20px, 3vw, 28px); font-weight: 600; margin: 14px auto; max-width: 720px; line-height: 1.3; }
.lesson .ref { font-weight: 800; color: #b86a00; }
.verse { background: #fff; border-radius: var(--r-md); padding: 22px; font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 32px); line-height: 1.35; box-shadow: 0 5px 0 rgba(31,42,92,.1); }
.verse .w { display: inline-block; margin: 3px; padding: 4px 10px; border-radius: 12px; transition: all .2s; }
.verse .w.hide { background: var(--lav-2); color: transparent; min-width: 60px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.choice { min-height: 72px; padding: 12px; border-radius: var(--r-md); background: #fff; box-shadow: 0 5px 0 rgba(31,42,92,.14); font-family: var(--font-display);
  font-weight: 600; font-size: 22px; }
.choice .emo { display: block; font-size: 46px; }
.choice.right { background: var(--mint); animation: bump .4s; }
.choice.wrong { background: var(--pink-2); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.progress-dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 12px; }
.progress-dots i { width: 28px; height: 8px; border-radius: 99px; background: #dfe3f3; }
.progress-dots i.on { background: var(--pink); }
.speak { margin-left: 6px; }

/* book reader — two-page spread with 3D page turns */
.reader { position: fixed; inset: 0; z-index: 31; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #5a3d2b 0%, #2c1d14 100%); touch-action: none; }
.reader .r-top { position: absolute; top: calc(10px + var(--safe-t)); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; z-index: 5; }
.reader .r-title { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 20px; text-shadow: 0 2px 6px rgba(0,0,0,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book { position: relative; width: min(92vw, calc((100vh - 170px) * 1.5)); aspect-ratio: 3 / 2; perspective: 2400px; }
.book .spread { position: absolute; inset: 0; display: flex; }
.leaf-half { position: relative; width: 50%; height: 100%; overflow: hidden; background: #fffaf0; }
.leaf-half.l { border-radius: 14px 0 0 14px; box-shadow: inset -18px 0 26px -18px rgba(90,60,30,.45); }
.leaf-half.r { border-radius: 0 14px 14px 0; box-shadow: inset 18px 0 26px -18px rgba(90,60,30,.45); }
.book .shadow { position: absolute; inset: -2% -1.5%; border-radius: 20px; background: #6e2f2f; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.page-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5%; }
.page-face .pic { flex: 1; border-radius: 12px; background: var(--sky-2) center/cover; display: grid; place-items: center; font-size: min(18vw, 140px); overflow: hidden; }
.page-face .txt { font-family: var(--font-display); font-weight: 500; font-size: clamp(15px, 2.1vw, 26px); line-height: 1.35; padding-top: 4%; color: #3a2a18; }
.page-face .txt.only { flex: 1; display: grid; place-items: center; text-align: center; font-size: clamp(18px, 2.6vw, 32px); }
.page-face .pno { position: absolute; bottom: 2.5%; font-size: 12px; font-weight: 800; color: #b09070; }
.leaf-half.l .pno { left: 5%; } .leaf-half.r .pno { right: 5%; }
.page-face.cover { padding: 0; }
.page-face.cover .pic { border-radius: 0; }
.page-face.cover .cover-title { position: absolute; left: 6%; right: 6%; bottom: 6%; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.9);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.8vw, 34px); text-align: center; }
.page-face.end { align-items: center; justify-content: center; text-align: center; gap: 12px; }
.flipper { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.45,.05,.3,1); z-index: 3; }
.flipper.fwd { left: 50%; transform-origin: left center; }
.flipper.back { left: 0; transform-origin: right center; }
.flipper .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #fffaf0; }
.flipper .face.b { transform: rotateY(180deg); }
.flipper.fwd .face.f { border-radius: 0 14px 14px 0; } .flipper.fwd .face.b { border-radius: 14px 0 0 14px; }
.flipper.back .face.f { border-radius: 14px 0 0 14px; } .flipper.back .face.b { border-radius: 0 14px 14px 0; }
.flipper .face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 30%); opacity: 0; transition: opacity .75s; pointer-events: none; }
.flipper.go .face::after { opacity: 1; }
.flipper.fwd.go { transform: rotateY(-180deg); }
.flipper.back.go { transform: rotateY(180deg); }
.book .hot { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 4; cursor: pointer; }
.book.no-hot .hot { display: none; }
.book .hot.l { left: 0; } .book .hot.r { right: 0; }
.reader .r-bottom { margin-top: 16px; display: flex; gap: 12px; align-items: center; z-index: 5; }
.reader .r-count { color: #fff; font-weight: 800; min-width: 110px; text-align: center; }
.reader .toc { position: absolute; top: 70px; right: 12px; width: 260px; max-height: 60vh; overflow: auto; background: var(--cream); border-radius: var(--r-md); padding: 10px; z-index: 6; box-shadow: var(--shadow); }
.reader .toc button { display: block; width: 100%; text-align: left; padding: 10px; border-radius: 10px; font-weight: 700; }
.reader .toc button:hover { background: #fff; }
@media (max-aspect-ratio: 1/1) { .book { width: 94vw; aspect-ratio: 3/4; } .book.single .leaf-half.l, .book.single .flipper.back { display: none; } .book.single .leaf-half.r { width: 100%; border-radius: 14px; } .book.single .flipper.fwd { left: 0; width: 100%; } }
.coloring svg { width: 100%; height: 100%; }
.coloring svg [data-fill] { cursor: pointer; stroke: #3a2a18; stroke-width: 3; transition: fill .2s; }
.palette { display: flex; gap: 6px; justify-content: center; padding-top: 3%; flex-wrap: wrap; }
.palette button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.palette button.on { transform: scale(1.2); border-color: var(--ink); }

/* video */
.player { width: min(1000px, calc(100vw - 24px)); }
.player video { width: 100%; border-radius: var(--r-md); background: #000; display: block; max-height: 70vh; }

/* arcade iframe */
.arcade-wrap { position: fixed; inset: 0; z-index: 31; background: #070e2c; }
.arcade-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.arcade-wrap .x-btn { top: calc(10px + var(--safe-t)); left: 10px; right: auto; }

/* rewards */
.reward-pop { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 40; text-align: center; pointer-events: none; animation: rewardIn .5s cubic-bezier(.2,1.6,.4,1); }
.reward-pop .burst { font-size: 120px; filter: drop-shadow(0 8px 16px rgba(31,42,92,.35)); animation: spin 2s ease-out; }
.reward-pop .label { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: #fff; text-shadow: 0 3px 0 #e2679d, 0 6px 14px rgba(31,42,92,.4); }
@keyframes rewardIn { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
@keyframes spin { from { transform: rotate(-30deg) scale(.6); } }
.badge { width: 110px; text-align: center; }
.badge .b-ic { width: 90px; height: 90px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; background: var(--gold-2); box-shadow: 0 5px 0 rgba(31,42,92,.12); }
.badge.off .b-ic { filter: grayscale(1); opacity: .35; }
.badge .b-t { font-weight: 800; font-size: 13px; }
.meter { height: 16px; border-radius: 99px; background: #e6e9f5; overflow: hidden; }
.meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--gold)); }

/* toasts */
.toasts { position: fixed; top: calc(84px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 45; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 12px 20px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-weight: 800; font-size: 17px; animation: promptIn .3s; }
.toast.gold { background: linear-gradient(180deg, #fff3c4, #ffd65c); color: #5a3400; }

/* parent area (calm, adult styling) */
.parent { background: #f6f7fb; font-size: 15px; }
.parent h2 { font-family: var(--font); font-weight: 800; font-size: 26px; }
.parent table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
.parent th, .parent td { padding: 10px 12px; border-bottom: 1px solid #e6e8f0; text-align: left; font-size: 14px; }
.parent input, .parent select { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid #cfd4e6; background: #fff; min-width: 0; }
.parent label { display: block; font-weight: 700; margin: 10px 0 4px; }
.parent .box { background: #fff; border-radius: 14px; padding: 16px; margin: 12px 0; border: 1px solid #e6e8f0; }
.keypad { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; justify-content: center; margin: 14px 0; }
.keypad button { height: 64px; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.15); font-size: 26px; font-weight: 800; }
.gate-q { font-size: 30px; font-weight: 800; text-align: center; }
.gate-a { font-size: 34px; font-weight: 800; text-align: center; min-height: 44px; letter-spacing: 4px; }

/* map */
.bigmap { position: relative; width: 100%; aspect-ratio: 1; max-height: 70vh; margin: 0 auto; border-radius: var(--r-md); background: #bfe8a8; overflow: hidden; }
.bigmap canvas { width: 100%; height: 100%; display: block; }
.bigmap .pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; font-size: 12px; }
.bigmap .pin b { width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.2); display: grid; place-items: center; font-size: 26px; }
.bigmap .pin span { background: rgba(255,255,255,.9); padding: 1px 8px; border-radius: 99px; white-space: nowrap; }

.fade { position: fixed; inset: 0; background: #fff7e8; opacity: 0; pointer-events: none; z-index: 50; transition: opacity .35s; }
.fade.on { opacity: 1; pointer-events: auto; }
.break-screen { text-align: center; }
.break-screen .big-emoji { font-size: 120px; }

@media (max-width: 640px) {
  .panel { padding: 20px 16px; }
  .panel h2 { font-size: 26px; }
  .minimap { width: 110px; height: 110px; top: calc(70px + var(--safe-t)); }
  .chip { height: 46px; font-size: 17px; }
  .round { width: 46px; height: 46px; font-size: 20px; }
  .prompt { font-size: 18px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── 3D book reader chrome (the book itself is WebGL) ── */
.reader3d { position: fixed; inset: 0; z-index: 31; pointer-events: auto; touch-action: none; }
.reader3d .r-top { position: absolute; top: calc(10px + var(--safe-t)); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.reader3d .r-title { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 20px; text-shadow: 0 2px 8px rgba(0,0,0,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader3d .btn.ghost { background: rgba(255,255,255,.88); }
.reader3d .btn.ghost.on { background: linear-gradient(180deg, #a6f0cf, #5fd3a3); color: #0b4a33; }
.reader3d .caption { position: absolute; left: 50%; bottom: calc(112px + var(--safe-b)); transform: translateX(-50%); max-width: min(900px, calc(100vw - 32px));
  padding: 14px 24px; border-radius: 22px; background: rgba(255,250,240,.94); box-shadow: var(--shadow); font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 2.4vw, 24px); line-height: 1.35; color: #3a2a18; text-align: center; animation: promptIn .35s; }
.reader3d .r-bottom { position: absolute; left: 0; right: 0; bottom: calc(18px + var(--safe-b)); display: flex; gap: 14px; align-items: center; justify-content: center; }
.reader3d .r-count { color: #fff; font-weight: 800; min-width: 120px; text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
@media (max-width: 640px) { .reader3d .caption { bottom: calc(96px + var(--safe-b)); font-size: 16px; padding: 10px 14px; } .reader3d .r-title { font-size: 15px; } }

/* ── cinema mode (watching on the 3D screen) ── */
.cinema-bar { position: fixed; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); z-index: 12; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 14px; border-radius: 999px; background: rgba(31,42,92,.85); backdrop-filter: blur(10px); box-shadow: var(--shadow); animation: promptIn .3s; }
.cinema-title { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 18px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cinema .hud .minimap, .cinema .hud .key-hint, .cinema .hud .joystick, .cinema .prompts { display: none !important; }
.cinema #gl { transition: filter .5s; }

/* ── confetti ── */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 44; overflow: hidden; }
.confetti i { position: absolute; top: -20px; border-radius: 3px; animation: confetti linear forwards; opacity: .95; }
@keyframes confetti { to { transform: translateY(110vh) rotate(720deg); opacity: .6; } }

/* ── Kingdom Kart HUD ── */
.race-hud { position: fixed; inset: 0; z-index: 11; pointer-events: none; font-family: var(--font-display); }
.race-hud button { pointer-events: auto; }
.racing .hud .minimap, .racing .hud .joystick, .racing .hud .key-hint, .racing .hud #btnAct, .racing .prompts { display: none !important; }
.rh-top { position: absolute; top: calc(70px + var(--safe-t)); left: 12px; display: flex; flex-direction: column; gap: 8px; }
.rh-pos { width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; font-size: 40px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #8fc8ff, #4f9be6); box-shadow: 0 6px 0 rgba(31,42,92,.25); border: 4px solid #fff; transition: background .3s; }
.rh-pos.p1 { background: linear-gradient(180deg, #ffd65c, #ffb81f); color: #5a3400; } .rh-pos.p2 { background: linear-gradient(180deg, #e8ecf5, #b8c0d4); color: #2a3352; } .rh-pos.p3 { background: linear-gradient(180deg, #ffb86b, #d98047); }
.rh-lap { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.85); font-weight: 700; font-size: 20px; color: var(--ink); width: max-content; } .rh-lap span { color: var(--ink-2); font-size: 15px; margin-left: 4px; }
.rh-time { padding: 6px 14px; border-radius: 999px; background: rgba(31,42,92,.75); color: #fff; font-weight: 700; font-size: 18px; width: max-content; font-variant-numeric: tabular-nums; }
.rh-map { position: absolute; top: calc(76px + var(--safe-t)); right: 12px; width: 150px; height: 150px; }
.rh-speedo { position: absolute; right: 16px; bottom: calc(16px + var(--safe-b)); width: 200px; text-align: center; }
.rh-speedo svg { width: 200px; height: 118px; filter: drop-shadow(0 4px 8px rgba(31,42,92,.35)); }
.rh-speedo #rhArc { transition: stroke-dashoffset .12s; }
.rh-kmh { position: absolute; left: 0; right: 0; top: 52px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5); } .rh-kmh b { font-size: 42px; display: block; line-height: 1; } .rh-kmh span { font-size: 13px; font-weight: 700; }
.rh-boost { margin-top: -4px; padding: 4px 12px; border-radius: 999px; background: #7dff9a; color: #0b4a33; font-weight: 800; font-size: 14px; display: inline-block; opacity: 0; transform: scale(.8); transition: all .2s; } .rh-boost.on { opacity: 1; transform: scale(1.1); animation: pulse .5s infinite; }
.rh-count { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); font-size: clamp(90px, 20vw, 180px); font-weight: 700; color: #fff; text-shadow: 0 6px 0 #e2679d, 0 14px 40px rgba(31,42,92,.5); pointer-events: none; }
.rh-count.pop { animation: countPop .9s ease-out; }
@keyframes countPop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 30% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; } }
.rh-touch { position: absolute; left: 16px; bottom: calc(16px + var(--safe-b)); display: flex; gap: 12px; z-index: 3; }
.rh-keys { position: absolute; left: 50%; bottom: calc(10px + var(--safe-b)); transform: translateX(-50%); font-size: 12px; font-weight: 700; color: #fff; background: rgba(31,42,92,.45); padding: 4px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.touch .rh-keys { display: none; }
/* speed lines while boosting: a soft radial streak vignette, cheap and very "kart" */
.rh-speed { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255,255,255,0) 0deg 7deg, rgba(255,255,255,.22) 8deg 9deg);
  -webkit-mask: radial-gradient(circle at 50% 55%, transparent 38%, #000 80%); mask: radial-gradient(circle at 50% 55%, transparent 38%, #000 80%); }
.rh-speed.on { opacity: 1; animation: speedspin .5s linear infinite; }
@keyframes speedspin { to { transform: rotate(6deg); } }
.rt-btn { width: 78px; height: 78px; border-radius: 50%; background: rgba(255,255,255,.85); font-size: 30px; box-shadow: var(--shadow); touch-action: none; user-select: none; }
.rt-btn.gas { background: linear-gradient(180deg, #a6f0cf, #5fd3a3); font-size: 18px; font-weight: 800; width: 96px; height: 96px; } .rt-btn.brake { background: linear-gradient(180deg, #ffb4d4, #ff82b6); }
.rh-best { font-size: 13px; color: #fff; background: rgba(31,42,92,.55); padding: 4px 10px; border-radius: 999px; align-self: flex-start; }
.rh-item { position: absolute; left: 50%; top: calc(74px + var(--safe-t)); transform: translateX(-50%); width: 86px; height: 86px; border-radius: 24px;
  background: rgba(255,255,255,.75); border: 4px solid #fff; box-shadow: 0 6px 0 rgba(31,42,92,.25); display: grid; place-items: center; font-size: 42px; pointer-events: auto; }
.rh-item.has { background: linear-gradient(180deg, #fff6c9, #ffd65c); animation: pulse .9s ease-in-out infinite; }
.rh-coins { position: absolute; right: 16px; top: calc(238px + var(--safe-t)); padding: 6px 14px; border-radius: 999px; background: rgba(31,42,92,.55); color: #fff; font-size: 18px; font-weight: 800; }
.rt-btn.drift { background: linear-gradient(180deg, #cfe4ff, #8fb8ff); font-size: 15px; font-weight: 800; }
.rh-quit { position: absolute; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%); }
.garage-car { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.stat { display: inline-block; margin-right: 8px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.stat i { display: inline-block; width: 60px; height: 8px; border-radius: 99px; background: #e6e9f5; vertical-align: middle; margin-left: 4px; overflow: hidden; } .stat i b { display: block; height: 100%; background: var(--gold); }

/* ── v3: coins, friends, board game, garage, series ── */
.chip.coins { padding: 0 16px; background: linear-gradient(180deg, #fff1d6, #ffb86b); color: #5a3400; }
.round { position: relative; }
.round .dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: #ff4f8b; border: 2px solid #fff; animation: pulse 1.2s infinite; }
@media (max-width: 640px) { .chip.coins { padding: 0 12px; } .hud-tr { gap: 6px; } }

.board-hud { position: fixed; inset: 0; z-index: 11; pointer-events: none; font-family: var(--font-display); }
.board-hud button, .board-hud .bh-players { pointer-events: auto; }
.boardgame .hud .minimap, .boardgame .hud .joystick, .boardgame .hud .key-hint, .boardgame .hud #btnAct, .boardgame .prompts { display: none !important; }
.bh-players { position: absolute; top: calc(70px + var(--safe-t)); left: 12px; display: flex; flex-direction: column; gap: 8px; }
.bh-p { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(8px); box-shadow: var(--shadow); font-weight: 700; color: var(--ink); transition: transform .2s, background .2s; min-width: 190px; }
.bh-p .ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; overflow: hidden; background: #ffe9f3; border: 3px solid var(--c, #ff82b6); }
.bh-p .ava img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bh-p .nm { flex: 1; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-p .sc { font-size: 17px; color: #5a3400; background: linear-gradient(180deg, #fff3c4, #ffd65c); padding: 2px 10px; border-radius: 999px; }
.bh-p .lands { font-size: 13px; color: var(--ink-2); }
.bh-p.turn { transform: translateX(6px) scale(1.04); background: #fff; box-shadow: 0 0 0 3px var(--c, #ff82b6), var(--shadow); }
.bh-msg { position: absolute; left: 50%; top: calc(72px + var(--safe-t)); transform: translateX(-50%); max-width: min(760px, calc(100vw - 32px)); padding: 12px 22px; border-radius: 22px; background: rgba(255,250,240,.94); box-shadow: var(--shadow); font-weight: 600; font-size: clamp(16px, 2.2vw, 22px); color: #3a2a18; text-align: center; animation: promptIn .3s; }
.bh-actions { position: absolute; left: 50%; bottom: calc(22px + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 12px; }
.bh-actions .btn.huge { font-size: 26px; padding: 16px 34px; }
.bh-quit { position: absolute; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%); }
.bh-card { text-align: center; }
.bh-card .big-emoji { font-size: 72px; line-height: 1; margin: 6px 0 10px; }
.bh-card .verse { font-family: var(--font-display); font-size: 20px; color: #3a2a18; background: #fff7e8; border-radius: 18px; padding: 12px 18px; margin: 12px 0; }
.bh-card .verse small { display: block; color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.tile-cover { width: 100%; aspect-ratio: 16/9; border-radius: 18px; background-size: cover; background-position: center; margin-bottom: 12px; box-shadow: var(--shadow); }
@media (max-width: 640px) { .bh-p { min-width: 150px; } .bh-p .lands { display: none; } .bh-msg { top: calc(64px + var(--safe-t)); font-size: 15px; padding: 8px 14px; } }

.garage-car .thumb { width: 100%; height: 120px; object-fit: contain; }
.track-card { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 14px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); text-align: left; border: 3px solid transparent; }
.track-card.on { border-color: var(--pink, #ff82b6); }
.track-card .tk-ic { font-size: 40px; }
.track-card .tk-best { font-size: 13px; color: var(--ink-2); font-weight: 700; }

.friend-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); margin-bottom: 10px; }
.friend-row .ava { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #ffe9f3; display: grid; place-items: center; font-size: 26px; flex: none; }
.friend-row .ava img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.friend-row .info { flex: 1; min-width: 0; } .friend-row .info b { display: block; font-size: 18px; } .friend-row .info span { font-size: 13px; color: var(--ink-2); font-weight: 700; }
.friend-row .online { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #c8ced9; margin-right: 6px; } .friend-row .online.on { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.friend-row .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.friend-row .acts .btn { padding: 8px 12px; font-size: 14px; }
.code-box { font-family: var(--font-display); font-size: clamp(30px, 6vw, 44px); letter-spacing: .18em; font-weight: 700; text-align: center; padding: 14px; border-radius: 22px; background: linear-gradient(180deg, #fff3c4, #ffd65c); color: #5a3400; box-shadow: var(--shadow); user-select: all; }
.code-in { display: flex; gap: 8px; margin-top: 12px; } .code-in input { flex: 1; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; text-align: center; font-family: var(--font-display); }
.gift-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; } .gift { padding: 8px 14px; border-radius: 16px; background: #fff7e8; font-weight: 700; animation: promptIn .3s; }
.visiting .hud .minimap { display: none !important; }

.series-hero { position: relative; width: 100%; aspect-ratio: 21/9; border-radius: 24px; background-size: cover; background-position: center; margin-bottom: 14px; box-shadow: var(--shadow); overflow: hidden; }
.series-hero .sh-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(180deg, transparent, rgba(31,42,92,.85)); color: #fff; }
.series-hero .sh-txt h2 { margin: 0; font-size: clamp(22px, 4vw, 34px); text-shadow: 0 2px 8px rgba(0,0,0,.5); } .series-hero .sh-txt p { margin: 4px 0 0; font-weight: 600; opacity: .95; }
.ep-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 10px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); margin-bottom: 10px; text-align: left; align-items: center; }
.ep-row .ep-th { width: 150px; aspect-ratio: 16/9; border-radius: 14px; background-size: cover; background-position: center; position: relative; }
.ep-row .ep-th .play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.ep-row .ep-th .dur { position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 800; }
.ep-row b { font-size: 18px; display: block; } .ep-row .ep-l { font-size: 14px; color: var(--ink-2); font-weight: 600; margin-top: 2px; }
.ep-row.done { background: #f0fff7; }
.ep-story { font-family: var(--font-display); font-size: clamp(18px, 2.4vw, 23px); line-height: 1.4; color: #3a2a18; background: #fff7e8; border-radius: 20px; padding: 16px 20px; }
.ep-still { width: 100%; aspect-ratio: 16/9; border-radius: 20px; background-size: cover; background-position: center; margin-bottom: 12px; box-shadow: var(--shadow); }
@media (max-width: 640px) { .ep-row { grid-template-columns: 110px 1fr; } .ep-row .ep-th { width: 110px; } .ep-row b { font-size: 15px; } }
.pill.ot { background: #ffe9c4; color: #7a4a00; } .pill.nt { background: #d9ecff; color: #11417a; }
.tag.friend { background: linear-gradient(180deg, #ff9ec7, #e2679d); }
.tag.game { background: rgba(255,255,255,.92); color: var(--ink); font-size: 14px; padding: 5px 12px 5px 10px; box-shadow: 0 4px 14px rgba(31,42,92,.18); border: 2px solid var(--c, #ffc93c); backdrop-filter: blur(6px); }
.chip.watch { padding: 0 18px 0 8px; background: linear-gradient(180deg, #ff9ec7, #e2679d); color: #fff; border-color: rgba(255,255,255,.9); }
.chip.watch .ic { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #e2679d; display: grid; place-items: center; font-size: 15px; padding-left: 3px; }
.chip.watch b { font-family: var(--font-display); font-size: 18px; letter-spacing: .02em; }
@media (max-width: 640px) { .chip.watch b { display: none; } .chip.watch { padding: 0 6px; } }
.tag.soon { background: rgba(201,184,255,.92); color: #2a2160; }

/* ── Kingdomland TV (streaming-style theater) ── */
.panel.tv-panel { width: min(1180px, calc(100vw - 24px)); padding: 0; background: #151a3a; color: #fff; border-color: rgba(255,255,255,.12); }
.panel.tv-panel .x-btn { z-index: 3; background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3); }
.tv { padding-bottom: 22px; }
.tv h2, .tv h3 { color: #fff; }
.tv-hero { position: relative; min-height: clamp(260px, 42vh, 420px); display: flex; align-items: flex-end; overflow: hidden; border-radius: 26px 26px 0 0; }
.tv-hero.small { min-height: clamp(220px, 34vh, 340px); }
.tv-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center 30%; animation: kenburns 14s ease-in-out infinite alternate; }
.tv-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,26,58,.92) 0%, rgba(21,26,58,.55) 45%, rgba(21,26,58,0) 75%), linear-gradient(0deg, #151a3a 0%, rgba(21,26,58,0) 40%); }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07) translateX(-1.5%); } }
.tv-hero-txt { position: relative; z-index: 1; padding: 28px 30px 22px; max-width: 560px; }
.tv-hero-txt h2 { font-size: clamp(28px, 4.4vw, 50px); margin: 4px 0 6px; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
.tv-hero-txt p { margin: 0 0 16px; font-weight: 600; opacity: .9; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tv-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffd65c; }
.btn.glass { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); min-height: 48px; font-size: 16px; padding: 0 18px; }
.btn.glass:hover { background: rgba(255,255,255,.26); }
.tv-dots { position: absolute; right: 24px; bottom: 22px; z-index: 1; display: flex; gap: 7px; }
.tv-dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.4); cursor: pointer; transition: all .25s; }
.tv-dots i.on { width: 24px; background: #fff; }
.tabs.tv-tabs { padding: 4px 26px 0; margin: 0 0 6px; }
.tv-tabs button { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.14); }
.tv-tabs button.on { background: #fff; color: #151a3a; }
.tv-row { margin: 18px 0 0; }
.tv-row h3 { margin: 0 26px 10px; font-size: 19px; font-family: var(--font-display); font-weight: 600; }
.tv-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 26px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tv-strip::-webkit-scrollbar { display: none; }
.ep-tile, .sr-tile { flex: none; scroll-snap-align: start; text-align: left; color: #fff; background: none; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ep-tile { width: 232px; } .sr-tile { width: 150px; }
.ep-tile b, .sr-tile b { font-size: 14px; line-height: 1.25; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-tile small, .sr-tile small { font-size: 12px; opacity: .6; font-weight: 700; }
.ep-img, .sr-img { position: relative; display: block; border-radius: 16px; background-size: cover; background-position: center; background-color: #262d5c; box-shadow: 0 8px 22px rgba(0,0,0,.3); transition: transform .2s, box-shadow .2s; overflow: hidden; }
.ep-img { aspect-ratio: 16/9; } .sr-img { aspect-ratio: 3/4; }
.ep-tile:hover .ep-img, .sr-tile:hover .sr-img, .ep-tile:focus-visible .ep-img { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 0 3px #ffd65c, 0 12px 26px rgba(0,0,0,.4); }
.ep-play { position: absolute; left: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); color: #e2679d; display: grid; place-items: center; font-size: 13px; padding-left: 2px; opacity: 0; transform: scale(.8); transition: all .2s; }
.ep-tile:hover .ep-play { opacity: 1; transform: scale(1); }
.ep-img .dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.65); font-size: 11px; font-weight: 800; }
.ep-img .here { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 6px; background: #ff82b6; font-size: 11px; font-weight: 800; }
.ep-tile.seen .ep-img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ffd65c; }
.tv-verse { margin: 0 26px 6px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.07); font-family: var(--font-display); font-size: 17px; }
.tv-verse b { color: #ffd65c; font-family: var(--font); font-size: 13px; margin-left: 6px; }
.ep-list { padding: 8px 26px 0; display: grid; gap: 10px; }
.tv .ep-row { background: rgba(255,255,255,.06); box-shadow: none; color: #fff; grid-template-columns: 200px 1fr; border: 1px solid rgba(255,255,255,.08); transition: background .2s; }
.tv .ep-row:hover { background: rgba(255,255,255,.12); }
.tv .ep-row.done { background: rgba(255,214,92,.08); }
.tv .ep-row .ep-th { width: 200px; }
.tv .ep-row .ep-l { color: rgba(255,255,255,.7); }
.ep-meta { margin-top: 6px; display: flex; gap: 6px; }
.pill.here { background: #ff82b6; color: #fff; } .pill.app { background: rgba(255,255,255,.14); color: #fff; } .pill.ok { background: #ffd65c; color: #5a3400; }
.ep-stage { position: relative; aspect-ratio: 16/9; max-height: 56vh; width: 100%; background-size: cover; background-position: center; border-radius: 26px 26px 0 0; display: grid; place-items: center; }
.ep-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #151a3a 0%, rgba(21,26,58,0) 45%); border-radius: inherit; }
.ep-bigplay { position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.95); color: #e2679d; font-size: 36px; padding-left: 6px; box-shadow: 0 0 0 10px rgba(255,255,255,.25), 0 12px 30px rgba(0,0,0,.35); transition: transform .2s; }
.ep-bigplay:hover { transform: scale(1.08); }
.ep-head { padding: 0 30px; margin-top: -30px; position: relative; z-index: 1; }
.ep-head h2 { font-size: clamp(24px, 3.6vw, 38px); margin: 4px 0; }
.ep-head .say { color: rgba(255,255,255,.85); font-size: 18px; margin: 4px 0 16px; }
@media (max-width: 640px) {
  .tv-hero-txt { padding: 18px 18px 16px; } .tabs.tv-tabs, .tv-strip { padding-left: 16px; padding-right: 16px; } .tv-row h3, .tv-verse { margin-left: 16px; margin-right: 16px; }
  .ep-tile { width: 180px; } .sr-tile { width: 120px; } .ep-list { padding: 8px 16px 0; }
  .tv .ep-row { grid-template-columns: 120px 1fr; } .tv .ep-row .ep-th { width: 120px; } .ep-head { padding: 0 18px; } .ep-bigplay { width: 72px; height: 72px; font-size: 28px; }
  .tv-dots { display: none; }
}
.tv-strip { touch-action: pan-x; }

/* ── sign-in screen: layout glue around the ported Kingdomland app login (css/kdl-login.css) ── */
.scr-login { display: block; overflow-y: auto; background: #070e2c; --font-fraunces: 'Fraunces'; --font-jakarta: 'Plus Jakarta Sans'; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.scr-login .kdl-zone { min-height: 100%; }
.scr-login .kas-night, .scr-login .kas-nightContent { min-height: 100vh; min-height: 100dvh; }
.scr-login .kna-frame .kna-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scr-login .kac-divider b { font-weight: inherit; }
.scr-login .hidden { display: none !important; }
.gsi-host { position: relative; }
.gsi-slot { position: absolute; inset: 0; opacity: 0.011; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.gsi-slot:empty { display: none; }
.gsi-slot > div, .gsi-slot iframe { transform: scale(1.4); }
.auth-me-row { display: flex; align-items: center; gap: 12px; margin: 18px 0 20px; padding: 10px 14px; border-radius: 16px; background: rgba(255,253,243,.08); border: 1px solid rgba(255,229,98,.22); }
.auth-me-row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #1b2a6b; }
.auth-me-row small { display: block; font-size: 12px; color: rgba(255,253,243,.65); font-weight: 600; }
.auth-rec { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; padding: 12px 14px; border-radius: 16px; background: rgba(255,253,243,.08); border: 1px dashed rgba(255,229,98,.55); }
.auth-rec code { flex: 1; min-width: 0; font: 800 clamp(18px, 5vw, 24px)/1.2 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 2px; color: #ffe562; user-select: all; overflow-wrap: anywhere; }
.auth-rec-copy { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,229,98,.5); background: rgba(255,229,98,.14); color: #fff3a6; font-weight: 800; cursor: pointer; }
.auth-me-row b { display: block; font-size: 16px; color: #fffdf3; }
.auth-load { height: 4px; margin: 18px 4px 0; border-radius: 99px; background: rgba(255,253,243,.1); overflow: hidden; }
.auth-load .load-fill { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #cb9302, #ffe562); transition: width .3s; }
.auth-load-text { margin: 8px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; color: rgba(255,253,243,.6); }
.auth-extra { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; padding-bottom: 28px; }
.auth-guest { padding: 10px 22px; border-radius: 999px; background: rgba(255,253,243,.08); border: 1px solid rgba(255,229,98,.3); color: #ffe562; font: 800 15px 'Plus Jakarta Sans', sans-serif; transition: background .2s; }
.auth-guest:hover { background: rgba(255,253,243,.16); }
.auth-back { color: rgba(255,253,243,.65); font-size: 13px; font-weight: 700; text-decoration: none; }
.auth-back:hover { color: #fffdf3; }

/* ── character select (HappyTown-style: list · stage · panel) ── */
.scr-select { pointer-events: none; --selL: 300px; --selR: 500px; --top: 118px; font-family: var(--font); }
.scr-select > * { pointer-events: auto; }
.sel-brand { position: absolute; top: calc(8px + var(--safe-t)); left: 18px; width: 170px; height: auto; filter: drop-shadow(0 8px 14px rgba(31,42,92,.3)); pointer-events: none; }
.wood-sign { position: absolute; padding: 10px 18px; border-radius: 14px; font-family: 'Fredoka', cursive; font-weight: 600; font-size: 17px; line-height: 1.15; text-align: center; color: #fff4dc;
  background: linear-gradient(180deg, #c98a44, #a86a2c); border: 3px solid #6b3f1c; box-shadow: 0 4px 0 #4f2e12, 0 10px 20px rgba(40,20,5,.3); text-shadow: 0 2px 0 #5b3416; pointer-events: none; }
.wood-sign span { color: #ff8fb8; }
.sel-note-tr { top: calc(14px + var(--safe-t)); right: 22px; transform: rotate(3deg); }
.sel-note-br { right: 26px; bottom: calc(14px + var(--safe-b)); transform: rotate(-3deg); font-size: 15px; }
.sel-head { position: absolute; top: calc(6px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.wood-ribbon { padding: 8px 46px 10px; border-radius: 18px; background: linear-gradient(180deg, #c98a44, #9c5f26); border: 3px solid #6b3f1c; box-shadow: 0 5px 0 #4f2e12, 0 12px 24px rgba(40,20,5,.35); }
.wood-ribbon h1 { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); color: #fff; text-shadow: 0 3px 0 #5b3416, 0 6px 14px rgba(0,0,0,.3); white-space: nowrap; }
.cream-pill { margin-top: -6px; padding: 7px 26px; border-radius: 999px; background: linear-gradient(180deg, #fffaf0, #f3e0bd); border: 2px solid rgba(150,100,40,.4); color: #6b4a24; font-family: var(--font-display); font-weight: 600; font-size: 17px; box-shadow: 0 4px 10px rgba(80,50,10,.18); }

.sel-list { position: absolute; left: 18px; top: calc(var(--top) + 20px); bottom: 24px; width: calc(var(--selL) - 36px); display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 4px 6px 10px 2px; scrollbar-width: none; }
.sel-list::-webkit-scrollbar { display: none; }
.sel-list button { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 7px 34px 7px 7px; border-radius: 999px; text-align: left; color: #fff;
  background: rgba(40, 64, 52, .62); backdrop-filter: blur(8px); border: 2px solid rgba(255,255,255,.35); box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: transform .18s, background .18s; }
.sel-list button:hover { transform: translateX(3px); background: rgba(40, 64, 52, .78); }
.sel-list button img { width: 52px; height: 52px; border-radius: 50%; background: #fff6e4; border: 2.5px solid rgba(255,255,255,.9); object-fit: cover; flex: none; }
.sel-list button b { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.1; }
.sel-list button small { display: block; font-size: 12.5px; font-weight: 700; opacity: .92; }
.sel-list button::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-right: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(45deg); border-radius: 1px; }
.sel-list button.on { background: linear-gradient(180deg, #4f96ff, #2b74ec); border-color: #fff; box-shadow: 0 0 0 3px rgba(43,116,236,.35), 0 6px 16px rgba(43,116,236,.4); transform: scale(1.03); }

.sel-stage { position: absolute; left: var(--selL); right: var(--selR); top: var(--top); bottom: 18px; pointer-events: none; }
.sel-stage > * { pointer-events: auto; }
.stage-hint { position: absolute; left: 10px; top: 4px; padding: 6px 14px; border-radius: 999px; background: #fffaf0; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.12); font-weight: 800; font-size: 13px; color: #4b3a26; pointer-events: none; }
.stage-arrow { position: absolute; top: 46%; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #4f96ff, #2b74ec); border: 3px solid #fff; box-shadow: 0 5px 0 #17489f, 0 10px 20px rgba(0,0,0,.2); transition: transform .15s; }
.stage-arrow:hover { transform: scale(1.08); } .stage-arrow:active { transform: scale(.95); }
.stage-arrow svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.stage-arrow.l { left: 8%; } .stage-arrow.r { right: 8%; }
.stage-anims { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; border-radius: 26px; background: rgba(255,252,244,.9); border: 2.5px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.stage-anims button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; padding: 6px 8px; border-radius: 20px; background: none; color: #6b4a24; font-weight: 800; font-size: 13px; transition: background .15s; }
.stage-anims button span { font-size: 22px; line-height: 1; }
.stage-anims button:hover { background: rgba(79,150,255,.12); }
.stage-anims button.on { background: linear-gradient(180deg, #4f96ff, #2b74ec); color: #fff; box-shadow: 0 3px 0 #17489f; }

.sel-panel { position: absolute; right: 22px; top: calc(var(--top) + 14px); bottom: 70px; width: calc(var(--selR) - 44px); display: grid; grid-template-columns: 86px 1fr; border-radius: 30px; overflow: hidden;
  background: linear-gradient(180deg, #fffdf8, #fdf2df); border: 3px solid #fff; box-shadow: 0 18px 40px rgba(40,30,10,.25); }
.sel-tabs { display: flex; flex-direction: column; gap: 10px; padding: 16px 10px; border-right: 2px dashed rgba(150,100,40,.25); }
.sel-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 rgba(150,100,40,.18); font-size: 11.5px; font-weight: 800; color: #6b4a24; }
.sel-tabs button span { font-size: 26px; line-height: 1; }
.sel-tabs button.on { background: linear-gradient(180deg, #4f96ff, #2b74ec); color: #fff; box-shadow: 0 4px 0 #17489f; }
.sel-body { position: relative; display: flex; flex-direction: column; padding: 18px 22px 18px; min-height: 0; }
.sel-body section { display: none; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
.sel-body section.on { display: flex; }
.sel-label { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b4a24; margin-top: 8px; display: flex; justify-content: space-between; }
.sel-label b { color: #2b74ec; letter-spacing: 0; }
.sel-input { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 18px; border-radius: 16px; background: #fff; border: 2.5px solid #eadcc2; font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink); }
.sel-input button { width: 42px; height: 42px; border-radius: 12px; background: #eef3ff; font-size: 22px; transition: transform .2s; }
.sel-input button:hover { transform: rotate(-12deg) scale(1.06); }
.sel-help { margin: 0; font-size: 12.5px; color: #8a6d4a; font-weight: 600; }
.sel-card { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 20px; background: linear-gradient(180deg, #f3f7ff, #e8f0ff); border: 2.5px solid #cfe0ff; }
.sel-card img { width: 78px; height: 78px; border-radius: 18px; background: #fff; object-fit: cover; flex: none; box-shadow: 0 3px 8px rgba(0,0,0,.08); }
.sel-name { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: #2b74ec; line-height: 1.05; }
.sel-blurb { font-size: 14.5px; color: #4b5689; font-weight: 600; margin-top: 3px; line-height: 1.35; }
.sel-dots { display: flex; gap: 8px; flex-wrap: wrap; }
.sel-dots i { width: 14px; height: 14px; border-radius: 50%; background: #e3d6bd; cursor: pointer; transition: transform .15s; }
.sel-dots i.on { background: #2b74ec; transform: scale(1.3); box-shadow: 0 0 0 3px rgba(43,116,236,.25); }
.sel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sel-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 18px; background: #fff; border: 2.5px solid #eadcc2; font-weight: 800; font-size: 13px; color: var(--ink); }
.sel-grid button img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: #fff6e4; }
.sel-grid button .big { font-size: 38px; line-height: 64px; }
.sel-grid button.on { border-color: #2b74ec; box-shadow: 0 0 0 3px rgba(43,116,236,.25); }
.sel-grid button.locked { opacity: .55; }
.sel-go { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 12px; height: 66px; border-radius: 22px; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: #5a3400;
  background: linear-gradient(180deg, #ffe07a, #ffbf2e); box-shadow: 0 6px 0 #d98e00, 0 14px 28px rgba(255,170,0,.35); transition: transform .15s; flex: none; }
.sel-go:hover { transform: translateY(-2px); } .sel-go:active { transform: translateY(2px); box-shadow: 0 2px 0 #d98e00; }
.sel-go .go-ic { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, #6fb2ff, #2b74ec); color: #fff; display: grid; place-items: center; font-size: 14px; padding-left: 3px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.sel-go:disabled { filter: grayscale(.7); opacity: .7; }

@media (max-width: 1180px) { .scr-select { --selL: 250px; --selR: 420px; } .sel-list button small { display: none; } .sel-note-tr, .sel-note-br { display: none; } }
@media (max-width: 900px), (max-height: 560px) and (max-width: 1000px) {
  .scr-select { --top: 64px; }
  .sel-brand { display: none; }
  .sel-head { top: calc(4px + var(--safe-t)); } .wood-ribbon { padding: 5px 22px 6px; } .wood-ribbon h1 { font-size: 22px; } .cream-pill { display: none; }
  .sel-list { top: auto; left: 0; right: 0; bottom: calc(96px + var(--safe-b)); width: auto; flex-direction: row; overflow-x: auto; padding: 4px 12px; gap: 8px; }
  .sel-list button { padding: 4px; border-radius: 50%; } .sel-list button::after, .sel-list button span { display: none; }
  .sel-list button img { width: 50px; height: 50px; }
  .sel-stage { left: 0; right: 0; top: 64px; bottom: calc(160px + var(--safe-b)); }
  .stage-arrow { width: 48px; height: 48px; } .stage-arrow.l { left: 10px; } .stage-arrow.r { right: 10px; }
  .stage-anims button { min-width: 50px; font-size: 11px; padding: 4px 6px; } .stage-anims button span { font-size: 18px; }
  .sel-panel { left: 12px; right: 12px; top: auto; bottom: calc(10px + var(--safe-b)); width: auto; height: 78px; display: block; background: none; border: 0; box-shadow: none; overflow: visible; }
  .sel-tabs, .sel-body section { display: none !important; }
  .sel-body { padding: 0; height: 100%; }
  .sel-go { height: 70px; font-size: 21px; }
}

/* ── Settings (Kingdomland Kids style) ── */
.panel.kset { width: min(1180px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; background: none; box-shadow: none; overflow: visible; display: grid; grid-template-columns: 260px 1fr; gap: 0; align-items: start; }
.kset-side { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.kset-logo { width: 230px; height: auto; margin-bottom: -18px; position: relative; z-index: 2; filter: drop-shadow(0 10px 16px rgba(31,42,92,.35)); }
.kset-nav { width: 100%; margin-right: -18px; padding: 26px 14px 16px; border-radius: 28px 0 0 28px; background: linear-gradient(180deg, #fffdf8, #f9eedb); box-shadow: -8px 12px 30px rgba(40,30,10,.18); display: flex; flex-direction: column; gap: 6px; }
.kset-nav button { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 16px; background: rgba(255,255,255,.55); font-family: var(--font); font-weight: 700; font-size: 16px; color: #2a3352; text-align: left; transition: background .15s, transform .15s; }
.kset-nav button span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.06); }
.kset-nav button:hover { background: #fff; transform: translateX(2px); }
.kset-nav button.on { position: relative; background: linear-gradient(180deg, #4f96ff, #2b74ec); color: #fff; box-shadow: 0 4px 0 #17489f, 0 8px 18px rgba(43,116,236,.35); }
.kset-nav button.on span { background: rgba(255,255,255,.95); }
.kset-nav button.on::after { content: ''; position: absolute; right: -8px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left-color: #2b74ec; }
.kset-sign { position: relative; width: 230px; height: 190px; margin-top: 10px; }
.kset-sign .board { position: absolute; left: 34px; top: 14px; width: 150px; padding: 18px 10px; transform: rotate(-6deg); text-align: center; font-family: 'Fredoka', cursive; font-weight: 600; font-size: 15px; line-height: 1.2; color: #6b3f1c; text-transform: uppercase;
  background: repeating-linear-gradient(0deg, #e9c48f 0 18px, #dfb57a 18px 20px); border: 6px solid #a86a2c; border-radius: 8px; box-shadow: 0 6px 0 #6b3f1c, 0 12px 20px rgba(0,0,0,.25); z-index: 2; }
.kset-sign .board b { color: #e2466d; }
.kset-sign .post { position: absolute; left: 103px; top: 110px; width: 12px; height: 60px; background: #8a5a36; border-radius: 3px; }
.kset-sign .grass { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; border-radius: 50% 50% 18px 18px; background: radial-gradient(circle at 20% 30%, #ffe27a 0 5px, transparent 6px), radial-gradient(circle at 75% 45%, #fff 0 5px, transparent 6px), radial-gradient(circle at 50% 25%, #ffb3cf 0 4px, transparent 5px), linear-gradient(180deg, #8fdc6a, #56b44a); box-shadow: inset 0 6px 0 rgba(255,255,255,.25); }
.kset-main { position: relative; z-index: 1; min-width: 0; max-height: calc(100vh - 40px); display: flex; flex-direction: column; margin-top: 22px; padding: 26px 30px 20px; border-radius: 36px; background: linear-gradient(180deg, #fffdf8, #fbf1de); border: 8px solid #f6e5c3; box-shadow: 0 30px 70px rgba(40,30,10,.35); }
.kset-x { position: absolute; top: 16px; right: 18px; width: 58px; height: 58px; border-radius: 50%; background: #fff; color: #e5383b; font-size: 30px; font-weight: 900; box-shadow: 0 4px 0 rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.12); transition: transform .15s; }
.kset-x:hover { transform: rotate(90deg); }
.kset-head { display: flex; align-items: center; gap: 18px; margin: 0 70px 16px 0; }
.kset-hic { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; font-size: 42px; background: linear-gradient(180deg, #ffd65c, #ffb81f); box-shadow: 0 5px 0 #d98e00; flex: none; }
.kset-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); color: #1d2a5b; line-height: 1; }
.kset-head p { margin: 6px 0 0; font-weight: 600; color: #4b5689; font-size: 17px; }
.kset-body { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 2px 6px 6px 2px; }
.k-card { padding: 14px 18px; border-radius: 22px; background: rgba(255,255,255,.72); border: 2px solid #fff; box-shadow: 0 2px 10px rgba(80,60,20,.06); }
.k-chead { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.k-cic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.08); flex: none; }
.k-chead h3 { margin: 0; font-family: var(--font-display); font-size: 21px; color: #1d2a5b; }
.k-chead h3 em { font-style: normal; color: #2b74ec; }
.k-chead p { margin: 2px 0 0; font-size: 14.5px; color: #4b5689; font-weight: 600; }
.k-row { display: flex; align-items: center; gap: 12px; padding: 8px 0 8px 18px; }
.k-row + .k-row { border-top: 1px dashed rgba(150,100,40,.18); }
.k-ric { font-size: 22px; width: 30px; text-align: center; flex: none; }
.k-ric.big { font-size: 38px; width: 54px; }
.k-rtx { flex: 1; min-width: 0; } .k-rtx b { display: block; font-size: 16px; color: #1d2a5b; } .k-rtx small { display: block; font-size: 13px; color: #6b7399; font-weight: 600; }
.k-rctl { display: flex; align-items: center; gap: 16px; }
.k-range { -webkit-appearance: none; appearance: none; width: min(280px, 28vw); height: 12px; border-radius: 99px; background: linear-gradient(90deg, #36c26b var(--v, 50%), #e3e7f1 var(--v, 50%)); outline: none; }
.k-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #d8dce8; box-shadow: 0 3px 8px rgba(0,0,0,.2); cursor: pointer; }
.k-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #d8dce8; box-shadow: 0 3px 8px rgba(0,0,0,.2); cursor: pointer; }
.k-tgl { position: relative; width: 94px; height: 42px; border-radius: 99px; background: #c9cfdd; color: #fff; font-weight: 800; font-size: 15px; text-align: left; padding-left: 16px; transition: background .2s; box-shadow: inset 0 2px 4px rgba(0,0,0,.12); flex: none; }
.k-tgl i { position: absolute; top: 5px; right: 5px; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: right .2s; }
.k-tgl:not(.on) { padding-left: 48px; } .k-tgl:not(.on) i { right: 57px; }
.k-tgl.on { background: linear-gradient(180deg, #2fb866, #1f9a50); }
.k-seg { display: flex; gap: 10px; }
.k-seg button { min-width: 110px; height: 44px; border-radius: 99px; background: #f1f2f6; font-weight: 700; font-size: 16px; color: #2a3352; box-shadow: 0 3px 0 #d5d9e4; }
.k-seg button.on { background: linear-gradient(180deg, #3aa0ff, #1e7ef0); color: #fff; box-shadow: 0 3px 0 #1459b4; }
.k-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 10px 18px; }
.k-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 18px; background: #fff; border: 2px solid #eceff5; box-shadow: 0 3px 0 #e1e5ee; color: #1d2a5b; }
.k-tier b { font-family: var(--font-display); font-size: 19px; display: flex; gap: 6px; align-items: center; } .k-tier b span { font-size: 24px; }
.k-tier small { font-size: 13px; color: #4b5689; font-weight: 600; text-align: center; }
.k-tier.on { background: #eaf4ff; border: 3px solid #2b8cff; box-shadow: 0 0 0 4px rgba(43,140,255,.15); }
.k-info { margin-left: 18px; padding: 10px 16px; border-radius: 14px; background: #fcefd6; font-weight: 700; font-size: 14px; color: #4b5689; }
.k-keys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; margin: 8px 0 6px 18px; }
.k-keys div { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #2a3352; }
.k-keys kbd { min-width: 90px; text-align: center; padding: 6px 10px; border-radius: 10px; background: #fff; border: 2px solid #dfe3ee; box-shadow: 0 3px 0 #dfe3ee; font: 800 13px var(--font); }
.k-note { margin: 8px 0 2px 18px; font-size: 14px; color: #4b5689; font-weight: 600; } .k-note a { color: #2b74ec; }
.k-langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 4px 18px; }
.k-lang { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: #fff; border: 2px solid #eceff5; font-weight: 800; font-size: 17px; color: #1d2a5b; }
.k-lang small { font-size: 12px; color: #6b7399; } .k-lang.on { border: 3px solid #2b8cff; background: #eaf4ff; } .k-lang:disabled { opacity: .55; }
.k-acc { display: flex; align-items: center; gap: 14px; margin: 8px 0 6px 18px; padding: 12px; border-radius: 16px; background: #eef4ff; }
.k-acc img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: #dbe5fb; }
.k-acc b { display: block; font-size: 18px; color: #1d2a5b; } .k-acc small { display: block; color: #6b7399; font-weight: 600; font-size: 13px; }
.k-btn { height: 42px; padding: 0 20px; border-radius: 99px; background: linear-gradient(180deg, #3aa0ff, #1e7ef0); color: #fff; font-weight: 800; box-shadow: 0 3px 0 #1459b4; }
.k-btn.warn { background: linear-gradient(180deg, #ff7a8a, #e5485c); box-shadow: 0 3px 0 #b02a3d; }
.k-list { margin: 6px 0 6px 18px; padding-left: 20px; color: #2a3352; font-weight: 600; line-height: 1.6; }
.k-faq { margin: 6px 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.k-faq details { padding: 10px 14px; border-radius: 14px; background: #fff; border: 2px solid #eceff5; }
.k-faq summary { font-weight: 800; color: #1d2a5b; cursor: pointer; } .k-faq p { margin: 6px 0 0; color: #4b5689; font-weight: 600; }
.kset-bubble { position: fixed; z-index: 0; padding: 18px 22px; border-radius: 28px; font-family: 'Fredoka', cursive; font-weight: 600; font-size: 19px; line-height: 1.2; color: #2a3352; text-align: center; background: #fffaf0; border: 3px solid #f0d49a; box-shadow: 0 10px 24px rgba(0,0,0,.18); pointer-events: none; }
.kset-bubble b { color: #e2466d; }
.kset-bubble.tr { top: 24px; right: 24px; transform: rotate(-8deg); }
.kset-bubble.tr::after { content: ''; position: absolute; left: 40px; bottom: -18px; border: 10px solid transparent; border-top: 12px solid #fffaf0; }
.kset-bubble.br { right: 28px; bottom: 30px; transform: rotate(-10deg); background: linear-gradient(180deg, #ffe7b0, #ffd27a); border-color: #f5b94a; color: #1d2a5b; }
@media (max-width: 1400px) { .kset-bubble { display: none; } }
@media (max-width: 860px) {
  .panel.kset { grid-template-columns: minmax(0, 1fr); }
  .kset-side { flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
  .kset-nav { min-width: 0; flex: 1; }
  .kset-main { min-width: 0; }
  .kset-logo { width: 110px; margin: 0; }
  .kset-nav { margin: 0; flex-direction: row; overflow-x: auto; border-radius: 20px; padding: 8px; }
  .kset-nav button { flex: none; font-size: 0; padding: 6px; } .kset-nav button span { font-size: 20px; } .kset-nav button.on::after { display: none; }
  .kset-sign { display: none; }
  .kset-main { margin-top: 8px; padding: 18px 14px 14px; border-width: 5px; max-height: calc(100vh - 100px); }
  .kset-hic { width: 56px; height: 56px; font-size: 30px; } .kset-head { margin-right: 56px; } .kset-x { width: 46px; height: 46px; top: 12px; right: 12px; }
  .k-row { flex-wrap: wrap; padding-left: 0; } .k-rctl { width: 100%; justify-content: space-between; } .k-range { width: 100%; }
  .k-tiers, .k-langs { grid-template-columns: 1fr; margin-left: 0; } .k-keys { grid-template-columns: 1fr; margin-left: 0; } .k-info, .k-note, .k-acc, .k-list, .k-faq { margin-left: 0; }
  .k-seg button { min-width: 0; flex: 1; } .k-seg { width: 100%; }
}

/* ── Kingdomland TV layer (the app's watch experience; page styles in css/kdl-tv.css) ── */
.ktv { position: fixed; inset: 0; z-index: 35; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #fffdf3; --font-fraunces: 'Fraunces'; --font-jakarta: 'Plus Jakarta Sans'; }
.ktv[hidden] { display: none; }
.ktv .ktv-zone { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ktv .kdl-sky { position: fixed; }
.ktv-top { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, rgba(7,14,44,.92), rgba(7,14,44,.78)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,229,98,.1); }
.ktv-top-inner { max-width: 1440px; margin: 0 auto; padding-right: 150px; }
.ktv-main { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 22px clamp(16px, 2.5vw, 36px) 80px; outline: none; }
:where(.ktv button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(.ktv img) { max-width: none; }
.ktv-exit { position: fixed; top: 12px; right: 14px; z-index: 40; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 12px; border-radius: 999px; background: linear-gradient(180deg, #ffe562, #f6b523) !important; color: #1b1300 !important; font-weight: 800 !important; font-size: 14px; box-shadow: 0 8px 20px rgba(246,181,35,.35); }
.ktv-exit span { white-space: nowrap; }
.tv-open #hud, .tv-open .prompts { visibility: hidden; }
.tv-open #toasts { z-index: 60; }
@media (max-width: 940px) { .ktv-top-inner { padding-right: 64px; } .ktv-exit span { display: none; } .ktv-exit { width: 42px; padding: 0; justify-content: center; } }

/* ── iBook reader (Apple Books style) ── */
.ib { position: fixed; inset: 0; z-index: 36; display: grid; place-items: center; opacity: 0; transition: opacity .25s; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #2b2118; user-select: none; -webkit-user-select: none; }
.ib.in { opacity: 1; }
.ib-desk { position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 45%, #3a3d4f 0%, #22242f 55%, #14151c 100%); }
.ib-desk::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 50%, rgba(255,214,150,.12), transparent 70%); }
.ib-stage { position: relative; z-index: 1; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); }
.ib-book { width: 100%; height: 100%; }
.ib-page { background: var(--paper, #fbf6ea); overflow: hidden; }
.ib-page::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(120,90,50,.05) 1px, transparent 1px); background-size: 5px 5px; mix-blend-mode: multiply; }
/* gutter shading: left pages darken toward the right edge, right pages toward the left */
.stf__item.--left .ib-page, .ib-page.--left { box-shadow: inset -26px 0 30px -18px rgba(70,45,20,.35); }
.stf__item.--right .ib-page, .ib-page.--right { box-shadow: inset 26px 0 30px -18px rgba(70,45,20,.35); }
.ib-in { position: absolute; inset: 0; padding: 8% 9% 12%; display: flex; flex-direction: column; gap: 5%; }
.ib-story .ib-media { flex-basis: 54%; }
.ib-media { position: relative; flex: 0 0 52%; border-radius: 14px; overflow: hidden; background: #e8eef8; box-shadow: 0 6px 16px rgba(60,40,20,.18), 0 0 0 5px #fff; }
.ib-media img, .ib-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ib-media video { opacity: 0; transition: opacity .4s; } .ib-media video.on { opacity: 1; }
.ib-emoji { display: grid; place-items: center; background: linear-gradient(160deg, #fff3d6, #ffe0ec); } .ib-emoji span { font-size: calc(var(--ibsize, 1) * 72px); }
.ib-clip { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.92); color: #c94f7c; font-weight: 800; font-size: 11px; letter-spacing: .04em; }
.ib-text { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: calc(var(--ibsize, 1) * var(--pageh, 600px) * 0.036); line-height: 1.5; color: #2b2118; text-align: left; hyphens: auto; }
.ib-text::first-letter { font-weight: 900; font-size: 1.9em; float: left; line-height: .9; margin: .06em .08em 0 0; color: #b5462f; }
.ib-textonly .ib-in { justify-content: center; } .ib-textonly .ib-text { font-size: calc(var(--ibsize, 1) * var(--pageh, 600px) * 0.05); text-align: center; }
.ib-textonly .ib-text::first-letter { float: none; font-size: 1em; margin: 0; color: inherit; }
.ib-folio { position: absolute; left: 8%; right: 8%; bottom: 4.5%; display: flex; justify-content: space-between; font-size: calc(var(--pageh, 600px) * 0.017); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(90,70,50,.55); }
.ib-folio b { font-family: 'Fraunces', serif; font-size: 12px; letter-spacing: 0; color: rgba(90,70,50,.8); }
/* hard covers */
.ib-cover, .ib-back { background: #5b1f3a; }
.ib-cover-art { position: absolute; inset: 0; background-size: cover; background-position: center; display: grid; place-items: center; font-size: 96px; }
.ib-cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,6,20,.15) 0%, rgba(10,6,20,0) 35%, rgba(10,6,20,.82) 100%), linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(255,255,255,.12) 3.5%, rgba(0,0,0,0) 7%); }
.ib-cover-frame { position: absolute; inset: 4.5%; border: 3px solid rgba(255,214,92,.85); border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
.ib-cover-title { position: absolute; left: 10%; right: 10%; bottom: 9%; text-align: center; color: #fff; }
.ib-cover-title small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #ffe562; }
.ib-cover-title h1 { margin: 8px 0 6px; font-family: 'Fraunces', serif; font-weight: 900; font-size: calc(var(--pageh, 600px) * 0.07); line-height: 1.02; text-shadow: 0 3px 12px rgba(0,0,0,.6); }
.ib-cover-title span { font-size: 12px; font-weight: 700; opacity: .85; }
.ib-back-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: radial-gradient(80% 60% at 50% 40%, #7a2f4f, #3b1226); color: #ffe7b0; font-weight: 700; font-size: 13px; }
.ib-back-in img { width: 60%; height: auto; }
.ib-plate .ib-in, .ib-end .ib-in, .ib-blank .ib-in { justify-content: center; align-items: center; }
.ib-plate-card { width: 82%; padding: 12% 8%; text-align: center; border: 2px solid #d9b37a; border-radius: 16px; outline: 6px double rgba(217,179,122,.5); outline-offset: 6px; }
.ib-plate-card small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a6a44; font-weight: 800; }
.ib-plate-card b { display: block; margin: 12px 0; font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(22px, 3.6vh, 36px); color: #b5462f; }
.ib-plate-card span { font-size: 44px; }
.ib-plate-card em { display: block; margin-top: 12px; font-family: 'Fraunces', serif; font-size: 13px; color: #6b5540; }
.ib-end-card { text-align: center; } .ib-end-card span { font-size: 64px; }
.ib-end-card h2 { margin: 8px 0; font-family: 'Fraunces', serif; font-weight: 900; font-style: italic; font-size: clamp(30px, 5vh, 52px); color: #b5462f; }
.ib-end-card p { margin: 0 0 16px; color: #5a4632; font-weight: 600; }
.ib-again { padding: 10px 20px; border-radius: 999px; background: linear-gradient(180deg, #ffe562, #f6b523); font-weight: 800; color: #3a2600; box-shadow: 0 4px 0 #cb9302; }
.ib-nextbook { display: flex; margin-left: auto; margin-right: auto; max-width: 340px; font-size: 16px; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 14px 8px 8px; border-radius: 16px; background: #fff; color: #2a3a6a; font-weight: 800; box-shadow: 0 4px 0 #c9d4f0, 0 6px 16px rgba(40,60,120,.18); animation: pulse 1.8s ease-in-out infinite; }
.ib-nextbook img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.ib-end-card .ib-nextbook span { font-size: 16px; flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.ib-nextbook b { font-size: 17px; font-family: var(--font-display); }
.ib-nextbook small { font-size: 11px; color: #7a86b0; text-transform: uppercase; letter-spacing: .05em; }
.ib-fleuron { font-size: 40px; color: rgba(180,150,110,.5); }
/* chrome */
.ib-bar { position: absolute; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: calc(10px + var(--safe-t, 0px)) 14px 10px; color: #f3efe6; transition: opacity .35s, transform .35s; }
.ib-top { top: 0; background: linear-gradient(180deg, rgba(10,10,16,.55), rgba(10,10,16,0)); }
.ib-bottom { bottom: 0; flex-direction: column; gap: 6px; padding: 10px 18vw calc(12px + var(--safe-b, 0px)); background: linear-gradient(0deg, rgba(10,10,16,.55), rgba(10,10,16,0)); }
.ib-title { flex: 1; text-align: center; font-family: 'Fraunces', serif; font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-btn { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px; background: rgba(255,255,255,.1); color: #f3efe6; font-weight: 800; font-size: 16px; backdrop-filter: blur(10px); transition: background .2s; }
.ib-btn:hover { background: rgba(255,255,255,.2); } .ib-btn.on { background: rgba(255,229,98,.9); color: #2a1d00; }
.ib-calm, .ib.calm .ib-bar, .ib.calm .ib-edge { opacity: 0; pointer-events: none; }
.ib.calm .ib-top { transform: translateY(-8px); } .ib.calm .ib-bottom { transform: translateY(8px); }
.ib-scrub { position: relative; width: 100%; height: 22px; }
.ib-scrub input { position: absolute; inset: 0; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; z-index: 2; }
.ib-scrub input::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); }
.ib-scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.ib-scrub input::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); }
.ib-scrub input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; }
.ib-ticks { position: absolute; left: 9px; right: 9px; top: 50%; height: 0; } .ib-ticks i { position: absolute; top: -1px; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,.55); }
.ib-count { font-size: 12.5px; font-weight: 700; color: rgba(243,239,230,.8); letter-spacing: .02em; }
.ib-edge { position: absolute; top: 50%; z-index: 2; width: 52px; height: 92px; margin-top: -46px; border-radius: 16px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.75); font-size: 40px; transition: opacity .35s, background .2s; }
.ib-edge:hover { background: rgba(255,255,255,.16); } .ib-edge:disabled { opacity: 0 !important; pointer-events: none; }
.ib-edge.l { left: 14px; } .ib-edge.r { right: 14px; }
.ib-toc { position: absolute; top: 0; bottom: 0; left: 0; z-index: 4; width: min(360px, 88vw); padding: calc(14px + var(--safe-t, 0px)) 14px 14px; background: rgba(250,246,236,.97); box-shadow: 20px 0 50px rgba(0,0,0,.35); overflow-y: auto; animation: ibIn .25s ease-out; }
@keyframes ibIn { from { transform: translateX(-30px); opacity: 0; } }
.ib-toc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: 'Fraunces', serif; font-size: 22px; }
.ib-toc-head .ib-btn { background: rgba(0,0,0,.06); color: #2b2118; }
.ib-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ib-toc li button { width: 100%; display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: #fff; text-align: left; color: #2b2118; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.ib-toc-th { width: 64px; height: 48px; border-radius: 8px; background: #f1e8d6 center/cover; flex: none; display: grid; place-items: center; font-size: 22px; }
.ib-toc li b { display: block; font-size: 13px; } .ib-toc li small { display: block; font-size: 12px; color: #6b5a46; line-height: 1.3; }
.ib-say { position: absolute; left: 50%; bottom: calc(86px + var(--safe-b, 0px)); z-index: 3; transform: translateX(-50%); max-width: min(760px, calc(100vw - 32px)); padding: 10px 18px; border-radius: 16px; background: rgba(20,20,28,.72); color: #fff; font-family: 'Fraunces', serif; font-size: 16px; line-height: 1.4; text-align: center; backdrop-filter: blur(8px); pointer-events: none; }
.ib-say.hidden { display: none; }
.ib-toc.hidden { display: none; }
.reading #hud, .reading .prompts { visibility: hidden; }
@media (max-width: 700px) { .ib-bottom { padding-left: 16px; padding-right: 16px; } .ib-edge { display: none; } .ib-title { font-size: 14px; } .ib-btn { min-width: 36px; height: 36px; padding: 0 8px; font-size: 14px; } .ib-say { bottom: calc(76px + var(--safe-b, 0px)); font-size: 14px; } }

/* ═══ v3.4 — inside the Kingdomland app (?embed=app) ═══ */
.embed-only { display: none !important; }
.embed-app .embed-only { display: revert !important; }
.embed-app #authForm, .embed-app #authMe, .embed-app #authActions,
.embed-app #hudFriends, .embed-app #authBack { display: none !important; }
.embed-app .kac-card { min-height: 0; }
#hudExit { font-size: 18px; font-weight: 900; }
.arcade-wrap.single .x-btn { display: none; }

/* ═══════════════════════════════════════════════════════════════
   v3.6 — game-style HUD (profile card · crest · currencies · dock ·
   tab bar · Interact / Run / Jump), icon set in js/ui/icons.js
   ═══════════════════════════════════════════════════════════════ */
.kic { display: inline-block; flex: none; vertical-align: middle; filter: drop-shadow(0 2px 0 rgba(31,42,92,.14)); }
.hud { --glass: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,247,232,.92)); --rim: 0 5px 0 rgba(31,42,92,.14), 0 12px 26px rgba(31,42,92,.18); }
.hud button, .hud .h-map, .hud .joystick { pointer-events: auto; }
.hud button { font-family: var(--font-display); color: var(--ink); }
.hud button:active { transform: translateY(2px) scale(.97); }

/* profile card */
.hud-tl { gap: 6px; }
.h-profile { display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; min-width: 280px; border-radius: 999px; background: var(--glass); border: 3px solid #fff; box-shadow: var(--rim); text-align: left; transition: transform .15s; }
.h-profile:hover { transform: translateY(-2px); }
.h-ava { width: 66px; height: 66px; border-radius: 50%; flex: none; overflow: hidden; background: radial-gradient(circle at 50% 30%, #ffe0ee, #ff9ec7); border: 3px solid #fff; box-shadow: 0 0 0 3px #ffc526; display: grid; place-items: center; }
.h-ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.h-pinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.h-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h-name b { font-size: 24px; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.h-lvl { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 17px; color: var(--ink-2); font-weight: 600; }
.h-lvl b { color: var(--ink); }
.h-xp { flex: 1; min-width: 90px; height: 12px; border-radius: 999px; background: #d9deef; box-shadow: inset 0 2px 3px rgba(31,42,92,.2); overflow: hidden; }
.h-xp span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(180deg, #ffe680, #ffb81f); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); transition: width .6s cubic-bezier(.2,1.2,.4,1); }
.place-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 84px; margin-top: -4px; padding: 6px 14px 6px 10px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #34467f, #22305f); color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 600; box-shadow: 0 6px 14px rgba(31,42,92,.25); }

/* crest */
.h-crest { position: absolute; top: calc(4px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: 300px; height: 118px; pointer-events: none; }
.h-crest-crown { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 3px 2px rgba(90,52,0,.35)); }
.h-crest-plate { position: absolute; left: 22px; right: 22px; top: 24px; height: 64px; border-radius: 22px 22px 30px 30px; background: linear-gradient(180deg, #d99a5c, #a8672e); border: 3px solid #7a4518; box-shadow: inset 0 3px 0 rgba(255,230,190,.55), 0 6px 0 #6b3c14, 0 14px 26px rgba(31,42,92,.25); display: grid; place-items: center; }
.h-crest-plate img { width: 208px; height: auto; filter: drop-shadow(0 3px 0 rgba(80,40,0,.45)); }
.h-crest-ribbon { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); white-space: nowrap; padding: 4px 22px; background: linear-gradient(180deg, #fff9ec, #f1dfbd); color: #7a4518; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 1.2px; border-radius: 6px; box-shadow: 0 3px 0 #c9a36b; clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); display: flex; align-items: center; gap: 5px; }

/* top right */
.hud-tr { gap: 10px; }
.h-pill { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--glass); border: 3px solid #fff; box-shadow: var(--rim); transition: transform .15s; }
.h-pill:hover, .h-round:hover { transform: translateY(-2px); }
.h-pill b { font-size: 22px; font-weight: 700; min-width: 22px; }
.h-pill.cur { background: linear-gradient(180deg, #fffbe8, #ffe9a6); padding-right: 8px; }
.h-pill.cur .kic { margin: -8px 0 -8px -4px; }
.h-plus { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #6fb2ff, #2f7cf0); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 0 #1f55c9; }
.h-plus.g { background: linear-gradient(180deg, #6fe08d, #2fb05a); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 0 #1f8a45; }
.h-pill.watch { background: linear-gradient(180deg, #ff8ec0, #f0468f); border-color: #ffd0e4; color: #fff; padding-left: 6px; }
.h-pill.watch b { color: #fff; font-size: 20px; }
.h-play { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.28); padding-left: 3px; }
.h-pill.rewards { padding: 0 18px 0 8px; }
.h-pill.rewards b { font-size: 20px; }
.h-round { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: 3px solid #fff; box-shadow: var(--rim); transition: transform .15s; }
.h-round.small { width: 44px; height: 44px; }
.chip.bump, .h-pill.bump { animation: bump .5s; }

/* minimap */
.h-map { position: absolute; top: calc(84px + var(--safe-t)); right: 14px; width: 186px; height: 186px; border-radius: 50%; padding: 7px; background: conic-gradient(from 0deg, #ffe680, #d99a2b, #ffe680, #d99a2b, #ffe680); box-shadow: 0 6px 0 rgba(122,69,24,.35), 0 16px 30px rgba(31,42,92,.25); }
.h-map .minimap { position: static; display: block; width: 100%; height: 100%; border: 4px solid #fff7e8; border-radius: 50%; box-shadow: inset 0 0 18px rgba(31,42,92,.25); }
.h-north { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: #22305f; color: #fff; font: 700 14px/28px var(--font-display); text-align: center; border: 2px solid #ffe680; z-index: 2; }
.h-expand { position: absolute; right: -6px; bottom: 4px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, #34467f, #22305f); border: 2px solid rgba(255,255,255,.7); box-shadow: 0 4px 10px rgba(31,42,92,.3); }

/* left dock */
.h-dock { position: absolute; left: 14px; top: 50%; transform: translateY(-38%); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.h-dock button { position: relative; width: 84px; height: 84px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(180deg, rgba(64,82,140,.92), rgba(34,48,95,.94)); border: 2px solid rgba(255,255,255,.55); box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 6px 16px rgba(31,42,92,.3); transition: transform .15s; }
.h-dock button:hover { transform: translateX(3px) scale(1.04); }
.h-dock span { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.h-dock .dot, .hud .dot { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; border-radius: 50%; background: #ff4f6d; border: 2px solid #fff; }

/* bottom tab bar */
.h-tabs { position: absolute; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); display: flex; padding: 6px; gap: 4px; border-radius: 26px; background: var(--glass); border: 3px solid #fff; box-shadow: var(--rim); }
.h-tabs button { width: 112px; height: 78px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; transition: background .2s, transform .15s; }
.h-tabs button + button::before { content: ''; position: absolute; left: -3px; top: 16px; bottom: 16px; width: 2px; background: rgba(31,42,92,.1); }
.h-tabs button span { font-size: 17px; font-weight: 600; color: var(--ink); }
.h-tabs button.on { background: linear-gradient(180deg, #ffffff, #e8f1ff); box-shadow: inset 0 0 0 2px #cfe1ff; }
.h-tabs button.on span { color: #2f7cf0; }
.h-tabs button:hover .kic { transform: translateY(-3px); transition: transform .15s; }

/* joystick (all devices — mouse works too) */
.joystick { display: block; left: 150px; bottom: calc(22px + var(--safe-b)); width: 176px; height: 176px; background: radial-gradient(circle, rgba(255,255,255,.28) 40%, rgba(255,255,255,.5) 70%); border: 4px solid rgba(255,255,255,.85); box-shadow: 0 10px 26px rgba(31,42,92,.2), inset 0 0 0 10px rgba(255,255,255,.18); backdrop-filter: blur(3px); }
.stick { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: radial-gradient(circle at 40% 30%, #fff, #e6ebf8); box-shadow: 0 6px 0 #b9c3de, 0 12px 20px rgba(31,42,92,.3); }
.j-arrow { position: absolute; width: 0; height: 0; border: 9px solid transparent; opacity: .8; }
.j-arrow.u { top: 10px; left: 50%; margin-left: -9px; border-bottom: 12px solid #fff; border-top: 0; }
.j-arrow.d { bottom: 10px; left: 50%; margin-left: -9px; border-top: 12px solid #fff; border-bottom: 0; }
.j-arrow.l { left: 10px; top: 50%; margin-top: -9px; border-right: 12px solid #fff; border-left: 0; }
.j-arrow.r { right: 10px; top: 50%; margin-top: -9px; border-left: 12px solid #fff; border-right: 0; }

/* Interact / Run / Jump */
.h-actions { position: absolute; right: 18px; bottom: calc(14px + var(--safe-b)); width: 250px; height: 250px; pointer-events: none; }
.act-btn { position: absolute; right: 0; top: 0; width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: inherit;
  background: radial-gradient(circle at 50% 30%, #6fb2ff, #2468e0 70%); border: 6px solid #fff; box-shadow: 0 8px 0 #1a4fb0, 0 18px 34px rgba(31,42,92,.35); opacity: .72; filter: saturate(.7); transition: opacity .2s, filter .2s; animation: none; }
.act-btn span { color: #fff; font-size: 24px; font-weight: 700; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.act-btn.ready { opacity: 1; filter: none; animation: actPulse 1.4s infinite; }
@keyframes actPulse { 0%, 100% { box-shadow: 0 8px 0 #1a4fb0, 0 18px 34px rgba(31,42,92,.35), 0 0 0 0 rgba(111,178,255,.7); } 60% { box-shadow: 0 8px 0 #1a4fb0, 0 18px 34px rgba(31,42,92,.35), 0 0 0 18px rgba(111,178,255,0); } }
.act-btn.hidden { display: flex !important; }
.h-act { position: absolute; width: 86px; height: 86px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 50% 30%, #56688f, #2a3658 72%); border: 4px solid rgba(255,255,255,.9); box-shadow: 0 6px 0 #1b2440, 0 12px 22px rgba(31,42,92,.3); }
.h-act span { color: #fff; font-size: 14px; font-weight: 600; }
.h-act.run { left: 0; bottom: 30px; }
.h-act.jump { right: 0; bottom: 0; width: 76px; height: 76px; }
.h-act.jump { right: -4px; }
.h-act.run[aria-pressed="true"] { background: radial-gradient(circle at 50% 30%, #ffd65c, #ff9a2e 72%); box-shadow: 0 6px 0 #c96a00, 0 12px 22px rgba(31,42,92,.3); }
.key-hint { bottom: calc(104px + var(--safe-b)); }

/* place tags in the world: icon badge + name + subtitle */
.tag.place { display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 5px; border-radius: 999px; background: linear-gradient(180deg, #fff, #fff6e6); color: var(--ink); border: 3px solid var(--c, #ffc93c); box-shadow: 0 4px 0 rgba(31,42,92,.12), 0 10px 20px rgba(31,42,92,.2); font-family: var(--font-display); }
.tag.place .t-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c, #ffc93c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 0 0 3px #fff; }
.tag.place .t-ic .kic { filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.tag.place b { display: block; font-size: 19px; font-weight: 700; line-height: 1.05; }
.tag.place small { display: block; font-family: var(--font); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-2); margin-top: 2px; }
.prompt .p-ic .kic { width: 30px; height: 30px; }

/* hide parts of the HUD where they get in the way */
.racing .hud .h-dock, .racing .hud .h-tabs, .racing .hud .h-actions, .racing .hud .h-map,
.boardgame .hud .h-dock, .boardgame .hud .h-tabs, .boardgame .hud .h-actions, .boardgame .hud .h-map,
.cinema .hud .h-dock, .cinema .hud .h-tabs, .cinema .hud .h-actions, .cinema .hud .h-map { display: none !important; }
.visiting .hud .h-map { display: none !important; }

/* smaller screens */
@media (max-width: 1100px) {
  .h-crest { transform: translateX(-50%) scale(.78); transform-origin: top center; }
  .h-pill.rewards b, .h-pill.watch b { display: none; }
  .h-pill.rewards, .h-pill.watch { padding: 0 8px; }
}
@media (max-width: 900px), (max-height: 620px) {
  .h-crest { display: none; }
  .h-profile { min-width: 0; padding-right: 12px; }
  .h-ava { width: 50px; height: 50px; }
  .h-name b { font-size: 18px; max-width: 110px; }
  .h-xp { min-width: 60px; }
  .h-map { width: 128px; height: 128px; top: calc(72px + var(--safe-t)); }
  .h-dock button { width: 64px; height: 64px; border-radius: 16px; }
  .h-dock .kic { width: 30px; height: 30px; }
  .h-dock span { font-size: 11px; }
  .h-tabs button { width: 76px; height: 60px; }
  .h-tabs .kic { width: 30px; height: 30px; }
  .h-tabs button span { font-size: 13px; }
  .joystick { left: 90px; width: 130px; height: 130px; }
  .h-actions { transform: scale(.75); transform-origin: bottom right; }
}
@media (max-width: 640px) {
  .hud-tr { gap: 6px; } .h-pill { height: 44px; } .h-pill b { font-size: 17px; } .h-pill.cur .kic { width: 26px; height: 26px; }
  .h-round { width: 44px; height: 44px; } .h-round .kic { width: 24px; height: 24px; } .h-plus { display: none; }
  #hudParent { display: none; }
  .h-profile .h-lvl { display: none; }
  .h-dock { top: auto; bottom: calc(210px + var(--safe-b)); transform: none; }
  .h-tabs { bottom: calc(6px + var(--safe-b)); }
  .joystick { left: 12px; bottom: calc(84px + var(--safe-b)); }
  .h-actions { bottom: calc(70px + var(--safe-b)); transform: scale(.62); }
  .place-pill { margin-left: 56px; }
}
.touch .key-hint { display: none; }

/* ═══ v3.6 — Kingdom Hub (profile · backpack · quests) ═══ */
.panel.khub { width: min(1180px, calc(100vw - 24px)); max-height: calc(100vh - 20px); padding: 64px 28px 26px 250px; overflow: visible; border-radius: 34px;
  background: linear-gradient(180deg, #fffdf6, #fff5e3); border: 6px solid transparent;
  background-image: linear-gradient(180deg, #fffdf6, #fff5e3), linear-gradient(120deg, #f7b6d6, #c9b8ff 30%, #fff1c8 60%, #ffd9a0);
  background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 30px 60px rgba(31,42,92,.35); }
.overlay:has(.khub) { background: rgba(31,42,92,.35); backdrop-filter: blur(6px); }
.khub .x-btn { top: -16px; right: -16px; width: 66px; height: 66px; background: #fff; border: 4px solid #ffe3e3; box-shadow: 0 6px 0 rgba(31,42,92,.12), 0 12px 24px rgba(31,42,92,.25); display: grid; place-items: center; z-index: 3; }
.kh-plaque { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 360px; height: 92px; border-radius: 24px 24px 34px 34px; background: linear-gradient(180deg, #d99a5c, #a8672e); border: 4px solid #7a4518;
  box-shadow: inset 0 3px 0 rgba(255,230,190,.55), 0 7px 0 #6b3c14, 0 16px 30px rgba(31,42,92,.3); display: grid; place-items: center; z-index: 2; }
.kh-plaque img { width: 260px; filter: drop-shadow(0 3px 0 rgba(80,40,0,.45)); }
.kh-crown { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 58px; height: 58px; }
.kh-side { position: absolute; left: -46px; top: 110px; width: 250px; padding: 14px; border-radius: 28px; background: linear-gradient(180deg, #fff, #f5f2ff); box-shadow: 0 16px 36px rgba(31,42,92,.22); display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.kh-tab { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 rgba(31,42,92,.08); font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); text-align: left; transition: transform .15s; }
.kh-tab:hover { transform: translateX(3px); }
.kh-tab.on { background: linear-gradient(180deg, #5aa2ff, #2f6fe6); color: #fff; box-shadow: 0 5px 0 #1f55c9, 0 10px 20px rgba(47,111,230,.35); }
.kh-tab.on .kic { background: #fff; border-radius: 10px; padding: 2px; box-sizing: content-box; width: 26px; height: 26px; }
.kh-body { position: relative; min-height: 560px; max-height: calc(100vh - 110px); overflow: auto; padding: 4px 6px 4px 0; }
.kh-body[data-tab="profile"] { overflow: visible; }

.kh-profile { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.kh-card { position: relative; margin-left: -34px; border-radius: 30px; padding: 10px; background: linear-gradient(180deg, #fff5d8, #ffe3a8); box-shadow: 0 14px 30px rgba(31,42,92,.2); }
.kh-art { position: relative; height: 430px; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #7cc8ff, #cfeeff 55%, #bfe8a8 56%, #8fd07a); }
.kh-art::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: 18%; height: 30%; background: radial-gradient(ellipse at 30% 100%, #ffe7b0 0 30%, transparent 31%), radial-gradient(ellipse at 75% 100%, #ffdca0 0 26%, transparent 27%); opacity: .8; }
.kh-art img { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); height: 94%; max-width: 110%; object-fit: contain; z-index: 1; filter: drop-shadow(0 12px 12px rgba(31,42,92,.3)); }
.kh-change { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; box-shadow: 0 4px 0 rgba(31,42,92,.12), 0 8px 18px rgba(31,42,92,.2); white-space: nowrap; }
.kh-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; padding: 8px; border-radius: 20px; background: linear-gradient(180deg, #7bd36a, #4fae4a); }
.kh-thumbs button { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #fff4dc; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.15); transition: transform .15s; }
.kh-thumbs button:hover { transform: translateY(-2px); }
.kh-thumbs button.on { border-color: #3b8cff; box-shadow: 0 0 0 3px #bfe0ff, 0 3px 0 rgba(0,0,0,.15); }
.kh-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

.kh-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-right: 60px; }
.kh-who { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.kh-lv { position: relative; width: 92px; height: 92px; }
.kh-lv span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: .8; color: #7a4518; }
.kh-lv small { font-size: 15px; }
.kh-namebox h2 { margin: 0 0 6px; font-size: 44px; display: flex; align-items: center; gap: 10px; }
.kh-edit { width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 rgba(31,42,92,.12), 0 6px 14px rgba(31,42,92,.15); display: grid; place-items: center; }
.kh-as { display: inline-block; padding: 8px 22px; border-radius: 999px; background: linear-gradient(180deg, #eaf5ff, #d6ebff); font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.kh-xp { position: relative; margin-top: 10px; height: 22px; border-radius: 999px; background: #e3e6f2; overflow: hidden; box-shadow: inset 0 2px 3px rgba(31,42,92,.15); max-width: 360px; }
.kh-xp i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(180deg, #ffe680, #ffb81f); }
.kh-xp b { position: relative; display: block; text-align: center; font-size: 12px; line-height: 22px; color: #5a3400; }
.kh-motto { position: relative; padding: 26px 26px 18px; border-radius: 28px; background: linear-gradient(180deg, #f3f8ff, #e5efff); text-align: center; box-shadow: 0 6px 16px rgba(31,42,92,.12); }
.kh-motto > .kic:first-child { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); }
.kh-motto p { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.35; }
.kh-names { padding: 16px 20px; border-radius: 24px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.06); }
.kh-names.flash { animation: khFlash .9s; }
@keyframes khFlash { 30% { box-shadow: 0 0 0 5px #9fd0ff; } }
.kh-names header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kh-names header b { font-family: var(--font-display); font-size: 24px; flex: 1; }
.kh-random { display: flex; align-items: center; gap: 6px; font-weight: 800; color: #2f6fe6; text-decoration: underline; text-underline-offset: 3px; font-size: 17px; }
.kh-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kh-chips button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.1), 0 6px 14px rgba(31,42,92,.08); border: 2px solid #eef0f7; font-family: var(--font-display); font-weight: 700; font-size: 18px; transition: transform .15s; }
.kh-chips button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-chips button:hover { transform: translateY(-2px); }
.kh-chips button.on { background: linear-gradient(180deg, #eaf5ff, #cfe6ff); border-color: #5aa2ff; box-shadow: 0 4px 0 #9cc6ff; }
.kh-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.kh-cta { display: flex; gap: 20px; }
.kh-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; height: 78px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.15); transition: transform .15s; }
.kh-btn:hover { transform: translateY(-2px); }
.kh-btn.pink { background: linear-gradient(180deg, #ff9dc6, #f0569a); box-shadow: 0 7px 0 #c93a7b, 0 14px 26px rgba(240,86,154,.35); }
.kh-btn.blue { background: linear-gradient(180deg, #5aa2ff, #2f6fe6); box-shadow: 0 7px 0 #1f55c9, 0 14px 26px rgba(47,111,230,.35); }
.kh-btn .kic.inv { filter: brightness(3) saturate(0); }
.kh-mascot { position: absolute; right: -70px; bottom: -40px; width: 170px; pointer-events: none; animation: khBob 3s ease-in-out infinite; }
.kh-mascot .kic { filter: drop-shadow(0 10px 10px rgba(31,42,92,.25)); }
.kh-mascot i { position: absolute; } .kh-mascot .s1 { left: -10px; top: 0; } .kh-mascot .s2 { left: 20px; top: -30px; }
@keyframes khBob { 50% { transform: translateY(-8px) rotate(-3deg); } }

.kh-sec h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 28px; margin: 6px 0 14px; }
.kh-sec h3 small { font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--ink-2); }
.kh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kh-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border-radius: 22px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.08), 0 8px 18px rgba(31,42,92,.08); text-align: center; border: 3px solid transparent; }
.kh-item .kh-emo { font-size: 44px; line-height: 1.1; }
.kh-item b { font-family: var(--font-display); font-size: 18px; }
.kh-item small { font-size: 12px; color: var(--ink-2); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.kh-item.on { border-color: #3cc46a; background: linear-gradient(180deg, #fff, #eafff0); }
.kh-item.locked { opacity: .55; filter: grayscale(.6); }
.kh-quests { display: flex; flex-direction: column; gap: 12px; }
.kh-quest { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 22px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.08), 0 8px 18px rgba(31,42,92,.06); }
.kh-qic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(180deg, #fff6e0, #ffe7b3); }
.kh-qtx b { display: block; font-family: var(--font-display); font-size: 21px; }
.kh-qtx small { display: block; color: var(--ink-2); font-weight: 700; margin: 2px 0 8px; }
.kh-bar { height: 12px; border-radius: 999px; background: #e3e6f2; overflow: hidden; }
.kh-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #8fe39f, #3cc46a); }
.kh-qn { font-family: var(--font-display); font-weight: 700; font-size: 20px; min-width: 52px; text-align: center; }
.kh-go { padding: 12px 22px; border-radius: 999px; background: linear-gradient(180deg, #ffe680, #ffb81f); box-shadow: 0 5px 0 #d98a00; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #5a3400; }
.kh-quest.done { background: linear-gradient(180deg, #fff, #f0fff4); }
.kh-quest.done .kh-qtx b { color: #1f8a45; }

@media (max-width: 1100px) {
  .panel.khub { padding: 58px 18px 20px 18px; }
  .kh-side { position: static; width: auto; flex-direction: row; overflow-x: auto; margin: 0 0 14px; padding: 8px; }
  .kh-tab { flex: none; font-size: 16px; padding: 8px 12px; gap: 8px; }
  .kh-tab .kic { width: 24px; height: 24px; }
  .kh-card { margin-left: 0; }
  .kh-mascot { display: none; }
  .kh-main { padding-right: 0; }
}
@media (max-width: 820px) {
  .kh-profile { grid-template-columns: 1fr; }
  .kh-art { height: 300px; }
  .kh-who { grid-template-columns: auto 1fr; }
  .kh-motto { display: none; }
  .kh-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-namebox h2 { font-size: 32px; }
  .kh-btn { height: 60px; font-size: 20px; }
  .kh-plaque { width: 260px; height: 72px; top: -30px; } .kh-plaque img { width: 190px; }
  .kh-quest { grid-template-columns: auto 1fr auto; } .kh-go { grid-column: 1 / -1; }
  .khub .x-btn { top: -10px; right: -6px; width: 52px; height: 52px; }
}

/* ═══ v3.6 — storybook reader chrome (library room, big labelled tools) ═══ */
.ib .ib-desk { background: radial-gradient(60% 55% at 50% 42%, #7a4f2e 0%, #4a2d1c 55%, #24160f 100%); }
.ib .ib-desk::before { content: ''; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(20,12,8,.55), transparent 22%, transparent 78%, rgba(20,12,8,.55)),
  repeating-linear-gradient(90deg, transparent 0 120px, rgba(0,0,0,.06) 120px 124px),
  radial-gradient(40% 30% at 50% 0%, rgba(80,110,200,.45), transparent 70%); }
.ib-glow { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,120,.55), transparent 70%); filter: blur(6px); animation: ibGlow 5s ease-in-out infinite; }
.ib-glow.a { left: 8%; top: 14%; } .ib-glow.b { right: 10%; top: 30%; animation-delay: -2s; } .ib-glow.c { left: 44%; top: -40px; width: 260px; animation-delay: -3.5s; }
@keyframes ibGlow { 50% { opacity: .55; transform: scale(1.1); } }
.ib-decor { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ib-banner { position: absolute; left: 34px; top: 92px; width: 150px; padding: 18px 10px 58px; text-align: center; background: linear-gradient(180deg, #34467f, #22305f); border: 3px solid #d9a441; border-top: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ib-banner b { display: block; margin: 8px 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.3; color: #ffd98a; letter-spacing: 1px; }
.ib-sign { position: absolute; right: 48px; top: 140px; width: 170px; padding: 18px 10px 14px; text-align: center; border-radius: 10px; background: linear-gradient(180deg, #8a5a32, #5e3a1e); border: 3px solid #3e2612; box-shadow: inset 0 0 0 3px rgba(255,220,160,.2), 0 10px 20px rgba(0,0,0,.4); transform: rotate(2deg); }
.ib-sign::before { content: ''; position: absolute; left: 30px; right: 30px; top: -46px; height: 46px; border-left: 2px solid #b8894c; border-right: 2px solid #b8894c; }
.ib-sign b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25; color: #f6e2bd; }
.ib-stack { position: absolute; right: 26px; bottom: 150px; width: 220px; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 3px; }
.ib-stack span { width: var(--w); height: 34px; border-radius: 6px 4px 4px 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 40%, color-mix(in srgb, var(--c) 70%, #000)); color: #f7dfae; font: 700 15px/34px var(--font-display); letter-spacing: 1px; text-align: center; box-shadow: inset 0 0 0 2px rgba(255,220,150,.35), 0 3px 4px rgba(0,0,0,.35); }
.ib-reader { position: absolute; left: 0; bottom: 0; width: 300px; height: 330px; }
.ib-reader img { position: absolute; left: 24px; bottom: 90px; height: 250px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.ib-lamb { position: absolute; left: 150px; bottom: 96px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.ib-mini { position: absolute; left: 0; bottom: 0; width: 280px; display: flex; flex-direction: column; gap: 3px; }
.ib-mini span { display: block; padding: 8px 0; border-radius: 6px; text-align: center; color: #f7dfae; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.05; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 40%, color-mix(in srgb, var(--c) 70%, #000)); box-shadow: inset 0 0 0 2px rgba(255,220,150,.35); transform: rotate(-2deg); }
.ib-mini small { font-size: 12px; }

.ib .ib-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: calc(14px + var(--safe-t, 0px)) 22px 0; background: none; }
.ib-left, .ib-right { display: flex; gap: 10px; }
.ib-pill { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 24px 0 18px; border-radius: 999px; background: linear-gradient(180deg, #5aa2ff, #2f6fe6); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 21px; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 5px 0 #1f55c9, 0 10px 20px rgba(0,0,0,.3); }
.ib-tool { width: 88px; height: 78px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(180deg, #5aa2ff, #2f6fe6); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.05; text-align: center;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 5px 0 #1f55c9, 0 10px 20px rgba(0,0,0,.3); transition: transform .15s, filter .15s; }
.ib-tool:hover, .ib-pill:hover { transform: translateY(-2px); }
.ib-tool:active, .ib-pill:active { transform: translateY(2px); }
.ib-tool.pink { width: 118px; background: linear-gradient(180deg, #ff8ec0, #f0468f); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 5px 0 #c93a7b, 0 10px 20px rgba(0,0,0,.3); font-size: 16px; }
.ib-tool.on { box-shadow: inset 0 0 0 3px #ffe680, 0 5px 0 #1f55c9, 0 10px 20px rgba(0,0,0,.3); }
.ib-tool.pink.on { box-shadow: inset 0 0 0 3px #fff, 0 5px 0 #c93a7b, 0 0 22px rgba(255,142,192,.8); }
.ib-tool.dark { width: 94px; height: 84px; background: linear-gradient(180deg, #3a4a7e, #1f2a55); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 5px 0 #121a38, 0 10px 20px rgba(0,0,0,.35); font-size: 13px; }
.ib-tool.dark.on { box-shadow: inset 0 0 0 3px #ffd65c, 0 5px 0 #121a38, 0 0 18px rgba(255,214,92,.55); }
.ib-brand { position: absolute; left: 50%; top: calc(4px + var(--safe-t, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.ib-crown { margin-bottom: -12px; position: relative; z-index: 2; }
.ib-logo { width: 290px; height: 66px; border-radius: 20px 20px 26px 26px; display: grid; place-items: center; background: linear-gradient(180deg, #d99a5c, #a8672e); border: 3px solid #7a4518; box-shadow: inset 0 3px 0 rgba(255,230,190,.5), 0 5px 0 #5e3312; }
.ib-logo img { width: 220px; filter: drop-shadow(0 3px 0 rgba(80,40,0,.45)); }
.ib-tag { margin-top: -8px; padding: 3px 20px; border-radius: 5px; background: linear-gradient(180deg, #fff9ec, #f1dfbd); color: #7a4518; font: 700 10px var(--font-display); letter-spacing: 1.2px; box-shadow: 0 2px 0 #c9a36b; display: flex; gap: 4px; align-items: center; position: relative; z-index: 2; }
.ib .ib-title { margin-top: 8px; display: flex; align-items: center; gap: 12px; padding: 10px 34px; border-radius: 16px; background: linear-gradient(180deg, #2b3a70, #1a2450); border: 2px solid #d9a441; color: #fff; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 26px; white-space: nowrap; box-shadow: 0 8px 18px rgba(0,0,0,.35); flex: none; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.ib .ib-title i { width: 7px; height: 7px; border-radius: 50%; background: #d9a441; flex: none; }

.ib .ib-edge { width: 84px; height: 84px; margin-top: -42px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #ffd66b, #e7a21c 70%); color: #fff; border: 4px solid #ffe7a6; box-shadow: 0 6px 0 #a86d00, 0 12px 24px rgba(0,0,0,.35); display: grid; place-items: center; z-index: 3; }
.ib .ib-edge:hover { background: radial-gradient(circle at 50% 30%, #ffe28a, #f0ad28 70%); transform: scale(1.05); }
.ib .ib-edge.l { left: max(20px, calc(50% - var(--pageh, 600px) * .75 - 120px)); }
.ib .ib-edge.r { right: max(20px, calc(50% - var(--pageh, 600px) * .75 - 120px)); }
.ib .ib-edge svg { filter: drop-shadow(0 2px 0 rgba(120,70,0,.5)); }

.ib .ib-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; gap: 16px; padding: 0 22px calc(12px + var(--safe-b, 0px)); background: none; }
.ib-progress { position: relative; width: min(820px, 60vw); padding: 14px 26px 30px; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, rgba(34,48,95,.94), rgba(22,31,66,.96)); border: 2px solid rgba(217,164,65,.6); border-bottom: 0; box-shadow: 0 -6px 20px rgba(0,0,0,.25); }
.ib .ib-scrub { display: flex; align-items: center; gap: 12px; height: auto; }
.ib-track { position: relative; flex: 1; height: 20px; border-radius: 999px; background: #34427a; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
.ib-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(180deg, #ffe680, #ffb81f); transition: width .4s; }
.ib .ib-scrub input { position: absolute; inset: -6px 0; width: 100%; height: 32px; margin: 0; z-index: 2; background: none; -webkit-appearance: none; appearance: none; }
.ib .ib-scrub input::-webkit-slider-runnable-track { background: transparent; height: 32px; }
.ib .ib-scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -1px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff6c8, #ffc526 60%, #d98a00); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.ib .ib-scrub input::-moz-range-track { background: transparent; }
.ib .ib-scrub input::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #ffc526; border: 3px solid #fff; }
.ib-ticks { display: none; }
.ib-meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 12px; }
.ib .ib-count { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: #fff; }
.ib-chapter { text-align: right; font-family: var(--font-display); font-size: 17px; color: #fff; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-read { display: flex; align-items: center; gap: 10px; height: 64px; margin-bottom: -46px; padding: 0 30px 0 22px; border-radius: 999px; background: linear-gradient(180deg, #ff8ec0, #f0468f); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 24px; border: 4px solid #ffd0e4; box-shadow: 0 5px 0 #c93a7b, 0 12px 24px rgba(0,0,0,.35); white-space: nowrap; }
.ib-tray { display: flex; gap: 10px; padding: 12px; border-radius: 22px; background: linear-gradient(180deg, rgba(34,48,95,.9), rgba(22,31,66,.94)); border: 2px solid rgba(217,164,65,.5); position: absolute; right: 22px; bottom: calc(12px + var(--safe-b, 0px)); }
.ib .ib-say { bottom: calc(150px + var(--safe-b, 0px)); }
.ib-pop { position: fixed; z-index: 6; width: 280px; padding: 14px; border-radius: 20px; background: #fffaf0; box-shadow: 0 16px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.ib-pop.hidden { display: none; }
.ib-pop > b { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 19px; margin-bottom: 2px; }
.ib-pop button { padding: 11px 14px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 rgba(31,42,92,.08); text-align: left; font-weight: 700; font-size: 15px; color: var(--ink); }
.ib-pop button.on { background: #e5f0ff; box-shadow: inset 0 0 0 2px #5aa2ff; }
.ib-pop button:disabled { opacity: .5; }
.ib-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ib-seg button { text-align: center; padding: 10px 4px; font-size: 13px; }
.ib-x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 3px 0 rgba(31,42,92,.1); }
.ib .ib-toc { top: 0; }

@media (max-width: 1400px) { .ib-tray { position: static; } .ib-reader, .ib-stack { transform: scale(.8); transform-origin: bottom left; } .ib-stack { transform-origin: bottom right; } .ib-banner, .ib-sign { display: none; } .ib-progress { width: min(640px, 50vw); } }
@media (max-width: 1100px) {
  .ib-decor { display: none; }
  .ib-tool { width: 64px; height: 60px; font-size: 11px; } .ib-tool .kic { width: 24px; height: 24px; } .ib-tool.pink { width: 80px; font-size: 12px; }
  .ib-tool.dark { width: 64px; height: 60px; font-size: 10px; }
  .ib-pill span { display: none; } .ib-pill { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .ib-brand { transform: translateX(-50%) scale(.75); transform-origin: top center; }
  .ib .ib-edge { width: 60px; height: 60px; margin-top: -30px; }
}
@media (max-width: 760px), (max-height: 620px) {
  .ib-brand { display: none; }
  .ib-right .ib-tool:not(.pink):not([data-size]) { display: none; }
  .ib .ib-bottom { flex-direction: column; align-items: stretch; gap: 8px; padding: 0 10px calc(8px + var(--safe-b, 0px)); }
  .ib-progress { width: auto; padding: 10px 14px 12px; border-radius: 18px; border-bottom: 2px solid rgba(217,164,65,.6); }
  .ib-read { margin: 0; height: 46px; font-size: 16px; padding: 0 14px; } .ib-read .kic { width: 20px; height: 20px; }
  .ib-meta { margin-top: 8px; } .ib .ib-count, .ib-chapter { font-size: 13px; }
  .ib-tray { justify-content: center; padding: 6px; }
  .ib .ib-say { bottom: calc(190px + var(--safe-b, 0px)); }
}

.h-tabs button[data-tab="watch"] span { color: #e23d86; }
.h-tabs button { width: 104px; }
.embed-app .h-dock #hudFriends { display: none !important; }
.key-hint { bottom: calc(118px + var(--safe-b)); }

.panel.khub { height: min(780px, calc(100vh - 70px)); max-height: none; margin-top: 44px; }
.khub .kh-body { height: 100%; max-height: none; }
.kh-chips { gap: 10px; }
.kh-chips button { height: 52px; gap: 7px; padding: 0 10px; font-size: 16px; }
.kh-lv span { color: #fff; text-shadow: 0 2px 0 #b86e00, 0 0 3px #b86e00; padding-top: 14px; }
.kh-mascot { right: -96px; bottom: -70px; width: 150px; }
.kh-mascot > .kic { width: 130px; height: 130px; }
@media (max-width: 1100px) { .panel.khub { height: auto; max-height: calc(100vh - 60px); overflow: auto; } }

/* ═══ v3.6 — read-aloud karaoke: words light up as they are spoken ═══ */
.ib-text .w { border-radius: 6px; padding: 0 .08em; margin: 0 -.08em; transition: background .12s, color .12s; }
.ib-text .w.on { background: linear-gradient(180deg, #ffe680, #ffc526); color: #3a2100; box-shadow: 0 0 0 2px #ffd65c; }
.ib-text .w.done { color: #7a5a2c; }
@keyframes wpop { 50% { transform: scale(1.08); } }
.ib-story.ib-long .ib-media { flex-basis: 48%; flex-grow: 0; }
.ib-story.ib-long .ib-text { font-size: calc(var(--ibsize, 1) * var(--pageh, 600px) * 0.032); line-height: 1.42; }
.ib-progress { width: min(760px, calc(100vw - 640px)); }
@media (max-width: 1400px) { .ib-progress { width: min(640px, 50vw); } }

/* ═══ v3.7 — immersive reader: the book is the screen; chrome is quiet and fades away ═══ */
.ib .ib-desk { background: radial-gradient(70% 60% at 50% 45%, #3b2a22 0%, #1d1512 60%, #0e0b0a 100%); }
.ib .ib-desk::before { background: none; }
.ib-glow { opacity: .35; }
.ib-decor, .ib-brand, .ib-tray, .ib-tool, .ib-pill, .ib-progress, .ib-meta, .ib-chapter { display: none !important; }
.ib .ib-top { padding: calc(10px + var(--safe-t, 0px)) 16px 0; align-items: center; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)); height: 74px; transition: opacity .35s, transform .35s; }
.ib .ib-right { display: flex; gap: 8px; }
.ib-q { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); transition: background .2s, transform .15s; }
.ib-q:hover { background: rgba(255,255,255,.26); }
.ib-q:active { transform: scale(.96); }
.ib-q .kic { filter: none; }
.ib-q.pink { background: linear-gradient(180deg, #ff8ec0, #f0468f); border-color: rgba(255,255,255,.35); }
.ib-q.pink.on { box-shadow: 0 0 0 3px rgba(255,255,255,.8), 0 0 22px rgba(255,142,192,.8); }
.ib-q[data-more] span { display: none; } .ib-q[data-more] { padding: 0 12px; }
.ib .ib-title { position: static; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 20px; color: rgba(255,255,255,.85); max-width: 40vw; }
.ib .ib-title i { display: none; }
.ib .ib-edge { width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; box-shadow: none; backdrop-filter: blur(8px); transition: opacity .35s, background .2s; }
.ib .ib-edge:hover { background: rgba(255,255,255,.3); transform: none; }
.ib .ib-edge.l { left: 14px; } .ib .ib-edge.r { right: 14px; }
.ib .ib-edge svg { filter: none; }
.ib .ib-bottom { flex-direction: row; align-items: center; gap: 14px; padding: 0 22px calc(10px + var(--safe-b, 0px)); height: 44px; background: linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0)); transition: opacity .35s, transform .35s; }
.ib .ib-scrub { flex: 1; }
.ib-track { height: 6px; background: rgba(255,255,255,.22); box-shadow: none; }
.ib .ib-scrub input::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: 0; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.ib .ib-count { font-size: 14px; color: rgba(255,255,255,.85); white-space: nowrap; }
.ib .ib-read { position: absolute; left: 50%; bottom: calc(58px + var(--safe-b, 0px)); transform: translateX(-50%); z-index: 3; margin: 0; height: 52px; padding: 0 22px 0 16px; font-size: 19px; border-width: 3px; transition: opacity .35s, transform .35s; }
.ib.calm .ib-top { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.ib.calm .ib-bottom, .ib.calm .ib-read { opacity: 0; pointer-events: none; }
.ib.calm .ib-bottom { transform: translateY(10px); }
.ib.calm .ib-read { transform: translate(-50%, 10px); }
.ib.calm .ib-edge { opacity: 0; pointer-events: none; }
.ib .ib-say { bottom: calc(118px + var(--safe-b, 0px)); }
.ib-pop { background: #1f1a18; color: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); }
.ib-pop > b { color: #fff; }
.ib-pop button { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); color: #fff; box-shadow: none; }
.ib-pop button.on { background: rgba(255,142,192,.25); box-shadow: inset 0 0 0 2px #ff8ec0; }
.ib-pop .kic { filter: none; }
@media (max-width: 760px), (max-height: 620px) {
  .ib-q span { display: none; } .ib-q { padding: 0 12px; }
  .ib .ib-title { font-size: 16px; max-width: 50vw; }
  .ib .ib-read { height: 44px; font-size: 16px; }
  .ib .ib-edge { width: 44px; height: 44px; margin-top: -22px; }
}

/* ═══ v3.7 — one look for every panel (same frame as the Kingdom Hub) ═══ */
.panel:not(.khub):not(.tv-panel):not(.kset) { border-radius: 30px; border: 5px solid transparent;
  background-image: linear-gradient(180deg, #fffdf6, #fff5e3), linear-gradient(120deg, #f7b6d6, #c9b8ff 30%, #fff1c8 60%, #ffd9a0);
  background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 30px 60px rgba(31,42,92,.32); }
.panel .x-btn { width: 54px; height: 54px; display: grid; place-items: center; background: #fff; border: 3px solid #ffe3e3; box-shadow: 0 5px 0 rgba(31,42,92,.1), 0 10px 20px rgba(31,42,92,.2); }
.panel .x-btn:hover { transform: rotate(90deg); transition: transform .25s; }
.panel-head .emo { background: linear-gradient(180deg, #fff6e0, #ffe3a8); box-shadow: inset 0 -4px 0 rgba(217,138,0,.18), 0 6px 14px rgba(31,42,92,.12); }
.panel-head h2 { font-size: 34px; }
.panel .card { border-radius: 20px; box-shadow: 0 4px 0 rgba(31,42,92,.08), 0 10px 20px rgba(31,42,92,.08); }
.panel .card:hover { transform: translateY(-4px); box-shadow: 0 6px 0 rgba(31,42,92,.08), 0 16px 28px rgba(31,42,92,.14); }
.overlay { background: rgba(31,42,92,.35); backdrop-filter: blur(6px); }

/* ═══ v3.8 — crest only outside in town; no Interact button (tap the prompt or press E) ═══ */
.h-crest { display: none; }
body[data-scene="town"] .h-crest { display: block; }
.h-crest-plate { top: 8px; }
.h-crest-ribbon { top: 64px; }
#btnAct, .act-btn { display: none !important; }
.h-actions { width: 190px; height: 120px; }
.h-act.run { left: 0; bottom: 10px; }
.h-act.jump { right: 0; bottom: 18px; }
@media (max-width: 900px), (max-height: 620px) { body[data-scene="town"] .h-crest { display: none; } }

/* ═══ v3.8 — clean big map ═══ */
.panel.mapwide { width: min(820px, calc(100vw - 24px)); }
.kmap { position: relative; width: min(100%, calc(100vh - 190px)); aspect-ratio: 1; margin: 0 auto; border-radius: 26px; overflow: hidden; box-shadow: inset 0 0 0 4px #fff, 0 8px 22px rgba(31,42,92,.15); }
.kmap canvas { width: 100%; height: 100%; display: block; }
.kpin { position: absolute; width: 0; height: 0; z-index: 1; }
.kpin i { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px var(--c), 0 6px 12px rgba(31,42,92,.28); transition: transform .15s; }
.kpin:hover i { transform: scale(1.12); }
.kpin span { position: absolute; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.95); font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); box-shadow: 0 2px 6px rgba(31,42,92,.15); pointer-events: none; }
.kpin[data-side="below"] span, .kpin:not([data-side]) span { left: 0; top: 30px; transform: translateX(-50%); }
.kpin[data-side="above"] span { left: 0; bottom: 30px; transform: translateX(-50%); }
.kpin[data-side="right"] span { left: 32px; top: 0; transform: translateY(-50%); }
.kpin[data-side="left"] span { right: 32px; top: 0; transform: translateY(-50%); }
.kpin:hover span { background: var(--c); color: #fff; }
.kpin.nolab span { display: none; }
/* v4.30: phones — a tappable list of every place under the map (the map is too small to label them all) */
.kmap-list { display: none; }
@media (max-width: 640px) {
  .kmap-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-height: 26vh; overflow-y: auto; }
  .kmap-list button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 2px solid var(--c); background: #fff; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink); }
  .kmap-list button .kic { width: 18px; height: 18px; }
  .kpin i { left: -16px !important; top: -16px !important; width: 32px !important; height: 32px !important; box-shadow: 0 0 0 3px var(--c), 0 4px 8px rgba(31,42,92,.25); }
  .kpin i .kic { width: 20px !important; height: 20px !important; }
  .kpin[data-side="below"] span { top: 19px; } .kpin[data-side="above"] span { bottom: 19px; }
  .kpin[data-side="right"] span { left: 20px; } .kpin[data-side="left"] span { right: 20px; }
}
.kpin.nolab:hover span, .kpin.nolab:focus-visible span { display: block; z-index: 3; }
.kpin:hover, .kpin:focus-visible { z-index: 4; }
.kyou { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; }
.kyou::before { content: ''; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: #ff4f8b; border: 4px solid #fff; box-shadow: 0 0 0 6px rgba(255,79,139,.3); animation: kyou 1.4s infinite; }
.kyou b { position: absolute; left: 0; top: -38px; transform: translateX(-50%); padding: 2px 8px; border-radius: 8px; background: #ff4f8b; color: #fff; font-size: 12px; }
@keyframes kyou { 50% { box-shadow: 0 0 0 12px rgba(255,79,139,.1); } }
@media (max-width: 640px) { .kpin i { left: -20px; top: -20px; width: 40px; height: 40px; } .kpin i .kic { width: 26px; height: 26px; } .kpin span { font-size: 11px; } .kpin[data-side="below"] span { top: 24px; } .kpin[data-side="above"] span { bottom: 24px; } }

/* ═══ v3.9 — read-aloud like a printed storybook: the ink stays calm and one word
   wears a soft highlighter mark as it is spoken (see the reference spread) ═══ */
.ib-text .w { position: relative; border-radius: 7px; padding: 0 .12em; margin: 0 -.12em; transition: background .16s ease, color .16s ease, opacity .3s ease; }
.ib-text .w.on { background: linear-gradient(180deg, #ffe9a3 0%, #ffd45e 100%); color: #3b2405; box-shadow: 0 1px 0 rgba(180,120,0,.18); }
.ib-text .w.done { color: inherit; opacity: .62; }
.ib-text .w.done + .w.on, .ib-text .w.on { opacity: 1; }
.ib-fx { position: fixed; z-index: 7; pointer-events: none; transform: translate(-50%, -50%); animation: ibfx 1.05s ease-out forwards; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
@keyframes ibfx { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.3) rotate(0); } 20% { opacity: 1; transform: translate(calc(-50% + var(--dx) * .3), -120%) scale(1.15) rotate(calc(var(--rot) * .3)); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -320%) scale(.7) rotate(var(--rot)); } }
.ib.reading-aloud .ib-media { animation: mediaGlow 2.4s ease-in-out infinite; }
@keyframes mediaGlow { 50% { box-shadow: 0 0 0 4px #fff, 0 0 26px 6px rgba(255,214,92,.55); } }
.ib-media.cheer { animation: cheer .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes cheer { 40% { transform: scale(1.04) rotate(-1deg); } }
.ib-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.9) 0 2px, transparent 3px), radial-gradient(circle at 80% 30%, rgba(255,255,255,.8) 0 2px, transparent 3px), radial-gradient(circle at 60% 80%, rgba(255,240,170,.9) 0 3px, transparent 4px), radial-gradient(circle at 30% 70%, rgba(255,255,255,.8) 0 2px, transparent 3px); }
.ib.reading-aloud .ib-media::after { opacity: 1; animation: twinkle 1.6s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .3; } }
/* caption: the spread being read, as a quiet slate bar under the book (and in Learning mode) */
.ib .ib-say { bottom: calc(52px + var(--safe-b, 0px)); max-width: min(720px, calc(100vw - 48px)); background: rgba(48,48,54,.92); color: #f7f3ea; border: 0; border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.4); font-size: clamp(14px, 1.7vh, 17px); line-height: 1.45; padding: 10px 22px; opacity: 1; transition: opacity .25s ease; }
.ib .ib-say .w { border-radius: 6px; padding: 0 .12em; margin: 0 -.12em; transition: background .16s ease, color .16s ease; }
.ib .ib-say .w.on { background: #ffd45e; color: #3b2405; }
.ib .ib-say .w.done { opacity: .6; }
.ib:not(.reading-aloud):not(.learning) .ib-say { opacity: 0; }
.ib:not(.learning):not(.pic-page) .ib-say { display: none; }   /* v4.30: the page itself highlights the words; the bar only carries text a picture page lacks */
/* …except on a picture page, where the caption bar is the only place the words can run */
.ib.one-page.pic-page .ib-say { display: block; }
.ib.calm:not(.learning) .ib-say { opacity: .9; }

.ib-story.ib-xlong .ib-in { gap: 3.5%; padding-top: 6.5%; }
.ib-story.ib-xlong .ib-media { flex: 0 0 40%; }
.ib-story.ib-xlong .ib-text { font-size: calc(var(--ibsize, 1) * var(--pageh, 600px) * 0.0235); line-height: 1.42; }
.ib-story.ib-xlong.ib-textonly .ib-text { font-size: calc(var(--ibsize, 1) * var(--pageh, 600px) * 0.029); line-height: 1.5; }
.ib-story.ib-xlong .ib-text::first-letter { font-size: 1.6em; }
.ib-emoji span { animation: emojiFloat 3s ease-in-out infinite; display: inline-block; }
@keyframes emojiFloat { 50% { transform: translateY(-8%) rotate(4deg); } }

/* ═══ v3.8 — picture on the left page, words on the right page ═══ */
.ib-pic .ib-in { padding: 5.5%; display: block; }
.ib-pic .ib-media { position: absolute; inset: 5.5%; flex: none; border-radius: 18px; box-shadow: 0 0 0 5px #fff, 0 10px 26px rgba(90,60,30,.25); }
.ib-pic .ib-media img { object-fit: cover; }
.ib-pic .ib-emoji span { font-size: calc(var(--pageh, 600px) * .22); }
.ib-words .ib-in { justify-content: center; padding: 10% 11% 14%; }
.ib-words .ib-text { font-size: calc(var(--ibsize, 1) * var(--ibfit, 1) * var(--pageh, 600px) * 0.034); line-height: 1.62; }
.ib-words.ib-short .ib-text { font-size: calc(var(--ibsize, 1) * var(--ibfit, 1) * var(--pageh, 600px) * 0.046); line-height: 1.55; text-align: center; }
.ib-words.ib-long .ib-text { font-size: calc(var(--ibsize, 1) * var(--ibfit, 1) * var(--pageh, 600px) * 0.0305); line-height: 1.58; }
.ib-words.ib-xlong .ib-text { font-size: calc(var(--ibsize, 1) * var(--ibfit, 1) * var(--pageh, 600px) * 0.0275); line-height: 1.55; }
.ib-words .ib-text::first-letter { font-size: 2.2em; }
.ib-words.ib-short .ib-text::first-letter { float: none; font-size: 1em; margin: 0; }
.ib-words::before { content: '✦'; position: absolute; left: 50%; top: 5%; transform: translateX(-50%); color: #e4b86a; font-size: calc(var(--pageh, 600px) * .03); }
.ib.reading-aloud .ib-pic .ib-media { animation: mediaGlow 2.4s ease-in-out infinite; }

/* ── v3.11 Picture Words (School) ─────────────────────────── */
.lesson .stage-img.pic { object-fit: contain; background: #fff; max-height: 38vh; padding: 8px; box-shadow: 0 6px 0 rgba(31,42,92,.10), 0 0 0 3px #fff inset; animation: pwpop .45s cubic-bezier(.2,1.4,.4,1); }
.lesson .pw-word { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 6vw, 54px); color: #2b3a7a; letter-spacing: .5px; margin: 10px 0 0; text-shadow: 0 3px 0 rgba(255,201,60,.55); }
.lesson .say + .row, .lesson .pw-word + .say { margin-top: 6px; }
.choices.pics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices.pics .choice { padding: 8px; min-height: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #fff; }
.choices.pics .cimg { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; pointer-events: none; }
.choices.pics .choice.right { background: var(--mint); } .choices.pics .choice.wrong { background: var(--pink-2); opacity: .7; }
@media (max-width: 520px) { .choices.pics { gap: 8px; } }
.pwpanel .pw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 14px; }
.pw-theme { background: #fff; border-radius: 22px; padding: 10px 10px 12px; box-shadow: 0 6px 0 rgba(31,42,92,.12); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s; }
.pw-theme:hover { transform: translateY(-3px) rotate(-1deg); }
.pw-theme img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 16px; background: linear-gradient(180deg, #f3f9ff, #fff); }
.pw-theme b { font-family: var(--font-display); font-size: 17px; color: #2b3a7a; }
.pw-theme small { color: #7a86a8; font-weight: 700; }
.pw-theme.done { box-shadow: 0 6px 0 rgba(31,42,92,.12), 0 0 0 3px #8fe3c0 inset; }
@keyframes pwpop { from { transform: scale(.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lesson .stage-img.pic { animation: none; } }
@media (max-width: 520px) { .lesson .panel-head h2, .pwpanel .panel-head h2 { font-size: 24px; line-height: 1.1; } .lesson .panel-head .sub, .pwpanel .panel-head .sub { font-size: 12px; } .pwpanel .pw-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ── v4.0 open world: lands, word explorer ───────────────── */
.tag.word { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; background: linear-gradient(180deg, #fffdf2, #fff1c9); color: #6a4a00; border: 2px solid #ffc93c; font-family: var(--font-display); font-weight: 800; font-size: 15px; box-shadow: 0 4px 12px rgba(120,80,0,.22); animation: wbob 2.4s ease-in-out infinite; }
.tag.word .w-ic { width: 24px; height: 24px; border-radius: 50%; background: #ffc93c; display: grid; place-items: center; font-size: 13px; }
@keyframes wbob { 50% { margin-top: -6px; } }
.landbanner { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; padding: 12px 28px 12px 14px; border-radius: 999px;
  background: linear-gradient(180deg, #fff, #fff8ea); border: 4px solid var(--c, #ffc93c); box-shadow: 0 8px 0 rgba(31,42,92,.12), 0 18px 40px rgba(31,42,92,.25); pointer-events: none;
  animation: lbin .6s cubic-bezier(.2,1.5,.4,1); transition: opacity .6s, transform .6s; font-family: var(--font-display); }
.landbanner.out { opacity: 0; transform: translateX(-50%) translateY(-18px); }
.landbanner .lb-ic { width: 58px; height: 58px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-size: 32px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.12); }
.landbanner small { display: block; color: #7a86a8; font-weight: 700; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; }
.landbanner b { display: block; font-size: 30px; color: #2b3a7a; line-height: 1.05; }
@keyframes lbin { from { opacity: 0; transform: translateX(-50%) scale(.7); } }
@media (max-width: 520px) { .landbanner { top: 13%; padding: 8px 18px 8px 8px; gap: 10px; } .landbanner .lb-ic { width: 42px; height: 42px; font-size: 24px; } .landbanner b { font-size: 21px; } }

.wordpanel .wcard { text-align: center; }
.wcard .wc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wc-new { background: linear-gradient(180deg, #ffe066, #ffc21f); color: #6a4a00; font-family: var(--font-display); font-weight: 800; padding: 4px 14px; border-radius: 999px; animation: bump .5s; }
.wc-old { color: #7a86a8; font-weight: 700; }
.wc-count { font-family: var(--font-display); font-weight: 800; color: #2b3a7a; }
.wc-img { width: min(320px, 70vw); aspect-ratio: 1; object-fit: contain; border-radius: 26px; background: #fff; box-shadow: 0 6px 0 rgba(31,42,92,.1); animation: pwpop .45s cubic-bezier(.2,1.4,.4,1); }
.wc-word { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 8vw, 58px); color: #2b3a7a; text-transform: capitalize; margin: 8px 0 4px; text-shadow: 0 3px 0 rgba(255,201,60,.55); }
.wordbook .wbook { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-top: 14px; }
.wb { background: #fff; border-radius: 20px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 5px 0 rgba(31,42,92,.1); }
.wb img, .wb span { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 14px; }
.wb span { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #eef3fb, #eef3fb 8px, #e6edf8 8px, #e6edf8 16px); font-family: var(--font-display); font-size: 44px; color: #b8c3da; }
.wb b { font-family: var(--font-display); color: #2b3a7a; text-transform: capitalize; }
.wb:not(.got) b { color: #b8c3da; }

.regionpanel .rg-hero { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, #fff), #fff); border: 3px solid var(--c); }
.rg-hero .rg-ic { width: 72px; height: 72px; flex: none; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-size: 40px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
.rg-hero h2 { margin: 0; font-size: 30px; }
.rg-hero p { margin: 4px 0 0; font-weight: 700; color: #4a5680; }
.rg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 16px 0; }
.rg-act { background: #fff; border-radius: 22px; padding: 10px 10px 12px; text-align: left; box-shadow: 0 6px 0 rgba(31,42,92,.12); display: flex; flex-direction: column; gap: 4px; transition: transform .15s; }
.rg-act:hover { transform: translateY(-3px); }
.rg-act img, .rg-act .rg-emo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; background: #f3f7ff; display: grid; place-items: center; font-size: 48px; }
.rg-act small { color: #7a86a8; font-weight: 800; font-size: 12px; }
.rg-act b { font-family: var(--font-display); font-size: 17px; color: #2b3a7a; line-height: 1.15; }
.rg-act.done { box-shadow: 0 6px 0 rgba(31,42,92,.12), 0 0 0 3px #8fe3c0 inset; }
.rg-words { width: 100%; padding: 12px 16px; border-radius: 18px; background: linear-gradient(180deg, #fffdf2, #fff1c9); border: 2px solid #ffc93c; font-weight: 700; color: #6a4a00; }
@media (max-width: 520px) { .rg-hero { flex-direction: column; text-align: center; } .rg-hero h2 { font-size: 24px; } .rg-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.k-buddies { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px 60px; }
.k-bud { padding: 7px 14px; border-radius: 999px; background: #f1f5fc; font-weight: 800; color: #3b4a7a; border: 2px solid transparent; }
.k-bud.on { background: #fff4d0; border-color: #ffc93c; }
@media (max-width: 520px) { .k-buddies { padding-left: 12px; } }
.wordpanel .wc-top { padding-right: 44px; }

/* ── v4.1 Today · treasure · adventures · stickers · level up ── */
.h-dock .today { position: relative; }
.h-dock .today::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid #ffc93c; opacity: 0; }
.h-dock .today:has(.dot:not(.hidden))::after { animation: tdpulse 1.6s ease-out infinite; }
@keyframes tdpulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
.todaypanel .td-head { text-align: center; margin-bottom: 8px; }
.todaypanel .td-head h2 { margin: 0; font-size: 30px; }
.todaypanel .td-head p { margin: 2px 0 0; color: #6b7699; font-weight: 700; }
.td-card { background: #fff; border-radius: 24px; padding: 14px 16px 16px; margin: 12px 0; box-shadow: 0 6px 0 rgba(31,42,92,.08); }
.td-card h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 20px; color: #2b3a7a; }
.td-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.td-day { border-radius: 16px; background: #f3f6fc; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 3px solid transparent; position: relative; }
.td-day small { font-weight: 800; color: #8a94b3; font-size: 11px; }
.td-day span { font-size: 26px; line-height: 1; }
.td-day b { font-family: var(--font-display); color: #6a4a00; }
.td-day em { font-style: normal; font-size: 11px; font-weight: 800; color: #7a86a8; }
.td-day.big { background: linear-gradient(180deg, #fff4c4, #ffe07a); }
.td-day.now { border-color: #ffc93c; background: #fffbe8; animation: bump 1.4s ease-in-out infinite; }
.td-day.got { opacity: .55; } .td-day.got::after { content: '✓'; position: absolute; top: 2px; right: 6px; color: #3cc46a; font-weight: 900; }
.td-day.shake { animation: shake .35s 3; }
.td-open, .td-card .btn.big { display: block; width: 100%; margin-top: 12px; font-size: 19px; min-height: 54px; }
.td-note { margin: 12px 0 0; text-align: center; font-weight: 800; color: #3b8f5a; }
.td-ms { display: flex; flex-direction: column; gap: 10px; }
.td-m { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 18px; background: #f6f8fd; }
.td-m.done { background: #e8f9ef; }
.td-mic { font-size: 30px; width: 44px; text-align: center; }
.td-m > div { flex: 1; min-width: 0; } .td-m b { font-family: var(--font-display); color: #2b3a7a; }
.td-mn { font-family: var(--font-display); font-weight: 800; color: #6b7699; }
.td-album { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 22px; background: linear-gradient(135deg, #e9e1ff, #fff); border: 3px solid #c9b8ff; text-align: left; }
.td-album span { font-size: 36px; } .td-album div { flex: 1; } .td-album b { font-family: var(--font-display); font-size: 19px; color: #3d2d86; display: block; } .td-album small { font-weight: 700; color: #6b5fa6; } .td-album i { font-style: normal; font-size: 30px; color: #8b5cff; }
@media (max-width: 520px) { .td-cal { grid-template-columns: repeat(4, 1fr); } .td-day.big { grid-column: span 2; } .todaypanel .td-head h2 { font-size: 23px; } }

.stickerbook .st-album { background: #fff; border-radius: 22px; padding: 12px 14px; margin: 12px 0; box-shadow: 0 5px 0 rgba(31,42,92,.08); }
.stickerbook .st-album.full { box-shadow: 0 5px 0 rgba(31,42,92,.08), 0 0 0 3px #ffc93c inset; background: linear-gradient(180deg, #fffbea, #fff); }
.st-album h3 { margin: 0 0 8px; font-family: var(--font-display); color: #2b3a7a; } .st-album h3 small { color: #8a94b3; font-weight: 700; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.st { aspect-ratio: .85; border-radius: 16px; background: repeating-linear-gradient(45deg, #eef3fb, #eef3fb 8px, #e6edf8 8px, #e6edf8 16px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; border: 2px dashed #cfd8ea; }
.st span { font-family: var(--font-display); font-size: 30px; color: #b8c3da; }
.st.got { background: #fff; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(31,42,92,.15); transform: rotate(-2deg); }
.st.got:nth-child(even) { transform: rotate(2deg); }
.st.got img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.st.got b { font-size: 11px; font-family: var(--font-display); color: #2b3a7a; }
.reward-pop.sticker .burst img { width: 110px; height: 110px; object-fit: contain; border-radius: 20px; background: #fff; border: 5px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,.2); transform: rotate(-6deg); }

.levelup { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(255,226,130,.78), rgba(31,42,92,.82)); backdrop-filter: blur(3px); animation: fadeIn .3s; transition: opacity .6s; cursor: pointer; }
.levelup.out { opacity: 0; }
.levelup .lu-ring { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c4, #ffc21f 60%, #f39c00); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 10px #fff, 0 20px 60px rgba(0,0,0,.35); animation: luspin .9s cubic-bezier(.2,1.6,.4,1); }
.levelup small { font-family: var(--font-display); font-weight: 800; color: #7a4a00; letter-spacing: 3px; }
.levelup b { font-family: var(--font-display); font-size: 84px; line-height: .9; color: #fff; text-shadow: 0 5px 0 #d97a00; }
.levelup h2 { font-size: 54px; color: #fff; margin: 22px 0 4px; text-shadow: 0 4px 0 #c46b00, 0 8px 20px rgba(0,0,0,.3); }
.levelup p { color: #fff; font-weight: 800; font-size: 18px; margin: 0; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
@keyframes luspin { from { transform: scale(.2) rotate(-200deg); } }

/* ── v4.9 phones held sideways (≈ 390 px tall) ──────────────────────────────── */
@media (max-height: 460px) {
  /* the big map: let the panel scroll and give the map the width, not the (tiny) height */
  .panel.mapwide { padding: 10px 14px; }
  .panel.mapwide .panel-head { margin-bottom: 6px; }
  .panel.mapwide .panel-head h2 { font-size: 20px; }
  .panel.mapwide .panel-head .sub { display: none; }
  .kmap { width: min(100%, 520px); }
  .kpin i { width: 40px; height: 40px; left: -20px; top: -20px; }
  .kpin i .kic, .kpin i svg { width: 22px; height: 22px; }
  .kpin span { font-size: 11px; padding: 2px 7px; }
  .kpin[data-side="below"] span, .kpin:not([data-side]) span { top: 22px; }
  .kpin[data-side="above"] span { bottom: 22px; }
  .kpin[data-side="right"] span { left: 24px; }
  .kpin[data-side="left"] span { right: 24px; }
  /* the side dock: five buttons do not fit in 390 px — shrink them into a tight column */
  .h-dock { gap: 4px; bottom: calc(150px + var(--safe-b)); }
  .h-dock button { width: 44px; height: 44px; font-size: 8px; }
  .h-dock button .kic, .h-dock button svg { width: 20px; height: 20px; }
  /* racing: stars, coins and rewards are not needed mid-race and collide with the quit button */
  .racing .hud .h-pill, .racing .hud .h-gear, .racing .hud #hudRewards, .racing .hud #hudStars, .racing .hud #hudCoins { display: none !important; }
  .rh-quit { top: calc(8px + var(--safe-t)); left: auto; right: 12px; transform: none; }
  .rt-btn { width: 60px; height: 60px; font-size: 22px; }
  .rt-btn.gas { width: 74px; height: 74px; font-size: 14px; }
  .rt-btn.drift { font-size: 12px; }
}

/* ── BASIC MODE (the "basic world" client link: 3D world + story books only) ── */
/* v4.20: the client link shows the whole HUD like the full app; the parts that are not open yet wear a lock (main.js adds .lock) */
.hud .lock { position: relative; filter: saturate(.55); opacity: .82; }
.hud .lock::after { content: '🔒'; position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 rgba(31,42,92,.18); font-size: 12px; line-height: 22px; text-align: center; z-index: 2; filter: none; opacity: 1; }
.hud .h-tabs button.lock::after { top: 6px; right: 8px; }
.hud .h-pill.lock::after { top: -7px; right: -4px; }