.page-greg-level { min-height: 100vh; background: #050914; color: #eef7ff; }
.greg-level-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem) 1rem; background: radial-gradient(circle at 60% 8%, rgba(41, 77, 135, .3), transparent 40%); }
.greg-level-shell { width: min(1240px, 100%); margin: 0 auto; }
.greg-level-topbar { display: flex; justify-content: space-between; gap: 1rem; color: #7de3ff; font: 700 .72rem ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.greg-level-topbar a { color: #a8dfff; text-decoration: none; }
.greg-level-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2rem 0 1.2rem; }
.greg-level-kicker { margin: 0 0 .55rem; color: #7de3ff; font: 700 .7rem ui-monospace, monospace; letter-spacing: .15em; }
.greg-level-heading h1 { margin: 0; color: #fff; font-size: clamp(2rem, 5vw, 4.5rem); letter-spacing: -.06em; line-height: .95; }
.greg-level-heading p:not(.greg-level-kicker) { margin: .8rem 0 0; color: #b8c9df; }
.greg-level-hud { display: flex; flex-wrap: wrap; justify-content: end; gap: .8rem 1.2rem; color: #b9cee3; font: 700 .75rem ui-monospace, monospace; }
.greg-level-hud strong { color: #ffe66d; }
.greg-level-frame { position: relative; overflow: hidden; border: 1px solid rgba(145, 215, 255, .35); border-radius: 16px; background: #071124; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.greg-level-actions { display: flex; justify-content: center; margin: .75rem 0; }
.greg-level-actions button { padding: .65rem 1rem; border: 1px solid #6c91af; border-radius: 6px; color: #effaff; background: #15253a; font: 800 .76rem ui-monospace, monospace; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#greg-level-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.greg-level-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem; overflow: hidden; color: #e7f8ff; text-align: center; background: #02050b; isolation: isolate; }
.greg-level-start-overlay { display: flex; flex-direction: column; justify-content: safe center; align-items: center; overflow-y: auto; box-sizing: border-box; padding: 1rem; }
.greg-level-overlay .greg-level-loading-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }
.greg-level-overlay::before { position: absolute; inset: 0; z-index: 1; content: ''; background: linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .45)); pointer-events: none; }
.greg-level-start-overlay > :not(.greg-level-loading-art) { position: relative; z-index: 2; }
.greg-level-overlay > :not(.greg-level-loading-art) { position: relative; z-index: 2; }
.greg-level-overlay.is-countdown { background: #02050b; }
.greg-level-overlay.is-countdown > strong:not(.greg-level-countdown), .greg-level-overlay.is-countdown > span { display: none; }
.greg-level-countdown { color: #69f58b; font: 950 clamp(7.5rem, 26vw, 17rem)/.8 ui-monospace, monospace; letter-spacing: -.08em; -webkit-text-stroke: clamp(4px, .75vw, 11px) #020503; paint-order: stroke fill; text-shadow: 0 0 5px #000, 0 0 15px #000, 0 0 30px rgba(0, 0, 0, .96), 0 0 42px rgba(70, 245, 118, .72); }
.greg-level-start-overlay #level-start { width: min(82%, 24rem); min-height: 4.25rem; margin-top: auto; padding: .8rem 1.5rem; border: 2px solid #031006; border-radius: 12px; color: #061108; background: linear-gradient(180deg, #aaffbb, #54df78); box-shadow: 0 0 0 3px rgba(0, 0, 0, .88), 0 0 26px rgba(70, 245, 118, .7), 0 8px 24px rgba(0, 0, 0, .35); font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: .12em; text-transform: uppercase; }
.greg-level-start-overlay #level-start:hover, .greg-level-start-overlay #level-start:focus-visible { background: #d6ffe0; box-shadow: 0 0 0 3px rgba(0, 0, 0, .88), 0 0 34px rgba(70, 245, 118, .9), 0 8px 24px rgba(0, 0, 0, .35); transform: translateY(-2px); }
.greg-level-complete-art { display: block; width: min(78vw, 720px); max-height: min(46vh, 330px); object-fit: cover; border: 1px solid rgba(125, 227, 255, .55); border-radius: 10px; box-shadow: 0 12px 38px rgba(0, 0, 0, .45); }
.greg-level-final-art { display: block; width: min(82vw, 780px); max-height: min(54vh, 390px); object-fit: contain; border: 1px solid rgba(255, 230, 109, .62); border-radius: 10px; box-shadow: 0 14px 44px rgba(0, 0, 0, .52), 0 0 34px rgba(255, 230, 109, .18); }
.greg-level-loading-art { display: block; width: min(76vw, 690px); max-height: min(50vh, 350px); object-fit: contain; border: 1px solid rgba(125, 227, 255, .5); border-radius: 10px; box-shadow: 0 12px 38px rgba(0, 0, 0, .48); }
.greg-level-overlay strong { color: #69f58b; font: 900 clamp(1.35rem, 4.5vw, 2.7rem) ui-monospace, monospace; -webkit-text-stroke: 2px #020503; paint-order: stroke fill; text-shadow: 0 0 4px #000, 0 0 14px rgba(0, 0, 0, .98), 0 0 22px rgba(70, 245, 118, .55); }
.greg-level-overlay span { color: #aaffbb; font-weight: 800; -webkit-text-stroke: 1px #020503; paint-order: stroke fill; text-shadow: 0 0 4px #000, 0 0 13px rgba(0, 0, 0, .98); }
.greg-level-overlay .greg-level-touch-instructions { display: none; }
.greg-level-overlay .greg-touch-instructions { display: none; }
.greg-level-overlay button { padding: .7rem 1rem; border: 2px solid #031006; border-radius: 6px; color: #061108; background: #69f58b; box-shadow: 0 0 0 2px rgba(0, 0, 0, .88), 0 0 22px rgba(70, 245, 118, .55); font: 900 .8rem ui-monospace, monospace; cursor: pointer; }
.greg-level-controls-copy { max-width: 70rem; margin: .65rem auto 0; padding: 0 1rem; color: #8ea5c1; font: 700 .8rem/1.5 ui-monospace, monospace; text-align: center; }
.greg-special-items { max-width: 70rem; margin: .8rem auto 0; padding: .7rem .8rem .8rem; border: 1px solid rgba(145, 215, 255, .2); border-radius: 9px; background: rgba(7, 17, 36, .52); }
.greg-special-items h3, .greg-special-items h2 { margin: 0 0 .55rem; color: #7de3ff; font: 900 .72rem ui-monospace, monospace; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.greg-special-items-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.greg-special-item { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .35rem .4rem; border: 1px solid rgba(125, 227, 255, .13); border-radius: 6px; color: #dceeff; background: rgba(5, 9, 27, .42); font: 700 .68rem/1.2 ui-monospace, monospace; }
.greg-special-item > span:last-child { min-width: 0; }
.greg-special-item strong, .greg-special-item small { display: block; }
.greg-special-item strong { color: #ffe66d; font-size: .68rem; }
.greg-special-item small { margin-top: .15rem; color: #a9bed5; font-size: .59rem; }
.greg-special-icon { flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 5px; background-repeat: no-repeat; background-size: 300% 200%; background-position: center; box-shadow: 0 0 9px rgba(125, 227, 255, .2); }
.greg-special-icon--star { background: url('../Greg/greg icons and obstacles/Collectables/1.png') center / contain no-repeat; }
.greg-special-icon--life { background: url('../Greg/greg icons and obstacles/Collectables/Greg life.png') center / contain no-repeat; }
.greg-special-icon--element { background-image: url('../Greg/greg icons and obstacles/special items.png'); background-position: 0 0; }
.greg-special-icon--saucer { background-image: url('../Greg/greg icons and obstacles/special items.png'); background-position: 50% 0; }
.greg-special-icon--shield { background-image: url('../Greg/greg icons and obstacles/special items.png'); background-position: 0 100%; }
.greg-special-icon--gravity { background-image: url('../Greg/greg icons and obstacles/special items.png'); background-position: 100% 0; }
.greg-special-icon--rune { background-image: url('../Greg/greg icons and obstacles/special items.png'); background-position: 50% 100%; }
.greg-level-overlay a { padding: .7rem 1rem; border: 1px solid #6c91af; border-radius: 6px; color: #081126; background: #ffe66d; font: 800 .8rem ui-monospace, monospace; text-decoration: none; }
.greg-level-overlay.is-hidden { display: none; }
.greg-level-mobile-instructions { position: absolute; inset: 0; z-index: 12; display: grid; place-content: center; justify-items: center; gap: .75rem; padding: 2rem; color: #e7f8ff; background: rgba(2, 5, 11, .78); text-align: center; cursor: pointer; }
.greg-level-mobile-instructions[hidden] { display: none !important; }
.greg-level-mobile-instructions strong { color: #ffe66d; font: 900 clamp(1.4rem, 5vw, 2.6rem) ui-monospace, monospace; }
.greg-level-mobile-instructions span { max-width: 34rem; color: #dceeff; font-weight: 800; }
.greg-level-mobile-instructions small { margin-top: .6rem; color: #aaffbb; font: 800 .8rem ui-monospace, monospace; }
.greg-level-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.2rem; margin: .8rem 0; color: #8ea5c1; font-size: .8rem; }
.greg-level-touch { display: none; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.greg-level-touch button { min-width: 3.8rem; padding: .6rem .7rem; border: 1px solid #587796; border-radius: 6px; color: #effaff; background: #15253a; font: 800 .72rem ui-monospace, monospace; touch-action: none; user-select: none; }
.greg-level-touch button:active { background: #274667; }
.greg-level-fire:disabled { opacity: .45; filter: grayscale(1); }
.greg-level-fullscreen-fire { display: none; position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 4.5rem); z-index: 100; width: 3.875rem; min-width: 3.875rem; height: 3.875rem; padding: 0; border: 2px solid #fff4b0; border-radius: 50%; color: #081126; background: #ffe66d; box-shadow: 0 0 24px rgba(255, 230, 109, .7); font: 900 1.3rem ui-monospace, monospace; }
.greg-level-controls kbd { display: inline-block; margin-right: .25rem; padding: .18rem .4rem; border: 1px solid #587796; border-radius: 4px; color: #effaff; background: #15253a; font: 700 .75rem ui-monospace, monospace; }
.greg-level-log { min-height: 1.5em; margin: .8rem auto 0; color: #b7cde5; font: .9rem/1.5 ui-monospace, monospace; text-align: center; }
.greg-level-menu-return { display: block; width: fit-content; margin: 1.1rem auto 0; padding: .7rem 1rem; border: 1px solid #6c91af; border-radius: 7px; color: #081126; background: #ffe66d; font: 800 .8rem ui-monospace, monospace; text-decoration: none; text-align: center; }
.greg-level-menu-return:hover, .greg-level-menu-return:focus-visible { background: #fff0a3; }
.greg-level-fullscreen-hud { display: none; }
.greg-level-pause { display: block; position: absolute; z-index: 10; top: .75rem; right: .75rem; left: auto; width: 2.35rem; height: 2.35rem; padding: 0; border: 2px solid #7de3ff; border-radius: 7px; color: #effaff; background: #102a45; box-shadow: 0 0 0 2px rgba(5,9,27,.85), 0 0 20px rgba(125,227,255,.55); font: 900 .95rem ui-monospace, monospace; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.greg-level-pause:hover, .greg-level-pause:focus-visible { color: #081126; background: #ffe66d; outline: 2px solid #ffe66d; outline-offset: 2px; }
.greg-level-pause:active, .greg-level-pause[aria-pressed="true"] { color: #081126; background: #ffe66d; }
.greg-game-music-toggle { position: absolute; z-index: 10; top: .75rem; right: 3.7rem; box-sizing: border-box; width: 2.35rem; min-width: 2.35rem; height: 2.35rem; padding: 0; border: 2px solid #7de3ff; border-radius: 7px; color: #effaff; background: #102a45; box-shadow: 0 0 0 2px rgba(5,9,27,.85), 0 0 20px rgba(125,227,255,.55); font: 900 .78rem ui-monospace, monospace; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.greg-game-music-toggle:hover, .greg-game-music-toggle:focus-visible { color: #081126; background: #ffe66d; outline: 2px solid #ffe66d; outline-offset: 2px; }
.greg-game-music-toggle[aria-pressed="false"] { border-color: #8ea5c1; color: #b8c9df; background: #071124; box-shadow: 0 0 0 2px rgba(5,9,27,.85); }
.greg-level-frame:fullscreen .greg-game-music-toggle, .greg-level-frame:-webkit-full-screen .greg-game-music-toggle, body.greg-level-pseudo-fullscreen .greg-game-music-toggle { position: fixed; z-index: 100; top: max(.7rem, env(safe-area-inset-top)); right: calc(max(.7rem, env(safe-area-inset-right)) + 6rem); }
.greg-level-escape { display: none; position: absolute; z-index: 100; top: max(.7rem, env(safe-area-inset-top)); left: 50%; width: 2.35rem; height: 2.35rem; padding: 0; transform: translateX(-50%); border: 2px solid #7de3ff; border-radius: 7px; color: #effaff; background: #102a45; box-shadow: 0 0 0 2px rgba(5,9,27,.85), 0 0 20px rgba(125,227,255,.55); font: 900 .65rem ui-monospace, monospace; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.greg-level-escape:hover, .greg-level-escape:focus-visible { color: #081126; background: #ffe66d; outline: 2px solid #ffe66d; outline-offset: 2px; }
.greg-level-escape:active { color: #081126; background: #ffe66d; }
.greg-level-frame:fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; min-width: 100vw; min-height: 100dvh; border: 0; border-radius: 0; }
.greg-level-frame:fullscreen #greg-level-canvas { width: 100%; height: 100%; object-fit: fill; }
.greg-level-pseudo-fullscreen { overflow: hidden; }
.greg-level-pseudo-fullscreen .greg-level-frame { position: fixed; inset: 0; z-index: 999; width: 100vw; height: 100vh; min-width: 100vw; min-height: 100dvh; border: 0; border-radius: 0; }
.greg-level-pseudo-fullscreen .greg-level-frame #greg-level-canvas { width: 100%; height: 100%; object-fit: fill; }
.greg-level-pseudo-fullscreen .greg-level-fullscreen-hud { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); z-index: 5; display: flex; gap: 1rem; padding: .5rem .75rem; border: 1px solid rgba(145, 215, 255, .35); border-radius: 7px; color: #dceeff; background: rgba(3, 9, 24, .75); font: 800 .78rem ui-monospace, monospace; }
.greg-level-pseudo-fullscreen .greg-level-touch--mobile { display: none; }
.greg-level-frame:fullscreen .greg-level-fullscreen-hud { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); z-index: 5; display: flex; gap: 1rem; padding: .5rem .75rem; border: 1px solid rgba(145, 215, 255, .35); border-radius: 7px; color: #dceeff; background: rgba(3, 9, 24, .75); font: 800 .78rem ui-monospace, monospace; }
.greg-level-frame:fullscreen .greg-level-pause, .greg-level-frame:-webkit-full-screen .greg-level-pause, .greg-level-pseudo-fullscreen .greg-level-pause { position: fixed; z-index: 100; top: max(.7rem, env(safe-area-inset-top)); right: calc(max(.7rem, env(safe-area-inset-right)) + 3rem); left: auto; }
.greg-level-frame:fullscreen .greg-level-escape, .greg-level-frame:-webkit-full-screen .greg-level-escape, .greg-level-pseudo-fullscreen .greg-level-escape { display: block; position: fixed; top: max(.7rem, env(safe-area-inset-top)); right: max(.7rem, env(safe-area-inset-right)); left: auto; transform: none; }
.greg-level-fullscreen-hud strong { color: #ffe66d; }
@media (max-width: 700px), (pointer: coarse) {
  .greg-level-heading { display: block; }
  .greg-level-hud { justify-content: start; margin-top: 1rem; }
  .greg-level-complete-art { width: min(88vw, 560px); max-height: 34vh; }
  .greg-level-final-art { width: min(92vw, 620px); max-height: 38vh; }
  .greg-level-start-overlay .greg-level-loading-art { width: 100%; max-height: none; }
  .greg-level-controls { gap: .5rem; font-size: .7rem; }
  .greg-level-touch--mobile { display: grid; position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 2.35rem; gap: .25rem; width: min(100%, 34rem); margin: .8rem auto 0; pointer-events: auto; }
  .greg-level-touch--fullscreen { position: absolute; z-index: 4; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(2.1rem, 2.8rem); gap: .3rem; max-width: 34rem; margin: 0 auto; pointer-events: none; }
  .greg-level-touch button { min-width: 0; min-height: 2.1rem; padding: .2rem .3rem; border-radius: 7px; background: rgba(21, 37, 58, .88); font-size: clamp(.72rem, 2.5vw, .9rem); pointer-events: auto; }
  .greg-level-touch--fullscreen button { pointer-events: auto; }
  .greg-level-touch [data-level-key="left"] { grid-column: 1; grid-row: 1; }
  .greg-level-touch [data-level-key="right"] { grid-column: 2; grid-row: 1; }
  .greg-level-touch [data-level-key="crouch"] { grid-column: 3; grid-row: 1; }
  .greg-level-touch [data-level-jump] { grid-column: 4; grid-row: 1; }
  .greg-level-touch .greg-level-fire { grid-column: auto; grid-row: auto; }
  .greg-level-frame:fullscreen .greg-level-touch--fullscreen { display: grid; }
  .greg-level-pseudo-fullscreen .greg-level-touch--fullscreen { display: grid; }
  .greg-level-frame:fullscreen + .greg-level-touch--mobile { display: none; }
}
@media (max-width: 1024px), (pointer: coarse) {
  .greg-level-touch--fullscreen { max-width: none; grid-template-columns: repeat(4, minmax(2.5rem, 3rem)); justify-content: center; column-gap: clamp(2.5rem, 8vw, 3rem); }
  .greg-level-fire { width: 3.1rem !important; min-width: 3.1rem !important; height: 3.1rem; align-self: center; border-radius: 50% !important; color: #081126 !important; background: #ffe66d !important; box-shadow: 0 0 18px rgba(255, 230, 109, .45); font-size: 1.1rem !important; }
}
@media (orientation: landscape) and (max-width: 1024px), (orientation: landscape) and (pointer: coarse) {
  .greg-level-touch button { width: 100%; justify-self: center; }
  .greg-level-touch--fullscreen { right: max(14px, env(safe-area-inset-right)); left: max(14px, env(safe-area-inset-left)); grid-template-columns: repeat(4, minmax(2.5rem, 3rem)); justify-content: center; column-gap: clamp(2.5rem, 8vw, 3rem); }
  .greg-level-touch--fullscreen { grid-template-columns: repeat(4, minmax(3.125rem, 3.75rem)); grid-template-rows: minmax(2.625rem, 3.5rem); }
  .greg-level-touch--fullscreen button { min-height: 2.625rem; font-size: clamp(.9rem, 3.125vw, 1.125rem); }
  .greg-level-touch--fullscreen [data-level-key="left"], .greg-level-touch--fullscreen [data-level-key="right"] { transform: translateX(clamp(-14rem, -20vw, -5rem)); }
  .greg-level-touch--fullscreen [data-level-key="crouch"], .greg-level-touch--fullscreen [data-level-jump] { transform: translateX(clamp(5rem, 20vw, 14rem)); }
}
@media (max-width: 1024px), (pointer: coarse) {
  .page-greg-level-10 .greg-level-mobile-instructions { display: grid; }
  .greg-level-overlay > span { display: none; }
  .greg-level-overlay .greg-level-desktop-instructions { display: none; }
  .greg-level-overlay .greg-level-touch-instructions { display: block; }
  .greg-level-overlay .greg-keyboard-instructions { display: none; }
  .greg-level-overlay::after { display: none; }
  .greg-level-controls-copy { font-size: .72rem; }
  .greg-special-items { margin-top: .65rem; padding: .6rem .5rem; }
  .greg-special-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .greg-special-item { padding: .3rem; font-size: .61rem; }
  .greg-special-item strong { font-size: .61rem; }
  .greg-special-item small { font-size: .53rem; }
  .greg-special-icon { flex-basis: 1.65rem; width: 1.65rem; height: 1.65rem; }
}
@media (min-width: 1025px) and (pointer: fine) {
  .greg-level-mobile-instructions { display: none !important; }
}