/* Original steppe atmosphere, carved wood, aged brass and readable parchment. */
:root{--living-brass:#d1b06d;--living-parchment:#eee0b7;--living-wood:#473322}
.scene-entry{min-height:100dvh}
.scene-entry .game-stage{overflow:auto;overscroll-behavior:contain}
.auth-scene{
 position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.82fr);
 align-items:center;gap:clamp(36px,5vw,88px);min-height:100%;width:100%;
 padding:clamp(32px,5vh,64px) max(5.6vw,28px);overflow:hidden;
 color:#f4e8c8;background:
 linear-gradient(90deg,#0b1e17e8 0%,#14271aa8 42%,#0d201bdd 75%,#091a16ed),
 linear-gradient(0deg,#0a1816e8,transparent 70%),
 url('./assets/art/battle-steppe.webp') 45% 42%/cover;
}
.auth-scene:before{
 content:"";position:absolute;inset:-15%;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 33% 30%,#eccb7540,transparent 36%),
 radial-gradient(ellipse at 72% 63%,#b9cab415,transparent 30%),
 linear-gradient(118deg,transparent 20%,#e6d09a10 32%,transparent 43%);
 animation:living-light 27s ease-in-out infinite alternate;
}
.auth-scene:after{
 content:"";position:absolute;inset:-16% 0 0;z-index:0;pointer-events:none;opacity:.52;
 background-image:
 radial-gradient(circle at 12% 83%,#edb75a 0 1px,transparent 2px),
 radial-gradient(circle at 31% 68%,#ffe5a0 0 1px,transparent 2px),
 radial-gradient(circle at 42% 90%,#bf8c3b 0 1.4px,transparent 3px),
 radial-gradient(circle at 65% 73%,#ffd077 0 1px,transparent 2px),
 radial-gradient(circle at 80% 91%,#e9c779 0 1px,transparent 2px),
 radial-gradient(circle at 92% 66%,#d6a553 0 1px,transparent 2px);
 animation:living-embers 19s linear infinite;
}
.auth-world{position:relative;z-index:1;min-width:0;max-width:710px;padding:28px 0}
.auth-world-copy{position:relative;max-width:620px}
.auth-emblem{display:block;width:92px;height:92px;object-fit:contain;margin-bottom:25px;filter:drop-shadow(0 7px 14px #050e0d);animation:living-sigil 10s ease-in-out infinite}
.auth-world .eyebrow,.auth-world-eyebrow{font-size:11px;letter-spacing:4px;color:#dcc084;font-weight:700;margin-bottom:14px}
.auth-world-title,.auth-world h1{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(37px,4.1vw,66px);font-weight:600;line-height:1.13;letter-spacing:.6px;color:#f3e6c5;text-shadow:0 4px 22px #050f0bdd}
.auth-world-title span,.auth-world h1 span{display:block;color:#dfbd76;letter-spacing:5px;font-size:1.15em;margin-top:4px}
.auth-world-lore,.auth-world-copy>p:not(.eyebrow){max-width:495px;margin:25px 0 0;color:#d1d7c4;line-height:1.85;font-size:14px;text-shadow:0 2px 8px #03100a}
.auth-world-divider{display:block;width:110px;height:1px;margin:27px 0;background:linear-gradient(90deg,#d5b574,transparent)}
.auth-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:535px;margin-top:34px;padding-top:24px;border-top:1px solid #c0a36145}
.auth-reward{position:relative;min-width:0;padding-left:0}
.auth-reward-icon{display:block;margin-bottom:9px;font-size:22px;line-height:1;color:#dfbb74;filter:drop-shadow(0 2px 5px #080e08)}
.auth-reward strong,.auth-reward b{display:block;color:#ead6a7;font-size:13px;font-weight:600;line-height:1.45}
.auth-reward small{display:block;margin-top:5px;color:#b4c1a8;font-size:10px;line-height:1.6}
.auth-world .badge{background:#102c2275;border-color:#c0a06470;color:#e4cd98}
.auth-scroll{
 position:relative;z-index:2;isolation:isolate;width:100%;max-width:460px;justify-self:end;
 padding:37px 37px 31px;border:1px solid #d0af6eb3;border-radius:11px;
 color:#352c21;background:
 repeating-linear-gradient(176deg,#2a201522 0 2px,#ab804b18 3px,#2e201533 4px 6px),
 linear-gradient(128deg,#796040,#3d2c1e 65%,#685035);
 box-shadow:0 25px 65px #020e0ac9,0 4px 15px #01080599,inset 0 1px #ebd19355;
}
.auth-scroll:before{
 content:"";position:absolute;inset:9px;z-index:-1;pointer-events:none;border:1px solid #9e7b415e;border-radius:5px;
 background:
 radial-gradient(ellipse at 0 0,#b08d4145,transparent 38%),
 radial-gradient(ellipse at 100% 100%,#b2965650,transparent 42%),
 repeating-linear-gradient(7deg,#c7b78607 0 1px,transparent 2px 5px),
 linear-gradient(100deg,#e5d3a5,#f0e4c4 47%,#e5d5ae);
 box-shadow:inset 0 0 32px #98732f26,inset 0 1px #fff5d877;
}
.auth-scroll:after{
 content:"";position:absolute;inset:4px;pointer-events:none;border:1px solid #c9a66c52;border-radius:7px;
 background:
 radial-gradient(circle at 8px 8px,#edd18e 0 2px,#49301a 3px,transparent 4px),
 radial-gradient(circle at calc(100% - 8px) 8px,#edd18e 0 2px,#49301a 3px,transparent 4px),
 radial-gradient(circle at 8px calc(100% - 8px),#ad8b4d 0 2px,#49301a 3px,transparent 4px),
 radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),#ad8b4d 0 2px,#49301a 3px,transparent 4px);
}
.auth-scroll .auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 0 28px;padding:4px;border:1px solid #9e805648;border-radius:5px;background:#cfbb8c40}
.auth-scroll .auth-tabs button{min-height:39px;padding:9px 7px;border:1px solid transparent;border-radius:3px;background:transparent;color:#725d3b;font-size:11px;font-weight:600;letter-spacing:.2px;transition:background .2s,color .2s,border-color .2s}
.auth-scroll .auth-tabs button:hover{color:#302e20;background:#c4ac7240}
.auth-scroll .auth-tabs button.active{border-color:#6c753b;background:linear-gradient(#385137,#283e2c);color:#f5e5be;box-shadow:0 2px 5px #6f5a3526,inset 0 1px #b1b68f45}
.auth-scroll-heading{margin-bottom:25px}
.auth-scroll .eyebrow{color:#8c713e;font-size:9px;letter-spacing:2px}
.auth-scroll h2{margin:0;color:#3c2e1b;font-family:Georgia,'Times New Roman',serif;font-size:29px;font-weight:700;line-height:1.25;letter-spacing:.2px}
.auth-scroll-heading p,.auth-scroll>.muted{margin:11px 0 0;color:#6e5b3d;line-height:1.65;font-size:12px}
.auth-scroll #auth-form{position:relative}
.auth-scroll .field{display:block;margin:0 0 18px;color:#57462e;font-size:11px;font-weight:600;letter-spacing:.2px}
.auth-scroll .field input{
 display:block;width:100%;height:48px;margin-top:8px;padding:0 13px;border:1px solid #a88c5c80;border-radius:4px;
 background:#fcf2d5a6;color:#342b20;font-size:14px;line-height:1.5;font-weight:400;letter-spacing:0;
 box-shadow:inset 0 2px 5px #66533214;transition:border-color .18s,box-shadow .18s,background .18s;
}
.auth-scroll .field input::placeholder{color:#a18b64;opacity:1}
.auth-scroll .field input:focus{outline:0;border-color:#5b7045;background:#fff7df;box-shadow:0 0 0 3px #536e2f20,inset 0 1px 3px #806c3610}
.auth-scroll #auth-error{margin:0 0 15px;color:#923f2b;font-size:11px;font-weight:600;line-height:1.6}
.auth-scroll #auth-error:empty{display:none}
.auth-scroll #auth-form .btn.primary{
 position:relative;width:100%;min-height:49px;margin-top:2px;padding:13px 16px;border:1px solid #8a7b42;border-radius:4px;
 background:linear-gradient(100deg,#3f5837,#27442d);color:#fae5b0;font-weight:700;font-size:13px;letter-spacing:.25px;
 box-shadow:0 4px 9px #6451322b,inset 0 1px #b4c08b40;text-shadow:0 1px #0c2e1ab3;
 transition:transform .18s,box-shadow .18s,background .18s;
}
.auth-scroll #auth-form .btn.primary:hover:not(:disabled){transform:translateY(-1px);background:linear-gradient(100deg,#516742,#365239);box-shadow:0 6px 15px #62502d35,inset 0 1px #d0c78c60}
.auth-scroll #auth-form .btn.primary:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 5px #6451322b}
.auth-scroll #auth-form .btn.primary:disabled{opacity:.65}
.auth-scroll .auth-footer,.auth-scroll .footer-note{margin:21px 0 0;padding-top:15px;border-top:1px solid #9f82494a;color:#836d48;font-size:9px;line-height:1.7;text-align:center}
.auth-scroll .auth-footer a{color:#435332;text-underline-offset:3px}
.auth-scroll :is(button,input):focus-visible{outline:2px solid #5b7045;outline-offset:3px}

/* Living accents stay decorative; card, map and battle geometry is untouched. */
.game-hud{border-bottom-color:#b58e4c66;background:linear-gradient(180deg,#13291feb,#10231df7);box-shadow:0 4px 24px #05110c80,inset 0 1px #c9a97222}
.game-hud:before{content:"";position:absolute;inset:auto 0 0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#c9a96b70 18%,#e1bd6f80 48%,#84663870 78%,transparent)}
.game-hud:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 25% 0,#e7c68a10,transparent 50%);animation:living-hud-light 16s ease-in-out infinite alternate}
.game-hud>:is(.hud-left,.game-wallet,.hud-actions){position:relative;z-index:1}
.game-home:after{
 content:"";position:absolute;inset:-12%;z-index:1;pointer-events:none;opacity:.4;
 background:radial-gradient(ellipse at 17% 22%,#d8d7b414,transparent 35%),radial-gradient(ellipse at 75% 53%,#d8d7b409,transparent 35%);
 animation:living-clouds 34s ease-in-out infinite alternate;
}
.home-title,.game-mode-grid,.home-footer{position:relative;z-index:3}
.home-emblem{animation:living-sigil 11s ease-in-out infinite}
.game-mode{box-shadow:0 6px 20px #020d0959,inset 0 1px #deca9a1c,inset 0 -1px #080f0a70}
.game-mode .mode-icon{transition:transform .22s,color .22s,filter .22s}
.game-mode .mode-arrow{transition:transform .22s,color .22s}
.game-mode:hover .mode-icon{transform:scale(1.08);color:#f1cf8c;filter:drop-shadow(0 0 9px #c0a0624a)}
.game-mode:hover .mode-arrow{transform:translateX(3px);color:#f3d995}
.game-shell :is(.hud-back,.hud-tool,.hud-profile,.btn){transition:transform .16s,border-color .2s,background-color .2s,box-shadow .2s}
.game-shell :is(.hud-back,.hud-tool,.hud-profile):hover{box-shadow:0 3px 9px #010b074d,inset 0 1px #c8b17030}
.game-shell .btn:hover:not(:disabled){box-shadow:0 4px 12px #020d0945,inset 0 1px #ecd29a24}
.game-shell .btn:active:not(:disabled){transform:translateY(1px)}
.hud-currency i{animation:living-metal 12s ease-in-out infinite}
.auth-scene .auth-world-copy,.auth-scene .auth-scroll{animation:living-arrive .6s ease-out both}
.auth-scene .auth-scroll{animation-delay:.08s}
@keyframes living-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes living-light{0%{transform:translate3d(-1.5%,0,0);opacity:.65}100%{transform:translate3d(2%,1%,0);opacity:1}}
@keyframes living-clouds{0%{transform:translate3d(-2%,0,0);opacity:.25}100%{transform:translate3d(2%,1%,0);opacity:.55}}
@keyframes living-embers{0%{transform:translate3d(0,10%,0);opacity:0}12%{opacity:.5}75%{opacity:.4}100%{transform:translate3d(2%,-14%,0);opacity:0}}
@keyframes living-sigil{0%,100%{filter:drop-shadow(0 5px 12px #030d0c) drop-shadow(0 0 5px #d4b57510)}50%{filter:drop-shadow(0 5px 12px #030d0c) drop-shadow(0 0 13px #d4b57533)}}
@keyframes living-metal{0%,100%{text-shadow:0 0 9px #cfa35620}50%{text-shadow:0 0 13px #e6be6d59}}
@keyframes living-hud-light{from{opacity:.3}to{opacity:1}}
@media(max-width:1100px){
 .auth-scene{gap:34px;padding-left:4.4vw;padding-right:4.4vw;grid-template-columns:minmax(0,1fr) minmax(330px,.9fr)}
 .auth-world-title,.auth-world h1{font-size:44px}
 .auth-world-title span,.auth-world h1 span{letter-spacing:3px}
 .auth-scroll{padding:32px 29px 28px}
 .auth-world-lore,.auth-world-copy>p:not(.eyebrow){font-size:12px}
 .auth-rewards{gap:12px}.auth-reward strong,.auth-reward b{font-size:11px}
}
@media(max-width:760px){
 .auth-scene{grid-template-columns:minmax(0,1fr);align-content:start;gap:26px;padding:30px max(6vw,20px) 32px;background-position:49% 15%;overflow:hidden}
 .auth-world{width:100%;max-width:480px;justify-self:center;padding:0}
 .auth-world-copy{max-width:none}
 .auth-emblem{width:58px;height:58px;margin-bottom:15px}
 .auth-world .eyebrow,.auth-world-eyebrow{font-size:8px;letter-spacing:3px;margin-bottom:11px}
 .auth-world-title,.auth-world h1{font-size:35px;line-height:1.12}
 .auth-world-title span,.auth-world h1 span{letter-spacing:3px;font-size:1.08em}
 .auth-world-lore,.auth-world-copy>p:not(.eyebrow){margin-top:17px;font-size:11px;line-height:1.7}
 .auth-world-divider{margin:18px 0;width:78px}
 .auth-rewards{margin-top:20px;padding-top:17px;gap:12px}
 .auth-reward-icon{margin-bottom:6px;font-size:18px}
 .auth-reward strong,.auth-reward b{font-size:11px}.auth-reward small{font-size:9px;line-height:1.5}
 .auth-scroll{justify-self:center;max-width:480px;padding:29px 28px 27px}
 .auth-scroll .auth-tabs{margin-bottom:22px}.auth-scroll h2{font-size:26px}
 .auth-scroll-heading{margin-bottom:21px}.auth-scroll-heading p{font-size:11px}
 .auth-scroll .field{margin-bottom:16px}.auth-scroll .field input{height:47px;font-size:16px}
 .auth-scroll .auth-footer,.auth-scroll .footer-note{margin-top:19px;font-size:9px}
 .auth-scene:after{opacity:.32;animation-duration:24s}
}
@media(max-width:460px){
 .auth-scene{padding:24px 20px 27px;gap:22px}
 .auth-emblem{width:50px;height:50px;margin-bottom:12px}
 .auth-world-title,.auth-world h1{font-size:31px}
 .auth-world-lore,.auth-world-copy>p:not(.eyebrow){font-size:10.5px;margin-top:14px}
 .auth-rewards{margin-top:17px;padding-top:13px;gap:8px}
 .auth-reward strong,.auth-reward b{font-size:10px}.auth-reward small{font-size:8px}
 .auth-scroll{padding:28px 25px 25px}
 .auth-scroll h2{font-size:25px}.auth-scroll-heading p{font-size:10px}
 .auth-scroll .auth-tabs button{font-size:10px;min-height:36px}
 .auth-scroll .field{font-size:10px}.auth-scroll #auth-form .btn.primary{font-size:12px}
}
@media(max-height:740px) and (min-width:761px){
 .auth-scene{padding-top:25px;padding-bottom:25px}
 .auth-emblem{width:65px;height:65px;margin-bottom:15px}
 .auth-world-title,.auth-world h1{font-size:42px}
 .auth-world-lore,.auth-world-copy>p:not(.eyebrow){font-size:12px;margin-top:18px}
 .auth-rewards{margin-top:22px;padding-top:17px}
 .auth-scroll{padding-top:28px;padding-bottom:25px}
 .auth-scroll .auth-tabs{margin-bottom:20px}.auth-scroll-heading{margin-bottom:19px}
 .auth-scroll .field{margin-bottom:14px}.auth-scroll .field input{height:44px}
}
@media(prefers-reduced-motion:reduce){
 .auth-scene:before,.auth-scene:after,.auth-scene .auth-world-copy,.auth-scene .auth-scroll,
 .auth-emblem,.home-emblem,.game-home:after,.game-hud:after,.hud-currency i{animation:none!important}
 .auth-scroll :is(input,button),.game-mode,.game-mode .mode-icon,.game-mode .mode-arrow,
 .game-shell :is(.hud-back,.hud-tool,.hud-profile,.btn){transition:none!important}
}
