/* ============================================================================
   room.css — the chrome every room shares.
   ============================================================================
   One copy. The rooms were built in three generations and each carried its own
   header and trail inline, which is how the May rooms ended up with the engine
   bright at the top. A room that links this gets the current chrome; a change
   here lands in every room that does. (CSP: style-src 'self'.)

   - nav.ghost-nav  — the way home and the engine credit, dim until wanted.
   - .cat-wander    — the tracks lead on: the single-direction ring.
   - .click-trace   — a paw where the visitor pressed (click-trace.js).
   ============================================================================ */

nav.ghost-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 3rem;
  background: none; border: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  opacity: 0.12;
  transition: opacity 0.8s ease;
}
nav.ghost-nav:hover, nav.ghost-nav:focus-within { opacity: 1; }
nav.ghost-nav a {
  font-family: 'Courier Prime', Courier, monospace;
  font-size: 0.7rem; font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase;
  color: #857565; text-decoration: none;
  transition: color 0.2s;
}
nav.ghost-nav a:hover, nav.ghost-nav a:focus-visible { color: #c97d0a; outline: none; }
@media (max-width: 768px) { nav.ghost-nav { padding: 1rem 1.2rem; } }

.cat-wander{position:fixed;left:50%;bottom:1.05rem;transform:translateX(-50%);z-index:60;display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;opacity:.34;transition:opacity .4s ease;font-family:'Courier Prime','Courier New',monospace;font-size:.72rem;letter-spacing:.16em;color:#857565;-webkit-tap-highlight-color:transparent;}
.cat-wander:hover,.cat-wander:focus-visible{opacity:1;outline:none;}
.wander-trail{display:inline-flex;align-items:flex-end;gap:.28em;}
.wander-trail svg{width:12px;height:12px;fill:#c97d0a;opacity:.4;animation:wanderStep 3.2s ease-in-out infinite;}
.wander-trail svg:nth-child(2){animation-delay:.4s;transform:translateY(-1.5px);}
.wander-trail svg:nth-child(3){animation-delay:.8s;}
.cat-wander:hover .wander-trail svg{opacity:.9;}
.wander-dest{color:#857565;transition:color .4s ease;}
.cat-wander:hover .wander-dest{color:#c97d0a;}
@keyframes wanderStep{0%,100%{opacity:.28;}45%{opacity:.85;}}
@media (prefers-reduced-motion:reduce){.wander-trail svg{animation:none;opacity:.6;}}

.click-trace { position: fixed; pointer-events: none; z-index: 9999; width: 36px; height: 32px; transform: translate(-50%, -50%); animation: clickTraceFade 1.25s cubic-bezier(0.16, 0.84, 0.44, 1) forwards; }
.click-trace svg { width: 100%; height: 100%; opacity: 0.7; }
.click-trace::after { content: ''; position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(circle, rgba(201,125,10,0.45) 0%, rgba(201,125,10,0.14) 45%, transparent 75%); pointer-events: none; z-index: -1; animation: clickTraceHalo 1.25s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
@keyframes clickTraceFade { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 60% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } }
@keyframes clickTraceHalo { 0% { opacity: 0; transform: scale(0.55); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.9); } }