:root { color-scheme: dark; --gold: #e7b96d; --pale: #f1e8e0; --muted: #a7a0ae; --ink: #080916; }
* { box-sizing: border-box; }
html,body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--ink); font-family: "Courier New", Courier, monospace; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid #fff2ad; outline-offset: 5px; }
[hidden] { display: none !important; }
.game-frame { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; background: #0b0c1a; color: var(--pale); isolation: isolate; touch-action: manipulation; user-select: none; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 48% 47%, transparent 33%, rgba(2,3,8,.23) 74%, rgba(1,2,5,.78) 120%); }
.scanlines { position: absolute; inset: 0; pointer-events: none; opacity: .13; background: repeating-linear-gradient(180deg, transparent 0, transparent 3px, #05030b 4px, transparent 5px); }
.topbar { position: absolute; z-index: 10; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; top: 0; left: 0; right: 0; padding: clamp(13px,2.4vw,31px) clamp(15px,3vw,42px); }
.identity { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.identity-main { font-family: Arial, sans-serif; font-size: clamp(17px,1.8vw,25px); font-weight: 900; letter-spacing: .16em; color: var(--gold); text-shadow: 0 0 18px #a15f2f33; }
.identity-dot { color: #fff; }
.identity-sub { font-size: 10px; letter-spacing: .18em; color: #c8a991; }
.top-buttons { display: flex; gap: 7px; }
.icon-button { width: 39px; height: 39px; border: 1px solid #b4a0a144; color: #ebdad8; background: #0c0c1e94; display: grid; place-items: center; border-radius: 3px; transition: background .15s, border-color .15s; }
.icon-button:hover { background: #b5824c33; border-color: var(--gold); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }
.hud { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: clamp(8px,1.4vw,22px); padding-top: 2px; }
.stat { display: flex; flex-direction: column; gap: 4px; min-width: 56px; }
.stat-label { color: #b5aabb; letter-spacing: .15em; font-size: 9px; }
.stat-value { color: #f4eae2; font-size: clamp(15px,1.9vw,25px); letter-spacing: .07em; font-variant-numeric: tabular-nums; }
.stat-divider { width: 1px; height: 31px; background: #a99ca854; }
.lives-value { color: #e6a566; white-space: nowrap; letter-spacing: .02em; font-size: clamp(15px,1.9vw,24px); }
.screen { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 72px 18px 62px; background: linear-gradient(90deg, #080916bd 0%, #08091690 42%, #08091677 100%); }
.panel { position: relative; width: min(560px,100%); padding: clamp(21px,3.5vw,45px) clamp(23px,4vw,55px); border: 1px solid #bb8d5d68; background: linear-gradient(130deg, #141525ef, #0a0d1eea 75%); box-shadow: 0 0 0 5px #0b0c17aa, 0 24px 100px #000b; text-align: center; }
.panel::before, .panel::after { content: ""; position: absolute; width: 22px; height: 22px; border-color: #e2b275; border-style: solid; pointer-events: none; }
.panel::before { left: -2px; top: -2px; border-width: 3px 0 0 3px; }
.panel::after { right: -2px; bottom: -2px; border-width: 0 3px 3px 0; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 10px; line-height: 1.5; letter-spacing: .19em; color: var(--gold); }
.eyebrow-line { display: inline-block; width: 18px; height: 1px; background: var(--gold); opacity: .5; }
.game-number { margin-top: clamp(21px,3.5vw,33px); color: #aca3b4; font-size: 10px; letter-spacing: .19em; }
.game-number span:first-child { color: #fff; }
.tiny-cross { color: var(--gold); margin: 0 7px; }
h1 { font-family: Arial, Helvetica, sans-serif; font-weight: 950; font-size: clamp(57px,9vw,106px); letter-spacing: -.095em; line-height: .95; margin: 16px 0 7px; text-shadow: 6px 7px 0 #0007; }
h1 > span:first-child { color: var(--gold); }
h1 .title-period { color: #f4ece4; }
.tagline { font-size: clamp(11px,1.6vw,15px); font-weight: bold; letter-spacing: .23em; color: var(--gold); margin: 10px 0 26px; }
.description { max-width: 410px; margin: 0 auto 28px; line-height: 1.65; font-size: clamp(11px,1.17vw,13px); color: #c2bbc8; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 15px; width: min(350px,100%); min-height: 59px; margin: 0 auto; padding: 0 20px; background: var(--gold); color: #11111b; border: 1px solid #ffe4b7; font-size: clamp(12px,1.6vw,16px); font-weight: 900; letter-spacing: .1em; box-shadow: inset 0 -5px #a26c37, 0 0 25px #e9a75622; transition: transform .15s, filter .15s; }
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.09); }
.primary-button:active { transform: translateY(2px); }
.button-end { margin-left: auto; font-size: 22px; }
.instruction-line { margin: 27px auto 0; color: #e2d9e4; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; font-size: 10px; letter-spacing: .08em; }
.keycap { border: 1px solid #8c8293; min-width: 25px; height: 25px; padding: 5px 8px; color: #f4eded; background: #ffffff0b; display: inline-flex; align-items: center; justify-content: center; }
.rule { color: #bf9872; margin: 0 2px; }
.bottom-meta { margin: 29px -10px 0; color: #8f889b; font-size: 9px; letter-spacing: .12em; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.compact-panel { max-width: 500px; }
.screen-heading { font-family: Arial, Helvetica, sans-serif; font-weight: 950; font-size: clamp(51px,9vw,87px); letter-spacing: -.09em; line-height: 1; margin: 25px 0 28px; color: #f1e7e5; }
.screen-heading span { color: var(--gold); }
.hint { color: #9b929f; font-size: 10px; margin: 20px auto 0; letter-spacing: .12em; }
.results { display: flex; justify-content: center; align-items: center; gap: 27px; margin: 0 0 25px; }
.results div { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.results small { font-size: 9px; color: #a7a1b1; letter-spacing: .18em; }
.results strong { font-size: clamp(20px,3.8vw,32px); letter-spacing: .08em; color: #f0c78e; }
.results-line { width: 1px; height: 45px; background: #b2a2af60; }
.bottom-hud { position: absolute; z-index: 4; left: clamp(15px,3vw,42px); right: clamp(15px,3vw,42px); bottom: 21px; color: #c8abb0; display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .13em; text-shadow: 1px 2px #000; }
.little-diamond { color: var(--gold); }
.bottom-rule { color: var(--gold); padding: 0 8px; }
.copyright { position: absolute; z-index: 4; bottom: 20px; right: clamp(15px,3vw,42px); color: #afa2b2; font-size: 9px; letter-spacing: .12em; }
.copyright span { color: #796d80; }
.game-frame:has(.bottom-hud:not([hidden])) .copyright { display: none; }
.jump-button { position: absolute; z-index: 7; right: 24px; bottom: 60px; width: 88px; height: 88px; border-radius: 50%; border: 2px solid #e8bd82; background: #ba854bc9; color: #160e1b; font-family: Arial,sans-serif; font-size: 41px; font-weight: bold; box-shadow: 0 0 0 7px #e8bd8229; line-height: 1; touch-action: manipulation; }
.jump-button small { display: block; font-size: 10px; letter-spacing: .15em; }
.jump-button:active { transform: scale(.94); background: #f1d09b; }
.danger { position: absolute; z-index: 6; left: 50%; top: clamp(73px,10vh,105px); transform: translateX(-50%); color: #ffb77b; border: 1px solid #d27355; background: #170d20d9; font-size: 10px; letter-spacing: .12em; padding: 11px 15px; white-space: nowrap; }
.level-notice { position: absolute; z-index: 6; top: 28%; width: 100%; text-align: center; color: #ffe2ad; font-size: clamp(13px,2.8vw,28px); font-weight: bold; letter-spacing: .12em; text-shadow: 3px 3px #000; }
@media (hover:none), (pointer:coarse) { .jump-button:not([hidden]) { display: block; } .desktop-hint { display: none; } }
@media (hover:hover) and (pointer:fine) { .jump-button { display: none !important; } }
@media (max-width: 720px) { .topbar { gap: 7px; flex-wrap: wrap; } .identity { gap: 5px; flex-direction: column; } .identity-sub { font-size: 8px; } .hud { position: absolute; left: 50%; top: 61px; transform: translateX(-50%); background: #0b0b1e66; padding: 5px 7px; gap: 8px; } .stat-label { font-size: 8px; } .stat-value { font-size: 17px; } .lives-value { font-size: 17px; } .stat-divider { height: 24px; } .top-buttons { margin-left: auto; } .icon-button { width: 34px; height: 34px; } .bottom-hud { font-size: 9px; bottom: 16px; } .bottom-hud > div:first-child { max-width: 58%; line-height: 1.6; } .copyright { bottom: 12px; } }
@media (max-width: 420px) { .screen { padding: 130px 15px 45px; } .panel { padding: 28px 17px; } h1 { font-size: clamp(52px,16vw,78px); } .tagline { font-size: 11px; margin-bottom: 17px; } .description { font-size: 11px; margin-bottom: 18px; } .instruction-line { margin-top: 19px; } .bottom-meta { gap: 6px; font-size: 8px; margin-top: 21px; } .game-number { margin-top: 20px; } .screen-heading { font-size: 56px; } }
@media (prefers-reduced-motion: reduce) { button { transition: none !important; } }

/* City Run / street photography additions */
.photo-value { color: #f1bf74; }
.photo-cue { position: absolute; z-index: 6; left: 51%; top: clamp(115px,26%,225px); transform: translateX(-50%); padding: 8px 12px; white-space: nowrap; border: 1px solid #e7b96da6; color: #f5d59b; background: #0b0c1ddd; font-size: 10px; letter-spacing: .08em; text-align: center; pointer-events: none; text-shadow: 1px 2px 0 #000; }
.photo-cue b { display: block; margin-top: 5px; color: #fff5e4; letter-spacing: .12em; font-size: 9px; }
.shot-notice { position: absolute; z-index: 7; left: 50%; top: 35%; transform: translateX(-50%); color: #ffe3ac; font-size: clamp(12px,2vw,19px); font-weight: bold; letter-spacing: .1em; text-shadow: 2px 2px 0 #000; white-space: nowrap; pointer-events: none; }
.camera-flash { position: absolute; z-index: 9; inset: 0; background: #fff9df; opacity: 0; pointer-events: none; }
.photo-button { position: absolute; z-index: 7; left: clamp(20px,3vw,42px); bottom: 57px; height: 70px; width: 76px; border: 2px solid #e4bb80; border-radius: 7px; background: #161626d9; color: #ffe2ab; box-shadow: 0 0 0 5px #e8bd8215; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 3px; touch-action: manipulation; }
.photo-button:hover { background: #43304a; border-color: #fff0d1; }
.photo-button:active { transform: scale(.94); background: #e9c38a; color: #11101b; }
.camera-symbol { display: block; font-family: monospace; font-size: 29px; line-height: 1; }
.photo-button small { font-size: 10px; font-weight: bold; letter-spacing: .12em; }
@media (max-width: 720px) { .photo-stat .stat-value { font-size: 16px; } .hud { gap: 6px; } .stat { min-width: 42px; } .photo-button { bottom: 66px; width: 75px; height: 75px; } .photo-cue { top: 34%; } }
@media (max-width: 420px) { .stat { min-width: 38px; } .hud { gap: 5px; } .stat-label { font-size: 7px; } .photo-button { bottom: 60px; width: 69px; height: 69px; } .jump-button { width: 78px; height: 78px; } .results { gap: 12px; } .results strong { font-size: 20px; } .results-line { height: 35px; } }
@media (max-height: 510px) { .photo-button { bottom: 29px; width: 56px; height: 55px; } .camera-symbol { font-size: 20px; } .photo-button small { font-size: 8px; } .jump-button { bottom: 30px; width: 63px; height: 63px; font-size: 26px; } .photo-cue { top: 43%; } }

/* Wedding bonuses get a warm, celebratory gold-pink treatment. */
.shot-notice.wedding-notice { color: #fff5c9; text-shadow: 1px 2px 0 #6e3955, 0 0 13px #ed9bbf88; }
@media (max-width: 420px) { .shot-notice { font-size: 12px; max-width: 95%; white-space: normal; text-align: center; } }

/* Game 03 · KAREN surprise / visible for precisely ten seconds of active play. */
.karen-alarm { position: absolute; z-index: 6; inset: 0; pointer-events: none; overflow: hidden; border: clamp(7px,1.5vw,19px) solid #fe4338; background: radial-gradient(ellipse at center, #5a030b35 0%, #5f090966 85%), #d518181a; box-shadow: inset 0 0 0 3px #fff1c260, inset 0 0 85px 13px #e900005a, 0 0 65px #f92227a0; animation: karen-border .55s steps(2,end) infinite; }
.karen-strobe { position: absolute; inset: 0; background: linear-gradient(110deg, #d30c1233, transparent 35%, #e8323640 75%, transparent); animation: karen-pulse .55s steps(2,end) infinite; }
.karen-alarm-copy { position: absolute; top: clamp(110px,19%,220px); left: 0; right: 0; text-align: center; text-shadow: 3px 4px 0 #3c0409, 0 0 14px #2c0304; }
.alarm-kicker { color: #ffe6b9; letter-spacing: .18em; font-size: clamp(9px,1.2vw,15px); font-weight: 900; }
.alarm-title { font: 1000 clamp(50px,12vw,154px)/.96 Arial,Helvetica,sans-serif; color: #fff1df; letter-spacing: -.06em; transform: skewX(-5deg); }
.alarm-title span { color: #ffcb67; }
.alarm-explainer { color: #ffd6b7; letter-spacing: .16em; font-size: clamp(10px,1.5vw,17px); font-weight: bold; margin-top: 5px; }
.alarm-timer { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 8px; color: #ffe6be; font-weight: bold; }
.alarm-timer > span { font: 900 clamp(28px,5.2vw,60px)/1 Arial, sans-serif; font-variant-numeric: tabular-nums; }
.alarm-timer small { font-size: clamp(8px,1vw,12px); letter-spacing: .18em; }
.alarm-bottom { position: absolute; bottom: clamp(16px,5%,54px); left: 0; right: 0; text-align: center; color: #fff2d7; font-size: clamp(9px,1.5vw,15px); font-weight: 900; letter-spacing: .2em; }
@keyframes karen-border { 0%,100% { border-color: #ff413c; } 50% { border-color: #fcbf51; } }
@keyframes karen-pulse { 0%,100% { opacity: .7; } 50% { opacity: .1; } }
/* After the first moment the alarm keeps a 10-second red screen treatment but
   moves the huge title upward, preserving visibility of obstacles and subjects. */
.karen-alarm:not(.intro) { background: linear-gradient(180deg, #7b00003c, transparent 65%), #e20e0e12; }
.karen-alarm:not(.intro) .karen-alarm-copy { top: clamp(100px,15%,165px); }
.karen-alarm:not(.intro) .alarm-title { font-size: clamp(39px,7vw,92px); }
.karen-alarm:not(.intro) .alarm-kicker { font-size: 9px; }
.karen-alarm:not(.intro) .alarm-timer { margin-top: 2px; }
.karen-alarm:not(.intro) .alarm-timer > span { font-size: clamp(21px,3vw,38px); }
.karen-alarm:not(.intro) .alarm-bottom { bottom: 13px; font-size: 9px; }
@media(max-width:720px) { .karen-alarm-copy { top: 24% !important; } .karen-alarm:not(.intro) .karen-alarm-copy { top: 22% !important; } .alarm-bottom { bottom: 17px; } .alarm-explainer { letter-spacing: .07em; } }
@media(max-height:500px) { .karen-alarm-copy, .karen-alarm:not(.intro) .karen-alarm-copy { top: 17% !important; } .alarm-kicker { display:none; } .alarm-title { font-size: clamp(37px,8vw,72px); } .alarm-bottom { display:none; } }
@media(prefers-reduced-motion:reduce) { .karen-alarm,.karen-strobe { animation: none; } }

/* KAREN surprise: make instructions visible during faster pursuit */
.karen-alarm:not(.intro) .karen-alarm-copy { top: clamp(78px,11%,125px); }
.karen-alarm:not(.intro) .alarm-title { font-size: clamp(35px,5vw,64px); }
.karen-alarm:not(.intro) .alarm-kicker { font-size: 10px; }
.karen-alarm:not(.intro) .alarm-explainer { font-size: 10px; }
.karen-alarm:not(.intro) .alarm-timer { margin-top: 2px; }
.karen-alarm:not(.intro) .alarm-timer > span { font-size: clamp(20px,3vw,36px); }
.karen-alarm:not(.intro) .alarm-timer small { font-size: 8px; }
.photo-cue { z-index: 8; }
@media (max-width: 720px) {
 .karen-alarm:not(.intro) .karen-alarm-copy { top: clamp(91px,15%,135px); }
 .karen-alarm:not(.intro) .alarm-title { font-size: 37px; }
 .karen-alarm:not(.intro) .alarm-explainer { font-size: 8px; }
}

/* Keep the model frame and KAREN timer readable while the city races faster. */
.karen-alarm.intro .karen-alarm-copy { top: clamp(105px,18%,175px); }
.karen-alarm:not(.intro) .karen-alarm-copy { top: clamp(75px,10%,120px); }
.karen-alarm:not(.intro) .alarm-title { font-size: clamp(33px,4.6vw,61px); }
.karen-alarm:not(.intro) .alarm-explainer { font-size: clamp(8px,1.1vw,12px); }
@media (max-width:720px) { .karen-alarm:not(.intro) .karen-alarm-copy { top: clamp(85px,16%,130px) !important; } }

/* STAGE SYSTEM — pixel-art banner and progress HUD */
.stage-hud { position:absolute; top:clamp(79px,9vh,112px); right:clamp(15px,3vw,42px); z-index:5; display:flex; align-items:center; gap:12px; font-size:11px; font-weight:bold; letter-spacing:.12em; background:#090d20b3; color:#f5ead7; border:1px solid #d7a86b85; padding:8px 12px; box-shadow:0 4px 0 #08081070; }
.stage-hud #stageCount { color:#e7b96d; }
.stage-hud #stageScene { max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stage-hud #stageClock { padding-left:10px; border-left:1px solid #cca67870; color:#ffe4a4; font-size:16px; font-variant-numeric:tabular-nums; }
.stage-banner { position:absolute; z-index:8; inset:0; display:flex; justify-content:center; align-items:center; pointer-events:none; background:linear-gradient(90deg,#050614e6,#101226db,#050614e6); border-top:4px solid #d6a46a; border-bottom:4px solid #d6a46a; }
.stage-banner-inner { text-align:center; max-width:92vw; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; }
.stage-banner small { display:block; padding:7px 13px; letter-spacing:.35em; color:#edc997; font-weight:900; background:#d49b4022; border:1px solid #cdaa7655; }
.stage-banner strong { display:block; font:bold clamp(34px,6.4vw,90px)/.94 Arial,Helvetica,sans-serif; color:#fff1dd; letter-spacing:.03em; text-shadow:4px 5px 0 #512c30,0 0 30px #c77e4066; }
.stage-banner span { display:block; font-size:clamp(9px,1.4vw,14px); color:#e2b47b; letter-spacing:.12em; font-weight:bold; }
@media(max-width:720px){ .stage-hud { top:104px; left:50%; right:auto; transform:translateX(-50%); padding:5px 8px; gap:7px; font-size:9px; max-width:calc(100vw - 15px); } .stage-hud #stageScene { max-width:115px; } .stage-hud #stageClock { font-size:13px; padding-left:6px; } }
@media(max-height:540px){ .stage-hud { top:54px; } }

/* Photo Run V1: persistent exit and in-frame game-over close button. */
a.close-game-button, a.game-over-close { text-decoration: none; color: #f5dfbb; -webkit-tap-highlight-color: transparent; }
a.close-game-button:focus-visible, a.game-over-close:focus-visible { outline: 2px solid #fff1b0; outline-offset: 3px; }
.close-game-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; min-width: 118px; height: 39px; padding: 0 10px; flex: 0 0 auto; background: #171322df; border: 1px solid #c99b6e; color: #f1c38a; font-size: 10px; font-weight: 900; letter-spacing: .08em; border-radius: 3px; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.close-game-button:hover { border-color: #fff1c9; background: #66313a; color: #fff3da; }
.close-game-mark { font: 400 23px/1 Arial, sans-serif; }
.game-over-close { position: absolute; z-index: 4; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; font: 400 31px/1 Arial, sans-serif; background: #241b2b; border: 1px solid #b88f69; color: #f1c78e; border-radius: 2px; }
.game-over-close:hover { background: #71353d; border-color: #ffe2ab; color: #fff3de; }
#startTitle { font-size: clamp(52px, 8.1vw, 91px); }
@media (max-width: 720px) {
  .close-game-button { min-width: 36px; height: 34px; width: 36px; padding: 0; }
  .close-game-copy { display: none; }
  .close-game-mark { font-size: 22px; }
  .game-over-close { top: 8px; right: 8px; }
}
@media (max-width: 420px) {
  #startTitle { font-size: clamp(48px, 13.4vw, 66px); }
}