:root {
  color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif
}
* {
  box-sizing:border-box
}
body {
  background:#071912;
  color:#f1fdf3;
  margin:0;
  min-height:100vh;
  padding:12px
}
#zf5 {
  --mint:#97f0bb;
  --muted:#97b8a4;
  width:100%;
  max-width:595px;
  margin:0 auto;
  border:1px solid #32604a;
  background:radial-gradient(circle at 48% 2%,#1b4a35,#0c251c 52%,#0a1d17);
  border-radius:20px;
  padding:16px;
  box-shadow:0 18px 52px #0003
}
#zf5 button {
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
#zf5 button:disabled {
  opacity:.4;
  cursor:default
}
#zf5 .mast {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:9px
}
#zf5 .logo {
  font-size:27px;
  font-weight:950;
  letter-spacing:-1.65px;
  line-height:1.1
}
#zf5 .logo span {
  color:var(--mint)
}
#zf5 .tag {
  font-size:11px;
  color:#9ec4aa;
  margin-top:5px
}
#zf5 .pill {
  font-size:10px;
  letter-spacing:.07em;
  color:var(--mint);
  background:#163e2d;
  border:1px solid #47795c;
  border-radius:999px;
  padding:7px 9px;
  white-space:nowrap
}
#zf5 .modes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin:18px 0 7px;
  background:#081f16;
  border:1px solid #355943;
  padding:5px;
  border-radius:12px
}
#zf5 .modes button {
  padding:11px 6px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#9dc0aa;
  font-weight:800;
  font-size:13px
}
#zf5 .modes button.active {
  background:#9cebc0;
  color:#0a2b1b
}
#zf5 .modeDesc {
  font-size:11px;
  color:#9abbab;
  min-height:17px;
  text-align:center;
  margin-bottom:13px
}
#zf5 .panel {
  background:linear-gradient(160deg,#143827,#0c2118);
  border:1px solid #3b6950;
  border-radius:18px;
  padding:14px 11px 12px
}
#zf5 .section {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px
}
#zf5 .eyebrow {
  font-size:10px;
  letter-spacing:.13em;
  font-weight:800;
  color:#97b9a4
}
#zf5 .stage {
  font-size:21px;
  font-weight:850;
  letter-spacing:-.7px;
  margin:4px 0 0
}
#zf5 .goal {
  border:1px solid #47755a;
  padding:7px 9px;
  border-radius:9px;
  text-align:center;
  font-size:10px;
  color:#adcfb9;
  line-height:1.5
}
#zf5 .goal b {
  color:#b5efc9;
  font-size:14px
}
#zf5 .levelrow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 1px 11px
}
#zf5 .levellabel {
  font-weight:800;
  font-size:13px;
  color:#e5faea
}
#zf5 .dots {
  display:flex;
  gap:5px
}
#zf5 .dots i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2f5540;
  display:block
}
#zf5 .dots i.done {
  background:#58d19b
}
#zf5 .dots i.now {
  background:#f0d987
}
#zf5 .boardFrame {
  position:relative;
  max-width:452px;
  margin:auto
}
#zf5 .board {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  padding:8px;
  border:1px solid #355944;
  background:#081c13;
  border-radius:15px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none
}
#zf5 .cell {
  aspect-ratio:1;
  position:relative;
  min-width:0;
  background:#102c1e;
  border:1px solid #294735;
  border-radius:10px
}
#zf5 .cell.empty {
  background:#0b2017;
  border:1px dashed #294c36
}
#zf5 .cell.target {
  box-shadow:inset 0 0 0 2px #e7d08388;
  border:1px solid #e0c77a88;
  background:#2f3521
}
#zf5 .cell.target:after {
  content:'◎';
  position:absolute;
  color:#f3da89;
  font-size:14px;
  top:3px;
  right:5px;
  pointer-events:none
}
#zf5 .tile {
  position:absolute;
  inset:0;
  border:1px solid #4a805d;
  border-radius:9px;
  color:#f1fff4;
  font-weight:850;
  font-size:clamp(19px,5vw,32px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#2c6449,#1d4632);
  width:100%;
  height:100%;
  font-variant-numeric:tabular-nums;
  touch-action:none;
  z-index:2;
  cursor:grab;
  transition:background .1s,border-color .1s
}
#zf5 .tile:active {
  cursor:grabbing
}
#zf5 .tile.picked {
  border:2px solid #a5defd;
  background:linear-gradient(140deg,#347b92,#25546b)
}
#zf5 .tile.destination {
  border-color:#9de6bd;
  background:linear-gradient(140deg,#367954,#23523c)
}
#zf5 .tile .math {
  position:absolute;
  font-size:10px;
  color:#bafed1;
  bottom:4px;
  font-weight:800;
  line-height:1
}
#zf5 .tile.dragging {
  opacity:.15
}
#zf5 .tile.arrival {
  animation:zf5pop .36s cubic-bezier(.14,1.6,.4,1)
}
#zf5 .fx {
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none
}
#zf5 .ghost {
  position:absolute;
  z-index:9;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  border:1px solid #8be6b4;
  background:linear-gradient(145deg,#2b7757,#1f533f);
  color:#f4fff7;
  font-size:clamp(19px,5vw,32px);
  font-weight:850;
  box-shadow:0 8px 20px #0005;
  will-change:transform,opacity;
  pointer-events:none
}
#zf5 .ghost.primary {
  border-color:#a1e3fd;
  background:linear-gradient(145deg,#42849b,#285874);
  z-index:10
}
#zf5 .ghost.flying {
  transition:transform .3s cubic-bezier(.2,.85,.24,1),opacity .3s ease,filter .3s ease
}
#zf5 .burst {
  position:absolute;
  z-index:12;
  pointer-events:none;
  color:#a5ffcd;
  font-weight:900;
  font-size:17px;
  white-space:nowrap;
  text-shadow:0 0 15px #79f1a7;
  animation:zf5burst .85s ease-out forwards
}
#zf5 .feedback {
  color:#afcfbb;
  font-size:12px;
  text-align:center;
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.45;
  margin-top:9px;
  padding:0 8px
}
#zf5 .feedback.good {
  color:#9ff0c2
}
#zf5 .feedback.warn {
  color:#f7d3a3
}
#zf5 .controls {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:4px
}
#zf5 .controls button,#zf5 .secondary {
  border:1px solid #416e50;
  background:#163a28;
  color:#e4f9e9;
  padding:11px 7px;
  font-weight:700;
  font-size:12px;
  border-radius:10px
}
#zf5 .controls button:hover:not(:disabled),#zf5 .secondary:hover:not(:disabled) {
  background:#22513a
}
#zf5 .victory {
  display:none;
  text-align:center;
  padding:4px
}
#zf5 .victory .star {
  color:#adf8cf;
  font-size:30px
}
#zf5 .victory h3 {
  margin:2px 0;
  font-size:22px
}
#zf5 .victory p {
  color:#a5c9b1;
  font-size:12px;
  margin:5px 0 14px
}
#zf5 .next {
  background:#9decbd;
  border:0;
  border-radius:10px;
  padding:11px 25px;
  color:#0a2c1e;
  font-size:13px;
  font-weight:850
}
#zf5 .footerRow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px
}
#zf5 .footerRow .subtle {
  font-size:10px;
  color:#93baa2
}
#zf5 .guide {
  margin-top:13px;
  padding:12px;
  border-radius:12px;
  border:1px solid #31533f;
  background:#0d261b;
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:11px;
  color:#a0bfaa;
  line-height:1.55
}
#zf5 .guide b {
  color:#e8fff0
}
#zf5 .guideIcon {
  border:1px solid #518a64;
  color:#b7efd0;
  border-radius:8px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  flex:none;
  font-size:16px
}
#zf5 .fine {
  text-align:center;
  margin-top:10px;
  font-size:10px;
  color:#86ac91
}
@media(max-width:420px) {
  body {
    padding:0
  }
  #zf5 {
    padding:12px 9px;
    border-radius:13px
  }
  #zf5 .panel {
    padding:12px 8px
  }
  #zf5 .board {
    gap:5px;
    padding:5px
  }
  #zf5 .cell,#zf5 .tile,#zf5 .ghost {
    border-radius:7px
  }
  #zf5 .tile .math {
    font-size:8px;
    bottom:3px
  }
}
@media(prefers-reduced-motion:reduce) {
  #zf5 .ghost.flying {
    transition-duration:.01s
  }
  #zf5 .tile.arrival,#zf5 .burst {
    animation-duration:.01s
  }
}
/* Visible fixed target */
#zf5 .cell.target {
  background:radial-gradient(circle,#6a5b26,#292716);
  border:2px solid #f1cf66;
  box-shadow:inset 0 0 0 2px #bd965a55,0 0 13px #f8d46a33
}
#zf5 .cell.target:after {
  content:'◎';
  position:absolute;
  top:3px;
  right:4px;
  z-index:5;
  background:#f3d679;
  color:#3e3210;
  border-radius:5px;
  font-size:14px;
  font-weight:900;
  line-height:1;
  padding:2px 4px;
  pointer-events:none;
  box-shadow:0 2px 7px #0004
}
#zf5 .cell.target:before {
  content:'TARGET';
  position:absolute;
  bottom:3px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  color:#f9dc82;
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
  pointer-events:none;
  text-shadow:0 1px 3px #000
}
#zf5 .cell.target .tile {
  background:linear-gradient(140deg,#76632a,#4e4928);
  border:2px solid #e6c873;
  color:#fffbe4
}
#zf5 .cell.target .tile.picked {
  background:linear-gradient(140deg,#447d85,#274f57)
}
#zf5 .cell.target.empty {
  background:repeating-linear-gradient(45deg,#493f1e,#493f1e 7px,#3b3520 7px,#3b3520 14px)
}
@media(max-width:420px) {
  #zf5 .cell.target:before {
    font-size:7px
  }
  #zf5 .cell.target:after {
    font-size:12px
  }
}
/* OneZero v6 - play2048-inspired, stripped-back frame; v5 board and colors retained. */
#zf5 {
  max-width:525px;
  padding:17px 16px 18px;
  min-height:auto
}
#zf5 .mast {
  align-items:center;
  margin-bottom:21px;
  position:relative;
  gap:8px
}
#zf5 .identity {
  display:flex;
  align-items:center;
  min-width:0;
  gap:11px
}
#zf5 .menuAnchor {
  position:relative;
  flex:none;
  z-index:20
}
#zf5 .menuToggle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:43px;
  height:43px;
  border-radius:11px;
  background:#173d2d;
  border:1px solid #45745a;
  color:#dafbe8
}
#zf5 .menuToggle svg,#zf5 .previous svg,#zf5 .tool svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}
#zf5 .menuToggle[aria-expanded="true"] {
  background:#2b6247;
  border-color:#99e4b9
}
#zf5 .logo {
  font-size:30px;
  line-height:.96
}
#zf5 .tag {
  font-size:11px;
  color:#b4d4c0;
  margin-top:6px;
  white-space:nowrap
}
#zf5 .modeLabel {
  color:#a3cbb3;
  font-size:11px;
  font-weight:750;
  border:1px solid #3d7153;
  background:#123324;
  padding:8px 10px;
  border-radius:9px;
  white-space:nowrap
}
#zf5 .gameMenu[hidden] {
  display:none!important
}
#zf5 .gameMenu {
  position:absolute;
  z-index:40;
  left:0;
  top:calc(100% + 9px);
  width:244px;
  padding:6px;
  background:#173b2b;
  border:1px solid #55896a;
  box-shadow:0 20px 36px #0008;
  border-radius:13px
}
#zf5 .gameMenu button {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  background:transparent;
  color:#e4f9e7;
  border:0;
  border-radius:8px;
  padding:11px;
  cursor:pointer
}
#zf5 .gameMenu button:hover,#zf5 .gameMenu button[aria-checked="true"] {
  background:#28563e
}
#zf5 .gameMenu b {
  display:block;
  font-size:13px;
  font-weight:800
}
#zf5 .gameMenu small {
  display:block;
  margin-top:2px;
  font-size:11px;
  color:#a8c6b2
}
#zf5 .gameMenu .check {
  color:#a7efc3;
  opacity:0;
  font-size:16px
}
#zf5 .gameMenu button[aria-checked="true"] .check {
  opacity:1
}
#zf5 .menuDivider {
  height:1px;
  margin:4px 8px;
  background:#416f55
}
#zf5 .levelrow {
  margin:0 0 11px;
  gap:10px
}
#zf5 .levellabel {
  font-size:16px;
  font-weight:850;
  white-space:nowrap
}
#zf5 .dots {
  flex:1;
  justify-content:flex-end
}
#zf5 .previous {
  border:1px solid #416e50;
  background:#163a28;
  color:#e4f9e9;
  padding:5px;
  border-radius:8px;
  width:30px;
  height:30px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex:none
}
#zf5 .previous svg {
  width:16px;
  height:16px
}
#zf5 .panel {
  padding:12px 12px 14px;
  border-radius:17px
}
#zf5 .feedback {
  min-height:33px;
  margin-top:6px;
  padding:0 8px
}
#zf5 .feedback:empty {
  min-height:0;
  margin:0
}
#zf5 .controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:7px 0 1px
}
#zf5 .controls .tool {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  flex:none;
  width:49px;
  height:45px;
  padding:0;
  border:1px solid #416e50;
  background:#163a28;
  color:#e4f9e9;
  border-radius:11px;
  cursor:pointer
}
#zf5 .controls .tool:hover:not(:disabled) {
  background:#22513a
}
#zf5 .controls .tool svg {
  width:21px;
  height:21px
}
#zf5 .controls .charge {
  position:absolute;
  right:-5px;
  top:-7px;
  background:#a2f1c6;
  border:1px solid #133c29;
  color:#0a2d1c;
  font-size:10px;
  font-weight:900;
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:10px;
  padding:0 3px
}
#zf5 .controls .charge.empty {
  background:#465c4c;
  color:#e2f3e5
}
#zf5 .controls .tool::after {
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 9px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  font-size:11px;
  white-space:nowrap;
  background:#e0f8e8;
  color:#133f29;
  border-radius:6px;
  padding:6px 8px;
  font-weight:750;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s,transform .14s;
  z-index:45;
  box-shadow:0 3px 11px #0006
}
#zf5 .controls .tool:hover::after,#zf5 .controls .tool:focus-visible::after {
  opacity:1;
  transform:translateX(-50%) translateY(0)
}
#zf5 .controls .tool:focus-visible,#zf5 .menuToggle:focus-visible,#zf5 .previous:focus-visible {
  outline:2px solid #9ce9c0;
  outline-offset:3px
}
#zf5 .victory {
  margin-top:8px;
  border-top:1px solid #31543e;
  padding-top:13px
}
#zf5 .tutorialStep {
  color:#a3e9c1;
  font-weight:750
}
@media(max-width:430px) {
  body {
    padding:0
  }
  #zf5 {
    padding:13px 10px;
    min-height:100vh;
    border-radius:0
  }
  #zf5 .mast {
    margin-bottom:17px
  }
  #zf5 .identity {
    gap:8px
  }
  #zf5 .logo {
    font-size:27px
  }
  #zf5 .tag {
    font-size:10px
  }
  #zf5 .menuToggle {
    width:39px;
    height:41px
  }
  #zf5 .modeLabel {
    font-size:10px;
    padding:7px
  }
  #zf5 .controls {
    gap:7px
  }
  #zf5 .controls .tool {
    width:46px;
    height:44px
  }
  #zf5 .panel {
    padding:10px 9px
  }
}
@media(max-width:345px) {
  #zf5 .logo {
    font-size:24px
  }
  #zf5 .tag {
    font-size:9px
  }
  #zf5 .controls {
    gap:5px
  }
  #zf5 .controls .tool {
    width:43px;
    height:43px
  }
}
/* OneZero v7 — immersive viewport, centered play and navigable level bars. */
html,body {
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
  background:#0a1d17
}
#zf5 {
  width:100%;
  max-width:none;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:clamp(14px,2.2vw,26px) clamp(14px,3vw,44px) max(12px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  background:radial-gradient(ellipse at 50% 36%,#1b4a35 0%,#0c251c 58%,#0a1d17 100%)
}
#zf5 .mast {
  margin:0 auto;
  width:100%;
  max-width:none;
  flex:none
}
#zf5 .playArea {
  flex:1;
  min-height:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 0
}
#zf5 .playStack {
  width:min(100%,452px);
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0
}
#zf5 .panel {
  width:100%;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none
}
#zf5 .boardFrame {
  width:100%;
  max-width:none;
  margin:0
}
#zf5 .levelrow {
  width:100%;
  margin:0 0 11px;
  display:flex;
  flex-direction:column;
  gap:9px
}
#zf5 .levelTop {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:29px
}
#zf5 .levelLeft {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0
}
#zf5 .levellabel {
  font-size:17px;
  font-weight:850
}
#zf5 .barPaging {
  display:flex;
  align-items:center;
  gap:5px
}
#zf5 .barPaging button {
  height:29px;
  width:28px;
  display:grid;
  place-items:center;
  border:1px solid #416e50;
  background:#163a28;
  color:#e4f9e9;
  border-radius:8px;
  font-size:22px;
  font-weight:550;
  line-height:1;
  padding:0 0 2px
}
#zf5 .barPaging button:hover:not(:disabled) {
  background:#22513a
}
#zf5 .barPaging button:focus-visible,#zf5 .dots button:focus-visible {
  outline:2px solid #9ce9c0;
  outline-offset:3px
}
#zf5 .dots {
  width:100%;
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:5px;
  margin:0;
  padding:0
}
#zf5 .dots .levelBar {
  height:15px;
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  padding:4px 0;
  position:relative;
  cursor:default;
  border-radius:3px
}
#zf5 .dots .levelBar:before {
  content:'';
  position:absolute;
  top:4px;
  left:0;
  right:0;
  height:7px;
  border-radius:5px;
  background:#2d5540;
  transition:background .15s,box-shadow .15s
}
#zf5 .dots .levelBar.done {
  cursor:pointer
}
#zf5 .dots .levelBar.done:before {
  background:#60d7a2
}
#zf5 .dots .levelBar.done:hover:before {
  background:#a3ffd0;
  box-shadow:0 0 9px #65ffba6b
}
#zf5 .dots .levelBar.now:before {
  background:#f0d987;
  box-shadow:0 0 5px #ebd3813d
}
#zf5 .dots .levelBar[disabled] {
  opacity:1;
  cursor:default
}
#zf5 .board {
  border:1px solid #355944
}
#zf5 .controls {
  margin:13px 0 0;
  gap:12px
}
#zf5 .feedback {
  min-height:18px;
  margin-top:5px;
  font-size:12px
}
#zf5 .feedback:empty {
  min-height:18px
}
#zf5 .victory {
  margin-top:10px;
  border-top:0;
  padding-top:4px
}
#zf5 .controls .tool::after {
  z-index:55
}
#zf5 .menuAnchor {
  z-index:80
}
@media(max-width:430px) {
  body {
    padding:0
  }
  #zf5 {
    padding:13px 12px max(12px,env(safe-area-inset-bottom));
    border:0;
    border-radius:0
  }
  #zf5 .mast {
    margin:0
  }
  #zf5 .playArea {
    padding:7px 0
  }
  #zf5 .panel {
    padding:0;
    border:0;
    border-radius:0
  }
  #zf5 .levelrow {
    margin-bottom:8px;
    gap:7px
  }
  #zf5 .controls {
    margin-top:10px
  }
  #zf5 .dots {
    gap:4px
  }
  #zf5 .dots .levelBar:before {
    height:6px
  }
}
@media(max-height:700px) {
  #zf5 .boardFrame {
    width:min(100%,calc(100dvh - 275px));
    margin-left:auto;
    margin-right:auto
  }
  #zf5 .levelrow {
    width:min(100%,calc(100dvh - 275px));
    margin-left:auto;
    margin-right:auto
  }
  #zf5 .controls .tool {
    height:40px;
    width:45px
  }
  #zf5 .mast {
    margin-bottom:0
  }
  #zf5 .playArea {
    padding:4px 0
  }
  #zf5 .feedback {
    min-height:16px;
    font-size:11px
  }
}
@media(max-height:480px) {
  #zf5 .boardFrame,#zf5 .levelrow {
    width:min(100%,calc(100dvh - 220px))
  }
  #zf5 .playArea {
    padding:4px 0
  }
}
/* Compact controls and guided tutorial. */
#zf5 .previous {
  display:none!important
}
#zf5 .dots .levelBar.ready {
  cursor:pointer
}
#zf5 .dots .levelBar.ready:before {
  background:#e3ca77;
  box-shadow:0 0 8px #d6d68877
}
#zf5 .dots .levelBar.ready:hover:before {
  background:#fff0ad
}
#zf5 .dots .levelBar.done.now:before {
  background:#60d7a2;
  box-shadow:0 0 0 1px #f0d987,0 0 8px #b7efb150
}
#zf5 .feedback {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  min-height:0!important
}
#zf5 .levelrow.inTutorial {
  display:none!important
}
#zf5 .modeLabel[hidden] {
  display:none!important
}
#zf5 .cell.target {
  border:2px solid #f1cf66;
  box-shadow:inset 0 0 0 2px #bd965a55,0 0 13px #f8d46a33
}
#zf5 .cell.target:before,#zf5 .cell.target:after {
  content:none!important;
  display:none!important
}
#zf5 .cell.target.empty {
  background:#0b2017
}
#zf5 .cell.target .tile {
  background:linear-gradient(145deg,#2c6449,#1d4632);
  border:1px solid #4a805d;
  color:#f1fff4
}
#zf5 .cell.target .tile.picked {
  background:linear-gradient(140deg,#347b92,#25546b);
  border:2px solid #a5defd
}
#zf5 .tutorialTip {
  position:relative;
  margin:0 0 15px;
  text-align:center;
  padding:16px 14px 18px;
  border-radius:15px;
  background:#1e4a35;
  border:1px solid #6da782;
  box-shadow:0 10px 30px #0003,0 0 25px #74e4a018
}
#zf5 .tutorialTip[hidden] {
  display:none!important
}
#zf5 .tutorialTip:after {
  content:'';
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%) rotate(45deg);
  width:14px;
  height:14px;
  background:#1e4a35;
  border-bottom:1px solid #6da782;
  border-right:1px solid #6da782
}
#zf5 .tutorialStepCount {
  font-size:11px;
  color:#a3d8b8;
  letter-spacing:.17em;
  font-weight:850;
  margin-bottom:6px
}
#zf5 .tutorialInstruction {
  font-size:20px;
  color:#effff3;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.4px
}
#zf5 .tutorialArrow {
  position:absolute;
  inset:0;
  z-index:6;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  filter:drop-shadow(0 2px 7px #052019) drop-shadow(0 0 7px #c2ffd4);
  animation:onezeroArrowPulse 1.35s ease-in-out infinite alternate
}
#zf5 .tutorialArrow[hidden] {
  display:none!important
}
#zf5 .tile.tutorialSource {
  border:3px solid #e3ffd1;
  box-shadow:inset 0 0 0 1px #75f2a7,0 0 20px #75f2a780;
  background:linear-gradient(140deg,#3c9464,#266b45)
}
#zf5 .tile.tutorialDestination {
  border:2px solid #d4f6ad;
  box-shadow:inset 0 0 0 1px #f4ffbd66
}
#zf5 .controls .tool:disabled {
  opacity:.35
}
@media(max-width:430px) {
  #zf5 .tutorialTip {
    padding:13px 10px 15px;
    margin-bottom:12px
  }
  #zf5 .tutorialInstruction {
    font-size:18px
  }
}
@media(prefers-reduced-motion:reduce) {
  #zf5 .tutorialArrow {
    animation:none!important
  }
}
/* v9: balance and movement enhancements; original theme and grid unchanged. */
#zf5 .controls .tool[hidden] {
  display:none!important
}
#zf5 .controls .charge[hidden] {
  display:none!important
}
#zf5 .controls .tool .charge {
  position:absolute;
  right:-6px;
  top:-7px;
  background:#a2f1c6;
  border:1px solid #133c29;
  color:#0a2d1c;
  font-size:10px;
  font-weight:900;
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:10px;
  padding:0 3px;
  pointer-events:none
}
#zf5 .controls .tool .charge.empty {
  background:#526c59;
  color:#f1fff4
}
#zf5 .controls #undo .charge,#zf5 .controls #hint .charge {
  font-variant-numeric:tabular-nums
}

/* v11 — golden winning zero and restrained completion. */
#zf5 .tile.wonZero {
  background:linear-gradient(150deg,#f8e49b 0%,#e2bd62 53%,#be8d37 100%)!important;
  border:2px solid #fff0ab!important;
  color:#362604!important;
  box-shadow:0 0 20px #efce6590,inset 0 1px 2px #fff8d8a0!important;
  animation:onezeroGoldPop .38s cubic-bezier(.2,1.5,.4,1) both
}
/* v10 — quick level reveal and overlays directly over the 4×4 grid. */
#zf5 .resultOverlay [hidden] {
  display:none!important
}
#zf5 .tile.levelReveal {
  animation:onezeroLevelReveal .235s cubic-bezier(.17,1.45,.48,1) both;
  animation-delay:var(--revealDelay,0ms);
  transform-origin:center center
}
#zf5 .tile.failed {
  background:linear-gradient(145deg,#be4b52,#822c39)!important;
  border:2px solid #ff8790!important;
  color:#fff6f7!important;
  box-shadow:inset 0 0 10px #ee64633a,0 0 19px #ee646366!important;
  animation:onezeroFailPulse .48s ease-out both
}
#zf5 .resultOverlay {
  position:absolute;
  inset:0;
  z-index:25;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  background:rgba(3,13,9,.5);
  overflow:hidden;
  animation:onezeroOverlayIn .25s ease-out both
}
#zf5 .resultOverlay[hidden] {
  display:none!important
}
#zf5 .resultContent {
  position:relative;
  z-index:2;
  text-align:center;
  max-width:95%;
  padding:20px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  filter:drop-shadow(0 2px 15px #001b12c4)
}
#zf5 .resultTitle {
  font-size:clamp(26px,5vw,36px);
  line-height:1.1;
  letter-spacing:-.8px;
  font-weight:900;
  color:#f3fff5;
  text-wrap:balance;
  margin:0;
  text-shadow:0 2px 15px #05271e
}
#zf5 .resultOverlay.failed .resultTitle {
  color:#fff1ee
}
#zf5 .resultOverlay .next,#zf5 .resultOverlay .retry {
  font:inherit;
  border:0;
  border-radius:11px;
  background:#9decbd;
  color:#0a2c1e;
  font-weight:850;
  font-size:14px;
  padding:13px 23px;
  min-width:156px;
  box-shadow:0 6px 20px #03190d77;
  cursor:pointer
}
#zf5 .resultOverlay .next:hover,#zf5 .resultOverlay .retry:hover {
  background:#b5ffd0
}
#zf5 .resultOverlay .retry {
  background:#f4dfc1;
  color:#492a19
}
#zf5 .resultOverlay .retry:hover {
  background:#fff1dd
}
@media(prefers-reduced-motion:reduce) {
  #zf5 .tile.levelReveal,#zf5 .tile.failed,#zf5 .tile.wonZero,#zf5 .resultOverlay {
    animation:none!important;
    opacity:1!important;
    transform:none!important
  }
}

/* Show search errors/status in the existing feedback area, without a new panel. */
#zf5 .feedback.hintMessage {
  position:static!important;
  width:auto!important;
  height:auto!important;
  margin:8px 0 0!important;
  padding:0 8px!important;
  overflow:visible!important;
  clip:auto!important;
  white-space:normal!important;
  min-height:18px!important;
}

/* Verified hints: the Tutorial arrow, with restrained target/success gold. */
#zf5 .tile.hintSource,#zf5 .tile.hint,
#zf5 .cell.target .tile.hintSource,#zf5 .cell.target .tile.hint {
  border:2px solid #f1cf66;
  box-shadow:inset 0 0 0 1px #f1cf6633,0 0 10px #f1cf6626;
}
#zf5 .tutorialArrow.hintArrow {
  animation:none;
  filter:drop-shadow(0 2px 4px #052019);
}
#zf5 .hintArrow #tutorialArrowPath { stroke:#f1cf66; }
#zf5 .hintArrow #tutorialHead path { fill:#f1cf66; }

/* Optional first-visit welcome: an in-flow card, never a gameplay-blocking modal. */
#zf5 .welcomePopup[hidden] { display:none; }
#zf5 .welcomePopup {
  position:relative;
  margin:0 0 12px;
  padding:14px 38px 14px 14px;
  border:1px solid #55896a;
  border-radius:13px;
  background:#173b2b;
  color:#e4f9e7;
}
#zf5 .welcomePopup h2 { margin:0; font-size:18px; font-weight:850; }
#zf5 .welcomePopup p { margin:5px 0 12px; color:#a8c6b2; font-size:12px; }
#zf5 .welcomePopup .next { padding:8px 14px; font-size:12px; }
#zf5 .welcomeClose {
  position:absolute;
  top:7px;
  right:7px;
  width:30px;
  height:30px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#e4f9e7;
  font-size:22px;
  line-height:1;
}
#zf5 .welcomeClose:hover { background:#28563e; }
#zf5 .welcomePopup button:focus-visible { outline:2px solid #9ce9c0; outline-offset:2px; }