/* ===================================================================
   home2.css - v206 home page from the "קלפים · החפיסה" canvas (board Main):
   the last game waits on a felt card, then today's modes, then every deck.
   =================================================================== */
#view .home-hero{position:relative;margin:4px 0 2px;min-height:208px;border-radius:20px;padding:18px 18px 76px;color:#fff;overflow:hidden;
  background:radial-gradient(90% 70% at 30% 40%,#2A8A5C 0%,#1E6A47 50%,#124530 100%);
  box-shadow:inset 0 0 0 3px #C99A3E,inset 0 0 0 5px #5A3A20,inset 0 0 50px rgba(0,0,0,.35),0 4px 0 #3E2612,0 16px 30px -10px rgba(30,60,40,.6)}
#view .hh-txt{margin-inline-end:132px;min-width:0}
#view .hh-eye{font-size:12px;font-weight:800;letter-spacing:.4px;color:#F2D27A;text-transform:uppercase}
#view .hh-name{font-size:40px;font-weight:800;line-height:1.02;margin-top:4px;letter-spacing:-.8px;overflow-wrap:anywhere;color:#fff}
#view .hh-desc{font-size:12.5px;line-height:1.35;color:#CFE6D8;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#view .hh-deck{position:absolute;inset-inline-end:16px;top:16px;width:116px;height:150px;border:0;padding:0;background:none;cursor:pointer}
#view .hh-deck img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:0 0 0 3px #FFFDF9,0 0 0 4.5px rgba(242,210,122,.9),0 12px 22px -8px rgba(0,0,0,.6)}
#view .hh-peek i{position:absolute;left:12px;right:12px;top:-6px;height:30px;border-radius:8px 8px 0 0;background:#FFFDF9;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
#view .hh-peek i:nth-child(1){transform:rotate(-8deg) translateX(-8px)}#view .hh-peek i:nth-child(2){transform:rotate(3deg)}#view .hh-peek i:nth-child(3){transform:rotate(10deg) translateX(8px)}
#view .home-hero .hh-go{position:absolute;inset-inline-start:18px;bottom:18px;width:auto;min-width:170px;max-width:calc(100% - 36px);height:52px;padding:0 20px;border-radius:16px;font-size:17px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
#view .home-hero .hh-go svg{width:18px;height:18px;flex:none}
#view .home-sec{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:800;margin:16px 2px 0;letter-spacing:-.3px}
#view .home-sec svg{width:15px;height:15px;color:var(--red,#E5383B);flex:none}
#view .home-hero~.lb-extras{margin-top:8px}
#view .home-decks-h{margin-top:14px !important}
/* the page scrolls now - the deck boxes keep their size instead of squeezing into one screen */
#view .home-hero~.games-grid{flex:none !important;grid-auto-rows:auto !important;min-height:0}
@media (max-width:370px){ #view .hh-name{font-size:34px} #view .hh-deck{width:100px;height:130px} #view .hh-txt{margin-inline-end:112px} }
@media (prefers-reduced-motion:no-preference){ #view .hh-deck{animation:hhDeal .5s cubic-bezier(.2,.8,.2,1) both} }
@keyframes hhDeal{from{opacity:0;transform:translateY(30px) rotate(6deg) scale(.92)}to{opacity:1;transform:none}}
/* the decks show their names only (the felt card above tells the featured game's story) */
#view .home-hero~.games-grid .gt-desc{display:none !important}
#view .home-hero~.games-grid .gt-foot{justify-content:flex-end}
@media (max-width:460px){ #view .home-decks-h .badge-soft{display:none} }
/* small phones: the top bar fits (logo, coins, sounds, me) */
@media (max-width:370px){ .topbar{gap:4px !important;padding-left:8px !important;padding-right:8px !important} .topbar .snd-cluster{gap:4px} .topbar .snd-btn{width:32px;height:32px} }
@media (max-width:370px){ .topbar{padding-left:10px !important;padding-right:10px !important} .topbar .brand-name{font-size:16px} .topbar .logo-mini{gap:5px} .topbar .logo-mini .logo-img{width:28px;height:28px} .topbar .snd-cluster{gap:3px} .topbar .snd-btn{width:31px;height:31px} }
.topbar .chip-user{flex:none}
.topbar .chip-user .avatar{inset:auto !important;transform:none}
.topbar #user-slot,.topbar #user-slot>div,.topbar .chip-user{min-width:max-content !important;width:auto !important;max-width:none !important;flex:none}
@media (max-width:370px){ .topbar .snd-btn{width:28px !important;height:28px !important;border-radius:9px} .topbar .snd-cluster{gap:2px !important} .topbar .logo-mini .logo-img{width:26px;height:26px} .topbar .brand-name{font-size:15px} .topbar{gap:3px !important} .topbar .chip-user{padding:3px 6px 3px 3px} }