:root {
  --ink: #1d2340;
  --cream: #f6eedd;
  --paper: #fbf6ea;
  --terracotta: #d9734e;
  --azul: #2f5fa7;
  --mustard: #f2b134;
  --coral: #f28b82;
  --sage: #8fbf7f;
  --accent: var(--terracotta);
  --shadow: 3px 3px 0 var(--ink);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #1d2340;
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }

#scene {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none; outline: none;
  cursor: grab;
}
#scene.dragging { cursor: grabbing; }

/* printed-paper finish */
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .12  0 0 0 0 .22  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .22; mix-blend-mode: multiply;
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(29, 35, 64, .38) 100%);
}

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: radial-gradient(circle at 50% 60%, #ffd9b0 0%, #f5a98a 35%, #6d6fb8 75%, #2b2f63 100%);
  transition: opacity .8s ease, visibility .8s;
}
#loader.gone { opacity: 0; visibility: hidden; }
.ld-planet {
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c8e39f, #86bd6f 55%, #4f8a62);
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  animation: ld-bob 1.6s ease-in-out infinite;
}
.ld-title { font-family: Fraunces, Georgia, serif; font-weight: 800; font-size: 44px; letter-spacing: -.02em; color: var(--ink); }
.ld-sub { font-family: "DM Mono", monospace; font-size: 13px; letter-spacing: .08em; color: var(--ink); opacity: .75; }
@keyframes ld-bob { 50% { transform: translateY(-8px) rotate(12deg); } }

/* ---------- HUD ---------- */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px;
  padding: 16px 18px; pointer-events: none;
}
.hud > * { pointer-events: auto; }
.plate {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow);
  padding: 8px 14px 9px; transform: rotate(-1.2deg);
}
.plate h1 { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: -.02em; }
.plate p { margin: 4px 0 0; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .06em; opacity: .75; }

.places { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding-top: 4px; }
.places button {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink);
  padding: 6px 13px 6px 9px; font-weight: 600; font-size: 14px;
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
}
.places button i {
  width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; display: inline-block;
  transition: background .3s;
}
.places button[data-id="about"] { --c: var(--terracotta); }
.places button[data-id="projects"] { --c: var(--azul); }
.places button[data-id="writing"] { --c: var(--ink); }
.places button[data-id="contact"] { --c: var(--mustard); }
.places button.seen i { background: var(--c); }
.places button:hover, .places button:focus-visible { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); outline: none; }
.places button.active { background: var(--ink); color: var(--paper); }
.places button.active i { border-color: var(--paper); }

.hud-right { display: flex; gap: 8px; align-items: center; }
.counter {
  display: flex; align-items: center; gap: 9px;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 rgba(29,35,64,.35);
  padding: 7px 12px; font-family: "DM Mono", monospace; font-size: 13px;
  transform: rotate(1deg);
}
.counter .pips { display: flex; gap: 3px; }
.counter .pips b {
  width: 13px; height: 13px; display: block;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: rgba(246, 238, 221, .25);
  transition: background .3s, transform .3s;
}
.counter .pips b.on { background: var(--mustard); transform: scale(1.2); }
.counter strong { color: var(--mustard); font-weight: 500; }
.counter.pulse { animation: pulse .6s ease; }
@keyframes pulse { 40% { transform: rotate(1deg) scale(1.15); } }
.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 2px 2px 0 var(--ink);
}
.icon-btn[aria-pressed="false"] .wave { opacity: .15; }

/* floating landmark labels */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.lm-label {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink);
  padding: 4px 11px 4px 7px; font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 15px;
  transform-origin: 50% 100%; will-change: transform, opacity;
  transition: opacity .25s;
}
.lm-label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); }
.lm-label::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--paper); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
}
.lm-label.hidden { opacity: 0; pointer-events: none; }

/* hint */
.hint {
  position: fixed; left: 50%; bottom: calc(22px + var(--safe-b)); transform: translateX(-50%); z-index: 9;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: rgba(251, 246, 234, .94); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow);
  padding: 9px 16px; font-size: 13.5px; max-width: min(92vw, 640px);
  transition: opacity .6s, transform .6s;
}
.hint .goal { font-family: Fraunces, Georgia, serif; font-style: italic; font-size: 14px; opacity: .8; }
.hint.gone { opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none; }
kbd {
  display: inline-block; min-width: 21px; padding: 1px 5px; margin: 0 1px;
  font-family: "DM Mono", monospace; font-size: 11.5px; text-align: center;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 5px; box-shadow: 0 2px 0 var(--ink);
}
.k-touch { display: none; }
body.touch .k-desk { display: none; }
body.touch .k-touch { display: inline; }

/* joystick */
.joy, .jump-btn { display: none; }
body.touch .joy {
  display: block; position: fixed; left: calc(22px + env(safe-area-inset-left, 0px)); bottom: calc(26px + var(--safe-b)); z-index: 9;
  width: 124px; height: 124px; border-radius: 50%;
  background: rgba(251, 246, 234, .38); border: 2px solid rgba(29, 35, 64, .85);
  box-shadow: inset 0 0 0 10px rgba(251, 246, 234, .25), 3px 3px 0 rgba(29,35,64,.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  touch-action: none;
}
.joy-knob {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: var(--mustard); border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink);
}
body.touch .jump-btn {
  display: grid; place-items: center; position: fixed; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(40px + var(--safe-b)); z-index: 9;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--terracotta); color: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 18px; touch-action: none;
}
body.touch .jump-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
body.touch .hint { bottom: calc(170px + var(--safe-b)); }
body.panel-open.touch .joy, body.panel-open.touch .jump-btn { opacity: 0; pointer-events: none; }

/* ---------- panel ---------- */
.panel {
  position: fixed; z-index: 20; top: 86px; right: 18px; bottom: 18px; width: min(430px, calc(100vw - 36px));
  pointer-events: none; display: flex; align-items: flex-start;
}
.panel-inner {
  position: relative; width: 100%; max-height: 100%; overflow: auto; pointer-events: auto;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink);
  padding: 0 24px 22px;
  transform: translateX(calc(100% + 40px)) rotate(4deg); opacity: 0;
  transition: transform .5s cubic-bezier(.2, 1.3, .4, 1), opacity .3s;
  scrollbar-width: thin;
}
.panel.open .panel-inner { transform: none; opacity: 1; }
.panel-band {
  margin: 0 -24px 14px; padding: 12px 24px; border-bottom: 2px solid var(--ink);
  background: var(--accent); color: var(--paper);
  font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 8px, transparent 8px 16px);
}
.panel-icon {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font-size: 15px; letter-spacing: 0;
}
.panel-close {
  position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  font-size: 22px; line-height: 1; display: grid; place-items: center; padding: 0 0 2px;
}
.panel h2 { font-family: Fraunces, Georgia, serif; font-weight: 800; font-size: 40px; letter-spacing: -.025em; margin: 4px 0 10px; line-height: 1; }
.panel-body { font-size: 15.5px; line-height: 1.55; }
.panel-body p { margin: 0 0 12px; }
.panel-body .lead { font-family: Fraunces, Georgia, serif; font-size: 19px; line-height: 1.4; font-weight: 500; }
.panel-body h3 { font-family: "DM Mono", monospace; font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 18px 0 8px; opacity: .7; }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.tags li { border: 2px solid var(--ink); border-radius: 999px; padding: 3px 11px; font-weight: 600; font-size: 14px; background: #fff; }
.tags li:nth-child(1) { background: #cfe5f1; }
.tags li:nth-child(2) { background: #f9dc92; }
.tags li:nth-child(3) { background: #f6eedd; }
.tags li:nth-child(4) { background: #f7c5b5; }

.works { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.works li {
  display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: start;
  background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 11px 12px;
  box-shadow: 2px 2px 0 var(--ink);
}
.works li:nth-child(2n) { transform: rotate(.5deg); }
.works li:nth-child(2n+1) { transform: rotate(-.4deg); }
.works .yr {
  font-family: "DM Mono", monospace; font-size: 12px; text-align: center; padding: 4px 0;
  background: var(--azul); color: var(--paper); border-radius: 7px;
}
.works h4, .essays h4 { margin: 0 0 3px; font-family: Fraunces, Georgia, serif; font-size: 19px; font-weight: 700; }
.works p, .essays p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.essays { list-style: none; padding: 0; margin: 0; }
.essays li { padding: 12px 0 12px 22px; border-bottom: 1.5px dashed rgba(29,35,64,.35); position: relative; }
.essays li::before { content: "¶"; position: absolute; left: 0; top: 12px; font-family: Fraunces, serif; color: var(--terracotta); font-weight: 700; }
.essays li:last-child { border-bottom: 0; }
.essays h4 em { font-style: italic; }

.postcard {
  position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 14px 16px 16px;
  box-shadow: 3px 3px 0 var(--ink); margin-bottom: 16px;
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(47,95,167,.15) 27px 28px);
}
.stamp {
  position: absolute; right: 12px; top: 12px; width: 52px; height: 60px; display: grid; place-items: center; align-content: center;
  background: var(--mustard); border: 2px dashed var(--ink); border-radius: 4px; font-size: 22px; line-height: 1; transform: rotate(6deg);
}
.stamp small { font-family: "DM Mono", monospace; font-size: 9px; }
.pc-label { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin: 0 0 4px !important; }
.pc-mail { font-family: Fraunces, Georgia, serif; font-size: 21px; font-weight: 700; margin: 0 70px 12px 0 !important; overflow-wrap: anywhere; }
.pc-mail a { color: var(--ink); text-decoration-color: var(--terracotta); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.copy {
  background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13px;
}
.facts { margin: 0; display: grid; grid-template-columns: 1fr; gap: 3px; }
.facts dt { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-top: 10px; }
.facts dd { margin: 0; font-weight: 600; }
.muted { opacity: .6; font-weight: 400; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #3fae6a; margin-right: 7px; box-shadow: 0 0 0 3px rgba(63,174,106,.25); vertical-align: 1px; }
.panel-foot { margin-top: 16px; padding-top: 12px; border-top: 1.5px solid rgba(29,35,64,.15); font-size: 12.5px; font-family: "DM Mono", monospace; opacity: .7; }

/* ---------- toast + celebrate ---------- */
.toast {
  position: fixed; left: 50%; top: 92px; z-index: 30; transform: translate(-50%, -20px); opacity: 0;
  background: var(--mustard); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow);
  padding: 9px 16px; font-weight: 600; text-align: center; pointer-events: none;
  transition: opacity .35s, transform .45s cubic-bezier(.2,1.4,.4,1);
  max-width: 90vw;
}
.toast small { display: block; font-family: Fraunces, serif; font-style: italic; font-weight: 500; opacity: .8; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.celebrate {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px;
  background: rgba(29, 35, 64, .25); opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;
}
.celebrate.show { opacity: 1; visibility: visible; }
.celebrate-card {
  max-width: 420px; text-align: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 7px 7px 0 var(--ink);
  padding: 22px 26px 24px; transform: scale(.7) rotate(-4deg); transition: transform .6s cubic-bezier(.2,1.5,.4,1);
}
.celebrate.show .celebrate-card { transform: rotate(-1deg); }
.big-star { font-size: 64px; line-height: 1; color: var(--mustard); -webkit-text-stroke: 2px var(--ink); animation: spin 6s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.celebrate h2 { font-family: Fraunces, Georgia, serif; font-weight: 800; font-size: 30px; margin: 8px 0 8px; letter-spacing: -.02em; line-height: 1.05; }
.celebrate p { margin: 0 0 16px; line-height: 1.5; }
.celebrate a { color: var(--ink); font-weight: 700; }
.celebrate button {
  background: var(--terracotta); color: var(--paper); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 20px; font-weight: 700; font-size: 15px;
}

.noscript { position: fixed; inset: 0; display: grid; place-items: center; background: var(--paper); padding: 30px; text-align: center; z-index: 100; }
body.nogl #scene, body.nogl .hint, body.nogl .joy, body.nogl .jump-btn { display: none; }
body.nogl { background: var(--cream); }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .hud { grid-template-columns: 1fr auto; padding: 10px 12px; gap: 10px; }
  .places { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 6px; padding-top: 0; flex-wrap: nowrap; }
  .places button { font-size: 13px; padding: 5px 10px 5px 7px; gap: 5px; }
  .places button i { width: 9px; height: 9px; }
  .plate { padding: 7px 11px 8px; }
  .plate h1 { font-size: 20px; }
  .plate p { font-size: 9.5px; white-space: nowrap; letter-spacing: .02em; }
  .counter { padding: 6px 9px; gap: 6px; font-size: 12px; }
  .counter .lbl { display: none; }
  .counter .pips b { width: 11px; height: 11px; }
  .icon-btn { width: 34px; height: 34px; }
  .toast { top: 118px; }
  .panel { top: auto; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); width: auto; max-height: 62vh; }
  .panel-inner { padding: 0 18px 18px; transform: translateY(110%); }
  .panel-band { margin: 0 -18px 12px; padding: 11px 18px; }
  .panel h2 { font-size: 32px; }
  .pc-mail { font-size: 17px; margin-right: 50px !important; }
  .stamp { width: 40px; height: 48px; font-size: 17px; right: 10px; }
  .hint { font-size: 12.5px; padding: 8px 12px; width: max-content; max-width: min(86vw, 340px); }
  .hint .goal { font-size: 13px; }
}
@media (max-width: 370px) {
  .places button { font-size: 12px; padding: 4px 8px 4px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-inner, .toast, .celebrate-card { transition-duration: .01s; }
  .big-star, .ld-planet { animation: none; }
}