@import url('/greyhaven/palette.css');
#message{max-width:1150px;margin:20px auto 0;padding:0 5%}#message:empty{display:none}
:root{color-scheme:dark;font-family:Georgia,serif;background:#0b1514;color:#e9e4d5}*{box-sizing:border-box}body{margin:0}header{max-width:1280px;margin:auto;padding:28px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18}a{color:#cfdda9;text-decoration:none}.wordmark{letter-spacing:.26em;font-weight:bold}select,input,button,.button{font:inherit;color:inherit;border:1px solid #9dba8260;background:#18302a;border-radius:5px;padding:12px 19px}button,.button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e6d699;outline-offset:4px}main{max-width:1280px;margin:auto;padding:56px 5%}.eyebrow{font:12px system-ui;letter-spacing:.18em;color:#afbb9a}h1{font-size:clamp(36px,5vw,66px);font-weight:normal;line-height:1.1;max-width:850px;margin:20px 0}h2{font-weight:normal;font-size:32px;letter-spacing:.08em}.intro{color:#aab6ae;font-size:20px}.worlds{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}.world{position:relative;overflow:hidden;min-height:470px;padding:220px 30px 30px;background:#14231f;border:1px solid #ffffff1a;border-radius:9px}.world p:not(.eyebrow){line-height:1.65;color:#bac7bd;min-height:80px}.landscape{position:absolute;inset:0 0 auto;height:195px;background:radial-gradient(ellipse at 76% 30%,#eddd9860,transparent 25%),linear-gradient(155deg,#355641,#203c32 55%,#112b25)}.landscape:after{content:'';position:absolute;inset:0;background:linear-gradient(35deg,transparent 35%,#152e22 36%,#152e22 46%,transparent 47%) 0 0/100px 240px;clip-path:polygon(0 65%,10% 15%,20% 70%,30% 5%,45% 60%,55% 20%,70% 80%,80% 0,100% 70%,100% 100%,0 100%)}.grey .landscape{background:radial-gradient(circle at 73% 25%,#cbd8aa80,transparent 17%),linear-gradient(150deg,#426054,#182e2b)}.button{display:inline-block;min-width:180px;text-align:center}.button:hover,button:hover{background:#2b4939}footer{color:#8e9e93;font:13px system-ui;padding:35px 0}.auth{max-width:580px;border:1px solid #ffffff24;padding:28px;margin-top:30px;border-radius:8px}.auth p{color:#a9b9ad;line-height:1.5}label{display:block;margin:18px 0 8px}input{width:100%;background:#0c1c17}.actions{display:flex;align-items:center;gap:12px;margin:20px 0;flex-wrap:wrap}#message{color:#e1c889;white-space:pre-wrap}canvas{display:block;width:100%;height:auto;max-height:85vh;background:#0b1514;object-fit:contain;border:1px solid #ffffff1a}[hidden]{display:none!important}@media(max-width:700px){.worlds{grid-template-columns:1fr}main{padding-top:30px}.world{padding:210px 23px 26px;min-height:430px}.auth{padding:20px}}

#play canvas{width:100%;height:850px;max-height:none;object-fit:fill}@media(max-width:700px){#game{padding:12px 0}#game>h1,#game>p,#game>a,#play>.actions{margin-left:16px;margin-right:16px}#play canvas{height:950px}}

body:has(#game:not([hidden])){background:linear-gradient(90deg,#081415b8,#0c181854),url('/greyhaven/greyhaven-dusk.jpg') center top/cover fixed}
#game .auth{background:#101b1be8;box-shadow:0 14px 45px #0009;border:1px solid #8e7750}
body:has(#play:not([hidden])) header{padding-block:7px}
#game:has(#play:not([hidden])){max-width:1560px;padding:10px 2%}
#game:has(#play:not([hidden]))>h1,#game:has(#play:not([hidden]))>p{display:none}
#play>.actions{margin:4px 0 8px}#play canvas{height:clamp(720px,85vh,1080px);border:1px solid #937c52;box-shadow:0 12px 40px #0009}
@media(max-width:700px){#game:has(#play:not([hidden])){padding:4px}#play canvas{height:1000px}}

body:has(#play:not([hidden])){margin:0;background:#11131B;overflow:hidden}
body:has(#play:not([hidden])) header,#game:has(#play:not([hidden]))>a,#play>.actions{display:none}
#game:has(#play:not([hidden])){margin:0;padding:0;max-width:none}
#play canvas{width:100vw;height:100vh;height:100dvh;margin:0;border:0;box-shadow:none;background:#11131B}
body:has(#game:not([hidden])) .auth{background:#1D202DF5;border-color:#414354;color:#EAE5D9}
#game input,#game button{background:#252938;color:#EAE5D9;border-color:#414354}
#game button:hover{background:#303546;border-color:#D2AB68}