*{box-sizing:border-box;}
html{overflow-y:scroll;}
body{margin:0;padding-top:64px;}
#topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 14px;background:rgba(12,16,20,.58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(51,68,85,.35);}
#brandLink{display:flex;align-items:center;gap:8px;color:#eee;text-decoration:none;font-weight:700;font-size:16px;}
#brandLink img{width:30px;height:30px;}
#brandLink .brand-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:118px;line-height:1.25;font-size:12px;font-weight:700;}
#brandLink .brand-line{width:100%;white-space:nowrap;text-align:center;}
#topNav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.navBtn{padding:6px 10px;border:1px solid #4488dd;border-radius:4px;background:transparent;color:#eee;font-size:13px;cursor:pointer;text-decoration:none;text-align:center;display:inline-block;}
.navBtn:hover{background:#224477;}
.navBtn.primary{background:#3377cc;border-color:#3377cc;}
.navBtn.active{background:#3377cc;border-color:#3377cc;color:#fff;}
#userArea{display:flex;align-items:center;gap:8px;font-size:13px;}
.langBox{position:relative;flex:0 0 auto;}
.langBtn{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;white-space:nowrap;}
.langBtn::after{content:"";display:block;flex:0 0 auto;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #9fd0ff;}
.langMenu{position:absolute;right:0;top:calc(100% + 8px);z-index:120;min-width:128px;padding:6px;display:none;flex-direction:column;gap:2px;background:#141b22;border:1px solid #2d6fb8;border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.42);}
.langBox.open .langMenu{display:flex;}
.langMenu a{display:block;padding:7px 10px;border-radius:4px;color:#e8ecef;font-size:13px;text-decoration:none;white-space:nowrap;}
.langMenu a:hover{background:#224477;color:#fff;}
.langMenu a.current{color:#ffd479;background:rgba(45,111,184,.16);}
#topbarTrack{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;width:100%;flex-wrap:nowrap;}
#topbarTrack>*{flex:0 0 auto;}
.topbarArrow{position:absolute;top:50%;transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:4px;background:transparent;color:#9fd0ff;font-size:24px;line-height:1;cursor:pointer;z-index:70;}
.topbarArrow:hover{color:#fff;border-color:#fff;}
#topbarArrowLeft{left:4px;}
#topbarArrowRight{right:4px;}
html.gocamfit-narrow #topbar{overflow:hidden;}
html.gocamfit-narrow #topbarTrack{overflow-x:auto;justify-content:flex-start;padding:0 40px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
html.gocamfit-narrow #topbarTrack::-webkit-scrollbar{display:none;}
html.gocamfit-narrow .topbarArrow{display:flex;}
@media (max-width:700px) and (orientation:portrait){
    #topbarTrack{overflow-x:auto;justify-content:flex-start;padding:0 40px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
    #topbarTrack::-webkit-scrollbar{display:none;}
    .topbarArrow{display:flex;}
}

.game-switch{display:inline-flex;flex-direction:column;gap:2px;vertical-align:middle;}
.game-switch .tri{display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;cursor:pointer;}
#gameSwitchUp{border-bottom:6px solid #9fd0ff;}
#gameSwitchUp:hover{border-bottom-color:#fff;}
#gameSwitchDown{border-top:6px solid #9fd0ff;}
#gameSwitchDown:hover{border-top-color:#fff;}