/* ==========================================================================
   hub.css — the ORANCO Arcade landing page.
   Same palette as the games: ORANCO orange, League gold, deep blue-black.
   ========================================================================== */

:root{
  --font-display:'Cinzel','Trajan Pro','Palatino Linotype',Georgia,serif;
  --font-body:'Barlow Semi Condensed','Roboto Condensed','Arial Narrow',sans-serif;

  --ink:#03080e;
  --panel:#0a141c;
  --gold-1:#F0E6D2;
  --gold-2:#C8AA6E;
  --gold-3:#C89B3C;
  --gold-4:#785A28;
  --gold-5:#463714;
  --dim:#A09B8C;
  --dimmer:#5B5A56;
  --orange:#FB9245;
  --blue:#3C9BE8;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; min-height:100%;
  background:var(--ink); color:var(--gold-1);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

.bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 18% 12%, rgba(251,146,69,.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 84% 78%, rgba(60,155,232,.13), transparent 62%),
    linear-gradient(170deg,#071420 0%,#03080e 60%);
}

/* ---- header ------------------------------------------------------------- */
.hub-head{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  /* `.acct` carries margin-left:auto, which swallows every scrap of free
     space — so without an explicit gap the SIGN OUT button ends up flush
     against "orancoclean.com" with its border touching the text. */
  flex-wrap:wrap; column-gap:clamp(14px,3vw,28px); row-gap:12px;
  padding:22px clamp(18px,5vw,56px);
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand-mark{
  font:800 19px/1 'Arial Black',Arial,sans-serif; letter-spacing:1.5px;
  color:#fff; background:var(--orange);
  padding:7px 12px; border-radius:5px;
  box-shadow:0 2px 12px rgba(251,146,69,.35);
}
.brand-sub{ font:600 11px/1 var(--font-body); letter-spacing:5px; color:var(--gold-3); }
.back{
  font:500 12px/1 var(--font-body); letter-spacing:1.4px;
  color:var(--dimmer); text-decoration:none;
  border-bottom:1px solid rgba(120,90,40,.5); padding-bottom:3px;
}
.back:hover{ color:var(--gold-2); }

/* ---- page --------------------------------------------------------------- */
.hub{
  position:relative; z-index:1;
  max-width:1080px; margin:0 auto;
  padding:clamp(18px,4vw,42px) clamp(18px,5vw,56px) 60px;
}
.hub-title{
  margin:0;
  font:600 clamp(30px,6vw,50px)/1.05 var(--font-display);
  letter-spacing:2px;
  background:linear-gradient(180deg,#FFF6DC,#F0E6D2 32%,#C8AA6E 72%,#785A28);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hub-lede{
  margin:14px 0 34px; max-width:56ch;
  font:400 clamp(13px,1.6vw,15px)/1.65 var(--font-body); color:var(--dim);
}

/* ---- account chip ------------------------------------------------------- */
.acct{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.ac-hi{
  font:700 11px/1 var(--font-body); letter-spacing:1.6px; color:var(--gold-1);
  max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acct button, .ac-admin{
  padding:7px 13px; border-radius:6px; cursor:pointer; text-decoration:none;
  background:#0a1219; border:1px solid var(--gold-5); color:var(--dim);
  font:700 9.5px/1 var(--font-body); letter-spacing:1.8px;
  transition:color .15s, border-color .15s;
}
.acct button:hover, .ac-admin:hover{ color:var(--gold-1); border-color:var(--gold-3); }
.ac-in{ border-color:var(--gold-3) !important; color:var(--gold-1) !important; }
.ac-admin{ color:var(--orange); border-color:rgba(251,146,69,.4); }

/* ---- cards -------------------------------------------------------------- */
.cards{
  display:grid; gap:clamp(16px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
}
.card{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,rgba(14,26,38,.96),rgba(4,10,16,.98));
  border:1px solid var(--gold-4); border-radius:10px;
  overflow:hidden; text-decoration:none; color:inherit;
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  transition:transform .22s cubic-bezier(.2,1,.3,1), border-color .22s, box-shadow .22s;
}
.card:hover,.card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--gold-2);
  box-shadow:0 18px 48px rgba(0,0,0,.7), 0 0 0 1px rgba(200,170,110,.25);
  outline:none;
}
.card-art{
  position:relative; aspect-ratio:400/240; overflow:hidden;
  border-bottom:1px solid rgba(120,90,40,.45);
  background:#0b1420;
}
.card-art svg{ display:block; width:100%; height:100%; }
.card-art::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(4,10,16,.9));
}
.card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.card-kicker{
  font:700 9.5px/1 var(--font-body); letter-spacing:2.6px; color:var(--gold-3);
}
.card h2{
  margin:9px 0 0;
  font:600 clamp(21px,2.8vw,27px)/1.15 var(--font-display); letter-spacing:1px;
  color:var(--gold-1);
}
.card p{
  margin:11px 0 0; font:400 13.5px/1.6 var(--font-body); color:var(--dim);
}
.card-cta{
  align-self:flex-start; margin-top:auto; padding-top:0;
  margin-top:20px;
  display:inline-block; padding:11px 30px;
  font:700 12px/1 var(--font-body); letter-spacing:3px; color:var(--gold-1);
  background:linear-gradient(180deg,#1E3448,#0A141C);
  border:1px solid var(--gold-3); border-radius:4px;
  transition:background .2s, box-shadow .2s;
}
.card:hover .card-cta{
  background:linear-gradient(180deg,#2A4863,#101E29);
  box-shadow:0 0 18px rgba(200,155,60,.45);
}
.card-strike:hover .card-cta{ box-shadow:0 0 18px rgba(251,146,69,.5); }
.card-strike:hover{ border-color:var(--orange); }
.card-strike .card-kicker{ color:var(--orange); }
.card-oranco:hover .card-cta{ box-shadow:0 0 18px rgba(92,200,255,.5); }
.card-oranco:hover{ border-color:var(--water,#5CC8FF); }
.card-oranco .card-kicker{ color:#7FD8FF; }
.card-empire:hover .card-cta{ box-shadow:0 0 18px rgba(74,222,128,.45); }
.card-empire:hover{ border-color:#4ADE80; }
.card-empire .card-kicker{ color:#7FE9A4; }
.card-frontier:hover .card-cta{ box-shadow:0 0 18px rgba(92,200,255,.4); }
.card-frontier:hover{ border-color:#9fb8ce; }
.card-frontier .card-kicker{ color:#9fb8ce; }

/* ---- the rail ------------------------------------------------------------
   On a computer the page does not scroll. The window is the frame, and the
   games rotate through it sideways — arrows, arrow keys, a wheel or a drag.
   A phone keeps the ordinary vertical stack, because a fixed-height rail on a
   400px-tall screen leaves nothing for the card to say.
   -------------------------------------------------------------------------- */
.rail-wrap{ position:relative; }
.rail-nav{ display:none; }

@media (min-width:880px){
  html, body{ height:100%; overflow:hidden; }
  body{ display:flex; flex-direction:column; }

  .hub{
    /* A flex item defaults to min-width:auto, so without this the rail's
       intrinsic width (five cards laid end to end) pushes the whole column
       wider than the window instead of the rail scrolling inside it. */
    flex:1; min-height:0; min-width:0; width:100%; max-width:none;
    display:flex; flex-direction:column;
    padding-top:clamp(6px,1.4vh,20px);
    padding-bottom:clamp(16px,3.2vh,38px);
  }
  .hub-title{ margin:0 0 clamp(10px,2.2vh,22px); font-size:clamp(28px,4.4vh,46px); }

  .rail-wrap{ flex:1; min-height:0; min-width:0; display:flex; align-items:stretch; }

  .cards{
    flex:1; min-width:0;
    display:flex; grid-template-columns:none;
    gap:clamp(14px,1.6vw,24px);
    overflow-x:auto; overflow-y:hidden;
    /* Proximity, not mandatory: mandatory snapping drags a programmatic
       scrollTo back to the nearest card start, so the last card could never
       sit flush against the right edge. */
    scroll-snap-type:x proximity; scroll-behavior:smooth;
    /* The rail has its own arrows; a scrollbar under the cards would be a
       second, uglier set of controls for the same thing. */
    scrollbar-width:none; -ms-overflow-style:none;
    padding:2px 2px 6px; scroll-padding-left:2px;
  }
  .cards::-webkit-scrollbar{ display:none; }

  .card{
    flex:0 0 clamp(292px,25vw,384px);
    height:100%; scroll-snap-align:start;
  }
  .card:last-child{ scroll-snap-align:end; }
  /* The art takes whatever the words leave. preserveAspectRatio="slice" means
     it crops rather than distorts, so any leftover shape is a safe one. */
  .card-art{ aspect-ratio:auto; flex:1 1 auto; min-height:96px; }
  .card-body{ flex:0 0 auto; padding:18px 20px 20px; }
  .card p{ margin-top:9px; font-size:13px; }
  .card-cta{ margin-top:16px; padding:10px 26px; }

  .rail-nav{
    display:grid; place-items:center;
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:58px; z-index:3; cursor:pointer;
    background:linear-gradient(180deg,rgba(14,26,38,.96),rgba(4,10,16,.98));
    border:1px solid var(--gold-4); border-radius:8px;
    color:var(--gold-1); font:400 30px/1 var(--font-body);
    box-shadow:0 10px 30px rgba(0,0,0,.6);
    transition:border-color .18s, color .18s, opacity .18s;
  }
  .rail-nav:hover{ border-color:var(--gold-2); color:#fff; }
  .rail-nav.prev{ left:-16px; }
  .rail-nav.next{ right:-16px; }
}

/* A short laptop window: give the words back to the art. */
@media (min-width:880px) and (max-height:700px){
  .hub-title{ font-size:clamp(24px,3.6vh,34px); }
  .card h2{ font-size:21px; margin-top:7px; }
  .card p{ font-size:12px; line-height:1.5; margin-top:7px; }
  .card-cta{ margin-top:12px; padding:9px 22px; }
  .card-body{ padding:13px 15px 15px; }
}

@media (max-width:420px){
  .brand-mark{ font-size:16px; padding:6px 10px; }
  .brand-sub{ letter-spacing:3px; }
  .card-body{ padding:15px 16px 17px; }
  /* Three items will not sit on one line at this width. Let the account chip
     and the link share a second row rather than crushing all three. */
  .hub-head{ justify-content:flex-start; }
  .acct{ margin-left:auto; }
  .back{ flex-basis:100%; }
}