@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --acc:#e8ff47;--acc2:#ff6b35;--bg:#0d0d0d;--surf:#1a1a1a;--surf2:#222;
  --txt:#f0f0f0;--mut:#888;--bdr:#333;--cyan:#00cccc;--barrier:#ff4466;
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--txt);font-family:'IBM Plex Mono',monospace;display:flex;flex-direction:column}

/* ── Header ── */
.hdr{display:flex;align-items:center;padding:0 16px;height:44px;border-bottom:1px solid var(--bdr);flex-shrink:0;position:relative}
.hdr h1{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;letter-spacing:-1px;color:var(--acc);margin-right:8px}
.tabs{display:flex;gap:2px;position:absolute;left:50%;transform:translateX(-50%)}
.tab{background:transparent;border:1px solid var(--bdr);color:var(--mut);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:5px 14px;cursor:pointer;transition:all .12s}
.tab:hover{border-color:var(--acc);color:var(--acc)}
.tab.on{background:var(--acc);color:#0d0d0d;border-color:var(--acc);font-weight:700}

/* ── Screens ── */
.screen{flex:1;display:none;overflow:hidden;min-height:0}
.screen.active{display:flex}

/* ── Three-column layout ── */
.col-side{width:220px;flex-shrink:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--bdr)}
.col-side.right{border-right:none;border-left:1px solid var(--bdr)}
.col-main{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:14px}

/* ── Panels ── */
.panel{background:var(--surf);border:1px solid var(--bdr);padding:10px}
.ptitle{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.slrow{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.slrow:last-child{margin-bottom:0}
.slrow label{font-size:11px;color:var(--mut);width:46px;flex-shrink:0}
.slrow input[type=range]{flex:1;min-width:0;accent-color:var(--acc)}
.slrow .val{font-size:12px;font-weight:700;color:var(--acc);min-width:16px;text-align:right}
.hint{font-size:9px;color:var(--mut);line-height:1.5;margin-top:4px}

/* ── Tool buttons ── */
.tool-row{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.tbtn{background:var(--surf2);border:1px solid var(--bdr);color:var(--txt);font-family:'Space Mono',monospace;font-size:10px;padding:4px 7px;cursor:pointer;transition:all .12s}
.tbtn:hover{border-color:var(--acc);color:var(--acc)}
.tbtn.on{background:var(--acc);color:#0d0d0d;border-color:var(--acc);font-weight:700}
.tbtn.barrier-on{background:#3a0010;border-color:var(--barrier);color:var(--barrier)}

/* ── Saved layout items ── */
.pi{background:var(--surf2);border:1px solid var(--bdr);padding:5px 8px;cursor:pointer;font-size:10px;transition:all .12s;color:var(--mut);line-height:1.3}
.pi:hover{border-color:var(--acc);color:var(--acc)}
.pi .pn{display:block;color:var(--txt)}
.pi:hover .pn{color:var(--acc)}
.pi .pd{display:block;font-size:9px;margin-top:1px}

/* ── Buttons ── */
.big-btn{background:var(--acc);border:none;color:#0d0d0d;font-family:'Syne',sans-serif;font-weight:800;font-size:12px;padding:8px;cursor:pointer;width:100%;transition:transform .1s}
.big-btn:hover{transform:scale(1.02)}
.sec-btn{background:transparent;border:1px solid var(--bdr);color:var(--mut);font-family:'Space Mono',monospace;font-size:10px;padding:6px;cursor:pointer;transition:all .12s;width:100%}
.sec-btn:hover{border-color:var(--acc2);color:var(--acc2)}

/* ── Wrap toggles ── */
.wrap-tog{display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:9px;color:var(--mut);border:1px solid #2a2a2a;background:var(--surf2);transition:all .1s;flex-shrink:0;user-select:none}
.wrap-tog:hover{border-color:var(--cyan);color:var(--cyan)}
.wrap-tog.on{background:#002a2a;border-color:var(--cyan);color:var(--cyan)}

/* ── Play view ── */
.play-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{display:flex;flex-direction:column;align-items:center;background:var(--surf);border:1px solid var(--bdr);padding:8px 6px}
.sv{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums;display:block;text-align:center}
.sl{font-size:9px;color:var(--mut);letter-spacing:1px;text-transform:uppercase}
.puzzle-area{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start}

/* ── Tiles ── */
.tile-el{position:absolute;user-select:none;font-family:'Syne',sans-serif;font-weight:700}
.tile-el.inert{background:#2a2a2a;border:1px solid var(--bdr);color:var(--txt)}
.tile-el.movable{background:#2a2a2a;border:1px solid var(--bdr);color:var(--txt);cursor:pointer}
.tile-el.movable:hover,.tile-el.movable.tile-hover{background:#333}
#puzzleMount.hl-moves .tile-el.movable{color:var(--acc);font-weight:700}
#puzzleMount.hl-moves .tile-el.movable.wrap-move{color:var(--cyan);font-weight:700}
.tile-el.multi-dir{cursor:default}

/* ── Arrow buttons (multi-direction tiles) ── */
.arr-btn{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid var(--acc);background:#4a4a00;color:var(--acc);cursor:pointer;z-index:3;transition:background .1s}
.arr-btn:hover{background:#666600}
.arr-btn.wrap-arr{border-color:var(--cyan);background:#003030;color:var(--cyan)}
.arr-btn.wrap-arr:hover{background:#005050}
.arr-btn.up{top:0;left:50%;transform:translateX(-50%)}
.arr-btn.down{bottom:0;left:50%;transform:translateX(-50%)}
.arr-btn.left{left:0;top:50%;transform:translateY(-50%)}
.arr-btn.right{right:0;top:50%;transform:translateY(-50%)}

/* ── Row/col slide buttons ── */
.slide-btn{display:flex;align-items:center;justify-content:center;background:#001a1a;border:1px solid var(--cyan);color:var(--cyan);cursor:pointer;font-size:10px;transition:background .1s}
.slide-btn:hover{background:#003030}

/* ── Stat highlighting ── */
#puzzleMount.hl-wrong .tile-el.misplaced{border-color:var(--acc2)!important;background:#2a1000!important;color:var(--acc2)!important}
#puzzleMount.hl-wrong .tile-el:not(.misplaced){opacity:0.25}

/* ── Mark colours ── */
.tile-el.marked{background:var(--mc-bg)!important}
.tile-el.marked:hover{filter:brightness(1.25)}

/* ── Ghost tiles (goal overlay) ── */
.ghost-bg{position:absolute;top:0;left:0;width:100%;height:100%;display:none;pointer-events:none;z-index:1;background:var(--bg)}
#puzzleMount.hl-solved .ghost-bg{display:block}
.ghost-grid{position:absolute;top:0;left:0;display:none;pointer-events:none;z-index:4}
#puzzleMount.hl-solved .ghost-grid{display:block}
.ghost-tile{position:absolute;display:none;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:700;pointer-events:none;z-index:5}
.ghost-tile.ghost-correct{border:1px solid rgba(232,255,71,.55);background:rgba(232,255,71,.1);color:rgba(232,255,71,.7)}
.ghost-tile.ghost-wrong{border:1px dashed rgba(255,255,255,.2);background:rgba(255,255,255,.03);color:rgba(255,255,255,.25)}
#puzzleMount.hl-solved .ghost-tile{display:flex}
#puzzleMount.hl-solved .tile-el{opacity:0;pointer-events:none;transition:opacity .15s}

/* ── Options ── */
.ms{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:transform .1s,border-color .1s}
.ms:hover{transform:scale(1.25)}
.ms.ms-active{border-color:rgba(255,255,255,.55)}
.stat.hoverable{cursor:help;transition:color .12s}
.stat.hoverable:hover .sv,.stat.hoverable:hover .sl{color:var(--acc2)}
.opt-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px;width:100%}
.opt-row:last-child{margin-bottom:0}
.opt-label{font-size:10px;color:var(--txt);line-height:1.4;flex:1}
.opt-sub{font-size:9px;color:var(--mut);display:block;margin-top:1px}

/* ── Toggle switch ── */
.toggle{position:relative;width:34px;height:18px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{position:absolute;inset:0;background:#333;border:1px solid var(--bdr);cursor:pointer;transition:background .15s}
.toggle input:checked~.toggle-track{background:#3a3a00;border-color:var(--acc)}
.toggle-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--mut);transition:transform .15s,background .15s;pointer-events:none}
.toggle input:checked~.toggle-track .toggle-thumb{transform:translateX(16px);background:var(--acc)}

/* ── Layout stats panel ── */
#layoutStatsContent>div{padding:1px 0}

/* ── Built-in layout lock (editor read-only) ── */
.editor-locked canvas{cursor:not-allowed!important}
#gridSizePanel{position:relative}
#gridSizePanel.grid-locked{pointer-events:none}
#gridSizePanel.grid-locked .slrow input{opacity:.35}
#gridSizePanel.grid-locked::after{content:'🔒';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;pointer-events:none}

/* ── Win overlay ── */
.win-overlay{background:var(--surf);border:1px solid var(--acc);padding:16px;text-align:center;display:none;width:100%}
.win-overlay.show{display:block}
.win-t{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;color:var(--acc);margin-bottom:4px}
.win-s{font-size:10px;color:var(--mut);margin-bottom:12px}