/* Home page (Brian 10/29 front-page redesign): guest landing + signed-in Today. Loaded after the page's inline .tc rules. */
:root{--ink2:#1D1B2E;--mute2:#5E5A75;--vio:#5345D6;--line:#ECEAF4;--cardsh:0 6px 20px rgba(42,31,122,.07)}
html.in #landing{display:none}
html:not(.in) #today{display:none}
html:not(.in) .th-only{display:none}
main.home{max-width:1040px;padding-top:0}
.home h2{letter-spacing:-.01em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hc{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--cardsh);padding:16px 18px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin:22px 2px 10px}
.sec-h h2{margin:0;font:900 19px/1.2 "Nunito",sans-serif;color:var(--ink2)}
.sec-h a{font-weight:800;font-size:14px;color:#4B3CC4;min-height:44px;display:inline-flex;align-items:center}
/* ── guest landing ── */
.lp-hero{background:linear-gradient(170deg,#2A1F7A,#4B3CC4 62%,#6B5CE7);color:#fff;margin:0 -16px;padding:34px 20px 54px;text-align:center}
.lp-hero>*{max-width:640px;margin-left:auto;margin-right:auto}
@media(max-width:640px){.lp-hero{margin:0 -10px}} /* main has 10px side padding on phones; -16px pushed the page 6px wide */
.lp-pill{display:inline-block;background:rgba(255,255,255,.16);border-radius:99px;padding:6px 14px;font-weight:800;font-size:13.5px}
.lp-hero .lp-h{font:900 clamp(30px,7vw,48px)/1.1 "Nunito",sans-serif;margin:16px auto 12px;letter-spacing:-.02em}
.lp-hero .lp-h em{font-style:normal;color:#FFB627;display:block}
.lp-hero p.sub{font-size:17px;font-weight:700;line-height:1.5;margin:0 auto 20px;color:#EEEBFF}
.lp-cta{display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:0 30px;border-radius:18px;background:#FFB627;color:#1D1B2E;font:900 20px "Nunito",sans-serif;text-decoration:none;box-shadow:0 8px 0 #C98A0B;transition:transform .06s,box-shadow .06s}
.lp-cta:active{transform:translateY(5px);box-shadow:0 3px 0 #C98A0B}
.lp-cta:focus-visible,.lp-hero a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lp-free{margin-top:20px;font-weight:700;font-size:14.5px;color:#EEEBFF}
.lp-free a{color:#fff;font-weight:900}
.lp-four{margin:-30px auto 0;max-width:640px;position:relative}
.lp-four h2{font:900 15px "Nunito",sans-serif;margin:0 0 10px;color:var(--ink2)}
.lp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;min-height:104px}
.lp-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;padding:8px 4px;border-radius:16px;background:#F5F3FF;text-decoration:none;color:var(--ink2);text-align:center;font:800 13px/1.2 "Nunito",sans-serif}
.lp-tile .e{font-size:30px;line-height:1}
.lp-tile small{font-weight:700;color:var(--mute2);font-size:12px}
.lp-sec{max-width:760px;margin:44px auto 0}
.lp-sec .kick{font:900 13px "Nunito",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#4B3CC4;margin:0}
.lp-sec h2{font:900 clamp(25px,5vw,34px)/1.15 "Nunito",sans-serif;margin:6px 0 10px;color:var(--ink2)}
.lp-sec>p{color:#4A4660;font-size:16.5px;line-height:1.55;margin:0 0 16px}
.ex-tag{display:inline-block;background:#FFF3D6;color:#7A5200;border-radius:8px;padding:2px 9px;font:900 12px "Nunito",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.ex-card{position:relative}
.ex-card .ex-tag{position:absolute;top:12px;right:14px}
.ex-gain{font:900 22px/1.2 "Nunito",sans-serif;color:var(--ink2);margin:6px 0 2px}
.ex-gain b{color:#244C9E}
.ex-leg{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;font-weight:700;color:var(--mute2);margin:6px 0 10px}
.ex-leg i{display:inline-block;width:22px;height:0;border-top:3px solid #5345D6;vertical-align:middle;margin-right:6px}
.ex-leg i.d{border-top:3px dashed #8A86A5}
.ex-tip{background:#F5F3FF;border-radius:14px;padding:10px 14px;font-weight:700;font-size:14.5px;color:#2A1F7A}
.lp-ticks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.lp-ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:800;font-size:16px}
.lp-ticks svg{flex:none;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:99px;font:800 14.5px "Nunito",sans-serif}
.lb-ex{list-style:none;margin:10px 0 0;padding:0}
.lb-ex li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-weight:800}
.lb-ex li:first-child{border-top:0}
.lp-close{background:linear-gradient(170deg,#2A1F7A,#4B3CC4 62%,#6B5CE7);color:#fff;border-radius:24px;text-align:center;padding:34px 20px;margin:44px auto 0;max-width:760px}
.lp-close h2{font:900 clamp(24px,5vw,32px)/1.15 "Nunito",sans-serif;margin:0 0 6px}
.lp-close p{margin:0 0 18px;font-weight:700;color:#EEEBFF}
.lp-foot{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:26px 0 8px}
.lp-foot a{min-height:44px;display:inline-flex;align-items:center;font-weight:800;color:#4B3CC4}
/* ── signed-in Today ── */
#today{max-width:1040px;margin:0 auto}
.th{background:linear-gradient(165deg,#2A1F7A,#4B3CC4 62%,#6B5CE7);color:#fff;margin:0 -16px;padding:18px 18px 18px;grid-area:hero}
@media(max-width:640px){.th{margin:0 -10px}}
.th .tc-hello{max-width:none;height:auto;min-height:48px;margin:0}
.th .tc-hello h2{color:#fff;font:900 22px/1.2 "Nunito",sans-serif}
.th-lvl{flex:none;background:rgba(255,255,255,.18);border-radius:99px;padding:4px 12px;font:800 13px "Nunito",sans-serif;min-width:70px;text-align:center;visibility:hidden}
.th-lvl.on{visibility:visible}
.th-streak{display:flex;align-items:center;gap:12px;margin-top:8px;min-height:64px}
.th-streak .big{font:900 40px/1 "Nunito",sans-serif;display:flex;align-items:baseline;gap:8px}
.th-streak .big small{font-size:18px;font-weight:800}
.th-line{margin:4px 0 12px;font-weight:800;color:#FFE9A8;min-height:24px}
.th-week{min-height:58px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;list-style:none;margin:0;padding:0;max-width:480px}
.th-week li{display:flex;flex-direction:column;align-items:center;gap:4px;font:800 12px "Nunito",sans-serif;color:#EEEBFF}
.th-week .dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px dashed rgba(255,255,255,.45);font:900 12px "Nunito",sans-serif;color:#fff}
.th-week .done .dot{background:#FFB627;border:0;color:#1D1B2E}
.th-week .now .dot{border:2px solid #fff;background:rgba(255,255,255,.14)}
.th-week .done.now .dot{border:2px solid #fff;background:#FFB627}
.th-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.22);margin-top:14px;max-width:480px;overflow:hidden}
.th-bar span{display:block;height:100%;background:#FFB627;border-radius:99px;width:0}
.th-bar-t{margin:6px 0 0;font-weight:700;font-size:13.5px;color:#EEEBFF;min-height:20px}
.th .tc-pill{min-height:44px}
/* the "Up next" card: white, sitting below the hero with the same 14px gap as the other sections (it no longer overlaps) */
#today .tc{background:#fff;color:var(--ink2);border:1px solid var(--line);box-shadow:var(--cardsh);margin:14px 0 0;max-width:none;position:relative;grid-area:up}
#today .tc-prog circle:first-child{stroke:#E4E1F3}
#today .tc-prog circle:last-child{stroke:#5345D6}
#today .tc-emo{background:#F5F3FF}
#today .tc-play{background:#5345D6;color:#fff;box-shadow:0 4px 0 #3F32A8}
#today .tc-alt{background:#fff;color:#4B3CC4;border:2px solid #5345D6;box-shadow:none}
#today .tc-then{color:var(--mute2)}
#today .tc a:focus-visible{outline:3px solid #5345D6}
#today .tc-strip{max-width:none;grid-area:grp;margin:14px 0 0}
#hl{grid-area:hl}.wins{grid-area:wins}#mygames{grid-area:games}#allgames{grid-area:all}
.mg{min-height:100px}.mg-empty{grid-column:1/-1;display:flex;align-items:center;min-height:92px;margin:0;font-weight:700;color:var(--mute2)}.mg-empty a{font-weight:900;color:#4B3CC4;min-height:44px;display:inline-flex;align-items:center;margin-left:6px}
.ag-p{margin:-4px 2px 8px;font-weight:700;color:var(--mute2);min-height:44px}
#allgames h3{font-size:16px}
#allgames .gamecard{min-height:132px}
#hl-card{display:block;text-decoration:none;color:var(--ink2);min-height:262px}
#hl-card .top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:30px}
.hl-pill{background:#EDE7FE;color:#5B33C9;border-radius:99px;padding:3px 12px;font:900 12.5px "Nunito",sans-serif}
.hl-num{font:900 46px/1.1 "Nunito",sans-serif;margin:6px 0 0}
.hl-sub{font-weight:800;color:var(--mute2);font-size:14.5px}
.hl-bars{list-style:none;padding:0;margin:12px 0 8px;display:grid;gap:5px}
.hl-bars li{display:grid;grid-template-columns:112px 1fr 44px;gap:8px;align-items:center;font:800 13px "Nunito",sans-serif}
.hl-bars .tr{height:8px;border-radius:99px;background:#EFEDF8;overflow:hidden}
.hl-bars .tr i{display:block;height:100%;border-radius:99px}
.hl-bars .v{text-align:right;color:var(--mute2)}
.hl-empty{font:900 19px/1.3 "Nunito",sans-serif;margin:14px 0 6px}
.hl-foot{font-weight:800;font-size:14px;color:#4B3CC4;margin-top:8px}
.wins{min-height:122px}
.wins-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity}
.win{flex:none;width:150px;min-height:104px;border-radius:18px;padding:12px;color:#fff;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(150deg,#4B3CC4,#6B5CE7)}
.win.b{background:linear-gradient(150deg,#8A5308,#B26B0B)}
.win .e{font-size:28px}.win b{font:900 15px/1.25 "Nunito",sans-serif}.win small{font-weight:700;opacity:.92}
.wins-empty{color:var(--mute2);font-weight:700;margin:0;min-height:60px;display:flex;align-items:center}
.mg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mg a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:92px;padding:8px 2px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--cardsh);text-decoration:none;color:var(--ink2);font:800 12.5px/1.2 "Nunito",sans-serif;text-align:center}
.mg a .e{font-size:28px;line-height:1}
.mg a .ck{position:absolute;top:-6px;right:-4px;width:22px;height:22px;border-radius:50%;background:#2B6B21;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900}
.th-test{margin:18px 2px 0;font-weight:700;color:var(--mute2);min-height:44px}
.th-test a{font-weight:900;color:#4B3CC4}
#duel-note{grid-column:1/-1}
@media(max-width:760px){main.home{padding-bottom:16px}.hl-bars li{grid-template-columns:104px 1fr 40px}}
@media(min-width:1000px){
  html.in #today{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"hero hero" "up hl" "grp hl" "wins hl" "games games" "all all";column-gap:24px;align-items:start}
  .th{margin:0 0 0;border-radius:0 0 28px 28px;padding:24px 28px 24px}
  #today .tc{margin-top:14px}
  #today #hl .sec-h{margin-top:22px}
  .mg{grid-template-columns:repeat(8,1fr)}
}
.wins-row:focus-visible{outline:3px solid #5345D6;outline-offset:2px}

/* guest landing: Invite a friend (10/29). 44px+ target, outlined so Play stays the one primary action. */
.lp-inv{margin:16px 0 0}
.lp-invite{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:14px;border:2px solid #4B3CC4;background:#fff;color:#3A2DA3;font:900 17px "Nunito",sans-serif;cursor:pointer;max-width:100%}
.lp-invite:focus-visible{outline:3px solid #4B3CC4;outline-offset:3px}

/* ── Games first (Brian 11/4: "not too far to scroll to see the games") ──
   Everything above the game tiles is one tight band. Explanatory copy (intro, "play anything", highlight, wins, groups)
   sits below the tiles. The reward bar text lives on in the groups strip row ("N days to your N-day reward"). */
.lp-hero{padding:16px 20px 44px}
.lp-hero .lp-h{margin:0 auto 12px;font-size:clamp(22px,6vw,40px)}
.lp-hero .lp-h em{display:inline;margin-left:.25em}
.lp-hero .lp-cta{min-height:50px;padding:0 26px;font-size:18px;box-shadow:0 5px 0 #C98A0B}
.lp-free{margin:12px auto 0;font-size:13px}
.lp-four{margin-top:-28px}
.lp-four h2{margin:0 0 6px}
.lp-tiles{min-height:0}
.lp-tile{min-height:76px;gap:2px}
.lp-tile .e{font-size:26px}
#free-seo{margin-top:14px;max-width:1040px;margin-left:auto;margin-right:auto}
#free-seo>h2{margin:0 0 4px;font:900 19px/1.2 "Nunito",sans-serif}
#free-seo>#games-lp>div:first-child{margin-top:6px!important}
.lp-intro{color:#4A4660;font-weight:700;margin:16px 0 8px}
.lp-intro .lp-pill{background:#EDE7FE;color:#5B33C9;margin-right:6px}
@media(max-width:640px){#free-seo{padding:12px}}
/* signed in */
.th{padding:8px 18px 12px}
.th .tc-hello{min-height:44px}
.th .tc-hello h2{font-size:20px}
.th-row{display:flex;align-items:center;gap:10px;margin-top:2px}
.th-row .th-streak{margin:0;min-height:0;gap:8px;flex:none}
.th-row .th-streak svg{width:26px;height:30px}
.th-row .th-streak .big{font-size:28px}
.th-row .th-streak .big small{font-size:15px}
.th-row .th-line{margin:0;min-height:0;font-size:14.5px;min-width:0}
.th-week{min-height:50px;margin-top:6px}
.th-week .dot{width:30px;height:30px}
.th-bar,.th-bar-t{display:none}
#today .tc{margin-top:12px;padding:10px 16px 10px}
#today .tc-head{height:28px}
#today .tc-prog svg{width:26px;height:26px}
#today .tc-game{height:48px;margin-top:6px;gap:10px}
#today .tc-emo{width:44px;height:44px;font-size:25px}
#today .tc-tx{display:flex;flex-direction:column;min-width:0}
#today .tc-title{font-size:20px;line-height:1.15}
#today .tc-desc{height:20px;line-height:20px;margin-top:0;font-size:14px;display:block}
#today .tc-acts{height:46px;margin-top:8px}
#today .tc-acts a{font-size:17px;border-radius:14px}
#today .tc-then{height:20px;line-height:20px;margin-top:8px;font-size:13.5px}
#mygames .sec-h,#allgames .sec-h{margin:12px 2px 6px}
#mygames .sec-h h2,#allgames .sec-h h2{font-size:17px}
#mygames .sec-h a{min-height:44px}
.mg{min-height:0}
.mg a{min-height:76px;padding:6px 2px}
.mg a .e{font-size:26px}
#allgames>#games>div:first-child{margin-top:4px!important}
.ag-p{margin:12px 2px 0;min-height:0}
@media(min-width:1000px){
  html.in #today{grid-template-areas:"hero hero" "up grp" "games games" "all all" "hl wins"}
  #today .tc{margin-top:12px}
  #today .tc-strip{margin-top:12px}
  #today #hl .sec-h{margin-top:12px}
}
.th-row .th-lvl{margin-left:auto;min-width:0;padding:4px 10px;white-space:nowrap}
.th-row .th-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg .mg-empty{min-height:44px}
.mg .mg-empty a{min-height:44px;border:0;box-shadow:none;background:none;padding:0;display:inline-flex;flex-direction:row;font-size:14px;gap:0}
#allgames .sec-h h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#allgames .sec-h{margin:0}
/* area header: name + one-line description, never two lines of wrapped text */
#games-lp [data-area-sec]>div:first-child,#games [data-area-sec]>div:first-child{flex-wrap:nowrap}
#games-lp [data-area-sec] h3,#games [data-area-sec] h3{white-space:nowrap;flex:none}
#games-lp [data-area-sec]>div:first-child>.small,#games [data-area-sec]>div:first-child>.small{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg .mg-empty{display:block;min-height:0;padding:4px 0;font-size:14.5px}
.mg .mg-empty a{display:inline;min-height:0;margin-left:6px}
@media(max-width:420px){.th .tc-hello h2{font-size:18px}}