/* Immersive skin: layout concept #2's look (floating pill nav, glow orbs, giant type, big rounded cards) on top of the
   companion app's working screens. Loaded by index.html, after the page's own styles, so everything
   here overrides. All features, data and ids are shared with index-companion.html (the previous layout, kept as a backup). */

body.imm{background:var(--bg); background-image:none;}
.bgorbs{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.bgorbs i{position:absolute; border-radius:50%; filter:blur(110px);}
.bgorbs .o1{width:600px; height:600px; background:rgba(139,92,246,.30); top:-200px; left:-180px;}
.bgorbs .o2{width:480px; height:480px; background:rgba(34,211,238,.12); bottom:-160px; right:-100px;}
.imm > main{position:relative; z-index:1;}
.imm > .hud{position:relative; z-index:10;}  /* above main; phones switch it to sticky below */

/* ---------- floating pill nav ---------- */
@media (min-width:821px){
  .imm .hud{margin:14px auto 6px; width:max-content; max-width:calc(100% - 28px); gap:12px; padding:6px 8px 6px 12px; border:1px solid var(--line2); border-bottom:1px solid var(--line2); border-radius:999px; background:rgba(13,15,26,.72); backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(0,0,0,.45);}
  .imm .tabs{background:none; border:0; padding:0; gap:2px;}
  .imm .tabs button{border-radius:999px; padding:8px 15px;}
  .imm .search .field{width:220px;}
  .imm .search{margin-left:8px;}
}
@media (min-width:821px) and (max-width:1320px){ .imm .search .field{width:170px;} }
.imm .mark{border-radius:50%;}
.imm .field, .imm .chip, .imm .cm-btn, .imm .cchips button, .imm .linetabs, .imm .linetabs button, .imm .viewtog, .imm .viewtog button{border-radius:999px;}
.imm .search .field{border-radius:999px;}

/* ---------- app screens: same panels, softer immersive framing ---------- */
.imm .screen{padding:8px 18px 18px;}
.imm .frame{border-radius:24px; background:rgba(18,21,36,.74); border-color:var(--line2); box-shadow:0 24px 60px rgba(0,0,0,.35);}
.imm .frame::before{display:none;}
.imm .flbl{font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-.02em; text-transform:none; color:var(--text); padding:16px 20px;}
.imm .flbl .count{font-family:var(--mono); font-size:11.5px; font-weight:400; color:var(--muted);}
.imm .pic-m{border-radius:16px;}

/* ---------- hub: the immersive landing page ---------- */
.imm .hubscr{display:block; overflow-y:auto; padding:0 0 60px;}
.imm .hubscr::-webkit-scrollbar{width:8px;} .imm .hubscr::-webkit-scrollbar-thumb{background:var(--line2); border-radius:4px;}
.ihero{display:grid; grid-template-columns:1.2fr 1fr; gap:4vw; align-items:center; min-height:min(640px,calc(100vh - 90px)); padding:20px 6vw 60px;}
.mega{font-size:clamp(56px,9.5vw,150px); line-height:.86; letter-spacing:-.055em; font-weight:700; margin:14px 0 0;}
.mega .out{display:block; color:transparent; -webkit-text-stroke:2px var(--accent);}
.ihero .lead{color:var(--muted); font-size:clamp(15px,1.35vw,18px); max-width:480px; margin:26px 0 30px; line-height:1.6;}
.cta{display:flex; gap:10px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px; font-weight:600; font-size:14px; border:1px solid var(--line2); color:var(--text); background:var(--card); cursor:pointer; transition:transform .15s, border-color .15s;}
.btn:hover{transform:translateY(-2px); border-color:var(--accent);}
.btn.pri{background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 10px 30px rgba(139,92,246,.4);}

/* floating stack of real entries */
.stack{position:relative; height:470px;}
.fc{position:absolute; width:240px; padding:0; overflow:hidden; text-align:left; border-radius:22px; background:var(--card); border:1px solid var(--line2); box-shadow:0 24px 60px rgba(0,0,0,.6); cursor:pointer; transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.fc:nth-child(1){top:0; left:4%; transform:rotate(-7deg); z-index:3;}
.fc:nth-child(2){top:110px; left:42%; transform:rotate(5deg); z-index:2;}
.fc:nth-child(3){top:220px; left:14%; transform:rotate(-2deg); z-index:1;}
.fc:hover, .fc:focus-visible{transform:rotate(0) scale(1.05); z-index:5;}
.fc img{display:block; width:100%; height:190px; object-fit:cover; object-position:50% 22%; background:var(--card2);}
.fc .fcb{display:block; padding:14px 18px 16px; position:relative;}
.fc b{display:block; font-size:18px; letter-spacing:-.02em; margin-top:2px;}
.fc .rank{position:absolute; top:14px; right:16px; font-family:var(--mono); font-size:12px; color:var(--muted);}

/* featured game: the big overlapping card */
.ifeature{margin:-40px 6vw 0; position:relative; z-index:2;}
.ifeature .gcard{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:0 36px; padding:0 34px 30px; border-radius:28px; overflow:hidden; border:1px solid rgba(139,92,246,.45); background:linear-gradient(115deg,rgba(139,92,246,.22),rgba(18,21,36,.92) 45%,rgba(34,211,238,.08)); box-shadow:0 30px 80px rgba(0,0,0,.45);}
.ifeature .g-banner{grid-column:1/-1; margin:0 -34px 24px; height:clamp(200px,26vw,340px); border-bottom:0;}
.ifeature .g-banner::after{background:linear-gradient(180deg,transparent 40%,rgba(18,21,36,.9));}
.ifeature .g-hero, .ifeature .desc, .ifeature .g-ver, .ifeature .g-btns{grid-column:1;}
.ifeature .g-ver{justify-self:start; border-radius:999px;}
.ifeature .g-hero h2{font-size:clamp(30px,3.4vw,46px);}
.ifeature .g-stats{grid-column:2; grid-row:2 / span 3; align-self:start; grid-template-columns:repeat(2,1fr); gap:12px; margin:0;}
.ifeature .g-stats div{border-radius:18px; padding:18px 10px;}
.ifeature .g-stats b{font-size:34px;}
.ifeature .eh, .ifeature .tips, .ifeature .linkbtn{grid-column:2;}
.ifeature .eh{margin-top:18px;}
.ifeature .g-btns{margin-top:6px;}

/* numbered sections */
.isec{padding:90px 6vw 0;}
.sechead{display:flex; align-items:flex-end; gap:22px; margin-bottom:34px; flex-wrap:wrap;}
.num{font-size:clamp(66px,8.5vw,120px); font-weight:700; line-height:.78; color:transparent; -webkit-text-stroke:1.5px var(--line2); letter-spacing:-.05em;}
.sechead h2{font-size:clamp(30px,4.2vw,54px); letter-spacing:-.035em; line-height:1;}
.sechead p{color:var(--muted); max-width:360px; margin-left:auto; font-size:14px;}
.modes{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.imm .modes .mbtn{flex-direction:column; align-items:flex-start; gap:34px; padding:24px; border-radius:24px; min-height:170px; background:rgba(18,21,36,.8);}
.imm .modes .mbtn:hover, .imm .modes .mbtn:focus-visible{transform:translateY(-4px); box-shadow:0 18px 40px rgba(139,92,246,.25);}
.imm .modes .mbtn .i{width:30px; height:30px;}
.imm .modes .mbtn b{font-size:21px; letter-spacing:-.02em;}
.imm .modes .mbtn kbd{position:absolute; top:22px; right:22px;}
.imm .modes .mbtn{position:relative;}
.outro{font-size:clamp(52px,14vw,220px); font-weight:700; letter-spacing:-.06em; line-height:.9; text-align:center; white-space:nowrap; color:transparent; -webkit-text-stroke:1px var(--line2); padding:80px 0 0; overflow:hidden;}

@media (max-width:1000px){
  .ihero{grid-template-columns:1fr; min-height:auto; padding-top:24px;}
  .stack{height:380px; max-width:520px;} .fc{width:200px;} .fc img{height:150px;}
  .ifeature .gcard{grid-template-columns:1fr; padding:0 22px 24px;}
  .ifeature .g-banner{margin:0 -22px 20px;}
  .ifeature .g-stats, .ifeature .eh, .ifeature .tips, .ifeature .linkbtn{grid-column:1; grid-row:auto;}
  .ifeature .g-stats{grid-template-columns:repeat(4,1fr); margin:14px 0;}
  .ifeature .g-stats b{font-size:22px;}
}
@media (max-width:820px){
  .bgorbs .o1{width:380px; height:380px;} .bgorbs .o2{width:300px; height:300px;}
  .imm .hud{position:sticky; background:rgba(13,15,26,.9);}
  .imm .screen{padding:10px 10px 90px;}
  .imm .hubscr{padding:0 0 100px; overflow:visible;}
  .ihero{padding:16px 16px 40px;}
  .stack{height:330px;} .fc{width:170px;} .fc img{height:120px;} .fc b{font-size:15px;}
  .fc:nth-child(2){left:40%; top:90px;} .fc:nth-child(3){top:180px; left:8%;}
  .ifeature{margin:0 10px;}
  .ifeature .g-stats{grid-template-columns:repeat(2,1fr);}
  .isec{padding:60px 16px 0;}
  .sechead p{margin-left:0;}
  .imm .modes .mbtn{min-height:0; gap:14px;}
  .imm .modes .mbtn kbd{display:none;}
}

/* pill nav: short tab names (full names live on the Hub tiles), no wrapping; number hints only on wide screens */
.imm .tabs button{white-space:nowrap;}
.imm .tabs .long{display:none;} .imm .tabs .short{display:inline;}
@media (max-width:1560px){ .imm .tabs kbd{display:none;} }

/* phones: 8 tabs share the bottom bar, so each shows a one-word label (data-m) under its icon */
@media (max-width:820px){
  .imm .tabs button{font-size:0; padding:7px 1px; min-width:0; gap:3px;}
  .imm .tabs button::after{content:attr(data-m); font-size:10px; font-weight:600; line-height:1;}
  .imm .tabs .long, .imm .tabs .short{display:none;}
}

/* touch screens: bigger tap areas for small controls (same look, larger hit zone) */
@media (pointer:coarse){
  .qchk{position:relative;}
  .qchk::after{content:""; position:absolute; inset:-12px;}             /* quest tick: 20px box, 44px tap zone */
  .pt-cnt button{width:36px; height:36px;}
  .linkbtn{padding-block:8px;}
  .lb-seg button{padding-block:10px;}
  .tip-patch{padding-block:6px;}
}
/* very narrow phones (iPhone SE and smaller): 8 tab labels in ~33px each */
@media (max-width:360px){ .imm .tabs button::after{font-size:9px; letter-spacing:-.45px;} }