html{--day-horizon-start: #26007d;--day-horizon-mid: #3503a8;--day-horizon-accent: #b30699;--day-horizon-bright: #ed2295;--day-horizon-end: #ffff05;--night-horizon-start: #040508;--night-horizon-mid: #243048;--night-horizon-accent: #0d4371;--night-horizon-bright: #0264a1;--night-horizon-end: #0468a6;--sun-start: #ffff05;--sun-end: #ff4700;--sun-glow: #ff4800b3;--moon-start: #f4f3bd;--moon-end: #edf0c3;--moon-glow: #ffffff80;--day-surface-overlay: #b3069934;--day-surface-start: #1f0540;--day-surface-end: #570257;--day-grid-color: #05f3fe;--night-surface-overlay: #0d437171;--night-surface-start: #243048;--night-surface-end: #080707;--night-grid-color: #d6d2d2;--day-console-border: #060606;--day-console-shadow: #605d5b80;--day-console-inner-glow: #1818184d;--night-console-border: #2699dc;--night-console-shadow: #cbe7f980;--night-console-inner-glow: #3939394d;--transition-duration: 1.2s;--transition-timing: ease;--grid-angle: 63deg;--grid-animation-duration: 20s}body{height:100vh;min-width:320px;margin:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(0);white-space:nowrap;border:0}.scenary{height:100vh;position:relative}.horizon{height:50vh;left:0;position:absolute;right:0;top:0;overflow:hidden}.horizon:before,.horizon:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.horizon:before{background:linear-gradient(to bottom,var(--day-horizon-start) 0%,var(--day-horizon-mid) 50%,var(--day-horizon-accent) 74%,var(--day-horizon-bright) 84%,var(--day-horizon-end) 100%);opacity:1}.horizon:after{background:linear-gradient(to bottom,var(--night-horizon-start) 0%,var(--night-horizon-mid) 50%,var(--night-horizon-accent) 74%,var(--night-horizon-bright) 84%,var(--night-horizon-end) 100%);opacity:0}.sun,.moon{z-index:1;width:25vw;height:25vw;border-radius:50%;left:50%;position:absolute;transform:translate(-50%,40%)}.sun{bottom:5vh;background-image:linear-gradient(to bottom,var(--sun-start) 0%,var(--sun-end) 50%);box-shadow:0 0 70px 30px var(--sun-glow);opacity:1;transform:translate(-50%,40%) translateY(0)}.moon{bottom:5vh;background:linear-gradient(to bottom,var(--moon-start) 0%,var(--moon-end) 50%);box-shadow:0 0 70px 30px var(--moon-glow);opacity:0;transform:translate(-50%,40%) translateY(40vh)}.surface{bottom:0;height:50vh;left:0;perspective:60vh;position:absolute;right:0}.surface:before,.surface:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.surface:before{background:linear-gradient(to bottom,var(--day-surface-overlay) 0%,transparent 100%),linear-gradient(to right,var(--day-surface-start) 0%,var(--day-surface-end) 100%);opacity:1}.surface:after{background:linear-gradient(to bottom,var(--night-surface-overlay) 0%,transparent 100%),linear-gradient(to right,var(--night-surface-start) 0%,var(--night-surface-end) 100%);opacity:0}.surface-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.surface-overlay:before,.surface-overlay:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.surface-overlay:before{background:linear-gradient(to bottom,var(--day-grid-color) 0%,var(--day-grid-color) 2%,transparent 6%);opacity:1}.surface-overlay:after{background:linear-gradient(to bottom,var(--night-grid-color) 0%,var(--night-grid-color) 2%,transparent 6%);opacity:0}.surface-grid{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:50% 0;transform:rotateX(var(--grid-angle));z-index:2}.surface-grid:before,.surface-grid:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-size:2.1vw 2.1vw;height:70vh;animation:surface-move var(--grid-animation-duration) linear infinite}.surface-grid:after{background-image:linear-gradient(to bottom,transparent,transparent 2vw,var(--day-grid-color) 2vw,var(--day-grid-color) 2.1vw),linear-gradient(to right,transparent,transparent 2vw,var(--day-grid-color) 2vw,var(--day-grid-color) 2.1vw);opacity:1}.surface-grid:before{background-image:linear-gradient(to bottom,transparent,transparent 2vw,var(--night-grid-color) 2vw,var(--night-grid-color) 2.1vw),linear-gradient(to right,transparent,transparent 2vw,var(--night-grid-color) 2vw,var(--night-grid-color) 2.1vw);opacity:0}@keyframes surface-move{0%{background-position:0 0}to{background-position:0 100%}}#game-canvas{border-width:60px 100px;border-style:solid;border-color:var(--day-console-border);border-radius:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;animation:show-up 1s ease-in 1s forwards;opacity:0;box-shadow:0 0 60px 10px var(--day-console-shadow),inset 0 0 40px var(--day-console-inner-glow),inset 0 0 0 8px #0000004d;background:#000;transition:border-color var(--transition-duration) var(--transition-timing),box-shadow var(--transition-duration) var(--transition-timing)}@keyframes show-up{0%{opacity:0}to{opacity:1}}.cta-button{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:3;display:flex;align-items:center;gap:12px;padding:14px 24px;font-size:18px;background:linear-gradient(135deg,var(--day-horizon-accent),var(--day-horizon-bright));border:2px solid var(--day-grid-color);border-radius:50px;color:#000;text-decoration:none;box-shadow:0 4px 20px #ff1a9c66,inset 0 1px #fff3;transition:all .2s ease;cursor:pointer}.cta-button:hover{transform:translate(-50%) translateY(-2px);box-shadow:0 6px 30px #ff179a99,inset 0 1px #ffffff4d}.cta-icon{font-size:18px;line-height:1}.cta-text{font-weight:500}.cta-link{font-weight:600;opacity:.6}@media screen and (max-width:1920px){#game-canvas{transform:translate(-50%,-50%) scale(.75);border-width:50px 80px}}@media screen and (max-width:1440px){#game-canvas{transform:translate(-50%,-50%) scale(.65);border-width:40px 70px}}@media screen and (max-width:1280px){#game-canvas{transform:translate(-50%,-50%) scale(.5);border-width:35px 60px}.cta-button{font-size:14px;gap:10px}}@media screen and (max-width:768px){#game-canvas{transform:translate(-50%,-50%) scale(.4);border-width:30px 50px}.cta-button{padding:10px 20px;font-size:12px;gap:8px}}@media screen and (max-width:480px){#game-canvas{transform:translate(-50%,-50%) scale(.3)}.cta-button{font-size:10px;flex-direction:column;gap:2px}.cta-icon{display:none}}.night-mode .horizon:before{opacity:0}.night-mode .horizon:after{opacity:1}.night-mode .sun{opacity:0;transform:translate(-50%,40%) translateY(40vh)}.night-mode .moon{opacity:1;transform:translate(-50%,40%) translateY(0)}.night-mode .surface:before{opacity:0}.night-mode .surface:after{opacity:1}.night-mode .surface-overlay:before{opacity:0}.night-mode .surface-overlay:after{opacity:1}.night-mode .surface-grid:before{opacity:1}.night-mode .surface-grid:after{opacity:0}.night-mode #game-canvas{border-color:var(--night-console-border);box-shadow:0 0 60px 10px var(--night-console-shadow),inset 0 0 40px var(--night-console-inner-glow),inset 0 0 0 8px #0000004d}.night-mode .cta-button{color:#fff;background:linear-gradient(135deg,var(--night-horizon-accent),var(--night-horizon-bright));border-color:var(--night-grid-color);box-shadow:0 4px 20px #0468a666,inset 0 1px #fff3}.night-mode .cta-button:hover{box-shadow:0 6px 30px #0468a699,inset 0 1px #ffffff4d}.theme-transition .horizon:before,.theme-transition .horizon:after{transition:opacity var(--transition-duration) var(--transition-timing)}.theme-transition .sun,.theme-transition .moon{transition:opacity var(--transition-duration) var(--transition-timing),transform var(--transition-duration) var(--transition-timing)}.theme-transition .surface:before,.theme-transition .surface:after{transition:opacity var(--transition-duration) var(--transition-timing)}.theme-transition .surface-overlay:before,.theme-transition .surface-overlay:after{transition:opacity var(--transition-duration) var(--transition-timing)}.theme-transition .surface-grid:before,.theme-transition .surface-grid:after{transition:opacity var(--transition-duration) var(--transition-timing)}
