/* Screens owned by the more area: rank, profile, archive, rehearsal, how, settings, not found (web/js/screens).
   Reads tokens.css; shared parts live in app.css. Every class here starts with "m-" (only these screens use it), and
   any override of a shared class (.board, .seg, .cine, .topbar, .avatar) is scoped under its screen class. */

/* ---------- Shared bits for the more screens ---------- */
.m-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; margin: calc(var(--s2) * -1) calc(var(--s2) * -1) var(--s3); }
.m-title { font: 700 1.625rem/1.15 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.m-head .m-title { padding-left: var(--s2); }
.m-head-note { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); padding-right: var(--s2); }
.m-h2 { font: 700 var(--fs-lg)/1.25 var(--font-display); margin-bottom: var(--s3); }
.m-count { font: 700 var(--fs-sm) var(--font-body); color: var(--text-2); margin-left: 4px; }
.m-kicker { font: 800 var(--fs-xs)/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin: var(--s6) 0 var(--s2) var(--s1); }
.m-lead { color: var(--text-2); font-size: var(--fs-md); margin: calc(var(--s2) * -1) 0 var(--s5); }
.m-sub { color: var(--text-2); font-size: var(--fs-md); font-weight: 700; }
.m-note { color: var(--text-2); font-size: var(--fs-sm); text-align: center; margin-top: var(--s3); }
.m-gold { color: var(--gold); }
.m-bar { margin-top: var(--s4); }

.m-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: var(--panel-shadow); }

/* Grouped list (rows inside one raised card, hairlines between) */
.m-group { list-style: none; margin: 0; padding: 0 var(--s4); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 4px 0 #0a1020; }
.m-group > li + li, .m-group .list > li + li { border-top: 1px solid var(--line); }
.m-row { display: flex; align-items: center; gap: var(--s3); min-height: 58px; padding: var(--s2) 0; color: var(--text); text-decoration: none; font-weight: 700; font-size: var(--fs-md); width: 100%; }
.m-row > svg:first-child { width: 24px; height: 24px; color: var(--gold); flex: none; }
.m-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
a.m-row:active { opacity: .75; }

/* The film strip: cyan, red, marigold */
.m-strip, .m-shot .mini { display: inline-flex; gap: 4px; }
.m-strip i, .m-shot .mini i { display: block; border-radius: 4px; }
.m-strip i { width: 18px; height: 8px; }
:is(.m-strip, .mini, .m-trio, .m-chainart) > .c { --face: var(--cyan); }
:is(.m-strip, .mini, .m-trio, .m-chainart) > .r { --face: var(--red); }
:is(.m-strip, .mini, .m-trio, .m-chainart) > .g { --face: var(--gold); }
.m-strip i, .m-shot .mini i, .m-trio i { background: var(--face); }

/* ---------- Rank ---------- */
.m-hero { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: var(--s2); }
.m-shield { filter: drop-shadow(0 0 26px rgba(242, 178, 51, .4)); }
.m-tier-name { font: 700 1.875rem/1.1 var(--font-display); color: var(--gold); margin-top: 6px; }
.m-track { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.m-track::before, .m-track::after { content: ""; position: absolute; top: 10px; height: 4px; border-radius: 2px; left: 10%; }
.m-track::before { right: 10%; background: var(--line); }
.m-track::after { width: calc(var(--done) * .8); background: var(--gold-edge); }
.m-track li { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 1; min-width: 0; }
.m-track .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--line-strong); }
.m-track .past .dot { background: var(--gold-edge); }
.m-track .now .dot { width: 32px; height: 32px; margin-top: -4px; background: var(--gold); box-shadow: 0 0 0 4px rgba(242, 178, 51, .25); }
.m-track .now .name { color: var(--gold); }
.m-track .name { font-size: 11px; font-weight: 800; color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-rank .m-board { margin-top: var(--s3); }
.more-rank .board li { border-bottom: 0; min-height: 60px; border-radius: var(--radius); grid-template-columns: 40px 1fr auto 64px var(--tap); }
.more-rank .board .rank { font: 700 var(--fs-lg) var(--font-display); color: var(--text-2); text-align: center; }
.more-rank .board .who { font-weight: 800; font-size: var(--fs-md); }
.more-rank .board .score { font: 700 var(--fs-lg) var(--font-display); }
.more-rank .board li.me { background: var(--bg-card); margin: 2px 0; padding: 0 var(--s1); }
.more-rank .board li.me .rank { color: var(--gold); }
.more-rank .board li.me .who { color: var(--text); }

/* ---------- Profile ---------- */
.m-id { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.more-profile .m-id .avatar.xl { width: 104px; height: 104px; font: 700 2.6rem var(--font-display); background: var(--cyan) !important; color: var(--text-inverse); box-shadow: 0 var(--edge) 0 var(--cyan-edge), 0 0 40px rgba(26, 166, 199, .3); margin-bottom: var(--s3); }
.m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s6); }
.m-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 108px; padding: var(--s3) var(--s2); border-radius: var(--radius); background: var(--face); color: var(--text-inverse); box-shadow: 0 var(--edge) 0 var(--edgec); text-align: center; }
.m-tile.gold { --face: var(--gold); --edgec: var(--gold-edge); }
.m-tile.green { --face: var(--green); --edgec: var(--green-edge); }
.m-tile.cyan { --face: var(--cyan); --edgec: var(--cyan-edge); }
.m-tile .k { font: 800 var(--fs-xs)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.m-tile b { font: 700 2rem/1.1 var(--font-display); }
.m-tile .s { font-size: var(--fs-sm); font-weight: 800; }
.m-lb { margin-top: var(--s6); }
.m-lb .row-flex input { flex: 1; min-width: 0; }
.m-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4) var(--s2); }
.m-badges li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.m-badges .coin { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--face, var(--bg-inset)); color: var(--text-inverse); box-shadow: 0 4px 0 var(--edgec, #0a1020); margin-bottom: 6px; }
.m-badges .coin svg { width: 28px; height: 28px; }
.m-badges .earned.c0 { --face: var(--red); --edgec: var(--red-edge); }
.m-badges .earned.c0 .coin { color: var(--cream); }
.m-badges .earned.c1 { --face: var(--gold); --edgec: var(--gold-edge); }
.m-badges .earned.c2 { --face: var(--cyan); --edgec: var(--cyan-edge); }
.m-badges .locked .coin { color: var(--text-2); }
.m-badges b { font-size: var(--fs-sm); line-height: 1.2; }
.m-badges .locked b { color: var(--text-2); }
.m-badges .d { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.3; }

/* ---------- Archive ---------- */
.m-shots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.m-shot { display: grid; gap: var(--s3); width: 100%; text-align: left; padding: var(--s4); border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--line); box-shadow: 0 4px 0 #0a1020; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.m-shot:active { transform: translateY(3px); box-shadow: 0 1px 0 #0a1020; }
.m-shot[disabled] { opacity: .6; }
.m-shot .top, .m-shot .bottom { display: flex; align-items: center; gap: var(--s3); }
.m-shot .top b { flex: 1; font: 700 var(--fs-lg)/1.2 var(--font-display); }
.m-shot .score { font: 700 var(--fs-lg) var(--font-display); color: var(--gold); }
.m-shot .tag { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }
.m-shot .mini i { width: 30px; height: 40px; border-radius: 8px; opacity: .35; }
.m-shot.played .mini i { opacity: 1; }
.m-shot .par { flex: 1; white-space: nowrap; font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }
.m-shot .go { white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--s4); border-radius: 12px; font-weight: 800; background: var(--bg-inset); color: var(--text); }
.m-shot:not(.played) .go { color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold-edge); }

/* ---------- Rehearsal / not found: the Cinerama stage ---------- */
.m-stage { position: relative; margin: var(--s8) auto 0; max-width: 420px; }
.m-stage::before { content: ""; position: absolute; inset: -30px -10px; background: radial-gradient(closest-side, rgba(242, 178, 51, .12), transparent); pointer-events: none; }
.more-rehearsal .cine-panel, .more-notfound .cine-panel { min-height: 170px; }
.more-rehearsal .cine-panel .film { font-size: 3rem; line-height: 1; }
.more-rehearsal .m-note { margin-top: var(--s2); }
.more-notfound .cine-panel { --face: var(--bg-card); --edgec: var(--line); }
.more-notfound .m-stage::before { background: radial-gradient(closest-side, rgba(196, 45, 83, .22), transparent); }
.m-404 { font: 700 2.6rem/1 var(--font-display); color: var(--danger); }
.more-notfound .m-title { margin-top: var(--s8); }
.more-notfound .m-lead { margin: var(--s2) auto 0; max-width: 32ch; }

/* ---------- How to play ---------- */
.m-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.m-step { display: grid; grid-template-columns: 120px 1fr; gap: var(--s4); align-items: center; padding: var(--s4); border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--line); }
.m-step .n { font: 700 1.5rem/1 var(--font-display); color: var(--gold); }
.m-step h2 { font: 700 var(--fs-md)/1.25 var(--font-display); margin: 2px 0 4px; }
.m-step p { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; }
.m-trio { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 4px; align-items: center; }
.m-trio i { font: 700 11px/1.1 var(--font-display); font-style: normal; display: grid; place-items: center; text-align: center; min-height: 58px; padding: 2px; border-radius: 8px; color: var(--text-inverse); }
.m-trio i.r { min-height: 66px; color: var(--cream); }
.m-chainart { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px 6px; align-items: center; font-style: normal; }
.m-chainart i { font-style: normal; }
.m-chainart .f { font: 700 11px/1.1 var(--font-display); display: grid; place-items: center; text-align: center; min-height: 42px; padding: 2px 4px; border-radius: 8px; background: var(--bg-inset); color: var(--dim-text); }
.m-chainart .f.g { background: var(--face); color: var(--text-inverse); }
.m-chainart .arrow { color: var(--text-2); }
.m-chainart .p { grid-column: 1 / -1; justify-self: center; font: 800 11px/1 var(--font-body); padding: 6px 10px; border-radius: 99px; background: var(--cyan); color: var(--text-inverse); }
.m-peekart { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 66px; border-radius: 12px; background: var(--red); color: var(--cream); box-shadow: 0 4px 0 var(--red-edge); }
.m-peekart b { font: 700 1.75rem/1 var(--font-display); }
.m-peekart span { font: 800 var(--fs-xs) var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.more-how .m-card { margin-top: var(--s4); }
.m-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.m-tiers .tier { justify-content: center; min-width: 0; min-height: 40px; padding-inline: 6px; font-size: var(--fs-xs); letter-spacing: .04em; white-space: nowrap; }
.m-bonus { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.m-bonus li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.m-bonus .m-gold { font: 700 var(--fs-md) var(--font-display); }
.m-rules { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s2); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; }
.m-formula { font: 700 var(--fs-lg)/1.3 var(--font-display); color: var(--gold); text-align: center; padding: var(--s3); border-radius: var(--radius); background: var(--bg-inset); margin-bottom: var(--s3); }
.more-how .m-card .muted { font-size: var(--fs-sm); }
.more-how > .m-note { margin-top: var(--s5); }

/* ---------- Settings ---------- */
.more-settings .m-kicker:first-child { margin-top: 0; }
.m-save .t { font: 700 var(--fs-lg) var(--font-display); }
.m-save #code-slot { margin-top: var(--s3); }
.m-save #code-slot .btn-primary { margin-top: var(--s4); }
.m-key { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); flex: none; }
.m-key svg { width: 20px; height: 20px; }
.m-toggle { cursor: pointer; }
.m-toggle .t { display: block; font-weight: 800; }
.m-toggle .s { display: block; font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; line-height: 1.35; }
.more-settings .switch input:checked + span { background: var(--green); border-color: var(--green); }
.more-settings .switch input:checked + span::after { background: var(--cream); }
.m-blocks { padding-top: var(--s1); padding-bottom: var(--s1); }
.m-empty { color: var(--text-2); font-size: var(--fs-sm); padding: var(--s3) 0; }
.m-delete { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; min-height: 52px; margin-top: var(--s8); border-radius: var(--radius); border: 1.5px solid var(--danger); background: var(--red-tint); color: var(--danger); font-weight: 800; }
.m-delete svg { width: 20px; height: 20px; }
.m-credits { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-top: var(--s10); }
.m-credits .m-strip { margin-bottom: var(--s2); }
.m-credits .shout { font-weight: 800; font-size: var(--fs-sm); max-width: 34ch; }
.m-credits .tag { font-size: var(--fs-sm); color: var(--text-2); }
.m-credits .own { font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--s3); }

/* ---------- Tablet and desktop: the column widens (560-600 px), so the stage and step art grow ---------- */
@media (min-width: 760px) {
  .m-step { grid-template-columns: 180px 1fr; padding: var(--s5); }
  .more-rehearsal .cine-panel, .more-notfound .cine-panel { min-height: 210px; }
  .m-stage { max-width: 480px; }
}

/* Sign in with Google / Discord: Settings card, welcome sheet, /signin screen (ui/signin.js, screens/signin.js).
   Brand basics: Google = white button, grey outline, the four-colour G; Discord = blurple #5865F2, white mark. */
.signin-btns { display: grid; gap: var(--s3); margin-top: var(--s4); }
.signin-btn { display: flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 48px; width: 100%;
  padding: 0 var(--s4); border-radius: 12px; font: 600 var(--fs-md)/1.2 var(--font-body); cursor: pointer; }
.signin-btn:disabled { opacity: .6; cursor: default; }
.signin-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.signin-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.signin-mark svg { width: 20px; height: 20px; }
.signin-google { background: #fff; color: #1f1f1f; border: 1px solid #747775; }
.signin-google:active { background: #f2f2f2; }
.signin-discord { background: #5865F2; color: #fff; border: 1px solid #5865F2; }
.signin-discord .signin-mark svg { width: 22px; }
.signin-discord:active { background: #4752c4; }
.m-signin { margin-top: var(--s4); }
.m-signin .t { font: 700 var(--fs-lg) var(--font-display); margin: 0 0 var(--s2); }
.m-signin-list { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.m-signin-list > li + li { border-top: 1px solid var(--line); }
.m-signin-ok { color: var(--green); }
.ob-top { gap: var(--s4); flex-wrap: wrap; }
.more-signin .signin-card { margin-top: var(--s6); display: grid; gap: var(--s3); text-align: center; }
.more-signin .signin-card .t { font: 700 var(--fs-xl) var(--font-display); margin: 0; }
.more-signin .signin-ok { margin: 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--text-inverse); }
.more-signin .signin-ok svg { width: 30px; height: 30px; }
.more-signin .signin-home { justify-self: center; }

/* Email sign-in: sheet, password field with Show, Settings email row, /reset (ui/email-signin.js, screens/reset.js, verify.js). */
.signin-email { background: var(--bg-raised); color: var(--text); border: 1px solid var(--line); margin-top: var(--s3); }
.m-email-slot { margin-top: var(--s3); }
.signin-email .signin-mark svg { width: 22px; height: 22px; }
.signin-email:active { border-color: var(--accent); }
.em-form { padding-top: var(--s3); padding-bottom: var(--s3); }
.em-form .err, .em-reset .err { margin: 0; font-size: var(--fs-sm); color: var(--danger); }
.em-pw-wrap { position: relative; }
.em-pw-wrap input { padding-right: 76px; }
.em-show { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: var(--tap); min-width: 64px;
  padding: 0 var(--s3); border: 0; border-radius: var(--radius); background: transparent; color: var(--text-2);
  font: 600 var(--fs-sm) var(--font-body); cursor: pointer; }
.em-show:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.em-link { justify-self: center; min-height: var(--tap); }
.em-sent { margin: 0; font-size: var(--fs-md); line-height: 1.5; }
.em-conflict { display: grid; gap: var(--s3); padding-top: var(--s3); padding-bottom: var(--s3); }
.em-conflict .t { font: 700 var(--fs-lg) var(--font-display); margin: 0; }
.em-reset { text-align: left; }
.m-email { display: grid; gap: var(--s3); }
.m-email-addr { display: flex; align-items: baseline; gap: var(--s2); margin: 0; overflow-wrap: anywhere; }
.m-email-nudge { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3); border-radius: var(--radius);
  background: var(--gold-tint); border: 1px solid var(--gold-edge); }
.m-email-nudge p { margin: 0; flex: 1 1 180px; }
.m-email .duo-actions { margin-top: 0; }