/* ---------- side panels (wishes) ---------- */
.side{
  position:fixed;left:10px;top:calc(env(safe-area-inset-top,0px) + 62px);
  display:flex;flex-direction:column;gap:8px;
  width:min(238px,50vw);z-index:5;
}
.panel{
  background:rgba(29,43,38,.86);backdrop-filter:blur(8px);
  border-radius:16px;box-shadow:var(--shadow);padding:10px 12px 11px;
}
.panel h2{margin:0 0 8px;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mustard)}
.wish{font-size:12px;line-height:1.35;color:#ded9c8;font-weight:600}
.wish + .wish{margin-top:9px;padding-top:9px;box-shadow:inset 0 1px 0 rgba(244,240,226,.11)}
.wish .row{display:flex;gap:7px;align-items:baseline}.wish .row span{flex:1}
.wish b{color:var(--cream);font-weight:800}.wish u{flex:0 0 auto;text-decoration:none;color:var(--mustard);font-size:10.5px;font-weight:800}
.bar{height:4px;border-radius:999px;background:rgba(244,240,226,.15);overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;width:0;background:var(--meadow);border-radius:999px;transition:width .45s ease}
.panel.calm{color:#ded9c8;font-size:12px;font-weight:600;line-height:1.4}

/* ---------- inspect card ---------- */
.look{
  position:fixed;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 112px);
  width:min(272px,calc(100vw - 20px));max-height:min(62vh,540px);overflow-y:auto;
  background:rgba(29,43,38,.93);backdrop-filter:blur(8px);
  border-radius:18px;box-shadow:var(--shadow);padding:13px 15px 14px;z-index:6;display:none;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.look.show{display:block}
.look h3{margin:0;font-size:15.5px;font-weight:800;letter-spacing:-.01em;padding-right:24px}
.look h4{margin:12px 0 6px;padding-top:10px;border-top:1px solid rgba(244,240,226,.12);font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mustard)}
.look .kind{margin:2px 0 9px;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mustard)}
.look p{margin:0 0 9px;font-size:12.5px;line-height:1.42;color:#ded9c8}.look p b{color:var(--cream)}
.look p.muted{font-size:11px;opacity:.72}
.look dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12px;align-items:baseline}
.look dt{color:#ded9c8;font-weight:600}.look dd{margin:0;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;max-width:145px}
.look dd.up{color:var(--meadow)} .look dd.dn{color:var(--rose)}
.look .tot{margin-top:9px;padding-top:9px;border-top:1px solid rgba(244,240,226,.14);display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:800}
.look .tot em{font-style:normal;color:var(--meadow)}
.look .x{position:absolute;top:9px;right:10px;width:26px;height:26px;border:0;border-radius:9px;background:transparent;color:var(--cream-dim);cursor:pointer;font:inherit;font-size:16px;font-weight:800}
.look .x:hover{background:rgba(244,240,226,.1);color:var(--cream)}

/* ---------- minimap ---------- */
.mini{position:fixed;left:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 112px);background:rgba(29,43,38,.86);backdrop-filter:blur(8px);border-radius:14px;box-shadow:var(--shadow);padding:6px;line-height:0;z-index:5}
.mini canvas{width:118px;height:118px;border-radius:9px;cursor:crosshair;display:block}.mini.hide{display:none}

/* ---------- welcome card ---------- */
.veil{position:fixed;inset:0;background:rgba(16,26,22,.55);backdrop-filter:blur(3px);display:grid;place-items:center;padding:18px;z-index:20}.veil.hide{display:none}
.card{background:var(--ink);border-radius:24px;box-shadow:var(--shadow);padding:26px 24px;max-width:380px;width:100%}
.card h1{margin:0 0 2px;font-size:27px;letter-spacing:-.02em;font-weight:800}.card p.sub{margin:0 0 16px;color:var(--mustard);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.card ul{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}.card li{display:flex;gap:10px;font-size:13.5px;line-height:1.45;color:#ded9c8}.card li b{color:var(--cream)}.card li em{flex:0 0 auto;width:22px;text-align:center;font-style:normal;color:var(--meadow);font-weight:800}
.go{width:100%;border:0;border-radius:14px;padding:14px;cursor:pointer;background:var(--meadow);color:#13291a;font:inherit;font-size:15px;font-weight:900;letter-spacing:.02em;transition:transform .1s ease,filter .12s ease}.go:hover{filter:brightness(1.06)}.go:active{transform:scale(.98)}

@media (max-width:430px){
  .tool{width:54px}.modes .tool{width:36px}.cat{padding:4px 8px;font-size:10px}.stat{padding:5px 9px}.stat b{font-size:14px}.side{width:44vw}.wish{font-size:11.5px}
  .look{right:8px;width:min(284px,calc(100vw - 16px));max-height:58vh;padding:12px 13px 13px}
  .look dd{max-width:132px}
}
@media (max-width:560px),(max-height:560px){.mini{display:none}}

/* ---------- the ledger ---------- */
.ledger{position:fixed;left:10px;top:calc(env(safe-area-inset-top,0px) + 62px);width:min(250px,58vw);max-height:calc(100vh - 200px);overflow-y:auto;background:rgba(29,43,38,.93);backdrop-filter:blur(8px);border-radius:18px;box-shadow:var(--shadow);padding:12px 14px 14px;z-index:7;display:none}
.ledger.show{display:block}.ledger h2{margin:0 0 8px;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mustard)}.ledger h2.lsep{margin-top:14px;padding-top:11px;border-top:1px solid rgba(244,240,226,.14)}
.ledger .x{position:absolute;top:8px;right:9px;width:26px;height:26px;border:0;border-radius:9px;background:transparent;color:var(--cream-dim);cursor:pointer;font:inherit;font-size:16px;font-weight:800}.ledger .x:hover{background:rgba(244,240,226,.1);color:var(--cream)}
.lrow + .lrow{margin-top:10px}.lhead{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:700;color:#ded9c8}.lhead b{color:var(--cream);font-weight:800;font-variant-numeric:tabular-nums}.spark{display:block;width:100%;height:30px;margin-top:2px;overflow:visible}.lempty{margin:0;font-size:11.5px;line-height:1.4;color:#ded9c8;opacity:.8}.chron{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}.chron li{display:flex;gap:8px;font-size:11.5px;line-height:1.35;color:#ded9c8}.chron em{flex:0 0 auto;font-style:normal;font-weight:800;color:var(--mustard);opacity:.85;min-width:44px}body.ledger-open .side{display:none}
.tutorial{position:fixed;z-index:18;left:max(12px,env(safe-area-inset-left));bottom:calc(118px + env(safe-area-inset-bottom));width:min(300px,calc(100vw - 24px));padding:14px 16px;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(31,47,41,.94);color:#f6f2e7;box-shadow:0 12px 34px rgba(15,27,23,.3);backdrop-filter:blur(12px)}.tutorial b{font:700 14px/1.2 system-ui}.tutorial p{margin:6px 0 12px;font:13px/1.4 system-ui}.tutorial button{border:0;border-radius:10px;padding:8px 12px;background:#e3b866;color:#28342f;font-weight:700}.tutorial .quiet{margin-left:6px;background:transparent;color:#ded8c9;border:1px solid rgba(255,255,255,.2)}@media(max-width:430px){.tutorial{bottom:calc(102px + env(safe-area-inset-bottom));width:calc(100vw - 24px)}}
.graphics-settings{position:fixed;right:max(8px,env(safe-area-inset-right));top:calc(58px + env(safe-area-inset-top));z-index:22}.graphics-settings .settings-toggle{position:relative}.graphics-settings section{position:absolute;right:0;top:42px;width:min(280px,calc(100vw - 20px));padding:16px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(29,43,38,.96);box-shadow:var(--shadow);backdrop-filter:blur(14px)}.graphics-settings h3{margin:0 0 12px}.graphics-settings label{display:grid;gap:5px;margin:10px 0;color:var(--cream-dim);font-size:12px}.graphics-settings select{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#2b3d36;color:var(--cream);font:inherit}.graphics-settings p{margin:12px 0 0;color:var(--cream-dim);font-size:11px;line-height:1.4}