/* estate-theme.css -- GABE GameWorks house theme override for the
   self-hosted Blockly Games bundle (Maze / Turtle / Bird).

   NOT part of the vendored Blockly Games release -- this is a new file,
   added on top, documented in ../NOTICE.md (GAP 5, 2026-07-17). It never
   touches a single upstream .js file, block definition, level, or puzzle
   rule; it only re-skins the surrounding chrome (page background, the
   toolbox/flyout panel, scrollbars, dialogs, and stock Google buttons)
   from Blockly Games' default white/grey/red/blue look to the estate's
   navy #06101F / gold #C9A84C-#FFD56B palette, so the puzzle panel reads
   as part of GABE GameWorks instead of a bare white plugin bolted on.

   Block colours/shapes inside the workspace are deliberately left alone
   -- that's Blockly's own pedagogical colour-coding (move blocks orange,
   logic blocks blue, etc.), not "chrome", and re-theming it would fight
   the puzzle's own visual language for no benefit to Gabriel.

   Loaded via a single extra <link> line added to maze.html / turtle.html /
   bird.html, placed AFTER their own stylesheets so it wins ties in the
   static cascade; !important is used on the handful of rules that fight
   Blockly's own runtime-injected <style> tag (Blockly.Css.inject() runs
   after these files are already parsed, so its rules can land later in
   source order -- !important keeps the estate look from flickering back
   to white on any given puzzle load). */

:root {
  --gw-navy: #06101F;
  --gw-navy-2: #0A1830;
  --gw-navy-3: #0F2244;
  --gw-gold: #C9A84C;
  --gw-gold-hot: #FFD56B;
  --gw-cream: #F3EFE6;
  --gw-text-dim: #93A0C2;
}

html, body {
  background-color: var(--gw-navy) !important;
  color: var(--gw-cream);
}

h1, h1 a { color: var(--gw-cream); }
a { color: var(--gw-gold-hot); }
a:hover { color: var(--gw-gold-hot); }

/* ---------- level chips (the row of level-number pills above each puzzle) ---------- */
.level_number, .level_dot {
  border-color: rgba(201,168,76,0.35) !important;
  color: var(--gw-text-dim) !important;
  background-color: rgba(10,24,48,0.6) !important;
}
.level_done, .level_dot:hover, .level_number:hover {
  background-color: var(--gw-gold) !important;
  border-color: var(--gw-gold) !important;
  color: var(--gw-navy) !important;
}

/* ---------- stock Google buttons -> estate pill treatment ---------- */
button {
  background-color: var(--gw-navy-2) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: var(--gw-cream) !important;
  border-radius: 999px !important;
}
button.primary {
  background-color: var(--gw-gold) !important;
  border-color: var(--gw-gold) !important;
  color: var(--gw-navy) !important;
  font-weight: 700;
}
button.secondary {
  background-color: var(--gw-navy-3) !important;
  border-color: var(--gw-gold-hot) !important;
  color: var(--gw-gold-hot) !important;
}
button:hover:not(:disabled) { box-shadow: 0 0 14px rgba(201,168,76,0.35) !important; }

/* ---------- code-preview panel ---------- */
#containerCode {
  background-color: var(--gw-navy-2) !important;
  color: var(--gw-cream) !important;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
}

/* ---------- dialogs (the level-complete "OK" popup etc.) ---------- */
#dialog, #dialogBorder {
  background-color: var(--gw-navy-2) !important;
  color: var(--gw-cream) !important;
  border: 1px solid rgba(201,168,76,0.4) !important;
}
#dialogHeader { background-color: var(--gw-navy-3) !important; }
#dialogShadow { background-color: #000 !important; opacity: 0.55 !important; }

/* ==================================================================
   Blockly core chrome (standard Blockly class names injected at
   runtime by Blockly.Css.inject() -- workspace bg / toolbox / flyout /
   scrollbars only; block colours untouched). !important guards against
   the runtime <style> tag landing after this stylesheet.
   ================================================================== */
.blocklyMainBackground {
  fill: var(--gw-navy-2) !important;
  stroke: rgba(255,255,255,0.08) !important;
}
.blocklyToolboxDiv {
  background-color: var(--gw-navy) !important;
  color: var(--gw-cream) !important;
  border-right: 1px solid rgba(201,168,76,0.25);
}
.blocklyTreeRow {
  color: var(--gw-cream) !important;
}
.blocklyTreeRow:hover, .blocklyTreeSelected {
  background-color: rgba(201,168,76,0.16) !important;
}
.blocklyTreeLabel { color: inherit !important; }
.blocklyFlyoutBackground {
  fill: var(--gw-navy-3) !important;
  fill-opacity: 0.97 !important;
}
.blocklyScrollbarBg { fill: var(--gw-navy-2) !important; }
.blocklyScrollbarHandle {
  fill: var(--gw-gold) !important;
  fill-opacity: 0.6 !important;
}
.blocklyScrollbarHandle:hover { fill-opacity: 0.85 !important; }
.blocklyWidgetDiv, .blocklyTooltipDiv {
  background-color: var(--gw-navy-2) !important;
  color: var(--gw-cream) !important;
}