.laser-escape-page { background: #0b111c; color: #e2edf5; }
.laser-escape-shell { padding-top: 44px; }
.laser-escape-intro { padding: 0 0 30px; }
.laser-escape-intro .eyebrow { color: #65eee1; }
.laser-escape-intro h1 { font-size: clamp(52px, 10vw, 112px); line-height: .95; letter-spacing: -.07em; margin: 18px 0; color: #e9f9fa; }
.laser-escape-intro h1::after { content: '.'; color: #ff957c; }
.laser-escape-intro p { color: #96aebe; font-size: 18px; }
#laser-escape-game { color: #dceff4; background: radial-gradient(ellipse at 50% 55%, #18313b, #0b111c 75%) !important; padding-bottom: max(4px, env(safe-area-inset-bottom)) !important; }
.laser-escape-stage { display: grid; place-items: center; container-type: size; background-image: radial-gradient(#75c4cc15 1px, transparent 1px); background-size: 22px 22px; }
.laser-escape-board { width: min(98cqw, 98cqh, 650px); height: min(98cqw, 98cqh, 650px); display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); grid-template-rows: repeat(8,minmax(0,1fr)); position: relative; isolation: isolate; box-sizing: border-box; border: 1px solid #48787d; border-radius: 8px; background: #0e1b28; box-shadow: 0 0 0 4px #0a141b, 0 0 0 5px #284c58, 0 0 50px #35f0db0c; }
.laser-cell { display: grid; place-items: center; position: relative; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-right: 1px solid #31516340; border-bottom: 1px solid #31516340; border-radius: 0; background: transparent; color: #defffb; font-size: clamp(12px,3.3cqh,24px); box-sizing: border-box; }
.laser-mirror { appearance: none; cursor: pointer; touch-action: manipulation; z-index: 3; }
.laser-mirror::before { content: ''; position: absolute; inset: 10%; border: 1px solid #3f7d88; border-radius: 14%; background: linear-gradient(140deg,#244857d9,#152837d9); box-shadow: inset 0 0 8px #6de3ee0c; z-index: -1; }
.laser-mirror svg { width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.laser-mirror path { fill: none; stroke: #d7f4f6; stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 3px #7ef6ec); }
.laser-mirror:disabled { opacity: 1; cursor: default; }
.laser-mirror:focus-visible { outline: 3px solid #ffc39a; outline-offset: -3px; border-radius: 6px; }
@media (hover: hover) { .laser-mirror:not(:disabled):hover::before { background: #316478; border-color: #95fff3; } }
.laser-beam { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.laser-beam polyline { fill: none; stroke: #6dfff0; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px #42e8dd); }
.laser-wall::before { content: ''; position: absolute; inset: 10%; border: 1px solid #526273; border-radius: 12%; background: repeating-linear-gradient(135deg,#2b3b4c 0 4px,#1c2a39 4px 8px); }
.laser-receiver { z-index: 5; }
.laser-receiver span { display: grid; place-items: center; width: 62%; height: 62%; border: 2px dashed #f5b79b; border-radius: 50%; background: #2e2429; color: #ffd2b6; font-weight: 800; font-size: 70%; }
.laser-receiver[data-active="true"] span { border-style: solid; border-color: #9cfff0; background: #16574e; color: #fff; box-shadow: 0 0 14px #79ffee60; }
.laser-emitter { color: #c7fff3; text-shadow: 0 0 12px #66fce4; z-index: 5; transform: rotate(var(--direction)); }
.laser-exit { font-size: clamp(18px,4.8cqh,40px); color: #ffb59d; z-index: 5; border: 2px solid #c4846a; background: #45302d; border-radius: 15%; }
.laser-exit[data-open="true"] { background: #285c4d; border-color: #afffd2; color: #d2ffe7; box-shadow: 0 0 22px #80f8bb60; }
.laser-ready { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #0b162be8; backdrop-filter: blur(3px); border-radius: inherit; text-align: center; pointer-events: none; padding: 12px; }
.laser-ready > span:first-child { width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid #70f7e7; color: #70f7e7; border-radius: 18px; font-size: 48px; box-shadow: 0 0 35px #2fecd329; }
.laser-ready strong { font-size: clamp(18px,5cqh,38px); letter-spacing: -.04em; color: #e4fffd; }
.laser-ready > span:last-child { color: #e9b39b; font-size: clamp(10px,2.5cqh,16px); }
.laser-escape-hud strong { color: #a6fff0; }
#laser-escape-game #game-status { text-align: center; margin: 0; min-height: 20px; font-size: 12px; color: #e5bca0; }
#laser-escape-game .laser-escape-save { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px 12px; flex-wrap: wrap; order: 4; font-size: 12px; }
#laser-escape-game .laser-escape-save[hidden] { display: none; }
#laser-escape-game #save-status { display: block !important; margin: 0; font-size: 12px; }
#laser-escape-game #save-form { margin: 0; }
#laser-escape-game #save { min-height: 30px; padding: 5px 10px; font-size: 11px; }
.laser-escape-save a { color: #adfff2; }
.laser-escape-rankings { padding: 42px 0 60px; }
.laser-escape-rankings h2 { font-size: clamp(30px,5vw,54px); margin: 10px 0 24px; letter-spacing: -.04em; }
.laser-escape-rankings ol { list-style: none; padding: 0; }
.laser-escape-rankings li { display: flex; align-items: center; gap: 12px; border-top: 1px solid #34434b; padding: 14px 8px; }
.laser-escape-rankings li > span:not(.ranking-avatar):not(.ranking-badge) { overflow-wrap: anywhere; }
.laser-escape-rankings li strong { margin-left: auto; color: #adfff2; text-align: right; }
@media (max-height: 400px) and (orientation: landscape) {
  #laser-escape-game #game-status { min-height: 14px; line-height: 14px; font-size: 10px; }
  #laser-escape-game .laser-escape-save { font-size: 10px; gap: 4px; }
  #laser-escape-game #save-status { font-size: 10px; }
  .laser-ready { gap: 4px; }
  .laser-ready > span:first-child { width: 32px; height: 32px; font-size: 24px; border-radius: 8px; }
}
@media (prefers-reduced-motion: no-preference) { .laser-mirror::before { transition: background-color .12s, border-color .12s; } }