/* Rift Bear ID pages (registration, new password) - after the Registration Kit V2 "Split / Plane". */
/* Inter (SIL Open Font License, OFL-Inter.txt), served from here. */
@font-face{font-family:Inter;src:url('/web/Inter-Regular.woff2') format('woff2');font-weight:300 549;font-display:swap}
@font-face{font-family:Inter;src:url('/web/Inter-SemiBold.woff2') format('woff2');font-weight:550 679;font-display:swap}
@font-face{font-family:Inter;src:url('/web/InterDisplay-Bold.woff2') format('woff2');font-weight:680 900;font-display:swap}
:root{--ink:#0B1013;--surface:#151C21;--raised:#1D272D;--line:#37454D;--white:#F4F0E9;--muted:#92A2AA;--orange:#F1763B;--hover:#FF9960;--green:#91CCAE;--red:#DF766A;color-scheme:dark;font-family:Inter,'Segoe UI',system-ui,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink);color:var(--white)}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
img{max-width:100%;display:block}
a{color:inherit}
.tiny{font-size:10px;letter-spacing:1.7px;font-weight:680}
.orange{color:var(--orange)}
.overline{font-size:11px;letter-spacing:2.6px;color:var(--orange);font-weight:750}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:0 22px;height:51px;white-space:nowrap;border:1px solid var(--line);background:var(--raised);color:var(--white);border-radius:3px;letter-spacing:1.1px;font-size:11px;font-weight:800;text-decoration:none;transition:background .16s,border .16s,transform .16s}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#1B1714}
.btn.primary:hover{background:var(--hover)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:default}

.page{display:grid;grid-template-columns:minmax(400px,1.06fr) minmax(470px,.94fr);min-height:100vh}
.stage{position:relative;background:#172129;overflow:hidden}
.stage-image{position:absolute;inset:0;background:linear-gradient(90deg,#0B1319A8,#0C10131A 50%,#0B1013AD 99%),url('/web/art.svg') center center/cover no-repeat}
.stage-content{position:relative;z-index:1;padding:39px clamp(32px,5.4vw,93px) 36px;display:flex;flex-direction:column;min-height:100vh}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:46px;height:46px}
.brand b{font-size:19px;letter-spacing:2px;font-weight:780}
.brand span{font-size:11px;letter-spacing:1px;color:var(--muted);font-weight:650;margin-left:6px}
.intro{margin-top:auto;margin-bottom:7.8vh}
.intro h1{font-weight:730;line-height:1.04;font-size:clamp(45px,5.5vw,81px);letter-spacing:-4px;margin:25px 0 24px;max-width:730px}
.intro h1 em{font-style:normal;color:var(--orange)}
.intro p{max-width:380px;font-size:15px;color:#CAD3D5;line-height:1.7}
.stage-footer{display:flex;justify-content:space-between;gap:15px;padding-top:21px;border-top:1px solid #80939C66;font-size:10px;letter-spacing:2.4px;color:#B9C8CF}

.auth{background:#12191D;position:relative;display:flex;justify-content:center;align-items:center;padding:58px 45px}
.auth:before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(#39464C,#F1763B,#39464C)}
.auth-inner{width:min(100%,450px)}
.toolbar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:56px}
.field-link{font-size:11px;color:#FF9C62;text-decoration:none;font-weight:650}
.field-link:hover{text-decoration:underline}
.toolbar .tiny{color:#81939C}
.lang{display:flex;gap:4px}
.lang a{font-size:12px;font-weight:650;letter-spacing:.4px;color:#81939C;text-decoration:none;padding:5px 9px;border:1px solid transparent}
.lang a:hover{color:#F4F0E9;border-color:#37454D}
.lang a[aria-current]{color:#F4F0E9;border-color:#4A5A63;background:#1D272D}
.heading h2{font-size:43px;letter-spacing:-2px;line-height:1.1;font-weight:740;margin:13px 0 10px}
.heading p{font-size:13px;color:#93A4AC;margin:0 0 31px;line-height:1.6}
.heading p b{color:var(--white);font-weight:650}

.field{margin:0 0 12px}
.field-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.field-head label{font-size:12px;font-weight:650;color:#D5DDE1}
.field-head small{font-size:10px;color:#8C9CA4}
.input{display:flex;align-items:center;gap:13px;height:52px;border:1px solid #42515A;background:#1A2329;border-radius:3px;transition:border .14s}
.input:focus-within{border-color:var(--orange);box-shadow:inset 3px 0 var(--orange)}
.input.invalid{border-color:var(--red);box-shadow:inset 3px 0 var(--red)}
.input.valid{border-color:#5F997C}
.input.fixed{background:#151D22;border-style:dashed}
.input>img{width:18px;height:18px;margin-left:15px;opacity:.8}
.input input{background:transparent;border:0;outline:0;min-width:0;color:var(--white);flex:1;width:100%;height:100%;font-size:13px;padding:0 14px 0 0}
.input input[readonly]{color:#B9C6CC}
.input input::placeholder{color:#6E7F87}
.reveal{background:none;border:0;padding:12px 14px;flex:0 0 auto}
.reveal img{width:18px;height:18px}
.reveal:hover{background:#303A41}
.field-error{color:#F29C92;min-height:14px;font-size:11px;margin-top:5px}
.strength{display:flex;align-items:center;gap:12px;font-size:10px;color:#8A999F;margin-top:10px}
.meter{height:3px;background:#303C43;flex:1}
.meter span{display:block;width:0;height:100%;background:var(--orange);transition:width .15s}
.meter span.s1{width:25%;background:var(--red)}
.meter span.s2{width:50%;background:var(--orange)}
.meter span.s3{width:75%;background:var(--orange)}
.meter span.s4{width:100%;background:var(--green)}
.agreement{margin-top:8px}
.agreement label{display:flex;align-items:flex-start;gap:11px;margin:10px 0;color:#A8B7BF;font-size:12px;line-height:1.6}
.agreement input{width:16px;height:16px;accent-color:var(--orange);flex:0 0 auto;margin:2px 0 0}
.agreement a{color:#F3A075;text-decoration:underline;text-underline-offset:3px}
.submit{width:100%;height:55px;justify-content:space-between;margin-top:16px;padding:0 24px;font-size:12px}
.submit span{font-size:19px}

.notice{border-left:3px solid var(--red);background:#331F1D;color:#F4C6BF;font-size:12px;line-height:1.65;padding:15px 18px;margin:0 0 22px}
.success{border-left:3px solid var(--green);background:#213329;color:#BCE5CE;font-size:13px;line-height:1.7;padding:18px 20px;margin:0 0 24px}
.steps{margin:0 0 26px;padding:0;list-style:none;counter-reset:step}
.steps li{counter-increment:step;display:flex;gap:14px;align-items:baseline;font-size:13px;color:#C3CED3;line-height:1.6;padding:9px 0;border-bottom:1px solid #26333A}
.steps li:before{content:counter(step,decimal-leading-zero);font-size:10px;letter-spacing:1.5px;color:var(--orange);font-weight:750}
.secure-note{border-top:1px solid #33424A;margin-top:35px;padding-top:22px;display:flex;align-items:start;gap:12px}
.secure-note img{width:19px;height:19px;opacity:.62;margin-top:1px}
.secure-note p{color:#8798A0;margin:0;font-size:10px;line-height:1.8}
.secure-note strong{font-size:10px;letter-spacing:1px;color:#9FADB4}
.switch-line{margin:22px 0 0;text-align:center;font-size:12px}
.switch-line a{color:#FF9C62;font-weight:750;text-decoration:none}
.switch-line a:hover{text-decoration:underline}
.hidden{display:none}

/* The profile (signed in): a bar on top, the account, its games and its security. */
.app{display:flex;flex-direction:column;min-height:100vh}
.topbar{display:flex;align-items:center;gap:36px;padding:16px clamp(18px,4vw,56px);border-bottom:1px solid #2B373E;background:#12191D}
.topbar .brand img{width:34px;height:34px}
.topbar .brand b{font-size:15px}
.tabs{display:flex;gap:6px}
.tabs a{font-size:13px;font-weight:650;color:#A9B7BE;text-decoration:none;padding:8px 12px}
.tabs a:hover{color:var(--white);background:#1D272D}
.top-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.btn.quiet{height:36px;background:transparent;font-size:11px}
.btn.quiet:hover{background:#1D272D}
.profile{width:min(100%,1040px);margin:0 auto;padding:40px clamp(18px,4vw,40px) 60px;display:flex;flex-direction:column;gap:22px}
.identity{display:flex;align-items:center;gap:22px;padding:6px 0 12px}
.avatar{width:68px;height:68px;display:grid;place-items:center;background:#252F35;border:1px solid #42515A;color:#F3B48B;font-size:30px;font-weight:760}
.identity h1{font-size:40px;letter-spacing:-1.6px;margin:0;font-weight:740}
.identity p{margin:6px 0 0;color:#93A4AC;font-size:13px}
.card{background:var(--surface);border:1px solid #2F3C43;padding:26px 28px}
.card h2{font-size:19px;margin:0 0 16px;font-weight:700}
.card h3{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#8E9EA6;margin:4px 0 12px;font-weight:700}
.rows{list-style:none;margin:0 0 18px;padding:0}
.rows li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #26333A;font-size:14px}
.rows li .muted,.rows li.muted{color:#8798A0;font-size:12px}
.rows li .muted{margin-left:auto}
.tag{font-size:10px;letter-spacing:1px;font-weight:750;text-transform:uppercase;color:#F3B48B;border:1px solid #5B4637;background:#2A221D;padding:3px 8px}
.inline{display:flex;gap:10px}
.inline .input{flex:1}
.inline .btn{height:52px}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.stack .btn{margin-top:10px}
.card .success,.card .notice{margin-bottom:18px}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.product{background:#1A2328;border:1px solid #2F3C43;display:flex;flex-direction:column}
.product img{width:100%;aspect-ratio:16/9;object-fit:cover}
.product.coming img{filter:saturate(.8) brightness(.85)}
.product-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-body .tag{align-self:flex-start}
.product h3{font-size:17px;margin:4px 0 0;font-weight:720;letter-spacing:-.2px;text-transform:none;color:var(--white)}
.product p{margin:0;color:#A3B2B9;font-size:13px;line-height:1.55}
.product-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:14px;min-height:52px}
.product-foot .btn{margin-left:auto;height:44px}
.price{font-size:13px;color:#C9D3D7;font-weight:650}
.owned{font-size:12px;font-weight:700;color:var(--green)}
.owned:before{content:"";display:inline-block;width:8px;height:8px;background:var(--green);margin-right:9px}
.columns.three{grid-template-columns:repeat(3,1fr)}
.method{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #33424A;background:#1A2328;font-size:13px}
.method .tag{margin-left:auto}
.method-name{font-weight:760;font-size:15px;letter-spacing:-.2px}
.method.chosen{border-color:var(--orange);margin-bottom:14px}
.radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--orange);display:grid;place-items:center}
.radio:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
.muted{color:#8798A0;font-size:13px}
.back{color:#A9B7BE;font-size:13px;text-decoration:none}
.back:hover{color:var(--white)}
.page-title{font-size:40px;letter-spacing:-1.6px;margin:0;font-weight:740}
.checkout{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:start}
.order{display:flex;gap:18px;align-items:flex-start;margin-bottom:18px}
.order img{width:200px;aspect-ratio:16/9;object-fit:cover;border:1px solid #2F3C43}
.order h3{font-size:16px;margin:10px 0 6px;color:var(--white);text-transform:none;letter-spacing:-.2px}
.rows.sum li{justify-content:space-between}
.rows.sum .right{margin-left:auto}
.rows.sum .total{border-bottom:none;font-size:15px}
.btn.wide{width:100%;margin-top:8px}
.fine{color:#73848C;font-size:12px;margin:14px 0 0}
.info{border-left:3px solid var(--orange);background:#2A221D;color:#F3D2BF;font-size:13px;line-height:1.7;padding:16px 20px}
@media(max-width:780px){.columns.three,.checkout{grid-template-columns:1fr}.order{flex-direction:column}.order img{width:100%}}
.app-footer{margin-top:auto;padding:20px clamp(18px,4vw,56px);border-top:1px solid #222D33;font-size:10px;letter-spacing:2.4px;color:#73848C}
@media(max-width:780px){.topbar{flex-wrap:wrap;gap:12px}.tabs{order:3;width:100%}.columns{grid-template-columns:1fr}.identity h1{font-size:30px}.inline{flex-direction:column}}

@media(max-width:1050px){.page{grid-template-columns:minmax(300px,.9fr) minmax(410px,1.1fr)}.auth{padding:40px 30px}.stage-content{padding:34px}.intro h1{font-size:52px;letter-spacing:-2px}}
@media(max-width:780px){.page{display:flex;flex-direction:column}.stage{min-height:250px}.stage-content{min-height:250px;padding:24px}.intro{margin:54px 0 0}.intro h1{font-size:34px;letter-spacing:-1.2px;margin:11px 0}.intro p,.stage-footer,.intro .overline{display:none}.auth{padding:39px 23px 65px}.toolbar{margin-bottom:34px}.heading h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}