/* Bipo's Kingdom (KINGDOM.md): hub/detail layout, portal entrance, guardian & scene idle animation.
   Keyframes only use transform/opacity (cheap to render); every decorative-only animation is disabled/softened
   under prefers-reduced-motion — state-change transitions (buttons, bars) stay untouched. */

.kd-stage { flex: 1; width: 100%; }
.kd { max-width: 1160px; margin: 0 auto; padding: 0 24px 40px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- progress bars (shared by hub head, cards, trial locks) ---------- */
.kd-bar { position: relative; height: 12px; border-radius: 999px; background: #EEF2F8; overflow: hidden; flex: none; }
.kd-bar.big { height: 16px; }
.kd-bar.small { height: 8px; }
.kd-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7ED9C9, #8FA8D8); transition: width .5s ease; }

/* ---------- hub ---------- */
.kd-hub-head { display: flex; align-items: center; gap: 18px; padding: 18px 26px; flex-wrap: wrap; }
.kd-hub-head-txt { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.kd-hub-head-txt b { font-size: 21px; }
.kd-hub-head-txt small { color: var(--ink2); font-weight: 700; }
.kd-hub-head .kd-bar { flex: 1; min-width: 160px; }

.kd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kd-card {
  display: flex; flex-direction: column; text-align: left; border-radius: var(--r); background: var(--card);
  box-shadow: var(--sh); overflow: hidden; transition: transform .12s ease, box-shadow .12s ease;
}
.kd-card:hover { transform: translateY(-3px); }
.kd-card:active { transform: translateY(1px); }
.kd-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.kd-card-scene { aspect-ratio: 400 / 240; background: #1E2340; overflow: hidden; }
.kd-card-scene svg { display: block; width: 100%; height: 100%; }
.kd-card-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.kd-card-body b { font-size: 19px; }
.kd-card-body small { color: var(--ink2); font-weight: 700; line-height: 1.3; min-height: 2.6em; }
.kd-card-body .kd-bar { margin-top: 2px; }
.kd-card-body .kd-bar > i { background: var(--kd-accent, var(--blue)); }
.kd-pct { align-self: flex-end; font-weight: 900; font-size: 13px; color: var(--ink2); }
.kd-maplink { align-self: center; margin-top: 4px; }

/* ---------- location detail ---------- */
.kd-detail { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: start; }
.kd-detail-left, .kd-detail-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kd-scene-wrap { position: relative; padding: 0; overflow: hidden; }
.kd-scene-wrap svg { display: block; width: 100%; height: auto; }
.kd-trophy {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: #fff;
  box-shadow: var(--sh); display: grid; place-items: center; font-size: 22px;
}
.kd-greet { display: flex; align-items: flex-start; gap: 10px; }
.kd-speak { flex: none; width: 40px; height: 40px; font-size: 17px; }

.kd-progress { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.kd-progress > small { color: var(--ink2); font-weight: 700; }
.kd-dchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.kd-dchip { display: inline-flex; align-items: center; gap: 6px; background: #F2F6FC; border-radius: 999px; padding: 6px 13px 6px 8px; font-weight: 800; font-size: 14px; }
.kd-dchip-ic { font-size: 16px; }
.kd-practice { width: 100%; }

.kd-trials { display: flex; flex-direction: column; gap: 10px; }
.kd-trials-title { text-align: left; font-size: 21px; margin: 4px 0 0; }
.kd-trial { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.kd-trial.locked { opacity: .82; }
.kd-trial-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kd-trial-head b { font-size: 18px; }
.kd-trial p { margin: 0; color: var(--ink2); font-weight: 700; }
.kd-pill { display: inline-flex; align-items: center; gap: 4px; background: #FFF1C2; color: #7A5700; font-weight: 900; font-size: 13px; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.kd-trial-lock { display: flex; flex-direction: column; gap: 6px; }
.kd-trial-lock small { color: var(--muted); font-weight: 700; }

/* ---------- secret-code / result reveal modal ---------- */
.kd-modal { max-width: 460px; }
.kd-result { display: flex; gap: 18px; align-items: center; }
.kd-result-bot { flex: none; }
.kd-result-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kd-result-txt p { margin: 0; font-weight: 700; }
.kd-code { display: flex; gap: 8px; }
.kd-code-digit {
  display: grid; place-items: center; width: 42px; height: 50px; border-radius: 12px; background: #4A4F82;
  color: #FFE680; font-weight: 900; font-size: 24px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
  animation: kd-code-in .4s ease backwards; animation-delay: calc(var(--i, 0) * .12s);
}
@keyframes kd-code-in { from { opacity: 0; transform: translateY(6px) scale(.85); } to { opacity: 1; transform: none; } }
.kd-code-hint { color: var(--ink2); font-weight: 700; font-size: 15px; }
.kd-trial-note { background: #FFF6D6; border-radius: 12px; padding: 8px 12px; font-weight: 800; }

/* ---------- portal ---------- */
.kd-portal-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 20px 40px; text-align: center; }
.kd-portal-stage { width: min(72vw, 300px); }
.kd-portal-stage svg { display: block; width: 100%; height: auto; }
.kd-portal-title { font-size: 32px; margin: 0; }
.kd-portal-text { max-width: 560px; display: inline-flex; align-items: center; gap: 12px; text-align: left; }

/* ---------- guardian & scene idle animation (float / blink / sparkle / shimmer) ---------- */
.kd-guardian, .kd-scene { overflow: visible; }
.kd-anim.kd-guardian { animation: kd-bob 2.8s var(--kd-d, 0s) ease-in-out infinite alternate; }
.kd-anim.kd-scene .kd-gbob { animation: kd-bob 3.2s var(--kd-d, 0s) ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.kd-anim .kd-eyes { animation: kd-blink 5.5s var(--kd-d, 0s) ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.kd-anim .kd-spark { animation: kd-twinkle 1.8s var(--d, 0s) ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
.kd-anim .kd-lantern { animation: kd-glow 2.2s var(--d, 0s) ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
.kd-ring-a { animation: kd-spin 22s linear infinite; transform-origin: 150px 150px; }
.kd-ring-b { animation: kd-spin 16s linear infinite reverse; transform-origin: 150px 150px; }
.kd-ring-glyphs { animation: kd-spin 34s linear infinite; transform-origin: 150px 150px; }
.kd-portal-core { animation: kd-pulse 2.4s ease-in-out infinite alternate; transform-origin: 150px 150px; }

@keyframes kd-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes kd-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes kd-twinkle { from { opacity: .35; transform: scale(.85); } to { opacity: 1; transform: scale(1.15); } }
@keyframes kd-glow { from { opacity: .75; filter: brightness(1); } to { opacity: 1; filter: brightness(1.3); } }
@keyframes kd-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes kd-pulse { from { transform: scale(.94); opacity: .85; } to { transform: scale(1.04); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .kd-anim, .kd-anim *, .kd-ring-a, .kd-ring-b, .kd-ring-glyphs, .kd-portal-core { animation: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .kd-grid { grid-template-columns: repeat(2, 1fr); }
  .kd-detail { grid-template-columns: 1fr; }
}
@media (max-height: 760px) {
  .kd-portal-wrap { padding: 10px 20px 20px; gap: 8px; }
  .kd-portal-stage { width: min(46vw, 190px); }
  .kd-portal-title { font-size: 26px; }
  .kd-portal-text { max-width: 620px; }
}
@media (max-width: 700px) {
  .kd { padding: 0 16px 30px; }
  .kd-grid { grid-template-columns: 1fr; }
  .kd-hub-head { flex-direction: column; align-items: stretch; }
  .kd-hub-head .kd-bar { min-width: 0; }
  .kd-portal-title { font-size: 26px; }
  .kd-result { flex-direction: column; text-align: center; }
  /* phones (portrait) */
  .kd { gap: 14px; padding: 0 12px 24px; }
  .kd-hub-head { gap: 10px; padding: 14px 16px; }
  .kd-hub-head-txt { min-width: 0; }
  .kd-card-body { padding: 12px 14px 14px; }
  .kd-pill, .kd-dchip, .kd-pct { font-size: 14px; }
  .kd-trial { padding: 12px 14px 14px; }
  .kd-portal-wrap { padding: 12px 12px 24px; }
  .kd-portal-text { font-size: 18px; }
}
/* phones (both orientations): no text under 14px, no button under 44px */
@media (max-width: 700px), (max-height: 500px) and (min-width: 560px) {
  .kd-card-body small, .kd-hub-head-txt small, .kd-progress > small, .kd-trial-lock small, .kd-code-hint { font-size: 14px; }
  .kd-speak { width: 44px; height: 44px; }
}
/* phones (landscape): the place beside its details, the portal beside its story */
@media (max-height: 500px) and (min-width: 560px) {
  .kd { gap: 12px; padding: 0 14px 20px; }
  .kd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .kd-card-body { padding: 10px 14px 12px; }
  .kd-card-body small { min-height: 0; }
  .kd-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .kd-pill, .kd-dchip, .kd-pct { font-size: 14px; }
  .kd-portal-wrap { display: grid; grid-template-columns: auto minmax(0, 560px); justify-content: center; align-items: center; column-gap: 24px; row-gap: 10px; padding: 4px 20px 16px; text-align: left; }
  .kd-portal-stage { grid-row: 1 / span 3; width: min(34vw, 200px); }
  .kd-portal-title { font-size: 26px; }
  .kd-portal-text { padding: 12px 16px; font-size: 17px; }
  .kd-portal-wrap > .btn { justify-self: start; }
}