/* The Lifted Spirits Tavern
   Page-specific Raven Bard styles.
*/

:root{
  --tavern-wine:#5d2227;
  --tavern-wine-dark:#2b1115;
  --tavern-wood:#3a2418;
  --tavern-brass:#c99d4d;
  --tavern-amber:#e0aa58;
  --tavern-shadow:#070609;
}

body{
  background:
    radial-gradient(circle at 50% -10%,rgba(101,48,24,.16),transparent 32%),
    var(--black);
}

.tavern-page{overflow:hidden}

.tavern-hero{
  min-height:clamp(620px,78vh,820px);
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(199,163,71,.28);
  background:
    radial-gradient(circle at 72% 35%,rgba(197,119,45,.16),transparent 30%),
    linear-gradient(125deg,#160e0e,#09090d 62%);
}

.tavern-hero-image{
  position:absolute;
  z-index:0;
  top:50%;
  right:-2vw;
  width:min(76vw,1500px);
  height:auto;
  max-width:none;
  transform:translateY(-50%);
  pointer-events:none;
  user-select:none;
}

.tavern-hero-shade{
  position:absolute;
  z-index:1;
  inset:0;
  background:
    linear-gradient(90deg,rgba(6,6,8,.96) 0%,rgba(7,6,8,.88) 25%,rgba(7,6,8,.42) 43%,transparent 64%),
    linear-gradient(0deg,rgba(6,6,8,.88),transparent 34%),
    radial-gradient(circle at 78% 40%,rgba(224,170,88,.08),transparent 28%);
  pointer-events:none;
}

.tavern-hero-copy{
  position:relative;
  z-index:2;
  width:min(760px,82vw);
  margin-left:clamp(28px,7vw,120px);
  padding:70px 0;
  text-shadow:0 4px 18px rgba(0,0,0,.65);
}

.tavern-hero h1{
  margin:0;
  font-family:var(--display);
  font-size:clamp(4rem,8.4vw,8.7rem);
  line-height:.88;
  letter-spacing:-.055em;
}

.tavern-hero h1 span{display:block}
.tavern-hero h1 span:last-child{color:var(--gold)}

.tavern-subtitle{
  margin:22px 0 12px;
  font-family:var(--display);
  color:var(--gold2);
  font-size:clamp(1.15rem,2vw,1.9rem);
  letter-spacing:.06em;
}

.tavern-intro{
  max-width:620px;
  color:#ddd5d7;
  font-size:1.02rem;
}

.tavern-destinations{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  padding:1px;
  background:rgba(199,163,71,.28);
}

.destination-card{
  min-height:190px;
  padding:28px 24px;
  background:
    radial-gradient(circle at 100% 0,rgba(124,68,31,.16),transparent 38%),
    linear-gradient(145deg,#171117,#0d0c10);
  transition:.22s ease;
  position:relative;
}

.destination-card:hover{
  transform:translateY(-3px);
  background:
    radial-gradient(circle at 100% 0,rgba(199,163,71,.18),transparent 38%),
    linear-gradient(145deg,#1c141a,#0d0c10);
  box-shadow:0 18px 34px rgba(0,0,0,.25);
  z-index:2;
}

.destination-icon{
  color:var(--gold);
  font-size:1.7rem;
  display:block;
  margin-bottom:15px;
}

.destination-card strong{
  font-family:var(--display);
  color:var(--gold2);
  display:block;
  margin-bottom:9px;
  font-size:1rem;
}

.destination-card small{
  color:#c6bec4;
  font-size:.78rem;
}

.tavern-section{
  padding:82px clamp(22px,6vw,100px);
  background:
    radial-gradient(circle at 85% 15%,rgba(89,43,18,.10),transparent 22%),
    linear-gradient(145deg,#111014,#09090c);
}

.stage-section{
  background:
    radial-gradient(circle at 75% 5%,rgba(214,143,57,.12),transparent 23%),
    radial-gradient(circle at 20% 100%,rgba(91,45,145,.15),transparent 30%),
    #0c0b0e;
}

.section-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,420px);
  gap:46px;
  align-items:end;
  margin-bottom:34px;
}

.section-heading.compact{
  grid-template-columns:1fr;
  max-width:900px;
}

.section-heading h2{
  margin:.1em 0;
  font-family:var(--display);
  font-size:clamp(2.8rem,5.5vw,5.3rem);
  line-height:.95;
  color:var(--ivory);
}

.section-heading p:not(.kicker){
  max-width:720px;
  color:#c8c0c6;
}

.stage-section > .section-heading{
  grid-template-columns:1fr;
  gap:28px;
}

.stage-art-frame{
  width:100%;
  max-width:1833px;
  margin:0 auto;
  padding:clamp(5px,.6vw,10px);
  border:1px solid rgba(199,163,71,.72);
  background:
    linear-gradient(145deg,rgba(92,57,31,.95),rgba(24,14,13,.98) 48%,rgba(117,75,34,.82));
  box-shadow:
    0 0 0 1px rgba(8,6,8,.92),
    0 0 0 3px rgba(199,163,71,.16),
    0 24px 60px rgba(0,0,0,.48),
    inset 0 0 18px rgba(224,170,88,.12);
}

.stage-art-frame img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(8,6,8,.92);
}

.stage-art-frame small{display:none}

.section-art-placeholder{
  min-height:180px;
  border:1px dashed rgba(199,163,71,.55);
  display:grid;
  place-items:center;
  align-content:center;
  gap:6px;
  background:
    radial-gradient(circle at 50% 45%,rgba(199,163,71,.12),transparent 42%),
    rgba(255,255,255,.02);
  color:var(--gold);
  font-family:var(--display);
}

.section-art-placeholder small{
  color:#8f878d;
  font-family:var(--serif);
  font-size:.7rem;
}

.setlist-shell{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(300px,.72fr);
  gap:18px;
  align-items:start;
}

.player-panel,
.setlist-panel,
.notice-board{
  border:1px solid rgba(199,163,71,.48);
  background:
    linear-gradient(145deg,rgba(26,18,20,.98),rgba(11,10,13,.98));
  box-shadow:0 25px 60px rgba(0,0,0,.28);
}

.player-panel{padding:24px}
.setlist-panel{padding:22px}

.player-heading{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:16px;
}

.player-label{
  margin:0 0 5px;
  font-family:var(--display);
  font-size:.62rem;
  letter-spacing:.18em;
  color:var(--gold);
}

.player-heading h3,
.setlist-title h3{
  margin:.1em 0;
  font-family:var(--display);
  color:var(--ivory);
  font-size:clamp(1.35rem,2vw,2rem);
}

.player-heading #now-meta,
.setlist-title p{
  margin:3px 0 0;
  color:#a8a0a6;
  font-size:.82rem;
}

.small-control{
  border:1px solid rgba(199,163,71,.5);
  background:rgba(199,163,71,.07);
  color:var(--gold2);
  padding:9px 12px;
  font-family:var(--display);
  font-size:.62rem;
  cursor:pointer;
}

#visualizer{
  width:100%;
  height:220px;
  display:block;
  border:1px solid rgba(199,163,71,.28);
  background:
    linear-gradient(180deg,rgba(91,45,145,.10),transparent 48%),
    #07070a;
}

.transport{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:20px 0 15px;
}

.transport button{
  cursor:pointer;
  color:var(--gold2);
  border:1px solid rgba(199,163,71,.55);
  background:#0a090c;
}

.transport-button{
  width:46px;
  height:46px;
}

.play-button{
  width:62px;
  height:62px;
  border-radius:50%;
  font-size:1.25rem;
  background:radial-gradient(circle,#2b182e,#0a090c)!important;
}

.progress-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  gap:12px;
  align-items:center;
  font-size:.72rem;
  color:#a49ca2;
}

.volume-row{
  display:grid;
  grid-template-columns:auto minmax(120px,260px);
  gap:14px;
  align-items:center;
  justify-content:end;
  margin-top:12px;
  color:#aaa2a8;
  font-size:.72rem;
}

input[type="range"]{
  accent-color:var(--gold);
  width:100%;
}

.eq-panel{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:22px;
  padding-top:20px;
}

.eq-heading{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}

.eq-heading h4{
  margin:0;
  font-family:var(--display);
  color:#e9e2e7;
}

.eq-presets{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:flex-end;
}

.eq-presets button{
  border:1px solid rgba(199,163,71,.36);
  background:transparent;
  color:#a9a1a7;
  padding:7px 10px;
  font-family:var(--display);
  font-size:.58rem;
  cursor:pointer;
}

.eq-presets button.active,
.eq-presets button:hover{
  color:#0d0b0d;
  background:var(--gold2);
}

.eq-sliders{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:20px;
}

.eq-sliders label{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:9px;
  align-items:center;
  font-size:.72rem;
  color:#c2bac0;
}

.eq-sliders output{
  min-width:44px;
  text-align:right;
  color:var(--gold2);
  font-size:.66rem;
}

.performance-notes{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:22px;
  padding-top:18px;
}

.performance-notes p:not(.player-label){
  color:#bbb3b9;
  font-size:.85rem;
  min-height:2.8em;
}

.performance-notes .button{
  margin-top:6px;
}

.disabled{
  opacity:.35;
  pointer-events:none;
}

.setlist-title{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:14px;
  margin-bottom:8px;
}

.track-list{
  display:flex;
  flex-direction:column;
}

.track-row{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:14px 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  transition:.18s;
}

.track-row:hover,
.track-row.active{
  background:linear-gradient(90deg,rgba(199,163,71,.09),transparent);
}

.track-number{
  font-family:var(--display);
  color:#756d72;
  font-size:.72rem;
}

.track-row.active .track-number{color:var(--gold)}

.track-info strong{
  display:block;
  color:#e8e1e5;
  font-family:var(--display);
  font-size:.75rem;
  line-height:1.3;
}

.track-info small{
  color:#888087;
  font-size:.68rem;
}

.track-action{
  color:var(--gold);
  font-size:.9rem;
}

.character-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.character-card{
  min-height:360px;
  border:1px solid rgba(199,163,71,.35);
  background:linear-gradient(145deg,#181318,#0c0b0e);
  overflow:hidden;
  transition:.22s;
}

.character-card:hover{
  transform:translateY(-4px);
  border-color:rgba(224,194,109,.82);
  box-shadow:0 18px 38px rgba(0,0,0,.24);
}

.character-image{
  min-height:220px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 50%,rgba(91,45,145,.18),transparent 42%),
    #0d0c10;
  color:#6f666d;
  font-family:var(--display);
  font-size:.66rem;
  letter-spacing:.12em;
  overflow:hidden;
}

.character-image img{
  width:100%;
  height:250px;
  object-fit:cover;
  object-position:center top;
}

.character-copy{
  padding:18px;
}

.character-copy .role{
  color:var(--gold);
  font-family:var(--display);
  font-size:.58rem;
  letter-spacing:.13em;
}

.character-copy h3{
  font-family:var(--display);
  color:var(--ivory);
  margin:.45em 0;
  font-size:1rem;
}

.character-copy p{
  color:#aaa2a8;
  font-size:.78rem;
  margin:0;
}

.notice-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.notice-board{
  padding:24px;
}

.notice-header{
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:15px;
}

.notice-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(199,163,71,.55);
  color:var(--gold);
  font-size:1.25rem;
}

.notice-header h3{
  margin:0;
  font-family:var(--display);
  color:var(--ivory);
  font-size:1.4rem;
}

.notice-item{
  padding:17px 2px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.notice-item:last-child{border-bottom:0}

.notice-item .status{
  font-family:var(--display);
  color:var(--gold);
  font-size:.57rem;
  letter-spacing:.12em;
}

.notice-item h4{
  margin:.45em 0;
  font-family:var(--display);
  color:#e5dfe3;
  font-size:.88rem;
}

.notice-item p{
  margin:0;
  color:#aaa2a8;
  font-size:.78rem;
}

.notice-item .source{
  display:block;
  margin-top:8px;
  color:#7f767d;
  font-size:.68rem;
  font-style:italic;
}

@media(max-width:1100px){
  .tavern-hero-image{
    right:-10vw;
    width:96vw;
    opacity:.9;
  }
  .tavern-destinations{grid-template-columns:repeat(2,1fr)}
  .setlist-shell{grid-template-columns:1fr}
  .character-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:900px){
  .tavern-hero{min-height:560px}
  .tavern-hero-image{
    top:57%;
    right:-58vw;
    width:150vw;
    opacity:.48;
  }
  .tavern-hero-shade{
    background:
      linear-gradient(90deg,rgba(6,6,8,.98) 0%,rgba(7,6,8,.9) 44%,rgba(7,6,8,.46) 72%,transparent 100%),
      linear-gradient(0deg,rgba(6,6,8,.9),transparent 42%);
  }
  .tavern-hero-copy{width:auto;margin:0;padding:60px 18px}
  .tavern-hero h1{font-size:clamp(3.4rem,14vw,6.4rem)}
  .section-heading{grid-template-columns:1fr}
  .section-art-placeholder{min-height:140px}
  .eq-heading{align-items:flex-start;flex-direction:column}
  .eq-presets{justify-content:flex-start}
  .notice-columns{grid-template-columns:1fr}
}

@media(max-width:620px){
  .tavern-hero-image{
    top:62%;
    right:-102vw;
    width:192vw;
    opacity:.34;
  }
  .tavern-destinations{grid-template-columns:1fr}
  .destination-card{min-height:130px}
  .tavern-section{padding:58px 16px}
  .player-panel,.setlist-panel,.notice-board{padding:17px}
  #visualizer{height:170px}
  .eq-sliders{grid-template-columns:1fr}
  .character-grid{grid-template-columns:1fr}
  .character-card{min-height:0}
  .player-heading{flex-direction:column}
  .volume-row{grid-template-columns:1fr}
  .progress-row{grid-template-columns:42px minmax(0,1fr) 42px}
}