/* ============================================================================
   TIDEWRIGHT — interface
   A warm, salt-bleached instrument panel laid over a very dark sea.
   ========================================================================== */

:root{
  --ink:      #07090d;
  --ink-2:    #0d1118;
  --glass:    rgba(14,18,25,.72);
  --glass-2:  rgba(20,26,35,.60);
  --line:     rgba(226,196,140,.20);
  --line-2:   rgba(226,196,140,.10);
  --sand:     #e9d3ab;
  --sand-dim: #b6a184;
  --gold:     #f0c078;
  --gold-hot: #ffdca0;
  --sea:      #5fb6c4;
  --sea-deep: #1c4b58;
  --wet:      #8fd3dd;
  --bad:      #e08a6a;
  --good:     #a9d08a;

  --f-disp: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --f-ui:   ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --f-mono: ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Roboto Mono",monospace;

  --r: 10px;

  /* the one HUD surface */
  --pane:    rgba(13,17,24,.62);
  --pane-hi: rgba(255,255,255,.055);
  --pad:     15px;
  --rad:     15px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink)}
body{
  font-family:var(--f-ui); color:var(--sand);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  user-select:none; -webkit-user-select:none; cursor:default;
  touch-action:none;
}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;background:#05070a}
#grade{
  position:fixed;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(2,4,7,.30) 78%, rgba(2,4,7,.62) 100%);
  mix-blend-mode:multiply;
}
/* both mechanisms, agreeing: some things are put away with the class and some
   with the attribute, and an author rule like .mbtn{display:grid} outranks the
   browser's own [hidden] every time */
.hidden,[hidden]{display:none !important}
kbd{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.02em;
  padding:1px 5px;border-radius:4px;border:1px solid var(--line);
  background:rgba(255,255,255,.045); color:var(--sand-dim);
}

/* ---------------------------------------------------------------- screens */
.screen{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  padding:32px; overflow:auto;
  animation:fade .45s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

#loading{background:radial-gradient(90% 80% at 50% 45%,#101722,#04060a 70%);z-index:60}
.load-inner{display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--gold)}
.mark{opacity:.85;animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:.95;transform:translateY(-4px)}}
.load-title{font-family:var(--f-disp);font-weight:400;font-size:30px;letter-spacing:.42em;
  text-indent:.42em;color:var(--sand)}
.load-bar{width:min(340px,60vw);height:2px;background:rgba(255,255,255,.08);overflow:hidden;border-radius:2px}
.load-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--sea),var(--gold));
  transition:width .3s ease}
.load-msg{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand-dim);opacity:.75}

/* ---------------------------------------------------------------- menu */
#menu{align-items:stretch;justify-content:flex-start;padding:0;background:none}
.menu-veil{position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(4,6,10,.94) 0%, rgba(4,6,10,.86) 34%, rgba(4,6,10,.30) 62%, transparent 88%);}
.menu-wrap{
  position:relative;z-index:2;display:flex;flex-direction:column;gap:26px;
  width:min(560px,92vw);height:100%;padding:min(7vh,64px) clamp(24px,4vw,56px);
  justify-content:center; animation:rise .8s cubic-bezier(.2,.7,.2,1) both;
}
.menu-head .eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--sea);opacity:.85}
.menu-head .title{font-family:var(--f-disp);font-weight:400;font-size:clamp(44px,7vw,74px);
  letter-spacing:.14em;line-height:1;margin:.18em 0 .1em;color:#f6e8ce;
  text-shadow:0 0 46px rgba(240,192,120,.16)}
.menu-head .subtitle{font-family:var(--f-disp);font-style:italic;font-size:17px;color:var(--gold);opacity:.9}
.lore-lede{font-family:var(--f-disp);font-size:14.5px;line-height:1.78;color:#cdbfa6;max-width:46ch}
.lore-lede em{color:var(--sand);font-style:italic}

.menu-nav{display:flex;flex-direction:column;gap:9px}
.menu-row{display:flex;gap:9px}
.mbtn{
  position:relative;display:grid;grid-template-columns:34px 1fr;align-items:center;
  gap:2px 14px;text-align:left;padding:13px 18px;cursor:pointer;
  background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line-2);border-radius:var(--r);color:var(--sand);
  font-family:inherit;transition:.22s cubic-bezier(.2,.7,.2,1);
}
.mbtn:hover{border-color:var(--line);background:linear-gradient(90deg,rgba(240,192,120,.13),rgba(255,255,255,.02));
  transform:translateX(4px)}
.mbtn .mb-k{grid-row:1/3;font-family:var(--f-disp);font-size:20px;color:var(--gold);text-align:center;opacity:.75}
.mbtn .mb-t{font-size:15px;letter-spacing:.05em}
.mbtn .mb-s{font-size:11.5px;color:var(--sand-dim);opacity:.8;letter-spacing:.01em}
.mbtn.primary{border-color:rgba(240,192,120,.34);
  background:linear-gradient(90deg,rgba(240,192,120,.16),rgba(240,192,120,.02))}
.mbtn.small{grid-template-columns:1fr;justify-items:center;padding:10px 12px;flex:1}
.mbtn.small .mb-t{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-dim)}
.mbtn.small:hover .mb-t{color:var(--sand)}
.menu-foot{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#4d5764}
.menu-foot .dot{margin:0 8px;opacity:.5}

/* ---------------------------------------------------------------- cards */
.card{
  position:relative;background:var(--glass);backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  border:1px solid var(--line-2);border-radius:16px;
  padding:clamp(22px,3vw,38px); width:min(760px,94vw);
  box-shadow:0 30px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.ctitle{font-family:var(--f-disp);font-weight:400;font-size:26px;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:18px;color:#f2e3c8}
.cbtn{
  font-family:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 20px;border-radius:8px;cursor:pointer;color:var(--sand);
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);transition:.18s;
}
.cbtn:hover{background:rgba(255,255,255,.1);border-color:var(--line)}
.cbtn.primary{background:linear-gradient(180deg,rgba(240,192,120,.26),rgba(240,192,120,.1));
  border-color:rgba(240,192,120,.42);color:var(--gold-hot)}
.cbtn.primary:hover{background:linear-gradient(180deg,rgba(240,192,120,.4),rgba(240,192,120,.16))}
.cbtn.ghost{background:none;color:var(--sand-dim)}
.cbtn.small{padding:8px 14px;font-size:10.5px}
.cbtn.close{margin-top:20px}

/* ---------------------------------------------------------------- briefing */
.brief-card{width:min(600px,94vw);text-align:left}
.brief-num{font-size:10px;letter-spacing:.42em;color:var(--sea);text-transform:uppercase}
.brief-card h2{font-family:var(--f-disp);font-weight:400;font-size:36px;margin:.14em 0 .5em;color:#f6e8ce}
.brief-verse{font-family:var(--f-disp);font-style:italic;font-size:15px;line-height:1.85;
  color:#c9bba2;border-left:2px solid rgba(240,192,120,.3);padding-left:18px;margin-bottom:24px}
.brief-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.bh{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#6f7b8a;margin-bottom:5px}
.bv{font-family:var(--f-disp);font-size:19px;color:var(--gold)}
.brief-obj ul,.obj ul,.sum-obj ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:8px}
.brief-obj li,.sum-obj li{font-size:13px;color:#c5b89f;padding-left:20px;position:relative;line-height:1.5}
.brief-obj li::before,.sum-obj li::before{content:"◇";position:absolute;left:0;color:var(--gold);opacity:.7}
.sum-obj li.done::before{content:"◆";color:var(--good);opacity:1}
.sum-obj li.fail::before{content:"✕";color:var(--bad);opacity:1}
#bGo{margin-top:26px;width:100%}

/* ---------------------------------------------------------------- summary */
.sum-card{width:min(620px,94vw);text-align:center}
.sum-grade{font-family:var(--f-disp);font-size:84px;line-height:1;color:var(--gold-hot);
  text-shadow:0 0 60px rgba(240,192,120,.35);margin-bottom:6px}
.sum-card h2{font-family:var(--f-disp);font-weight:400;font-size:26px;color:#f2e3c8;margin-bottom:10px}
.sum-line{font-family:var(--f-disp);font-style:italic;font-size:14.5px;line-height:1.8;color:#b9ad96;max-width:48ch;margin:0 auto}
.sum-line.dim{color:#7d8794;font-size:12.5px;margin-top:12px}
.sum-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin:26px 0 20px;
  padding:18px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.sum-stats .s-l{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#6f7b8a}
.sum-stats .s-v{font-family:var(--f-disp);font-size:24px;color:var(--sand);margin-top:3px}
.sum-obj{text-align:left;max-width:420px;margin:0 auto 24px}
.sum-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------------------------------------------------------------- codex */
.codex-card{width:min(900px,95vw);max-height:86vh;display:flex;flex-direction:column}
.codex-body{display:grid;grid-template-columns:250px 1fr;gap:28px;min-height:0;flex:1}
.codex-list{list-style:none;overflow:auto;padding-right:8px;display:flex;flex-direction:column;gap:2px}
.codex-list li{padding:10px 12px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--sand-dim);
  border-left:2px solid transparent;transition:.15s}
.codex-list li:hover{background:rgba(255,255,255,.045);color:var(--sand)}
.codex-list li.on{background:rgba(240,192,120,.1);border-left-color:var(--gold);color:var(--gold-hot)}
.codex-list li.locked{opacity:.32;cursor:not-allowed;font-style:italic}
.codex-read{overflow:auto;padding-right:6px}
.codex-read h3{font-family:var(--f-disp);font-weight:400;font-size:23px;color:#f2e3c8;margin-bottom:4px}
.codex-read .cr-src{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sea);margin-bottom:18px}
.codex-read p{font-family:var(--f-disp);font-size:14.5px;line-height:1.9;color:#c3b7a0;margin-bottom:15px}
.cr-empty{color:#5d6773;font-style:italic;font-family:var(--f-disp)}

/* ---------------------------------------------------------------- settings */
/* These three are read *over* something live — the shore, another card, or a
   running game with its whole HUD lit underneath. .screen paints nothing, so
   without their own darkness everything beneath prints straight through the
   glass and you appear to be looking at two menus at once. */
#settings,#codex,#howto{background:rgba(4,6,10,.80)}

.set-card{width:min(560px,94vw);max-height:86vh;overflow:auto}
.set-grid{display:flex;flex-direction:column;gap:14px}
.setrow{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:#c1b49c}
.setrow b{color:var(--gold);font-weight:500;font-family:var(--f-mono);font-size:11.5px}
.setrow>span{display:flex;justify-content:space-between;align-items:baseline}
.setrow.check{flex-direction:row;align-items:center;justify-content:space-between}
.setrow.look{gap:9px}
.look-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.look-pick button{padding:9px 11px;border-radius:9px;cursor:pointer;text-align:left;
  font-family:inherit;background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  color:var(--sand-dim);transition:.18s}
.look-pick button:hover{background:rgba(255,255,255,.09);border-color:var(--line)}
.look-pick button.on{background:linear-gradient(180deg,rgba(240,192,120,.20),rgba(240,192,120,.05));
  border-color:rgba(240,192,120,.45);color:var(--gold-hot)}
.look-pick b{display:block;font-size:11.5px;font-weight:500;letter-spacing:.03em}
.look-pick em{display:block;font-style:normal;font-size:9.5px;color:#8e8574;margin-top:3px;
  line-height:1.3}
.look-pick button.on em{color:#c0a880}
.set-actions{display:flex;justify-content:space-between;margin-top:26px}
select{font-family:inherit;font-size:12.5px;padding:8px 10px;border-radius:7px;color:var(--sand);
  background:rgba(0,0,0,.4);border:1px solid var(--line-2)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:rgba(255,255,255,.13);
  border-radius:2px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--gold);border:none;box-shadow:0 0 0 4px rgba(240,192,120,.15);transition:.15s}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 7px rgba(240,192,120,.22)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--gold);border:none}
input[type=checkbox]{width:16px;height:16px;accent-color:#f0c078;cursor:pointer}

/* ---------------------------------------------------------------- howto */
.how-card{width:min(920px,95vw);max-height:88vh;overflow:auto}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.how-grid h3{font-family:var(--f-disp);font-weight:400;font-size:19px;color:var(--gold);margin-bottom:9px}
.how-grid p{font-size:13px;line-height:1.75;color:#b7ab95;margin-bottom:11px}
.how-grid b{color:var(--sand)}
.how-grid i{color:var(--wet);font-style:italic}
table.keys{width:100%;font-size:12.5px;border-collapse:collapse}
table.keys td{padding:5px 0;color:#b7ab95}
table.keys td:first-child{color:var(--gold);font-family:var(--f-mono);font-size:11px;width:46%}

/* ---------------------------------------------------------------- pause */
.pause-card{width:min(380px,92vw);text-align:center}
.pause-sub{font-family:var(--f-disp);font-style:italic;color:#8d8371;margin-bottom:24px;font-size:14px}
.pause-actions{display:flex;flex-direction:column;gap:8px}

/* ============================================================================
   HUD
   Four places, not six. Left column = where you are in time. Top right = what
   you have. Bottom centre = what you are doing, stacked so the tool, its
   settings and its next instruction all sit together over your hands. And the
   sand's own reading rides the cursor.
   One surface treatment, one radius, one type ramp, everywhere.
   ========================================================================== */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
#hud.dim{opacity:.14;transition:opacity .45s}

/* the one surface */
.pane{
  position:relative;pointer-events:auto;
  background:var(--pane);
  backdrop-filter:blur(20px) saturate(118%);-webkit-backdrop-filter:blur(20px) saturate(118%);
  border:1px solid var(--line-2);border-radius:var(--rad);padding:var(--pad);
  box-shadow:0 16px 44px rgba(0,0,0,.40), inset 0 1px 0 var(--pane-hi);
  animation:paneIn .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes paneIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.pane-rule{height:1px;background:var(--line-2);margin:13px -15px 12px}
.micro{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#6d7887}

.col-left{position:absolute;left:18px;top:18px;width:266px;
  display:flex;flex-direction:column;gap:10px}

/* ── the tide ── */
.tide-head{display:flex;align-items:center;gap:13px}
.tide-num{font-family:var(--f-disp);font-size:34px;line-height:.86;color:var(--gold);
  min-width:52px;text-align:center;letter-spacing:.02em;
  text-shadow:0 0 30px rgba(240,192,120,.30)}
.tide-id h2{font-family:var(--f-disp);font-weight:400;font-size:17px;color:#f2e5cb;line-height:1.15}
.phase{display:flex;align-items:center;gap:6px;margin-top:5px;
  font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--sea)}
.phase i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;
  box-shadow:0 0 8px currentColor;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.phase.flood{color:var(--bad)}
.phase.flood i{animation-duration:1.1s}

.clockbar{height:4px;border-radius:4px;margin-top:13px;overflow:hidden;
  background:rgba(255,255,255,.08)}
.clockbar i{display:block;height:100%;width:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--sea),var(--gold));transition:width .2s linear}
.clockbar.flood i{background:linear-gradient(90deg,#8a422c,var(--bad))}
.clockrow{display:flex;justify-content:space-between;align-items:baseline;margin-top:7px;gap:8px}
.clockrow b{font-family:var(--f-mono);font-size:13px;font-weight:500;color:var(--sand);
  font-variant-numeric:tabular-nums}
.clockrow span{font-size:9px;color:#5d6774;text-align:right;line-height:1.4}

.obj ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:9px}
.obj li{position:relative;padding-left:19px;font-size:11.5px;line-height:1.45;color:#a99e8c;
  transition:color .3s}
.obj li::before{content:"";position:absolute;left:2px;top:5px;width:7px;height:7px;
  border:1px solid #6d7887;transform:rotate(45deg);transition:.3s}
.obj li.done{color:var(--good)}
.obj li.done::before{background:var(--good);border-color:var(--good);
  box-shadow:0 0 10px rgba(169,208,138,.55)}

/* ── water gauge: labels ride their own marks, so the card is the diagram ── */
.gauge{padding-bottom:11px}
.g-track{position:relative;width:7px;height:92px;margin-top:11px;border-radius:5px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line-2)}
.g-sea{position:absolute;left:0;right:0;bottom:0;height:20%;border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,var(--sea),var(--sea-deep));transition:height .3s;
  box-shadow:0 0 12px rgba(95,182,196,.45)}
.g-mark{position:absolute;left:-3px;width:15px;height:1px;transition:bottom .3s}
.g-mark span{position:absolute;left:19px;top:-6px;white-space:nowrap;
  font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#8b93a0}
.g-mark.high{background:var(--bad)} .g-mark.high span{color:#c88568}
.g-mark.peak{background:var(--gold)} .g-mark.peak span{color:var(--gold)}
.g-mark.now{background:var(--sea)} .g-mark.now span{color:var(--sea)}

/* ── the day ── */
.day-head{display:flex;align-items:center;gap:13px}
.day-dial{width:44px;height:44px;flex:none;transform:rotate(-90deg)}
.dd-track{fill:none;stroke:rgba(255,255,255,.10);stroke-width:2.5}
.dd-arc{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:106.8;stroke-dashoffset:70;transition:stroke-dashoffset .25s;opacity:.85}
.dd-pip{fill:var(--gold-hot);transition:.25s}
.day-time{font-family:var(--f-disp);font-size:26px;color:#f2e5cb;line-height:1;
  font-variant-numeric:tabular-nums}
.day-phase{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--sea);margin-top:5px}
.day input[type=range]{margin-top:14px}
.seg{display:flex;gap:4px;margin-top:11px;padding:3px;border-radius:9px;
  background:rgba(0,0,0,.3);border:1px solid var(--line-2)}
.seg button{flex:1;padding:6px 0;border-radius:6px;cursor:pointer;font-family:inherit;
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand-dim);
  background:none;border:none;transition:.16s}
.seg button:hover{color:var(--sand);background:rgba(255,255,255,.06)}
.seg button.on{background:rgba(240,192,120,.20);color:var(--gold-hot);
  box-shadow:inset 0 0 0 1px rgba(240,192,120,.30)}

/* ── what you have ── */
.work{position:absolute;right:18px;top:18px;width:184px}
.score{font-family:var(--f-disp);font-size:36px;line-height:1.05;color:#f6e9d0;margin-top:3px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.pail{position:relative;height:8px;border-radius:5px;margin-top:8px;overflow:hidden;
  background:rgba(0,0,0,.42);border:1px solid var(--line-2)}
.pail i{position:absolute;inset:0;width:50%;border-radius:5px;
  background:linear-gradient(90deg,#8d6c3f,#e6bc7c);transition:width .14s}
.pail.low i{background:linear-gradient(90deg,#7a3d2a,var(--bad))}
.pail-n{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-family:var(--f-mono);font-size:11.5px;color:var(--sand);margin-top:7px;
  font-variant-numeric:tabular-nums}
.pail-n i{font-style:normal;font-size:9.5px;letter-spacing:.04em}
.pail-n i.damp{color:var(--good)} .pail-n i.dry{color:#e0b070} .pail-n i.soak{color:var(--bad)}

/* ── the cursor's own reading ── */
#probeChip{position:absolute;z-index:14;pointer-events:none;width:176px;padding:10px 12px 11px;
  border-radius:12px;background:rgba(9,12,18,.90);border:1px solid var(--line-2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 34px rgba(0,0,0,.55)}
.pc-verdict{font-size:11.5px;letter-spacing:.04em;color:var(--good);
  padding-bottom:8px;margin-bottom:3px;border-bottom:1px solid var(--line-2)}
.pc-verdict.dry{color:#e0b070} .pc-verdict.bad{color:var(--bad)} .pc-verdict.none{color:#6d7887}
.pc-row{display:flex;align-items:center;gap:8px;margin-top:6px;
  font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:#6d7887}
.pc-row span{width:36px;flex:none}
.pc-bar{position:relative;flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.10);
  overflow:hidden}
.pc-bar b{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:3px;
  background:var(--wet);transition:width .09s linear}
.pc-bar u{position:absolute;top:-1px;bottom:-1px;left:42%;width:33%;
  border-left:1px solid rgba(169,208,138,.7);border-right:1px solid rgba(169,208,138,.7);
  background:rgba(169,208,138,.12)}
.pc-row.pack b{background:var(--gold)} .pc-row.depth b{background:var(--sand-dim)}
.pc-row em{width:36px;flex:none;text-align:right;font-style:normal;text-transform:none;
  font-family:var(--f-mono);font-size:9.5px;color:var(--sand);font-variant-numeric:tabular-nums}

/* ══════════════════ the workbench ══════════════════ */
#bench{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none}
#bench > *{pointer-events:auto}

#hint{pointer-events:none;height:26px;display:flex;align-items:center}
#hintText{font-size:11.5px;letter-spacing:.045em;color:#c2b6a0;
  padding:6px 15px;border-radius:20px;background:rgba(9,12,18,.78);
  border:1px solid var(--line-2);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);white-space:nowrap;transition:opacity .2s}
#hintText:empty{opacity:0}
#hintText.go{color:var(--gold);border-color:rgba(240,192,120,.38)}
#hintText.bad{color:var(--bad);border-color:rgba(224,138,106,.38)}

/* tool settings, docked directly over the rack it belongs to */
.opts{width:min(540px,92vw);padding:14px 16px 13px}
.opt-head{display:flex;align-items:center;gap:10px}
.opt-head h3{font-family:var(--f-disp);font-weight:400;font-size:19px;color:var(--gold);
  flex:1;line-height:1}
.opt-tag{flex:none;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;border:1px solid currentColor;opacity:.9}
.opt-tag.takes{color:#dd9b6c} .opt-tag.adds{color:#8fd3a0} .opt-tag.none{color:#74a6bd}
.opt-fold{flex:none;width:22px;height:22px;border-radius:6px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--sand-dim);
  font-size:10px;line-height:1;transition:.16s}
.opt-fold:hover{background:rgba(255,255,255,.11);color:var(--sand)}
.opt-short{font-size:12px;line-height:1.45;color:var(--sand);margin-top:7px}
.opt-body{display:flex;gap:18px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.opt-left{flex:1;min-width:0}
.opt-right{width:206px;flex:none}
.opt-desc{font-size:10.5px;line-height:1.6;color:#8b8271}
.opts.fold .opt-body,.opts.fold .opt-short{display:none}
.opts.fold .opt-fold{transform:rotate(180deg)}

.rack{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:10px}
.rack.wide{grid-template-columns:repeat(6,1fr)}
.adorn{position:relative;aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.04);
  border:1px solid transparent;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--sand-dim);transition:.16s cubic-bezier(.2,.7,.2,1)}
.adorn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.adorn:hover{background:rgba(255,255,255,.10);color:var(--sand);transform:translateY(-1px)}
.adorn.on{background:linear-gradient(180deg,rgba(240,192,120,.24),rgba(240,192,120,.07));
  border-color:rgba(240,192,120,.45);color:var(--gold-hot)}

.mould-bar{position:relative;height:19px;border-radius:6px;overflow:hidden;
  background:rgba(0,0,0,.42);border:1px solid var(--line-2)}
.mould-bar i{position:absolute;inset:0;width:0%;
  background:linear-gradient(90deg,#6f5a38,#d9b478);transition:width .1s linear}
.mould-bar.wet i{background:linear-gradient(90deg,#3f6a63,#7fd0bf)}
.mould-bar.dry i{background:linear-gradient(90deg,#6b5340,#c99a63)}
.mould-bar.full i{box-shadow:0 0 14px rgba(240,192,120,.5)}
.mould-bar b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;color:#0d1118;
  text-shadow:0 0 6px rgba(255,255,255,.3)}
.mould-hint{font-size:10px;color:#8b8271;margin-top:6px;line-height:1.4}
.mould-hint.go{color:var(--gold)} .mould-hint.bad{color:var(--bad)}

.opt{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#8b8271}
.opt>span{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.opt b{color:var(--gold);font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.opt-keys{display:flex;flex-wrap:wrap;gap:5px 11px;font-size:9px;color:#5d6774;
  letter-spacing:.05em;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2)}
.opt-keys span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
/* photo mode borrows the same parts */
.opt-h{font-family:var(--f-disp);font-size:17px;color:var(--gold);margin-bottom:12px}

/* the rack */
#palette{display:flex;gap:6px;padding:8px;border-radius:16px;
  background:var(--pane);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line-2);
  box-shadow:0 18px 48px rgba(0,0,0,.46), inset 0 1px 0 var(--pane-hi);
  animation:paneIn .55s cubic-bezier(.2,.8,.2,1) both}
.tool{position:relative;width:52px;height:52px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid transparent;color:var(--sand-dim);
  display:flex;align-items:center;justify-content:center;
  transition:.17s cubic-bezier(.2,.7,.2,1)}
.tool svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .17s}
.tool:hover{background:rgba(255,255,255,.09);color:var(--sand);transform:translateY(-3px)}
.tool:hover svg{transform:scale(1.06)}
.tool.on{background:linear-gradient(180deg,rgba(240,192,120,.26),rgba(240,192,120,.06));
  border-color:rgba(240,192,120,.45);color:var(--gold-hot);transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(240,192,120,.16)}
.tool.on::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
  width:16px;height:2px;border-radius:2px;background:var(--gold);
  box-shadow:0 0 8px rgba(240,192,120,.7)}
.tool .k{position:absolute;top:4px;right:6px;font-family:var(--f-mono);font-size:8.5px;opacity:.4}
.tool .mv{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:13px;height:2px;border-radius:2px;opacity:.7}
.tool .mv.adds{background:#8fd3a0} .tool .mv.takes{background:#dd9b6c}
.tool .tip{position:absolute;bottom:calc(100% + 11px);left:50%;transform:translateX(-50%);
  white-space:nowrap;padding:7px 12px;border-radius:9px;text-align:center;
  background:rgba(6,9,13,.97);border:1px solid var(--line-2);
  opacity:0;pointer-events:none;transition:.15s;box-shadow:0 10px 28px rgba(0,0,0,.55)}
.tool .tip b{display:block;font-size:12px;font-weight:500;letter-spacing:.09em;color:var(--sand)}
.tool .tip em{display:block;font-style:normal;font-size:10.5px;color:#8b8271;margin-top:3px}
.tool:hover .tip{opacity:1;transform:translateX(-50%) translateY(-2px)}
.tool.locked{opacity:.25;cursor:not-allowed}
.tool.locked:hover{transform:none;background:rgba(255,255,255,.035)}

/* toasts */
#toast{position:fixed;left:50%;top:22px;transform:translateX(-50%);z-index:70;display:flex;
  flex-direction:column;gap:7px;align-items:center;pointer-events:none;transition:opacity .3s}
body.photo #toast{opacity:0}
.toast{padding:9px 20px;border-radius:22px;font-size:12.5px;letter-spacing:.04em;
  background:rgba(9,12,18,.92);border:1px solid var(--line);color:var(--sand);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  animation:toastIn .42s cubic-bezier(.2,.8,.2,1) both}
.toast.good{border-color:rgba(169,208,138,.5);color:var(--good)}
.toast.bad{border-color:rgba(224,138,106,.5);color:var(--bad)}
.toast.lore{font-family:var(--f-disp);font-style:italic;border-color:rgba(240,192,120,.45);
  color:var(--gold)}
.toast.out{animation:toastOut .4s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

@media (max-width:1080px){
  .col-left{width:238px} .opts{width:min(470px,94vw)} .opt-right{width:180px}
}
@media (max-width:900px){
  .obj,.gauge{display:none}
  .col-left{width:214px} .work{width:160px}
  .tool{width:44px;height:44px} .tool svg{width:21px;height:21px}
  .opts{display:none}
}

/* photo mode */
#photo{position:fixed;inset:0;z-index:12;pointer-events:none}
.photo-panel{position:absolute;left:18px;bottom:20px;width:232px;pointer-events:auto}
.photo-actions{display:flex;gap:7px;margin-top:14px}
body.photo #hud{opacity:0;pointer-events:none}
body.photo #grade{background:radial-gradient(120% 90% at 50% 45%,transparent 50%,rgba(2,4,7,.5) 100%)}

/* cursor states */
body.building canvas#gl{cursor:crosshair}
body.orbiting canvas#gl{cursor:grabbing}

@media (max-width:900px){
  .obj{display:none}
  .tl{width:220px} .tr{width:170px}
  #gauge{display:none}
  .tool{width:44px;height:44px}
  .codex-body{grid-template-columns:1fr}
}