@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overscroll-behavior-y: none; background: radial-gradient(circle at 75% 10%, #372047 0, transparent 30%), radial-gradient(circle at 8% 80%, #073a45 0, transparent 28%), #080812; color: #f5f4ff; font-family: "Space Grotesk", sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(1060px, calc(100% - 34px)); margin: auto; padding: 25px 0 calc(44px + env(safe-area-inset-bottom)); }
header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.brand, .source { font: 700 .68rem Orbitron; text-decoration: none; letter-spacing: .08em; color: #d8f9ff; }
.brand span { color: #ff3e67; }.source { color: #9cff57; }
.intro { padding: 74px 0 34px; max-width: 780px; }.eyebrow { font: 700 .65rem Orbitron; letter-spacing: .15em; color: #74f2ff; }
h1 { font: 900 clamp(2.4rem, 6vw, 5.4rem)/.9 Orbitron; letter-spacing: -.06em; margin: .8rem 0 1.3rem; } h1 em { font-style: normal; color: #ff3e67; text-shadow: 0 0 30px #ff3e6766; }
.lead { font-size: 1.04rem; line-height: 1.65; color: #c7c5d8; max-width: 620px; }
.chooser { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1rem 0; }
.chooser button, .controls button, .touch-controls button { min-height: 44px; border: 1px solid #77efff44; background: #121127; color: #d5faff; padding: .7rem .9rem; border-radius: 10px; font: 700 .62rem Orbitron; letter-spacing: .06em; cursor: pointer; transition: transform 160ms cubic-bezier(.23,1,.32,1), border-color 160ms ease, background 160ms ease; }
.chooser button.active, .controls #start { border-color: #ff3e67; background: #ff3e67; color: #fff; box-shadow: 0 10px 22px #ff3e6733; }.chooser button:active, .controls button:active, .touch-controls button:active { transform: scale(.96); }
.controls button:disabled { opacity: .42; cursor: not-allowed; }.controls .secondary { border-color: #00d9ff66; color: #bbf9ff; }
.game-card { border: 1px solid #a5bfff3b; background: linear-gradient(145deg, #17152cdd, #090915dd); border-radius: 23px; overflow: hidden; box-shadow: 0 25px 70px #0008; }
.status { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #ffffff10; color: #b5f9ff; font: 700 .61rem Orbitron; letter-spacing: .09em; }.status span + span { color: #aca9c4; text-align: right; }
#game { position: relative; height: min(53vw, 440px); min-height: 310px; overflow: hidden; isolation: isolate; touch-action: none; outline: none; background: linear-gradient(#00d9ff09 1px, transparent 1px), linear-gradient(90deg, #00d9ff09 1px, transparent 1px), radial-gradient(circle at center, #161a45, #090912 68%); background-size: 26px 26px, 26px 26px, auto; }
#game::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .48; background: radial-gradient(circle at 50% 50%, transparent 0 36%, #00d9ff10 37% 38%, transparent 39%); }
.controls { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.25rem; border-top: 1px solid #ffffff10; }.controls button { min-width: 108px; } #hint { font-size: .78rem; color: #bab7ce; }
.touch-controls { align-items: center; justify-content: center; gap: .8rem; padding: .7rem 1rem 1rem; border-top: 1px solid #ffffff0d; color: #7beeff; font: 700 .55rem Orbitron; letter-spacing: .09em; }.touch-controls button { width: 68px; min-height: 52px; font-size: 1.1rem; border-color: #00d9ff66; background: linear-gradient(145deg, #102741, #10102a); box-shadow: inset 0 0 18px #00d9ff13, 0 0 20px #00d9ff18; }
.orb { position: absolute; width: 64px; height: 64px; border: 2px solid #ffd1dc; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff, #ff6b8d 18%, #ff3e67 52%, #9e1435); box-shadow: 0 0 0 9px #ff3e6730, 0 0 40px #ff3e67; cursor: pointer; animation: targetPulse .82s ease-in-out infinite alternate; }.orb::after { content: "+1"; position: absolute; left: 50%; top: -22px; color: #ffbfcd; opacity: 0; transform: translateX(-50%); font: 800 .65rem Orbitron; }.orb.hit::after { animation: scorePop .42s ease-out forwards; }
.ship { position: absolute; bottom: 19px; width: 34px; height: 40px; clip-path: polygon(50% 0, 92% 88%, 50% 72%, 8% 88%); background: linear-gradient(90deg, #8ffbff, #00d9ff 55%, #8e63ff); filter: drop-shadow(0 0 12px #00d9ff); transition: left 90ms cubic-bezier(.23,1,.32,1); }.ship::after { content: ""; position: absolute; width: 12px; height: 15px; left: 11px; top: 25px; border-radius: 50%; background: #ff3e67; box-shadow: 0 0 12px #ff3e67; }
.hazard { position: absolute; width: 36px; height: 36px; border: 2px solid #ff8ca4; transform: rotate(45deg); background: #ff3e6724; box-shadow: 0 0 18px #ff3e67; }.hazard::after { content: ""; position: absolute; inset: 8px; background: #ff3e67; box-shadow: 0 0 8px #ff3e67; }
.memory-grid { height: 100%; display: grid; place-content: center; grid-template-columns: repeat(4, 68px); gap: 14px; }.memory-card { width: 68px; height: 82px; border: 1px solid #75efff55; border-radius: 14px; background: linear-gradient(145deg, #252250, #121227); color: transparent; cursor: pointer; font: 800 1.25rem Orbitron; box-shadow: inset 0 0 18px #00d9ff12; transition: transform 180ms cubic-bezier(.23,1,.32,1), background 180ms ease; }.memory-card:active { transform: scale(.94); }.memory-card.open, .memory-card.matched { background: linear-gradient(145deg, #ff4f75, #762048); color: #fff; box-shadow: 0 0 23px #ff3e6788; transform: rotateY(180deg); }.memory-card.matched { background: linear-gradient(145deg, #6b55bc, #334782); border-color: #74f2ff; }
.game-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: #070713aa; backdrop-filter: blur(3px); color: #effdff; font: 800 1rem Orbitron; letter-spacing: .08em; z-index: 10; }.game-overlay span { padding: 1rem 1.25rem; border: 1px solid #00d9ff66; border-radius: 12px; background: #12122ad9; box-shadow: 0 0 35px #00d9ff25; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.2rem 0; }.notes article { border-left: 2px solid #00d9ff55; padding: .3rem .8rem; }.notes b { display: block; font: 700 .67rem Orbitron; color: #d8faff; }.notes span { font-size: .8rem; color: #aaa7bf; } footer { margin-top: 2.2rem; color: #aaa7bd; font-size: .72rem; }
@keyframes targetPulse { to { transform: scale(1.1); filter: brightness(1.22); } } @keyframes scorePop { 10% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -22px); } }
@media (max-width: 610px) { .shell { width: min(100% - 22px, 560px); padding-top: 16px; }.intro { padding: 44px 0 28px; }.source { font-size: .55rem; }.status { font-size: .5rem; padding: .85rem .95rem; }.chooser { gap: .45rem; }.chooser button { flex: 1 1 30%; padding: .7rem .35rem; font-size: .5rem; } #game { height: 64vh; min-height: 342px; max-height: 510px; }.controls { align-items: stretch; flex-wrap: wrap; padding: .85rem .95rem; }.controls button { flex: 1; min-width: 0; }.controls #hint { width: 100%; line-height: 1.4; }.memory-grid { grid-template-columns: repeat(4, min(19vw, 66px)); gap: 9px; }.memory-card { width: min(19vw, 66px); height: min(23vw, 78px); }.notes { grid-template-columns: 1fr; gap: .65rem; }.orb { width: 70px; height: 70px; }.touch-controls { display: flex; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }