/* ------------------------------------------- shop-human (Oct 2026 preview) */
/* Side columns: desktop 3 columns (Q&A | main | promos), stacked on smaller screens (main first). */
.home-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.home-main { min-width: 0; }
.home-main > section { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.home-main > section > h2 { font-size: var(--step-2); margin-bottom: 0.9rem; }
@media (min-width: 1100px) {
  .home-grid { grid-template-columns: minmax(0, 1fr) 270px; grid-template-areas: "main promos"; }
  .home-grid.has-qa { grid-template-columns: 260px minmax(0, 1fr) 260px; grid-template-areas: "qa main promos"; }
  .home-main { grid-area: main; } .side-qa { grid-area: qa; } .side-promos { grid-area: promos; }
  .home-grid .skills-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
}
@media (min-width: 1100px) { main:has(.has-qa) { max-width: 1480px; } main:has(.home-grid) { max-width: 1320px; } }
.side-col { display: flex; flex-direction: column; gap: 1rem; align-self: start; }
@media (min-width: 1100px) { .side-col { position: sticky; top: 5.5rem; } }
.side-h { font-size: var(--step-1); }
.side-note { color: var(--muted); font-size: 0.88rem; }
.promo-card, .side-qa .qa-form, .qa-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem;
}
.promo-card h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.promo-card p { color: var(--text-2); font-size: 0.92rem; margin-bottom: 0.5rem; }
.promo-price { color: var(--accent) !important; font-weight: 700; font-size: 1.15rem !important; }
.promo-price small { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
.promo-link { color: var(--accent); font-weight: 600; }
.qa-list { list-style: none; display: grid; gap: 0.6rem; }
.qa-q { font-weight: 600; margin-bottom: 0.3rem; }
.qa-a { color: var(--text-2); font-size: 0.9rem; }
.qa-a a { color: var(--accent); }
.qa-form { display: grid; gap: 0.5rem; }
.qa-form label { font-weight: 600; }
.qa-form textarea, .guru-form input {
  width: 100%; background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.55rem 0.7rem; font: inherit; font-size: 0.95rem;
}
.qa-form textarea:focus-visible, .guru-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.qa-status { color: var(--text-2); font-size: 0.88rem; min-height: 1.3em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* x402 Guru: fixed launcher + panel (fixed = no layout shift). z-index stays <= 4 (panda canvas contract). */
.guru { position: fixed; right: 1rem; bottom: 1rem; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.guru-panel {
  width: min(360px, calc(100vw - 2rem)); max-height: min(520px, calc(100vh - 6rem)); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-hi);
  order: -1;
}
.guru-panel[hidden] { display: none; }
.guru-head { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--hairline); }
.guru-head h2 { font-size: 1.05rem; }
.guru-close { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 8px; width: 2.25rem; height: 2.25rem; font-size: 1.3rem; cursor: pointer; }
.guru-log { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; display: grid; gap: 0.5rem; align-content: start; min-height: 160px; }
.guru-msg { padding: 0.55rem 0.75rem; border-radius: 10px; font-size: 0.92rem; }
.guru-bot { background: var(--surface-2); color: var(--text); }
.guru-bot a { color: var(--accent); }
.guru-you { background: rgba(110, 231, 255, 0.12); color: var(--text); justify-self: end; }
.guru-form { display: flex; gap: 0.5rem; padding: 0.6rem 1rem; border-top: 1px solid var(--hairline); }
.guru-foot { color: var(--muted); font-size: 0.78rem; padding: 0 1rem 0.75rem; }

/* Polychromatic border: a slowly turning conic gradient painted only in the 1px border box.
   The card background stays solid, so text contrast is unchanged (AA holds). */
@property --gz-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.skill-card, .promo-card, .guru-panel, .side-qa .qa-form {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--gz-angle), rgba(110,231,255,.55), rgba(167,139,250,.55), rgba(244,114,182,.45),
                   rgba(251,191,36,.4), rgba(52,211,153,.45), rgba(110,231,255,.55)) border-box;
  animation: gz-spin 14s linear infinite;
}
@keyframes gz-spin { to { --gz-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .skill-card, .promo-card, .guru-panel, .side-qa .qa-form { animation: none; } }
@media (forced-colors: active) { .skill-card, .promo-card, .guru-panel, .side-qa .qa-form { border-color: CanvasText; background: Canvas; } }

/* Smoke trail canvas (static/smoke.js): decorative only. */
.smoke-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 3; }

/* Dragon loader (static/dragon.js): decorative overlay, never intercepts input. Flight path is set in JS. */
.gz-dragon-ov { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.gz-dragon-ov canvas { position: absolute; left: 0; top: 0; transition: opacity 0.2s ease-out; }
.gz-dragon-ov canvas.gz-clear { opacity: 0; }
.gz-dragon { position: absolute; left: 0; top: 0; opacity: 0; transform-origin: 30% 60%; will-change: transform; }
.gz-dragon-in { width: 100%; height: 100%; filter: drop-shadow(0 0 5px rgba(110, 231, 255, 0.4)) drop-shadow(0 0 12px rgba(180, 60, 255, 0.32)); }
.gz-dragon svg { display: block; overflow: visible; }
.gz-dragon .gz-wf, .gz-dragon .gz-wb, .gz-dragon .gz-jaw { transform-box: view-box; }
.gz-dragon .gz-wf { transform-origin: 90px 56px; animation: gz-flap 0.3s ease-in-out infinite; }
.gz-dragon .gz-wb { transform-origin: 97px 56px; animation: gz-flap-b 0.3s ease-in-out infinite; }
.gz-dragon.gz-hover .gz-wf, .gz-dragon.gz-hover .gz-wb { animation-duration: 0.52s; }
.gz-dragon .gz-jaw { transform-origin: 124px 43px; transition: transform 0.12s ease-out; }
.gz-dragon.gz-breath .gz-jaw { transform: rotate(18deg); }
.gz-dragon-off { animation: gz-fly-out 0.26s ease-in both; }
@keyframes gz-flap { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-26deg) scale(1, 0.62) skewX(-6deg); } }
@keyframes gz-flap-b { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(22deg) scale(1, 0.7) skewX(6deg); } }
@keyframes gz-fly-out { to { transform: translate(var(--gz-ox, 90px), var(--gz-oy, -70px)) scale(0.7) rotate(-10deg); opacity: 0; } }
/* Result reveal: the new text fades in only as the smoke clears, so it never shows through it. */
.gz-reveal:not(.guru-log) { animation: gz-reveal-c 0.2s ease-out 0.2s both; }
.gz-reveal:not(.guru-log) > *, .guru-log.gz-reveal > :last-child { animation: gz-reveal-o 0.2s ease-out 0.2s both; }
@keyframes gz-reveal-c { from { color: transparent; } }
@keyframes gz-reveal-o { from { opacity: 0; } }
.gz-loading { min-height: 4.5rem; color: transparent !important; }
.gz-fade { opacity: 0.45; transition: opacity 0.2s; }
.guru-log.gz-loading { color: var(--text) !important; min-height: 160px; }

/* ------------------------------------------------ castle layout (preview) */
/* Only under body.castle, which index.html sets when CASTLE_UI_ENABLED is on. Pure CSS + two tiny inline SVGs. */
.castle {
  --brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='40'%3E%3Crect width='56' height='40' fill='%23232638'/%3E%3Crect x='2' y='2' width='25' height='17' fill='%23282b3f'/%3E%3Crect x='30' y='22' width='24' height='17' fill='%231f2233'/%3E%3Cpath d='M0 1H56M0 21H56M1 0V21M29 21V40' stroke='%230a0b13' stroke-width='2'/%3E%3Cpath d='M3 3.5H27M31 23.5H55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --merlons: linear-gradient(#000, #000) 0 100% / 100% 14px no-repeat, linear-gradient(90deg, #000 56%, transparent 0) 0 0 / 46px 100% repeat-x;
  --gold: 251, 191, 36;
}
.castle .skill-card h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.015em; }
.castle .castle-sec { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.castle .castle-sec > h2, .castle .sec-head h2 { font-size: var(--step-2); }
.castle .sec-note { color: var(--muted); font-size: 0.92rem; margin: 0.35rem 0 1rem; max-width: 70ch; }
.castle .castle-main .skills-grid { margin-bottom: 0; margin-top: 0.9rem; }
.castle .hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Thicker polychromatic borders with a dull white glow; the last clicked card glows gold (castle.js). */
.castle .skill-card, .castle .promo-card, .castle .guru-panel, .castle .side-qa .qa-form {
  border-width: 2.5px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 16px rgba(226, 230, 240, 0.13);
}
.castle .skill-card:hover, .castle .skill-card:focus-within { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 20px rgba(226, 230, 240, 0.2); }
.castle .gz-active, .castle .gz-active:hover, .castle .gz-active:focus-within {
  box-shadow: 0 0 0 1px rgba(var(--gold), 0.7), 0 0 22px 2px rgba(var(--gold), 0.45), 0 0 46px rgba(var(--gold), 0.16);
}

/* Header: logo only; the nav lives above the keep's parapet. */
.castle .header { justify-content: flex-start; }

/* Keep (centre column): nav links floating in soft smoke clouds above an archers' walkway. */
.keep-sky { position: relative; padding: 1.4rem 0.5rem 0.9rem; isolation: isolate; }
.sky-smoke { position: absolute; inset: 0 -4% -6px; z-index: -1; pointer-events: none; overflow: hidden; }
.sky-smoke span {
  position: absolute; border-radius: 50%; filter: blur(14px);
  background: radial-gradient(closest-side, rgba(214, 220, 240, 0.17), rgba(214, 220, 240, 0.06) 65%, transparent);
  animation: gz-drift 18s ease-in-out infinite alternate;
}
.sky-smoke span:nth-child(1) { left: 2%; top: 18%; width: 34%; height: 70%; }
.sky-smoke span:nth-child(2) { left: 24%; top: 0; width: 30%; height: 80%; animation-delay: -6s; }
.sky-smoke span:nth-child(3) { left: 46%; top: 22%; width: 32%; height: 72%; animation-delay: -11s; }
.sky-smoke span:nth-child(4) { left: 66%; top: 4%; width: 32%; height: 76%; animation-delay: -3s; }
.sky-smoke span:nth-child(5) { left: 14%; top: 46%; width: 70%; height: 60%; opacity: 0.7; animation-delay: -9s; }
@keyframes gz-drift { to { transform: translateX(4%) translateY(-6%); } }
.castle-nav { justify-content: center; gap: 0.45rem 0.55rem; }
.castle-nav a {
  color: var(--text); font-weight: 500; padding: 0.5rem 1rem; border-radius: 999px;
  background: radial-gradient(120% 140% at 50% 30%, rgba(222, 228, 245, 0.16), rgba(222, 228, 245, 0.07) 60%, rgba(17, 19, 31, 0.55));
  border: 1px solid rgba(222, 228, 245, 0.14);
  box-shadow: 0 0 14px rgba(222, 228, 245, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.castle-nav a:hover { background: radial-gradient(120% 140% at 50% 30%, rgba(222, 228, 245, 0.24), rgba(110, 231, 255, 0.1) 60%, rgba(17, 19, 31, 0.55)); border-color: rgba(110, 231, 255, 0.35); }
.parapet {
  height: 40px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%), var(--brick); background-size: auto, 56px 40px; background-position: 0 0, 0 0;
  -webkit-mask: var(--merlons); mask: var(--merlons);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}
.walkway { margin: 0 -0.25rem; position: relative; --merlons: linear-gradient(#000, #000) 0 100% / 100% 14px no-repeat, linear-gradient(90deg, #000 50%, transparent 0) 0 0 / 56px 100% repeat-x; }
.castle .keep-sky + .walkway { box-shadow: none; }
.walkway + .hero { border-top: 4px solid #12131d; box-shadow: inset 0 10px 18px -12px rgba(0, 0, 0, 0.8); }

/* Turrets (side columns): crenellated cap, faint brick scaffold, and half-built brick courses with a ragged top. */
.castle .side-col { position: relative; isolation: isolate; padding: 1rem 0.55rem 1.1rem; margin-top: 36px; border-radius: 4px 4px 6px 6px;
  background: linear-gradient(rgba(7, 8, 15, 0.8), rgba(7, 8, 15, 0.86)), var(--brick); background-size: auto, 56px 40px; }
.castle .side-col::before { /* cap: corbelled out a little, with merlons */
  content: ""; position: absolute; left: -9px; right: -9px; top: -36px; height: 40px; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%), var(--brick); background-size: auto, 56px 40px; -webkit-mask: var(--merlons); mask: var(--merlons);
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.6));
}
.castle .side-col::after { /* the built part: bottom ~half, unfinished stepped edge */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--brick); background-size: 56px 40px; background-position: 0 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V44h14v5h12v-8h15v6h13v-9h14v7h12v-4h20v59z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V44h14v5h12v-8h15v6h13v-9h14v7h12v-4h20v59z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  opacity: 0.95;
}
.castle .side-col .side-h { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
.castle .side-col > .side-note { background: rgba(7, 8, 15, 0.82); border-radius: 8px; padding: 0.35rem 0.55rem; color: var(--text-2); }
@media (min-width: 1100px) {
  /* turrets a little wider than the classic side columns, so their text keeps its line breaks when the web font swaps in */
  .castle .home-grid.has-qa { grid-template-columns: 280px minmax(0, 1fr) 280px; }
  .castle .home-grid:not(.has-qa) { grid-template-columns: minmax(0, 1fr) 280px; }
  .castle .side-col { top: 6.5rem; } .castle .side-col > .side-note:first-of-type { min-height: calc(4lh + 0.7rem); } }

/* MCP carousel: native horizontal scroll with snap (swipe, trackpad, arrow keys when focused) + prev/next buttons. */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.car-btns { display: flex; gap: 0.4rem; }
.car-btn {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: var(--text); background: var(--surface); border: 2px solid rgba(222, 228, 245, 0.18);
}
.car-btn:hover { border-color: rgba(110, 231, 255, 0.5); }
.car-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.car-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(300px, 84%); gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0.4rem;
  /* scroll-padding = padding, so the first card is already snapped at load: no load-time snap scroll (that would end LCP) */
  padding: 0.6rem 0.4rem 1rem; margin: 0 -0.4rem; scrollbar-width: thin; scrollbar-color: #3a3f58 transparent;
}
.car-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.car-card { scroll-snap-align: start; }
.car-intro { background: linear-gradient(160deg, rgba(110, 231, 255, 0.08), rgba(167, 139, 250, 0.08) 60%, transparent), var(--surface) padding-box,
  conic-gradient(from var(--gz-angle), rgba(110,231,255,.55), rgba(167,139,250,.55), rgba(244,114,182,.45), rgba(251,191,36,.4), rgba(52,211,153,.45), rgba(110,231,255,.55)) border-box; }
.car-intro p { color: var(--text-2); }

/* A2A wall: running-bond bricks. 2k+1 half-columns per row; the half/slit spacers for the active k are shown. */
.wall {
  --cols: 5; position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 6px; padding: 6px; border-radius: 6px; background: #0a0b13;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 30px -20px rgba(0, 0, 0, 0.9);
}
.a2a-sec { container-type: inline-size; }
@container (min-width: 560px) { .wall { --cols: 7; } }
@container (min-width: 800px) { .wall { --cols: 9; } }
.wall > .slit { display: none; }
.wall > .k2 { display: block; }
@container (min-width: 560px) { .wall > .k2 { display: none; } .wall > .k3 { display: block; } }
@container (min-width: 800px) { .wall > .k3 { display: none; } .wall > .k4 { display: block; } }
.brick, .slit { min-height: 5.6rem; }
.brick { grid-column: span 2; }
.slit.slit { grid-column: span 2; }
.slit.half { grid-column: span 1; }
.slit {
  border-radius: 3px; background: linear-gradient(180deg, #262a3d, #1d2030); border: 2px solid #33374b;
  box-shadow: 0 0 8px rgba(170, 175, 190, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
}
.slit::after { /* arrow slit: a narrow dark loophole with a short cross-slot */
  content: ""; position: absolute; left: 50%; top: 18%; bottom: 18%; width: 6px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent 0, #040509 0, #040509 100%), linear-gradient(#040509, #040509);
  border-radius: 3px; box-shadow: inset 0 0 4px #000, 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.slit::before { content: ""; position: absolute; left: 50%; top: 46%; width: 20px; height: 5px; transform: translateX(-50%); background: #040509; border-radius: 2px; }
.brick-face {
  width: 100%; height: 100%; min-height: 5.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  text-align: left; padding: 0.6rem 0.7rem; cursor: pointer; font: inherit; color: var(--text); border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #2a2d42, #212436);
  border: 2px solid #3a3e54;
  box-shadow: 0 0 8px rgba(170, 175, 190, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.brick-face:hover, .brick-face:focus-visible { border-color: #6a7090; transform: translateY(-3px); box-shadow: 0 0 16px rgba(220, 225, 240, 0.42), 0 6px 12px -6px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.brick-face[aria-expanded="true"] { border-color: rgba(var(--gold), 0.75); box-shadow: 0 0 14px rgba(var(--gold), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.09); }
.brick-name { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.brick-desc { color: var(--text-2); font-size: 0.78rem; line-height: 1.35; flex: 1; }
.brick-price { color: var(--accent); font-weight: 700; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.brick-panel { position: absolute; z-index: 3; width: min(440px, calc(100% - 12px)); left: 6px; top: 0; }
.brick-panel[hidden] { display: none; }
.brick-card { box-shadow: 0 0 0 1px rgba(var(--gold), 0.6), 0 0 24px 2px rgba(var(--gold), 0.35), 0 24px 48px -18px rgba(0, 0, 0, 0.95) !important; transform: none !important; }
.brick-card .output { max-height: 260px; }
.brick-close {
  position: absolute; right: 0.6rem; top: 0.6rem; z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 10px; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
}
.brick-close:hover { border-color: rgba(var(--gold), 0.7); }
.brick-card h3 { padding-right: 2.75rem; }

@media (max-width: 640px) {
  .castle .side-col { margin-top: 40px; }
  .castle-nav a { padding: 0.45rem 0.8rem; font-size: 0.86rem; }
  .brick-desc { font-size: 0.76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-smoke span { animation: none; }
  .brick-face { transition: none; }
}
@media (forced-colors: active) {
  .brick-face, .slit, .car-btn, .brick-close { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .castle .side-col::before, .castle .side-col::after, .parapet { display: none; }
}

/* ------------------------------------------- castle round 2 (preview): towers, windows, panda, pinned nav */
/* Taller towers: a deeper crenellated cap that rises well above the keep's walkway, and a solid brick tower head
   with an arched, lit window. Fixed heights everywhere, so nothing moves when fonts or the tally arrive. */
.castle .side-col { margin-top: 54px; top: 0; } /* towers are not sticky (round 1 inherited a stray 6.5rem offset) */
.castle .side-col::before { top: -50px; height: 54px; left: -12px; right: -12px;
  --merlons: linear-gradient(#000, #000) 0 100% / 100% 18px no-repeat, linear-gradient(90deg, #000 58%, transparent 0) 4px 0 / 50px 100% repeat-x; }
.turret-head {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; flex: none;
  height: 252px; margin: -1rem -0.55rem 0.2rem; padding: 1.15rem 0.6rem 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(7, 8, 15, 0.25) 70%, rgba(7, 8, 15, 0.55)), var(--brick);
  background-size: auto, 56px 40px; border-radius: 3px 3px 0 0;
  box-shadow: inset 0 -10px 0 -4px #12131d, 0 10px 12px -10px rgba(0, 0, 0, 0.9); /* corbel ledge under the head */
}
.turret-head.t-solo { height: 208px; margin-top: 0.4rem; border-radius: 3px; }
.t-window {
  position: relative; display: block; flex: none; width: 88px; height: 112px; border-radius: 44px 44px 4px 4px;
  background: radial-gradient(70% 55% at 50% 72%, #ffd98a 0%, #f6a945 34%, #a8572c 70%, #3a1c3f 100%);
  border: 5px solid #4a4e66; outline: 2px solid #1a1c28; outline-offset: 0;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 10px 18px rgba(30, 10, 40, 0.7), 0 0 22px rgba(255, 184, 92, 0.28);
}
.t-window::before { /* mullion shadow + soft inner light, drawn under the mascot */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(40% 30% at 50% 30%, rgba(255, 244, 214, 0.35), transparent 70%);
}
.t-window::after { /* stone sill */
  content: ""; position: absolute; left: -12px; right: -12px; bottom: -11px; height: 11px; border-radius: 2px;
  background: linear-gradient(#5a5f7a, #3a3e54); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}
.t-pane { position: absolute; inset: 0; border-radius: 39px 39px 0 0; overflow: hidden; z-index: 1; } /* masks the art by the arch */
.t-mascot { position: absolute; left: 50%; bottom: -2px; width: 88px; height: auto; transform: translateX(-50%); z-index: 1;
  filter: drop-shadow(0 0 3px rgba(190, 120, 255, 0.55)) drop-shadow(0 0 8px rgba(110, 231, 255, 0.25)); }
.t-tabby .t-mascot { bottom: -4px; }
a.t-window { transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
a.t-window:hover, a.t-window:focus-visible { border-color: rgba(var(--gold), 0.8); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 10px 18px rgba(30, 10, 40, 0.6), 0 0 26px rgba(var(--gold), 0.5); }
a.t-window:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.t-eyes { transform-box: fill-box; transform-origin: center; animation: t-blink 5.5s infinite; }
.t-panda .t-eyes { animation-delay: -2.7s; }
@keyframes t-blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
.t-tabby .t-mascot { animation: t-peek 6s ease-in-out infinite; }
@keyframes t-peek { 0%, 60%, 100% { transform: translateX(-50%); } 70%, 85% { transform: translateX(-50%) rotate(-4deg) translateY(-2px); } }
.t-sign { margin-top: 0.35rem; text-align: center; font-size: 0.86rem; line-height: 1.3; padding: 0.3rem 0.7rem; border-radius: 6px;
  background: rgba(7, 8, 15, 0.85); border: 1px solid rgba(222, 228, 245, 0.12); }
.t-sign a { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(var(--gold), 0.6); text-underline-offset: 3px; }
.t-sign small { display: block; color: var(--text-2); font-size: 0.78rem; }

/* Dragon's nest on the right tower's roof; the panda tosses gold coins into it (castle.js). */
.nest { position: absolute; right: 16px; top: -79px; width: 76px; height: 36px; z-index: 2; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); }
.nest-coins { transform-box: fill-box; transform-origin: 50% 100%; }
.nest.got .nest-coins { animation: nest-pop 0.45s var(--ease); }
@keyframes nest-pop { 40% { transform: scale(1.18); filter: brightness(1.3); } }
.gz-coin { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff7d6 0 18%, #fcd34d 30%, #f59e0b 70%, #a16207 100%);
  box-shadow: 0 0 10px rgba(var(--gold), 0.8); will-change: transform, opacity; }

/* Chalkboard: fixed size, so filling it in never shifts anything. */
.chalkboard {
  flex: none; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 26px auto; align-items: center;
  column-gap: 0.5rem; width: 208px; height: 104px; padding: 0.4rem 0.65rem 0.4rem; margin: 0.2rem 0 0;
  background: radial-gradient(120% 90% at 30% 20%, #2c4a3b, #1b3127 70%); border: 5px solid #7a5532; border-radius: 6px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.6); color: #f2f1e8;
}
.chalkboard figcaption { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #e9e7da; }
.tally-num { grid-row: 1; grid-column: 2; font-size: 1.15rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.tally-marks { grid-row: 2; grid-column: 1 / -1; width: 120px; height: 26px; overflow: visible; }
.tally-marks path { stroke: #f2f1e8; stroke-width: 2.2; stroke-linecap: round; fill: none; opacity: 0.92; }
.tally-note { grid-row: 3; grid-column: 1 / -1; align-self: start; font-size: 0.72rem; line-height: 1.3; height: 2.6em; overflow: hidden; color: #dcdacb; }
.chalkboard.got { animation: board-glow 0.8s var(--ease); }
@keyframes board-glow { 30% { box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55), 0 0 18px rgba(var(--gold), 0.7); } }

/* Pinned compact nav (sticky header). Always laid out; only shown once the keep's smoke nav scrolls away. */
.castle .header { gap: 1rem; }
.mini-nav { display: flex; gap: 0.25rem; margin-left: auto; visibility: hidden; opacity: 0; transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s; }
.mini-nav[data-shown="true"] { visibility: visible; opacity: 1; transition: opacity 0.2s var(--ease); }
.mini-nav a { white-space: nowrap; color: var(--text-2); font-weight: 500; font-size: 0.9rem; padding: 0.45rem 0.75rem; border-radius: 999px; border: 1px solid transparent; }
.mini-nav a:hover, .mini-nav a:focus-visible { color: var(--text); border-color: rgba(222, 228, 245, 0.2); background: rgba(222, 228, 245, 0.06); }

/* A2A wall, round 2: an open brick's card is moved into the wall as a full-width row right under its brick's row,
   so the bricks below move down instead of being covered (castle.js). */
.wall > .brick-panel { position: relative; grid-column: 1 / -1; justify-self: center; width: min(640px, 100%); left: auto; top: auto; margin: 6px 0 10px; }
.wall > .brick-panel::before { /* notch pointing at the open brick */
  content: ""; position: absolute; top: -9px; left: var(--nx, 50%); width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg);
  background: var(--surface); border-left: 2.5px solid rgba(var(--gold), 0.75); border-top: 2.5px solid rgba(var(--gold), 0.75); z-index: 1; }
.wall > .brick-panel:not([hidden]) { animation: panel-in 0.18s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 1099px) {
  /* stacked: tower head becomes a short band with the window beside its sign / chalkboard */
  .turret-head { flex-direction: row; justify-content: center; gap: 1.4rem; height: 156px; padding: 1rem 0.8rem 1.2rem; }
  .turret-head.t-solo { height: 156px; }
  .nest { top: -79px; right: 22px; }
}
@media (max-width: 767px) {
  .castle .header { position: sticky; top: 0; z-index: 4; flex-direction: row; align-items: center; padding-block: 0.7rem; }
  .castle .logo { font-size: 1rem; gap: 0.5rem; }
  .mini-nav { gap: 0; }
  .mini-nav a { font-size: 0.8rem; padding: 0.4rem 0.4rem; }
  .mini-nav .mn-wide { display: none; }
}
@media (max-width: 380px) { .castle .logo .dot { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .t-eyes, .t-tabby .t-mascot, .nest.got .nest-coins, .chalkboard.got, .wall > .brick-panel:not([hidden]) { animation: none; }
}
@media (forced-colors: active) {
  .t-window { border-color: CanvasText; forced-color-adjust: none; }
  .chalkboard { border-color: CanvasText; }
  .mini-nav a { color: LinkText; }
}

/* Dragon loader v5 art (game asset, two WebP layers): soft neon glow + a slightly softened look; wings flap. */
.gz-dragon.gz-art .gz-dragon-in { position: relative; filter: drop-shadow(0 0 4px rgba(110, 231, 255, 0.45)) drop-shadow(0 0 10px rgba(190, 70, 255, 0.35)) saturate(0.92); }
.gz-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.gz-art .gz-art-wings { transform-origin: 61% 50%; animation: gz-art-flap 0.42s ease-in-out infinite; }
.gz-dragon.gz-art.gz-hover .gz-art-wings { animation-duration: 0.62s; }
.gz-dragon.gz-art.gz-breath .gz-art-body { filter: brightness(1.12); }
@keyframes gz-art-flap { 0%, 100% { transform: rotate(3deg) scaleY(1); } 50% { transform: rotate(-9deg) scaleY(0.8) skewX(-4deg); } }
@media (prefers-reduced-motion: reduce) { .gz-art .gz-art-wings { animation: none; } }

/* ------------------------------------------- castle round 3 (preview): rough-hewn stone A2A wall
   Running bond with varied widths: the wall is a wrapping flex row, each stone gets a base width and grow factor from
   a repeating 7-step pattern, so every course breaks at a different place and the joints never line up; each course
   still fills edge to edge (no ragged ends, so the arrow-slit fillers are not needed). Texture is one tiny inline SVG
   feTurbulence (no raster). Mortar is the dark wall showing through the gaps, recessed by an inset shadow, with the
   polychromatic glow running along it. Chipped corners: uneven per-stone border-radius. */
.castle .wall { display: flex; flex-wrap: wrap; gap: 7px; padding: 7px; isolation: isolate; background: #07080e;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 18px 30px -20px rgba(0, 0, 0, 0.9); }
.castle .wall::before { /* glow in the mortar joints: a blurred conic ring under the stones */
  content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0.55;
  background: conic-gradient(from var(--gz-angle), rgba(110,231,255,.7), rgba(167,139,250,.7), rgba(244,114,182,.6), rgba(251,191,36,.55), rgba(52,211,153,.6), rgba(110,231,255,.7));
  filter: blur(6px); animation: gz-spin 14s linear infinite; }
.castle .wall > .slit { display: none; }
.castle .wall > .brick { --b: 9.5rem; --g: 3; flex: var(--g) 1 var(--b); min-width: 0; border-radius: var(--chip, 5px 3px 6px 2px); }
.castle .wall > .brick:nth-child(7n+2) { --b: 12rem; --g: 4; --chip: 2px 7px 3px 6px; }
.castle .wall > .brick:nth-child(7n+3) { --b: 8.5rem; --g: 2; --chip: 6px 2px 5px 4px; }
.castle .wall > .brick:nth-child(7n+4) { --b: 11rem; --g: 4; --chip: 3px 5px 2px 7px; }
.castle .wall > .brick:nth-child(7n+5) { --b: 9rem; --g: 3; --chip: 7px 4px 6px 2px; }
.castle .wall > .brick:nth-child(7n+6) { --b: 13rem; --g: 5; --chip: 4px 3px 7px 5px; }
.castle .wall > .brick:nth-child(7n) { --b: 10rem; --g: 3; --chip: 2px 6px 4px 3px; }
.castle .wall .brick-face { border-radius: inherit; border: 0; padding: 0.65rem 0.75rem 0.7rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.16'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 18% 12%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(90% 80% at 85% 95%, rgba(0, 0, 0, 0.32), transparent 60%),
    linear-gradient(176deg, #30344a, #262939 55%, #1f2231);
  background-size: 120px 120px, auto, auto, auto;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.13), inset 2px 0 0 rgba(255, 255, 255, 0.04), inset 0 -3px 0 rgba(0, 0, 0, 0.45),
    inset -2px 0 0 rgba(0, 0, 0, 0.3), 0 2px 3px rgba(0, 0, 0, 0.7); }
.castle .wall > .brick:nth-child(3n) .brick-face { background-position: 37px 61px, 0 0, 0 0, 0 0; }
.castle .wall > .brick:nth-child(3n+1) .brick-face { background-position: 83px 17px, 0 0, 0 0, 0 0; }
.castle .wall .brick-face:hover, .castle .wall .brick-face:focus-visible { transform: translateY(-3px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.45), 0 0 16px rgba(220, 225, 240, 0.4), 0 7px 12px -6px rgba(0, 0, 0, 0.85); }
.castle .wall .brick-face[aria-expanded="true"] { box-shadow: inset 0 0 0 2px rgba(var(--gold), 0.75), 0 0 14px rgba(var(--gold), 0.45); }
.castle .wall .brick-face:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.castle .wall .brick-name { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); }
.castle .wall .brick-desc { color: #c9cde0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); }
.castle .wall > .brick-panel { flex: 0 0 100%; width: 100%; padding-inline: max(0px, calc((100% - 640px) / 2)); }
@media (prefers-reduced-motion: reduce) { .castle .wall::before { animation: none; } }
@media (forced-colors: active) { .castle .wall::before { display: none; } .castle .wall .brick-face { border: 2px solid CanvasText; } }

/* ------------------------------------------- castle round 3 (preview): fixed side columns + mobile drawers
   Desktop: the centre column scrolls with the page; both towers stay pinned under the header, and each one's body
   (below its turret head) scrolls on its own if it is taller than the viewport. Small screens: the towers become
   bottom-sheet drawers opened from two tabs (castle.js: aria-expanded, focus trap, Esc closes). */
.castle { --hdr: 4.4rem; }
@media (min-width: 1100px) {
  .castle .side-col { position: sticky; top: calc(var(--hdr) + 56px); max-height: calc(100vh - var(--hdr) - 56px - 14px);
    max-height: calc(100dvh - var(--hdr) - 56px - 14px); display: flex; flex-direction: column; }
  .castle .side-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex;
    flex-direction: column; gap: 1rem; padding: 0 0.15rem 0.4rem; scrollbar-width: thin; scrollbar-color: #4a4e66 transparent; }
}
.castle .side-body { display: flex; flex-direction: column; gap: 1rem; }
.side-tabs { position: fixed; left: 0.75rem; bottom: 1rem; z-index: 5; display: flex; gap: 0.4rem; }
.side-tabs[hidden] { display: none; }
.side-tab { font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--text); cursor: pointer; padding: 0.6rem 0.95rem; min-height: 44px;
  border-radius: 999px; border: 1px solid rgba(var(--gold), 0.55); background: rgba(16, 17, 28, 0.92); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
.side-tab[aria-expanded="true"] { background: rgba(var(--gold), 0.2); }
.side-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.drawer-scrim { position: fixed; inset: 0; z-index: 6; background: rgba(3, 4, 9, 0.66); }
.drawer-scrim[hidden] { display: none; }
.drawer-x { position: sticky; top: 0; align-self: flex-end; z-index: 3; width: 44px; height: 44px; margin: -0.4rem -0.2rem 0 0; flex: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.drawer-x:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1099.98px) {
  .castle.drawers .side-col { position: fixed; z-index: 7; left: 0; right: 0; bottom: 0; top: auto; margin: 0; max-height: 86vh; max-height: 86dvh;
    overflow-y: auto; overscroll-behavior: contain; border-radius: 16px 16px 0 0; padding: 1rem 0.9rem 1.4rem;
    background: #0d0e18; box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.8); border-top: 2px solid rgba(var(--gold), 0.5);
    transform: translateY(105%); visibility: hidden; transition: transform 0.25s var(--ease), visibility 0s linear 0.25s; }
  .castle.drawers .side-col.open { transform: none; visibility: visible; transition: transform 0.25s var(--ease); }
  .castle.drawers .side-col::before, .castle.drawers .side-col::after { display: none; }
  .castle.drawers .side-col .turret-head { margin-top: 0; }
  .castle.drawers { padding-bottom: 4.5rem; }
  body.castle.drawer-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .castle.drawers .side-col, .castle.drawers .side-col.open { transition: none; } }

/* Global chat: fixed-height log so new messages never move anything */
.chat-box { display: flex; flex-direction: column; gap: 0.5rem; background: rgba(7, 8, 15, 0.86); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.8rem; }
.chat-log { list-style: none; margin: 0; padding: 0.25rem; height: 240px; overflow-y: auto; overscroll-behavior: contain; display: flex;
  flex-direction: column; gap: 0.45rem; background: rgba(0, 0, 0, 0.3); border-radius: 8px; }
.chat-log:focus-visible { outline: 2px solid var(--accent); }
.chat-msg { font-size: 0.86rem; line-height: 1.35; padding: 0.35rem 0.45rem; border-radius: 6px; background: rgba(255, 255, 255, 0.04); overflow-wrap: anywhere; }
.chat-meta { display: flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--text-2); margin-bottom: 0.1rem; }
.chat-handle { font-weight: 600; color: #b9e9ff; }
.chat-badge { font-size: 0.66rem; padding: 0 0.3rem; border-radius: 4px; border: 1px solid rgba(167, 139, 250, 0.6); color: #d6ccff; }
.chat-report { margin-left: auto; font: inherit; font-size: 0.72rem; color: var(--text-2); background: none; border: 0; cursor: pointer;
  padding: 0.25rem 0.35rem; min-width: 24px; min-height: 24px; text-decoration: underline; }
.chat-report:hover, .chat-report:focus-visible { color: var(--text); }
.chat-empty { color: var(--text-2); font-size: 0.85rem; padding: 0.4rem; }
.chat-form { display: flex; flex-direction: column; gap: 0.4rem; }
.chat-form textarea { width: 100%; resize: vertical; min-height: 3.2rem; font: inherit; font-size: 0.9rem; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.55rem; }
.chat-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chat-meta { flex-wrap: wrap; row-gap: 0; }
.chat-handle { min-width: 0; overflow-wrap: anywhere; }
.chat-badge, .chat-report, .chat-meta time { white-space: nowrap; }
body.drawer-open main { z-index: 8; } /* main is a stacking context; lift it (drawer + scrim) above the header and the Guru */
body.drawer-open .guru { visibility: hidden; }