:root {
  --board: #244b3c;
  --chalk: #f4f0dd;
  --dim: #cbd3c5;
  --wood: #70472b;
  --wood2: #9a6940;
  --edge: #aaa28d;
  --red: #d9473f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; width: 100%; }
body { background: #171510; color: var(--chalk); font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
button, textarea { font: inherit; }
button { touch-action: manipulation; }

.frame {
  background: linear-gradient(90deg, var(--wood), var(--wood2) 15%, #6a4229 45%, #98663e 75%, var(--wood));
  padding: clamp(6px, 1.2vw, 13px);
  border-radius: 5px;
  box-shadow: 0 10px 26px #0008, inset 0 0 0 2px #4a2e1c;
}
.board {
  position: relative;
  min-width: 0;
  border: 3px solid #173328;
  background-color: var(--board);
  background-image: radial-gradient(circle at 18% 22%, #fff1 0 1px, transparent 2px),
    radial-gradient(circle at 72% 63%, #fff1 0 1px, transparent 2px),
    linear-gradient(105deg, transparent 0 48%, #ffffff08 50%, transparent 52%),
    linear-gradient(15deg, #0000000c, #ffffff08);
  background-size: 43px 39px, 57px 51px, 100% 100%, 100% 100%;
  box-shadow: inset 0 0 42px #071b1599, inset 0 0 0 2px #416a59;
}
.board::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 13px;
  background: linear-gradient(#8d5b36, #5c3823);
  box-shadow: 0 -3px 5px #0005;
  pointer-events: none;
}

.intro {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  background: #111;
}
.intro-frame { width: min(900px, 100%); }
.intro-board { height: min(660px, calc(100dvh - 28px)); overflow-y: auto; }
.intro-art {
  position: absolute;
  inset: 0;
  background: url("images/title-board.png") center / cover no-repeat;
  opacity: .34;
  pointer-events: none;
}
.intro-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 24px 20px 36px;
  text-align: center;
  text-shadow: 1px 2px 2px #001c14, 0 0 9px #f4f0dd44;
}
.intro-kicker { margin: 0 0 15px; font-size: clamp(15px, 2.5vw, 22px); letter-spacing: .12em; }
.intro h1 {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(40px, 9vw, 86px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .06em;
  transform: rotate(-1deg);
}
.mobile-break { display: none; }
.intro-count { margin: 17px 0 25px; font-size: clamp(17px, 3vw, 25px); font-weight: 800; }
.intro-rule { max-width: 24em; margin: 0 0 28px; font-size: clamp(15px, 2.1vw, 18px); font-weight: 750; line-height: 1.6; }
.start, .key, .utility {
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: linear-gradient(#ded8c5, #c6bea8);
  color: #29271f;
  box-shadow: 0 4px 0 #8f8876, 0 5px 7px #0006;
  font-weight: 900;
  cursor: pointer;
}
.start { min-width: 180px; min-height: 52px; padding: 9px 25px; font-size: 20px; }
.start:active, .key:active, .utility:active { transform: translateY(3px); box-shadow: 0 1px 0 #8f8876; }
button:focus-visible { outline: 3px solid #f1ca65; outline-offset: 3px; }
button:disabled { opacity: .56; cursor: default; }

.game { width: min(1040px, 100%); margin: auto; padding: clamp(5px, 1.5vh, 14px) 8px; }
.game-board { min-height: calc(100dvh - 36px); padding: clamp(15px, 2.5vh, 26px) clamp(12px, 3vw, 30px) 46px; }
.topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: var(--dim); }
.level {
  min-width: 0;
  color: var(--chalk);
  font-family: "Comic Sans MS", "Yu Gothic", cursive;
  font-size: clamp(25px, 4.6vw, 44px);
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 1px 1px #ffffff22;
  transform: rotate(-1deg);
}
.progress { flex: 0 0 auto; padding-top: 4px; font-size: clamp(12px, 1.8vw, 16px); white-space: nowrap; }
.level.hell-level { font-size: clamp(21px, 3.3vw, 32px); white-space: nowrap; }
.challenge-banner {
  margin: 0 0 13px;
  border: 1px dashed #d8d3aa;
  border-radius: 4px;
  padding: 7px 10px;
  color: #fff2bc;
  text-align: center;
  font-size: clamp(14px, 3.6vw, 18px);
  font-weight: 800;
}

.problem-wrap { display: flex; flex-direction: column; justify-content: center; min-height: clamp(170px, 32dvh, 310px); padding: 8px 0 0; }
.problem { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 100%; min-width: 0; text-align: center; font-family: Georgia, "Times New Roman", "Yu Mincho", serif; }
.formula-line { display: flex; justify-content: center; align-items: flex-start; width: 100%; min-width: 0; overflow: hidden; }
.formula-inner { flex: 0 0 auto; display: inline-block; white-space: nowrap; font-size: clamp(34px, 6.8vw, 72px); line-height: 1.25; text-shadow: 0 0 1px #fff, 1px 1px 0 #ffffff24; transform-origin: center top; }
.problem.hell .formula-inner { font-size: clamp(23px, 4.1vw, 42px); }
.problem.final .formula-inner { font-size: clamp(20px, 3.7vw, 37px); }
.formula-inner math { color: var(--chalk); font-size: 1em; }
.answer-slot { display: inline-block; min-width: .8em; color: #fff6ce; }
.mark-row { display: flex; justify-content: flex-end; align-items: flex-end; height: 47px; padding-right: 8%; }
.result-mark { visibility: hidden; color: var(--red); font-family: "Yu Gothic", sans-serif; font-size: 49px; font-weight: 900; line-height: .95; text-shadow: 0 1px 0 #8f241f; pointer-events: none; }
.result-mark.show { visibility: visible; animation: pop-mark .14s ease-out both; }
@keyframes pop-mark { from { opacity: 0; transform: scale(.68); } to { opacity: 1; transform: scale(1); } }

.keys { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; max-width: 760px; margin: 5px auto 0; }
.key { min-width: 0; min-height: 45px; font-size: 20px; }
.status { min-height: 23px; margin-top: 8px; text-align: center; color: #e7e2d2; font-family: "Comic Sans MS", "Yu Gothic", cursive; font-size: 15px; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 480px; margin: 10px auto 0; }
.utility { min-width: 0; min-height: 44px; padding: 7px 12px; font-size: 15px; }
.share-button { grid-column: 1 / -1; }
.share-feedback { min-height: 1.25em; margin: 9px 0 0; text-align: center; color: #fff2bc; font-size: 13px; overflow-wrap: anywhere; }
.solution { max-width: 780px; margin: 18px auto 0; border-top: 2px dashed #e8e3cd99; padding: 12px 4px 4px; font-family: "Comic Sans MS", "Yu Gothic", cursive; }
.solution h2 { margin: 0 0 7px; font-size: clamp(18px, 4.8vw, 23px); }
.solution ol { margin: 0; padding-left: 1.7em; }
.solution li { margin: 0 0 7px; font-size: clamp(14px, 3.8vw, 17px); line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.solution-ad-slot { margin: 18px auto 0; max-width: 100%; }

.end { max-width: 620px; margin: 0 auto; padding: clamp(40px, 9vh, 90px) 6px 36px; text-align: center; }
.end-kicker { margin: 0 0 6px; color: var(--dim); font-size: clamp(16px, 3vw, 20px); }
.end h2 { margin: 0 0 32px; font-family: "Yu Mincho", serif; font-size: clamp(30px, 6vw, 48px); }
.end dl { display: grid; gap: 15px; margin: 0 auto 38px; max-width: 430px; }
.end dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px dashed #d9ddcf8c; padding: 0 5px 11px; }
.end dt { color: var(--dim); font-size: clamp(14px, 3.8vw, 18px); text-align: left; }
.end dd { margin: 0; font-size: clamp(18px, 5vw, 26px); font-weight: 900; text-align: right; }
.end-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.footer { padding: 8px; color: #9e9888; text-align: center; font-size: 11px; }

.copy-dialog { width: min(480px, calc(100vw - 30px)); border: 5px solid #805331; border-radius: 7px; background: var(--board); color: var(--chalk); box-shadow: 0 20px 60px #0009; }
.copy-dialog::backdrop { background: #000a; }
.copy-dialog p { margin: 0 0 12px; }
.copy-dialog textarea { width: 100%; min-height: 125px; margin-bottom: 12px; padding: 9px; resize: vertical; }

@media (max-width: 650px) {
  .game { padding: 3px; }
  .frame { padding: 5px; }
  .game-board { min-height: calc(100dvh - 12px); padding: 13px 9px 37px; }
  .keys { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; max-width: 420px; }
  .key { min-height: 42px; }
  .problem-wrap { min-height: 184px; }
  .intro-board { height: calc(100dvh - 20px); }
  .mobile-break { display: initial; }
  .intro-count { margin: 14px 0 20px; }
  .intro-rule { margin-bottom: 24px; }
  .level.hell-level { font-size: clamp(17px, 4.3vw, 23px); }
}
@media (max-width: 360px) {
  .level { font-size: 23px; }
  .progress { font-size: 11px; }
  .problem.hell .formula-inner { font-size: 21px; }
  .problem.final .formula-inner { font-size: 18px; }
  .intro-content { padding-inline: 12px; }
  .intro-kicker { font-size: 14px; }
  .intro h1 { font-size: 43px; }
}
@media (max-height: 550px) {
  .intro-content { padding-top: 12px; padding-bottom: 18px; }
  .intro-kicker { margin-bottom: 7px; }
  .intro-count { margin: 8px 0 12px; }
  .intro-rule { margin-bottom: 15px; }
  .start { min-height: 44px; }
}