/* Self study hub, deck page, and what goes inside the dialogs. */
#root{position:relative}
body[data-playing=true] #root{display:none}

.page{width:100%;max-width:max(calc(421*var(--px)),360px);min-height:100vh;min-height:100dvh;margin:0 auto;padding:calc(48*var(--u)) calc(8*var(--u)) calc(24*var(--u));
  display:grid;gap:calc(7*var(--u));align-content:start;
  background:linear-gradient(var(--ink),var(--ink)) 0 calc(48*var(--u))/100% calc(1*var(--u)) no-repeat,
    url('./assets/art/sky.png') right calc(-16*var(--u))/calc(421*var(--u)) calc(64*var(--u)) no-repeat var(--page);
  image-rendering:pixelated;animation:fade .25s steps(4)}
.page>*{image-rendering:auto}
.page__head{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(6*var(--u));margin-top:calc(5*var(--u))}
.page__who{display:flex;align-items:flex-end;margin-top:calc(-34*var(--u));transition:transform .08s steps(2)}
.page__who:hover{transform:translateY(calc(-1*var(--u)))}
.page__who .avatar,.page__who .pet,.g-pair .avatar,.g-pair .pet,.seat__art .avatar,.seat__art .pet{--a:var(--half)}
.pair{display:inline-flex;align-items:flex-end}
.pair .pet{margin-left:calc(var(--lap)*var(--a))}
.page__title{overflow-wrap:anywhere}
.page__links{display:flex;flex-wrap:wrap;gap:calc(3*var(--u)) calc(9*var(--u));justify-content:center}
.page__links button{color:var(--muted);text-decoration:underline;text-underline-offset:.2em;padding:calc(2*var(--u))}
.page__links button:hover{color:var(--text)}

/* Self Study: a game lobby. Who is playing, the game setup, and a start button that stays at the bottom. */
.lobby{grid-template-rows:auto 1fr auto;align-content:stretch;padding-bottom:0}
.lobby__bar{display:flex;justify-content:space-between;align-items:center;margin-top:calc(5*var(--u))}
.lobby__sound{padding:0 calc(6*var(--u))}
.lobby__sound[aria-pressed=false] .icon{opacity:.35}
.lobby__body{display:grid;gap:calc(7*var(--u));align-content:start;padding-bottom:calc(8*var(--u))}
.lobby-card{display:grid;gap:calc(6*var(--u))}
.lobby-card__head{display:flex;justify-content:space-between;align-items:center;gap:calc(6*var(--u))}
.count{font:calc(10*var(--u))/1 var(--label);letter-spacing:calc(1*var(--u));color:var(--muted);white-space:nowrap}

/* One setting: its name on the left, its control on the right. */
.opt{display:flex;align-items:center;justify-content:space-between;gap:calc(4*var(--u)) calc(6*var(--u));min-height:44px}
.opt>.seg,.opt>.stepper{flex:none}
.opt__label{flex:1;min-width:0;line-height:1.2}
.opt__label small{display:block;color:var(--muted);margin-top:calc(2*var(--u))}
.seg{display:flex;gap:calc(3*var(--u))}
.seg .tab{flex:none;min-width:calc(34*var(--u));min-height:max(44px,calc(24*var(--u)));padding:0 calc(7*var(--u));white-space:nowrap}
.stepper{display:flex;align-items:center;gap:calc(2*var(--u))}
.stepper output{min-width:calc(44*var(--u));text-align:center;font:calc(10*var(--u))/1 var(--slab);-webkit-font-smoothing:none;text-transform:uppercase;color:var(--gold)}
.stepper .btn{min-width:max(44px,calc(26*var(--u)));min-height:max(44px,calc(26*var(--u)));padding:0 0 calc(1*var(--u))}

/* What is being studied; pressing it opens the deck picker. */
.deckrow{display:flex;align-items:center;justify-content:space-between;gap:calc(6*var(--u));width:100%;min-height:max(48px,calc(30*var(--u)));padding:calc(5*var(--u)) calc(7*var(--u));text-align:left;
  background:var(--well);border:calc(1*var(--u)) solid var(--gold);box-shadow:0 0 0 calc(1*var(--u)) var(--ink),inset 0 0 0 calc(1*var(--u)) var(--ink);transition:transform .08s steps(2)}
.deckrow:hover{transform:translateY(calc(-1*var(--u)))}
.deckrow__name{display:grid;gap:calc(3*var(--u));min-width:0}
.deckrow__name strong{font:calc(10*var(--u))/1.2 var(--slab);letter-spacing:calc(1*var(--u));text-transform:uppercase;overflow-wrap:anywhere}
.deckrow__name small{color:var(--muted);line-height:1.2}
.deckrow__change{flex:none;display:flex;align-items:center;gap:calc(3*var(--u));font:calc(10*var(--u))/1 var(--label);letter-spacing:calc(1*var(--u));text-transform:uppercase;color:var(--gold)}
.caret{width:0;height:0;border-style:solid;border-width:calc(4*var(--u)) calc(3*var(--u)) 0;border-color:var(--gold) transparent transparent}

/* Pick a deck: a filter, the daily mix, then every deck as a tile. */
.picker,.picker__list{display:grid;gap:calc(5*var(--u))}
.picker__filter{width:100%;min-height:max(44px,calc(22*var(--u)))}
.picker__group{margin:calc(2*var(--u)) 0 calc(-2*var(--u));font:calc(10*var(--u))/1 var(--label);font-weight:400;letter-spacing:calc(1*var(--u));text-transform:uppercase;color:var(--gold)}
.picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(calc(110*var(--u)),40%),1fr));gap:calc(4*var(--u))}
.pick-cell{position:relative;display:grid}
.pick{display:grid;align-content:start;gap:calc(3*var(--u));width:100%;min-height:max(48px,calc(30*var(--u)));padding:calc(5*var(--u)) calc(6*var(--u));text-align:left;line-height:1.2;
  background:var(--panel-2);border:calc(1*var(--u)) solid var(--line);transition:transform .08s steps(2)}
.pick:hover{transform:translateY(calc(-1*var(--u)));border-color:var(--lilac)}
.pick[aria-checked=true]{background:#2a2350;border-color:var(--gold);box-shadow:inset 0 0 0 calc(1*var(--u)) var(--gold)}
.pick strong{font:calc(10*var(--u))/1.2 var(--label);letter-spacing:calc(1*var(--u));text-transform:uppercase;color:var(--gold-soft);overflow-wrap:anywhere}
.pick span{color:var(--lilac);overflow-wrap:anywhere}
.pick__sample{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pick small{color:var(--muted);padding-right:calc(34*var(--u))}
.pick__edit{position:absolute;right:calc(3*var(--u));bottom:calc(2*var(--u));padding:calc(4*var(--u));font:calc(10*var(--u))/1 var(--label);letter-spacing:calc(1*var(--u));text-transform:uppercase;color:var(--gold)}
.pick__edit:hover{color:var(--text)}

/* Who is studying. */
.seat{display:flex;align-items:center;gap:calc(6*var(--u));padding:calc(4*var(--u)) calc(6*var(--u)) 0;background:var(--well);border-left:calc(2*var(--u)) solid var(--gold)}
.seat__art{flex:none;display:flex;align-items:flex-end}
.seat__who{flex:1;min-width:0;display:grid;gap:calc(3*var(--u));justify-items:start;padding-bottom:calc(4*var(--u))}
.seat__who strong{overflow-wrap:anywhere}
.chip-btn{font:calc(10*var(--u))/1 var(--label);letter-spacing:calc(1*var(--u));text-transform:uppercase;-webkit-font-smoothing:none;color:var(--gold);padding:calc(3*var(--u)) calc(4*var(--u)) calc(2*var(--u));border:calc(1*var(--u)) solid var(--gold-deep);min-height:calc(15*var(--u))}
.chip-btn:hover{color:var(--ink);background:var(--gold)}
.seat__tag{flex:none;align-self:center;font:calc(10*var(--u))/1 var(--label);text-transform:uppercase;-webkit-font-smoothing:none;color:var(--ink);background:var(--lilac);padding:calc(3*var(--u)) calc(4*var(--u)) calc(2*var(--u))}

/* The start button stays in reach at the bottom of the screen. */
.bottombar{position:sticky;bottom:0;z-index:5;display:grid;gap:calc(3*var(--u));margin:0 calc(-8*var(--u));padding:calc(5*var(--u)) calc(8*var(--u)) max(calc(6*var(--u)),env(safe-area-inset-bottom));
  background:var(--header);border-top:calc(1*var(--u)) solid var(--gold-deep)}
.bottombar p{color:var(--muted);text-align:center}
.btn--big{width:100%;min-height:max(52px,calc(34*var(--u)))}

.tierlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(84*var(--u)),1fr));gap:calc(3*var(--u)) calc(8*var(--u));margin:calc(5*var(--u)) 0}
.tierlist li{display:grid;grid-template-columns:calc(11*var(--u)) 1fr auto;gap:calc(4*var(--u));align-items:center;color:var(--tier)}
.tierlist b{font-size:calc(10*var(--u));line-height:1;font-weight:400;color:var(--text)}

.deckbar{display:flex;justify-content:space-between;align-items:center;gap:calc(6*var(--u));flex-wrap:wrap}
.prompts{display:grid;gap:calc(5*var(--u))}
.prompt{display:grid;gap:calc(4*var(--u))}
.prompt__head{display:flex;justify-content:space-between;align-items:center;gap:calc(4*var(--u))}
.prompt__text{overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:calc(3*var(--u))}
.points{display:grid;gap:calc(3*var(--u))}
.chip{border:calc(1*var(--u)) solid var(--tier);color:var(--tier);padding:0 calc(4*var(--u));line-height:1.5;overflow-wrap:anywhere}
.editor{display:grid;gap:calc(5*var(--u))}
.edit-items{display:grid;gap:calc(5*var(--u))}
.edit-item{display:flex;gap:calc(4*var(--u));align-items:center;flex-wrap:wrap}
.grow{flex:1 1 150px}
.corepick{display:inline-flex;gap:calc(2*var(--u));align-items:center;color:var(--muted)}
.corepick input{padding:0}

.tab{flex:1;min-height:calc(18*var(--u));font:calc(10*var(--u))/1 var(--label);letter-spacing:calc(1*var(--u));text-transform:uppercase;color:var(--muted);background:var(--well);border:calc(1*var(--u)) solid var(--line)}
.tab[aria-selected=true],.tab[aria-checked=true]{color:var(--ink);background:var(--gold);border-color:var(--gold-deep)}

/* Trophy room, stats */
.g-unlocks__art .avatar{--a:var(--half)}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(4*var(--u))}
.figures li{display:grid;justify-items:center;gap:calc(3*var(--u));padding:calc(6*var(--u)) calc(2*var(--u));background:var(--well);border:calc(1*var(--u)) solid var(--line);text-align:center}
.figures strong{font-size:calc(20*var(--u));line-height:1;font-weight:400;color:var(--gold)}
.figures span{color:var(--muted);line-height:1.1}
.chart__title{margin:calc(8*var(--u)) 0 calc(4*var(--u))}
.chart{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(4*var(--u));height:calc(70*var(--u));padding:calc(4*var(--u));background:var(--well);border:calc(1*var(--u)) solid var(--line)}
.chart li{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:calc(2*var(--u));min-height:0}
.chart i{align-self:end;width:calc(10*var(--u));height:max(calc(1*var(--u)),calc(var(--fill)*100%));background:var(--lavender);box-shadow:inset calc(-2*var(--u)) 0 #9a63c9}
.chart__value{font-size:calc(10*var(--u));line-height:1;color:var(--text)}
.chart__day{color:var(--muted);line-height:1}
.feedback{display:grid;gap:calc(5*var(--u))}

@media(max-width:520px){.figures strong{font-size:calc(20*var(--u))}}