/* menu.css (round 11): the front-end flow of game/js/ui/menu.js in C1 Ink & Grit: warm ink outlines, flat fills, hard drop
   blocks, dub yellow for the thing in focus. Fonts and colours: art/brand/BRAND.md. Sizes are in em of the stage (1em = 1/40 of its height). */
@font-face { font-family:'Alfa Slab One'; src:url(assets/fonts/alfa-slab-one-400.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Rye'; src:url(assets/fonts/rye-400.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url(assets/fonts/barlow-condensed-600.woff2) format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url(assets/fonts/barlow-condensed-800.woff2) format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Barlow'; src:url(assets/fonts/barlow-400.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Barlow'; src:url(assets/fonts/barlow-600.woff2) format('woff2'); font-weight:600; font-display:swap; }

.screen h1, #banner { font-family:'Alfa Slab One', system-ui, sans-serif; font-weight:400; }
#pause { justify-content:flex-start; padding-top:6em; box-sizing:border-box; } #pause h1 { font-size:1.7em; color:#fec403; }
#finish { justify-content:flex-start; padding-top:4.5em; box-sizing:border-box; } #finish h1 { font-size:3em; color:#fec403; -webkit-text-stroke:.05em #14100c; paint-order:stroke fill; text-shadow:0 .09em 0 #f0650e, 0 .16em 0 #14100c; }
body.noflash .heat.hot i, body.noflash #menu .press { animation:none; }

#menu { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; padding:1.6em 2em; pointer-events:auto;
  font-family:'Barlow Condensed', system-ui, sans-serif; font-weight:600; color:#f4e9d8; text-align:center; user-select:none; -webkit-user-select:none; }
#menu.on { display:flex; }
#menu.busy { cursor:progress; } #menu.busy .mb { opacity:.55; }
#menu.m-title { background:linear-gradient(#14100cb8, #14100c00 38%, #14100c00 62%, #14100ccc); justify-content:flex-start; padding-top:.8em; padding-bottom:.9em; }
#menu.m-title .mb.big { font-size:1.8em; margin-bottom:.25em; } #menu.m-title .press { font-size:1.25em; margin-top:.25em; } #menu.m-title .hint { margin-top:.2em; }
#menu.m-main { background:linear-gradient(90deg, #14100ce6, #14100c99 34%, #14100c00 58%); align-items:flex-start; padding-left:4em; }
#menu.m-join { background:linear-gradient(#14100ccc, #14100c00 24%, #14100c00 50%, #14100cd9 78%); justify-content:flex-start; }
#menu.m-dub, #menu.m-track, #menu.m-settings, #menu.m-controls, #menu.m-credits, #menu.m-soon { background:#14100cd4; }
#menu.m-pause { justify-content:center; padding-top:6em; } #menu.m-finish { justify-content:flex-end; padding-bottom:2.4em; }
#menu.over { background:none; } #menu.over.m-settings, #menu.over.m-controls { background:#14100cf0; }
#menu .grow { flex:1; }

/* headline: fat slab caps, ink outline, hard drop block */
#menu .mh { font:400 2.5em/1.05 'Alfa Slab One', system-ui, sans-serif; text-transform:uppercase; letter-spacing:.02em; color:#fec403; -webkit-text-stroke:.07em #14100c; paint-order:stroke fill;
  text-shadow:0 .09em 0 #f0650e, 0 .17em 0 #14100c; margin:.1em 0 .45em; transform:rotate(-1.5deg); }
#menu .tag { font:400 1.35em 'Rye', 'Alfa Slab One', serif; color:#f4e9d8; text-shadow:0 .12em 0 #14100c, .08em 0 0 #14100c, -.08em 0 0 #14100c, 0 -.08em 0 #14100c; margin-top:-.2em; }
#menu .hint { font-size:.85em; color:#d8c8ac; margin-top:.7em; text-shadow:0 .1em 0 #14100c; } #menu .hint b { color:#ffb733; }
#menu .press { font:400 1.5em 'Alfa Slab One', system-ui, sans-serif; color:#f4e9d8; -webkit-text-stroke:.05em #14100c; paint-order:stroke fill; margin-top:.5em; animation:mpress 1.6s ease-in-out infinite; }
@keyframes mpress { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.55; transform:scale(.97); } }

/* buttons */
#menu .mb { position:relative; display:block; box-sizing:border-box; font:400 1.25em/1.15 'Alfa Slab One', system-ui, sans-serif; color:#14100c; background:#f4e9d8; border:.17em solid #14100c; border-radius:.4em;
  padding:.2em 1em .26em; margin:.24em 0; min-width:11em; box-shadow:0 .24em 0 #14100c; cursor:pointer; transform:rotate(-.6deg); transition:transform .08s, background .08s; }
#menu .mb:nth-child(even) { transform:rotate(.5deg); }
#menu .mb small { display:block; font:600 .55em/1.2 'Barlow Condensed', system-ui, sans-serif; letter-spacing:.03em; text-transform:uppercase; color:#5b3a22; }
#menu .mb.foc { background:#fec403; transform:scale(1.07) rotate(-1.6deg); box-shadow:0 .24em 0 #f0650e, 0 .4em 0 #14100c; z-index:2; }
#menu .mb.big { font-size:2.1em; background:#fec403; margin-bottom:.4em; padding:.14em .8em .2em; } #menu .mb.big.foc { background:#ffd83a; box-shadow:0 .2em 0 #dd3d22, 0 .34em 0 #14100c; }
#menu .mb.big small { font-size:.36em; }
#menu .mb.slim { font-size:1em; min-width:8em; }
#menu .mb.soon::after { content:'SOON'; position:absolute; right:-.9em; top:-.5em; font:400 .5em 'Rye', serif; color:#f4e9d8; background:#dd3d22; border:.2em solid #14100c; border-radius:.3em; padding:.05em .4em; transform:rotate(9deg); }
#menu.m-main .mb { font-size:1.08em; min-width:12.5em; text-align:left; } #menu.m-main .mb.big { font-size:1.9em; }
#menu .rowb { display:flex; gap:.9em; justify-content:center; } #menu .rowb .mb { min-width:9em; }

/* the logo: the words slam in, the dub wheel (the O) spins */
#menu .lg { position:relative; width:20em; aspect-ratio:720 / 506; flex:none; animation:mslam .7s cubic-bezier(.2, 1.4, .4, 1) both, mbob 3.4s ease-in-out .7s infinite; filter:drop-shadow(0 .35em 0 #0009); }
#menu .lg.sm { width:13em; animation:none; margin:0 0 .5em -.4em; }
#menu .lg img { position:absolute; display:block; -webkit-user-drag:none; }
#menu .lg .lw { left:0; top:0; width:100%; height:100%; }
#menu .lg .wh { left:4.31%; top:58.3%; width:26.66%; aspect-ratio:1; clip-path:circle(49.5%); animation:mspin 2.6s linear infinite; }
#menu .lg.sm .wh { animation-duration:7s; }
#menu .lg h1 { margin:1.4em 0 0; font:400 3em 'Alfa Slab One', system-ui, sans-serif; color:#fec403; }
@keyframes mslam { 0% { transform:scale(3.2) rotate(-9deg); opacity:0; } 55% { transform:scale(.93) rotate(1.5deg); opacity:1; } 75% { transform:scale(1.05) rotate(-2.5deg); } 100% { transform:scale(1) rotate(-2deg); } }
@keyframes mbob { 0%, 100% { transform:rotate(-2deg) translateY(0); } 50% { transform:rotate(-1.2deg) translateY(-.25em); } }
@keyframes mspin { to { transform:rotate(360deg); } }

/* player cards (join + rider select) */
#menu .pcs { display:flex; gap:.9em; align-items:flex-end; }
#menu .pc { --pc:#f4e9d8; width:14.6em; min-height:12.6em; box-sizing:border-box; background:#211913f2; border:.22em solid var(--pc); border-radius:.6em; padding:.4em .5em .5em; box-shadow:0 .3em 0 #14100c; outline:.14em solid #14100c; }
#menu .pc.empty { opacity:.82; cursor:pointer; min-height:8em; } #menu .pc.rdy { background:#3a2d20f2; transform:translateY(-.5em) rotate(-1deg); } #menu .pc.buzz { animation:mbuzz .3s; }
@keyframes mbuzz { 25% { transform:translateX(-.35em); } 75% { transform:translateX(.35em); } }
#menu .pc .who { font:400 1.25em 'Alfa Slab One', system-ui, sans-serif; color:var(--pc); text-align:left; -webkit-text-stroke:.03em #14100c; } #menu .pc .who span { font:600 .6em 'Barlow Condensed', system-ui, sans-serif; color:#d8c8ac; -webkit-text-stroke:0; margin-left:.4em; }
#menu .pc .jn { font-weight:800; margin-top:1em; } #menu .pc .sm { font:400 .78em/1.25 'Barlow', system-ui, sans-serif; color:#d8c8ac; min-height:2.5em; }
#menu .pc .pick { display:flex; align-items:center; justify-content:center; gap:.5em; margin:.1em 0; }
#menu .pc .ar { font-size:1.4em; color:#ffb733; cursor:pointer; padding:0 .2em; } #menu .pc.rdy .ar { visibility:hidden; }
#menu .face { width:5.4em; height:5.4em; border-radius:50%; background:#d8c8ac; border:.2em solid #14100c; overflow:hidden; flex:none; } #menu .face img, #menu .face svg { width:100%; height:100%; display:block; }
#menu .face.lk { background:#b9a888; }
#menu .pc .rn { font:400 1.15em/1.1 'Rye', 'Alfa Slab One', serif; color:#fec403; margin:.15em 0 .1em; min-height:1.15em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#menu .pc .strip { display:flex; gap:.22em; justify-content:center; margin:.25em 0; } #menu .pc .strip i { width:.75em; height:.75em; border-radius:50%; background:#f4e9d8; border:.1em solid #14100c; } #menu .pc .strip i.lk { background:#14100c; border-color:#5b4a3a; } #menu .pc .strip i.on { outline:.14em solid #ffb733; }
#menu .pc .st { font-weight:800; font-size:1.05em; color:#ffb733; cursor:pointer; } #menu .pc.rdy .st { font:400 1.3em 'Alfa Slab One', system-ui, sans-serif; color:#3fae4a; -webkit-text-stroke:.04em #14100c; } #menu .pc.lock .st { color:#dd3d22; }
#menu .say { font:400 1em 'Rye', serif; color:#14100c; background:#f4e9d8; border:.16em solid #14100c; border-radius:.8em; padding:.05em .6em; display:inline-block; transform:rotate(-3deg); margin-bottom:.2em; }

/* dub and track cards */
#menu .cards { display:flex; gap:.7em; justify-content:center; align-items:stretch; }
#menu .mb.card { min-width:0; width:12.4em; padding:.35em .4em .45em; font-size:1em; margin:0; } #menu .mb.card.foc { transform:scale(1.09) rotate(-1.4deg); }
#menu .card img, #menu .card .art { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; border:.14em solid #14100c; border-radius:.3em; box-sizing:border-box; background:#6f8a4a; }
#menu .card .art { display:flex; align-items:center; justify-content:center; background:#b8854f; } #menu .card .art img { width:46%; border:0; background:none; aspect-ratio:1; }
#menu .card b { display:block; font:400 1.12em/1.1 'Alfa Slab One', system-ui, sans-serif; margin:.3em 0 .1em; } #menu .card small { font-size:.8em; text-transform:none; } #menu .card small.song { color:#b42319; }
#menu .mb.card.dub { width:19em; }

/* settings rows, panels */
#menu .panel2 { background:#211913; border:.2em solid #14100c; outline:.14em solid #5b4a3a; border-radius:.6em; padding:.7em 1.4em; max-width:52em; font:400 .92em/1.5 'Barlow', system-ui, sans-serif; color:#f4e9d8; }
#menu .panel2 b { color:#ffb733; } #menu .panel2 table.ctl { font-size:.8em; } #menu .panel2 .padsvg { width:27em; }
#menu .mb.row { display:flex; align-items:center; gap:.8em; width:23em; font-size:1.02em; text-align:left; margin:.17em 0; transform:none; } #menu .mb.row.foc { transform:scale(1.04); }
#menu .mb.row .v { margin-left:auto; display:flex; align-items:center; gap:.4em; font:800 1em 'Barlow Condensed', system-ui, sans-serif; } #menu .mb.row .ar { color:#b42319; padding:0 .25em; }
#menu .bar { width:7em; height:.6em; background:#14100c; border-radius:.3em; overflow:hidden; } #menu .bar i { display:block; height:100%; background:#dd3d22; }
#menu .onoff { min-width:2.6em; text-align:center; background:#14100c; color:#f4e9d8; border-radius:.3em; padding:0 .4em; } #menu .onoff.on { background:#3fae4a; color:#14100c; }
#menu .chips { display:flex; gap:.25em; } #menu .chips i { width:.9em; height:.9em; border-radius:50%; border:.1em solid #14100c; }
/* ---------- round 14: the Garage and the dub frames ---------- */
#menu.m-garage, #menu.m-store, #menu.m-season { background:none; justify-content:flex-start; padding-top:1.2em; }
#menu .gawrap { display:flex; gap:1.2em; align-items:stretch; width:min(74em, 96%); flex:1; min-height:0; }
#menu .gaL { flex:0 0 40%; display:flex; flex-direction:column; align-items:center; min-height:0; }
#menu .gaL .mh { margin:0 0 .25em; }
#menu #gawin { flex:1; width:100%; min-height:12em; border:.3em solid #14100c; outline:.16em solid #fec403; border-radius:.7em; box-sizing:border-box; cursor:grab; touch-action:none; }
#menu .ganame { margin-top:.5em; padding:.12em 1.2em; font:400 1.5em/1.2 'Rye', serif; color:#f4e9d8; background:#211913; border:.14em solid #14100c; border-radius:.35em; -webkit-text-stroke:.12em #14100c; paint-order:stroke fill; }
#menu .gastat { margin-top:.35em; font:600 .85em 'Barlow Condensed', system-ui, sans-serif; color:#f4e9d8; background:#14100ccc; padding:.15em .7em; border-radius:.3em; } #menu .gastat b { color:#9be07a; }
#menu .gaR { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; background:#211913f2; border:.22em solid #14100c; outline:.14em solid #5b4a3a; border-radius:.7em; padding:.5em .7em; }
#menu .gatabs { display:flex; flex-wrap:wrap; gap:.25em; margin-bottom:.45em; }
#menu .gatabs i { font:400 .8em 'Alfa Slab One', system-ui, sans-serif; font-style:normal; text-transform:uppercase; color:#d8c8ac; background:#3a2c20; border:.14em solid #14100c; border-radius:.3em; padding:.12em .5em; cursor:pointer; }
#menu .gatabs i.on { color:#14100c; background:#fec403; transform:rotate(-2deg) scale(1.08); }
#menu .galist { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:.22em; min-height:0; padding-right:.2em; }
#menu .gi { position:relative; display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; column-gap:.6em; padding:.22em .6em; background:#f4e9d8; color:#14100c; border:.14em solid #14100c; border-radius:.35em; cursor:pointer; font:400 .92em 'Barlow', system-ui, sans-serif; }
#menu .gi b { font:400 1.05em 'Alfa Slab One', system-ui, sans-serif; } #menu .gi small { color:#5b4a3a; font-size:.85em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#menu .gi .st { font:600 .8em 'Barlow Condensed', system-ui, sans-serif; letter-spacing:.04em; white-space:nowrap; }
#menu .gi.foc { background:#fec403; transform:translateX(.35em); } #menu .gi.eq .st { color:#1d7a2b; } #menu .gi.lk { background:#b7a88f; } #menu .gi.lk.foc { background:#d9b45a; } #menu .gi.buzz { animation:mshake .3s; }
#menu .rar { font:600 .68em 'Barlow Condensed', system-ui, sans-serif; font-style:normal; text-transform:uppercase; letter-spacing:.06em; padding:.05em .45em; border-radius:.8em; border:.14em solid #14100c; background:#d8c8ac; }
#menu .rar.r-rare { background:#6ab8ff; } #menu .rar.r-epic { background:#c58bff; } #menu .rar.r-legendary { background:#f5c518; }
#menu .gafoot { margin-top:.4em; font:400 .85em/1.35 'Barlow', system-ui, sans-serif; color:#f4e9d8; } #menu .gafoot b { color:#ffb733; } #menu .gafoot span { color:#b7a88f; font-size:.9em; }
#menu .cards.dubs { flex-wrap:wrap; max-width:66em; } #menu .cards.dubs .mb.card.dub { width:13.5em; } #menu .card.dub .art img.th { width:100%; aspect-ratio:16 / 9; object-fit:cover; }
#menu .mb.card.lk { filter:saturate(.35) brightness(.8); } #menu .mb.card.buzz { animation:mshake .3s; }
@keyframes mshake { 0%, 100% { translate:0 0; } 25% { translate:-.3em 0; } 75% { translate:.3em 0; } }
#finish td.bn { color:#fff; text-shadow:0 0 .15em #000, 0 0 .3em #000; border-radius:.25em; }
/* ---------- round 15: profile chip, rewards on the results, profile / daily screens, the tutorial prompt ---------- */
#menu .xb { display:inline-block; width:9em; height:.62em; background:#14100c; border:.1em solid #14100c; border-radius:.4em; overflow:hidden; vertical-align:middle; }
#menu .xb i { display:block; height:100%; width:var(--w1); background:linear-gradient(#ffd83a, #f0650e); animation:xbfill 1.1s .35s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes xbfill { from { width:var(--w0); } to { width:var(--w1); } }
#menu .pchip { position:absolute; right:1.2em; top:1em; display:flex; align-items:center; gap:.6em; background:#211913f2; border:.16em solid #14100c; outline:.12em solid #5b4a3a; border-radius:.5em; padding:.25em .7em; font:600 .95em 'Barlow Condensed', system-ui, sans-serif; color:#f4e9d8; cursor:pointer; }
#menu .pchip b { font:400 1em 'Rye', serif; color:#fec403; } #menu .pchip .xb { width:6em; }
#menu.m-main .rowb.mrow { gap:.4em; margin-top:.3em; } #menu.m-main .rowb.mrow .mb { min-width:0; font-size:.86em; text-align:center; }
#menu .rew { background:#211913f2; border:.2em solid #14100c; outline:.14em solid #fec403; border-radius:.6em; padding:.35em .9em .45em; margin-bottom:.6em; max-width:58em; animation:rewin .45s cubic-bezier(.2, 1.4, .4, 1) both; }
#menu .rew .rt { font:400 1.1em 'Rye', serif; color:#fec403; }
#menu .rew .rl, #menu .prof .rl { display:flex; align-items:center; justify-content:center; gap:.7em; font:600 1.05em 'Barlow Condensed', system-ui, sans-serif; color:#f4e9d8; }
#menu .rew .lv, #menu .prof .lv { font:400 1.25em 'Alfa Slab One', system-ui, sans-serif; color:#fec403; -webkit-text-stroke:.04em #14100c; } #menu .rew.up .lv { animation:lvpop .6s 1.3s cubic-bezier(.2, 2, .4, 1) both; }
#menu .rew .xb { width:15em; } #menu .rew .tot { color:#9be07a; font-weight:800; } #menu .rew .jar { color:#ffd83a; font-weight:800; }
#menu .rew .rp { display:flex; flex-wrap:wrap; justify-content:center; gap:.1em .9em; font:400 .78em 'Barlow', system-ui, sans-serif; color:#d8c8ac; margin-top:.15em; } #menu .rew .rp b { color:#9be07a; } #menu .rew .rp .pg b { color:#ffb733; }
#menu .rew .lvup { font:400 1.5em 'Alfa Slab One', system-ui, sans-serif; color:#fec403; -webkit-text-stroke:.05em #14100c; paint-order:stroke fill; animation:lvpop .7s 1.3s cubic-bezier(.2, 2, .4, 1) both; }
#menu .drops { display:flex; flex-wrap:wrap; justify-content:center; gap:.5em; margin-top:.3em; }
#menu .drop { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.5em; align-items:center; text-align:left; background:#f4e9d8; color:#14100c; border:.16em solid #14100c; border-radius:.45em; padding:.2em .6em .2em .3em; box-shadow:0 .2em 0 #14100c; animation:droppop .55s cubic-bezier(.2, 1.8, .4, 1) both; }
#menu .drop img, #menu .drop .ic { grid-row:1 / 3; width:2.3em; height:2.3em; border-radius:50%; border:.12em solid #14100c; background:#d8c8ac; object-fit:cover; display:flex; align-items:center; justify-content:center; font:400 1.3em 'Alfa Slab One', system-ui, sans-serif; font-style:normal; }
#menu .drop b { font:400 .95em 'Alfa Slab One', system-ui, sans-serif; } #menu .drop small { font:600 .7em 'Barlow Condensed', system-ui, sans-serif; color:#5b3a22; text-transform:uppercase; letter-spacing:.03em; }
#menu .drop.r-rare { background:#bfe0ff; } #menu .drop.r-epic { background:#e2c8ff; } #menu .drop.r-legendary, #menu .drop.r-rider { background:#fec403; } #menu .drop.r-rider { transform-origin:50% 100%; }
@keyframes rewin { from { opacity:0; transform:translateY(1.2em) scale(.9); } to { opacity:1; transform:none; } }
@keyframes droppop { 0% { opacity:0; transform:scale(.2) rotate(-14deg); } 70% { opacity:1; transform:scale(1.15) rotate(3deg); } 100% { opacity:1; transform:scale(1) rotate(-1deg); } }
@keyframes lvpop { 0% { opacity:0; transform:scale(.3); } 100% { opacity:1; transform:scale(1); } }
body.noflash #menu .drop, body.noflash #menu .rew, body.noflash #menu .rew .lvup, body.noflash #menu .rew.up .lv { animation-duration:.01s; animation-delay:0s; }
#finish.hasrew { justify-content:flex-start; padding-top:.5em; } #finish.hasrew h1 { font-size:1.5em; margin-bottom:.2em; } #finish.hasrew .vic, #finish.hasrew .vic canvas { width:9.5em; } #finish.hasrew table.res { font-size:.82em; }
#menu.m-profile, #menu.m-daily, #menu.m-training, #menu.m-tutdone { background:#14100cd4; }
#menu .prof { display:flex; gap:1.6em; text-align:left; max-width:60em; margin-bottom:.7em; } #menu .prof .pl { flex:1 1 55%; } #menu .prof .pr { flex:1 1 45%; }
#menu .prof .pn { font:400 1.7em 'Rye', serif; color:#fec403; } #menu .prof .rl { justify-content:flex-start; } #menu .prof .cur { font-size:1.15em; margin:.2em 0; }
#menu .prof .sm2 { font-size:.86em; color:#d8c8ac; margin-top:.35em; line-height:1.45; } #menu .prof .pt { font:400 1.05em 'Alfa Slab One', system-ui, sans-serif; color:#fec403; margin-bottom:.15em; }
#menu .chl { display:flex; justify-content:space-between; gap:1em; font-size:.84em; line-height:1.4; border-bottom:1px solid #3a2d20; } #menu .chl b { color:#ffb733; white-space:nowrap; } #menu .chl.dn span { color:#9be07a; } #menu .chl.dn b { color:#9be07a; }
#menu .gapl i { font-style:normal; font-weight:800; color:#d8c8ac; background:#3a2c20; border:.1em solid #14100c; border-radius:.3em; padding:0 .35em; margin-left:.25em; cursor:pointer; } #menu .gapl i.on { background:#fec403; color:#14100c; }
#tut { position:absolute; left:50%; top:2.7em; transform:translateX(-50%) rotate(-.6deg); display:none; width:min(34em, 80%); background:#f4e9d8; color:#14100c; border:.2em solid #14100c; border-radius:.6em; box-shadow:0 .3em 0 #14100c; padding:.35em .9em .4em; text-align:center; pointer-events:auto; }
#tut.on { display:block; } #tut.ok { background:#b9ec9a; }
#tut .tn { position:absolute; left:-.7em; top:-.8em; background:#dd3d22; color:#f4e9d8; border:.16em solid #14100c; border-radius:.4em; padding:0 .45em; font:400 .85em 'Alfa Slab One', system-ui, sans-serif; transform:rotate(-6deg); }
#tut .th { font:400 1.35em/1.1 'Alfa Slab One', system-ui, sans-serif; text-transform:uppercase; color:#b42319; } #tut.ok .th { color:#1d7a2b; }
#tut .tt { font:600 1.02em/1.3 'Barlow', system-ui, sans-serif; } #tut .tt b { background:#14100c; color:#fec403; border-radius:.25em; padding:0 .35em; white-space:nowrap; }
#tut .ts { font:600 .74em 'Barlow Condensed', system-ui, sans-serif; color:#5b3a22; margin-top:.2em; text-transform:uppercase; letter-spacing:.03em; } #tut .tskip { text-decoration:underline; cursor:pointer; color:#b42319; }

/* round 18: the Online pages (js/net/net.js) */
#menu .netcode { font-family:'Rye', serif; color:#ffb733; letter-spacing:.14em; margin-left:.4em; }
#menu .netlist { min-width:34em; }
#menu .netrow { display:flex; gap:1em; align-items:baseline; padding:.18em 0; border-bottom:.08em solid #3a2d22; }
#menu .netrow b { flex:0 0 11em; } #menu .netrow span { flex:1; } #menu .netrow small { opacity:.7; } #menu .netrow i { flex:0 0 6em; text-align:right; font-style:normal; color:#b9a58c; }
#menu .netrow.rdy i { color:#8fd14f; } #menu .netrow.cpu { opacity:.6; } #menu .nettrack { margin-top:.5em; }
#menu .neterr { color:#ff7a5c !important; } #menu .mb.dim { opacity:.55; }

/* round 19: the Store and the Season screens (ui/store.js) on the Garage's layout */
#menu .shbal { display:flex; align-items:baseline; gap:.35em; margin-bottom:.35em; font:600 .95em 'Barlow Condensed', system-ui, sans-serif; color:#f4e9d8; } #menu .shbal b { color:#ffd83a; font-size:1.15em; } #menu .shbal span { margin-left:auto; color:#b7a88f; }
#menu .test { font:400 .7em 'Alfa Slab One', system-ui, sans-serif; font-style:normal; color:#f4e9d8; background:#dd3d22; border:.14em solid #14100c; border-radius:.3em; padding:0 .4em; transform:rotate(-4deg); display:inline-block; }
#menu .gi s { color:#8a2a1e; opacity:.8; } #menu .gi .deal { font:400 .9em 'Alfa Slab One', system-ui, sans-serif; font-style:normal; color:#f4e9d8; background:#dd3d22; border:.12em solid #14100c; border-radius:.3em; padding:0 .35em; }
#menu .sw { display:inline-block; width:.85em; height:.85em; border-radius:50%; border:.1em solid #14100c; margin-right:.25em; vertical-align:-.12em; } #menu .sw.wide { width:2.6em; border-radius:.25em; }
#menu .sw.txt { width:auto; height:auto; border-radius:.25em; padding:0 .35em; font:400 .78em 'Alfa Slab One', system-ui, sans-serif; font-style:normal; }
#menu .rar.r-bundle { background:#9be07a; }
#menu .shc { background:#3a2c20; border:.14em solid #14100c; border-radius:.35em; padding:.3em .7em; color:#f4e9d8; } #menu .shc .pt { font:400 1.35em 'Rye', serif; color:#fec403; } #menu .shc .sm2 { font:400 .85em/1.35 'Barlow', system-ui, sans-serif; color:#d8c8ac; }
#menu .gi.go b { color:#14100c; } #menu .gi.go { background:#ffe7a8; } #menu .gi.go.foc { background:#fec403; } #menu .gi.go.lk { background:#b7a88f; } #menu .gi.it .st { color:#1d7a2b; }
#menu .shs { display:flex; align-items:center; gap:.7em; margin-bottom:.3em; font:600 .95em 'Barlow Condensed', system-ui, sans-serif; color:#f4e9d8; } #menu .shs > b { font:400 1.15em 'Rye', serif; color:#fec403; } #menu .shs span b { color:#ffd83a; } #menu .shs .xb { flex:1; min-width:5em; }
#menu .trh, #menu .tr { display:grid; grid-template-columns:2.2em 1fr 1fr; column-gap:.3em; align-items:stretch; } #menu .trh { font:400 .75em 'Alfa Slab One', system-ui, sans-serif; text-transform:uppercase; color:#d8c8ac; margin-bottom:.2em; padding-right:.6em; }
#menu .tr .tn { font:400 1.05em 'Alfa Slab One', system-ui, sans-serif; font-style:normal; color:#5b4a3a; background:#3a2c20; border:.14em solid #14100c; border-radius:.35em; display:flex; align-items:center; justify-content:center; } #menu .tr.on .tn { color:#14100c; background:#fec403; }
#menu .tc { display:flex; align-items:center; gap:.45em; padding:.2em .5em; background:#b7a88f; color:#14100c; border:.14em solid #14100c; border-radius:.35em; cursor:pointer; font:400 .88em 'Barlow', system-ui, sans-serif; min-width:0; }
#menu .tc b { font:400 1em 'Alfa Slab One', system-ui, sans-serif; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } #menu .tc span { margin-left:auto; font:800 .82em 'Barlow Condensed', system-ui, sans-serif; white-space:nowrap; }
#menu .tc.s-ready { background:#9be07a; } #menu .tc.s-ready span { color:#14100c; background:#fec403; border:.12em solid #14100c; border-radius:.3em; padding:0 .4em; } #menu .tc.s-claimed { background:#f4e9d8; } #menu .tc.s-claimed span { color:#1d7a2b; } #menu .tc.s-needpass { background:#d9c2f2; }
#menu .tc.foc { outline:.2em solid #fec403; outline-offset:-.05em; transform:scale(1.02); box-shadow:0 .15em 0 #14100c; } #menu .tc.buzz { animation:mshake .3s; }

/* ---- round 22: modes, accessibility, text size ---- */
#stage { --ui:1; }
#subs { position:absolute; left:50%; bottom:3.2em; transform:translateX(-50%); max-width:70%; display:none; pointer-events:none; z-index:6; text-align:center; font-family:'Barlow', system-ui, sans-serif; font-weight:600; font-size:calc(1.05em * var(--ui)); line-height:1.3; }
#subs div { display:inline-block; margin-top:.2em; padding:.15em .6em; background:#14100ce0; color:#fff8e6; border-radius:.3em; }
#subs b { color:#fec403; margin-right:.3em; }
#battle { position:absolute; left:50%; top:2.7em; transform:translateX(-50%); display:none; gap:.6em; align-items:center; padding:.2em .7em; background:#14100cd0; border:.12em solid #2a1c12; border-radius:.5em; color:#fff8e6; font-family:'Barlow Condensed', system-ui, sans-serif; font-weight:800; font-size:calc(1em * var(--ui)); white-space:nowrap; z-index:4; }
#battle span { color:var(--pc); } #battle span.out { opacity:.4; text-decoration:line-through; } #battle i { color:#fec403; font-style:normal; }
.modeline { margin:.2em auto .5em; padding:.25em .9em; background:#14100cd0; color:#fff8e6; border-radius:.4em; font-family:'Barlow Condensed', system-ui, sans-serif; font-weight:800; font-size:calc(1.15em * var(--ui)); width:max-content; max-width:90%; }
#menu .mb.slimrow { padding-top:.12em; padding-bottom:.12em; min-height:0; font-size:.92em; }
#menu kbd { display:inline-block; min-width:1.6em; padding:0 .45em; text-align:center; background:#fff8e6; color:#14100c; border:.1em solid #14100c; border-radius:.3em; box-shadow:0 .12em 0 #14100c; font-family:'Barlow Condensed', system-ui, sans-serif; font-weight:800; }
/* text size (settings `ui`, access.js): the small print grows, the layout stays */
.ui-big #menu .mb small { font-size:calc(.55em * var(--ui)) !important; } .ui-big #menu .mb.big small { font-size:calc(.36em * var(--ui)) !important; } .ui-big #menu .card small { font-size:calc(.8em * var(--ui)) !important; } .ui-big #menu .gi small { font-size:calc(.85em * var(--ui)) !important; } .ui-big #menu .drop small { font-size:calc(.7em * var(--ui)) !important; } .ui-big #menu .hint { font-size:calc(.85em * var(--ui)) !important; } .ui-big #menu .pc .sm { font-size:calc(.78em * var(--ui)) !important; } .ui-big #menu .prof .sm2 { font-size:calc(.86em * var(--ui)) !important; } .ui-big #menu .shc .sm2 { font-size:calc(.85em * var(--ui)) !important; } .ui-big .panel { font-size:calc(.8em * var(--ui)) !important; } .ui-big .label { font-size:calc(.7em * var(--ui)) !important; } .ui-big .small { font-size:calc(.75em * var(--ui)) !important; } .ui-big #clock { font-size:calc(1em * var(--ui)) !important; }