/* The card stage: a 1080x1920 canvas drawn at the positions in layout-spec.json, scaled by the page. */
:root{--ink:#F2EEFF;--mute:#B9BFD8;--orange:#FF9A2E;--orange2:#FFC15E;--cyan:#6FD6FF;--done:#39D98A;--gold:#F5DFA0;--purple:#C9B5FF}
.stage{position:relative;width:1080px;height:1920px;transform-origin:top left;background:#070B1A center/cover no-repeat;font-family:Inter,system-ui,sans-serif;color:var(--ink)}
.stage.nobg{background:radial-gradient(120% 60% at 50% -10%, #23306B 0%, #070B1A 60%), #070B1A}
.stage .abs{position:absolute}
.stage .title{left:40px;top:60px;width:1000px;text-align:center}
.stage .title .mark{display:block;width:96px;height:auto;margin:0 auto;filter:drop-shadow(0 0 12px rgba(111,214,255,.7))}
.stage .title h1{font:900 96px/1 Cinzel,serif;color:var(--orange);text-shadow:0 0 28px rgba(255,154,46,.6);margin:10px 0 0}
.stage .title h1 small{display:block;font-size:.5em;color:var(--cyan);text-shadow:0 0 22px rgba(111,214,255,.6);margin-top:6px}
.stage .title .week{font:700 30px/1 Cinzel,serif;color:var(--gold);margin-top:18px;letter-spacing:.08em}
.stage.hasbg .title{visibility:hidden}
.stage .tier{left:340px;top:372px;width:400px;height:48px;display:flex;align-items:center;justify-content:center;font:800 22px/1 Inter;letter-spacing:.14em;text-transform:uppercase}
.stage.nobg .tier{border:1px solid #2A3A78;border-radius:999px;background:rgba(14,21,48,.85)}
.stage.hasbg .tier{color:var(--gold);text-shadow:0 0 14px rgba(245,223,160,.55)}
.stage .tile{width:232px;height:232px;border-radius:20px;padding:16px 14px 14px;display:flex;flex-direction:column;align-items:center;text-align:center}
.stage .tile[role=button]{cursor:pointer} .stage .tile[role=button]:focus-visible{outline:4px solid var(--cyan);outline-offset:2px}
.stage.nobg .tile{border:1px solid #2A3A78;background:linear-gradient(180deg,#141D3F,#0E1530)}
/* Tile text, set for small sizes (a tile is about 84px wide on a phone): the name, then the number the creator has
   as the biggest thing on the tile with the number needed beside it, then one short label. Inter at heavy weights,
   tabular figures, sentence case, near-white on the dark tile, no glow. Nothing under 18px, two lines at most. */
.stage .tile .ttl{width:100%;height:56px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stage .tile .ttl span{font:800 24px/1.15 Inter,system-ui,sans-serif;color:#FFD37A;letter-spacing:.005em;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* a finished tile carries a check in its top right corner: the name keeps clear of it */
.stage .tile.done .ttl,.stage .tile.won .ttl{padding:0 52px 0 0}
.stage .tile .val{margin-top:auto;font:800 48px/1 Inter,system-ui,sans-serif;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap}
.stage .tile .val span{font-size:.56em;font-weight:700;color:#CDD2EE;letter-spacing:0}
.stage .tile .val.m{font-size:41px} .stage .tile .val.s{font-size:34px}
.stage .tile .lbl{margin-top:5px;font:700 21px/1.14 Inter,system-ui,sans-serif;color:#E8EBFB;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stage .tile .sub{margin-top:3px;max-width:100%;font:600 18px/1.15 Inter,system-ui,sans-serif;color:#B9BFD8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage .tile .bar{margin-top:10px;width:100%;height:12px;flex:none;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.stage .tile .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--orange));transition:width .6s}
.stage .tile .info{position:absolute;right:10px;bottom:8px;width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,211,122,.75);background:rgba(11,14,38,.75);color:#FFD37A;font:italic 700 19px/26px Georgia,'Times New Roman',serif;text-align:center;box-shadow:0 0 10px rgba(255,154,46,.35);pointer-events:none}
.stage.details .tile .bar{width:calc(100% - 38px);align-self:flex-start}
.stage .tile .ring{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:2px solid #2A3A78;display:flex;align-items:center;justify-content:center;font-size:20px;color:#0A0F22}
.stage.nobg .tile.done{box-shadow:0 0 0 2px var(--done),0 0 26px rgba(57,217,138,.55)} .stage .tile.done .ring{background:var(--done);border-color:var(--done)} .stage .tile.done .bar i{background:var(--done)} .stage .tile.done .val{color:var(--done);font-size:40px}
.stage.nobg .tile.won{box-shadow:0 0 0 3px var(--gold),0 0 30px rgba(245,223,160,.6)}
.stage .tile img.state{position:absolute;inset:0;width:232px;height:232px;pointer-events:none;display:none}
.stage.hasbg .tile.done img.state.complete{display:block} .stage.hasbg .tile.won img.state.won{display:block} .stage.hasbg .tile.won img.state.complete{display:none}
.stage.hasbg .tile .ring{display:none}
.stage .pill{top:1520px;width:235px;height:80px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 15px/1.2 Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.stage.nobg .pill{border:1px solid #2A3A78;background:rgba(14,21,48,.85)}
.stage .pill b{font-size:24px;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.stage .pill i{display:block;font:700 15px/1.1 Inter;font-style:normal;letter-spacing:0;text-transform:none;color:var(--gold);max-width:124px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.stage .pill i:empty{display:none}
.stage .pill.taken i{color:var(--mute);font-weight:600;font-size:13px} .stage .pill.taken b{font-size:15px} .stage .pill.taken span{text-decoration:line-through}
.stage .confetti{left:0;top:0;width:1080px;height:1920px;pointer-events:none}
.stage.nobg .pill.mine{color:var(--done);box-shadow:0 0 0 2px var(--done),0 0 22px rgba(57,217,138,.5)} .stage .pill.taken{opacity:.55}
.stage .pill img.badge{display:none;position:absolute;left:8px;top:-20px;width:120px;height:120px}
.stage.hasbg .pill{align-items:flex-end;padding-right:12px;font-size:15px} .stage.hasbg .pill img.badge{display:block} .stage.hasbg .pill.mine{color:var(--gold)}
.stage .soon{left:120px;top:880px;width:840px;padding:42px 40px 38px;border-radius:30px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,154,46,.22),transparent 60%),linear-gradient(180deg,rgba(21,16,54,.96),rgba(11,14,38,.96));
  border:3px solid #C99A47;box-shadow:inset 0 0 0 2px rgba(255,211,122,.18),0 0 60px rgba(255,154,46,.35),0 30px 80px rgba(0,0,0,.7)}
.stage .soon[hidden]{display:none}
.stage .soon b{font:700 34px/1.1 Cinzel,serif;letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.stage .soon strong{font:900 104px/1 Cinzel,serif;color:var(--orange);text-shadow:0 0 34px rgba(255,154,46,.65);font-variant-numeric:tabular-nums;white-space:nowrap}
.stage .soon .at{font:700 32px/1.2 Inter,system-ui,sans-serif;color:var(--ink)}
.stage .soon em{font:600 26px/1.3 Inter,system-ui,sans-serif;font-style:normal;color:var(--mute);max-width:640px}
.stage.pre .tiles{filter:saturate(.75) brightness(.72)}
.stage .msg{left:40px;top:1620px;width:1000px;height:80px;display:flex;align-items:center;justify-content:center;text-align:center;font:700 28px/1.25 Inter;color:var(--gold)}
.stage .msg.paused{color:#FFB454;font-size:26px;padding:0 20px} .stage .msg.paused::before{content:"";flex:none;width:30px;height:30px;margin-right:14px;background:#FFB454;clip-path:polygon(50% 4%,100% 96%,0 96%)}
.stage .who{left:40px;top:1720px;width:1000px;height:140px;display:flex;align-items:center;gap:26px;padding:0 24px 0 20px}
.stage.nobg .who{border:1px solid #2A3A78;border-radius:20px;background:rgba(14,21,48,.7)}
.stage .who .av{width:100px;height:100px;border-radius:50%;background:#2A3A78 center/cover no-repeat;flex:none}
.stage .who .h{font:900 34px/1.1 Cinzel,serif;color:var(--ink)} .stage .who .s{font:600 21px/1.3 Inter;color:var(--mute);margin-top:6px}
@media (prefers-reduced-motion: reduce){ .stage .tile .bar i{transition:none} }

/* ---- one task in full, a tap away from its tile ---- */
/* the tile popup, in the card's own dress: night-sky panel, gold frame, Cinzel title, the tiles' progress bars */
.tiledlg{margin:auto;border:0;padding:0;background:transparent;width:min(92vw,420px);max-width:none;max-height:90vh;overflow:visible;color:var(--ink);font:500 16px/1.5 Inter,system-ui,sans-serif}
.tiledlg *{box-sizing:border-box}
.tiledlg::backdrop{background:radial-gradient(80% 60% at 50% 40%,rgba(40,18,70,.55),rgba(3,4,14,.88))}
.tiledlg .box{position:relative;max-height:90vh;overflow-y:auto;border-radius:22px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:12px;
  background:radial-gradient(120% 70% at 85% -10%,rgba(255,154,46,.20),transparent 55%),radial-gradient(90% 60% at 0% 110%,rgba(124,77,255,.22),transparent 60%),linear-gradient(180deg,#151036 0%,#0B0E26 100%);
  border:2px solid #C99A47;box-shadow:inset 0 0 0 1px rgba(255,211,122,.18),inset 0 0 0 5px rgba(11,14,38,.9),inset 0 0 0 6px rgba(201,154,71,.45),0 0 34px rgba(255,154,46,.28),0 18px 60px rgba(0,0,0,.6)}
.tiledlg .box::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:120px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--orange2),transparent)}
.tiledlg .chip{align-self:flex-start;font:800 11.5px/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:#1A0E02;background:linear-gradient(180deg,var(--orange2),var(--orange));border-radius:999px;padding:6px 11px;box-shadow:0 0 12px rgba(255,154,46,.45)}
.tiledlg .chip.ok{background:linear-gradient(180deg,#6BF0AE,var(--done));color:#04210F;box-shadow:0 0 12px rgba(57,217,138,.45)}
.tiledlg h3{font:900 25px/1.15 Cinzel,serif;letter-spacing:.03em;color:#FFD37A;text-shadow:0 0 18px rgba(255,154,46,.45);text-wrap:balance}
.tiledlg .what{color:var(--ink);font-weight:600;padding-bottom:12px;border-bottom:1px solid rgba(201,154,71,.35)}
.tiledlg ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.tiledlg li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;align-items:baseline}
.tiledlg li span{color:var(--mute);font-weight:700}
.tiledlg li b{font:800 17px/1 Inter;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap} .tiledlg li b small{font-size:.8em;font-weight:600;color:var(--mute)}
.tiledlg li i{grid-column:1/-1;height:9px;border-radius:999px;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden} .tiledlg li u{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--orange));box-shadow:0 0 10px rgba(255,154,46,.5)}
.tiledlg li.ok b{color:var(--done)} .tiledlg li.ok u{background:var(--done);box-shadow:0 0 10px rgba(57,217,138,.45)}
.tiledlg .note{color:var(--mute);font-size:14px}
.tiledlg .how{background:rgba(124,77,255,.10);border:1px solid rgba(201,181,255,.22);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.tiledlg .how b{font:700 13px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.tiledlg button{align-self:stretch;font:800 15px/1 Inter;letter-spacing:.04em;color:#1A0E02;background:linear-gradient(180deg,var(--orange2),var(--orange));border:0;border-radius:999px;padding:14px;cursor:pointer;box-shadow:0 0 18px rgba(255,154,46,.35)}
.tiledlg button:hover{filter:brightness(1.06)}
.tiledlg button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---- under the card: how to play, how to win, the terms ---- */
.qinfo{display:flex;flex-direction:column;gap:22px;color:var(--ink);font:500 15.5px/1.5 Inter,system-ui,sans-serif}
.qinfo h2{font:900 19px/1.2 Cinzel,serif;color:var(--gold);letter-spacing:0;text-transform:none;margin:0 0 10px}
.qinfo .qplay{list-style:none;display:flex;flex-direction:column;gap:8px}
.qinfo .qplay li{padding-left:22px;position:relative}
.qinfo .qplay li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.qinfo .qleague{color:var(--mute);margin-bottom:10px} .qinfo .qleague b{color:var(--ink)}
.qinfo .qgames{list-style:none;display:flex;flex-direction:column;gap:10px}
.qinfo .qgames li{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;background:rgba(14,21,48,.85);border:1px solid #2A3A78;border-radius:12px;padding:12px}
.qinfo .qgames svg{width:42px;height:42px} .qinfo .qgames rect{fill:#26315F} .qinfo .qgames .on{fill:var(--orange2)}
.qinfo .qgames h3{font:800 15.5px/1.3 Inter,system-ui,sans-serif;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.qinfo .qgames p{color:var(--mute);font-size:14.5px;line-height:1.45;margin-top:2px}
.qinfo .qgames em{font:800 10.5px/1 Inter;font-style:normal;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 8px}
.qinfo .qgames em.open{color:#062A18;background:var(--done)} .qinfo .qgames em.gone{color:var(--mute);background:#1B2654;text-transform:none;letter-spacing:0;font-size:12px} .qinfo .qgames em.mine{color:#2A1E00;background:var(--gold)}
.qinfo .qends{margin-top:12px;border:1px solid rgba(255,154,46,.45);background:rgba(255,154,46,.08);border-radius:12px;padding:11px 13px;color:var(--ink)}
.qinfo .qends b{color:var(--orange2)} .qinfo .qends span{display:block;color:var(--mute);font-size:13.5px;margin-top:3px}
.qinfo .qterms{border:1px solid #2A3A78;border-radius:12px;padding:12px 14px;color:var(--mute);font-size:14px}
.qinfo .qterms summary{cursor:pointer;color:var(--ink);font-weight:700;font-size:15px}
.qinfo .qterms summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.qinfo .qterms ol{margin:10px 0 0 20px;display:flex;flex-direction:column;gap:6px} .qinfo .qterms p{margin-top:10px} .qinfo .qterms a{color:var(--cyan)}

/* ---- the notice when tasks are not being counted ---- */
.qpaused{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;border:1px solid rgba(255,180,84,.6);background:rgba(255,154,46,.12);border-radius:14px;padding:13px 14px;color:#FFD9A0;font:500 14.5px/1.45 Inter,system-ui,sans-serif}
.qpaused[hidden]{display:none}
.qpaused svg{width:26px;height:26px;color:#FFB454}
.qpaused b{display:block;font:800 16px/1.3 Inter,system-ui,sans-serif;color:#FFE3B5}
.qpaused .soft{color:#D9B98A;font-size:13.5px;margin-top:3px}