/* ===== Minecraft Inventory / Backpack GUI ===== */
:root {
  /* Classic inventory chrome */
  --inv: #c6c6c6;
  --inv-slot: #8b8b8b;
  --inv-hi: #ffffff;
  --inv-mid: #555555;
  --inv-lo: #373737;
  --inv-text: #3f3f3f;
  --inv-label: #2a2a2a;

  /* HUD accents (MC palette) */
  --xp: #55ff55;
  --xp-dark: #1a7a1a;
  --diamond: #0088aa;
  --diamond-bright: #55ffff;
  --redstone: #ff5555;
  --gold: #aa7700;
  --gold-bright: #ffaa00;
  --heart: #ff5555;

  /* 思源黑體 ≡ Noto Sans TC；像素英文另用 Press Start 2P */
  --font-zh: "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif;
  --font-pixel: "Press Start 2P", cursive;
  --font: var(--font-zh);
  --bevel: 4px;
  --slot-size: clamp(44px, 7vw, 56px);
  --tile-size: clamp(48px, 8vw, 56px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #1a1a1a;
  color: var(--inv-text);
  font-family: var(--font-zh);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Minecraft Bedrock wallpaper (cover + light scrim for contrast) */
.wallpaper-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #1a1a1a;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.38)),
    url("wallpaper_minecraft_bedrock_edition_1920x1080.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.screen {
  position: relative;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.25rem;
  gap: 1rem;
}

.screen.active {
  display: flex;
}

.screen[hidden] {
  display: none !important;
}

/* ===== Brand / title (over wallpaper) ===== */
.title-block {
  text-align: center;
  animation: titlePop 0.6s steps(4) both;
}

.brand-pixel {
  margin: 0 0 0.75rem;
  font-family: var(--font-pixel);
  color: var(--gold-bright);
  font-size: clamp(11px, 1.8vw, 14px);
  letter-spacing: 0.12em;
  text-shadow: 2px 2px 0 #000;
}

.game-title {
  margin: 0;
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.35;
  color: var(--xp);
  text-shadow:
    3px 3px 0 #000,
    -1px 0 0 var(--xp-dark);
}

.school-line {
  margin: 0.75rem 0 0;
  font-family: var(--font-zh);
  font-weight: 700;
  color: var(--gold-bright);
  font-size: clamp(14px, 2vw, 17px);
  text-shadow: 2px 2px 0 #000;
}

.tagline {
  margin: 0.45rem 0 0;
  font-family: var(--font-zh);
  font-weight: 500;
  color: #eee;
  font-size: clamp(13px, 1.9vw, 15px);
  line-height: 1.55;
  text-shadow: 2px 2px 0 #000;
}

/* ===== Raised inventory panel (classic #C6C6C6) ===== */
.panel {
  background: var(--inv);
  color: var(--inv-text);
  border: var(--bevel) solid;
  border-top-color: var(--inv-hi);
  border-left-color: var(--inv-hi);
  border-bottom-color: var(--inv-lo);
  border-right-color: var(--inv-lo);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.35),
    inset -2px -2px 0 rgba(0, 0, 0, 0.12),
    0 0 0 2px #000,
    6px 6px 0 rgba(0, 0, 0, 0.45);
  padding: 1.35rem 1.5rem;
  width: min(100%, 560px);
}

.start-panel {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.field-label {
  font-family: var(--font-zh);
  font-weight: 500;
  color: var(--diamond);
  font-size: clamp(14px, 1.8vw, 16px);
  margin-top: 0.4rem;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}

/* Recessed select (looks like inventory slot field) */
.mc-select {
  appearance: none;
  width: 100%;
  padding: 0.85rem 0.75rem;
  font-family: var(--font-zh);
  font-size: clamp(14px, 1.8vw, 16px);
  color: #eee;
  background: #2a2a2a;
  border: 3px solid;
  border-top-color: var(--inv-lo);
  border-left-color: var(--inv-lo);
  border-bottom-color: var(--inv-hi);
  border-right-color: var(--inv-hi);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.mc-select:focus {
  outline: 2px solid var(--diamond-bright);
  outline-offset: 2px;
}

.mc-select-sm {
  font-size: clamp(13px, 1.6vw, 14px);
  padding: 0.55rem 0.5rem;
  min-width: 0;
  flex: 1;
}

/* ===== Raised MC buttons ===== */
.mc-btn {
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 16px);
  padding: 0.95rem 1.1rem;
  margin-top: 0.55rem;
  cursor: pointer;
  color: #111;
  border: 3px solid;
  border-top-color: rgba(255, 255, 255, 0.55);
  border-left-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.5);
  border-right-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 2px #000;
  transition: transform 0.08s steps(2);
  image-rendering: pixelated;
}

.mc-btn:active {
  transform: translate(2px, 2px);
  border-top-color: rgba(0, 0, 0, 0.4);
  border-left-color: rgba(0, 0, 0, 0.3);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  border-right-color: rgba(255, 255, 255, 0.25);
}

.mc-btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.mc-btn-green {
  background: var(--xp);
}

.mc-btn-cyan {
  background: var(--diamond-bright);
}

.mc-btn-red {
  background: var(--redstone);
  color: #fff;
}

.mc-btn-gray {
  background: #a0a0a0;
  color: #111;
}

.mc-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ===== HUD as inventory chrome bar ===== */
.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: min(100%, 640px);
  padding: 0.75rem 0.9rem;
  background: var(--inv);
  border: var(--bevel) solid;
  border-top-color: var(--inv-hi);
  border-left-color: var(--inv-hi);
  border-bottom-color: var(--inv-lo);
  border-right-color: var(--inv-lo);
  box-shadow:
    0 0 0 2px #000,
    4px 4px 0 rgba(0, 0, 0, 0.4);
}

.hud-hearts {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.heart {
  width: 26px;
  height: 22px;
  position: relative;
  display: inline-block;
  animation: none;
  filter: drop-shadow(1px 1px 0 #000);
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 22px;
  background: var(--heart);
  border-radius: 14px 14px 0 0;
  top: 0;
}

.heart::before {
  left: 0;
  transform: rotate(-45deg);
  transform-origin: bottom right;
}

.heart::after {
  left: 6px;
  transform: rotate(45deg);
  transform-origin: bottom left;
}

.heart.empty {
  opacity: 0.28;
  filter: grayscale(1) drop-shadow(1px 1px 0 #000);
}

.heart.shake {
  animation: heartShake 0.35s steps(3);
}

.hud-xp {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 160px;
}

.hud-level {
  font-family: var(--font-pixel);
  color: var(--xp-dark);
  font-size: clamp(11px, 1.5vw, 14px);
  white-space: nowrap;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.xp-bar {
  flex: 1;
  height: 14px;
  background: #2a2a2a;
  border: 3px solid;
  border-top-color: var(--inv-lo);
  border-left-color: var(--inv-lo);
  border-bottom-color: var(--inv-hi);
  border-right-color: var(--inv-hi);
  position: relative;
  overflow: hidden;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, #7dff7d, var(--xp) 40%, #2a9a2a);
  transition: width 0.35s steps(8);
}

.hud-score {
  font-family: var(--font-pixel);
  color: var(--gold);
  font-size: clamp(11px, 1.4vw, 13px);
  white-space: nowrap;
}

.hud-controls {
  display: flex;
  gap: 0.45rem;
  width: 100%;
}

@media (min-width: 560px) {
  .hud-controls {
    width: auto;
    max-width: 260px;
  }
}

.progress-row {
  width: min(100%, 640px);
  font-family: var(--font-zh);
  font-weight: 500;
  color: #eee;
  font-size: clamp(14px, 1.9vw, 16px);
  text-shadow: 2px 2px 0 #000;
}

.mode-panel {
  width: min(100%, 640px);
}

.mode-panel[hidden] {
  display: none !important;
}

/* ===== Crafting / Survival prompts ===== */
.prompt-meaning {
  margin: 0 0 0.75rem;
  font-family: var(--font-zh);
  font-weight: 700;
  color: var(--diamond);
  font-size: clamp(20px, 2.8vw, 24px);
  text-align: center;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);
  line-height: 1.6;
}

.prompt-sentence {
  margin: 0 0 1.15rem;
  font-family: var(--font-zh);
  color: var(--inv-label);
  font-size: clamp(15px, 2vw, 17px);
  text-align: center;
  line-height: 1.9;
}

.prompt-sentence .blank {
  color: var(--gold);
  border-bottom: 3px dashed var(--gold-bright);
  padding: 0 0.4rem;
}

/* Recessed inventory slots — dark TL, light BR */
.craft-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 0.9rem;
  min-height: var(--slot-size);
  padding: 0.35rem;
  background: transparent;
}

.slot {
  width: var(--slot-size);
  height: var(--slot-size);
  background: var(--inv-slot);
  border: 3px solid;
  border-top-color: var(--inv-lo);
  border-left-color: var(--inv-lo);
  border-bottom-color: var(--inv-hi);
  border-right-color: var(--inv-hi);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--inv-label);
  cursor: pointer;
  text-transform: uppercase;
  user-select: none;
}

.slot.filled {
  /* letter sits as raised block inside recessed slot */
  background: #c4a574;
  color: #1a1208;
  border-top-color: #e8d4a8;
  border-left-color: #e8d4a8;
  border-bottom-color: #6b4e2e;
  border-right-color: #6b4e2e;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.25),
    1px 1px 0 rgba(0, 0, 0, 0.2);
}

/* Multi-word crafting: auto-filled space between words */
.slot.space-slot {
  width: calc(var(--slot-size) * 0.45);
  min-width: 18px;
  cursor: default;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
  position: relative;
}

.slot.space-slot::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 28%;
  height: 3px;
  background: var(--inv-mid);
  opacity: 0.55;
}

.slot.correct-glow {
  animation: slotGlow 0.55s steps(4);
  box-shadow: 0 0 0 2px var(--xp), 0 0 12px var(--xp);
}

.hint-text {
  text-align: center;
  font-family: var(--font-zh);
  color: var(--inv-mid);
  font-size: clamp(13px, 1.6vw, 15px);
  margin: 0 0 0.9rem;
  line-height: 1.7;
}

.letter-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1rem;
  padding: 0.5rem;
  /* subtle inventory tray strip */
  background: rgba(0, 0, 0, 0.06);
  border: 3px solid;
  border-top-color: var(--inv-lo);
  border-left-color: var(--inv-lo);
  border-bottom-color: var(--inv-hi);
  border-right-color: var(--inv-hi);
}

/* Raised dirt / stone letter tiles in the bank */
.letter-tile {
  width: var(--tile-size);
  height: var(--tile-size);
  font-family: var(--font-pixel);
  font-size: clamp(18px, 2.4vw, 22px);
  text-transform: uppercase;
  color: #1a1208;
  background: linear-gradient(180deg, #d2b48c 0%, #c4a574 45%, #a8844e 100%);
  border: 3px solid;
  border-top-color: #e8d4a8;
  border-left-color: #e8d4a8;
  border-bottom-color: #6b4e2e;
  border-right-color: #6b4e2e;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.35),
    2px 2px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s steps(2);
}

.letter-tile:hover:not(:disabled) {
  transform: translateY(-2px);
}

.letter-tile:active:not(:disabled) {
  transform: translateY(1px);
}

.letter-tile:disabled,
.letter-tile.used {
  opacity: 0.28;
  cursor: not-allowed;
  transform: none;
}

.craft-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.craft-actions .mc-btn {
  margin-top: 0;
  flex: 1;
  min-width: 140px;
}

.craft-reward {
  margin-top: 1.1rem;
  text-align: center;
  position: relative;
  padding: 0.95rem;
  background: #2a2a2a;
  border: 2px solid #5500aa;
  color: #eee;
  animation: rewardPop 0.5s steps(5) both;
}

.reward-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(85, 255, 85, 0.3), transparent 70%);
  animation: glowPulse 1s steps(4) infinite;
  pointer-events: none;
}

.reward-icon {
  display: block;
  font-size: clamp(1.6rem, 4vw, 2rem);
  margin-bottom: 0.4rem;
  position: relative;
  image-rendering: pixelated;
}

.reward-name {
  position: relative;
  font-family: var(--font-pixel);
  color: var(--gold-bright);
  font-size: clamp(11px, 1.5vw, 13px);
}

/* ===== Survival ===== */
.timer-wrap {
  position: relative;
  height: 20px;
  background: #2a2a2a;
  border: 3px solid;
  border-top-color: var(--inv-lo);
  border-left-color: var(--inv-lo);
  border-bottom-color: var(--inv-hi);
  border-right-color: var(--inv-hi);
  margin-bottom: 1.1rem;
  overflow: hidden;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #7dff7d, var(--xp));
  transform-origin: left center;
  transition: width 0.1s linear, background 0.2s;
}

.timer-bar.warn {
  background: linear-gradient(180deg, #ffcc66, var(--gold-bright));
}

.timer-bar.danger {
  background: linear-gradient(180deg, #ff8888, var(--redstone));
  animation: timerFlash 0.3s steps(2) infinite;
}

.timer-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: clamp(11px, 1.4vw, 13px);
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}

.choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 420px) {
  .choices {
    grid-template-columns: 1fr 1fr;
  }
}

.choice-btn {
  font-family: var(--font-pixel);
  font-size: clamp(11px, 1.5vw, 13px);
  padding: 1rem 0.75rem;
  color: var(--inv-label);
  background: var(--inv);
  border: 3px solid;
  border-top-color: var(--inv-hi);
  border-left-color: var(--inv-hi);
  border-bottom-color: var(--inv-lo);
  border-right-color: var(--inv-lo);
  box-shadow: 0 0 0 2px #000;
  cursor: pointer;
  text-align: center;
  transition: transform 0.08s steps(2), background 0.15s;
}

.choice-btn:hover:not(:disabled) {
  background: #d4d4d4;
}

.choice-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  border-top-color: var(--inv-lo);
  border-left-color: var(--inv-lo);
  border-bottom-color: var(--inv-hi);
  border-right-color: var(--inv-hi);
}

.choice-btn.correct {
  background: #7dff7d;
  color: #0a3a0a;
  box-shadow: 0 0 0 2px var(--xp-dark);
}

.choice-btn.wrong {
  background: #ff8888;
  color: #4a0000;
}

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

/* ===== End screens ===== */
.died-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-pixel);
  color: var(--redstone);
  font-size: clamp(18px, 3.5vw, 24px);
  text-align: center;
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 #000;
  animation: titlePop 0.5s steps(4);
}

.died-sub,
.complete-sub {
  text-align: center;
  font-family: var(--font-zh);
  color: var(--inv-mid);
  font-size: clamp(14px, 1.8vw, 16px);
  margin: 0 0 1rem;
}

.died-score {
  text-align: center;
  font-family: var(--font-pixel);
  color: var(--gold);
  font-size: clamp(12px, 1.6vw, 14px);
  margin: 0 0 1rem;
}

.complete-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-pixel);
  color: var(--xp-dark);
  font-size: clamp(16px, 3vw, 22px);
  text-align: center;
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 #000;
  animation: titlePop 0.5s steps(4);
}

.stats-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}

.stat-cell {
  background: var(--inv-slot);
  border: 3px solid;
  border-top-color: var(--inv-lo);
  border-left-color: var(--inv-lo);
  border-bottom-color: var(--inv-hi);
  border-right-color: var(--inv-hi);
  padding: 0.75rem;
  text-align: center;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.stat-cell .label {
  display: block;
  font-family: var(--font-zh);
  color: #eee;
  font-size: clamp(13px, 1.6vw, 14px);
  margin-bottom: 0.4rem;
  text-shadow: 1px 1px 0 #000;
}

.stat-cell .value {
  font-family: var(--font-pixel);
  color: var(--diamond-bright);
  font-size: clamp(14px, 2vw, 18px);
  text-shadow: 1px 1px 0 #000;
}

.weak-title {
  margin: 0 0 0.7rem;
  font-family: var(--font-zh);
  font-weight: 700;
  color: var(--gold);
  font-size: clamp(15px, 2vw, 17px);
  text-align: center;
}

.weakness-log {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.weak-item {
  background: #2a2a2a;
  border: 2px solid #555;
  border-left: 4px solid var(--redstone);
  padding: 0.65rem 0.75rem;
  font-family: var(--font-zh);
  font-size: clamp(14px, 1.7vw, 15px);
  line-height: 1.75;
  color: #ddd;
}

.weak-item .word {
  font-family: var(--font-pixel);
  font-size: 0.85em;
  color: var(--redstone);
}

.weak-item .meaning {
  color: var(--diamond-bright);
}

.weak-item .sentence {
  color: #aaa;
  margin-top: 0.3rem;
}

.weak-empty {
  text-align: center;
  font-family: var(--font-zh);
  color: var(--xp-dark);
  font-size: clamp(14px, 1.8vw, 16px);
  padding: 0.85rem;
}

.complete-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.complete-actions .mc-btn,
.died-panel .mc-btn {
  width: 100%;
}

/* ===== Damage flash overlay ===== */
body.hurt::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 40, 40, 0.28);
  pointer-events: none;
  z-index: 99;
  animation: hurtFlash 0.4s steps(3) forwards;
}

/* ===== Animations ===== */
@keyframes titlePop {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes heartShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

@keyframes slotGlow {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 0 3px var(--xp), 0 0 16px var(--xp);
  }
  100% {
    box-shadow: 0 0 0 2px var(--xp), 0 0 8px var(--xp);
  }
}

@keyframes rewardPop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes timerFlash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}

@keyframes hurtFlash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Fixed wallpaper can glitch on mobile — fall back to scroll */
@media (max-width: 768px) {
  .wallpaper-bg {
    background-attachment: scroll;
  }
}

/* ===== Mobile polish ===== */
@media (max-width: 400px) {
  .panel {
    padding: 1rem;
  }

  .slot {
    width: clamp(40px, 11vw, 48px);
    height: clamp(40px, 11vw, 48px);
  }

  .letter-tile {
    width: clamp(42px, 12vw, 50px);
    height: clamp(42px, 12vw, 50px);
  }

  .hud {
    padding: 0.6rem;
  }

  .heart {
    width: 22px;
    height: 18px;
  }

  .heart::before,
  .heart::after {
    width: 12px;
    height: 18px;
  }

  .heart::after {
    left: 5px;
  }
}