/* Standard desktop/mobile site header for Kakuro, Math Crossword and Futoshiki.
   Scoped so game layout CSS stays untouched. */
.toa-standard-game-header {
  --toa-header-bg: rgba(255, 255, 255, 0.92);
  --toa-header-border: rgba(100, 116, 139, 0.22);
  --toa-header-text: #1e1b4b;
  --toa-header-muted: #64748b;
  --toa-header-soft: #f1f5f9;
  --toa-header-active: #6d5dfc;
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  width: 100% !important;
  background: var(--toa-header-bg) !important;
  border-bottom: 1px solid var(--toa-header-border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: none !important;
}
body.theme-dark .toa-standard-game-header,
:root[data-theme="dark"] .toa-standard-game-header {
  --toa-header-bg: rgba(7, 7, 24, 0.94);
  --toa-header-border: rgba(255, 255, 255, 0.10);
  --toa-header-text: #ffffff;
  --toa-header-muted: #aaa3c9;
  --toa-header-soft: #1b1931;
  --toa-header-active: #9b8cff;
}
.toa-standard-game-header .nav-wrap {
  width: min(1380px, calc(100% - 32px)) !important;
  min-height: 72px !important;
  margin: 0 auto !important;
  padding: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  position: relative !important;
}
.toa-standard-game-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  color: var(--toa-header-text) !important;
  text-decoration: none !important;
}
.toa-standard-game-header .brand-logo {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 6px 16px rgba(45, 36, 143, 0.14) !important;
}
.toa-standard-game-header .brand-copy {display:block!important;min-width:0!important}
.toa-standard-game-header .brand-title {
  display:block!important;color:var(--toa-header-text)!important;font-size:1rem!important;
  font-weight:850!important;line-height:1.15!important;white-space:nowrap!important
}
.toa-standard-game-header .brand-subtitle {
  display:block!important;color:var(--toa-header-muted)!important;font-size:.72rem!important;
  font-weight:600!important;line-height:1.2!important;white-space:nowrap!important
}
.toa-standard-game-header .main-nav {
  position:static!important;inset:auto!important;z-index:auto!important;display:flex!important;
  flex:1 1 auto!important;min-width:0!important;align-items:center!important;justify-content:center!important;
  flex-direction:row!important;flex-wrap:nowrap!important;gap:4px!important;width:auto!important;
  margin:0 6px!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;overflow:visible!important
}
.toa-standard-game-header .main-nav a {
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:auto!important;min-height:36px!important;padding:7px 10px!important;
  border:0!important;border-radius:999px!important;background:transparent!important;
  color:var(--toa-header-text)!important;font-size:.88rem!important;font-weight:750!important;
  line-height:1.2!important;white-space:nowrap!important;text-align:center!important
}
.toa-standard-game-header .main-nav a:hover,
.toa-standard-game-header .main-nav a:focus-visible {background:var(--toa-header-soft)!important;outline:none!important}
.toa-standard-game-header .main-nav a.active {background:var(--toa-header-active)!important;color:#fff!important}
.toa-standard-game-header .header-actions {
  display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:flex-end!important;
  gap:8px!important;min-width:0!important
}
.toa-standard-game-header .game-header-sound,
.toa-standard-game-header .theme-toggle,
.toa-standard-game-header .menu-toggle {
  position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  margin:0!important;padding:0!important;border:1px solid var(--toa-header-border)!important;border-radius:13px!important;
  background:var(--toa-header-soft)!important;color:var(--toa-header-text)!important;box-shadow:none!important;
  font:700 1.05rem/1 system-ui,sans-serif!important;cursor:pointer!important
}
.toa-standard-game-header .game-header-sound{order:1!important}
.toa-standard-game-header .theme-toggle{order:2!important}
.toa-standard-game-header .auth-header-trigger{order:3!important}
.toa-standard-game-header .menu-toggle{order:4!important;display:none!important}
.toa-standard-game-header .game-header-sound:hover,
.toa-standard-game-header .theme-toggle:hover,
.toa-standard-game-header .menu-toggle:hover {transform:translateY(-1px)!important;border-color:var(--toa-header-active)!important}

@media (max-width:1180px) and (min-width:921px){
  .toa-standard-game-header .nav-wrap{width:min(calc(100% - 20px),1380px)!important;gap:9px!important}
  .toa-standard-game-header .brand-subtitle{display:none!important}
  .toa-standard-game-header .main-nav{gap:1px!important;margin:0 2px!important}
  .toa-standard-game-header .main-nav a{padding:7px 7px!important;font-size:.81rem!important}
}
@media (max-width:920px){
  .toa-standard-game-header .nav-wrap{width:calc(100% - 20px)!important;min-height:64px!important;padding:8px 0!important;gap:8px!important}
  .toa-standard-game-header .brand-logo{width:42px!important;height:42px!important;min-width:42px!important;border-radius:12px!important}
  .toa-standard-game-header .brand-title{font-size:.92rem!important}
  .toa-standard-game-header .brand-subtitle{display:none!important}
  .toa-standard-game-header .main-nav{
    position:absolute!important;top:calc(100% + 1px)!important;left:0!important;right:0!important;z-index:10001!important;
    display:none!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
    gap:5px!important;width:100%!important;margin:0!important;padding:12px!important;
    border:1px solid var(--toa-header-border)!important;border-radius:0 0 18px 18px!important;
    background:var(--toa-header-bg)!important;box-shadow:0 18px 40px rgba(0,0,0,.24)!important;
    backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important
  }
  .toa-standard-game-header .main-nav.open{display:flex!important}
  .toa-standard-game-header .main-nav a{
    width:100%!important;justify-content:flex-start!important;min-height:42px!important;padding:10px 12px!important;
    border-radius:11px!important;font-size:.92rem!important;text-align:left!important
  }
  .toa-standard-game-header .menu-toggle{display:inline-flex!important}
  .toa-standard-game-header .game-header-sound,
  .toa-standard-game-header .theme-toggle,
  .toa-standard-game-header .menu-toggle{
    width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important
  }
}
@media (max-width:600px){
  .toa-standard-game-header .nav-wrap{width:calc(100% - 14px)!important}
  .toa-standard-game-header .brand-title{max-width:145px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .toa-standard-game-header .header-actions{gap:5px!important}
  .toa-standard-game-header .game-header-sound,
  .toa-standard-game-header .theme-toggle,
  .toa-standard-game-header .menu-toggle{
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;border-radius:12px!important
  }
}
@media (max-width:430px){.toa-standard-game-header .brand-copy{display:none!important}}