:root {
  --ink: #11144d;
  --purple: #8f8adc;
  --black: #050505;
  --cream: #fff7df;
  --green: #a9d489;
  --wood: #6a4c32;
  --kingdom-font: "Berkshire Swash", Georgia, serif;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Nunito", Arial, sans-serif;
  background: var(--cream);
  min-width: 320px;
  overflow-wrap: break-word;
}

button, a { font: inherit; }
button { cursor: pointer; }

img,
svg,
canvas,
video,
iframe {
  max-width: 100%;
}

body * {
  min-width: 0;
}

.kingdom-world-page {
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,.5), transparent 14%),
    radial-gradient(circle at 84% 12%, rgba(255,255,255,.38), transparent 16%),
    linear-gradient(135deg, #5f4bff, #79c7ff 48%, #ffd166);
}

.world-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: clamp(8px, 2vw, 14px);
}

.world-topbar,
.world-help {
  width: min(1120px, 100%);
  margin: 0 auto;
  border: 3px solid rgba(255,255,255,.84);
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 28px rgba(45,23,77,.18);
}

.world-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}

.world-topbar span {
  color: #5a2da0;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}

.world-topbar h1 {
  margin: 2px 0 0;
  color: #2d174d;
  font-family: var(--kingdom-font);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 800;
}

.world-topbar a,
.return-world-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #5a2da0, #7b4dff);
  color: #fff;
  padding: 10px 15px;
  font-weight: 1000;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 5px 0 #3f1f75;
}

.phaser-game-shell {
  width: min(1120px, calc(100vw - 28px));
  min-height: 0;
  height: auto;
  aspect-ratio: 960 / 760;
  margin: 0 auto;
  border: 5px solid #fff;
  border-radius: 28px;
  background: #6fb7ff;
  box-shadow: 0 22px 60px rgba(45,23,77,.32);
  overflow: visible;
}

.phaser-game-shell canvas {
  display: block;
  margin: 0 auto;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

.world-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  color: #4d2c83;
  font-weight: 1000;
}

.world-help span {
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  padding: 7px 11px;
}

.world-error {
  margin: 30px;
  color: white;
  font-weight: 900;
  text-align: center;
}

.kk-login-form {
  width: 430px;
  border: 4px solid rgba(255,255,255,.9);
  border-radius: 28px;
  background: rgba(255,255,255,.94);
  padding: 24px;
  box-shadow: 0 18px 42px rgba(20,12,44,.28);
  font-family: "Nunito", Arial, sans-serif;
}

.kk-login-form label {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  color: #4d2c83;
  font-weight: 1000;
}

.kk-login-form input {
  border: 3px solid #d7c6ff;
  border-radius: 14px;
  padding: 12px 13px;
  font: inherit;
  color: #2d174d;
  background: #fff;
  outline: none;
}

.kk-login-form input:focus {
  border-color: #7b4dff;
  box-shadow: 0 0 0 4px rgba(123,77,255,.16);
}

.kk-login-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kk-login-actions button {
  flex: 1;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #5a2da0, #7b4dff);
  color: #fff;
  padding: 12px 14px;
  font-weight: 1000;
  box-shadow: 0 5px 0 #3f1f75;
}

.kk-login-actions button:last-child {
  background: linear-gradient(135deg, #2ec4b6, #77e5dc);
  color: #053f3b;
  box-shadow: 0 5px 0 #1b8f85;
}

.kk-login-form p {
  min-height: 22px;
  margin: 16px 0 0;
  color: #4d2c83;
  font-weight: 900;
  text-align: center;
}

.kk-login-form p.error {
  color: #9b2c2c;
}

.kk-ai-panel {
  width: min(820px, calc(100vw - 96px));
  max-height: min(720px, calc(100dvh - 32px));
  overflow-x: hidden;
  overflow-y: auto;
  border: 4px solid rgba(255,255,255,.9);
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 6%, rgba(255,209,102,.36), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,247,255,.94));
  padding: 14px;
  box-shadow: 0 24px 54px rgba(10,6,34,.36);
  color: #2d174d;
  font-family: "Nunito", Arial, sans-serif;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #7b4dff rgba(255,255,255,.45);
  scrollbar-width: thin;
}

.kk-ai-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  padding: 14px;
  box-shadow: 0 10px 22px rgba(45,23,77,.12);
}

.kk-ai-head span,
.kk-ai-title-row span {
  display: inline-block;
  color: #7b4dff;
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kk-ai-head h2 {
  margin: 2px 0 0;
  color: #2d174d;
  font-family: "Berkshire Swash", Georgia, serif;
  font-size: clamp(1.45rem, 3.8vw, 2rem);
  line-height: 1;
}

.kk-ai-head p,
.kk-ai-card p,
.kk-ai-history p {
  margin: 5px 0 0;
  color: #3f315f;
  font-weight: 900;
  line-height: 1.26;
}

.kk-ai-head button,
.kk-ai-actions button,
.kk-ai-skills button,
.kk-ai-challenge button,
.kk-ai-history button {
  border: 0;
  border-radius: 999px;
  background: #e9ddff;
  color: #32195f;
  padding: 8px 12px;
  font-weight: 1000;
  box-shadow: 0 4px 0 #bca9e8;
  white-space: normal;
}

.kk-ai-head button,
.kk-ai-actions button:first-child {
  background: linear-gradient(135deg, #2ec4b6, #77e5dc);
  color: #053f3b;
  box-shadow: 0 5px 0 #1b8f85;
}

.kk-ai-skills,
.kk-ai-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.kk-ai-skills button.active,
.kk-ai-actions button:last-child {
  background: #ffd166;
  color: #4a3000;
  box-shadow: 0 4px 0 #c99517;
}

.kk-ai-card {
  margin-top: 10px;
  border: 3px solid rgba(90,45,160,.16);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  padding: 14px;
  box-shadow: 0 12px 24px rgba(45,23,77,.12);
}

.kk-ai-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.kk-ai-title-row h3 {
  margin: 0;
  color: #2d174d;
  font-family: "Berkshire Swash", Georgia, serif;
  font-size: clamp(1.35rem, 3.4vw, 1.85rem);
  line-height: 1.02;
}

.kk-ai-title-row small,
.kk-ai-reflection {
  border-radius: 16px;
  background: #fff9e8;
  color: #4b3300;
  padding: 8px 10px;
  font-weight: 1000;
  line-height: 1.2;
}

.kk-ai-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.kk-ai-columns section,
.kk-ai-challenge {
  min-width: 0;
  border-radius: 18px;
  background: #f5efff;
  padding: 10px;
  box-shadow: inset 0 0 0 2px rgba(123,77,255,.1);
}

.kk-ai-columns b,
.kk-ai-challenge b,
.kk-ai-history b {
  display: block;
  margin-bottom: 6px;
  color: #2d174d;
  font-weight: 1000;
}

.kk-ai-challenge {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.kk-ai-challenge button {
  border-radius: 14px;
  background: #e7fbff;
  color: #154b5b;
  text-align: left;
  box-shadow: 0 4px 0 #8fd8e4;
}

.kk-ai-reflection {
  margin-top: 10px;
}

.kk-ai-history {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  padding: 12px;
}

.kk-ai-history button {
  display: grid;
  gap: 2px;
  border-radius: 14px;
  text-align: left;
}

.kk-ai-history small {
  color: #5f4b83;
  font-size: .72rem;
  font-weight: 1000;
}

.kk-ai-loading {
  margin: 14px 0 0;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  padding: 18px;
  color: #2d174d;
  font-weight: 1000;
  text-align: center;
}

.kk-news-panel {
  width: min(860px, calc(100vw - 96px));
  max-height: min(720px, calc(100dvh - 32px));
  overflow-x: hidden;
  overflow-y: auto;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 8%, rgba(255,209,102,.38), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,240,255,.94));
  padding: 14px;
  box-shadow: 0 24px 54px rgba(10,6,34,.36);
  color: #2d174d;
  font-family: "Nunito", Arial, sans-serif;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #7b4dff rgba(255,255,255,.45);
  scrollbar-width: thin;
}

.kk-news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 20px;
  background: #fff;
  padding: 16px;
  box-shadow: inset 0 0 0 2px rgba(90,45,160,.12);
  text-align: center;
}

.kk-news-head span,
.kk-news-article span,
.kk-news-headline span,
.kk-journal-head span,
.kk-journal-entry span {
  color: #7b4dff;
  font-size: .78rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kk-news-head h2 {
  margin: 3px 0 4px;
  font-family: var(--kingdom-font);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #2d174d;
  line-height: .95;
}

.kk-news-head p {
  max-width: 620px;
  margin: 0;
  color: #4d3a68;
  font-weight: 900;
  line-height: 1.25;
}

.kk-news-head button,
.kk-news-headline {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2ec4b6, #77e5dc);
  color: #053f3b;
  padding: 11px 15px;
  font-weight: 1000;
  box-shadow: 0 5px 0 #1b8f85;
}

.kk-news-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.kk-news-article {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
  gap: 16px;
  border: 3px solid rgba(90,45,160,.16);
  border-radius: 22px;
  background:
    linear-gradient(180deg, #fff9e8, #fff),
    repeating-linear-gradient(0deg, rgba(45,23,77,.06) 0 1px, transparent 1px 30px);
  padding: 14px;
  margin-top: 12px;
  box-shadow: 0 12px 24px rgba(45,23,77,.12);
  text-align: center;
}

.kk-news-article img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 16px;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 18px rgba(45,23,77,.12);
}

.kk-news-article h3 {
  margin: 4px 0;
  font-family: var(--kingdom-font);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1;
  color: #2d174d;
  overflow-wrap: anywhere;
}

.kk-news-article strong,
.kk-news-article p {
  display: block;
  color: #45335f;
  font-weight: 950;
  line-height: 1.25;
}

.kk-news-article p {
  margin: 8px 0 0;
  font-size: 1rem;
}

.kk-news-list {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.kk-news-headline {
  min-width: 0;
  display: grid;
  gap: 6px;
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  color: #2d174d;
  padding: 8px;
  text-align: center;
  box-shadow: 0 5px 0 rgba(45,23,77,.18);
}

.kk-news-headline.active {
  background: #fff2a8;
  color: #3a2900;
}

.kk-news-headline img {
  width: 100%;
  height: 74px;
  object-fit: cover;
  border-radius: 12px;
}

.kk-news-headline b,
.kk-news-headline small {
  overflow-wrap: anywhere;
}

.kk-news-headline small {
  color: #4d3a68;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.15;
}

.kk-news-empty {
  margin: 12px 0 0;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  text-align: center;
  font-weight: 1000;
}

.kk-journal-panel {
  width: min(860px, calc(100vw - 96px));
  max-height: min(720px, calc(100dvh - 32px));
  overflow-x: hidden;
  overflow-y: auto;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 8%, rgba(255,209,102,.34), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,249,235,.94));
  padding: 14px;
  box-shadow: 0 24px 54px rgba(10,6,34,.36);
  color: #2d174d;
  font-family: "Nunito", Arial, sans-serif;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #7b4dff rgba(255,255,255,.45);
  scrollbar-width: thin;
}

.kk-journal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 20px;
  background: #fff;
  padding: 16px;
  text-align: center;
  box-shadow: inset 0 0 0 2px rgba(90,45,160,.12);
}

.kk-journal-head h2 {
  margin: 3px 0 4px;
  font-family: var(--kingdom-font);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #2d174d;
  line-height: .95;
}

.kk-journal-head p {
  max-width: 620px;
  margin: 0;
  color: #4d3a68;
  font-weight: 900;
  line-height: 1.25;
}

.kk-journal-head button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2ec4b6, #77e5dc);
  color: #053f3b;
  padding: 11px 15px;
  font-weight: 1000;
  box-shadow: 0 5px 0 #1b8f85;
}

.kk-journal-paper {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  border: 3px solid rgba(90,45,160,.16);
  border-radius: 22px;
  background:
    linear-gradient(90deg, transparent 0 54px, rgba(255,126,179,.32) 54px 57px, transparent 57px),
    repeating-linear-gradient(0deg, #fffdf4 0 31px, #d7ecff 31px 33px);
  padding: 24px 18px 24px 76px;
  box-shadow: 0 12px 24px rgba(45,23,77,.12);
}

.kk-journal-entry {
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  padding: 14px;
  text-align: left;
  box-shadow: inset 0 0 0 2px rgba(90,45,160,.08);
}

.kk-journal-entry h3 {
  margin: 4px 0 8px;
  font-family: var(--kingdom-font);
  color: #2d174d;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  line-height: 1;
}

.kk-journal-entry p {
  margin: 7px 0 0;
  color: #45335f;
  font-weight: 900;
  line-height: 1.35;
}

.kk-journal-entry b {
  color: #2d174d;
}

.world-return-button {
  display: inline-flex;
  margin-bottom: 18px;
  border: 3px solid #2b0e36;
  border-radius: 999px;
  background: #fff;
  color: #2b0e36;
  padding: 10px 16px;
  font-weight: 1000;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(0,0,0,.16);
}

.kk-reward-panel {
  width: min(800px, calc(100vw - 96px));
  max-height: min(720px, calc(100dvh - 32px));
  overflow-x: hidden;
  overflow-y: scroll;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,235,.94)),
    radial-gradient(circle at 18% 0, rgba(255,209,102,.38), transparent 28%);
  box-shadow: 0 24px 54px rgba(27,15,58,.34);
  padding: 14px;
  font-family: "Nunito", Arial, sans-serif;
  color: #2d174d;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #7b4dff rgba(255,255,255,.45);
  scrollbar-width: thin;
}

.kk-reward-panel::-webkit-scrollbar {
  width: 10px;
}

.kk-reward-panel::-webkit-scrollbar-track {
  background: rgba(255,255,255,.45);
  border-radius: 999px;
}

.kk-reward-panel::-webkit-scrollbar-thumb {
  background: #7b4dff;
  border-radius: 999px;
}

.kk-reward-panel.room {
  width: min(820px, calc(100vw - 96px));
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,237,255,.95)),
    radial-gradient(circle at 82% 0, rgba(123,223,242,.34), transparent 28%);
}

.kk-reward-panel.shop {
  width: min(760px, calc(100vw - 96px));
  max-height: min(720px, calc(100dvh - 32px));
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 9px;
}

.kk-reward-panel.closet {
  width: min(760px, calc(100vw - 96px));
  max-height: min(720px, calc(100dvh - 32px));
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
}

.kk-panel-head {
  position: sticky;
  top: -14px;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  align-items: flex-start;
  gap: 12px;
  margin: -14px -14px 0;
  padding: 14px 14px 9px;
  border-bottom: 3px solid rgba(90,45,160,.14);
  background: rgba(255,255,255,.96);
  border-radius: 20px 20px 0 0;
}

.kk-reward-panel.shop .kk-panel-head {
  position: static;
  top: auto;
  width: 100%;
  margin: 0;
  padding: 16px 18px 14px;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 12px 26px rgba(21, 10, 48, .18);
}

.kk-reward-panel.closet .kk-panel-head {
  position: static;
  top: auto;
  width: 100%;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 12px 26px rgba(21, 10, 48, .18);
}

.kk-reward-panel.closet .kk-panel-head h2 {
  font-size: 1.45rem;
}

.kk-reward-panel.closet .kk-panel-head p {
  font-size: .78rem;
  line-height: 1.18;
}

.kk-reward-panel.closet .kk-head-actions {
  max-width: 126px;
}

.kk-reward-panel.closet .kk-panel-head strong,
.kk-reward-panel.closet .kk-home-button {
  max-width: 126px;
  padding-inline: 10px;
}

.kk-panel-head span {
  display: inline-block;
  color: #7b4dff;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .7rem;
}

.kk-panel-head h2 {
  max-width: 100%;
  margin: 0;
  color: #2d174d;
  font-family: "Berkshire Swash", Georgia, serif;
  font-size: clamp(1.35rem, 3.6vw, 1.7rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.kk-panel-head p {
  max-width: 100%;
  margin: 4px 0 0;
  color: #3f315f;
  font-size: .84rem;
  font-weight: 950;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.kk-head-actions {
  display: grid;
  justify-items: end;
  gap: 7px;
  flex: 0 0 auto;
  max-width: 154px;
  min-width: 0;
}

.kk-panel-head strong {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #fff2a8;
  color: #4a3000;
  padding: 8px 12px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.75);
}

.kk-home-button {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2ec4b6, #77e5dc);
  color: #053f3b;
  padding: 8px 11px;
  font-weight: 1000;
  box-shadow: 0 4px 0 #1b8f85;
  white-space: nowrap;
  max-width: 154px;
  overflow-wrap: normal;
  text-overflow: clip;
}

.kk-tabs,
.kk-panel-actions,
.kk-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  justify-content: center;
}

.kk-reward-panel.shop .kk-tabs {
  width: 100%;
  justify-content: center;
  margin-top: 0;
}

.kk-tabs button,
.kk-panel-actions button,
.kk-title-row button,
.kk-shop-item button,
.kk-side-board button,
.kk-pass button {
  border: 0;
  border-radius: 999px;
  background: #e9ddff;
  color: #32195f;
  padding: 7px 10px;
  font-weight: 1000;
  box-shadow: 0 4px 0 #bca9e8;
  line-height: 1.1;
}

.kk-tabs button.active,
.kk-title-row button.active,
.kk-pass button.unlocked {
  background: #ffd166;
  color: #4a3000;
  box-shadow: 0 4px 0 #c99517;
}

.kk-panel-actions button {
  background: linear-gradient(135deg, #5a2da0, #7b4dff);
  color: #fff;
  box-shadow: 0 5px 0 #3f1f75;
}

.kk-panel-actions {
  position: sticky;
  bottom: -14px;
  z-index: 4;
  margin: 10px -14px -14px;
  padding: 10px 14px 14px;
  background: rgba(255,255,255,.96);
  border-top: 3px solid rgba(90,45,160,.14);
  border-radius: 0 0 20px 20px;
}

.kk-reward-panel.shop .kk-panel-actions {
  position: static;
  bottom: auto;
  width: 100%;
  justify-content: center;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
}

.kk-reward-panel.closet .kk-panel-actions {
  position: static;
  bottom: auto;
  width: 100%;
  justify-content: center;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
}

.kk-reward-panel.closet .kk-title-row {
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  padding: 0 4px;
}

.kk-reward-panel.closet .kk-title-row b {
  flex-basis: 100%;
  text-align: center;
  color: #fff;
}

.kk-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 190px);
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.kk-reward-panel.shop .kk-shop-grid {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(174px, 186px));
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  margin-top: 0;
}

.kk-reward-panel.closet .kk-shop-grid {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(148px, 158px));
  justify-content: center;
  gap: 10px;
  margin-top: 0;
}

.kk-shop-grid.compact {
  grid-template-columns: repeat(auto-fit, 170px);
  justify-content: center;
}

.kk-shop-item {
  min-width: 0;
  min-height: 160px;
  border: 3px solid rgba(90,45,160,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  padding: 9px;
  display: grid;
  gap: 5px;
  align-content: start;
  box-shadow: 0 10px 18px rgba(45,23,77,.1);
  text-align: left;
}

.kk-reward-panel.shop .kk-shop-item {
  min-height: 204px;
}

.kk-reward-panel.closet .kk-shop-item {
  min-height: 144px;
}

.kk-shop-item.owned {
  border-color: rgba(46,196,182,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(224,255,249,.86));
}

.kk-item-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #f0eaff;
  background: color-mix(in srgb, var(--item-color), white 72%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.85), 0 8px 16px rgba(0,0,0,.1);
  font-size: 24px;
}

.kk-item-icon img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  animation: kk-item-bob 1.7s ease-in-out infinite;
}

.kk-lpc-item-icon {
  width: 40px;
  height: 40px;
  display: block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: kk-item-bob 1.7s ease-in-out infinite;
}

.kk-lpc-item-icon[style*=".png"] {
  background-size: 360px 160px;
  background-position: -40px -80px;
}

@keyframes kk-item-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.kk-shop-item h3 {
  margin: 0;
  color: #2d174d;
  font-size: .9rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.kk-shop-item p {
  min-height: 46px;
  max-height: none;
  overflow: visible;
  margin: 0;
  color: #45335f;
  font-size: .74rem;
  font-weight: 950;
  line-height: 1.18;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.kk-shop-item small,
.kk-room-floor small,
.kk-badges small,
.kk-pass small {
  display: block;
  font-size: .68rem;
  font-weight: 1000;
  color: #38215f;
}

.kk-panel-message {
  margin-top: 10px;
  border: 2px solid #ffd166;
  border-radius: 14px;
  background: #fff9e8;
  color: #4b3300;
  padding: 8px 10px;
  font-weight: 1000;
  line-height: 1.2;
}

.kk-reward-panel.shop .kk-panel-message {
  width: 100%;
  margin-top: 0;
  text-align: center;
}

.kk-reward-panel.closet .kk-panel-message {
  width: 100%;
  margin-top: 0;
  text-align: center;
}

.kk-closet-preview,
.kk-room-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 10px;
  margin-top: 10px;
}

.kk-reward-panel.closet .kk-closet-preview {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 0;
}

.kk-avatar-preview,
.kk-equipped-list,
.kk-room-space,
.kk-side-board,
.kk-pass,
.kk-event-card {
  min-width: 0;
  border: 3px solid rgba(255,255,255,.82);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  padding: 10px;
  box-shadow: 0 10px 18px rgba(45,23,77,.1);
}

.kk-avatar-preview {
  display: grid;
  place-items: center;
  min-height: 112px;
  background: radial-gradient(circle, #fff2a8, #dff8ff);
}

.kk-reward-panel.closet .kk-avatar-preview {
  min-height: 144px;
  gap: 6px;
  text-align: center;
}

.kk-avatar-stack {
  position: relative;
  width: 154px;
  height: 116px;
  display: grid;
  place-items: center;
}

.kk-lpc-layer {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 128px;
  height: 128px;
  background-size: 1152px 512px;
  background-position: -128px -256px;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 10px rgba(45,23,77,.22));
  animation: kk-avatar-idle 1.6s ease-in-out infinite;
}

.kk-avatar-trail {
  position: absolute;
  inset: auto 24px 6px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,126,179,.8), rgba(255,209,102,.85), rgba(123,223,242,.8), transparent);
  opacity: 0;
  filter: blur(1px);
}

.kk-avatar-trail.active {
  opacity: 1;
  animation: kk-trail-glow 1.2s ease-in-out infinite alternate;
}

.kk-avatar-accessory,
.kk-avatar-pet {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 7px 14px rgba(45,23,77,.14);
  animation: kk-item-bob 1.7s ease-in-out infinite;
}

.kk-avatar-accessory.slot-0 { left: 10px; top: 18px; }
.kk-avatar-accessory.slot-1 { right: 10px; top: 18px; }
.kk-avatar-accessory.slot-2 { left: 34px; top: 0; }
.kk-avatar-accessory.slot-3 { right: 34px; bottom: 10px; }
.kk-avatar-accessory.slot-4 { left: 34px; bottom: 10px; }
.kk-avatar-pet {
  right: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
}

@keyframes kk-avatar-idle {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-3px); }
}

@keyframes kk-trail-glow {
  from { transform: scaleX(.9); opacity: .55; }
  to { transform: scaleX(1.08); opacity: 1; }
}

.kk-equipped-list p {
  margin: 4px 0;
  color: #32195f;
  font-size: .86rem;
  font-weight: 1000;
}

.kk-empty {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  padding: 16px;
  font-weight: 1000;
  text-align: center;
}

.kk-room-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
}

.kk-room-space {
  min-height: 292px;
  background:
    linear-gradient(180deg, rgba(255,238,204,.82) 0 54%, rgba(130,76,45,.85) 54% 100%);
  overflow: hidden;
}

.kk-room-wall h3,
.kk-side-board h3 {
  margin: 0 0 6px;
  color: #32195f;
  font-family: "Berkshire Swash", Georgia, serif;
  font-size: 1.12rem;
}

.kk-badges,
.kk-room-floor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.kk-badges span,
.kk-room-floor span {
  flex: 0 1 88px;
  min-width: 76px;
  max-width: 92px;
  border-radius: 13px;
  background: rgba(255,255,255,.82);
  padding: 6px;
  text-align: center;
  font-size: 22px;
  font-weight: 1000;
  box-shadow: inset 0 0 0 2px rgba(90,45,160,.08);
}

.kk-badges span b,
.kk-room-floor span b {
  display: grid;
  place-items: center;
  min-height: 28px;
  color: #32195f;
  font-size: .8rem;
}

.kk-badges span img,
.kk-room-floor img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  animation: kk-item-bob 1.8s ease-in-out infinite;
}

.kk-badges span.unlocked {
  background: #fff2a8;
  box-shadow: 0 0 16px rgba(255,209,102,.55);
}

.kk-room-floor {
  margin-top: 14px;
  align-items: flex-end;
}

.kk-room-floor span {
  background: #fff2a8;
  background: color-mix(in srgb, var(--item-color, #fff2a8), white 72%);
}

.kk-side-board {
  display: grid;
  gap: 6px;
  align-content: start;
}

.kk-side-board button {
  display: grid;
  gap: 2px;
  border-radius: 13px;
  background: #fff2d5;
  color: #4e2b05;
  text-align: left;
  box-shadow: 0 4px 0 #dfad68;
  font-size: .74rem;
  line-height: 1.13;
  overflow-wrap: anywhere;
  white-space: normal;
}

.kk-side-board p {
  margin: 0;
  color: #332247;
  font-size: .76rem;
  font-weight: 1000;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.kk-pass {
  margin-top: 10px;
}

.kk-pass > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.kk-pass button {
  border-radius: 13px;
  min-height: 48px;
  font-size: .75rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.kk-pass button:disabled {
  cursor: default;
  opacity: .78;
  color: #38215f;
}

.kk-shop-item button:disabled {
  cursor: default;
  opacity: .78;
  color: #38215f;
}

.kk-event-card {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  background: linear-gradient(135deg, #2d174d, #5a2da0);
  color: #fff;
  font-size: .84rem;
  font-weight: 950;
  line-height: 1.2;
}

.kk-event-card b {
  color: #ffd166;
  white-space: nowrap;
}

.dashboard {
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 42px 28px 96px;
  background:
    linear-gradient(180deg, rgba(255,247,223,.92), rgba(255,247,223,.96)),
    repeating-linear-gradient(45deg, rgba(163,122,62,.08) 0 18px, transparent 18px 36px);
}

.dashboard-hero {
  padding: 0 0 32px;
  text-align: center;
}

.dashboard-hero h1,
.story-title {
  margin: 0;
  font-family: var(--kingdom-font);
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.04;
}

.dashboard-hero h1 {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(2.35rem, 4vw, 3.35rem);
}

.dashboard-featured,
.skill-filters,
.recommendation-panel,
.map-shell,
.coming-soon {
  width: min(1220px, 100%);
  margin: 0 auto;
}

.dashboard-featured { margin-bottom: 24px; }

.featured-card {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 178px;
  border: 4px solid #2b0e36;
  border-radius: 8px;
  background: #efe4ff;
  color: #11144d;
  padding: 16px;
  text-decoration: none;
  box-shadow: 8px 8px 0 rgba(43, 14, 54, .22);
}

.featured-card img {
  width: 100%;
  aspect-ratio: 1.25;
  object-fit: cover;
  border: 4px solid white;
}

.featured-label {
  position: absolute;
  transform: translate(10px, -92px);
  border: 3px solid #2b0e36;
  background: #ffd66d;
  padding: 7px 10px;
  font-weight: 900;
}

.featured-card b {
  display: block;
  font-family: var(--kingdom-font);
  font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.featured-card small,
.featured-card em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-weight: 900;
}

.skill-filters {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
  border: 4px solid #2b0e36;
  border-radius: 8px;
  background: rgba(255, 252, 239, .92);
  padding: 14px;
  box-shadow: 7px 7px 0 rgba(43, 14, 54, .12);
}

.points-pill {
  border: 3px solid #2b0e36;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8d7, #ffd66d);
  color: #11144d;
  padding: 13px 14px;
  font-weight: 900;
  white-space: nowrap;
  text-align: center;
  box-shadow: inset 0 -4px 0 rgba(43,14,54,.1);
}

.search-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 220px;
  gap: 8px;
  align-items: end;
}

.search-box,
.value-dropdown {
  display: grid;
  gap: 6px;
}

.search-box span,
.value-dropdown span {
  color: #4b2a16;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.search-box input,
.value-dropdown select {
  width: 100%;
  min-height: 48px;
  border: 3px solid #2b0e36;
  border-radius: 8px;
  background: #fff9e8;
  color: #11144d;
  padding: 10px 14px;
  font-weight: 900;
  box-shadow: inset 0 -4px 0 rgba(43,14,54,.08);
}

.search-box input:focus,
.value-dropdown select:focus {
  outline: 4px solid rgba(158,71,197,.24);
  border-color: #9e47c5;
}

.mini-play {
  border: 3px solid #2b0e36;
  border-radius: 999px;
  background: #fff9e8;
  color: #11144d;
  padding: 9px 14px;
  text-decoration: none;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(43,14,54,.18);
}

.search-hint {
  grid-column: 1 / -1;
  color: #6a4c32;
  font-size: .88rem;
  font-weight: 900;
}

.no-results {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 4px dashed rgba(43,14,54,.35);
  border-radius: 8px;
  background: rgba(255,249,232,.78);
  color: #11144d;
  padding: 24px;
  text-align: center;
}

.no-results b {
  font-family: var(--kingdom-font);
  font-size: 2rem;
}

.no-results span {
  font-weight: 900;
}

.recommendation-panel {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  border: 4px solid #6a4c32;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff5d4, #ead3a5);
  color: #3b2514;
  padding: 14px 18px;
  box-shadow: 6px 6px 0 rgba(106, 76, 50, .16);
}

.recommendation-panel b,
.recommendation-panel span {
  display: block;
}

.recommendation-panel b {
  font-family: var(--kingdom-font);
  font-size: 1.45rem;
}

.map-shell {
  position: relative;
  padding: 40px 28px 46px;
  border: 5px solid rgba(106, 76, 50, .5);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,246,218,.94), rgba(236,207,156,.92)),
    repeating-linear-gradient(0deg, rgba(106,76,50,.07) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(90deg, rgba(106,76,50,.05) 0 2px, transparent 2px 34px);
  overflow: hidden;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.35), 9px 10px 0 rgba(106,76,50,.12);
}

.game-grid {
  width: min(1220px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  column-gap: clamp(24px, 4vw, 46px);
  row-gap: 46px;
  align-items: start;
}

.map-grid {
  position: relative;
  z-index: 1;
}

.dashboard-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  color: #050505;
  text-decoration: none;
  padding: 14px 12px 16px;
  border: 3px solid rgba(78, 45, 24, 0.52);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffaf0, #f0dbad);
  box-shadow: 5px 6px 0 rgba(78, 45, 24, .16);
  transition: transform 160ms ease;
}

.dashboard-card:hover { transform: translateY(-4px); }

.dashboard-card:nth-child(6n + 2),
.dashboard-card:nth-child(6n + 5) {
  transform: translateY(10px);
}

.dashboard-card:nth-child(6n + 3) {
  transform: translateY(-6px);
}

.dashboard-card:hover:nth-child(n) { transform: translateY(-4px); }

.dashboard-card.locked {
  filter: grayscale(.65);
  opacity: .78;
}

.dashboard-card.locked .game-image {
  filter: blur(2px);
}

.card-play-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 8px;
}

.favorite-card-button {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 9px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 1.25rem;
}

.map-pin {
  position: absolute;
  z-index: 2;
  top: -22px;
  right: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 3px solid #2b0e36;
  border-radius: 50%;
  background: #ffd66d;
  font-size: 1.3rem;
  box-shadow: 3px 3px 0 rgba(0,0,0,.18);
}

.game-photo {
  width: 100%;
  max-width: 190px;
  height: 150px;
  display: block;
  padding: 7px;
  border: 2px solid rgba(78, 45, 24, 0.35);
  border-radius: 6px;
  background: #fff9e8;
  clip-path: polygon(7% 0, 100% 0, 94% 100%, 0 100%);
}

.game-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 5px;
}

.dashboard-card strong {
  min-height: 25px;
  font-family: var(--kingdom-font);
  color: #211027;
  font-size: 1.14rem;
  line-height: 1.15;
  text-align: center;
}

.card-copy {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

.skill-line,
.unlock-row {
  color: #4b2a16;
  font-size: .84rem;
  font-weight: 900;
}

.meta-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
}

.meta-row span,
.unlock-row {
  border: 2px solid rgba(43,14,54,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  padding: 3px 8px;
}

.play-button {
  width: 142px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 7px;
  border: 3px solid #2b0e36;
  background: #9e47c5;
  color: white;
  clip-path: polygon(13% 0, 100% 0, 100% 58%, 85% 100%, 0 100%, 0 42%);
  font-size: 0.92rem;
  font-weight: 900;
}

.play-button span {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid white;
}

.coming-soon {
  margin-top: 46px;
}

.coming-soon h2 {
  margin: 0 0 18px;
  font-family: var(--kingdom-font);
  color: var(--ink);
  text-align: center;
  font-size: clamp(2rem, 4vw, 3rem);
}

.coming-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 28px;
}

.coming-card {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 16px;
  border: 4px dashed rgba(43,14,54,.42);
  border-radius: 8px;
  background: rgba(255,255,255,.62);
  text-align: center;
  color: #2b0e36;
}

.coming-image {
  width: 160px;
  height: 118px;
  display: block;
  border: 4px solid rgba(43,14,54,.28);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(158,71,197,.34), rgba(255,214,109,.35)),
    repeating-linear-gradient(45deg, rgba(43,14,54,.18) 0 12px, transparent 12px 24px);
  filter: blur(1px);
}

.coming-card strong {
  font-family: var(--kingdom-font);
  font-size: 1.3rem;
}

.single-game {
  --box-bg: var(--purple);
  --box-border: var(--black);
  --box-ink: #07083b;
  --page-bg: linear-gradient(180deg, #b8dfc4 0%, #abd282 54%, #c4df80 100%);
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 28px 12px 90px;
  background: var(--page-bg);
}

.theme-compliment-castle,
.theme-nature-nook {
  --page-bg: linear-gradient(180deg, #d9f3dd 0%, #a8d788 48%, #d5e58c 100%);
  --box-bg: #9fd9a8;
  --box-border: #2f6b3d;
  --box-ink: #14331d;
}

.theme-share-the-crown,
.theme-gratitude-gems,
.theme-feelings-garden {
  --page-bg: linear-gradient(180deg, #ffe3f3 0%, #c9a6ec 48%, #b4dc89 100%);
  --box-bg: #d39be8;
  --box-border: #663087;
  --box-ink: #2d0d43;
}

.theme-brave-apology-bridge,
.theme-promise-path,
.theme-problem-solving-portal {
  --page-bg: linear-gradient(180deg, #d4f1ff 0%, #9fd2de 48%, #d2aa72 100%);
  --box-bg: #8fc3e7;
  --box-border: #25577b;
  --box-ink: #0f2940;
}

.theme-listening-lanterns,
.theme-empathy-echoes,
.theme-restful-moon-meadow {
  --page-bg: linear-gradient(180deg, #182c68 0%, #4965a4 52%, #7da679 100%);
  --box-bg: #7788d8;
  --box-border: #161f5c;
  --box-ink: #070b32;
}

.theme-patience-potion,
.theme-courage-cave,
.theme-calm-dragon-den {
  --page-bg: linear-gradient(180deg, #533b80 0%, #7b579b 52%, #3c2f4c 100%);
  --box-bg: #b18adf;
  --box-border: #3f2469;
  --box-ink: #1f0f38;
}

.theme-helping-hands-bakery,
.theme-respectful-roundtable,
.theme-truth-teller-tower,
.theme-manners-market {
  --page-bg: linear-gradient(180deg, #ffe6b7 0%, #cd9a68 52%, #92704f 100%);
  --box-bg: #e3b176;
  --box-border: #704522;
  --box-ink: #351f0e;
}

.theme-teamwork-tournament,
.theme-healthy-habits-harbor,
.theme-safety-shield,
.theme-curiosity-clock,
.theme-perseverance-peak,
.theme-digital-kindness-gate {
  --page-bg: linear-gradient(180deg, #d0f3ff 0%, #90cede 50%, #8cc573 100%);
  --box-bg: #8fd0e8;
  --box-border: #1d6078;
  --box-ink: #0b2f3d;
}

.theme-fairness-fountain {
  --page-bg: linear-gradient(180deg, #e3fbff 0%, #a9ddea 52%, #82b5c3 100%);
  --box-bg: #a9e4ef;
  --box-border: #328090;
  --box-ink: #103940;
}

.theme-inclusion-inn {
  --page-bg: linear-gradient(180deg, #ffd9c6 0%, #e69a75 52%, #a76749 100%);
  --box-bg: #f0a884;
  --box-border: #8b452d;
  --box-ink: #3d180f;
}

.theme-compliment-castle { --page-bg: linear-gradient(180deg, #fff0bc 0%, #c48ae4 48%, #70408e 100%); --box-bg: #d7a6f0; --box-border: #5d2876; --box-ink: #240b38; }
.theme-share-the-crown { --page-bg: linear-gradient(180deg, #fff3b7 0%, #d796df 45%, #6d3fa7 100%); --box-bg: #d69be7; --box-border: #612a82; --box-ink: #270a41; }
.theme-brave-apology-bridge { --page-bg: linear-gradient(180deg, #99d7ff 0%, #536fb0 50%, #291d4e 100%); --box-bg: #95b9ef; --box-border: #203c82; --box-ink: #07173d; }
.theme-listening-lanterns { --page-bg: linear-gradient(180deg, #0d1d4d 0%, #34498a 54%, #e0b05f 100%); --box-bg: #7e8fe2; --box-border: #111e59; --box-ink: #070c33; }
.theme-feelings-garden { --page-bg: linear-gradient(180deg, #ffddec 0%, #9fdc91 48%, #4c9a67 100%); --box-bg: #f0a8cf; --box-border: #8a3b65; --box-ink: #3a1230; }
.theme-patience-potion { --page-bg: linear-gradient(180deg, #40316d 0%, #6f4ea0 45%, #b9f0e7 100%); --box-bg: #bca0ee; --box-border: #3b2769; --box-ink: #1b0d38; }
.theme-helping-hands-bakery { --page-bg: linear-gradient(180deg, #fff0c7 0%, #e59d58 52%, #8d5431 100%); --box-bg: #f0bb76; --box-border: #7a4721; --box-ink: #321a09; }
.theme-truth-teller-tower { --page-bg: linear-gradient(90deg, #f9eec5 0%, #f9eec5 48%, #4d4b72 52%, #242441 100%); --box-bg: #d7c58e; --box-border: #50402a; --box-ink: #21180e; }
.theme-gratitude-gems { --page-bg: linear-gradient(180deg, #2e215f 0%, #4b7cc5 48%, #8df0e6 100%); --box-bg: #94dbea; --box-border: #276279; --box-ink: #0a2938; }
.theme-respectful-roundtable { --page-bg: linear-gradient(180deg, #f8e0b5 0%, #b98456 52%, #5b3b29 100%); --box-bg: #dbad7b; --box-border: #6c4427; --box-ink: #281608; }
.theme-inclusion-inn { --page-bg: linear-gradient(180deg, #ffd9c6 0%, #dc7f65 52%, #703b4b 100%); --box-bg: #efa98a; --box-border: #88422e; --box-ink: #3a160d; }
.theme-courage-cave { --page-bg: linear-gradient(180deg, #1d1931 0%, #4a3d68 52%, #ffc872 100%); --box-bg: #9a86c8; --box-border: #2c214c; --box-ink: #150d2a; }
.theme-calm-dragon-den { --page-bg: linear-gradient(180deg, #3a1f31 0%, #8a4a55 52%, #ffbc80 100%); --box-bg: #e89583; --box-border: #6b2c35; --box-ink: #2a0d12; }
.theme-teamwork-tournament { --page-bg: linear-gradient(180deg, #abe9ff 0%, #71c481 48%, #3d7b48 100%); --box-bg: #91d9a5; --box-border: #2c743d; --box-ink: #0e3517; }
.theme-fairness-fountain { --page-bg: linear-gradient(180deg, #eaffff 0%, #94dce9 52%, #558da7 100%); --box-bg: #a9e4ef; --box-border: #328090; --box-ink: #103940; }
.theme-promise-path { --page-bg: linear-gradient(180deg, #ffe2a6 0%, #b4d376 48%, #8c6a45 100%); --box-bg: #d7c47b; --box-border: #766a25; --box-ink: #302a0a; }
.theme-healthy-habits-harbor { --page-bg: linear-gradient(180deg, #b9f2ff 0%, #57a7c9 52%, #316e8a 100%); --box-bg: #8fd5e8; --box-border: #266d80; --box-ink: #0b303a; }
.theme-safety-shield { --page-bg: linear-gradient(180deg, #d7f2ff 0%, #79a8d5 52%, #405e8e 100%); --box-bg: #9dc7ef; --box-border: #315d91; --box-ink: #0d2746; }
.theme-curiosity-clock { --page-bg: linear-gradient(180deg, #f8e8bc 0%, #b8a062 48%, #65513a 100%); --box-bg: #d5bd78; --box-border: #685328; --box-ink: #291d0a; }
.theme-perseverance-peak { --page-bg: linear-gradient(180deg, #eaf9ff 0%, #9db3c9 48%, #6f7d8d 100%); --box-bg: #b8c8da; --box-border: #536273; --box-ink: #1e2730; }
.theme-empathy-echoes { --page-bg: linear-gradient(180deg, #24305c 0%, #5c5d9f 52%, #92b0cf 100%); --box-bg: #98a0e6; --box-border: #30386f; --box-ink: #111844; }
.theme-manners-market { --page-bg: linear-gradient(180deg, #ffe9b2 0%, #e39c6c 50%, #9c514f 100%); --box-bg: #f0b177; --box-border: #84472c; --box-ink: #35170c; }
.theme-problem-solving-portal { --page-bg: linear-gradient(180deg, #24194d 0%, #6351b6 48%, #48c2c8 100%); --box-bg: #9c90ef; --box-border: #3a2a84; --box-ink: #160f43; }
.theme-nature-nook { --page-bg: linear-gradient(180deg, #dff6c6 0%, #72b86a 48%, #317653 100%); --box-bg: #9fd9a8; --box-border: #2f6b3d; --box-ink: #14331d; }
.theme-digital-kindness-gate { --page-bg: linear-gradient(180deg, #11284f 0%, #166a94 50%, #3be2b1 100%); --box-bg: #80dbea; --box-border: #1c6478; --box-ink: #062d38; }
.theme-restful-moon-meadow { --page-bg: linear-gradient(180deg, #1c2554 0%, #53619a 52%, #7ca77a 100%); --box-bg: #8792da; --box-border: #222b67; --box-ink: #080e33; }

.theme-compliment-castle { --play-font: Georgia, serif; --play-accent: #ffca5f; --play-surface: #2d1740; --play-text: #fff6bf; }
.theme-share-the-crown { --play-font: "Trebuchet MS", Arial, sans-serif; --play-accent: #ffe36c; --play-surface: #321366; --play-text: #fff4c8; }
.theme-brave-apology-bridge { --play-font: Palatino, Georgia, serif; --play-accent: #8ce9ff; --play-surface: #121a44; --play-text: #eaf8ff; }
.theme-listening-lanterns { --play-font: "Gill Sans", "Trebuchet MS", sans-serif; --play-accent: #ffe17c; --play-surface: #071332; --play-text: #fff2b5; }
.theme-feelings-garden { --play-font: "Comic Sans MS", "Trebuchet MS", sans-serif; --play-accent: #ff91c6; --play-surface: #174a35; --play-text: #fff1f8; }
.theme-patience-potion { --play-font: Copperplate, "Trebuchet MS", sans-serif; --play-accent: #8ff3ff; --play-surface: #261444; --play-text: #e9ffff; }
.theme-helping-hands-bakery { --play-font: Georgia, serif; --play-accent: #ffbf66; --play-surface: #5a2d13; --play-text: #fff2d3; }
.theme-truth-teller-tower { --play-font: "Arial Black", Impact, sans-serif; --play-accent: #fff3a6; --play-surface: #23233d; --play-text: #fff9d7; }
.theme-gratitude-gems { --play-font: Optima, "Trebuchet MS", sans-serif; --play-accent: #8efff4; --play-surface: #17245e; --play-text: #e9ffff; }
.theme-respectful-roundtable { --play-font: Georgia, serif; --play-accent: #dcb079; --play-surface: #3e2415; --play-text: #fff1d8; }
.theme-inclusion-inn { --play-font: Verdana, Arial, sans-serif; --play-accent: #ffb38f; --play-surface: #4d1e2c; --play-text: #ffe8de; }
.theme-courage-cave { --play-font: Impact, "Arial Black", sans-serif; --play-accent: #ffc85f; --play-surface: #181326; --play-text: #fff1c2; }
.theme-calm-dragon-den { --play-font: Papyrus, fantasy; --play-accent: #ff8b62; --play-surface: #361521; --play-text: #ffe1d7; }
.theme-teamwork-tournament { --play-font: "Trebuchet MS", Arial, sans-serif; --play-accent: #a8f36f; --play-surface: #154726; --play-text: #efffdf; }
.theme-fairness-fountain { --play-font: Optima, "Trebuchet MS", sans-serif; --play-accent: #a7f5ff; --play-surface: #124a5a; --play-text: #ecfeff; }
.theme-promise-path { --play-font: Georgia, serif; --play-accent: #f7d06f; --play-surface: #4d3a1d; --play-text: #fff4d5; }
.theme-healthy-habits-harbor { --play-font: Verdana, Arial, sans-serif; --play-accent: #77e4ff; --play-surface: #0c4862; --play-text: #eaffff; }
.theme-safety-shield { --play-font: "Arial Black", Impact, sans-serif; --play-accent: #a8d6ff; --play-surface: #1b355c; --play-text: #edf7ff; }
.theme-curiosity-clock { --play-font: "Courier New", monospace; --play-accent: #ffd36f; --play-surface: #3d301f; --play-text: #fff2cf; }
.theme-perseverance-peak { --play-font: "Trebuchet MS", Arial, sans-serif; --play-accent: #d8ecff; --play-surface: #34404f; --play-text: #eef7ff; }
.theme-empathy-echoes { --play-font: "Gill Sans", "Trebuchet MS", sans-serif; --play-accent: #b7c5ff; --play-surface: #20275b; --play-text: #eef1ff; }
.theme-manners-market { --play-font: Verdana, Arial, sans-serif; --play-accent: #ffd66e; --play-surface: #6a2c26; --play-text: #fff0ca; }
.theme-problem-solving-portal { --play-font: "Courier New", monospace; --play-accent: #5ff5e8; --play-surface: #1e1451; --play-text: #dcfffb; }
.theme-nature-nook { --play-font: "Trebuchet MS", Arial, sans-serif; --play-accent: #b8f07a; --play-surface: #174c31; --play-text: #efffde; }
.theme-digital-kindness-gate { --play-font: "Courier New", monospace; --play-accent: #4dffcf; --play-surface: #061f38; --play-text: #d5fff6; }
.theme-restful-moon-meadow { --play-font: Palatino, Georgia, serif; --play-accent: #ccd0ff; --play-surface: #171d45; --play-text: #f1f0ff; }

.small-back {
  position: fixed;
  z-index: 20;
  left: 14px;
  top: 14px;
  border: 4px solid var(--black);
  background: rgba(143, 138, 220, 0.92);
  color: #050505;
  padding: 6px 10px;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 900;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.flow-drawer {
  position: fixed;
  z-index: 25;
  top: 92px;
  right: 0;
  width: min(360px, calc(100vw - 28px));
  transform: translateX(calc(100% - 42px));
  transition: transform 240ms ease;
}

.flow-drawer.open {
  transform: translateX(0);
}

.flow-tab {
  position: absolute;
  left: 0;
  top: 34px;
  width: 42px;
  min-height: 112px;
  display: grid;
  place-items: center;
  border: 4px solid var(--box-border);
  border-right: 0;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, var(--box-bg), var(--play-accent, #ffd66d));
  color: var(--box-ink);
  box-shadow: -5px 6px 0 rgba(0,0,0,.2);
}

.flow-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--kingdom-font);
  font-size: 1.08rem;
  line-height: 1;
}

.flow-panel {
  margin-left: 42px;
  max-height: min(76vh, 720px);
  overflow-y: auto;
  border: 4px solid var(--box-border);
  border-right: 0;
  border-radius: 22px 0 0 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,247,223,.96)),
    var(--box-bg);
  color: var(--box-ink);
  padding: 18px 18px 20px;
  box-shadow: -10px 12px 0 rgba(0,0,0,.18);
}

.flow-close {
  float: right;
  width: 32px;
  height: 32px;
  border: 3px solid var(--box-border);
  border-radius: 50%;
  background: #fff9e8;
  color: var(--box-ink);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
}

.flow-kicker {
  color: var(--box-border);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.flow-panel h2 {
  margin: 3px 36px 8px 0;
  font-family: var(--kingdom-font);
  color: var(--box-ink);
  font-size: 1.8rem;
  line-height: 1.05;
}

.flow-summary {
  margin: 0 0 16px;
  border: 3px solid rgba(0,0,0,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.68);
  padding: 10px;
  font-weight: 900;
  line-height: 1.35;
}

.flow-steps {
  position: relative;
  display: grid;
  gap: 12px;
}

.flow-steps::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 10px;
  bottom: 10px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--box-border), var(--play-accent, #ffd66d));
  opacity: .72;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.flow-dot {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 4px solid var(--box-border);
  border-radius: 50%;
  background: var(--play-accent, #ffd66d);
  color: var(--box-ink);
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}

.flow-step div {
  border: 3px solid rgba(0,0,0,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  padding: 10px;
}

.flow-step small {
  color: var(--box-border);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.flow-step h3 {
  margin: 1px 0 5px;
  color: var(--box-ink);
  font-size: 1rem;
  line-height: 1.15;
}

.flow-step p {
  margin: 0;
  color: var(--box-ink);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.32;
}

.story-title {
  max-width: 780px;
  margin: 0 auto 18px;
  text-align: center;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
}

.storybook {
  width: min(940px, 100%);
  min-height: 900px;
  margin: 0 auto;
  position: relative;
  display: grid;
  gap: 18px;
  justify-items: center;
}

.speech {
  width: 100%;
  min-height: 106px;
  border: 7px solid var(--box-border);
  background: var(--box-bg);
  color: var(--box-ink);
  padding: 16px 20px;
  font-family: var(--kingdom-font);
  font-size: clamp(1rem, 2vw, 1.32rem);
  line-height: 1.62;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.speech-row {
  width: min(760px, calc(100% - 24px));
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  justify-self: center;
  z-index: 2;
}

.speech-row.right {
  grid-template-columns: minmax(0, 1fr) 130px;
}

.speech-row .speech {
  width: 100%;
}

.story-character {
  width: 130px;
  height: 170px;
  object-fit: contain;
  display: block;
  align-self: end;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.18));
}

.story-character.missing {
  visibility: hidden;
}

.speech.intro,
.speech.lesson { text-align: center; }

.audio-control {
  width: 126px;
  height: 31px;
  display: inline-grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  border: 1px solid #111;
  background: rgba(255, 255, 255, 0.18);
  vertical-align: middle;
}

.audio-control span:first-child {
  width: 0;
  height: 0;
  margin-left: 9px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #050505;
}

.audio-control span:last-child {
  height: 2px;
  margin-right: 10px;
  background: #333;
}

.video-box {
  width: min(440px, 74vw);
  text-align: center;
  z-index: 2;
}

.generated-lesson-video {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 5px solid white;
  background: #101333;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.video-box.has-generated-video .generated-lesson-video {
  display: block;
}

.video-box.has-generated-video .lesson-scene-player {
  display: none;
}

.lesson-scene-player {
  height: 250px;
  position: relative;
  overflow: hidden;
  border: 5px solid white;
  background: #101333;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.lesson-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 360ms ease;
}

.lesson-scene.active {
  opacity: 1;
}

.lesson-scene img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.05);
}

.lesson-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.42));
}

.scene-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.scene-symbol {
  position: absolute;
  right: 22px;
  top: 20px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 4px solid var(--black);
  border-radius: 50%;
  background: #ffd66d;
  color: #11144d;
  font-size: 1.8rem;
  font-weight: 900;
  box-shadow: 4px 5px 0 rgba(0,0,0,.18);
}

.scene-chip {
  position: absolute;
  left: 16px;
  top: 16px;
  border: 3px solid var(--black);
  background: rgba(255, 247, 223, .94);
  color: #11144d;
  padding: 7px 10px;
  font-size: .82rem;
  font-weight: 900;
}

.scene-2 .scene-symbol {
  background: #ff9b7c;
}

.scene-3 .scene-symbol {
  background: #9de0ff;
}

.scene-4 .scene-symbol {
  background: #9fe3a8;
}

.caption-card {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  border: 4px solid var(--black);
  background: rgba(143, 138, 220, 0.95);
  color: #07083b;
  font-family: var(--kingdom-font);
  padding: 9px 11px;
  text-align: left;
  font-weight: 900;
  line-height: 1.25;
}

.caption-card b {
  display: block;
  color: #fff;
  text-shadow: 1px 1px 0 #111;
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.caption-card span {
  display: block;
  margin-top: 3px;
  font-size: 1rem;
}

.lesson-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  height: 6px;
  background: #9e47c5;
  transform-origin: left;
  transform: scaleX(0);
}

.lesson-scene.active img { animation: gentleZoom 4s ease-out both; }
.lesson-progress.run { animation: lessonProgress 16s linear both; }

@keyframes gentleZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1.01); }
}

@keyframes lessonProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.video-button {
  margin-top: 9px;
  border: 3px solid var(--black);
  background: var(--purple);
  color: #050505;
  padding: 8px 12px;
  font-weight: 900;
}

.video-box small {
  display: block;
  margin-top: 5px;
  color: #253b2e;
}

.applications-card,
.quiz-card,
.completion-card,
.reflection-card {
  width: min(1020px, 100%);
  margin: 22px auto 0;
  border: 5px solid var(--box-border);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 252, 239, .96), rgba(255, 243, 211, .94)),
    var(--box-bg);
  color: var(--box-ink);
  padding: 20px;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .14);
  font-family: "Nunito", Arial, sans-serif;
}

.applications-card {
  margin-top: 4px;
  z-index: 2;
}

.applications-card h2,
.quiz-card h2,
.completion-card h2,
.reflection-card h2 {
  margin: 0 0 12px;
  font-family: var(--kingdom-font);
  color: var(--box-ink);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.05;
}

.application-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.application-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 3px solid rgba(0, 0, 0, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .8);
  padding: 12px;
}

.application-item > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 3px solid var(--box-border);
  border-radius: 50%;
  background: var(--play-accent, #ffd66d);
  color: var(--box-ink);
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .14);
}

.application-item b {
  display: block;
  margin-bottom: 4px;
  color: var(--box-ink);
  font-weight: 900;
}

.application-item p,
.quiz-head p,
.completion-card p,
.reflection-card p {
  margin: 0;
  color: var(--box-ink);
  font-weight: 850;
  line-height: 1.35;
}

.quiz-head {
  margin-bottom: 16px;
}

.quiz-head span {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--box-border);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quiz-questions {
  display: grid;
  gap: 14px;
}

.quiz-question {
  border: 3px solid rgba(0, 0, 0, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .8);
  padding: 14px;
}

.quiz-question h3 {
  margin: 0 0 10px;
  color: var(--box-ink);
  font-size: 1.05rem;
  line-height: 1.25;
}

.quiz-options {
  display: grid;
  gap: 8px;
}

.quiz-options button {
  width: 100%;
  border: 3px solid var(--box-border);
  border-radius: 10px;
  background: #fff9e8;
  color: var(--box-ink);
  padding: 10px 12px;
  text-align: left;
  font-weight: 900;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08);
}

.quiz-options button:hover {
  background: #fff1c1;
}

.quiz-options button.selected {
  outline: 4px solid rgba(255, 214, 109, .48);
}

.quiz-options button.correct {
  border-color: #337b42;
  background: #d9ffd6;
}

.quiz-options button.wrong {
  border-color: #a93f31;
  background: #ffe1dd;
}

.quiz-result {
  margin: 8px 0 0;
  font-weight: 900;
}

.quiz-result.correct { color: #1f6b35; }
.quiz-result.wrong { color: #8e3026; }

.quiz-summary,
.completion-status {
  margin-top: 14px;
  border: 3px solid rgba(0, 0, 0, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .8);
  padding: 12px;
  color: var(--box-ink);
  font-weight: 900;
}

.quiz-summary.passed {
  border-color: #337b42;
  background: #dcffd9;
}

.complete-button {
  margin-top: 16px;
  border: 4px solid var(--box-border);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--play-accent, #ffd66d), #9e47c5);
  color: var(--box-ink);
  padding: 12px 20px;
  font-weight: 900;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .2);
}

.complete-button:disabled {
  opacity: .55;
  filter: grayscale(.25);
  cursor: not-allowed;
}

.reflection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.reflection-grid label {
  display: grid;
  gap: 7px;
  color: var(--box-ink);
  font-weight: 900;
}

.reflection-grid span {
  line-height: 1.2;
}

.reflection-grid textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 3px solid var(--box-border);
  border-radius: 12px;
  background: #fffdf4;
  color: var(--box-ink);
  padding: 10px;
  font: inherit;
  font-weight: 850;
  line-height: 1.3;
}

.reflection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.favorite-button,
.favorite-card-button {
  border: 3px solid #2b0e36;
  border-radius: 999px;
  background: #fff9e8;
  color: #2b0e36;
  padding: 10px 14px;
  font-weight: 1000;
  box-shadow: 0 4px 0 rgba(43,14,54,.16);
}

.favorite-button.active,
.favorite-card-button.active {
  background: linear-gradient(180deg, #fff2a8, #ffb703);
  color: #3a2900;
}

.arrow-down {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 3px solid var(--black);
  border-radius: 50%;
  background: #7040c0;
  color: #2a2518;
  font-size: 5rem;
  line-height: 1;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.16);
}

.play-card {
  width: min(1020px, 100%);
  margin: 22px auto 0;
  border: 6px solid var(--box-border);
  border-radius: 8px;
  background: var(--play-surface, rgba(251, 255, 248, 0.94));
  box-shadow: 0 18px 44px rgba(46, 89, 58, 0.18);
  overflow: hidden;
  font-family: var(--play-font, "Nunito", Arial, sans-serif);
}

.play-head {
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 20px 26px;
  border-bottom: 4px solid var(--play-accent, #40c884);
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,0));
}

.play-head h2 {
  margin: 0;
  font-family: var(--play-font, var(--kingdom-font));
  color: var(--play-accent, var(--wood));
  font-size: clamp(1.7rem, 4vw, 2.65rem);
}

.play-head p { margin: 5px 0 0; color: var(--play-text, #60725c); }

.stats {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stats span {
  min-width: 92px;
  border: 2px solid var(--play-accent, rgba(36, 89, 56, 0.22));
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  padding: 10px 12px;
  color: #344734;
  text-align: center;
  font-size: 0.88rem;
}

.play-body {
  min-height: 420px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.16)), var(--play-surface, #ffffff);
  color: var(--play-text, #203b2c);
}

.embedded-game-shell {
  width: 100%;
  min-height: min(720px, 92vh);
  border: 4px solid var(--play-accent, #ffd66d);
  border-radius: 28px;
  overflow: hidden;
  background: #101333;
  box-shadow: 0 18px 42px rgba(0,0,0,.24);
}

.embedded-game-frame {
  display: block;
  width: 100%;
  height: min(720px, 92vh);
  border: 0;
  background: #fff;
}

@supports (height: 100dvh) {
  .embedded-game-shell {
    min-height: min(720px, 92dvh);
  }

  .embedded-game-frame {
    height: min(720px, 92dvh);
  }
}

.new-quest-game {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(260px, .95fr);
  gap: 18px;
  min-height: 480px;
  border: 4px solid rgba(255,255,255,.82);
  border-radius: 28px;
  padding: 18px;
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,.48), transparent 18%),
    radial-gradient(circle at 82% 14%, rgba(255,255,255,.32), transparent 16%),
    linear-gradient(135deg, var(--nq-a), var(--nq-b) 58%, var(--nq-c));
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
  color: #1d1730;
  overflow: hidden;
}

.nq-stage,
.nq-controls {
  position: relative;
  border: 3px solid rgba(255,255,255,.8);
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
}

.nq-stage {
  min-height: 390px;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: hidden;
}

.nq-stage::before {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  border: 4px dashed rgba(255,255,255,.72);
  opacity: .72;
}

.nq-orbit {
  position: absolute;
  width: 265px;
  height: 265px;
  border-radius: 50%;
  transition: transform .45s ease;
}

.nq-orbit span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nq-b), var(--nq-c));
  color: #182033;
  font-weight: 1000;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
  transform: rotate(calc(var(--i) * 90deg)) translate(132px) rotate(calc(var(--i) * -90deg));
}

.nq-core {
  position: relative;
  z-index: 2;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border: 5px solid white;
  border-radius: 34px;
  background: radial-gradient(circle at 34% 24%, #fff, var(--nq-c));
  font-size: 68px;
  box-shadow: 0 0 34px rgba(255,255,255,.8), 0 18px 24px rgba(0,0,0,.18);
  transition: transform .28s ease, filter .28s ease;
}

.nq-core.nq-good {
  transform: scale(1.1) rotate(4deg);
  filter: brightness(1.14) saturate(1.18);
}

.nq-core.nq-risk {
  transform: scale(.95) rotate(-5deg);
  filter: grayscale(.35) brightness(.88);
}

.nq-scene-text {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 3;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  padding: 14px;
  text-align: center;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}

.nq-scene-text small {
  display: block;
  margin-bottom: 4px;
  color: var(--nq-a);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nq-scene-text h3 {
  margin: 0;
  font-family: var(--kingdom-font);
  color: #221a36;
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
}

.nq-scene-text p {
  margin: 6px 0 0;
  color: #514864;
}

.nq-controls {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 18px;
}

.nq-meter-label,
.nq-mini-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  color: var(--nq-a);
  font-weight: 1000;
}

.nq-mini-stats span {
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  padding: 8px 10px;
}

.nq-meter {
  height: 22px;
  border: 3px solid white;
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  overflow: hidden;
}

.nq-meter span {
  display: block;
  height: 100%;
  width: 35%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--nq-a), var(--nq-b), var(--nq-c));
  transition: width .28s ease;
}

.nq-choices {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.nq-choice {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #2c2541;
  padding: 12px;
  text-align: left;
  font-family: var(--body-font);
  font-weight: 1000;
  line-height: 1.25;
  box-shadow: 0 5px 0 rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.nq-choice span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nq-b), var(--nq-c));
  color: #171226;
}

.nq-choice:hover {
  transform: translateY(-2px);
}

.nq-choice:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}

.nq-choice.selected {
  background: #fff9df;
  outline: 4px solid rgba(255,255,255,.72);
}

.nq-choice:disabled {
  cursor: default;
}

.nq-choice.replay {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
  background: linear-gradient(135deg, var(--nq-a), var(--nq-c));
  color: white;
}

.new-quest-game.complete .nq-stage {
  animation: nqCompletePulse 1s ease-in-out infinite alternate;
}

@keyframes nqCompletePulse {
  from { filter: saturate(1); }
  to { filter: saturate(1.22) brightness(1.05); }
}

.start-panel {
  width: min(680px, 100%);
  margin: 0 auto 18px;
  border: 3px solid var(--play-accent, rgba(36, 89, 56, 0.22));
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  padding: 24px;
  text-align: center;
  box-shadow: 0 14px 30px rgba(46, 89, 58, 0.14);
}

.start-panel h3 {
  margin: 0 0 8px;
  font-family: var(--play-font, var(--kingdom-font));
  color: var(--play-surface, var(--wood));
  font-size: 1.8rem;
}

.difficulty-row,
.target-row,
.gate-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.difficulty-row button,
.start-button,
.target-chip,
.gate,
.token,
.person,
.lantern,
.gem,
.seat,
.player,
.foothold,
.coin,
.plant,
.moon,
.tap-button,
.dragon-button {
  border: 1px solid rgba(36, 89, 56, 0.28);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf5, #eadbb8);
  color: #203b2c;
  padding: 11px 14px;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}

.token,
.person,
.plant,
.lantern,
.gem,
.moon,
.coin {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  text-align: center;
}

.token span,
.person span,
.plant span,
.lantern span,
.gem span,
.moon span,
.coin span {
  display: block;
  max-width: 100%;
}

.difficulty-row button.active,
.selected {
  border-color: var(--play-accent, #ffd66d);
  background: linear-gradient(180deg, #fff3a6, #d694ff);
  color: #1c1032;
  box-shadow: 0 0 0 4px rgba(255, 214, 109, .35), 0 5px 0 rgba(0,0,0,.18);
  transform: translateY(-2px);
}

.start-button {
  margin-top: 16px;
  border-color: var(--play-accent, #40c884);
  background: var(--play-accent, #40c884);
  color: #092a1a;
}

.arena { display: grid; gap: 18px; }

.token-sprite,
.scene-sprite,
.slot-sprite {
  display: block;
  flex: 0 0 auto;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.18));
}

.token-sprite {
  width: 48px;
  height: 48px;
  margin: 0 auto 7px;
}

.scene-sprite {
  width: min(120px, 26vw);
  height: min(120px, 26vw);
  margin: 0 auto 10px;
}

.slot-sprite {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
}

.creative-grid,
.crown-stage,
.lantern-field,
.pairs,
.nature-grid,
.moon-lights,
.runner-track,
.signal-sky,
.emotion-web,
.inn-guests,
.fountain-grid,
.harbor-system,
.wave-cave,
.cave-path,
.bridge-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 12px;
}

.token,
.person,
.lantern,
.gem,
.seat,
.player,
.foothold,
.coin,
.plant,
.moon {
  min-height: 68px;
  box-shadow: 0 8px 16px rgba(36, 89, 56, 0.12);
}

.complete {
  background: linear-gradient(180deg, #fff8c8, #83e2c3);
  border-color: var(--play-accent, #ffd66d);
  color: #10251d;
  transform: scale(0.98);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.42), 0 3px 0 rgba(0,0,0,.14);
}

.token:disabled,
.person:disabled,
.plant:disabled,
.target-chip:disabled {
  cursor: default;
  opacity: .9;
}

.feedback {
  min-height: 32px;
  margin-top: 14px;
  color: var(--play-text, #fff);
  text-align: center;
  font-weight: 900;
}

.path-target,
.sentence,
.order-ticket,
.scale,
.potion,
.maze-board,
.clock-face,
.mountain,
.gem-field,
.table,
.pass-field,
.bridge-segments,
.forge-board,
.time-lab,
.timeline-split,
.journey-map,
.shield-readout,
.portal-preview,
.digital-world,
.system-readout,
.market-score,
.dragon-den {
  min-height: 120px;
  border: 1px solid rgba(36, 89, 56, 0.22);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  padding: 16px;
  font-weight: 900;
}

.gem-field { position: relative; min-height: 250px; }
.gem { position: absolute; left: var(--x); top: var(--y); background: #f3c84d; }
.table, .pass-field { display: grid; place-items: center; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.maze-board { position: relative; background-size: 40px 40px; background-image: linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px); }
.hero-dot { position: absolute; left: 25px; top: 25px; width: 34px; height: 34px; border-radius: 50%; background: var(--purple); transition: transform 180ms ease; }
.bubble { width: 90px; height: 90px; margin: 18px auto; border-radius: 50%; background: radial-gradient(circle, #b6f5ff, #7a9ee8); transition: transform 200ms ease; }
.clock-face { width: 190px; height: 190px; margin: 0 auto; border: 8px solid var(--wood); border-radius: 50%; position: relative; }
.clock-hand { position: absolute; left: 50%; top: 50%; width: 6px; height: 70px; background: var(--ink); transform-origin: bottom; transition: transform 220ms ease; }
.dragon-button { min-height: 150px; border-radius: 50%; background: #e89a78; font-size: 1.3rem; }
.scale { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; }
.forge-slots, .timeline-split, .fountain-grid, .harbor-system { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.forge-slot, .need-card {
  min-height: 82px;
  display: grid;
  place-items: center;
  border: 3px solid var(--box-border);
  background: rgba(255, 255, 255, .68);
  color: var(--box-ink);
  font-weight: 900;
  text-transform: capitalize;
}
.heat-meter, .heat-meter span {
  display: block;
  height: 16px;
  border-radius: 999px;
}
.heat-meter { margin: 14px 0; border: 2px solid var(--box-border); background: rgba(0,0,0,.14); overflow: hidden; }
.heat-meter span { width: 0; background: linear-gradient(90deg, #ffe27a, #ff7f50); transition: width 220ms ease; }
.crown { display: block; font-size: 2rem; }
.person meter, .plant meter, .need-card meter, .digital-world meter, .dragon-den meter, #rush { width: 100%; margin-top: 8px; }
.signal-sky .lantern { background: #fff1a4; }
.rock {
  min-height: 76px;
  border: 3px solid #2d2642;
  border-radius: 8px;
  background: #635677;
  color: white;
  font-weight: 900;
}
.timeline-split > div {
  min-height: 120px;
  padding: 16px;
  border: 3px solid var(--box-border);
  background: rgba(255,255,255,.72);
}
.wave { background: linear-gradient(90deg, #ffffff, #bcd7ff); }
.digital-world, .portal-preview, .shield-readout, .system-readout, .market-score { text-align: center; }
.clock-hand { transform: translate(-50%, -100%) rotate(0deg); }

.compliment-castle-game {
  position: relative;
  min-height: min(680px, 94vh);
  overflow: hidden;
  color: #2d174d;
  font-family: "Nunito", Arial, sans-serif;
  border: 5px solid #fff;
  border-radius: 32px;
  background: linear-gradient(180deg, #fff8ff, #f6eaff);
  box-shadow: 0 25px 70px rgba(72, 31, 120, .35);
}

.compliment-castle-game .hidden {
  display: none;
}

.cc-sky,
.cc-castle-bg {
  position: absolute;
  pointer-events: none;
}

.cc-sky {
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.85), transparent 7%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.6), transparent 8%),
    linear-gradient(180deg, #b98cff 0%, #f3c1ff 45%, #ffe0a3 100%);
  z-index: 0;
}

.cc-castle-bg {
  bottom: 0;
  width: 100%;
  height: 230px;
  background: linear-gradient(180deg, #8051bd, #543384);
  clip-path: polygon(0 45%, 8% 45%, 8% 25%, 15% 25%, 15% 45%, 25% 45%, 25% 18%, 34% 18%, 34% 45%, 43% 45%, 43% 8%, 57% 8%, 57% 45%, 66% 45%, 66% 18%, 75% 18%, 75% 45%, 85% 45%, 85% 25%, 92% 25%, 92% 45%, 100% 45%, 100% 100%, 0 100%);
  opacity: .28;
  z-index: 1;
}

.cc-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cc-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.cc-title-box,
.cc-pill,
.cc-panel,
.cc-start-card {
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 20px rgba(75, 42, 120, .15);
}

.cc-title-box {
  padding: 12px 18px;
  border-radius: 22px;
}

.cc-title-box h2,
.cc-start-card h2,
.cc-forge-title {
  margin: 0;
  font-family: "Baloo 2", var(--kingdom-font);
  line-height: 1;
  color: #5a2da0;
  letter-spacing: 0;
}

.cc-title-box h2 {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
}

.cc-title-box p {
  margin: 3px 0 0;
  color: #7b4da6;
  font-size: .9rem;
  font-weight: 900;
}

.cc-stats {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.cc-pill {
  padding: 9px 13px;
  border-radius: 999px;
  color: #5a2da0;
  font-weight: 900;
}

.cc-main-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.05fr);
  gap: 16px;
  min-height: 0;
  flex: 1;
}

.cc-panel {
  min-height: 0;
  padding: 16px;
  border-radius: 26px;
}

.cc-scenario-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.cc-character {
  display: grid;
  place-items: center;
  min-height: 130px;
  font-size: 5.5rem;
  filter: drop-shadow(0 10px 8px rgba(68,36,110,.2));
  animation: ccFloat 2.4s ease-in-out infinite;
}

@keyframes ccFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.cc-scenario-text {
  border: 2px solid #ebd8ff;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fff4ff);
  padding: 15px;
  font-size: 1.06rem;
  font-weight: 900;
  line-height: 1.35;
}

.cc-lesson-box {
  border: 2px solid #ffde86;
  border-radius: 18px;
  background: #fff9e8;
  color: #5c4875;
  padding: 12px;
  font-size: .9rem;
  line-height: 1.35;
  font-weight: 800;
}

.cc-forge-title {
  margin-bottom: 6px;
  font-size: 1.65rem;
}

.cc-forge {
  display: grid;
  gap: 10px;
}

.cc-word-group h3 {
  margin: 5px 0 8px;
  color: #684499;
  font-size: .95rem;
  font-weight: 900;
}

.cc-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cc-option {
  border: 0;
  border-radius: 999px;
  background: #efe0ff;
  color: #5a2da0;
  padding: 9px 12px;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 4px 0 #c7a8ef;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.cc-option:hover {
  transform: translateY(-2px);
}

.cc-option.selected {
  background: #ffd166;
  color: #4a2f00;
  box-shadow: 0 4px 0 #d49b1f;
  transform: translateY(-2px);
}

.cc-output {
  min-height: 86px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #46266f, #7d42c2);
  color: #fff;
  padding: 14px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: inset 0 0 18px rgba(255,255,255,.13);
}

.cc-meter-wrap {
  margin-top: 10px;
}

.cc-meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #5a2da0;
  font-size: .82rem;
  font-weight: 900;
}

.cc-meter {
  height: 18px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #e6d5ff;
}

.cc-meter [data-cc-meter-fill] {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7eb3, #ffd166, #7bdff2);
  transition: width .45s ease;
}

.cc-feedback {
  min-height: 45px;
  margin-top: 8px;
  border: 2px solid #ead8ff;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  color: #4f337a;
  padding: 10px;
  font-size: .9rem;
  font-weight: 900;
}

.cc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.cc-btn {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #7b4cff, #b85cff);
  color: #fff;
  padding: 12px 16px;
  font-family: "Nunito", Arial, sans-serif;
  font-size: .95rem;
  font-weight: 900;
  box-shadow: 0 6px 0 #5f2aa3;
  transition: transform .15s ease, box-shadow .15s ease;
}

.cc-btn:hover {
  transform: translateY(-2px);
}

.cc-btn:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #5f2aa3;
}

.cc-btn.secondary {
  background: linear-gradient(135deg, #ff9f1c, #ffbf69);
  color: #4a2a00;
  box-shadow: 0 6px 0 #c97900;
}

.cc-screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.7), transparent 35%),
    linear-gradient(135deg, #8f5cff, #f08cff, #ffd166);
}

.cc-start-card {
  width: min(650px, 92vw);
  border: 4px solid #fff;
  border-radius: 34px;
  padding: 28px;
  text-align: center;
  background: rgba(255,255,255,.88);
  box-shadow: 0 24px 55px rgba(60, 25, 105, .32);
}

.cc-start-card h2 {
  font-size: clamp(2.3rem, 7vw, 3rem);
}

.cc-start-card p {
  color: #5b437a;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.45;
}

.cc-big-icon {
  margin-bottom: 5px;
  font-size: 5.6rem;
}

.cc-sparkle {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  font-size: 1.4rem;
  animation: ccPop .8s ease forwards;
}

@keyframes ccPop {
  0% { transform: scale(.4) translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.4) translateY(-50px); opacity: 0; }
}

@media (max-width: 760px) {
  .compliment-castle-game {
    min-height: 96vh;
    overflow-y: auto;
  }

  .cc-main-grid {
    grid-template-columns: 1fr;
  }

  .cc-top-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .cc-stats {
    justify-content: flex-start;
  }

  .cc-character {
    min-height: 92px;
    font-size: 3.75rem;
  }
}

.share-crown-game {
  position: relative;
  min-height: min(680px, 94vh);
  overflow: hidden;
  color: #2d174d;
  font-family: "Nunito", Arial, sans-serif;
  border: 5px solid #fff;
  border-radius: 34px;
  background: linear-gradient(180deg, #fff8ff, #f4eaff);
  box-shadow: 0 25px 70px rgba(45, 23, 77, .35);
}

.share-crown-game .hidden {
  display: none;
}

.sc-bg,
.sc-floor {
  position: absolute;
  pointer-events: none;
}

.sc-bg {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.65), transparent 25%),
    linear-gradient(180deg, #bfa2ff 0%, #f9c5ff 55%, #ffe6a6 100%);
}

.sc-floor {
  bottom: -90px;
  left: -10%;
  z-index: 1;
  width: 120%;
  height: 250px;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at center, #7b4fc3, #4d2c83);
  opacity: .35;
}

.sc-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.sc-title-card,
.sc-pill,
.sc-panel,
.sc-screen-card {
  border: 2px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.84);
  box-shadow: 0 10px 22px rgba(69,36,115,.15);
}

.sc-title-card {
  border-radius: 24px;
  padding: 13px 18px;
}

.sc-title-card h2,
.sc-screen-card h2,
.sc-mission-title,
.sc-name {
  margin: 0;
  font-family: "Baloo 2", var(--kingdom-font);
  line-height: 1;
  color: #5c2ea6;
  letter-spacing: 0;
}

.sc-title-card h2 {
  font-size: clamp(1.75rem, 4vw, 2.2rem);
}

.sc-title-card p {
  margin: 4px 0 0;
  color: #7650a5;
  font-size: .9rem;
  font-weight: 900;
}

.sc-stats {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.sc-pill {
  border-radius: 999px;
  color: #5c2ea6;
  padding: 10px 13px;
  font-weight: 900;
}

.sc-arena {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(280px, .9fr);
  gap: 16px;
}

.sc-panel {
  min-height: 0;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 28px;
  padding: 16px;
}

.sc-throne-room {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 14px;
}

.sc-throne-room::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 5px double rgba(255,209,102,.42);
  border-radius: 28px;
  pointer-events: none;
}

.sc-player-card {
  position: relative;
  min-height: 185px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 3px solid #ead8ff;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #fff3ff);
  color: #2d174d;
  padding: 14px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(77,44,131,.1);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.sc-player-card:hover {
  transform: translateY(-3px);
}

.sc-player-card.active {
  border-color: #ffd166;
  box-shadow: 0 0 0 5px rgba(255,209,102,.35), 0 14px 24px rgba(77,44,131,.18);
  transform: translateY(-4px);
}

.sc-crown {
  position: absolute;
  top: 8px;
  right: 12px;
  display: none;
  font-size: 1.75rem;
  animation: scCrownPulse .8s ease-in-out infinite alternate;
}

.sc-player-card.active .sc-crown {
  display: block;
}

@keyframes scCrownPulse {
  from { transform: scale(1) rotate(-5deg); }
  to { transform: scale(1.15) rotate(6deg); }
}

.sc-avatar {
  margin-bottom: 6px;
  font-size: 3.4rem;
  filter: drop-shadow(0 7px 5px rgba(68,36,110,.18));
}

.sc-name {
  margin-bottom: 4px;
  font-size: 1.38rem;
}

.sc-need {
  min-height: 34px;
  color: #6e5985;
  font-size: .82rem;
  font-weight: 900;
}

.sc-turn-bar {
  display: block;
  height: 13px;
  margin-top: 9px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #eadcff;
}

.sc-turn-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7bdff2, #ffd166, #ff7eb3);
  transition: width .1s linear;
}

.sc-control-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-mission {
  border-radius: 22px;
  background: linear-gradient(135deg, #5c2ea6, #8d54d6);
  color: #fff;
  padding: 15px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: inset 0 0 18px rgba(255,255,255,.12);
}

.sc-mission-title {
  margin-bottom: 3px;
  color: #fff;
  font-size: 1.55rem;
}

.sc-meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #5c2ea6;
  font-weight: 900;
}

.sc-meter {
  height: 22px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #eadcff;
}

.sc-meter [data-sc-inclusion-fill] {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7eb3, #ffd166, #7bdff2);
  transition: width .25s ease;
}

.sc-feedback {
  min-height: 86px;
  border: 2px solid #ffda7a;
  border-radius: 20px;
  background: #fff9e8;
  color: #5a3d13;
  padding: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.sc-log {
  flex: 1;
  min-height: 90px;
  overflow: auto;
  border: 2px solid #ead8ff;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  color: #5b437a;
  padding: 12px;
  font-size: .88rem;
  font-weight: 800;
}

.sc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sc-btn {
  border: 0;
  border-radius: 17px;
  background: linear-gradient(135deg, #7b4cff, #b85cff);
  color: #fff;
  padding: 12px 15px;
  font-family: "Nunito", Arial, sans-serif;
  font-size: .95rem;
  font-weight: 900;
  box-shadow: 0 6px 0 #5f2aa3;
  transition: transform .15s ease, box-shadow .15s ease;
}

.sc-btn:hover {
  transform: translateY(-2px);
}

.sc-btn:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #5f2aa3;
}

.sc-btn.gold {
  background: linear-gradient(135deg, #ffb703, #ffd166);
  color: #4a2e00;
  box-shadow: 0 6px 0 #c98200;
}

.sc-screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.7), transparent 35%),
    linear-gradient(135deg, #5f4bff, #bd5fff, #ffd166);
}

.sc-screen-card {
  width: min(660px, 92vw);
  border: 4px solid #fff;
  border-radius: 34px;
  background: rgba(255,255,255,.9);
  padding: 28px;
  text-align: center;
  box-shadow: 0 24px 55px rgba(45, 23, 77, .32);
}

.sc-big {
  font-size: 5.5rem;
}

.sc-screen-card h2 {
  font-size: clamp(2.35rem, 7vw, 3rem);
}

.sc-screen-card p {
  color: #5b437a;
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.45;
}

.sc-spark {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  font-size: 1.5rem;
  animation: scRise .8s ease forwards;
}

@keyframes scRise {
  0% { opacity: 0; transform: scale(.4) translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) translateY(-55px); }
}

@media (max-width: 780px) {
  .share-crown-game {
    min-height: 96vh;
    overflow-y: auto;
  }

  .sc-arena {
    grid-template-columns: 1fr;
  }

  .sc-player-card {
    min-height: 150px;
  }

  .sc-avatar {
    font-size: 2.7rem;
  }
}

.apology-bridge-game {
  position: relative;
  min-height: min(690px, 94vh);
  overflow: hidden;
  color: #2b174c;
  font-family: "Nunito", Arial, sans-serif;
  border: 5px solid #fff;
  border-radius: 34px;
  background: linear-gradient(180deg, #eef1ff, #fff0dc);
  box-shadow: 0 25px 70px rgba(18, 20, 60, .38);
}

.apology-bridge-game .hidden {
  display: none;
}

.ab-sky,
.ab-mountains {
  position: absolute;
  pointer-events: none;
}

.ab-sky {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.65), transparent 23%),
    linear-gradient(180deg, #5e7ee9 0%, #9c7df4 45%, #ffd39a 100%);
}

.ab-mountains {
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 260px;
  background: linear-gradient(180deg, #39418f, #1e244f);
  clip-path: polygon(0 65%, 10% 35%, 22% 65%, 34% 25%, 48% 67%, 62% 32%, 75% 67%, 87% 38%, 100% 68%, 100% 100%, 0 100%);
  opacity: .45;
}

.ab-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.ab-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.ab-title-card,
.ab-pill,
.ab-panel,
.ab-screen-card {
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 24px rgba(30, 25, 82, .16);
}

.ab-title-card {
  border-radius: 24px;
  padding: 12px 18px;
}

.ab-title-card h2,
.ab-controls h2,
.ab-screen-card h2 {
  margin: 0;
  font-family: "Baloo 2", var(--kingdom-font);
  line-height: 1;
  color: #314097;
  letter-spacing: 0;
}

.ab-title-card h2 {
  font-size: clamp(1.75rem, 4vw, 2.2rem);
}

.ab-title-card p {
  margin: 4px 0 0;
  color: #5b5187;
  font-size: .9rem;
  font-weight: 900;
}

.ab-stats {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.ab-pill {
  border-radius: 999px;
  color: #314097;
  padding: 10px 13px;
  font-weight: 900;
}

.ab-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(390px, 1.15fr) minmax(300px, .85fr);
  gap: 14px;
}

.ab-panel {
  min-height: 0;
  border-radius: 28px;
  padding: 15px;
}

.ab-bridge-panel,
.ab-controls {
  display: flex;
  flex-direction: column;
}

.ab-bridge-panel {
  gap: 12px;
}

.ab-scenario {
  min-height: 90px;
  border-radius: 22px;
  background: linear-gradient(135deg, #314097, #6b55c8);
  color: #fff;
  padding: 14px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: inset 0 0 18px rgba(255,255,255,.12);
}

.ab-bridge-stage {
  position: relative;
  flex: 1;
  min-height: 250px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.45), transparent 20%),
    linear-gradient(180deg, #7d82e8, #bd82d8 55%, #4b326f);
}

.ab-cliff {
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 31%;
  height: 110px;
  background: linear-gradient(180deg, #605080, #2f2549);
}

.ab-cliff.left {
  left: 0;
  border-radius: 0 40px 0 0;
}

.ab-cliff.right {
  right: 0;
  border-radius: 40px 0 0 0;
}

.ab-void {
  position: absolute;
  bottom: 0;
  left: 28%;
  z-index: 1;
  width: 44%;
  height: 140px;
  background: linear-gradient(180deg, rgba(35,19,72,.2), rgba(15,8,35,.9));
}

.ab-bridge {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 92px;
  z-index: 4;
  height: 80px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 6px;
}

.ab-segment {
  position: relative;
  height: 30px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 10px;
  background: #4b375f;
  opacity: .4;
  transform: rotate(var(--tilt));
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease, opacity .35s ease;
}

.ab-segment.fixed {
  background: linear-gradient(135deg, #ffe08a, #ffb86c);
  box-shadow: 0 0 18px rgba(255,222,138,.8);
  opacity: 1;
  transform: rotate(0deg) translateY(-3px);
}

.ab-segment.shake {
  animation: abShake .35s ease;
}

@keyframes abShake {
  0%, 100% { transform: translateX(0) rotate(var(--tilt)); }
  25% { transform: translateX(-6px) rotate(var(--tilt)); }
  75% { transform: translateX(6px) rotate(var(--tilt)); }
}

.ab-character {
  position: absolute;
  bottom: 108px;
  z-index: 5;
  font-size: 3.15rem;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.25));
  transition: transform .5s ease;
}

.ab-character.player {
  left: 8%;
}

.ab-character.friend {
  right: 8%;
}

.ab-glow {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 3;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,233,145,.7), transparent 65%);
  opacity: .25;
  transform: translate(-50%, -50%);
  transition: opacity .4s ease;
}

.ab-controls {
  gap: 11px;
}

.ab-controls h2 {
  font-size: 1.65rem;
}

.ab-step-slots {
  display: grid;
  gap: 8px;
}

.ab-slot {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px dashed #a997df;
  border-radius: 16px;
  background: #f4edff;
  color: #5d5185;
  padding: 10px;
  font-weight: 900;
  gap: 8px;
}

.ab-slot.filled {
  border-color: #ffd166;
  border-style: solid;
  background: #fff9e8;
  color: #523d09;
}

.ab-choice-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 2px solid #eadcff;
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  padding: 10px;
}

.ab-choice {
  border: 0;
  border-radius: 999px;
  background: #e7dcff;
  color: #314097;
  padding: 9px 11px;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 4px 0 #b8a8e6;
  transition: transform .15s ease;
}

.ab-choice:hover {
  transform: translateY(-2px);
}

.ab-choice.used {
  opacity: .35;
  pointer-events: none;
}

.ab-meters {
  display: grid;
  gap: 9px;
}

.ab-meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #314097;
  font-size: .82rem;
  font-weight: 900;
}

.ab-meter {
  height: 18px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #e4dbff;
}

.ab-meter [data-ab-trust-fill],
.ab-meter [data-ab-strength-fill] {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7eb3, #ffd166, #7bdff2);
  transition: width .3s ease;
}

.ab-feedback {
  min-height: 76px;
  border: 2px solid #ffda7a;
  border-radius: 18px;
  background: #fff9e8;
  color: #5a3d13;
  padding: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.ab-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ab-btn {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #314097, #7058d6);
  color: #fff;
  padding: 11px 14px;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 6px 0 #232a70;
  transition: transform .15s ease, box-shadow .15s ease;
}

.ab-btn:hover {
  transform: translateY(-2px);
}

.ab-btn:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #232a70;
}

.ab-btn.gold {
  background: linear-gradient(135deg, #ffb703, #ffd166);
  color: #4a2e00;
  box-shadow: 0 6px 0 #c98200;
}

.ab-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.68), transparent 35%),
    linear-gradient(135deg, #26326f, #6a4bc4, #ffb86c);
}

.ab-screen-card {
  width: min(680px, 92vw);
  border: 4px solid #fff;
  border-radius: 34px;
  background: rgba(255,255,255,.92);
  padding: 28px;
  text-align: center;
  box-shadow: 0 24px 55px rgba(18,20,60,.35);
}

.ab-big {
  font-size: 5.35rem;
}

.ab-screen-card h2 {
  font-size: clamp(2.25rem, 7vw, 2.9rem);
}

.ab-screen-card p {
  color: #4f4775;
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.45;
}

.ab-spark {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  font-size: 1.5rem;
  animation: abRise .8s ease forwards;
}

@keyframes abRise {
  0% { opacity: 0; transform: scale(.4) translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) translateY(-55px); }
}

@media (max-width: 820px) {
  .apology-bridge-game {
    min-height: 96vh;
    overflow-y: auto;
  }

  .ab-main {
    grid-template-columns: 1fr;
  }

  .ab-bridge-stage {
    min-height: 260px;
  }
}

.listening-lanterns-game {
  position: relative;
  min-height: min(690px, 94vh);
  overflow: hidden;
  color: #1f1740;
  font-family: "Nunito", Arial, sans-serif;
  border: 5px solid #fff;
  border-radius: 34px;
  background: linear-gradient(180deg, #eef1ff, #fff1dc);
  box-shadow: 0 25px 70px rgba(10, 12, 45, .4);
}

.listening-lanterns-game .hidden {
  display: none;
}

.ll-sky,
.ll-stars,
.ll-hills {
  position: absolute;
  pointer-events: none;
}

.ll-sky {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.55), transparent 22%),
    linear-gradient(180deg, #18204f 0%, #44318f 48%, #ffbe82 100%);
}

.ll-stars {
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(#fff 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px);
  background-size: 45px 45px, 70px 70px;
  background-position: 0 0, 20px 30px;
  opacity: .35;
}

.ll-hills {
  bottom: -35px;
  left: -10%;
  z-index: 1;
  width: 120%;
  height: 180px;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at center, #1d285a, #101633);
  opacity: .8;
}

.ll-content {
  position: relative;
  z-index: 3;
  min-height: inherit;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.ll-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.ll-title-card,
.ll-pill,
.ll-panel,
.ll-screen-card {
  border: 2px solid rgba(255,255,255,.95);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 24px rgba(10,12,45,.18);
}

.ll-title-card {
  border-radius: 24px;
  padding: 12px 18px;
}

.ll-title-card h2,
.ll-controls h2,
.ll-story-title,
.ll-screen-card h2 {
  margin: 0;
  font-family: "Baloo 2", var(--kingdom-font);
  line-height: 1;
  color: #32298a;
  letter-spacing: 0;
}

.ll-title-card h2 {
  font-size: clamp(1.75rem, 4vw, 2.2rem);
}

.ll-title-card p {
  margin: 4px 0 0;
  color: #5d5780;
  font-size: .9rem;
  font-weight: 900;
}

.ll-stats {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.ll-pill {
  border-radius: 999px;
  color: #32298a;
  padding: 10px 13px;
  font-weight: 900;
}

.ll-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(390px, 1.15fr) minmax(300px, .85fr);
  gap: 14px;
}

.ll-panel {
  min-height: 0;
  border-radius: 28px;
  padding: 15px;
}

.ll-lantern-panel,
.ll-controls {
  display: flex;
  flex-direction: column;
}

.ll-lantern-panel {
  gap: 12px;
}

.ll-story-box {
  min-height: 92px;
  border-radius: 22px;
  background: linear-gradient(135deg, #2a2373, #6651cf);
  color: #fff;
  padding: 14px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: inset 0 0 18px rgba(255,255,255,.12);
}

.ll-story-title {
  margin-bottom: 3px;
  color: #fff;
  font-size: 1.45rem;
}

.ll-lantern-field {
  position: relative;
  flex: 1;
  min-height: 330px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 70%, rgba(255,209,102,.25), transparent 25%),
    linear-gradient(180deg, #18204f, #352878 58%, #0f1736);
}

.ll-listener,
.ll-speaker {
  position: absolute;
  bottom: 18px;
  z-index: 4;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.28));
}

.ll-listener {
  left: 50%;
  font-size: 3.9rem;
  transform: translateX(-50%);
}

.ll-speaker {
  left: 25px;
  font-size: 3.6rem;
}

.ll-lantern {
  position: absolute;
  z-index: 5;
  min-width: 118px;
  max-width: 150px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 18px;
  padding: 10px 11px;
  text-align: center;
  font-family: "Nunito", Arial, sans-serif;
  font-size: .82rem;
  font-weight: 900;
  user-select: none;
  animation: llFloatDown linear forwards;
}

.ll-lantern.key {
  background: linear-gradient(180deg, #fff3a3, #ffb703);
  color: #3f2a00;
  box-shadow: 0 0 22px rgba(255,209,102,.85);
}

.ll-lantern.noise {
  background: linear-gradient(180deg, #c6bdff, #7468e8);
  color: #fff;
  box-shadow: 0 0 18px rgba(145,130,255,.7);
}

@keyframes llFloatDown {
  from { transform: translateY(-70px) rotate(-2deg); opacity: 0; }
  10% { opacity: 1; }
  to { transform: translateY(430px) rotate(3deg); opacity: .9; }
}

.ll-controls {
  gap: 11px;
}

.ll-controls h2 {
  font-size: 1.65rem;
}

.ll-skill-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.ll-skill {
  border: 2px solid #d9ccff;
  border-radius: 18px;
  background: #f4edff;
  color: #51447a;
  padding: 10px;
  text-align: center;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ll-skill.done {
  border-color: #ffd166;
  background: #fff2bd;
  color: #4a3300;
  box-shadow: 0 0 12px rgba(255,209,102,.45);
}

.ll-meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #32298a;
  font-size: .82rem;
  font-weight: 900;
}

.ll-meter {
  height: 18px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #e4dbff;
}

.ll-meter [data-ll-focus-fill] {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7eb3, #ffd166, #7bdff2);
  transition: width .3s ease;
}

.ll-caught-box {
  min-height: 86px;
  border: 2px solid #ded4ff;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  color: #4f4775;
  padding: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.ll-feedback {
  min-height: 76px;
  border: 2px solid #ffda7a;
  border-radius: 18px;
  background: #fff9e8;
  color: #5a3d13;
  padding: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.ll-answers {
  display: grid;
  gap: 8px;
}

.ll-answer {
  border: 0;
  border-radius: 16px;
  background: #e7dcff;
  color: #32298a;
  padding: 10px 12px;
  text-align: left;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 4px 0 #b8a8e6;
  transition: transform .15s ease;
}

.ll-answer:hover {
  transform: translateY(-2px);
}

.ll-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ll-btn {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #32298a, #6b55d8);
  color: #fff;
  padding: 11px 14px;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 6px 0 #211963;
  transition: transform .15s ease, box-shadow .15s ease;
}

.ll-btn:hover {
  transform: translateY(-2px);
}

.ll-btn:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #211963;
}

.ll-btn.gold {
  background: linear-gradient(135deg, #ffb703, #ffd166);
  color: #4a2e00;
  box-shadow: 0 6px 0 #c98200;
}

.ll-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.65), transparent 35%),
    linear-gradient(135deg, #18204f, #4f3ca7, #ffb86c);
}

.ll-screen-card {
  width: min(690px, 92vw);
  border: 4px solid #fff;
  border-radius: 34px;
  background: rgba(255,255,255,.92);
  padding: 28px;
  text-align: center;
  box-shadow: 0 24px 55px rgba(10,12,45,.35);
}

.ll-big {
  font-size: 5.35rem;
}

.ll-screen-card h2 {
  font-size: clamp(2.25rem, 7vw, 2.9rem);
}

.ll-screen-card p {
  color: #4f4775;
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.45;
}

.ll-spark {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  font-size: 1.5rem;
  animation: llRise .8s ease forwards;
}

@keyframes llRise {
  0% { opacity: 0; transform: scale(.4) translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) translateY(-55px); }
}

@media (max-width: 830px) {
  .listening-lanterns-game {
    min-height: 96vh;
    overflow-y: auto;
  }

  .ll-main {
    grid-template-columns: 1fr;
  }

  .ll-lantern-field {
    min-height: 330px;
  }
}

.feelings-garden-game {
  position: relative;
  min-height: min(690px, 94vh);
  overflow: hidden;
  color: #173b2b;
  font-family: "Nunito", Arial, sans-serif;
  border: 5px solid #fff;
  border-radius: 34px;
  background: linear-gradient(180deg, #effff4, #fff4e7);
  box-shadow: 0 25px 70px rgba(22, 76, 52, .3);
}

.feelings-garden-game .hidden {
  display: none;
}

.fg-sky,
.fg-ground {
  position: absolute;
  pointer-events: none;
}

.fg-sky {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 48% 14%, rgba(255,255,255,.8), transparent 18%),
    linear-gradient(180deg, #9be7ff 0%, #d4f9d2 52%, #fff1c7 100%);
}

.fg-ground {
  bottom: -60px;
  left: -10%;
  z-index: 1;
  width: 120%;
  height: 250px;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at center, #45a868, #1f6b42);
  opacity: .9;
}

.fg-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.fg-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.fg-title-card,
.fg-pill,
.fg-panel,
.fg-screen-card {
  border: 2px solid rgba(255,255,255,.95);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 24px rgba(22, 76, 52, .16);
}

.fg-title-card {
  border-radius: 24px;
  padding: 12px 18px;
}

.fg-title-card h2,
.fg-controls h2,
.fg-screen-card h2 {
  margin: 0;
  font-family: "Baloo 2", var(--kingdom-font);
  line-height: 1;
  color: #247d4b;
  letter-spacing: 0;
}

.fg-title-card h2 {
  font-size: clamp(1.75rem, 4vw, 2.2rem);
}

.fg-title-card p {
  margin: 4px 0 0;
  color: #416854;
  font-size: .9rem;
  font-weight: 900;
}

.fg-stats {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.fg-pill {
  border-radius: 999px;
  color: #247d4b;
  padding: 10px 13px;
  font-weight: 900;
}

.fg-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(390px, 1.15fr) minmax(300px, .85fr);
  gap: 14px;
}

.fg-panel {
  min-height: 0;
  border-radius: 28px;
  padding: 15px;
}

.fg-garden-panel,
.fg-controls {
  display: flex;
  flex-direction: column;
}

.fg-garden-panel {
  gap: 12px;
}

.fg-scenario {
  min-height: 88px;
  border-radius: 22px;
  background: linear-gradient(135deg, #1f8c53, #52b788);
  color: #fff;
  padding: 14px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: inset 0 0 18px rgba(255,255,255,.15);
}

.fg-garden {
  position: relative;
  flex: 1;
  min-height: 330px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.65), transparent 18%),
    linear-gradient(180deg, #9be7ff 0%, #d5ffd7 50%, #5dbb73 100%);
}

.fg-sun {
  position: absolute;
  top: 22px;
  right: 35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 35px rgba(255, 209, 102, .9);
  transition: opacity .4s ease;
}

.fg-cloud {
  position: absolute;
  top: 45px;
  left: 40px;
  font-size: 3.45rem;
  opacity: .3;
  transition: opacity .4s ease;
}

.fg-soil {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 120px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #7a4e2b, #4d2f1c);
}

.fg-plant-zone {
  position: absolute;
  left: 50%;
  bottom: 82px;
  z-index: 3;
  width: 230px;
  height: 230px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateX(-50%);
}

.fg-plant {
  font-size: 5.75rem;
  transform-origin: bottom center;
  transition: transform .5s ease, opacity .5s ease;
  filter: drop-shadow(0 8px 7px rgba(0,0,0,.18));
}

.fg-plant.neutral {
  opacity: .65;
  transform: scale(.75);
}

.fg-plant.grow {
  opacity: 1;
  transform: scale(1.1);
  animation: fgBloom .7s ease;
}

.fg-plant.wilt {
  opacity: .65;
  transform: scale(.82) rotate(-7deg);
}

@keyframes fgBloom {
  0% { transform: scale(.7); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1.1); }
}

.fg-emotion-ripple {
  position: absolute;
  left: 50%;
  bottom: 105px;
  z-index: 2;
  width: 160px;
  height: 160px;
  border: 6px solid rgba(255,255,255,.6);
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-50%);
  animation: fgRipple .8s ease forwards;
}

@keyframes fgRipple {
  0% { opacity: .8; transform: translateX(-50%) scale(.3); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.5); }
}

.fg-controls {
  gap: 11px;
}

.fg-controls h2 {
  font-size: 1.65rem;
}

.fg-instructions {
  border: 2px solid #ffd166;
  border-radius: 18px;
  background: #fff9e8;
  color: #654707;
  padding: 11px;
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.35;
}

.fg-emotion-seeds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.fg-seed {
  border: 0;
  border-radius: 18px;
  background: #e9f8ed;
  color: #247d4b;
  padding: 11px;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 4px 0 #a8dcb8;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.fg-seed:hover {
  transform: translateY(-2px);
}

.fg-seed.selected {
  background: #ffd166;
  color: #4a3000;
  box-shadow: 0 4px 0 #c99517;
  transform: translateY(-2px);
}

.fg-response-box {
  display: grid;
  gap: 8px;
}

.fg-response {
  border: 0;
  border-radius: 16px;
  background: #e6f5ff;
  color: #24506b;
  padding: 10px 12px;
  text-align: left;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 4px 0 #a7d0e8;
  transition: transform .15s ease;
}

.fg-response:hover {
  transform: translateY(-2px);
}

.fg-response.selected {
  background: #caffbf;
  color: #1f5f35;
  box-shadow: 0 4px 0 #80bd76;
}

.fg-meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #247d4b;
  font-size: .82rem;
  font-weight: 900;
}

.fg-meter {
  height: 18px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d6f1dd;
}

.fg-meter [data-fg-balance-fill] {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7eb3, #ffd166, #7bdff2, #95d5b2);
  transition: width .3s ease;
}

.fg-feedback {
  min-height: 72px;
  border: 2px solid #c9ead3;
  border-radius: 18px;
  background: rgba(255,255,255,.8);
  color: #315544;
  padding: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.fg-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.fg-btn {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #247d4b, #52b788);
  color: #fff;
  padding: 11px 14px;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 6px 0 #196339;
  transition: transform .15s ease, box-shadow .15s ease;
}

.fg-btn:hover {
  transform: translateY(-2px);
}

.fg-btn:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #196339;
}

.fg-btn.gold {
  background: linear-gradient(135deg, #ffb703, #ffd166);
  color: #4a2e00;
  box-shadow: 0 6px 0 #c98200;
}

.fg-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.7), transparent 35%),
    linear-gradient(135deg, #8fd694, #79c7ff, #f7c6ff);
}

.fg-screen-card {
  width: min(700px, 92vw);
  border: 4px solid #fff;
  border-radius: 34px;
  background: rgba(255,255,255,.92);
  padding: 28px;
  text-align: center;
  box-shadow: 0 24px 55px rgba(22,76,52,.28);
}

.fg-big {
  font-size: 5.35rem;
}

.fg-screen-card h2 {
  font-size: clamp(2.25rem, 7vw, 2.9rem);
}

.fg-screen-card p {
  color: #416854;
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.45;
}

.fg-spark {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  font-size: 1.5rem;
  animation: fgRise .8s ease forwards;
}

@keyframes fgRise {
  0% { opacity: 0; transform: scale(.4) translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) translateY(-55px); }
}

@media (max-width: 830px) {
  .feelings-garden-game {
    min-height: 96vh;
    overflow-y: auto;
  }

  .fg-main {
    grid-template-columns: 1fr;
  }

  .fg-garden {
    min-height: 330px;
  }
}

.patience-potion-game,
.helping-bakery-game {
  position: relative;
  min-height: min(690px, 94vh);
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 34px;
  font-family: "Nunito", Arial, sans-serif;
}

.patience-potion-game .hidden,
.helping-bakery-game .hidden {
  display: none;
}

.patience-potion-game {
  color: #251640;
  background: linear-gradient(180deg, #f7f1ff, #e9fff8);
  box-shadow: 0 25px 70px rgba(24, 13, 60, .4);
}

.pp-bg,
.pp-bubbles-bg,
.hb-bg,
.hb-counter {
  position: absolute;
  pointer-events: none;
}

.pp-bg {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.55), transparent 20%),
    linear-gradient(180deg, #271456 0%, #5b35b1 48%, #40c9a2 100%);
}

.pp-bubbles-bg {
  inset: 0;
  z-index: 1;
  opacity: .35;
  background-image:
    radial-gradient(rgba(255,255,255,.55) 2px, transparent 2px),
    radial-gradient(rgba(255,255,255,.35) 3px, transparent 3px);
  background-size: 55px 55px, 90px 90px;
  background-position: 0 0, 35px 25px;
}

.pp-content,
.hb-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.pp-top,
.hb-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.pp-title-card,
.pp-pill,
.pp-panel,
.pp-screen-card,
.hb-title-card,
.hb-pill,
.hb-panel,
.hb-screen-card {
  border: 2px solid rgba(255,255,255,.95);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 24px rgba(24,13,60,.18);
}

.pp-title-card,
.hb-title-card {
  border-radius: 24px;
  padding: 12px 18px;
}

.pp-title-card h2,
.pp-controls h2,
.pp-screen-card h2,
.hb-title-card h2,
.hb-controls h2,
.hb-screen-card h2 {
  margin: 0;
  font-family: "Baloo 2", var(--kingdom-font);
  line-height: 1;
  letter-spacing: 0;
}

.pp-title-card h2,
.pp-controls h2,
.pp-screen-card h2 {
  color: #4c2ca3;
}

.pp-title-card h2,
.hb-title-card h2 {
  font-size: clamp(1.75rem, 4vw, 2.2rem);
}

.pp-title-card p,
.hb-title-card p {
  margin: 4px 0 0;
  font-size: .9rem;
  font-weight: 900;
}

.pp-title-card p { color: #645487; }
.hb-title-card p { color: #7a5a30; }

.pp-stats,
.hb-stats {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.pp-pill,
.hb-pill {
  border-radius: 999px;
  padding: 10px 13px;
  font-weight: 900;
}

.pp-pill { color: #4c2ca3; }
.hb-pill { color: #b45f06; }

.pp-main,
.hb-main {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 14px;
}

.pp-main { grid-template-columns: minmax(390px, 1.1fr) minmax(300px, .9fr); }
.hb-main { grid-template-columns: minmax(390px, 1.08fr) minmax(300px, .92fr); }

.pp-panel,
.hb-panel {
  min-height: 0;
  border-radius: 28px;
  padding: 15px;
}

.pp-lab-panel,
.pp-controls,
.hb-bakery-panel,
.hb-controls {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pp-challenge {
  min-height: 88px;
  border-radius: 22px;
  background: linear-gradient(135deg, #4c2ca3, #7c4dff);
  color: #fff;
  padding: 14px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: inset 0 0 18px rgba(255,255,255,.12);
}

.pp-lab {
  position: relative;
  flex: 1;
  min-height: 330px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.35), transparent 19%),
    linear-gradient(180deg, #24124f 0%, #48319b 55%, #142e38 100%);
}

.pp-shelf {
  position: absolute;
  bottom: 58px;
  left: 8%;
  z-index: 2;
  width: 84%;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9b6b3d, #5a3821);
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}

.pp-cauldron {
  position: absolute;
  left: 50%;
  bottom: 72px;
  z-index: 3;
  width: 250px;
  height: 190px;
  transform: translateX(-50%);
}

.pp-pot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 230px;
  height: 135px;
  overflow: hidden;
  border: 5px solid #59536f;
  border-radius: 30px 30px 70px 70px;
  background: linear-gradient(180deg, #2f2d45, #151421);
  transform: translateX(-50%);
}

.pp-liquid {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  height: 35%;
  border-radius: 50% 50% 40px 40px;
  background: linear-gradient(180deg, #7bdff2, #40c9a2);
  box-shadow: 0 0 28px rgba(123,223,242,.75);
  transition: height .45s ease, background .45s ease, box-shadow .3s ease;
}

.pp-steam {
  position: absolute;
  width: 18px;
  height: 65px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  filter: blur(4px);
  animation: ppSteamUp 2s ease-in-out infinite;
}

.pp-steam.one { left: 70px; top: 5px; }
.pp-steam.two { left: 120px; top: -5px; animation-delay: .5s; }
.pp-steam.three { left: 165px; top: 8px; animation-delay: 1s; }

@keyframes ppSteamUp {
  0% { transform: translateY(35px) scale(.6); opacity: 0; }
  40% { opacity: .7; }
  100% { transform: translateY(-30px) scale(1.25); opacity: 0; }
}

.pp-breath-circle {
  position: absolute;
  top: 35px;
  right: 38px;
  width: 115px;
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(123,223,242,.35));
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
  box-shadow: 0 0 30px rgba(123,223,242,.6);
  animation: ppBreathe 4s ease-in-out infinite;
}

@keyframes ppBreathe {
  0%, 100% { transform: scale(.85); }
  50% { transform: scale(1.15); }
}

.pp-timer-orb {
  position: absolute;
  top: 42px;
  left: 44px;
  width: 105px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: conic-gradient(#ffd166 var(--progress), rgba(255,255,255,.22) 0);
  color: #fff;
  font-family: "Baloo 2", var(--kingdom-font);
  font-size: 1.7rem;
  text-shadow: 0 2px 5px rgba(0,0,0,.35);
  box-shadow: 0 0 28px rgba(255,209,102,.55);
}

.pp-instructions,
.hb-instructions {
  border: 2px solid #ffd166;
  border-radius: 18px;
  background: #fff9e8;
  padding: 11px;
  color: #654707;
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.35;
}

.pp-sequence {
  min-height: 66px;
  border: 2px solid #d7caff;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  color: #4b3d69;
  padding: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.pp-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.pp-action,
.hb-option {
  border: 0;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.pp-action {
  border-radius: 18px;
  background: #ede5ff;
  color: #4c2ca3;
  padding: 14px 10px;
  box-shadow: 0 5px 0 #b8a6e8;
}

.pp-action:hover,
.hb-option:hover,
.pp-btn:hover,
.hb-btn:hover {
  transform: translateY(-2px);
}

.pp-action.ready {
  background: #caffbf;
  color: #1f5f35;
  box-shadow: 0 5px 0 #80bd76;
}

.pp-meter-label,
.hb-meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: .82rem;
  font-weight: 900;
}

.pp-meter-label { color: #4c2ca3; }
.hb-meter-label { color: #b45f06; }

.pp-meter,
.hb-meter {
  height: 18px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
}

.pp-meter { background: #e4dbff; }
.hb-meter { background: #ffe6bd; }

.pp-meter-fill,
.hb-meter-fill {
  height: 100%;
  width: 50%;
  transition: width .3s ease;
}

.pp-meter-fill { background: linear-gradient(90deg, #ff7eb3, #ffd166, #7bdff2, #40c9a2); }
.hb-meter-fill { background: linear-gradient(90deg, #ff7eb3, #ffd166, #2ec4b6); }

.pp-feedback,
.hb-feedback {
  min-height: 78px;
  border-radius: 18px;
  background: rgba(255,255,255,.8);
  padding: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.pp-feedback {
  border: 2px solid #d7caff;
  color: #4b3d69;
}

.hb-feedback {
  border: 2px solid #ffd9a0;
  color: #6a3a0a;
}

.pp-btn-row,
.hb-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.pp-btn,
.hb-btn {
  border: 0;
  border-radius: 16px;
  padding: 11px 14px;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.pp-btn {
  background: linear-gradient(135deg, #4c2ca3, #7c4dff);
  color: #fff;
  box-shadow: 0 6px 0 #332071;
}

.pp-btn.gold {
  background: linear-gradient(135deg, #ffb703, #ffd166);
  color: #4a2e00;
  box-shadow: 0 6px 0 #c98200;
}

.pp-screen,
.hb-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pp-screen {
  background:
    radial-gradient(circle at top, rgba(255,255,255,.68), transparent 35%),
    linear-gradient(135deg, #2d1b69, #6a3dcc, #40c9a2);
}

.pp-screen-card,
.hb-screen-card {
  width: min(710px, 92vw);
  border: 4px solid #fff;
  border-radius: 34px;
  background: rgba(255,255,255,.92);
  padding: 28px;
  text-align: center;
}

.pp-screen-card {
  box-shadow: 0 24px 55px rgba(24,13,60,.35);
}

.pp-big,
.hb-big {
  font-size: 5.35rem;
}

.pp-screen-card h2,
.hb-screen-card h2 {
  font-size: clamp(2.25rem, 7vw, 2.9rem);
}

.pp-screen-card p,
.hb-screen-card p {
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.45;
}

.pp-screen-card p { color: #5a4b76; }
.hb-screen-card p { color: #72511f; }

.pp-spark,
.hb-spark {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  font-size: 1.5rem;
  animation: ppRise .8s ease forwards;
}

@keyframes ppRise {
  0% { opacity: 0; transform: scale(.4) translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) translateY(-55px); }
}

.helping-bakery-game {
  color: #3b2300;
  background: linear-gradient(180deg, #fff8ec, #fff1d6);
  box-shadow: 0 25px 70px rgba(97, 54, 0, .3);
}

.hb-bg {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.75), transparent 12%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.55), transparent 14%),
    linear-gradient(180deg, #ffe6b5 0%, #fff4d9 45%, #ffd18a 100%);
}

.hb-counter {
  bottom: -40px;
  left: -5%;
  z-index: 1;
  width: 110%;
  height: 190px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #b56b35, #6c3a1e);
}

.hb-title-card h2,
.hb-controls h2,
.hb-screen-card h2 {
  color: #b45f06;
}

.hb-customer-card {
  min-height: 92px;
  border-radius: 22px;
  background: linear-gradient(135deg, #b45f06, #ff9f1c);
  color: #fff;
  padding: 14px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: inset 0 0 18px rgba(255,255,255,.16);
}

.hb-scene {
  position: relative;
  flex: 1;
  min-height: 330px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px),
    linear-gradient(180deg, #ffe8b8, #ffcc80 65%, #9a5428 65%);
  background-size: 45px 45px, 100% 100%;
}

.hb-customer {
  position: absolute;
  bottom: 95px;
  left: 52px;
  font-size: 5.35rem;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.22));
  transition: transform .3s ease;
}

.hb-speech {
  position: absolute;
  top: 35px;
  left: 34px;
  width: min(310px, calc(100% - 48px));
  border: 3px solid #ffbf69;
  border-radius: 24px;
  background: #fff;
  color: #6a3a0a;
  padding: 14px;
  font-weight: 900;
  line-height: 1.3;
}

.hb-speech::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 45px;
  border-width: 18px 14px 0 14px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.hb-tray {
  position: absolute;
  right: 58px;
  bottom: 88px;
  width: 260px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid #7a421f;
  border-radius: 28px;
  background: linear-gradient(180deg, #f7d9a8, #b87333);
  font-size: 4rem;
  box-shadow: 0 14px 25px rgba(0,0,0,.22);
}

.hb-help-label {
  position: absolute;
  right: 50px;
  bottom: 42px;
  width: 275px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #7a421f;
  padding: 8px;
  text-align: center;
  font-weight: 900;
}

.hb-station-title {
  margin-bottom: 6px;
  color: #8a520c;
  font-size: .88rem;
  font-weight: 900;
}

.hb-options {
  display: grid;
  gap: 8px;
}

.hb-option {
  border-radius: 16px;
  background: #fff0d6;
  color: #8a520c;
  padding: 10px 12px;
  text-align: left;
  box-shadow: 0 4px 0 #e0ad62;
}

.hb-option.selected {
  background: #cbf3f0;
  color: #1a6561;
  box-shadow: 0 4px 0 #75c7c1;
}

.hb-btn {
  background: linear-gradient(135deg, #b45f06, #ff9f1c);
  color: #fff;
  box-shadow: 0 6px 0 #7c3d00;
}

.hb-btn.teal {
  background: linear-gradient(135deg, #2ec4b6, #77e5dc);
  color: #053f3b;
  box-shadow: 0 6px 0 #1b8f85;
}

.hb-screen {
  background:
    radial-gradient(circle at top, rgba(255,255,255,.7), transparent 35%),
    linear-gradient(135deg, #ff9f1c, #ffbf69, #cbf3f0);
}

.hb-screen-card {
  box-shadow: 0 24px 55px rgba(97,54,0,.27);
}

@media (max-width: 830px) {
  .patience-potion-game,
  .helping-bakery-game {
    min-height: 96vh;
    overflow-y: auto;
  }

  .pp-main,
  .hb-main {
    grid-template-columns: 1fr;
  }

  .pp-lab,
  .hb-scene {
    min-height: 330px;
  }

  .hb-tray {
    right: 25px;
    width: 210px;
  }

  .hb-help-label {
    right: 22px;
    width: 220px;
  }
}

.truth-tower-game {
  position: relative;
  min-height: min(690px, 94vh);
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 34px;
  background: #1d1d37;
  color: #24180a;
  font-family: "Nunito", Arial, sans-serif;
  box-shadow: 0 25px 70px rgba(8, 8, 24, .42);
}

.truth-tower-game .hidden {
  display: none;
}

.tt-light-bg,
.tt-shadow-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tt-light-bg {
  z-index: 0;
  clip-path: polygon(0 0, 56% 0, 45% 100%, 0 100%);
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.7), transparent 18%),
    linear-gradient(180deg, #fff4b8 0%, #e8c66f 52%, #8a6532 100%);
}

.tt-shadow-bg {
  z-index: 0;
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 45% 100%);
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.16), transparent 16%),
    linear-gradient(180deg, #27284f 0%, #19192e 54%, #090916 100%);
}

.tt-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.tt-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.tt-title-card,
.tt-pill,
.tt-panel,
.tt-screen-card {
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 24px rgba(13,13,31,.2);
}

.tt-title-card {
  border-radius: 24px;
  padding: 12px 18px;
}

.tt-title-card h2,
.tt-panel h2,
.tt-screen-card h2 {
  margin: 0;
  color: #5b4016;
  font-family: "Baloo 2", var(--kingdom-font);
  line-height: 1;
}

.tt-title-card h2 {
  font-size: clamp(1.75rem, 4vw, 2.2rem);
}

.tt-title-card p {
  margin: 4px 0 0;
  color: #5a4b2c;
  font-size: .9rem;
  font-weight: 900;
}

.tt-stats {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.tt-pill {
  border-radius: 999px;
  color: #4f3510;
  padding: 10px 13px;
  font-weight: 900;
}

.tt-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(430px, 1.15fr) minmax(300px, .85fr);
  gap: 14px;
}

.tt-stage {
  min-height: 470px;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 10px;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255,249,205,.86) 0 47%, rgba(25,25,45,.92) 53% 100%);
  padding: 15px;
  box-shadow: 0 14px 28px rgba(8,8,24,.18);
}

.tt-timeline {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  gap: 10px;
  border-radius: 24px;
  padding: 12px;
}

.tt-timeline.truth {
  border: 3px solid #ffe486;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,236,143,.58));
}

.tt-timeline.shadow {
  border: 3px solid #73739b;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(18,18,36,.64));
  color: #f4f1ff;
}

.tt-timeline h3 {
  margin: 0;
  font-family: "Baloo 2", var(--kingdom-font);
  font-size: 1.25rem;
  line-height: 1;
}

.tt-timeline p {
  min-height: 76px;
  margin: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  padding: 10px;
  color: #3e2b13;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1.32;
}

.tt-timeline.shadow p {
  background: rgba(0,0,0,.28);
  color: #f7f0ff;
}

.tt-tower {
  align-self: end;
  width: min(150px, 80%);
  height: 285px;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 7px;
  padding: 12px;
  border-radius: 28px 28px 8px 8px;
  border: 5px solid currentColor;
  clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%);
}

.tt-tower.truth {
  color: #7e5717;
  background: linear-gradient(180deg, #fff6c8, #c79332);
}

.tt-tower.shadow {
  color: #111128;
  background: linear-gradient(180deg, #4f4f75, #171729);
}

.tt-tower span {
  min-height: 58px;
  border-radius: 10px;
  border: 3px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.28);
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}

.tt-tower.truth span.built {
  background: linear-gradient(180deg, #fff8b8, #ffd45d);
  box-shadow: 0 0 22px rgba(255,225,110,.9);
  transform: translateY(-4px);
}

.tt-tower.shadow span.cracked {
  background:
    linear-gradient(120deg, transparent 0 45%, rgba(0,0,0,.55) 45% 50%, transparent 50%),
    linear-gradient(180deg, #625f81, #2a2942);
  box-shadow: inset 0 0 18px rgba(0,0,0,.28);
  transform: rotate(-2deg);
}

.tt-elevator {
  display: grid;
  grid-template-rows: 1fr 86px 1fr;
  align-items: center;
  justify-items: center;
}

.tt-orb {
  grid-row: 2;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle, #fff var(--trust), #72708f);
  color: #17172d;
  font-family: "Baloo 2", var(--kingdom-font);
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 0 26px rgba(255,255,255,.64);
}

.tt-bridge-light {
  grid-row: 2;
  width: 12px;
  height: 180px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff1a3, #6d6b8d);
  opacity: .72;
  transform: translateY(118px);
  transition: background .25s ease, opacity .25s ease;
}

.tt-bridge-light.truth {
  background: linear-gradient(180deg, #fff7aa, #ffcd47);
  box-shadow: 0 0 26px rgba(255,221,96,.8);
}

.tt-bridge-light.shadow {
  background: linear-gradient(180deg, #484869, #111128);
  box-shadow: 0 0 20px rgba(0,0,0,.5);
}

.tt-bridge-light.compare {
  background: linear-gradient(180deg, #ffdf60 0 48%, #1f1f38 52% 100%);
}

.tt-panel {
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-radius: 28px;
  padding: 15px;
}

.tt-scene-card,
.tt-choice-card {
  border-radius: 18px;
  padding: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.tt-scene-card {
  background: linear-gradient(135deg, #5b4016, #d59b3d);
  color: #fff;
}

.tt-scene-card b,
.tt-choice-card b {
  display: block;
  margin-bottom: 4px;
  font-family: "Baloo 2", var(--kingdom-font);
  font-size: 1.2rem;
}

.tt-scene-card p,
.tt-choice-card p {
  margin: 0;
}

.tt-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.tt-preview {
  min-height: 86px;
  border: 0;
  border-radius: 18px;
  padding: 12px;
  text-align: left;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 5px 0 rgba(0,0,0,.18);
  transition: transform .15s ease, outline .15s ease;
}

.tt-preview:hover {
  transform: translateY(-2px);
}

.tt-preview span {
  display: block;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tt-preview b {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
}

.tt-preview.truth {
  background: #fff2a8;
  color: #50360d;
}

.tt-preview.shadow {
  background: #343451;
  color: #f4f0ff;
}

.tt-preview.active {
  outline: 4px solid rgba(255,255,255,.78);
}

.tt-choice-card {
  min-height: 102px;
  border: 3px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.78);
  color: #38280f;
}

.tt-meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #5b4016;
  font-size: .82rem;
  font-weight: 900;
}

.tt-meter {
  height: 18px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #4e4d68;
}

.tt-meter div {
  height: 100%;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3d355a, #ffd45d, #fff7aa);
  transition: width .3s ease;
}

.tt-feedback {
  min-height: 78px;
  border: 2px solid #e6c76f;
  border-radius: 18px;
  background: #fff9e8;
  color: #4d3510;
  padding: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.tt-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.tt-btn {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #5b4016, #d59b3d);
  color: #fff;
  padding: 11px 14px;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 6px 0 #38250d;
  transition: transform .15s ease, box-shadow .15s ease;
}

.tt-btn:hover {
  transform: translateY(-2px);
}

.tt-btn.gold {
  background: linear-gradient(135deg, #ffbf3f, #fff0a3);
  color: #3d290b;
  box-shadow: 0 6px 0 #b27b16;
}

.tt-btn.ghost {
  background: linear-gradient(135deg, #2b2b47, #68688e);
  color: #fff;
  box-shadow: 0 6px 0 #161626;
}

.tt-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(90deg, rgba(255,238,154,.94), rgba(255,238,154,.92) 48%, rgba(30,30,54,.95) 52%, rgba(18,18,33,.96)),
    linear-gradient(135deg, #fff0a3, #252543);
}

.tt-screen-card {
  width: min(720px, 92vw);
  border: 4px solid #fff;
  border-radius: 34px;
  background: rgba(255,255,255,.92);
  padding: 28px;
  text-align: center;
  box-shadow: 0 24px 55px rgba(8,8,24,.35);
}

.tt-big {
  font-size: 5.35rem;
}

.tt-screen-card h2 {
  font-size: clamp(2.25rem, 7vw, 2.9rem);
}

.tt-screen-card p {
  color: #4e3a1a;
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.45;
}

.tt-spark {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  font-size: 1.5rem;
  animation: ttRise .9s ease forwards;
}

@keyframes ttRise {
  0% { opacity: 0; transform: scale(.4) translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35) translateY(-58px); }
}

@media (max-width: 850px) {
  .truth-tower-game {
    min-height: 96vh;
    overflow-y: auto;
  }

  .tt-main {
    grid-template-columns: 1fr;
  }

  .tt-stage {
    min-height: 430px;
    grid-template-columns: 1fr;
  }

  .tt-elevator {
    display: none;
  }

  .tt-tower {
    height: 210px;
  }
}

.truth-tower-game {
  background: linear-gradient(180deg, #eef3ff, #fff3e8);
  color: #172033;
  box-shadow: 0 25px 70px rgba(12, 17, 40, .42);
}

.tt-bg,
.tt-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tt-bg {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.75), transparent 18%),
    linear-gradient(90deg, rgba(22,24,50,.85) 0 50%, rgba(255,230,158,.75) 50% 100%),
    linear-gradient(180deg, #111831, #3b4aa0 52%, #ffd89b);
}

.tt-stars {
  z-index: 1;
  opacity: .25;
  background-image: radial-gradient(rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 38px 38px;
}

.tt-title-card,
.tt-pill,
.tt-panel,
.tt-screen-card {
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 24px rgba(12,17,40,.18);
}

.tt-title-card h2,
.tt-controls h2,
.tt-screen-card h2 {
  color: #2f3c7e;
}

.tt-title-card p {
  color: #5f6172;
}

.tt-pill {
  color: #2f3c7e;
}

.tt-main {
  grid-template-columns: minmax(390px, 1.05fr) minmax(300px, .95fr);
}

.tt-tower-panel,
.tt-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tt-scenario {
  min-height: 92px;
  border-radius: 22px;
  background: linear-gradient(135deg, #172033, #2f3c7e);
  color: #fff;
  padding: 14px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: inset 0 0 18px rgba(255,255,255,.12);
}

.tt-timeline-stage {
  flex: 1;
  min-height: 330px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 24px;
}

.tt-path {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  padding: 15px;
  text-align: center;
  transition: background .35s ease, color .35s ease;
}

.tt-path.cover {
  background: linear-gradient(180deg, #151929, #2c2f51);
  color: #fff;
}

.tt-path.truth {
  background: linear-gradient(180deg, #fff4bd, #ffd166, #ffb703);
  color: #3a2900;
}

.tt-path-title {
  position: absolute;
  top: 14px;
  width: 90%;
  font-family: "Baloo 2", var(--kingdom-font);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}

.tt-path .tt-tower {
  width: 105px;
  height: 230px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: none;
}

.tt-block {
  width: 95px;
  height: 34px;
  border: 2px solid rgba(255,255,255,.6);
  border-radius: 9px;
  opacity: .25;
  transition: transform .35s ease, opacity .35s ease, background .35s ease, box-shadow .35s ease;
}

.tt-path.cover .tt-block {
  background: #6c6f8f;
}

.tt-path.truth .tt-block {
  background: #fff;
}

.tt-block.active {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 0 18px rgba(255,255,255,.65);
}

.tt-block.crack {
  opacity: .55;
  background: #ff6b6b;
  transform: rotate(-5deg);
}

.tt-path-note {
  width: 100%;
  min-height: 54px;
  border-radius: 16px;
  background: rgba(255,255,255,.22);
  padding: 10px;
  font-weight: 900;
  line-height: 1.25;
}

.tt-instructions {
  border: 2px solid #ffd166;
  border-radius: 18px;
  background: #fff9e8;
  color: #654707;
  padding: 11px;
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.35;
}

.tt-choice-grid {
  display: grid;
  gap: 8px;
}

.tt-choice {
  border: 0;
  border-radius: 16px;
  background: #e7ebff;
  color: #2f3c7e;
  padding: 11px 12px;
  text-align: left;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 4px 0 #b3bce8;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.tt-choice:hover {
  transform: translateY(-2px);
}

.tt-choice.selected {
  background: #ffd166;
  color: #4a3000;
  box-shadow: 0 4px 0 #c99517;
}

.tt-meter-label {
  color: #2f3c7e;
}

.tt-meter {
  background: #dfe5ff;
}

.tt-meter div {
  width: 50%;
  background: linear-gradient(90deg, #ff6b6b, #ffd166, #7bdff2);
}

.tt-feedback {
  min-height: 84px;
  border-color: #d8def9;
  background: rgba(255,255,255,.8);
  color: #333a59;
}

.tt-btn {
  background: linear-gradient(135deg, #2f3c7e, #5f72d9);
  color: #fff;
  box-shadow: 0 6px 0 #1f275d;
}

.tt-btn.gold {
  background: linear-gradient(135deg, #ffb703, #ffd166);
  color: #4a2e00;
  box-shadow: 0 6px 0 #c98200;
}

.tt-screen {
  background:
    radial-gradient(circle at top, rgba(255,255,255,.68), transparent 35%),
    linear-gradient(135deg, #101820, #2f3c7e, #fbeaeb);
}

.tt-screen-card {
  background: rgba(255,255,255,.93);
  box-shadow: 0 24px 55px rgba(12,17,40,.35);
}

.tt-screen-card p {
  color: #4a4f67;
}

@media (max-width: 830px) {
  .tt-main {
    grid-template-columns: 1fr;
  }

  .tt-timeline-stage {
    min-height: 330px;
  }
}

.gratitude-gems-game {
  position: relative;
  min-height: min(690px, 94vh);
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 34px;
  background: linear-gradient(180deg, #eef6ff, #fff2ff);
  color: #181b3a;
  font-family: "Nunito", Arial, sans-serif;
  box-shadow: 0 25px 70px rgba(12, 15, 48, .42);
}

.gratitude-gems-game .hidden {
  display: none;
}

.gg-cave-bg,
.gg-crystal-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gg-cave-bg {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.65), transparent 18%),
    linear-gradient(180deg, #121530 0%, #36286f 46%, #0b3752 100%);
}

.gg-crystal-dots {
  z-index: 1;
  opacity: .35;
  background-image:
    radial-gradient(rgba(123,223,242,.8) 2px, transparent 2px),
    radial-gradient(rgba(255,209,102,.55) 2px, transparent 2px),
    radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 70px 70px, 110px 110px, 38px 38px;
  background-position: 0 0, 25px 40px, 10px 14px;
}

.gg-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.gg-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.gg-title-card,
.gg-pill,
.gg-panel,
.gg-screen-card {
  border: 2px solid rgba(255,255,255,.95);
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 24px rgba(12,15,48,.18);
}

.gg-title-card {
  border-radius: 24px;
  padding: 12px 18px;
}

.gg-title-card h2,
.gg-controls h2,
.gg-screen-card h2 {
  margin: 0;
  color: #4230a3;
  font-family: "Baloo 2", var(--kingdom-font);
  line-height: 1;
}

.gg-title-card h2 {
  font-size: clamp(1.75rem, 4vw, 2.2rem);
}

.gg-title-card p {
  margin: 4px 0 0;
  color: #565a80;
  font-size: .9rem;
  font-weight: 900;
}

.gg-stats {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.gg-pill {
  border-radius: 999px;
  color: #4230a3;
  padding: 10px 13px;
  font-weight: 900;
}

.gg-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(390px, 1.08fr) minmax(300px, .92fr);
  gap: 14px;
}

.gg-panel {
  min-height: 0;
  border-radius: 28px;
  padding: 15px;
}

.gg-gem-panel,
.gg-controls {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.gg-memory-card {
  min-height: 92px;
  border-radius: 22px;
  background: linear-gradient(135deg, #4230a3, #00a6d6);
  color: #fff;
  padding: 14px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: inset 0 0 18px rgba(255,255,255,.14);
}

.gg-stage {
  position: relative;
  flex: 1;
  min-height: 330px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 48%, rgba(123,223,242,.28), transparent 26%),
    linear-gradient(180deg, #15142f, #302060 55%, #06283d);
}

.gg-table {
  position: absolute;
  bottom: 35px;
  left: 50%;
  z-index: 2;
  width: min(360px, 82%);
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(180deg, #7257b8, #3a246c);
  box-shadow: 0 18px 28px rgba(0,0,0,.3);
  transform: translateX(-50%);
}

.gg-gem {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 4;
  font-size: 7.25rem;
  filter: drop-shadow(0 0 22px rgba(123,223,242,.75));
  transform: translate(-50%, -50%) scale(1);
  transition: transform .45s ease, filter .45s ease;
}

.gg-gem.rough {
  filter: grayscale(.7) brightness(.75) drop-shadow(0 0 8px rgba(255,255,255,.3));
  transform: translate(-50%, -50%) scale(.82) rotate(-8deg);
}

.gg-gem.mid {
  filter: brightness(1) drop-shadow(0 0 18px rgba(123,223,242,.65));
  transform: translate(-50%, -50%) scale(.95) rotate(3deg);
}

.gg-gem.polished {
  filter: brightness(1.25) drop-shadow(0 0 34px rgba(255,209,102,.95));
  transform: translate(-50%, -50%) scale(1.14) rotate(0deg);
  animation: ggGemPulse 1.1s ease-in-out infinite alternate;
}

@keyframes ggGemPulse {
  from { transform: translate(-50%, -50%) scale(1.08); }
  to { transform: translate(-50%, -50%) scale(1.18); }
}

.gg-cut-beam {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 3;
  width: 260px;
  height: 6px;
  background: linear-gradient(90deg, transparent, #ffd166, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--angle));
  animation: ggCutFlash .45s ease forwards;
}

@keyframes ggCutFlash {
  0% { opacity: 0; width: 0; }
  45% { opacity: 1; width: 280px; }
  100% { opacity: 0; width: 320px; }
}

.gg-note {
  position: absolute;
  left: 50%;
  bottom: 125px;
  z-index: 5;
  width: 84%;
  min-height: 58px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  color: #22264d;
  padding: 12px;
  text-align: center;
  font-weight: 900;
  line-height: 1.3;
  transform: translateX(-50%);
}

.gg-instructions {
  border: 2px solid #ffd166;
  border-radius: 18px;
  background: #fff9e8;
  color: #654707;
  padding: 11px;
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.35;
}

.gg-section-title {
  margin-bottom: 6px;
  color: #4230a3;
  font-size: .88rem;
  font-weight: 900;
}

.gg-choice-group {
  display: grid;
  gap: 8px;
}

.gg-choice {
  border: 0;
  border-radius: 16px;
  background: #e8eaff;
  color: #4230a3;
  padding: 10px 12px;
  text-align: left;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 4px 0 #b8bce9;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.gg-choice:hover {
  transform: translateY(-2px);
}

.gg-choice.selected {
  background: #c7f9ff;
  color: #06566b;
  box-shadow: 0 4px 0 #73cadb;
}

.gg-meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #4230a3;
  font-size: .82rem;
  font-weight: 900;
}

.gg-meter {
  height: 18px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #dfe2ff;
}

.gg-meter div {
  width: 30%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8e7dbe, #7bdff2, #ffd166);
  transition: width .3s ease;
}

.gg-feedback {
  min-height: 78px;
  border: 2px solid #d8def9;
  border-radius: 18px;
  background: rgba(255,255,255,.8);
  color: #333a59;
  padding: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.gg-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.gg-btn {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #4230a3, #00a6d6);
  color: #fff;
  padding: 11px 14px;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 6px 0 #282071;
  transition: transform .15s ease, box-shadow .15s ease;
}

.gg-btn:hover {
  transform: translateY(-2px);
}

.gg-btn.gold {
  background: linear-gradient(135deg, #ffb703, #ffd166);
  color: #4a2e00;
  box-shadow: 0 6px 0 #c98200;
}

.gg-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.68), transparent 35%),
    linear-gradient(135deg, #15142f, #43318f, #00d4ff);
}

.gg-screen-card {
  width: min(710px, 92vw);
  border: 4px solid #fff;
  border-radius: 34px;
  background: rgba(255,255,255,.93);
  padding: 28px;
  text-align: center;
  box-shadow: 0 24px 55px rgba(12,15,48,.35);
}

.gg-big {
  font-size: 5.35rem;
}

.gg-screen-card h2 {
  font-size: clamp(2.25rem, 7vw, 2.9rem);
}

.gg-screen-card p {
  color: #4a4f67;
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.45;
}

.gg-spark {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  font-size: 1.5rem;
  animation: ggRise .8s ease forwards;
}

@keyframes ggRise {
  0% { opacity: 0; transform: scale(.4) translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) translateY(-55px); }
}

@media (max-width: 830px) {
  .gratitude-gems-game {
    min-height: 96vh;
    overflow-y: auto;
  }

  .gg-main {
    grid-template-columns: 1fr;
  }

  .gg-stage {
    min-height: 330px;
  }
}

.respect-roundtable-game {
  position: relative;
  min-height: min(690px, 94vh);
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 34px;
  background: linear-gradient(180deg, #fff6ef, #f8edff);
  color: #2a1838;
  font-family: "Nunito", Arial, sans-serif;
  box-shadow: 0 25px 70px rgba(45, 16, 75, .35);
}

.respect-roundtable-game .hidden {
  display: none;
}

.rr-bg,
.rr-columns {
  position: absolute;
  pointer-events: none;
}

.rr-bg {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.68), transparent 20%),
    linear-gradient(180deg, #432371 0%, #8b4ba8 48%, #ffbd8a 100%);
}

.rr-columns {
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 210px;
  opacity: .45;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  clip-path: polygon(0 55%, 8% 55%, 8% 15%, 14% 15%, 14% 55%, 25% 55%, 25% 22%, 31% 22%, 31% 55%, 45% 55%, 45% 10%, 55% 10%, 55% 55%, 69% 55%, 69% 22%, 75% 22%, 75% 55%, 86% 55%, 86% 15%, 92% 15%, 92% 55%, 100% 55%, 100% 100%, 0 100%);
}

.rr-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.rr-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.rr-title-card,
.rr-pill,
.rr-panel,
.rr-screen-card {
  border: 2px solid rgba(255,255,255,.95);
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 24px rgba(45,16,75,.18);
}

.rr-title-card {
  border-radius: 24px;
  padding: 12px 18px;
}

.rr-title-card h2,
.rr-controls h2,
.rr-screen-card h2 {
  margin: 0;
  color: #5e2f8c;
  font-family: "Baloo 2", var(--kingdom-font);
  line-height: 1;
}

.rr-title-card h2 {
  font-size: clamp(1.75rem, 4vw, 2.2rem);
}

.rr-title-card p {
  margin: 4px 0 0;
  color: #6c587c;
  font-size: .9rem;
  font-weight: 900;
}

.rr-stats {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.rr-pill {
  border-radius: 999px;
  color: #5e2f8c;
  padding: 10px 13px;
  font-weight: 900;
}

.rr-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(390px, 1.08fr) minmax(300px, .92fr);
  gap: 14px;
}

.rr-panel {
  min-height: 0;
  border-radius: 28px;
  padding: 15px;
}

.rr-council-panel,
.rr-controls {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.rr-topic-card {
  min-height: 92px;
  border-radius: 22px;
  background: linear-gradient(135deg, #5e2f8c, #d76d77);
  color: #fff;
  padding: 14px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: inset 0 0 18px rgba(255,255,255,.16);
}

.rr-stage {
  position: relative;
  flex: 1;
  min-height: 330px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.45), transparent 28%),
    linear-gradient(180deg, #3d2466, #75449a 58%, #ffaf7b);
}

.rr-table {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 2;
  width: 285px;
  height: 285px;
  border: 8px solid #5f2f1d;
  border-radius: 50%;
  background: radial-gradient(circle, #d9975e, #8b4a2c);
  box-shadow: 0 22px 35px rgba(0,0,0,.28);
  transform: translate(-50%, -50%);
}

.rr-center-seal {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 4;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7d6, #ffd166);
  font-size: 2.75rem;
  box-shadow: 0 0 24px rgba(255,209,102,.7);
  transform: translate(-50%, -50%);
}

.rr-member {
  position: absolute;
  z-index: 5;
  width: 106px;
  min-height: 78px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  padding: 8px;
  text-align: center;
  box-shadow: 0 10px 18px rgba(0,0,0,.16);
  transition: transform .25s ease;
}

.rr-member .emoji {
  font-size: 2rem;
}

.rr-member .name {
  color: #5e2f8c;
  font-size: .82rem;
  font-weight: 900;
}

.rr-member .status {
  min-height: 28px;
  color: #685278;
  font-size: .75rem;
  font-weight: 900;
}

.rr-member.m1 { left: 50%; top: 16px; transform: translateX(-50%); }
.rr-member.m2 { right: 20px; top: 42%; transform: translateY(-50%); }
.rr-member.m3 { left: 50%; bottom: 16px; transform: translateX(-50%); }
.rr-member.m4 { left: 20px; top: 42%; transform: translateY(-50%); }

.rr-token-orbit {
  position: absolute;
  z-index: 6;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ffd166;
  font-size: 1.75rem;
  opacity: 0;
  box-shadow: 0 0 18px rgba(255,209,102,.8);
  transition: opacity .35s ease, left .35s ease, top .35s ease;
}

.rr-token-orbit.show {
  opacity: 1;
}

.rr-instructions {
  border: 2px solid #ffd166;
  border-radius: 18px;
  background: #fff9e8;
  color: #654707;
  padding: 11px;
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.35;
}

.rr-phase-box {
  border: 2px solid #dfc8ff;
  border-radius: 18px;
  background: #f7edff;
  color: #5e2f8c;
  padding: 10px;
  font-weight: 900;
  line-height: 1.35;
}

.rr-token-grid {
  display: grid;
  gap: 8px;
}

.rr-token {
  border: 0;
  border-radius: 16px;
  background: #efe1ff;
  color: #5e2f8c;
  padding: 11px 12px;
  text-align: left;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 4px 0 #c3a3e8;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.rr-token:hover {
  transform: translateY(-2px);
}

.rr-token.selected {
  background: #ffd166;
  color: #4a3000;
  box-shadow: 0 4px 0 #c99517;
}

.rr-meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #5e2f8c;
  font-size: .82rem;
  font-weight: 900;
}

.rr-meter {
  height: 18px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #eadcff;
}

.rr-meter div {
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7b7b, #ffd166, #7bdff2);
  transition: width .3s ease;
}

.rr-feedback {
  min-height: 84px;
  border: 2px solid #dfc8ff;
  border-radius: 18px;
  background: rgba(255,255,255,.8);
  color: #514064;
  padding: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.rr-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.rr-btn {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #5e2f8c, #d76d77);
  color: #fff;
  padding: 11px 14px;
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 900;
  box-shadow: 0 6px 0 #452064;
  transition: transform .15s ease, box-shadow .15s ease;
}

.rr-btn:hover {
  transform: translateY(-2px);
}

.rr-btn.gold {
  background: linear-gradient(135deg, #ffb703, #ffd166);
  color: #4a2e00;
  box-shadow: 0 6px 0 #c98200;
}

.rr-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.68), transparent 35%),
    linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b);
}

.rr-screen-card {
  width: min(710px, 92vw);
  border: 4px solid #fff;
  border-radius: 34px;
  background: rgba(255,255,255,.93);
  padding: 28px;
  text-align: center;
  box-shadow: 0 24px 55px rgba(45,16,75,.35);
}

.rr-big {
  font-size: 5.35rem;
}

.rr-screen-card h2 {
  font-size: clamp(2.25rem, 7vw, 2.9rem);
}

.rr-screen-card p {
  color: #60476f;
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.45;
}

.rr-spark {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  font-size: 1.5rem;
  animation: rrRise .8s ease forwards;
}

@keyframes rrRise {
  0% { opacity: 0; transform: scale(.4) translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) translateY(-55px); }
}

@media (max-width: 830px) {
  .respect-roundtable-game {
    min-height: 96vh;
    overflow-y: auto;
  }

  .rr-main {
    grid-template-columns: 1fr;
  }

  .rr-stage {
    min-height: 360px;
  }

  .rr-table {
    width: 230px;
    height: 230px;
  }

  .rr-member {
    width: 92px;
    min-height: 70px;
  }
}

.forge-board {
  background:
    linear-gradient(180deg, rgba(255,238,166,.14), rgba(255,126,62,.2)),
    #251234;
}

.forge-fire {
  min-height: 120px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
  border-bottom: 8px solid #7a4924;
}

.forge-fire span {
  width: 58px;
  height: 92px;
  display: block;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(180deg, #fff7a8, #ff8a38 58%, #a62f20);
  animation: flamePulse 820ms ease-in-out infinite alternate;
}

.forge-fire span:nth-child(2) { height: 120px; animation-delay: 140ms; }
.forge-fire span:nth-child(3) { animation-delay: 260ms; }

@keyframes flamePulse {
  from { transform: scaleY(.86) translateY(8px); filter: brightness(.92); }
  to { transform: scaleY(1.06) translateY(0); filter: brightness(1.15); }
}

.throne-power {
  min-height: 150px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 18px;
  border: 4px solid #ffe36c;
  background: linear-gradient(180deg, #52249a, #1b0f46);
}

.throne-power span {
  display: block;
  border: 5px solid #ffe36c;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(255,240,139,.9), rgba(160,65,201,.22));
  box-shadow: 0 0 22px rgba(255,226,107,.55);
}

.bridge-scene {
  min-height: 260px;
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr 110px;
  align-items: end;
  overflow: hidden;
  border: 5px solid #85e7ff;
  background: linear-gradient(180deg, #121a44 0%, #1f2d6c 55%, #060819 100%);
}

.bridge-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 45%, rgba(140,233,255,.16) 45% 47%, transparent 47%),
    linear-gradient(65deg, transparent 0 62%, rgba(140,233,255,.12) 62% 64%, transparent 64%);
}

.bridge-cliff {
  height: 118px;
  z-index: 1;
  background: linear-gradient(180deg, #8b6b54, #3d2a24);
}

.bridge-cliff.left { clip-path: polygon(0 0, 100% 28%, 100% 100%, 0 100%); }
.bridge-cliff.right { clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 100%); }

.bridge-gap {
  z-index: 2;
  min-height: 132px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: end;
  padding: 0 8px 68px;
}

.bridge-plank {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 4px dashed rgba(140,233,255,.5);
  color: rgba(255,255,255,.5);
  font-size: .85rem;
  font-weight: 900;
  text-align: center;
  transform: translateY(42px) rotate(-8deg);
  transition: transform 240ms ease, background 240ms ease, border 240ms ease, color 240ms ease;
}

.bridge-plank.rebuilt {
  border-style: solid;
  background: linear-gradient(180deg, #c98b54, #7f4e2d);
  color: #fff8da;
  transform: translateY(0) rotate(0);
}

.bridge-scene.complete .bridge-plank { box-shadow: 0 0 18px rgba(140,233,255,.65); }
.bridge-scene.shake { animation: bridgeShake 260ms ease; }

@keyframes bridgeShake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-8px); }
  60% { transform: translateX(7px); }
}

.bridge-spark {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #8ce9ff;
  transform: rotate(45deg);
  box-shadow: 0 0 16px #8ce9ff;
  animation: sparkFloat 2.4s ease-in-out infinite;
}

.bridge-spark.one { left: 28%; top: 28%; }
.bridge-spark.two { right: 24%; top: 18%; animation-delay: 600ms; }

@keyframes sparkFloat {
  50% { transform: rotate(45deg) translateY(-18px); opacity: .45; }
}

.listening-trail {
  min-height: 124px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 24px;
  padding: 18px;
  background: linear-gradient(180deg, #071332, #17275d);
  border: 4px solid #ffe17c;
}

.listening-trail span {
  height: 70px;
  border-radius: 48% 48% 12px 12px;
  background: linear-gradient(180deg, #fff1a3, #f5a93d);
  box-shadow: 0 0 28px rgba(255,225,124,.8);
}

.garden-orbit {
  min-height: 130px;
  border: 5px solid #ff91c6;
  background:
    linear-gradient(90deg, rgba(255,145,198,.18) 0 12%, transparent 12% 24%, rgba(165,236,132,.18) 24% 36%, transparent 36% 48%, rgba(255,211,89,.2) 48% 60%, transparent 60%),
    #1d5a3e;
}

.bakery-counter {
  min-height: 128px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 18px;
  padding: 18px;
  border: 5px solid #7a4721;
  background: linear-gradient(180deg, #ffd49a, #8d451f);
}

.bakery-counter span {
  width: 96px;
  height: 54px;
  border: 5px solid #8a4d20;
  border-radius: 48px 48px 14px 14px;
  background: linear-gradient(180deg, #f3b35e, #b96a2b);
}

.tower-split {
  min-height: 170px;
  border: 5px solid #fff3a6;
  background: linear-gradient(90deg, #fff6c4 0 49%, #141421 49% 51%, #414067 51% 100%);
  position: relative;
}

.tower-split::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 86px;
  height: 145px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #e2c06f 0 50%, #272744 50% 100%);
  border: 5px solid #17172d;
  clip-path: polygon(0 20%, 50% 0, 100% 20%, 100% 100%, 0 100%);
}

.cavern-shine {
  min-height: 135px;
  border: 5px solid #8efff4;
  background:
    linear-gradient(130deg, transparent 0 22%, rgba(142,255,244,.55) 22% 26%, transparent 26%),
    linear-gradient(50deg, transparent 0 60%, rgba(255,139,235,.42) 60% 64%, transparent 64%),
    #17245e;
}

.wordForge .token { background: #fff1b0; border: 3px solid #ffca5f; color: #2d1740; font-family: Georgia, serif; }
.crownBalance .person { background: #ffe36c; border: 4px solid #6f42c0; color: #321366; }
.signalFilter .lantern { border-radius: 46% 46% 12px 12px; background: #ffe17c; color: #071332; }
.emotionGarden .plant { border-radius: 50% 50% 12px 12px; border: 4px solid #ff91c6; color: #174a35; }
.timeDilation .time-lab { border-style: double; border-width: 8px; border-color: #8ff3ff; }
.hiddenNeeds .order-ticket { background: #fff4df; border: 4px dashed #8d5431; color: #5a2d13; font-size: 1.25rem; }
.truthTimeline .token[data-value="truth"] { background: #fff3a6; }
.truthTimeline .token[data-value="avoid"] { background: #55506e; color: #fff; }
.memoryLink .gem { border-radius: 8px 8px 28px 28px; background: linear-gradient(180deg, #e9ffff, #8efff4); color: #17245e; }
.reputationNetwork .table { border-radius: 50%; border: 8px solid #dcb079; background: #6a3f22; color: #fff1d8; }
.belongingMeters .person { border-radius: 28px 8px 28px 8px; background: #ffe0d3; color: #4d1e2c; }
.fearCave .cave-path { background: linear-gradient(180deg, #181326, #000); padding: 20px; border: 5px solid #ffc85f; }
.breathingDragon .dragon-button { border: 7px solid #ff8b62; background: linear-gradient(180deg, #ffbc80, #9d372d); color: #fff7ee; }
.teamRoles .pass-field { background: linear-gradient(90deg, #225c30, #6fcf76); border: 5px solid #a8f36f; }
.equityFountain .need-card { border-radius: 8px 8px 36px 36px; background: linear-gradient(180deg, #ecfeff, #8bdff0); }
.futurePath .journey-map { background: linear-gradient(90deg, #7a5a2b, #ffe2a6, #7a5a2b); border: 5px solid #f7d06f; }
.habitsHarbor .harbor-system { background: linear-gradient(180deg, #b9f2ff, #0c4862); border: 5px solid #77e4ff; padding: 18px; }
.predictiveShield .shield-readout { border-radius: 90px 90px 18px 18px; border: 7px solid #a8d6ff; background: #1b355c; color: #edf7ff; }
.questionClock .clock-face { background: #f8e8bc; box-shadow: inset 0 0 0 12px #ffd36f; }
.adaptivePeak .mountain { clip-path: polygon(50% 0, 100% 100%, 0 100%); min-height: 220px; display: grid; place-items: end center; background: linear-gradient(180deg, #eef7ff, #6f7d8d); color: #1e2730; }
.empathyWaves .wave-cave { background: repeating-linear-gradient(90deg, #20275b 0 26px, #2d3676 26px 52px); border: 5px solid #b7c5ff; padding: 18px; }
.microManners .runner-track { background: linear-gradient(90deg, #ffe9b2, #9c514f); border: 5px solid #ffd66e; padding: 18px; }
.solutionPortal .portal-preview { border-radius: 50%; min-height: 220px; display: grid; place-items: center; border: 8px solid #5ff5e8; background: linear-gradient(135deg, #1e1451, #6351b6, #48c2c8); }
.ecosystemNook .nature-grid { background: linear-gradient(180deg, #dff6c6, #174c31); border: 5px solid #b8f07a; padding: 18px; }
.chatGate .digital-world { font-family: "Courier New", monospace; border: 5px solid #4dffcf; background: linear-gradient(90deg, #061f38, #166a94); color: #d5fff6; }
.relaxSequence .moon-lights { background: linear-gradient(180deg, #171d45, #53619a); border: 5px solid #ccd0ff; padding: 18px; }

.big-back {
  display: block;
  width: fit-content;
  margin: 42px auto 0;
  border: 4px solid var(--black);
  border-radius: 8px;
  background: rgba(133, 88, 180, 0.64);
  color: #070707;
  padding: 10px 18px;
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18);
}

@media (max-width: 1050px) {
  .game-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); column-gap: 42px; }
  .skill-filters { grid-template-columns: 1fr; }
  .search-panel { grid-template-columns: 1fr; }
  .points-pill { width: fit-content; }
}

@media (max-width: 900px) {
  .kk-ai-panel,
  .kk-news-panel {
    width: min(720px, calc(100vw - 48px));
  }

  .kk-ai-head,
  .kk-news-head,
  .kk-ai-title-row,
  .kk-ai-columns,
  .kk-news-article {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .kk-news-head {
    flex-direction: column;
  }

  .kk-journal-panel {
    width: min(720px, calc(100vw - 48px));
  }

  .kk-journal-head {
    flex-direction: column;
  }

  .kk-journal-paper {
    padding: 18px;
  }

  .kk-ai-challenge button,
  .kk-ai-history button {
    text-align: center;
  }

  .kk-reward-panel,
  .kk-reward-panel.room,
  .kk-reward-panel.shop,
  .kk-reward-panel.closet {
    width: min(720px, calc(100vw - 48px));
  }

  .kk-room-grid,
  .kk-closet-preview,
  .kk-reward-panel.closet .kk-closet-preview {
    grid-template-columns: 1fr;
  }

  .kk-panel-head,
  .kk-reward-panel.shop .kk-panel-head,
  .kk-reward-panel.closet .kk-panel-head {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .kk-head-actions {
    max-width: 100%;
    justify-items: center;
  }

  .kk-home-button {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .world-topbar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .world-topbar a,
  .return-world-link {
    width: 100%;
  }

  .phaser-game-shell {
    width: min(960px, calc(100vw - 16px));
    border-width: 3px;
    border-radius: 18px;
  }

  .kk-ai-panel,
  .kk-news-panel,
  .kk-journal-panel,
  .kk-reward-panel,
  .kk-reward-panel.room,
  .kk-reward-panel.shop,
  .kk-reward-panel.closet {
    width: min(760px, calc(100vw - 22px));
    max-height: calc(100dvh - 22px);
  }
}

@media (max-height: 760px) {
  .world-shell {
    min-height: auto;
  }

  .kk-ai-panel,
  .kk-news-panel,
  .kk-journal-panel,
  .kk-reward-panel,
  .kk-reward-panel.room,
  .kk-reward-panel.shop,
  .kk-reward-panel.closet {
    max-height: calc(100dvh - 22px);
  }
}

@media (max-width: 760px) {
  .dashboard { padding: 30px 18px 64px; }
  .dashboard-hero { padding-bottom: 24px; }
  .featured-card { grid-template-columns: 1fr; }
  .featured-label { position: static; transform: none; width: fit-content; }
  .recommendation-panel { display: grid; }
  .search-panel { grid-template-columns: 1fr; }
  .map-shell { padding: 30px 12px; }
  .game-grid { grid-template-columns: repeat(2, minmax(145px, 1fr)); column-gap: 18px; row-gap: 42px; }
  .dashboard-card:nth-child(n) { transform: none; }
  .game-photo { max-width: 150px; height: 132px; }
  .play-button { width: 126px; }
  .coming-grid { grid-template-columns: 1fr; }
  .applications-card,
  .quiz-card,
  .completion-card,
  .reflection-card {
    padding: 16px;
  }
  .application-grid {
    grid-template-columns: 1fr;
  }
  .reflection-grid {
    grid-template-columns: 1fr;
  }
  .speech-row,
  .speech-row.right {
    width: 100%;
    grid-template-columns: 82px minmax(0, 1fr);
    justify-self: center;
  }

  .speech-row.right {
    grid-template-columns: minmax(0, 1fr) 82px;
  }

  .story-character {
    width: 82px;
    height: 118px;
  }

  .flow-drawer {
    top: 76px;
    width: min(330px, calc(100vw - 16px));
    transform: translateX(calc(100% - 36px));
  }

  .flow-tab {
    width: 36px;
    min-height: 96px;
    border-width: 3px;
  }

  .flow-panel {
    margin-left: 36px;
    max-height: 78vh;
    padding: 15px;
  }

  .speech { width: 100%; }
  .storybook { min-height: auto; }
  .play-head { grid-template-columns: 1fr; }
  .stats { justify-content: flex-start; }
  .embedded-game-shell {
    min-height: 760px;
    border-radius: 18px;
  }
  .embedded-game-frame { height: 760px; }
  .new-quest-game {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .nq-stage {
    min-height: 410px;
  }
  .nq-orbit {
    width: 220px;
    height: 220px;
  }
  .nq-orbit span {
    transform: rotate(calc(var(--i) * 90deg)) translate(108px) rotate(calc(var(--i) * -90deg));
  }
}

/* Final layout safety layer: keep every major page centered, readable, and scrollable. */
html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  text-align: initial;
}

body * {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.kingdom-world-page,
.dashboard,
.single-game {
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.world-shell {
  width: 100%;
  min-height: 100dvh;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: clamp(10px, 2vw, 18px);
}

@media (min-height: 860px) {
  .world-shell {
    justify-content: center !important;
  }
}

.world-topbar,
.world-help,
.dashboard-featured,
.skill-filters,
.recommendation-panel,
.map-shell,
.coming-soon,
.play-card,
.applications-card,
.quiz-card,
.completion-card,
.reflection-card {
  width: min(1120px, calc(100vw - 28px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.world-topbar,
.play-head,
.kk-panel-head,
.kk-reward-panel.shop .kk-panel-head,
.kk-reward-panel.closet .kk-panel-head,
.kk-news-head,
.kk-journal-head,
.kk-ai-head {
  text-align: center !important;
}

.world-topbar {
  flex-wrap: wrap;
  justify-content: center !important;
}

.phaser-game-shell {
  width: min(960px, calc(100vw - 28px)) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 960 / 760;
  margin: 0 auto !important;
  overflow: hidden !important;
}

.phaser-game-shell canvas {
  display: block;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}

.kk-ai-panel,
.kk-news-panel,
.kk-journal-panel,
.kk-reward-panel,
.kk-reward-panel.room,
.kk-reward-panel.shop,
.kk-reward-panel.closet {
  width: min(860px, 92%) !important;
  max-width: 92% !important;
  max-height: calc(100dvh - 28px) !important;
  margin: 0 auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain;
  text-align: center;
}

.kk-reward-panel.shop,
.kk-reward-panel.closet {
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
}

.kk-panel-head,
.kk-reward-panel.shop .kk-panel-head,
.kk-reward-panel.closet .kk-panel-head,
.kk-ai-head,
.kk-news-head,
.kk-journal-head,
.kk-ai-title-row,
.kk-news-article,
.kk-room-grid,
.kk-closet-preview {
  width: 100%;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
}

.kk-head-actions {
  width: 100%;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  justify-items: center !important;
}

.kk-panel-head p,
.kk-ai-head p,
.kk-news-head p,
.kk-journal-head p,
.kk-shop-item p,
.kk-room-grid p,
.kk-side-board p,
.play-head p,
.featured-card p,
.dashboard-card p,
.application-card p,
.quiz-card p,
.completion-card p,
.reflection-card p {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal;
}

.kk-home-button,
.kk-tabs button,
.kk-panel-actions button,
.kk-title-row button,
.kk-shop-item button,
.play-button,
.big-back,
.return-world-link,
.world-topbar a {
  max-width: 100%;
  white-space: normal !important;
  text-align: center;
}

.kk-shop-grid,
.kk-reward-panel.shop .kk-shop-grid,
.kk-reward-panel.closet .kk-shop-grid,
.game-grid,
.coming-grid,
.application-grid,
.reflection-grid {
  width: 100%;
  justify-content: center !important;
  justify-items: center !important;
}

.kk-shop-item,
.dashboard-card,
.coming-card,
.application-card,
.quiz-option,
.reflection-card,
.screen-card {
  max-width: min(100%, 360px);
}

.screen,
[class$="-screen"] {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.screen-card {
  width: min(710px, calc(100vw - 32px)) !important;
  margin: auto;
  text-align: center;
}

@media (max-width: 760px) {
  .world-topbar,
  .play-head,
  .featured-card {
    grid-template-columns: 1fr !important;
    flex-direction: column;
    align-items: center !important;
  }

  .kk-ai-panel,
  .kk-news-panel,
  .kk-journal-panel,
  .kk-reward-panel,
  .kk-reward-panel.room,
  .kk-reward-panel.shop,
  .kk-reward-panel.closet {
    width: min(760px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
  }

  .game-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .kk-shop-grid,
  .kk-reward-panel.shop .kk-shop-grid,
  .kk-reward-panel.closet .kk-shop-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Shop and closet card centering override. */
.kk-reward-panel.shop,
.kk-reward-panel.closet {
  align-content: center !important;
  justify-items: center !important;
}

.kk-reward-panel.shop {
  max-height: min(620px, calc(100dvh - 120px)) !important;
  width: 760px !important;
  max-width: calc(100vw - 96px) !important;
  align-content: start !important;
}

.kk-shop-item {
  display: grid !important;
  place-items: center !important;
  place-content: center !important;
  align-items: center !important;
  align-content: center !important;
  justify-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.kk-reward-panel.shop .kk-shop-item,
.kk-reward-panel.closet .kk-shop-item {
  display: grid !important;
  place-items: center !important;
  place-content: center !important;
  align-items: center !important;
  align-content: center !important;
  justify-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.kk-shop-item p,
.kk-shop-item h3,
.kk-shop-item small {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.kk-item-icon {
  justify-self: center !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Stable top-anchored panel widths for Phaser DOM scenes. */
.kk-reward-panel.shop,
.kk-reward-panel.room,
.kk-reward-panel.closet {
  width: 760px !important;
  max-width: calc(100vw - 96px) !important;
}

.kk-ai-panel,
.kk-news-panel,
.kk-journal-panel {
  width: 860px !important;
  max-width: calc(100vw - 96px) !important;
}

/* Plain DOM Kind Kingdom world app. This replaces the Phaser shell. */
.kind-kingdom-app-shell {
  width: min(1120px, calc(100vw - 28px));
  min-height: clamp(620px, 78dvh, 860px);
  margin: 0 auto;
  border: 5px solid #fff;
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 12%, rgba(255,209,102,.72) 0 58px, transparent 59px),
    radial-gradient(circle at 10% 78%, rgba(123,77,255,.22) 0 150px, transparent 152px),
    linear-gradient(180deg, #3d2466 0%, #332768 58%, #69b7f4 58%, #69b7f4 100%);
  box-shadow: 0 22px 60px rgba(45,23,77,.32);
  overflow: hidden;
  position: relative;
}

.kk-dom-page {
  width: 100%;
  min-height: clamp(620px, 78dvh, 860px);
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 18px;
  padding: clamp(18px, 3vw, 38px);
  color: #2d174d;
}

.kk-login-page {
  align-content: center;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  max-width: 960px;
  margin: 0 auto;
}

.kk-dom-head,
.kk-dom-hero-panel,
.kk-dom-card {
  border: 4px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 34px rgba(31,18,58,.2);
}

.kk-dom-head {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-radius: 26px;
  padding: clamp(18px, 2.5vw, 26px);
  text-align: left;
}

.kk-dom-head h2,
.kk-dom-hero-panel h2 {
  margin: 0;
  font-family: var(--kingdom-font);
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: .95;
  color: #2d174d;
}

.kk-dom-head p,
.kk-dom-hero-panel p,
.kk-dom-card p {
  margin: 6px 0 0;
  color: #443361;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.kk-eyebrow {
  margin: 0 0 4px !important;
  color: #7b4dff !important;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 1000 !important;
}

.kk-head-buttons,
.kk-dom-actions,
.kk-dashboard-actions,
.kk-map-toolbar,
.kk-tabs-dom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.kk-head-buttons {
  justify-content: flex-end;
}

.kk-dom-page button,
.kk-dom-link {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: #e7dcff;
  color: #2d174d;
  box-shadow: 0 5px 0 #b8a6e8;
  font-weight: 1000;
  text-decoration: none;
  line-height: 1.1;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.kk-dom-page button:hover,
.kk-dom-link:hover {
  transform: translateY(-2px);
}

.kk-dom-page button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.kk-dom-page .kk-primary,
.kk-dom-link.kk-primary {
  background: linear-gradient(135deg, #2ec4b6, #77e5dc);
  color: #053f3b;
  box-shadow: 0 6px 0 #1b8f85;
}

.kk-points-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff1a8;
  border: 5px solid #fff6cf;
  color: #3a2900;
  font-weight: 1000;
  padding: 10px 16px;
}

.kk-dom-card,
.kk-dom-hero-panel {
  border-radius: 24px;
  padding: clamp(16px, 2.4vw, 24px);
}

.kk-auth-card label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  font-weight: 1000;
  color: #35205a;
}

.kk-auth-card input,
.kk-story-tools select {
  width: 100%;
  border: 3px solid #d8caff;
  border-radius: 16px;
  padding: 12px 14px;
  background: #fff;
  color: #2d174d;
  font: inherit;
  font-weight: 900;
}

.kk-dashboard-layout,
.kk-dom-grid,
.kk-character-grid,
.kk-room-layout,
.kk-news-layout,
.kk-closet-top,
.kk-map-layout {
  width: min(980px, 100%);
  display: grid;
  gap: 16px;
}

.kk-dashboard-layout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kk-player-card,
.kk-news-notice {
  grid-column: span 2;
}

.kk-player-card,
.kk-closet-preview-dom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.kk-stat-card {
  display: grid;
  place-items: center;
  text-align: center;
}

.kk-stat-card span {
  font-family: var(--kingdom-font);
  font-size: 3.6rem;
  color: #2ec4b6;
  line-height: .9;
}

.kk-character-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kk-character-card {
  min-height: 280px;
  border-radius: 26px !important;
  background: rgba(255,255,255,.94) !important;
  border: 5px solid transparent !important;
  box-shadow: 0 12px 28px rgba(31,18,58,.2) !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 10px !important;
}

.kk-character-card.selected {
  border-color: #52d273 !important;
  background: #f0fff1 !important;
}

.kk-hero {
  width: 144px;
  height: 168px;
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 auto;
  image-rendering: pixelated;
}

.kk-hero.compact {
  width: 72px;
  height: 84px;
}

.kk-avatar-large .kk-hero {
  width: 176px;
  height: 200px;
}

.kk-hero-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  inset: 0;
}

.kk-hero-layer.accessory {
  z-index: 8;
}

.kk-hero-pet {
  position: absolute;
  right: -22px;
  bottom: 6px;
  width: 58px;
  height: 58px;
  object-fit: contain;
  animation: kk-pet-bob 1.5s ease-in-out infinite alternate;
  z-index: 9;
}

@keyframes kk-pet-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-7px); }
}

.kk-map-layout {
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: stretch;
}

.kk-map-stage {
  position: relative;
  width: 100%;
  min-height: 590px;
  border: 5px solid rgba(255,255,255,.9);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 12%, #ffd166 0 50px, transparent 52px),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.42), transparent 16%),
    linear-gradient(180deg, #78c7ff 0 33%, #76c782 33% 100%);
  box-shadow: inset 0 -90px 0 rgba(62,117,62,.22);
}

.kk-mood-stormy .kk-map-stage {
  filter: saturate(.8) brightness(.88);
}

.kk-mood-peaceful .kk-map-stage {
  filter: saturate(.95) brightness(1.05);
}

.kk-map-road {
  position: absolute;
  left: -60px;
  right: -60px;
  top: 300px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255,232,174,.78);
  transform: rotate(-7deg);
  border: 4px dashed rgba(117,77,30,.3);
}

.kk-map-portal,
.kk-map-guide {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 118px;
  min-height: 94px;
  border: 3px solid rgba(255,255,255,.92) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 10px 18px rgba(24,31,65,.18) !important;
  padding: 8px !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  color: #2d174d !important;
  font-size: .82rem;
}

.kk-map-portal b,
.kk-map-guide b {
  width: 100%;
  max-width: 108px;
  line-height: 1.1;
  text-align: center;
  color: #fff;
  background: rgba(45,23,77,.88);
  border-radius: 10px;
  padding: 3px 5px;
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}

.kk-map-guide b {
  color: #2d174d;
  background: rgba(255,255,255,.9);
}

.kk-map-portal.complete {
  border-color: #8be2a3 !important;
  background: #effff4 !important;
}

.kk-map-portal.locked {
  opacity: .58;
}

.kk-portal-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.kk-map-guide {
  width: 138px;
  min-height: 76px;
  background: #fff9e8 !important;
  border-color: #ffd166 !important;
}

.kk-map-guide span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #5a2da0;
  color: #fff;
  font-weight: 1000;
}

.kk-map-player {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 12;
  pointer-events: none;
}

.kk-map-player::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 54px;
  height: 14px;
  border-radius: 50%;
  background: rgba(40,24,70,.22);
  transform: translateX(-50%);
}

.kk-map-side {
  display: grid;
  align-content: start;
  gap: 12px;
}

.kk-map-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.kk-map-pad button:first-child,
.kk-map-pad button:last-child {
  grid-column: 2;
}

.kk-map-pad button {
  min-height: 48px;
  padding: 8px !important;
  font-size: 1.8rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.kk-map-status,
.kk-dom-note,
.kk-reflection-prompt {
  border-radius: 18px;
  background: #fff9e8;
  border: 3px solid #ffd166;
  padding: 12px;
  font-weight: 1000;
  color: #5b3b07;
}

.kk-tabs-dom {
  width: min(980px, 100%);
  justify-content: flex-start;
}

.kk-tabs-dom button.selected,
.kk-title-list button.selected {
  background: linear-gradient(135deg, #ffb703, #ffd166);
  color: #3a2900;
  box-shadow: 0 6px 0 #c98200;
}

.kk-shop-grid-dom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kk-shop-card {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}

.kk-shop-card.owned {
  background: linear-gradient(180deg, rgba(255,255,255,.95), #e9fff7);
  border-color: #9ee7dc;
}

.kk-shop-card h3 {
  margin: 0;
  font-size: 1.35rem;
}

.kk-shop-card small {
  font-weight: 1000;
  color: #3b2761;
}

.kk-item-art {
  width: 74px;
  height: 74px;
  object-fit: contain;
  image-rendering: pixelated;
}

.kk-closet-top,
.kk-room-layout,
.kk-news-layout {
  grid-template-columns: 1fr 1fr;
}

.kk-title-list,
.kk-badge-grid,
.kk-room-items,
.kk-journal-stack,
.kk-choice-list,
.kk-dialogue {
  display: grid;
  gap: 10px;
}

.kk-badge-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kk-badge-tile,
.kk-room-item {
  display: grid;
  place-items: center;
  gap: 6px;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 3px solid rgba(255,255,255,.9);
  padding: 12px;
  text-align: center;
  font-weight: 1000;
}

.kk-badge-tile:not(.unlocked) {
  filter: grayscale(.85);
  opacity: .65;
}

.kk-badge-art,
.kk-room-art {
  width: 62px;
  height: 62px;
  object-fit: contain;
  image-rendering: pixelated;
}

.kk-side-board {
  display: grid;
  gap: 10px;
  align-content: start;
}

.kk-quest-card,
.kk-pass-row {
  width: 100%;
  display: grid !important;
  justify-items: start !important;
  text-align: left !important;
  border-radius: 18px !important;
  background: #fff3cf !important;
  box-shadow: 0 5px 0 #e2ad5c !important;
}

.kk-story-tools {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 280px) auto;
  justify-content: center;
  gap: 12px;
}

.kk-story-card,
.kk-news-article-dom,
.kk-journal-paper {
  width: min(820px, 100%);
}

.kk-dialogue p {
  margin: 0;
  border-radius: 16px;
  background: #f0eaff;
  padding: 10px 12px;
}

.kk-choice-list button {
  width: 100%;
  text-align: left;
  border-radius: 18px;
}

.kk-news-layout {
  align-items: start;
}

.kk-news-list {
  display: grid;
  gap: 10px;
}

.kk-news-list button {
  display: grid;
  justify-items: start;
  text-align: left;
  border-radius: 18px;
}

.kk-news-list button.selected {
  background: #fff1a8;
  box-shadow: 0 5px 0 #d9a62c;
}

.kk-news-article-dom {
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 24px;
  background: #fffdf8;
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 14px 30px rgba(31,18,58,.18);
}

.kk-news-image {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 12px;
}

.kk-journal-paper {
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,126,179,.24) 0 2px, transparent 2px 100%),
    repeating-linear-gradient(180deg, #fffdf7 0 32px, #d7ebff 33px 35px);
  background-position: 54px 0, 0 0;
  border: 3px solid #fff;
  padding: 24px 24px 24px 72px;
  box-shadow: 0 12px 24px rgba(31,18,58,.16);
}

.kk-dom-message {
  width: min(820px, 100%);
  margin: 0 auto;
  text-align: center;
}

.kk-empty-card {
  width: min(520px, 100%);
  text-align: center;
}

@media (max-width: 940px) {
  .kk-dashboard-layout,
  .kk-character-grid,
  .kk-shop-grid-dom,
  .kk-map-layout,
  .kk-room-layout,
  .kk-news-layout,
  .kk-closet-top,
  .kk-login-page {
    grid-template-columns: 1fr;
  }

  .kk-player-card,
  .kk-news-notice {
    grid-column: auto;
  }

  .kk-dom-head {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .kk-head-buttons {
    justify-content: center;
  }

  .kk-map-stage {
    min-height: 650px;
    overflow: auto;
  }
}

/* Small hold-to-scroll controls for non-map world pages. */
.kk-page-scroll-controls {
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 80;
  display: grid;
  gap: 7px;
  transform: translateY(-50%);
  pointer-events: none;
}

.kk-page-scroll-controls button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(45,23,77,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: #2d174d;
  box-shadow: 0 4px 0 rgba(45,23,77,.22);
  font-size: 1.1rem;
  font-weight: 1000;
  line-height: 1;
  padding: 0;
  pointer-events: auto;
}

.kk-page-scroll-controls button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(45,23,77,.22);
}

.kk-view-map .kk-page-scroll-controls {
  display: none;
}

/* Keep favorite stars visually centered inside circular card buttons. */
.favorite-card-button {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.favorite-card-button.active,
.favorite-card-button {
  font-size: 1.25rem;
}

@media (max-width: 620px) {
  .kind-kingdom-app-shell {
    width: min(100%, calc(100vw - 12px));
    border-width: 3px;
    border-radius: 20px;
  }

  .kk-dom-page {
    padding: 14px;
  }

  .kk-player-card,
  .kk-closet-preview-dom,
  .kk-story-tools {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .kk-badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phaserless skin: restore the original 960x760 game-like look without Phaser. */
.kind-kingdom-app-shell {
  width: min(960px, calc(100vw - 28px)) !important;
  min-height: 0 !important;
  aspect-ratio: 960 / 760;
  max-height: none;
  border: 5px solid #fff;
  border-radius: 28px;
  background: #6fb7ff;
  overflow: hidden;
  position: relative;
}

.kind-kingdom-app-shell .kk-dom-page {
  min-height: 100%;
  width: 100%;
  padding: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.kk-old-scene {
  position: relative;
  display: block !important;
  overflow-x: hidden;
  overflow-y: auto;
}

.kk-old-dashboard-scene {
  background:
    radial-gradient(circle at 85% 19%, #ffd166 0 72px, transparent 73px),
    linear-gradient(180deg, #6fb7ff 0 33%, #b9ef9a 33% 100%);
  padding: 52px 44px 28px !important;
  text-align: center;
}

.kk-old-world-title {
  width: min(860px, 100%);
  margin: 0 auto 22px;
  color: #fff;
  font-family: "Berkshire Swash", Georgia, serif;
  font-size: clamp(2.6rem, 5vw, 3.2rem);
  line-height: 1;
  text-align: center;
  text-shadow:
    -4px -4px 0 #4d2c83,
    4px -4px 0 #4d2c83,
    -4px 4px 0 #4d2c83,
    4px 4px 0 #4d2c83;
}

.kk-old-dashboard-pill {
  position: absolute;
  left: 62px;
  top: 145px;
  max-width: calc(100% - 124px);
  border-radius: 4px;
  background: rgba(255,255,255,.8);
  color: #2d174d;
  padding: 6px 12px;
  font-weight: 1000;
}

.kk-old-news-badge {
  position: absolute;
  right: 47px;
  top: 108px;
  width: 250px;
  min-height: 48px;
  border-radius: 0 !important;
  border: 4px solid #ffb703 !important;
  background: #fff2a8 !important;
  color: #3a2900 !important;
  box-shadow: none !important;
  font-size: .94rem;
}

.kk-old-stat-row {
  width: min(880px, 100%);
  margin: 150px auto 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 35px;
}

.kk-old-stat-card {
  min-height: 112px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 4px solid #5a2da0;
  background: rgba(255,255,255,.92);
  color: #2d174d;
  padding: 12px;
}

.kk-old-stat-card b {
  color: #4d2c83;
  font-size: 1.15rem;
}

.kk-old-stat-card strong {
  font-size: 1.08rem;
  line-height: 1.1;
}

.kk-old-stat-card span {
  color: #66517e;
  font-size: .82rem;
  font-weight: 1000;
}

.kk-old-dashboard-copy {
  width: min(820px, 100%);
  margin: 0 auto 22px;
  display: grid;
  gap: 13px;
  color: #2d174d;
  font-weight: 1000;
  text-align: center;
}

.kk-old-dashboard-copy p {
  margin: 0;
  line-height: 1.26;
}

.kk-old-button-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 22px auto 0;
  width: min(880px, 100%);
}

.kk-old-button-row.secondary {
  gap: 14px;
}

.kk-old-button-row button,
.kk-old-button-row a {
  border: 0;
  border-radius: 0;
  color: #fff;
  background: #5a2da0;
  box-shadow: none;
  padding: 12px 20px;
  font-size: 1.24rem;
  font-weight: 1000;
  text-decoration: none;
}

.kk-old-button-row.primary button:nth-child(2) { background: #d76d77; }
.kk-old-button-row.primary button:nth-child(3) { background: #ff9f1c; }
.kk-old-button-row.primary button:nth-child(4) { background: #2ec4b6; color: #053f3b; }
.kk-old-button-row.secondary button:nth-child(1) { background: #ffb703; color: #3a2900; }
.kk-old-button-row.secondary button:nth-child(2) { background: #fff2a8; color: #3a2900; }
.kk-old-button-row.secondary button:nth-child(3) { background: #7b4dff; }
.kk-old-button-row.secondary button:nth-child(4) { background: #2ec4b6; color: #053f3b; }
.kk-old-button-row.secondary a { background: #ff9f1c; }
.kk-old-button-row.secondary button:nth-child(6) { background: #3d315b; }

.kk-old-shop-scene {
  background:
    radial-gradient(circle at 87.5% 12.5%, rgba(255,209,102,.88) 0 76px, transparent 77px),
    #3d2466;
  padding: 60px 100px 50px !important;
}

.kk-old-shop-scene .kk-reward-panel.shop,
.kk-old-shop-scene .kk-reward-panel.closet {
  width: 760px !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.kk-old-shop-scene .kk-reward-panel.shop .kk-panel-head,
.kk-old-shop-scene .kk-reward-panel.closet .kk-panel-head {
  text-align: left !important;
}

.kk-old-shop-scene .kk-panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.kk-old-shop-scene .kk-tabs {
  justify-content: flex-start !important;
  margin-top: 14px;
}

.kk-old-shop-scene .kk-tabs button {
  padding: 10px 16px;
  font-size: 1rem;
}

.kk-old-shop-scene .kk-shop-grid {
  grid-template-columns: repeat(auto-fit, minmax(174px, 186px)) !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.kk-old-shop-scene .kk-shop-item {
  min-height: 204px;
  display: grid !important;
  place-items: center !important;
  place-content: center !important;
  text-align: center !important;
}

.kk-old-shop-scene .kk-shop-item h3,
.kk-old-shop-scene .kk-shop-item p,
.kk-old-shop-scene .kk-shop-item small {
  text-align: center !important;
}

.kk-old-shop-scene .kk-closet-preview {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.kk-old-shop-scene .kk-avatar-preview .kk-hero {
  width: 154px;
  height: 116px;
}

.kk-old-shop-scene .kk-hero .kk-lpc-layer {
  width: 128px;
  height: 128px;
  background-size: 1152px 512px;
  background-position: -128px -256px;
}

.kk-hero .kk-lpc-layer {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 128px;
  height: 128px;
  background-size: 1152px 512px;
  background-position: -128px -256px;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 10px rgba(45,23,77,.22));
  animation: kk-avatar-idle 1.6s ease-in-out infinite;
}

.kk-hero .kk-lpc-layer.accessory {
  z-index: 8;
}

.kk-hero.compact .kk-lpc-layer {
  width: 72px;
  height: 72px;
  background-size: 648px 288px;
  background-position: -72px -144px;
}

.kk-old-scene .kk-panel-message.kk-dom-message {
  width: min(760px, 100%);
}

@media (max-width: 980px) {
  .kind-kingdom-app-shell {
    aspect-ratio: auto;
    min-height: 760px !important;
  }

  .kk-old-dashboard-scene,
  .kk-old-shop-scene {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .kk-old-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 120px;
  }

  .kk-old-dashboard-pill,
  .kk-old-news-badge {
    position: static;
    margin: 10px auto;
  }
}

/* Professional island map upgrade for the non-Phaser world. */
.kk-view-map {
  aspect-ratio: auto;
  min-height: 760px !important;
  overflow: hidden;
}

.kk-map-page {
  padding: 18px !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(255,209,102,.82) 0 58px, transparent 59px),
    linear-gradient(180deg, #3d2466 0 18%, #6fb7ff 18% 100%);
}

.kk-map-page .kk-dom-head {
  width: min(1040px, 100%);
  padding: 14px 18px;
  border-radius: 22px;
}

.kk-map-page .kk-dom-head h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.kk-map-layout {
  width: min(1040px, 100%) !important;
  grid-template-columns: minmax(0, 1fr) 265px !important;
  align-items: stretch;
}

.kk-phaser-map-stage {
  position: relative;
  min-height: 560px;
  height: 560px;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,.95);
  border-radius: 28px;
  background: #6fb7ff;
  box-shadow: inset 0 0 60px rgba(20,51,91,.16), 0 18px 36px rgba(35,17,72,.22);
  outline: none;
}

.kk-phaser-map-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.kk-map-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 1000;
  background: linear-gradient(135deg, #6fb7ff, #3d2466);
}

.kk-map-error {
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.kk-map-error strong {
  display: block;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
}

.kk-map-error span {
  max-width: 620px;
  font-weight: 900;
  color: #fff9d8;
}

.kk-map-error button {
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  background: #ffd166;
  color: #2d174d;
  font-weight: 1000;
  box-shadow: 0 5px 0 rgba(0,0,0,.22);
}

.kk-map-stage {
  position: relative;
  min-height: 560px !important;
  height: 560px;
  overflow: auto !important;
  border: 5px solid rgba(255,255,255,.95);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.42), transparent 22%),
    linear-gradient(180deg, #83d7ff 0%, #6ec8ff 46%, #4ca8e8 100%);
  box-shadow: inset 0 0 60px rgba(20,51,91,.16), 0 18px 36px rgba(35,17,72,.22);
  scrollbar-color: #5a2da0 rgba(255,255,255,.55);
  scrollbar-width: thin;
  outline: none;
}

.kk-map-stage:focus {
  box-shadow: inset 0 0 60px rgba(20,51,91,.16), 0 18px 36px rgba(35,17,72,.22), 0 0 0 5px rgba(255,209,102,.45);
}

.kk-map-world {
  position: relative;
  width: 3200px;
  height: 2100px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.28), transparent 13%),
    radial-gradient(circle at 76% 7%, rgba(255,244,180,.44), transparent 10%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,66,115,.13));
}

.kk-map-sun {
  position: absolute;
  right: 150px;
  top: 86px;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 45px rgba(255,209,102,.7);
}

.kk-map-cloud {
  position: absolute;
  width: 210px;
  height: 58px;
  border-radius: 999px;
  background: rgba(255,255,255,.36);
  filter: blur(.2px);
  animation: kk-cloud-drift 8s ease-in-out infinite alternate;
}

.kk-map-cloud::before,
.kk-map-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}

.kk-map-cloud::before {
  width: 84px;
  height: 84px;
  left: 38px;
  top: -42px;
}

.kk-map-cloud::after {
  width: 110px;
  height: 110px;
  right: 32px;
  top: -58px;
}

.kk-map-cloud.c1 { left: 115px; top: 96px; }
.kk-map-cloud.c2 { left: 720px; top: 76px; animation-delay: .9s; }
.kk-map-cloud.c3 { left: 1240px; top: 150px; animation-delay: 1.6s; }

@keyframes kk-cloud-drift {
  from { transform: translateX(-16px); }
  to { transform: translateX(34px); }
}

.kk-island {
  position: absolute;
  border-radius: 95px;
  border: 10px solid rgba(255,255,255,.34);
  box-shadow: 0 30px 42px rgba(26,61,95,.22), inset 0 -44px 0 rgba(63,89,55,.13);
  display: grid;
  place-items: start center;
  padding-top: 24px;
  overflow: hidden;
}

.kk-island::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 23% 28%, rgba(255,255,255,.3) 0 22px, transparent 24px),
    radial-gradient(circle at 72% 68%, rgba(255,255,255,.2) 0 28px, transparent 30px);
}

.kk-island span {
  position: relative;
  z-index: 32;
  border-radius: 999px;
  background: rgba(45,23,77,.9);
  color: #fff;
  padding: 8px 14px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 6px 0 rgba(23,9,45,.3);
  pointer-events: none;
}

.kk-region-label {
  position: absolute;
  z-index: 60;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: rgba(45,23,77,.94);
  color: #fff;
  padding: 9px 16px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 8px 0 rgba(23,9,45,.28), 0 0 22px rgba(255,255,255,.24);
  pointer-events: none;
}

.kk-region-label.castle { left: 615px; top: 252px; }
.kk-region-label.lantern { left: 1540px; top: 258px; }
.kk-region-label.crystal { left: 2425px; top: 316px; }
.kk-region-label.harbor { left: 815px; top: 1186px; }
.kk-region-label.moon { left: 1935px; top: 1220px; }

.kk-island.castle {
  left: 250px;
  top: 210px;
  width: 900px;
  height: 620px;
  background:
    radial-gradient(circle at 54% 56%, #fff4bd 0 50px, transparent 51px),
    linear-gradient(135deg, #d9f2b4, #82c77f);
}

.kk-island.lantern {
  left: 1210px;
  top: 215px;
  width: 900px;
  height: 650px;
  background:
    radial-gradient(circle at 62% 28%, rgba(255,209,102,.55) 0 34px, transparent 35px),
    linear-gradient(135deg, #7fcf9f, #2f8a63);
}

.kk-island.crystal {
  left: 2170px;
  top: 270px;
  width: 760px;
  height: 700px;
  background:
    radial-gradient(circle at 55% 46%, rgba(255,255,255,.6) 0 36px, transparent 37px),
    linear-gradient(135deg, #d8ccff, #9f7aea);
}

.kk-island.harbor {
  left: 410px;
  top: 1140px;
  width: 980px;
  height: 620px;
  background:
    linear-gradient(135deg, #ffe2a8, #91e5f6 58%, #58b2df);
}

.kk-island.moon {
  left: 1560px;
  top: 1175px;
  width: 980px;
  height: 650px;
  background:
    radial-gradient(circle at 68% 28%, rgba(255,255,255,.74) 0 46px, transparent 47px),
    linear-gradient(135deg, #fde2ff, #a9def9);
}

.kk-bridge {
  position: absolute;
  height: 34px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, #93643a 0 18px, #b47d47 18px 36px);
  border: 4px solid rgba(91,55,25,.55);
  box-shadow: 0 12px 20px rgba(38,58,83,.18);
  transform-origin: center;
  z-index: 2;
}

.kk-bridge.b1 { left: 1080px; top: 520px; width: 260px; transform: rotate(-6deg); }
.kk-bridge.b2 { left: 2070px; top: 620px; width: 180px; transform: rotate(20deg); }
.kk-bridge.b3 { left: 1030px; top: 1038px; width: 560px; transform: rotate(31deg); }
.kk-bridge.b4 { left: 1370px; top: 1430px; width: 280px; transform: rotate(-15deg); }

.kk-waterfall {
  position: absolute;
  width: 70px;
  height: 150px;
  border-radius: 0 0 40px 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(123,223,242,.52));
  box-shadow: 0 18px 22px rgba(35,119,165,.26);
  animation: kk-waterfall 1.2s linear infinite;
  z-index: 1;
}

.kk-waterfall.wf1 { left: 1132px; top: 742px; }
.kk-waterfall.wf2 { left: 2635px; top: 940px; height: 120px; }

@keyframes kk-waterfall {
  from { filter: brightness(1); }
  to { filter: brightness(1.16); }
}

.kk-map-gem,
.kk-map-lantern,
.kk-map-ship {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.kk-map-gem {
  width: 34px;
  height: 46px;
  background: linear-gradient(135deg, #fff, #7bdff2 42%, #7b4dff);
  clip-path: polygon(50% 0, 100% 32%, 75% 100%, 25% 100%, 0 32%);
  filter: drop-shadow(0 0 12px rgba(123,223,242,.8));
  animation: kk-gem-pulse 1.2s ease-in-out infinite alternate;
}

.kk-map-gem.g1 { left: 2385px; top: 520px; }
.kk-map-gem.g2 { left: 2745px; top: 760px; animation-delay: .45s; }

@keyframes kk-gem-pulse {
  from { transform: scale(.92); }
  to { transform: scale(1.1); }
}

.kk-map-lantern {
  width: 28px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff4bd, #ffb703);
  box-shadow: 0 0 18px rgba(255,209,102,.9);
}

.kk-map-lantern.l1 { left: 1430px; top: 560px; }
.kk-map-lantern.l2 { left: 1860px; top: 520px; animation-delay: .5s; }

.kk-map-ship {
  left: 760px;
  top: 1700px;
  width: 92px;
  height: 48px;
  border-radius: 0 0 48px 48px;
  background: #7a421f;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.18);
}

.kk-map-ship::before {
  content: "";
  position: absolute;
  left: 42px;
  top: -70px;
  width: 6px;
  height: 78px;
  background: #5a3821;
}

.kk-map-ship::after {
  content: "";
  position: absolute;
  left: 48px;
  top: -62px;
  border-style: solid;
  border-width: 34px 0 34px 48px;
  border-color: transparent transparent transparent #fff7df;
}

.kk-map-world .kk-map-portal,
.kk-map-world .kk-map-guide {
  z-index: 8;
}

.kk-map-world .kk-map-player {
  z-index: 20;
}

.kk-map-player {
  width: 126px;
  height: 132px;
  display: grid;
  place-items: center;
  z-index: 90 !important;
}

.kk-player-token {
  position: relative;
  width: 138px;
  height: 154px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.kk-player-token::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 51%;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,209,102,.82), rgba(255,255,255,.2) 62%, transparent 65%);
  border: 4px solid rgba(255,255,255,.9);
  transform: translate(-50%, -50%);
  z-index: 0;
  box-shadow: 0 0 26px rgba(255,209,102,.85);
}

.kk-player-token span {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  z-index: 20;
  border-radius: 999px;
  background: #2ec4b6;
  color: #053f3b;
  border: 3px solid #fff;
  padding: 3px 10px;
  font-size: .76rem;
  font-weight: 1000;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}

.kk-player-token .kk-hero.compact {
  width: 126px;
  height: 132px;
  filter: drop-shadow(0 14px 12px rgba(24,17,55,.34));
  z-index: 5;
}

.kk-player-token .kk-hero.compact .kk-lpc-layer {
  width: 128px;
  height: 128px;
  background-size: 1152px 512px;
  background-position: -128px -256px;
}

.kk-player-token .kk-hero-pet {
  right: -10px;
  bottom: 4px;
}

.kk-map-side {
  max-height: 560px;
  overflow-y: auto;
}

@media (max-width: 940px) {
  .kk-map-layout {
    grid-template-columns: 1fr !important;
  }

  .kk-map-stage {
    height: 560px;
  }

  .kk-map-side {
    max-height: none;
  }
}

.kk-phaser-only-map {
  position: relative;
  width: min(980px, 100%);
  min-height: 760px;
  height: min(760px, calc(100dvh - 24px));
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 34px;
  border: 5px solid rgba(255,255,255,.95);
  box-shadow: 0 24px 60px rgba(35,17,72,.28);
  background: #6fb7ff;
}

.kk-phaser-only-map .kk-phaser-map-stage {
  width: 100%;
  height: 100%;
  min-height: 100% !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.kk-map-overlay-actions {
  position: absolute;
  left: 18px;
  top: 92px;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: min(560px, calc(100% - 36px));
  pointer-events: none;
}

.kk-map-overlay-actions button {
  pointer-events: auto;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 1000;
  color: #fff;
  background: rgba(45,23,77,.86);
  box-shadow: 0 5px 0 rgba(29,18,54,.45);
}

.kk-map-floating-pad {
  position: absolute;
  right: 18px;
  bottom: 22px;
  z-index: 12;
}

.kk-map-floating-pad .kk-map-pad {
  background: rgba(255,255,255,.72);
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 20px;
  padding: 8px;
}

.kk-ar-page,
.kk-multiplayer-page {
  width: min(1120px, 100%);
}

.kk-ar-layout,
.kk-multiplayer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 18px;
  width: min(1040px, 100%);
  margin-inline: auto;
  align-items: stretch;
}

.kk-ar-viewfinder {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 28px;
  border: 5px solid #fff;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.35), transparent 28%),
    linear-gradient(135deg, #20113f, #4b2a7b 46%, #77e5dc);
  box-shadow: 0 18px 36px rgba(35,17,72,.22);
}

.kk-ar-viewfinder video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}

.kk-ar-viewfinder.camera-on video {
  opacity: .82;
}

.kk-ar-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  color: #fff;
  font-weight: 1000;
  text-shadow: 0 3px 8px rgba(0,0,0,.3);
}

.kk-ar-fallback span {
  font-family: "Berkshire Swash", Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
}

.kk-ar-object {
  position: absolute;
  display: grid;
  place-items: center;
  gap: 4px;
  width: 138px;
  min-height: 112px;
  border: 4px solid rgba(255,255,255,.94);
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  color: #2d174d;
  font-weight: 1000;
  box-shadow: 0 0 28px rgba(255,209,102,.55), 0 12px 22px rgba(0,0,0,.18);
  animation: arFloat 2.2s ease-in-out infinite;
}

.kk-ar-object span {
  font-size: 2.6rem;
  color: #7b4dff;
}

.kk-ar-object.active {
  background: #fff2a8;
  transform: scale(1.06);
}

.kk-ar-object.spirit { left: 8%; top: 16%; }
.kk-ar-object.crystal { right: 10%; top: 22%; animation-delay: .3s; }
.kk-ar-object.dragon { left: 20%; bottom: 14%; animation-delay: .6s; }
.kk-ar-object.lantern { right: 18%; bottom: 18%; animation-delay: .9s; }

@keyframes arFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

.kk-ar-scanline {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #7bdff2, #ffd166, transparent);
  box-shadow: 0 0 22px rgba(123,223,242,.85);
  animation: arScan 3s linear infinite;
}

@keyframes arScan {
  from { transform: translateY(20px); opacity: .2; }
  50% { opacity: 1; }
  to { transform: translateY(480px); opacity: .2; }
}

.kk-ar-mission-card,
.kk-room-create-card,
.kk-room-code-card,
.kk-coop-card,
.kk-multiplayer-log {
  color: #2d174d;
}

.kk-ar-steps {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.kk-ar-steps span {
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff9e8;
  border: 2px solid #ffd166;
  font-weight: 900;
}

.kk-multiplayer-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kk-room-create-card,
.kk-room-code-card,
.kk-room-lobby-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.kk-room-create-card h3,
.kk-room-code-card h3,
.kk-room-lobby-card h3,
.kk-multiplayer-log h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  color: #2d174d;
}

.kk-room-visibility {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kk-room-visibility button,
.kk-wide-button,
.kk-room-code-display button {
  display: inline-grid;
  place-items: center;
  text-align: center;
}

.kk-room-visibility button {
  border: 3px solid #d8caff;
  border-radius: 18px;
  padding: 12px;
  font-weight: 1000;
  color: #2d174d;
  background: #efe7ff;
  box-shadow: 0 5px 0 #b6a2e6;
}

.kk-room-visibility button.selected {
  border-color: #ffd166;
  background: #ffd166;
  color: #3f2a00;
  box-shadow: 0 5px 0 #c99517;
}

.kk-wide-button {
  width: 100%;
}

.kk-room-code-display {
  display: grid;
  place-items: center;
  gap: 8px;
  border-radius: 20px;
  border: 3px dashed #b8a6e8;
  background: #f8f3ff;
  padding: 14px;
  text-align: center;
}

.kk-room-code-display span {
  font-size: .82rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6f57a0;
}

.kk-room-code-display strong {
  font-family: "Nunito", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1;
  color: #2d174d;
}

.kk-room-code-display button {
  min-width: 150px;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 1000;
  color: #064743;
  background: #77e5dc;
  box-shadow: 0 5px 0 #1b8f85;
}

.kk-public-room-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.kk-public-room-list > b {
  color: #2d174d;
}

.kk-public-room-list button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  border: 3px solid #d8caff;
  border-radius: 16px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 1000;
  color: #2d174d;
  background: #ffffff;
  box-shadow: 0 4px 0 #b6a2e6;
  text-align: left;
}

.kk-public-room-list button span {
  color: #7b4dff;
}

.kk-public-room-list button small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #5a4c78;
}

.kk-multiplayer-log {
  grid-column: 1 / -1;
  max-height: 260px;
  overflow: auto;
}

.kk-room-code-card input {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 3px solid #d8caff;
  border-radius: 16px;
  font: inherit;
  font-weight: 900;
  color: #2d174d;
}

@media (max-width: 860px) {
  .kk-phaser-only-map {
    min-height: 680px;
    height: calc(100dvh - 12px);
  }

  .kk-ar-layout,
  .kk-multiplayer-layout {
    grid-template-columns: 1fr;
  }

  .kk-ar-viewfinder {
    min-height: 430px;
  }
}

.kk-ar-showcase-page {
  width: min(1220px, 100%);
  height: min(760px, calc(100dvh - 20px));
  min-height: 720px;
  padding: 10px !important;
  gap: 8px;
  overflow: hidden !important;
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr) 150px 84px 42px;
  background:
    radial-gradient(circle at 86% 4%, rgba(155,109,255,.32), transparent 14%),
    radial-gradient(circle at 18% 8%, rgba(255,209,102,.18), transparent 16%),
    linear-gradient(180deg, #070b29, #111747 44%, #070b29);
  color: #10143b;
}

.kk-ar-showcase-head {
  position: relative;
  width: min(1180px, 100%);
  min-height: 70px;
  display: grid;
  grid-template-columns: 72px 1fr 96px;
  align-items: center;
  gap: 14px;
  text-align: center;
  color: #fff;
  margin-inline: auto;
}

.kk-ar-showcase-head h2 {
  margin: 0;
  font-family: "Nunito", Arial, sans-serif;
  font-size: clamp(1.9rem, 3.8vw, 3.05rem);
  line-height: .95;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(75,42,123,.45);
}

.kk-ar-showcase-head p {
  margin: 4px 0 0;
  font-size: clamp(.95rem, 1.8vw, 1.25rem);
  font-weight: 1000;
}

.kk-ar-showcase-head > button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.88);
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 1000;
}

.kk-ar-mini-creature,
.kk-phone-creature {
  position: relative;
  z-index: 8;
  width: 112px;
  height: 112px;
}

.kk-ar-mini-creature canvas,
.kk-phone-creature canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.kk-ar-steps-grid {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-inline: auto;
  min-height: 0;
}

.kk-ar-step-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,.75);
  background: linear-gradient(180deg, #f4f0ff, #eef1ff);
  box-shadow: inset 0 0 28px rgba(255,255,255,.55), 0 18px 32px rgba(2,5,24,.28);
  padding: 12px 12px;
  overflow: hidden;
}

.kk-ar-step-copy {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  min-height: 92px;
  align-items: start;
}

.kk-ar-step-copy > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1b1a58;
  color: #fff;
  font-weight: 1000;
  font-size: 1.25rem;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}

.kk-ar-step-copy h3,
.kk-ar-step-copy p {
  margin: 0;
}

.kk-ar-step-copy h3 {
  text-transform: uppercase;
  font-size: clamp(.92rem, 1.5vw, 1.1rem);
  line-height: 1.05;
  color: #10143b;
}

.kk-ar-step-copy p {
  margin-top: 6px;
  font-size: .82rem;
  line-height: 1.18;
  color: #171a42;
  font-weight: 850;
}

.kk-phone {
  width: min(220px, 100%);
  aspect-ratio: 9 / 16.7;
  justify-self: center;
  border-radius: 30px;
  padding: 10px;
  background: #050509;
  box-shadow: inset 0 0 0 4px #24222c, 0 10px 22px rgba(0,0,0,.36);
}

.kk-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 25px;
  background: #d6d0c4;
}

.kk-phone-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
}

.kk-phone-screen.camera-on video {
  opacity: .78;
}

.kk-room-sim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22) 0 48%, transparent 48% 52%, rgba(255,255,255,.12) 52%),
    linear-gradient(180deg, #e8e7e2 0 48%, #c2b7a7 48% 70%, #7a5538 70%);
}

.kk-phone-screen.camera-on .kk-room-sim {
  background: transparent;
}

.kk-phone-screen.camera-on .kk-room-window,
.kk-phone-screen.camera-on .kk-room-plant,
.kk-phone-screen.camera-on .kk-room-couch,
.kk-phone-screen.camera-on .kk-room-table {
  display: none;
}

.kk-phone-screen.camera-denied .kk-room-sim {
  background:
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.45), transparent 16%),
    linear-gradient(90deg, rgba(255,255,255,.22) 0 48%, transparent 48% 52%, rgba(255,255,255,.12) 52%),
    linear-gradient(180deg, #f0eee9 0 48%, #d0c2ae 48% 70%, #7a5538 70%);
}

.kk-ar-scan-overlay {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle, rgba(123,223,242,.16), rgba(7,11,41,.12));
  font-weight: 1000;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.kk-ar-scan-overlay span {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 4px solid rgba(123,223,242,.82);
  box-shadow: 0 0 28px rgba(123,223,242,.78), inset 0 0 34px rgba(123,223,242,.22);
  animation: arScanPulse 1.4s ease-in-out infinite alternate;
}

.kk-ar-scan-overlay button {
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  color: #fff;
  background: linear-gradient(135deg, #7b4dff, #b075ff);
  font-weight: 1000;
  display: grid;
  place-items: center;
}

@keyframes arScanPulse {
  from { transform: scale(.8); opacity: .55; }
  to { transform: scale(1.06); opacity: 1; }
}

.kk-room-window {
  position: absolute;
  left: 18px;
  top: 44px;
  width: 50px;
  height: 80px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e8fbff, #9bdcff);
  border: 6px solid #fff;
  box-shadow: 0 0 18px rgba(255,255,255,.65);
}

.kk-room-couch {
  position: absolute;
  left: 24px;
  top: 150px;
  width: 112px;
  height: 74px;
  border-radius: 22px 22px 16px 16px;
  background: linear-gradient(180deg, #eee7dc, #c7bdaa);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}

.kk-room-table {
  position: absolute;
  left: 82px;
  bottom: 112px;
  width: 88px;
  height: 38px;
  border-radius: 50%;
  background: #8a5a36;
  box-shadow: 0 8px 12px rgba(0,0,0,.22);
}

.kk-room-plant {
  position: absolute;
  right: 28px;
  top: 40px;
  width: 34px;
  height: 124px;
  border-radius: 50% 50% 8px 8px;
  background:
    radial-gradient(circle at 40% 16%, #236b3a 0 16px, transparent 17px),
    radial-gradient(circle at 68% 30%, #2d8c4d 0 18px, transparent 19px),
    linear-gradient(90deg, transparent 42%, #5c3b21 43% 56%, transparent 57%);
}

.kk-ar-portal {
  position: absolute;
  right: 18px;
  top: 128px;
  width: 78px;
  height: 140px;
  border-radius: 48% 48% 14px 14px;
  background: radial-gradient(circle, #1f0c3d 18%, #6823ba 52%, #c185ff 70%, transparent 72%);
  box-shadow: 0 0 38px #9b6dff, inset 0 0 30px #120524;
  animation: arPortalPulse 1.5s ease-in-out infinite alternate;
}

.kk-ar-portal::before,
.kk-ar-portal::after {
  content: "";
  position: absolute;
  inset: 16px 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.44), transparent 18%, rgba(155,109,255,.4) 38%, transparent 62%);
  animation: portalSpin 3.2s linear infinite;
}

.kk-ar-portal::after {
  inset: 30px 27px;
  animation-duration: 2.2s;
  animation-direction: reverse;
}

@keyframes arPortalPulse {
  from { filter: brightness(.94); }
  to { filter: brightness(1.25); }
}

@keyframes portalSpin {
  to { transform: rotate(360deg); }
}

.kk-ar-crystal {
  position: absolute;
  width: 28px;
  height: 48px;
  clip-path: polygon(50% 0, 100% 28%, 72% 100%, 28% 100%, 0 28%);
  background: linear-gradient(135deg, #c8f8ff, #8a5cff 55%, #fff);
  box-shadow: 0 0 22px #9b6dff;
  z-index: 4;
}

.kk-ar-crystal.one { left: 112px; bottom: 154px; }
.kk-ar-crystal.two { right: 40px; bottom: 100px; }

.kk-phone-creature {
  position: absolute;
  left: 50%;
  bottom: 56px;
  width: 150px;
  height: 150px;
  transform: translateX(-50%);
}

.kk-phone-mission,
.kk-phone-reward {
  position: absolute;
  left: 50%;
  top: 92px;
  transform: translateX(-50%);
  width: 76%;
  border-radius: 18px;
  background: rgba(255,250,239,.94);
  color: #14163c;
  padding: 11px;
  z-index: 12;
  box-shadow: 0 10px 20px rgba(0,0,0,.24);
  font-weight: 900;
}

.kk-phone-mission p {
  margin: 6px 0;
  font-size: .72rem;
  line-height: 1.18;
}

.kk-phone-reward {
  text-align: center;
  top: 112px;
  background: linear-gradient(180deg, #fff5dc, #ffe3aa);
}

.kk-phone-reward span {
  display: block;
  margin-top: 10px;
  font-size: 1.55rem;
  color: #5a2da0;
}

.kk-phone-accept,
.kk-phone-shutter {
  position: absolute;
  left: 50%;
  bottom: 54px;
  transform: translateX(-50%);
  z-index: 13;
  border: 0;
  border-radius: 999px;
  padding: 11px 26px;
  color: #fff;
  background: linear-gradient(135deg, #7b4dff, #b075ff);
  font-weight: 1000;
}

.kk-phone-shutter {
  bottom: 34px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 5px solid #fff;
  display: grid;
  place-items: center;
}

.kk-phone-top,
.kk-phone-bottom {
  position: absolute;
  left: 12px;
  right: 12px;
  z-index: 16;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-weight: 1000;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}

.kk-phone-top { top: 14px; }
.kk-phone-bottom { bottom: 16px; font-size: .78rem; }
.kk-phone-bottom b {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #7b4dff;
  box-shadow: 0 0 0 5px rgba(123,77,255,.8);
}

.kk-ar-bottom-grid {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .7fr);
  gap: 10px;
  margin-inline: auto;
  min-height: 0;
}

.kk-ar-verify-card {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 10px;
  margin-inline: auto;
  border-radius: 16px;
  border: 3px solid rgba(255,255,255,.72);
  background: rgba(244,240,255,.96);
  padding: 10px;
  color: #10143b;
  box-shadow: 0 12px 24px rgba(2,5,24,.2);
}

.kk-ar-verify-card label {
  display: grid;
  gap: 5px;
  min-width: 0;
  font-weight: 1000;
  font-size: .82rem;
}

.kk-ar-verify-card select,
.kk-ar-verify-card input[type="text"],
.kk-ar-verify-card input:not([type]) {
  width: 100%;
  min-width: 0;
  border: 2px solid #cbbcff;
  border-radius: 11px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 900;
  color: #10143b;
  background: #fff;
}

.kk-ar-proof-check {
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: center;
}

.kk-ar-proof-check input {
  width: 20px;
  height: 20px;
}

.kk-ar-flow-card,
.kk-ar-challenge-list {
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,.75);
  background: linear-gradient(180deg, #f4f0ff, #eef1ff);
  padding: 12px;
  text-align: center;
}

.kk-ar-flow-card h3,
.kk-ar-challenge-list h3 {
  margin: 0 0 8px;
  text-transform: uppercase;
  color: #1b1a58;
}

.kk-ar-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.kk-ar-flow b {
  display: none;
}

.kk-ar-flow span {
  display: grid;
  place-items: center;
  width: 70px;
  height: 46px;
  border-radius: 18px;
  margin: 0 auto 8px;
  background: #dfd1ff;
  color: #5a2da0;
  font-weight: 1000;
}

.kk-ar-flow p {
  margin: 0;
  font-size: .76rem;
  line-height: 1.2;
  font-weight: 900;
}

.kk-ar-challenge-list {
  display: grid;
  gap: 6px;
  text-align: left;
}

.kk-ar-challenge-list button {
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #1b1a58;
  padding: 7px 10px;
  font-weight: 900;
  text-align: left;
}

.kk-ar-action-bar {
  width: min(1180px, 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #fff;
  font-weight: 1000;
  align-self: center;
}

.kk-css-creature {
  width: 90px;
  height: 90px;
  border-radius: 48% 48% 42% 42%;
  margin: auto;
  background: radial-gradient(circle at 35% 35%, #fff 0 5px, transparent 6px), radial-gradient(circle at 65% 35%, #fff 0 5px, transparent 6px), #5ddcff;
  box-shadow: 0 0 24px #7bdff2;
}

@media (max-width: 1050px) {
  .kk-ar-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kk-ar-bottom-grid,
  .kk-ar-verify-card {
    grid-template-columns: 1fr;
  }

  .kk-ar-showcase-page {
    height: auto;
    overflow: auto !important;
    grid-template-rows: auto;
  }
}

@media (max-width: 620px) {
  .kk-ar-steps-grid,
  .kk-ar-flow {
    grid-template-columns: 1fr;
  }

  .kk-ar-step-card {
    min-height: auto;
  }
}

.kk-ar-single-page {
  position: relative;
  width: min(980px, 100%);
  min-height: min(760px, calc(100dvh - 20px));
  height: min(760px, calc(100dvh - 20px));
  padding: 0 !important;
  overflow: hidden !important;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 82% 8%, rgba(155,109,255,.34), transparent 16%),
    radial-gradient(circle at 20% 16%, rgba(123,223,242,.22), transparent 18%),
    linear-gradient(180deg, #070b29, #111747 48%, #070b29);
}

.kk-ar-back-icon {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 30;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 1000;
}

.kk-ar-live-phone {
  width: min(410px, 82vw);
  max-height: calc(100% - 36px);
  border-radius: 46px;
  padding: 14px;
  box-shadow:
    inset 0 0 0 5px #24222c,
    0 26px 60px rgba(0,0,0,.45),
    0 0 55px rgba(155,109,255,.34);
}

.kk-ar-live-phone .kk-phone-screen {
  border-radius: 34px;
}

.kk-phone-screen.permission {
  background:
    radial-gradient(circle at 50% 28%, rgba(155,109,255,.34), transparent 28%),
    linear-gradient(180deg, #111747, #070b29);
}

.kk-room-sim.hidden {
  display: none;
}

.kk-phone-permission {
  position: absolute;
  inset: 0;
  z-index: 21;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 28px;
  color: #fff;
  text-align: center;
}

.kk-phone-permission b {
  font-size: 1.75rem;
  font-weight: 1000;
}

.kk-phone-permission p {
  margin: 0;
  max-width: 230px;
  font-weight: 900;
  line-height: 1.3;
}

.kk-phone-permission button {
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  color: #fff;
  background: linear-gradient(135deg, #7b4dff, #b075ff);
  font-weight: 1000;
  box-shadow: 0 6px 0 rgba(49,27,118,.8);
}

.kk-phone-hint {
  position: absolute;
  left: 50%;
  top: 116px;
  transform: translateX(-50%);
  z-index: 15;
  border-radius: 999px;
  padding: 9px 14px;
  color: #fff;
  background: rgba(20,16,48,.78);
  border: 2px solid rgba(255,255,255,.42);
  font-weight: 1000;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}

.kk-ar-live-phone .kk-room-window {
  left: 28px;
  top: 58px;
  width: 76px;
  height: 122px;
}

.kk-ar-live-phone .kk-room-couch {
  left: 34px;
  top: 218px;
  width: 170px;
  height: 100px;
}

.kk-ar-live-phone .kk-room-table {
  left: 135px;
  bottom: 178px;
  width: 128px;
  height: 54px;
}

.kk-ar-live-phone .kk-room-plant {
  right: 46px;
  top: 56px;
  transform: scale(1.28);
  transform-origin: top right;
}

.kk-ar-live-phone .kk-ar-portal {
  right: 24px;
  top: 126px;
  width: 112px;
  height: 190px;
  border: 0;
  z-index: 8;
  cursor: pointer;
  transform: perspective(500px) rotateY(-12deg);
  background:
    radial-gradient(circle at 50% 52%, #090013 0 20%, #2e075c 35%, #7a1ed2 53%, #d6a7ff 68%, transparent 71%),
    conic-gradient(from 20deg, #d6a7ff, #6f22c8, #240052, #c185ff, #d6a7ff);
  box-shadow:
    0 0 44px rgba(155,109,255,.95),
    0 0 18px rgba(255,255,255,.48),
    inset 0 0 36px rgba(12,0,28,.95);
}

.kk-ar-live-phone .kk-ar-crystal.one {
  left: 178px;
  bottom: 224px;
  transform: scale(1.2);
}

.kk-ar-live-phone .kk-ar-crystal.two {
  right: 52px;
  bottom: 178px;
  transform: scale(1.05);
}

.kk-live-creature {
  left: 18px;
  bottom: 142px;
  width: 168px;
  height: 168px;
  transform: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: block;
  cursor: pointer;
}

.kk-live-creature > span {
  display: block;
  width: 100%;
  height: 100%;
}

.kk-live-mission {
  top: 54px;
  width: 78%;
  padding: 12px;
}

.kk-live-mission p {
  font-size: .86rem;
  line-height: 1.22;
}

.kk-phone-verify {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  z-index: 17;
  width: 78%;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255,250,239,.96);
  color: #14163c;
  box-shadow: 0 12px 24px rgba(0,0,0,.26);
}

.kk-phone-verify select,
.kk-phone-verify input:not([type]) {
  width: 100%;
  border: 2px solid #d7c8ff;
  border-radius: 10px;
  padding: 7px 9px;
  font: inherit;
  font-size: .76rem;
  font-weight: 900;
  color: #14163c;
  background: #fff;
  text-align: center;
  text-align-last: center;
}

.kk-phone-verify label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px;
  align-items: center;
  font-size: .72rem;
  font-weight: 1000;
}

.kk-phone-verify button {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  color: #fff;
  background: linear-gradient(135deg, #7b4dff, #b075ff);
  font-weight: 1000;
  text-align: center;
  display: grid;
  place-items: center;
}

.kk-phone-toast {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  z-index: 25;
  width: 80%;
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(20,16,48,.9);
  color: #fff;
  font-weight: 1000;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.kk-live-reward button {
  margin-top: 10px;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  color: #fff;
  background: linear-gradient(135deg, #7b4dff, #b075ff);
  font-weight: 1000;
  display: grid;
  place-items: center;
  width: 100%;
}

.kk-ar-live-phone .kk-phone-top button,
.kk-ar-live-phone .kk-phone-bottom button {
  border: 0;
  color: #fff;
  background: rgba(0,0,0,.42);
  border-radius: 999px;
  padding: 7px 9px;
  font: inherit;
  font-weight: 1000;
  text-shadow: none;
  display: grid;
  place-items: center;
  text-align: center;
}

.kk-ar-live-phone .kk-phone-bottom button {
  font-size: .72rem;
}

.kk-ar-live-phone .kk-phone-bottom .kk-phone-ar-button {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 5px solid #fff;
  background: #fff;
  color: #7b4dff;
  box-shadow: 0 0 0 5px rgba(123,77,255,.78);
}