/* ===== 推箱子拼单词 · 课堂投影友好样式 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: "Comic Sans MS", "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  background: linear-gradient(160deg, #aee2ff 0%, #d5f3e5 55%, #fff3c4 100%);
  min-height: 100vh;
  color: #333;
  -webkit-user-select: none;
  user-select: none;
}

input, textarea { user-select: text; -webkit-user-select: text; font-family: inherit; }
.hidden { display: none !important; }
.muted { color: #999; font-size: 0.9em; }

.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

/* ===== 主菜单 ===== */
.game-title {
  margin-top: 9vh;
  font-size: clamp(34px, 6vw, 64px);
  color: #e8590c;
  text-shadow: 2px 3px 0 #fff, 4px 6px 0 rgba(0,0,0,0.12);
}
.subtitle { margin: 10px 0 40px; font-size: clamp(15px, 2vw, 22px); color: #666; }
.menu-buttons { display: flex; flex-direction: column; gap: 18px; width: min(84vw, 380px); }

/* ===== 按钮 ===== */
.btn {
  border: none;
  border-radius: 14px;
  background: #fff;
  color: #333;
  font-size: 18px;
  padding: 10px 22px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
  transition: transform 0.06s, box-shadow 0.06s;
  font-family: inherit;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.15); }
.btn-big { font-size: 24px; padding: 16px; }
.btn-small { font-size: 16px; padding: 8px 14px; border-radius: 10px; }
.btn-tiny { font-size: 13px; padding: 4px 10px; border-radius: 8px; }
.btn-primary { background: #40c057; color: #fff; }
.btn-danger { background: #fa5252; color: #fff; }

/* ===== HUD ===== */
#hud { width: min(96vw, 920px); }
.hud-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(17px, 2.4vw, 24px);
  font-weight: bold;
  padding: 4px 6px;
}
#hud-timer { color: #e8590c; }
#timer-bar {
  height: 12px;
  background: rgba(255,255,255,0.6);
  border-radius: 6px;
  overflow: hidden;
  margin: 4px 0;
}
#timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #69db7c, #40c057);
  border-radius: 6px;
  transition: width 1s linear;
}
#timer-fill.danger { background: linear-gradient(90deg, #ff8787, #fa5252); }
.hud-hint-row #hint-text { color: #1971c2; font-size: 1.25em; }

/* ===== 棋盘 ===== */
#board-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  padding: 6px;
}
#board { position: relative; --cell: 40px; }
.cell {
  position: absolute;
  left: 0; top: 0;
  width: var(--cell);
  height: var(--cell);
}
.cell.floor { background: #f7ecd7; }
.cell.floor.alt { background: #f1e2c6; }
.cell.wall {
  background: #8d5a2b;
  border-radius: 6px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.25), inset 0 3px 0 rgba(255,255,255,0.2);
}
.slot {
  position: absolute;
  left: 0; top: 0;
  width: var(--cell);
  height: var(--cell);
  border: 3px dashed #40c057;
  border-radius: 8px;
  background: rgba(64, 192, 87, 0.12);
}
.slot.flash { animation: slotflash 0.45s; }
@keyframes slotflash {
  0%, 100% { border-color: #40c057; background: rgba(64,192,87,0.12); }
  50% { border-color: #fa5252; background: rgba(250,82,82,0.3); }
}
.box {
  position: absolute;
  left: 0; top: 0;
  width: var(--cell);
  height: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #e8a854, #c77f35);
  border: 3px solid #8d5a2b;
  border-radius: 9px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.25);
  transition: transform 0.12s;
  z-index: 2;
}
.box span {
  font-weight: bold;
  color: #5b3210;
  font-size: calc(var(--cell) * 0.42);
  letter-spacing: 1px;
}
.box.wide span { font-size: calc(var(--cell) * 0.26); }
.box.locked {
  background: linear-gradient(160deg, #8ce99a, #40c057);
  border-color: #2b8a3e;
}
.box.locked::after {
  content: '✓';
  position: absolute;
  right: 2px; top: -2px;
  font-size: calc(var(--cell) * 0.28);
  color: #1b5e20;
  font-weight: bold;
}
.box.warn { animation: boxwarn 0.4s; }
@keyframes boxwarn {
  0%, 100% { background: linear-gradient(160deg, #e8a854, #c77f35); border-color: #8d5a2b; }
  50% { background: #fa5252; border-color: #c92a2a; }
}
.player {
  position: absolute;
  left: 0; top: 0;
  width: var(--cell);
  height: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell) * 0.78);
  transition: transform 0.12s;
  z-index: 3;
}

/* ===== 游戏控制 ===== */
#game-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 6px;
}
#dpad { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 12px; }
.dpad-mid { display: flex; gap: 64px; }
.dpad-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
  touch-action: manipulation;
}
.dpad-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.15); background: #ffe8cc; }

/* ===== 弹窗与面板 ===== */
.modal, .panel {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 12px;
}
.modal-box, .panel-box {
  background: #fffef7;
  border-radius: 20px;
  padding: 26px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: pop 0.18s ease-out;
  max-width: 94vw;
}
.modal-box { min-width: min(86vw, 360px); }
.panel-box { width: min(94vw, 780px); max-height: 90vh; overflow-y: auto; text-align: left; }
.panel-box h2 { text-align: center; margin-bottom: 14px; }
@keyframes pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-buttons { display: flex; gap: 14px; justify-content: center; margin-top: 20px; }
.modal-box input[type="text"] {
  font-size: 22px;
  padding: 10px 14px;
  border: 2px solid #ccc;
  border-radius: 10px;
  width: 100%;
  margin-top: 14px;
  text-align: center;
}
.msg-word {
  font-size: clamp(34px, 7vw, 52px);
  font-weight: bold;
  color: #2b8a3e;
  letter-spacing: 5px;
  margin: 12px 0 6px;
}
.msg-detail { font-size: 20px; color: #666; }
#results-summary { font-size: 22px; margin-bottom: 12px; }
.big-score { color: #e8590c; font-size: 34px; }
#results-list {
  list-style: none;
  max-height: 32vh;
  overflow-y: auto;
  text-align: left;
  font-size: 18px;
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
}
#results-list li { padding: 3px 0; border-bottom: 1px dashed #eee; }

/* ===== 单词管理 ===== */
.words-scroll { max-height: 34vh; overflow-y: auto; border-radius: 10px; background: #fff; }
#words-table { width: 100%; border-collapse: collapse; font-size: 16px; }
#words-table th, #words-table td { padding: 7px 10px; border-bottom: 1px solid #f0e8d8; text-align: left; }
#words-table thead th { position: sticky; top: 0; background: #fff3d6; }
.add-area { margin-top: 12px; background: #fff; border-radius: 10px; padding: 10px 14px; }
.add-area summary { cursor: pointer; font-weight: bold; font-size: 17px; }
.add-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.add-form input {
  flex: 1 1 130px;
  font-size: 16px;
  padding: 8px 10px;
  border: 2px solid #ddd;
  border-radius: 8px;
}
#batch-text {
  width: 100%;
  font-size: 15px;
  padding: 8px 10px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin-bottom: 8px;
  resize: vertical;
}
.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}
.panel-actions label.btn { display: inline-block; }

/* ===== 排行榜 ===== */
.scores-list { list-style: none; font-size: 19px; }
.scores-list li {
  padding: 9px 12px;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.scores-list .rank { font-size: 22px; min-width: 34px; }
.scores-list .score-num { color: #e8590c; font-weight: bold; }

/* ===== 设置 ===== */
.setting-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  font-size: 19px;
  border-bottom: 1px dashed #eee;
}
.setting-row label { flex: 1; }
.setting-row input[type="range"] { flex: 1; accent-color: #40c057; }
.setting-row input[type="number"] {
  width: 90px;
  font-size: 18px;
  padding: 6px 8px;
  border: 2px solid #ddd;
  border-radius: 8px;
}
.setting-row input[type="checkbox"] { width: 24px; height: 24px; accent-color: #40c057; }
#volume-num { min-width: 34px; text-align: right; font-weight: bold; }

/* ===== 提示条 ===== */
#toast {
  position: fixed;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.78);
  color: #fff;
  padding: 10px 22px;
  border-radius: 24px;
  font-size: 17px;
  z-index: 100;
}

/* ===== 小屏适配 ===== */
@media (max-width: 560px) {
  .hud-row { font-size: 15px; }
  #game-controls .btn-small { font-size: 13px; padding: 6px 9px; }
  .dpad-btn { width: 50px; height: 50px; }
  .dpad-mid { gap: 52px; }
}