/* match setup: difficulty cards, rule cards, trade cards */
h3 em{font-style:normal;color:var(--accent-ink);font-weight:600;margin-left:6px}
.note:empty{display:none}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dc{border-radius:14px;padding:10px;border:1px solid var(--line);background:var(--surf);color:var(--text);text-align:left;display:flex;flex-direction:column;gap:5px;cursor:pointer;
  transition:border-color .18s,box-shadow .18s,transform .22s var(--spring)}
.dc:hover{transform:translateY(-1px);border-color:var(--line2)}
.dc b{font:700 15px/1.1 var(--display)} .dc small{color:var(--muted);font-size:11.5px;line-height:1.3}
.pips{display:flex;gap:3px}.pips i{width:14px;height:5px;border-radius:3px;background:rgba(var(--tint),.14)}.pips i.f{background:var(--red1)}
.dc.on,.tc.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 20px -10px var(--accent-glow)}
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.trow{margin-top:8px;border-radius:14px;padding:10px 14px 8px;border:1px solid var(--line2);background:var(--surf);display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:10px;row-gap:4px}
.trow svg{width:20px;height:20px;color:var(--accent-ink);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trow b{font:700 14px var(--display)} .trow output{font:800 15px var(--display);color:var(--accent-ink);font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
.trow.off output{color:var(--muted)}
.trow input{grid-column:1/-1;width:100%;margin:6px 0 0}
input.rng{appearance:none;-webkit-appearance:none;height:28px;background:none;cursor:pointer;--f:50%}
input.rng::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent) var(--f),rgba(var(--tint),.14) var(--f))}
input.rng::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent) var(--f),rgba(var(--tint),.14) var(--f))}
input.rng::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:linear-gradient(160deg,var(--accent-hi),var(--accent));border:2px solid var(--surf);box-shadow:0 2px 6px rgba(var(--sh),calc(.6*var(--shk)))}
input.rng::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(160deg,var(--accent-hi),var(--accent));border:2px solid var(--surf);box-shadow:0 2px 6px rgba(var(--sh),calc(.6*var(--shk)))}
input.rng:focus-visible{outline:none}input.rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent-glow)}input.rng:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--accent-glow)}
.setrow .rng{flex:0 1 44%;min-width:0}
.setrow[data-vol]{gap:10px}.setrow[data-vol] .rt{min-width:6.8em} /* on a phone the slider gives way, not the name */
/* a tiny or zoomed-in phone: the name on its own line, the slider, level and mute under it */
@media (max-width:299px){.setrow[data-vol]{flex-wrap:wrap}.setrow[data-vol] .rt{flex:1 1 100%}.setrow[data-vol] .rng{flex:1 1 0}}
.setrow .vpct{font:800 14px var(--display);color:var(--accent-ink);font-variant-numeric:tabular-nums;min-width:2.6em;text-align:right}
.setrow.muted .vpct{color:var(--muted)}.setrow.muted .rng{opacity:.55}
.vmute{flex:none;width:34px;height:34px;margin-left:-4px;padding:0;border-radius:10px;border:1px solid var(--line2);background:rgba(var(--tint),.04);color:var(--accent-ink);
  display:grid;place-items:center;cursor:pointer;transition:background .18s,border-color .18s,transform .2s var(--spring)}
.vmute svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vmute[aria-pressed="true"]{color:var(--muted);background:rgba(var(--tint),.1)}
@media (hover:hover){.vmute:hover{border-color:var(--accent)}}
.vmute:active{transform:scale(.92)}
.vmute:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-glow)}
.trow .ticks{grid-column:1/-1;position:relative;height:14px;font:500 11px/14px var(--body);color:var(--muted)}
.trow .ticks span{position:absolute;left:calc(11px + (100% - 22px)*var(--p));transform:translateX(-50%)}
.rc{position:relative;aspect-ratio:5/3.6;border-radius:14px;border:1px solid var(--line2);cursor:pointer;color:var(--muted);
  background:repeating-linear-gradient(45deg,var(--surf2) 0 6px,var(--surf) 6px 12px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:8px 6px;text-align:center;
  transition:transform .25s var(--spring),box-shadow .2s,border-color .2s,opacity .2s}
.rc:hover{transform:translateY(-2px)}
.rc:active{transform:scale(.97)}
.rc .em{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;transform:rotate(45deg);border:1.5px solid var(--line2);background:var(--surf)}
.rc .em svg{transform:rotate(-45deg);width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rc b{font:700 13px/1.15 var(--display)}
.rc.on{background:linear-gradient(160deg,var(--accent-hi),var(--accent));border-color:transparent;color:var(--on-accent);
  box-shadow:0 10px 22px -10px var(--accent-glow),inset 0 0 0 1px rgba(255,255,255,.35)}
.rc.on .em{background:rgba(255,255,255,.25);border-color:rgba(0,0,0,.22)}
.rc.on::after{content:"✓";position:absolute;top:6px;right:9px;font:900 12px var(--display)}
.rc.dim{opacity:.42}
/* what the rule does, inside its card: only on wide screens (phones have the box under the cards) */
.rc .rd{display:none}
/* Sweep with no trade rule: can't be turned on (setup.js sweepBlock) */
.rc.off{opacity:.42;cursor:default;border-style:dashed}
.rc.off:hover,.rc.off:active{transform:none}
.rc.flip{animation:rcflip .4s var(--ease)}
@keyframes rcflip{50%{transform:perspective(500px) rotateY(90deg)}}
.rinfo{margin-top:10px;border-radius:14px;padding:10px 12px;background:var(--surf);border:1px solid var(--line);display:flex;gap:10px;align-items:flex-start;min-height:62px}
.rinfo svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--accent-ink);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rinfo b{display:block;font:700 14px var(--display)} .rinfo span{color:var(--muted);font-size:12.5px;line-height:1.4}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tc{border-radius:12px;padding:8px 4px;border:1px solid var(--line);background:var(--surf);color:var(--text);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.tc .n{font:900 20px/1 var(--display);color:var(--accent-ink)} .tc small{font-size:11.5px;color:var(--muted)}
.sgrid{grid-template-columns:repeat(3,1fr)}
/* the match settings: one row each, showing what's picked; tap a row to open its choices (one at a time) */
.s-left{display:flex;flex-direction:column;gap:16px}
.s-opts{display:flex;flex-direction:column;gap:8px}
.s-opts h3{margin-bottom:0}
#tradeWarn{margin:2px 4px 0}
.srow{border:1px solid var(--line);border-radius:16px;background:var(--surf);transition:border-color .2s,box-shadow .2s}
.srow.open{border-color:var(--line2);box-shadow:0 12px 30px -18px var(--accent-glow)}
.srh{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:54px;border:0;background:none;border-radius:16px;cursor:pointer;text-align:left}
.srh svg{width:20px;height:20px;flex:none;color:var(--accent-ink);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.srh b{font:700 15.5px var(--display)}
.srh .val{margin-left:auto;font:700 14px var(--display);color:var(--accent-ink);text-align:right}
.srh .val.off{color:var(--muted)}
.srh .chev{width:12px;text-align:center;font-size:17px;line-height:1;color:var(--muted);transition:transform .25s var(--ease)}
.srow.open .chev{transform:rotate(90deg)}
.srb{display:none;padding:0 14px 14px}
.srow.open .srb{display:block}
.srb .dc,.srb .tc{background:var(--surf2)}
.srb .note{margin:10px 2px 0}
.srb .trow{border:0;background:none;padding:6px 2px 0;margin-top:4px}
.srb .trow[hidden],.flagrow[hidden]{display:none}
.kgrid{grid-template-columns:repeat(2,1fr)} .k3{grid-template-columns:repeat(3,1fr)}
.tc .k{font:800 15px/1.2 var(--display);color:var(--accent-ink)}
.flagrow{margin-top:10px} .flagrow>b{display:block;font:600 12px var(--body);color:var(--muted);margin:0 0 6px 2px}
@media (min-width:920px) and (min-height:560px){
  #scr-setup{justify-content:center}
  #scr-setup .topbar{max-width:1100px}
  .setup{max-width:1100px;display:grid;grid-template-columns:1fr 1.3fr;grid-template-areas:"left rules" "left foot" "left note";grid-template-rows:auto auto 1fr;column-gap:44px;row-gap:0;align-items:start}
  .setup .s-left{grid-area:left;gap:20px} .setup .s-rules{grid-area:rules} .setup #setupNote{grid-area:note} .setup .setup-foot{grid-area:foot}
  /* the rows keep their size and open downwards; the rule cards keep theirs, whatever the left side does.
     The rows take no height in the layout, so opening one never moves the rules or the button (it just hangs lower) */
  .setup .s-left{height:0}
  .setup .rc{aspect-ratio:auto;height:146px;padding:12px 10px;gap:8px}
  .setup .rc .rd{display:block;font:500 12px/1.35 var(--body);opacity:.85;max-width:15em;text-wrap:balance}
  .setup .rinfo{display:none}
  .setup #setupNote{margin:14px 0 0}
  .setup .setup-foot{margin-top:20px}
  .setup .rc b{font-size:14px}
  .setup .rgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .setup .setup-foot{position:static;background:none;display:flex;justify-content:flex-end;padding:0;margin-left:0;margin-right:0}
  .setup .setup-foot::after{display:none}
  .setup .setup-foot .btn{width:280px}
}
/* 6px wider than the page on each side (the button stays put), so the glow ring of a picked option scrolling under it
   (Trade's, 1px outside its box) can't peek out past its edge as a thin line */
.setup-foot{position:sticky;bottom:0;padding:14px 6px 4px;margin:auto -6px 0;background:linear-gradient(transparent,var(--bg0) 45%)}
.setup-foot .btn{width:100%}
/* fills the screen's bottom padding under the pinned button, so the page doesn't show through as it scrolls */
.setup-foot::after{content:"";position:absolute;left:0;right:0;top:100%;height:max(24px,env(safe-area-inset-bottom));background:var(--bg0)}
/* online waiting room (the setup screen with the code and players on top) */
.s-room{display:flex;flex-direction:column;gap:10px}
.s-room h3{margin-bottom:-2px}
/* the game code in the middle, the buttons and the invite link under it as wide as the box */
.room-code{display:flex;flex-direction:column;gap:10px;text-align:center;background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:12px 14px 14px}
.room-code .or{margin:0}
/* .3em on the left matches the letter spacing after the last letter, so the code sits in the middle */
.room-code .codebox{font-size:34px;padding:2px 0 0 .3em}
.room-share{display:flex;flex-direction:column;gap:6px}
.room-share .linkin{text-align:center}
.room-pl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.room-pl li{display:flex;align-items:center;gap:10px;background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:8px 12px;min-height:52px}
.room-pl li.h .av{background:linear-gradient(160deg,var(--blue1),var(--blue2))} .room-pl li.g .av{background:linear-gradient(160deg,var(--red1),var(--red2))}
.room-pl li.empty{border-style:dashed;color:var(--muted)} .room-pl li.empty .av{background:var(--well);color:var(--muted)}
.room-pl b{font:700 15px var(--display);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-pl b small{font:500 12px var(--body);color:var(--muted)}
.room-pl .rtag{font:700 9.5px/1 var(--body);letter-spacing:.06em;color:var(--accent-ink);border:1px solid var(--line2);border-radius:4px;padding:3px 5px}
.room-pl .st{font-size:12.5px;color:var(--muted);white-space:nowrap}
.room-pl .st.ok{color:var(--accent-ink);font-weight:600}
/* the guest sees the host's rules but can't change them */
#scr-setup.ro .tc,#scr-setup.ro .rng{cursor:default}
#scr-setup.ro .tc:not(.on){opacity:.55}
/* trade locked in the online room while a guest is in (setup.js) */
#tradeSeg .tc[aria-disabled]{cursor:default}
#tradeSeg .tc[aria-disabled]:not(.on){opacity:.55}


/* ---------- menu ---------- */
#scr-menu{justify-content:center}
/* a phone: the menu fills the screen exactly, and the tiles take whatever height is left, so nothing scrolls */
.menu{width:100%;max-width:440px;height:100%;display:flex;flex-direction:column;gap:14px;margin:auto 0}
.m-right{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.menu>.brand,.menu>.hero,.m-right>:not(.tiles){flex:none}
.brand{display:flex;align-items:center;gap:18px;margin:4px 0 2px}
.brand .emblem{display:block;height:84px;width:84px;flex:none}
/* version tag to the right of the title */
.title-row{display:flex;align-items:center;gap:10px}
.ver{font:700 11px/1 var(--body);letter-spacing:.04em;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:4px 8px;white-space:nowrap;
  background:none;cursor:pointer;transition:color .18s,border-color .18s,background .18s}
.ver:hover{color:var(--accent-ink);border-color:var(--accent);background:rgba(var(--tint),.05)}
/* what's new (news.js): the changelog, newest version first */
.mbox.nw-box{max-width:520px;text-align:left}
.nw-box .kick,.nw-box h2{text-align:center}
.nw-wait{text-align:center;color:var(--muted);font-size:14px}
.nw-list{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
.nw-ver{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surf)}
.nw-ver.top{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 10px 24px -14px var(--accent-glow)}
.nw-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.nw-h b{font:800 15px var(--display);color:var(--text)}
.nw-h small{margin-left:auto;color:var(--muted);font-size:12px}
.nw-tag{font:700 10.5px var(--body);padding:2px 7px;border-radius:5px;background:var(--accent);color:var(--on-accent)}
.mbox p.nw-intro{margin:6px 0 0;max-width:none;font-size:13.5px;font-weight:600;color:var(--text)}
/* the list can be long: Close stays pinned to the bottom of the window */
.nw-box .mbtns{position:sticky;bottom:-20px;margin:12px -20px -20px;padding:12px 20px 16px;background:var(--surf);border-top:1px solid var(--line)}
.nw-ver ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.nw-ver li{font-size:13.5px;line-height:1.45;color:var(--muted)}
.nw-ver li b{color:var(--text)}
.nw-ver code{font:12px ui-monospace,Consolas,monospace;padding:1px 4px;border-radius:4px;background:rgba(var(--tint),.08)}
.nw-old{margin:8px 2px 0;font:700 11.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.title{margin:0;line-height:0;color:var(--text)}
.title .logo-word{display:block;height:25px;width:auto}
.sr,.title .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero{position:relative;border-radius:22px;padding:18px;background:linear-gradient(160deg,var(--surf2),var(--surf));border:1px solid var(--line);overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(var(--sh),calc(.8*var(--shk)))}
.hero::before{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(var(--accent-glow),transparent 70%);pointer-events:none}
.modeseg{position:relative}
.modeseg button{white-space:nowrap;font-size:13px;padding:6px;gap:6px;display:flex;align-items:center;justify-content:center}
/* an icon beside each mode's name, except on the narrowest phones, where the four names only just fit */
@media (max-width:359px){.modeseg svg{display:none}}
.modeseg svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-body{position:relative;display:grid}
.hero-pane{grid-area:1/1;display:flex;flex-direction:column;min-width:0}
.hero-pane.hero-ghost{visibility:hidden;pointer-events:none}
.hero-body.fade{animation:rise .3s var(--ease)}
/* every mode: title + picture centred in the room above the bar of numbers and the controls (hero-pane in menu.js) */
.hero-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 0 12px;margin:auto 0}
/* Couch's picture: two of Blue's cards vs two of Red's */
.vsfan{display:flex;align-items:center;gap:2px;flex:none}
.vsfan .fan{padding-right:4px;font-size:7px}
.vsfan .fan .card:last-child{margin-right:0}
.vsfan em{font:900 italic 16px var(--display);color:var(--accent-ink);margin:0 6px}
/* the bar of 3 numbers that sits on top of the buttons: XP, shards and one more */
.hero-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:14px;background:rgba(var(--tint),.03)}
.hero-stats div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;min-width:0;text-align:center}
.hero-stats div+div{border-left:1px solid var(--line)}
.hero-stats b{display:flex;align-items:center;gap:3px;font:800 15px/1.1 var(--display);color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.hero-stats small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hero-stats .shd{width:11px;height:13px}
.av.b{background:linear-gradient(160deg,var(--blue1),var(--blue2))} .av.r{background:linear-gradient(160deg,var(--red1),var(--red2))}
.joinrow{display:flex;gap:8px;flex:1 1 100%}
.joinrow .codein{flex:1;min-width:0;font-size:20px;padding:6px 8px;min-height:48px;border-radius:14px}
.hero-row .btn.primary.full,.hero-row .btn.full{flex-basis:100%}
.hero-h{margin:0;font:800 24px/1.1 var(--display);white-space:nowrap}
.hero-sub{margin:3px 0 0;color:var(--muted);font-size:13px}
.fan{display:flex;padding:4px 10px 6px 0;font-size:7.5px;flex:none}
.fan .card{margin-right:-1.3em}
.fan .card:nth-child(1){transform:rotate(-9deg) translateY(.4em)} .fan .card:nth-child(2){transform:rotate(-4deg)}
.fan .card:nth-child(4){transform:rotate(4deg)} .fan .card:nth-child(5){transform:rotate(9deg) translateY(.4em)}
.hero-row{position:relative;display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
.hero-row .btn.primary{flex:1 1 130px;min-height:52px;font-size:18px}
.hero-row .seg{flex:1 1 210px}
.hero-row .seg.full{flex-basis:100%}
.hero-row .btn.full:not(.primary){min-height:48px}
/* six tiles, all one size: an icon beside a name and a line of news, two to a row */
.tiles{flex:1 1 auto;min-height:188px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(56px,1fr);gap:10px}
.tile{position:relative;text-align:left;border-radius:18px;padding:10px 12px;min-height:0;background:var(--surf);border:1px solid var(--line);color:var(--text);cursor:pointer;
  display:flex;align-items:center;gap:12px;transition:transform .22s var(--spring),border-color .18s,box-shadow .18s}
.tile>div{flex:1;min-width:0}
.tile small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the Packs line (the daily pack, packs to open) may take two lines where the tile has the height */
.tile.ptile small{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.tile:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 12px 24px -12px rgba(var(--sh),calc(.8*var(--shk)))}
.tile:active{transform:scale(.98)}
.tile>svg{flex:none;width:26px;height:26px;color:var(--accent-ink);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile b{display:block;font:700 16px/1.2 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.bar{height:4px;border-radius:2px;background:rgba(var(--tint),.1);margin-top:5px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .6s var(--ease)}
.mstats{display:flex;gap:8px}
.stat{flex:1;border-radius:14px;padding:10px 12px;background:rgba(var(--tint),.03);border:1px solid var(--line)}
.stat b{display:block;font:800 20px/1 var(--display)}
.stat small{color:var(--muted);font-size:11.5px}
.mstats .iconbtn{height:auto;width:54px;border-radius:14px}
/* alpha notice: a pill under the title on phones (tap for the full text), a box under the tiles on PC */
.alpha-pill{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font:700 10.5px/1 var(--body);letter-spacing:.08em;color:var(--warn);cursor:pointer;
  border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent);border-radius:999px;padding:5px 9px}
.alpha-pill i{font-style:normal;letter-spacing:0;font-weight:500;color:var(--muted)}
.alpha-bar{display:none;gap:10px;align-items:flex-start;margin:0;border-radius:14px;padding:10px 12px;font-size:12.5px;line-height:1.4;color:var(--muted);
  border:1px dashed color-mix(in srgb,var(--warn) 55%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.alpha-bar b{color:var(--warn);font:700 11px/1.5 var(--body);letter-spacing:.08em;margin-right:6px}
.alpha-bar svg{width:18px;height:18px;flex:none;color:var(--warn);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* short phones (an iPhone SE): the emblem shrinks, so the tiles still fit */
@media (max-height:800px){.tile.ptile small{display:block;white-space:nowrap}}
@media (max-height:760px){.brand .emblem{height:64px;width:64px}.alpha-pill{margin-top:8px}.hero{padding:14px}.hero-top{padding:6px 0 4px}}
/* very short phones (iPhone SE): a little less room between and inside everything */
@media (max-height:700px){#scr-menu{padding-bottom:max(12px,env(safe-area-inset-bottom))}.menu,.m-right{gap:10px}.brand .emblem{height:52px;width:52px}.hero{padding:12px}#scr-menu .seg button{min-height:32px;padding:4px 8px}.hero-stats div{padding:5px 4px}.hero-row{padding-top:6px}.hero-row .btn.primary{min-height:46px}.pcard{padding:6px 10px}.tiles{grid-auto-rows:minmax(50px,1fr);min-height:166px;gap:8px}.tile{padding-top:7px;padding-bottom:7px}}
/* narrow phones: smaller icons and names, so "Leaderboard" and "Night Market" fit whole */
@media (max-width:400px){.tile{padding:10px 9px;gap:9px}.tile>svg{width:22px;height:22px}.tile b{font-size:15px;font-stretch:84%}.tile.ptile .ptdot{display:none}}
@media (min-width:920px) and (min-height:560px){
  /* title across the top; Play card and tiles share one top and bottom edge */
  .menu{max-width:1180px;height:auto;display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;column-gap:40px;row-gap:28px}
  .brand{grid-column:1/-1;gap:26px;margin:0}
  .brand .emblem{height:132px;width:132px}
  .title .logo-word{height:38px}
  .hero{padding:24px;display:flex;flex-direction:column}
  .hero-body{flex:1}
  .hero-row{padding-top:18px}
  .hero-h{font-size:30px}
  .fan{font-size:16px}
  .vsfan .fan{font-size:12px}
  /* three rows of exactly one height, whatever the tiles hold (and stronger than any older rule for the tiles) */
  .menu .m-right .tiles{flex:1;grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
  .tile{min-height:0;padding:16px 18px;gap:14px}
  .tile b{font-size:19px}
  .tile small{font-size:12.5px}
  .tile>svg{width:30px;height:30px}
  .alpha-pill{display:none}
  .alpha-bar{display:flex;grid-column:1/-1;align-items:center;justify-content:center;margin-top:-8px}
}
.note.warn b{color:var(--warn)}
/* ---------- a menu that moves ----------
   Three small things, the same on a phone and a PC. All of it is transforms and opacity, so nothing is laid out again. */
/* the logo plays (menu.js): a square turns over, and the centre's halo swells and fades. Only while the menu is up,
   because the small logo in a match draws these same squares */
.em-turn,.em-core{transform-box:fill-box;transform-origin:center}
.em-turn{animation:emTurn .46s ease-in-out}
@keyframes emTurn{50%{transform:scale(0,1.12)}}
.em-core{opacity:0}
#scr-menu.on .em-core{animation:emCore 2.6s ease-in-out infinite}
@keyframes emCore{50%{opacity:.85;transform:scale(1.35)}}
/* card drift (menu.js): a dim sheet of cards behind the menu, tilted about the middle of the screen. --h is half a
   column's height: the sheet starts that far above the middle and each column slides by it, so the screen stays covered.
   The sheet turns with transform, not the newer translate/rotate properties, which browsers before Chrome 104 drop */
.drift{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none;font-size:16px;opacity:.2}
:root[data-theme="light"] .drift{opacity:.3}
.drift-on .drift{display:block}
.drift-sheet{position:absolute;left:50%;top:50%;margin-top:calc(var(--h)/-2);transform-origin:50% calc(var(--h)/2);transform:translateX(-50%) rotate(-14deg);display:flex;gap:1.1em}
.drift-col{display:flex;flex-direction:column;gap:1.1em;padding-bottom:1.1em;will-change:transform;animation:driftUp var(--d,90s) linear infinite}
.drift-col:nth-child(even){animation-direction:reverse}
@keyframes driftUp{to{transform:translateY(-50%)}}
.drift .card.back>*{display:none}
/* with reduced motion the cards keep still, every other column half a card lower. Phones ask for it more often than you'd
   think: Android's Battery Saver and Remove animations, and an iPhone's Reduce Motion, all do */
@media (prefers-reduced-motion:reduce){.drift-col{animation:none;will-change:auto}.drift-col:nth-child(even){transform:translateY(-3.55em)}}
/* the menu covers a phone's whole screen, so its panels let a little of the drift through. Only where color-mix works:
   with var() inside, a browser without it (before Chrome 111 or iOS 16.2) would drop the background and leave them clear */
@supports (color:color-mix(in srgb,red 50%,transparent)){
.drift-on .hero{background:linear-gradient(160deg,color-mix(in srgb,var(--surf2) 84%,transparent),color-mix(in srgb,var(--surf) 84%,transparent))}
.drift-on .tile{background:color-mix(in srgb,var(--surf) 82%,transparent)}
/* the player card and the settings button are see-through on a plain page; over the drift they're filled like the tiles */
#scr-menu.drift-on .pcard,#scr-menu.drift-on .mstats .iconbtn{background:color-mix(in srgb,var(--surf) 82%,transparent)}
#scr-menu.drift-on .pcard:hover,#scr-menu.drift-on .mstats .iconbtn:hover{background:color-mix(in srgb,var(--surf2) 90%,transparent)}
}
@supports not (color:color-mix(in srgb,red 50%,transparent)){#scr-menu.drift-on .pcard,#scr-menu.drift-on .mstats .iconbtn{background:var(--surf)}}
@media (min-width:920px) and (min-height:560px){.drift{font-size:22px}}
/* the hand breathes: the cards on the Play card float, one after the other, and a glint crosses each */
.fan .card:nth-child(2){--i:1}.fan .card:nth-child(3){--i:2}.fan .card:nth-child(4){--i:3}.fan .card:nth-child(5){--i:4}
.hero-pane:not(.hero-ghost) .fan .card{left:0;transition:left .35s var(--spring);animation:handBob 4.2s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.7s)}
@keyframes handBob{50%{translate:0 -.4em}}
.hero-pane:not(.hero-ghost) .fan .card:not(.back)::after{content:"";position:absolute;z-index:4;top:0;bottom:0;left:0;width:55%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:translateX(-110%);
  animation:handGlint 5.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*.12s)}
@keyframes handGlint{0%,72%{transform:translateX(-110%)}100%{transform:translateX(200%)}}
/* your deck's five cards open out: under the pointer on a PC, by themselves every few seconds on a phone */
@media (hover:hover){.hero:hover .hero-pane:not(.hero-ghost) .hero-top>.fan .card{left:calc((var(--i,0) - 2)*.4em)}}
@media (hover:none){
  .hero-pane:not(.hero-ghost) .hero-top>.fan .card{--sx:calc((var(--i,0) - 2)*.4em);animation:handOpen 8.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.15s)}
}
@keyframes handOpen{0%,44%,100%{translate:0 0}22%{translate:0 -.4em}58%,80%{translate:var(--sx) -.3em}}
/* the main button has a slow heartbeat */
.hero-pane:not(.hero-ghost) .btn.primary:not(:disabled){position:relative}
.hero-pane:not(.hero-ghost) .btn.primary:not(:disabled)::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cta) 22%,transparent),0 10px 30px -4px var(--cta-glow);animation:playBeat 2.6s ease-in-out infinite}
@keyframes playBeat{50%{opacity:1}}
/* a tile moves only when it has news (.hot: packs to open, new stock at the market, a friend request, new cards in
   the collection, the tutorial's free pack still waiting):
   its icon shakes, a glint crosses it and its count pulses. The other tiles keep still */
.tile.hot{overflow:hidden}
.tile.hot::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(var(--tint),.1),transparent);transform:translateX(-110%);animation:tileGlint 6s ease-in-out infinite}
@keyframes tileGlint{0%,70%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
.tile.hot>svg{transform-origin:50% 90%;animation:tileWig 2.6s ease-in-out infinite}
@keyframes tileWig{0%,60%,100%{transform:none}68%{transform:rotate(-11deg)}76%{transform:rotate(9deg)}84%{transform:rotate(-6deg)}92%{transform:rotate(3deg)}}
/* the market's moon (or sun) rocks instead, and glows */
.tile.stile.hot>svg{transform-origin:center;animation:tileRock 5s ease-in-out infinite;filter:drop-shadow(0 0 6px var(--accent-glow))}
@keyframes tileRock{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}
.tile.hot .ptdot{animation:tilePing 1.8s ease-out infinite}
/* the collection's bar: a light runs along the part that's filled */
.tile.hot .bar i{position:relative;overflow:hidden}
.tile.hot .bar i::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-110%);animation:barRun 2.2s ease-in-out infinite}
@keyframes barRun{0%,30%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
@keyframes tilePing{from{box-shadow:0 0 0 0 var(--cta-glow)}to{box-shadow:0 0 0 9px transparent}}
@media (prefers-reduced-motion:reduce){
  .em-turn,#scr-menu.on .em-core,.hero-pane:not(.hero-ghost) .fan .card,.hero-pane:not(.hero-ghost) .fan .card:not(.back)::after,
  .hero-pane:not(.hero-ghost) .btn.primary:not(:disabled)::before,.tile.hot::after,.tile.hot>svg,.tile.hot .ptdot,.tile.hot .bar i::after{animation:none}
}
/* add to home screen (a2hs.js): a card at the bottom of the menu, iPhone Safari only */
.a2hs{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:5;width:min(420px,calc(100% - 24px));
  transform:translate(-50%,24px);opacity:0;transition:transform .35s var(--spring),opacity .25s;
  padding:14px 14px 12px;border-radius:20px;border:1px solid var(--line2);background:linear-gradient(170deg,var(--surf2),var(--surf));
  box-shadow:0 18px 40px -12px rgba(var(--sh),calc(.9*var(--shk)))}
.a2hs.on{transform:translate(-50%,0);opacity:1}
.a2hs-x{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--muted);font:400 24px/1 var(--body);cursor:pointer}
.a2hs-x:hover{background:rgba(var(--tint),.08);color:var(--text)}
.a2hs-top{display:flex;gap:12px;align-items:center;padding-right:30px}
.a2hs-icon{width:46px;height:46px;border-radius:11px;flex:none}
.a2hs h3{margin:0;font:800 16px/1.2 var(--display);color:var(--text)}
.a2hs-top p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.a2hs ol{margin:12px 0 0;padding:10px 12px 10px 30px;border-radius:14px;background:rgba(var(--tint),.04);display:flex;flex-direction:column;gap:7px}
.a2hs li{font-size:13px;line-height:1.35;color:var(--muted)}
.a2hs li::marker{color:var(--accent-ink);font-weight:700}
.a2hs li b{color:var(--text);font-weight:600}
.a2hs li small{font-size:11.5px}
.a2hs-ic{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 4px;margin:0 1px;vertical-align:middle;border-radius:6px;
  background:rgba(var(--tint),.1);color:var(--accent-ink)!important;font:700 12px/1 var(--body);letter-spacing:.05em}
.a2hs-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}