:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0;color:#f6f8f9;min-height:100vh;background:#090e13}.background{position:fixed;inset:0;background:linear-gradient(125deg,#102b2b66,#0b101a88),url('background.jpg') center/cover no-repeat,linear-gradient(130deg,#12232a,#0c171a 50%,#324039);transform:scale(1.01)}.shade{position:fixed;inset:0;background:linear-gradient(90deg,rgba(1,8,11,.91),rgba(2,9,13,.45) 65%,rgba(2,8,10,.77))}.app{position:relative;min-height:100vh;max-width:1360px;margin:auto;padding:36px 6%;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;gap:20px;align-items:center}.brand{font-size:24px;letter-spacing:2px}.brand span,h1 em{color:#94fa6f}.tag,.eyebrow{letter-spacing:3px;font-size:11px;color:#a4e88a;font-weight:800}main{flex:1;display:grid;grid-template-columns:1.2fr minmax(300px,410px);align-items:start;gap:55px;padding:38px 0 65px}.hero h1{font-size:clamp(60px,7vw,104px);line-height:.98;font-style:italic;letter-spacing:-3px;margin:18px 0 23px;text-shadow:0 6px 24px #000a}.hero h1 em{font-style:italic}.hero p{font-size:18px;max-width:420px;color:#d7e0df;line-height:1.5}.strip{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;font-size:11px;font-weight:800;letter-spacing:1px}.strip span{padding:12px 13px;border:1px solid #89ed7680;background:#091c1c80;border-radius:6px}.panel{background:rgba(11,20,23,.89);border:1px solid #6bc46961;box-shadow:0 18px 80px #0009;backdrop-filter:blur(14px);border-radius:16px;padding:30px}.tabs{display:flex;border-bottom:1px solid #425246;margin-bottom:28px}.tabs button{flex:1;background:none;border:0;color:#a7aeaf;padding:12px;font-weight:bold;cursor:pointer}.tabs button.active{color:#a0fd75;border-bottom:3px solid #a0fd75}h2{font-size:24px;margin:0 0 9px}.hint,.small{color:#a6b4b5}.hint{margin:0 0 26px}.small{font-size:12px;line-height:1.4}label{display:block;font-weight:bold;font-size:12px;color:#d5e4df;margin:17px 0}label input{display:block;width:100%;background:#091215;border:1px solid #4b5d59;border-radius:8px;color:white;padding:14px;margin-top:8px;font-size:15px;outline:none}label input:focus{border-color:#a0fd75}.action{display:block;width:100%;margin-top:24px;padding:15px;background:#a0fd75;color:#102117;border:0;border-radius:8px;font-weight:900;cursor:pointer;font-size:14px}.action:hover{background:#c4ff9e}#notice{font-size:13px;min-height:18px;color:#ffb8a6}#notice.good{color:#b6ff99}footer{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid #91bc8944;padding-top:22px}.music{display:flex;align-items:center;gap:12px;max-width:440px;width:100%}.music button{width:38px;height:38px;border-radius:50%;background:#21352b;color:white;border:1px solid #81ae81;cursor:pointer}.music .track{display:flex;flex-direction:column;min-width:116px}.track small{font-size:11px;color:#a5b0aa;margin-top:3px}.music input{accent-color:#a0fd75;min-width:60px;max-width:120px;flex:1}.music output{min-width:36px;font-size:12px}.footnote{color:#a4e88a;font-size:11px;font-weight:bold;letter-spacing:2px;text-align:right}@media(max-width:850px){.app{padding:24px 5%}header{display:block}.tag{margin-top:10px}main{grid-template-columns:1fr;gap:35px;padding:45px 0}.hero h1{font-size:clamp(50px,13vw,80px)}.hero p{font-size:15px}.panel{max-width:520px}footer{flex-wrap:wrap}.footnote{text-align:left}}

/* Beam Bangers top corner layout */
main > .hero { align-self: start; justify-self: start; }
main > .panel { align-self: start; justify-self: end; width: 100%; }
@media (max-width:850px) { main > .panel { justify-self: stretch; } }


/* V2: genuinely pin the two sections to the outside corners on desktop */
@media (min-width: 851px) {
  .app { max-width: none; width: 100%; margin: 0; padding: 24px 26px 18px; }
  header { width: 100%; }
  main { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; width: 100%; padding: 28px 0 50px; }
  main > .hero { flex: 0 1 470px; width: min(36vw,470px); margin: 0; align-self: flex-start; }
  main > .hero h1 { font-size: clamp(44px, 4.5vw, 76px); }
  main > .panel { flex: 0 0 360px; width: 360px; max-width: 36vw; margin: 0; align-self: flex-start; }
}
@media (min-width: 851px) and (max-width: 1100px) {
  main > .panel { flex-basis: 330px; width: 330px; max-width: 42vw; }
  main > .hero { width: 40vw; }
  main > .hero h1 { font-size: clamp(42px, 5vw, 62px); }
}


/* V3: prominent centred Beam Bangers masthead, without moving the two panels */
@media (min-width: 851px) {
  header { position: relative; min-height: 102px; display: flex; justify-content: flex-end; align-items: flex-start; }
  header .brand { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: clamp(38px, 4.7vw, 78px); font-weight: 900; letter-spacing: 2px; line-height: 1.15; text-shadow: 0 5px 18px #000b; }
  header .tag { font-size: 10px; max-width: 225px; text-align: right; margin-top: 2px; }
  main { padding-top: 12px; }
}
@media (max-width: 850px) {
  header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  header .brand { font-size: clamp(29px, 6.5vw, 48px); font-weight: 900; }
  header .tag { text-align: center; margin: 0; }
}

/* V4: centre Built to Banger Race at the bottom; account box stays upper right */
@media (min-width: 851px) {
  main { position: relative; min-height: 570px; flex: 1 0 570px; align-items: flex-start; }
  main > .hero { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: min(680px, 52vw); max-width: none; text-align: center; z-index: 1; }
  main > .hero h1 { font-size: clamp(45px, 4.5vw, 74px); margin: 8px 0 12px; }
  main > .hero p { margin: 0 auto; font-size: 15px; }
  main > .hero .strip { justify-content: center; margin-top: 16px; }
  main > .panel { margin-left: auto; position: relative; z-index: 2; }
}
@media (min-width: 851px) and (max-height: 800px) {
  main { min-height: 490px; flex-basis: 490px; }
  main > .hero h1 { font-size: clamp(42px, 4.1vw, 63px); }
}

/* V5: move the login/register panel to the TOP LEFT while keeping the slogan bottom centre. */
@media (min-width: 851px) {
  main > .panel { position: absolute; top: -66px; left: 0; right: auto; margin: 0; justify-self: start; }
}

/* Keep login card in upper left, clear of the centred site title. */