@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05070a;
  font-family: var(--font-body);
  color: var(--ink);
}

#workshop-canvas {
  position: fixed;
  inset: 0;
  display: block;
  outline: none;
  cursor: crosshair;
}

/* ---------- Entry screen ---------- */
#entry-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(43,29,20,0.6), rgba(5,7,10,0.95));
  z-index: 100;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
#entry-screen.hidden {
  opacity: 0;
  pointer-events: none;
}
.entry-card {
  text-align: center;
  color: var(--paper);
  padding: var(--space-5);
}
.entry-card h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.01em;
}
.entry-card p {
  margin: 0 0 var(--space-4);
  color: var(--paper-dark);
  font-size: var(--text-md);
}
.entry-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--wood-light);
  margin-top: var(--space-4);
}
/* Workshop Refinement phase (Pass A) — "the player should always
   understand that the Workshop is actively preparing itself... avoid
   moments where the application appears frozen." Present from the very
   first paint, not just after a delay — see main.js's own comment on why
   the previous version of this screen could look inert for the entire
   loading period. A gentle opacity breathe, not a spinner — "calm,
   polished and intentional" rather than a mechanical loading widget. */
.entry-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--teal-bright);
  margin: 0 0 var(--space-2);
  min-height: 1.2em;
  animation: entry-status-breathe 2.2s ease-in-out infinite;
}
.entry-status.ready {
  animation: none;
  opacity: 0.7;
}
@keyframes entry-status-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
#entry-button {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--wood-dark);
  background: var(--brass);
  border: none;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
#entry-button:hover { background: var(--brass-bright); }
#entry-button:active { transform: scale(0.97); }
#entry-button:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }
#entry-button:disabled { background: var(--wood-mid); color: var(--paper-dark); cursor: default; }

/* ---------- HUD ---------- */
#hud-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  font-family: var(--font-mono);
}

.hud-prompt {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--surface-glass-strong);
  border: 1px solid var(--brass);
  border-radius: var(--radius-md);
  color: var(--paper);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}
.hud-prompt.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.hud-prompt kbd {
  display: inline-block;
  background: var(--brass);
  color: var(--wood-dark);
  border-radius: var(--radius-sm);
  padding: 0 6px;
  margin-right: var(--space-1);
  font-weight: 600;
}

.hud-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: rgba(237, 227, 208, 0.55);
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.hud-crosshair.hidden { opacity: 0; }

.hud-save-indicator {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: var(--text-xs);
  color: var(--paper-dark);
  background: var(--surface-glass);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-standard);
}
.hud-save-indicator.visible { opacity: 1; }

.hud-corner-controls {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  gap: var(--space-1);
  pointer-events: auto;
}
.hud-corner-controls button {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--surface-glass);
  color: var(--paper-dark);
  border: 1px solid var(--wood-mid);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}
.hud-corner-controls button:hover { border-color: var(--brass); color: var(--paper); }

.hud-toast {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  max-width: min(480px, 80vw);
  text-align: center;
  background: var(--surface-glass-strong);
  border: 1px solid var(--teal-bright);
  border-radius: var(--radius-md);
  color: var(--paper);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-standard), transform var(--duration-medium) var(--ease-standard);
}
.hud-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Emote Wheel ---------- */
.emote-wheel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.emote-wheel.hidden { display: none; }
/* Version 4, Phase 2 ("Playtesting Notes, Continued") — the ring used to
   sit inside a bordered/backgrounded `.emote-wheel-card`, the same visual
   treatment an ordinary settings panel gets. The brief's own "should
   remain lightweight, elegant and unobtrusive" reads more like a radial
   menu that floats directly over the game view than a panel that happens
   to be circular — the card chrome is gone for the ring itself now, kept
   only for the empty state below (`.emote-wheel-empty-card`), which still
   needs a real, bounded surface for a heading and a sentence of text to
   sit on. */
.emote-wheel-empty-card {
  pointer-events: auto;
  background: var(--surface-glass-strong);
  border: 1px solid var(--teal-bright);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-panel);
}
.emote-wheel-empty-card h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  color: var(--paper);
  font-size: var(--text-lg);
}
/* Version 3, Phase 14 ("Further Environmental Polish") — "we could design
   a radial wheel with options for each emote in a section of the radial
   circle." Version 4, Phase 2 — rebuilt as genuine pie-wedge segments
   (closer to FiveM's qb-radialmenu in feel) rather than circles sitting
   on a ring: each button now fills the *entire* ring (`inset: 0`) and is
   cut down to its own slice with a `clip-path: polygon(...)` computed in
   JS (`wedgeClipPath()`, EmoteWheelSystem.js) — a real, independently
   clickable wedge-shaped hit area, not a decorative background behind a
   circular button. The icon+label inside each wedge still uses the
   original rotate/translate/counter-rotate technique (`--angle`, set per
   item in `_render()`) to sit at the wedge's own mid-angle and stay
   upright — that part of the original technique was already correct and
   is reused, not replaced. */
.emote-wheel-ring {
  position: relative;
  width: min(340px, 82vw);
  height: min(340px, 82vw);
  --wheel-radius: min(122px, 30vw);
}
.emote-wheel-ring button.emote-wheel-wedge {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.emote-wheel-ring button.emote-wheel-wedge:hover,
.emote-wheel-ring button.emote-wheel-wedge:focus-visible {
  background: rgba(127, 216, 196, 0.22);
}
.emote-wheel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: center;
  line-height: 1.15;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--wheel-radius))) rotate(calc(-1 * var(--angle)));
  pointer-events: none; /* clicks land on the wedge button beneath, never fight with this label overlay */
}
.emote-wheel-item-icon {
  font-size: 1.6rem;
  line-height: 1;
}
/* The centre hub — Version 4, Phase 2: larger and more prominent than
   its old plain-text self, and now a genuine second close affordance
   (clickable, alongside Tab/Escape) rather than purely decorative.
   `z-index: 2` keeps it clickable above the wedges, which all extend
   to the ring's own exact centre. */
.emote-wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: var(--surface-glass-strong);
  border: 1px solid var(--teal-bright);
  box-shadow: var(--shadow-panel);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.emote-wheel-hub:hover,
.emote-wheel-hub:focus-visible {
  border-color: var(--brass-bright, var(--teal-bright));
  background: rgba(127, 216, 196, 0.18);
}
.emote-wheel-hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--paper-dark);
  pointer-events: none;
}

/* ---------- Compass ---------- */
#compass-root {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-standard);
}
#compass-root.visible { opacity: 1; }

/* Version 4, Phase 2 ("Playtesting Notes, Continued") — "the HUD compass
   clips against the top button row on touch/mobile devices specifically —
   fine on desktop." Root cause: `tokens.css`'s own global `@media
   (pointer: coarse) { button { min-height: 40px; } }` (a real, deliberate
   touch-comfort baseline, not a bug) grows every `.hud-corner-controls`
   button taller on touch, pushing that row's own bottom edge from ~40px
   down to ~56px — squarely into the compass's fixed 18px-52px band. The
   compass itself has no touch-specific positioning at all today; this is
   that. */
@media (pointer: coarse) {
  #compass-root {
    top: max(64px, calc(env(safe-area-inset-top) + 46px));
  }
}

/* ---------- Build Mode box-select ---------- */
#build-select-root {
  position: fixed;
  inset: 0;
  z-index: 56;
  pointer-events: none;
}
.build-select-rect {
  position: fixed;
  border: 1.5px solid var(--brass-bright, #d4af37);
  background: rgba(212, 175, 55, 0.12);
  pointer-events: none;
}
.compass-card {
  position: relative;
  width: 220px;
  height: 34px;
  overflow: hidden;
  background: var(--surface-glass);
  border: 1px solid var(--wood-mid);
  border-radius: var(--radius-md);
}
.compass-strip {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
}
.compass-mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  white-space: nowrap;
}
.compass-needle {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--brass-bright);
  box-shadow: 0 0 6px rgba(184, 134, 59, 0.7);
}