.page-greg-scroller { background: #050914; color: #eef7ff; }
.greg-scroller-page { min-height: calc(100vh - 86px); padding: clamp(1.5rem, 5vw, 4rem) 1rem 3rem; background-image: linear-gradient(180deg, rgba(4, 8, 16, .84) 0%, rgba(7, 16, 31, .76) 42%, rgba(7, 16, 31, .9) 100%), url('../images/optimized/twin-pulsars-desktop.webp'); background-size: cover; background-position: center; background-attachment: fixed; }
.greg-scroller-shell { width: min(1080px, 100%); margin: 0 auto; }
.greg-game-nav { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.5rem; }
.greg-game-nav-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; padding: .55rem .8rem; border: 1px solid #52708f; border-radius: 6px; color: #d8fbff; background: #12253d; font: 800 .75rem ui-monospace, monospace; text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease; }
.greg-game-nav-button:hover, .greg-game-nav-button:focus-visible { border-color: #7de3ff; color: #081126; background: #7de3ff; outline: none; transform: translateY(-1px); }
.greg-scroller-kicker { margin: 2rem 0 .55rem; color: #7de3ff; font: 700 .75rem/1.2 ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; }
.greg-scroller-shell h1 { margin: 0; color: #fff; font-size: clamp(2.4rem, 7vw, 5rem); letter-spacing: -.06em; line-height: .95; }
.greg-scroller-intro { max-width: 650px; margin: 1rem 0 1.6rem; color: #b8c9df; font-size: 1.1rem; line-height: 1.5; }
.greg-beta-note { display: inline-block; margin: 0 0 1rem; padding: .35rem .55rem; border: 1px solid rgba(255, 230, 109, .35); border-radius: 4px; color: #ffe66d; background: rgba(255, 230, 109, .07); font: 700 .68rem ui-monospace, monospace; letter-spacing: .08em; }
.greg-scroller-frame { position: relative; overflow: hidden; border: 1px solid rgba(145, 215, 255, .35); border-radius: 18px; background: #071124; box-shadow: 0 24px 80px rgba(0, 0, 0, .45); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#greg-scroller-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; touch-action: none; }
.greg-scroller-hud { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; justify-content: space-between; padding: .85rem 1rem; color: #cfe8ff; background: linear-gradient(rgba(3, 9, 24, .8), transparent); font: 700 .8rem ui-monospace, monospace; pointer-events: none; }
.greg-scroller-hud > span:nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); }
.greg-scroller-hud strong, .greg-scroller-overlay strong { color: #ffe66d; }
.greg-touch-instructions { display: none; }
.greg-scroller-pause { display: block; position: absolute; z-index: 10; top: 3rem; 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-scroller-pause:hover, .greg-scroller-pause:focus-visible { color: #081126; background: #ffe66d; outline: 2px solid #ffe66d; outline-offset: 2px; }
.greg-scroller-pause:active, .greg-scroller-pause[aria-pressed="true"] { color: #081126; background: #ffe66d; }
.greg-scroller-frame .greg-game-music-toggle { position: absolute; z-index: 10; top: 3rem; 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-scroller-frame .greg-game-music-toggle:hover, .greg-scroller-frame .greg-game-music-toggle:focus-visible { color: #081126; background: #ffe66d; outline: 2px solid #ffe66d; outline-offset: 2px; }
.greg-scroller-frame .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-scroller-frame:fullscreen .greg-game-music-toggle, .greg-scroller-frame:-webkit-full-screen .greg-game-music-toggle, .greg-scroller-frame.is-fullscreen .greg-game-music-toggle { position: fixed; z-index: 100; top: 3rem; right: calc(max(.7rem, env(safe-area-inset-right)) + 6rem); }
.greg-scroller-escape { display: none; position: absolute; z-index: 100; top: 3rem; 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 .95rem ui-monospace, monospace; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.greg-scroller-escape:hover, .greg-scroller-escape:focus-visible { color: #081126; background: #ffe66d; outline: 2px solid #ffe66d; outline-offset: 2px; }
.greg-scroller-escape:active { color: #081126; background: #ffe66d; }
.greg-scroller-overlay { position: absolute; inset: 0; display: grid; place-content: center; gap: .45rem; text-align: center; background: rgba(3, 7, 20, .58); pointer-events: none; }
.greg-scroller-overlay strong { font: 900 clamp(1.6rem, 5vw, 3rem)/1 ui-monospace, monospace; letter-spacing: .08em; }
.greg-scroller-overlay span { color: #b7cde5; font-size: .9rem; }
.greg-scroller-overlay.is-hidden { opacity: 0; }
.greg-scroller-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem; margin-top: .8rem; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.greg-scroller-go { min-width: 150px; padding: .8rem 1.5rem; border: 1px solid #ffe66d; border-radius: 7px; color: #081126; background: linear-gradient(135deg, #ffe66d, #ffbd58); font: 900 .9rem ui-monospace, monospace; cursor: pointer; box-shadow: 0 5px 18px rgba(255,190,78,.2); }
.greg-scroller-go:hover, .greg-scroller-go:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,190,78,.35); }
.greg-scroller-controls { color: #8ea5c1; font-size: .85rem; text-align: center; }
.greg-special-items { margin: .85rem 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 h2, .greg-special-items h3 { 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(3, 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-scroller-touch { display: none; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: .75rem; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.greg-scroller-touch button, .greg-scroller-go, .greg-scroller-fullscreen { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.greg-scroller-fullscreen { min-width: 150px; padding: .8rem 1.2rem; border: 1px solid #6c91af; border-radius: 7px; color: #effaff; background: #15253a; font: 800 .82rem ui-monospace, monospace; cursor: pointer; }
.greg-scroller-touch button { padding: .7rem 1.2rem; border: 1px solid #587796; border-radius: 7px; color: #effaff; background: #15253a; font: 800 .8rem ui-monospace, monospace; touch-action: none; }
 kbd { padding: .2rem .45rem; border: 1px solid #5c7594; border-radius: 4px; color: #effaff; background: #15253a; font: 700 .8rem ui-monospace, monospace; user-select: none; -webkit-user-select: none; }
@media (max-width: 760px) { .greg-scroller-touch { display: none; } .greg-scroller-kicker { margin-top: 1.5rem; } }
@media (max-width: 760px) { .greg-scroller-pause { display: block; } .greg-scroller-frame .greg-scroller-touch { display: flex; } }
@media (hover: none) and (pointer: coarse) { .greg-scroller-pause { display: block; } .greg-scroller-frame .greg-scroller-touch { display: flex; } }
@media (orientation: landscape) and (max-height: 600px) { .greg-scroller-pause { display: block; } .greg-scroller-frame .greg-scroller-touch { display: flex; } }
@media (max-width: 1024px), (pointer: coarse) {
  .greg-scroller-controls { display: none; }
  .greg-scroller-overlay .greg-keyboard-instructions { display: none; }
  .greg-scroller-overlay .greg-touch-instructions { display: inline; }
  .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; }
}
.greg-scroller-frame .greg-scroller-touch { position: absolute; z-index: 6; right: .7rem; bottom: .7rem; left: .7rem; justify-content: space-between; margin: 0; pointer-events: none; }
.greg-scroller-frame .greg-scroller-touch button { min-width: 5rem; padding: .55rem .8rem; border-color: rgba(125, 227, 255, .65); border-radius: 5px; color: #d8fbff; background: rgba(5, 16, 35, .86); box-shadow: 0 0 14px rgba(125, 227, 255, .18); font-size: .7rem; letter-spacing: .08em; pointer-events: auto; }
.greg-scroller-frame:fullscreen, .greg-scroller-frame:-webkit-full-screen, .greg-scroller-frame.is-fullscreen { position: fixed; inset: 0; z-index: 999; display: block; width: 100vw; height: 100vh; min-width: 100vw; min-height: 100dvh; border: 0; border-radius: 0; overflow: hidden; background: #071124; }
.greg-scroller-frame:fullscreen #greg-scroller-canvas, .greg-scroller-frame:-webkit-full-screen #greg-scroller-canvas, .greg-scroller-frame.is-fullscreen #greg-scroller-canvas { display: block; width: 100%; height: 100%; max-height: none; object-fit: fill; }
.greg-scroller-frame:fullscreen .greg-scroller-touch, .greg-scroller-frame:-webkit-full-screen .greg-scroller-touch, .greg-scroller-frame.is-fullscreen .greg-scroller-touch { position: absolute; right: max(.7rem, env(safe-area-inset-right)); bottom: max(.7rem, env(safe-area-inset-bottom)); left: max(.7rem, env(safe-area-inset-left)); width: auto; padding: 0; }
.greg-scroller-frame:fullscreen .greg-scroller-pause, .greg-scroller-frame:-webkit-full-screen .greg-scroller-pause, .greg-scroller-frame.is-fullscreen .greg-scroller-pause { position: fixed; z-index: 100; top: 3rem; right: calc(max(.7rem, env(safe-area-inset-right)) + 3rem); left: auto; }
.greg-scroller-frame:fullscreen .greg-scroller-escape, .greg-scroller-frame:-webkit-full-screen .greg-scroller-escape, .greg-scroller-frame.is-fullscreen .greg-scroller-escape { display: block; position: fixed; top: 3rem; right: max(.7rem, env(safe-area-inset-right)); left: auto; transform: none; }
@media (orientation: portrait) {
  .greg-scroller-frame:fullscreen .greg-scroller-touch, .greg-scroller-frame:-webkit-full-screen .greg-scroller-touch, .greg-scroller-frame.is-fullscreen-portrait .greg-scroller-touch { display: flex; }
}
@media (orientation: landscape) {
  .greg-scroller-frame:fullscreen .greg-scroller-touch, .greg-scroller-frame:-webkit-full-screen .greg-scroller-touch, .greg-scroller-frame.is-fullscreen-landscape .greg-scroller-touch { display: none; }
}
.greg-scroller-leaderboard, .greg-scroller-score-entry { margin-top: 2rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid rgba(145, 215, 255, .2); border-radius: 14px; background: transparent; }
.greg-scroller-leaderboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.greg-scroller-leaderboard-heading .greg-scroller-kicker { margin: 0 0 .35rem; }
.greg-scroller-shell h2 { margin: 0; color: #fff; font-size: clamp(1.25rem, 3vw, 1.8rem); }
#scroller-leaderboard-status { color: #8ea5c1; font: 700 .75rem ui-monospace, monospace; }
.greg-scroller-leaderboard--top-100 { padding: 0; overflow: hidden; }
.greg-scroller-leaderboard--top-100 summary { display: block; padding: 1rem 1.2rem; color: #d9ecff; font: 800 1.05rem ui-monospace, monospace; text-align: center; cursor: pointer; list-style: none; }
.greg-scroller-leaderboard--top-100 summary::-webkit-details-marker { display: none; }
.greg-scroller-leaderboard--top-100 summary::after { content: '+'; color: #7de3ff; font-size: 1.2rem; }
.greg-scroller-leaderboard--top-100[open] summary { border-bottom: 1px solid rgba(145, 215, 255, .2); }
.greg-scroller-leaderboard--top-100[open] summary::after { content: '−'; }
.greg-scroller-leaderboard--top-100 > .greg-scroller-score-list { margin: 1rem 1.2rem 1.2rem; }
.greg-scroller-leaderboard--top-100 > .greg-scroller-score-list { grid-template-columns: 1fr; }
.greg-scroller-score-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.25rem; margin: 0; padding-left: 2.1rem; color: #d9ecff; font: 700 .86rem ui-monospace, monospace; }
.greg-scroller-leaderboard--top-ten .greg-scroller-score-list { grid-template-columns: 1fr; }
.greg-scroller-score-list li { padding: .3rem .45rem; border-bottom: 1px solid rgba(145, 215, 255, .1); }
.greg-scroller-score-list li::marker { color: #7de3ff; }
.greg-scroller-score-row { display: flex; justify-content: space-between; gap: 1rem; }
.greg-scroller-score-name { color: #ffe66d; letter-spacing: .12em; }
.greg-scroller-score-empty { grid-column: 1 / -1; color: #8ea5c1; list-style: none; margin-left: -2.1rem; }
.greg-scroller-score-entry p { color: #b8c9df; }
.greg-scroller-score-form-row { display: flex; gap: .55rem; }
.greg-scroller-score-form-row input { width: 9rem; padding: .7rem .8rem; border: 1px solid #587796; border-radius: 7px; color: #fff; background: #0b1730; font: 800 1rem ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; }
.greg-scroller-score-form-row button { padding: .7rem 1rem; border: 1px solid #ffe66d; border-radius: 7px; color: #081126; background: #ffe66d; font: 800 .8rem ui-monospace, monospace; cursor: pointer; }
.greg-scroller-score-form-note { margin-bottom: 0; font-size: .85rem; }
.greg-scroller-score-form-note strong { color: #ffe66d; }
.greg-scroller-score-entry[hidden], .greg-scroller-leaderboard[hidden] { display: none; }
.greg-scroller-overlay .greg-scroller-score-entry--in-game { display: block; width: min(520px, calc(100% - 2rem)); margin: 0; padding: 1rem 1.15rem; border-color: rgba(255, 230, 109, .75); color: #ffe66d; background: rgba(5, 9, 27, .94); box-shadow: 0 0 28px rgba(255, 230, 109, .18); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; pointer-events: auto; }
.greg-scroller-overlay .greg-scroller-score-entry--in-game[hidden] { display: none; }
.greg-scroller-overlay .greg-scroller-score-entry--in-game h2, .greg-scroller-overlay .greg-scroller-score-entry--in-game p, .greg-scroller-overlay .greg-scroller-score-entry--in-game label { color: #ffe66d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.greg-scroller-overlay .greg-scroller-score-entry--in-game h2 { font-size: 1.05rem; letter-spacing: .04em; }
.greg-scroller-overlay .greg-scroller-score-entry--in-game p { margin: .65rem 0; font-size: .78rem; }
.greg-scroller-overlay .greg-scroller-score-entry--in-game .greg-scroller-score-form-row { flex-direction: row; }
.greg-scroller-overlay .greg-scroller-score-entry--in-game .greg-scroller-score-form-row input { color: #ffe66d; border-color: #ffe66d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.greg-scroller-overlay .greg-scroller-score-entry--in-game .greg-scroller-score-form-row button { color: #081126; background: #ffe66d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.greg-scroller-overlay .greg-scroller-score-entry--in-game .greg-scroller-score-form-note { color: #ffe66d; }
@media (max-width: 600px) { .greg-scroller-leaderboard-heading, .greg-scroller-score-form-row { align-items: stretch; flex-direction: column; } .greg-scroller-score-form-row input, .greg-scroller-score-form-row button { width: 100%; } .greg-scroller-score-list { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .greg-scroller-page { background-image: linear-gradient(180deg, rgba(4, 8, 16, .84) 0%, rgba(7, 16, 31, .76) 42%, rgba(7, 16, 31, .9) 100%), url('../images/optimized/twin-pulsars-mobile.webp'); } }