:root{color-scheme:dark;--cyan:#9defff;--ink:#031c2d}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:#f1faff}body{background:#06334b}button,input,a{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.homepage{isolation:isolate;position:relative;min-height:100svh;height:100svh;display:grid;grid-template-columns:minmax(0,1.95fr) minmax(350px,1fr);grid-template-rows:48px minmax(0,1fr) 166px;gap:8px 18px;padding:8px 3vw 20px;overflow:hidden}.homepage::before{content:'';position:absolute;inset:0;z-index:-2;background:url('../../../assets/home/landscape-v2-fast.webp') center center/cover no-repeat}.homepage::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#031b2944,transparent 35%)}.home-links{grid-column:2;display:flex;justify-content:flex-end;align-items:center;gap:10px;z-index:2}.home-links button{height:44px;width:150px;background:transparent center/100% 100% no-repeat;border:0;padding:0 10px 0 30px;color:#effaff;font-size:16px;font-weight:700;text-shadow:0 2px 3px #00131e;transition:filter .18s,transform .18s}.home-links [data-help=wiki]{background-image:url('../../../assets/home/wiki-button-v2.webp')}.home-links [data-help=support]{background-image:url('../../../assets/home/support-button-v2.webp')}.intro{grid-column:1;grid-row:2;align-self:start;text-align:center;padding-top:0;pointer-events:none}.brand-logo{display:block;width:min(68%,530px);height:auto;margin:-20px auto -7px;filter:drop-shadow(0 4px 6px #002a4d55)}h1{font-size:clamp(24px,2.65vw,45px);font-style:italic;margin:0 0 8px;letter-spacing:-1px;text-shadow:0 3px 4px #00304b,0 0 15px #002745} .tagline{font-size:clamp(13px,1.1vw,18px);font-style:italic;margin:0;text-shadow:0 2px 3px #00304b}.account{grid-column:2;grid-row:2;position:relative;align-self:start;width:100%;min-height:480px;max-width:550px;justify-self:end;padding:38px 11% 34px;display:flex;flex-direction:column;justify-content:center;isolation:isolate}.account::before{content:'';position:absolute;inset:4% 6%;z-index:-2;background:#031b2b;clip-path:polygon(5% 0,95% 0,100% 5%,100% 95%,95% 100%,5% 100%,0 95%,0 5%)}.account::after{content:'';position:absolute;inset:0;z-index:-1;background:url('../../../assets/home/account-frame-v2-fast.webp') center/100% 100% no-repeat;pointer-events:none}h2{font-size:clamp(23px,2.1vw,34px);font-style:italic;margin:0;text-align:center;line-height:1.15;white-space:nowrap}.account h2::after{content:'';display:block;width:50%;height:2px;margin:12px auto 7px;background:linear-gradient(90deg,transparent,#ff3355,transparent);box-shadow:0 0 6px #ff183866}#status{font-size:11px;line-height:1.4;min-height:15px;margin:5px 0 10px;color:#c0e3ee}form{margin:0}label{display:block;margin:0 0 9px}input{display:block;width:100%;height:40px;padding:8px 12px;border:1px solid #85b9ce;border-radius:9px;color:#fff;background:linear-gradient(120deg,#102c3c,#1a374a);box-shadow:inset 0 1px 3px #00121f77;font-size:15px}input::placeholder{color:#eff8ff;opacity:1}small{display:block;font-size:10px;color:#d4e6ed;margin:4px 0 9px}.primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:62px;padding:12px 22px;margin-top:12px;border:0;color:#fff;background:transparent url('../../../assets/home/primary-button-v2-fast.webp') center/100% 100% no-repeat;font-size:clamp(20px,1.7vw,28px);font-weight:800;text-align:center;text-decoration:none;text-shadow:0 2px 3px #5b0015;transition:filter .18s,transform .18s}.primary:hover,.home-links button:hover{filter:brightness(1.18) drop-shadow(0 0 5px #58dcff66)}.primary:active,.home-links button:active{transform:translateY(2px)}.account-switch{text-align:center;margin-top:8px}.account-switch button,#signout{border:0;padding:5px;background:none;color:#c7f6ff;text-decoration:underline;text-underline-offset:4px;font-size:13px}#ready{text-align:center}#ready strong{color:#8eefff;font-size:26px}#ready p{line-height:1.6;font-size:14px}#signout{margin-top:12px}button:disabled{opacity:.55;cursor:wait}.mode-showcase{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:end;padding:0 2vw}.mode-showcase button{border:0;background:transparent;padding:0;color:#fff;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.mode-showcase img{display:block;width:100%;height:138px;object-fit:contain;filter:drop-shadow(0 6px 5px #001a2b77);transition:transform .22s,filter .22s}.mode-showcase span{font-size:clamp(15px,1.45vw,23px);font-weight:700;font-style:italic;text-shadow:0 2px 4px #001821;line-height:1.2}.mode-showcase button:hover img{transform:translateY(-4px);filter:drop-shadow(0 0 8px #8ee7ff88)}:focus-visible{outline:2px solid #ffe18b;outline-offset:4px}dialog{width:min(640px,94vw);max-height:85svh;overflow:auto;color:#edfaff;background:linear-gradient(140deg,#113448,#071b29);border:1px solid #67d9ea;border-radius:16px;padding:24px;box-shadow:0 18px 80px #0009}dialog::backdrop{background:#020b16bb;backdrop-filter:blur(4px)}dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #346373;padding-bottom:14px}dialog h2{font-size:24px;white-space:normal;text-align:left;margin:0}dialog p{line-height:1.7}dialog button{border:1px solid #5b8999;background:#143e50;color:white;border-radius:7px;font-size:24px}dialog h3{color:#7ce8f5}
@media(min-width:1000px) and (max-height:780px){.homepage{grid-template-rows:40px minmax(0,1fr) 132px;padding-top:4px;padding-bottom:12px}.account{min-height:440px;padding-top:30px;padding-bottom:28px}.brand-logo{width:55%;max-width:440px;margin-top:-12px}h1{font-size:clamp(24px,2.5vw,39px)}.mode-showcase img{height:108px}.account h2{font-size:27px}input{height:35px}label{margin-bottom:7px}.primary{min-height:53px}#status{margin:3px 0 7px}.home-links button{height:38px;width:138px}}
@media(max-width:999px){.homepage{height:auto;min-height:100svh;grid-template-columns:1fr;grid-template-rows:44px auto minmax(280px,30vw) auto auto;gap:12px;padding:8px 18px 24px;overflow:visible}.homepage::before{background-position:38% top;background-size:auto 900px;background-color:#06334b}.home-links{grid-column:1;grid-row:1}.intro{grid-column:1;grid-row:2}.brand-logo{width:min(80%,460px);margin:0 auto}.tagline{max-width:440px;margin:auto}.account{grid-column:1;grid-row:4;max-width:480px;justify-self:center;min-height:480px;padding-left:12%;padding-right:12%}.mode-showcase{grid-column:1;grid-row:5;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 8px}.mode-showcase img{height:125px}h1{font-size:28px;letter-spacing:-.5px}.account h2{font-size:27px}.home-links button{width:130px;height:38px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Separate masked highlights follow the artwork rather than crossing the form. */
.brand-mark{position:relative;width:min(68%,530px);margin:-20px auto -7px;isolation:isolate}.brand-mark .brand-logo{width:100%;margin:0;max-width:none}.brand-mark::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 42%,#ccfbff88 48%,#fff9 50%,#9cefff77 52%,transparent 58%);background-size:320% 100%;mask:url('../../../assets/home/logo-v2-fast.webp') center/100% 100% no-repeat;animation:home-metal-reflection 7s ease-in-out infinite;mix-blend-mode:screen}.frame-light{position:absolute;inset:3.7% 5.4% 4.5%;padding:9px;pointer-events:none;z-index:1;clip-path:polygon(5% 0,95% 0,100% 5%,100% 95%,95% 100%,5% 100%,0 95%,0 5%);background:linear-gradient(115deg,transparent 40%,#aff6ff88 47%,#fff 50%,#86e7ff99 53%,transparent 60%);background-size:350% 100%;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:home-metal-reflection 8s ease-in-out 1s infinite}.home-links{gap:8px;align-self:start;justify-self:end;justify-content:flex-end}.home-links button{position:relative;width:138px;height:40px;flex:none;padding:0 13px 0 34px;isolation:isolate;font-size:15px;line-height:1;overflow:hidden}.home-links [data-help=wiki]{background-image:url('../../../assets/home/wiki-button-compact-fast.webp');--button-mask:url('../../../assets/home/wiki-button-compact-fast.webp')}.home-links [data-help=support]{background-image:url('../../../assets/home/support-button-compact-fast.webp');--button-mask:url('../../../assets/home/support-button-compact-fast.webp')}.home-links button::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#c7faff66 48%,#fff9 50%,transparent 58%);background-size:320% 100%;mask:var(--button-mask) center/100% 100% no-repeat;animation:home-metal-reflection 7s ease-in-out 2s infinite;mix-blend-mode:screen}.home-links [data-help=support]::after{animation-delay:2.5s}@keyframes home-metal-reflection{0%,15%{background-position:100% 50%;opacity:0}22%{opacity:.8}47%{opacity:.8}55%,100%{background-position:0% 50%;opacity:0}}
@media(min-width:1000px) and (max-height:780px){.brand-mark{width:55%;max-width:440px;margin-top:-12px}.brand-mark .brand-logo{width:100%;margin:0}.home-links button{width:130px;height:38px}}
@media(max-width:999px){.brand-mark{width:min(80%,460px);margin:0 auto}.brand-mark .brand-logo{width:100%;margin:0}.home-links button{width:130px;height:38px}}
@media(prefers-reduced-motion:reduce){.brand-mark::after,.frame-light,.home-links button::after{display:none}}
/* Pokémon-style pixel windows. Borders are drawn in CSS, so text stays live and sharp. */
#home-help{--pixel-accent:#70e2e7;--pixel-dark:#123a4c;--pixel-light:#d5f8ed;width:min(680px,calc(100vw - 28px));max-height:min(84svh,760px);padding:0;border:0;border-radius:0;overflow:hidden;color:#e7f5ed;background:#071d2b;box-shadow:0 18px 70px #000b;clip-path:polygon(12px 0,calc(100% - 12px) 0,calc(100% - 12px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 12px),0 calc(100% - 12px),0 12px,4px 12px,4px 4px,12px 4px);background:linear-gradient(var(--pixel-accent),var(--pixel-accent)) padding-box}
#home-help[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;padding:5px;animation:pixel-window-open .14s steps(3,end)}
#home-help[data-theme=rocket]{--pixel-accent:#ff7484;--pixel-dark:#431d31;--pixel-light:#ffdfcb}
#home-help[data-theme=safari]{--pixel-accent:#95d985;--pixel-dark:#1e3d31;--pixel-light:#e9f8bf}
#home-help[data-theme=hunts]{--pixel-accent:#f1c874;--pixel-dark:#393628;--pixel-light:#fff1c8}
#home-help[data-theme=tower]{--pixel-accent:#cda0ff;--pixel-dark:#30264c;--pixel-light:#f1e4ff}
#home-help .pixel-dialog-header{display:flex;align-items:center;gap:14px;margin:0;padding:17px 18px;background:var(--pixel-dark);border:3px solid #071923;border-bottom:4px solid var(--pixel-accent);box-shadow:inset 0 3px #ffffff18;min-width:0}
#help-icon{width:48px;height:48px;object-fit:contain;image-rendering:pixelated;flex:none;filter:drop-shadow(2px 2px 0 #0005)}
#home-help .pixel-dialog-header>div{min-width:0;flex:1}.pixel-kicker{font:700 10px/1.4 monospace!important;letter-spacing:1.5px;margin:0 0 6px!important;color:var(--pixel-accent)}
#home-help h2{font:700 clamp(19px,3vw,25px)/1.25 'Courier New',monospace;font-style:normal;color:var(--pixel-light);text-shadow:2px 2px #0006;overflow-wrap:anywhere}
#home-help button{border:3px solid #061823;border-radius:0;color:var(--pixel-light);background:var(--pixel-dark);box-shadow:inset 2px 2px #ffffff39,inset -2px -2px #0005,2px 2px #061823;font-weight:700;transition:filter .12s,transform .12s}
#home-help button:hover{filter:brightness(1.25)}#home-help button:active{transform:translate(1px,1px);box-shadow:inset 2px 2px #0005}
#home-help #close-help{font:700 25px/1 monospace;width:36px;height:36px;flex:none;padding:0;align-self:center}
#help-content{overflow:auto;overscroll-behavior:contain;min-height:0;padding:22px 24px;background:repeating-linear-gradient(0deg,#0c2432 0px,#0c2432 3px,#0d2634 3px,#0d2634 6px);border-left:3px solid #071923;border-right:3px solid #071923;scrollbar-width:thin;scrollbar-color:var(--pixel-accent) #071923}
#help-content section{position:relative;padding:0 0 0 17px;margin:0 0 22px;border-left:3px solid var(--pixel-accent)}#help-content section:last-child{margin-bottom:0}
#help-content h3{font:700 17px/1.4 'Courier New',monospace;margin:0 0 10px;color:var(--pixel-accent)}#help-content p{font:15px/1.75 Arial,sans-serif;margin:0;color:#e7f2f3}
#home-help .pixel-dialog-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;background:var(--pixel-dark);border:3px solid #071923;border-top:3px solid var(--pixel-accent)}
.pixel-dialog-footer>span{font:11px/1.5 monospace;color:var(--pixel-light);opacity:.8}#home-help #dismiss-help{font:700 14px/1 monospace;min-width:120px;min-height:38px;padding:9px 14px}#dismiss-help span{display:inline-block;margin-left:7px;color:var(--pixel-accent);animation:pixel-arrow 1.2s steps(2,end) infinite}
#home-help::backdrop{background:#010d19c9;backdrop-filter:blur(3px)}@keyframes pixel-window-open{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes pixel-arrow{50%{transform:translateX(3px)}}
@media(max-width:480px){#home-help .pixel-dialog-header{padding:12px 10px;gap:9px}#help-icon{width:36px;height:36px}.pixel-kicker{font-size:9px!important;letter-spacing:.6px}#help-content{padding:18px 14px}#help-content p{font-size:14px}#home-help .pixel-dialog-footer{padding:10px}.pixel-dialog-footer>span{font-size:10px}#home-help #dismiss-help{min-width:96px}}
@media(prefers-reduced-motion:reduce){#home-help[open],#dismiss-help span{animation:none}}