/* Medieval Block Engineer - layout follows the Figma frames (dark rounded panels, red-orange accent). */
:root { --bg:#1b1e23; --panel:rgba(30,34,40,.93); --panel2:#262b32; --line:rgba(255,255,255,.09); --text:#f3efe8; --soft:#c4bfb4; --muted:#8f8a80; --accent:#c9503d; --accent2:#e0705a; --ok:#6fcf8a; --warn:#f3b73e; --bad:#ff6a5b; --blue:#4a9de8; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:14px/1.4 Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; overflow:hidden; }
body.embed-mode, body.embed-mode #app { height:100vh; height:100dvh; }
#app { position:relative; width:100%; height:100vh; height:100dvh; }
#c { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; outline:none; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
button { font:inherit; color:inherit; cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--warn); outline-offset:2px; }
button:disabled { cursor:not-allowed; opacity:.45; }
/* top */
#modes { position:absolute; left:50%; top:14px; transform:translateX(-50%); display:flex; gap:8px; z-index:6; }
.pill { height:34px; padding:0 20px; border-radius:999px; border:0; background:#343a42; color:#eee; font-weight:600; font-size:13px; }
.pill.on { background:var(--accent); color:#fff; }
#icons { position:absolute; right:14px; top:12px; display:flex; gap:8px; z-index:6; }
.ibtn { width:52px; height:52px; border-radius:12px; border:0; background:#343a42; display:grid; place-items:center; }
.ibtn svg { width:26px; height:26px; fill:none; stroke:#eee; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ibtn:hover { background:#434a54; }
/* palette */
#pal { position:absolute; left:14px; top:70px; width:230px; padding:10px; background:var(--panel); border-radius:16px; z-index:5; display:flex; flex-direction:column; gap:6px; }
.cat { display:flex; align-items:center; gap:12px; height:48px; padding:0 10px; border-radius:12px; border:0; background:var(--panel2); font-weight:600; font-size:14px; text-align:left; }
.cat .ic { width:28px; height:28px; border-radius:8px; background:#9aa0a8; display:grid; place-items:center; font-size:16px; flex:none; background:linear-gradient(145deg,#a8aeb6,#80868e); }
.cat.on { background:var(--accent); color:#fff; }
.cat.soon { color:var(--soft); }
#pal .hint { margin:6px 4px 2px; font-size:12px; color:var(--muted); }
/* tray */
#tray { position:absolute; left:258px; bottom:14px; right:340px; max-width:680px; padding:10px 12px; background:var(--panel); border-radius:16px; z-index:5; }
#chips { display:none; }
#tiles { display:flex; gap:10px; overflow-x:auto; scrollbar-width:thin; }
.tile { flex:0 0 auto; width:112px; min-height:92px; padding:8px 6px 6px; border-radius:12px; border:2px solid transparent; background:var(--panel2); display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.tile .ph { width:84px; height:50px; border-radius:8px; background:linear-gradient(160deg,#4b2f2a,#7d3f33); display:grid; place-items:center; overflow:hidden; }
.tile .ph img { width:100%; height:100%; object-fit:contain; }
.tile.on { border-color:var(--accent2); background:#32272a; }
.tile.soon { opacity:.55; }
.tile .bd { font-size:10px; color:var(--warn); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.tile.next .ph { box-shadow:0 0 0 2px var(--ok) inset; }
/* controls + info + inspector */
#ctl { position:absolute; right:14px; top:76px; width:318px; max-height:calc(100% - 76px - 190px); overflow:auto; padding:14px; background:var(--panel); border-radius:16px; z-index:5; font-size:13px; }
#ctl h2 { margin:0 0 4px; font-size:16px; }
#ctl .goal { color:var(--soft); margin:0 0 8px; font-size:12px; }
.row { display:flex; align-items:center; gap:8px; margin:5px 0; min-height:28px; }
.row label, .row .lb { flex:0 0 84px; color:var(--soft); font-weight:600; font-size:12.5px; }
.row input[type=range] { flex:1; min-width:0; accent-color:var(--accent2); min-height:28px; }
.row output { flex:0 0 58px; text-align:right; font:600 12px 'JetBrains Mono', ui-monospace, monospace; }
.row select, .row input[type=number] { flex:1; min-width:0; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); color:var(--text); padding:0 8px; font:inherit; }
.btns { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; }
.btn { min-height:40px; padding:0 14px; border-radius:999px; border:0; background:#343a42; font-weight:600; font-size:13px; }
.btn.pri { background:var(--accent); color:#fff; }
.btn.sm { min-height:34px; padding:0 12px; font-size:12px; }
.seg { display:inline-flex; gap:4px; } .seg button { min-height:34px; padding:0 10px; border-radius:9px; border:1px solid var(--line); background:var(--panel2); font-size:12px; font-weight:600; }
.seg button[aria-pressed=true] { background:rgba(201,80,61,.35); border-color:var(--accent2); }
.stat { display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid var(--line); font-size:12.5px; }
.stat span:first-child { color:var(--soft); } .stat b { font-weight:700; text-align:right; }
.stat.ok b { color:var(--ok); } .stat.bad b { color:var(--bad); } .stat.warn b { color:var(--warn); }
.note { font-size:12px; color:var(--muted); margin:6px 0 0; }
#ctl .hd { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#ctl .tg { display:none; }
#info { position:absolute; right:14px; bottom:14px; width:318px; padding:14px 16px; background:var(--panel); border-radius:16px; z-index:5; }
#info h3 { margin:0 0 4px; font-size:16px; } #info .l { color:var(--soft); font-size:12.5px; margin:2px 0; } #info .l.f { color:var(--accent2); font-weight:600; }
.bar { height:8px; border-radius:4px; background:#171a1f; margin:8px 0 6px; overflow:hidden; } .bar i { display:block; height:100%; background:var(--accent); width:0; transition:width .25s; }
#info .q { font-size:12px; color:var(--muted); }
#insp { position:absolute; left:258px; top:70px; width:270px; padding:14px; background:var(--panel); border-radius:16px; z-index:5; }
#insp h3 { margin:0 0 6px; font-size:15px; } #insp[hidden], #modal[hidden], #nogl[hidden] { display:none; }
#toast { position:absolute; left:50%; top:60px; transform:translateX(-50%); z-index:30; display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
#toast div { padding:8px 14px; border-radius:999px; background:rgba(20,22,26,.94); border:1px solid var(--line); font-size:13px; font-weight:600; max-width:90vw; text-align:center; }
#toast div.good { border-color:var(--ok); } #toast div.bad { border-color:var(--bad); }
/* modals */
#modal { position:absolute; inset:0; z-index:40; background:rgba(10,12,16,.62); display:grid; place-items:center; padding:12px; }
.mbox { width:min(560px,100%); max-height:calc(100% - 8px); overflow:auto; background:#12151b; border:1px solid var(--line); border-radius:20px; padding:20px 22px; }
.mbox.wide { width:min(760px,100%); }
.mbox h2 { margin:0 0 12px; font-size:20px; } .mbox .x { float:right; width:36px; height:36px; border-radius:50%; border:0; background:#2a2f37; }
.stars { display:flex; justify-content:center; gap:14px; margin:6px 0 14px; font-size:44px; color:#4a4d54; } .stars .on { color:#f3b73e; }
.step { color:var(--accent2); font-weight:700; font-size:12px; margin-bottom:6px; }
.mbox details { border-top:1px solid var(--line); padding:8px 0; } .mbox summary { cursor:pointer; font-weight:700; }
.eq { display:block; font:12.5px 'JetBrains Mono', ui-monospace, monospace; background:#0b0d11; border-radius:8px; padding:8px 10px; margin:6px 0; overflow-x:auto; }
.mbox p { margin:6px 0; color:var(--soft); font-size:13.5px; }
table.chk { width:100%; border-collapse:collapse; font-size:12px; } table.chk td { padding:4px 6px; border-top:1px solid var(--line); vertical-align:top; } table.chk tr.ok td:first-child { color:var(--ok); } table.chk tr.bad td:first-child { color:var(--bad); }
.tgl { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line); } .sw { width:46px; height:26px; border-radius:13px; border:0; background:#2a2f37; position:relative; } .sw[aria-checked=true] { background:var(--accent); } .sw::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .15s; } .sw[aria-checked=true]::after { left:23px; }
.segw { display:flex; width:100%; background:#262b32; border-radius:999px; overflow:hidden; } .segw button { flex:1; min-height:44px; border:0; background:none; font-weight:700; } .segw button[aria-pressed=true] { background:var(--accent); }
/* loading + no webgl */
#load { position:absolute; inset:0; z-index:50; background:linear-gradient(#1b2230,#23303f); display:grid; place-items:center; }
.lbox { text-align:center; width:min(320px,80vw); } .lt { font-size:20px; font-weight:800; margin-bottom:14px; } .lbar { height:8px; border-radius:4px; background:#10141a; overflow:hidden; } .lbar i { display:block; height:100%; width:30%; background:var(--accent); animation:lb 1.1s infinite ease-in-out; } .ls { margin-top:10px; color:var(--soft); font-size:13px; }
@keyframes lb { 0% { margin-left:-30%; } 100% { margin-left:100%; } }
#nogl { position:absolute; inset:0; z-index:60; background:#12151b; display:grid; place-items:center; padding:16px; }
@media (prefers-reduced-motion: reduce) { .lbar i { animation:none; width:60%; } }
/* phones */
@media (max-width: 760px) {
  #modes { left:12px; right:12px; top:68px; transform:none; justify-content:space-between; gap:6px; } .pill { flex:1; padding:0 4px; height:36px; font-size:12.5px; }
  #icons { top:10px; gap:6px; } .ibtn { width:46px; height:46px; }
  #pal { display:none; }
  #tray { left:8px; right:8px; bottom:8px; max-width:none; padding:8px; border-radius:16px; }
  #chips { display:flex; gap:8px; overflow-x:auto; margin-bottom:8px; scrollbar-width:none; } #chips::-webkit-scrollbar { display:none; }
  .chip { flex:0 0 auto; height:34px; padding:0 14px; border-radius:999px; border:0; background:#2a3038; font-weight:600; font-size:12.5px; } .chip.on { background:var(--accent); color:#fff; }
  .tile { width:92px; min-height:84px; } .tile .ph { width:70px; height:44px; }
  #info { display:none; }
  #ctl { left:8px; right:8px; width:auto; top:auto; bottom:176px; max-height:40vh; padding:10px 12px; } #ctl.min { max-height:56px; overflow:hidden; } #ctl.min > :not(.hd) { display:none; } #ctl.min .goal { display:none; } #ctl .tg { display:inline-block; width:34px; height:30px; border:0; border-radius:8px; background:#2a3038; }
  #insp { left:8px; right:8px; width:auto; top:120px; }
  #toast { top:116px; }
  .mbox { padding:16px; border-radius:16px; }
}