/* ============================================================================
   Arline Arcade — casino theme
   Garish green felt + gaudy gold to match the logo. Vanilla CSS, no build.
   Local fonts; url()s resolve relative to THIS file so every page works.
   ========================================================================== */

@font-face{
  font-family:"Selawik";
  src:url("../assets/fonts/selawk.ttf") format("truetype");
  font-weight:300 700; font-display:swap;
}
@font-face{
  font-family:"Cascadia Code NF";
  src:url("../assets/fonts/CascadiaCodeNF.ttf") format("truetype");
  font-weight:200 700; font-display:swap;
}

:root{
  /* The deck is a fixed felt-green/gold theme — never let phone "dark mode" /
     force-dark invert it (that's what turned the white SVG number cards black
     with light glyphs while the PNG courts stayed normal). "only light" opts the
     whole app out of any UA dark adjustment. */
  color-scheme: only light;

  --felt:#0c6b40;          /* table green        */
  --felt-2:#085030;
  --felt-edge:#04341f;
  --gold:#e9c34a;          /* gaudy gold         */
  --gold-2:#a9791a;
  --gold-hi:#fff0b0;
  --red:#d11f33;
  --cream:#fff7e2;
  --paper:#fdeec0;         /* text on felt       */
  --muted:#cdb888;
  --ink:#0c2417;
  --line:rgba(233,195,74,.34);

  --display:"Selawik","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Code NF",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --maxw:1000px; --radius:18px;
  --gold-grad:linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-2));

  /* motion + elevation tokens (Material 3 / Fluent-style, tuned to the felt) */
  --ease-standard:cubic-bezier(.2,0,0,1);      /* everyday transitions        */
  --ease-decelerate:cubic-bezier(.05,.7,.1,1); /* things arriving on screen   */
  --ease-accelerate:cubic-bezier(.3,0,.8,.15); /* things leaving              */
  --dur-quick:150ms; --dur-med:250ms; --dur-slow:400ms;
  --elev-1:0 2px 6px rgba(0,0,0,.35);
  --elev-2:0 6px 18px rgba(0,0,0,.42);
  --elev-3:0 14px 34px rgba(0,0,0,.5);
}

/* cross-page fade + a persistent, morphing logo (View Transitions; older
   browsers simply navigate instantly — no harm) */
@view-transition{ navigation:auto }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overscroll-behavior:none}
body{
  margin:0; min-height:100dvh; color:var(--paper); overscroll-behavior:none;
  font-family:var(--body); line-height:1.5; font-size:clamp(16px,1rem + .25vw,18px);
  background:
    radial-gradient(120% 85% at 50% 6%, var(--felt) 0%, var(--felt-2) 46%, var(--felt-edge) 100%) fixed;
  position:relative;
  display:flex; flex-direction:column; align-items:center;
}
/* faint felt weave */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
}
a{color:inherit}

/* one visible, consistent keyboard-focus ring everywhere (Fluent-style) */
:focus{outline:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:6px}

/* ---- layout --------------------------------------------------------------- */
.wrap{width:100%; max-width:var(--maxw); padding:clamp(18px,4vw,44px) clamp(16px,4vw,30px); margin:0 auto}

/* ---- header / logo -------------------------------------------------------- */
.site-header{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.7rem; margin-bottom:clamp(24px,5vw,46px)}
.logo-img{
  width:min(90vw,560px); height:auto; display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(233,195,74,.30));
  view-transition-name:arcade-logo;   /* stays put / morphs across pages */
}
.tagline{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-hi); padding:.4rem 1rem; border:1px solid var(--line); border-radius:999px;
  background:rgba(0,0,0,.18);
}
/* legacy header bits kept harmless if present */
.monogram,.wordmark,.rule{display:none}

/* ---- game grid ------------------------------------------------------------ */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:clamp(14px,2.4vw,22px)}
.tile{
  position:relative; display:flex; flex-direction:column; gap:.35rem;
  padding:clamp(20px,3vw,28px); min-height:188px; text-decoration:none; color:var(--cream);
  background:
    linear-gradient(180deg, rgba(10,70,42,.92), rgba(6,52,31,.96));
  border:3px solid transparent;
  border-radius:var(--radius);
  /* gaudy gold frame via layered shadows */
  box-shadow:
    0 0 0 3px var(--gold-2),
    0 0 0 4px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,240,176,.25),
    inset 0 18px 40px rgba(0,0,0,.35),
    0 14px 30px rgba(0,0,0,.4);
  transition:transform var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-standard);
  overflow:hidden;
}
/* staggered entrance on load (each tile sets --i inline) */
@media (prefers-reduced-motion:no-preference){
  .tile{ animation:tileIn var(--dur-slow) var(--ease-decelerate) backwards; animation-delay:calc(var(--i,0)*45ms) }
}
@keyframes tileIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.tile::before{ /* sheen */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 60% at 50% -20%, rgba(255,255,255,.12), transparent 60%);
}
.tile:hover,.tile:focus-visible{
  transform:translateY(-4px); outline:none;
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 0 5px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,240,176,.4),
    inset 0 18px 40px rgba(0,0,0,.3),
    0 18px 44px rgba(0,0,0,.5),
    0 0 34px rgba(233,195,74,.45);
}
.tile .idx{font-family:var(--mono); font-size:.78rem; color:var(--gold); letter-spacing:.12em}
.tile .suit{position:absolute; right:16px; top:14px; font-size:1.7rem; color:var(--gold); opacity:.8; text-shadow:0 1px 4px rgba(0,0,0,.5)}
.tile h2{
  font-family:var(--display); font-weight:700; font-size:1.6rem; margin:.1rem 0 0;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.tile p{margin:0; color:var(--paper); font-size:.97rem; opacity:.92}
.tile .go{margin-top:auto; font-family:var(--mono); font-size:.82rem; color:var(--gold-hi); display:inline-flex; align-items:center; gap:.4rem}
.tile .go::after{content:"→"; transition:transform .2s ease}
.tile:hover .go::after{transform:translateX(4px)}
/* pressed state: quick sink, feels tactile on touch (Fluent press) */
.tile:active{ transform:translateY(-1px) scale(.985); transition-duration:60ms }
.tile .badge{
  position:absolute; right:14px; bottom:14px; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); background:var(--gold-grad); padding:.22rem .55rem; border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* ---- footer --------------------------------------------------------------- */
.site-footer{margin-top:clamp(30px,6vw,58px); text-align:center; color:var(--muted); font-size:.88rem}
.site-footer .heart{color:var(--red)}
.site-footer a{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--line)}

/* ---- game-page chrome (stubs / wrappers) ---------------------------------- */
/* acrylic app bar: sticky, translucent, blurred (Fluent), hairline gold rule */
.topbar{
  position:sticky; top:0; z-index:120;
  width:100%; max-width:var(--maxw); display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:clamp(10px,2.2vw,16px) clamp(16px,4vw,30px); margin:0 auto;
  background:linear-gradient(180deg, rgba(3,36,22,.88), rgba(3,36,22,.62));
  backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid rgba(233,195,74,.22); box-shadow:var(--elev-1);
}
.back{font-family:var(--mono); font-size:.85rem; color:var(--gold-hi); text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.5rem 1rem; border:1px solid var(--line); border-radius:999px; background:rgba(0,0,0,.22); transition:border-color var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-standard), transform var(--dur-quick) var(--ease-standard)}
.back:hover{border-color:var(--gold); box-shadow:0 0 18px rgba(233,195,74,.35)}
.back:active{transform:scale(.97)}
.crumb{font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.topbar-logo{ height:34px; width:auto; view-transition-name:arcade-logo; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) }

.stub{width:100%; max-width:560px; margin:clamp(40px,12vw,120px) auto; text-align:center; padding:0 24px}
.stub .big{font-size:clamp(3rem,16vw,5.5rem); color:var(--gold); text-shadow:0 2px 10px rgba(0,0,0,.5)}
.stub h1{font-family:var(--display); font-weight:700; font-size:clamp(2rem,8vw,3rem); margin:.5rem 0 .2rem; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stub p{color:var(--paper); margin:.2rem 0 1.4rem; opacity:.9}
.stub .soon-pill{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:var(--gold-grad); padding:.32rem .85rem; border-radius:999px}

/* ---- cinematic intro ------------------------------------------------------ */
body.intro-lock{ overflow:hidden }
#intro{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center; overflow:hidden; cursor:pointer;
  background:radial-gradient(120% 90% at 50% 12%, var(--felt) 0%, var(--felt-2) 45%, #021a0f 100%);
}
#intro.gone{ opacity:0; transition:opacity .62s ease; pointer-events:none }
#introgl{ position:absolute; inset:0; width:100%; height:100%; display:block }
#introLogo{
  position:relative; z-index:2; width:min(88vw,640px); max-width:640px; height:auto;
  transform:scale(.2); opacity:0; will-change:transform,opacity;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(233,195,74,.4));
}
#introLogo.pop{ animation:logoPop 1s cubic-bezier(.16,1.4,.3,1) forwards }
@keyframes logoPop{
  0%{ transform:scale(.2) rotate(-7deg); opacity:0 }
  55%{ opacity:1 }
  70%{ transform:scale(1.07) rotate(1.5deg) }
  100%{ transform:scale(1) rotate(0); opacity:1 }
}
#introSkip{
  position:absolute; z-index:3; bottom:6%; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--ink);
  background:var(--gold-grad); border:none; border-radius:999px; padding:.55rem 1.2rem; cursor:pointer; font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.4); animation:skipFade .6s ease 1.2s both;
}
@keyframes skipFade{ from{opacity:0} to{opacity:.95} }

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  #introLogo{ transform:none; opacity:1 } #introLogo.pop{ animation:none }
}

/* ---- music toggle --------------------------------------------------------- */
.music-toggle{
  position:fixed; z-index:900; right:16px; bottom:16px; width:48px; height:48px;
  border:none; border-radius:50%; cursor:pointer; font-size:1.2rem; color:var(--ink);
  background:var(--gold-grad); display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,240,176,.5);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.music-toggle:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.5), 0 0 22px rgba(233,195,74,.55) }
.music-toggle.off{ filter:grayscale(.7) brightness(.82) }

.replay-link{
  margin-top:.7rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--gold-hi); background:rgba(0,0,0,.22); border:1px solid var(--line);
  border-radius:999px; padding:.6rem 1rem; min-height:44px; cursor:pointer;
  transition:border-color var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-standard);
}
.replay-link:hover{ border-color:var(--gold); box-shadow:0 0 16px rgba(233,195,74,.35) }
.replay-link.off{ opacity:.55; filter:grayscale(.6) }