@font-face{font-family:PixelWorld;src:url("gameasync/Fonts/power%20red%20and%20green.ttf");font-display:swap}
@font-face{font-family:PixelClear;src:url("gameasync/Fonts/power%20clear.ttf");font-display:swap}
#entry{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;background:#184052;color:#fff1b8;font-family:PixelWorld,monospace;isolation:isolate}
#entry *{box-sizing:border-box}
.landing-backdrop{position:fixed;inset:-7%;z-index:-2;background:linear-gradient(0deg,#0b263bd9,#123b4d12 65%),url("landing-reference-v1.png?v=1") 50% 54%/cover;filter:blur(36px);transform:scale(1.1);pointer-events:none}
.landing-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:23px 3%;gap:20px;flex-shrink:0}
.landing-brand{display:flex;align-items:center;color:inherit;text-decoration:none;font-size:23px;line-height:1;white-space:nowrap}
.brand-x{color:#ffdc71}
.pixel-mark{width:16px;height:16px;background:linear-gradient(#ffdc71 0 38%,transparent 38% 62%,#fff6c9 62%);margin-right:12px}
.landing-header nav{display:flex;gap:34px;align-items:center;font-size:22px}
.landing-header nav a,.landing-header nav button,.landing-footer button{appearance:none;background:none;border:0;color:inherit;font:inherit;text-decoration:none;cursor:pointer;padding:3px;text-shadow:2px 2px #142f45}
.landing-header nav a:before{content:">";margin-right:10px;color:#ffdb71}
.landing-header small{font-size:15px;margin-left:7px;color:#ffdb71}
.landing-header button:hover,.landing-footer button:hover{color:#ffe28b}
#entry :focus-visible{outline:3px solid #ffe28b;outline-offset:5px}
.landing-main{width:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0 38px}
.hero-copy{text-align:center;position:relative;z-index:1}
.hero-copy h1{font-size:clamp(44px,4.05vw,78px);font-weight:normal;letter-spacing:2px;line-height:.98;margin:0 0 15px;text-shadow:3px 3px #153246}
.hero-copy p{font-size:clamp(21px,1.45vw,28px);margin:17px 10px 20px;text-shadow:2px 2px #163a4a}
#entry .pixel-button{font-family:PixelWorld,monospace;font-size:21px;font-weight:normal;letter-spacing:1px;background:#ffe995;color:#173749;border:3px solid #173749;box-shadow:3px 4px 0 #112b3e;padding:13px 24px;cursor:pointer;border-radius:0;line-height:1.1}
#entry .pixel-button:hover:not(:disabled){background:#fff3bd;transform:translateY(-2px)}
#entry .pixel-button:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 2px 0 #112b3e}
.hero-play{position:relative;z-index:2;margin-bottom:-8px}
.hero-play span{font-size:17px;margin-right:9px}
.landscape{position:relative;width:min(1440px,76vw);aspect-ratio:1352/489;margin:0;overflow:hidden;box-shadow:0 9px 30px #122e3420}
.landscape img{position:absolute;max-width:none;width:139.275148%;height:184.04908%;left:-18.491124%;top:-58.07771%;display:block}
.landing-footer{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 4% 20px;font-size:20px;gap:20px}
.landing-footer button:first-child{font-size:17px;opacity:.8}
.landing-footer span{margin-left:15px;font-family:monospace}
#entry.view-only .hero-copy,#entry.view-only .landing-header{visibility:hidden}
#entry.view-only .landscape{width:min(1600px,92vw)}
#entry dialog{border:3px solid #1c3a48;outline:3px solid #ead58a;padding:30px 32px 23px;background:#fbf3dc;color:#203d45;width:min(670px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;box-shadow:8px 9px 0 #102e4380;border-radius:0;font-family:PixelClear,monospace}
#entry dialog::backdrop{background:#0a2537a8;backdrop-filter:blur(6px)}
#entry .dialog-close{position:absolute;right:12px;top:8px;border:0;background:none;color:#34505c;font:30px monospace;padding:0 5px;cursor:pointer}
.dialog-kicker{font-family:PixelWorld,monospace;font-size:16px;letter-spacing:2px;color:#72806a;margin:0 0 9px}
#entry h2{font-family:PixelWorld,monospace;font-weight:normal;font-size:38px;line-height:1.1;margin:5px 0 10px}
#trainer-description{font-size:22px;line-height:1.2;margin:0 0 18px;color:#647166}
#join-form label{font-family:PixelClear,monospace;font-size:22px;font-weight:normal;margin-bottom:6px}
#entry #nickname{font-family:PixelClear,monospace;width:100%;font-size:26px;line-height:1;padding:10px 12px;border:2px solid #94a094;box-shadow:inset 2px 2px #e5e4ca;background:#fffdf2;color:#203d45}
#starter-picker{border:0;padding:0;margin:20px 0 0}
#starter-picker legend{font-size:22px;padding:0;margin-bottom:10px;width:100%}
#starter-picker legend>span{float:right;font-size:17px;color:#778477}
.starter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.starter-choice{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:9px 5px 12px;border:2px solid #c5cbb5;background:#f2f1df;color:#203d45;cursor:pointer;font:20px PixelClear,monospace}
.starter-choice.grass{--accent:#527858;--wash:#e0ebcd}
.starter-choice.fire{--accent:#b9683c;--wash:#f8e0c4}
.starter-choice.water{--accent:#497c96;--wash:#d6e8ea}
.starter-choice:hover{background:var(--wash);border-color:var(--accent)}
.starter-choice[aria-pressed=true]{background:var(--wash);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.starter-choice small{align-self:flex-start;margin-left:6px;font:16px PixelWorld,monospace;color:#829183}
.starter-sprite{display:block;width:120px;height:110px;background-repeat:no-repeat;background-size:1200px 1200px;image-rendering:pixelated}
.sprite-1{background-image:url("gameasync/Graphics/CustomBattlers/spritesheets/spritesheets_base/1.png")}
.sprite-4{background-image:url("gameasync/Graphics/CustomBattlers/spritesheets/spritesheets_base/4.png")}
.sprite-7{background-image:url("gameasync/Graphics/CustomBattlers/spritesheets/spritesheets_base/7.png")}
.starter-choice strong{font-size:23px;font-weight:normal}
.starter-type{font:13px PixelWorld,monospace;color:var(--accent);margin:7px 0}
.starter-trait{font-size:17px;color:#66766a}
.starter-selected{display:none;position:absolute;right:8px;top:7px;font:17px monospace;color:var(--accent)}
[aria-pressed=true]>.starter-selected{display:block}
#partner-note{font-size:20px;color:#677765;min-height:22px;margin:12px 0 0}
#entry #join-button{width:100%;text-align:center;margin:12px 0 0}
#join-button span{float:none;margin-left:12px}
#entry #join-status{font-size:18px;min-height:22px;text-align:center;line-height:1.1;margin:15px 0 0;color:#627567}
#entry .entry-help{font:17px PixelClear,monospace;color:#78806e;text-align:center;margin:8px 0 0}
#returning-player{font-size:24px;padding:18px;background:#e5ebd6;line-height:1.2;border-left:3px solid #72905e}
#about-dialog>p:not(.dialog-kicker){font-size:24px;line-height:1.25}
#about-dialog .attribution{color:#677765}
@media(min-width:1700px){.landing-main{justify-content:flex-start;padding-top:5px}.landscape{margin-top:0}.hero-copy h1{margin-top:4px}.hero-copy p{margin:21px 10px}.hero-play{margin-bottom:-6px}}
@media(max-width:700px){.landing-header{padding:23px 20px;gap:12px}.landing-brand{font-size:20px}.pixel-mark{width:13px;height:13px;margin-right:7px}.landing-header nav{gap:17px;font-size:20px}.landing-header nav>a{display:none}.landing-header small{display:none}.landing-main{justify-content:center;padding-bottom:48px}.hero-copy h1{font-size:52px;line-height:1.03;letter-spacing:0}.hero-copy p{max-width:280px;margin:20px auto;font-size:23px;line-height:1.25}.landscape{width:92vw;aspect-ratio:1.55;margin-top:28px}.landscape img{width:249.79%;height:184.05%;left:-44%;top:-58.08%}.hero-play{margin:0}.landing-footer{padding:16px 20px;font-size:18px}.landing-footer button:first-child{font-size:15px;max-width:135px;text-align:left}#entry dialog{padding:28px 17px 18px;max-height:calc(100dvh - 24px)}#entry h2{font-size:32px}#trainer-description{font-size:20px}.starter-grid{gap:7px}.starter-sprite{width:88px;height:84px;background-size:880px 880px}.starter-choice{padding:7px 2px 10px}.starter-choice strong{font-size:19px}.starter-trait{display:none}.starter-type{font-size:11px}.starter-choice small{font-size:13px;margin-left:4px}#entry .entry-help{font-size:16px}}
@media(prefers-reduced-motion:reduce){#entry *{scroll-behavior:auto!important;transition:none!important}}

/* Blend the illustration into the surrounding scene, keeping its centre crisp. */
.landscape{
 box-shadow:none;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 82%,transparent);
 mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 82%,transparent);
 -webkit-mask-composite:source-in;
 mask-composite:intersect;
}
.landing-backdrop{filter:blur(44px)}
.hero-play{margin-bottom:-20px}
@media(min-width:1700px){.hero-play{margin-bottom:-20px}}
@media(max-width:700px){
 .landscape{margin-top:16px;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 84%,transparent);
 mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 84%,transparent)}
 .hero-play{margin-bottom:0}
}

/* Extend the actual artwork to the screen edges; fade only vertically. */
.landscape,#entry.view-only .landscape{
 width:100%;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent);
 mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent);
}
@media(max-width:700px){
 .landscape{width:100%;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent);
 mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent)}
}