.agility-game-root { width:min(100%,980px); max-height:calc(100vh - 32px); overflow:auto; color:#f7f4ee; scrollbar-width:thin; scrollbar-color:#8a8178 transparent; }
.agility-game-root[hidden] { display:none; }
.agility-wait { display:grid; grid-template-columns:1fr; gap:16px; width:100%; }
.agility-generation,.agility-game { border:1px solid rgba(255,255,255,.14); border-radius:20px; background:rgba(37,43,51,.96); box-shadow:0 22px 70px rgba(48,54,62,.24); }
.agility-generation { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; padding:22px 24px; }
.agility-generation-main { display:flex; align-items:flex-start; gap:13px; }
.agility-generation-main > div { min-width:0; }
.agility-generation-main strong { display:block; color:#fff; font-size:20px; line-height:1.4; }
.agility-generation-main span:last-child { display:block; margin-top:7px; color:#d0c9be; font-size:13px; line-height:1.6; }
.agility-status-mark { flex:none; width:18px; height:18px; margin-top:5px; border:2px solid rgba(237,139,69,.25); border-top-color:#ed8b45; border-radius:50%; animation:agility-spin .8s linear infinite; }
.agility-status-mark.is-ready { display:grid; place-items:center; border:0; background:#28785e; animation:none; }
.agility-status-mark.is-ready::before { content:'✓'; color:#fff; font-size:13px; font-weight:900; }
.agility-view-plan,.agility-panel button { min-height:44px; border:0; border-radius:10px; background:linear-gradient(135deg,#c9622b,#ed8b45); color:#fff; font:inherit; font-weight:800; cursor:pointer; touch-action:manipulation; }
.agility-view-plan { grid-column:2; grid-row:1; min-width:190px; margin-left:20px; padding:10px 16px; }
.agility-view-plan:hover,.agility-panel button:hover { filter:brightness(1.08); }
.agility-view-plan:focus-visible,.agility-panel button:focus-visible,.agility-light:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.agility-stages { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:0; margin:20px 0 0; list-style:none; counter-reset:stage; }
.agility-stages li { display:flex; align-items:center; gap:9px; color:#b0a9a0; font-size:13px; transition:color .2s; }
.agility-stages li::before { content:''; width:7px; height:7px; border:1px solid #7d7f83; border-radius:50%; }
.agility-stages li.is-active { color:#fff7ed; }
.agility-stages li.is-active::before { border-color:#ed8b45; background:#ed8b45; box-shadow:0 0 12px rgba(237,139,69,.72); }
.agility-stages li.is-done { color:#a9c9b7; }
.agility-stages li.is-done::before { border-color:#28785e; background:#28785e; }
.agility-reasoning { grid-column:1/-1; margin-top:17px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:rgba(18,22,27,.42); }
.agility-reasoning summary { display:flex; align-items:center; min-height:48px; padding:10px 14px; color:#f7f4ee; font-size:14px; font-weight:750; cursor:pointer; list-style:none; touch-action:manipulation; }
.agility-reasoning summary::-webkit-details-marker { display:none; }
.agility-reasoning summary:focus-visible { outline:3px solid #fff; outline-offset:-3px; border-radius:12px; }
.agility-reasoning-badge { margin-left:10px; padding:3px 8px; border:1px solid rgba(247,187,134,.48); border-radius:999px; color:#ffd0a8; font-size:11px; font-weight:800; letter-spacing:.2px; }
.agility-reasoning-chevron { width:9px; height:9px; margin:0 4px 4px auto; border-right:2px solid #bdb5ab; border-bottom:2px solid #bdb5ab; transform:rotate(45deg); transition:transform .18s ease; }
.agility-reasoning[open] .agility-reasoning-chevron { margin-bottom:-4px; transform:rotate(225deg); }
.agility-reasoning-body { padding:13px 14px 14px; border-top:1px solid rgba(255,255,255,.1); }
.agility-reasoning-body > p { margin:0 0 10px; color:#c8c0b6; font-size:12px; line-height:1.65; }
.agility-reasoning pre { max-height:min(34vh,310px); margin:0; padding:13px 14px; overflow:auto; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:#171b20; color:#e9e5de; font:12.5px/1.7 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; white-space:pre-wrap; overflow-wrap:anywhere; scrollbar-width:thin; scrollbar-color:#7d756c transparent; }
.agility-game { justify-self:center; width:min(100%,760px); padding:20px; min-width:0; }
.agility-game-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.agility-kicker { color:#f7bb86; font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; }
.agility-game h2 { margin:2px 0 0; color:#fff; font-size:20px; }
.agility-live-stats { display:flex; gap:7px; }
.agility-live-stats span { min-width:70px; padding:6px 9px; border:1px solid rgba(255,255,255,.14); border-radius:8px; color:#bdb5ab; font-size:11px; text-align:center; }
.agility-live-stats strong { display:block; color:#fff; font-size:16px; font-variant-numeric:tabular-nums; }
.agility-board { position:relative; width:100%; aspect-ratio:1.5; min-height:330px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:15px; background:radial-gradient(circle at 50% 46%,rgba(237,139,69,.12),transparent 58%),linear-gradient(155deg,#20242b,#3e444b); isolation:isolate; }
.agility-board::before { content:''; position:absolute; inset:0; z-index:-1; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent); }
.agility-light { position:absolute; left:var(--x); top:var(--y); width:94px; height:94px; padding:0; border:0; border-radius:50%; background:transparent; transform:translate(-50%,-50%); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.agility-light:disabled { cursor:default; }
.agility-light > span { position:absolute; inset:9px; border:3px solid rgba(232,235,238,.3); border-radius:50%; background:rgba(32,36,43,.62); box-shadow:inset 0 0 18px rgba(0,0,0,.32); transition:transform .11s ease,border-color .11s ease,background .11s ease,box-shadow .11s ease; }
.agility-light.is-active > span { border-color:#ffd0a8; background:#ed8b45; transform:scale(1.09); box-shadow:0 0 15px #ed8b45,0 0 38px rgba(237,139,69,.58),inset 0 0 15px rgba(255,255,255,.55); animation:agility-breathe .72s ease-in-out infinite alternate; }
.agility-light.is-active::after { content:''; position:absolute; inset:3px; border:1px solid rgba(255,208,168,.72); border-radius:50%; animation:agility-ripple .9s ease-out infinite; }
.agility-combo { position:absolute; left:50%; top:47%; z-index:3; pointer-events:none; transform:translate(-50%,-50%) scale(.8); color:#fff7ed; font-size:24px; font-weight:900; letter-spacing:.5px; opacity:0; text-shadow:0 0 18px #ed8b45; transition:.14s; }
.agility-combo.is-visible { opacity:1; transform:translate(-50%,-50%) scale(1); }
.agility-panel { position:absolute; left:50%; top:50%; z-index:4; display:flex; flex-direction:column; align-items:center; width:min(82%,330px); padding:22px; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.18); border-radius:15px; background:rgba(32,36,43,.94); box-shadow:0 18px 50px rgba(0,0,0,.36); text-align:center; backdrop-filter:blur(8px); }
.agility-panel[hidden] { display:none; }
.agility-intro strong { color:#fff; font-size:18px; }
.agility-intro > span { margin:6px 0 17px; color:#c0b8ae; font-size:13px; }
.agility-panel button { padding:10px 23px; }
.agility-countdown { width:150px; padding:21px; pointer-events:none; }
.agility-countdown strong { color:#f7bb86; font-size:58px; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 0 24px rgba(237,139,69,.52); }
.agility-countdown span { margin-top:8px; color:#c0b8ae; font-size:12px; letter-spacing:2px; }
.agility-result { width:min(90%,440px); padding:17px; }
.agility-result-kicker { color:#c0b8ae; font-size:11px; letter-spacing:1.5px; }
.agility-result-label { margin:3px 0 11px; color:#fff; font-size:20px; }
.agility-result-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; width:100%; }
.agility-result-grid span { padding:7px 4px; border-radius:7px; background:rgba(255,255,255,.08); color:#c0b8ae; font-size:10px; }
.agility-result-grid strong { display:block; margin-top:3px; color:#fff; font-size:14px; font-variant-numeric:tabular-nums; }
.agility-result p { margin:9px 0 10px; color:#b0a9a0; font-size:11px; }
.agility-disclaimer { margin:11px 2px 0; color:#b0a9a0; font-size:11px; text-align:center; }
@keyframes agility-spin { to { transform:rotate(360deg); } }
@keyframes agility-breathe { to { filter:brightness(1.22); transform:scale(1.14); } }
@keyframes agility-ripple { from { opacity:.8; transform:scale(.75); } to { opacity:0; transform:scale(1.18); } }
@media(max-width:760px) {
  .agility-game-root { max-height:calc(100vh - 20px); }
  .agility-generation { grid-template-columns:1fr; padding:16px 18px; }
  .agility-generation-main strong { font-size:17px; }
  .agility-view-plan { grid-column:1; grid-row:auto; width:100%; margin:14px 0 0; }
  .agility-stages { grid-column:1; grid-template-columns:1fr 1fr; margin-top:14px; gap:7px 12px; }
  .agility-reasoning { grid-column:1; margin-top:14px; }
  .agility-reasoning pre { max-height:27vh; }
  .agility-game { padding:14px; }
  .agility-board { aspect-ratio:1.03; min-height:350px; }
  .agility-light { width:78px; height:78px; }
  .agility-light > span { inset:8px; }
}
@media(max-width:430px) {
  .agility-game-head { align-items:flex-end; }
  .agility-live-stats span { min-width:58px; padding:5px; }
  .agility-board { min-height:330px; }
  .agility-light { width:72px; height:72px; }
  .agility-result-grid { grid-template-columns:repeat(3,1fr); }
}
@media(prefers-reduced-motion:reduce) {
  .agility-status-mark,.agility-light.is-active > span,.agility-light.is-active::after { animation:none; }
  .agility-light > span,.agility-combo,.agility-reasoning-chevron { transition:none; }
}