:root{
  --ocean-deep:#081627;
  --ocean-mid:#0e2a45;
  --panel:#123655;
  --panel-edge:#04101c;
  --foam:#eaf6ff;
  --tide:#bcd7ea;
  --aqua:#5ad8ff;
  --aqua-deep:#1fa8d8;
  --gold:#ffc24a;
  --warn:#ff6a5e;
  --pixel: 'Press Start 2P', monospace;
  --body: 'VT323', ui-monospace, monospace;
}
*{box-sizing:border-box; border-radius:0!important;}
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:5rem;}
html,body{margin:0;padding:0;background:var(--ocean-deep);color:var(--foam);}
body{
  font-family:var(--body);
  font-size:20px;
  line-height:1.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 32px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 32px),
    linear-gradient(180deg, var(--ocean-deep), #050d18 60%, #03080f);
  min-height:100vh;
}
img{image-rendering:pixelated;}
a{color:var(--aqua);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{font-family:var(--pixel); line-height:1.6; color:var(--foam); text-shadow:3px 3px 0 rgba(0,0,0,.55);}
.pixel-border{
  border:4px solid var(--panel-edge);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.08), inset -3px -3px 0 rgba(0,0,0,.5), 0 6px 0 rgba(0,0,0,.35);
}
.wrap{max-width:1120px; margin:0 auto; padding:0 1.5rem;}
.body-text{color:var(--tide); font-size:1.25rem;}
.small-max{max-width:34ch;}
.fine-text{color:#7d93a6; font-size:1rem;}

/* header */
header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(rgba(4,10,18,.92),rgba(4,10,18,.92)), repeating-linear-gradient(0deg, #0d233a 0 24px, #0a1c30 24px 48px);
  border-bottom:4px solid var(--panel-edge);
}
header .bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; flex-wrap:wrap; position:relative;}
.logo{display:flex; align-items:center; gap:.6rem; font-family:var(--pixel); font-size:.85rem; color:var(--foam);}
.logo .drop{
  width:30px;height:30px; flex-shrink:0;
  background:url("/assets/favicon-64.png") center/contain no-repeat;
}
.logo em{color:var(--gold); font-style:normal;}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; background:var(--panel); border:3px solid var(--panel-edge);
  cursor:pointer; padding:0;
}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--foam); margin:0 auto;}

nav{display:flex; gap:.5rem; flex-wrap:wrap;}
nav a{
  font-family:var(--pixel); font-size:.6rem; color:var(--foam);
  padding:.7rem .9rem; background:var(--panel);
  border:3px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.1), inset -2px -2px 0 rgba(0,0,0,.4);
}
nav a:hover{background:var(--aqua-deep); color:#04121c; text-decoration:none;}
nav a.current{background:var(--gold); color:#3a2400;}

@media (max-width:640px){
  .nav-toggle{display:flex;}
  nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; padding:1rem 1.5rem 1.5rem;
    background:var(--ocean-mid); border-bottom:4px solid var(--panel-edge);
  }
  nav.open{display:flex;}
}

/* hero */
.hero{padding:4.5rem 0 3rem; text-align:center; position:relative; overflow:hidden;}
.hero .eyebrow{font-family:var(--pixel); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem;}
.hero h1{font-size:1.6rem; margin:0 0 1.2rem;}
.hero h1 span{color:var(--aqua);}
.hero p{max-width:56ch; margin:0 auto; color:var(--tide); font-size:1.3rem;}
.hero .cta{display:flex; gap:1rem; justify-content:center; margin-top:2.2rem; flex-wrap:wrap;}
.btn{
  font-family:var(--pixel); font-size:.7rem; padding:1rem 1.4rem;
  border:3px solid var(--panel-edge); cursor:pointer; display:inline-flex; align-items:center; gap:.6rem;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.15), inset -2px -2px 0 rgba(0,0,0,.45);
}
.btn:hover{text-decoration:none; filter:brightness(1.1);}
.btn:active{transform:translateY(2px); box-shadow: inset 2px 2px 0 rgba(0,0,0,.3);}
.btn-primary{background:linear-gradient(180deg, var(--aqua), var(--aqua-deep)); color:#04121c;}
.btn-ghost{background:var(--panel); color:var(--foam);}
.btn-sm{font-size:.58rem; padding:.7rem .9rem;}

/* rising tide gauge */
.gauge-wrap{max-width:640px; margin:3rem auto 0;}
.gauge{
  position:relative; height:150px; overflow:hidden; background:var(--panel-edge);
  border:4px solid var(--panel-edge); box-shadow: inset 0 0 0 3px rgba(255,255,255,.05);
}
.gauge .water{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, var(--aqua) 0%, var(--aqua-deep) 55%, #0c4a68 100%);
  transition: height .5s ease;
}
.gauge .water::before{
  content:""; position:absolute; top:-8px; left:0; right:0; height:16px;
  background-image: radial-gradient(circle at 10px 8px, rgba(255,255,255,.55) 3px, transparent 4px),
                     radial-gradient(circle at 34px 4px, rgba(255,255,255,.4) 2px, transparent 3px),
                     radial-gradient(circle at 58px 9px, rgba(255,255,255,.5) 3px, transparent 4px);
  background-size:64px 16px; background-repeat:repeat-x;
  animation: bob 2.4s linear infinite;
}
@keyframes bob{0%{background-position-x:0;} 100%{background-position-x:64px;}}
.gauge-caption{font-family:var(--pixel); font-size:.6rem; text-align:center; color:var(--gold); margin-top:.8rem;}
.gauge-controls{display:flex; gap:.8rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap;}
.gauge-note{text-align:center; color:#7d93a6; font-size:1rem; margin-top:.8rem;}

/* sections */
section{padding:3rem 0;}
section h2{font-size:1.2rem; margin:0 0 .8rem;}
section .lede{color:var(--tide); max-width:66ch; margin:0 0 2rem; font-size:1.25rem;}

/* machine navigation tabs */
.machine-nav{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.6rem;
  background:var(--ocean-mid);
  padding:.6rem;
  margin-bottom:1.5rem;
}
@media (max-width:768px){
  .machine-nav{grid-template-columns:1fr;}
}
.machine-nav-btn{
  background:var(--panel);
  border:3px solid var(--panel-edge);
  padding:.9rem 1rem;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
  text-align:left;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.35);
  transition:background .15s ease, border-color .15s ease;
}
.machine-nav-btn:hover{
  background:rgba(90,216,255,.12);
  filter:brightness(1.08);
}
.machine-nav-btn.active{
  background:linear-gradient(180deg, #184163, #113350);
  border-color:var(--gold);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.18), 0 0 12px rgba(255,194,74,.25);
}
.machine-nav-btn .nav-title{
  font-family:var(--pixel);
  font-size:.68rem;
  color:var(--foam);
  line-height:1.4;
}
.machine-nav-btn .nav-count{
  font-family:var(--body);
  font-size:1.05rem;
  color:var(--tide);
}

/* difficulty badges */
.diff-tag{
  font-family:var(--pixel);
  font-size:.52rem;
  padding:.2rem .45rem;
  letter-spacing:.05em;
  display:inline-block;
  border:2px solid;
}
.diff-badge{
  font-family:var(--pixel);
  font-size:.58rem;
  padding:.35rem .6rem;
  letter-spacing:.06em;
  display:inline-block;
  border:2px solid;
}
.diff-easy{
  color:#52e077;
  background:rgba(82,224,119,.12);
  border-color:#2a8f46;
}
.diff-medium{
  color:var(--gold);
  background:rgba(255,194,74,.12);
  border-color:#b58022;
}
.diff-hard{
  color:var(--warn);
  background:rgba(255,106,94,.12);
  border-color:#a6362e;
}
.diff-tnt{
  color:#ff5252;
  background:rgba(255,82,82,.14);
  border-color:#d43333;
}
.diff-badge.diff-tnt{
  background:#db3d2a;
  color:#fff;
  border-color:#ff7360;
  box-shadow:0 0 10px rgba(219,61,42,.4);
}
.standalone-panel{
  display:block!important;
}

/* machine panels */
.machine-panel{
  display:none;
  background:var(--panel);
  padding:1.8rem;
  margin-bottom:2rem;
}
.machine-panel.active{
  display:block;
  animation:panelFade .25s ease-out;
}
@keyframes panelFade{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}

.machine-header{
  /* Stack, so a short name like "Ice Wall Rig" does not let the badges ride up
     alongside the heading while longer names push them onto their own line. */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1rem;
  padding-bottom:1rem;
  border-bottom:3px solid var(--panel-edge);
}
.machine-title-group{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.machine-title-group h3{
  font-size:1.1rem;
  margin:0;
}
.machine-badges{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  /* Every badge and the download button share a row height, with their labels
     centred in the frame rather than sitting on different baselines. */
  align-items:stretch;
}
.badge{
  font-family:var(--pixel);
  font-size:.58rem;
  background:var(--ocean-deep);
  color:var(--aqua);
  padding:.5rem .75rem;
  border:2px solid var(--panel-edge);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.4;
}
.machine-badges .btn{
  justify-content:center;
  text-align:center;
}
.badge-cost{
  color:var(--gold);
  border-color:#5a4415;
}
.machine-desc{
  color:var(--tide);
  font-size:1.25rem;
  margin:0 0 1.5rem;
  max-width:75ch;
  line-height:1.6;
}

.schem-slot{
  margin-bottom:1.8rem;
}
.schem-slot .schem-canvas-wrap{
  height:360px;
}

/* Material & component list breakdown */
.machine-materials{
  background:var(--ocean-deep);
  border:3px solid var(--panel-edge);
  padding:1.4rem;
  box-shadow:inset 0 0 16px rgba(0,0,0,.45);
}
.materials-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.8rem;
  margin-bottom:1.2rem;
  padding-bottom:.8rem;
  border-bottom:2px solid rgba(255,255,255,.08);
}
.materials-header h4{
  font-family:var(--pixel);
  font-size:.7rem;
  color:var(--gold);
  margin:0;
}
.copy-mat-btn{
  font-size:.6rem;
  padding:.7rem 1.1rem;
}

.material-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1rem;
}
.material-card{
  background:var(--panel);
  border:3px solid var(--panel-edge);
  padding:1.1rem 1.3rem;
  display:flex;
  align-items:center;
  gap:1.1rem;
  min-width:0;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.4);
}
.mat-swatch{
  position:relative;
  width:58px;
  height:58px;
  flex-shrink:0;
  border:3px solid var(--panel-edge);
  background-color:transparent !important;
  box-shadow:none !important;
}
.mat-swatch.swatch-slab{
  background-position: center bottom !important;
  background-size: 100% 200% !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated !important;
}
.mat-swatch.swatch-wall{
  background-position: center !important;
  background-size: cover !important;
  image-rendering: pixelated !important;
}
.mat-count{
  position:absolute;
  right:-6px;
  bottom:-6px;
  background:var(--gold);
  color:#3a2400;
  font-family:var(--pixel);
  font-size:.65rem;
  padding:.2rem .45rem;
  border:2px solid var(--panel-edge);
  line-height:1;
}
.mat-info{
  flex:1;
  min-width:0;
}
.mat-name{
  font-family:var(--pixel);
  font-size:.7rem;
  color:var(--foam);
  margin-bottom:.45rem;
  white-space:normal;
  word-break:break-word;
  line-height:1.4;
}
.mat-bar-wrap{
  height:9px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.1);
  margin-bottom:.35rem;
  overflow:hidden;
}
.mat-bar{
  height:100%;
  background:linear-gradient(90deg, var(--aqua), var(--aqua-deep));
}
.mat-pct{
  font-family:var(--body);
  font-size:1.15rem;
  color:#8ba3b8;
}

.quote-sign{max-width:640px; margin:2rem auto; text-align:center;}
.plank{
  background:linear-gradient(#173049,#173049), repeating-linear-gradient(90deg, #0c2036 0 10px, #0e253d 10px 20px);
  border:4px solid var(--panel-edge); padding:1.6rem;
}
.plank p{font-family:var(--pixel); font-size:.72rem; line-height:2; color:var(--foam); margin:0 0 1rem;}
.plank .who{color:var(--gold); font-size:.65rem;}
figcaption{color:var(--tide); font-size:1.1rem; margin-top:.8rem;}

.compare{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
@media (max-width:640px){.compare{grid-template-columns:1fr;}}
.compare > div{background:var(--panel); padding:1.5rem;}
.compare h3{font-size:.78rem; margin:0 0 .8rem;}
.compare p{color:var(--tide); font-size:1.2rem; margin:0 0 1rem;}
.verdict{padding-top:.9rem; border-top:3px solid rgba(0,0,0,.4); font-family:var(--pixel); font-size:.6rem;}
.verdict.win{color:var(--aqua);}
.verdict.meh{color:var(--warn);}

.callout{
  border-left:6px solid var(--gold); background:rgba(0,0,0,.25); padding:1.2rem 1.5rem; color:var(--tide); font-size:1.2rem; max-width:70ch; margin-top:2rem;
}
.callout strong{color:var(--gold); font-family:var(--pixel); font-size:.7rem; display:block; margin-bottom:.5rem;}

footer{
  margin-top:3rem; border-top:4px solid var(--panel-edge);
  background:linear-gradient(rgba(4,10,18,.95),rgba(4,10,18,.95)), repeating-linear-gradient(0deg, #0d233a 0 24px, #0a1c30 24px 48px);
}
footer .cols{display:grid; grid-template-columns:1.6fr 1fr; gap:2rem; padding:2.5rem 0;}
@media (max-width:768px){footer .cols{grid-template-columns:1fr;}}
footer h4{font-family:var(--pixel); font-size:.65rem; color:var(--gold); margin:0 0 .8rem;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem;}
footer ul a{color:var(--tide); font-size:1.15rem;}
footer .fine{border-top:3px solid rgba(0,0,0,.4); padding:1.2rem 0; color:#7d93a6; font-size:1rem;}

.litematica-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:1.2rem; align-items:start;}
@media (max-width:768px){.litematica-grid{grid-template-columns:1fr;}}
.video-shell{background:var(--panel); padding:1rem;}
.video-frame{position:relative; width:100%; padding-top:56.25%; background:var(--panel-edge); overflow:hidden; border:3px solid var(--panel-edge);}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.litematica-notes{background:var(--panel); padding:1.5rem;}
.litematica-notes h3{font-size:.82rem; margin:0 0 .8rem;}
.litematica-notes ol{margin:0 0 1.2rem 1.2rem; padding:0; color:var(--tide); font-size:1.1rem;}
.litematica-notes li{margin:.45rem 0;}

/* toast for copy-to-clipboard feedback */
#toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%, 20px);
  background:var(--gold); color:#3a2400; font-family:var(--pixel); font-size:.6rem;
  padding:.9rem 1.2rem; border:3px solid var(--panel-edge); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; z-index:100;
}
#toast.show{opacity:1; transform:translate(-50%, 0);}

:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

/* schematic viewer */
.schem-frame{
  position:relative;
  margin-top:1rem;
  padding:1rem 1rem 1.2rem;
  background:
    linear-gradient(rgba(8,9,12,.86), rgba(8,9,12,.86)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 12px, rgba(0,0,0,.03) 12px 24px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 8px, rgba(0,0,0,.02) 8px 16px),
    #0a0d12;
  border:3px solid var(--panel-edge);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 0 1px rgba(0,0,0,.35);
  overflow:hidden;
}
.schem-frame::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 10%, transparent 90%, rgba(0,0,0,.18));
  opacity:.9;
}
.schem-frame > *{position:relative; z-index:1;}

.schem-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  flex-wrap:wrap;
  margin-bottom:.6rem;
}
.schem-info{
  font-family:var(--pixel);
  font-size:.55rem;
  color:var(--aqua);
  letter-spacing:.05em;
  text-transform:uppercase;
  text-shadow:2px 2px 0 rgba(0,0,0,.7);
}
.schem-header-actions{
  display:flex;
  gap:.5rem;
  align-items:center;
}
.schem-btn-reset{
  padding:.5rem .7rem;
  min-height:34px;
}
.schem-btn-fs{
  padding:.5rem .7rem;
  min-height:34px;
}

.schem-canvas-wrap{
  position:relative;
  width:100%;
  height:280px;
  background:
    linear-gradient(rgba(9,10,14,.92), rgba(9,10,14,.92)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 6px, rgba(0,0,0,.03) 6px 12px),
    #0e0f14;
  background-size:auto, 24px 24px, auto;
  border:3px solid var(--panel-edge);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.04), inset 0 0 24px rgba(0,0,0,.35);
  overflow:hidden;
  cursor:grab;
  outline:none;
  user-select:none;
}
.schem-canvas-wrap:focus-visible{
  box-shadow: inset 0 0 0 2px var(--aqua), 0 0 8px rgba(90,216,255,.3);
}
.schem-canvas-wrap.is-rotating,
.schem-canvas-wrap.is-panning{
  cursor:grabbing;
}
.schem-canvas-wrap canvas{
  display:block;
  width:100%;
  height:100%;
}

/* Floating interactive HUD */
.schem-hud{
  position:absolute;
  top:8px;
  left:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
  pointer-events:none;
  z-index:5;
}
.schem-hud-tag{
  font-family:var(--pixel);
  font-size:.48rem;
  color:var(--tide);
  background:rgba(4,10,18,.78);
  border:1px solid rgba(255,255,255,.08);
  padding:.3rem .5rem;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  backdrop-filter:blur(2px);
}
.schem-hud-tag strong{
  color:var(--gold);
}

.schem-hud-tools{
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
  z-index:5;
}
.schem-tool-btn{
  width:32px;
  height:32px;
  background:rgba(18,54,85,.85);
  border:2px solid var(--panel-edge);
  color:var(--foam);
  font-family:var(--pixel);
  font-size:.7rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.12), inset -1px -1px 0 rgba(0,0,0,.4);
  padding:0;
  transition:background .15s ease, transform .1s ease;
}
.schem-tool-btn:hover{
  background:var(--aqua-deep);
  color:#04121c;
}
.schem-tool-btn:active{
  transform:scale(0.94);
}

.schem-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:.9rem;
}
.schem-rotate-group{display:flex; gap:.6rem;}
.schem-frame .btn{
  font-family:var(--pixel);
  font-size:.58rem;
  color:var(--foam);
  background:
    linear-gradient(rgba(48,52,64,.78), rgba(48,52,64,.78)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 8px, rgba(0,0,0,.02) 8px 16px),
    #4a4d59;
  border:3px solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.35), 0 4px 0 rgba(0,0,0,.25);
  min-height:40px;
}
.schem-frame .btn:hover{color:var(--gold);}
.schem-frame .btn:active{box-shadow: inset 2px 2px 0 rgba(0,0,0,.35), inset -2px -2px 0 rgba(255,255,255,.08);}
.schem-layer-group{display:flex; align-items:center; gap:.6rem;}
.schem-layer-label{font-family:var(--pixel); font-size:.55rem; color:var(--tide); text-transform:uppercase;}
.schem-layer-slider{width:110px; accent-color:var(--aqua); cursor:pointer;}
.schem-layer-value{font-family:var(--pixel); font-size:.55rem; color:var(--gold); min-width:2.4ch; text-align:right; text-transform:uppercase;}
.schem-legend{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:1.1rem;
  align-items:center;
}
.schem-legend-item{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:.75rem;
  background:rgba(4,10,18,.85);
  border:3px solid var(--panel-edge);
  padding:.45rem .85rem .45rem .55rem;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.1), inset -2px -2px 0 rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.35);
  max-width:100%;
}
.schem-legend-swatch{
  position:relative;
  width:38px;
  height:38px;
  flex-shrink:0;
  border:2px solid var(--panel-edge);
  background-color:transparent !important;
  box-shadow:none !important;
}
.schem-legend-swatch.swatch-slab{
  background-position:center bottom !important;
  background-size:100% 200% !important;
  background-repeat:no-repeat !important;
  image-rendering:pixelated !important;
}
.schem-legend-swatch.swatch-wall{
  background-position:center !important;
  background-size:cover !important;
  image-rendering:pixelated !important;
}
.schem-legend-count{
  position:absolute;
  right:-6px;
  bottom:-6px;
  background:var(--gold);
  color:#3a2400;
  font-family:var(--pixel);
  font-size:.56rem;
  padding:.15rem .35rem;
  border:2px solid var(--panel-edge);
  line-height:1;
}
.schem-legend-name{
  font-family:var(--pixel);
  font-size:.65rem;
  color:var(--foam);
  white-space:nowrap;
  line-height:1.2;
}
.schem-legend-copy-btn{
  margin-left:auto;
  font-family:var(--pixel);
  font-size:.62rem;
  padding:.55rem 1.1rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  white-space:nowrap;
  flex-shrink:0;
  cursor:pointer;
  min-height:42px;
}
.schem-legend-copy-btn.btn-copied{
  background:var(--gold) !important;
  color:#2a1800 !important;
  border-color:#ffe066 !important;
}

/* Fullscreen Mode Styling */
body.schem-fullscreen-active{
  overflow:hidden !important;
}

.schem-frame:fullscreen,
.schem-frame:-webkit-full-screen,
.schem-frame.is-fullscreen{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:100vw !important;
  margin:0 !important;
  padding:1rem 1.4rem 1rem !important;
  z-index:99999 !important;
  display:flex !important;
  flex-direction:column !important;
  background:#06080d !important;
  border:none !important;
  box-sizing:border-box !important;
}

.schem-frame:fullscreen .schem-canvas-wrap,
.schem-frame:-webkit-full-screen .schem-canvas-wrap,
.schem-frame.is-fullscreen .schem-canvas-wrap{
  flex:1 1 auto !important;
  height:100% !important;
  min-height:0 !important;
  width:100% !important;
}

.schem-frame:fullscreen .schem-legend,
.schem-frame:-webkit-full-screen .schem-legend,
.schem-frame.is-fullscreen .schem-legend{
  margin-top:.6rem;
  max-height:none;
  overflow:visible;
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.schem-frame:fullscreen .schem-legend::-webkit-scrollbar,
.schem-frame:-webkit-full-screen .schem-legend::-webkit-scrollbar,
.schem-frame.is-fullscreen .schem-legend::-webkit-scrollbar{
  display:none;
}

.schem-frame:fullscreen .schem-hud-tag,
.schem-frame:-webkit-full-screen .schem-hud-tag,
.schem-frame.is-fullscreen .schem-hud-tag{
  font-size:.55rem;
  padding:.4rem .7rem;
}

/* Machine deployment and activation notes */
.machine-notes{
  background:var(--ocean-deep);
  border:3px solid var(--panel-edge);
  padding:1.2rem 1.5rem;
  margin-top:1.5rem;
  /* Two shared columns so every badge is the width of the widest one and all the
     note paragraphs start on the same left edge. */
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.9rem;
  row-gap:.9rem;
  align-items:start;
}
.machine-notes > .note-heading{grid-column:1 / -1;}
.machine-notes > .note-item{display:contents;}
.machine-notes > .note-item > .note-badge{justify-self:stretch; text-align:center;}
.note-heading{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding-bottom:.6rem;
  border-bottom:2px solid rgba(255,255,255,.08);
}
.note-heading h4{
  font-family:var(--pixel);
  font-size:.68rem;
  color:var(--gold);
  margin:0;
}
.note-heading .note-icon{
  font-size:1.1rem;
}
.note-item{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  flex-wrap:wrap;
}
/* Narrow screens: badge above its text again */
@media (max-width:720px){
  .machine-notes{grid-template-columns:1fr; row-gap:.5rem;}
  .machine-notes > .note-item > .note-badge{justify-self:start; margin-top:.6rem;}
}
.note-badge{
  font-family:var(--pixel);
  font-size:.52rem;
  padding:.3rem .55rem;
  letter-spacing:.05em;
  display:inline-block;
  border:2px solid;
  white-space:nowrap;
  flex-shrink:0;
}
.note-ice{
  color:var(--aqua);
  background:rgba(90,216,255,.12);
  border-color:var(--aqua-deep);
}
.note-redstone{
  color:#ffaa5e;
  background:rgba(255,170,94,.14);
  border-color:#d97724;
}
.note-observer{
  color:var(--gold);
  background:rgba(255,194,74,.14);
  border-color:#b58022;
}
.note-item p{
  margin:0;
  font-size:1.15rem;
  color:var(--tide);
  line-height:1.45;
  flex:1 1 280px;
}
.note-item strong{
  color:var(--foam);
}

/* Activation Observer legend item */
.schem-legend-activation{
  border:2px solid var(--gold)!important;
  background:rgba(255,194,74,.12)!important;
}
.swatch-activation{
  background:var(--gold)!important;
  color:#000!important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:bold;
}

/* Recommended Badge & Timer Tags */
.badge-rec{
  background:linear-gradient(180deg, #ffc24a, #d48b11)!important;
  color:#1e1200!important;
  border-color:#ffd875!important;
  box-shadow:0 0 10px rgba(255,194,74,.4);
}
.diff-rec-tag{
  font-family:var(--pixel);
  font-size:.46rem;
  padding:.18rem .4rem;
  background:var(--gold);
  color:#1e1200;
  border:1px solid #ffd875;
  margin-left:.35rem;
  display:inline-block;
  vertical-align:middle;
  font-weight:bold;
}
.badge-time{
  background:var(--ocean-mid)!important;
  color:var(--foam)!important;
  border-color:var(--panel-edge)!important;
}
.nav-time{
  font-family:var(--pixel);
  font-size:.48rem;
  color:var(--aqua);
  display:block;
  margin-top:.2rem;
}

/* Material Cost Calculator */
.machine-costs{
  background:var(--ocean-deep);
  border:3px solid var(--panel-edge);
  padding:1.2rem 1.5rem;
  margin-top:1.5rem;
  box-shadow:inset 0 0 16px rgba(0,0,0,.45);
}
.costs-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.8rem;
  padding-bottom:.6rem;
  border-bottom:2px solid rgba(255,255,255,.08);
}
.costs-title-group{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.costs-title-group h4{
  font-family:var(--pixel);
  font-size:.68rem;
  color:var(--gold);
  margin:0;
}
.costs-total-badge{
  font-family:var(--pixel);
  font-size:.65rem;
  background:var(--panel);
  border:2px solid var(--panel-edge);
  padding:.4rem .8rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.costs-total-badge span{
  color:var(--tide);
  font-size:.52rem;
}
.costs-total-badge .total-price{
  color:#52e077;
  font-size:.75rem;
  text-shadow:0 0 8px rgba(82,224,119,.4);
}
.costs-subtitle{
  font-size:1.05rem;
  color:var(--tide);
  margin:.6rem 0 .9rem;
}
.cost-table-wrap{
  overflow-x:auto;
}
.cost-table{
  width:100%;
  border-collapse:collapse;
  font-size:1.15rem;
}
.cost-table th,
.cost-table td{
  padding:.5rem .7rem;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cost-table th{
  font-family:var(--pixel);
  font-size:.52rem;
  color:var(--aqua);
  background:rgba(255,255,255,.02);
  letter-spacing:.05em;
}
.cost-table td{
  color:var(--foam);
}
.cost-mat-cell{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.cost-swatch{
  width:20px;
  height:20px;
  background-size:cover;
  image-rendering:pixelated;
  border:1px solid rgba(0,0,0,.5);
  flex-shrink:0;
}
.cost-input{
  font-family:var(--body);
  font-size:1.1rem;
  background:#04101c;
  color:#52e077;
  border:2px solid var(--panel-edge);
  padding:.2rem .5rem;
  width:95px;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.5);
}
.cost-input:focus{
  outline:none;
  border-color:var(--aqua);
  background:#081d30;
}
.cost-subtotal{
  font-family:var(--body);
  color:var(--gold);
  font-weight:bold;
}



/* FAQ cards ("Before you ask") - grid of bordered panels */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.2rem;
  /* All three cards match the tallest, so the row reads as one block. */
  align-items:stretch;
}
.grid-3 > .machine{
  background:linear-gradient(180deg, var(--panel), #0a1626);
  padding:1.4rem 1.5rem 1.6rem;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.grid-3 > .machine .faq-q{
  font-size:.72rem;
  line-height:1.9;
  margin:0;
  color:var(--gold);
  overflow-wrap:anywhere;
}
.grid-3 > .machine p{
  margin:0;
  color:var(--tide);
  font-size:1.15rem;
  line-height:1.55;
  overflow-wrap:anywhere;
}
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr;}
}

/* TNT Bomber nav link reads as the red one */
/* Flood Machines nav link matches the "Add a bucket" primary button */
#site-nav a.nav-flood,
#site-nav a.nav-flood.current{
  background:linear-gradient(180deg, var(--aqua), var(--aqua-deep));
  color:#04121c;
}
#site-nav a.nav-flood:hover{
  background:linear-gradient(180deg, #8ae6ff, var(--aqua));
  color:#04121c;
}

/* Wordmark: "flood" in the water blue, "donutsmp" in white */
.logo{color:var(--aqua);}
.logo em{color:#ffffff;}

#site-nav a.nav-tnt,
#site-nav a.nav-tnt.current{
  background:linear-gradient(180deg, #ff5252, #c72c2c);
  color:#fff;
}
#site-nav a.nav-tnt:hover{
  background:linear-gradient(180deg, #ff7070, #e03a3a);
  color:#fff;
}

/* Fixed shop prices - read only, right aligned with the subtotal */
.cost-unit{
  font-family:var(--pixel);
  font-size:.55rem;
  color:var(--tide);
  white-space:nowrap;
}

/* ---------- Build Fund ---------- */
.fund-tracker{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--panel-edge);
  margin-bottom:1.5rem;
}
.fund-stat{
  background:var(--ocean-deep);
  padding:1.2rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  align-items:center;
  text-align:center;
}
.fund-stat-label{font-size:1.05rem; color:var(--tide);}
.fund-stat-value{font-family:var(--pixel); font-size:1rem; color:var(--gold);}
@media (max-width:640px){
  .fund-tracker{grid-template-columns:1fr;}
}

/* Fund someone runs the full width, the same shape as the tracker strip above it. */
.fund-spotlight{
  background:var(--ocean-deep);
  padding:1.4rem 1.5rem 1.6rem;
  margin-bottom:1.5rem;
}
.fund-panel{
  background:linear-gradient(180deg, var(--panel), #0a1626);
  padding:1.4rem 1.5rem 1.6rem;
  min-width:0;
  /* Heading, hint and form all sit on the centre line of the frame. */
  text-align:center;
}
.fund-panel .fund-form{max-width:26rem; margin:0 auto;}
.fund-panel .fund-label{text-align:center;}
.fund-panel .fund-input{text-align:center;}
.fund-panel h3{font-size:.85rem; margin:0;}
.fund-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.fund-hint{color:#7d93a6; font-size:1.05rem; margin:.6rem 0 1.2rem;}
.fund-empty{color:#7d93a6; font-size:1.1rem; margin:.6rem 0 0;}

.fund-form{display:flex; flex-direction:column; gap:.5rem;}
.fund-label{font-family:var(--pixel); font-size:.52rem; color:var(--tide); margin-top:.6rem;}
.fund-input{
  font-family:var(--body);
  font-size:1.15rem;
  padding:.7rem .8rem;
  background:var(--ocean-deep);
  color:var(--foam);
  border:3px solid var(--panel-edge);
  width:100%;
}
.fund-input:focus{outline:none; border-color:var(--aqua);}
.fund-form .btn{margin-top:1rem; justify-content:center;}
.fund-filter{width:auto; max-width:100%; font-size:1rem; padding:.5rem .6rem;}

.fund-msg{margin:.8rem 0 0; font-size:1.1rem; min-height:1.4rem;}
.fund-msg-ok{color:#52e077;}
.fund-msg-err{color:var(--warn);}

.spotlight{display:flex; flex-direction:column; gap:.5rem; align-items:center; text-align:center;}
.spotlight > *{width:100%;}
.spotlight-what{margin:0 0 .9rem; font-size:1.2rem; color:var(--tide);}
.spotlight-what strong{color:var(--foam);}

/* The whole command is the copy button, so it wants to look pressable and be big
   enough to read at a glance. */
.cmd-big{
  display:block;
  width:100%;
  font-family:var(--body);
  font-size:2.4rem;
  line-height:1.3;
  color:var(--aqua);
  background:none;
  border:0;
  padding:.4rem 0;
  cursor:pointer;
  text-align:center;
  overflow-x:auto;
  white-space:nowrap;
}
.cmd-big:hover{color:var(--foam); text-decoration:underline;}
.cmd-big:active{transform:translateY(1px);}
@media (max-width:520px){
  .cmd-big{font-size:1.5rem;}
}
.cmd-hint{
  margin:.5rem 0 0;
  font-size:1rem;
  color:#7d93a6;
  text-align:center;
  min-height:1.3rem;
}
.cmd-hint-ok{color:#52e077;}
/* Paid and Skip keep a sane width instead of stretching the whole page. */
.spotlight-actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.9rem; max-width:32rem; margin-left:auto; margin-right:auto;}
.spotlight-actions .btn{flex:1 1 0; justify-content:center;}


/* Build Fund nav link (jumps to the #fund section on the current page) */
#site-nav a[href="#fund"]{
  background:linear-gradient(180deg, #7ee081, #35a05c);
  color:#05210f;
}
#site-nav a[href="#fund"]:hover{
  background:linear-gradient(180deg, #9bf09d, #4bb872);
  color:#05210f;
}

/* Cost line on each difficulty tab */
.machine-nav-btn .nav-cost{
  font-family:var(--pixel);
  font-size:.55rem;
  color:var(--gold);
}

/* Per-machine shortcuts into the Build Fund */
.machine-fund-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
}
.machine-fund-actions .btn{justify-content:center;}

/* Filter and skip-reset share the Fund someone header
   now that the queue table below it is gone. */