/* Deep Digger: the canvas fills the stage; HUD, blast button, arrows and menus are HTML over it */
.dd { display: flex; flex-direction: column; color: #dfe9ff; --dd-hud: 48px; }
.dd-stage { position: relative; width: 100%; height: min(78vh, 680px); min-height: 380px; background: #04060f; overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
@media (max-width: 600px) { .dd-stage { height: auto; aspect-ratio: 3 / 4.5; max-height: 78vh; min-height: 0; } }
#dd-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* HUD */
.dd-hud { position: absolute; left: 0; right: 0; top: 0; height: var(--dd-hud); display: flex; align-items: center; gap: 14px; padding: 0 8px 0 12px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,6,15,0.82), rgba(4,6,15,0.5) 70%, rgba(4,6,15,0)); }
.dd-hud > * { pointer-events: auto; }
.dd-stat { display: flex; flex-direction: column; line-height: 1.05; min-width: 50px; }
.dd-k { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8aa3c4; }
.dd-stat b { font-size: 20px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
#dd-depth { color: #ffd166; }
.dd-hearts { display: flex; gap: 3px; align-items: center; }
.dd-hearts svg { width: 19px; height: 19px; display: block; filter: drop-shadow(0 0 5px rgba(255,107,129,0.55)); transition: transform .2s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.dd-hearts svg.dd-lost { opacity: 0.22; filter: none; transform: scale(.82); }
.dd-hearts svg.dd-shielded { filter: drop-shadow(0 0 6px rgba(85,214,255,0.95)); }
.dd-sp { flex: 1 1 auto; }
.dd-tool { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid #1c2b4a; background: rgba(11,19,40,0.82);
  color: #bfe0ff; cursor: pointer; touch-action: manipulation; padding: 0; transition: border-color .15s, color .15s, opacity .15s; }
.dd-tool svg { width: 19px; height: 19px; }
@media (hover: hover) { .dd-tool:hover:not(:disabled) { border-color: #55d6ff; color: #fff; } }
.dd-tool:focus-visible { outline: 2px solid #55d6ff; outline-offset: 2px; }
.dd-tool:disabled { opacity: 0.35; cursor: default; }
#dd-pause .dd-pl { display: none; } #dd-pause.is-paused .dd-pl { display: inline; } #dd-pause.is-paused .dd-pz { display: none; }
#dd-sound .dd-off { display: none; } #dd-sound[aria-pressed="true"] { color: #6f84a3; } #dd-sound[aria-pressed="true"] .dd-on { display: none; } #dd-sound[aria-pressed="true"] .dd-off { display: inline; }
#dd-pad-btn[aria-pressed="true"] { color: #04121a; background: #55d6ff; border-color: #55d6ff; }

/* blast button */
.dd-blast[hidden] { display: none; }
.dd-blast { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 68px; height: 68px; border-radius: 50%; border: 2px solid rgba(255,107,129,0.75); padding: 0;
  background: radial-gradient(circle at 35% 30%, rgba(60,20,34,0.92), rgba(18,8,18,0.9)); color: #ff6b81; cursor: pointer; touch-action: manipulation; display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 18px rgba(255,107,129,0.25); transition: transform .08s, opacity .2s, border-color .2s; }
.dd-blast svg { width: 36px; height: 36px; grid-area: 1 / 1; }
.dd-blast b { grid-area: 1 / 1; margin: 9px 6px 0 0; font-size: 15px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; }
.dd-blast .dd-key { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #dfe9ff;
  background: #0b1328; border: 1px solid #1c2b4a; border-radius: 6px; padding: 1px 6px; pointer-events: none; }
@media (hover: none) and (pointer: coarse) { .dd-blast .dd-key { display: none; } }
.dd-blast:active, .dd-blast.is-down { transform: scale(.92); }
.dd-blast.is-empty { opacity: 0.45; border-color: #3a2a3a; color: #7a5a68; box-shadow: none; }
.dd-blast:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* on-screen arrows (optional) */
.dd-dpad[hidden] { display: none; }
.dd-dpad { position: absolute; left: 10px; bottom: 10px; width: 156px; height: 156px; z-index: 2; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 4px; touch-action: none; }
.dd-dp { border: 1px solid rgba(85,214,255,0.4); background: rgba(11,19,40,0.74); color: #bff3ff; border-radius: 15px; display: grid; place-items: center; padding: 0;
  cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; transition: background .08s, transform .08s, border-color .08s; }
.dd-dp svg { width: 46%; height: 46%; }
.dd-dp.is-down { background: rgba(85,214,255,0.34); border-color: #55d6ff; transform: scale(.94); }
.dd-dp:focus-visible { outline: 2px solid #55d6ff; outline-offset: 1px; }
.dd-dp-up { grid-area: 1 / 2; } .dd-dp-left { grid-area: 2 / 1; } .dd-dp-right { grid-area: 2 / 3; } .dd-dp-down { grid-area: 3 / 2; }

/* menus */
.dd-overlay[hidden] { display: none; }
.dd-overlay { position: absolute; left: 0; right: 0; bottom: 0; top: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--dd-hud) + 4px) 12px 12px;
  background: radial-gradient(ellipse at center, rgba(3,6,16,0.4), rgba(3,5,12,0.82)); z-index: 4; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.dd-overlay.dd-ov-title { background: radial-gradient(ellipse at center, rgba(3,6,16,0.15), rgba(3,5,12,0.6)); }
.dd-panel { width: min(100%, 372px); margin: auto; text-align: center; padding: 20px 20px 18px; border: 1px solid #1c2b4a; border-radius: 18px;
  background: rgba(8,13,30,0.9); box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(85,214,255,0.06) inset; animation: dd-in .28s cubic-bezier(.2,.9,.25,1.1); }
.dd-panel.dd-wide { width: min(100%, 470px); }
@keyframes dd-in { from { opacity: 0; transform: scale(.94) translateY(8px); } }
.dd-logo { margin: 0 0 4px; font-size: clamp(30px, 8.5vw, 40px); font-weight: 900; letter-spacing: 0.03em; line-height: 1.05;
  background: linear-gradient(90deg, #ffd166, #ff9a3d 35%, #ff6b81 65%, #c88bff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(255,154,61,0.35)); }
.dd-tag { margin: 0 0 14px; color: #8aa3c4; font-size: 13.5px; line-height: 1.45; }
.dd-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; border-radius: 13px; background: #050a18; border: 1px solid #1c2b4a; margin: 0 0 8px; }
.dd-mode { font: inherit; font-size: 13.5px; font-weight: 700; color: #8aa3c4; background: transparent; border: 0; border-radius: 9px; min-height: 40px; cursor: pointer; touch-action: manipulation; transition: background .15s, color .15s; }
.dd-mode[aria-checked="true"] { background: #13234a; color: #fff; box-shadow: inset 0 0 0 1px rgba(85,214,255,0.45), 0 0 16px rgba(85,214,255,0.18); }
@media (hover: hover) { .dd-mode:hover { color: #fff; } }
.dd-mode:focus-visible { outline: 2px solid #55d6ff; outline-offset: 1px; }
.dd-desc { margin: 0 0 10px; font-size: 12.5px; color: #8aa3c4; min-height: 2.8em; line-height: 1.4; }
.dd-best { margin: 0 0 14px; font-size: 12.5px; color: #8aa3c4; } .dd-best b { color: #ffd166; font-variant-numeric: tabular-nums; }
.dd-actions { display: flex; flex-direction: column; gap: 8px; }
.dd-row { display: flex; gap: 8px; } .dd-row > * { flex: 1 1 0; min-width: 0; }
.dd-btn { font: inherit; font-weight: 700; font-size: 14.5px; padding: 11px 14px; min-height: 46px; border-radius: 12px; cursor: pointer; touch-action: manipulation;
  border: 1px solid #1c2b4a; background: #0b1328; color: #dfe9ff; transition: background .15s, border-color .15s, transform .1s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
@media (hover: hover) { .dd-btn:hover { border-color: #55d6ff; } }
.dd-btn:active { transform: translateY(1px); }
.dd-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dd-btn svg { width: 17px; height: 17px; flex: none; }
.dd-btn-primary { background: linear-gradient(135deg, #ffd166, #ff9a3d); color: #2a1300; border-color: transparent; font-size: 17px; font-weight: 900; min-height: 52px; box-shadow: 0 6px 24px rgba(255,154,61,0.35); }
@media (hover: hover) { .dd-btn-primary:hover { border-color: transparent; filter: brightness(1.08); } }
.dd-keys { margin: 12px 0 0; font-size: 11.5px; color: #6f84a3; }
.dd-head { margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ff9a8a; }
.dd-head.dd-cool { color: #8aa3c4; }
.dd-score { margin: 0; font-size: 50px; font-weight: 900; color: #fff; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(255,154,61,0.45); }
.dd-sub { margin: 2px 0 0; font-size: 12.5px; color: #8aa3c4; } .dd-sub b { color: #ffd166; font-variant-numeric: tabular-nums; }
.dd-newbest { display: inline-block; margin: 6px 0 2px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
  color: #1a1200; background: linear-gradient(90deg, #ffd166, #fff1b8, #ffd166); background-size: 200% 100%; animation: dd-shine 1.6s linear infinite; box-shadow: 0 0 22px rgba(255,209,102,0.55); }
@keyframes dd-shine { to { background-position: -200% 0; } }
.dd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 12px; }
.dd-stats div { padding: 7px 2px; border-radius: 10px; background: #050a18; border: 1px solid #16223d; min-width: 0; }
.dd-stats span { display: block; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6f84a3; font-weight: 700; white-space: nowrap; }
.dd-stats b { display: block; margin-top: 2px; font-size: 16px; color: #dfe9ff; font-variant-numeric: tabular-nums; }
.dd-stats .dd-gold b { color: #ffd166; }
.dd-earned { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 14px; }
.dd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 999px; background: #0d1a36; border: 1px solid #23406e; font-size: 12px; font-weight: 700; color: #dfe9ff; }
.dd-chip canvas { width: 22px; height: 22px; display: block; }
.dd-chip.dd-feat { padding-left: 10px; border-color: #5a4a1f; background: #1d1708; color: #ffd166; }
.dd-chip.dd-new { border-color: #ffd166; box-shadow: 0 0 12px rgba(255,209,102,0.35); }

/* how to play + collection */
.dd-how { text-align: left; margin: 10px 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.dd-how li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; font-size: 13px; line-height: 1.4; color: #c5d4ee; }
.dd-how canvas { width: 34px; height: 34px; display: block; }
.dd-how b { color: #fff; }
.dd-h2 { margin: 0 0 2px; font-size: 20px; font-weight: 900; color: #fff; }
.dd-h3 { margin: 14px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #8aa3c4; text-align: left; }
.dd-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.dd-slot { position: relative; aspect-ratio: 1; border-radius: 11px; border: 1px solid #16223d; background: #050a18; padding: 0; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; min-width: 0; }
.dd-slot canvas { width: 78%; height: 78%; display: block; }
.dd-slot.dd-got { border-color: #2c4a80; background: radial-gradient(circle at 50% 40%, #14264d, #070d1f); }
.dd-slot.dd-r1.dd-got { border-color: #55d6ff; } .dd-slot.dd-r2.dd-got { border-color: #c88bff; } .dd-slot.dd-r3.dd-got { border-color: #ffd166; box-shadow: 0 0 12px rgba(255,209,102,0.3); }
.dd-slot[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 1px; }
.dd-slot:focus-visible { outline: 2px solid #55d6ff; outline-offset: 1px; }
.dd-slot-info { min-height: 2.9em; margin: 8px 0 0; font-size: 12.5px; color: #8aa3c4; line-height: 1.4; } .dd-slot-info b { color: #fff; }
.dd-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; text-align: left; margin: 0 0 14px; }
.dd-feat-row { padding: 6px 9px; border-radius: 10px; border: 1px solid #16223d; background: #050a18; font-size: 11.5px; line-height: 1.3; color: #6f84a3; }
.dd-feat-row b { display: block; font-size: 12.5px; color: #8aa3c4; }
.dd-feat-row.dd-got { border-color: #5a4a1f; background: #171205; color: #c9b47a; } .dd-feat-row.dd-got b { color: #ffd166; }

.dd-toast[hidden] { display: none; }
.dd-toast { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6; padding: 8px 14px; border-radius: 999px; background: #dfe9ff; color: #04060f; font-size: 13px; font-weight: 700; animation: dd-in .2s ease-out; pointer-events: none; white-space: nowrap; }
.dd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* short stages (phone sideways): tighter menus */
.dd-short .dd-panel { padding: 12px 16px 12px; width: min(100%, 470px); }
.dd-short .dd-logo { font-size: 26px; }
.dd-short .dd-tag, .dd-short .dd-keys { display: none; }
.dd-short .dd-desc { min-height: 0; margin-bottom: 6px; } .dd-short .dd-best { margin-bottom: 8px; }
.dd-short .dd-score { font-size: 36px; }
.dd-short .dd-stats { margin: 6px 0 8px; } .dd-short .dd-stats div { padding: 4px 2px; }
.dd-short .dd-earned { margin-bottom: 8px; }
.dd-short .dd-btn { min-height: 42px; padding: 8px 12px; }
.dd-short .dd-actions.dd-flat { flex-direction: row; } .dd-short .dd-actions.dd-flat > * { flex: 1 1 0; }
.dd-short .dd-blast { width: 58px; height: 58px; } .dd-short .dd-dpad { width: 132px; height: 132px; }

.dd-help { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; }
.dd-help .dd-hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .dd-help .dd-hint-kb { display: none; } .dd-help .dd-hint-touch { display: inline; } }
.stage .dd-help { padding: 10px 14px 12px; }
@media (max-width: 400px) { .dd-hud { gap: 9px; padding-left: 10px; } .dd-stat b { font-size: 18px; } .dd-stat { min-width: 44px; } .dd-hearts svg { width: 17px; height: 17px; } .dd-grid { gap: 5px; } }

/* full screen: the dig takes every pixel */
.stage.is-immersive .stage-body > .dd { min-height: 0; }
.stage.is-immersive .dd-stage { flex: 1 1 auto; height: auto; aspect-ratio: auto; max-height: none; min-height: 0; }
.stage.is-immersive .dd-help { display: none; }
@media (prefers-reduced-motion: reduce) { .dd-panel, .dd-toast, .dd-newbest { animation: none; } .dd-hearts svg, .dd-blast { transition: none; } }