/* 레이아웃: 왼쪽 정사각형 게임판 + 오른쪽 작전판, 좁은 화면에서는 위아래로 쌓기
   한 가지 화면(해 질 녘 정원)으로 고정한 단일 테마 */
:root {
  --soil: #16231a;       /* 바탕: 짙은 풀숲 */
  --leaf: #203427;       /* 패널 */
  --leaf-2: #2a4433;     /* 패널 안쪽 칸 */
  --line: #3b5a45;
  --ink: #eef3e4;
  --ink-dim: #a9bba7;
  --cheese: #f6c445;     /* 강조: 피자 치즈 */
  --tomato: #ec5b43;
  --basil: #7ed07a;
  --sky: #7fd0ff;
  --font-display: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--soil); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  background-image: radial-gradient(circle at 10% 0%, #22392a 0, transparent 45%), radial-gradient(circle at 100% 100%, #1f2f1c 0, transparent 40%);
}
.app {
  max-width: 1280px; margin: 0 auto;
  padding-block: 14px 24px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 14px;
}
h1, h2, h3, .btn, kbd, .hud dd, .eyebrow { font-family: var(--font-display); font-weight: 400; }
h1, h2, h3 { text-wrap: balance; margin: 0; }

/* 상단 */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { font-size: 26px; line-height: 1.1; color: var(--cheese); }
.brand p { margin: 0; color: var(--ink-dim); font-size: 13px; }
.hud { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.hud > div { background: var(--leaf); border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; min-width: 84px; }
.hud dt { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.04em; }
.hud dd { margin: 0; font-size: 19px; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 5px; }
.hud .danger { border-color: var(--tomato); background: #3a211b; }
.hud .danger dd { color: #ffb3a5; }

.coin {
  display: inline-block; width: 0.9em; height: 0.9em; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, #fff1a8, var(--cheese) 45%, #b9851b);
  box-shadow: inset 0 0 0 1.5px #9a6c12; vertical-align: -0.1em; margin-right: 3px;
}

/* 본문 */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.board-wrap {
  position: relative; width: 100%; max-width: min(100%, calc(100vh - 120px)); min-width: 0;
  aspect-ratio: 1; justify-self: center;
  border-radius: 14px; overflow: hidden; border: 3px solid #4a3522;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
#board { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }

.banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0.96);
  width: min(86%, 460px); text-align: center; pointer-events: none;
  background: rgba(22, 35, 26, 0.88); border: 2px solid var(--cheese); border-radius: 14px;
  padding: 14px 18px; opacity: 0; transition: opacity 0.3s, transform 0.3s;
  display: grid; gap: 4px;
}
.banner b { font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--cheese); }
.banner span { color: var(--ink); font-size: 14px; }
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.toast {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(10px);
  max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px;
  background: rgba(22, 35, 26, 0.92); border: 1px solid var(--line); color: var(--ink);
  font-size: 14px; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.good { border-color: var(--basil); color: #d4f7cf; }
.toast.bad { border-color: var(--tomato); color: #ffd0c6; }
.toast.warn { border-color: var(--cheese); color: #fff0c2; }

/* 오른쪽 작전판 */
.side { display: grid; gap: 12px; min-width: 0; }
.panel { background: var(--leaf); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.panel h2 { font-size: 17px; color: var(--cheese); }
.controls { display: grid; gap: 8px; }
.start-row { display: flex; gap: 8px; align-items: stretch; }
.icon-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.icon-btn { padding: 8px 0; min-height: 40px; gap: 2px; }
.icon-btn svg { flex: none; }
.icon-btn .ib-txt { font-size: 12px; font-variant-numeric: tabular-nums; }
.icon-btn[aria-pressed="false"]#sfxBtn, .icon-btn[aria-pressed="false"]#musicBtn { color: var(--ink-dim); }
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ti-status { margin: 0; font-size: 13px; line-height: 1.4; padding: 6px 8px; border-radius: 8px; background: var(--leaf-2); }
.ti-status.bad { color: #ffc2b6; border-left: 3px solid var(--tomato); }
.ti-status.ok { color: #cdeaff; border-left: 3px solid var(--sky); }
.ti-status.plus { color: #d4f7cf; border-left: 3px solid var(--basil); }
/* 게임판 + 바로 아래 제작자 표시 */
.board-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.foot-credit { text-align: center; font-size: 12px; color: var(--ink-dim); padding-block: 2px; }
.start-row .btn { flex: 1 1 auto; }
.wait-timer {
  flex: none; min-width: 74px; display: grid; place-items: center; padding: 0 10px; border-radius: 10px;
  font-family: var(--font-display); font-size: 19px; font-variant-numeric: tabular-nums;
  background: var(--leaf); border: 2px solid var(--line); color: var(--ink);
}
.wait-timer.urgent { border-color: var(--tomato); color: #ffb3a5; }
/* 설정 창 */
.set-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tabs { display: flex; gap: 4px; background: var(--soil); border-radius: 10px; padding: 3px; }
.tab { appearance: none; border: 0; background: none; color: var(--ink-dim); font-family: var(--font-display); font-size: 15px; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--cheese); color: #3a2a05; }
.set-page { display: grid; gap: 12px; }
.vol-row { display: flex; align-items: center; gap: 10px; }
.vol-row input { flex: 1; min-width: 0; accent-color: var(--cheese); }
.vol-row output { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.settings input[type="number"] { font: inherit; color: var(--ink); background: var(--soil); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; width: 100%; }
.credit { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--ink-dim); cursor: default; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.row .btn { flex: 1 1 auto; }

.btn {
  appearance: none; border: 1px solid var(--line); background: var(--leaf-2); color: var(--ink);
  border-radius: 10px; padding: 8px 12px; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: background 0.15s, transform 0.1s;
}
.btn:hover:not(:disabled) { background: #34543f; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn[aria-pressed="true"] { border-color: var(--cheese); color: var(--cheese); }
.btn.primary { background: var(--cheese); color: #3a2a05; border-color: #d8a52a; }
.btn.primary:hover:not(:disabled) { background: #ffd56a; }
.btn.big { font-size: 19px; padding: 11px 16px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.shop { display: grid; gap: 6px; }
.weapon {
  appearance: none; text-align: left; cursor: pointer; color: var(--ink); font: inherit;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  background: var(--leaf-2); border: 2px solid transparent; border-radius: 10px; padding: 6px 10px 6px 6px;
}
.weapon:hover { background: #34543f; }
.weapon[aria-pressed="true"] { border-color: var(--cheese); background: #3b4a2a; }
.weapon.poor .w-cost { color: var(--tomato); }
.weapon.poor img { filter: grayscale(0.6); opacity: 0.75; }
.w-main { display: grid; min-width: 0; }
.w-name { font-family: var(--font-display); font-size: 16px; display: flex; align-items: center; gap: 6px; }
.w-desc { font-size: 12px; color: var(--ink-dim); line-height: 1.35; }
.w-cost { font-family: var(--font-display); font-size: 16px; display: flex; align-items: center; color: var(--cheese); font-variant-numeric: tabular-nums; }
kbd {
  font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 4px;
  background: var(--soil); border: 1px solid var(--line); color: var(--ink-dim);
}

.tower-info { border-color: var(--cheese); }
.ti-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.ti-head b { font-family: var(--font-display); font-weight: 400; font-size: 18px; display: block; }
.ti-head span { font-size: 12px; color: var(--ink-dim); }
.x { appearance: none; background: none; border: 0; color: var(--ink-dim); font-size: 22px; cursor: pointer; padding: 0 6px; }
.stats { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.stats th { text-align: left; font-weight: 400; color: var(--ink-dim); padding: 2px 0; }
.stats td { text-align: right; padding: 2px 0 2px 8px; }
.stats .next { color: var(--basil); }

.wave-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wave-info li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--leaf-2); border-radius: 8px; padding: 4px 8px 4px 4px; }
.wave-info li.new { outline: 2px solid var(--tomato); }
.wave-info b { font-family: var(--font-display); font-weight: 400; display: block; }
.wave-info small { display: block; color: var(--ink-dim); font-size: 12px; line-height: 1.3; }
.wave-info em { font-style: normal; font-family: var(--font-display); font-size: 12px; background: var(--tomato); color: #fff; border-radius: 6px; padding: 1px 6px; }
.lane-info { margin: 0; font-size: 13px; color: var(--ink-dim); }
.lane-info b { color: var(--ink); font-weight: 400; font-family: var(--font-display); }
.quiz-panel p { margin: 0; font-variant-numeric: tabular-nums; }

/* 모달 */
.modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(8, 14, 10, 0.72); backdrop-filter: blur(3px);
  padding-block: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow-y: auto;
}
.dialog {
  width: min(560px, 100%); background: #1c2e22; border: 2px solid var(--line); border-radius: 16px;
  padding: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); max-height: calc(100vh - 32px); overflow-y: auto;
}
.dialog h2 { font-size: 26px; color: var(--cheese); }
.dialog h3 { font-size: 17px; margin-top: 8px; }
.eyebrow { margin: 0; font-size: 13px; letter-spacing: 0.06em; color: var(--basil); }

.intro { display: grid; gap: 10px; }
.intro p { margin: 0; }
.intro-pizza { width: 72px; height: 72px; }
.howto { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink); }
.howto b { color: var(--cheese); font-weight: 400; font-family: var(--font-display); }
.keys { color: var(--ink-dim); font-size: 13px; }

.quiz { display: grid; gap: 14px; }
.quiz-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.quiz-kind { font-family: var(--font-display); color: var(--ink-dim); }
.chip { font-family: var(--font-display); font-size: 13px; border-radius: 999px; padding: 2px 10px; background: var(--leaf-2); }
.subj-math { background: #2f4a7a; } .subj-korean { background: #7a3f2f; } .subj-science { background: #2f6a4a; }
.subj-social { background: #6a5a2a; } .subj-english { background: #5a3a7a; } .subj-custom { background: #7a2f5a; }
.quiz-timer { height: 6px; background: var(--leaf-2); border-radius: 3px; overflow: hidden; }
.quiz-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--tomato), var(--cheese)); }
.quiz-q { margin: 0; font-size: 21px; line-height: 1.45; font-family: var(--font-display); }
.quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt {
  appearance: none; text-align: left; font: inherit; font-size: 16px; color: var(--ink); cursor: pointer;
  display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 12px;
  background: var(--leaf-2); border: 2px solid var(--line); min-height: 56px;
}
.opt b { font-family: var(--font-display); font-weight: 400; width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--soil); color: var(--cheese); }
.opt span { min-width: 0; overflow-wrap: anywhere; }
.opt:hover:not(:disabled) { border-color: var(--cheese); }
.opt:disabled { cursor: default; }
.opt.right { border-color: var(--basil); background: #2c5a32; }
.opt.wrong { border-color: var(--tomato); background: #5a2c24; }
.quiz-note { margin: 0; font-size: 13px; color: var(--ink-dim); }
.quiz-note:empty { display: none; }
.quiz-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 1.5em; }
.quiz-feedback .btn { margin-left: auto; }
.good { color: var(--basil); }
.bad { color: #ff9a88; }

/* 시트 문제 · OX · 단답형 */
.subj-sheet { background: #2f5a6a; }
.chips { display: flex; gap: 6px; }
.quiz-opts.quiz-ox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-ox .opt { justify-content: center; min-height: 110px; font-family: var(--font-display); font-size: 44px; }
.quiz-ox .opt b { display: none; }
.quiz-short { display: flex; gap: 8px; }
.quiz-short input {
  flex: 1; min-width: 0; font: inherit; font-size: 18px; color: var(--ink); background: var(--leaf-2);
  border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.quiz-short input:focus { outline: none; border-color: var(--cheese); }
.quiz-short input.right { border-color: var(--basil); background: #2c5a32; }
.quiz-short input.wrong { border-color: var(--tomato); background: #5a2c24; }
.quiz-exp { flex-basis: 100%; color: var(--ink-dim); }
.report-rank { display: grid; gap: 8px; }
.report-rank .gk-rank-btns { margin-top: 0; }

/* GameKit 화면(시작 · 랭킹 팝업)을 게임 분위기에 맞추기 */
:root {
  --gk-backdrop: rgba(8, 14, 10, 0.8);
  --gk-card: #1c2e22;
  --gk-panel: #2a4433;
  --gk-line: #3b5a45;
  --gk-ink: #eef3e4;
  --gk-dim: #a9bba7;
  --gk-accent: #ec5b43;
  --gk-accent-ink: #ffffff;
  --gk-gold: #f6c445;
  --gk-gold-ink: #3a2a05;
  --gk-sky: #7fd0ff;
  --gk-font-display: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

.settings { display: grid; gap: 14px; }
.settings fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 0; padding: 8px 12px 12px; display: grid; gap: 10px; }
.settings legend { font-family: var(--font-display); padding: 0 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.settings .checks label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.settings label { display: grid; gap: 4px; font-size: 14px; }
.settings select, .settings textarea {
  font: inherit; color: var(--ink); background: var(--soil); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; width: 100%;
}
.settings textarea { resize: vertical; font-size: 14px; }
.settings code { font-size: 12px; color: var(--cheese); }
.hint { margin: 0; font-size: 13px; color: var(--ink-dim); }

.report { display: grid; gap: 12px; }
.report-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.report-stats div { background: var(--leaf-2); border-radius: 10px; padding: 10px; display: grid; }
.report-stats b { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--cheese); font-variant-numeric: tabular-nums; }
.report-stats span { font-size: 12px; color: var(--ink-dim); }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tbl th { font-weight: 400; color: var(--ink-dim); }
.wrong-list { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; max-height: 240px; overflow-y: auto; }
.wrong-list small { color: var(--ink-dim); }
.wrong-list b { color: var(--basil); font-weight: 400; }

/* ---------- 가로 화면 ---------- */
/* 세로로 든 휴대폰·태블릿: 화면 전체를 90도 돌려 가로처럼 */
html.force-landscape, html.force-landscape body { overflow: hidden; }
html.force-landscape body {
  position: fixed; top: 0; left: 0;
  width: var(--app-w); height: var(--app-h); min-height: 0; margin: 0;
  transform-origin: 0 0; transform: rotate(90deg) translateY(-100%);
}
/* 낮은 가로 화면(휴대폰 가로 등): 게임판과 작전판을 한 화면에 나란히 */
html.compact .app { max-width: none; padding-block: 6px; gap: 6px; height: var(--app-h); overflow: hidden; }
html.compact .top { gap: 4px 12px; flex-wrap: nowrap; }
html.compact .brand img { width: 26px; height: 26px; }
html.compact .brand h1 { font-size: 18px; white-space: nowrap; }
html.compact .brand p { display: none; }
html.compact .hud { flex-wrap: nowrap; gap: 4px; min-width: 0; overflow-x: auto; }
html.compact .hud > div { min-width: 0; flex: 0 0 auto; padding: 1px 8px; border-radius: 8px; }
html.compact .hud dt { font-size: 10px; }
html.compact .hud dd { font-size: 14px; }
html.compact .layout { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
html.compact .board-col { width: var(--board); gap: 3px; }
html.compact .board-wrap { width: var(--board); max-width: none; justify-self: start; }
html.compact .side { max-height: var(--side-h); overflow-y: auto; gap: 8px; padding-right: 2px; }
html.compact .btn.big { font-size: 16px; padding: 8px 12px; }
html.compact .quiz-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dialog { max-height: calc(var(--app-h, 100vh) - 32px); }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .board-wrap { max-width: 100%; }
}
@media (max-width: 520px) {
  .brand h1 { font-size: 21px; }
  .hud > div { min-width: 0; flex: 1 1 28%; padding: 3px 8px; }
  .hud dd { font-size: 16px; }
  .quiz-opts, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dialog { padding: 16px; }
  .quiz-q { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .banner, .toast, .btn { transition: none; }
}