/* Scoped styles: no changes to Adrian's existing WordPress theme. */
.apcs-game,
.apcs-game * { box-sizing: border-box; }
.apcs-game {
  --apcs-cyan: #64eaff;
  --apcs-purple: #b899ff;
  --apcs-border: rgba(91,203,253,.27);
  color: #eaf6ff;
  width: min(100%, 770px);
  margin: 24px auto;
  padding: clamp(14px, 3vw, 32px);
  overflow: hidden;
  border: 1px solid var(--apcs-border);
  border-radius: 22px;
  background: radial-gradient(ellipse at 80% 2%,rgba(50,93,179,.23),transparent 48%),linear-gradient(160deg,#091626,#0b1229 70%,#0c1731);
  box-shadow: 0 20px 70px rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.035);
  font: 400 15px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.apcs-game button,
.apcs-game input { font: inherit; }
.apcs-game button { cursor: pointer; }
.apcs-game [hidden] { display: none !important; }
.apcs-game button:focus-visible,
.apcs-game input:focus-visible,
.apcs-game canvas:focus-visible { outline: 3px solid #76e3ff; outline-offset: 3px; }
.apcs-head { text-align: center; padding: 4px 2px 19px; }
.apcs-eyebrow { display: block; font-size: 11px; font-weight: 850; letter-spacing: .18em; color: #79e5ff; }
.apcs-title { margin: 5px 0 9px !important; padding: 0 !important; color: #f1f9ff !important; font-size: clamp(23px, 5.5vw, 39px) !important; line-height: 1.18 !important; font-weight: 900 !important; letter-spacing: -.035em; text-transform: uppercase; }
.apcs-title span { color: var(--apcs-cyan); text-shadow: 0 0 24px rgba(67,206,255,.38); }
.apcs-head p { margin: 0 !important; color: #acc5dc; font-size: 14px; }
.apcs-status { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.apcs-status > div { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 0; padding: 12px 5px 9px; border: 1px solid rgba(83,165,212,.21); border-radius: 12px; background: rgba(3,19,39,.7); }
.apcs-status span { font-size: 10px; font-weight: 750; letter-spacing: .07em; color: #9ab5ca; }
.apcs-status strong { display: block; font-size: clamp(25px,5vw,34px); line-height: 1.25; color: #7bebff; font-variant-numeric: tabular-nums; }
.apcs-status small { font-size: 10px; color: #819db5; }
.apcs-board { position: relative; width: min(100%, 520px); margin: 0 auto; overflow: hidden; aspect-ratio: 420 / 650; border: 2px solid #366a8d; border-radius: 14px; background: #071326; box-shadow: 0 0 0 5px rgba(32,96,152,.09),0 7px 25px rgba(0,0,0,.26); }
.apcs-board::after { content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 40px rgba(2,0,18,.24); }
.apcs-canvas { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: none; user-select: none; -webkit-user-select: none; }
.apcs-overlay { display: flex; position: absolute; inset: 0; z-index: 2; align-items: center; justify-content: center; padding: 23px; background: rgba(3,11,28,.69); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.apcs-overlay-content { text-align: center; width: min(100%, 348px); border: 1px solid rgba(111,226,255,.34); border-radius: 18px; padding: 25px 18px; background: linear-gradient(155deg,rgba(13,31,64,.98),rgba(8,16,39,.97)); box-shadow: 0 16px 36px rgba(0,0,0,.35),0 0 28px rgba(44,183,243,.14); }
.apcs-chip { color: var(--apcs-purple); font-size: 11px; font-weight: 850; letter-spacing: .13em; }
.apcs-overlay-content h3 { margin: 9px 0 10px !important; color: #fff !important; font-size: clamp(20px,4vw,26px) !important; line-height: 1.2; font-weight: 900; }
.apcs-overlay-content p { margin: 0 0 23px !important; color: #b6c9df; font-size: 14px; line-height: 1.55; }
.apcs-primary { display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 12px 19px !important; color: #071628 !important; font-weight: 900 !important; letter-spacing: .035em; border: 0 !important; border-radius: 10px !important; background: linear-gradient(105deg,#7ff3ff,#a7bbff) !important; box-shadow: 0 4px 22px rgba(63,193,250,.18); text-shadow: none !important; transition: transform .16s,filter .16s; }
.apcs-primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
.apcs-primary:disabled { opacity: .55; cursor: wait; }
.apcs-message { position: absolute; z-index: 1; top: 28%; left: 8%; width: 84%; padding: 8px 4px; text-align: center; color: #e4ffff; font-size: clamp(12px,3vw,17px); font-weight: 950; letter-spacing: .05em; text-shadow: 0 2px 3px #00112c,0 0 16px #03cdff; opacity: 0; transform: translateY(7px); transition: opacity .16s,transform .16s; pointer-events: none; }
.apcs-message-show { opacity: 1; transform: translateY(0); }
.apcs-actions { display: flex; gap: 15px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 16px 0 0; }
.apcs-actions p { margin: 0 !important; max-width: 465px; flex: 2 1 230px; color: #b5cfe4; font-size: 12px; line-height: 1.6; }
.apcs-actions p strong { color: #74e5fa; }
.apcs-action-buttons { flex: 1 1 auto; display: flex; gap: 8px; justify-content: end; }
.apcs-action-buttons button,
.apcs-leaderboard-head button { border: 1px solid #355e81 !important; border-radius: 9px !important; background: #132641 !important; color: #d1f3ff !important; padding: 9px 12px !important; font-size: 12px; font-weight: 800; white-space: nowrap; }
.apcs-action-buttons button:hover,
.apcs-leaderboard-head button:hover { background: #1c3e61 !important; }
.apcs-submit { margin: 23px auto 5px; max-width: 590px; border: 1px solid rgba(67,219,246,.36); border-radius: 15px; padding: 18px; background: rgba(18,47,69,.7); }
.apcs-submit h3 { color: #e8fbff !important; margin: 0 0 5px !important; font-size: 22px !important; }
.apcs-submit p { color: #b3d0dd; margin: 0 0 13px !important; }
.apcs-submit label { display: block; font-size: 12px; font-weight: 750; color: #9be3ee; margin-bottom: 7px; }
.apcs-submit-row { display: flex; gap: 9px; }
.apcs-submit-row input { min-width: 0; flex: 1 1 180px; border: 1px solid #5b829d !important; background: #061b32 !important; border-radius: 9px !important; color: white !important; padding: 11px !important; line-height: normal; }
.apcs-submit small { display: block; margin: 11px 0 0; color: #91b3ca; }
.apcs-submit .apcs-form-feedback { color: #b0f1ca; margin: 9px 0 0 !important; }
.apcs-leaderboard { margin-top: 27px; border-radius: 15px; background: rgba(3,16,34,.78); border: 1px solid rgba(66,157,203,.2); overflow: hidden; }
.apcs-leaderboard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; border-bottom: 1px solid rgba(85,167,219,.19); }
.apcs-leaderboard h3 { margin: 4px 0 0 !important; font-size: clamp(17px,3.5vw,23px) !important; line-height: 1.3; color: #f1faff !important; font-weight: 900; letter-spacing: -.02em; }
.apcs-score-rows { padding: 4px 14px 12px; }
.apcs-score-rows > p { color: #aac2d8; margin: 14px 5px !important; }
.apcs-score-row { display: grid; grid-template-columns: 55px minmax(0,1fr) 95px; gap: 9px; align-items: center; padding: 12px 4px; border-bottom: 1px solid rgba(108,166,209,.14); font-size: 13px; }
.apcs-score-row:last-child { border-bottom: 0; }
.apcs-rank { font-weight: 900; font-variant-numeric: tabular-nums; color: #95add2; }
.apcs-score-row:nth-child(1) .apcs-rank { color: #ffd677; }
.apcs-score-row:nth-child(2) .apcs-rank { color: #dcecff; }
.apcs-score-row:nth-child(3) .apcs-rank { color: #eba985; }
.apcs-player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8f5ff; font-weight: 750; }
.apcs-score-row > strong { text-align: right; color: #88eaff; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .apcs-game { margin: 12px auto; padding: 12px; border-radius: 14px; }
  .apcs-status { gap: 5px; }
  .apcs-status > div { padding: 9px 2px 8px; }
  .apcs-status span { font-size: 9px; letter-spacing: 0; }
  .apcs-status small { font-size: 9px; }
  .apcs-actions { display: block; }
  .apcs-action-buttons { justify-content: flex-start; margin-top: 12px; }
  .apcs-submit-row { flex-direction: column; }
  .apcs-submit-row input { flex: initial; width: 100%; }
  .apcs-submit .apcs-primary { width: 100%; }
  .apcs-score-row { grid-template-columns: 42px minmax(0,1fr) 75px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .apcs-game button, .apcs-message { transition: none; }
}