/* One responsive header across game, campaigns, and information pages. */
.site-header{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;width:100%;height:auto;min-height:88px;margin:0;padding:18px 0;border:0;border-bottom:1px solid #8bb3d52b;background:transparent;box-sizing:border-box}
.site-header--game{grid-template-columns:minmax(0,1fr) auto 44px}
.site-header .site-brand{display:inline-flex;align-items:center;justify-self:start;gap:11px;min-width:0;min-height:44px;color:#eef4ef;text-decoration:none}
.site-header .site-brand img{display:block;flex:0 0 44px;width:44px;height:44px;max-width:none;border-radius:12px}
.site-header .site-brand-name{font:700 clamp(15px,1.6vw,19px)/1.35 "Cinzel",serif;letter-spacing:-.35px;white-space:nowrap}
.site-brand-fire,.keyword-fire{color:#ffc49b}.site-brand-water,.keyword-water{color:#98dfed}.site-brand-and{color:#b1c1cb;font-weight:500}
.developer-link{color:#98dfed;text-decoration:underline;text-underline-offset:4px}
.developer-link::after{content:" ↗";white-space:nowrap}
.site-header .site-nav{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:4px;height:auto;margin:0;padding:4px;border:1px solid #7194b326;border-radius:14px;background:#13213299;font:700 14px/1.2 "Nunito Sans",sans-serif;letter-spacing:0}
.site-header .site-nav>a,.site-header .site-nav>button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:60px;min-height:44px;height:auto;margin:0;padding:10px 17px;border:1px solid transparent;border-radius:10px;background:none;color:#b8cce0;font:inherit;text-decoration:none;white-space:nowrap;cursor:pointer;box-sizing:border-box;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.site-header .site-nav>[aria-current="page"]{color:#f3f7ed;border-color:#a9d9d650;background:linear-gradient(135deg,#28525890,#20435365);box-shadow:inset 0 1px #d6ffff12}
.site-header .site-nav>[aria-current="page"]::after{content:"";position:absolute;bottom:4px;left:calc(50% - 8px);width:16px;height:2px;border-radius:2px;background:#a3e2dc}
.site-header .site-header-tools{display:flex;align-items:center;justify-content:flex-end;min-width:44px}
.site-header .site-sound{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:1px solid #789abc3d;border-radius:12px;background:#13213299;color:#c2d4e8;cursor:pointer;touch-action:manipulation}
.site-header .site-sound svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.site-header a:focus-visible,.site-header button:focus-visible{outline:2px solid #99e9ec;outline-offset:4px}
body>.site-header{max-width:1120px;margin-inline:auto;padding-inline:30px}
@media(hover:hover) and (pointer:fine){.site-header .site-nav>a:hover,.site-header .site-nav>button:hover,.site-header .site-sound:hover{background:#2642598f;color:#fff}.site-header .site-brand:hover .site-brand-name{filter:brightness(1.12)}}
@media(max-width:850px){.site-header{gap:12px}.site-header .site-brand-name{font-size:16px}.site-header .site-nav>a,.site-header .site-nav>button{padding-inline:13px}}
@media(max-width:650px){.site-header{grid-template-columns:minmax(0,1fr);gap:10px;min-height:0;padding:12px 0}.site-header--game{grid-template-columns:minmax(0,1fr) 44px}.site-header .site-brand{gap:9px;min-height:44px}.site-header .site-brand img{width:38px;height:38px;flex-basis:38px;border-radius:10px}.site-header .site-brand-name{font-size:15px;letter-spacing:-.45px;white-space:normal;text-wrap:balance}.site-header .site-nav{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:3px;padding:3px;border-radius:12px}.site-header .site-nav>a,.site-header .site-nav>button{min-width:0;min-height:44px;padding:10px 6px;font-size:13px;border-radius:8px}.site-header .site-header-tools{grid-column:2;grid-row:1}.site-header .site-sound{border-radius:10px}body>.site-header{padding-inline:20px}}
@media(prefers-reduced-motion:reduce){.site-header *{scroll-behavior:auto}}
