* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Georgia, 'Times New Roman', serif;
  background: #1a0f05;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── SCREEN SYSTEM ── */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; }

/* ══════════════════════════════════
   SCREEN 1 – CHARACTER CUSTOMIZATION
   ══════════════════════════════════ */
#screen-customize {
  background: #f5f0e8;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 20px;
}

#screen-customize h1 {
  font-size: 30px;
  color: #5D2E0C;
  text-align: center;
}

.customize-layout {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.controls-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
  width: 100%;
}

.control-group {
  background: white;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 14px;
  transition: all 0.3s;
  opacity: 0.4;
}
.control-group.active-group  { opacity: 1; border-color: #8B4513; }
.control-group.locked-group  { opacity: 0.75; background: #f0faf0; border-color: #4CAF50; }

.control-group h3 { font-size: 15px; color: #5D2E0C; margin-bottom: 10px; }

.arrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.arr-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: #8B4513;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.arr-btn:disabled { background: #ccc; cursor: default; }

.choice-label {
  flex: 1;
  text-align: center;
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.lock-btn {
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: 8px;
  background: #8B4513;
  color: white;
  font-size: 14px;
  font-family: Georgia, serif;
  cursor: pointer;
}
.lock-btn:hover:not(:disabled) { background: #6B2F0B; }
.lock-btn:disabled { background: #4CAF50; cursor: default; }
.lock-hint { font-size: 11px; color: #999; margin-top: 5px; }

#btn-knight-done {
  display: none;
  padding: 15px 40px;
  background: #2c1a00;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 19px;
  font-family: Georgia, serif;
  cursor: pointer;
}
#btn-knight-done:hover { background: #3d2400; }

/* ══════════════════════════════════
   SCROLL / BACKSTORY SCREENS
   ══════════════════════════════════ */
.scroll-screen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  background: linear-gradient(180deg, #87CEEB 0%, #5aae40 70%, #3d8a29 100%);
}

.blur-bg {
  position: fixed; inset: 0;
  background: inherit;
  transition: filter 0.4s;
  z-index: 0;
}
.blur-bg.blurred { filter: blur(6px); }

.scroll-box {
  position: relative;
  z-index: 10;
  background: #f5e6c4;
  border: 8px solid #8B6914;
  border-radius: 18px;
  padding: 40px 36px;
  max-width: 580px;
  width: 95%;
  box-shadow: 0 12px 50px rgba(0,0,0,0.55);
  text-align: center;
}

/* scroll top/bottom roll */
.scroll-box::before, .scroll-box::after {
  content: '';
  display: block;
  height: 18px;
  background: #8B6914;
  border-radius: 9px;
}
.scroll-box::before { margin: -40px -36px 28px; }
.scroll-box::after  { margin: 28px -36px -40px; }

.scroll-text {
  font-size: 17px;
  line-height: 1.75;
  color: #3a2000;
  margin-bottom: 24px;
}

.scroll-btn {
  display: inline-block;
  margin: 6px;
  padding: 11px 26px;
  border: none;
  border-radius: 10px;
  background: #8B4513;
  color: white;
  font-size: 15px;
  font-family: Georgia, serif;
  cursor: pointer;
}
.scroll-btn:hover { background: #6B2F0B; }
.scroll-btn.secondary { background: #555; }
.scroll-btn.secondary:hover { background: #333; }
.scroll-btn.danger { background: #8B0000; }
.scroll-btn.danger:hover { background: #5a0000; }

/* ══════════════════════════════════
   SCREEN 4 – FORK STUDY
   ══════════════════════════════════ */
#screen-fork-study {
  flex-direction: column;
  align-items: center;
  background: #f5f0e8;
  padding: 24px 16px;
  gap: 18px;
}

.game-header { text-align: center; }
.game-header h2 { font-size: 24px; color: #5D2E0C; }
.game-header p  { font-size: 14px; color: #666; margin-top: 5px; }

.fork-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 860px;
  width: 100%;
}

.fork-card {
  background: white;
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 10px 6px 8px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.fork-card:hover { border-color: #8B4513; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(139,69,19,0.2); }
.fork-card.viewed { background: #edfaed; border-color: #4CAF50; }
.fork-card-name { font-size: 10.5px; font-weight: bold; color: #5D2E0C; line-height: 1.2; }

/* fork modal */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: #f5e6c4;
  border: 5px solid #8B6914;
  border-radius: 16px;
  padding: 30px;
  max-width: 380px;
  width: 92%;
  text-align: center;
}
.modal-box h3 { font-size: 22px; color: #5D2E0C; margin: 12px 0 8px; }
.modal-box p  { font-size: 15px; color: #3a2000; line-height: 1.65; margin-bottom: 20px; }

.big-btn {
  display: block;
  margin: 0 auto;
  padding: 13px 38px;
  border: none;
  border-radius: 12px;
  background: #8B4513;
  color: white;
  font-size: 16px;
  font-family: Georgia, serif;
  cursor: pointer;
}
.big-btn:hover { background: #6B2F0B; }
.big-btn.secondary { background: #555; }
.big-btn.secondary:hover { background: #333; }
.big-btn.danger { background: #8B0000; }
.big-btn.danger:hover { background: #5a0000; }

/* ══════════════════════════════════
   SCREEN 5 – FORK TEST
   ══════════════════════════════════ */
#screen-fork-test {
  flex-direction: column;
  align-items: center;
  background: #f5f0e8;
  padding: 24px 16px;
  gap: 18px;
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 860px;
  width: 100%;
}

.test-card {
  background: white;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 8px 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fork-label {
  width: 100%;
  padding: 5px 4px;
  border-radius: 6px;
  background: #8B4513;
  color: white;
  font-size: 9.5px;
  font-weight: bold;
  font-family: Georgia, serif;
  cursor: pointer;
  line-height: 1.25;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, box-shadow 0.15s;
  border: 2px solid transparent;
}
.fork-label:hover  { background: #6B2F0B; }
.fork-label.sel    { background: #1565C0; border-color: #64B5F6; box-shadow: 0 0 0 3px #90CAF9; }
.fork-label.ok     { background: #2E7D32; border-color: #A5D6A7; cursor: default; }
.fork-label.wrong  { background: #C62828; border-color: #EF9A9A; cursor: default; }

/* ══════════════════════════════════
   BOB COMPANION EFFECTS
   ══════════════════════════════════ */
@keyframes bob-dance {
  0%,100% { transform: translateX(0) rotate(0deg); }
  15%  { transform: translateX(-10px) rotate(-18deg) translateY(-5px); }
  30%  { transform: translateX(0) translateY(-10px) rotate(0deg); }
  45%  { transform: translateX(10px) rotate(18deg) translateY(-5px); }
  60%  { transform: translateX(0) translateY(-10px) rotate(0deg); }
  75%  { transform: translateX(-8px) rotate(-12deg); }
  90%  { transform: translateX(8px) rotate(12deg); }
}
@keyframes bob-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes bob-shake {
  0%,100%              { transform: translateX(0) rotate(0deg); }
  10%,30%,50%,70%,90% { transform: translateX(-8px) rotate(-5deg); }
  20%,40%,60%,80%      { transform: translateX(8px)  rotate(5deg); }
}
@keyframes bob-blink {
  0%,100% { background: rgba(245,240,232,0.96); border-color:#8B4513; }
  16%  { background: #FF6B6B; border-color:#CC0000; }
  33%  { background: #FFD93D; border-color:#CC9900; }
  50%  { background: #6BCB77; border-color:#228B22; }
  66%  { background: #4D96FF; border-color:#1565C0; }
  83%  { background: #FF69B4; border-color:#CC1177; }
}
@keyframes bob-grow {
  0%,100%  { transform: scale(1); }
  40%,60%  { transform: scale(1.7); }
}
@keyframes bob-flip {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes bob-scared {
  0%,100%              { transform: translate(0,0); }
  10%,30%,50%,70%,90% { transform: translate(-7px,-5px); }
  20%,40%,60%,80%      { transform: translate(7px,5px); }
}

#knight-companion {
  cursor: pointer;
  transition: opacity 0.4s;
  position: relative; /* so bubble can anchor to it */
}
#companion-bubble {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: white;
  border: 2px solid #8B4513;
  border-radius: 10px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: bold;
  color: #3a2000;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  pointer-events: none;
}
/* little tail on bubble */
#companion-bubble::after {
  content: '';
  position: absolute;
  top: 100%; right: 14px;
  border: 6px solid transparent;
  border-top-color: #8B4513;
}

/* ══════════════════════════════════
   WIN / SQUIRE / KNIGHT SCREENS
   ══════════════════════════════════ */
#screen-page-win   { background: linear-gradient(180deg, #87CEEB 0%, #5aae40 70%, #3d8a29 100%); }
#screen-squire-win { background: linear-gradient(180deg, #87CEEB 0%, #5aae40 70%, #3d8a29 100%); }
#screen-knight     { background: linear-gradient(180deg, #4a3728 0%, #1a0f05 100%); }

/* ══════════════════════════════════
   SQUIRE BATTLE GAME
   ══════════════════════════════════ */
#screen-squire-game {
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #87CEEB 0%, #3d8a29 100%);
  padding: 0;
  overflow: hidden;
  gap: 0;
}

#sg-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 820px;
  padding: 10px 20px 8px;
  background: rgba(0,0,0,0.38);
  flex-shrink: 0;
  z-index: 5;
}

.sg-side { display: flex; align-items: center; gap: 10px; }
.sg-name { font-size: 15px; font-weight: bold; color: white; text-shadow: 1px 1px 4px #000; }

.sg-hearts { display: flex; gap: 4px; }
.sg-heart {
  font-size: 22px;
  color: #FF4444;
  text-shadow: 0 0 6px rgba(255,68,68,0.6);
  transition: all 0.3s;
}
.sg-heart.lost { color: #444; text-shadow: none; filter: grayscale(1); opacity: 0.4; }

#sg-status {
  font-size: 17px;
  font-weight: bold;
  color: #FFE57F;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.9);
  text-align: center;
  min-width: 220px;
  min-height: 24px;
}

#sg-controls {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 10px 8px;
  background: rgba(0,0,0,0.55);
  width: 100%;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.sg-key-badge {
  display: inline-block;
  background: #fff;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  padding: 2px 9px;
  margin-right: 3px;
  border: 2px solid #aaa;
  box-shadow: 0 2px 0 #666;
  vertical-align: middle;
}

#battle-svg {
  width: 100%;
  max-width: 820px;
  flex: 1;
  min-height: 0;
}

/* Bob battle animations */
@keyframes sg-jump {
  0%,100% { transform: translateY(0); }
  35%,65% { transform: translateY(-68px); }
}
@keyframes sg-duck {
  0%,100% { transform: translateY(0); }
  35%,65% { transform: translateY(30px); }
}
@keyframes sg-lunge {
  0%,100% { transform: translateX(0); }
  40%      { transform: translateX(88px); }
}
@keyframes sg-hurt-bob {
  0%,100% { transform: translateX(0); filter: none; }
  15%,55% { transform: translateX(-14px); filter: brightness(3) saturate(0) sepia(1) hue-rotate(295deg) saturate(30); }
  35%,75% { transform: translateX(10px);  filter: brightness(3) saturate(0) sepia(1) hue-rotate(295deg) saturate(30); }
}
@keyframes sg-hurt-coy {
  0%,100% { transform: translateX(0); filter: none; }
  15%,55% { transform: translateX(14px);  filter: brightness(3) saturate(0) sepia(1) hue-rotate(295deg) saturate(30); }
  35%,75% { transform: translateX(-10px); filter: brightness(3) saturate(0) sepia(1) hue-rotate(295deg) saturate(30); }
}
@keyframes sg-enter-left {
  from { transform: translateX(-200px); opacity: 0; }
  to   { transform: translateX(0);      opacity: 1; }
}
@keyframes sg-enter-right {
  from { transform: translateX(200px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes zone-pulse {
  0%,100% { opacity: 0.25; }
  50%      { opacity: 0.70; }
}

#sg-bob { transition: transform 0.2s ease; }
#sg-bob.anim-jump  { animation: sg-jump  0.55s ease; }
#sg-bob.anim-duck  { animation: sg-duck  0.50s ease; }
#sg-bob.anim-lunge { animation: sg-lunge 0.45s ease; }
#sg-bob.anim-hurt  { animation: sg-hurt-bob 0.65s linear; }
#sg-coy.anim-hurt  { animation: sg-hurt-coy 0.65s linear; }
#sg-bob.entering   { animation: sg-enter-left  0.7s ease forwards; }
#sg-coy.entering   { animation: sg-enter-right 0.7s ease forwards; }

#sg-coy-sword { transition: transform 0.38s ease, filter 0.22s ease; }

.zone-on { animation: zone-pulse 0.42s ease infinite; }


/* ══════════════════════════════════════════
   SQUIRE — MOBILE TOUCH BUTTONS
   ══════════════════════════════════════════ */

#sg-mobile-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 8px;
  background: rgba(0,0,0,0.45);
  width: 100%;
  flex-shrink: 0;
}
.sg-mob-btn {
  flex: 1;
  max-width: 110px;
  padding: 14px 6px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.1s, transform 0.1s;
}
.sg-mob-btn small { font-size: 11px; display: block; opacity: 0.82; font-weight: normal; }
.sg-mob-btn:active { background: rgba(255,255,255,0.30); transform: scale(0.94); }
.sg-mob-btn.attack-btn { background: rgba(139,0,0,0.42); border-color: rgba(204,68,68,0.8); }
.sg-mob-btn.attack-btn:active { background: rgba(139,0,0,0.65); }


/* ══════════════════════════════════════════
   KNIGHT PRAYER GAME
   ══════════════════════════════════════════ */

#screen-knight {
  background:
    radial-gradient(ellipse at 15% 85%, rgba(180,80,10,0.28) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 85%, rgba(180,80,10,0.22) 0%, transparent 45%),
    linear-gradient(180deg, #1c1005 0%, #251608 55%, #301e0a 100%);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 12px 18px;
  gap: 8px;
}

#kg-energy-wrap { width: 100%; max-width: 500px; }
#kg-energy-bar {
  width: 100%;
  height: 26px;
  background: rgba(0,0,0,0.55);
  border-radius: 13px;
  border: 2px solid rgba(255,255,255,0.15);
  overflow: hidden;
}
#kg-energy-fill {
  height: 100%;
  width: 100%;
  background: #22CC44;
  border-radius: 13px;
  transition: width 0.14s linear, background 0.4s;
}
#kg-energy-label {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

#kg-status {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  min-height: 22px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

#kg-knight-wrap { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

@keyframes kg-pray-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%       { transform: rotate(1.5deg); }
}
#kg-knight-svg {
  width: 140px;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(200,120,20,0.5));
  animation: kg-pray-sway 3.2s ease-in-out infinite;
  transform-origin: bottom center;
}

#kg-progress-wrap { color: rgba(255,255,255,0.85); font-size: 15px; text-align: center; }
#kg-progress { font-size: 19px; font-weight: bold; color: #FFD700; }

#kg-bar-wrap { width: 100%; max-width: 520px; }
#kg-bar {
  position: relative;
  width: 100%;
  height: 44px;
  background: rgba(0,0,0,0.6);
  border-radius: 22px;
  border: 2px solid rgba(255,255,255,0.18);
  overflow: hidden;
}

@keyframes kg-zone-pulse {
  0%, 100% { background: rgba(255,215,0,0.18); }
  50%       { background: rgba(255,215,0,0.40); }
}
#kg-inner-zone {
  position: absolute;
  top: 0;
  height: 100%;
  border-left: 2px solid #FFD700;
  border-right: 2px solid #FFD700;
  animation: kg-zone-pulse 1.4s ease-in-out infinite;
}

#kg-ball {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  transition: background 0.08s, box-shadow 0.08s;
}
#kg-ball.in-zone {
  background: #FFD700;
  box-shadow: 0 0 18px #FFD700, 0 0 6px #fff;
}

#kg-bar-hint {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 6px;
}

#kg-pray-btn {
  padding: 16px 52px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background: #6B2F0C;
  border: 3px solid #FFD700;
  border-radius: 16px;
  cursor: pointer;
  letter-spacing: 0.05em;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, background 0.1s;
  flex-shrink: 0;
}
#kg-pray-btn:active { transform: scale(0.94); background: #8B3D0F; }