/* AEGIS のゲーム画面だけのスタイル。色は style.css のトークンを使う */
.aegis{
  position:relative; width:100%; max-width:560px; margin:0 auto 40px;
  aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  background:var(--navy); box-shadow:0 14px 40px rgba(10,42,79,.25);
  user-select:none; -webkit-user-select:none;
}
.aegis canvas{display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; outline:none}
.aegis-ui{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(6,26,51,.62); backdrop-filter:blur(2px);
  align-items:safe center; overflow-y:auto;
}
.aegis-ui[hidden]{display:none}
.aegis-panel{width:100%; max-width:340px; text-align:center; color:#fff}
.aegis-panel p{margin:0; color:inherit; line-height:1.6}
.aegis .aegis-logo{font-size:clamp(40px,11vw,60px); font-weight:800; letter-spacing:.18em; padding-left:.18em; line-height:1.1}
.aegis .aegis-sub{margin:6px 0 24px; font-size:14px; color:#BFE3F3; letter-spacing:.06em}
.aegis .aegis-title-s{font-size:15px; letter-spacing:.12em; color:#BFE3F3; margin-bottom:6px}
.aegis .aegis-score{font-size:clamp(48px,14vw,72px); font-weight:800; line-height:1.1}
.aegis-score span{font-size:15px; font-weight:600; margin-left:6px; color:#BFE3F3}
.aegis .aegis-best{margin:6px 0 20px; font-size:14px; color:#DDF2FB}
.aegis-best strong{color:#FFC24D}
.aegis-best small{color:#9CC8DD}
.aegis-btns{display:grid; gap:10px}
.aegis-btn{
  display:block; width:100%; padding:12px 16px; border-radius:10px; cursor:pointer;
  font:inherit; font-size:16px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(221,242,251,.45);
  transition:background .15s, transform .1s;
}
.aegis-btn:hover{background:rgba(255,255,255,.16)}
.aegis-btn:active{transform:scale(.98)}
.aegis-btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.aegis-btn.primary{background:var(--blue); border-color:var(--cyan)}
.aegis-btn.primary:hover{background:#2670C0}
.aegis-btn.ghost{background:none; border-color:transparent; font-weight:600; color:#BFE3F3}
.aegis-btn small{display:block; font-size:12px; font-weight:500; color:#CFE8F4; margin-top:2px}
.aegis .aegis-hint{margin-top:18px; font-size:12.5px; color:#9CC8DD}
.aegis .aegis-toast{min-height:1.6em; margin-top:10px; font-size:13px; color:#FFC24D}
.aegis-sound{
  position:absolute; right:10px; bottom:10px; z-index:2;
  padding:5px 10px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:12px; color:#DDF2FB; background:rgba(6,26,51,.55);
  border:1px solid rgba(221,242,251,.3);
}
.aegis-sound:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.aegis-legend{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 22px; padding:0; list-style:none}
.article .aegis-legend li{margin:0; padding:0; font-size:14.5px}
.article .aegis-legend li::before{content:none}
.aegis-dot{display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:7px; vertical-align:-1px}
@media (max-width:480px){
  .aegis-ui{padding:10px 14px 34px}
  .aegis .aegis-logo{font-size:34px}
  .aegis .aegis-sub{margin:2px 0 12px; font-size:13px}
  .aegis .aegis-score{font-size:48px}
  .aegis .aegis-best{margin:4px 0 12px}
  .aegis-btns{gap:8px}
  .aegis-btn{padding:8px 12px; font-size:15px}
  .aegis-btn.ghost{padding:4px 12px}
  .aegis .aegis-title-s{margin-bottom:0}
  .aegis .aegis-hint{margin-top:10px; font-size:11.5px; line-height:1.5}
}