/* ============================================================================
 * 军训避雨模拟器 · 样式表
 * 主题：军营迷彩 + 军绿 + 金色徽章，含入场/跳动/闪光等动画
 * 说明：所有界面（含画布）都放在 .stage 内自适应，手机上也能直接玩
 * ========================================================================== */

/* ------------------------------ 1. 变量与重置 ---------------------------- */
:root {
  --olive-900: #10180d;
  --olive-800: #17240f;
  --olive-700: #1f3116;
  --olive-600: #2c4420;
  --olive-500: #3f5f2c;
  --olive-400: #5a7d3c;
  --khaki: #cbb583;
  --sand: #efe3c2;
  --gold: #e8c46a;
  --gold-deep: #b8912f;
  --red: #c8382f;
  --red-deep: #8f231c;
  --ink: #f4f6ee;
  --ink-dim: rgba(244, 246, 238, 0.66);
  --panel-bg: linear-gradient(165deg, rgba(28, 43, 20, 0.96), rgba(14, 22, 11, 0.97));
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  --radius: 18px;
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--olive-900);
  color: var(--ink);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

body {
  /* 页面外的迷彩底纹，避免画布之外的区域显得空洞 */
  background-image:
    radial-gradient(circle at 12% 22%, rgba(90, 125, 60, 0.5) 0 14%, transparent 15%),
    radial-gradient(circle at 78% 12%, rgba(63, 95, 44, 0.55) 0 11%, transparent 12%),
    radial-gradient(circle at 62% 78%, rgba(43, 66, 30, 0.7) 0 16%, transparent 17%),
    radial-gradient(circle at 24% 84%, rgba(23, 36, 15, 0.9) 0 18%, transparent 19%),
    linear-gradient(160deg, #16220f, #0b1207);
}

.kbd, kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid rgba(203, 181, 131, 0.5);
  background: rgba(0, 0, 0, 0.35);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.82em;
  color: var(--sand);
}

.hidden { display: none !important; }

/* -------------------------------- 2. 舞台 -------------------------------- */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* 移动端浏览器地址栏兼容 */
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--olive-900);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; /* 防止手机上滑动页面 */
}

/* 画布四周的暗角，让画面更有电影感 */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
}

/* -------------------------------- 3. HUD --------------------------------- */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 14, 6, 0.72), transparent);
}

.hud-left { display: flex; flex-wrap: wrap; gap: 8px; }
.hud-right { display: flex; gap: 8px; pointer-events: auto; }

.hud-item {
  min-width: 74px;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(203, 181, 131, 0.34);
  background: rgba(11, 18, 7, 0.62);
  backdrop-filter: blur(6px);
  line-height: 1.15;
}

.hud-label { display: block; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-dim); }
.hud-item b { font-size: 19px; font-variant-numeric: tabular-nums; color: var(--gold); }

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(203, 181, 131, 0.4);
  background: rgba(11, 18, 7, 0.7);
  color: var(--sand);
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.icon-btn:hover { background: rgba(63, 95, 44, 0.8); border-color: var(--gold); transform: translateY(-2px); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.off { opacity: 0.5; }

/* ------------------------------- 4. 提示条 ------------------------------- */
.toast {
  position: absolute;
  top: 84px;
  left: 50%;
  z-index: 6;
  transform: translate(-50%, -14px);
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid rgba(232, 196, 106, 0.55);
  background: rgba(12, 20, 8, 0.86);
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------- 5. 弹层 --------------------------------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow-y: auto;
  background: radial-gradient(ellipse at center, rgba(10, 16, 7, 0.72), rgba(4, 7, 3, 0.93));
  animation: fadeIn 0.28s ease both;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes floatUp { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes pulseGold {
  0%, 100% { text-shadow: 0 0 0 rgba(232, 196, 106, 0); }
  50% { text-shadow: 0 0 18px rgba(232, 196, 106, 0.75); }
}

.panel {
  position: relative;
  width: min(680px, 100%);
  padding: 26px 26px 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(203, 181, 131, 0.32);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  animation: popIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  /* 顶部一条军营配色饰带 */
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: repeating-linear-gradient(
    100deg,
    var(--olive-500) 0 16px,
    var(--khaki) 16px 26px,
    var(--olive-600) 26px 40px,
    var(--olive-400) 40px 52px
  );
}
.panel-sm { width: min(420px, 100%); text-align: center; }
.panel-start { width: min(720px, 100%); }

.badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(232, 196, 106, 0.5);
  background: rgba(232, 196, 106, 0.12);
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.12em;
}
.badge-red {
  border-color: rgba(200, 56, 47, 0.7);
  background: rgba(200, 56, 47, 0.16);
  color: #ffb0a8;
}

.title {
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.12;
  letter-spacing: 0.04em;
  color: var(--sand);
  animation: pulseGold 3.2s ease-in-out infinite;
}
.title span { color: var(--gold); }

.panel-title { font-size: clamp(20px, 3.4vw, 27px); color: var(--sand); margin-bottom: 8px; }

.subtitle { margin-bottom: 16px; color: var(--ink-dim); font-size: 15px; line-height: 1.7; }

/* ----------------------------- 6. 规则列表 ------------------------------- */
.rules {
  margin: 14px 0 20px;
  padding: 14px 16px;
  list-style: none;
  border-radius: 14px;
  border: 1px dashed rgba(203, 181, 131, 0.35);
  background: rgba(0, 0, 0, 0.24);
}
.rules li {
  position: relative;
  padding-left: 20px;
  margin: 7px 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(244, 246, 238, 0.9);
}
.rules li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: var(--gold-deep);
  font-size: 12px;
}
.rules b { color: var(--sand); }

/* ------------------------------ 7. 输入与按钮 ---------------------------- */
.name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.name-row label { font-size: 13px; color: var(--ink-dim); }
.name-row input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(203, 181, 131, 0.4);
  background: rgba(0, 0, 0, 0.4);
  color: var(--ink);
  font-size: 15px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.name-row input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 196, 106, 0.18); }

.btn {
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1b2410;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.2s, filter 0.2s;
  background: linear-gradient(180deg, var(--khaki), #a89158);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-lg { width: 100%; padding: 15px 22px; font-size: 18px; }

.btn-primary {
  color: #17240f;
  background: linear-gradient(180deg, #f0d98d, var(--gold-deep));
  box-shadow: 0 8px 20px rgba(184, 145, 47, 0.3);
}
.btn-danger {
  color: #fff2f0;
  background: linear-gradient(180deg, #e05046, var(--red-deep));
  box-shadow: 0 8px 20px rgba(200, 56, 47, 0.32);
}
.btn-ghost {
  color: var(--sand);
  background: rgba(0, 0, 0, 0.34);
  border-color: rgba(203, 181, 131, 0.42);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }

.hint { margin-top: 12px; font-size: 13px; color: var(--ink-dim); line-height: 1.6; }
.hint-dim { opacity: 0.72; }

/* --------------------------- 8. 真心话挑战弹层 --------------------------- */
.panel-truth { text-align: center; }

.truth-card {
  position: relative;
  margin: 10px auto 14px;
  min-height: 122px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(232, 196, 106, 0.5);
  background:
    radial-gradient(circle at 26% 12%, rgba(232, 196, 106, 0.18), transparent 62%),
    linear-gradient(160deg, rgba(38, 56, 26, 0.92), rgba(10, 16, 7, 0.94));
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.42);
  /* 抽卡时的翻入动画：JS 加上 .revealed 触发 */
  transform: rotateY(88deg) scale(0.94);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25), opacity 0.45s ease;
}
.truth-card.revealed { transform: rotateY(0) scale(1); opacity: 1; }

.truth-text {
  max-width: 46ch;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.8;
  color: var(--sand);
  letter-spacing: 0.01em;
}

.truth-timer { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.truth-timer b {
  flex: 0 0 auto;
  min-width: 64px;
  font-size: 18px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}
.truth-timer b.urgent { color: #ff9c8f; animation: pulseGold 0.9s ease-in-out infinite; }
.truth-timer .progress { flex: 1 1 auto; }
.progress-fill.urgent { background: linear-gradient(90deg, #e05046, #ffb199); }

/* 结算页的真心话回顾：题目较长，允许换行显示 */
.board-list.review .nm { white-space: normal; line-height: 1.6; }

/* ------------------------------ 9. 结算面板 ----------------------------- */
.score-board {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 1.2fr;
  gap: 14px;
  margin: 8px 0 14px;
}
.score-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(232, 196, 106, 0.45);
  background: radial-gradient(circle at 50% 20%, rgba(232, 196, 106, 0.18), rgba(0, 0, 0, 0.32));
}
.score-main span { font-size: 12px; letter-spacing: 0.16em; color: var(--ink-dim); }
.score-main b { font-size: clamp(34px, 7vw, 48px); color: var(--gold); font-variant-numeric: tabular-nums; }
.score-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.score-side > div {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(203, 181, 131, 0.26);
  background: rgba(0, 0, 0, 0.26);
}
.score-side span { display: block; font-size: 11px; color: var(--ink-dim); letter-spacing: 0.1em; }
.score-side b { font-size: 18px; color: var(--sand); font-variant-numeric: tabular-nums; }

.record-line {
  margin: 6px 0;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(232, 196, 106, 0.5);
  background: rgba(232, 196, 106, 0.14);
  color: var(--gold);
  font-size: 14px;
  text-align: center;
  animation: floatUp 1.6s ease-in-out infinite alternate;
}

.board {
  margin: 14px 0 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(203, 181, 131, 0.3);
  background: rgba(0, 0, 0, 0.22);
  max-height: 210px;
  overflow-y: auto;
}
.board h3 { font-size: 14px; color: var(--sand); margin-bottom: 8px; letter-spacing: 0.08em; }
.board-note { font-size: 11px; color: var(--ink-dim); font-weight: 400; }
.board-list { list-style: none; }
.board-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px dashed rgba(203, 181, 131, 0.16);
  font-size: 13.5px;
}
.board-list li:last-child { border-bottom: none; }
.board-list .rk {
  width: 26px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: rgba(203, 181, 131, 0.16);
  color: var(--sand);
  font-size: 12px;
  text-align: center;
  line-height: 22px;
}
.board-list li.top .rk { background: linear-gradient(180deg, #f0d98d, var(--gold-deep)); color: #1b2410; font-weight: 700; }
.board-list .nm { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .sc { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 结算页：按总分自动跳转的提示条（分数不够/够高都会在这里显示并倒计时） */
.redirect-bar {
  margin: 10px 0 6px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(232, 196, 106, 0.6);
  background: linear-gradient(180deg, rgba(232, 196, 106, 0.16), rgba(0, 0, 0, 0.3));
  text-align: center;
  animation: floatUp 1.6s ease-in-out infinite alternate;
}
.redirect-text { font-size: 15px; color: var(--sand); line-height: 1.7; }
.redirect-text b { font-size: 20px; color: var(--gold); font-variant-numeric: tabular-nums; }
.redirect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.redirect-link { color: var(--gold); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }

/* ---------------------------- 10. 触屏虚拟按键 -------------------------- */
.touch {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: none; /* 默认隐藏，触屏/窄屏时由媒体查询打开 */
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 18px 22px;
  pointer-events: none;
}
.touch-group { display: flex; gap: 14px; }
.tbtn {
  pointer-events: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(203, 181, 131, 0.45);
  background: rgba(19, 30, 12, 0.72);
  color: var(--sand);
  font-size: 26px;
  font-family: var(--font);
  backdrop-filter: blur(4px);
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s, background 0.15s;
}
.tbtn:active, .tbtn.active { background: rgba(90, 125, 60, 0.9); transform: scale(0.94); }
.tbtn-jump { width: 96px; height: 96px; font-size: 18px; letter-spacing: 0.1em; border-color: rgba(232, 196, 106, 0.6); }

/* 窄屏 / 触屏设备：显示虚拟按键 */
@media (max-width: 900px), (pointer: coarse) {
  .touch { display: flex; }
  .hud-hide-sm { display: none; }
}

/* 屏幕很矮（横屏手机）时压缩面板留白，保证按钮可点 */
@media (max-height: 560px) {
  .panel { padding: 18px; }
  .rules { display: none; }
  .truth-card { min-height: 92px; padding: 16px 18px; }
}

/* --------------------- 11. 真心话挑战 · 课堂投屏模式 -------------------- */
.class-body {
  display: block;
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  padding: 24px 20px 40px;
}
.class-wrap { max-width: 920px; margin: 0 auto; }
.class-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.class-head h1 { font-size: clamp(22px, 3.4vw, 34px); color: var(--sand); letter-spacing: 0.03em; }
.class-head h1 span { color: var(--gold); }
.class-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ink-dim); }
.class-meta b { color: var(--gold); font-variant-numeric: tabular-nums; }

/* 课堂模式：题目字更大、卡牌更高，方便后排同学看清 */
.class-card { min-height: 200px; }
.class-card .truth-text { font-size: clamp(20px, 3vw, 34px); line-height: 1.65; }
.class-timer { margin: 14px 0 10px; }
.class-timer b { font-size: 26px; min-width: 96px; }
.class-history { max-height: 42vh; overflow-y: auto; margin-top: 18px; }
.class-shortcut { font-size: 12.5px; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 6px; }
.class-shortcut select {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(203, 181, 131, 0.4);
  background: rgba(0, 0, 0, 0.4);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
}
.hint a, .class-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* 投屏时不需要入场动画，避免每次抽卡整页闪动 */
.class-body .panel { animation: none; width: 100%; }

/* 禁用态按钮：提交前不允许继续，视觉上要看得出来 */
.btn[disabled], .btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.55);
  transform: none !important;
  box-shadow: none !important;
}
#truth-submit-state.warn { color: #ffb199; }
#truth-submit-state.ok { color: #a8e6a0; }

/* ------------------ 12. 真心话回答：输入框与排行榜展示 ------------------ */
.answer-box { margin: 12px 0 6px; text-align: left; }
.answer-box label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-dim);
}
.answer-box label b { color: var(--gold); }
.answer-box textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(203, 181, 131, 0.42);
  background: rgba(0, 0, 0, 0.42);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.answer-box textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 196, 106, 0.16); }
.answer-meta {
  margin-top: 4px;
  text-align: right;
  font-size: 12px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.board-list li { flex-wrap: wrap; }               /* 让回答能换行到下一行 */
.btn-tiny { padding: 5px 10px; font-size: 12px; flex: 0 0 auto; }
.board-answer {
  flex: 1 1 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(232, 196, 106, 0.35);
  background: rgba(232, 196, 106, 0.12);
  color: var(--sand);
  font-size: 13px;
  line-height: 1.65;
  white-space: normal;
}
.board-answer.expired {
  border-color: rgba(203, 181, 131, 0.2);
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink-dim);
}

/* ------------- 13. 允许复制：内容区可选中，只对控件禁用选择 ------------- */
/* 说明：之前画布的 touch-action:none + 触屏按钮的 user-select:none 会把手机上
   「长按 → 拷贝」的手势吃掉，导致题目/成绩/回答都没法选。这里显式打开选择。 */
.panel,
.panel *:not(button):not(select),
.truth-card,
.truth-text,
.answer-box textarea,
.board,
.board-list,
.board-answer,
.rules,
.hint,
.title,
.class-wrap,
.class-wrap *:not(button) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;   /* iOS 长按弹出「拷贝 / 查询」菜单 */
}
button,
.btn,
.btn-tiny,
.icon-btn,
.tbtn,
.class-shortcut { -webkit-user-select: none; user-select: none; }

/* 画布只拦截自己的手势；页面其它区域保持可滚动、可选中的默认行为 */
.stage { touch-action: manipulation; }

/* 复制按钮：贴在小字提示里，不抢视觉 */
.copy-row { margin: 8px 0 2px; text-align: center; }

/* ---------------- 14. 文字复制：默认全站可选中，只有控件禁用 ---------------- */
/* 说明：画布上画的字是像素，浏览器永远无法选中（已提供「复制」按钮代替）；
   这里是保证 DOM 里的题目、回答、成绩、说明文字都能正常选中复制。 */
html, body, .stage, .overlay, .panel, .truth-card, .board, .class-wrap {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
button, .btn, .btn-tiny, .icon-btn, .tbtn, select, option {
  -webkit-user-select: none;
  user-select: none;
}
/* 点一下自动选中的文字（题目/回答）给一点视觉反馈 */
.tap-select {
  cursor: copy;
  border-radius: 8px;
  transition: background 0.2s, box-shadow 0.2s;
}
.tap-select:hover { background: rgba(232, 196, 106, 0.08); }
.tap-select.selected { background: rgba(232, 196, 106, 0.18); box-shadow: 0 0 0 2px rgba(232, 196, 106, 0.35) inset; }