/* The front page and the shell around the trainer.
   Same palette and the same component idioms as RiftPocket, so moving between
   the two feels like one product rather than two hobby projects. The playmat
   keeps its own darker, bluer palette in app.css; this file never touches it. */

.site{
  --bg:#07101c; --panel:#0d1726; --panel2:#111d2f; --edge:rgba(255,255,255,.10);
  --ink:#f6f7fb; --soft:#dbe4f0; --faint:#a2b3c7;
  --sun:#f2cc7b; --grow:#65d9a6;
  --Fury:#dc684e; --Calm:#4a9e72; --Mind:#32789f; --Body:#c76c35;
  --Order:#c69d2f; --Chaos:#76479d;
  --wrapW:1180px;
}

html{scroll-behavior:smooth;scroll-padding-top:82px}
body.site{
  color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 15% -10%,#21365c 0,transparent 38%),
    radial-gradient(circle at 95% 2%,#2b2050 0,transparent 32%),
    var(--bg);
  background-attachment:fixed;
}
.hide{display:none !important}
.shell{max-width:var(--wrapW);margin:auto;padding:0 18px}
a{color:inherit}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(18px);
  background:rgba(7,16,28,.82);border-bottom:1px solid var(--edge)}
.navIn{max-width:var(--wrapW);margin:auto;padding:11px 18px;
  display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:inherit;margin-right:auto;background:none;border:0;padding:0;min-width:0}
/* Three stacked bars: a stack of lessons, and a nod to RiftPocket's spine. */
.mark{width:36px;height:36px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(145deg,#f7d88c,#c88734 55%,#654019);
  display:flex;align-items:center;justify-content:center;gap:2px}
.mark i{display:block;width:4px;height:18px;border-radius:2px;background:#201506;font-style:normal}
.mark i:nth-child(2){width:6px;opacity:.55}
.mark i:nth-child(3){width:6px;opacity:.3}
.logo span{text-align:left;min-width:0}
.logo b{display:block;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.logo small{display:block;color:var(--soft);font-size:11px;font-weight:600}
.navLinks{display:none;gap:22px;margin-right:8px}
@media(min-width:940px){.navLinks{display:flex}}
.navLinks a{color:var(--soft);text-decoration:none;font-size:14px;font-weight:600}
.navLinks a:hover{color:#fff}
.navBtns{display:flex;gap:8px;align-items:center;flex-shrink:0}
@media(max-width:560px){
  .navIn{gap:10px;padding:10px 14px}
  .logo small{display:none}
  .logo b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .navBtns .btn{padding:8px 11px;font-size:13px}
}

/* ---------- buttons ----------
   The coach panel styles its own .btn in app.css and lives inside body.site,
   so these are scoped to the three places the landing chrome actually uses. */
.nav .btn,
#home .btn,
.crumb .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--edge);background:#111d2d;border-radius:12px;
  padding:11px 18px;cursor:pointer;font-weight:700;font-size:14.5px;
  white-space:nowrap;text-decoration:none;transition:.15s}
.nav .btn:hover,
#home .btn:hover,
.crumb .btn:hover{border-color:rgba(255,255,255,.24);background:#16243a}
.nav .btn.gold,
#home .btn.gold,
.crumb .btn.gold{background:linear-gradient(135deg,#e8ba5f,#b97a2e);color:#17100a;border:0}
.nav .btn.gold:hover,
#home .btn.gold:hover,
.crumb .btn.gold:hover{filter:brightness(1.08)}
.nav .btn.sm,
#home .btn.sm,
.crumb .btn.sm{padding:8px 13px;font-size:13.5px;border-radius:10px}
.nav .btn.lg,
#home .btn.lg,
.crumb .btn.lg{padding:14px 24px;font-size:15.5px;border-radius:14px}
.nav .btn.ghost,
#home .btn.ghost,
.crumb .btn.ghost{background:transparent}

/* ---------- hero ---------- */
.hero{padding:52px 0 8px}
@media(min-width:900px){.hero{padding:76px 0 14px}}
.heroGrid{display:grid;gap:34px;align-items:center}
@media(min-width:980px){.heroGrid{grid-template-columns:1.08fr .92fr;gap:46px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--sun);
  font-size:11.5px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
  margin:0 0 16px;padding:6px 12px;border-radius:99px;
  background:rgba(242,204,123,.10);border:1px solid rgba(242,204,123,.28)}
.hero h1{margin:0;font-size:clamp(32px,5.4vw,52px);line-height:1.06;letter-spacing:-.025em}
.hero h1 em{font-style:normal;
  background:linear-gradient(120deg,#f7d88c,#e39a5c 55%,#b97a2e);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lede{margin:18px 0 0;color:var(--soft);font-size:17px;max-width:56ch}
.heroBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.heroStats{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;
  padding-top:22px;border-top:1px solid var(--edge)}
.heroStats div b{display:block;font-size:24px;line-height:1.1;letter-spacing:-.02em}
.heroStats div span{color:var(--faint);font-size:12px;font-weight:600}

/* The hero art is a small mock of the real thing, so what you see is what
   you get rather than a stock illustration of something else. */
.heroArt{border-radius:18px;padding:16px;border:1px solid var(--edge);
  background:radial-gradient(ellipse at 50% 30%,#1b4272 0%,#123054 55%,#0c2141 100%);
  box-shadow:0 24px 70px rgba(0,0,0,.45)}
.heroArt .hRow{display:flex;gap:8px;margin-bottom:9px}
.heroArt .hRow:last-child{margin-bottom:0}
.heroArt .hBox{flex:1;border-radius:10px;border:1px dashed rgba(150,200,255,.32);
  min-height:74px;display:grid;place-items:center;
  color:rgba(214,232,255,.5);font-size:10px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase}
.heroArt .hCard{width:52px;height:73px;border-radius:6px;flex:0 0 auto;
  background:linear-gradient(155deg,#2a4f80,#14294a);
  border:1px solid rgba(160,205,255,.3)}
.heroArt .hCard.ex{transform:rotate(90deg) scale(.86)}
.heroArt .hCard.gold{background:linear-gradient(155deg,#c79a4e,#6d4c1c);border-color:rgba(247,216,140,.5)}
.heroArt .hLabel{color:rgba(214,232,255,.55);font-size:10px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;margin:0 0 5px}

/* ---------- how it works ---------- */
.band{padding:44px 0}
.bandHead{max-width:62ch;margin:0 0 26px}
.bandHead h2{margin:0;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em}
.bandHead p{margin:9px 0 0;color:var(--soft);font-size:15.5px}
.steps{display:grid;gap:14px}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:20px}
.step i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:rgba(242,204,123,.13);color:var(--sun);
  font-style:normal;font-weight:900;font-size:13px;margin-bottom:12px}
.step h3{margin:0 0 6px;font-size:16px}
.step p{margin:0;color:var(--soft);font-size:14px}

/* ---------- section cards ---------- */
.secGrid{display:grid;gap:14px}
@media(min-width:700px){.secGrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.secGrid{grid-template-columns:repeat(3,1fr)}}

.sec{display:flex;flex-direction:column;text-align:left;gap:0;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge);border-radius:18px;padding:20px;
  cursor:pointer;transition:.16s;position:relative;overflow:hidden;color:inherit}
.sec:hover{transform:translateY(-3px);border-color:rgba(242,204,123,.42);
  box-shadow:0 18px 44px rgba(0,0,0,.4)}
/* A hairline in the section's own colour, so the grid reads as ten distinct
   places rather than ten identical boxes. */
.sec:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--hue),transparent)}
.secTop{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.secIcon{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--hue) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--hue) 45%,transparent)}
.secIcon svg{width:20px;height:20px;stroke:var(--hue);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.secNum{margin-left:auto;color:var(--faint);font-size:11px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;text-align:right;line-height:1.35}
.sec h3{margin:0;font-size:17px;letter-spacing:-.01em}
.sec p{margin:7px 0 0;color:var(--soft);font-size:13.5px;line-height:1.5}
.secFoot{margin-top:14px;padding-top:13px;border-top:1px solid var(--edge);
  display:flex;align-items:center;gap:10px}
.secBar{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.secBar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--grow),#3ba97b)}
.secPct{color:var(--faint);font-size:11.5px;font-weight:700;min-width:74px;text-align:right}
.sec.done .secPct{color:var(--grow)}

/* A deck card carries the champion art, so it reads as a deck rather than
   as another rules chapter. */
.sec.deck{padding:0}
.sec.deck .deckArt{height:132px;position:relative;overflow:hidden;
  border-radius:17px 17px 0 0;background:#0a1421}
.sec.deck .deckArt img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  opacity:.82}
.sec.deck .deckArt:after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,var(--panel2))}
.sec.deck .deckBody{padding:0 20px 20px;margin-top:-16px;position:relative}
.sec.deck .deckDoms{display:flex;gap:5px;margin:0 0 9px}
.sec.deck .deckDoms i{width:17px;height:17px;border-radius:5px;display:block;
  border:1px solid rgba(255,255,255,.22)}
.styleTags{display:flex;flex-wrap:wrap;gap:5px;margin:11px 0 0}
.styleTags span{font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--soft);
  background:rgba(255,255,255,.06);border:1px solid var(--edge);
  border-radius:99px;padding:3px 9px}

/* ---------- footer ---------- */
.footIn{display:grid;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--edge)}
@media(min-width:860px){.footIn{grid-template-columns:250px minmax(0,1fr);gap:34px}}
.footLinks{display:flex;flex-wrap:wrap;gap:9px 20px;align-content:flex-start}
.footLinks a{color:var(--soft);text-decoration:none;font-size:13px;font-weight:600}
.footLinks a:hover{color:#fff}
.disclaimer{margin:18px 0 0;color:var(--faint);font-size:12px;max-width:88ch;line-height:1.6}

/* ---------- crumb above the trainer ---------- */
.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:18px 0 0;margin:0 0 10px;max-width:1780px}
.crumb .btn{padding:6px 11px;font-size:12.5px;border-radius:9px}
.crumb span{color:var(--faint);font-size:13px;font-weight:600}
.navLinks a.on{color:var(--sun)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--edge);margin-top:34px;padding:26px 0 40px;
  color:var(--faint);font-size:12.5px}
.foot p{margin:0 0 6px;max-width:74ch}

/* ---------- deck training row ----------
   One deck card beside a note about the rest, rather than a lonely card in a
   three column grid. */
.deckRow{display:grid;gap:14px}
@media(min-width:820px){.deckRow{grid-template-columns:minmax(0,360px) minmax(0,1fr)}}
.deckRow .secGrid{grid-template-columns:minmax(0,1fr)}
.soon{border:1px dashed var(--edge);border-radius:18px;padding:22px;
  display:flex;flex-direction:column;justify-content:center;
  background:rgba(255,255,255,.02)}
.soon h3{margin:0 0 7px;font-size:16px;color:var(--soft)}
.soon p{margin:0;color:var(--faint);font-size:13.5px;max-width:44ch}

/* ---------- support ---------- */
.tipBox{display:grid;gap:26px;align-items:center;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge);border-radius:20px;padding:30px;
  position:relative;overflow:hidden}
@media(min-width:860px){.tipBox{grid-template-columns:minmax(0,1fr) 190px;padding:38px 40px}}
.tipBox:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--sun),transparent)}
.tipBox h2{margin:0 0 10px;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em}
.tipBox p{margin:0;color:var(--soft);font-size:15.5px;max-width:62ch}
.tipNote{margin-top:14px !important;color:var(--faint) !important;font-size:12.5px !important}
/* a cup, drawn rather than fetched */
.tipArt{display:none;place-items:center}
@media(min-width:860px){.tipArt{display:grid}}
.cup{position:relative;width:104px;height:86px;border-radius:0 0 26px 26px;
  background:linear-gradient(160deg,#f7d88c,#c88734 60%,#8a5b21);
  box-shadow:0 16px 40px rgba(0,0,0,.4)}
.cup:before{content:'';position:absolute;right:-26px;top:16px;width:34px;height:36px;
  border:9px solid #c88734;border-left:0;border-radius:0 20px 20px 0}
.cup:after{content:'';position:absolute;left:-8px;right:-8px;top:-9px;height:14px;
  border-radius:99px;background:#f7d88c}
.cup i{position:absolute;top:-34px;width:5px;height:20px;border-radius:3px;
  background:rgba(247,216,140,.4)}
.cup i:nth-child(1){left:26px}
.cup i:nth-child(2){left:50px;top:-42px;height:26px}
.cup i:nth-child(3){left:74px}

/* ---------- "Play the game yourself" ----------
   Sits where the deck training used to. Two columns: the pitch, and a small
   abstraction of the board so the section reads as a game rather than another
   lesson list. */
.playBox {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 34px; align-items: center;
  background: linear-gradient(135deg, rgba(122,180,255,.07), rgba(242,204,123,.05));
  border: 1px solid rgba(120,160,220,.22); border-radius: 18px; padding: 30px 32px;
}
.playCopy h3 { margin: 8px 0 12px; font-size: 25px; line-height: 1.22; }
.playCopy > p { margin: 0 0 16px; line-height: 1.65; }
.playList { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.playList li {
  position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.6;
  color: var(--muted, #a9bcd4);
}
.playList li:before {
  content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold, #f2cc7b);
}
.playList b { color: #e6eefb; }
.tipNote b { color: #e6eefb; }

.playArt {
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #0c1526, #0a1220);
  border: 1px solid rgba(120,160,220,.2); border-radius: 14px; padding: 14px;
}
.paSeat { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.paName { font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #8fa3bd; }
.paSeat.me .paName { color: #f2cc7b; }
.paDots { display: flex; gap: 3px; }
.paDots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.1); }
.paDots i.on { background: var(--gold, #f2cc7b); }
.paBfs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.paBf {
  display: grid; place-items: center; text-align: center; min-height: 74px;
  border-radius: 10px; font-size: 11px; font-weight: 700; padding: 6px;
  border: 1px solid rgba(120,160,220,.25); color: #b7c8de;
}
.paBf.yours { border-color: rgba(122,200,255,.55); background: rgba(70,150,255,.1); }
.paBf.theirs { border-color: rgba(255,130,120,.5); background: rgba(220,90,80,.1); }
.paHand { display: flex; gap: 5px; margin-top: 2px; }
.paHand i {
  flex: 1; height: 44px; border-radius: 5px; background: #16243a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.paHand i:nth-child(2), .paHand i:nth-child(4) { background: #1b2c47; }

@media (max-width: 900px) {
  .playBox { grid-template-columns: 1fr; padding: 22px; gap: 24px; }
}

/* Section links under the grid. Quiet, because the grid above is the primary
   way in; these exist so each section page is reachable by a crawler and by
   anyone who wants to read before starting. */
.secLinks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 20px; }
.secLinks span { font-size: 12.5px; color: var(--faint, #7f93ac); margin-right: 2px; }
.secLinks a {
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line, rgba(120,160,220,.2)); color: var(--muted, #a9bcd4);
}
.secLinks a:hover { border-color: rgba(242,204,123,.55); color: #eaf2ff; }

/* ---------- badges ----------
   One per section, earned by finishing every test in it. A star means it was
   finished without a wrong move anywhere, which is the one that is hard. */
.achHead { display: flex; gap: 28px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 22px; }
.achHead h2 { margin: 0 0 8px; }
.achHead p { margin: 0; max-width: 60ch; color: var(--muted, #a9bcd4); font-size: 14px; line-height: 1.6; }
.achScore { display: flex; gap: 26px; }
.achScore div { display: flex; flex-direction: column; }
.achScore b { font-size: 26px; font-weight: 800; color: var(--gold, #f2cc7b); line-height: 1.1; }
.achScore span { font-size: 12px; color: var(--muted, #a9bcd4); }

.achGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ach {
  position: relative; border: 1px solid var(--line, rgba(120,160,220,.18));
  border-radius: 14px; padding: 15px 16px 13px; background: rgba(255,255,255,.02);
  opacity: .55; transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.ach.on { opacity: 1; border-color: rgba(122,200,255,.45); background: rgba(70,150,255,.07); }
.ach.star { border-color: var(--gold, #f2cc7b); background: rgba(242,204,123,.1); }
.ach.fin { grid-column: span 2; }
.achIcon { position: absolute; top: 13px; right: 14px; font-size: 15px; color: #61728a; }
.ach.on .achIcon { color: #6fcf97; }
.ach.star .achIcon { color: var(--gold, #f2cc7b); }
.ach b { display: block; font-size: 14.5px; color: #eaf2ff; margin-bottom: 4px; padding-right: 22px; }
.ach small { display: block; font-size: 12px; line-height: 1.5; color: var(--muted, #a9bcd4); min-height: 34px; }
.achBar { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.09); margin: 10px 0 5px; }
.achBar i { display: block; height: 100%; border-radius: 2px; background: var(--gold, #f2cc7b); }
.ach.star .achBar i { background: var(--gold, #f2cc7b); box-shadow: 0 0 8px rgba(242,204,123,.6); }
.achN { font-size: 11px; color: #7f93ac; }

/* Earned just now. Small, and it takes itself away. */
.achToast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 120; display: flex; align-items: center; gap: 12px;
  background: #101c2e; border: 1px solid rgba(122,200,255,.5); border-radius: 14px;
  padding: 13px 18px 13px 15px; box-shadow: 0 20px 50px rgba(0,0,0,.6);
  animation: achIn .3s cubic-bezier(.2,.9,.3,1.2);
}
.achToast.star { border-color: var(--gold, #f2cc7b); }
.achToast span { font-size: 21px; color: #6fcf97; }
.achToast.star span { color: var(--gold, #f2cc7b); }
.achToast b { display: block; font-size: 14.5px; color: #eaf2ff; }
.achToast small { display: block; font-size: 12px; color: var(--muted, #a9bcd4); margin-top: 1px; }
.achToast.out { animation: achOut .5s ease-in forwards; }
@keyframes achIn { from { opacity: 0; transform: translate(-50%, 14px) } to { opacity: 1; transform: translate(-50%, 0) } }
@keyframes achOut { to { opacity: 0; transform: translate(-50%, 10px) } }

@media (max-width: 560px) { .ach.fin { grid-column: span 1; } }