/* ============================================================
   Neha Sule — poker portfolio
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{
  font-family:'Silkscreen';
  src:url('assets/fonts/silkscreen-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Silkscreen';
  src:url('assets/fonts/silkscreen-latin-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Pixelify Sans';
  src:url('assets/fonts/pixelify-sans-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Pixelify Sans';
  src:url('assets/fonts/pixelify-sans-latin-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Campanile';
  src:url('assets/fonts/campanile.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --black:#050505;
  --felt:#2e8236;
  --felt-dark:#164000;
  --teal:#00a8c7;
  --teal-dark:#0088a1;
  --modal-green:#2a6b2f;
  --rank-green:#164000;
  --white:#ffffff;
  --split:53.5%;              /* black / felt divide */
  --pixel:'Silkscreen', monospace;
  --body:'Pixelify Sans', monospace;
  --card-h:clamp(150px, 23vw, 300px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--black);
  color:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:none;
  font-variant-ligatures:none;
  -webkit-font-feature-settings:"liga" 0,"clig" 0;
  font-feature-settings:"liga" 0,"clig" 0;
}

/* ============================================================
   FIXED STAGE
   ============================================================ */
.stage{position:fixed;inset:0;overflow:hidden;z-index:1}

.bg{position:absolute;inset:0;
  background:
    linear-gradient(to bottom,
      var(--black) 0, var(--black) var(--split),
      #34903b var(--split), #2c7d33 calc(var(--split) + 1%),
      #227129 100%);
}
.bg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 55% at 50% 82%, rgba(150,240,150,.16), transparent 62%),
    radial-gradient(90% 40% at 50% 100%, rgba(0,0,0,.35), transparent 70%);
}

/* ============================================================
   HERO — deck + ante
   ============================================================ */
.deck-wrap{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:26px;
  transition:opacity .55s ease, transform .55s ease;
  z-index:6;
}
.deck{
  height:clamp(300px, 52vh, 520px);width:auto;display:block;
  filter:drop-shadow(10px 16px 0 rgba(0,0,0,.35)) drop-shadow(0 22px 30px rgba(0,0,0,.5));
  animation:float 5s ease-in-out infinite;
}
.deck-shadow{
  position:absolute;bottom:-4%;left:50%;transform:translateX(-50%);
  width:52%;height:26px;border-radius:50%;
  background:radial-gradient(closed-side,rgba(0,0,0,.5),transparent 70%);
  background:radial-gradient(rgba(0,0,0,.45),transparent 70%);
  filter:blur(3px);
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.scroll-hint{
  font-family:var(--pixel);font-size:13px;letter-spacing:1px;
  color:rgba(255,255,255,.7);display:flex;align-items:center;gap:8px;
  margin-top:2px;
}
.scroll-hint .chev{animation:bob 1.4s ease-in-out infinite;display:inline-block}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* Once playing, tuck the deck away */
body:not([data-level="0"]) .deck-wrap{
  opacity:0;transform:translate(-50%,-150%) scale(.5);pointer-events:none;
}

/* ============================================================
   CARD TABLE
   ============================================================ */
.table{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(1180px, 94vw);
  display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(10px, 2.4vw, 40px);
  padding-bottom:clamp(14px, 4vh, 60px);
  z-index:4;
  opacity:0;transition:opacity .5s ease;
  pointer-events:none;
}
body:not([data-level="0"]) .table{opacity:1;pointer-events:auto}

.card{
  position:relative;
  height:var(--card-h);
  aspect-ratio:300/420;
  flex:0 0 auto;
  perspective:1400px;
  transform:translateY(0) scale(.92);
  opacity:1;
  transition:transform .6s cubic-bezier(.2,.8,.25,1), opacity .5s ease;
}
.card-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transform:rotateY(180deg);           /* start face-down */
  transition:transform .8s cubic-bezier(.3,.9,.25,1);
}
.face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:12px;overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.face.back{transform:rotateY(180deg)}
.face.front{transform:rotateY(0deg)}
.face.front .portrait,
.face.front .role-side{
  position:absolute;inset:0;transition:opacity .4s ease;
}
.face.front .role-side{opacity:0}
.role-card{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.role-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66%;text-align:center;
  font-family:'Campanile', serif;text-transform:uppercase;
  line-height:1.05;letter-spacing:0;
  font-size:clamp(13px, 2.05vw, 27px);
  color:#333;                       /* overridden per suit below */
  pointer-events:none;
}
#card-hearts   .role-label{color:#f13a4c}
#card-diamonds .role-label{color:#8284fb}
#card-spades   .role-label{color:#e47254}
#card-clubs    .role-label{color:#62b405}

/* revealed */
.card.revealed{opacity:1;transform:translateY(0) scale(1.02)}
.card.revealed .card-inner{transform:rotateY(0deg)}
.card.revealed{cursor:pointer;pointer-events:auto}

/* show role side when toggled */
.card.show-role .front .portrait{opacity:0}
.card.show-role .front .role-side{opacity:1}

/* active (newest) card pops */
.card.active{
  transform:translateY(-6%) scale(1.16);
  z-index:5;
}
.card.active .face{box-shadow:0 18px 40px rgba(0,0,0,.6)}

.flip-hint{
  position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  font-family:var(--pixel);font-size:9px;letter-spacing:.5px;
  color:rgba(255,255,255,.55);white-space:nowrap;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.card.active.revealed .flip-hint{opacity:1}

/* ============================================================
   HAND MODAL (top-right)
   ============================================================ */
.hand-modal{
  position:absolute;top:clamp(18px,3vh,40px);right:clamp(16px,3vw,64px);
  width:clamp(168px,17vw,210px);
  background:var(--modal-green);
  border-radius:16px;
  box-shadow:0 6px 4px rgba(0,0,0,.25), 0 0 0 3px rgba(0,0,0,.12) inset;
  overflow:hidden;text-align:center;
  z-index:7;
  transform:translateY(-8px);opacity:0;
  transition:opacity .5s ease, transform .5s ease;
}
body:not([data-level="0"]) .hand-modal{opacity:1;transform:translateY(0)}
.hm-head{
  font-family:var(--pixel);font-weight:700;color:#fff;
  font-size:clamp(13px,1.1vw,16px);padding:10px 8px 8px;letter-spacing:.5px;
}
.hm-band{
  background:#fff;padding:12px 6px;
  display:flex;align-items:center;justify-content:center;min-height:48px;
}
.hm-rank{
  font-family:var(--pixel);font-weight:700;color:var(--rank-green);
  font-size:clamp(13px,1.35vw,18px);letter-spacing:0;line-height:1;
  white-space:nowrap;
}
.hm-foot{padding:10px 8px 14px}

/* ============================================================
   BUTTONS (teal pills)
   ============================================================ */
.btn{
  font-family:var(--pixel);font-weight:700;color:#fff;
  background:var(--teal);border:none;cursor:pointer;
  border-radius:100px;
  padding:9px 20px;font-size:clamp(13px,1.1vw,16px);letter-spacing:.5px;
  box-shadow:0 4px 4px rgba(0,0,0,.25);
  transition:transform .12s ease, background .2s ease, box-shadow .12s ease;
}
.btn:hover{background:#12b8d6;transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:0 2px 2px rgba(0,0,0,.25)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ante-btn{font-size:clamp(15px,1.4vw,20px);padding:12px 30px}

/* ============================================================
   CONTENT PANEL (top-left)
   ============================================================ */
.content-panel{
  position:absolute;top:clamp(40px,7vh,90px);left:clamp(20px,5vw,106px);
  width:min(430px, 62vw);
  z-index:6;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s ease, transform .45s ease;
}
body[data-level="1"] .content-panel,
body[data-level="2"] .content-panel,
body[data-level="3"] .content-panel,
body[data-level="4"] .content-panel{opacity:1;transform:translateY(0);pointer-events:auto}

.cp-role{
  font-family:var(--pixel);font-weight:700;
  font-size:clamp(15px,1.5vw,21px);
  display:flex;align-items:center;gap:10px;margin-bottom:22px;
  color:#fff;
}
.cp-role .suit{font-size:1.15em;line-height:1}
.cp-heart{color:#ff5b73}.cp-diamond{color:#ffb03b}
.cp-spade{color:#7fd0ff}.cp-club{color:#8ad17f}

.bullets{display:flex;flex-direction:column;gap:clamp(16px,2.6vh,30px)}
.bullet{display:flex;gap:16px;align-items:flex-start}
.bullet .chip{width:clamp(30px,3vw,44px);height:auto;flex:0 0 auto;margin-top:2px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.bullet .b-text{min-width:0}
.bullet .b-title{
  font-family:var(--pixel);font-weight:700;color:#fff;
  font-size:clamp(15px,1.4vw,22px);line-height:1.15;margin-bottom:5px;
}
.bullet .b-line{font-size:clamp(12px,1.05vw,15px);line-height:1.35;color:#eaeaea}
.bullet .b-line.muted{color:#9fb89f}
.bullet a.b-line{color:#59e6ff;text-decoration:underline;text-underline-offset:2px}
.bullet a.b-line:hover{color:#a8f2ff}
.bullet.placeholder{opacity:.72}
.bullet.placeholder .b-title::after{
  content:' ✎';font-size:.7em;color:#ffd23b;opacity:.8;
}

/* ============================================================
   SCROLL DRIVER
   ============================================================ */
.scroller{position:relative;z-index:2}
.act{height:100vh;width:100%;pointer-events:none}
.act-end{height:100vh;display:flex;align-items:flex-start;justify-content:center;
  pointer-events:auto}
.site-footer{
  margin-top:14vh;text-align:center;font-family:var(--pixel);
  background:rgba(0,0,0,.35);padding:22px 34px;border-radius:16px;
  backdrop-filter:blur(2px);
}
.site-footer p{font-size:15px;margin-bottom:8px;color:#fff}
.foot-links a{color:#59e6ff;text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.shuffle-btn{margin-top:14px}

/* the footer sits inside a fixed stage-free region so it's clickable */
.act-end{position:relative;z-index:8}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  :root{--split:50%;--card-h:clamp(120px,30vw,200px)}
  .content-panel{
    top:auto;bottom:calc(var(--card-h) + 14vh);
    left:50%;transform:translateX(-50%);width:min(92vw,440px);
    background:rgba(0,0,0,.45);padding:16px 16px 18px;border-radius:14px;
    backdrop-filter:blur(2px);
  }
  body[data-level="1"] .content-panel,
  body[data-level="2"] .content-panel,
  body[data-level="3"] .content-panel,
  body[data-level="4"] .content-panel{transform:translateX(-50%)}
  .bullets{gap:12px}
  .hand-modal{width:clamp(130px,40vw,180px)}
  .deck{height:clamp(240px,42vh,360px)}
  .table{gap:6px;padding-bottom:16px}
}
@media (max-width:480px){
  .content-panel{bottom:calc(var(--card-h) + 12vh)}
  .cp-role{margin-bottom:12px}
  .bullet .b-line{font-size:12px}
}

/* Motion-reduce */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  html{scroll-behavior:auto}
  .card,.card-inner,.deck-wrap,.hand-modal,.content-panel{transition:opacity .2s ease}
}