/* The Azeroth look: gold on dark brown over the pixel cutaway drawn by azeroth.js. Loaded after styles.css,
   so these override its values. */
:root {
  --cyan: #e8b95a;              /* gold: the main accent */
  --pink: #e0513f;              /* Horde red: score, warnings, the current pip */
  --ink: #f6ecd8;
  --dim: #bfab8a;
  --panel: rgba(28, 18, 11, 0.9);
  --panel-edge: rgba(232, 185, 90, 0.38);
  --landmark: #ffb14a;
  /* Answer tiers use WoW item-quality colours: Poor, Common, Uncommon, Rare, Epic, Legendary */
  --t-plankton: #b4b4b4;
  --t-tooClever: #ffffff;
  --t-schooler: #3dff2a;
  --t-rare: #4aa6ff;
  --t-deepCut: #c673ff;
  --t-gem: #ff8c1a;
}
body { background: #0d0805; }

/* The canvas is the whole backdrop. */
.az-canvas { position: fixed; inset: 0; z-index: 3; width: 100%; height: 100%; display: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.az-canvas.on { display: block; }
.az-mates { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.az-mate {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap; padding: 1px 6px;
  font-family: var(--pixel); font-size: 10px; line-height: 16px; color: var(--c); background: rgba(14, 8, 4, 0.88); border: 1px solid var(--c);
}
.stage { padding-right: 16px; }
@media (max-width: 520px) { .stage { padding-right: 12px; } }

/* Panels, buttons and inputs: brown and gold instead of navy and cyan */
.hud-box, .howto, .big-btn, .ghost-btn, .prompt-card, .modes button, .pip, .timer-bg { background-color: rgba(28, 18, 11, 0.92); }
.pip { border-color: rgba(232, 185, 90, 0.35); }
.big-btn { background: rgba(28, 18, 11, 0.94); box-shadow: 0 4px 0 #0c0603, inset 0 0 12px rgba(232, 185, 90, 0.15); }
.big-btn:hover, .big-btn:focus-visible { background: #3a2412; }
.big-btn.alt { box-shadow: 0 4px 0 #0c0603, inset 0 0 10px rgba(224, 81, 63, 0.18); }
.big-btn.dig-btn { border-color: #e8913a; box-shadow: 0 4px 0 #0c0603, inset 0 0 10px rgba(232, 145, 58, 0.18); }
#mpBtn { border: 3px solid; border-image: linear-gradient(90deg, #c0463a 50%, #4a86c8 50%) 1; box-shadow: 0 4px 0 #0c0603; }
.howto { box-shadow: 0 4px 0 rgba(10, 5, 2, 0.5); }
.answer-bar { background: linear-gradient(transparent, rgba(12, 7, 3, 0.92) 30%); }
.timer-bg { fill: rgba(28, 18, 11, 0.92); stroke: rgba(232, 185, 90, 0.18); background: none; }
#answerInput, .mp-card input, .field input, #pwDialog input { background: rgba(14, 8, 4, 0.94); }
.mp-card input, .field input, #pwDialog input { border-color: rgba(232, 185, 90, 0.45); }
#pwDialog { background: #1c120a; }
.small-btn, .dive-btn { box-shadow: 0 3px 0 #8a2418; color: #1a0603; }
.board li.me, .standings li.me { border-color: rgba(232, 185, 90, 0.4); }
.end-depth { text-shadow: 0 0 18px rgba(232, 185, 90, 0.4); }
.dig-bar { background: linear-gradient(90deg, #6b4a2c 0 6%, #7b5a44 6% 20%, #5a4a52 20% 40%, #3a2d55 40% 60%, #5a2a8a 60% 80%, #e2540f 80% 94%, #ffe27a 94%); }

/* Logo: Alliance blue and Horde red either side */
.logo { color: #fff4d6; text-shadow: -3px 0 0 #b3261e, 3px 0 0 #3f78bd, 0 4px 0 #1a0f08; }
#screenTitle .logo { font-size: clamp(30px, 8vw, 56px); white-space: nowrap; }
.subtitle { color: var(--cyan); text-shadow: 0 2px 0 #1a0f08; }
.tagline { color: #fff4d6; text-shadow: 0 2px 0 #1a0f08, 0 0 8px rgba(20, 10, 4, 0.8); }
.stats, .dive-num { color: #f3dcae; text-shadow: 0 2px 0 #1a0f08; }

/* The miner digs on the canvas, so the result icon just pops in when the tunnel arrives. */
body .sinking .result-icon, body.dig .sinking .result-icon { animation: none; opacity: 0; }

/* The two modes share one theme now, so the dig screen needs no palette of its own. */
body.dig { --cyan: #e8b95a; --pink: #e0513f; --ink: #f6ecd8; --dim: #bfab8a; --panel: rgba(28, 18, 11, 0.9); --panel-edge: rgba(232, 185, 90, 0.38); --landmark: #ffb14a; }
body.dig .big-btn { background: rgba(28, 18, 11, 0.94); box-shadow: 0 4px 0 #0c0603, inset 0 0 12px rgba(232, 185, 90, 0.15); }
body.dig .big-btn.alt { box-shadow: 0 4px 0 #0c0603, inset 0 0 10px rgba(224, 81, 63, 0.18); }
body.dig .dive-btn, body.dig .small-btn { color: #1a0603; }

/* Screens that have no frame of their own get one, so their text reads against the bright scene. */
#screenEnd, #screenMp, #screenLobby, #screenBoard, #screenFinal {
  background: rgba(20, 12, 7, 0.84); border: 1px solid var(--panel-edge); padding: 20px 16px; box-shadow: 0 4px 0 rgba(10, 5, 2, 0.5);
}
#screenResult .result { text-shadow: 0 2px 0 #1a0f08, 0 0 8px rgba(20, 10, 4, 0.9); }