/* Approved visual corrections for V22 prototype only. */

/* Restore the cleaner header variant previously approved by the owner. */
.nav{
  min-height:78px;
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:0 1 auto;
}
.brand>a{display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.logo-small{
  width:34px;
  height:34px;
  flex-basis:34px;
}
.brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.brand-title{
  color:#fff4bd;
  font-size:17px;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
}
.brand-sub{
  margin-top:4px;
  color:#c6d1de;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.nav-btn{
  height:38px;
  padding:0 16px;
  border-radius:20px;
  font-weight:900;
}
.nav-btn::before{content:none}
.nav-btn.ghost{
  background:linear-gradient(180deg,rgba(9,31,51,.70),rgba(6,23,39,.88));
  color:#d8e0ea;
}
.nav-btn.accent{
  background:linear-gradient(105deg,#4c5f83,#6e405d);
  color:#ffeaa1;
}
.nav-btn.gold{
  background:linear-gradient(180deg,#ffe38f,#f3bf46);
  color:#07101a;
  border-color:#ffe8aa;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 7px 17px rgba(0,0,0,.18);
}
.nav-btn.gold:hover{
  color:#07101a;
  filter:brightness(1.05) saturate(1.05);
}

/* Make the rotating emblem read as a real two-sided medal rather than disappearing on the back half. */
.medal{
  transform-style:preserve-3d;
}
.medal-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  z-index:2;
}
.medal-front{transform:translateZ(7px)}
.medal-back{
  transform:rotateY(180deg) translateZ(7px) scaleX(-1);
}
.medal-edge{
  position:absolute;
  inset:-5px;
  border-radius:50%;
  z-index:1;
  transform:translateZ(-2px);
  background:linear-gradient(135deg,#8f6517 0%,#f5d06c 23%,#9d701c 52%,#f7dc88 74%,#79500d 100%);
  border:1px solid rgba(255,238,166,.38);
  box-shadow:
    inset 0 0 0 4px rgba(84,54,5,.28),
    inset 0 0 18px rgba(255,235,153,.13),
    0 0 0 1px rgba(83,54,8,.55),
    0 10px 28px rgba(0,0,0,.28);
}
.medal::after{
  z-index:3;
  transform:translateZ(9px);
}
.medal::before{
  transform:translateZ(11px);
}

/* Preserve hierarchy when the screen narrows without returning to a crowded top row. */
@media(max-width:1180px){
  .nav{
    align-items:flex-start;
    flex-direction:column;
  }
  .nav-row{justify-content:flex-start}
}
@media(max-width:760px){
  .nav{
    padding:12px 12px 14px;
    gap:12px;
    border-radius:18px;
  }
  .brand-title{font-size:15px}
  .brand-sub{
    font-size:10px;
    white-space:normal;
  }
  .nav-row{gap:6px}
  .nav-btn{
    height:33px;
    padding:0 10px;
    font-size:11px;
  }
}

@media(prefers-reduced-motion:reduce){
  .medal-front,.medal-back,.medal-edge{transform:none}
  .medal-back{display:none}
}