/* The website looks like the extension's popup (popup/popup.html in the YomePiano repo): dark
   cards with a pink-violet-cyan edge and a soft glow, over a faint grid on near-black, a neon-sign
   title and chunky buttons that press down. The colours are the extension's Neon theme
   (shared/themes.js). Everything here is drawn with CSS: no pictures. */

/* Kanit (SIL Open Font License, see /fonts/OFL.txt), kept on this site: nothing loads from elsewhere. */
@font-face { font-family: "Kanit"; font-weight: 400; font-display: swap; src: url("/fonts/kanit-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; font-weight: 600; font-display: swap; src: url("/fonts/kanit-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; font-weight: 800; font-display: swap; src: url("/fonts/kanit-latin-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; font-weight: 400; font-display: swap; src: url("/fonts/kanit-thai-400.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-weight: 600; font-display: swap; src: url("/fonts/kanit-thai-600.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-weight: 800; font-display: swap; src: url("/fonts/kanit-thai-800.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }

:root {
  --bg: #07040f;
  --pink: #ff2bd6;
  --pink-soft: #ff8be6;
  --violet: #8b5cf6;
  --cyan: #22e4ff;
  --cyan-soft: #8ff3ff;
  --gold: #ffe14d;
  --silver: #dfe3ff;
  --bronze: #ff9f5a;
  --mint: #3dffb5;
  --glow: #c77dff;
  --text: #f4ecff;
  --title: #fff0fd;
  --glow-soft: #ffb3f2;
  --glow-deep: #c026d3;
  --surface: #140a2c;
  --lilac: #ddd4fb;
  --muted: #a99bc9;
  --glass: rgba(139, 92, 246, 0.1);
  --glass-hover: rgba(139, 92, 246, 0.18);
  --line: rgba(139, 92, 246, 0.2);
  /* A card: dark violet fading down, inside a pink-violet-cyan edge, with a pink and cyan glow. */
  --card-fill: linear-gradient(160deg, rgba(40, 14, 72, 0.9), rgba(12, 6, 30, 0.92));
  --card-edge: linear-gradient(120deg, var(--pink), var(--violet), var(--cyan));
  --shadow: 0 0 22px rgba(255, 43, 214, 0.2), 0 0 36px rgba(34, 228, 255, 0.12);
  --shadow-hover: 0 0 28px rgba(255, 43, 214, 0.38), 0 0 46px rgba(34, 228, 255, 0.22);
  --bad: #ff3d6e;
  --good: #3dffb5;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font-family: "Kanit", system-ui, "Segoe UI", "Noto Sans Thai", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: clip;
}

/* Kanit has no Japanese, so Japanese pages name Japanese fonts before system-ui: otherwise kanji can
   be drawn with Chinese letter shapes. */
:lang(ja) body, body:lang(ja) { font-family: "Kanit", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif; }

/* The popup's background: a violet light from the top, a pink wash at the bottom and a faint
   grid, all on near-black. It stays put while the page scrolls. */
html { background: var(--bg); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(139, 92, 246, 0.35), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(255, 43, 214, 0.12)),
    repeating-linear-gradient(0deg, rgba(190, 120, 255, 0.06) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(190, 120, 255, 0.035) 0 1px, transparent 1px 22px);
}

header, main, footer {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--cyan-soft); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* The header is one card-like bar. On a wide screen: the name, then the menu across the middle. Below 960px the menu folds under a Menu button that opens a panel. */
header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px 20px;
  width: calc(100% - 48px);
  max-width: 1112px;
  margin: 16px auto 0;
  padding: 8px 10px 8px 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--card-fill) padding-box, var(--card-edge) border-box;
  box-shadow: var(--shadow);
}

/* The name is a neon sign, as in the popup: a white-hot core in layers of pink and violet glow,
   with a faint flicker. Its letters stay as they are. */
.brand { flex: none; font-size: 19px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; color: var(--title); text-decoration: none; text-shadow: 0 0 1px #ffffff, 0 0 4px var(--glow-soft), 0 0 9px var(--pink), 0 0 16px var(--pink), 0 0 26px var(--glow-deep), 0 0 40px var(--violet); animation: neon-flicker 6s linear infinite; }
.brand span { color: var(--pink-soft); }
/* Mostly steady, with two quick dips like a real neon tube. */
@keyframes neon-flicker {
  0%, 18%, 20%, 22%, 61%, 63%, 100% { opacity: 1; }
  19%, 21% { opacity: 0.55; }
  62% { opacity: 0.75; }
}

header nav a { border-radius: 999px; color: var(--lilac); text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s; }
header nav a:hover { color: #ffffff; background: var(--glass-hover); }
/* The page you are on lights up like the popup's chosen tab. */
header nav a[aria-current] { color: #ffffff; background: linear-gradient(160deg, rgba(255, 43, 214, 0.35), rgba(139, 92, 246, 0.3) 55%, rgba(34, 228, 255, 0.25)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 12px rgba(255, 43, 214, 0.45), 0 0 18px rgba(34, 228, 255, 0.2); text-shadow: 0 0 6px rgba(255, 255, 255, 0.8); }
.nav-wide { display: flex; flex: 1; justify-content: center; gap: 2px; min-width: 0; font-size: 15px; }
.nav-wide a { padding: 8px 13px; }

/* The Menu button and its panel (a <details>, so it opens without a script). */
.menu { display: none; flex: none; margin-left: auto; }
.menu summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #ffffff; background: var(--glass); cursor: pointer; list-style: none; user-select: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--glass-hover); }
.menu summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
/* Three lines that turn into a cross while the panel is open. */
.bars, .bars::before, .bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s, background 0.2s; }
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }
.menu[open] .bars { background: transparent; }
.menu[open] .bars::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .bars::after { transform: translateY(-6px) rotate(-45deg); }
.menu[open] summary { background: rgba(139, 92, 246, 0.26); }
.menu nav {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1.5px solid transparent;
  border-radius: 20px;
  /* Solid, so the page behind does not show through the links. */
  background: linear-gradient(160deg, #2a0e48, #0c061e) padding-box, var(--card-edge) border-box;
  box-shadow: var(--shadow);
  font-size: 17px;
}
.menu nav a { padding: 12px 18px; border-radius: 16px; }
/* On a tablet the panel hangs under the button instead of across the whole width. */
@media (min-width: 561px) {
  .menu nav { left: auto; width: 300px; }
}

@media (max-width: 959px) {
  .nav-wide { display: none; }
  .menu { display: block; }
}

main { padding-top: 22px; padding-bottom: 56px; }
h1 { margin: 12px 0 12px; font-size: 42px; line-height: 1.12; font-weight: 800; overflow-wrap: anywhere; }
h2 { margin: 34px 0 12px; font-size: 26px; line-height: 1.2; font-weight: 600; }
p, ul, ol { max-width: 72ch; }
li { margin-bottom: 4px; }
.lead { font-size: 19px; color: var(--lilac); }
.muted { font-size: 15px; color: var(--muted); }
.empty { padding: 18px; border: 1px dashed rgba(139, 92, 246, 0.6); border-radius: 16px; color: var(--lilac); background: var(--glass); }

/* Home: the headline beside who is playing now; stacked on a narrow screen. */
.home-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: 18px; }
.home-top > .hero { flex: 1 1 460px; }
.home-top > #live { flex: 1 1 420px; min-width: 0; }
.home-top > #live:empty { display: none; }
.hero { display: flex; flex-direction: column; justify-content: center; padding: 20px 8px 10px; }
.eyebrow { margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 8px rgba(34, 228, 255, 0.6); }
.hero h1 { margin: 0; font-size: clamp(42px, 7vw, 68px); line-height: 1.02; }
.hero h1 span { color: var(--title); text-shadow: 0 0 1px #ffffff, 0 0 4px var(--glow-soft), 0 0 12px var(--pink), 0 0 24px var(--pink), 0 0 40px var(--glow-deep); }
.hero .lead { margin: 14px 0 22px; max-width: 46ch; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
/* Straight under a page title (how to play): room below, so the pressed-down shadow does not
   touch the first section. */
h1 + .hero-buttons { margin: 4px 0 28px; }

/* Cards, as in the popup: a dark violet block inside a thin pink-violet-cyan edge, glowing softly.
   Cards side by side, panels of lines, tables, sheets of text. */
.cards { display: flex; flex-wrap: wrap; gap: 14px; }
.card, .panel, .table, .sheet, .live, .score-card {
  border: 1.5px solid transparent;
  border-radius: 18px;
  color: var(--text);
  background: var(--card-fill) padding-box, var(--card-edge) border-box;
  box-shadow: var(--shadow);
}
.card { flex: 1 1 340px; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 16px 18px; text-decoration: none; }
.panel { overflow: hidden; }
.panel.more, .cards.periods { margin-top: 14px; }
.sheet { margin: 0 0 16px; padding: 4px 22px 14px; }
.sheet h2 { margin: 14px 0 8px; font-size: 22px; }
.card a, .panel a, .table a, .live a, .score-card a { color: #ffffff; text-decoration: none; }
.card a:hover, .panel a:hover, .table a:hover, .live a:hover, .score-card a:hover, a.card:hover .song-title { text-decoration: underline; }
.sheet a:not(.button) { color: var(--cyan-soft); }

.grow { flex: 1; min-width: 0; }
.right { flex: none; text-align: right; }
.clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name { display: block; font-size: 17px; font-weight: 600; }
.sub { display: block; font-size: 13px; color: var(--muted); }
.score { display: block; font-size: 18px; line-height: 1.25; font-weight: 800; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; padding: 4px 12px; border: 1px solid rgba(34, 228, 255, 0.35); border-radius: 999px; font-size: 13px; color: var(--cyan-soft); background: rgba(34, 228, 255, 0.06); }
.rank { font-size: 18px; line-height: 1; font-weight: 800; }
.num { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Blocks rise into place as the page opens, one after another. */
.home-top, .cards, .panel, .table, .sheet, .score-cards, .empty { animation: rise 0.6s ease-out both; }
.home-top > #live { animation: rise 0.6s 0.1s ease-out both; }
.cards > :nth-child(2), .score-card:nth-child(2) { animation-delay: 0.08s; }
.cards > :nth-child(3), .score-card:nth-child(3) { animation-delay: 0.16s; }
.card, .score-card { animation: rise 0.6s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* "Playing now" has a mint dot with a ring that keeps spreading out: it is live. */
.live-title { display: inline-flex; align-items: center; }
.live-title::before { content: ""; flex: none; width: 10px; height: 10px; margin-right: 12px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(77, 255, 184, 0.6), 0 0 12px var(--mint); } 100% { box-shadow: 0 0 0 12px rgba(77, 255, 184, 0), 0 0 12px var(--mint); } }

/* The top songs: the cover with the rank and plays on it, the title under it. Lifts a little under the pointer. */
/* Never wider than a third of the page would make it: with only one or two songs a card would
   otherwise fill the row, and its 16:9 cover grow taller than the screen. */
.card.song { flex: 1 1 280px; max-width: 400px; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 12px 14px; transition: transform 0.25s, background 0.25s, box-shadow 0.25s; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.song-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px; }
.song-top .rank { font-size: 40px; line-height: 1; }
.card.song:nth-child(3n + 1) .rank { color: var(--pink-soft); text-shadow: 0 0 18px rgba(255, 43, 214, 0.6); }
.card.song:nth-child(3n + 2) .rank { color: #b99bff; text-shadow: 0 0 18px rgba(139, 92, 246, 0.6); }
.card.song:nth-child(3n) .rank { color: var(--cyan-soft); text-shadow: 0 0 18px rgba(34, 228, 255, 0.6); }
/* At most two lines: some YouTube titles are a paragraph long. The full title is on the song's page. */
.song-title { padding: 0 6px; font-size: 18px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* A video's cover picture from YouTube: small in a line, full width on a song card. */
.cover { flex: none; display: block; width: 64px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: rgba(255, 255, 255, 0.1); }
.card > .cover { width: 112px; }
.card.song > .cover { width: 100%; border-radius: 12px; transition: transform 0.4s; }
a.card.song:hover > .cover { transform: scale(1.02); }
.song-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.song-head p { margin: 0; }
.cover-link .cover { width: 240px; border-radius: 14px; box-shadow: var(--shadow); }
/* A song in a table: its cover, then the title, cut short when the column is narrow. */
.cover-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cover-title .cover { width: 48px; border-radius: 7px; }
@media (max-width: 560px) {
  .score-line .cover, .card > .cover, .cover-title .cover, .account-runs .cover { display: none; }
  .card.song > .cover { display: block; }
}

/* A line in a panel: a song with its plays, or someone playing. Lines light up under the pointer. */
.line { display: flex; align-items: center; gap: 12px; margin: 0 6px; padding: 8px 12px; border-radius: 12px; max-width: none; transition: background 0.2s; }
.panel > .line:first-child, .period h3 + .line { margin-top: 6px; }
.panel > .line:last-child { margin-bottom: 6px; }
.line:hover { background: var(--glass-hover); }
.line.quiet { color: var(--muted); }
a.line { color: #ffffff; text-decoration: none; }
a.line:hover .grow { text-decoration: underline; }

/* Most played this week and this month. */
.period { flex: 1 1 300px; min-width: 0; }
.period h3 { margin: 0; padding: 12px 18px 4px; font-size: 18px; font-weight: 600; }
.period h3::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; vertical-align: middle; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.period:nth-child(2) h3::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* Who is playing now, on the home page: its heading links to the "Playing now" page. */
.live-box { height: 100%; padding: 8px 0; }
.live-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding: 6px 18px 8px; font-size: 19px; }
.live-head span { font-size: 15px; color: var(--cyan-soft); }
.panel .live-head:hover span { text-decoration: underline; }
.live-box .line { margin-top: 0; margin-bottom: 0; }

/* The newest scores, as small cards in a grid. */
.score-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 10px; }
.score-card { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; transition: transform 0.2s, box-shadow 0.2s; }
.score-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.score-card .cover { width: 56px; }

/* Grades: a glowing tile, one colour each. */
.grade { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; font-size: 16px; font-weight: 800; color: var(--bg); background: var(--glow); box-shadow: 0 0 18px rgba(199, 125, 255, 0.5); }
td .grade { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
/* The top three places on a board: a round medal with the place in it, a crown over first place,
   and the row faintly lit in the medal's colour from its left edge. */
.medal { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 800; color: var(--bg); }
.medal-1 { background: radial-gradient(circle at 35% 30%, #fff7c2, var(--gold) 60%); box-shadow: 0 0 6px rgba(255, 225, 77, 0.6); }
.medal-2 { background: radial-gradient(circle at 35% 30%, #ffffff, var(--silver) 60%); box-shadow: 0 0 6px rgba(223, 227, 255, 0.5); }
.medal-3 { background: radial-gradient(circle at 35% 30%, #ffd9b8, var(--bronze) 60%); box-shadow: 0 0 6px rgba(255, 159, 90, 0.5); }
.medal-1::before { content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 9px; transform: translateX(-50%); background: var(--gold); clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); filter: drop-shadow(0 0 4px rgba(255, 225, 77, 0.8)); }
td:has(> .medal-1) { overflow: visible; }
tbody tr.top-1 { background: linear-gradient(90deg, rgba(255, 225, 77, 0.16), transparent 60%); }
tbody tr.top-2 { background: linear-gradient(90deg, rgba(223, 227, 255, 0.12), transparent 60%); }
tbody tr.top-3 { background: linear-gradient(90deg, rgba(255, 159, 90, 0.12), transparent 60%); }
tbody tr.top-1 td a { color: #fff7c2; }
tbody tr.top:hover { background-color: var(--glass-hover); }
.grade-S { background: var(--gold); box-shadow: 0 0 18px rgba(255, 225, 77, 0.6); }
.grade-A { background: var(--mint); box-shadow: 0 0 18px rgba(61, 255, 181, 0.5); }
.grade-B { background: #38c8ff; box-shadow: 0 0 18px rgba(56, 200, 255, 0.5); }
.grade-C { background: var(--glow); }
.grade-D { background: var(--bad); box-shadow: 0 0 18px rgba(255, 61, 110, 0.5); }
/* In a table the tile sits in a cell that cuts off anything past its padding (about 9px), so the
   glow there is small enough to fade out inside the cell instead of ending in a hard edge. */
td .grade { box-shadow: 0 0 6px rgba(199, 125, 255, 0.45); }
td .grade-S { box-shadow: 0 0 6px rgba(255, 225, 77, 0.5); }
td .grade-A { box-shadow: 0 0 6px rgba(61, 255, 181, 0.4); }
td .grade-B { box-shadow: 0 0 6px rgba(56, 200, 255, 0.4); }
td .grade-D { box-shadow: 0 0 6px rgba(255, 61, 110, 0.4); }

/* A player's profile picture, round. Without one, the first letter of the name in the same circle. */
.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; font-size: 14px; font-weight: 800; line-height: 1; color: #ffffff; background: linear-gradient(140deg, var(--pink), var(--violet) 55%, var(--cyan)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 8px rgba(255, 43, 214, 0.35); }
img.avatar { background: var(--surface); }
.avatar.big { width: 96px; height: 96px; font-size: 42px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), var(--shadow); }
.player-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-head { display: flex; align-items: center; gap: 20px; margin: 12px 0; }
.player-head h1 { margin: 0; min-width: 0; }

/* Tables never scroll sideways. Every column but the names has a set width (on its heading),
   the names share what is left, and text that does not fit ends in "...". On a narrower screen
   the less important columns go (.hide-l first, then .hide-m, then .hide-s). */
.table { overflow: hidden; }
table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 16px; }
th, td { padding: 9px 10px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-rank { width: 64px; }
.col-score { width: 108px; }
.col-grade { width: 76px; }
.col-stat { width: 92px; }
.col-combo { width: 108px; }
.col-date { width: 124px; }
.col-mode { width: 136px; }
.col-player { width: 30%; }
th:first-child, td:first-child { padding-left: 18px; }
th:last-child, td:last-child { padding-right: 18px; }
th { padding-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
tbody tr + tr td { border-top: 1px solid var(--line); }
tbody tr { transition: background 0.2s; }
tbody tr:hover { background: var(--glass-hover); }
td a { font-weight: 600; }
td.num, th.num { text-align: right; font-size: 16px; font-weight: 400; }
td.num { font-weight: 600; }
/* A heading over numbers reads like the other headings, so it fits its column. */
th.num { font-size: 12px; font-weight: 600; }
/* Places sit in the middle of their column, so a medal and a plain number line up on one centre.
   The same padding on both sides, at every width, keeps that centre true (and leaves the 30px
   medal room even in the narrow column on a phone). */
table th.col-rank, table td.rank { padding-left: 8px; padding-right: 8px; text-align: center; }
@media (max-width: 1080px) {
  .hide-l { display: none; }
}
@media (max-width: 860px) {
  .hide-m { display: none; }
}
@media (max-width: 560px) {
  .hide-s { display: none; }
  th, td { padding: 10px 6px; }
  th:first-child, td:first-child { padding-left: 14px; }
  th:last-child, td:last-child { padding-right: 14px; }
  .col-rank { width: 46px; }
  .col-score { width: 92px; }
  .col-grade { width: 62px; }
  .col-mode { width: 108px; }
}

/* Buttons: the popup's chunky neon buttons, which press down. The main one is the mint of its
   Start button; quiet ones are its soft violet button, danger ones its red Stop button. */
.button {
  display: inline-block;
  padding: 12px 24px 11px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: 800;
  letter-spacing: 1px;
  color: #031a14;
  background: linear-gradient(180deg, #8bffd8, var(--mint));
  box-shadow: 0 5px 0 #0f9a6a, 0 0 18px rgba(61, 255, 181, 0.55);
  text-decoration: none;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.15s ease;
}
.button:hover { filter: brightness(1.12); }
.button:active { transform: translateY(4px); box-shadow: 0 1px 0 #0f9a6a, 0 0 26px rgba(61, 255, 181, 0.8); }
.button.quiet { color: var(--text); background: linear-gradient(180deg, #3b2766, #2a1a4d); box-shadow: 0 4px 0 #160c2c, 0 0 12px rgba(139, 92, 246, 0.35); }
.button.quiet:active { box-shadow: 0 1px 0 #160c2c; }
.button.danger { color: #2a0010; background: linear-gradient(180deg, #ff8fb0, var(--bad)); box-shadow: 0 5px 0 #a3123b, 0 0 18px rgba(255, 61, 110, 0.5); }
.button.danger:active { box-shadow: 0 1px 0 #a3123b, 0 0 26px rgba(255, 61, 110, 0.75); }

form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
form label { font-weight: 600; }
form .muted { flex-basis: 100%; margin: 0; }
input[type="text"] {
  width: 240px;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(139, 92, 246, 0.6);
  border-radius: 10px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  box-shadow: inset 0 0 10px rgba(139, 92, 246, 0.25);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="text"]:focus { border-color: var(--cyan); box-shadow: 0 0 10px rgba(34, 228, 255, 0.4); }
.message { min-height: 1.5em; font-weight: 600; color: var(--good); }
/* An error is a solid red block, so it cannot be missed. */
.message.bad { padding: 10px 16px; border-radius: 12px; color: #ffffff; background: #c0123c; box-shadow: 0 0 22px rgba(255, 61, 110, 0.5); }
.danger-zone { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }

/* The Account page. Signed out: the Google button alone, in the middle of its box. */
.signin { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0 14px; text-align: center; }
.signin .message { margin: 0; }
/* An empty message takes no room, so nothing pushes the button off centre or leaves a gap. */
#account .message:empty { display: none; }
/* Signed in: who you are, your totals as tiles, your latest runs, then the settings. */
.profile-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 16px 0 14px; }
.profile-name { margin: 0; font-size: 28px; font-weight: 800; overflow-wrap: anywhere; }
.profile-head .muted { margin: 0; }
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; }
.stat-tile { padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); }
.stat-tile .num { display: block; font-size: 26px; line-height: 1.2; }
.account-runs { margin: 0 -16px; }
.account-runs .line { margin: 0; }
.sheet .account-runs a { color: #ffffff; text-decoration: none; }
.sheet .account-runs a:hover { text-decoration: underline; }
.account-runs .grade { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
/* The box that selects a run for removal, and the button under the list. */
.run-pick { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--pink); cursor: pointer; }
.remove-runs { margin-top: 12px; }
.remove-runs .muted { margin: 8px 0 0; }
.button:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.avatar-form p { max-width: none; }
.avatar-form label { display: block; margin-top: 8px; font-weight: 600; }
#account h2 { margin: 26px 0 8px; font-size: 22px; }

footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; padding-top: 12px; padding-bottom: 28px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
footer a { padding: 11px 0; }
footer p { margin: 0 0 0 auto; padding: 11px 0; }
/* The language switch, beside the Privacy link. */
/* Like the popup's language switch: a gradient edge, and the chosen language a glowing pink pill. */
.langs { flex: none; display: flex; gap: 4px; padding: 3px; border: 1.5px solid transparent; border-radius: 999px; font-size: 14px; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--card-edge) border-box; box-shadow: 0 0 10px rgba(255, 43, 214, 0.35), 0 0 16px rgba(34, 228, 255, 0.2), inset 0 0 8px rgba(139, 92, 246, 0.35); }
.langs a, .langs b { display: block; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.langs a { color: var(--lilac); text-decoration: none; }
.langs a:hover { color: #ffffff; }
.langs b { font-weight: 600; color: #ffffff; background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 0 10px var(--pink), inset 0 1px 0 rgba(255, 255, 255, 0.45); text-shadow: 0 0 6px rgba(255, 255, 255, 0.9); }

/* Who is playing a song right now, above its boards. */
.live { padding: 12px 18px; max-width: none; }
.live .muted { color: var(--muted); }
.live .button.quiet { margin-left: 12px; padding: 5px 12px 4px; font-size: 13px; }
p.live-title { font-size: 20px; font-weight: 800; }
/* Previous and next under a table that runs over several pages. */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 20px; font-weight: 600; }
/* The link to the "Top songs" page at the bottom of the home page. */
.see-more { margin: 28px 0 0; text-align: center; max-width: none; }

/* On a phone the bar is tighter and the Menu button shows only its lines. */
@media (max-width: 560px) {
  header, main, footer { padding-left: 16px; padding-right: 16px; }
  header { width: calc(100% - 32px); margin-top: 12px; gap: 8px; padding: 8px 8px 8px 16px; }
  .brand { font-size: 16px; }
  /* Hidden from sight only: screen readers still read the word Menu. */
  .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .menu summary { gap: 0; padding: 0 13px; }
  h1 { font-size: 32px; }
  h2 { margin-top: 28px; font-size: 22px; }
  .hero { padding-top: 8px; }
  .card { padding: 14px; }
  .line { margin: 0 4px; padding: 8px; gap: 10px; }
  .score-card .cover { display: none; }
  /* Two tiles side by side, the play time (the longest) across the row under them. */
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-tile:last-child { grid-column: span 2; }
  .stat-tile { padding: 10px; }
  .stat-tile .num { font-size: 20px; }
  .avatar.big { width: 72px; height: 72px; font-size: 32px; }
  td .avatar { width: 24px; height: 24px; font-size: 12px; }
  /* The top three songs: the cover beside the rank and title, so all three fit on one screen. */
  .card.song { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 6px 14px; padding: 12px; max-width: none; }
  .card.song > .cover { grid-row: span 2; border-radius: 12px; }
  .song-top { padding: 0; }
  .song-top .rank { font-size: 30px; }
  .song-top .pill { padding: 2px 8px; font-size: 12px; }
  .song-title { padding: 0; font-size: 16px; }
  footer p { margin-left: 0; }
}

/* Anyone who asked their system for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:active, a.card:hover, .score-card:hover, a.card.song:hover > .cover { transform: none; }
}