/* 整個畫面固定 16:9，等比縮放塞進視窗；按鈕與文字用 CSS 疊在 canvas 上 */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* 不要「點兩下放大」（下面個別指定 pan-y 的會蓋過這個） */
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #fff4d6;
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  /* 不用 none：iPhone Safari 對 none 支援不完整，點兩下還是會放大；manipulation 一定會擋掉「點兩下放大」。
     捲動和雙指縮放由 input.js 擋 */
  touch-action: manipulation;
}

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 以 1280x720 為準，等比縮放到視窗大小 */
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  font-size: min(2.2vw, 3.9vh);
  /* 手機瀏覽器的 100vh 不扣網址列，畫面上方會被切掉；dvh 是「扣掉網址列後真的看得到的高度」（舊瀏覽器不認得就用上面的 vh） */
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  font-size: min(2.2vw, 3.9dvh);
  transform: translate(-50%, -50%);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation; /* 原因同 html, body */
}

#hud {
  position: absolute;
  top: 0.4em;
  left: 0.6em;
  display: flex;
  gap: 0.5em;
  pointer-events: none;
}

/* 金色錢幣（不用 🪙 emoji：有些手機上是灰色的） */
.coin {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  vertical-align: -0.12em;
  background: radial-gradient(circle at 35% 30%, #fff8c4 0 12%, #ffd84a 35%, #f2b300 70%, #c98a00 100%);
  border: 0.08em solid #a86f00;
  box-shadow: inset 0 0 0 0.12em rgba(255, 240, 160, 0.7);
}

/* 「第幾波」前面的小怪頭像（assets/monster_head.svg） */
.hud-icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.28em;
}

.hud-item {
  background: rgba(255, 255, 255, 0.92);
  border: 3px solid #5b3a1e;
  border-radius: 1em;
  padding: 0.15em 0.7em;
  font-size: max(16px, 1em);
  color: #3a2410;
}

button {
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.big-btn {
  min-width: 80px;
  min-height: 56px;
  padding: 0.3em 1em;
  font-size: max(18px, 1.1em);
  font-weight: bold;
  color: #fff;
  background: #ff8a3d;
  border: 4px solid #a84b10;
  border-radius: 1em;
  box-shadow: 0 4px 0 #a84b10;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #a84b10; }
.big-btn:disabled { background: #bbb; border-color: #888; box-shadow: 0 4px 0 #888; }

#upgrade-btn { white-space: nowrap; }

#countdown {
  position: absolute;
  right: 0.6em;
  top: 0.4em;
  min-width: 80px;
  padding: 0.2em 0.8em 0.1em;
  text-align: center;
  color: #fff;
  background: #ff6b6b;
  border: 4px solid #a8323a;
  border-radius: 1em;
  box-shadow: 0 4px 0 #a8323a;
  pointer-events: none;
}
#countdown-wave { font-size: max(16px, 0.9em); font-weight: bold; }
#countdown-num { font-size: max(32px, 2.2em); font-weight: bold; line-height: 1.1; }

/* 不貼著螢幕上緣：手機橫拿時 Safari 會把點最上緣當成「叫出網址列」，第一下按了沒反應（2026-10-24） */
#wave-btn {
  position: absolute;
  right: 0.6em;
  top: 2.4em;
}

.popup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fffdf3;
  border: 5px solid #5b3a1e;
  border-radius: 1.2em;
  padding: 0.6em 1em;
  text-align: center;
  color: #3a2410;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.2);
}

.popup-title { font-size: max(18px, 1.3em); font-weight: bold; margin-bottom: 0.3em; }
.popup-text { font-size: max(16px, 1em); margin-bottom: 0.5em; white-space: pre-line; }
.row { display: flex; gap: 0.6em; justify-content: center; }

.tower-buttons { display: flex; gap: 0.5em; margin-bottom: 0.5em; }

.tower-btn {
  width: max(84px, 5.2em);
  min-height: max(84px, 5.2em);
  padding: 0.35em 0.2em;
  white-space: nowrap;
  border-radius: 1em;
  border: 4px solid rgba(0, 0, 0, 0.35);
  color: #fff;
  font-weight: bold;
  font-size: max(16px, 0.9em);
  line-height: 1.25;
}
/* tower_art.js 畫的老師：放在白色圓底上，才不會跟按鈕的顏色混在一起 */
.tower-btn .tower-icon {
  width: 2.8em; height: 2.8em; display: block; margin: 0 auto 0.15em;
  background: #fffdf3; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.25);
}
.tower-btn .tower-name { display: block; font-size: 1em; }
.tower-btn .tower-desc { display: block; font-size: max(12px, 0.72em); font-weight: normal; opacity: 0.95; margin-bottom: 0.1em; }
.tower-btn:disabled { filter: grayscale(0.9); opacity: 0.6; }

.cancel-btn {
  min-width: 80px;
  min-height: 56px;
  font-size: max(16px, 1em);
  background: #fff;
  border: 3px solid #5b3a1e;
  border-radius: 1em;
  color: #3a2410;
}

.hidden { display: none !important; }

/* ---------- 遊戲封面（index.html 的 #cover）：圖蓋滿整個畫面，正中間下方兩個大按鈕 ---------- */
#cover {
  position: fixed;
  inset: 0;
  z-index: 8;               /* 在「請把手機橫過來」（10）下面：直拿時先看到轉向提示 */
  background: #7fd05a;
}
#cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-buttons {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2.2vh;
  align-items: center;
}
/* 手繪貼紙按鈕（和入口總覽同一種）：歪歪的粗咖啡色外框、底下厚影子，按下去往下沉 */
.cover-btn {
  font: inherit;
  font-weight: 900;
  font-size: clamp(20px, 4.2vh, 40px);
  color: #fff;
  padding: 0.35em 1.4em;
  min-width: 8em;
  border: 4px solid #5b3a1e;
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  box-shadow: 0 7px 0 #5b3a1e;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s, box-shadow 0.08s;
}
.cover-btn.start { background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.45) 0 18%, transparent 19%), #ff8a3d; transform: rotate(-1.5deg); font-size: clamp(24px, 5.4vh, 52px); }
.cover-btn.rank { background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.45) 0 18%, transparent 19%), #4d96ff; transform: rotate(1.5deg); }
.cover-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #5b3a1e; }

#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff4d6;
  color: #5b3a1e;
  font-size: 28px;
  text-align: center;
  padding-top: 5vh;
  z-index: 10;
}
#rotate-hint small { font-size: 20px; opacity: 0.8; }
#rotate-hint .rotate-help { font-size: 16px; line-height: 1.5; margin: 0.6em 1.2em; padding: 0.5em; background: rgba(255,255,255,0.7); border-radius: 0.8em; }
#rotate-video, #rotate-gif { display: block; height: 42vh; aspect-ratio: 300 / 652; object-fit: contain; max-width: 80%; margin: 0.5em auto 0; border-radius: 1em; border: 3px solid #5b3a1e; background: #222; }
@media (orientation: portrait) and (max-width: 900px) {
  #rotate-hint { display: block; }
}

/* ---------- 排行榜、留名 ---------- */
/* 輸入框要能選字、打字（全域的 user-select: none 會讓 iPhone 不能輸入） */
input {
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}

.name-entry { margin: 0.3em 0 0.6em; }
#name-input {
  width: min(14em, 70vw);
  min-height: 48px;
  font-size: max(18px, 1.1em);
  font-family: inherit;
  text-align: center;
  padding: 0.2em 0.5em;
  border: 3px solid #5b3a1e;
  border-radius: 0.6em;
  color: #3a2410;
}
.name-error { min-height: 1.4em; color: #d63031; font-size: max(16px, 0.9em); margin-top: 0.2em; }

/* 結束畫面：左邊結果和按鈕、右邊榜單 */
.popup.wide {
  display: grid;
  width: min(94%, 48em);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "title extra" "text extra" "buttons extra";
  align-items: center;
  column-gap: 1.2em;
  max-height: 96%;
  overflow: auto;
}
.popup.wide .popup-title { grid-area: title; }
.popup.wide .popup-text { grid-area: text; }
.popup.wide #message-buttons { grid-area: buttons; flex-direction: column; align-items: center; }
.popup.wide #message-buttons button { white-space: nowrap; }
.popup.wide #message-extra { grid-area: extra; }

.board { min-width: 13em; }
.board-title { font-weight: bold; font-size: max(17px, 1.05em); margin-bottom: 0.2em; }
.board-empty { font-size: max(16px, 0.9em); padding: 1em 0; color: #7a6a55; }
.board table { border-collapse: collapse; width: 100%; font-size: max(16px, 0.85em); }
.board td { padding: 0.08em 0.4em; white-space: nowrap; }
.board tr:nth-child(odd) { background: #fff3d6; }
.board tr.me { background: #ffd93d; font-weight: bold; }
.board td.rank { text-align: center; }
.board td.name { text-align: left; max-width: 13em; overflow: hidden; text-overflow: ellipsis; }
.board td.score { text-align: right; }
.board td.lv { color: #7a6a55; font-size: 0.85em; }

/* ---------- 小怪說明（點怪跳出，遊戲暫停）：幾乎滿版，左邊大圖、右邊名字和故事 ---------- */
/* 2026-10-23 使用者：介紹頁要幾乎滿版，圖要放很大、看得清楚 */
#monster-info {
  position: absolute;
  left: 0.6em;
  right: 0.6em;
  top: 3.2em;
  bottom: 0.6em;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 1em;
  background: rgba(255, 253, 243, 0.97);
  border: 4px solid #5b3a1e;
  border-radius: 1em;
  padding: 0.6em 0.9em;
  color: #3a2410;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
}
.mi-close {
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  width: 48px;
  height: 48px;
  font-size: 26px;
  border: none;
  background: transparent;
  color: #5b3a1e;
}
.mi-head { display: contents; } /* 圖和名字直接排進格子 */
.mi-img {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #fff3d6;
  border-radius: 0.8em;
  border: 2px solid #e7cfa0;
}
.mi-head > div { grid-column: 2; grid-row: 1; padding-right: 44px; }
.mi-name { font-weight: bold; font-size: max(20px, 1.6em); margin-bottom: 0.2em; }
.mi-name.long { font-size: max(18px, 1.35em); }
.mi-stats { font-size: max(16px, 1.05em); white-space: nowrap; }
.mi-story {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0.5em;
  overflow-y: auto;
  font-size: max(16px, 1.05em);
  line-height: 1.6;
  touch-action: pan-y; /* 故事太長時可以用手指上下捲 */
}
.mi-story p { margin: 0 0 0.6em; }

/* ---------- 關卡開場故事（素材/關卡/profile.md） ---------- */
/* 標題和「出發！」固定，只有故事文字可以捲（手機橫放時螢幕很矮） */
#message.story {
  width: min(92%, 40em);
  max-height: 94%;
  display: flex;
  flex-direction: column;
}
#message.story .popup-text {
  text-align: left;
  line-height: 1.6;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
#message.story #message-buttons { flex: 0 0 auto; }

/* 開頭故事：左邊文字、右邊實驗室爆炸插圖（用 .popup.wide 的左右排版） */
#message.prologue { width: min(96%, 52em); }
#message.prologue .popup-text { text-align: left; line-height: 1.6; }
.prologue-art svg {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid #5b3a1e;
  border-radius: 0.8em;
  background: #e8f4ef;
}
/* 新怪登場的介紹頁：右邊大大的走路分鏡（會動） */
.intro-art {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  border: 3px solid #5b3a1e;
  border-radius: 0.8em;
  background: linear-gradient(#fff3d6, #f6e2b8);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.intro-art img { height: 96%; width: auto; }
/* 新怪登場的視窗：標題和「知道了」固定，只有中間的文字可以捲（故事長的怪也看得到按鈕），圖固定在右邊中間 */
#message.intro {
  height: 92%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
}
#message.intro .popup-text { overflow-y: auto; min-height: 0; line-height: 1.5; touch-action: pan-y; }
#message.intro #message-extra { align-self: center; }

/* ---------- 留名：[ ]年[ ]班 ---------- */
.class-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.4em;
  font-size: max(18px, 1.1em);
}
.class-select {
  min-width: 64px;
  min-height: 48px;
  font-size: max(18px, 1.1em);
  font-family: inherit;
  text-align: center;
  border: 3px solid #5b3a1e;
  border-radius: 0.6em;
  background: #fff;
  color: #3a2410;
}

/* ---------- 靜音按鈕（左下角） ---------- */
#sound-btn, #pause-btn {
  position: absolute;
  left: 0.5em;
  bottom: 0.5em;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  border: 2px solid #5b3a1e;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

/* ---------- 新手教學提示泡泡（tutorial.js） ---------- */
#tutorial {
  position: absolute;
  z-index: 4;
  pointer-events: none;           /* 不擋住下面的塔位、按鈕 */
  transform: translate(-50%, -100%);
  margin-top: -14px;
  max-width: 17em;
  padding: 0.45em 0.8em;
  background: #fffbe6;
  border: 3px solid #f4a300;
  border-radius: 1em;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  color: #3a2410;
  font-size: max(16px, 0.95em);
  font-weight: bold;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
  animation: tutorial-bob 1s ease-in-out infinite;
}
/* 往下指的小三角形 */
#tutorial::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  margin-left: -12px;
  border: 12px solid transparent;
  border-bottom: 0;
  border-top-color: #f4a300;
}
/* 指著右上角「開始第 N 波」：泡泡在按鈕下面，三角形往上 */
#tutorial.at-wave {
  left: auto;
  right: 0.6em;
  top: 7.4em;               /* 在開始按鈕（top 2.4em）下面，不要蓋到按鈕 */
  transform: none;
  margin-top: 0;
}
#tutorial.at-wave::after {
  left: auto;
  right: 2.4em;
  bottom: auto;
  top: -14px;
  border: 12px solid transparent;
  border-top: 0;
  border-bottom-color: #f4a300;
}
@keyframes tutorial-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* ---------- 暫停（左下角靜音按鈕右邊；暫停時上方顯示字樣，不擋點擊） ---------- */
#pause-btn { left: calc(0.5em + 48px); }
#pause-banner {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  padding: 0.4em 1.2em;
  background: rgba(58, 36, 16, 0.85);
  color: #fff;
  border-radius: 1em;
  font-size: max(18px, 1.2em);
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

/* 指著左上角金錢：泡泡在金錢下面，三角形往上（位置由 tutorial.js 照實際 HUD 算） */
#tutorial.at-gold { transform: none; margin-top: 0; }
#tutorial.at-gold::after {
  left: 2.4em;
  bottom: auto;
  top: -14px;
  border: 12px solid transparent;
  border-top: 0;
  border-bottom-color: #f4a300;
}
/* 泡泡上有「知道了」按鈕時才可以點 */
#tutorial.has-btn { pointer-events: auto; animation: none; }
#tutorial .tut-btn {
  display: block;
  margin: 0.45em auto 0;
  min-width: 6em;
  min-height: 44px;
  padding: 0.2em 1em;
  border: none;
  border-radius: 0.8em;
  background: #ff8a3d;
  color: #fff;
  font-size: max(16px, 0.95em);
  font-weight: bold;
  box-shadow: 0 3px 0 #c45f1c;
}

/* 泡泡在指的東西下面，三角形往上 */
#tutorial.below { transform: translate(-50%, 0); margin-top: 14px; }
#tutorial.below::after {
  bottom: auto;
  top: -14px;
  border: 12px solid transparent;
  border-top: 0;
  border-bottom-color: #f4a300;
}

/* ---------- 工作人員名單 ---------- */
#message.credits-page { min-width: min(92%, 26em); width: min(96%, 52em); }
.credits { display: flex; align-items: center; justify-content: center; gap: 1.2em; }
/* 所有老師的人偶：5 個一排，上排老師、下排升級後 */
.credits-dolls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.2em 0.4em; flex: 0 1 26em; }
.credits-dolls figure { margin: 0; text-align: center; }
.credits-dolls img { width: 100%; max-width: 5.5em; display: block; margin: 0 auto; }
/* 老師們歡呼：一跳一跳 */
.credits-dolls img.cheer { animation: doll-jump 0.8s ease-in-out infinite; }
@keyframes doll-jump {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12%); }
}
.credits-dolls figcaption { font-size: max(12px, 0.75em); font-weight: bold; color: #5b3a1e; white-space: nowrap; }
.credits table { margin: 0.3em auto 0.8em; border-collapse: collapse; font-size: max(17px, 1.05em); }
.credits td { padding: 0.25em 0.6em; border-bottom: 2px dashed #e8d9b5; }
.credits td.role { text-align: right; color: #8a6a45; white-space: nowrap; }
.credits td.name { text-align: left; font-weight: bold; color: #3a2410; white-space: nowrap; }
/* 手機橫放（螢幕很矮）：表格和人偶縮小，整頁才放得下 */
@media (max-height: 500px) {
  #message.credits-page { padding-top: 0.3em; padding-bottom: 0.3em; }
  #message.credits-page .popup-title { margin-bottom: 0; }
  #message.credits-page .popup-text { margin-bottom: 0.2em; }
  .credits table { font-size: 16px; margin: 0 auto 0.3em; }
  .credits td { padding: 0.12em 0.5em; }
  .credits-dolls img { max-width: 3.6em; }
  .credits-dolls figcaption { font-size: 12px; }
}

/* ===================== 給大人看的頁面：/td/?setting、/td/?record（admin_pages.js） ===================== */
/* 遊戲畫面和「請橫過來」都藏起來，整頁可以上下捲 */
body.admin-mode #stage, body.admin-mode #rotate-hint { display: none !important; }
.adm-page {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  /* 天空：上深下淺，加一點點小光點 */
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.7) 0 2px, transparent 3px) 0 0 / 90px 70px,
    linear-gradient(#7ecbff 0%, #bfe6ff 55%, #e9f7ff 100%);
  color: #3a2410;
}
/* 雲（用圓形疊出來） */
.adm-cloud {
  position: absolute;
  width: 120px; height: 40px;
  background: #fff;
  border-radius: 40px;
  opacity: 0.9;
  box-shadow: 30px -18px 0 4px #fff, 64px -6px 0 0 #fff;
  pointer-events: none;
}
.adm-cloud-0 { top: 40px; left: 6%; }
.adm-cloud-1 { top: 110px; right: 10%; transform: scale(0.8); }
.adm-cloud-2 { top: 420px; left: 2%; transform: scale(0.7); }
.adm-cloud-3 { top: 640px; right: 4%; transform: scale(0.9); }
/* 頁面最下面一片草地 */
.adm-grass {
  height: 70px;
  background:
    radial-gradient(circle at 20px 0, #8fd16a 20px, transparent 21px) 0 0 / 40px 30px repeat-x,
    linear-gradient(#8fd16a, #6fbb4c);
  margin-top: 24px;
}
.adm-inner { position: relative; max-width: 980px; margin: 0 auto; padding: 18px 16px 0; }
/* 標題牌：木頭招牌 */
.adm-head {
  background: #c8935a;
  border: 5px solid #5b3a1e;
  border-radius: 18px 26px 16px 24px / 22px 14px 26px 16px;
  box-shadow: 0 7px 0 #5b3a1e;
  padding: 12px 20px;
  text-align: center;
  color: #fffbe8;
  margin: 8px auto 22px;
  max-width: 640px;
  transform: rotate(-1deg);
}
.adm-title { font-size: clamp(22px, 4vw, 34px); font-weight: 900; text-shadow: 0 3px 0 #5b3a1e; }
.adm-sub { font-size: 15px; margin-top: 4px; opacity: 0.95; }
.adm-section {
  background: rgba(255, 253, 243, 0.95);
  border: 4px solid #5b3a1e;
  border-radius: 22px 16px 24px 14px / 14px 24px 16px 22px;
  box-shadow: 0 6px 0 rgba(91, 58, 30, 0.35);
  padding: 14px 16px 18px;
  margin-bottom: 22px;
}
.adm-section-title { font-size: 20px; font-weight: 900; margin-bottom: 12px; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 16px; margin-bottom: 8px; }
/* 「畫」出來的貼紙按鈕：歪歪的手繪外框、粗咖啡色邊、底下厚厚的影子，按下去會往下沉 */
.adm-card {
  --c: #ff8a3d;
  --tilt: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 10px 10px;
  text-decoration: none;
  color: #fff;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.45) 0 18%, transparent 19%),
    var(--c);
  border: 4px solid #5b3a1e;
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  box-shadow: 0 7px 0 #5b3a1e;
  transform: rotate(var(--tilt));
  transition: transform 0.08s, box-shadow 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.adm-card::after {  /* 裡面一圈白色虛線，像縫線 */
  content: '';
  position: absolute;
  inset: 5px;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: inherit;
  pointer-events: none;
}
.adm-card:hover { transform: rotate(var(--tilt)) translateY(-2px); }
.adm-card:active { transform: rotate(var(--tilt)) translateY(5px); box-shadow: 0 2px 0 #5b3a1e; }
.adm-card-icon { font-size: 30px; line-height: 1.1; }
.adm-card-label { font-size: 18px; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); text-align: center; }
button.adm-card { font: inherit; cursor: pointer; }
/* 遊戲結束後的排行榜頁：蓋在遊戲畫面上 */
.adm-overlay { z-index: 60; }
/* 入口總覽：左邊入口、右邊排行榜；窄的螢幕上下排 */
.adm-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
.adm-cols .adm-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 760px) { .adm-cols { grid-template-columns: 1fr; } }
/* 大排行榜：寬的時候 1～10、11～20 分左右兩欄 */
.adm-board { background: rgba(255, 253, 243, 0.96); border: 4px solid #5b3a1e; border-radius: 18px 24px 16px 22px / 22px 16px 24px 18px;
  box-shadow: 0 6px 0 rgba(91, 58, 30, 0.35); padding: 10px 12px; margin-bottom: 18px; }
.adm-section .adm-board { border: none; box-shadow: none; padding: 0; margin: 0; background: none; }
.adm-board.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .adm-board.two { grid-template-columns: 1fr; } }
.adm-table { width: 100%; border-collapse: collapse; font-size: 18px; }
.adm-table td { padding: 5px 6px; border-bottom: 2px dashed #ecdcb8; white-space: nowrap; }
.adm-table tr:nth-child(odd) { background: #fff3d6; }
.adm-table tr.me { background: #ffd93d; font-weight: 900; }
.adm-table td.rank { width: 2.4em; text-align: center; font-weight: bold; }
.adm-table td.name { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
.adm-table td.score { text-align: right; font-weight: bold; }
.adm-table td.lv { text-align: right; color: #8a6a45; font-size: 0.8em; }
.adm-buttons { justify-content: center; grid-template-columns: repeat(auto-fit, minmax(180px, 220px)); }
/* 手機橫放（很矮）：字小一點，20 筆才塞得下 */
@media (max-height: 500px) {
  .adm-head { padding: 4px 14px; margin: 2px auto 8px; box-shadow: 0 4px 0 #5b3a1e; }
  .adm-title { font-size: 20px; }
  .adm-sub { display: none; }
  .adm-inner { padding-top: 6px; }
  .adm-board { padding: 6px 10px; margin-bottom: 10px; }
  .adm-table { font-size: 15px; }
  .adm-table td { padding: 2px 5px; }
  .adm-card { padding: 6px 8px; }
  .adm-card-icon { font-size: 22px; }
  .adm-card-label { font-size: 16px; }
}
/* 遊玩紀錄 */
.adm-stats { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.adm-stat {
  background: #ffd93d;
  border: 4px solid #5b3a1e;
  border-radius: 50% 46% 52% 44% / 46% 52% 44% 50%;
  box-shadow: 0 6px 0 #5b3a1e;
  width: 170px; height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.adm-stat:nth-child(2) { background: #8fd16a; transform: rotate(3deg); }
.adm-stat-num { font-size: 48px; font-weight: 900; line-height: 1; }
.adm-stat-label { font-size: 16px; font-weight: bold; margin-top: 4px; }
.adm-bar-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 15px; }
.adm-bar-day { width: 96px; flex: 0 0 auto; }
.adm-bar-track { flex: 1; height: 18px; background: #f1e3c4; border-radius: 9px; border: 2px solid #5b3a1e; overflow: hidden; }
.adm-bar { height: 100%; background: repeating-linear-gradient(45deg, #ff8a3d 0 10px, #ffa45e 10px 20px); }
.adm-bar-n { width: 40px; text-align: right; font-weight: bold; }
.adm-times { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-time { background: #fff3d6; border: 2px solid #e7cfa0; border-radius: 10px; padding: 2px 8px; font-size: 14px; }
.adm-empty { color: #7a6a55; }