/* Arcade results, personal records and collectible cards. */
.result-page,
.records-page,
.collection-page {
  color: var(--text-light);
}

.records-page .page-heading,
.collection-page .page-heading {
  padding: 30px 34px;
  border: 1px solid #285272;
  border-radius: 21px;
  background: radial-gradient(ellipse at 95% 15%, #07578c66, transparent 58%), linear-gradient(135deg, #0d3454, #061c35);
  box-shadow: inset 0 1px 0 #ffffff13, 0 12px 30px #00000020;
}

.records-page .page-heading h1,
.collection-page .page-heading h1 {
  font-size: clamp(32px, 4vw, 47px);
  letter-spacing: -.055em;
  text-shadow: 0 3px 0 #00000033;
}

.records-page .page-heading .eyebrow,
.collection-page .page-heading .eyebrow {
  color: var(--yellow);
}

.records-page .page-heading p,
.collection-page .page-heading p {
  color: #c0d5e7;
}

.records-page .heading-doodle {
  border: 2px solid #ffe671;
  background: linear-gradient(145deg, #fff49c, #ffd02b 46%, #e99a04);
  color: #794504;
  box-shadow: inset 0 2px 0 #fffbc9, 0 5px 0 #95620a, 0 12px 20px #0000004d;
}

.records-page .source-tabs {
  background: #04182b;
  border-color: #224a68;
  padding: 5px;
  border-radius: 13px;
}

.records-page .source-tabs button {
  color: #b7cce0;
  min-height: 39px;
  border-radius: 9px;
}

.records-page .source-tabs button.active {
  color: var(--arc-ink);
  background: #fffefa;
  border-color: #fff;
  box-shadow: 0 2px 4px #00000030;
}

.records-page .profile-stats { gap: 16px; }

.records-page .profile-stats > div {
  background: linear-gradient(150deg, #fff, #eef4f9);
  color: var(--arc-ink);
  border: 1px solid #e1ecf5;
  border-top: 5px solid var(--arc-blue);
  box-shadow: 0 5px 0 #020d1e, 0 12px 23px #00000026;
  border-radius: 14px;
  padding: 24px;
}

.records-page .profile-stats > .yellow { border-top-color: #ffc926; }
.records-page .profile-stats > .blue { border-top-color: #087af6; }
.records-page .profile-stats > .green { border-top-color: #00b984; }
.records-page .profile-stats > div > span { color: #52667c; }
.records-page .profile-stats strong { font-size: 49px; }
.records-page .profile-stats > div > .icon { opacity: .23; color: #125a9c; }
.records-page .profile-stats > .yellow > .icon { color: #bd7d00; opacity: .5; }
.records-page .profile-stats > .green > .icon { color: #07805f; opacity: .45; }
.records-page .records-section h2,
.records-page .history-section h2 { font-size: 26px; }

.records-page .filter-pills button {
  background: #0b2c49;
  color: #c7d9e8;
  border-color: #2e526d;
  min-height: 34px;
  border-radius: 8px;
}

.records-page .filter-pills button.active {
  background: var(--yellow);
  color: #17222a;
  border-color: #ffe987;
  box-shadow: 0 2px 0 #b18400;
}

.records-page .table-wrap {
  border-color: #eff7ff;
  border-radius: 15px;
  box-shadow: 0 5px 0 #020e20;
  background: #fffefa;
}

.records-page .records-table th { background: #e9f0f7; color: #526a7f; }
.records-page .records-table td { color: #566b7e; border-color: #e3eaf1; }
.records-page .records-table tbody tr:first-child { background: #fff4b8; }
.records-page .records-table td strong,
.records-page .table-route b { color: var(--arc-ink); }
.records-page .table-route > span { color: #586b7d; }
.records-page .table-medal { background: #edf3f8; border-color: #ccdae6; color: #4d6b84; }
.records-page .table-medal.yellow {
  color: #875005;
  background: linear-gradient(135deg, #fff59e, #ffc529);
  border-color: #ddb02f;
  box-shadow: 0 2px 0 #dca42b;
}

.records-page .empty-state {
  color: var(--text-light);
  background: radial-gradient(ellipse at top, #10436766, transparent 70%), #08233d;
  border: 1px solid #2b516e;
  border-radius: 17px;
  padding-block: 44px;
}

.records-page .empty-state p { color: #b6ccdf; }
.records-page .empty-icon {
  background: linear-gradient(140deg, #117eea, #034eac);
  border-color: #65baff;
  box-shadow: 0 4px 0 #023a77;
}
.records-page .empty-icon .icon { color: #fff; }
.records-page .empty-state .button-dark {
  background: linear-gradient(#ffeb58, #ffd125);
  color: #18212c;
  border-color: #ffec82;
  box-shadow: 0 4px 0 #b68604;
}

.records-page .history-list {
  background: #082743;
  border-color: #244a68;
  border-radius: 15px;
}
.records-page .history-item { border-color: #21445e; }
.records-page .history-title b { color: #f4f8fc; }
.records-page .history-title b > span { color: #7e9bb4; }
.records-page .history-title small,
.records-page .history-score { color: #b3c9dc; }
.records-page .history-score b { color: #fff; }
.records-page .history-icon { color: #152b3d; border-color: #ffffff35; box-shadow: inset 0 1px 0 #ffffff4d; }
.records-page .status-badge { color: #c0cddd; background: #17364f; border-color: #3a5871; }
.records-page .status-badge.success { color: #8bf5c0; background: #07543f; border-color: #148364; }
.records-page .history-section .muted,
.records-page .privacy-note { color: #9fb9ce; }

/* A celebratory burst remains visible after the short confetti entrance. */
.result-page { max-width: 960px; padding-top: 32px; }
.result-page .result-top {
  padding: 26px 26px 30px;
  border-radius: 26px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 31%, #0f64a473, transparent 61%), linear-gradient(145deg, #073858, #061b36 70%);
  border: 1px solid #2b5572;
  box-shadow: inset 0 1px 0 #ffffff13, 0 10px 30px #00000026;
}
.result-page:has(.result-medal.won) .result-top::before {
  content: '';
  position: absolute;
  inset: -180px -140px -280px;
  z-index: -1;
  background: repeating-conic-gradient(from 3deg at 50% 39%, #0288d93b 0deg 8deg, transparent 8deg 22deg, #ffd5211a 22deg 29deg, transparent 29deg 45deg);
  pointer-events: none;
}
.result-page .result-top > .source-chip {
  background: #04192ddd;
  color: #d4e6f6;
  border-color: #365970;
  margin-bottom: 22px;
}
.result-page .result-medal {
  width: 132px;
  height: 132px;
  margin-bottom: 24px;
  background: radial-gradient(circle at 32% 24%, #fff5a8, #ffd333 49%, #e89c09 90%);
  color: #a15905;
  border: 4px solid #ffe677;
  box-shadow: inset 0 2px 0 #fffbc5, inset 0 -6px 0 #d48c08, 0 5px 0 #945910, 0 16px 28px #00000055, 0 0 50px #ffcd3133;
  transform: rotate(-6deg);
}
.result-page .result-medal > .icon { width: 83px; height: 83px; stroke-width: 1.75; filter: drop-shadow(0 2px 0 #fff094); }
.result-page .result-medal.lost {
  color: #fff;
  background: linear-gradient(135deg, #22a6ff, #0568d9);
  border-color: #6ec5ff;
  box-shadow: inset 0 2px 0 #b0e6ff, 0 5px 0 #014f9c, 0 16px 28px #00000044;
}
.result-page .result-medal.lost > .icon { filter: none; }
.result-page .result-top > .eyebrow { color: #ffdd49; }
.result-page .result-top h1 {
  font-size: clamp(38px, 5.8vw, 64px);
  color: #fff;
  letter-spacing: -.055em;
  text-shadow: 0 4px 0 #021024, 2px 0 0 #021024, -2px 0 0 #021024;
}
.result-page .result-top p { color: #c1d8e9; line-height: 1.8; }
.result-page .result-top p b { color: #fff; }
.result-page .result-stats { gap: 15px; margin-top: 24px; }
.result-page .result-stat {
  border: 1px solid #ffffff77;
  border-radius: 15px;
  padding: 20px 18px;
  box-shadow: inset 0 2px 0 #ffffff38, 0 5px 0 #013e33, 0 12px 24px #00000024;
}
.result-page .result-stat.blue { color: #fff; background: linear-gradient(145deg, #06bf89, #009464); }
.result-page .result-stat.yellow { color: #182827; background: linear-gradient(145deg, #ffed66, #ffd229); box-shadow: inset 0 2px 0 #fffab8, 0 5px 0 #a47e05, 0 12px 24px #00000024; }
.result-page .result-stat span { letter-spacing: .08em; }
.result-page .personal-best { color: #85e8b5; }
.result-page .optimal-note { color: #c0d5e8; }
.result-page .optimal-note > span { color: #93afc7; }
.result-page .result-route {
  background: #fffdf6;
  color: var(--arc-ink);
  border-color: #fff;
  box-shadow: 0 5px 0 #020e21, 0 10px 20px #00000020;
  border-radius: 17px;
}
.result-page .result-route .route-heading > span { color: #637485; }
.result-page .path-card {
  background: #eaf1f7;
  color: #18334d;
  border: 1px solid #c1d3e2;
  box-shadow: 0 3px 0 #b0c4d5;
  border-radius: 10px;
}
.result-page .path-card.blue { background: linear-gradient(145deg, #168cfc, #0063d6); color: #fff; border-color: #79beff; box-shadow: 0 3px 0 #054698; }
.result-page .path-card.green { background: linear-gradient(145deg, #09b981, #008453); color: #fff; border-color: #5be1b0; box-shadow: 0 3px 0 #00633f; }
.result-page .path-card small { color: #667f93; }
.result-page .path-card.blue small,
.result-page .path-card.green small { color: #e4f4ff; }
.result-page .path-cards li > .icon { color: #7b8e9e; }
.result-page .unlock-banner { background: #123754; border-color: #426d88; color: #fff; box-shadow: 0 3px 0 #020f21; }
.result-page .unlock-banner small { color: #ffdc50; }
.result-page .unlock-icon { color: #273432; border-color: #ffe98c; box-shadow: 0 2px 0 #020e22; }
.result-page .result-actions .button-primary {
  background: linear-gradient(#ffed65, #ffd32a);
  color: #1d2324;
  border-color: #fff39c;
  box-shadow: 0 4px 0 #ae8504, 0 9px 20px #00000030;
}
.result-page .result-actions .button-outline { background: linear-gradient(#1185f9, #0666dd); color: #fff; border-color: #62a9f7; box-shadow: 0 4px 0 #013c91; }
.result-page .result-home,
.result-page .result-storage-note { color: #abc4da; }
.result-page .result-confetti { z-index: 2; height: 480px; }
.result-page .confetti { background: #ff4257; }
.result-page .confetti:nth-child(4n) { background: #0ac291; }
.result-page .confetti:nth-child(4n + 1) { background: #29a3ff; }
.result-page .confetti:nth-child(4n + 2) { background: #ffdd31; }

/* Foil-like illustrations use the existing achievement SVGs. */
.collection-page .collection-count {
  background: #041b31;
  border: 1px solid #3b5e76;
  border-radius: 15px;
  padding: 20px 24px;
  box-shadow: inset 0 2px 5px #00000028;
}
.collection-page .collection-count strong { color: var(--yellow); }
.collection-page .collection-count strong > span { color: #9db9cf; }
.collection-page .collection-count small { color: #bcd0e1; }
.collection-page .collection-grid { gap: 30px; }
.collection-page .collection-item {
  background: linear-gradient(160deg, #0c3050, #061c34);
  border: 1px solid #274960;
  border-radius: 21px;
  padding: 23px 22px 22px;
  box-shadow: inset 0 1px 0 #ffffff0a, 0 10px 24px #00000020;
}
.collection-page .collectible {
  --foil-a: #ffc61f;
  --foil-b: #ec9002;
  --foil-ink: #784200;
  color: #fff;
  height: 298px;
  padding: 19px;
  background: radial-gradient(circle at 23% 15%, #ffffffad, transparent 32%), linear-gradient(145deg, var(--foil-a), var(--foil-b));
  border: 2px solid #ffeb9e;
  border-radius: 15px;
  box-shadow: inset 0 0 0 4px #ffffff33, inset 0 0 0 5px #ffffff45, 0 5px 0 #040f24, 0 10px 24px #00000050;
}
.collection-page .collectible.green { --foil-a: #12dbaa; --foil-b: #057747; --foil-ink: #006646; border-color: #83ffd0; }
.collection-page .collectible.coral { --foil-a: #ff5a86; --foil-b: #bd0841; --foil-ink: #a80a3b; border-color: #ffa3bf; }
.collection-page .collectible.blue { --foil-a: #259dff; --foil-b: #233ec5; --foil-ink: #103395; border-color: #86c5ff; }
.collection-page .collectible.orange { --foil-a: #ffb94b; --foil-b: #e75004; --foil-ink: #a93d00; border-color: #ffd78b; }
.collection-page .collectible.lilac { --foil-a: #ba79ff; --foil-b: #5922bc; --foil-ink: #4c188f; border-color: #d9b4ff; }
.collection-page .collectible::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid #ffffff66;
  border-radius: 8px;
  pointer-events: none;
}
.collection-page .collectible::after {
  inset: -20px -100px;
  border: none;
  border-radius: 0;
  transform: rotate(-28deg);
  background: repeating-linear-gradient(90deg, transparent 0 30px, #ffffff12 30px 44px, transparent 44px 78px), radial-gradient(circle at 50% 35%, #fff9 0 1px, transparent 2px);
}
.collection-page .collectible-top { color: #fff; text-shadow: 0 1px 2px #0006; }
.collection-page .collectible-art { position: relative; min-height: 124px; }
.collection-page .collectible-art::before {
  content: '';
  position: absolute;
  width: 122px;
  height: 122px;
  border: 1px solid #ffffff62;
  background: radial-gradient(circle at 32% 23%, #ffffffa1, #ffffff21 62%, #ffffff40);
  border-radius: 50%;
  box-shadow: 0 7px 20px #00000020, inset 0 1px 0 #ffffffb3;
}
.collection-page .collectible-art .icon {
  width: 81px;
  height: 81px;
  position: relative;
  stroke-width: 1.8;
  filter: drop-shadow(0 3px 0 var(--foil-ink)) drop-shadow(0 5px 6px #00000040);
}
.collection-page .collectible-name { font-size: 28px; text-shadow: 0 2px 0 var(--foil-ink), 0 3px 8px #00000030; }
.collection-page .collectible-bottom { border-top-color: #ffffff70; text-shadow: 0 1px 2px #0008; letter-spacing: .025em; }
.collection-page .locked .collectible { filter: saturate(.7); opacity: .8; box-shadow: inset 0 0 0 4px #ffffff21, 0 5px 0 #040f24, 0 10px 24px #00000030; }
.collection-page .locked .collectible-art { opacity: .65; }
.collection-page .collection-detail h2 { color: #fff; }
.collection-page .collection-detail p { color: #b5cbe0; font-size: 12px; }
.collection-page .collection-detail .button { min-width: 150px; border-radius: 9px; }
.collection-page .collection-detail .button-dark { color: #112e32; background: #ffda2d; border-color: #ffe47c; box-shadow: 0 3px 0 #a37b03; }
.collection-page .collection-detail .button-outline { color: #fff; background: #0876ed; border-color: #5baaff; box-shadow: 0 3px 0 #02438f; }
.collection-page .collection-detail .button:disabled { opacity: 1; color: #95afc4; background: #132e46; border-color: #35516b; box-shadow: none; }
.collection-page .collection-note { background: #092740; color: #e8f3fc; border-color: #30536c; }
.collection-page .collection-note > .icon { color: #ffde46; }
.collection-page .collection-note p { color: #b3cbe0; }

@media (max-width: 800px) {
  .records-page .page-heading,
  .collection-page .page-heading { padding: 25px; }
  .collection-page .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .collection-page .collection-item { padding: 17px 15px 20px; }
  .collection-page .collectible { height: 262px; padding: 17px; }
  .collection-page .collectible-name { font-size: 25px; }
  .collection-page .collectible-art::before { width: 108px; height: 108px; }
  .collection-page .collectible-art .icon { width: 72px; height: 72px; }
}

@media (max-width: 660px) {
  .records-page,
  .collection-page { padding-top: 24px; }
  .records-page .page-heading,
  .collection-page .page-heading { padding: 22px 19px; border-radius: 17px; }
  .records-page .page-heading h1,
  .collection-page .page-heading h1 { font-size: 33px; }
  .records-page .page-heading p,
  .collection-page .page-heading p { font-size: 12px; }
  .records-page .profile-stats { gap: 13px; }
  .records-page .profile-stats > div { padding: 18px 16px; border-top-width: 4px; }
  .records-page .profile-stats strong { font-size: 42px; }
  .records-page .profile-stats > div > .icon { right: 14px; bottom: 20px; width: 25px; height: 25px; }
  .records-page .source-tabs button { min-height: 42px; }
  .records-page .empty-state { padding: 30px 20px; }
  .records-page .empty-state h3 { font-size: 23px; }
  .result-page { padding-top: 20px; }
  .result-page .result-top { padding: 22px 17px 25px; border-radius: 20px; }
  .result-page .result-top > .source-chip { font-size: 8px; margin-bottom: 23px; }
  .result-page .result-top h1 { font-size: clamp(31px, 9vw, 42px); }
  .result-page .result-top > .eyebrow { font-size: 7px; letter-spacing: .04em; }
  .result-page .result-medal { width: 114px; height: 114px; }
  .result-page .result-medal > .icon { width: 71px; height: 71px; }
  .result-page .result-stats { gap: 12px; margin-top: 20px; }
  .result-page .result-stat { padding: 18px 10px; gap: 10px; }
  .result-page .result-stat strong { font-size: 36px; }
  .result-page .result-stat span { font-size: 7px; }
  .result-page .result-route { padding: 19px 15px; }
  .result-page .result-actions { gap: 15px; }
  .result-page .result-storage-note { font-size: 9px; }
  .collection-page .collection-count { padding: 14px 16px; width: 100%; border-radius: 10px; }
  .collection-page .collection-grid { gap: 19px 12px; }
  .collection-page .collection-item { padding: 10px 9px 15px; border-radius: 14px; }
  .collection-page .collectible { height: 222px; border-radius: 10px; padding: 12px; }
  .collection-page .collectible::before { inset: 5px; border-radius: 5px; }
  .collection-page .collectible-art { min-height: 96px; }
  .collection-page .collectible-art::before { width: 83px; height: 83px; }
  .collection-page .collectible-art .icon { width: 55px; height: 55px; }
  .collection-page .collectible-name { font-size: 21px; line-height: 1.1; margin-bottom: 14px; overflow-wrap: anywhere; }
  .collection-page .collectible-bottom { font-size: 5px; }
  .collection-page .collection-detail { padding-top: 17px; }
  .collection-page .collection-detail h2 { font-size: 16px; }
  .collection-page .collection-detail p { font-size: 10px; min-height: 36px; line-height: 1.65; padding-inline: 2px; }
  .collection-page .collection-detail .button { min-width: 0; width: 100%; font-size: 9px; min-height: 38px; padding-inline: 5px; }
  .collection-page .collection-detail .button .icon { width: 12px; height: 12px; }
  .collection-page .collection-note { padding: 18px; }
}

@media (max-width: 359px) {
  .collection-page .collection-grid { grid-template-columns: 1fr; }
  .collection-page .collection-item { padding: 18px; }
  .collection-page .collectible { width: 210px; height: 275px; padding: 18px; }
  .collection-page .collectible-art::before { width: 114px; height: 114px; }
  .collection-page .collectible-art .icon { width: 72px; height: 72px; }
  .collection-page .collectible-top { font-size: 7px; }
  .collection-page .collectible-bottom { font-size: 6px; }
  .collection-page .collection-detail p { min-height: 0; }
  .result-page .result-stat { gap: 6px; }
  .result-page .result-stat strong { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .collection-page .collectible { transition: none; }
  .collection-page .collection-item:not(.locked):hover .collectible { transform: none; }
}
/* The advertising preview belongs only to completed-game results. */
.between-games-ad{margin:36px auto 40px;max-width:730px;padding:18px 24px;border:1px solid #3b5974;border-radius:16px;background:#071e34;text-align:left;position:relative;z-index:1}
.between-games-ad-label{display:flex;justify-content:space-between;gap:16px;color:#b4c9dc;font-size:10px;font-weight:700;letter-spacing:.1em;line-height:1.5}
.between-games-ad-label>span:last-child{color:#ffdf61;letter-spacing:.04em}
.between-games-ad-body{display:flex;align-items:center;gap:20px;padding:24px 0 18px}
.between-games-ad-art{display:grid;place-items:center;flex-shrink:0;width:60px;height:60px;border-radius:15px;background:#163c5b;color:#8ad6ff;transform:rotate(-6deg)}
.between-games-ad-art>.icon{width:35px;height:35px}
.between-games-ad-body strong{display:block;color:#f5f9ff;font-size:22px;font-family:'Trebuchet MS',Arial,sans-serif;line-height:1.25}
.between-games-ad-body p{margin:8px 0 0;color:#c0d2e2;font-size:13px;line-height:1.6}
.between-games-ad-note{margin:0;color:#9cb7d0;font-size:11px;line-height:1.5}
@media(max-width:600px){
  .between-games-ad{margin:28px 0 32px;padding:16px;border-radius:13px}
  .between-games-ad-label{font-size:9px;gap:8px}
  .between-games-ad-body{gap:13px;padding:22px 0 16px}
  .between-games-ad-art{width:43px;height:48px;border-radius:11px}
  .between-games-ad-art>.icon{width:28px;height:28px}
  .between-games-ad-body strong{font-size:18px}
  .between-games-ad-body p{font-size:12px}
  .between-games-ad-note{font-size:10px}
}

/* Phone results and records keep scores, route names and controls legible. */
@media (max-width: 660px) {
  .result-page .result-top { overflow-wrap: anywhere; }
  .result-page .result-top > .source-chip { font-size: 11px; line-height: 1.5; }
  .result-page .result-top > .eyebrow { font-size: 11px; line-height: 1.5; letter-spacing: .03em; }
  .result-page .result-top p { font-size: 14px; line-height: 1.65; }
  .result-page .result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-page .result-stat { flex-direction: column; min-width: 0; gap: 10px; padding: 17px 10px; }
  .result-page .result-stat > div { min-width: 0; max-width: 100%; }
  .result-page .result-stat strong { font-size: clamp(27px, 7.5vw, 36px); overflow-wrap: anywhere; }
  .result-page .result-stat span { font-size: 11px; line-height: 1.4; letter-spacing: .03em; text-align: center; }
  .result-page .personal-best,
  .result-page .optimal-note { font-size: 12px; line-height: 1.6; }
  .result-page .optimal-note { flex-wrap: wrap; }
  .result-page .result-route { min-width: 0; }
  .result-page .route-heading { flex-wrap: wrap; gap: 6px 12px; }
  .result-page .route-heading h2 { font-size: 16px; line-height: 1.4; }
  .result-page .route-heading > span { font-size: 12px; }
  .result-page .path-cards { max-width: 100%; overscroll-behavior-inline: contain; }
  .result-page .path-cards li { min-width: 158px; }
  .result-page .path-card { min-width: 124px; min-height: 94px; }
  .result-page .path-card small { font-size: 11px; letter-spacing: .03em; }
  .result-page .path-card b { font-size: 13px; line-height: 1.5; }
  .result-page .unlock-banner { min-width: 0; }
  .result-page .unlock-banner > span:nth-child(2) { min-width: 0; }
  .result-page .unlock-banner small { font-size: 11px; line-height: 1.4; letter-spacing: .03em; }
  .result-page .unlock-icon,
  .result-page .unlock-banner > .icon { flex-shrink: 0; }
  .result-page .result-home { min-height: 44px; max-width: 100%; font-size: 14px; }
  .result-page .result-storage-note { font-size: 12px; line-height: 1.6; }
  .result-page .result-storage-note > .icon { flex-shrink: 0; }
  .between-games-ad-label { font-size: 11px; flex-wrap: wrap; letter-spacing: .04em; }
  .between-games-ad-body { align-items: flex-start; }
  .between-games-ad-body > div { min-width: 0; }
  .between-games-ad-note { font-size: 12px; line-height: 1.6; }

  .records-page .page-heading .eyebrow,
  .collection-page .page-heading .eyebrow { font-size: 11px; letter-spacing: .04em; line-height: 1.5; }
  .records-page .page-heading p,
  .collection-page .page-heading p { font-size: 14px; line-height: 1.65; }
  .records-page .source-tabs { width: 100%; }
  .records-page .source-tabs button { min-width: 0; min-height: 48px; font-size: 12px; padding: 9px 6px; gap: 5px; line-height: 1.4; }
  .records-page .source-tabs button > .icon { flex-shrink: 0; }
  .records-page .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .records-page .profile-stats > div { min-width: 0; padding: 16px 13px; }
  .records-page .profile-stats > div > span { font-size: 11px; letter-spacing: .02em; line-height: 1.4; }
  .records-page .profile-stats strong { font-size: 34px; overflow-wrap: anywhere; }
  .records-page .profile-stats strong > small { font-size: 13px; }
  .records-page .profile-stats > div > .icon { width: 21px; height: 21px; right: 10px; bottom: 16px; opacity: .15; }
  .records-page .filter-pills { flex-wrap: wrap; }
  .records-page .filter-pills button { min-height: 44px; font-size: 12px; padding: 10px 12px; line-height: 1.4; }
  .records-page .empty-state p { font-size: 14px; line-height: 1.65; }
  .records-page .empty-state .button { font-size: 13px; min-height: 48px; max-width: 100%; }
  .records-page .table-wrap { max-width: 100%; overflow-x: auto; }
  .records-page .records-table { table-layout: fixed; }
  .records-page .records-table th { padding: 12px 7px; font-size: 11px; letter-spacing: 0; overflow-wrap: anywhere; }
  .records-page .records-table th:first-child { width: 55%; }
  .records-page .records-table td { padding: 14px 7px; font-size: 12px; overflow-wrap: anywhere; }
  .records-page .records-table td:first-child { gap: 7px; }
  .records-page .table-medal { display: none; }
  .records-page .table-route { min-width: 0; }
  .records-page .table-route b { font-size: 13px; line-height: 1.4; }
  .records-page .table-route > span { font-size: 12px; line-height: 1.5; }
  .records-page .history-item { display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: start; gap: 8px 10px; }
  .records-page .history-title { min-width: 0; }
  .records-page .history-title b { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
  .records-page .history-title small { font-size: 11px; line-height: 1.5; }
  .records-page .history-score { grid-column: 2; display: flex; align-items: baseline; gap: 12px; font-size: 12px; text-align: left; white-space: normal; }
  .records-page .history-score b { font-size: 14px; margin: 0; }
  .records-page .history-section .muted,
  .records-page .privacy-note { font-size: 12px; line-height: 1.6; }
  .records-page .privacy-note > .icon { flex-shrink: 0; }

  .collection-page .collection-count { white-space: normal; }
  .collection-page .collection-count small { font-size: 11px; line-height: 1.5; letter-spacing: .04em; max-width: none; }
  .collection-page .collectible { height: auto; min-height: 242px; }
  .collection-page .collectible-top { font-size: 11px; letter-spacing: .02em; gap: 5px; }
  .collection-page .collectible-top .icon { flex-shrink: 0; }
  .collection-page .collectible-bottom { font-size: 11px; line-height: 1.4; letter-spacing: 0; flex-wrap: wrap; gap: 3px 8px; }
  .collection-page .collection-detail p { font-size: 12px; line-height: 1.6; min-height: 0; }
  .collection-page .collection-detail .button { min-height: 48px; font-size: 12px; padding: 10px 7px; line-height: 1.4; }
  .collection-page .collection-detail .button .icon { flex-shrink: 0; width: 15px; height: 15px; }
  .collection-page .collection-note { align-items: flex-start; }
  .collection-page .collection-note > .icon { flex-shrink: 0; }
  .collection-page .collection-note strong { font-size: 14px; }
  .collection-page .collection-note p { font-size: 13px; line-height: 1.65; }
}

/* A single card column leaves room for readable labels on narrower phones. */
@media (max-width: 390px) {
  .collection-page .collection-grid { grid-template-columns: minmax(0, 1fr); }
  .collection-page .collection-item { padding: 18px; }
  .collection-page .collectible { width: min(240px, 100%); min-height: 278px; padding: 18px; }
  .collection-page .collectible-art { min-height: 114px; }
  .collection-page .collectible-art::before { width: 108px; height: 108px; }
  .collection-page .collectible-art .icon { width: 70px; height: 70px; }
  .collection-page .collectible-name { font-size: 25px; }
}