/* SIVIA Quest Level（図面 03）だけの指定。部品は level.css を使う。色は sivia-tokens.css の変数のみ。
   Quest シリーズ（ゲーム）はアイコンの地がブラウン（SIVIA-design.md）なので、主色の深赤をブラウンに置き換える。 */
.theme-quest{--sivia-red:var(--sivia-brown);--sivia-red-600:var(--sivia-brown);
  --sivia-red-700:var(--sivia-ink);--sivia-red-100:var(--sivia-paper-3)}
.quest-mega{display:flex;flex-direction:column}
.quest-mega span{font-size:.36em;letter-spacing:.12em;line-height:1;margin-top:.34em;color:var(--sivia-terracotta-text)}

/* 触れる標尺（望遠鏡の視野）。標尺は E 字の目盛、十字線はテラコッタ */
.staffgame{grid-column:5/-1;min-width:0;display:grid;row-gap:var(--s-3)}
.sq-stage{padding:var(--s-3);display:flex;justify-content:center;background:var(--sivia-paper)}
.sq-view{width:min(100%,420px);height:auto}
/* 標尺の絵（アプリの StaffPainter.swift と同じ）。黄・白は標尺の絵だけに使う例外色（実物再現・2026-10-02 ユーザー承認） */
.sq-bg{fill:var(--sivia-neutral-400)}
.sq-y{fill:#F5D90A}
.sq-w{fill:#F7F7F2}
.sq-k{fill:var(--sivia-ink)}
.sq-center{stroke:var(--sivia-danger);fill:none}
.sq-tick{stroke:var(--sivia-ink);fill:none}
.sq-tick.r{stroke:var(--sivia-danger)}
.sq-tri,.sq-mblk,.sq-dot{fill:var(--sivia-danger)}
.sq-cm,.sq-dm,.sq-mn{font-family:"Barlow Condensed",sans-serif;font-weight:600}
.sq-cm{fill:var(--sivia-ink);text-anchor:end;dominant-baseline:hanging}
.sq-dm{fill:var(--sivia-ink);text-anchor:middle;dominant-baseline:central}
.sq-mn{text-anchor:middle;dominant-baseline:central}
.sq-hair{stroke:var(--sivia-ink);stroke-width:1.2;fill:none}
.sq-ring{fill:none;stroke:var(--sivia-ink);stroke-width:12}
.sq-staff{transition:transform var(--dur-l) var(--ease)}
.sq-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.sq-ctrl input{width:9em;min-height:44px;padding:0 var(--s-1);border:1px solid var(--line);border-radius:0;background:var(--sivia-paper);
  font-family:var(--en);font-size:24px;font-variant-numeric:tabular-nums;color:var(--sivia-ink)}
.sq-ctrl input:focus{outline:2px solid var(--sivia-terracotta-text);outline-offset:2px}
.sq-ctrl input[aria-invalid="true"]{border-color:var(--sivia-danger)}
.sq-unit{font-family:var(--en);color:var(--sivia-brown);margin-left:-8px}
.sq-msg{min-height:1.9em;font-family:var(--jp);font-size:18px;margin:0}
.sq-msg.is-ok{color:var(--sivia-olive-text)}
.sq-msg.is-ng,.sq-msg.is-warn{color:var(--sivia-danger)}
@media (max-width:1180px){.staffgame{grid-column:4/-1}}
@media (max-width:900px){.staffgame{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.sq-staff{transition:none}}