@import url('typography.css');
:root{--ink:#183e35;--muted:#6c7b73;--gold:#d9bd79;--paper:#fffdf8;--line:#e1e7db}
*{box-sizing:border-box}body{margin:0;background:#f2f3ed;color:var(--ink);min-height:100vh;background-image:radial-gradient(ellipse at 88% 4%,#dbe6d9 0,transparent 48%);font-family:var(--font-ui);font-size:16px;line-height:1.9}a{color:inherit}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #c7a65f;outline-offset:4px}
.account-header,.account-footer{max-width:1120px;margin:auto;padding:23px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.account-brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:23px;font-weight:800;line-height:1.4}.account-brand small{display:block;font:10px/1.8 Arial,sans-serif;letter-spacing:3px;font-weight:400}.brand-symbol{display:grid;place-items:center;width:48px;height:52px;border:1px solid #c6b27c;border-radius:15px;color:#8b723b;background:#fffaf0;font:30px Georgia,serif}.back-link{text-decoration:none;font-size:14px;color:var(--muted)}.back-link:hover{color:var(--ink)}
.account-shell{max-width:1080px;margin:15px auto 20px;display:grid;grid-template-columns:1.1fr .9fr;background:var(--paper);border:1px solid #dce3d8;border-radius:30px;overflow:hidden;box-shadow:0 24px 70px #173c3210;min-height:560px}.account-content{padding:32px 44px;display:flex;flex-direction:column;justify-content:center}.account-kicker{display:flex;align-items:center;gap:8px;color:#8c7747;font-size:13px;margin:0 0 10px;font-weight:600}.account-kicker::before{content:'';width:20px;height:1px;background:#b89a59}.account-content h1{font-size:clamp(26px,2.8vw,35px);line-height:1.6;margin:0 0 15px;letter-spacing:-1px;font-weight:800}.account-description{color:var(--muted);font-size:15px;line-height:2.1;margin:0 0 18px}.account-description strong{color:var(--ink)}.account-icon{display:grid;place-items:center;width:52px;height:52px;border:1px solid #d6e1cd;border-radius:21px;background:#eef4e7;color:#427554;margin-bottom:18px}.account-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.account-icon.gold{background:#faf2dd;color:#a18442;border-color:#ebdfbc}
.account-form label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}.account-input{position:relative}.account-input input{width:100%;height:56px;border:1px solid #d8dfd3;border-radius:12px;padding:0 16px;background:white;color:var(--ink);direction:ltr;text-align:left;font-size:16px}.account-input input:focus{outline:0;box-shadow:0 0 0 3px #c2a35e2b;border-color:#a68d50}.input-help{display:block;font-size:12px;color:var(--muted);margin:8px 0 20px;line-height:1.8}.account-button{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;min-height:54px;border:1px solid #204a3c;border-radius:12px;background:#1b493c;color:#fffdf7;font-weight:650;font-size:15px;text-decoration:none;cursor:pointer;box-shadow:0 6px 14px #204a3c13;transition:background .15s,transform .15s}.account-button:hover{background:#123c30;transform:translateY(-1px)}.account-button:disabled{opacity:.65;cursor:wait;transform:none}.account-button .arrow{font-size:22px;color:var(--gold);font-family:Arial,sans-serif}.account-secondary{display:block;text-align:center;color:var(--muted);font-size:13px;margin-top:17px;text-decoration:none}.account-secondary:hover{text-decoration:underline}.account-note{display:flex;align-items:flex-start;gap:10px;background:#f3f5ee;border:1px solid #e3e8dc;border-radius:12px;padding:14px 16px;margin:16px 0;font-size:12px;color:#687b6c}.account-note svg{width:18px;min-width:18px;height:21px;fill:none;stroke:#648065;stroke-width:1.6}.account-note p{margin:0}.account-status{border:1px solid #e8d7cc;background:#fff4ef;border-radius:12px;color:#a84834;padding:13px 15px;margin:15px 0;font-size:14px;line-height:2}.account-status[hidden]{display:none}.account-status.success{color:#326346;border-color:#d0e0cb;background:#eff6e9}.account-steps{display:flex;gap:8px;align-items:center;margin:0 0 28px;color:#778376;font-size:11px}.account-steps span{display:flex;align-items:center;gap:6px}.account-steps b{display:grid;place-items:center;border:1px solid #d9dfd2;width:22px;height:22px;border-radius:50%;font-weight:600}.account-steps i{width:22px;height:1px;background:#dde2d5}.account-steps .done b{background:#e6efdd;border-color:#d7e3c8;color:#528057}.account-steps .active{color:#8e743c}.account-steps .active b{border-color:#bd9f5f;background:#faf1dc}
.account-scene{background:#163e32;color:#fffaf0;position:relative;overflow:hidden;padding:43px 36px;display:flex;flex-direction:column;justify-content:space-between;text-align:center;background-image:radial-gradient(ellipse at 50% 30%,#31644c 0,transparent 75%)}.account-scene::before,.account-scene::after{content:'';position:absolute;inset:18px;border:1px solid #bda16433;border-radius:20px;pointer-events:none}.account-scene::after{inset:26px;border-color:#c4af7720;border-radius:16px}.scene-overline{font:10px/2 Arial,sans-serif;letter-spacing:3px;color:#ceb578;position:relative;margin:0}.scene-title{font-size:29px;font-weight:750;line-height:1.8;margin:23px 0 10px;position:relative}.scene-title em{font-style:normal;color:#dfc786}.scene-description{font-size:13px;color:#bdd0c1;line-height:2;max-width:240px;margin:0 auto}.portrait-group{display:flex;direction:ltr;justify-content:center;align-items:center;position:relative;margin:30px 0 23px}.portrait{width:110px;aspect-ratio:1;border-radius:50%;border:4px solid #214a38;outline:1px solid #bc9a51;background:url('../img/royal-club/royal-portraits.png') no-repeat;background-size:200% 200%;box-shadow:0 12px 24px #0003}.portrait+.portrait{margin-left:-22px}.portrait.king{background-position:0 0;transform:rotate(-8deg)}.portrait.queen{background-position:100% 0;width:126px;z-index:2;transform:translateY(-12px)}.portrait.knight{background-position:0 100%;transform:rotate(8deg)}.scene-suits{display:flex;justify-content:center;gap:21px;font:24px/1.5 Georgia,serif;color:#cdb478;margin-top:20px}.scene-caption{font-size:11px;color:#aec5b5;margin:0}.player-preview{display:flex;align-items:center;gap:12px;background:#f4f5ee;border:1px solid #e2e7d9;border-radius:14px;padding:13px 15px;margin-bottom:24px}.preview-avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#a88a48;background:#f8efd8;font:25px Georgia,serif}.player-preview small{display:block;color:var(--muted);font-size:11px}.player-preview strong{font-size:15px;line-height:1.5}.account-footer{font-size:11px;color:#839080;padding-top:0}.footer-suits{color:#b1a47c;letter-spacing:6px}.reset-fields{display:grid;gap:16px;margin-bottom:22px}.reset-fields label{margin:0}.reset-fields input{display:block;margin-top:7px;width:100%;height:54px;padding:0 15px;border:1px solid #d8dfd3;border-radius:12px;direction:ltr;background:white}.account-form .field-error{color:#ae4b35;font-size:12px;margin:10px 0}.success-detail{display:flex;align-items:center;gap:9px;color:#6c8068;font-size:12px;margin:0 0 25px}.success-detail::before{content:'✓';display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#e7efdf;color:#5f835b}
@media(max-width:900px){.account-shell{margin:12px 24px 24px;grid-template-columns:1.15fr .85fr;min-height:530px}.account-content{padding:36px}.account-scene{padding:36px 24px}.portrait{width:87px}.portrait.queen{width:100px}.scene-title{font-size:24px}}
@media(max-width:680px){.account-header{padding:20px}.account-brand{font-size:20px}.brand-symbol{width:41px;height:45px;font-size:26px}.back-link{font-size:12px}.account-shell{display:flex;flex-direction:column;margin:4px 16px 22px;border-radius:23px;min-height:0}.account-content{padding:30px 25px}.account-content h1{font-size:27px}.account-icon{width:58px;height:58px;margin-bottom:20px;border-radius:18px}.account-description{font-size:14px;margin-bottom:23px}.account-scene{padding:24px;min-height:156px;display:grid;grid-template-columns:1fr 130px;text-align:right;align-items:center;gap:8px}.account-scene::before{inset:10px;border-radius:15px}.account-scene::after,.scene-overline,.scene-suits,.scene-caption{display:none}.scene-title{font-size:18px;margin:0 0 5px;line-height:1.8}.scene-description{font-size:11px;margin:0;max-width:190px}.portrait-group{margin:0}.portrait{width:56px;border-width:2px}.portrait.queen{width:64px;transform:translateY(-5px)}.portrait+.portrait{margin-left:-20px}.account-footer{padding:0 20px 20px;font-size:10px}.account-steps{gap:6px;font-size:10px;margin-bottom:23px}.account-steps i{width:13px}.account-note{margin:20px 0;font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}