/* The original canvas keeps its size and its engine, including while 3D is loading. */
body.dragon-viewer {
  display: grid; grid-template-columns: minmax(0, 850px) minmax(280px, 360px);
  gap: 24px; align-items: start; justify-content: center; background: #101410;
}
.dragon-viewer #game-area { grid-column: 1; grid-row: 1; min-width: 0; padding: 0; }
.dragon-viewer #menu { grid-column: 2; grid-row: 1; padding: 12px 0; position: static; }
.dragon-viewer .research-callout, .dragon-viewer .dragon-leaderboard,
.dragon-viewer .dragon-seo-content, .dragon-viewer .for-researchers { grid-column: 1 / -1; }
.dragon-viewer .dragon-onboarding-card { border: 0; background: none; padding: 0; border-radius: 0; }
.dragon-candidate .dragon-pvp-card, .dragon-viewer #btn-first-game,
.dragon-viewer .dragon-rate-strip, .dragon-viewer .dragon-onboarding-kicker { display: none; }
.dragon-candidate .candidate-boundary { font-size: 12px; color: #d0b78d; }
.dragon-viewer .dragon-quick-start { background: #d5dfb9; color: #182514; border-radius: 4px; }
.dragon-viewer .dragon-visibility-choice { flex-wrap: wrap; }
.dragon-viewer .dragon-rule-list { margin-top: 12px; }
.dragon-viewer #menu *, .dragon-viewer #game-area * { letter-spacing: 0; }
body.dragon-viewer.game-started { display: flex; flex-direction: column; align-items: center; }
#dragon-board {
  position: relative; flex: none; width: min(84dvh, 82vw, 820px);
  max-width: 100%; aspect-ratio: 1; grid-area: board;
}
#dragon-board > #canvas, #dragon-webgl, #dragon-webgl canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
  border: 0; border-radius: 0; margin: 0; touch-action: none;
}
#dragon-webgl canvas { image-rendering: auto; }
#dragon-board:not([data-view="2d"]) > #canvas { visibility: hidden; pointer-events: none; }
#dragon-webgl canvas { cursor: grab; }
#dragon-webgl canvas:active { cursor: grabbing; }
#dragon-board[data-view="first"] #dragon-webgl canvas { cursor: crosshair; }
#dragon-heading { position: absolute; top: 10px; left: calc(50% - 20px); width: 40px;
  padding: 5px; text-align: center; background: #101a16d9; color: #f2dd91;
  font-size: 14px; border: 1px solid #91a297; pointer-events: none; }
#dragon-view-bar {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  width: min(84dvh, 82vw, 820px); max-width: 100%; min-height: 42px;
  grid-column: 1 / -1; color: #b5cbbd; font-size: 12px; letter-spacing: 0;
}
.dragon-view-modes { display: flex; flex-shrink: 0; border: 1px solid #566359; border-radius: 4px; }
.dragon-view-modes button {
  border: 0; border-radius: 0; padding: 8px 14px; background: #17201b;
  color: #d7e6dc; font: inherit; font-size: 13px; cursor: pointer; letter-spacing: 0;
}
.dragon-view-modes button[aria-pressed="true"] { background: #d8dec9; color: #19251d; }
.dragon-view-modes button:focus-visible { outline: 2px solid #facc15; outline-offset: 3px; }
.dragon-view-modes button:disabled { opacity: .65; cursor: not-allowed; }
#dragon-place-camp { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  min-height: 40px; padding: 8px 18px; border: 1px solid #b5c99d; border-radius: 4px;
  background: #d8dec9; color: #19251d; font-size: 14px; font-weight: 600;
  white-space: nowrap; cursor: pointer; }
#dragon-place-camp[hidden] { display: none; }
#dragon-place-camp:focus-visible { outline: 2px solid #facc15; outline-offset: 2px; }
.dragon-camera-tools { display: flex; gap: 4px; flex-shrink: 0; }
.dragon-camera-tools button { width: 34px; height: 34px; padding: 7px; border: 1px solid #566359;
  border-radius: 4px; background: #17201b; cursor: pointer; }
.dragon-camera-tools img { width: 18px; height: 18px; display: block; filter: invert(1); }
.dragon-camera-tools button[aria-pressed="true"] { background: #d8dec9; }
.dragon-camera-tools button[aria-pressed="true"] img { filter: none; }
.dragon-camera-tools button:disabled { opacity: .4; cursor: default; }
.dragon-camera-tools button:focus-visible { outline: 2px solid #facc15; outline-offset: 2px; }
#dragon-render-status { font-size: 12px; min-height: 18px; max-width: 100%; color: #f6c67d; grid-column: 1 / -1; }
#game-area #proximity-bar { width: 100% !important; max-width: min(84dvh, 82vw, 820px); }
@media (max-width: 700px) {
  #dragon-board, #dragon-view-bar { width: min(94vw, 49dvh, 520px); }
  #dragon-view-bar { gap: 6px; font-size: 10px; }
  .dragon-build { display: none; }
  .dragon-view-modes button { padding: 8px 10px; min-height: 34px; }
}
@media (max-width: 980px) {
  body.dragon-viewer { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .dragon-viewer #menu { padding: 0; max-width: 520px; }
  .dragon-viewer .dragon-onboarding-card { margin: 0; }
  .dragon-viewer #dragon-onboarding-title { font-size: 22px; margin-bottom: 4px; }
  .dragon-viewer .dragon-rule-list, .dragon-viewer .dragon-onboarding-card > p:not(.candidate-boundary) { display: none; }
  .dragon-viewer .dragon-quick-start { margin-top: 6px; }
  .dragon-viewer #advanced-toggle { margin-top: 6px; }
  .dragon-viewer .dragon-visibility-choice { margin: 6px 0; }
}
@media (orientation: landscape) and (max-height: 480px) {
  #dragon-board { width: min(56vw, calc(100dvh - 125px)); }
  body.game-started #game-area { grid-template-areas: "view view" "bar bar" "board pad"; }
  #dragon-view-bar { grid-area: view; width: 100%; min-height: 34px; }
  .dragon-view-modes button { padding: 6px 14px; }
  .dragon-viewer #touch-controls .touch-wide { min-height: 32px; font-size: 12px; padding: 5px; }
  .dragon-build { display: none; }
}