/* Strategy Lab (/s): the Club's casino look (Arut 2026-11-14, PowBet layout): glossy plates, colourful tiles,
   the heroine, 3D icons. Desktop: top bar, left menu, centre, right rail. Phone: one column and a bottom bar.
   Motion is transform/opacity only, 80–320 ms per step, and stops under prefers-reduced-motion. */
body.lab{padding:0;background:radial-gradient(900px 480px at 85% -10%,rgba(255,106,0,.16),transparent 60%),radial-gradient(600px 360px at -10% 40%,rgba(149,92,255,.08),transparent 60%),var(--bg);min-height:100vh}
.lab h1,.lab h2,.lab h3{font-weight:800;letter-spacing:-.01em}

/* buttons: glossy orange (primary), outlined glow (out), dark outline (ghost) */
.lab .btn{min-height:48px;border-radius:14px;padding:0 20px;font-weight:800;transition:transform .08s ease-out,box-shadow .08s ease-out}
.lab .btn.primary{background:var(--goldg);color:#fff;text-shadow:0 1px 0 rgba(120,40,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -3px 0 rgba(115,32,0,.32),0 6px 16px rgba(255,106,0,.22),0 5px 12px rgba(0,0,0,.32)}
.lab .btn.ghost{background:rgba(255,106,0,.06);color:var(--text);border:0;box-shadow:inset 0 0 0 1.5px rgba(255,106,0,.55),0 0 14px rgba(255,106,0,.12)}
.lab .btn.out{background:rgba(255,59,48,.08);color:#fff;text-transform:uppercase;letter-spacing:.02em;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 18px rgba(255,106,0,.28)}
.lab .btn:active{transform:translateY(2px) scale(.98)}
.lab .card{background:var(--plate);border:1px solid var(--line);box-shadow:var(--plate-sh);border-radius:22px}
.lab .chips button{min-height:44px;padding:0 16px;font-weight:700;background:var(--card2);border-color:var(--line2);color:var(--text2)}
.lab .chips button[aria-pressed="true"]{border-color:var(--accent);background:rgba(255,106,0,.12);color:#fff;box-shadow:0 0 14px rgba(255,106,0,.25)}

/* top bar */
.tb{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));
  background:rgba(11,11,15,.94);border-bottom:1px solid var(--line)}
.tb .brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;margin:0}
.tb .brand .logo{height:28px;width:auto}
.tb .brand .logo path{fill:#FF6A00}
.tb .wm{font:800 15px var(--font);letter-spacing:.14em;text-transform:uppercase}
.tb .brand i{font:800 11px/1 var(--font);font-style:normal;letter-spacing:.18em;color:#fff;background:var(--accent);padding:5px 7px;border-radius:6px}
.tb .snav{margin-inline-start:auto}
.tb .snav a{min-height:44px;padding:4px 14px;font-weight:700;font-size:15px}
.tb .snav a[aria-current="page"]{color:#fff;background:none;box-shadow:inset 0 -3px 0 var(--accent);border-radius:0}
.tb .tcta{min-height:44px;font-size:14px;text-transform:uppercase;letter-spacing:.03em}

/* three columns on a computer */
.lay{display:grid;grid-template-columns:240px minmax(0,1fr) 320px;gap:20px;max-width:1560px;margin:0 auto;padding:18px max(20px,env(safe-area-inset-right)) 48px max(20px,env(safe-area-inset-left))}
.lay>main{min-width:0}
.lmenu,.rr{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:6px}
.mi{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 14px 6px 8px;border-radius:14px;color:var(--text2);text-decoration:none;font-weight:700;font-size:15px;transition:transform .08s ease-out}
.mi img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.mi:hover{color:#fff;background:rgba(255,255,255,.03)}
.mi.on{color:#fff;background:rgba(255,106,0,.08);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 18px rgba(255,106,0,.22)}
.mi:active{transform:scale(.97)}
.promo{position:relative;overflow:hidden;margin-top:14px;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:20px;text-decoration:none;color:#fff;
  background:radial-gradient(120% 120% at 100% 0%,rgba(32,164,255,.55),rgba(149,92,255,.35) 40%,#120D1C 75%);border:1px solid var(--line2);box-shadow:var(--plate-sh)}
.promo::after{content:"";position:absolute;inset:0;background:var(--plate-hi);pointer-events:none}
.promo .pbox{position:absolute;inset-inline-end:-10px;top:-6px;width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.promo b{font-size:20px;line-height:1.05;text-transform:uppercase;font-weight:900;max-width:60%}
.promo span{font-size:13px;color:#D6D3E8;max-width:90%}
.promo .btn{align-self:flex-start;min-height:44px;font-size:13px;margin-top:6px}

/* right rail */
.rcard{background:var(--plate);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--plate-sh);margin-bottom:12px}
.rcard h3{margin:0 0 12px;font-size:16px}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.flow li{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:14px;background:rgba(255,255,255,.02);border:1px solid var(--line);transition:background .32s,border-color .32s,transform .32s var(--ease)}
.flow li.on{background:rgba(255,106,0,.08);border-color:rgba(255,106,0,.6);transform:translateX(4px)}
.flow .fi{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:radial-gradient(circle at 50% 35%,rgba(255,106,0,.35),#14141A 75%)}
.flow .fi img{width:40px;height:40px;object-fit:contain}
.flow b{display:block;font-size:15px}
.flow small{display:block;font-size:13px;color:var(--text2);line-height:1.35;margin-top:2px}
.hi{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.hi:first-child{border-top:0}
.hi img{flex:none;width:36px;height:36px;object-fit:contain}
.hi div{min-width:0;flex:1}
.hi b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi small{display:block;font:600 12.5px var(--mono);color:var(--text2)}
.hi button{min-height:44px;min-width:44px;border:0;border-radius:12px;background:var(--card2);color:var(--text);font:700 13px var(--font);cursor:pointer;padding:0 10px}
.empty{font-size:14px;color:var(--text2)}

/* hero banner with the heroine */
.hero{position:relative;overflow:hidden;border-radius:26px;min-height:300px;padding:34px 34px;display:flex;flex-direction:column;justify-content:center;margin-bottom:18px;
  background:linear-gradient(95deg,#0B0B0F 0%,#0B0B0F 32%,rgba(11,11,15,.55) 56%,rgba(11,11,15,0) 76%),url(/static/club3d/photo/hero-bg.webp?v=3) 70% 50%/cover,#2A0E04;
  border:1px solid rgba(255,106,0,.28);box-shadow:var(--plate-sh)}
.hero::after{content:"";position:absolute;inset:0;background:var(--plate-hi);pointer-events:none}
.hero h1{position:relative;z-index:1;margin:0;max-width:62%;font-size:44px;line-height:1.02;text-transform:uppercase;font-weight:900}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{position:relative;z-index:1;max-width:52%;margin:12px 0 20px;color:#D2D2DA;font-size:17px;line-height:1.4}
.hero .btn{position:relative;z-index:1;align-self:flex-start;min-height:52px;font-size:16px;padding:0 26px}
.hero .girl{position:absolute;inset-inline-end:3%;bottom:0;height:104%;width:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));animation:float 6s ease-in-out infinite}
.hero .fl{position:absolute;width:86px;height:86px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));animation:float 5s ease-in-out infinite}
.hero .fl.a{inset-inline-end:34%;top:16px;animation-delay:-1.5s}
.hero .fl.b{inset-inline-end:31%;bottom:18px;width:70px;height:70px;animation-delay:-3s}
@keyframes float{50%{transform:translateY(-8px)}}

/* section heads */
.sec{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.sec h2{margin:0;font-size:20px}
.sec img{width:30px;height:30px;object-fit:contain}
.sec .live{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,106,0,.18)}
.sec .sub{margin:0 0 0 auto;font-size:14px}

/* "best right now" strip */
.wins{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px;margin-bottom:18px}
.wins::-webkit-scrollbar{display:none}
.w1{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:16px;background:var(--plate);border:1px solid var(--line);cursor:pointer;color:#fff;font:inherit;min-height:56px}
.w1 img{width:44px;height:44px;object-fit:contain;border-radius:12px;background:radial-gradient(circle at 50% 35%,rgba(var(--rc),.45),#14141A 75%)}
.w1 b{display:block;font-size:13.5px;font-weight:700;text-align:start}
.w1 small{display:block;font:800 14px var(--mono);color:var(--accent-h);text-align:start}
.w1 small.dn{color:var(--text2)}

/* the idea box */
.lab #ideacard{position:relative;overflow:hidden;padding:24px}
.lab #ideacard::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 220px at 100% 0%,rgba(255,106,0,.14),transparent 70%);pointer-events:none}
.lab #ideacard h2{display:flex;align-items:center;gap:10px;font-size:26px;text-transform:uppercase;font-weight:900;margin:0}
.lab #ideacard h2 img{width:46px;height:46px;object-fit:contain}
.lab .drop{border:1.5px dashed rgba(255,106,0,.45);background:rgba(0,0,0,.25);border-radius:18px;padding:16px}
.lab .drop textarea{font-size:18px;min-height:84px}
.lab #go{min-height:56px;font-size:17px;padding:0 30px;text-transform:uppercase;letter-spacing:.03em}
.srcs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.srcs span{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:var(--card2);color:var(--text2);font:700 12.5px var(--font)}

/* colourful tiles: popular ideas and the 12 strategies */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tiles.grid2{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.tile{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;border:0;cursor:pointer;color:#fff;padding:12px;text-align:center;font:inherit;
  background:linear-gradient(180deg,rgb(var(--rc)) 0%,rgba(var(--rc),.78) 45%,rgba(0,0,0,.6) 100%),#111;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -14px 24px rgba(0,0,0,.35),0 10px 22px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transition:transform .12s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;background:var(--plate-hi);pointer-events:none}
.tile:hover{transform:translateY(-3px)}
.tile:active{transform:scale(.96)}
.tile .art{position:absolute;top:7%;left:50%;width:56%;max-height:52%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.tile b{position:relative;z-index:1;font-size:17px;font-weight:900;text-transform:uppercase;line-height:1.05;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.tile small{position:relative;z-index:1;font-size:12.5px;font-weight:700;opacity:.92;margin-top:4px;line-height:1.25}
.tile .go{position:relative;z-index:1;margin-top:8px;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:10px;background:rgba(0,0,0,.35);font:800 12px var(--font);text-transform:uppercase;letter-spacing:.04em}
.tile.st{aspect-ratio:auto;min-height:200px;justify-content:space-between;align-items:stretch;text-align:start;padding:14px}
.tile.st .rk{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.tile.st .rk span{font:900 14px var(--mono);background:rgba(0,0,0,.35);border-radius:10px;padding:4px 9px}
.tile.st .rk img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.tile.st .res{position:relative;z-index:1;font:900 26px/1.1 var(--mono);margin-top:auto;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.tile.st .dd{position:relative;z-index:1;font:700 12.5px var(--mono);opacity:.9}
.tile.st b{font-size:15px;margin-top:8px}
.tile.st.sel{box-shadow:inset 0 0 0 3px #fff,0 0 24px rgba(255,255,255,.25),0 10px 22px rgba(0,0,0,.4)}
.tile.st.mine{box-shadow:inset 0 0 0 3px var(--accent),0 0 24px rgba(255,106,0,.45)}

.lab .chart{border-radius:22px;background:radial-gradient(700px 320px at 30% 40%,rgba(255,106,0,.06),transparent 70%),#08080B}
.lab details.card{padding:0}
.lab details.card summary{min-height:52px;display:flex;align-items:center;padding:0 18px;cursor:pointer;font-weight:800;list-style:none}
.lab details.card summary::-webkit-details-marker{display:none}
.lab details.card summary::after{content:"+";margin-inline-start:auto;font-size:22px;color:var(--accent)}
.lab details.card[open] summary::after{content:"−"}
.lab details.card .scroll{padding:0 12px 10px}

/* the process overlay and the result pop-up */
.pop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(5,5,8,.82);animation:fade .2s ease-out}
.pop[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.pbx{position:relative;width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:28px;padding:26px 24px 22px;text-align:center;
  background:radial-gradient(420px 260px at 50% 0%,rgba(var(--pc,255,106,0),.32),transparent 70%),linear-gradient(180deg,#1E1E26,#101015);border:1px solid rgba(var(--pc,255,106,0),.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.6);animation:popin .32s var(--ease)}
@keyframes popin{from{opacity:0;transform:scale(.88) translateY(12px)}}
.pbx .x{position:absolute;top:10px;inset-inline-end:10px;width:44px;height:44px;border-radius:50%;border:0;background:var(--card2);color:#fff;font-size:22px;cursor:pointer}
.pbx .thumb{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));animation:thumb .5s var(--ease) both .08s}
@keyframes thumb{0%{opacity:0;transform:scale(.3) rotate(-18deg)}70%{transform:scale(1.08) rotate(4deg)}100%{opacity:1;transform:none}}
.pbx .kick{font:800 12px var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--text2)}
.pbx h2{margin:6px 0 4px;font-size:40px;line-height:1;text-transform:uppercase;font-weight:900}
.pbx.yes h2{color:var(--accent)}
.pbx .rl{color:var(--text2);font-size:15px;margin:0 auto 14px;max-width:420px}
.pbx .money{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 12px}
.pbx .money div{border-radius:16px;padding:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.pbx .money div.me{border-color:rgba(var(--pc),.6);background:rgba(var(--pc),.08)}
.pbx .money small{display:block;font-size:12.5px;color:var(--text2)}
.pbx .money b{display:block;font:900 26px/1.2 var(--mono)}
.pbx .pers{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.pbx .pers span{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:999px;font:700 12.5px var(--font);background:var(--card2);color:var(--text2)}
.pbx .pers span.w{background:rgba(255,106,0,.16);color:#fff}
.pbx .pers i{font-style:normal;font-weight:900}
.pbx .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pbx .acts .btn{min-width:180px}
.pbx .ptop{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-bottom:6px}
.pbx .mascot{height:200px;width:auto;pointer-events:none;animation:float 5s ease-in-out infinite}
.pbx.yes .mascot{animation:jump .9s var(--ease) both .15s}
@keyframes jump{0%{opacity:0;transform:translateY(30px) scale(.8)}60%{transform:translateY(-10px)}100%{opacity:1;transform:none}}
.pbx .flow{text-align:start;margin:18px 0 6px}
.pbx .flow li{opacity:.45}
.pbx .flow li.on{opacity:1}
.pbx .flow li.done{opacity:.85}
.pbx .flow li.done .fi::after{content:"✓";position:absolute;font:900 14px var(--font);color:#fff;background:var(--accent);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;transform:translate(16px,-16px)}
.pbx .flow .fi{position:relative}
.pbx .runner{height:190px;width:auto;margin:0 auto;display:block;animation:float 2.4s ease-in-out infinite}
.pbx .bar3{height:8px;border-radius:4px;background:#24242C;overflow:hidden;margin-top:12px}
.pbx .bar3 i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#FF3B30,#FF6A00 55%,#FFA05C);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .32s var(--ease)}
.conf{position:fixed;inset:0;pointer-events:none;z-index:61;overflow:hidden}
.conf i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:drop 1.6s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes drop{to{transform:translate(var(--dx),110vh) rotate(var(--r));opacity:.9}}

/* bottom bar (phone) */
.bb{display:none}

@media (max-width:1240px){.lay{grid-template-columns:220px minmax(0,1fr)}.rr{display:none}}
@media (max-width:900px){
  .lay{display:block;padding:12px 16px 110px}
  .lmenu,.rr{display:none}
  .tb{padding:8px 16px;gap:10px}
  .tb .snav,.tb .tcta,.tb .wm{display:none}
  .tb #lang{margin-inline-start:auto}
  .hero{min-height:250px;padding:22px 18px;border-radius:24px}
  .hero h1{font-size:27px;max-width:60%}
  .hero p{font-size:14px;max-width:56%;margin:8px 0 14px}
  .hero .btn{min-height:46px;font-size:14px;padding:0 16px}
  .hero .girl{height:auto;width:46%;bottom:-2px;inset-inline-end:-6%}
  .hero .fl{display:none}
  .tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:2px 16px 8px}
  .tiles::-webkit-scrollbar{display:none}
  .tiles .tile{flex:0 0 136px;scroll-snap-align:start}
  .tiles.grid2{display:grid;grid-template-columns:1fr 1fr;overflow:visible;margin:0;padding:0}
  .tiles.grid2 .tile{flex:none}
  .tile.st{min-height:176px}
  .tile.st .res{font-size:22px}
  .lab #ideacard{padding:18px}
  .lab #ideacard h2{font-size:22px}
  .lab #go{width:100%}
  .pbx h2{font-size:32px}
  .pbx .thumb{width:120px;height:120px}
  .pbx .mascot{height:150px}
  .bb{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:rgba(14,14,19,.97);border-top:1px solid var(--line)}
  .bb a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;color:var(--text2);text-decoration:none;font:700 11.5px var(--font)}
  .bb a img{width:28px;height:28px;object-fit:contain}
  .bb a.mid i{display:grid;place-items:center;width:62px;height:62px;margin-top:-30px;border-radius:50%;background:var(--goldg);box-shadow:0 0 0 5px #0E0E13,0 8px 20px rgba(255,106,0,.45)}
  .bb a.mid img{width:42px;height:42px}
  .bb a.mid span{color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .hero .girl,.hero .fl,.pbx .runner,.pbx .thumb,.pbx .mascot,.pbx,.pop{animation:none}
  .flow li,.tile,.bar3 i{transition:none}
  .conf{display:none}
}

/* the $10,000 chart explains itself: what the chart is, what you put in, what came out, against just holding */
.lab .csub{margin:-4px 0 12px;color:var(--t2,#AEAEB2);font-size:16px;line-height:1.45}
.lab .cdesc{margin:2px 0 10px;color:var(--t2,#AEAEB2);font-size:15px;line-height:1.4}
.lab .cres{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:6px 0 12px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.04)}
.lab .cres img{width:52px;height:52px;object-fit:contain}
.lab .cres small{display:block;font-size:13px;color:var(--t2,#AEAEB2)}
.lab .cres b{font-size:24px;font-weight:800}
.lab .cres b.up{color:#FF9F0A}
.lab .cres b.dn{color:#AEAEB2}
.lab .cres .arr{font-size:22px;color:var(--t2,#AEAEB2)}
.lab .cres .vs{margin-left:auto;text-align:right}
.lab .cres .vs b{font-size:18px;font-weight:700;color:#AEAEB2}
@media (max-width:600px){.lab .cres .arr{display:none}.lab .cres{gap:12px}.lab .cres b{font-size:20px}.lab .cres .vs{margin-left:0;text-align:left}}
/* the scientist at her board is wide: keep her to the right half so the title stays clear */
.lab .hero .girl{height:auto;width:min(50%,560px);max-height:100%;object-fit:contain;object-position:right bottom;inset-inline-end:1%}
@media (max-width:900px){.lab .hero .girl{position:relative;display:block;inset:auto;width:100%;max-height:none;margin:14px 0 -18px;animation:none}}

/* the blogger check in the Lab: the doctor reads the record in the right rail */
.lab .rcard.bgirl{display:flex;justify-content:center;padding:12px 8px 0;overflow:hidden;background:radial-gradient(220px 200px at 50% 70%,rgba(255,106,0,.22),transparent 70%),var(--plate)}
.lab .rcard.bgirl img{height:300px;width:auto;object-fit:contain}
@media (max-width:600px){.lab .list .pc b,.lab .list .mo b{flex:none;overflow:visible}.lab .list .pc small,.lab .list .mo small{min-width:0}}