/* Neon is confined to this game; the surrounding application keeps the site palette. */
#play-section[data-game="shockwave"] .stage { padding: 22px; background: radial-gradient(ellipse at 50% 40%, #12243d, #0b101c 75%); }
#play-section[data-game="shockwave"] .controls { align-items: center; padding: 15px 22px; }
#play-section[data-game="shockwave"] .controls label { min-width: 130px; }
#play-section[data-game="shockwave"] .controls label.check { flex: 1; }
#play-section[data-game="shockwave"] .actions { background: #0b101c; padding-top: 12px; }
#play-section[data-game="shockwave"] .feedback { margin-top: 16px; }
.shock-frame { --cyan: #51e8ff; --green: #81ff7a; --magenta: #ff70dd; --gold: #ffd467; width: min(100%, 370px); position: relative; isolation: isolate; }
.shock-hud { display: flex; justify-content: space-between; gap: 10px; font: 12px var(--mono); color: #c0cedc; margin-bottom: 9px; }
.shock-hud strong { color: #f6fbff; font-size: 19px; }
.shock-hud span:last-child { text-align: right; }
.shock-hud .timer { font-size: 19px; color: var(--gold); }
.shock-target { display: flex; justify-content: space-between; align-items: center; padding: 11px 17px; border: 1px solid #34516d; border-radius: 12px; background: #142438; }
.shock-target label { font: 11px var(--mono); letter-spacing: 1.5px; color: #9bb8ce; text-align: left; }
.shock-target output { font: 36px var(--mono); color: var(--cyan); line-height: 1.2; }
.shock-combo { display: flex; gap: 10px; align-items: center; justify-content: space-between; font: 11px var(--mono); margin: 10px 0; color: #acbdd3; }
.shock-combo strong { color: var(--gold); font-size: 18px; }
.shock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; position: relative; margin: 14px 0; }
.shock-cell { --heat: var(--cyan); --tint: #51e8ff12; position: relative; aspect-ratio: 1; min-width: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--heat); border-radius: 16px; background: radial-gradient(circle at 50% 20%, var(--tint), #101827 80%); color: var(--heat); box-shadow: inset 0 0 18px var(--tint), 0 0 13px var(--tint); font: 38px var(--mono); touch-action: manipulation; user-select: none; transition: transform .12s, background .15s; overflow: visible; }
.shock-cell.heat-green { --heat: var(--green); --tint: #81ff7a16; }
.shock-cell.heat-hot { --heat: var(--magenta); --tint: #ff70dd1c; }
.shock-cell.heat-gold { --heat: var(--gold); --tint: #ffd46722; animation: shock-gold 1.4s ease-in-out infinite; }
.shock-cell:disabled { opacity: 1; }
.shock-cell.empty { border: 1px dashed #304458; box-shadow: none; background: #0b1422; animation: none; color: #314456; }
.shock-cell.masked .shock-digit::after { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 15px currentColor; opacity: .7; }
.shock-cell.selected { outline: 3px solid #f2f5ff; outline-offset: 3px; transform: scale(.94); }
.shock-cell.miss { outline: 3px solid #ff928b; outline-offset: 2px; }
.shock-cell.revealed .shock-digit { text-shadow: 0 0 20px currentColor; }
.shock-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; color: #b9c9df; font: 10px var(--mono); }
.shock-legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--heat); border-radius: 50%; margin-right: 4px; }
.shock-legend .heat-cool { --heat: var(--cyan); }
.shock-legend .heat-green { --heat: var(--green); }
.shock-legend .heat-hot { --heat: var(--magenta); }
.shock-legend .heat-gold { --heat: var(--gold); }
.shock-status { margin-top: 13px !important; min-height: 25px; font-size: 12px !important; color: #bdcee4 !important; }
.shock-energy { display: flex; justify-content: space-between; margin: 12px 0 6px; font: 10px var(--mono); color: #9fb6d5; }
.shock-meter { width: 100%; height: 7px; background: #243348; border-radius: 10px; overflow: hidden; }
.shock-meter > span { height: 100%; display: block; width: 100%; background: linear-gradient(90deg, #51e8ff, #d98cff); transition: width .2s; }
.shock-pulse { background: #172d45; border-color: #51e8ff; color: #b7f6ff; min-width: 160px; }
.shock-pulse:not(:disabled) { box-shadow: 0 0 25px #51e8ff20; }
.shock-fx { position: absolute; z-index: 4; pointer-events: none; font: 700 20px var(--mono); white-space: nowrap; }
.shock-float { top: 15%; left: 50%; color: #e8fcff; animation: shock-float .7s ease-out both; text-shadow: 0 0 14px #51e8ff; }
.shock-score-pop { top: 38%; left: 50%; color: var(--gold); font-size: 25px; animation: shock-float 1s ease-out both; }
.shock-ring { inset: 15%; border: 2px solid var(--cyan); border-radius: 50%; animation: shock-ring .6s ease-out both; }
.shock-burst { inset: -12%; border: 3px solid var(--gold); border-radius: 35%; animation: shock-ring .7s ease-out both; }
.shock-particle { width: 5px; height: 5px; background: var(--gold); left: 50%; top: 50%; box-shadow: 0 0 9px var(--gold); animation: shock-particle .75s ease-out both; }
.shock-frame.shaking { animation: shock-shake .28s linear; }
.shock-frame.reduced *, .shock-frame.reduced { animation: none !important; transition: none !important; }
.shock-safety { font-size: 11px; color: var(--muted); }
@keyframes shock-float { from { opacity: 1; transform: translate(-50%, 0) scale(.8); } to { opacity: 0; transform: translate(-50%, -65px) scale(1.1); } }
@keyframes shock-ring { from { opacity: .9; transform: scale(.25); } to { opacity: 0; transform: scale(1.8); } }
@keyframes shock-particle { from { opacity: 1; transform: translate(0, 0) rotate(0); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(160deg); } }
@keyframes shock-gold { 0%, 100% { box-shadow: 0 0 9px #ffd46720, inset 0 0 15px #ffd46714; } 50% { box-shadow: 0 0 24px #ffd46750, inset 0 0 25px #ffd46722; } }
@keyframes shock-shake { 0%, 100% { transform: translate(0); } 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, -1px); } }
@media (max-width: 760px) {
    #play-section[data-game="shockwave"] .play-title-row { margin: 18px 0; }
    #play-section[data-game="shockwave"] .play-title-row h1 { font-size: 29px; }
    #play-section[data-game="shockwave"] .stage { padding: 17px; }
    .shock-frame { scroll-margin-top: 155px; }
}
@media (max-width: 450px) {
    .shock-grid { gap: 10px; }
    .shock-cell { font-size: 31px; border-radius: 13px; }
    .shock-hud strong, .shock-hud .timer { font-size: 17px; }
    .shock-target output { font-size: 31px; }
    .shock-combo { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .shock-frame, .shock-frame *, .shock-frame *::after { animation: none !important; transition: none !important; }
}