/* 恐龍跑酷專用樣式 */
@media (min-width: 781px) {
  /* 桌機：遊戲卡片比內文欄寬，隨視窗放大到 1500px 上限（置中） */
  .dg-tool { width: min(94vw, 1500px); margin-left: calc(50% - min(47vw, 750px)); box-sizing: border-box; }
}
.dg-info { margin: 6px 0; text-align: center; font-size: 1.05rem; }
.dg-info strong { color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.dg-wrap { position: relative; }
.dg-main { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "stage stage" "duck jump"; gap: 8px; }
.dg-stage {
  grid-area: stage; position: relative; overflow: hidden; outline: none;
  border: 3px solid var(--brand-dark); border-radius: 14px; background: #8fd3ff;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.dg-stage.playing { touch-action: none; }
.dg-stage:focus-visible { box-shadow: 0 0 0 3px #9fb8f6; }
.dg-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.dg-overlay { position: absolute; inset: 0; display: flex; background: rgba(14, 20, 50, .22); padding: 8px; overflow-y: auto; }
.dg-card { margin: auto; background: #fff; color: #1b2440; border-radius: 16px; padding: 14px 20px; text-align: center; max-width: 560px; width: 100%; box-sizing: border-box; box-shadow: 0 6px 24px rgba(10, 16, 48, .35); }
.dg-card h2 { margin: 0 0 4px; font-size: 1.5rem; color: var(--brand-dark); }
.dg-card p { margin: 0 0 10px; font-size: 1.02rem; }
.dg-card .btn { min-height: 52px; min-width: 140px; font-size: 1.1rem; }
.dg-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dg-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }
.dg-mode {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 4px;
  border: 3px solid var(--line, #d5dbea); border-radius: 12px; background: #f5f7ff; color: var(--brand-dark); font: inherit; cursor: pointer; touch-action: manipulation;
}
.dg-mode strong { font-size: 1.05rem; }
.dg-mode span { font-size: .82rem; color: #4a5578; }
.dg-mode[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.dg-mode[aria-pressed="true"] span { color: #dbe6ff; }
.dg-card p.dg-modedesc { font-size: .95rem; min-height: 2.6em; margin: 4px 0 8px; color: #33406a; }
.dg-mp { text-align: left; }
.dg-mp-row { display: flex; gap: 6px; margin-bottom: 6px; }
.dg-mp-row input { flex: 1; min-width: 0; min-height: 44px; font-size: 1.05rem; padding: 0 10px; border: 2px solid #b9c4e4; border-radius: 10px; }
.dg-mp-row .btn { min-width: 44px; min-height: 44px; padding: 0; }
.dg-mp-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.dg-card .dg-mp-tools .btn { min-height: 44px; min-width: 0; font-size: 1rem; }
.dg-mp-rounds { display: inline-flex; gap: 6px; align-items: center; font-size: 1rem; }
.dg-mp-rounds select { min-height: 44px; font-size: 1rem; }
.dg-card p.dg-mp-err { min-height: 1.4em; margin: 4px 0 8px; color: #b42318; font-size: .95rem; }
.dg-rank { list-style: none; margin: 6px 0 12px; padding: 0; text-align: left; }
.dg-rank li { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: baseline; gap: 6px; padding: 6px 4px; border-bottom: 1px solid #e3e8f6; font-size: 1.1rem; }
.dg-rank li.first { background: #fff6d6; border-radius: 8px; font-weight: 800; }
.dg-rank .rk { text-align: center; }
.dg-rank .nm { overflow-wrap: anywhere; }
.dg-rank .sc { font-variant-numeric: tabular-nums; }
.dg-rank small { grid-column: 2 / 4; color: #55608a; font-size: .85rem; font-weight: 400; }
.dg-pad {
  grid-area: duck; display: flex; align-items: center; justify-content: center; min-height: 84px;
  border: 3px solid var(--brand-dark); border-radius: 16px; background: #e8efff; color: var(--brand-dark);
  font-size: 1.7rem; font-weight: 800; letter-spacing: .15em; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.dg-pad-jump { grid-area: jump; background: var(--brand); color: #fff; border-color: var(--brand-dark); }
.dg-pad.on { transform: scale(.97); filter: brightness(.9); }
.dg-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 4px; }
.dg-bar .btn { min-height: 46px; }
@media (max-width: 520px) {
  .dg-overlay { padding: 6px; }
  .dg-card { padding: 10px 12px; }
  .dg-card h2 { font-size: 1.25rem; }
  .dg-card p { font-size: .92rem; margin-bottom: 6px; }
  .dg-card .btn { min-height: 46px; min-width: 120px; }
  .dg-mode { min-height: 56px; }
  .dg-mode strong { font-size: .98rem; }
  .dg-mode span { display: none; }
  .dg-card p.dg-modedesc { font-size: .88rem; min-height: 2.4em; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* 手機橫向：蹲、跳按鈕放在畫面兩側，拇指好按 */
  .dg-main { grid-template-columns: 92px 1fr 92px; grid-template-areas: "duck stage jump"; }
  .dg-pad { min-height: 0; height: 100%; font-size: 1.5rem; }
  .dg-overlay { padding: 4px; }
  .dg-card { padding: 6px 12px; }
  .dg-card h2 { font-size: 1.1rem; margin: 0; }
  .dg-card p { font-size: .85rem; margin-bottom: 4px; }
  .dg-card .btn { min-height: 40px; }
  .dg-mode { min-height: 46px; }
  .dg-mode span { display: none; }
  .dg-mode strong { font-size: .92rem; }
  .dg-card p.dg-modedesc { font-size: .8rem; min-height: 0; margin: 2px 0 4px; }
  .dg-rank li { padding: 3px 4px; font-size: .95rem; }
}
@media (hover: hover) and (pointer: fine) {
  /* 有滑鼠的電腦：不顯示觸控大按鈕 */
  .dg-main { grid-template-columns: 1fr; grid-template-areas: "stage"; }
  .dg-pad { display: none; }
}
/* 全螢幕：遊戲區撐滿，按鈕列留在下方 */
.dg-wrap:fullscreen { display: flex; flex-direction: column; background: #0f1630; padding: 8px; box-sizing: border-box; width: 100%; height: 100%; }
.dg-wrap:fullscreen .dg-main { flex: 1 1 auto; min-height: 0; }
.dg-wrap:fullscreen .dg-stage { height: auto; }
.dg-wrap:-webkit-full-screen { display: flex; flex-direction: column; background: #0f1630; padding: 8px; box-sizing: border-box; width: 100%; height: 100%; }
.dg-wrap:-webkit-full-screen .dg-main { flex: 1 1 auto; min-height: 0; }
.dg-wrap:-webkit-full-screen .dg-stage { height: auto; }
.dg-wrap:fullscreen .dg-bar { margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .dg-pad.on { transform: none; } }
.dg-wrap:fullscreen .dg-main, .dg-wrap:-webkit-full-screen .dg-main { grid-template-rows: minmax(0, 1fr) auto; }
@media (orientation: landscape) and (max-height: 520px) {
  .dg-wrap:fullscreen .dg-main, .dg-wrap:-webkit-full-screen .dg-main { grid-template-rows: minmax(0, 1fr); }
}
@media (hover: hover) and (pointer: fine) {
  .dg-wrap:fullscreen .dg-main, .dg-wrap:-webkit-full-screen .dg-main { grid-template-rows: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .dg-stage[data-v="menu"] #dg-ov-text { display: none; }
  .dg-stage[data-v="menu"] .dg-card p.dg-modedesc { min-height: 0; }
}