/* Retro Browse directory. Scoped to browse.html. */
body.retro-browse{
  --ink:var(--retro-ink,#182525);
  --ink-muted:var(--retro-muted,#344747);
  min-height:100vh;
  overflow-x:hidden;
  color:var(--retro-ink,#182525);
  background:var(--retro-desktop,#BD9CE8);
  background-image:repeating-linear-gradient(0deg,transparent 0 3px,#00000008 3px 4px);
  font-family:Verdana,Arial,sans-serif;
}
.retro-browse .topbar{
  max-width:1180px;margin:22px auto 0;padding:12px 18px;
  background:var(--retro-panel,#CBB5EF);
  border:2px solid;
  border-color:var(--retro-edge-light,#fff) var(--retro-edge-dark,#52505B) var(--retro-edge-dark,#52505B) var(--retro-edge-light,#fff);
  box-shadow:5px 5px #0005;
}
.retro-browse .logo{font:900 clamp(19px,3vw,29px)/1.2 'Courier New',monospace;letter-spacing:-1.5px}
.retro-browse .logo span{color:var(--retro-link,#513477)}
.retro-browse .shuffle-btn{
  min-height:40px;padding:8px 12px;border:3px solid;border-radius:0;box-shadow:1px 1px #222;
  border-color:var(--retro-edge-light,#fff) var(--retro-edge-dark,#52505B) var(--retro-edge-dark,#52505B) var(--retro-edge-light,#fff);
  background:var(--retro-panel,#CBB5EF);color:var(--retro-ink,#182525);
  font:bold 11px/1.3 Verdana,sans-serif;cursor:pointer;
}
.retro-browse .shuffle-btn:active{border-color:var(--retro-edge-dark) var(--retro-edge-light) var(--retro-edge-light) var(--retro-edge-dark);transform:translate(1px,1px);box-shadow:none}
.retro-browse .retro-menu{
  max-width:1180px;margin:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:10px 18px;
  background:var(--retro-tint,#E1CEF6);border:1px solid var(--retro-edge-dark,#343434);
  color:var(--retro-ink,#182525);font:13px 'Courier New',monospace;
}
.retro-browse .retro-menu a{color:var(--retro-link,#513477);text-decoration:underline;text-underline-offset:3px}
.retro-browse .retro-menu span{margin-left:auto;font-size:11px;color:var(--retro-muted,#344747)}
.retro-browse main{
  max-width:1180px;margin:0 auto 30px;padding:28px;
  background:var(--retro-tint,#E1CEF6);border:1px solid var(--retro-edge-dark,#253B3B);box-shadow:5px 5px #0005;
}
.browse-window{
  background:var(--retro-paper,#F3E7FF);border:2px solid;
  border-color:var(--retro-edge-light,#fff) var(--retro-edge-dark,#52505B) var(--retro-edge-dark,#52505B) var(--retro-edge-light,#fff);
  box-shadow:5px 5px #0003;
}
.browse-window-bar{
  display:flex;justify-content:space-between;gap:12px;margin:3px;padding:8px 10px;
  background:var(--retro-title,#513477);color:var(--retro-title-ink,#fff);
  font:bold 12px/1.4 'Courier New',monospace;
}
.browse-address{padding:9px 12px;background:var(--retro-panel,#CBB5EF);border-bottom:1px solid var(--retro-edge-dark,#777);font:11px/1.4 'Courier New',monospace;overflow-wrap:anywhere}
.browse-address span{font-weight:bold;margin-right:12px}
.browse-intro{padding:30px 30px 32px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:8px 44px;align-items:end}
.retro-browse .eyebrow{grid-column:1/-1;width:max-content;margin:0 0 9px;padding:6px 9px;border:0;border-radius:0;background:var(--retro-accent,#FFBBD9);color:var(--retro-accent-ink,#182525);font:bold 10px/1.4 'Courier New',monospace;letter-spacing:1px}
.retro-browse h1{margin:0;font:900 clamp(40px,6.7vw,76px)/.92 'Courier New',monospace;letter-spacing:-5px;color:var(--retro-ink,#182525)}
.browse-intro p{margin:0 0 4px;padding-left:18px;border-left:3px solid var(--retro-desktop,#BD9CE8);font:14px/1.7 Verdana,sans-serif;color:var(--retro-muted,#344747)}
.directory-heading{display:flex;justify-content:space-between;gap:16px;margin:32px 0 15px;padding:8px 3px;border-top:3px double var(--retro-edge-dark,#777);border-bottom:1px dotted var(--retro-edge-dark,#777);font:bold 11px/1.4 'Courier New',monospace;color:var(--retro-muted,#344747)}
.retro-browse .hub-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0}
.retro-browse .hub-card{
  --tilt:0deg;--lift:0px;position:relative;min-height:190px;padding:19px 18px 16px;
  border:2px solid;border-radius:0;box-shadow:4px 4px #0003;
  border-color:var(--retro-edge-light,#fff) var(--retro-edge-dark,#52505B) var(--retro-edge-dark,#52505B) var(--retro-edge-light,#fff);
  background:var(--retro-paper,#F3E7FF);color:var(--retro-ink,#182525);
  transform:translateY(var(--lift)) rotate(var(--tilt));
}
.retro-browse .hub-card:nth-child(3n+1){--tilt:-.45deg;--lift:2px}
.retro-browse .hub-card:nth-child(3n+2){--tilt:.35deg;--lift:-1px}
.retro-browse .hub-card:nth-child(3n){--tilt:-.2deg;--lift:1px}
.retro-browse .hub-card::before{content:'QUEST FILE';display:block;width:max-content;margin:0 0 14px;padding:4px 7px;background:var(--retro-title,#513477);color:var(--retro-title-ink,#fff);font:bold 9px/1.3 'Courier New',monospace;letter-spacing:.7px}
.retro-browse .hub-card h2{margin:0 0 9px;font:bold 21px/1.12 'Courier New',monospace;letter-spacing:-.5px}
.retro-browse .hub-card p{margin:0 0 14px;color:var(--retro-ink,#182525);font:500 14px/1.55 Verdana,sans-serif}
.retro-browse .hub-card::after{content:'OPEN QUEST GUIDE →';display:flex;align-items:center;min-height:44px;margin-top:auto;padding-top:8px;color:var(--retro-link,#513477);text-decoration:underline;text-underline-offset:3px;font:bold 13.5px/1.3 'Courier New',monospace}
.retro-browse .hub-card-experience::after{content:'OPEN EXPERIENCE →'}
.retro-browse .hub-card-featured{background:var(--retro-accent,#FFBBD9);color:var(--retro-accent-ink,#182525)}
.retro-browse .hub-card-featured::before{content:'START HERE';background:var(--retro-title,#513477)}
.retro-browse .hub-card-featured :is(h2,p),.retro-browse .hub-card-featured::after{color:var(--retro-accent-ink,#182525)}
.retro-browse .hub-card:hover{transform:translateY(-3px) rotate(var(--tilt));box-shadow:6px 7px #0004;filter:none}
.retro-browse footer{max-width:1180px;margin:0 auto 30px;padding:18px;background:var(--retro-panel,#CBB5EF);border:2px solid;border-color:var(--retro-edge-light,#fff) var(--retro-edge-dark,#52505B) var(--retro-edge-dark,#52505B) var(--retro-edge-light,#fff);color:var(--retro-muted,#344747);font:11px/1.9 'Courier New',monospace}
.retro-browse footer a{display:inline-block;padding:5px 2px;color:var(--retro-link,#513477)}
.retro-browse :is(a,button):focus-visible{outline:3px solid #B13B00;outline-offset:3px}
.retro-browse .retro-skip{position:absolute;top:-100px;left:10px;z-index:100;padding:12px;background:#fff;color:#000080}
.retro-browse .retro-skip:focus{top:10px}
.retro-browse[data-retro-mode="dark"]{color-scheme:dark}
@media(max-width:820px){
  .browse-intro{grid-template-columns:1fr;gap:20px}.browse-intro p{max-width:620px;padding-left:14px}
  .retro-browse .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .retro-browse .topbar{margin:0;padding:10px}.retro-browse .logo{font-size:20px}.retro-browse .shuffle-btn{padding:6px;font-size:10px}
  .retro-browse .retro-menu{gap:0;justify-content:space-between;padding:3px 9px;font-size:11px}.retro-browse .retro-menu a{padding:12px 3px}.retro-browse .retro-menu span{display:none}
  .retro-browse main{margin:0;padding:12px 12px 22px}.browse-intro{padding:24px 17px 25px}.retro-browse h1{font-size:42px;letter-spacing:-3px}.browse-intro p{font-size:13px}
  .directory-heading{margin-top:25px;font-size:9px}.retro-browse .hub-grid{grid-template-columns:1fr;gap:17px}.retro-browse .hub-card{min-height:0;padding:18px 17px}
  .retro-browse .hub-card:nth-child(odd){--tilt:-.25deg;--lift:0}.retro-browse .hub-card:nth-child(even){--tilt:.2deg;--lift:0}
  .retro-browse footer{margin:0;padding:18px 12px}
}
@media(prefers-reduced-motion:reduce){.retro-browse *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}