/* Giao diện giấy cắt của bản 2D, chồng lên game.css */
:root {
  --panel: #fff5df;
  --panel-solid: #ffffff;
  --line: #43210f;
  --gold: #a81e1c;
  --gold-deep: #d9972f;
  --text: #3f1d0a;
  --ink: #3f1d0a;
  --gold-fill: #ffd76d;
  --lift: 0 4px 0 #43210f;
}

.panel, .dock, .round, .date-chip, .hint { border-width: 3px; }

.map, .photo, .break, .wish { border-color: var(--line); background: var(--panel); }
.map-list button { background: #ffe9b8; }
.map-list button:hover { background: var(--gold-fill); }
.map button, .photo-actions button, .break button, .wish button { border-width: 2px; }
.name-field input, .chat input, .wish input { border-width: 2px; background: var(--panel-solid); }
.dock button:hover { background: #ffe9b8; }
.dock button:active { background: var(--gold-fill); }
.date-chip.holy { background: var(--gold-fill); color: var(--ink); }
.progress::after { background: linear-gradient(90deg, var(--gold-deep) var(--done, 0%), rgba(67, 33, 15, .16) var(--done, 0%)); }
.round.off::after { background: var(--line); }

.niem {
  border: 4px solid var(--line);
  background: var(--lacquer);
  box-shadow: 0 6px 0 var(--line), inset 0 0 0 4px #ffd76d;
  color: #fff5df;
}
.niem strong { color: #ffd76d; }
.niem:active { transform: translateY(4px); }
.sit { border: 3px solid var(--line); }
.toast { border: 3px solid var(--line); }

/* Tràng hạt và tụng kinh vẫn trên nền tối */
.focus-screen {
  --panel: rgba(36, 15, 9, .82);
  --line: rgba(240, 198, 117, .38);
  --gold: #f0c675;
  --text: #fff4df;
  color: var(--text);
}

.top[open] { max-width: min(640px, calc(100% - 20px)); }
.top .forms {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  max-height: calc(100vh - 290px);
  overflow-y: auto;
}
.top .forms button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 0;
  background: none;
  text-align: left;
}
.top .forms button:hover { background: #ffe9b8; }
.top .forms button.active { background: var(--gold-fill); font-weight: 400; }
.top .forms canvas { flex: none; width: 58px; height: 58px; }
.top .forms strong { display: block; font-size: 15px; }
.top .forms span { display: block; font-size: 13px; line-height: 1.35; }

#infoCard {
  position: fixed;
  z-index: 3;
  top: 76px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(420px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 3px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--lift);
  transform: translateX(-50%);
  cursor: pointer;
}
#infoCard[hidden] { display: none; }
#infoCard canvas { flex: none; width: 76px; height: 76px; }
#infoCard h2 { font-size: 17px; }
#infoCard p { margin: 2px 0 4px; font-size: 14px; line-height: 1.35; }
#infoCard q { font-size: 14px; font-style: italic; quotes: none; }
body.focus-mode #infoCard { display: none; }

@media (pointer: coarse), (max-width: 699px) {
  /* Chưa có tin nhắn thì ẩn bảng để không che biển ra sân */
  .chat-panel:has(.chat-empty) { display: none; }
  #infoCard { top: 112px; }
  .joystick { display: block; left: 12px; width: 100px; height: 100px; border: 3px solid var(--line); background: rgba(255, 245, 223, .6); }
  .knob { top: 21px; left: 21px; }
}