:root{
  --bg:#000;
  --panel:#1a1a1a;
  --surface:#222;
  --amber:#c9a227;
  --amber-2:#e8b84b;
  --sheikah:#4fc3c3;
  --danger:#8b1a1a;
  --muted:#9aa0a6;
  --glass: rgba(255,255,255,0.03);
  --card-shadow: 0 8px 30px rgba(0,0,0,0.6);
  --radius:12px;
  --gap:1rem;
  --max-width:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:#e6e6e6;
  font-family:Inter,system-ui,Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}

.masthead{padding:1rem 0 0}
.masthead-inner{display:flex;align-items:center}
.brand{display:flex;gap:1rem;align-items:center}
.title h1{font-family:Cinzel,serif;margin:0;font-size:1.4rem;color:var(--amber-2)}
.subtitle{margin:0;font-size:0.9rem;color:var(--muted)}

.conditions{margin-top:1rem}
.conditions-card{background:transparent;border-left:none;padding:0;margin-bottom:0.8rem;border-radius:0}
.conditions-card ul{margin:0;padding-left:1.2rem;color:var(--muted);line-height:1.5}
.conditions-card strong{color:#fff}

.tabs{position:sticky;top:0;z-index:40;background:transparent;backdrop-filter:none;display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;align-items:center;gap:0.5rem;padding:0.6rem 0;margin-top:1rem}
.tab-button{display:inline-flex;background:transparent;border:none;color:var(--muted);padding:0.6rem 1rem;border-radius:0;cursor:pointer;font-weight:600;white-space:nowrap;flex:0 0 auto}
.tab-button.active{color:var(--amber);border:none;box-shadow:none;text-decoration:underline;font-weight:700}

.layout{display:flex;gap:1.5rem;margin-top:1rem}
.trials{flex:1}
  .quick-jump{width:180px;flex:0 0 180px;background:transparent;border-radius:0;padding:0;margin-left:1rem;align-self:start;position:sticky;top:80px;height:calc(100vh - 100px);overflow:auto}
  .quick-jump h4{margin:0 0 0.5rem 0;color:var(--amber-2);font-family:Cinzel,serif}
  .quick-jump ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0.3rem}
  .quick-jump li{margin:0}
  .quick-jump a{display:inline-block;padding:0.15rem 0.25rem;border-radius:4px;color:var(--muted);text-decoration:none;border:0}
  .quick-jump a.active{color:var(--sheikah);font-weight:700;text-decoration:underline}

.section-banner{font-family:Cinzel,serif;font-size:1.8rem;margin:0 0 0.4rem 0;color:var(--amber-2);position:relative}
.section-banner:after{content:'';display:block;height:3px;width:120px;background:linear-gradient(90deg,var(--amber),var(--amber-2));margin-top:8px;border-radius:2px}
.section-sub{color:var(--muted);font-size:0.95rem;margin-top:0}

.floor-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:1rem}
.floor-card{background:transparent;padding:0.8rem 0;border-radius:0;box-shadow:none;border:none;margin-bottom:0.8rem;position:relative}
.card-strip{display:flex;justify-content:space-between;align-items:flex-start;gap:0.5rem}
.floor-badge{background:transparent;color:var(--amber-2);padding:0;margin-right:0.6rem;font-weight:700;font-size:0.82rem;text-transform:uppercase}
.type-badge{padding:0;border-radius:0;font-weight:700;font-size:0.78rem;text-transform:uppercase}
.type-badge.combat{color:var(--amber-2);opacity:0.95}
.type-badge.rest{color:var(--sheikah)}
.type-badge.monk{color:#ffd77a}
.type-badge.boss{color:var(--danger)}

.card-title{margin:0.6rem 0 0.4rem 0;font-size:1.05rem}
.muted-list{color:var(--muted);margin:0 0 0.6rem 0}

.details-compact summary, details.loot summary{cursor:pointer;padding:0;border-radius:0;background:none;border:none}
details.loot[open] summary{box-shadow:none}
details.loot ul{margin:0.5rem 0 0 1rem;color:var(--muted)}

.tips{margin-top:0.4rem;padding:0;color:var(--muted)}
.tips p{margin:0 0 0.4rem 0}

.rest{box-shadow:none;border:none}
.sword-monk{box-shadow:none;border:none}

/* Responsive behavior */
@media(min-width:769px){
  .floor-grid{grid-template-columns:repeat(2,1fr)}
  .quick-jump{display:block}
}
@media(max-width:768px){
  .layout{flex-direction:column}
  .quick-jump{display:none}
  .tab-button{flex:1}
}

a{color:inherit}

/* small helper */
.accent{color:var(--amber)}

/* Banner image at the top of the guide */
.banner-wrap{margin-bottom:0.75rem}
.top-banner{width:100%;height:auto;display:block;border-radius:10px;object-fit:cover}

/* Overlay title on banner */
.banner-wrap{position:relative}
.banner-overlay{position:static;margin-top:0.6rem;font-family:Cinzel,serif;color:var(--amber-2)}
.banner-overlay h1{margin:0;font-size:1.6rem;color:var(--amber-2);text-shadow:0 2px 10px rgba(0,0,0,0.6);letter-spacing:0.6px}
.banner-overlay .subtitle{margin:0.25rem 0 0;color:var(--muted);font-size:0.95rem}

@media(min-width:769px){
  .banner-overlay{position:static;right:auto;top:auto;transform:none;background:none;padding:0;border-radius:0;text-align:left;max-width:100%;margin-top:0.6rem}
  .banner-overlay h1{font-size:1.8rem}
}

/* Embedded map frame styling (responsive) */
.map-frame{width:100%;border:0;border-radius:10px;box-shadow:var(--card-shadow);background:var(--surface);height:min(80vh,720px)}
@media(max-width:768px){
  .map-frame{height:50vh}
}
@media(min-width:769px){
  .map-frame{height:75vh}
}

/* Small clickable preview on index page */
.map-preview{position:relative;display:block;max-width:360px}
.map-preview-iframe{width:100%;height:140px;border:0;border-radius:8px;box-shadow:var(--card-shadow);background:var(--surface)}
.map-preview-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--sheikah);text-decoration:none;font-weight:700;background:linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.25));border-radius:8px;cursor:pointer;opacity:0.98}
.map-preview-overlay:focus{outline:2px solid var(--sheikah);outline-offset:2px}

/* Prevent sticky nav from overlapping sections when scrolling */
html{scroll-padding-top:88px}
.trial-section{scroll-margin-top:88px}

/* Small guide switcher used to toggle between Breath of the Wild and TOTK pages */
.game-toggle{margin-top:0.6rem;display:flex;gap:0.5rem;align-items:center}
.game-button{display:inline-block;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:0.35rem 0.6rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:0.95rem}
.game-button.active{color:var(--sheikah);border-color:var(--sheikah)}
.game-button:focus{outline:2px solid rgba(79,195,195,0.15);outline-offset:2px}