@font-face{font-family:FallbackPixel;src:local("Press Start 2P");font-display:swap}
:root{color-scheme:light;--navy:#151a51;--ink:#171639;--violet:#543bb3;--light:#f3f1ff;--blue:#8bd8ff;--yellow:#ffd34e}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;}body{font-family:ui-monospace,"Courier New",monospace;color:#fff;background:#111a46;overflow-x:hidden;}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(110deg,rgba(6,10,42,.42),transparent 44%,rgba(5,8,36,.28));z-index:-1}
.backdrop{position:fixed;inset:0;background:url("/scene.svg") center center/cover no-repeat;z-index:-2;image-rendering:pixelated}
.shell{min-height:100vh;display:flex;flex-direction:column;max-width:1500px;margin:auto;padding:20px 42px 16px}
.header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:55px}
.header-left{display:flex;align-items:center;gap:12px;color:#e4e2ff;font-size:12px;font-weight:900;letter-spacing:.13em;text-shadow:2px 2px #101537}
.header-left small{display:block;font-size:9px;color:#a4c8fa;margin-top:5px}
.pixel-diamond{font-size:32px;line-height:1;color:#a9c9ff;text-shadow:3px 3px #6442af}
.account{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;max-width:65%}
.account-name,.logout{border:3px solid #151448;outline:2px solid #ececfa;background:#edefff;padding:10px 14px;box-shadow:4px 4px 0 rgba(15,13,60,.7);color:#1d1a49;font-size:12px;font-weight:900;letter-spacing:.04em}
.account-name{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tiny-dot{display:inline-block;background:#5bcea1;border:2px solid #194967;width:10px;height:10px;margin-right:7px}
.logout{cursor:pointer;background:#33216f;color:#fff;outline-color:#aaa8ea}
.logout:hover,.logout:focus-visible{background:#5435b4}
.main{flex:1;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:16px 8px 26px}
.logo{position:relative;text-align:center;filter:drop-shadow(5px 6px 0 #10113d);margin-bottom:6px}
.crystal-art{position:absolute;z-index:0;font-size:150px;line-height:1;top:-12px;left:50%;transform:translateX(-50%);color:#9bcfff;text-shadow:8px 1px #895ad3,-6px -6px #e0ebff;opacity:.67}
.logo h1{position:relative;margin:0;line-height:.94;text-align:center;text-transform:uppercase;transform:rotate(-1deg)}
.logo h1 span{display:block;font-size:clamp(42px,7vw,90px);font-weight:1000;letter-spacing:-.08em;color:#ffcf41;-webkit-text-stroke:2px #0e1a66;text-shadow:3px 3px 0 #fff,6px 7px 0 #252b86,9px 10px 0 #101233}
.logo h1 strong{display:block;font-size:clamp(48px,7.8vw,102px);letter-spacing:.02em;font-style:italic;color:#70d5ff;-webkit-text-stroke:2px #12185d;text-shadow:3px 3px 0 #edf8ff,6px 7px 0 #30549e,9px 10px 0 #101233}
.logo-rule{display:block;height:5px;background:linear-gradient(to right,transparent,#ba95ff,transparent);width:70%;margin:16px auto 5px}
.tagline{margin:6px auto 24px;text-align:center;background:rgba(23,19,88,.91);border:3px solid #ad91ff;box-shadow:5px 5px 0 #111546;padding:9px 20px;color:#fff;font-size:clamp(9px,1.25vw,13px);font-weight:900;letter-spacing:.05em;line-height:1.5;max-width:750px}
.pixel-window{position:relative;width:min(100%,560px);border:6px solid #fdfaff;outline:4px solid #15154f;background:#f5f3ff;color:var(--ink);box-shadow:0 0 0 8px #6960ca,12px 14px 0 #0a0e3a;padding:32px 35px 24px;margin:8px 0}
.pixel-window::before,.pixel-window::after{content:"";position:absolute;width:12px;height:12px;background:#f8faff;border:4px solid #211d6c;transform:rotate(45deg)}
.pixel-window::before{top:-13px;left:-13px}.pixel-window::after{bottom:-13px;right:-13px}
.window-cap{position:absolute;top:-25px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#2a1f79;border:4px solid #d0c0ff;padding:7px 18px;color:#fdfbff;font-size:14px;font-weight:900;letter-spacing:.09em;box-shadow:4px 4px 0 #100f40}
.field{margin:10px 0 15px}.field label,.subpanel label{display:block;margin-bottom:8px;font-size:12px;font-weight:900;letter-spacing:.07em}
.field input,.subpanel select,.subpanel input{display:block;width:100%;height:46px;border:3px solid #5442ae;background:#fff;color:#16183a;padding:10px 12px;font:700 15px ui-monospace,"Courier New",monospace;outline-offset:3px;border-radius:0}
.field input:focus,.subpanel select:focus{outline:3px solid #8caaff}
button,select,input{font-family:inherit}
.primary{display:block;width:100%;margin:17px 0 16px;background:#5033b5;color:#fff;border:4px solid #fed45a;box-shadow:5px 5px 0 #26194f;min-height:55px;font-size:19px;font-weight:900;letter-spacing:.04em;cursor:pointer}
.primary:hover,.primary:focus-visible{background:#6346c8}.primary:disabled{opacity:.65;cursor:wait}
.or{display:flex;gap:15px;align-items:center;margin:15px 0;color:#63569a;font-size:12px;font-weight:900}.or span{height:2px;flex:1;background:#aca2e5}
.oauth{display:grid;gap:9px}.oauth button{position:relative;border:3px solid #b5a8df;padding:10px 8px;background:#e8e6f5;color:#73688d;font-size:13px;font-weight:900;opacity:.82;cursor:not-allowed}
.oauth button small{margin-left:4px;color:#7c659a;font-size:10px}.google-icon{font-family:Arial,sans-serif;font-size:20px;color:#7894c8;vertical-align:middle;margin-right:9px}.ms-icon{font-size:22px;color:#8b91be;vertical-align:middle;margin-right:7px}
.link-button{background:transparent;border:0;color:#4634a2;text-decoration:underline;cursor:pointer;font-size:15px;font-weight:900;display:block;margin:18px auto 2px}
.help{font-size:11px;line-height:1.5;color:#666184;text-align:center;margin:10px 0 0}
.game-menu{display:grid;gap:10px;padding:3px 0}.item{display:flex;align-items:center;gap:18px;padding:10px 15px;text-align:left;background:transparent;border:3px solid transparent;color:#18163d;font-weight:1000;font-size:clamp(20px,3.8vw,28px);cursor:pointer;min-height:59px;letter-spacing:.025em}
.item .pointer{opacity:0;color:#4637aa}.item:first-child .pointer{opacity:1}
.item:hover,.item:focus-visible{background:#eee9ff;border-color:#6d5ac0;outline:none}.item:hover .pointer,.item:focus-visible .pointer{opacity:1}
.item+.item{border-top:2px solid #d0c6f5}
.subpanel{border-top:3px solid #a9a0d3;padding-top:16px;margin-top:18px;color:#352963}
.subpanel p{font-size:12px;line-height:1.5}
.status{padding:13px 19px;margin:24px 0 0;min-height:45px;min-width:300px;max-width:740px;text-align:center;line-height:1.55;border:2px solid rgba(176,177,246,.65);background:rgba(10,15,53,.82);font-size:12px;color:#ebebff}
.status.error{border-color:#ffd15e;color:#ffeeb7}
footer{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#e1e5ff;text-shadow:1px 2px #0a1241;letter-spacing:.05em;padding:0 3px 4px}
.hidden{display:none!important}
@media(min-height:1050px){.main{padding-bottom:65px}}
@media(max-width:700px){.shell{padding:12px 15px}.header-left{font-size:10px}.header-left small{font-size:8px}.account{max-width:70%}.account-name,.logout{font-size:10px;padding:7px}.logo h1 span{font-size:clamp(34px,10.5vw,63px)}.logo h1 strong{font-size:clamp(43px,11vw,75px)}.pixel-window{padding:34px 18px 22px}.window-cap{font-size:12px}.tagline{max-width:100%;font-size:10px}.crystal-art{font-size:100px}.status{min-width:0}footer{flex-direction:column;align-items:center;font-size:9px;text-align:center}}
@media(max-width:390px){.header-left{font-size:9px}.header-left small{display:none}.pixel-window{padding-left:12px;padding-right:12px}.oauth button{font-size:11px}.item{font-size:19px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}