/* ═══════════ v4.42 extras: feedback · first-play guide · this week's lesson · printing ═══════════ */

/* ── Send feedback ── */
.h-round.fb span { font-size: 24px; line-height: 1; }
body.no-fb #hudFeedback { display: none; }
.racing #hudFeedback, body[data-scene="era"] #hudFeedback { display: none !important; }
.panel.fb-panel { width: min(600px, calc(100vw - 24px)); }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.fb-kind { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 rgba(31,42,92,.12); }
.fb-kind span { font-size: 18px; }
.fb-kind.on { background: var(--ink, #1f2a5c); color: #fff; }
.fb-l { display: block; font-weight: 800; font-size: 14px; margin: 0 0 6px; color: #2b2350; }
.fb-l.small { font-size: 12px; flex: 1; min-width: 180px; }
.fb-l i { font-style: normal; font-weight: 600; color: #8a7fb0; }
.fb-text, .fb-l input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 16px; border: 2px solid #e6dcc8; background: #fff; color: #1f2a5c; resize: vertical; }
.fb-l input { margin-top: 5px; padding: 10px 12px; font-size: 15px; }
.fb-text:focus, .fb-l input:focus { outline: none; border-color: #3aa0ff; }
.fb-text.shake { animation: fbShake .4s; border-color: #ff6f91; }
@keyframes fbShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.fb-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.fb-shot { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: #fff; cursor: pointer; }
.fb-shot input { width: 22px; height: 22px; flex: none; }
.fb-shot img { width: 120px; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; flex: none; }
.fb-shot b { display: block; font-size: 14px; } .fb-shot small { display: block; font-size: 12px; color: #6b6290; }
.fb-meta { font-size: 12px; color: #8a7fb0; margin: 10px 0; }
.fb-btns { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ── Learn to play (hands-on tutorial) ── */
.tut-card { position: fixed; z-index: 57; left: 50%; top: calc(86px + var(--safe-t, 0px)); transform: translateX(-50%); width: min(430px, calc(100vw - 32px));
  padding: 14px 16px 14px; border-radius: 24px; background: #fffdf6; color: #1f2a5c; box-shadow: 0 0 0 4px #ffd65c, 0 18px 40px rgba(20,24,60,.3); transition: opacity .25s; pointer-events: auto; }
.tut-card.pop { animation: tutPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes tutPop { from { transform: translateX(-50%) scale(.85); opacity: 0; } }
.tut-card.dim { opacity: .0; pointer-events: none; }
.tut-top { display: flex; align-items: center; gap: 12px; }
.tut-ic { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: linear-gradient(180deg, #fff3c4, #ffd65c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.1); }
.tut-top small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #a08bd8; }
.tut-top b { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.tut-skip { margin-left: auto; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: #f1ecff; color: #6a4bc4; font-weight: 800; font-size: 12px; }
.tut-card p { margin: 10px 2px 10px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.tut-bar { height: 8px; border-radius: 99px; background: #efe7d6; overflow: hidden; }
.tut-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffc93c, #ff8a3d); transition: width .5s; }
.tut-next { margin-top: 10px; float: right; padding: 8px 16px; border-radius: 999px; background: #3aa0ff; color: #fff; font-weight: 800; box-shadow: 0 3px 0 #1459b4; }
.tut-next.hidden { display: none; }
.tut-hand { position: fixed; z-index: 61; font-size: 46px; pointer-events: none; transform: translate(-30%, 0); opacity: 0; transition: opacity .2s, left .35s, top .35s;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.tut-hand.on { opacity: 1; animation: tutTap 1s ease-in-out infinite; }
@keyframes tutTap { 0%, 100% { margin-top: 0; } 50% { margin-top: -16px; } }
.tut-keys { position: fixed; z-index: 57; left: 50%; bottom: 120px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.tut-keys.on { display: flex; animation: tutPop .4s; }
.tut-keys div { display: flex; gap: 6px; }
.tut-keys span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: #fff; color: #1f2a5c; font-size: 26px; font-weight: 800;
  box-shadow: 0 5px 0 #c9c2b2, 0 10px 20px rgba(0,0,0,.25); animation: tutKey 1.6s infinite; }
.tut-keys span:nth-child(2) { animation-delay: .2s; } .tut-keys div span:nth-child(3) { animation-delay: .4s; }
@keyframes tutKey { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(4px); box-shadow: 0 1px 0 #c9c2b2, 0 4px 10px rgba(0,0,0,.25); } }

/* ── easy mode: big buttons ── */
body.big-btns #joystick { transform: scale(1.25); transform-origin: 0 100%; }
body.big-btns #btnRun, body.big-btns #btnJump { transform: scale(1.25); transform-origin: 100% 100%; }
body.big-btns .h-rail button, body.big-btns #hudMap { transform: scale(1.08); }

/* ── This Week's Lesson ── */
.panel.wk-panel { width: min(720px, calc(100vw - 24px)); padding-top: 18px; }
.wk-hero { position: relative; border-radius: 24px; padding: 20px 22px 18px; min-height: 150px; color: #fff; overflow: hidden;
  background: linear-gradient(90deg, rgba(31,26,80,.88) 0%, rgba(31,26,80,.55) 55%, rgba(31,26,80,.1) 100%), var(--img) center/cover; box-shadow: 0 10px 26px rgba(31,42,92,.2); }
.wk-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #ffc93c; color: #3b2a00; font-weight: 800; font-size: 13px; }
.wk-hero h2 { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px); line-height: 1.05; text-shadow: 0 2px 10px rgba(0,0,0,.35); max-width: 70%; }
.wk-ref { margin: 4px 0 0; font-weight: 700; opacity: .85; }
.wk-idea { margin: 10px 0 0; display: inline-block; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); font-weight: 700; max-width: 75%; }
.wk-verse { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 0; padding: 12px 16px; border-radius: 18px; background: #fff7dd; text-align: left; box-shadow: inset 0 0 0 2px #ffe08a; font-family: var(--font-display); font-size: 17px; color: #4a3f8a; }
.wk-verse > span:first-child { font-size: 26px; }
.wk-verse i { display: block; font-style: normal; font-family: var(--font); font-size: 13px; font-weight: 700; color: #a08bd8; }
.wk-prog { display: flex; align-items: center; gap: 14px; margin: 14px 0 10px; flex-wrap: wrap; }
.wk-prog > div:nth-child(2) { flex: 1; min-width: 180px; }
.wk-prog b { display: block; font-size: 16px; } .wk-prog small { color: #6b6290; font-weight: 600; }
.wk-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(#34c46a calc(var(--p) * 1%), #ece4d4 0); }
.wk-ring b { width: 48px; height: 48px; border-radius: 50%; background: var(--cream, #fffaf0); display: grid; place-items: center; font-size: 15px; }
.wk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.wk-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #fff; text-align: left; box-shadow: 0 3px 0 rgba(31,42,92,.10); transition: transform .15s; }
.wk-item:hover { transform: translateY(-2px); }
.wk-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: #f3efff; }
.wk-tx { flex: 1; min-width: 0; } .wk-tx b { display: block; font-size: 15px; } .wk-tx small { display: block; font-size: 12px; color: #8a7fb0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-st { flex: none; font-weight: 800; font-size: 13px; color: #3aa0ff; }
.wk-item.done { background: #ecfbf1; } .wk-item.done .wk-ic { background: #c9f2d7; } .wk-item.done .wk-st { color: #22a35a; font-size: 20px; }
.wk-foot { margin: 14px 0 0; font-size: 13px; color: #8a7fb0; }
.wk-grown { padding: 4px 10px; border-radius: 999px; background: #fff; font-weight: 800; color: #6a4bc4; box-shadow: 0 2px 0 rgba(31,42,92,.1); }
.wk-sel { width: 100%; font: inherit; font-size: 16px; padding: 12px; border-radius: 14px; border: 2px solid #e6dcc8; background: #fff; }
.wk-gbtns { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }
.wk-share { padding: 14px; border-radius: 18px; background: #fff; } .wk-share b { display: block; } .wk-share small { display: block; color: #6b6290; margin-bottom: 8px; }
.wk-link { display: flex; gap: 8px; } .wk-url { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 10px; border-radius: 12px; border: 2px solid #e6dcc8; background: #faf7f0; }
.wk-promo { background: linear-gradient(110deg, #e9f6ff 0%, #fff6dc 50%, #f2ecff 100%); }
.wk-promo .cb-promo-go { background: #3aa0ff; box-shadow: 0 4px 0 #1e6fc8; }
.h-dock .week::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid #3aa0ff; opacity: 0; }
.h-dock .week:has(.dot:not(.hidden))::after { animation: tdpulse 1.6s ease-out infinite; }
body.tut-on .h-dock .week::after, body.tut-on .h-dock .today::after { animation: none !important; opacity: 0 !important; }
@media (max-width: 560px) { .wk-hero h2, .wk-idea { max-width: 100%; } }
@media (max-height: 560px) { .h-dock #hudWeek { display: none; } }
.td-album.td-week { margin-bottom: 10px; background: linear-gradient(110deg, #e9f6ff, #fff6dc); }

/* ── v4.44 Who's playing? (1 account · up to 3 players) + the first-time welcome ── */
.who { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow-y: auto; color: #fff;
  background: radial-gradient(60% 50% at 50% 40%, rgba(255, 201, 60, .16), transparent 70%), radial-gradient(40% 40% at 15% 85%, rgba(124, 92, 232, .35), transparent 70%), linear-gradient(180deg, #27387a, #1d2a5b 55%, #16214a);
}
.who.out { opacity: 0; transition: opacity .25s; }
@keyframes whoIn { from { opacity: 0; transform: scale(1.02); } }
.who-in { width: min(980px, 100%); padding: calc(28px + var(--safe-t, 0px)) 16px calc(28px + var(--safe-b, 0px)); text-align: center; }
.who-logo { height: clamp(46px, 8vw, 84px); filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
.who h1 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5.4vw, 54px); text-shadow: 0 4px 22px rgba(0,0,0,.35); }
.who-sub { margin: 8px auto 0; max-width: 560px; color: #cdd5f6; font-size: clamp(14px, 1.9vw, 17px); line-height: 1.45; font-weight: 600; }
.who-grid { list-style: none; margin: clamp(22px, 4vh, 40px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 3vw, 30px); }
.who-p { position: relative; width: clamp(138px, 20vw, 190px); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; }
.who-face { position: relative; width: clamp(118px, 17vw, 160px); aspect-ratio: 3 / 4; border-radius: 28px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff 0%, var(--c, #ffc93c) 140%); border: 5px solid rgba(255,255,255,.85); box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: transform .18s, border-color .18s; }
.who-face img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding: 8px 6px 0; }
.who-face i { font-style: normal; font-size: 60px; }
.who-p.add .who-face { background: rgba(255,255,255,.08); border: 4px dashed rgba(255,255,255,.45); }
.who-p.add .who-face i { font: 700 74px/1 var(--font-display); color: #ffc93c; }
.who-p:hover .who-face, .who-p:focus-visible .who-face { transform: translateY(-4px) scale(1.04); border-color: #ffc93c; }
.who-p b { margin-top: 10px; font: 700 21px/1.15 var(--font-display); }
.who-p small { color: #b9c3ee; font-size: 14px; font-weight: 600; }
.who-p s { text-decoration: none; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #ffc93c; color: #1d2a5b; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.who-p.new .who-face { filter: saturate(.7); }
.who-pen { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(29,42,91,.55); font-style: normal; font-size: 40px; }
.who-man { margin-top: clamp(22px, 4vh, 38px); padding: 11px 26px; border-radius: 999px; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.3); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .04em; }
.who-ed { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(15,22,56,.6); padding: 16px; }
.who-edc { width: min(420px, 100%); background: #fff8ec; color: #1f2a5c; border-radius: 24px; padding: 22px 22px 18px; text-align: left; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.who-edc h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 26px; }
.who-edc label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6a74a6; }
.who-name { display: flex; gap: 8px; margin: 6px 0 16px; }
.who-name input { flex: 1; min-width: 0; font: 700 18px var(--font-display); padding: 10px 14px; border-radius: 14px; border: 2px solid #e2dccb; }
.who-name button { width: 48px; border-radius: 14px; background: #ffc93c; font-size: 22px; }
.who-edb { display: flex; flex-wrap: wrap; gap: 8px; }
.who-note { margin: 12px 0 0; font-size: 13px; color: #6a74a6; }
.who-wel .wel-in { width: min(940px, calc(100% - 32px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(16px, 4vw, 44px); align-items: center; }
.wel-art { aspect-ratio: 1; border-radius: 34px; overflow: hidden; background: radial-gradient(70% 60% at 50% 40%, #ffe9a8 0%, #ffc93c 45%, #e9a514 100%); border: 6px solid #ffc93c; box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: welArt 3.2s ease-in-out infinite; }
.wel-art { display: grid; place-items: center; }
.wel-art img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 7%; box-sizing: border-box; filter: drop-shadow(0 10px 14px rgba(120,70,0,.35)); }   /* v4.49: the whole friend, centred in the square */
@keyframes welArt { 50% { transform: translateY(-8px) rotate(-1deg); } }
.wel-tx { text-align: left; }
.wel-tx small { color: #ffc93c; font-weight: 800; letter-spacing: .16em; font-size: 13px; }
.wel-tx h1 { margin: 6px 0 4px; text-align: left; }
.wel-who { margin: 0 0 16px; font-size: 19px; color: #e3e8fb; } .wel-who b { color: #ffc93c; }
.wel-tx ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.wel-tx li { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 11px 14px; font-weight: 700; font-size: 16px; }
.wel-tx li i { font-style: normal; font-size: 24px; }
@media (max-width: 640px) { .who-wel .wel-in { grid-template-columns: 1fr; } .wel-art { width: 60%; margin: 0 auto; } .wel-tx, .wel-tx h1 { text-align: center; } }

/* ── v4.44 Design my own friend (select screen) ── */
.sel-list .sel-mine { background: linear-gradient(135deg, #ffc93c, #ff9a3c) !important; color: #1d2a5b; }
.sel-list .sel-mine b, .sel-list .sel-mine small { color: #1d2a5b !important; }
.sel-mine-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 24px; }
.sel-list .sel-mine.on { outline: 3px solid #fff; }
.sel-design { display: grid; gap: 10px; max-height: min(46vh, 380px); overflow-y: auto; padding-right: 4px; }
.des-row small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a6a3a; margin-bottom: 5px; }
.des-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.des-sw { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.15); }
.des-sw.on { box-shadow: 0 0 0 3px #1f9ff0, 0 2px 6px rgba(0,0,0,.25); transform: scale(1.08); }
.des-ch { padding: 7px 12px; border-radius: 999px; background: #fff; border: 2px solid #eadfc8; font-weight: 700; font-size: 13px; color: #1f2a5c; }
.des-ch.on { background: #1f9ff0; border-color: #1f9ff0; color: #fff; }

/* v4.46 wardrobe: the Outfit tab on the friend screen */
.sel-outfits { display: flex; flex-direction: column; gap: 12px; }
.sel-wear-h { font-weight: 900; font-size: 14px; color: var(--ink); margin: 2px 2px 6px; }
.sel-wear-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sel-wear-g button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 3px; border-radius: 16px; background: #fff; border: 2.5px solid #eadcc2; font-weight: 800; color: var(--ink); min-width: 0; }
.sel-wear-g button img { width: 52px; height: 52px; object-fit: contain; }
.sel-wear-g button .big { font-size: 30px; line-height: 52px; }
.sel-wear-g button small { font-size: 10.5px; line-height: 1.15; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sel-wear-g button.on { border-color: #2b74ec; box-shadow: 0 0 0 3px rgba(43,116,236,.25); background: #eef5ff; }
.sel-wear-g button.locked { opacity: .5; }
.kh-item .kh-thumb { width: 64px; height: 64px; object-fit: contain; }

/* v4.47 Cozy creator (Design my own, like Coinaverse) */
.des-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; position: sticky; top: 0; z-index: 2; background: inherit; padding-bottom: 4px; }
.des-tabs button { padding: 7px 12px; border-radius: 999px; background: #fff6e4; border: 2px solid #eadfc8; font-weight: 800; font-size: 13px; color: #1f2a5c; }
.des-tabs button.on { background: #ffc93c; border-color: #ffb400; }
.des-tabs .des-dice { margin-left: auto; padding: 6px 10px; font-size: 18px; line-height: 1; }
.des-part { width: 58px; height: 58px; border-radius: 14px; background: #fff; border: 2.5px solid #eadcc2; padding: 3px; display: grid; place-items: center; }
.des-part img { width: 100%; height: 100%; object-fit: contain; }
.des-part span { font-size: 24px; }
.des-part.on { border-color: #2b74ec; box-shadow: 0 0 0 3px rgba(43,116,236,.25); background: #eef5ff; }
.des-orig { background: conic-gradient(#ee7b6c, #f6d272, #8fd3b6, #7db9e8, #b6a4e0, #ee7b6c); color: #fff; font-weight: 900; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* v4.48 coin prices in the friend creator and the Outfit tab */
.sel-coins { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 14px; background: #fff6d6; border: 2px solid #f3d27a; font-weight: 800; color: #6a4a10; margin-bottom: 8px; font-size: 14px; }
.sel-coins b { font-size: 16px; color: #3d2a00; }
.sel-coins small { font-weight: 700; color: #a07a2a; font-size: 11.5px; }
.des-part { position: relative; }
.des-price { position: absolute; right: -4px; bottom: -6px; font-style: normal; font-size: 10.5px; font-weight: 900; color: #5a3d00; background: #ffd23f; border: 2px solid #fff; border-radius: 999px; padding: 1px 5px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sel-wear-g button.price small { color: #8a5a00; font-weight: 900; }
.sel-wear-g button.try { border-color: #ffb400; box-shadow: 0 0 0 3px rgba(255,180,0,.35); background: #fff7df; }
.sel-wear-g button.try small { color: #b36b00; font-weight: 900; }

/* ── v4.51 Profile hub tidy-up: everything sits inside the card, the friend grid fits, no clipped names ── */
@media (min-width: 1101px) {
  .panel.khub { height: auto; max-height: calc(100vh - 64px); margin-top: 40px; padding: 70px 30px 28px 300px; overflow: visible; }
  .khub .kh-side { left: 26px; top: 84px; width: 248px; padding: 12px; gap: 8px; box-shadow: 0 8px 22px rgba(31,42,92,.12); }
  .khub .kh-tab { padding: 11px 14px; font-size: 19px; }
  .khub .kh-body { height: auto; max-height: calc(100vh - 170px); overflow: auto; padding: 4px 8px 8px 2px; scrollbar-width: thin; }
  .khub .kh-body[data-tab="profile"] { overflow: auto; }
  .khub .kh-profile { grid-template-columns: 310px minmax(0, 1fr); gap: 26px; }
  .khub .kh-card { margin-left: 0; padding: 10px; box-shadow: 0 8px 20px rgba(31,42,92,.14); }
  .khub .kh-art { height: clamp(250px, 40vh, 360px); }
  .khub .kh-art img { bottom: 40px; height: 90%; }
  .khub .kh-thumbs { grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 7px; }
  .khub .kh-thumbs button { border-radius: 12px; border-width: 2px; }
  .khub .kh-main { padding-right: 0; gap: 14px; }
  .khub .kh-who { grid-template-columns: auto minmax(0, 1fr) 170px; gap: 14px; }
  .khub .kh-lv { width: 84px; height: 84px; }
  .khub .kh-lv .kic { width: 84px; height: 84px; }
  .khub .kh-namebox h2 { font-size: 38px; flex-wrap: wrap; }
  .khub .kh-motto { padding: 22px 14px 12px; }
  .khub .kh-motto p { font-size: 16px; }
  .khub .kh-chips button { height: 50px; font-size: 15.5px; gap: 6px; padding: 0 8px; }
  .khub .kh-chips button .kic { flex: none; width: 20px; height: 20px; }
  .khub .kh-chips button span { overflow: visible; text-overflow: clip; white-space: nowrap; letter-spacing: -.1px; }
  .khub .kh-btn { height: 68px; font-size: 23px; }
  .khub .kh-mascot { display: none; }
}
@media (min-width: 1101px) {
  .khub .kh-namebox { min-width: 0; }
  .khub .kh-namebox h2 { flex-wrap: nowrap; white-space: nowrap; font-size: clamp(28px, 2.5vw, 38px); }
  .khub .kh-edit { flex: none; width: 38px; height: 38px; }
}
/* v4.51: friendly "coming soon" card */
.soon-card { display: grid; justify-items: center; gap: 10px; padding: 18px 10px 8px; text-align: center; }
.soon-card .soon-emo { font-size: 54px; line-height: 1; }
.soon-card b { font-family: var(--font-display); font-size: 22px; }
.soon-card p { margin: 0; max-width: 420px; color: var(--ink-2); font-weight: 600; line-height: 1.45; }
/* v4.51: the profile shows only the friend this player chose (switching friends lives in "Who's playing?") */
.khub .kh-art { height: clamp(300px, 52vh, 470px); }
.kh-friendname { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; padding: 8px 26px; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.12), 0 8px 18px rgba(31,42,92,.18); font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); white-space: nowrap; }

/* ── v4.51 Settings: one tidy card (side menu + page inside the same frame), no stickers hanging off the screen ── */
.kset-bubble, .kset-sign { display: none !important; }
@media (min-width: 861px) {
  .panel.kset { width: min(1120px, calc(100vw - 32px)); height: min(720px, calc(100vh - 70px)); margin-top: 36px; grid-template-columns: 250px minmax(0, 1fr); align-items: stretch;
    border-radius: 34px; border: 6px solid #f6e5c3; background: linear-gradient(180deg, #fffdf8, #fbf1de); box-shadow: 0 30px 70px rgba(40,30,10,.32); overflow: visible; }
  .kset-side { padding: 0; justify-content: flex-start; border-right: 2px solid #f1e2c2; background: linear-gradient(180deg, #fff9ee, #f8ecd3); border-radius: 28px 0 0 28px; }
  .kset-logo { position: absolute; top: -46px; left: 50%; transform: translateX(-50%); width: 210px; margin: 0; }
  .kset-nav { margin: 0; padding: 52px 14px 16px; border-radius: 0; background: none; box-shadow: none; gap: 6px; overflow-y: auto; }
  .kset-nav button { padding: 9px 12px; }
  .kset-nav button.on::after { display: none; }
  .kset-main { margin: 0; max-height: none; height: 100%; padding: 24px 28px 18px; border: 0; border-radius: 0 28px 28px 0; background: none; box-shadow: none; }
  .kset-x { top: -18px; right: -18px; width: 58px; height: 58px; border: 4px solid #ffe3e3; z-index: 3; }
  .kset-head { margin: 0 10px 14px 0; }
}
/* buttons inside settings rows: centred labels, no underline */
.kset-body .btn, .kset-body button.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1; min-height: 44px; }
.kset-body a.btn { text-decoration: none; }
a.k-btn, .kset-body a.k-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; line-height: 1; }
.soonpanel .soon-card.big { padding: 8px 6px 4px; }
.soon-card.big .soon-emo { font-size: 76px; filter: drop-shadow(0 8px 10px rgba(31,42,92,.18)); }
.soon-card.big b { font-size: 30px; }
.soon-badge { display: inline-block; padding: 6px 16px; border-radius: 999px; background: linear-gradient(180deg, #ffe680, #ffc21f); box-shadow: 0 3px 0 #d99a00; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #5a3400; }
.soon-card .soon-sub { font-size: 14px; color: var(--ink-2); }

/* ── v4.51 Play: web-style games page ── */
.panel.playpanel { width: min(1180px, calc(100vw - 28px)); max-height: calc(100vh - 40px); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.playpanel > .x-btn { z-index: 5; }
.pl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 84px 14px 28px; background: linear-gradient(180deg, #fff6dc, #fffdf6); border-bottom: 2px solid #f3e6c7; }
.pl-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); color: #1d2a5b; line-height: 1; }
.pl-head p { margin: 6px 0 0; font-weight: 600; color: var(--ink-2); }
.pl-jump { display: flex; gap: 8px; }
.pl-jump button { padding: 9px 16px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 rgba(31,42,92,.1); font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.pl-jump button.on { background: linear-gradient(180deg, #5aa2ff, #2f6fe6); color: #fff; box-shadow: 0 4px 0 #1f55c9; }
.playpanel > :not(.pl-head):not(.x-btn) { }
.pl-sec { padding: 18px 28px 8px; }
.playpanel { overflow-y: auto; }
.pl-sec h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 24px; color: #1d2a5b; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pl-sec h3 small { font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pl-advs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.pl-adv { position: relative; display: grid; grid-template-rows: 132px auto auto; text-align: left; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 5px 0 rgba(31,42,92,.08), 0 10px 24px rgba(31,42,92,.1); transition: transform .15s; }
.pl-adv:hover { transform: translateY(-3px); }
.pl-art { position: relative; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 55%), linear-gradient(160deg, var(--c1), var(--c2)); overflow: hidden; }
.pl-art img { position: absolute; inset: 8px 16px; width: calc(100% - 32px); height: calc(100% - 16px); object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0,0,0,.2)); }
.pl-art img + .pl-emo { display: none; }
.pl-emo { font-size: 68px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.2)); }
.pl-txt { display: grid; gap: 4px; padding: 12px 16px 4px; }
.pl-txt b { font-family: var(--font-display); font-size: 21px; color: #1d2a5b; }
.pl-txt small { font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.pl-cta { margin: 8px 16px 14px; justify-self: start; padding: 8px 18px; border-radius: 999px; background: linear-gradient(180deg, #ffe680, #ffc21f); box-shadow: 0 3px 0 #d99a00; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #5a3400; }
.pl-3d { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 8px; background: rgba(29,42,91,.78); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .5px; }
.pl-adv.soon .pl-art { filter: saturate(.55) brightness(1.02); }
.pl-adv.soon .pl-cta { background: #eef0f7; box-shadow: 0 3px 0 #d6dbea; color: #5b6488; }
.pl-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pl-chips button { padding: 7px 14px; border-radius: 999px; background: #fff; border: 2px solid #eef0f7; font-weight: 800; font-size: 14px; color: var(--ink); }
.pl-chips button.on { border-color: #5aa2ff; background: #eaf5ff; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding-bottom: 22px; }
.pl-game { display: grid; gap: 4px; text-align: left; padding: 8px 8px 10px; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.07), 0 8px 18px rgba(31,42,92,.08); transition: transform .15s; }
.pl-game[hidden] { display: none; }
.pl-game:hover { transform: translateY(-3px); }
.pl-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: 13px; overflow: hidden; background: linear-gradient(160deg, #e8f2ff, #fff3d9); display: grid; place-items: center; }
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-temo { font-size: 56px; }
.pl-tag { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 7px; background: rgba(29,42,91,.8); color: #fff; font-style: normal; font-weight: 800; font-size: 11px; }
.pl-game b { padding: 4px 4px 0; font-family: var(--font-display); font-size: 16.5px; color: #1d2a5b; line-height: 1.15; }
.pl-game small { padding: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pl-lv { display: flex; align-items: center; gap: 4px; padding: 4px 4px 0; }
.pl-lv i { width: 12px; height: 12px; border-radius: 50%; background: #e3e6f2; }
.pl-lv i.on { background: linear-gradient(180deg, #ffe680, #ffb81f); }
.pl-lv em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 12px; color: #2f6fe6; }
@media (max-width: 640px) { .pl-head { padding: 18px 64px 12px 16px; } .pl-sec { padding: 14px 16px 6px; } .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl-head { position: sticky; top: 0; z-index: 4; }

/* ── v4.51 Today's News board ── */
.panel.newspanel { width: min(1180px, calc(100vw - 28px)); max-height: calc(100vh - 40px); padding: 0; overflow-y: auto; }
.nw-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 20px 84px 14px 26px; background: linear-gradient(180deg, #fff3d0, #fffaf0); border-bottom: 2px solid #f3e3bd; }
.nw-paper { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; font-size: 38px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.1); transform: rotate(-6deg); }
.nw-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); color: #1d2a5b; line-height: 1; }
.nw-head p { margin: 5px 0 0; font-weight: 700; color: var(--ink-2); }
.nw-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "picks picks" "list side"; gap: 18px; padding: 18px 24px 24px; }
.nw-picks { grid-area: picks; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nw-pick { display: grid; gap: 4px; text-align: left; padding: 8px 8px 12px; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.07), 0 10px 22px rgba(31,42,92,.08); transition: transform .15s; }
.nw-pick:hover { transform: translateY(-3px); }
.nw-img { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #dfeeff, #fff1d6); }
.nw-img img { width: 100%; height: 100%; object-fit: cover; }
.nw-img i { position: absolute; left: 8px; top: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.94); font-style: normal; font-weight: 800; font-size: 12.5px; color: #1d2a5b; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.nw-pick b { padding: 4px 6px 0; font-family: var(--font-display); font-size: 18px; color: #1d2a5b; line-height: 1.15; }
.nw-pick small { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.nw-col { grid-area: list; min-width: 0; }
.nw-col h3, .nw-box h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 21px; color: #1d2a5b; }
.nw-list { display: grid; gap: 10px; }
.nw-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 rgba(31,42,92,.06); transition: transform .15s; }
.nw-item:hover { transform: translateX(3px); }
.nw-item img, .nw-ic { width: 112px; height: 70px; border-radius: 12px; object-fit: cover; }
.nw-ic { display: grid; place-items: center; font-size: 36px; background: linear-gradient(160deg, #eaf5ff, #fff3d9); }
.nw-t { display: grid; gap: 3px; min-width: 0; }
.nw-t b { font-family: var(--font-display); font-size: 17.5px; color: #1d2a5b; line-height: 1.15; }
.nw-t small { font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.nw-tag { justify-self: start; padding: 2px 9px; border-radius: 7px; font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: .6px; color: #fff; background: #f0569a; }
.nw-tag.t-series { background: #8b5cff; } .nw-tag.t-moved { background: #2fb37a; } .nw-tag.t-story { background: #f59e0b; } .nw-tag.t-news { background: #8a93b5; }
.nw-side { grid-area: side; display: grid; gap: 12px; align-content: start; }
.nw-box { padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 rgba(31,42,92,.06); display: grid; gap: 8px; }
.nw-box.week { background: linear-gradient(180deg, #eef6ff, #fff); } .nw-box.week b { font-family: var(--font-display); font-size: 18px; }
.nw-box .btn { justify-self: start; }
.nw-live { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; background: #e9fbef; }
.nw-live small { grid-column: 2; font-weight: 700; color: #2f7d54; font-size: 12.5px; }
.nw-dot { width: 10px; height: 10px; border-radius: 50%; background: #2fbf5f; box-shadow: 0 0 0 4px rgba(47,191,95,.25); animation: nwPulse 1.6s infinite; }
@keyframes nwPulse { 50% { box-shadow: 0 0 0 7px rgba(47,191,95,.08); } }
.nw-next { display: flex; gap: 10px; align-items: baseline; font-size: 14px; } .nw-next span { width: 62px; font-weight: 800; color: #2f6fe6; font-variant-numeric: tabular-nums; }
.nw-soon { text-align: left; padding: 8px 12px; border-radius: 12px; background: #f5f6fb; font-weight: 800; font-size: 14.5px; color: #3b4466; }
.hud .h-dock .news .kic { filter: drop-shadow(0 2px 0 rgba(0,0,0,.08)); }
@media (max-width: 900px) { .nw-wrap { grid-template-columns: 1fr; grid-template-areas: "picks" "list" "side"; } .nw-picks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nw-picks { grid-template-columns: 1fr; } .nw-item { grid-template-columns: 84px minmax(0,1fr); } .nw-item img, .nw-ic { width: 84px; height: 56px; } }

/* ── v4.51 The Kingdom Story ── */
.panel.storypanel { width: min(1140px, calc(100vw - 28px)); max-height: calc(100vh - 40px); padding: 0; overflow-y: auto; }
.st-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 84px 14px 26px; background: linear-gradient(180deg, #fff1cf, #fffaf0); border-bottom: 2px solid #f3e3bd; }
.st-book { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; font-size: 36px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.1); }
.st-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); color: #1d2a5b; line-height: 1; }
.st-head p { margin: 5px 0 0; font-weight: 700; color: var(--ink-2); }
.st-pages { margin-left: auto; display: flex; gap: 6px; }
.st-pages i { width: 34px; height: 44px; border-radius: 6px 10px 10px 6px; display: grid; place-items: center; font-style: normal; font-size: 18px; background: #f1ead9; border: 2px dashed #e0d2b0; }
.st-pages i.on { background: linear-gradient(160deg, #fff4b8, #ffd34d); border: 2px solid #e6b422; box-shadow: 0 3px 0 #c9971a; }
.st-wrap { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; padding: 18px 24px 24px; }
.st-list { display: grid; gap: 8px; align-content: start; }
.st-list button { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 16px; text-align: left; background: #fff; box-shadow: 0 3px 0 rgba(31,42,92,.06); border: 2px solid transparent; }
.st-list button.sel { border-color: var(--c); box-shadow: 0 3px 0 var(--c); }
.st-list button.locked { opacity: .55; }
.st-n { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #1d2a5b; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.st-list .done .st-n { background: #2fbf5f; color: #fff; }
.st-ct { display: grid; min-width: 0; } .st-ct small { font-size: 11.5px; font-weight: 800; color: var(--ink-2); letter-spacing: .4px; text-transform: uppercase; }
.st-ct b { font-family: var(--font-display); font-size: 16.5px; color: #1d2a5b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-main { padding: 18px 20px; border-radius: 24px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.06), 0 12px 26px rgba(31,42,92,.08); display: grid; gap: 14px; align-content: start; }
.st-hero { display: flex; gap: 16px; align-items: flex-start; padding: 14px 16px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, #fff), #fff); }
.st-hic { width: 76px; height: 76px; flex: none; display: grid; place-items: center; border-radius: 22px; font-size: 44px; background: #fff; box-shadow: 0 5px 0 rgba(31,42,92,.08); }
.st-hero small { font-weight: 800; color: var(--ink-2); font-size: 13px; } .st-hero h3 { margin: 2px 0 6px; font-family: var(--font-display); font-size: 28px; color: #1d2a5b; }
.st-hero p { margin: 0; font-weight: 600; color: #3b4466; line-height: 1.45; font-size: 15.5px; }
.st-bar { position: relative; height: 24px; border-radius: 999px; background: #eef0f7; overflow: hidden; }
.st-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #ffe680, #ffb81f); border-radius: inherit; }
.st-bar b { position: relative; display: block; text-align: center; line-height: 24px; font-size: 13px; color: #5a3400; }
.st-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: #f7f8fc; }
.st-steps li.ok { background: #eafaf0; } .st-sic { font-size: 24px; width: 32px; text-align: center; } .st-st { flex: 1; font-weight: 700; color: #26305a; }
.st-steps em { font-style: normal; font-weight: 800; color: #2f9d57; font-size: 14px; }
.st-foot { display: flex; justify-content: center; text-align: center; }
.st-reward { font-weight: 700; color: var(--ink-2); } .st-got { font-family: var(--font-display); font-size: 21px; color: #2f9d57; }
.st-claim { animation: stGlow 1.6s ease-in-out infinite; }
@keyframes stGlow { 50% { box-shadow: 0 0 0 8px rgba(255,201,60,.35); } }
.st-banner { width: 100%; display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 12px 16px; border-radius: 20px; text-align: left; background: linear-gradient(120deg, color-mix(in srgb, var(--c, #ffc93c) 35%, #fff), #fff); box-shadow: 0 4px 0 rgba(31,42,92,.08); border: 2px solid color-mix(in srgb, var(--c, #ffc93c) 60%, #fff); }
.st-bic { font-size: 40px; } .st-btx { flex: 1; display: grid; gap: 4px; } .st-btx small { font-weight: 800; color: var(--ink-2); font-size: 12.5px; } .st-btx b { font-family: var(--font-display); font-size: 21px; color: #1d2a5b; }
.st-bbar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.8); overflow: hidden; } .st-bbar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd34d, #ff9f1f); }
.st-banner em { font-style: normal; font-weight: 800; color: #2f6fe6; }
@media (max-width: 860px) { .st-wrap { grid-template-columns: 1fr; } .st-list { grid-auto-flow: column; grid-auto-columns: 200px; overflow-x: auto; } .st-pages { margin-left: 0; } }
.soon-card p b { font-size: inherit; font-family: inherit; }
/* v4.51 Kingdom Quest polish */
.bh-round { position: absolute; left: 50%; bottom: calc(104px + var(--safe-b, 0px)); transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,.85); font-family: var(--font); font-weight: 800; font-size: 13.5px; color: #3b4466; white-space: nowrap; }
.bh-rules { text-align: left; margin: 8px auto 14px; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 460px; font-family: var(--font); font-weight: 700; font-size: 16px; color: #2a3352; }
.bh-rules li { padding: 8px 12px; border-radius: 12px; background: #f6f8fd; }
.kic-art { object-fit: contain; filter: drop-shadow(0 2px 2px rgba(31,42,92,.12)); }

/* ── v4.54 scroll + frame fixes ── */
.panel.playpanel { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (min-width: 861px) {
  .panel.kset { grid-template-rows: minmax(0, 1fr); overflow: visible; }
  .panel.kset .kset-side { min-height: 0; overflow: hidden; }
  .panel.kset .kset-nav { min-height: 0; max-height: 100%; }
  .panel.kset .kset-main { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .panel.kset .kset-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 860px) {
  .panel.kset { max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
  .panel.kset .kset-main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .panel.kset .kset-body { flex: 1; min-height: 0; overflow-y: auto; }
}
.khub .kh-who { grid-template-columns: auto minmax(0, 1fr) !important; }
@media (min-width: 861px) {
  .panel.kset { margin-top: 52px; height: min(720px, calc(100vh - 84px)); }
  .panel.kset .kset-side { overflow: visible; }
  .panel.kset .kset-nav { overflow-y: auto; }
  .panel.kset .kset-main { overflow: visible; }
}

/* ── v4.54 Kingdom Market ── */
.panel.marketpanel { width: min(1180px, calc(100vw - 28px)); height: min(820px, calc(100vh - 40px)); max-height: none; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mk-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 20px 84px 10px 26px; background: linear-gradient(180deg, #ffe9f3, #fffaf4); }
.mk-title { display: flex; align-items: center; gap: 14px; }
.mk-logo { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; font-size: 36px; background: linear-gradient(180deg, #ff9dc6, #f0569a); box-shadow: 0 5px 0 #c93a7b; }
.mk-title h2 { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); color: #1d2a5b; line-height: 1; }
.mk-title p { margin: 4px 0 0; font-weight: 700; color: var(--ink-2); font-size: 14px; }
.mk-coins { padding: 8px 16px; border-radius: 999px; background: linear-gradient(180deg, #fff3c4, #ffd65c); box-shadow: 0 3px 0 #d99a00; font-family: var(--font-display); font-size: 20px; color: #5a3400; }
.mk-tabs { display: flex; gap: 8px; padding: 6px 24px 0; overflow-x: auto; scrollbar-width: none; }
.mk-tabs button { flex: none; padding: 10px 18px; border-radius: 16px 16px 0 0; background: #f3f0f8; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #3b4466; }
.mk-tabs button.on { background: #fff; color: #f0569a; box-shadow: 0 -3px 0 #f0569a inset; }
.mk-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 24px; background: #fff; border-bottom: 2px solid #f3e9f1; flex-wrap: wrap; }
.mk-count { font-weight: 800; color: var(--ink-2); font-size: 14px; }
.mk-filters { display: flex; gap: 6px; } .mk-filters button { padding: 6px 13px; border-radius: 999px; border: 2px solid #eef0f7; background: #fff; font-weight: 800; font-size: 13.5px; color: var(--ink); }
.mk-filters button.on { border-color: #f0569a; background: #ffeef6; }
.mk-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 24px; background: #fffaf6; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.mk-card { display: grid; gap: 6px; align-content: start; padding: 10px 10px 12px; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.06), 0 8px 18px rgba(31,42,92,.07); border: 2px solid transparent; }
.mk-card.wearing { border-color: #3cc46a; }
.mk-thumb { position: relative; aspect-ratio: 1; border-radius: 16px; background: radial-gradient(circle at 50% 40%, #fff, #eef3fb); display: grid; place-items: center; overflow: hidden; }
.mk-thumb img { width: 86%; height: 86%; object-fit: contain; }
.mk-free, .mk-on { position: absolute; top: 7px; padding: 2px 8px; border-radius: 8px; font-style: normal; font-weight: 800; font-size: 11px; color: #fff; }
.mk-free { left: 7px; background: #3cc46a; } .mk-on { right: 7px; background: #2f6fe6; }
.mk-card b { font-family: var(--font-display); font-size: 16px; color: #1d2a5b; line-height: 1.15; }
.mk-card small { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.mk-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.mk-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--d); border: 2px solid #fff; box-shadow: 0 0 0 1.5px #d7dce8; }
.mk-dot.on { box-shadow: 0 0 0 2.5px #1d2a5b; } .mk-dot.own::after { content: ''; display: block; width: 6px; height: 6px; margin: 5px auto; border-radius: 50%; background: #fff; }
.mk-act { margin-top: 2px; padding: 8px 10px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.mk-act.buy { background: linear-gradient(180deg, #ffe680, #ffc21f); box-shadow: 0 3px 0 #d99a00; color: #5a3400; }
.mk-act.wear { background: linear-gradient(180deg, #5aa2ff, #2f6fe6); box-shadow: 0 3px 0 #1f55c9; color: #fff; }
.mk-act.off { background: #eef0f7; color: #3b4466; box-shadow: 0 3px 0 #d6dbea; }
.mk-note { margin: 0 0 12px; font-weight: 700; color: var(--ink-2); }
.mk-empty { grid-column: 1 / -1; text-align: center; font-weight: 700; color: var(--ink-2); padding: 30px; }
.mk-karts { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 20px; border-radius: 22px; background: #fff; }
.mk-karts img { width: 220px; max-width: 100%; } .mk-karts b { font-family: var(--font-display); font-size: 26px; }
.kh-market { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 6px 0 4px; border-radius: 18px; text-align: left; background: linear-gradient(120deg, #ffe0ee, #fff4dc); box-shadow: 0 3px 0 rgba(31,42,92,.08); font-size: 26px; }
.kh-market b { font-family: var(--font-display); font-size: 19px; } .kh-market span { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--ink-2); } .kh-market em { font-style: normal; font-weight: 800; color: #f0569a; font-size: 15px; }
@media (max-width: 560px) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-head { padding: 16px 64px 8px 16px; } .mk-body, .mk-bar { padding-left: 14px; padding-right: 14px; } }

/* ── v4.54 rewards: medals and trophies ── */
.rw-h { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 22px; margin: 18px 0 10px; } .rw-h small { font-family: var(--font); font-size: 14px; color: var(--ink-2); }
.rw-medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px; }
.rw-medal { position: relative; display: grid; justify-items: center; gap: 4px; padding: 26px 8px 12px; border-radius: 20px; background: linear-gradient(180deg, #fffdf6, #fff3d6); box-shadow: 0 4px 0 rgba(160,110,20,.12); text-align: center; }
.rw-ribbon { position: absolute; top: 0; left: 50%; width: 44px; height: 30px; transform: translateX(-50%); background: linear-gradient(90deg, #3b8cff 0 33%, #ffffff 33% 66%, #e5484d 66%); clip-path: polygon(0 0, 100% 0, 80% 100%, 50% 75%, 20% 100%); }
.rw-disc { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff6c2, #ffd34d 45%, #e0a21a 75%, #b97c0c); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12), 0 0 0 5px #ffe58a, 0 6px 14px rgba(185,124,12,.35); }
.rw-disc img { width: 70px; height: 70px; object-fit: contain; border-radius: 50%; } .rw-disc i { font-style: normal; font-size: 40px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.15)); }
.rw-disc em { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 20px; }
.rw-medal b { font-family: var(--font-display); font-size: 15.5px; color: #1d2a5b; line-height: 1.15; margin-top: 4px; } .rw-medal small { font-size: 12px; font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.rw-medal.off .rw-disc { background: radial-gradient(circle at 35% 30%, #fafbfd, #dfe3ec 60%, #c4cad8); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08), 0 0 0 5px #eef0f6; filter: grayscale(.9); opacity: .75; }
.rw-medal.off .rw-ribbon { filter: grayscale(1); opacity: .5; }
.rw-medal.trophy { padding-top: 14px; background: linear-gradient(180deg, #f5f9ff, #e7f0ff); }
.rw-medal.trophy .rw-disc { border-radius: 24px; background: radial-gradient(circle at 40% 30%, #ffffff, #dbe9ff 70%); box-shadow: 0 0 0 4px #c6dcff, 0 6px 14px rgba(47,111,230,.2); }
.rw-medal.got { animation: rwShine 3s ease-in-out infinite; } @keyframes rwShine { 50% { box-shadow: 0 4px 0 rgba(160,110,20,.12), 0 0 0 3px rgba(255,201,60,.35); } }
@media (prefers-reduced-motion: reduce) { .rw-medal.got { animation: none; } }

/* ═══ v4.55 · launch polish — KDL 3D art everywhere ═══ */
.kic-art { object-fit: contain; flex: none; filter: drop-shadow(0 2px 2px rgba(29,42,91,.14)); }
.pl-head h2, .pl-sec h3 { display: flex; align-items: center; gap: 10px; }
.pl-jump button { display: inline-flex; align-items: center; gap: 6px; }
.pl-adv { grid-template-rows: auto auto auto; }
.pl-art { aspect-ratio: 16 / 9; }
.pl-art img.pl-key { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; transition: transform .35s ease; }
.pl-adv:hover .pl-key { transform: scale(1.05); }
.pl-adv.soon .pl-art { filter: none; }
.pl-adv.soon .pl-key { filter: saturate(.75) brightness(.92); }
.pl-soon { position: absolute; left: 12px; bottom: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(29,42,91,.82); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .3px; backdrop-filter: blur(4px); }
.pl-banner { position: relative; display: grid; align-items: end; border-radius: 24px; overflow: hidden; margin-bottom: 14px; min-height: 150px; box-shadow: 0 6px 0 rgba(31,42,92,.08), 0 12px 26px rgba(31,42,92,.12); }
.pl-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.pl-banner > div { position: relative; padding: 40px 22px 16px; background: linear-gradient(180deg, transparent, rgba(16,26,70,.72)); color: #fff; }
.pl-banner h3 { margin: 0; color: #fff; font-size: 28px; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pl-banner p { margin: 2px 0 0; font-weight: 700; opacity: .92; }
@media (max-width: 640px) { .pl-banner { min-height: 120px; } .pl-banner h3 { font-size: 23px; } }
.mk-logo { background: linear-gradient(180deg, #fff, #ffeef6); box-shadow: 0 4px 0 #f6c6dc, 0 8px 18px rgba(240,86,154,.18); }
.mk-logo .kic-art { width: 54px; height: 54px; }
.mk-coins { display: inline-flex; align-items: center; gap: 6px; }
.mk-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px 9px 12px; }
.mk-act { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.mk-on { display: inline-flex; align-items: center; gap: 3px; }
.mk-on .kic-art { width: 13px; height: 13px; filter: brightness(10); }
.rw-art { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.rw-art > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(120,80,10,.22)); transition: transform .25s; }
.rw-medal:hover .rw-art > img { transform: translateY(-3px) rotate(-3deg); }
.rw-art em { position: absolute; right: 2px; bottom: 2px; font-style: normal; }
.rw-medal.off .rw-art > img { filter: grayscale(.6) brightness(1.04) opacity(.72); }
.rw-art em { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(31,42,92,.18); }
.rw-medal:has(.rw-art) { padding-top: 14px; }
.rw-art.prize { width: 92px; height: 92px; }
.rw-stars, .rw-stat, .rw-h, .rw-mk { display: inline-flex; align-items: center; gap: 6px; }
.rw-h { display: flex; }
.st-book, .nw-paper { background: #fff; overflow: visible; }
.st-book .kic-art, .nw-paper .kic-art { width: 54px; height: 54px; }
.st-pages i .kic-art { width: 26px; height: 26px; }
.st-n .kic-art { width: 24px; height: 24px; }
.st-list .locked .st-n { background: #f3f0e6; }
.st-pic { width: 220px; flex: none; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 0 rgba(31,42,92,.08), 0 10px 22px rgba(31,42,92,.14); }
.st-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-got, .st-claim, .st-reward { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.st-bic { width: 96px; flex: none; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; } .st-bic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-head h3, .nw-box h3, .nw-sec h3 { display: flex; align-items: center; gap: 8px; }
.nw-ic .kic-art { width: 56px; height: 56px; }
@media (max-width: 640px) { .st-hero { flex-direction: column; } .st-pic { width: 100%; } }
.hud .h-dock .kic-art, .hud .h-tabs .kic-art { transform: scale(1.22); transform-origin: center 60%; }
.hud .h-round .kic-art, .hud .h-act .kic-art { transform: scale(1.15); }
.h-act.say .kic-art { filter: drop-shadow(0 2px 2px rgba(150,20,80,.3)); }
.kset-hic { background: linear-gradient(180deg, #fff, #fff4d6); box-shadow: 0 5px 0 #f0d89a, 0 10px 20px rgba(201,143,0,.15); }
.kset-hic .kic-art { width: 58px; height: 58px; }
.kset-nav button > span { display: grid; place-items: center; }
.kset-nav button .kic-art { width: 28px; height: 28px; }
.k-ric .kic-art { width: 28px; height: 28px; } .k-cic .kic-art { width: 40px; height: 40px; }
@media (max-width: 760px) { .kset-hic .kic-art { width: 40px; height: 40px; } }
/* v4.55 map: wide on wide screens so names never sit on each other */
.panel.mapwide { width: min(1100px, calc(100vw - 24px)); }
.kmap { width: 100%; aspect-ratio: auto; height: min(calc(100vh - 170px), 640px); min-height: 300px; }
@media (max-width: 700px) { .kmap { height: auto; aspect-ratio: 1; } }
.td-head h2, .td-card h3 { display: flex; align-items: center; justify-content: center; gap: 8px; } .td-card h3 { justify-content: flex-start; }
.soon-emo .kic-art { width: 96px; height: 96px; }
.s3-b .kic-art { width: 38px; height: 38px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.s3-b.shoot .kic-art { width: 46px; height: 46px; }
@media (max-width: 760px) { .s3-b .kic-art { width: 30px; height: 30px; } .s3-b.shoot .kic-art { width: 38px; height: 38px; } }
.rt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .rt-btn .kic-art { width: 30px; height: 30px; }
body.boardgame .hud-tl .h-profile, body.boardgame .hud-tl .place-pill, body.boardgame .hud-tl .tt-chip { display: none !important; }
body.boardgame .bh-players { top: calc(14px + var(--safe-t)); }
.tt-tabs button, .tt-stats span { display: inline-flex; align-items: center; gap: 5px; } .tt-trophy .kic-art { width: 56px; height: 56px; } .tt-safe-ic .kic-art { width: 64px; height: 64px; }
.s3-t .kic-art, .fh-book .kic-art { width: 20px; height: 20px; vertical-align: -4px; } .fh-book { display: inline-flex; align-items: center; gap: 4px; }

/* ═══ v4.56 · PHONES SIDEWAYS (landscape, short screens) ═══
   Everything was sized for tablets and laptops, so on a phone held sideways the HUD covered the
   world and panels were cut off. Here every HUD group shrinks toward its own corner (CSS `scale`,
   which doesn't fight the existing transforms), the dock becomes a slim icon column, the joystick
   moves beside it, everything stays clear of the camera notch (safe-area left/right), and panels
   are laid out at full phone size and then scaled down as a whole, so their content fits. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --ps: .8; }
}
@media (orientation: landscape) and (max-height: 420px) { :root { --ps: .72; } }
@media (orientation: landscape) and (max-height: 360px) { :root { --ps: .64; } }
@media (orientation: landscape) and (max-height: 500px) {
  .hud .hud-tl { left: calc(8px + var(--safe-l)) !important; top: calc(6px + var(--safe-t)) !important; scale: var(--ps); transform-origin: 0 0; }
  .hud .hud-tl .place-pill { display: none !important; }
  .hud .hud-tr { right: calc(8px + var(--safe-r)) !important; top: calc(6px + var(--safe-t)) !important; scale: var(--ps); transform-origin: 100% 0; }
  .hud .h-map { right: calc(8px + var(--safe-r)) !important; top: calc(var(--safe-t) + 14px + 56px * var(--ps)) !important; scale: calc(var(--ps) * .9); transform-origin: 100% 0; }
  /* dock → a slim column of icons on the far left, under the profile card */
  .hud .h-dock { left: calc(6px + var(--safe-l)) !important; top: calc(var(--safe-t) + 14px + 96px * var(--ps)) !important; bottom: auto !important; transform: none !important;
    flex-direction: column !important; gap: 3px !important; padding: 5px 4px !important; width: auto !important; height: auto !important; max-height: calc(100dvh - var(--safe-t) - 22px - 96px * var(--ps)); overflow-y: auto; scrollbar-width: none; border-radius: 18px !important; pointer-events: auto !important; background: rgba(255,255,255,.88) !important; box-shadow: 0 4px 12px rgba(31,42,92,.18) !important; }
  .hud .h-dock button { position: relative; width: 40px !important; height: 40px !important; min-height: 0 !important; padding: 0 !important; display: grid !important; place-items: center; background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 12px !important; }
  .hud .h-dock button span { display: none !important; }
  .hud .h-dock button .kic, .hud .h-dock button img { width: 30px !important; height: 30px !important; transform: none !important; }
  .hud .h-dock .dot { top: 2px !important; right: 2px !important; width: 9px !important; height: 9px !important; }
  /* joystick beside the dock, bottom-left */
  .hud .joystick { left: calc(58px + var(--safe-l)) !important; bottom: calc(8px + var(--safe-b)) !important; scale: var(--ps); transform-origin: 0 100%; }
  /* tabs: bottom centre, smaller */
  .hud .h-tabs { bottom: calc(4px + var(--safe-b)) !important; transform: translateX(-50%) scale(var(--ps)) !important; transform-origin: 50% 100% !important; }
  /* Run / Jump / Say: smaller but still big enough for thumbs */
  .hud .h-actions { right: calc(8px + var(--safe-r)) !important; bottom: calc(6px + var(--safe-b)) !important; scale: calc(var(--ps) * 1.15); transform-origin: 100% 100%; }
  /* panels: lay out at the phone's full size divided by the scale, then shrink as a whole */
  .overlay > .panel { position: fixed !important; left: 50% !important; top: 50% !important; margin: 0 !important; translate: -50% -50%; scale: var(--ps);
    max-width: calc((100vw - 16px - var(--safe-l) - var(--safe-r)) / var(--ps)) !important; max-height: calc((100dvh - 12px) / var(--ps)) !important; }
  .overlay > .panel:not(.narrow) { width: calc((100vw - 16px - var(--safe-l) - var(--safe-r)) / var(--ps)) !important; }
  .overlay > .panel.khub, .overlay > .panel.kset, .overlay > .panel.marketpanel, .overlay > .panel.playpanel, .overlay > .panel.storypanel { height: calc((100dvh - 12px) / var(--ps)) !important; }
  .overlay > .panel .kh-plaque, .overlay > .panel .kset-logo { display: none !important; }
  .toasts { scale: var(--ps); transform-origin: 50% 0; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .overlay > .panel .nw-img { aspect-ratio: 16 / 7 !important; height: auto !important; }
  .overlay > .panel .nw-img img { width: 100%; height: 100%; object-fit: cover; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .overlay > .panel.kset { align-items: stretch !important; }
  .overlay > .panel.kset .kset-side, .overlay > .panel.kset .kset-main { width: auto !important; align-self: stretch; }
  .overlay > .panel.kset .kset-main { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .overlay > .panel.khub > .x-btn, .overlay > .panel.kset .kset-x { top: 10px !important; right: 10px !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .s3-hud .fh-aim, .s3-hud .s3-joy { scale: calc(var(--ps) * 1.1); transform-origin: 0 100%; }
  .s3-hud .fh-act, .s3-hud .fh-net, .s3-hud .g-view, .s3-hud .s3-btns { scale: calc(var(--ps) * 1.1); transform-origin: 100% 100%; }
  .s3-hud .s3-quit { scale: var(--ps); transform-origin: 100% 0; }
  .rh-touch { scale: calc(var(--ps) * 1.1); transform-origin: 50% 100%; }
}

/* v4.58 QA KW-002: verse overlays readable on bright scenes (navy on an opaque card) */
.s3-msg:not(.big) { text-shadow: 0 2px 0 #1f2a5c, 0 0 2px #1f2a5c, 0 0 12px rgba(31,42,92,.85); }
.s3-msg.verse, .golf-hud .s3-msg.verse {
  color: #1d2a5b; text-shadow: none; -webkit-text-stroke: 0;
  background: rgba(255,255,255,.96); border: 3px solid #ffd45c; border-radius: 22px;
  padding: 16px 24px; box-shadow: 0 10px 30px rgba(31,42,92,.35);
  font-size: clamp(18px, 2.6vw, 26px); font-weight: 800; line-height: 1.35;
  white-space: normal; text-align: center; max-width: min(680px, calc(100vw - 40px));
}

/* v4.58 QA KW-001: Back on "Choose your friend", "Change friend" on the welcome card */
.sel-back { position: absolute; z-index: 6; top: calc(62px + var(--safe-t)); left: calc(18px + var(--safe-l)); display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 8px 20px 8px 14px; border-radius: 999px; background: #fff; color: #1d2a5b; font-weight: 800; font-size: 17px;
  border: 3px solid #ffd45c; box-shadow: 0 5px 0 #d9a92a, 0 10px 22px rgba(31,42,92,.22); cursor: pointer; }
.sel-back span { font-size: 26px; line-height: 1; margin-top: -3px; }
.sel-back:active { transform: translateY(3px); box-shadow: 0 2px 0 #d9a92a; }
@media (max-width: 900px), (max-height: 560px) and (max-width: 1000px) { .sel-back { top: calc(8px + var(--safe-t)); left: calc(10px + var(--safe-l)); min-height: 44px; padding: 6px 14px 6px 10px; font-size: 15px; } }
.wel-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.wel-btns .wel-back { min-height: 56px; padding: 12px 22px; border-radius: 999px; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.5); color: #fff; font-weight: 800; font-size: 17px; }
.wel-tx li i img { width: 34px; height: 34px; object-fit: contain; display: block; }
@media (max-width: 640px) { .wel-btns { justify-content: center; } }

/* v4.58 QA KW-004: the Market mirror — your friend in what they wear right now */
.mk-right { display: flex; align-items: center; gap: 14px; }
.mk-me { position: relative; margin: 0; width: 108px; height: 136px; border-radius: 18px; background: radial-gradient(circle at 50% 35%, #fff, #ffe6f1 75%); border: 3px solid #ffd45c; box-shadow: 0 4px 0 #e6b53a, 0 8px 18px rgba(31,42,92,.15); display: grid; place-items: center; overflow: hidden; }
.mk-me img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 30%; }
.mk-me figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0 3px; background: rgba(29,42,91,.82); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.mk-me.busy::after { content: ''; position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #ffd45c; border-top-color: transparent; animation: mkspin .8s linear infinite; }
@keyframes mkspin { to { transform: rotate(360deg); } }
.mk-me.pop { animation: mkpop .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes mkpop { 0% { transform: scale(.86); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (max-width: 560px) { .mk-me { width: 76px; height: 96px; } }

/* v4.58 (QA): captions over the theater's big screen + the note under the video player */
.cinema-cc { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 12; max-width: min(760px, calc(100vw - 32px));
  padding: 8px 18px; border-radius: 12px; background: rgba(10,14,40,.82); color: #fff; font-weight: 800; font-size: clamp(16px, 2.2vw, 22px); line-height: 1.35; text-align: center; pointer-events: none; }
.cc-note { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #eef2ff; color: #2b3a7a; font-weight: 800; }
video::cue { font-size: 1.05em; background: rgba(10,14,40,.82); }

/* v4.58 (QA adult gates): the grown-up gate before any link that leaves the app */
.gu-gate { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgba(15,22,60,.55); backdrop-filter: blur(4px); }
.gu-card { position: relative; width: min(420px, 100%); max-height: calc(100% - 16px); overflow: auto; background: #fffaf4; border-radius: 26px; padding: 26px 22px 22px; text-align: center; box-shadow: 0 20px 60px rgba(15,22,60,.4); border: 3px solid #ffd45c; color: #1d2a5b; }
.gu-card h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 28px; }
.gu-sub { margin: 0 0 8px; font-weight: 700; color: #4a5583; }
.gu-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 rgba(31,42,92,.15); font-size: 18px; font-weight: 800; color: #1d2a5b; }
.gu-card .gate-q { font-size: 26px; font-weight: 800; margin: 10px 0 4px; }
.gu-card .gate-a { min-height: 36px; font-size: 28px; font-weight: 800; letter-spacing: .1em; }
.gu-card [data-go] { display: inline-flex; margin-top: 10px; text-decoration: none; }

/* v4.58: phone landscape — the welcome card and the grown-up gate fit on one screen */
@media (orientation: landscape) and (max-height: 500px) {
  .who-wel .wel-in { width: min(800px, calc(100% - 24px - var(--safe-l) - var(--safe-r))); grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 18px; padding-block: 10px; }
  .who-wel .wel-art { max-height: calc(100vh - 40px); aspect-ratio: auto; height: calc(100vh - 40px); }
  .who-wel .wel-art img { height: 100%; object-fit: contain; }
  .wel-tx small { font-size: 11px; } .wel-tx h1 { font-size: 26px; margin: 2px 0; } .wel-who { margin: 0 0 8px; font-size: 14px; }
  .wel-tx ul { grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
  .wel-tx li { padding: 6px 10px; font-size: 12.5px; gap: 8px; border-radius: 12px; }
  .wel-tx li i img { width: 24px; height: 24px; }
  .wel-btns { gap: 8px; } .wel-btns .btn.huge { min-height: 48px; padding: 10px 22px; font-size: 18px; } .wel-btns .wel-back { min-height: 44px; padding: 8px 16px; font-size: 15px; }
  .gu-card { width: min(620px, 100%); padding: 14px 18px; }
  .gu-card h2 { font-size: 20px; margin: 0; } .gu-sub { font-size: 13px; margin-bottom: 4px; }
  .gu-step[data-q] { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; }
  .gu-step[data-q] .gate-q { grid-column: 1; margin: 0; font-size: 22px; } .gu-step[data-q] .gate-a { grid-column: 1; grid-row: 2; }
  .gu-step[data-q] .keypad { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(3, 52px); gap: 6px; margin: 4px 0; }
  .gu-card .keypad button { height: 42px; font-size: 19px; border-radius: 12px; }
}

/* ═══ v4.59 Profile redesign — friend in front of the painted Kingdomland map ═══ */
.khub .kh-profile.v2 { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 26px; align-items: start; }
.khub .kh-body[data-tab="profile"] { min-height: 0; }
.kp-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 8px 16px; border-radius: 32px;
  background: linear-gradient(180deg, #fff6dc, #ffe6a6); box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset, 0 18px 36px rgba(31,42,92,.18), 0 3px 0 #f0c25a; }
.kp-stage { position: relative; width: 100%; aspect-ratio: 3 / 3.75; border-radius: 26px; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(31,42,92,.18); background: #9fd37a; }
.kp-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.18); filter: saturate(1.08); z-index: -2; animation: kpPan 26s ease-in-out infinite alternate; }
.kp-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 100%, rgba(255,255,255,.0) 40%, rgba(255,255,255,.0) 41%),
              linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 30%, rgba(29,42,91,.05) 60%, rgba(29,42,91,.38) 100%); }
.kp-glow { position: absolute; left: 50%; bottom: 5%; width: 74%; height: 13%; transform: translateX(-50%); border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,236,170,.75) 55%, rgba(255,236,170,0)); }
.kp-friend { position: absolute; left: 50%; bottom: 7%; height: 84%; max-width: 112%; transform: translateX(-50%); object-fit: contain; z-index: 1;
  filter: drop-shadow(0 14px 14px rgba(31,42,92,.35)); animation: kpBob 3.6s ease-in-out infinite; }
.kp-sparkle { position: absolute; z-index: 2; animation: kpTw 2.4s ease-in-out infinite; } .kp-sparkle.a { top: 9%; right: 10%; } .kp-sparkle.b { top: 22%; left: 9%; animation-delay: 1.1s; }
@keyframes kpPan { from { transform: scale(1.18) translate(2%, 0); } to { transform: scale(1.18) translate(-2%, -1%); } }
@keyframes kpBob { 50% { transform: translateX(-50%) translateY(-6px); } }
@keyframes kpTw { 50% { opacity: .35; transform: scale(.7) rotate(20deg); } }
.kp-plate { position: relative; z-index: 3; margin-top: -26px; min-width: 64%; padding: 8px 26px 9px; border-radius: 20px; text-align: center; background: #fff;
  box-shadow: 0 5px 0 rgba(31,42,92,.1), 0 10px 22px rgba(31,42,92,.16); border-bottom: 4px solid var(--fc); }
.kp-plate small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #8a91b4; }
.kp-plate b { display: block; font-family: var(--font-display); font-size: 28px; line-height: 1.05; color: #1d2a5b; }
.kp-change { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,.75);
  font-weight: 800; font-size: 15px; color: #2b4aa8; box-shadow: 0 3px 0 rgba(31,42,92,.08); }
.kp-change:hover { background: #fff; }
.kp-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kp-who { display: flex; align-items: center; gap: 18px; }
.kp-lv { position: relative; flex: none; width: 96px; height: 96px; filter: drop-shadow(0 8px 10px rgba(240,160,0,.35)); animation: kpBob2 4s ease-in-out infinite; }
.kp-lv .kic { width: 96px !important; height: 96px !important; }
.kp-lv span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 12px; font-family: var(--font-display); font-size: 34px; line-height: .9; color: #fff; text-shadow: 0 2px 0 #c77a00, 0 0 10px rgba(160,90,0,.4); }
.kp-lv small { font-size: 10px; letter-spacing: .14em; font-family: var(--font); font-weight: 900; }
@keyframes kpBob2 { 50% { transform: rotate(-6deg) scale(1.03); } }
.kp-name { min-width: 0; flex: 1; }
.kp-name h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: clamp(30px, 3vw, 44px); line-height: 1.05; color: #1d2a5b; white-space: nowrap; }
.kp-as { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #eef4ff; color: #4a5583; font-weight: 700; font-size: 15px; }
.kp-as b { color: #2b4aa8; }
.kp-xp { margin-top: 12px; height: 16px; border-radius: 999px; background: #e9ecf7; overflow: hidden; box-shadow: inset 0 2px 3px rgba(31,42,92,.12); max-width: 440px; }
.kp-xp i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd34d, #ffae00); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), inset 0 3px 0 rgba(255,255,255,.45); }
.kp-xpt { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; font-weight: 700; color: #6a7299; } .kp-xpt b { color: #1d2a5b; }
.kp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.khub .kp-stat { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 0; border: 0; border-radius: 18px; background: #fff; text-align: left;
  box-shadow: 0 3px 0 rgba(31,42,92,.05), 0 8px 18px rgba(31,42,92,.07); }
.khub .kp-stat > .kic { flex: none; width: 40px !important; height: 40px !important; }
.khub .kp-stat > span { display: flex; flex-direction: column; min-width: 0; }
.kp-stat b { font-family: var(--font-display); font-size: 24px; line-height: 1; color: #1d2a5b; font-variant-numeric: tabular-nums; } .kp-stat b em { font-style: normal; font-size: 14px; color: #8a91b4; }
.kp-stat small { margin-top: 3px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a91b4; }
.khub .kp-stat.s1 { background: linear-gradient(180deg, #fffaf0, #fff0c8); } .khub .kp-stat.s2 { background: linear-gradient(180deg, #fffbea, #ffefc2); } .khub .kp-stat.s3 { background: linear-gradient(180deg, #f6f2ff, #e9e0ff); }
.khub .kp-names { padding: 16px 18px 14px; border-radius: 24px; background: #fff; box-shadow: 0 4px 0 rgba(31,42,92,.05), 0 10px 22px rgba(31,42,92,.07); }
.kp-names header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kp-names header b { flex: 1; font-family: var(--font-display); font-size: 22px; color: #1d2a5b; }
.kp-random { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fff0f6; color: #d23d82; font-weight: 800; font-size: 14.5px; box-shadow: 0 3px 0 #f6c2da; }
.kp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.kp-chips button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; height: 46px; padding: 0 10px; border-radius: 999px; background: #f6f7fc; border: 2px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #1d2a5b; transition: transform .15s, background .15s; text-align: left; }
.kp-chips button .kic { flex: none; width: 24px !important; height: 24px !important; }
.kp-chips button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-chips button:hover { transform: translateY(-2px); background: #eef2fb; }
.kp-chips button.on { background: linear-gradient(180deg, #eaf4ff, #d8eaff); border-color: #5aa2ff; box-shadow: 0 4px 0 #a9cbff; }
.kp-tick { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: #2f6fe6; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff; }
.kp-tick .kic { width: 14px !important; height: 14px !important; filter: brightness(0) invert(1); }
.kp-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kp-btn { display: flex; align-items: center; gap: 12px; padding: 12px 20px; min-height: 66px; border-radius: 22px; color: #fff; text-align: left; transition: transform .15s; }
.kp-btn:hover { transform: translateY(-2px); } .kp-btn:active { transform: translateY(3px); }
.kp-btn .kic { flex: none; width: 40px !important; height: 40px !important; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
.kp-btn b { display: block; font-family: var(--font-display); font-size: 21px; line-height: 1.1; } .kp-btn small { display: block; font-size: 13px; font-weight: 700; opacity: .9; }
.kp-btn.pink { background: linear-gradient(135deg, #ff8fbf, #f0569a); box-shadow: 0 6px 0 #c93a7b, 0 12px 22px rgba(240,86,154,.3); }
.kp-btn.blue { background: linear-gradient(135deg, #63a8ff, #2f6fe6); box-shadow: 0 6px 0 #1f55c9, 0 12px 22px rgba(47,111,230,.3); }
@media (max-width: 900px) { .khub .kh-profile.v2 { grid-template-columns: 1fr; } .kp-card { max-width: 340px; margin: 0 auto; } }
@media (orientation: landscape) and (max-height: 500px) {
  .khub .kh-profile.v2 { grid-template-columns: 230px minmax(0, 1fr); gap: 16px; }
  .kp-stage { aspect-ratio: 3 / 3.4; } .kp-plate b { font-size: 22px; } .kp-change { margin-top: 8px; font-size: 13px; padding: 6px 12px; }
  .kp-main { gap: 10px; } .kp-lv, .kp-lv .kic { width: 70px !important; height: 70px !important; } .kp-lv span { font-size: 26px; }
  .kp-stat { padding: 8px 10px; } .kp-stat b { font-size: 20px; } .kp-chips button { height: 42px; font-size: 14px; } .kp-btn { min-height: 54px; } .kp-btn b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .kp-map, .kp-friend, .kp-lv, .kp-sparkle { animation: none; } }

/* ═══ v4.59 Kingdom Market — a real shop page with a fitting room ═══ */
.panel.marketpanel.ms { width: min(1320px, calc(100vw - 24px)); height: min(860px, calc(100vh - 32px)); background: #fbf8ff; }
.ms-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); }
.fr-side { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 18px; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  background: linear-gradient(180deg, #fff1f7 0%, #f6efff 55%, #eef4ff 100%); border-right: 1px solid #efe7f6; }
.fr-side h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 24px; color: #1d2a5b; }
.fr-stage { position: relative; aspect-ratio: 420 / 540; border-radius: 26px; overflow: hidden; touch-action: none; cursor: grab;
  background: radial-gradient(70% 55% at 50% 38%, #fff 0%, #ffeef6 55%, #f3dcff 100%); box-shadow: inset 0 0 0 3px #fff, 0 10px 24px rgba(120,60,140,.16); }
.fr-stage::before { content: ''; position: absolute; inset: 10px 10px auto; height: 46%; border-radius: 18px 18px 50% 50% / 18px 18px 22px 22px;   /* a soft mirror arch */
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); pointer-events: none; }
.fr-stage:active { cursor: grabbing; }
.fr-spot { position: absolute; left: 50%; bottom: 5%; width: 70%; height: 10%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240,86,154,.32), rgba(240,86,154,0)); }
.fr-cv { position: absolute; inset: 0; } .fr-cv canvas { width: 100% !important; height: 100% !important; display: block; }
.fr-stage.pop .fr-cv { animation: mkpop .5s cubic-bezier(.3,1.6,.5,1); }
.fr-busy { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #f0569a; border-top-color: transparent; opacity: 0; animation: mkspin .8s linear infinite; }
.fr-stage.busy .fr-busy { opacity: 1; }
.fr-turn { position: absolute; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(31,42,92,.12), 0 6px 14px rgba(31,42,92,.14); }
.fr-turn.l { left: 12px; } .fr-turn.r { right: 12px; } .fr-turn.r .kic { transform: scaleX(-1); }
.fr-drag { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: rgba(29,42,91,.7); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; pointer-events: none; }
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fr-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 16px; background: #fff; box-shadow: 0 2px 0 rgba(31,42,92,.05); border: 2px solid transparent; }
.fr-list li.tr { border-color: #ffb3d4; background: #fff7fb; }
.fr-ic { width: 46px; height: 46px; border-radius: 12px; background: #f5f2fb; display: grid; place-items: center; overflow: hidden; } .fr-ic img { width: 88%; height: 88%; object-fit: contain; }
.fr-tx small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9aa0bf; }
.fr-tx b { display: block; font-family: var(--font-display); font-size: 15.5px; color: #1d2a5b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-st em { font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; }
.fr-st em.on { background: #e6f7ea; color: #20894a; } .fr-st em.mine { background: #eaf2ff; color: #2b5fd6; } .fr-st em.cost { background: #fff3c4; color: #7a4a00; }
.fr-x { width: 28px; height: 28px; border-radius: 50%; background: #f2f0f7; display: grid; place-items: center; }
.fr-act { display: grid; gap: 8px; margin-top: auto; }
.fr-buy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border-radius: 18px; font-family: var(--font-display); font-size: 19px; font-weight: 700;
  background: linear-gradient(180deg, #ffe680, #ffc21f); color: #5a3400; box-shadow: 0 5px 0 #d99a00, 0 10px 20px rgba(255,170,0,.3); }
.fr-buy.wear { background: linear-gradient(180deg, #63a8ff, #2f6fe6); color: #fff; box-shadow: 0 5px 0 #1f55c9, 0 10px 20px rgba(47,111,230,.3); }
.fr-buy:disabled { filter: grayscale(.6); opacity: .7; }
.fr-need { margin: 0; font-size: 13px; font-weight: 700; color: #b04a1a; text-align: center; }
.fr-hint { margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.7); font-weight: 700; font-size: 14px; color: #4a5583; }
.fr-reset { justify-self: center; font-weight: 800; font-size: 14px; color: #6a7299; text-decoration: underline; text-underline-offset: 3px; }
.ms-store { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ms-head { display: flex; align-items: center; gap: 14px; padding: 18px 86px 8px 22px; }
.ms-title { flex: 1; min-width: 0; } .ms-title h2 { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 36px); color: #1d2a5b; line-height: 1; }
.ms-title p { margin: 5px 0 0; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.ms-search { margin: 6px 22px 10px; display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 48px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px #ece6f5, 0 3px 10px rgba(31,42,92,.05); }
.ms-search:focus-within { box-shadow: inset 0 0 0 2px #f0569a, 0 3px 12px rgba(240,86,154,.15); }
.ms-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 700 16px var(--font); color: #1d2a5b; }
.ms .mk-tabs { padding: 0 22px; gap: 8px; }
.ms .mk-tabs button { border-radius: 999px; padding: 8px 16px 8px 10px; background: #fff; box-shadow: inset 0 0 0 2px #ece6f5; }
.ms .mk-tabs button.on { background: linear-gradient(180deg, #ff8fbf, #f0569a); color: #fff; box-shadow: 0 4px 0 #c93a7b; }
.ms .mk-bar { padding: 10px 22px; background: none; border: 0; flex-wrap: wrap; }
.ms .mk-filters { flex-wrap: wrap; } .ms-sep { width: 1px; height: 22px; background: #e3dcef; margin: 0 4px; align-self: center; }
.ms .mk-body { padding: 4px 22px 24px; background: none; }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.ms-card { position: relative; display: grid; gap: 7px; align-content: start; padding: 10px 10px 12px; border-radius: 22px; background: #fff;
  box-shadow: 0 2px 0 rgba(31,42,92,.04), 0 8px 20px rgba(31,42,92,.07); border: 2px solid transparent; transition: transform .15s, box-shadow .15s; }
.ms-card:hover { transform: translateY(-3px); box-shadow: 0 4px 0 rgba(31,42,92,.05), 0 14px 26px rgba(31,42,92,.12); }
.ms-card.wearing { border-color: #3cc46a; } .ms-card.trying { border-color: #f0569a; box-shadow: 0 0 0 4px #ffe0ee, 0 10px 24px rgba(240,86,154,.18); }
.ms-thumb { position: relative; aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #fff 0%, #f4f0fb 70%, #ebe4f7 100%); }
.ms-thumb img { width: 84%; height: 84%; object-fit: contain; transition: transform .2s; }
.ms-card:hover .ms-thumb img { transform: scale(1.06) rotate(-2deg); }
.ms-tryhint { position: absolute; left: 50%; bottom: 8px; transform: translate(-50%, 6px); opacity: 0; transition: .15s; padding: 4px 12px; border-radius: 999px; background: rgba(29,42,91,.78); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ms-card:hover .ms-tryhint, .ms-card.trying .ms-tryhint { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .ms-tryhint { opacity: 1; transform: translate(-50%, 0); background: rgba(29,42,91,.55); } }
.ms-flag { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 8px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; }
.ms-flag.on { background: #2fae5c; } .ms-flag.try { background: #f0569a; } .ms-flag .kic { filter: brightness(10); }
.ms-info { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ms-info b { font-family: var(--font-display); font-size: 16px; color: #1d2a5b; line-height: 1.15; min-width: 0; }
.ms-price { flex: none; display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #7a4a00; }
.ms-price.free { padding: 2px 8px; border-radius: 8px; background: #e6f7ea; color: #20894a; font-size: 12.5px; } .ms-price.own { font-size: 12.5px; color: #2b5fd6; }
.ms-tag { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
@media (max-width: 820px) { .ms-wrap { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .fr-side { flex-direction: row; flex-wrap: wrap; align-items: flex-start; border-right: 0; border-bottom: 1px solid #efe7f6; max-height: 42vh; }
  .fr-side h3 { width: 100%; } .fr-stage { width: 150px; flex: none; } .fr-list { flex: 1; min-width: 180px; } .fr-act { width: 100%; } .fr-drag { display: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  .ms-wrap { grid-template-columns: 220px minmax(0, 1fr); } .fr-side { padding: 12px; gap: 8px; } .fr-side h3 { font-size: 18px; }
  .fr-list li { grid-template-columns: 34px minmax(0, 1fr) auto auto; padding: 4px 8px 4px 4px; } .fr-ic { width: 34px; height: 34px; }
  .fr-buy { min-height: 44px; font-size: 16px; } .ms-head { padding: 12px 70px 4px 16px; } .ms-search { height: 40px; margin: 4px 16px 6px; }
  .ms .mk-tabs, .ms .mk-bar, .ms .mk-body { padding-left: 16px; padding-right: 16px; } .ms-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ═══ v4.60 brand block: the Kingdomland logo lives at the top of the sidebar (no more floating plaque) ═══ */
.k-brand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 12px 10px; margin-bottom: 8px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #fffaf0 0%, #ffeccc 55%, #ffd9e8 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 6px 16px rgba(217,140,60,.16); }
.k-brand::before, .k-brand::after { content: '✦'; position: absolute; color: #ffc34d; font-size: 14px; opacity: .8; }
.k-brand::before { top: 8px; left: 12px; } .k-brand::after { bottom: 10px; right: 14px; font-size: 10px; color: #ff8fbf; }
.k-brand img { width: 100%; max-width: 190px; height: auto; filter: drop-shadow(0 3px 0 rgba(150,80,20,.22)) drop-shadow(0 8px 10px rgba(150,80,20,.18)); }
.k-brand small { font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: #b77a3e; }
/* settings */
.panel.kset .kset-logo { display: none; }
.kset-side > .k-brand { margin: 16px 14px 0; }
@media (min-width: 1101px) { .kset-nav { padding-top: 12px !important; } .panel.kset { margin-top: 20px !important; height: min(720px, calc(100vh - 44px)) !important; } }
/* profile hub */
.khub .kh-plaque { display: none !important; }
@media (min-width: 1101px) {
  .panel.khub { padding-top: 28px !important; margin-top: 16px !important; max-height: calc(100vh - 36px) !important; }
  .khub .kh-side { top: 26px !important; }
  .khub .kh-body { max-height: calc(100vh - 100px) !important; }
}
@media (max-width: 1100px) { .kh-side > .k-brand { display: none; } .panel.khub { padding-top: 22px !important; } }
@media (orientation: landscape) and (max-height: 500px) { .k-brand { display: none !important; } }

/* ═══════════ v4.60 PREMIUM PANELS — one look for News, This Week, Today, Map, Backpack, Quests ═══════════ */
.panel.pp { background: linear-gradient(180deg, #fffdf8 0%, #fff8ee 100%); }
.pp-hero { position: relative; isolation: isolate; display: flex; align-items: center; gap: 18px; padding: 22px 96px 22px 24px; margin: 0 0 16px; border-radius: 26px; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, #2c3f9f 0%, #5b4bd6 55%, #b452d6 100%); box-shadow: 0 14px 30px rgba(44,63,159,.22); }
.pp-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('../assets/kdl/world/kingdomland-map-md.webp') 60% 45% / cover; opacity: .28; mix-blend-mode: soft-light; }
.pp-hero::after { content: ''; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(255,255,255,.28), rgba(255,255,255,0)); }
.pp-hic { flex: none; width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.12); backdrop-filter: blur(6px); }
.pp-hic .kic { width: 64px !important; height: 64px !important; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.pp-ht { min-width: 0; }
.pp-eyebrow { display: block; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; opacity: .86; }
.pp-ht h2 { margin: 2px 0 4px; font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.02; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.18); }
.pp-ht p { margin: 0; font-weight: 700; font-size: 15px; opacity: .92; max-width: 60ch; }
.td2-hero { background: linear-gradient(120deg, #ff8a3d 0%, #ff5f8f 60%, #c34fd8 100%); box-shadow: 0 14px 30px rgba(255,95,143,.25); }
.nw2-hero { background: linear-gradient(120deg, #1f6fe0 0%, #3b52c9 50%, #7a4bd6 100%); }
.map2-hero { background: linear-gradient(120deg, #1d9a6c 0%, #2fb37e 45%, #2a8fd6 100%); box-shadow: 0 14px 30px rgba(29,154,108,.25); }
.newspanel .pp-hero, .mappanel .pp-hero { margin: 16px 16px 0; }
.pp-card { position: relative; padding: 18px 18px 16px; margin-bottom: 14px; border-radius: 24px; background: #fff; box-shadow: 0 2px 0 rgba(31,42,92,.04), 0 12px 28px rgba(31,42,92,.08); }
.pp-sh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pp-sh > div { flex: 1; min-width: 0; } .pp-sh b { display: block; font-family: var(--font-display); font-size: 22px; color: #1d2a5b; line-height: 1.1; } .pp-sh small { font-size: 13.5px; font-weight: 700; color: #7a81a3; }
.pp-shi { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(180deg, #fff7e6, #ffe9c2); box-shadow: inset 0 0 0 2px #fff; }
.pp-shi .kic { width: 36px !important; height: 36px !important; }
.pp-pill { flex: none; font-style: normal; padding: 6px 12px; border-radius: 999px; background: #f1f3fb; color: #3d4a85; font-size: 13px; font-weight: 800; }
.pp-bar { display: block; height: 10px; border-radius: 999px; background: #eceff8; overflow: hidden; box-shadow: inset 0 1px 2px rgba(31,42,92,.1); }
.pp-bar i { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, #3cc46a, #22c3a6); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); }
.pp-go { flex: none; min-width: 72px; height: 44px; padding: 0 20px; border-radius: 999px; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #5a3400;
  background: linear-gradient(180deg, #ffe680, #ffc21f); box-shadow: 0 4px 0 #d99a00, 0 8px 16px rgba(255,170,0,.25); }
.pp-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #d99a00; }
.pp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 18px; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.pp-cta.gold { color: #5a3400; background: linear-gradient(180deg, #ffe680, #ffc21f); box-shadow: 0 5px 0 #d99a00, 0 12px 22px rgba(255,170,0,.3); }
.pp-cta.off { color: #8a91b4; background: #f0f1f7; box-shadow: inset 0 0 0 2px #e3e6f1; }
.pp-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-weight: 800; font-size: 15px; } .pp-note.ok { color: #1f8a4c; }
.pp-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pp-link { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 22px; text-align: left; background: linear-gradient(120deg, #f2f0ff, #fff1f7); box-shadow: inset 0 0 0 2px #fff, 0 8px 18px rgba(31,42,92,.07); transition: transform .15s; }
.pp-link:hover { transform: translateY(-2px); }
.pp-link > span { flex: none; width: 56px; height: 56px; border-radius: 18px; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(31,42,92,.08); }
.pp-link div { flex: 1; min-width: 0; } .pp-link b { display: block; font-family: var(--font-display); font-size: 18px; color: #1d2a5b; } .pp-link small { font-size: 13px; font-weight: 700; color: #7a81a3; }
.pp-link > i { font-style: normal; font-size: 28px; color: #9aa0c0; }
/* Today */
.panel.todaypanel.pp { width: min(1080px, calc(100vw - 24px)); }
.td2-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.td2-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border-radius: 20px; background: linear-gradient(180deg, #f8f9ff, #eef1fb); }
.td2-day small { font-size: 12px; font-weight: 800; color: #8a91b4; letter-spacing: .04em; }
.td2-art { height: 52px; display: grid; place-items: center; } .td2-art .kic { filter: drop-shadow(0 4px 6px rgba(160,110,0,.25)); }
.td2-day b { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-size: 19px; color: #5a3400; }
.td2-day em { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-size: 12px; font-weight: 800; color: #6a7299; }
.td2-day.now { background: linear-gradient(180deg, #fff9e8, #ffeab0); box-shadow: 0 0 0 3px #ffc21f, 0 10px 22px rgba(255,170,0,.3); animation: td2glow 2.2s ease-in-out infinite; }
@keyframes td2glow { 50% { box-shadow: 0 0 0 3px #ffc21f, 0 10px 30px rgba(255,170,0,.5); } }
.td2-day.got { background: #f4fbf6; } .td2-day.got .td2-art, .td2-day.got b { opacity: .55; }
.td2-day.big { background: linear-gradient(180deg, #fff3c4, #ffd65c); } .td2-day.big b { color: #7a4100; }
.td2-tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: #2fae5c; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.td2-tick .kic { width: 13px !important; height: 13px !important; filter: brightness(10); }
.todaypanel.pp .td-open { width: 100%; margin-top: 14px; }
.td2-ms { display: grid; gap: 10px; }
.td2-m { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 20px; background: #f7f8fd; }
.td2-m.done { background: #eefaf2; }
.td2-mic { flex: none; width: 54px; height: 54px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(31,42,92,.08); }
.td2-mt { flex: 1; min-width: 0; display: grid; gap: 8px; } .td2-mt b { font-family: var(--font-display); font-size: 18px; color: #1d2a5b; }
.td2-mn { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #4a5583; min-width: 40px; text-align: right; }
.td2-ok { flex: none; padding: 8px 16px; border-radius: 999px; background: #2fae5c; color: #fff; font-weight: 800; }
.td2-chest { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 20px; background: linear-gradient(120deg, #fff4dc, #ffe8f1); border: 2px dashed #f3c78a; }
.td2-chest.ready { border-style: solid; border-color: #ffc21f; box-shadow: 0 0 0 4px #fff3c4; }
.td2-chesti { flex: none; width: 60px; height: 60px; border-radius: 18px; background: #fff; display: grid; place-items: center; }
.td2-chest > div { flex: 1; min-width: 160px; } .td2-chest b { display: block; font-family: var(--font-display); font-size: 18px; color: #1d2a5b; } .td2-chest small { font-weight: 700; color: #7a81a3; font-size: 13px; }
.td2-prize { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: #fff; font-family: var(--font-display); font-weight: 700; color: #5a3400; }
/* This Week */
.wk2 .wk-hero { min-height: 170px; padding: 22px 90px 20px 24px; }
.wk2 .wk-tag { display: inline-flex; align-items: center; gap: 6px; }
.wk2 .wk-idea { display: inline-flex; align-items: center; gap: 8px; }
.wk2 .wk-verse { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 18px; border-radius: 22px; background: linear-gradient(120deg, #fffbea, #fff1d1); box-shadow: inset 0 0 0 2px #ffe3a1; }
.wk2 .wk-say { flex: none; width: 54px; height: 54px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(200,140,0,.18); }
.wk2 .wk-verse small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .14em; color: #b07a1e; margin-bottom: 2px; }
.wk2 .wk-verse > span:last-child { font-family: var(--font-display); font-size: 19px; color: #3a2c00; line-height: 1.3; } .wk2 .wk-verse i { display: block; font-style: normal; font-family: var(--font); font-size: 14px; font-weight: 800; color: #8a5bd0; margin-top: 2px; }
.wk-ring2 { position: relative; flex: none; width: 74px; height: 74px; } .wk-ring2 svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wk-ring2 circle { fill: none; stroke: #eceff8; stroke-width: 7; } .wk-ring2 circle.v { stroke: url(#none); stroke: #3cc46a; stroke-linecap: round; transition: stroke-dasharray .6s; }
.wk-ring2 b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; color: #1d2a5b; } .wk-ring2 b small { font-size: 13px; color: #8a91b4; }
.wk2 .wk-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.wk2 .wk-item { padding: 12px 14px 12px 12px; border-radius: 20px; box-shadow: 0 2px 0 rgba(31,42,92,.04), 0 10px 22px rgba(31,42,92,.08); }
.wk2 .wk-ic { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(180deg, #f4f2ff, #ebe6ff); font-size: 0; }
.wk2 .wk-tx small { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .14em; color: #a0a6c4; } .wk2 .wk-tx b { display: block; font-family: var(--font-display); font-size: 18px; color: #1d2a5b; }
.wk2 .wk-tx em { display: block; font-style: normal; font-size: 13px; font-weight: 700; color: #7a81a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk2 .wk-st { flex: none; padding: 7px 14px; border-radius: 999px; background: linear-gradient(180deg, #ffe680, #ffc21f); color: #5a3400; font-weight: 800; box-shadow: 0 3px 0 #d99a00; }
.wk2 .wk-item.done .wk-st { background: #2fae5c; box-shadow: 0 3px 0 #1f8a4c; } .wk2 .wk-item.done .wk-st .kic { filter: brightness(10); }
.wk2 .wk-item.done .wk-ic { background: #e6f7ea; }
.wk2 .wk-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wk2 .wk-grown { display: inline-flex; align-items: center; gap: 6px; }
/* News */
.newspanel.pp .nw-pick { padding: 0 0 14px; overflow: hidden; border-radius: 24px; }
.newspanel.pp .nw-img { border-radius: 24px 24px 0 0; aspect-ratio: 16 / 9.5; }
.newspanel.pp .nw-img i { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.88); backdrop-filter: blur(6px); }
.newspanel.pp .nw-pick b, .newspanel.pp .nw-pick small { padding: 0 16px; }
.newspanel.pp .nw-item { border-radius: 22px; box-shadow: 0 2px 0 rgba(31,42,92,.04), 0 10px 22px rgba(31,42,92,.07); }
.newspanel.pp .nw-item img { border-radius: 16px; }
.newspanel.pp .nw-box { border-radius: 22px; box-shadow: 0 2px 0 rgba(31,42,92,.04), 0 10px 22px rgba(31,42,92,.07); }
.newspanel.pp .nw-live b, .newspanel.pp .nw-next b, .newspanel.pp .nw-soon { display: inline-flex; align-items: center; gap: 6px; }
/* Map */
.panel.mappanel { width: min(1240px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0 0 16px; overflow-y: auto; }
.kmap2 { position: relative; margin: 14px auto 0; width: min(calc(100% - 32px), calc((100vh - 300px) * 1.5)); min-width: 280px; aspect-ratio: 3 / 2; border-radius: 26px; overflow: hidden;
  box-shadow: inset 0 0 0 4px #fff, 0 14px 30px rgba(31,42,92,.18); }
.kmap2 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.kmap2-sq { position: absolute; left: 50%; top: 51%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.86); font-weight: 800; font-size: 12px; color: #6a5a3a; pointer-events: none; }
.kp2 { position: absolute; transform: translate(-50%, -88%); display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 2; animation: kp2bob 3s ease-in-out infinite; }
.kp2:nth-child(3n) { animation-delay: -1s; } .kp2:nth-child(3n+1) { animation-delay: -2s; }
@keyframes kp2bob { 50% { transform: translate(-50%, calc(-88% - 4px)); } }
.kp2 > i { position: relative; width: 46px; height: 46px; border-radius: 50% 50% 50% 8px; transform: rotate(-45deg); display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 3px var(--c), 0 6px 14px rgba(31,42,92,.3); transition: transform .15s; }
.kp2 > i > .kic { transform: rotate(45deg); width: 30px !important; height: 30px !important; }
.kp2 > span { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.95); color: #1d2a5b; font-family: var(--font-display); font-weight: 700; font-size: 13px; white-space: nowrap; box-shadow: 0 3px 8px rgba(31,42,92,.18); border-bottom: 3px solid var(--c); }
.kp2:hover { z-index: 5; } .kp2:hover > i { transform: rotate(-45deg) scale(1.12); }
.kp2.land > i { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c), 0 6px 14px rgba(31,42,92,.3); }
.kp2.locked { filter: grayscale(.8); opacity: .8; }
.kp2 .klock { position: absolute; right: -8px; bottom: -8px; transform: rotate(45deg); }
.kp2.you > i { box-shadow: 0 0 0 3px var(--c), 0 0 0 9px rgba(255,255,255,.7), 0 6px 14px rgba(31,42,92,.3); animation: kp2you 1.6s ease-out infinite; }
@keyframes kp2you { 50% { box-shadow: 0 0 0 3px var(--c), 0 0 0 14px rgba(255,255,255,.25), 0 6px 14px rgba(31,42,92,.3); } }
.kp2 > s { text-decoration: none; padding: 2px 8px; border-radius: 999px; background: #f0569a; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.mappanel .kmap2-list { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 16px 0; max-height: none; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .kp2 > i { width: 34px; height: 34px; } .kp2 > i > .kic { width: 22px !important; height: 22px !important; }
  .kp2 > span { font-size: 10px; padding: 2px 6px; } .kmap2-sq { display: none; }
  .kmap2 { width: min(calc(100% - 20px), calc((100vh - 150px) * 1.5)); }
}
/* Backpack + Quests (profile hub) */
.bp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; padding: 16px 18px; border-radius: 24px;
  background: linear-gradient(120deg, #fff4dc, #ffe8f1 60%, #efe8ff); box-shadow: inset 0 0 0 2px #fff; }
.bp-head h3 { margin: 0 !important; display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 30px; color: #1d2a5b; }
.bp-head p { margin: 4px 0 0; font-weight: 700; font-size: 14px; color: #7a6f8f; }
.bp-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.bp-stats span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 16px; background: #fff; box-shadow: 0 3px 10px rgba(31,42,92,.08); }
.bp-stats b { font-family: var(--font-display); font-size: 20px; color: #1d2a5b; } .bp-stats small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #8a91b4; }
.bp-sh { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-family: var(--font-display); font-size: 21px; color: #1d2a5b; }
.bp-sh small { font-family: var(--font); font-size: 13px; font-weight: 700; color: #8a91b4; }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bp-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 10px 12px; border-radius: 22px; background: #fff; text-align: center;
  box-shadow: 0 2px 0 rgba(31,42,92,.04), 0 10px 22px rgba(31,42,92,.07); border: 2px solid transparent; transition: transform .15s; }
button.bp-item:hover { transform: translateY(-3px); }
.bp-item.on { border-color: #3cc46a; box-shadow: 0 0 0 4px #e6f7ea, 0 10px 22px rgba(60,196,106,.18); }
.bp-art { position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #fff 0%, #f4f0fb 70%, #ebe4f7 100%); }
.bp-art img { width: 78%; height: 78%; object-fit: contain; } .bp-art .kh-emo { font-size: 56px; }
.bp-item b { font-family: var(--font-display); font-size: 16px; color: #1d2a5b; line-height: 1.15; } .bp-item small { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: #7a81a3; }
.bp-on { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 8px; background: #2fae5c; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; }
.bp-on .kic { filter: brightness(10); }
.bp-item.locked .bp-art img, .bp-item.locked .bp-art .kh-emo { filter: grayscale(1) brightness(1.1); opacity: .45; }
.bp-lock { position: absolute; inset: auto auto 8px 8px; width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(31,42,92,.15); }
.bp-meter { display: block; width: 86%; height: 6px; margin-top: 4px; border-radius: 999px; background: #eceff8; overflow: hidden; } .bp-meter i { display: block; height: 100%; background: linear-gradient(90deg, #ffd34d, #ffae00); }
.bp-item.badge.got .bp-art { background: radial-gradient(circle at 50% 38%, #fffbe6 0%, #ffefc2 80%); }
.khub .bp-market { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; padding: 12px 18px; border-radius: 22px; background: linear-gradient(120deg, #ffe0ee, #fff1d6); box-shadow: inset 0 0 0 2px #fff, 0 8px 18px rgba(240,86,154,.12); }
.bp-mart { flex: none; width: 64px; height: 64px; border-radius: 20px; background: #fff; display: grid; place-items: center; }
.bp-mtx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bp-mtx b { font-family: var(--font-display); font-size: 21px; color: #1d2a5b; } .bp-mtx span { font-size: 13.5px; font-weight: 700; color: #7a6f8f; }
.qs-meter { display: grid; grid-template-columns: auto 160px; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 10px 14px; border-radius: 18px; background: #fff; }
.qs-meter b { grid-row: 1 / span 2; font-family: var(--font-display); font-size: 30px; color: #1d2a5b; } .qs-meter b small { font-size: 15px; color: #8a91b4; }
.qs-meter small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #8a91b4; }
.qs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.qs-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 2px 0 rgba(31,42,92,.04), 0 10px 22px rgba(31,42,92,.07); }
.qs-card.done { background: linear-gradient(120deg, #f2fbf5, #fffbea); }
.qs-ic { flex: none; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(180deg, #fff7e6, #ffe9c2); box-shadow: inset 0 0 0 2px #fff; }
.qs-tx { flex: 1; min-width: 0; } .qs-tx b { display: block; font-family: var(--font-display); font-size: 18px; color: #1d2a5b; } .qs-tx small { display: block; font-size: 13px; font-weight: 700; color: #7a81a3; }
.qs-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .qs-row .pp-bar { flex: 1; } .qs-row em { font-style: normal; font-weight: 800; font-size: 13px; color: #4a5583; white-space: nowrap; }
.qs-star { flex: none; animation: kpTw 2.4s ease-in-out infinite; }
@media (max-width: 700px) { .td2-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pp-hero { padding: 16px 70px 16px 16px; } .pp-hic { width: 60px; height: 60px; } .pp-hic .kic { width: 46px !important; height: 46px !important; } }
@media (orientation: landscape) and (max-height: 500px) { .pp-hero { padding: 12px 64px 12px 14px; margin-bottom: 10px; } .pp-hic { width: 54px; height: 54px; border-radius: 16px; } .pp-hic .kic { width: 40px !important; height: 40px !important; } .pp-ht h2 { font-size: 24px; } .pp-ht p { font-size: 12.5px; } }
.khub .bp-market > span.bp-mart { flex: none; width: 64px; height: 64px; font-size: inherit; }
.khub .bp-market > span.bp-mtx { flex: 1; } .khub .bp-market .bp-mtx > span { flex: none; }
.wk-ring2 b { display: flex; align-items: baseline; justify-content: center; white-space: nowrap; line-height: 74px; }
.wk-ring2 circle { stroke-width: 8; } .wk-ring2 { filter: drop-shadow(0 4px 8px rgba(31,42,92,.1)); }

/* ═══ v4.60 townsfolk talk card + The Story of Kingdomland ═══ */
.panel.tfpanel { width: min(560px, calc(100vw - 24px)); padding: 22px; }
.tf-card { display: flex; gap: 16px; align-items: flex-start; }
.tf-face { position: relative; flex: none; width: 110px; height: 110px; border-radius: 30px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #fff, #ffe9c2 70%, #ffd38a); box-shadow: inset 0 0 0 3px #fff, 0 10px 20px rgba(200,130,30,.25); }
.tf-face img { width: 100%; height: 100%; object-fit: cover; }
.tf-tx { min-width: 0; } .tf-tx small { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #b07a1e; }
.tf-tx h2 { margin: 2px 0 8px; font-family: var(--font-display); font-size: 30px; color: #1d2a5b; }
.tf-line { position: relative; margin: 0; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #fff; font-family: var(--font-display); font-size: 18px; line-height: 1.35; color: #1d2a5b; box-shadow: 0 6px 16px rgba(31,42,92,.08); }
.tf-new { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-weight: 800; font-size: 14px; color: #d23d82; }
.tf-page { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 16px; padding: 14px 16px; border-radius: 22px; text-align: left;
  background: linear-gradient(120deg, #2c3f9f, #6a49d6); color: #fff; box-shadow: 0 12px 24px rgba(44,63,159,.3); }
.tf-page > span { flex: none; width: 60px; height: 60px; border-radius: 18px; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.tf-page div { flex: 1; } .tf-page small { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .16em; opacity: .8; }
.tf-page b { display: block; font-family: var(--font-display); font-size: 21px; } .tf-page em { font-style: normal; font-size: 13px; font-weight: 700; opacity: .9; } .tf-page > i { font-style: normal; font-size: 30px; opacity: .8; }
.panel.lorepanel { width: min(600px, calc(100vw - 24px)); padding: 26px 28px; background: linear-gradient(180deg, #fffaf0, #fff1d9); }
.lore { text-align: center; } .lore-ic { display: inline-grid; place-items: center; width: 96px; height: 96px; border-radius: 30px; background: #fff; box-shadow: 0 10px 22px rgba(200,130,30,.2); }
.lore small { display: block; margin-top: 12px; font-size: 11.5px; font-weight: 900; letter-spacing: .2em; color: #b07a1e; }
.lore h2 { margin: 4px 0 12px; font-family: var(--font-display); font-size: 32px; color: #1d2a5b; }
.lore p { margin: 0 auto 12px; max-width: 46ch; font-size: 17px; line-height: 1.55; font-weight: 600; color: #3a3550; text-align: left; }
.lore p:last-of-type { font-family: var(--font-display); color: #6a49d6; }
.lore footer { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 14px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 13.5px; color: #7a6f8f; }
.lore-head { margin-top: 22px; }
.lf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.lf-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 22px; text-align: center; background: #f4f2fb; border: 2px dashed #ddd6ef; }
.lf-card.met { background: linear-gradient(180deg, #fffaf0, #ffefcf); border: 2px solid #ffd98a; box-shadow: 0 8px 18px rgba(200,130,30,.15); }
button.lf-card.met:hover { transform: translateY(-2px); }
.lf-ic { position: relative; width: 60px; height: 60px; border-radius: 18px; background: #fff; display: grid; place-items: center; }
.lf-card:not(.met) .lf-ic .kic { filter: grayscale(1); opacity: .45; } .lf-ic > i { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(31,42,92,.15); }
.lf-card b { font-family: var(--font-display); font-size: 16px; color: #1d2a5b; } .lf-card small { font-size: 12px; font-weight: 700; color: #7a81a3; }