.operations-web,.settings-web{box-sizing:border-box;color:var(--bc-text);height:100dvh;margin:auto;max-width:1240px;overflow:hidden;padding:clamp(8px,2dvh,28px) clamp(10px,3vw,28px)}
.operations-web button,.settings-web button{background:var(--bc-panel);border:1px solid var(--bc-line);color:var(--bc-command);cursor:pointer;font:700 clamp(12px,1.5vw,18px)/1 "Battle Cities UI","Arial Narrow",sans-serif;letter-spacing:.07em;text-transform:uppercase}.operations-web button:disabled,.settings-web button:disabled{cursor:wait;opacity:.55}
.operations-web__header,.settings-web>header{align-items:center;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto}.operations-web__header>div{align-items:center;background:var(--bc-command);border:1px solid #ffe38a;display:flex;height:54px;max-width:430px;padding:0 20px}.operations-web__header h1,.settings-web h1{color:var(--bc-text);font:700 clamp(24px,3vw,32px)/1 "Battle Cities UI","Arial Narrow",sans-serif;letter-spacing:.08em;margin:0}.operations-web__header-mark{color:#241600;font:700 19px/1 "Battle Cities UI","Arial Narrow",sans-serif;margin-right:16px}.operations-web__header nav{display:flex;gap:10px}.operations-web__header button,.settings-web>header button{height:46px;min-width:150px}.operations-web__back.is-selected,.settings-web>header button.is-selected{background:var(--bc-danger-surface);border-color:var(--bc-danger);color:var(--bc-text)}.socials-web__refresh.is-selected{background:var(--bc-command);border-color:var(--bc-command);color:var(--bc-text)}
.operations-web__shell,.settings-web__shell{background:rgb(11 16 20 / 96%);border:1px solid var(--bc-line);height:calc(100% - 64px);margin-top:8px;overflow:auto;padding:18px}.operations-web__shell::before,.settings-web__shell::before{background:var(--bc-command);content:"";display:block;height:3px;margin:-13px -12px 18px}.operations-web__intro{background:var(--bc-page);border:1px solid #725b16;padding:17px 22px}.operations-web__intro h2{color:var(--bc-ready);font:700 23px/1 "Battle Cities UI","Arial Narrow",sans-serif;margin:0}.operations-web__intro p{color:var(--bc-muted-light);font:700 15px/1.4 "Battle Cities UI","Arial Narrow",sans-serif;margin:12px 0 0}.operations-web__section-title{border-bottom:2px solid var(--bc-line);font:700 25px/1 "Battle Cities UI","Arial Narrow",sans-serif;margin:24px 0 16px;padding-bottom:12px}
.operations-web__grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}.operations-web__card{display:grid;grid-template-rows:auto 58px 1fr 43px;min-height:178px;padding:13px}.operations-web__card h3{color:var(--bc-ready);font-size:20px;margin:0}.operations-web__mark{align-items:center;background:var(--bc-panel-alt);border:1px solid var(--bc-line);color:var(--bc-text);display:flex;font:700 14px/1 "Battle Cities UI","Arial Narrow",sans-serif;height:46px;justify-content:center;justify-self:center;margin-top:9px;min-width:52px;padding:0 5px}.operations-web__card p{color:var(--bc-muted-light);font-size:12px;line-height:1.35;margin:8px 0}.operations-web__card strong{align-items:center;background:var(--bc-ready-dark);border:1px solid var(--bc-ready);color:#f3e6a6;display:flex;justify-content:center}.operations-web__card.is-selected{background:var(--bc-panel-raised);border-color:var(--bc-command)}.operations-web__card.is-selected h3{color:var(--bc-text)}.operations-web__card.is-selected strong{background:var(--bc-command);border-color:var(--bc-command);color:var(--bc-text)}.operations-web__card.is-complete{background:linear-gradient(135deg,rgba(255,179,15,.28),rgba(38,30,7,.9));border-color:var(--bc-command)}.operations-web__card.is-complete strong{background:var(--bc-command);border-color:#ffe38a;color:var(--bc-text)}.operations-web__grid--hq .operations-web__card:last-child{grid-column:span 2}.operations-web__status{color:var(--bc-command);font:700 13px/1.4 "Battle Cities UI","Arial Narrow",sans-serif;min-height:20px;text-align:center}
.settings-web>header h1{align-items:center;background:var(--bc-command);border:1px solid #ffe38a;display:flex;height:54px;max-width:390px;justify-content:center}.settings-web__rows{display:grid;gap:20px;padding:35px 28px}.settings-web__rows article{align-items:center;background:var(--bc-page);border:1px solid var(--bc-line);display:grid;grid-template-columns:1fr 220px;min-height:130px;padding:0 42px}.settings-web__rows h2{font:700 clamp(26px,3vw,40px)/1 "Battle Cities UI","Arial Narrow",sans-serif;margin:0}.settings-web__toggle{align-items:center;display:flex;height:68px;justify-content:space-between;padding:0 16px 0 25px}.settings-web__toggle span{color:var(--bc-command)}.settings-web__toggle i{background:var(--bc-muted);border:3px solid var(--bc-line);display:block;height:34px;position:relative;width:70px}.settings-web__toggle i::after{background:var(--bc-text);content:"";height:26px;left:3px;position:absolute;top:1px;transition:left .15s;width:28px}.settings-web__toggle.is-active{background:var(--bc-ready-dark);border-color:var(--bc-ready)}.settings-web__toggle.is-active span{color:var(--bc-ready)}.settings-web__toggle.is-active i::after{background:var(--bc-ready);left:35px}.settings-web__toggle.is-selected{background:var(--bc-command);border-color:#ffe38a}.settings-web__toggle.is-selected span{color:var(--bc-text)}.settings-web__toggle.is-selected i::after{background:var(--bc-text)}.settings-web__status{color:var(--bc-command);font:700 13px/1 "Battle Cities UI","Arial Narrow",sans-serif;min-height:18px;text-align:center}.settings-web__shell>small{color:var(--bc-muted);display:block;font:700 13px/1 "Battle Cities UI","Arial Narrow",sans-serif;margin:22px 28px}
@media(max-width:700px){.operations-web,.settings-web{padding:6px 0}.operations-web__header,.settings-web>header{gap:5px}.operations-web__header>div,.settings-web>header h1{height:40px;padding:0 10px}.operations-web__header h1,.settings-web h1{font-size:20px}.operations-web__header-mark{font-size:14px;margin-right:8px}.operations-web__header nav{gap:4px}.operations-web__header button,.settings-web>header button{font-size:10px;height:40px;min-width:83px}.socials-web__refresh{min-width:95px!important}.operations-web__shell,.settings-web__shell{height:calc(100% - 49px);margin-top:4px;padding:8px}.operations-web__shell::before,.settings-web__shell::before{margin:-4px -3px 9px}.operations-web__intro{padding:12px}.operations-web__intro h2{font-size:18px;text-align:center}.operations-web__intro p{font-size:11px;text-align:center}.operations-web__section-title{font-size:20px;margin:15px 0 10px}.operations-web__grid{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}.operations-web__grid--hq{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-web__grid--hq .operations-web__card:last-child{grid-column:span 2}.operations-web__card{grid-template-rows:auto 48px 1fr 37px;min-height:170px;padding:8px}.operations-web__card h3{font-size:15px}.operations-web__mark{font-size:11px;height:37px;min-width:43px}.operations-web__card p{font-size:9px}.operations-web__card strong{font-size:11px}.operations-web__status{font-size:10px}.settings-web__rows{gap:10px;padding:15px 8px}.settings-web__rows article{grid-template-columns:1fr 145px;min-height:92px;padding:0 14px}.settings-web__rows h2{font-size:22px}.settings-web__toggle{height:52px;padding:0 8px 0 14px}.settings-web__toggle i{height:28px;width:52px}.settings-web__toggle i::after{height:20px;width:20px}.settings-web__toggle.is-active i::after{left:25px}.settings-web__shell>small{font-size:10px;margin:16px 10px}}

/* Real Headquarters icons are frames from the in-game UI sprite sheet. */
.operations-web__mark--sprite{background-color:var(--bc-panel-alt);background-image:url('/data/graphics/ui/icons.png');background-repeat:no-repeat;background-size:352px 44px;height:44px;min-width:44px;padding:0;width:44px}.operations-web__icon-1{background-position:-44px 0}.operations-web__icon-2{background-position:-88px 0}.operations-web__icon-3{background-position:-132px 0}.operations-web__icon-4{background-position:-176px 0}.operations-web__icon-5{background-position:-220px 0}.operations-web__icon-6{background-position:-264px 0}.operations-web__icon-7{background-position:-308px 0}
@media(max-width:700px){.operations-web__mark--sprite{background-size:296px 37px;height:37px;min-width:37px;width:37px}.operations-web__icon-1{background-position:-37px 0}.operations-web__icon-2{background-position:-74px 0}.operations-web__icon-3{background-position:-111px 0}.operations-web__icon-4{background-position:-148px 0}.operations-web__icon-5{background-position:-185px 0}.operations-web__icon-6{background-position:-222px 0}.operations-web__icon-7{background-position:-259px 0}}

/* Supplied Headquarters illustrations replace the generic UI sprite marks. */
.operations-web__mark--illustration{background:none;border:0;height:52px;min-width:52px;padding:0;width:52px}.operations-web__mark--illustration img{display:block;height:100%;object-fit:contain;width:100%}
@media(max-width:700px){.operations-web__mark--illustration{height:40px;min-width:40px;width:40px}}

/* Match the original canvas SettingsMenuScene UiToggleButton: a text state,
   thin top highlight, and square status lamp — never a browser-style switch. */
.settings-web__toggle{background:var(--bc-panel-alt);border:2px solid var(--bc-line);display:grid;grid-template-columns:1fr 44px;height:72px;padding:8px 12px 8px 18px;position:relative}
.settings-web__toggle::before{background:var(--bc-line);content:"";height:2px;left:4px;position:absolute;right:4px;top:4px}
.settings-web__toggle span{align-items:center;color:var(--bc-muted-light);display:flex;font-size:30px;height:100%;justify-content:center;line-height:1}
.settings-web__toggle i{align-self:center;background:var(--bc-panel-raised);border:2px solid var(--bc-line);display:block;height:44px;justify-self:end;position:static;width:44px}
.settings-web__toggle i::after{content:none}
.settings-web__toggle.is-active{background:var(--bc-panel-alt);border-color:var(--bc-line)}
.settings-web__toggle.is-active span{color:var(--bc-command)}
.settings-web__toggle.is-active i{background:var(--bc-command);border-color:#ffe38a}
.settings-web__toggle.is-selected{background:var(--bc-panel-alt);border-color:var(--bc-command)}
.settings-web__toggle.is-selected::before{background:var(--bc-command)}
.settings-web__toggle.is-selected span{color:var(--bc-text)}
.settings-web__toggle.is-selected.is-active span{color:var(--bc-command)}
@media(max-width:700px){.settings-web__toggle{grid-template-columns:1fr 34px;height:64px;padding:8px 10px 8px 13px}.settings-web__toggle span{font-size:24px}.settings-web__toggle i{height:34px;width:34px}}
/* Shared active-state contrast: yellow action plates use dark ink. */
.operations-web__card.is-selected strong,
.operations-web__card.is-complete strong,
.socials-web__refresh.is-selected { color: var(--bc-active-ink); }

/* Header actions share the Shop tab and Back-button dimensions/states. */
.operations-web__header button,
.settings-web>header button { background: var(--bc-panel); border-color: var(--bc-line); color: var(--bc-command); font-size: clamp(14px, 1.9vw, 19px); height: 42px; min-height: 42px; }
.socials-web__refresh.is-selected { background: var(--bc-command); border-color: var(--bc-command); color: var(--bc-active-ink); }
.operations-web__back.is-selected,
.settings-web>header button.is-selected { background: var(--bc-danger-surface); border-color: var(--bc-danger); color: var(--bc-text); }
@media(max-width:700px){.operations-web__header button,.settings-web>header button{font-size:12px;height:36px;min-height:36px}}

/* Match the Shop Back track at every viewport; Social Refresh mirrors a Shop tab. */
.operations-web__back,
.settings-web>header button { min-width: clamp(83px, 21.5vw, 160px); width: clamp(83px, 21.5vw, 160px); }
.socials-web__refresh { min-width: clamp(95px, 28vw, 210px); width: clamp(95px, 28vw, 210px); }
@media(min-width:900px){
  .operations-web__header button,
  .settings-web>header button { height:58px;min-height:58px; }
  .operations-web__back,
  .settings-web>header button { min-width:152px;width:152px; }
  .socials-web__refresh { min-width:210px;width:210px; }
}