.prism-page { --prism-red: #ff5f78; --prism-green: #68f0b0; --prism-blue: #6ba8ff; --prism-white: #edf8ff; }
.prism-page h1 { color: var(--prism-white); text-shadow: -10px 0 40px rgba(255,95,120,.2), 0 0 40px rgba(107,168,255,.18); }
.game-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.game-lead { max-width: 720px; margin: 20px 0 0; color: var(--muted); }
.legend { display: grid; gap: 8px; min-width: 170px; color: var(--muted); font: 700 .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.legend span { display: flex; gap: 10px; align-items: center; }
.legend i { width: 20px; height: 20px; display: inline-block; position: relative; border: 1px solid #41556d; background: #0b1320; }
.legend-prism { transform: rotate(45deg) scale(.75); background: linear-gradient(135deg, rgba(255,95,120,.45), rgba(104,240,176,.45), rgba(107,168,255,.45)) !important; }
.legend-mirror::after { content: ""; position: absolute; left: 2px; right: 2px; top: 9px; height: 1px; background: #dcefff; transform: rotate(-45deg); }
.legend-target { border-radius: 50%; box-shadow: inset 0 0 0 5px #152338; }
.prism-shell { margin-top: 36px; overflow: hidden; border: 1px solid #2b3d55; border-radius: 22px; background: #050911; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.prism-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-bottom: 1px solid #24354a; background: #162235; }
.prism-hud > div { padding: 12px 16px; background: #09111c; }
.prism-hud span { display: block; color: #74859d; font-size: .66rem; font-weight: 800; letter-spacing: .14em; }
.prism-hud strong { display: block; margin-top: 2px; font: 800 1rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.puzzle-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr); min-height: 560px; }
.canvas-wrap { min-width: 0; display: grid; place-items: center; padding: clamp(12px, 3vw, 30px); background: radial-gradient(circle at 50% 50%, #13213a 0, #08101d 48%, #03070e 100%); }
#prism-canvas { width: min(100%, 680px); height: auto; aspect-ratio: 1; display: block; touch-action: manipulation; cursor: crosshair; }
.puzzle-panel { padding: 30px 26px; border-left: 1px solid #24354a; background: #080f19; }
.panel-kicker { margin: 0; color: #a6bbd6; font: 800 .7rem/1.3 ui-monospace, monospace; letter-spacing: .14em; }
.puzzle-panel h2 { margin: 9px 0 10px; font-size: 1.65rem; }
.puzzle-panel > p:not(.panel-kicker):not(.puzzle-status) { color: var(--muted); }
.optic-controls { display: grid; gap: 8px; margin: 24px 0; }
.optic-controls button, .panel-actions button { width: 100%; border: 1px solid #31455e; border-radius: 11px; color: #eaf4ff; background: #101b2a; cursor: pointer; font: 700 .82rem/1.3 ui-sans-serif, system-ui, sans-serif; }
.optic-controls button { display: flex; justify-content: space-between; gap: 16px; padding: 12px 13px; text-align: left; }
.optic-controls button span { color: #8193a9; font: 700 .72rem/1.3 ui-monospace, monospace; }
.optic-controls button:hover, .panel-actions button:hover { border-color: #7597bd; background: #142237; }
.panel-actions { display: grid; gap: 8px; }
.panel-actions button { padding: 12px; }
#next-button { border-color: #4a7d68; background: #123126; color: #bfffe0; }
.puzzle-status { min-height: 3.2em; margin: 20px 0 0; color: #c9d6e8; font-size: .88rem; }
.back-link { margin: 26px 0 0; color: var(--muted); }
@media (max-width: 820px) {
  .game-heading { grid-template-columns: 1fr; }
  .puzzle-layout { grid-template-columns: 1fr; }
  .puzzle-panel { border-left: 0; border-top: 1px solid #24354a; }
}
@media (max-width: 560px) { .prism-hud { grid-template-columns: 1fr 1fr; } .prism-hud > div:last-child { grid-column: 1 / -1; } }