/* =============================================================================
   Block Round — stylesheet
   All Rights Reserved on code. MC textures are Mojang/Microsoft property.

   Single MC theme. No light/dark switch. Surfaces use REAL textures from
   /textures/ (CSS references — base64 data URIs are used only for the
   canvas drawing pipeline via textures.js). All borders 3px wood + 2px
   bedrock outline (offset -3). Every text over a texture REQUIRES a
   text-shadow #1a0e04 — without it, body copy becomes illegible.
   ============================================================================ */

:root{
  --bg:#1a1208;
  --surface:#2a1808;
  --surface-hi:#3a2410;
  --border:#3a2410;
  --border-soft:#2a1808;
  --border-strong:#1a0e04;
  --text:#FFF4D0;
  --text-strong:#FFFFFF;
  --text-muted:#FFE8A8;
  --accent:#FFEC4F;
  --accent-light:#FFF4A0;
  --accent-dim:rgba(255,236,79,.20);
  --on-accent:#1a0e04;
  --track-empty:#1a0e04;
  --radius:0;
  color-scheme:dark;
}

*,*::before,*::after{
  box-sizing:border-box; margin:0; padding:0;
  border-radius:0 !important;  /* Block aesthetic — square everything */
}
html,body{
  height:100dvh; overflow:hidden;
  background:#1a1208 url('textures/dirt.png') center/24px;
  image-rendering:pixelated;
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  touch-action:pan-x pan-y;
}

[hidden]{display:none !important;}

/* ---------- APP SHELL --------------------------------------------------- */
.app{
  width:100%; height:100dvh;
  display:flex; flex-direction:column;
  overflow:hidden;
}

.page{
  flex:1 1 0; min-height:0;
  display:flex; flex-direction:column;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#5a4030 #1a0e04;
}
.page::-webkit-scrollbar{width:10px; height:10px;}
.page::-webkit-scrollbar-track{background:#1a0e04; border-left:2px solid #3a2410;}
.page::-webkit-scrollbar-thumb{background:#5a4030; box-shadow:inset 0 0 0 2px #7a5a40;}
.page::-webkit-scrollbar-thumb:hover{background:#7a5a40;}

.route{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
/* Info + Settings centered with a comfortable max-width */
.route[data-route="info"] .route-pad,
.route[data-route="settings"] .route-pad{
  max-width:720px; margin:0 auto; width:100%;
}
.route-pad{padding:36px 46px; flex:1 1 auto;}
@media (max-width:768px){.route-pad{padding:20px 16px;}}

/* ---------- UNIFIED TOPBAR --------------------------------------------- */
.topbar{
  display:flex; align-items:center; gap:14px;
  padding:10px 18px; flex-shrink:0;
  background:url('textures/oak_planks.png') center/24px;
  border:3px solid #3a2410; outline:2px solid #1a0e04; outline-offset:-3px;
  image-rendering:pixelated;
  flex-wrap:wrap;
}
.topbar .brand{
  display:flex; align-items:center; gap:10px;
  cursor:pointer; user-select:none;
  text-decoration:none; color:inherit;
}
.topbar .brand .mark{flex-shrink:0; image-rendering:pixelated;}
.topbar .brand .title{
  font-family:'Press Start 2P',monospace;
  font-size:15px;
  color:#FFEC4F;
  text-shadow:2px 2px 0 #1a0e04;
  white-space:nowrap;
  letter-spacing:0;
}
.topbar .center{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
}
.topbar .actions{display:flex; gap:6px;}

.icon-btn{
  width:38px; height:38px; flex-shrink:0;
  background:url('textures/stone.png') center/16px;
  border:3px solid #3a2410; outline:1px solid #1a0e04; outline-offset:-1px;
  color:#FFEC4F; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:filter .12s;
  font:inherit; font-weight:700;
  image-rendering:pixelated;
}
.icon-btn:hover{filter:brightness(1.15);}
.icon-btn:active{filter:brightness(.92);}
.icon-btn.active{
  background:url('textures/oak_planks.png') center/16px;
  outline-color:#FFEC4F;
}
.icon-btn svg{width:18px; height:18px; image-rendering:auto;}
.icon-btn.sm{width:32px; height:32px;}
.icon-btn.sm svg{width:16px; height:16px;}

.mode-strip{
  display:inline-flex; gap:0;
  background:#1a0e04;
  border:1px solid #3a2410;
  padding:2px;
}
.mode-strip button{
  background:transparent; border:none; padding:7px 14px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:700; color:#FFF4D0;
  text-shadow:1px 1px 0 #1a0e04;
  transition:all .12s;
}
.mode-strip button.active{
  background:#FFEC4F; color:#1a0e04; text-shadow:none;
  box-shadow:inset 0 -2px 0 #b89a20;
}

@media (max-width:640px){
  .topbar{padding:8px 12px; gap:8px;}
  .topbar .brand{order:0;}
  .topbar .actions{order:1; margin-left:auto;}
  .topbar .center{order:2; flex-basis:100%; justify-content:flex-start;}
  .topbar .brand .title{font-size:12px;}
}

/* ---------- TOOL ------------------------------------------------------- */
.tool-wrap{
  flex:1 1 0; min-height:0;
  padding:10px 14px 14px;
  display:flex; flex-direction:column; gap:8px;
}
@media (max-width:768px){.tool-wrap{padding:8px 10px 10px; gap:6px;}}

.tool-grid{
  flex:1 1 0; min-height:0; display:grid; gap:6px;
  grid-template-columns:88px 1fr 88px;
  grid-template-rows:1fr auto auto;
  grid-template-areas:
    "left canvas right"
    "slider slider slider"
    "mc mc mc";
}
.tool-grid.has-cut{
  grid-template-rows:1fr auto auto auto;
  grid-template-areas:
    "left canvas right"
    "slider slider slider"
    "cut cut cut"
    "mc mc mc";
}
/* In 3D (desktop / horizontal layout only) the right pill-column is empty
   — algo pills are 2D-only and the style pills were removed in an earlier
   round — so the canvas reclaims that column and aligns with the right
   edge of the sliders and block strip. Wrapped in min-width:769px so the
   mobile single-column layout below isn't overridden. */
@media (min-width:769px){
  body.mode3d .tool-grid{
    grid-template-columns:88px 1fr;
    grid-template-areas:
      "left canvas"
      "slider slider"
      "mc mc";
  }
  body.mode3d .tool-grid.has-cut{
    grid-template-columns:88px 1fr;
    grid-template-areas:
      "left canvas"
      "slider slider"
      "cut cut"
      "mc mc";
  }
  body.mode3d .pill-row.right{display:none;}
}
@media (max-width:768px){
  .tool-grid,
  .tool-grid.has-cut{
    grid-template-columns:1fr;
    grid-template-rows:1fr auto auto auto auto auto;
    grid-template-areas:
      "canvas"
      "right"
      "left"
      "slider"
      "cut"
      "mc";
  }
}

/* ---------- CANVAS FRAME ----------------------------------------------- */
.canvas-frame{
  grid-area:canvas; position:relative; overflow:hidden;
  /* Day mood (default) — bright MC sky. */
  background:linear-gradient(to bottom,#78a7ff 0%,#a8c8ff 60%,#d4e4ff 100%);
  border:3px solid #3a2410; outline:2px solid #1a0e04; outline-offset:-3px;
  min-width:0; min-height:0;
  touch-action:none;
  image-rendering:pixelated;
}
/* ---------- NIGHT MODE -----------------------------------------------------
   Selective darkening — we tint the background surfaces only and leave
   text, slider thumbs, the topbar's yellow icons, and the block tiles
   100 % intact (the tiles ARE the block textures the user is picking
   from; dimming them would break the picker).

   How it's done:
     • No global `filter:` on body. Filters cascade onto everything
       including text + tile imagery, which was the previous problem.
     • Each texture-backed surface (.topbar, .pill-row, .slider-box,
       .cut-row, .mc-list, .info-chip) gets an EXTRA top-stacked
       gradient layer when body.theme-night is on. The gradient is a
       solid translucent navy, so it darkens and cool-tints the
       texture beneath without touching foreground content.
     • Canvas frame itself gets the deep-navy sky gradient.
     • The MC block tiles inside .mc-list are explicitly excluded so
       the picker imagery stays bright and readable. */
/* Inset box-shadow paints a translucent navy slab INSIDE the element
   on top of its background but BEHIND any child content — so the
   texture darkens while text, sliders, icons and block tiles stay
   100 % readable. The 9999px spread guarantees coverage on huge
   panels. */
body.theme-night .topbar,
body.theme-night .slider-box,
body.theme-night .cut-row,
body.theme-night .mc-list,
body.theme-night .pill-row,
body.theme-night .info-chip{
  box-shadow:inset 0 0 0 9999px rgba(8, 14, 40, 0.55);
}
/* Page background gets the same wash so the dirt floor texture
   doesn't read as bright brown next to the dimmed panels. */
body.theme-night html, body.theme-night body{
  background-color:rgba(8, 14, 40, 0.55);
  background-blend-mode:multiply;
}
/* Canvas frame keeps its own bright night sky (the gradient overrides
   any inset shadow we might otherwise apply). */
body.theme-night .canvas-frame{
  background:linear-gradient(to bottom,#0a0f24 0%,#1a2050 55%,#2a2e6a 100%);
}
/* Day / night toggle icons — only one shows at a time. */
.icon-btn[data-act="theme"] .sun-ico,
.icon-btn[data-act="theme"] .moon-ico{ width:18px; height:18px; }
.icon-btn[data-act="theme"] .moon-ico{ display:none; }
body.theme-night .icon-btn[data-act="theme"] .sun-ico{ display:none; }
body.theme-night .icon-btn[data-act="theme"] .moon-ico{ display:inline-block; }

/* Sound toggle icons — same one-of-two pattern as the theme button.
   Default is sound-on (the speaker with curves). When body.sound-off
   is set we swap to the muted-speaker variant. The class lives on
   <body> rather than the button itself so other code paths can probe
   it (e.g. CSS-only sound-state indicators on related controls). */
.icon-btn[data-act="sound"] .snd-on-ico,
.icon-btn[data-act="sound"] .snd-off-ico{ width:18px; height:18px; }
.icon-btn[data-act="sound"] .snd-off-ico{ display:none; }
body.sound-off .icon-btn[data-act="sound"] .snd-on-ico{ display:none; }
body.sound-off .icon-btn[data-act="sound"] .snd-off-ico{ display:inline-block; }

/* ── Asset-pack test toggle ─────────────────────────────────────────── */
.asset-pack-btn{
  position:relative;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; font-weight:700;
  letter-spacing:.04em;
  width:auto; min-width:38px; padding:0 6px;
  gap:0;
}
.asset-pack-btn .ap-mc,
.asset-pack-btn .ap-free,
.asset-pack-btn .ap-pix { line-height:1; }
.asset-pack-btn .ap-free{ display:none; }
.asset-pack-btn .ap-pix { display:none; }
.asset-pack-btn.asset-free .ap-mc  { display:none; }
.asset-pack-btn.asset-free .ap-free{ display:inline; }
.asset-pack-btn.asset-pixelart .ap-mc  { display:none; }
.asset-pack-btn.asset-pixelart .ap-pix { display:inline; }
.asset-pack-btn .ap-badge{
  position:absolute; top:2px; right:2px;
  font-size:6px; font-weight:800; letter-spacing:.05em;
  color:#fff; background:#e85; border-radius:2px;
  padding:1px 2px; line-height:1; pointer-events:none;
}

/* Asset-pack crossfade — uses the native View Transitions API when
   available (Chrome 111+). The default UA crossfade is fine; we just
   tune the duration so the swap feels snappy (240 ms) instead of the
   ~400 ms UA default. Fallback for non-VT browsers is a snapshot
   overlay (see asset_toggle.js — _withCrossfade). */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: var(--asset-vt-dur, 240ms);
  animation-timing-function: ease;
}

/* Language toggle button — pill showing CURRENT locale (e.g. EN-US / PT-BR).
   Wider than other icon buttons because the BCP-47-style label is 5 chars
   (en-US, pt-BR). Click cycles through AVAILABLE_LOCALES in i18n.js. */
.icon-btn.lang-btn{ width:auto; min-width:54px; padding:0 8px; font-family:'Press Start 2P', monospace; font-size:7px; letter-spacing:.5px; }
.lang-lbl{ pointer-events:none; white-space:nowrap; }

/* Settings → Language picker. Styled to read as a peer of the toggle
   switches: same dark MC palette, no native dropdown chrome. */
.lang-select{
  background:url('textures/stone.png') center/16px;
  border:3px solid #3a2410; outline:1px solid #1a0e04; outline-offset:-1px;
  color:#FFEC4F; font:inherit; font-weight:700; padding:6px 10px;
  cursor:pointer; image-rendering:pixelated;
  min-width:160px;
}
.lang-select option{ background:#1a0e04; color:#FFEC4F; }
.canvas-frame canvas{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
}
.canvas-frame .circle-canvas{
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.canvas-frame .three-canvas{display:none;}
body.mode3d .circle-canvas{display:none;}
body.mode3d .three-canvas{display:block;}

@keyframes canvas-pulse{
  0%{transform:scale(1);} 50%{transform:scale(1.012);} 100%{transform:scale(1);}
}
.canvas-frame.pulse canvas{animation:canvas-pulse .15s ease;}

.canvas-corner{position:absolute; display:flex; gap:4px; z-index:5;}
.canvas-corner.tl{top:8px; left:8px;}
.canvas-corner.tr{top:8px; right:8px;}
.canvas-corner.bl{bottom:8px; left:8px;}
.canvas-corner.br{bottom:8px; right:8px; flex-direction:column; align-items:flex-end;}
.canvas-corner .row{display:flex; gap:4px;}

.c-btn{
  width:36px; height:36px; flex-shrink:0;
  background:url('textures/stone.png') center/16px;
  border:3px solid #3a2410; outline:1px solid #1a0e04; outline-offset:-1px;
  cursor:pointer; color:#FFEC4F;
  display:flex; align-items:center; justify-content:center;
  transition:filter .12s;
  font:inherit; font-weight:700;
  image-rendering:pixelated;
  text-shadow:1px 1px 0 #1a0e04;
}
.c-btn:hover{filter:brightness(1.15);}
.c-btn.active{
  background:url('textures/oak_planks.png') center/16px;
  outline-color:#FFEC4F;
}
.c-btn svg{width:18px; height:18px; image-rendering:auto;}

/* Floats above the corner so opening / closing it never shifts the
   `i` button up or down — the button is anchored to the bottom-left
   corner of the canvas and stays there regardless of chip state.
   `bottom: 100%` places the chip directly above the button; the small
   gap is the chip's 6px margin. */
.info-chip{
  display:none;
  position:absolute; left:0; bottom:100%; margin-bottom:6px;
  padding:9px 13px;
  background:url('textures/stone.png') center/24px;
  border:3px solid #3a2410; outline:1px solid #1a0e04; outline-offset:-1px;
  max-width:260px;
  font-size:12px; line-height:1.6; color:#FFF4D0;
  font-family:'JetBrains Mono',monospace;
  text-shadow:1px 1px 0 #1a0e04;
  z-index:6;
}
.info-chip.open{display:block;}
.info-chip div{white-space:nowrap;}
.info-chip b{color:#FFEC4F;}

/* ---------- PILLS ------------------------------------------------------ */
.pill-row{
  display:flex; flex-direction:column; gap:0;
  background:url('textures/stone.png') center/24px;
  border:3px solid #3a2410; outline:2px solid #1a0e04; outline-offset:-3px;
  image-rendering:pixelated;
}
.pill-row.left{grid-area:left;}
.pill-row.right{grid-area:right;}
@media (max-width:768px){.pill-row{flex-direction:row; height:50px;}}

.pill{
  flex:1 1 0; cursor:pointer; user-select:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:7px;
  background:transparent; border:none;
  color:#FFF4D0;
  text-shadow:1px 1px 0 #1a0e04;
  font:inherit; font-weight:700;
  transition:background .12s;
  border-bottom:2px solid #2a1808;
  min-width:0;
}
@media (max-width:768px){
  .pill{border-bottom:none; border-right:2px solid #2a1808;}
}
.pill:last-child{border-bottom:none; border-right:none;}
.pill:hover{background:rgba(255,236,79,.18);}
.pill.active{
  background:rgba(255,236,79,.32);
  box-shadow:inset 0 0 0 2px #FFEC4F;
  color:#FFEC4F;
}
.pill .icn{font-size:15px; line-height:1;}
.pill .lbl{
  font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap;
}
.pill .dot{width:11px; height:11px; border:2px solid #FFF4D0;}
.pill.active .dot{background:#FFEC4F; border-color:#FFF4A0;}

/* ---------- SLIDERS ---------------------------------------------------- */
.slider-row{
  grid-area:slider; display:flex; gap:6px; flex-shrink:0;
}
@media (max-width:768px){.slider-row{flex-direction:column;}}

.slider-box{
  flex:1 1 0;
  display:flex; align-items:center; gap:12px;
  padding:6px 16px;
  background:url('textures/stone.png') center/24px;
  border:3px solid #3a2410; outline:2px solid #1a0e04; outline-offset:-3px;
  height:52px;
  image-rendering:pixelated;
}
@media (max-width:768px){.slider-box{height:46px; padding:6px 14px;}}
.slider-box .wrap{flex:1 1 auto; padding:14px 0; position:relative;}
@media (max-width:768px){.slider-box .wrap{padding:11px 0;}}

.slider-box input[type=range],
.cut-row .wrap input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:9px; outline:none; cursor:pointer;
  background:linear-gradient(to right,#FFEC4F 0%,#FFEC4F var(--pct,50%),
             #1a0e04 var(--pct,50%),#1a0e04 100%);
  border:1px solid #1a0e04;
  user-select:none; -webkit-user-select:none;
  -webkit-user-drag:none; touch-action:none;
}
.slider-box input[type=range]::-webkit-slider-thumb,
.cut-row .wrap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:30px; height:30px;
  background:#FFEC4F; border:2px solid #1a0e04;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px #FFF4A0;
  -webkit-user-drag:none;
}
.slider-box input[type=range]:active::-webkit-slider-thumb,
.cut-row .wrap input[type=range]:active::-webkit-slider-thumb{cursor:pointer;}
.slider-box input[type=range]::-moz-range-thumb,
.cut-row .wrap input[type=range]::-moz-range-thumb{
  width:30px; height:30px;
  background:#FFEC4F; border:2px solid #1a0e04;
  cursor:pointer;
}

.slider-box .lbl,
.cut-row .lbl{
  font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#FFF4D0;
  text-shadow:1px 1px 0 #1a0e04;
  display:flex; gap:8px; align-items:baseline;
  min-width:86px; justify-content:flex-end;
  flex-shrink:0;
}
.slider-box .lbl .val,
.cut-row .lbl .val{
  color:#FFEC4F; font-size:14px; min-width:28px; text-align:right;
  font-family:'JetBrains Mono',monospace; font-weight:700;
}

/* ---------- CUT ROW ---------------------------------------------------- */
.cut-row{
  grid-area:cut; flex-shrink:0;
  display:none; align-items:center; gap:12px;
  padding:6px 16px;
  background:url('textures/stone.png') center/24px;
  border:3px solid #3a2410; outline:2px solid #1a0e04; outline-offset:-3px;
  height:52px;
  image-rendering:pixelated;
}
.tool-grid.has-cut .cut-row{display:flex;}
@media (max-width:768px){.cut-row{height:46px; padding:6px 14px;}}

.cut-toggle{
  display:inline-flex; flex-shrink:0;
  background:#1a0e04; border:1px solid #3a2410;
  height:32px;
}
.cut-toggle button{
  background:transparent; border:none; padding:0 13px; min-width:34px;
  font:inherit; font-weight:800; color:#FFF4D0; cursor:pointer;
  text-shadow:1px 1px 0 #1a0e04;
  font-size:13px; transition:all .12s; line-height:1;
}
.cut-toggle button:hover{color:#FFEC4F;}
.cut-toggle button.active{
  background:#FFEC4F; color:#1a0e04; text-shadow:none;
}
.cut-row .wrap{flex:1 1 auto; padding:14px 0; position:relative;}
@media (max-width:768px){.cut-row .wrap{padding:11px 0;}}

/* ---------- MC PICKER -------------------------------------------------- */
.mc-list{
  grid-area:mc; flex-shrink:0;
  display:flex; gap:4px;
  padding:6px 8px;
  background:url('textures/cobblestone.png') center/20px;
  border:3px solid #3a2410; outline:2px solid #1a0e04; outline-offset:-3px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin;
  image-rendering:pixelated;
}
.mc-block{
  width:38px; height:38px; flex-shrink:0; cursor:pointer;
  background-size:cover; background-position:center;
  border:2px solid #1a0e04;
  image-rendering:pixelated;
  transition:transform .12s, border-color .12s, outline .12s;
}
.mc-block:hover{transform:scale(1.10); border-color:#FFEC4F;}
.mc-block.active{
  border-color:#FFEC4F;
  outline:2px solid #FFEC4F; outline-offset:-3px;
}
.mc-block.random{
  background:
    linear-gradient(45deg,#FFEC4F 25%,transparent 25%,transparent 50%,#c2913a 50%,#c2913a 75%,transparent 75%),
    linear-gradient(-45deg,#5a8a40 25%,transparent 25%,transparent 50%,#7a5a2a 50%,#7a5a2a 75%,transparent 75%);
  background-size:18px 18px; background-color:#404040;
  position:relative;
}
.mc-block.random::after{
  content:'?'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Press Start 2P',monospace; font-size:13px; color:#fff;
  text-shadow:1px 1px 0 #000;
}

/* ---------- GENERIC BUTTON --------------------------------------------- */
.btn{
  padding:14px 22px; cursor:pointer;
  font-family:'Press Start 2P',monospace; font-size:11px;
  background:url('textures/oak_planks.png') center/16px;
  border:3px solid #3a2410; outline:2px solid #1a0e04; outline-offset:-3px;
  color:#FFEC4F; text-shadow:2px 2px 0 #1a0e04;
  image-rendering:pixelated;
  transition:filter .12s;
}
.btn:hover{filter:brightness(1.10);}
.btn:active{filter:brightness(.9);}
.btn.ghost{background:url('textures/cobblestone.png') center/16px; color:#FFF4D0;}
.btn.sm{font-size:10px; padding:11px 18px;}

/* ---------- SECTION TITLES --------------------------------------------- */
.section-title{
  font-family:'Press Start 2P',monospace;
  font-size:20px; color:#FFEC4F;
  text-shadow:2px 2px 0 #1a0e04;
  margin-bottom:8px; letter-spacing:0;
  line-height:1.6;
}
@media (max-width:768px){.section-title{font-size:14px;}}
.section-sub{
  font-size:14px; color:#FFF4D0;
  text-shadow:1px 1px 0 #1a0e04;
  margin-bottom:26px; line-height:1.7;
}
.ds-h2{
  font-family:'Press Start 2P',monospace;
  font-size:12px; color:#FFEC4F;
  text-shadow:1px 1px 0 #1a0e04;
  margin-bottom:12px; line-height:1.6;
}

/* ---------- INFO / SETTINGS CARDS -------------------------------------- */
.help-list{display:grid; gap:14px;}
.help-item{
  background:url('textures/stone.png') center/24px;
  border:3px solid #3a2410; outline:2px solid #1a0e04; outline-offset:-3px;
  padding:18px;
  image-rendering:pixelated;
}
.help-item h3{
  font-family:'Press Start 2P',monospace;
  font-size:11px; color:#FFEC4F;
  text-shadow:1px 1px 0 #1a0e04;
  margin-bottom:7px; line-height:1.6;
}
.help-item p{
  font-size:13px; color:#FFF4D0;
  text-shadow:1px 1px 0 #1a0e04;
  line-height:1.7;
}
.help-item a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid var(--accent-dim);
  text-shadow:1px 1px 0 #1a0e04;
  transition:color .12s ease-out, border-color .12s ease-out, background .12s ease-out;
}
.help-item a:hover{
  color:var(--accent-light);
  border-bottom-color:var(--accent);
  background:var(--accent-dim);
}
.help-item a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-bottom-color:transparent;
}
.help-item code, .key{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px;
  background:#1a0e04;
  border:1px solid #3a2410;
  padding:2px 7px; margin-right:3px; color:#FFEC4F;
  text-shadow:none;
}

.settings-grid{display:grid; gap:14px;}
.setting-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px;
  background:url('textures/stone.png') center/24px;
  border:3px solid #3a2410; outline:2px solid #1a0e04; outline-offset:-3px;
  image-rendering:pixelated;
}
.setting-row .lbl-grp{display:flex; flex-direction:column; gap:3px; flex:1;}
.setting-row .lbl-grp label{
  font-family:'Press Start 2P',monospace;
  font-size:11px; color:#FFEC4F;
  text-shadow:1px 1px 0 #1a0e04;
  line-height:1.6;
}
.setting-row .lbl-grp .desc{
  font-size:13px; color:#FFF4D0;
  text-shadow:1px 1px 0 #1a0e04;
}

.toggle-sw{position:relative; width:46px; height:26px; flex-shrink:0;}
.toggle-sw input{opacity:0; width:0; height:0;}
.toggle-sw .slider{
  position:absolute; inset:0; background:#1a0e04;
  border:2px solid #3a2410;
  cursor:pointer; transition:background .15s;
}
.toggle-sw .slider::before{
  content:""; position:absolute; left:2px; top:2px;
  width:18px; height:18px; background:#FFF4D0;
  transition:transform .15s;
}
.toggle-sw input:checked + .slider{background:#3a2410;}
.toggle-sw input:checked + .slider::before{transform:translateX(20px); background:#FFEC4F;}

/* ---------- TOAST ------------------------------------------------------
   The toast host lives INSIDE the .canvas-frame so messages overlay the
   bottom of the canvas instead of being pinned at the page bottom (where
   the responsive layout below pushed them off-screen on mobile and made
   them easy to miss). Absolute positioning + pointer-events:none means
   the toast never affects layout flow and never blocks canvas clicks. */
.toast-host{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  z-index:300; display:flex; flex-direction:column-reverse; gap:8px;
  pointer-events:none;
}
.toast{
  padding:10px 18px;
  background:url('textures/oak_planks.png') center/16px;
  border:3px solid #3a2410; outline:2px solid #1a0e04; outline-offset:-3px;
  font-size:13px; color:#FFEC4F;
  text-shadow:1px 1px 0 #1a0e04;
  white-space:nowrap;
  animation:toastin .25s cubic-bezier(.34,1.56,.64,1);
  image-rendering:pixelated;
}
.toast.ok{color:#7BD99C;}
.toast.error{color:#FF6573;}
@keyframes toastin{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;}}
.toast.out{animation:toastout .25s ease forwards;}
@keyframes toastout{to{opacity:0; transform:translateY(20px);}}

/* ---------- FREE ASSET PACK · LIGHT-SURFACE CONTRAST FIX -----------------
   When the Free CC0 pack is active, panel surfaces (.help-item, .setting-row,
   .info-chip, etc.) are tiled with the light `iron_block` texture. The
   default cream-on-dark text + dark code-pill from style.css produces poor
   contrast on that light surface — yellow titles get lost in the iron's
   sheen and the `#1a0e04` code box is jarringly dark.

   Below we invert the relevant pieces: deep wood-brown text with a warm
   highlight, cream code pills with a wood border, and link colors that
   stay readable but keep the accent feel. MC mode is untouched — these
   selectors only fire under `body.asset-free`. ------------------------- */
body.asset-free .help-item h3,
body.asset-free .setting-row .lbl-grp label{
  color:#2a1808;
  text-shadow:1px 1px 0 rgba(255,236,79,.55);
}
body.asset-free .help-item p,
body.asset-free .setting-row .lbl-grp .desc,
body.asset-free .info-chip{
  color:#1a0e04;
  text-shadow:1px 1px 0 rgba(255,255,255,.45);
}
body.asset-free .help-item code,
body.asset-free .help-item .key,
body.asset-free .key{
  background:#FFF4D0;
  border:1px solid #3a2410;
  color:#2a1808;
  text-shadow:none;
}
body.asset-free .help-item a{
  color:#2a1808;
  border-bottom-color:rgba(42,24,8,.35);
  text-shadow:1px 1px 0 rgba(255,255,255,.45);
}
body.asset-free .help-item a:hover{
  color:#3a2410;
  background:rgba(255,236,79,.30);
  border-bottom-color:#2a1808;
}
body.asset-free .help-item a:focus-visible{
  outline-color:#2a1808;
}

/* ---------- PIXELART PACK text contrast (mirrors asset-free rules) -------- */
body.asset-pixelart .help-item h3,
body.asset-pixelart .setting-row .lbl-grp label{
  color:#2a1808;
  text-shadow:1px 1px 0 rgba(255,236,79,.55);
}
body.asset-pixelart .help-item p,
body.asset-pixelart .setting-row .lbl-grp .desc,
body.asset-pixelart .info-chip{
  color:#1a0e04;
  text-shadow:1px 1px 0 rgba(255,255,255,.45);
}
body.asset-pixelart .help-item code,
body.asset-pixelart .help-item .key,
body.asset-pixelart .key{
  background:#FFF4D0;
  border:1px solid #3a2410;
  color:#2a1808;
  text-shadow:none;
}
body.asset-pixelart .help-item a{
  color:#2a1808;
  border-bottom-color:rgba(42,24,8,.35);
  text-shadow:1px 1px 0 rgba(255,255,255,.45);
}
body.asset-pixelart .help-item a:hover{
  color:#3a2410;
  background:rgba(255,236,79,.30);
  border-bottom-color:#2a1808;
}
body.asset-pixelart .help-item a:focus-visible{
  outline-color:#2a1808;
}

/* ---------- REDUCED MOTION --------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}