/* ============================================================
   电路模拟器 · 游戏专属样式
   布局、元件栏、属性面板、示波器、手机元件抽屉
   ============================================================ */

.game.cir-page{width:min(100%,1180px)}

.cir-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:14px;
  align-items:start;
}
.cir-main{min-width:0}
.cir-side{display:flex;flex-direction:column;gap:12px;min-width:0}

/* ---------- 卡片 ---------- */
.cir-card{
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel-2);
}
.cir-card h2{
  margin:0 0 10px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--muted);
}
.cir-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cir-card-head h2{margin:0}
.cir-card canvas{
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg);
}
.cir-card input[type=range]{width:100%;margin:0 0 2px}
.cir-card .btn{padding:8px 9px;font-size:12px}

/* ---------- 元件栏 ---------- */
.cir-palette{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cir-part{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:50px;padding:6px 4px;line-height:1.2;
}
.cir-part .sym{font-size:16px;font-weight:600;color:var(--text)}
.cir-part .lbl{font-size:10.5px;color:var(--muted)}
.cir-part.is-on .sym,
.cir-part.is-on .lbl{color:var(--accent)}

.cir-tool{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 9px;font-size:12px;
}
.cir-tool .sym{font-size:13px}
.cir-tool.is-on{color:var(--accent)}

.cir-spd.is-on,
.cir-tool.is-on,
.cir-mode.is-on{
  border-color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  background:var(--panel);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel));
}

/* ---------- 属性面板 ---------- */
.cir-empty{margin:0;font-size:12px;line-height:1.7;color:var(--muted)}
.cir-insp-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:2px}
.cir-insp-head b{font-size:14px;font-weight:600}
.cir-insp-head span{font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.cir-range{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:10px 0 4px;font-size:12px;color:var(--muted);
}
.cir-range output{color:var(--text);font-variant-numeric:tabular-nums}
.cir-note{margin:8px 0 0;font-size:11.5px;line-height:1.7;color:var(--muted)}
.cir-note:empty{display:none}
.cir-insp-read{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.cir-insp-read div{padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.cir-insp-read span{display:block;font-size:10px;letter-spacing:.06em;color:var(--muted)}
.cir-insp-read b{
  display:block;margin-top:2px;font-size:15px;font-weight:600;line-height:1.3;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.cir-actions{margin-top:10px}
.cir-actions .btn{flex:1}
#row-color select{padding-top:7px;padding-bottom:7px;font-size:12px}

/* ---------- 示波器 ---------- */
.cir-scope-mode{display:flex;gap:4px}
.cir-mode{padding:4px 8px;font-size:10.5px;border-radius:8px}

/* ---------- 示例 / 存档 ---------- */
.cir-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cir-grid2 .btn{min-width:0;padding-left:4px;padding-right:4px}

/* ---------- 状态 ---------- */
.cir-readout{color:var(--text);font-variant-numeric:tabular-nums}
.cir-status{color:var(--accent)}
.cir-status.warn{color:#ffd166}
.cir-status.err{color:#ff7b8a}
#tool-hint{color:var(--muted)}

/* ---------- 手机元件抽屉 ---------- */
.cir-mobile-only,.cir-sheet-close{display:none}
.cir-mask{display:none}

@media (min-width:601px){
  .cir-side{
    max-height:calc(100vh - 150px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-right:4px;
  }
  .cir-side::-webkit-scrollbar{width:8px}
  .cir-side::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
  .cir-palette{grid-template-columns:repeat(4,1fr)}
  .cir-palette-card{order:1}
  .cir-inspector-card{order:2}
  .cir-scope-card{order:3}
  .cir-examples-card{order:4}
  .cir-save-card{order:5}
  .cir-help-card{order:6}
}

@media (max-width:600px){
  .cir-layout{grid-template-columns:1fr;gap:12px}
  .cir-side{overflow:visible}
  .cir-mobile-only{display:inline-block}
  .cir-sheet-close{display:inline-block;padding:6px 10px;font-size:11px}
  .cir-card .btn{min-height:42px}
  .cir-palette .btn{min-height:54px}
  .cir-tool{min-height:42px}
  .cir-palette-card{
    position:fixed;
    left:10px;right:10px;bottom:10px;
    z-index:30;
    max-height:72vh;
    overflow-y:auto;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(calc(100% + 24px));
    transition:transform .22s ease, visibility .22s;
    background:var(--panel);
    border-color:var(--line-2);
    box-shadow:0 22px 60px rgba(0,0,0,.6);
  }
  .cir-palette-card.open{visibility:visible;pointer-events:auto;transform:none}
  .cir-mask.open{
    display:block;
    position:fixed;inset:0;z-index:29;
    background:rgba(4,8,12,.55);
  }
  .cir-mask{transition:opacity .18s ease}
}

@media (max-width:420px){
  .cir-tool{padding:7px 7px;font-size:11.5px}
  .cir-spd{padding:8px 7px;min-width:38px}
  .cir-card{padding:11px}
  .cir-insp-read b{font-size:14px}
}