:root{--gold:#e8ad42;--gold2:#ffc866;--ink:#050a0f;--panel:#071018;--line:rgba(232,173,66,.42);--text:#f7f3eb;--muted:#c8c4bd}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02070b;color:var(--text)}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit}.checkers-login-page{min-height:100dvh}
.login-shell{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,56%) minmax(390px,44%);border:1px solid rgba(232,173,66,.46);border-radius:20px;overflow:hidden;background:#02070b}
.login-visual{position:relative;min-width:0;background:url('../images/checkers-login-bg.jpg') center/cover no-repeat}
.login-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,.02) 62%,rgba(2,7,11,.7)),linear-gradient(0deg,rgba(2,7,11,.88),transparent 34%)}
.hero-quote{position:absolute;z-index:2;left:5%;top:7%;font:400 clamp(27px,2.35vw,44px)/1.28 Georgia,serif;max-width:280px;text-shadow:0 2px 14px #000}.hero-quote:before{content:'“';display:block;color:var(--gold2);font-size:58px;line-height:.6;margin-bottom:18px}.quote-rule{display:flex;align-items:center;gap:10px;width:150px;margin-top:24px}.quote-rule:before,.quote-rule:after{content:"";height:1px;flex:1;background:var(--gold)}.quote-rule i{width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.feature-bar{position:absolute;z-index:3;left:2.7%;right:2.7%;bottom:5.8%;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px;background:rgba(3,10,15,.92);backdrop-filter:blur(8px);padding:20px 10px}.feature{padding:0 13px;text-align:center;border-right:1px solid rgba(232,173,66,.3)}.feature:last-child{border:0}.feature-icon{font-size:28px;color:var(--gold2);height:35px}.feature strong{display:block;font-size:13px;letter-spacing:.04em;margin:7px 0}.feature small{display:block;color:var(--muted);font-size:11px;line-height:1.45}
.login-panel{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;background:radial-gradient(circle at 50% 22%,rgba(23,35,44,.42),transparent 42%),linear-gradient(145deg,#071019,#02080d 70%);padding:28px clamp(28px,4vw,68px)}
.language{position:absolute;top:28px;right:28px;border:1px solid var(--line);border-radius:28px;padding:12px 18px;color:#fff;background:rgba(3,9,14,.68);font-size:14px}.language span{color:var(--gold2);margin-right:8px}
.login-card{width:min(100%,540px);text-align:center}.brand-mark{width:130px;height:118px;margin:0 auto 4px;position:relative}.brand-shield{position:absolute;inset:4px 18px 14px;border:5px solid var(--gold);clip-path:polygon(50% 0,100% 20%,94% 70%,50% 100%,6% 70%,0 20%)}.brand-king{position:absolute;inset:25px 0 0;display:grid;place-items:center;font:700 62px/1 Georgia,serif;color:#fff;text-shadow:0 3px 7px #000}.brand-laurel{position:absolute;left:-5px;right:-5px;bottom:0;color:var(--gold2);font:700 32px/1 Georgia,serif;letter-spacing:58px;overflow:hidden;white-space:nowrap}.brand-title{font:400 clamp(37px,4vw,61px)/1 Georgia,serif;letter-spacing:.035em;margin:0}.brand-title .gold{color:var(--gold2)}.tagline{margin:13px 0 20px;font-size:13px;letter-spacing:.34em;color:#eee}.ornament{height:1px;width:62%;margin:0 auto 28px;background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative}.ornament:after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;background:var(--gold);transform:translateX(-50%) rotate(45deg)}
.login-card h1{font-size:27px;margin:0 0 7px}.subtitle{color:var(--gold2);margin:0 0 22px;font-size:16px}.login-error{padding:10px 12px;margin:0 0 14px;border:1px solid #a44;border-radius:10px;background:rgba(120,20,20,.25);color:#ffd8d8;text-align:left}
.field{height:62px;border:1px solid rgba(232,173,66,.3);border-radius:10px;display:flex;align-items:center;gap:14px;padding:0 18px;margin-bottom:14px;background:rgba(2,8,13,.56)}.field svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.6;flex:0 0 auto}.field input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:16px}.field input::placeholder{color:#b9b9b9}.eye{border:0;background:transparent;color:#fff;font-size:21px;padding:8px;cursor:pointer}.form-row{display:flex;justify-content:space-between;align-items:center;margin:3px 0 20px;font-size:14px}.remember{display:flex;align-items:center;gap:10px}.remember input{appearance:none;width:21px;height:21px;border:2px solid var(--gold);border-radius:4px;margin:0}.remember input:checked{background:var(--gold);box-shadow:inset 0 0 0 4px #071018}.forgot{color:var(--gold2);text-decoration:none}.submit{width:100%;height:64px;border:0;border-radius:9px;background:linear-gradient(180deg,#ffc969,#d99529);color:#111;font-weight:800;font-size:18px;letter-spacing:.04em;cursor:pointer;position:relative}.submit span{position:absolute;right:24px;font-size:30px;top:12px}.or{display:flex;align-items:center;gap:18px;margin:25px 0;color:#fff}.or:before,.or:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold))}.or:after{background:linear-gradient(90deg,var(--gold),transparent)}.create{font-size:15px}.create a{color:var(--gold2);text-decoration:none}.login-footer{position:absolute;left:30px;right:30px;bottom:18px;display:flex;justify-content:center;gap:22px;color:#bbb;font-size:12px}.login-footer a{text-decoration:none}
@media(max-width:820px){.login-shell{display:block;border-radius:0}.login-visual{position:absolute;inset:0 0 auto;height:39%;background-image:url('../images/checkers-login-bg.jpg');background-position:center 35%}.login-visual:after{background:linear-gradient(0deg,#03090e 0,rgba(3,9,14,.32) 46%,rgba(0,0,0,.08))}.hero-quote{left:5.5%;top:11%;font-size:clamp(19px,5vw,27px);max-width:175px}.hero-quote:before{font-size:39px;margin-bottom:11px}.quote-rule{width:105px;margin-top:15px}.feature-bar{display:none}.login-panel{position:absolute;inset:34% 0 0;display:block;padding:0 5.2% 12px;background:linear-gradient(0deg,#02070b 85%,transparent)}.language{top:-31.5%;right:4%;font-size:13px;padding:9px 13px}.login-card{height:100%;display:flex;flex-direction:column;justify-content:flex-start}.brand-mark{width:86px;height:72px;margin:0 auto -1px}.brand-shield{inset:0 12px 7px;border-width:3px}.brand-king{font-size:40px;inset:13px 0 0}.brand-laurel{display:none}.brand-title{font-size:clamp(31px,9vw,44px)}.tagline{font-size:10px;margin:7px 0 10px;letter-spacing:.28em}.ornament{margin-bottom:10px;width:54%}.login-card h1{font-size:22px;margin-bottom:2px}.subtitle{font-size:13px;margin-bottom:10px}.field{height:49px;margin-bottom:9px;padding:0 13px}.field input{font-size:15px}.field svg{width:21px;height:21px}.form-row{margin:0 0 10px;font-size:13px}.remember input{width:19px;height:19px}.submit{height:51px;font-size:16px}.submit span{top:7px}.or{margin:10px 0 8px;font-size:13px}.create{font-size:14px}.login-footer{position:static;margin-top:auto;padding-top:9px;border-top:1px solid rgba(232,173,66,.18);font-size:10px;gap:12px;white-space:nowrap}.login-footer a:nth-child(n+2){display:none}}
@media(max-width:390px),(max-height:720px){.login-visual{height:34%}.login-panel{inset:30% 0 0}.hero-quote{font-size:18px}.brand-mark{height:59px;width:70px}.brand-king{font-size:32px}.brand-title{font-size:29px}.tagline{margin:4px 0 7px}.ornament{margin-bottom:7px}.login-card h1{font-size:19px}.subtitle{font-size:12px;margin-bottom:7px}.field{height:43px;margin-bottom:7px}.form-row{margin-bottom:7px}.submit{height:45px}.or{margin:7px 0}.login-footer{padding-top:5px}}


/* v69: true one-screen mobile layout and removal of artwork duplicates */
@media (max-width: 820px) {
  html, body, .checkers-login-page {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .login-shell {
    height: 100svh;
    min-height: 100svh;
    max-height: 100dvh;
    overflow: hidden;
  }

  /* The mobile artwork already contains the quote and language ornament. */
  .hero-quote,
  .language {
    display: none !important;
  }

  .login-visual {
    height: 30%;
    background-position: center 31%;
  }

  .login-panel {
    inset: 25% 0 0;
    padding: 0 5.2% max(6px, env(safe-area-inset-bottom));
  }

  .brand-mark {
    width: 70px;
    height: 57px;
    margin-bottom: -2px;
  }

  .brand-shield { inset: 0 10px 6px; border-width: 2px; }
  .brand-king { inset: 10px 0 0; font-size: 32px; }
  .brand-title { font-size: clamp(28px, 8vw, 38px); }
  .tagline { margin: 4px 0 7px; font-size: 9px; }
  .ornament { margin-bottom: 7px; }
  .login-card h1 { font-size: 19px; margin-bottom: 1px; }
  .subtitle { margin-bottom: 7px; font-size: 12px; }
  .login-error { margin-bottom: 6px; padding: 6px 9px; font-size: 12px; }
  .field { height: 43px; margin-bottom: 7px; }
  .field input { font-size: 15px; }
  .form-row { margin-bottom: 7px; font-size: 12px; }
  .remember input { width: 18px; height: 18px; }
  .submit { height: 45px; font-size: 15px; }
  .submit span { top: 5px; right: 20px; }
  .or { margin: 7px 0 5px; font-size: 12px; }
  .create { font-size: 13px; }
  .login-footer { display: none; }
}

@media (max-width: 390px), (max-height: 700px) {
  .login-visual { height: 27%; }
  .login-panel { inset: 22% 0 0; }
  .brand-mark { width: 60px; height: 47px; }
  .brand-king { font-size: 27px; }
  .brand-title { font-size: 27px; }
  .tagline { font-size: 8px; margin: 2px 0 5px; }
  .ornament { margin-bottom: 5px; }
  .login-card h1 { font-size: 17px; }
  .subtitle { font-size: 11px; margin-bottom: 5px; }
  .field { height: 39px; margin-bottom: 5px; }
  .form-row { margin-bottom: 5px; }
  .submit { height: 41px; }
  .or { margin: 5px 0 4px; }
}


/* v70: iPhone viewport, focus-zoom, and horizontal-cropping correction */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 820px) {
  html,
  body,
  .checkers-login-page,
  .login-shell {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
  }

  .login-shell {
    position: fixed;
    inset: 0;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .login-visual {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    height: 31%;
    /* Do not use cover here: it horizontally cropped the baked-in quote. */
    background-size: 100% auto;
    background-position: center -28px;
    background-repeat: no-repeat;
  }

  .login-panel {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    inset: 26% 0 0;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    overflow: hidden;
  }

  .login-card,
  .login-card form,
  .field,
  .submit {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .field input {
    /* iOS zooms focused inputs below 16px, which caused the clipped screenshot. */
    font-size: 16px;
  }

  .form-row {
    gap: 12px;
  }

  .remember,
  .forgot {
    min-width: 0;
  }

  .forgot {
    white-space: nowrap;
  }
}

@media (max-width: 390px), (max-height: 700px) {
  .login-visual {
    height: 29%;
    background-position: center -24px;
  }

  .login-panel {
    inset: 24% 0 0;
  }

  .field input {
    font-size: 16px;
  }
}

/* v71: balanced fixed mobile viewport with visible footer */
@media (max-width: 820px) {
  .login-visual {
    height: 29%;
    background-position: center 0;
  }

  .login-panel {
    inset: 24% 0 0;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .login-card {
    height: auto;
    flex: 0 0 auto;
  }

  .brand-mark {
    width: 64px;
    height: 51px;
  }

  .brand-title {
    font-size: clamp(27px, 7.6vw, 36px);
  }

  .tagline {
    margin: 3px 0 6px;
  }

  .ornament {
    margin-bottom: 6px;
  }

  .login-card h1 {
    font-size: 18px;
  }

  .subtitle {
    margin-bottom: 6px;
  }

  .field {
    height: 42px;
    margin-bottom: 6px;
  }

  .form-row {
    margin-bottom: 6px;
  }

  .submit {
    height: 44px;
  }

  .or {
    margin: 6px 0 4px;
  }

  .login-footer {
    display: flex;
    position: static;
    margin-top: auto;
    padding: 8px 0 0;
    border-top: 1px solid rgba(232,173,66,.2);
    justify-content: center;
    align-items: center;
    min-height: 24px;
    color: #aaa;
    font-size: 9px;
    line-height: 1.2;
  }

  .login-footer span {
    white-space: nowrap;
  }

  .login-footer a {
    display: none !important;
  }
}

@media (max-width: 390px), (max-height: 760px) {
  .login-visual {
    height: 27%;
    background-position: center 0;
  }

  .login-panel {
    inset: 22% 0 0;
  }

  .brand-mark {
    width: 57px;
    height: 44px;
  }

  .brand-title {
    font-size: 26px;
  }

  .tagline {
    margin: 2px 0 4px;
  }

  .ornament {
    margin-bottom: 4px;
  }

  .login-card h1 {
    font-size: 16px;
  }

  .subtitle {
    margin-bottom: 4px;
  }

  .field {
    height: 38px;
    margin-bottom: 4px;
  }

  .form-row {
    margin-bottom: 4px;
  }

  .submit {
    height: 40px;
  }

  .or {
    margin: 4px 0 3px;
  }

  .create {
    font-size: 12px;
  }

  .login-footer {
    padding-top: 4px;
    min-height: 18px;
    font-size: 8px;
  }
}

/* v73: remove the mock phone status bar baked into the mobile artwork. */
@media (max-width: 820px) {
  .login-visual {
    /* Move the image upward far enough to hide 9:41, signal, Wi-Fi,
       battery icons, and the rounded mock-phone frame on every mobile width. */
    background-position: center clamp(-62px, -9vw, -32px);
  }
}

/* Checkers artwork override */
.login-visual, .register-visual { background-image: url('../images/checkers-login-bg.jpg') !important; }