* { box-sizing: border-box; }

body[data-game="arcshift"] { min-height: 100vh; margin: 0; background: var(--slate-50); color: var(--slate-600); }
body[data-game="arcshift"] .arc-page { width: min(calc(100% - 32px), 860px); margin: 0 auto; padding: 38px 0 72px; }
body[data-game="arcshift"] .arc-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
body[data-game="arcshift"] .eyebrow { display: block; margin: 0 0 6px; color: var(--cobalt-600); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
body[data-game="arcshift"] .arc-heading h1 { margin: 0; color: var(--slate-800); font: 700 clamp(42px, 8vw, 64px)/.98 var(--font-heading); letter-spacing: -.055em; }
body[data-game="arcshift"] .arc-heading > div > p:last-child { max-width: 580px; margin: 11px 0 0; color: var(--slate-500); line-height: 1.55; }

body[data-game="arcshift"] .sound-button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--slate-200); border-radius: var(--radius-md); background: var(--slate-0); color: var(--cobalt-600); box-shadow: var(--shadow-xs); cursor: pointer; }
body[data-game="arcshift"] .sound-button:hover { border-color: var(--cobalt-300); background: var(--cobalt-50); }
body[data-game="arcshift"] .sound-button:focus-visible { outline: 3px solid var(--cobalt-200); outline-offset: 3px; }
body[data-game="arcshift"] .sound-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body[data-game="arcshift"] .sound-button[aria-pressed="false"] { color: var(--slate-400); }

body[data-game="arcshift"] .game-shell { overflow: hidden; border: 1px solid #252b42; border-radius: var(--radius-lg); background: #0d1120; box-shadow: var(--shadow-md); }
body[data-game="arcshift"] .score-row { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #252b42; background: #111626; }
body[data-game="arcshift"] .score-row div { padding: 14px 20px; border-right: 1px solid #252b42; }
body[data-game="arcshift"] .score-row div:last-child { border: 0; }
body[data-game="arcshift"] .score-row span,
body[data-game="arcshift"] .score-row strong { display: block; }
body[data-game="arcshift"] .score-row span { color: #828ba6; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
body[data-game="arcshift"] .score-row strong { margin-top: 2px; color: #f5f6ff; font: 700 19px/1.3 var(--font-mono); }

body[data-game="arcshift"] .playfield { position: relative; display: grid; place-items: center; aspect-ratio: 1.45; min-height: 430px; overflow: hidden; background: radial-gradient(circle at 50% 48%, #1a1f3c 0, #0f1428 38%, #090d19 75%); cursor: pointer; touch-action: manipulation; user-select: none; }
body[data-game="arcshift"] .playfield::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.026) 1px, transparent 1px); background-size: 30px 30px; content: ''; mask-image: radial-gradient(circle, #000, transparent 72%); opacity: .3; }
body[data-game="arcshift"] #game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
body[data-game="arcshift"] .centre-readout { position: absolute; display: flex; align-items: center; flex-direction: column; pointer-events: none; }
body[data-game="arcshift"] .centre-readout span { color: #8e98b7; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
body[data-game="arcshift"] .centre-readout strong { color: #f7f7ff; font: 700 50px/1.05 var(--font-heading); }
body[data-game="arcshift"] .centre-readout small { color: #8d96b1; font-size: 11px; }

body[data-game="arcshift"] .game-overlay { position: absolute; z-index: 4; display: flex; align-items: center; flex-direction: column; width: min(88%, 420px); padding: 26px; border: 1px solid rgba(151, 137, 255, .32); border-radius: 18px; background: rgba(10, 13, 26, .93); box-shadow: 0 22px 60px rgba(0, 0, 0, .48); text-align: center; backdrop-filter: blur(12px); }
body[data-game="arcshift"] .game-overlay[hidden] { display: none; }
body[data-game="arcshift"] .overlay-kicker { margin: 0; color: #b3a9ff; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
body[data-game="arcshift"] .game-overlay h2 { margin: 7px 0 8px; color: white; font-size: 28px; }
body[data-game="arcshift"] .game-overlay > p:not(.overlay-kicker) { margin: 0; color: #aab2c9; line-height: 1.55; }
body[data-game="arcshift"] .game-overlay small { margin-top: 12px; color: #818aa5; }
body[data-game="arcshift"] .game-overlay kbd { padding: 2px 6px; border: 1px solid #3a415d; border-radius: 4px; background: #191e31; color: #d4d8e6; }

body[data-game="arcshift"] .start-button,
body[data-game="arcshift"] .primary-button,
body[data-game="arcshift"] .secondary-button { min-height: 46px; border-radius: var(--radius-md); font: 700 14px/1 var(--font-body); cursor: pointer; }
body[data-game="arcshift"] .start-button,
body[data-game="arcshift"] .primary-button { border: 1px solid var(--cobalt-500); background: var(--cobalt-500); color: white; box-shadow: var(--shadow-xs); }
body[data-game="arcshift"] .start-button { min-width: 170px; margin-top: 18px; }
body[data-game="arcshift"] .start-button:hover,
body[data-game="arcshift"] .primary-button:hover { background: var(--cobalt-600); }
body[data-game="arcshift"] .start-button span { margin-left: 18px; }
body[data-game="arcshift"] .secondary-button { border: 1px solid var(--slate-300); background: var(--slate-0); color: var(--slate-700); }
body[data-game="arcshift"] .secondary-button:hover { border-color: var(--cobalt-300); background: var(--cobalt-50); color: var(--cobalt-700); }

body[data-game="arcshift"] .tap-demo { position: relative; width: 104px; height: 34px; margin-top: 18px; border-top: 2px solid #3d4564; border-radius: 50%; }
body[data-game="arcshift"] .tap-demo span { position: absolute; top: -6px; left: 15px; width: 10px; height: 10px; border-radius: 50%; background: white; box-shadow: 0 0 12px white; animation: arc-demo 1.7s ease-in-out infinite; }
body[data-game="arcshift"] .tap-demo i { position: absolute; top: -5px; right: 12px; width: 28px; height: 8px; border-radius: 10px; background: #8170f3; box-shadow: 0 0 13px #7564ee; }
@keyframes arc-demo { 0% { left: 15px; } 50%, 100% { left: 72px; } }

body[data-game="arcshift"] .flash-message { position: absolute; z-index: 3; top: 22px; padding: 7px 13px; border-radius: 99px; background: #171c30; color: #b4aaff; font-size: 11px; font-weight: 800; opacity: 0; translate: 0 -8px; transition: opacity .18s, translate .18s; pointer-events: none; }
body[data-game="arcshift"] .flash-message.show { opacity: 1; translate: 0; }
body[data-game="arcshift"] .flash-message.miss { color: #ff8290; }
body[data-game="arcshift"] .game-footer { display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; padding: 16px 20px; border-top: 1px solid #252b42; }
body[data-game="arcshift"] .game-footer p { margin: 0; color: #8d96b1; font-size: 12px; text-align: center; }
body[data-game="arcshift"] .lives { display: flex; gap: 7px; }
body[data-game="arcshift"] .lives i { width: 8px; height: 8px; border-radius: 50%; background: #9a8cff; box-shadow: 0 0 8px rgba(143,125,255,.65); transition: background .2s; }
body[data-game="arcshift"] .lives i.lost { background: #3b425c; box-shadow: none; }
body[data-game="arcshift"] .how-button { padding: 6px 0; border: 0; background: transparent; color: #a8b0c7; font-size: 12px; cursor: pointer; }
body[data-game="arcshift"] .how-button:hover { color: white; }

body[data-game="arcshift"] .arc-about { display: grid; grid-template-columns: minmax(210px, .8fr) 1.4fr; gap: 28px; margin-top: 22px; padding: 28px; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); background: var(--slate-0); box-shadow: var(--shadow-xs); }
body[data-game="arcshift"] .arc-about h2 { margin: 4px 0 0; color: var(--slate-800); }
body[data-game="arcshift"] .arc-about > p { margin: 0; color: var(--slate-500); line-height: 1.7; }

body[data-game="arcshift"] dialog { position: relative; width: min(calc(100% - 30px), 520px); max-height: min(90vh, 760px); padding: 30px; overflow-y: auto; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); background: var(--slate-0); color: var(--slate-600); box-shadow: var(--shadow-lg); }
body[data-game="arcshift"] dialog::backdrop { background: rgba(20, 25, 40, .5); }
body[data-game="arcshift"] dialog h2 { margin: 4px 0 10px; color: var(--slate-800); }
body[data-game="arcshift"] dialog ol { margin: 18px 0 0; padding: 0; list-style: none; }
body[data-game="arcshift"] dialog li { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid var(--slate-200); }
body[data-game="arcshift"] dialog li > span { color: var(--cobalt-600); font: 700 11px var(--font-mono); }
body[data-game="arcshift"] dialog li strong { color: var(--slate-800); }
body[data-game="arcshift"] dialog li p { margin: 2px 0 0; color: var(--slate-500); font-size: 13px; }
body[data-game="arcshift"] .dialog-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--slate-500); font-size: 25px; cursor: pointer; }
body[data-game="arcshift"] .dialog-close:hover { background: var(--slate-100); color: var(--slate-800); }

body[data-game="arcshift"] .result-dialog > p { margin: 0; color: var(--slate-500); line-height: 1.55; }
body[data-game="arcshift"] .result-score { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 16px; }
body[data-game="arcshift"] .result-score strong { color: var(--cobalt-600); font: 700 58px/.9 var(--font-heading); letter-spacing: -.05em; }
body[data-game="arcshift"] .result-score span { color: var(--slate-500); font-weight: 700; }
body[data-game="arcshift"] .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--slate-200); border-radius: var(--radius-md); background: var(--slate-50); }
body[data-game="arcshift"] .result-grid div { padding: 14px; border-right: 1px solid var(--slate-200); }
body[data-game="arcshift"] .result-grid div:last-child { border: 0; }
body[data-game="arcshift"] .result-grid strong,
body[data-game="arcshift"] .result-grid span { display: block; }
body[data-game="arcshift"] .result-grid strong { color: var(--slate-800); font-size: 20px; }
body[data-game="arcshift"] .result-grid span { margin-top: 3px; color: var(--slate-500); font-size: 11px; line-height: 1.3; }
body[data-game="arcshift"] .result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }

@media (max-width: 600px) {
  body[data-game="arcshift"] .arc-page { width: min(calc(100% - 16px), 860px); padding-top: 22px; }
  body[data-game="arcshift"] .arc-heading { align-items: flex-start; }
  body[data-game="arcshift"] .arc-heading > div > p:last-child { font-size: 13px; }
  body[data-game="arcshift"] .playfield { min-height: 450px; aspect-ratio: auto; }
  body[data-game="arcshift"] .score-row div { padding: 12px 14px; }
  body[data-game="arcshift"] .game-footer { grid-template-columns: 68px 1fr 70px; padding: 14px 12px; }
  body[data-game="arcshift"] .game-overlay { padding: 23px 20px; }
  body[data-game="arcshift"] .arc-about { grid-template-columns: 1fr; gap: 10px; padding: 22px; }
  body[data-game="arcshift"] dialog { padding: 26px 20px; }
  body[data-game="arcshift"] .result-grid div { padding: 12px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-game="arcshift"] .tap-demo span { left: 72px; animation: none; }
  body[data-game="arcshift"] .flash-message { transition: none; }
}