/* Live letters and state geometry sit over a shared, scalable metal rim.
   Only the subtle surface grain is raster, sampled from the concept sheet. */
.app-shell #quest-prototype .quest-node {
  --node-size: 76px;
  --node-rim: url('/assets/quest-icons/medallion-silver.svg');
  --face-light: #667279;
  --face-highlight: #d9e6df3d;
  --face-dark: #15191b;
  --letter-light: #fff9de;
  --letter-dark: #b6b1a0;
  width: 116px;
  gap: 10px;
  transform: translate(-50%, -41px);
  color: #eee2c1;
}
.app-shell #quest-prototype .quest-node.final {
  --node-size: 90px;
  --node-rim: url('/assets/quest-icons/medallion-gold.svg');
  --face-light: #be882e;
  --face-highlight: #fff1a840;
  --face-dark: #342005;
  --letter-light: #fff3c2;
  --letter-dark: #d6a84e;
  width: 180px;
  gap: 12px;
  transform: translate(-50%, -48px);
}
.app-shell #quest-prototype .quest-node.active:not(.final):not(.done) {
  --face-light: #a16b35;
  --face-highlight: #ffda7e52;
  --face-dark: #38220e;
  --letter-light: #fff0ba;
  --letter-dark: #d6a04f;
  --node-rim: url('/assets/quest-icons/medallion-selected.svg');
}
.app-shell #quest-prototype .quest-node[aria-pressed='true']:not(.final):not(.done) { --node-rim: url('/assets/quest-icons/medallion-selected.svg'); }
.app-shell #quest-prototype .quest-node.done {
  --node-rim: url('/assets/quest-icons/medallion-green.svg');
  --face-light: #5b7c2f;
  --face-highlight: #d6ec9652;
  --face-dark: #102007;
  --letter-light: #fff6c2;
  --letter-dark: #d0bd77;
}
.app-shell #quest-prototype .quest-node .node-circle {
  width: var(--node-size);
  height: var(--node-size);
  flex: none;
  border: 0;
  outline: none;
  background: none;
  box-shadow: none;
  isolation: isolate;
  text-shadow: none;
  overflow: visible;
}
.app-shell #quest-prototype .node-face {
  position: absolute;
  inset: 7%;
  z-index: -1;
  border-radius: 50%;
  background: url('/assets/quest-icons/surface-grain.png') center / cover,
    radial-gradient(ellipse at 22% 18%, var(--face-highlight), transparent 58%),
    radial-gradient(circle at 29% 24%, var(--face-light), var(--face-dark) 80%);
  background-blend-mode: soft-light, normal, normal;
  box-shadow: inset 0 0 8px 2px #0008, 0 3px 7px #0009;
}
.app-shell #quest-prototype .node-rim {
  position: absolute;
  inset: 0;
  background: var(--node-rim) center / contain no-repeat;
  pointer-events: none;
}
/* The circle still anchors connections. Only the milestone's crown and glow
   extend beyond it, matching the SVG's padded -16 -28 288 312 viewBox. */
.app-shell #quest-prototype .quest-node.final .node-rim { inset: -10.9375% -6.25%; }
.app-shell #quest-prototype .quest-node.final.done { --node-rim: url('/assets/quest-icons/medallion-gold.svg'); }
.app-shell #quest-prototype .node-letter {
  position: relative;
  padding-bottom: 2%;
  font: calc(var(--node-size) * .64)/1 Georgia, 'Times New Roman', serif;
  background: linear-gradient(135deg, var(--letter-light) 18%, #e8dcc1 43%, var(--letter-dark) 70%, var(--letter-light));
  color: transparent;
  background-clip: text;
  -webkit-text-stroke: .35px #fff5cb;
  filter: drop-shadow(0 1px 0 #61543b) drop-shadow(1px 2px 1px #000d);
}
.app-shell #quest-prototype .node-letter--wide { font-size: calc(var(--node-size) * .42); }
.app-shell #quest-prototype .node-circle::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
}
.app-shell #quest-prototype .quest-node[aria-pressed='true'] .node-circle::before {
  border-color: #ffe99b;
  box-shadow: 0 0 3px 1px #fff1bb, 0 0 13px 4px #ffca688c,
    0 0 30px 12px #dfb97645, 0 0 54px 22px #d5bc861c,
    inset 0 0 8px #ffc44c80;
}
.app-shell #quest-prototype .quest-node.active:not(.final) .node-circle::before {
  box-shadow: 0 0 14px 3px #ffb83d55, 0 0 32px 9px #ed8b242b;
}
.app-shell #quest-prototype .quest-node.active:not(.final) .node-label { color: #efd097; }
.app-shell #quest-prototype .quest-node.active:not(.final)[aria-pressed='true'] .node-circle::before {
  border-color: #fff1a2;
  box-shadow: 0 0 4px 1px #fff4bd, 0 0 14px 5px #ffd44da6,
    0 0 32px 13px #ffa52e66, 0 0 58px 24px #ee792526,
    inset 0 0 9px #ffcd547a;
}
.app-shell #quest-prototype .quest-node.done:not(.final)[aria-pressed='true'] .node-circle::before {
  border-color: #dcffab;
  box-shadow: 0 0 4px 1px #e0ffc9, 0 0 14px 5px #9bea65a6,
    0 0 34px 14px #5edb616b, 0 0 60px 25px #39b5792b,
    inset 0 0 9px #b0f77773;
}
.app-shell #quest-prototype .quest-node.final .node-circle::before {
  box-shadow: 0 -3px 14px 3px #ffd34d66, 0 -5px 30px 10px #f6a52133,
    0 -8px 46px 17px #e977171a;
}
.app-shell #quest-prototype .quest-node.final[aria-pressed='true'] .node-circle::before {
  border-color: #fff1a5;
  box-shadow: 0 0 5px 2px #fff4bf, 0 -3px 15px 6px #ffe666cc,
    0 -8px 30px 13px #ffc32d99, 0 -15px 48px 22px #ff8b2673,
    0 -23px 76px 32px #ee581e33, inset 0 0 12px #ffd45e9c;
}
/* A recessed stone socket: the upper-left wall is in shadow and the
   lower-right lip catches light. It sits behind every medallion state. */
.app-shell #quest-prototype .quest-node .node-circle::after {
  content: '';
  position: absolute;
  inset: -1.5%;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 50%;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(135deg, #030405a6 15%, #0c10118c 55%, #20272966);
  box-shadow:
    inset calc(var(--node-size) * .025) calc(var(--node-size) * .025) calc(var(--node-size) * .04) #0006,
    calc(var(--node-size) * .012) calc(var(--node-size) * .016) calc(var(--node-size) * .008) #9fa7a575,
    calc(var(--node-size) * -.012) calc(var(--node-size) * -.012) calc(var(--node-size) * .025) #0005;
}
.app-shell #quest-prototype .quest-node.done .node-face { box-shadow: inset 0 0 8px 2px #0009, 0 0 10px #90c54855; }
.app-shell #quest-prototype .node-completion {
  display: none;
  position: absolute;
  right: -3%;
  bottom: -1%;
  width: 34%;
  height: 34%;
  border: 2px solid #e6db8d;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #517528, #1a360d 75%);
  box-shadow: 0 0 0 1px #405c1c, 0 0 5px 1px #b6ef51a6, inset 0 0 0 1px #56782c, 0 2px 3px #0009;
}
.app-shell #quest-prototype .quest-node.done .node-completion { display: block; }
.app-shell #quest-prototype .node-completion::after {
  content: '';
  position: absolute;
  inset: 16% 18%;
  background: linear-gradient(#fffac4, #c8ed6f);
  clip-path: polygon(0 49%, 16% 35%, 40% 60%, 82% 0, 100% 7%, 44% 100%);
  filter: drop-shadow(0 1px 1px #172809);
}
.app-shell #quest-prototype .quest-node .node-label {
  color: #efe3c2;
  font-size: 15px;
  font-weight: 400;
  background: none;
  box-shadow: none;
  text-shadow: 0 2px 2px #000, 0 0 4px #000;
}
.app-shell #quest-prototype .quest-node:is(.final, [aria-pressed='true']) .node-label { color: #ffdf85; }
.app-shell #quest-prototype .quest-node.done .node-label { color: #d2ed98; }
.app-shell #quest-prototype .quest-node.connection-target .node-circle::before { border-color: #fff1b8; box-shadow: 0 0 10px #ffe389b3; }
.app-shell #quest-prototype :is(.delete-quest, .delete-arrow) {
  width: 28px;
  height: 28px;
  border: 2px solid #d6b96f;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 23%, #a82b24, #591410 76%);
  box-shadow: 0 0 0 1px #372c18, inset 0 0 0 1px #4b110c, inset 0 1px 1px #ef8b5759, 0 2px 4px #000a;
  font-size: 0;
}
.app-shell #quest-prototype :is(.delete-quest, .delete-arrow)::before,
.app-shell #quest-prototype :is(.delete-quest, .delete-arrow)::after {
  content: '';
  position: absolute;
  width: 70%;
  height: 2px;
  border-radius: .5px;
  background: linear-gradient(#fff8cf, #d8bf7e);
  box-shadow: 0 1px 1px #321507;
  transform: rotate(45deg);
}
.app-shell #quest-prototype :is(.delete-quest, .delete-arrow)::after { transform: rotate(-45deg); }
.app-shell #quest-prototype .connection-port::before {
  width: 12px;
  height: 12px;
  border: 1.5px solid #d4b575;
  background: #1f2929;
  box-shadow: 0 0 0 1px #362b18, inset 0 1px 1px #0a0e0f, 0 1px 2px #0009;
}
.app-shell #quest-prototype .connection-port:is(:hover, [aria-pressed='true'])::before { background: #8c6c2b; border-color: #ffe8a0; }
.app-shell #quest-prototype :is(.delete-quest, .delete-arrow, .connection-port):focus-visible { outline: 2px solid #ffe491; outline-offset: 3px; }
@media (max-width: 700px) {
  .app-shell #quest-prototype .quest-node { --node-size: 62px; width: 90px; transform: translate(-50%, -34px); }
  .app-shell #quest-prototype .quest-node.final { --node-size: 76px; width: 160px; transform: translate(-50%, -41px); }
  .app-shell #quest-prototype .quest-node .node-label { font-size: 13px; }
}
@media (pointer: coarse) {
  .app-shell #quest-prototype :is(.delete-quest, .delete-arrow) { width: 44px; height: 44px; border-width: 3px; }
  .app-shell #quest-prototype .connection-port { width: 44px; height: 44px; }
}