/* ==========================================================================
   Museum technical-illustration UI — engraved plates, letterspaced small
   caps, hairline rules, restrained ink-on-parchment + cyan holo accents.
   ========================================================================== */
:root {
  --ink: #e8e2d4;
  --ink-dim: #a89880;
  --plate: rgba(12, 16, 22, 0.86);
  --plate-edge: #46586c;
  --cyan: #7fd4ff;
  --amber: #ffb35c;
  --red: #ff5a4d;
  --green: #7dff9a;
  --serif: "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #04060c; }
body { font-family: var(--sans); color: var(--ink); }
#wrap, #wrap canvas { position: fixed; inset: 0; touch-action: none; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- plates */
.plate {
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  box-shadow: 0 0 0 3px rgba(12, 16, 22, 0.5), 0 0 0 4px #2c3846,
              inset 0 0 30px rgba(0, 0, 0, 0.4);
  padding: 10px 16px;
  position: relative;
}
.plate::before, .plate::after {                    /* corner screws */
  content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9ab, #234);
  top: 5px;
}
.plate::before { left: 5px; } .plate::after { right: 5px; }
.engr {
  font-size: 9px; letter-spacing: 0.32em; color: var(--ink-dim);
  text-transform: uppercase;
}
.plate .title { font-family: var(--serif); font-size: 17px; letter-spacing: 0.06em; }
.plate .sub { font-size: 9.5px; letter-spacing: 0.18em; color: var(--ink-dim); }
.plate.big { max-width: 560px; padding: 26px 34px; text-align: center; }
.plate.big h1 { font-family: var(--serif); font-size: 34px; letter-spacing: 0.10em; margin: 6px 0 2px; font-weight: 600; }
.plate.big h2 { font-family: var(--serif); font-size: 24px; letter-spacing: 0.08em; margin: 8px 0 12px; font-weight: 600; }
.plate.big h3 { font-family: var(--serif); font-size: 13px; letter-spacing: 0.2em; color: var(--cyan); margin: 12px 0 4px; }
.plate.big p { font-size: 12.5px; line-height: 1.65; color: #c8c2b4; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--plate-edge), transparent); margin: 12px 0; }

/* -------------------------------------------------------------- loading */
#loading {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, #0a1220, #04060c 75%);
}
#loadmsg { font-size: 11px; letter-spacing: 0.22em; color: var(--ink-dim); margin: 10px 0 8px; text-transform: uppercase; }
#loadbar { height: 4px; border: 1px solid var(--plate-edge); padding: 1px; }
#loadbar i { display: block; height: 100%; width: 0%; background: var(--cyan); transition: width .25s; }

/* ------------------------------------------------------------------ hud */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
/* only containers holding real controls intercept touches; display plates
   (nameplate, announce, hint, map, crosshair) must let touch reach the
   canvas so the thumbstick can spawn anywhere on the lower-left. */
#hud #buttons, #hud #liftctl, #hud #exitprompt { pointer-events: auto; }
#nameplate { position: absolute; top: 14px; left: 14px; }
#modeline { font-size: 10px; letter-spacing: 0.28em; color: var(--cyan); margin-top: 3px; }

#buttons {
  position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
}
.pbtn {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.24em;
  color: var(--ink); background: var(--plate); border: 1px solid var(--plate-edge);
  padding: 10px 14px; cursor: pointer; text-transform: uppercase;
  min-height: 40px; min-width: 44px;
  transition: background .15s, color .15s, border-color .15s;
}
.pbtn:hover { background: #1b2634; border-color: var(--cyan); color: #fff; }
.pbtn:active { transform: translateY(1px); }
.pbtn.on { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(127, 212, 255, 0.25); }
.pbtn.warn { border-color: var(--amber); color: var(--amber); }

#announce {
  position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%);
  padding: 10px 26px; text-align: center; opacity: 0; transition: opacity .5s;
  font-family: var(--serif); font-size: 20px; letter-spacing: 0.12em;
  min-width: 280px;
}
#announce small { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: 0.3em; color: var(--ink-dim); margin-top: 3px; }
#announce.show { opacity: 1; }

#hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.22em; color: #b8c4d2; text-transform: uppercase;
  background: rgba(10, 14, 20, 0.55); padding: 7px 16px; border: 1px solid rgba(70, 88, 108, 0.5);
  white-space: nowrap;
}
#crosshair {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(230, 240, 250, 0.85); box-shadow: 0 0 7px rgba(127, 212, 255, 0.9);
  display: none;
}
body.locked #crosshair { display: block; }

#mapwrap { position: absolute; right: 14px; bottom: 14px; padding: 8px; }
#mapcv { display: block; }

#liftctl { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
#liftctl .pbtn { letter-spacing: 0.14em; }

#exitprompt { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); }
#exitprompt .pbtn { border-color: var(--green); color: var(--green); letter-spacing: 0.2em; }

/* ---------------------------------------------------------------- touch */
#joy {
  position: fixed; width: 120px; height: 120px; border-radius: 50%;
  border: 1.5px solid rgba(127, 212, 255, 0.4); background: rgba(20, 30, 42, 0.25);
  display: none; pointer-events: none; z-index: 30; left: 8vw; top: 65vh;
}
#joy i {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px;
  border-radius: 50%; background: rgba(127, 212, 255, 0.35);
  border: 1.5px solid rgba(180, 225, 255, 0.7);
}
#joy.on { display: block; }
@media (pointer: coarse) {
  #hint { bottom: 12px; font-size: 9px; }
  #buttons .pbtn { padding: 12px 13px; }
}

/* ------------------------------------------------------------- anatomy */
#cutui { position: fixed; inset: 0; z-index: 22; pointer-events: none; }
#cutplate { position: absolute; left: 14px; bottom: 14px; width: 250px; pointer-events: auto; }
#cutplate .title { font-size: 15px; }
#decklist { margin: 10px 0 6px; display: flex; flex-direction: column; gap: 5px; }
#decklist .pbtn { text-align: left; letter-spacing: 0.16em; }
#btn-leavecut { width: 100%; margin-top: 4px; border-color: var(--cyan); color: var(--cyan); }
.callout {
  position: absolute; left: 0; top: 0; pointer-events: none;
  font-size: 9.5px; letter-spacing: 0.22em; color: var(--ink);
  background: rgba(12, 16, 22, 0.82); border: 1px solid var(--plate-edge);
  padding: 4px 9px; white-space: nowrap; transition: opacity .3s;
}
.callout small { display: block; color: var(--ink-dim); font-size: 8px; letter-spacing: 0.18em; }
.callout.hl { border-color: var(--cyan); color: var(--cyan); }
.call-dot {
  position: absolute; width: 5px; height: 5px; left: 0; top: 0; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan); pointer-events: none;
}
.call-line {
  position: absolute; height: 1px; left: 0; top: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), transparent); pointer-events: none;
}

/* ---------------------------------------------------------------- help */
#help {
  position: fixed; inset: 0; z-index: 35; display: grid; place-items: center;
  background: rgba(4, 6, 12, 0.72); backdrop-filter: blur(3px);
}
#help .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; text-align: left; margin-bottom: 14px; }
#help b { color: var(--cyan); font-weight: 600; }
.c-cyan { color: var(--cyan); } .c-amber { color: var(--amber); }
.c-red { color: var(--red); } .c-green { color: var(--green); }
@media (max-width: 640px) {
  #help .cols { grid-template-columns: 1fr; }
  .plate.big { max-width: 92vw; padding: 18px 20px; }
  .plate.big h1 { font-size: 25px; }
  #mapwrap { right: 8px; bottom: 8px; transform: scale(0.82); transform-origin: bottom right; }
  #cutplate { width: 210px; left: 8px; bottom: 8px; }
}

/* fade veil for soft transitions */
#fader {
  position: fixed; inset: 0; z-index: 28; background: #04060c;
  opacity: 0; pointer-events: none;
}