/* Reusable nine-slice frame. SVG corners retain their proportions at every size.
   Decoration is painted in the border; it cannot intercept clicks or scroll with content. */
:is(.dual-role-shell, .cave-gallery-panel, .stone-wall-panel,
    .workshop-timer-panel, .workshop-step-game-panel, .tianma-puzzle-shell,
    .video-modal, .cover-modal) {
  box-sizing: border-box;
  border: 32px solid transparent;
  border-image: url('../assets/dunhuang-frame-v2.svg') 80 / 32px / 0 round;
  border-radius: 6px;
  background-clip: padding-box;
  box-shadow: 0 24px 64px #0008, inset 0 0 0 1px #d2af6540;
}
:is(.dual-role-shell, .cave-gallery-panel, .stone-wall-panel,
    .workshop-timer-panel, .workshop-step-game-panel, .tianma-puzzle-shell) {
  /* Dark lacquer beneath the gold rim, with a warmer light at the top. */
  background: radial-gradient(ellipse at 50% 0%, #6f44212b, transparent 65%),
              linear-gradient(145deg, #30231ef7, #1c1713fa);
  padding: 12px;
}
:is(.video-modal, .cover-modal) {
  padding: 2px;
  background: #241911;
}
:is(.video-modal, .cover-modal)::before { content: none; }
:is(.video-modal video, .cover-modal img) {
  max-width: calc(96vw - 74px);
  max-height: calc(94vh - 74px);
  border-radius: 4px;
}
:is(.video-close, .cave-gallery-close, .workshop-timer-close,
    .workshop-step-game-close, .tianma-puzzle-close) {
  top: 4px; right: 4px;
  border: 1px solid #c6a468;
  background: #302118f5;
  color: #f4db9d;
  box-shadow: 0 2px 8px #0005, inset 0 0 0 3px #c6a46818;
  z-index: 6;
}
/* Smaller frames use a quiet double line and two stepped corners. */
:is(.stone-slot, .cave-gallery-item) {
  border: 1px solid #c9a563;
  border-radius: 12px 3px;
  box-shadow: 0 7px 18px #0004;
}
:is(.stone-slot, .cave-gallery-item)::after {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid #e3c17c80; border-radius: 8px 1px;
  background:
    linear-gradient(#efcf87,#efcf87) left top / 16px 2px,
    linear-gradient(#efcf87,#efcf87) left top / 2px 16px,
    linear-gradient(#efcf87,#efcf87) right bottom / 16px 2px,
    linear-gradient(#efcf87,#efcf87) right bottom / 2px 16px;
  background-repeat: no-repeat;
  pointer-events: none; z-index: 1;
}
:is(.stone-slot-label, .stone-slot-tip) {
  border-radius: 6px 1px; border-color: #c9a563a6;
  background: #271a12e6;
}
:is(.tianma-puzzle-stage-wrap, .workshop-step-game-board, .workshop-step-game-tray) {
  border: 1px solid #b798584d; border-radius: 10px 3px;
  box-shadow: inset 0 0 0 4px #d4b37108;
}
.scene-switch-btn {
  clip-path: none; border-radius: 14px 3px;
  border: 1px solid #d2af70;
  background: linear-gradient(145deg, #553322f5, #2b1c15f5);
  box-shadow: 0 6px 18px #0004;
}
.scene-switch-btn::before {
  inset: 4px; clip-path: none; border-radius: 10px 1px;
  border-color: #c5a56670;
}
:is(.topic-nav-btn, .topic-nav-status, .main-cave-overview-btn,
    .workshop-step-game-reset, .stone-wall-clear-btn, .tianma-puzzle-reset-footer) {
  border: 1px solid #c9a563; border-radius: 12px 3px;
  box-shadow: inset 0 0 0 3px #231912, inset 0 0 0 4px #d3b37240;
}
.side-tool-text-btn {
  border-color: #d1b276;
  box-shadow: 0 6px 14px #0005, inset 0 0 0 4px #34251b, inset 0 0 0 5px #c7a26060;
}
:is(.scene-switch-btn, .stone-slot, .cave-gallery-item):focus-visible {
  outline: 2px solid #fff0bc; outline-offset: 4px;
}
@media (max-width: 760px), (max-height: 600px) {
  :is(.dual-role-shell, .cave-gallery-panel, .stone-wall-panel,
      .workshop-timer-panel, .workshop-step-game-panel, .tianma-puzzle-shell,
      .video-modal, .cover-modal) {
    border-width: 24px; border-image-width: 24px; border-radius: 5px;
  }
  :is(.video-modal video, .cover-modal img) {
    max-width: calc(96vw - 56px); max-height: calc(94vh - 56px);
  }
}

/* Mineral-pigment palette shared by the teacher course UI. */
:is(.dual-role-shell, .cave-gallery-panel, .stone-wall-panel,
    .workshop-timer-panel, .workshop-step-game-panel, .tianma-puzzle-shell) {
  background: radial-gradient(ellipse at 0% 0%, #46645a24, transparent 55%),
              linear-gradient(150deg, #352b24fa, #201d18fc);
  box-shadow: 0 22px 60px #0007;
}
:is(.scene-switch-btn, .dual-role-btn, .main-cave-overview-btn,
    .workshop-step-game-reset, .stone-wall-clear-btn, .tianma-puzzle-reset-footer) {
  color: #f0dfb7; background: linear-gradient(140deg, #375751f5, #263e39fa);
  border-color: #c3a776; border-radius: 6px;
  text-shadow: none;
  box-shadow: inset 0 0 0 3px #263e39, inset 0 0 0 4px #c3a77655, 0 4px 12px #0003;
}
.scene-switch-btn::before { border-radius: 2px; border-color: #c3a77655; }
.scene-switch-btn[aria-pressed="true"], .dual-role-btn[aria-pressed="true"] {
  background: #824c39; color: #fff0cc; box-shadow: inset 0 0 0 3px #824c39, inset 0 0 0 4px #d5bd8d66;
}
:is(.cave-gallery-title, .stone-wall-title, .workshop-step-game-title,
    .tianma-puzzle-board-title, .workshop-timer-title) {
  color: #e7d0a1; text-shadow: none; letter-spacing: .14em;
  font-family: "STKaiti", "KaiTi", "Songti SC", "Noto Serif SC", serif;
}
:is(.stone-slot, .cave-gallery-item) { border-color: #ae956b; border-radius: 6px; }
:is(.stone-slot, .cave-gallery-item)::after {
  border-radius: 3px; border-color: #cab38370; background: none;
  box-shadow: inset 0 0 0 2px #31554c40;
}
:is(.stone-slot-label, .stone-slot-tip) {
  background: #284a43ed; border-color: #c7ad7b90; color: #f1dfba; border-radius: 3px;
}
.tianma-puzzle-hint {
  border: 0; border-left: 2px solid #be9b62; border-radius: 0;
  background: #8f735b10; color: #ded1b8;
}
.tianma-puzzle-hint.is-success { color: #d0e1c6; border-color: #86a17c; }
:is(.topic-nav-btn, .topic-nav-status) {
  background: #332b22ee; border-color: #c1a576; border-radius: 6px; color: #ecdbb6;
}
:is(.video-close, .cave-gallery-close, .workshop-timer-close,
    .workshop-step-game-close, .tianma-puzzle-close) {
  border-color: #c1a576; color: #ead9b2; background: #45372cf5;
  box-shadow: none;
}
/* Remaining teaching controls share the same quiet mineral palette. */
:is(.workshop-timer-btn, .workshop-step-btn, .workshop-video-btn,
    .cave-chat-btn, .stone-quick-btn, .login-submit-btn) {
  color: #f0dfb7; background: linear-gradient(140deg, #375751f5, #263e39fa);
  border: 1px solid #c3a776; border-radius: 6px; text-shadow: none;
  box-shadow: inset 0 0 0 3px #263e39, inset 0 0 0 4px #c3a77655;
}
:is(.workshop-timer-value, .workshop-step-game-col-title) { color: #ecd7ab; text-shadow: none; }
.cave-chat-voice-shell {
  border: 20px solid transparent;
  border-image: url('../assets/dunhuang-frame-v2.svg') 80 / 20px / 0 round;
  border-radius: 5px; background: #302b23fa; box-shadow: 0 20px 50px #0006;
  padding: 14px;
}
.cave-chat-avatar-wrap { border-color: #bba176; background: #3f3b2a; box-shadow: none; }
.cave-chat-status { color: #496b63; }
.cave-chat-status.error { color: #a54532; }
.login-shell {
  --paper: #eee0c4; --paper-soft: #f4e9d3; --line: #c8ad7b;
  --line-deep: #a38355; --title: #694a34; --sub: #42685e;
  border: 22px solid transparent;
  border-image: url('../assets/dunhuang-frame-v2.svg') 80 / 22px / 0 round;
  border-radius: 5px; box-sizing: border-box; padding: 18px;
}
.login-shell::before { content: none; }
.login-title { color: #74503b; text-shadow: none; }
.student-id-btn { border-color: #c4ac82; border-radius: 5px; }
.student-id-btn.selected { background: #3d6257; color: #f8e8be; border-color: #3d6257; }
:is(.side-tool-btn, .cave-chat-btn, .workshop-timer-btn, .workshop-step-btn,
    .workshop-video-btn, .login-submit-btn, .student-id-btn):focus-visible {
  outline: 2px solid #d5b57c; outline-offset: 3px;
}
/* Replace the bright blue bitmap controls with the same warm line icon family. */
#musicToggleBtn, :is(#fullscreenToggleBtn, #leftFullscreenBtn) {
  position: relative; border: 1px solid #c1a576; background: #302b23ed;
  box-shadow: inset 0 0 0 4px #302b23, inset 0 0 0 5px #c1a57660;
}
#musicToggleBtn img, :is(#fullscreenToggleBtn, #leftFullscreenBtn) img { opacity: 0; }
#musicToggleBtn::before {
  content: '♪'; position: absolute; inset: 0; display: grid; place-items: center;
  font: 30px/1 Georgia, serif; color: #ead8ac; pointer-events: none;
}
#musicToggleBtn.is-muted::after {
  content: ''; position: absolute; width: 28px; height: 1px; background: #ead8ac;
  left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-45deg); pointer-events: none;
}
:is(#fullscreenToggleBtn, #leftFullscreenBtn)::before {
  content: ''; position: absolute; inset: 17px; pointer-events: none;
  background: linear-gradient(#ead8ac,#ead8ac) left top/7px 2px,
    linear-gradient(#ead8ac,#ead8ac) left top/2px 7px,
    linear-gradient(#ead8ac,#ead8ac) right top/7px 2px,
    linear-gradient(#ead8ac,#ead8ac) right top/2px 7px,
    linear-gradient(#ead8ac,#ead8ac) left bottom/7px 2px,
    linear-gradient(#ead8ac,#ead8ac) left bottom/2px 7px,
    linear-gradient(#ead8ac,#ead8ac) right bottom/7px 2px,
    linear-gradient(#ead8ac,#ead8ac) right bottom/2px 7px;
  background-repeat: no-repeat;
}