/* Zelos Arcade: shared styles for the chart-based training games. Uses the
   site theme tokens from zelos-theme.css. */
.zg-shell{ max-width:980px; margin:0 auto; padding:26px 16px 60px; }
.zg-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.zg-top h1{ font-size:clamp(1.4rem, 3.4vw, 1.9rem); margin:6px 0 4px; letter-spacing:-0.01em; }
.zg-top p{ color:var(--muted); max-width:62ch; font-size:0.92rem; margin:0; }
.zg-kicker{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
.zg-stats{ display:flex; gap:8px; flex-wrap:wrap; }
.zg-stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; min-width:92px; }
.zg-stat small{ display:block; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.zg-stat b{ font-family:var(--mono); font-size:1.02rem; font-weight:600; }
.zg-stat b.up{ color:var(--bull); } .zg-stat b.dn{ color:var(--danger); }

.zg-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.zg-round-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.zg-round-no{ font-family:var(--mono); font-size:0.75rem; color:var(--muted); }
.zg-chart-wrap{ position:relative; width:100%; height:clamp(260px, 46vh, 420px); background:var(--chart-bg, rgba(0,0,0,0.25)); border:1px solid var(--border-soft, var(--border)); border-radius:var(--radius-sm); overflow:hidden; }
.zg-chart{ display:block; width:100%; height:100%; touch-action:manipulation; }
.zg-pickable{ cursor:crosshair; }
.zg-prompt{ margin:14px 0 6px; font-size:0.95rem; line-height:1.55; color:var(--ink-2, var(--ink)); }
.zg-pickinfo{ font-family:var(--mono); font-size:0.8rem; color:var(--muted); margin:6px 0 2px; min-height:1.2em; }

.zg-checklist{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.zg-q{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2, transparent); }
.zg-q-text b{ display:block; font-size:0.9rem; }
.zg-q-text span{ font-size:0.84rem; color:var(--muted); }
.zg-q-exp{ grid-column:1 / -1; font-size:0.82rem; color:var(--ink-2, var(--ink)); line-height:1.5; }
.zg-q-exp:empty{ display:none; }
.zg-q.is-right{ border-color:rgba(62,203,124,0.55); }
.zg-q.is-wrong{ border-color:rgba(224,72,63,0.6); }
.zg-yn{ display:flex; gap:6px; }

.zg-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.zg-btn{ font:600 0.88rem/1 var(--sans, inherit); padding:11px 16px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2, var(--surface)); color:var(--ink); cursor:pointer; min-height:42px; }
.zg-btn:hover:not(:disabled){ border-color:var(--accent-line, var(--accent)); }
.zg-btn:disabled{ opacity:0.45; cursor:not-allowed; }
.zg-btn-sm{ padding:7px 12px; min-height:34px; font-size:0.8rem; }
.zg-btn.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.zg-btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.zg-btn-buy{ background:rgba(62,203,124,0.16); border-color:var(--bull); color:var(--bull); }
.zg-btn-sell{ background:rgba(224,72,63,0.14); border-color:var(--danger); color:var(--danger); }
.zg-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.zg-result{ margin-top:16px; padding:14px 16px; border:1px solid var(--accent-line, var(--border)); border-radius:var(--radius-sm); background:var(--surface-2, rgba(0,0,0,0.18)); }
.zg-result p{ font-size:0.9rem; line-height:1.55; margin:8px 0; }
.zg-result .zg-btn{ margin-top:6px; }
.zg-verdict{ font-weight:600; font-size:0.95rem; padding-left:10px; border-left:3px solid var(--muted); }
.zg-verdict.g{ border-color:var(--bull); } .zg-verdict.y{ border-color:var(--gold, #d9a441); } .zg-verdict.r{ border-color:var(--danger); }
.zg-fine{ font-size:0.76rem !important; color:var(--muted); }

.zg-progress{ display:flex; gap:5px; margin:0 0 14px; }
.zg-progress i{ flex:1; height:5px; border-radius:3px; background:var(--border); }
.zg-progress i.g{ background:var(--bull); } .zg-progress i.y{ background:var(--gold, #d9a441); } .zg-progress i.r{ background:var(--danger); } .zg-progress i.now{ background:var(--accent); }

.zg-end{ text-align:center; padding:26px 18px; }
.zg-end h2{ font-size:1.5rem; margin:6px 0; }
.zg-end .zg-big{ font-family:var(--mono); font-size:2.6rem; font-weight:700; margin:8px 0; }
.zg-grid{ font-size:1.6rem; letter-spacing:4px; margin:8px 0; }
.zg-end .zg-actions{ justify-content:center; }
.zg-scorecard{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; margin:16px 0; text-align:left; }
.zg-howto{ margin-top:22px; font-size:0.86rem; color:var(--muted); line-height:1.6; }
.zg-howto h2{ font-size:1rem; color:var(--ink); margin:18px 0 6px; }
.zg-howto a{ color:var(--accent); }
.zg-cta{ margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 16px; border:1px solid var(--accent-line, var(--border)); border-radius:var(--radius-sm); background:var(--accent-soft, transparent); font-size:0.9rem; }
.zg-lb{ margin-top:14px; font-size:0.85rem; }
.zg-lb ol{ margin:6px 0 0; padding-left:20px; font-family:var(--mono); }
.zg-lb-form{ display:flex; gap:8px; margin-top:10px; justify-content:center; flex-wrap:wrap; }
.zg-lb-form input{ padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2, var(--surface)); color:var(--ink); font:inherit; min-width:0; }

/* ---- action guidance: whatever needs doing next glows, gently ---- */
.zg-pulse{ --zg-pc:var(--accent-glow, rgba(74,134,255,0.45)); animation:zg-pulse 1.8s ease-in-out infinite; position:relative; }
.zg-btn-buy.zg-pulse{ --zg-pc:rgba(62,203,124,0.5); }
.zg-btn-sell.zg-pulse{ --zg-pc:rgba(224,72,63,0.5); }
.zg-btn-danger.zg-pulse{ --zg-pc:rgba(224,72,63,0.5); }
@keyframes zg-pulse{ 0%,100%{ box-shadow:0 0 0 0 var(--zg-pc); } 50%{ box-shadow:0 0 0 5px transparent, 0 0 16px 2px var(--zg-pc); } }
.zg-glow{ border-color:var(--accent-line, var(--accent)) !important; box-shadow:0 0 0 1px var(--accent-line, var(--accent)), 0 0 18px var(--accent-glow, rgba(74,134,255,0.35)); }
.zg-glow .zg-yn .zg-btn{ animation:zg-pulse 1.8s ease-in-out infinite; --zg-pc:var(--accent-glow, rgba(74,134,255,0.45)); }
@media (prefers-reduced-motion: reduce){ .zg-pulse, .zg-glow .zg-yn .zg-btn{ animation:none; box-shadow:0 0 0 2px var(--accent-line, var(--accent)); } }

.zg-steps{ list-style:none; display:flex; gap:6px; margin:0 0 10px; padding:0; counter-reset:zgs; flex-wrap:wrap; }
.zg-steps li{ counter-increment:zgs; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); padding:5px 10px 5px 8px; border:1px solid var(--border); border-radius:999px; }
.zg-steps li::before{ content:counter(zgs); display:inline-block; width:16px; height:16px; line-height:16px; text-align:center; border-radius:50%; background:var(--border); color:var(--ink); margin-right:6px; font-size:0.62rem; }
.zg-steps li.is-now{ color:var(--ink); border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow, transparent); }
.zg-steps li.is-now::before{ background:var(--accent); color:#fff; }
.zg-steps li.is-done{ color:var(--ink-2, var(--ink)); }
.zg-steps li.is-done::before{ content:'✓'; background:var(--bull); color:#08110b; }
.zg-ticket{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin-top:8px; }
.zg-ticket span{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 9px; background:var(--surface-2, transparent); min-width:0; }
.zg-ticket small{ display:block; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.zg-ticket b{ font-family:var(--mono); font-size:0.9rem; }
.zg-ticket b.up{ color:var(--bull); } .zg-ticket b.dn{ color:var(--danger); }
.zg-ticket .is-stop{ border-left:3px solid var(--danger); } .zg-ticket .is-target{ border-left:3px solid var(--bull); }
.zg-ticket .is-due{ animation:zg-pulse 1.8s ease-in-out infinite; }
.zg-ticket .is-stop.is-due{ --zg-pc:rgba(224,72,63,0.5); } .zg-ticket .is-target.is-due{ --zg-pc:rgba(62,203,124,0.5); }
.zg-prompt-sm{ font-size:0.88rem; margin-top:10px; }
.zg-next-head{ display:flex; align-items:center; gap:10px; font-size:1.25rem; font-weight:800; letter-spacing:-0.01em; color:var(--ink); margin-bottom:4px; }
.zg-next-dot{ width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent-glow); animation:zg-pulse 1.4s ease-in-out infinite; --zg-pc:var(--accent-glow, rgba(74,134,255,0.5)); flex:none; }
.zg-result b.up{ color:var(--bull); } .zg-result b.dn{ color:var(--danger); }
.zg-plan-notes{ margin:10px 0 0; padding:0; list-style:none; font-size:0.86rem; line-height:1.5; }
.zg-plan-notes li{ padding:4px 0 4px 10px; border-left:3px solid var(--border); margin-top:4px; }
.zg-plan-notes li.ok{ border-color:var(--bull); } .zg-plan-notes li.miss{ border-color:var(--danger); }
.zg-back{ text-decoration:none; display:inline-flex; align-items:center; }

/* replay */
.zr-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.zr-bar .grow{ flex:1; }
.zr-risk{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:0.78rem; color:var(--muted); }
.zr-risk select{ background:var(--surface-2, var(--surface)); color:var(--ink); border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px; font:inherit; }
.zr-log{ margin-top:12px; font-family:var(--mono); font-size:0.76rem; color:var(--muted); max-height:120px; overflow:auto; line-height:1.6; }
.zr-hint{ font-size:0.84rem; color:var(--muted); margin-top:10px; line-height:1.5; }
.zr-hint b{ color:var(--ink); }
.zr-tip{ display:flex; gap:10px; align-items:flex-start; margin-top:10px; padding:10px 12px; border:1px solid var(--accent-line, var(--border)); border-left:3px solid var(--accent); border-radius:var(--radius-sm); background:var(--accent-soft, transparent); font-size:0.84rem; line-height:1.5; color:var(--ink-2, var(--ink)); }
.zr-tip[hidden]{ display:none; }
.zr-tip b{ color:var(--ink); }
.zr-tip-ico{ flex:none; font-size:1rem; line-height:1.3; }
.zr-tip.is-warn{ border-left-color:var(--gold, #d9a441); }
.zr-risk-warn{ margin-top:8px; padding:9px 12px; border:1px solid var(--danger); border-radius:var(--radius-sm); background:var(--danger-soft, rgba(224,72,63,0.12)); color:var(--ink); font-size:0.82rem; line-height:1.5; }
.zr-risk-warn[hidden]{ display:none; }
.zr-risk select.is-full{ border-color:var(--danger); color:var(--danger); font-weight:700; }
@media (max-width:560px){
  .zg-q{ grid-template-columns:1fr; }
  .zg-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(70px, 1fr)); width:100%; }
  .zg-stat{ min-width:0; padding:7px 8px; }
  .zg-stat b{ font-size:0.86rem; }
  .zr-bar .zg-btn{ flex:1; }
  .zg-ticket{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.zg-lb a{ color:var(--accent); text-decoration:none; }
.zg-lb a:hover{ text-decoration:underline; }
.zg-lb-all{ font-family:var(--mono); font-size:0.74rem; margin-left:6px; }

/* Full Port: the page itself glows with the account, green when winning, red when losing */
body.zr-fullport::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:90;
  box-shadow:inset 0 0 var(--zr-glow-size, 80px) var(--zr-glow, rgba(62,203,124,0.4));
  background:radial-gradient(ellipse at center, transparent 55%, var(--zr-glow-soft, transparent) 100%);
  animation:zr-breathe var(--zr-glow-speed, 2s) ease-in-out infinite;
  transition:box-shadow .4s ease, background .4s ease;
}
body.zr-fullport .zg-panel{ border-color:var(--zr-glow); box-shadow:0 0 calc(var(--zr-glow-size, 80px) / 2) var(--zr-glow-soft), 0 0 0 1px var(--zr-glow); transition:box-shadow .4s ease, border-color .4s ease; }
body.zr-fullport .zg-stat{ border-color:var(--zr-glow); }
@keyframes zr-breathe{ 0%,100%{ opacity:0.75; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ body.zr-fullport::after{ animation:none; } }

/* Grade the Setup: why a losing round lost, and the target-hit moment */
.zg-why{ margin:12px 0 4px; padding:12px 14px; border:1px solid rgba(224,72,63,0.55); border-left:3px solid var(--danger); border-radius:var(--radius-sm); background:var(--danger-soft, rgba(224,72,63,0.08)); }
.zg-why-head{ font-weight:800; font-size:0.95rem; color:var(--danger); margin-bottom:4px; }
.zg-why p{ font-size:0.87rem !important; margin:6px 0 !important; line-height:1.55; }
.zg-chart-wrap.zg-tp-hit{ animation:zg-tp 1.4s ease-out 1; }
@keyframes zg-tp{ 0%{ box-shadow:0 0 0 0 rgba(62,203,124,0); } 20%{ box-shadow:0 0 0 3px rgba(62,203,124,0.7), 0 0 36px rgba(62,203,124,0.45); } 100%{ box-shadow:0 0 0 0 rgba(62,203,124,0); } }
@media (prefers-reduced-motion: reduce){ .zg-chart-wrap.zg-tp-hit{ animation:none; } }

/* paid drill hints (owner 2026-10-23) */
.zg-hint-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
.zg-hint-box .zg-fine { margin: 0; }
.zg-hint-msg:empty { display: none; }
.zg-hint-used { display: inline-block; margin-left: 6px; font-size: .85em; font-weight: 600; color: var(--gold, #d9a441); }