:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e9dfcb;background:#141918;font-synthesis:none;font-weight:400;--muted:#a19f92;--line:#3d4036;--accent:#d4ad6a;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 27% 46%,#2b30251f 0,transparent 55%),#141918}a{color:inherit;text-decoration:none}button,input{font:inherit}.header{padding:30px 46px;display:flex;align-items:center;border-bottom:1px solid #bda36b0c}.brand{display:inline-flex;align-items:center;gap:12px}.brand span{font-family:Georgia,"Times New Roman",serif;font-size:13px;font-weight:500;letter-spacing:.2em;color:#d5c3a0}.brand img{width:29px;height:29px}.auth-layout{flex:1;display:grid;grid-template-columns:minmax(340px,1fr) 410px;gap:54px;align-items:center;width:min(1100px,calc(100% - 96px));margin:auto;padding:40px 0 32px}.world{position:relative;height:560px;isolation:isolate;align-self:center}.world-ground{position:absolute;left:1%;right:1%;top:25%;height:66%;background:radial-gradient(ellipse,#71694722 0,#464b3320 40%,transparent 70%);z-index:-1}.world-ground:after{content:"";position:absolute;inset:30% 7% 22%;border:1px solid #af95671c;transform:rotate(-30deg) skewX(30deg);border-radius:6px;background:repeating-linear-gradient(0deg,transparent,transparent 43px,#a08e6410 44px),repeating-linear-gradient(90deg,transparent,transparent 43px,#a08e6410 44px)}.building{position:absolute;display:block;height:auto;object-fit:contain;filter:drop-shadow(0 16px 9px #050a0a75);pointer-events:none;user-select:none}.building-hall{width:79%;left:13%;top:0;z-index:2}.building-smith{display:none;width:75%;left:20%;top:2%;z-index:2}.building-tower{width:43%;left:-3%;top:39%;z-index:3}.building-tavern{width:54%;right:-3%;top:49%;z-index:4}.world-rule{position:absolute;bottom:0;left:27%;right:22%;display:flex;align-items:center;gap:12px}.world-rule span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#af895957)}.world-rule span:last-child{transform:rotate(180deg)}.world-rule i{width:5px;height:5px;border:1px solid #af8959;transform:rotate(45deg)}body[data-page=register] .building-hall{display:none}body[data-page=register] .building-smith{display:block}main{display:flex;flex-direction:column;align-items:center;width:100%;padding:0;position:relative}.card{width:100%;max-width:438px;background:linear-gradient(145deg,#252b25,#202623 65%);border:1px solid #74634880;border-radius:5px;box-shadow:0 24px 70px -20px #0008,inset 0 0 0 4px #1b211b,inset 0 0 0 5px #83704a18;position:relative;overflow:hidden}.card:before,.card:after{content:"";position:absolute;width:7px;height:7px;background:#a78952;border:1px solid #cfad6d55;transform:rotate(45deg);top:8px;z-index:1;pointer-events:none}.card:before{left:8px}.card:after{right:8px}.tabs{display:flex;margin:0 29px;border-bottom:1px solid #7463485c;gap:28px}.tabs a{font-size:12px;padding:23px 1px 18px;color:#929889;position:relative}.tabs a[aria-current]{color:#e4c486;font-weight:500}.tabs a[aria-current]:after{position:absolute;content:"";height:2px;background:#c7a263;bottom:-1px;left:0;right:0}.card-body{padding:30px 33px 29px}.eyebrow{display:block;font-size:9px;letter-spacing:.18em;font-weight:500;color:#a09273}h1{font-family:Georgia,"Times New Roman",serif;font-size:29px;letter-spacing:-.02em;font-weight:400;margin:10px 0 10px;line-height:1.25;color:#f0dfba}.heading p{font-size:12px;line-height:1.7;color:#a7aa9b;margin:0 0 26px}.field{margin-bottom:19px}label{display:block;font-size:12px;font-weight:450;color:#d6cfbc;margin-bottom:9px}input{height:46px;width:100%;border:1px solid #58604a;border-radius:3px;padding:0 13px;background:#171e1a;color:#eee3ce;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;box-shadow:inset 0 2px 5px #0002}input::placeholder{color:#7d8777;font-size:12px}input:focus{border-color:#bd9c61;box-shadow:0 0 0 3px #c4a56a12;background:#1a211b}.hint{font-size:10px;color:#949b89;margin:8px 0 0;line-height:1.5}.password-wrap{position:relative}.password-wrap input{padding-right:47px}.reveal{position:absolute;right:3px;top:3px;height:40px;width:40px;background:none;border:0;border-radius:3px;color:#969e88;cursor:pointer;display:grid;place-items:center}.reveal svg{width:18px;height:18px}.reveal:hover{color:#d5b477;background:#e7d7af08}.submit{width:100%;min-height:46px;display:flex;justify-content:space-between;align-items:center;border:1px solid #d3aa64;border-radius:3px;background:linear-gradient(#c49b54,#aa7d3e);box-shadow:inset 0 1px #efd4a16b,0 3px 8px #0002;color:#201c12;padding:12px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:filter .15s,transform .15s;margin-top:26px}.submit:hover{filter:brightness(1.12)}.submit:active{transform:translateY(1px)}.submit:disabled{opacity:.65;cursor:wait}.submit span:last-child{font-size:19px;font-weight:300}.submit span:first-child{font-size:13px;font-weight:600}.switch{font-size:11px;color:#9ba18e;text-align:center;margin:23px 0 0;line-height:1.7}.switch a{color:#d8b879;border-bottom:1px solid #ae8b4d65;padding-bottom:2px;margin-left:4px}.below{display:flex;align-items:center;gap:7px;font-size:10px;color:#8d9680;margin:20px 0 0}.message{background:#3e2924;color:#f0b4a0;font-size:12px;line-height:1.5;border:1px solid #885644;padding:11px 12px;border-radius:3px;margin-top:15px}.message[hidden]{display:none}.account{padding:38px 33px;text-align:center}.success-mark{display:grid;place-items:center;border:1px solid #a88a4e80;background:#ab8a4920;color:#d8b879;width:44px;height:44px;border-radius:50%;font-size:22px;margin:0 auto 25px}.account-login{font-size:14px;color:var(--muted);overflow-wrap:anywhere}.account .submit{margin-top:30px}footer{text-align:center;color:#737d6d;font-size:10px;padding:18px 20px 23px;letter-spacing:.06em}a:focus-visible,button:focus-visible{outline:2px solid #ddb96b;outline-offset:4px}noscript{text-align:center;padding:20px;color:#e4a293}
@media(min-width:1500px){.auth-layout{gap:90px;max-width:1200px}.world{height:610px}}
@media(max-width:1050px){.auth-layout{grid-template-columns:minmax(250px,1fr) 390px;gap:28px;width:calc(100% - 56px)}.world{height:470px}.building-hall{width:94%;left:2%;top:6%}.building-smith{width:90%;left:7%;top:6%}.building-tower{width:47%;left:-8%;top:43%}.building-tavern{width:61%;right:-5%;top:51%}.world-rule{bottom:8%}}
@media(max-width:780px){.header{padding:22px 24px}.auth-layout{display:flex;flex-direction:column;gap:0;width:100%;padding:5px 22px 20px}.world{height:180px;width:100%;max-width:410px;flex:none}.building-hall{width:205px;left:calc(50% - 102px);top:-18px}.building-smith{width:195px;left:calc(50% - 97px);top:-15px}.building-tower,.building-tavern,.world-rule{display:none}.world-ground{top:25%;height:70%;left:15%;right:15%}.world-ground:after{display:none}main{flex:none}.card{max-width:410px}.brand span{font-size:11px}.brand img{width:25px;height:25px}.card-body{padding:27px 27px 26px}.tabs{margin:0 27px}.below{margin-top:18px}footer{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* A terrain map behind a centred account panel. Buildings and fences are
   independent original sprites; the generated ground is a repeating tile. */
body{background:#45482e url('/assets/ground.webp') repeat;background-size:var(--terrain-size,640px) var(--terrain-size,640px);isolation:isolate;overflow-x:clip}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#10171050 0,#11181128 45%,#10170f75 100%)}
.header{position:relative;z-index:2;justify-content:center;padding:25px 20px 16px;border:0;background:linear-gradient(#101710b3,transparent)}
.brand{gap:15px}.brand span{font-size:clamp(24px,3.3vw,44px);letter-spacing:.13em;color:#f4ddb0;text-shadow:0 2px 3px #000,0 5px 20px #000b}.brand img{width:40px;height:40px;filter:drop-shadow(0 2px 3px #000)}
.auth-layout{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:none;gap:0;margin:0;padding:28px 20px 18px;flex:1}
main{width:100%;max-width:430px;z-index:2;flex:none}
.world{position:fixed;inset:auto;left:50%;top:calc(50vh + 45px);width:var(--world-width,100vw);max-width:none;height:var(--world-height,calc(100vh - 90px));align-self:auto;z-index:0;pointer-events:none;opacity:.96;isolation:isolate;transform:translate(-50%,-50%) scale(var(--world-scale,1));transform-origin:center;background:none}
.world-ground,.world-rule{display:none}
.fence{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:1;filter:drop-shadow(0 8px 5px #0008)}
.fence-production{display:none}body[data-page=register] .fence-city{display:none}body[data-page=register] .fence-production{display:block}
.building{display:block;filter:drop-shadow(0 10px 7px #0008)}
.building-hall{width:256px;left:9%;right:auto;top:9%;bottom:auto;z-index:2}
.building-smith{width:282px;left:auto;right:8%;top:auto;bottom:19%;z-index:3}
.building-tower{width:230px;left:auto;right:13%;top:12%;bottom:auto;z-index:2}
.building-tavern{width:230px;left:12%;right:auto;top:auto;bottom:14%;z-index:3}
body[data-page=register] .building-hall,body[data-page=login] .building-smith{display:block}
.card{background:linear-gradient(145deg,#252b25fa,#1c241ffb 65%);box-shadow:0 18px 80px #0009,inset 0 0 0 4px #1b211b,inset 0 0 0 5px #83704a24}
.below{color:#ded6bf;text-shadow:0 1px 3px #000;background:#142016b3;border:1px solid #a6925d2b;border-radius:3px;padding:7px 12px;margin-top:15px}
footer{position:relative;z-index:2;padding:12px 20px 17px;color:#ded5bd;text-shadow:0 1px 3px #000;background:linear-gradient(transparent,#101710a8)}
@media(max-width:680px){.header{padding:25px 10px 14px}.brand{gap:9px}.brand span{font-size:clamp(21px,5.5vw,32px);letter-spacing:.07em}.brand img{width:28px;height:28px}.auth-layout{padding:16px 21px 20px}.world{top:calc(50vh + 42px)}.card-body{padding:26px 25px}.card{background:linear-gradient(145deg,#252b25fc,#1c241ffc)}.tabs{margin:0 25px}footer{font-size:9px}}

/* Both routes keep the same outer geometry and button position. */
.card:not(.account){height:460px;min-height:460px;display:flex;flex-direction:column;flex-shrink:0}
.card:not(.account) .tabs{flex-shrink:0}
.card:not(.account) .card-body{flex:1;min-height:0;display:flex;flex-direction:column}
.card-body form{flex:1;min-height:0;display:flex;flex-direction:column}
.card-body .field{flex-shrink:0}
.card-body .submit{margin-top:auto;flex-shrink:0}
.card-body .switch{flex-shrink:0}
.card-body .message{flex-shrink:0}

main{max-width:400px}
.card:not(.account) .card-body{padding:24px 26px}
.card-body h1{font-size:26px;line-height:34px;margin:0}
.card-body .heading{height:54px;flex:0 0 54px}
.card-body .field{margin-bottom:12px}
.card-body label{margin-bottom:6px}
.card-body input{height:42px}
.card-body .reveal{height:36px}
.card-body .hint{margin-top:5px;line-height:1.4}
.card-body .submit{min-height:42px;padding:9px 14px}
.card-body .switch{margin-top:18px;line-height:1.6}

/* Shared header and action rows; only the fields change between routes. */
.form-fields{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.card-body .form-fields .field:last-child{margin-bottom:0}
.card-body .submit{margin-top:16px}
.card-body .message{margin:8px 0 0;padding:0;border:0;border-radius:0;background:none;font-size:11px;line-height:1.4}
body[data-page=login] .form-fields{gap:8px}

/* Left-side buildings face inward toward the account panel. */
.building-hall,.building-tavern{transform:scaleX(-1)}

.brand img{width:56px;height:56px;object-fit:contain;flex-shrink:0}
@media(max-width:680px){.brand img{width:36px;height:36px}}