@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";
:root{--gb-darkest:#0f380f;--gb-dark:#306230;--gb-light:#8bac0f;--gb-lightest:#9bbc0f;--console-body:#8b8b8b;--console-dark:#2d2d2d;--console-accent:#4a1a6b;--bezel-bg:#1a1a2e;--bezel-inner:#0d0d1a;--screen-glow:#8bac0f26}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bezel-bg);width:100%;height:100%;font-family:"Press Start 2P",monospace;overflow:hidden}#game-container{background:linear-gradient(135deg,#0a0a1a 0%,#1a1a3e 40%,#0d0d2a 100%);justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:relative}#game-container:before{content:"";pointer-events:none;background-image:radial-gradient(1px 1px at 10% 20%,#ffffff4d 0%,#0000 100%),radial-gradient(1px 1px at 30% 60%,#fff3 0%,#0000 100%),radial-gradient(1px 1px at 50% 10%,#fff6 0%,#0000 100%),radial-gradient(1px 1px at 70% 40%,#fff3 0%,#0000 100%),radial-gradient(1px 1px at 90% 80%,#ffffff4d 0%,#0000 100%),radial-gradient(1px 1px at 15% 85%,#ffffff40 0%,#0000 100%),radial-gradient(1px 1px at 45% 75%,#ffffff59 0%,#0000 100%),radial-gradient(1px 1px at 65% 15%,#fff3 0%,#0000 100%),radial-gradient(1px 1px at 85% 55%,#ffffff4d 0%,#0000 100%),radial-gradient(1px 1px at 25% 35%,#ffffff26 0%,#0000 100%);animation:4s ease-in-out infinite alternate twinkle;position:absolute;inset:0}@keyframes twinkle{0%{opacity:.5}to{opacity:1}}#console-frame{z-index:1;flex-direction:column;align-items:center;gap:24px;display:flex}#screen-bezel{background:linear-gradient(145deg,#1e1e3a 0%,#12122a 50%,#0a0a1e 100%);border:1px solid #ffffff0d;border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:20px 24px 16px;display:flex;position:relative;box-shadow:0 0 40px #8bac0f14,0 8px 32px #0009,inset 0 1px #ffffff0d,inset 0 -1px #0000004d}#screen-bezel:after{content:"";z-index:-1;filter:blur(4px);background:linear-gradient(135deg,#8bac0f1a,#0000 50%,#4a1a6b1a);border-radius:18px;position:absolute;inset:-2px}#screen-label{color:var(--gb-light);letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 10px #8bac0f80;opacity:.8;font-size:8px}#screen-wrapper{background:var(--gb-darkest);border-radius:8px;position:relative;overflow:hidden;box-shadow:inset 0 2px 8px #000c,0 0 20px #8bac0f0d}#screen-wrapper:after{content:"";pointer-events:none;z-index:10;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000014 2px 4px);border-radius:8px;position:absolute;inset:0}#screen-wrapper:before{content:"";pointer-events:none;z-index:11;background:radial-gradient(#0000 60%,#0000004d 100%);border-radius:8px;position:absolute;inset:0}#game-canvas{image-rendering:pixelated;image-rendering:crisp-edges;cursor:none;outline:none;display:block}#controls-info{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.control-group{align-items:center;gap:8px;display:flex}.control-group .key{min-width:32px;height:28px;color:var(--gb-lightest);background:linear-gradient(#3a3a5a 0%,#2a2a4a 100%);border:1px solid #ffffff1a;border-radius:6px;justify-content:center;align-items:center;padding:0 8px;font-family:"Press Start 2P",monospace;font-size:7px;display:inline-flex;box-shadow:0 2px #1a1a3a,inset 0 1px #ffffff0d}.control-group .label{color:#fff6;font-family:"Press Start 2P",monospace;font-size:7px}#editor-link{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:4px;display:flex}#editor-link a{color:var(--gb-light);background:linear-gradient(135deg,#8bac0f1a,#8bac0f0d);border:1px solid #8bac0f40;border-radius:8px;align-items:center;gap:6px;padding:8px 20px;font-family:"Press Start 2P",monospace;font-size:7px;text-decoration:none;transition:all .2s;display:inline-flex}#editor-link a:hover{background:linear-gradient(135deg,#8bac0f33,#8bac0f1a);border-color:#8bac0f80;transform:translateY(-1px);box-shadow:0 0 15px #8bac0f26}.user-badge{color:var(--gb-lightest);opacity:.7;background:#4a1a6b4d;border:1px solid #8bac0f26;border-radius:8px;align-items:center;gap:4px;padding:6px 12px;font-family:"Press Start 2P",monospace;font-size:6px;display:inline-flex}.logout-btn{color:#e06060;cursor:pointer;background:#b4282826;border:1px solid #b428284d;border-radius:8px;padding:6px 10px;font-size:10px;transition:all .2s}.logout-btn:hover{background:#b428284d;border-color:#b4282899;transform:translateY(-1px)}#mobile-controls{display:none}.start-select{justify-content:center;gap:24px;margin-top:4px;display:flex}.sys-btn{color:#ccc;letter-spacing:1px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;background:#555;border:none;border-radius:20px;padding:6px 18px;font-family:"Press Start 2P",monospace;font-size:6px;transform:skew(-8deg);box-shadow:0 2px 4px #0006,inset 0 1px #ffffff1a}.sys-btn:active{background:#444;transform:skew(-8deg)translateY(1px);box-shadow:0 1px 2px #0006}.dpad-container{justify-content:center;align-items:center;display:flex}.dpad{grid-template-rows:50px 50px 50px;grid-template-columns:50px 50px 50px;gap:0;display:grid;position:relative}.dpad-btn{cursor:pointer;color:#222;-webkit-user-select:none;user-select:none;touch-action:none;border:none;justify-content:center;align-items:center;font-size:16px;transition:background 50ms;display:flex}.dpad-up{background:linear-gradient(#3a3a3a,#2d2d2d);border-radius:8px 8px 0 0;grid-area:1/2;box-shadow:0 -2px 6px #0000004d,inset 0 2px 4px #ffffff0d}.dpad-down{background:linear-gradient(#2d2d2d,#3a3a3a);border-radius:0 0 8px 8px;grid-area:3/2;box-shadow:0 2px 6px #0000004d,inset 0 -2px 4px #ffffff0d}.dpad-left{background:linear-gradient(90deg,#3a3a3a,#2d2d2d);border-radius:8px 0 0 8px;grid-area:2/1;box-shadow:-2px 0 6px #0000004d,inset 2px 0 4px #ffffff0d}.dpad-right{background:linear-gradient(270deg,#3a3a3a,#2d2d2d);border-radius:0 8px 8px 0;grid-area:2/3;box-shadow:2px 0 6px #0000004d,inset -2px 0 4px #ffffff0d}.dpad-center{background:#333;grid-area:2/2;box-shadow:inset 0 0 8px #0006}.dpad-btn:active{color:var(--gb-light);background:#4a4a4a!important}.ab-container{align-items:center;gap:16px;display:flex}.gb-btn{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;border:none;border-radius:50%;width:56px;height:56px;font-family:"Press Start 2P",monospace;font-size:14px;transition:transform 50ms;box-shadow:0 4px 8px #0006,inset 0 2px 4px #ffffff1a}.btn-a{color:#d4a0b8;background:linear-gradient(145deg,#8b3a62,#6b2a4a);margin-top:-20px}.btn-b{color:#d4a0b8;background:linear-gradient(145deg,#8b3a62,#6b2a4a);margin-top:20px}.gb-btn:active{transform:scale(.92);box-shadow:0 2px 4px #0006,inset 0 1px 8px #0000004d}@media (max-width:700px){html,body{height:auto;overflow:auto}#game-container{min-height:100dvh;padding:8px}#console-frame{padding:8px}#game-canvas{aspect-ratio:160/144;max-width:95vw;width:100%!important;height:auto!important}#screen-bezel{border-radius:12px;padding:8px 10px}#screen-label{font-size:6px!important}#controls-info{display:none!important}#mobile-controls{justify-content:space-between;align-items:center;gap:8px;padding:12px 8px;display:flex}.start-select{order:3;width:100%;position:relative}#controls-info{gap:12px}.control-group .key,.control-group .label{font-size:6px}#editor-link{padding:4px 0}#editor-link a,.user-badge,.logout-btn{padding:5px 10px!important;font-size:5px!important}}@media (max-width:400px){.dpad{grid-template-rows:42px 42px 42px;grid-template-columns:42px 42px 42px}.gb-btn{width:48px;height:48px;font-size:12px}}