.experimental-choice-overlay {
  position: absolute;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(28, 20, 16, .7);
  touch-action: manipulation;
}
.experimental-choice {
  width: min(100%, 360px);
  max-height: 90%;
  overflow-y: auto;
  padding: 20px;
  border: 2px solid #ab8150;
  border-radius: 12px;
  background: #f7eddb;
  color: #362618;
  box-shadow: 0 8px 30px #0006;
}
.experimental-choice h2 { margin: 0 0 12px; font-size: 22px; }
.experimental-choice p { font-size: 14px; line-height: 1.6; }
.experimental-choice button, .experimental-evolve {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #9d7447;
  border-radius: 8px;
  font: inherit;
  background: #eed7ae;
  color: #422c1a;
  cursor: pointer;
}
.experimental-choice .experimental-choice-cancel { background: #eee7dc; }
.experimental-choice button:focus-visible { outline: 3px solid #a74b40; }
.spell-detail-text { white-space: pre-line; line-height: 1.7; font-size: 14px; }
.heart.temporary { color: #7ed6e8; text-shadow: 0 0 4px #285d77; }
.temporary-life-timer { color: #7ed6e8; font-size: 12px; margin-left: 4px; white-space: nowrap; }
#codex { z-index: 220; padding: 12px; }
.codex-box { position: relative; width: 100%; max-height: 94%; overflow-y: auto; padding: 14px; background: #f7eddb; border: 2px solid #ab8150; border-radius: 12px; touch-action: pan-y; }
.codex-head { display: flex; align-items: center; justify-content: space-between; }
.codex-head h2 { margin: 0; }
.codex-head button, #codex-tabs button { min-height: 36px; padding: 6px 12px; font: inherit; cursor: pointer; }
.codex-tip { font-size: 12px; line-height: 1.5; }
#codex-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
#codex-tabs .active { background: #eed7ae; border-color: #a74b40; }
.codex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.codex-entry { position: relative; min-width: 0; min-height: 84px; border: 1px solid #ab8150; border-radius: 8px; background: #eed7ae; color: #a12c28; font: inherit; cursor: pointer; padding: 8px 3px; }
.codex-entry img { display: block; width: 44px; height: 44px; margin: auto; }
.codex-entry span { display: block; font-size: 13px; }
.codex-entry small { display: block; font-size: 10px; margin-top: 3px; }
.codex-entry.locked { filter: grayscale(1); color: #666; background: #ddd; }
.codex-group-title { font-size: 16px; margin: 14px 0 8px; }
#codex-detail { position: sticky; top: 0; left: auto; transform: none; width: 100%; max-height: 70vh; margin-top: 12px; font-size: 13px; }
#codex-detail .detail-owner { display: none; }
#codex-detail button.detail-close { border: 0; background: transparent; font: inherit; }
#btn-codex { position: absolute; left: 96px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); min-height: 36px; padding: 6px 12px; border: 1px solid #ab8150; border-radius: 6px; background: #f7eddb; color: #422c1a; font: inherit; font-size: 12px; cursor: pointer; }
#btn-tutorial {
  position: absolute;
  left: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #ab8150;
  border-radius: 6px;
  background: #f7eddb;
  color: #422c1a;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#tutorial-prompt { z-index: 10001; }
#tutorial-panel {
  flex: none;
  margin: 4px 8px;
  padding: 8px 10px;
  border: 1px solid #ab8150;
  border-radius: 8px;
  background: #fff4dc;
  color: #422c1a;
  font-size: clamp(12px, 2.8vw, 14px);
}
#tutorial-panel p { margin: 4px 0; line-height: 1.45; }
.tutorial-refresh-target { outline: 3px solid #c39420; }
#tutorial-next { min-height: 36px; padding: 6px 18px; font: inherit; cursor: pointer; }
.tutorial-mode .board-wrap.opp, .tutorial-mode #topbar .side-info.opp,
.tutorial-mode #opp-shop, .tutorial-mode #save-pause,
.tutorial-mode #pause-overlay .save-status, .tutorial-mode #pause-overlay .cheat-box { display: none !important; }
.tutorial-mode #shop-grid .shop-slot:first-child { outline: 3px solid #c39420; outline-offset: -3px; }
.start-version {
  position: absolute;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  font-size: 11px;
  color: #8c8174;
  pointer-events: none;
}