/* Shared operations-room design: game submenus and linked utility pages.
   No world rendering, pointer-lock, gameplay geometry or touch-control positions. */
:root { color-scheme:dark; --ops-bg:#101410; --ops-panel:#1b221a; --ops-panel-deep:#121a12; --ops-line:#adb99929; --ops-text:#e8e9df; --ops-muted:#a3ae96; --ops-accent:#edb56c; }
.operations-game { --gold:var(--ops-accent); }
.operations-game :is(#screen-select,#screen-settings) { background:var(--ops-bg); }
.operations-game :is(#screen-select,#screen-settings) .menu-bg { background:radial-gradient(ellipse at 0 0,#454f2d22,transparent 65%),var(--ops-bg); }
.operations-game :is(#screen-select,#screen-settings) .menu-bg::after { opacity:.12; background-image:linear-gradient(#b2be9d18 1px,transparent 1px),linear-gradient(90deg,#b2be9d18 1px,transparent 1px); background-size:64px 64px; }
.operations-game :is(.select-inner,.settings-inner) { padding:26px max(24px,calc((100vw - 1180px)/2)) 32px; gap:20px; scroll-padding:24px; }
.ops-page-heading { flex:0 0 auto; padding:0 0 24px; border-bottom:1px solid var(--ops-line); }
.ops-page-band { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 27px; color:#8b987c; font:9px/1.5 ui-monospace,monospace; letter-spacing:.12em; }
.ops-wordmark { color:#c5ccb9; font-weight:700; letter-spacing:.1em; }
.ops-wordmark i { color:#70805f; padding:0 8px; font-style:normal; }
.operations-game .select-head h2 { font-size:clamp(25px,3vw,36px); font-weight:650; letter-spacing:-.03em; color:var(--ops-text); text-shadow:none; }
.operations-game .select-head p { font-size:12px; line-height:1.7; color:var(--ops-muted); margin-top:9px; }
.ops-section-label { display:flex; align-items:center; gap:11px; margin:4px 0 0; }
.ops-section-label > span { display:grid; place-items:center; width:25px; height:27px; flex-shrink:0; color:#b3bea4; border:1px solid var(--ops-line); border-radius:4px; font:10px ui-monospace,monospace; }
.operations-game .ops-section-label h3 { margin:0; color:#bec8b0; font-size:12px; font-weight:600; letter-spacing:.04em; }
.operations-game :is(.class-card,.weapon-card) { font-family:var(--font); color:var(--ops-text); text-align:left; background:linear-gradient(140deg,#222a1fe8,#161e16f2); border:1px solid var(--ops-line); border-radius:8px; box-shadow:none; transition:border-color .15s,background .15s; }
.operations-game .class-row { gap:14px; }
.operations-game .class-card { padding:15px; }
.operations-game .class-card canvas { width:100%; height:185px; aspect-ratio:auto; object-fit:contain; }
.operations-game .class-card::before { height:210px; opacity:.12; background:radial-gradient(ellipse at 50% 45%,var(--tc),transparent 70%); }
.operations-game :is(.class-card,.weapon-card):hover { transform:none; border-color:#b2c19b80; background-color:#2b3526; }
.operations-game :is(.class-card,.weapon-card).on { border-color:#e5b578bb; box-shadow:inset 0 3px 0 #edb56c; background:linear-gradient(140deg,#303626,#1d251a); }
.operations-game .cc-name { margin-top:11px; font-size:18px; font-weight:650; letter-spacing:0; }
.operations-game .cc-en { margin-top:3px; color:#87937b; font-size:9px; letter-spacing:.17em; }
.operations-game .cc-role { margin-top:10px; font-size:11px; font-weight:500; }
.operations-game .cc-tag { color:#a3ae95; font-size:11px; line-height:1.6; font-weight:400; }
.operations-game .cc-stats { padding-top:11px; border-top:1px solid var(--ops-line); color:#9faa92; font-size:10px; font-weight:400; }
.operations-game .weapon-block { gap:14px; }
.operations-game .weapon-block > .ops-section-label:not(:first-child) { margin-top:15px; }
.operations-game .weapon-row { gap:12px; }
.operations-game .weapon-card { padding:17px; min-width:0; }
.operations-game .wc-name { font-size:14px; font-weight:650; line-height:1.45; }
.operations-game .wc-en { color:#869279; font-size:9px; line-height:1.5; margin-top:3px; letter-spacing:.07em; overflow-wrap:anywhere; }
.operations-game .wc-desc { margin:11px 0 13px; color:#a9b49b; font-size:11px; font-weight:400; line-height:1.6; }
.operations-game .wc-bar { color:#9ba98c; margin-top:7px; font-size:10px; }
.operations-game .wc-bar i { height:4px; border-radius:2px; background:#a7b59419; }
.operations-game .wc-bar i b { background:#b7bb86; border-radius:2px; }
.operations-game .weapon-card.on .wc-bar i b { background:#dcb174; }
.operations-game .wc-tag { background:#d6b17712; color:#d5b482; border:1px solid #d6b17726; font-size:9px; font-weight:500; border-radius:3px; }
.operations-game .slot-help { font-size:11px; color:#8d9a80; margin:5px 0; }
.operations-game .select-foot { flex-wrap:wrap; padding:18px 20px; gap:14px; background:linear-gradient(110deg,#2a3223,#1e271c); border:1px solid #b8b58d30; border-radius:8px; margin-top:4px; }
.operations-game .team-note { font-size:11px; color:#adb99d; font-weight:400; letter-spacing:.02em; text-align:center; }
.operations-game :is(.big-btn,.ghost-btn,.mini-btn) { min-height:44px; border-radius:5px; font-family:var(--font); letter-spacing:.02em; font-weight:600; box-shadow:none; }
.operations-game .big-btn { color:#26301e; border:1px solid #e7b777; background:#e5b271; font-size:14px; padding:12px 23px; }
.operations-game .big-btn.small { font-size:13px; padding:12px 24px; letter-spacing:.02em; }
.operations-game .big-btn:active { transform:translateY(1px); box-shadow:none; }
.operations-game .big-btn:disabled { opacity:.5; filter:grayscale(.4); box-shadow:none; transform:none; cursor:not-allowed; }
.operations-game .ghost-btn { background:#ffffff04; color:#ccd5c0; border:1px solid #afbd973f; padding:11px 18px; font-size:12px; }
.operations-game .ghost-btn.on { background:#ddb17320; border-color:#edb56c; color:#f0cb95; }
.operations-game .mini-btn { background:#1c2718; border:1px solid var(--ops-line); font-size:11px; }
.operations-game :is(.big-btn,.ghost-btn,.mini-btn):hover:not(:disabled) { filter:brightness(1.1); border-color:#d9bc8b; }
.operations-game :is(button,input,select,textarea,summary,a):focus-visible { outline:2px solid var(--ops-accent); outline-offset:3px; }
.operations-game :is(#screen-settings,#pause) .field > span { color:#b1bca2; font-size:11px; letter-spacing:.04em; font-weight:500; }
.operations-game :is(#screen-settings,#pause) select,.operations-game .rig-panel input[type=text] { border:1px solid #acbd933f; background:#111a10; color:var(--ops-text); border-radius:5px; min-height:44px; font:12px/1.4 var(--font); padding:9px 11px; }
.operations-game :is(#screen-settings,#pause) input[type=range] { accent-color:var(--ops-accent); }
.operations-game :is(#screen-settings,#pause) .hint { color:#a2af94; font-size:11px; line-height:1.7; }
.operations-game .rig-stage,.operations-game .rig-panel,.operations-game .rig-shared-block { background:linear-gradient(140deg,#222a1fe8,#192118f2); border:1px solid var(--ops-line); border-radius:8px; box-shadow:none; }
.operations-game .rig-panel { padding:22px; gap:15px; }
.operations-game .rig-stage { padding:15px; }
.operations-game #rig-preview { border-radius:4px; background:radial-gradient(ellipse at 50% 20%,#82965a1c,transparent 70%),#11180f; }
.operations-game .rig-h3 { font-size:12px; font-weight:600; letter-spacing:.02em; color:#c0ccb1; }
.operations-game .rig-bone-row > span { font-weight:400; color:#a9b59c; letter-spacing:0; }
.operations-game .rig-bone-row select { width:100%; min-height:36px!important; }
.ops-settings-extras { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; flex-shrink:0; }
.operations-game .ops-settings-extras .rig-shared-block { margin:0; padding:22px; min-width:0; }
.operations-game .lang-row { flex-wrap:wrap; margin-top:16px; }
.operations-game .lang-row .room-btn { border:1px solid var(--ops-line); border-radius:5px; background:#10190e; color:#bbc9ab; min-height:44px; font-size:12px; box-shadow:none; }
.operations-game .lang-row .room-btn.on { color:#edc591; border-color:#cca367; background:#d2ad6c12; }
.operations-game #local-reset { color:#d59a8c; border-color:#b97b6c50; }
.operations-game .rig-shared-row { background:#111a10; border:1px solid var(--ops-line); border-radius:5px; padding:12px; }
.operations-game #screen-settings .select-foot { display:flex; justify-content:flex-end; }
.operations-game #rig-back { margin-right:auto; }
.operations-game .select-room { width:100%; margin:0; justify-content:flex-start; border:1px solid var(--ops-line); border-radius:6px; background:#1b2518; padding:13px 17px; gap:12px; }
.operations-game .select-room b { color:var(--ops-accent); font-size:15px; }
.operations-game .select-room .sr-label { color:#a1af92; font-size:10px; }
.operations-game .room-lobby { color:#c6d1ba; background:#172014; border:1px solid var(--ops-line); border-radius:6px; }
.operations-game #lobby-selection { margin:0; padding:16px 18px; }
.operations-game #lobby-selection p { color:#becbab; font-size:11px; margin:0; }
.operations-game #lobby-selection-members { display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:0; }
.operations-game #lobby-selection-members li { border:0; padding:6px 0; gap:10px; font-size:11px; color:#9fb18e; }
/* Overlays keep their existing anchoring/scroll budgets, not the battlefield HUD layout. */
.operations-game .overlay { background:#070e09a6; }
.operations-game :is(.pause-panel,.invite-panel,.death-panel,.sb-panel,.result-panel) { background:linear-gradient(140deg,#26301ff7,#151e14fa); border:1px solid #aabc9152; border-radius:9px; box-shadow:0 24px 80px #0008; color:var(--ops-text); }
.ops-modal-kicker { display:flex; align-items:center; gap:10px; margin:0 0 20px; color:#8e9e7d; font:9px/1.5 ui-monospace,monospace; letter-spacing:.1em; text-align:left; }
.ops-modal-kicker > span { display:grid; place-items:center; width:26px; height:28px; border:1px solid #a9b89244; color:#d0d6c4; border-radius:3px; font-size:10px; }
.operations-game .pause-panel { padding:25px; text-align:left; }
.operations-game .pause-title { color:var(--ops-text); letter-spacing:-.025em; font-size:29px; font-weight:650; }
.operations-game .pause-note { color:#a7b698; font-size:12px; line-height:1.7; }
.operations-game .pause-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:21px; }
.operations-game #btn-pause-resume { grid-column:1/-1; }
.operations-game #btn-pause-leave { color:#d3a18d; border-color:#bd866450; }
.operations-game .pause-hint { font-size:10px; color:#879a77; letter-spacing:.02em; text-align:center; line-height:1.6; }
.operations-game .pause-hint b { color:#d2b382; }
.operations-game .invite-panel { padding:25px; }
.operations-game .invite-title { font-weight:650; color:var(--ops-text); letter-spacing:-.02em; font-size:24px; }
.operations-game .invite-step { color:#b3c0a4; font-size:12px; }
.operations-game .invite-code { background:#0e170d; border:1px solid #a6b48c45; border-radius:5px; color:#d7e1cc; min-height:120px; }
.operations-game .invite-actions { gap:9px; margin-top:15px; }
.operations-game .invite-actions button { flex:1 1 125px; }
.operations-game .invite-stun { padding-top:15px; border-top:1px solid var(--ops-line); color:#99ab8a; font-size:11px; }
.operations-game .invite-stun input { accent-color:var(--ops-accent); }
.operations-game .invite-help { color:#879a78; font-size:11px; line-height:1.7; }
.operations-game .death-title { font-size:29px; font-weight:650; letter-spacing:-.02em; text-shadow:none; color:#e2a18b; }
.operations-game .death-by,.operations-game .death-count { font-size:12px; color:#b0bda0; letter-spacing:.02em; }
.operations-game .dl-btn { background:#10190e; color:#bac9aa; border:1px solid #a7b79236; border-radius:4px; font-size:11px; font-weight:500; min-height:44px; }
.operations-game .dl-btn.on { background:#ddb17320; color:#f0c78b; border-color:#c99f61; }
.operations-game .dl-sub { color:#9aab87; }
.operations-game .sb-head h3 { font-size:21px; font-weight:650; letter-spacing:-.01em; }
.operations-game .sb-panel td { font-size:12px; }
.operations-game #result-title { font-size:30px; letter-spacing:-.02em; text-shadow:none; }
.operations-game .result-sub { font-size:11px; letter-spacing:.04em; color:#a5b295; }
.operations-game .mvp-row { background:#111b0f; border-radius:4px; }
.operations-game #tutorial .tut-panel { background:linear-gradient(130deg,#25301ff2,#131d12f5); border-color:#a8bd8b50; border-radius:8px; box-shadow:0 18px 60px #0006; }
.operations-game #tutorial header b { color:#edbd7b; font-size:15px; font-weight:650; letter-spacing:.02em; }
.operations-game #tutorial .tut-list li { background:#0c160b55; border-color:#b1c79819; border-radius:4px; }
.operations-game #tutorial .tut-list li.now { background:#ddb17314; border-color:#ccb27469; }
.operations-game #tutorial .txt { color:#c0cdb3; }
.operations-game #tutorial .key { background:#d6b37b16; color:#e8c795; border-radius:3px; }
.operations-game #tutorial .tut-tip { color:#a5b992; }
.operations-game #tutorial .big-btn,.operations-game #tutorial .ghost-btn { font-size:12px; padding:9px 13px; }
.operations-game :is(#boot,#map-load) { background:radial-gradient(ellipse at 50% 40%,#2c3922,#101810 65%); align-content:center; gap:24px; }
.ops-loader-brand { display:grid; justify-items:center; gap:10px; font:700 34px ui-monospace,monospace; color:#d1d8bf; }
.ops-loader-brand span { color:#8fa17b; font:9px ui-monospace,monospace; letter-spacing:.18em; }
.operations-game .boot-text { color:#b0bd9b; font-size:12px; letter-spacing:.09em; text-align:center; max-width:90vw; line-height:1.8; }
/* HUD palette only; retain team colors, geometry and transparent touch affordances. */
.operations-game :is(#topbar,#statusbar,#ability-chip,#grenade-chip,.objective-card) { background-color:#152010d9; border-color:#a3b88a40; box-shadow:none; }
.operations-game #lockslot .lock-title { font-weight:650; letter-spacing:.02em; }
@media(max-width:1000px) { .ops-settings-extras { grid-template-columns:1fr; } }
@media(max-width:860px) { .operations-game .class-card canvas { height:155px; } }
@media(max-width:540px) {
  .operations-game :is(.select-inner,.settings-inner) { padding:20px max(16px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-bottom)); gap:16px; }
  .ops-page-band { font-size:8px; gap:10px; margin-bottom:24px; align-items:flex-start; flex-wrap:wrap; }
  .ops-page-heading { padding-bottom:20px; }
  .operations-game .select-head p { font-size:11px; }
  .operations-game .class-row { gap:9px; }
  .operations-game .class-card { padding:11px; }
  .operations-game .class-card canvas { height:120px; }
  .operations-game .cc-name { font-size:15px; }
  .operations-game .cc-en { font-size:8px; letter-spacing:.05em; }
  .operations-game .cc-tag { font-size:10px; }
  .operations-game .cc-stats { gap:6px; flex-wrap:wrap; font-size:9px; }
  .operations-game .select-foot { padding:15px; gap:10px; }
  .operations-game :is(.pause-panel,.invite-panel) { padding:20px 17px; }
  .operations-game .ops-modal-kicker { font-size:8px; }
  .operations-game .rig-panel,.operations-game .ops-settings-extras .rig-shared-block { padding:17px; }
  .operations-game #screen-settings .select-foot > button { flex:1 1 42%; margin-right:0; padding-inline:12px; }
  .operations-game .select-room .ghost-btn { flex:1 1 42%; padding-inline:12px; }
}
@media(max-height:430px) { .operations-game .ops-modal-kicker { margin-bottom:12px; } .operations-game .pause-panel { padding-block:18px; } }
@media(prefers-reduced-motion:reduce) { .operations-game :is(.class-card,.weapon-card,.big-btn,.ghost-btn) { animation:none; transition:none; } }
/* Standalone footer-linked tools reuse the same palette and navigation. */
.operations-tool { --bg:var(--ops-bg); --panel:var(--ops-panel); --line:#a8b89233; --text:var(--ops-text); --ink:var(--ops-text); --dim:var(--ops-muted); --gold:var(--ops-accent); --accent:var(--ops-accent); color:var(--ops-text); background:radial-gradient(ellipse at 0 0,#46513022,transparent 60%),var(--ops-bg); font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif; }
.ops-tool-nav { display:flex; justify-content:space-between; gap:20px; align-items:center; min-height:64px; padding:0 0 20px; margin-bottom:30px; border-bottom:1px solid var(--ops-line); }
.ops-tool-brand { display:flex; align-items:center; gap:12px; color:var(--ops-text)!important; text-decoration:none; font-size:12px; letter-spacing:.12em; font-weight:700; }
.ops-tool-brand b { display:grid; place-items:center; width:36px; height:40px; border:1px solid #b5c49d55; border-radius:3px; font:700 13px ui-monospace,monospace; }
.ops-tool-brand small { display:block; font:8px/1.8 ui-monospace,monospace; color:#8b9d78; letter-spacing:.1em; }
.ops-tool-back { color:#c3ceaf!important; border:1px solid #a8b89233; border-radius:5px; padding:10px 13px; font-size:11px; text-decoration:none; min-height:44px; }
.operations-tool h1 { color:var(--ops-text); font-weight:650; letter-spacing:-.025em; }
.operations-tool h2,.operations-tool h3 { letter-spacing:.04em; font-weight:600; }
.operations-tool a { color:#dfbd8a; }
.operations-tool :is(button,.file-button) { min-height:44px; border-radius:5px; background:#e1b172; color:#26311d; border:1px solid #caa36a; box-shadow:none; font-weight:600; }
.operations-tool :is(button.ghost,.btns button,.view-buttons button,.file-button) { background:#26321f; color:#c6d4b5; border-color:#a9bc8c40; }
.operations-tool :is(button,select,input,textarea,a):focus-visible { outline:2px solid var(--ops-accent); outline-offset:3px; }
.operations-tool :is(select,textarea,input[type=number],input[type=text]) { background:#111a0f; color:var(--ops-text); border-color:#a8b89240; border-radius:5px; }
.operations-tool .panel,.operations-tool .card { border-radius:7px; box-shadow:none; background:var(--ops-panel); }
.operations-tool :is(pre,#log) { background:#0e180c; color:#b6c5a3; border-color:var(--ops-line); border-radius:5px; }
.operations-tool input[type=range],.operations-tool input[type=checkbox] { accent-color:var(--ops-accent); }
.tool-diagnostics { max-width:1228px; margin:auto; padding:24px; }
.tool-diagnostics .cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tool-diagnostics table { table-layout:fixed; }
.tool-diagnostics td { overflow-wrap:anywhere; }
.tool-diagnostics .bar { gap:9px; margin:22px 0; }
.tool-diagnostics .card { padding:20px; }
.tool-colorfixer { display:block; padding:24px; }
.tool-colorfixer .wrap { width:min(100%,1060px); max-width:none; padding:0 0 30px; margin:auto; }
.tool-colorfixer .panel { border-color:var(--ops-line); }
.tool-colorfixer .row { flex-wrap:wrap; }
.tool-colorfixer table { table-layout:fixed; }
.tool-colorfixer :is(th,td) { overflow-wrap:anywhere; }
.tool-gunlab > header { background:linear-gradient(100deg,#202a1d,#121b10); border-color:var(--ops-line); }
.tool-gunlab > header > a { padding:10px 13px; border:1px solid var(--ops-line); border-radius:5px; }
.tool-gunlab .stage { background:#131d11; }
.tool-gunlab .pill { background:#192315ee; border-color:var(--ops-line); }
.tool-gunlab .primary { background:#e1b172; color:#26311d; }
.tool-animation .ops-tool-nav { position:fixed; inset:0 0 auto; z-index:20; height:68px; padding:12px 20px; margin:0; background:#152010f5; }
.tool-animation #panel { top:84px; max-height:calc(100dvh - 100px); border-radius:6px; }
.tool-animation #logwrap { border-radius:6px; }
@media(max-width:760px) {
  .tool-diagnostics .cols { grid-template-columns:1fr; }
  .operations-tool.tool-colorfixer,.operations-tool.tool-diagnostics { padding:18px 14px; }
  .ops-tool-nav { align-items:flex-start; gap:15px; flex-wrap:wrap; margin-bottom:24px; }
  .ops-tool-brand { font-size:10px; }
  .ops-tool-back { font-size:10px; }
  .tool-colorfixer .env { grid-template-columns:74px minmax(0,1fr); }
  .tool-colorfixer .panel { padding:16px 12px; }
  .tool-colorfixer :is(td,th) { width:auto!important; padding:7px 4px; font-size:10px; }
  .tool-animation .ops-tool-nav { flex-wrap:nowrap; }
  .tool-animation .ops-tool-back span { font-size:0; }
  .tool-animation #panel { left:12px; right:12px; width:auto; max-height:calc(100dvh - 202px); }
  .tool-animation #logwrap { right:12px; left:12px; bottom:12px; width:auto; max-height:100px; }
}