.game-records-view {
  --records-cyan: #54e4ff;
  --records-pink: #ff64c6;
  --records-gold: #ffd66d;
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 73, 187, .12), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(61, 221, 255, .12), transparent 30%);
}

.records-page-status { margin-bottom: 14px; padding: 12px 16px; color: #cbd4f5; font-weight: 800; }
.records-page-status[data-state="ready"] { border-color: rgba(93, 239, 173, .4); color: #baffdc; }
.records-page-status[data-state="guest"] { border-color: rgba(255, 207, 94, .42); color: #ffe6a0; }

.records-game-picker { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 16px; }
.records-game-picker button { min-height: 42px; padding: 9px 17px; border: 1px solid rgba(111, 133, 208, .44); border-radius: 999px; color: #bec6e8; background: rgba(11, 14, 52, .78); font: 900 .76rem/1 "Nunito", sans-serif; cursor: pointer; }
.records-game-picker button.is-active { border-color: rgba(83, 226, 255, .7); color: #fff; background: linear-gradient(135deg, rgba(30, 134, 176, .82), rgba(189, 50, 145, .78)); box-shadow: 0 0 20px rgba(77, 224, 255, .14); }

.records-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.records-overview article { display: grid; gap: 6px; min-height: 118px; padding: 17px; align-content: center; background: linear-gradient(145deg, rgba(27, 32, 91, .86), rgba(11, 13, 48, .92)); }
.records-overview small, .records-prism-grid small, .records-rhythm-summary small { color: #9fabd8; font-size: .64rem; font-weight: 1000; letter-spacing: .09em; }
.records-overview strong { color: #fff; font: 900 clamp(1.1rem, 2.5vw, 1.65rem)/1.1 "Bungee", sans-serif; }
.records-overview span { color: #98a4cf; font-size: .72rem; font-weight: 700; }

.records-game-panel { display: grid; gap: 18px; margin-top: 18px; padding: clamp(18px, 3vw, 28px); overflow: hidden; }
.records-game-panel--prism { border-color: rgba(255, 93, 196, .42); background: radial-gradient(circle at 90% 0, rgba(255, 70, 189, .17), transparent 34%), linear-gradient(145deg, rgba(24, 18, 72, .96), rgba(12, 15, 53, .95)); }
.records-game-panel--rhythm { border-color: rgba(75, 226, 255, .42); background: radial-gradient(circle at 6% 0, rgba(55, 220, 255, .16), transparent 35%), linear-gradient(145deg, rgba(13, 29, 73, .96), rgba(31, 13, 70, .95)); }
.records-game-panel[hidden] { display: none; }

.records-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.records-panel-heading h2 { margin: 3px 0 4px; color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); }
.records-panel-heading p:last-child { margin: 0; color: #aeb7da; }
.records-panel-heading > span { padding: 8px 12px; border: 1px solid rgba(255, 215, 108, .42); border-radius: 999px; color: var(--records-gold); background: rgba(91, 59, 9, .25); font-size: .7rem; font-weight: 900; }

.records-prism-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.records-prism-grid article, .records-rhythm-summary article { display: grid; gap: 7px; min-height: 92px; padding: 15px; align-content: center; border: 1px solid rgba(132, 146, 215, .3); border-radius: 14px; background: rgba(5, 8, 35, .6); }
.records-prism-grid strong, .records-rhythm-summary strong { color: #fff; font-size: clamp(1rem, 2vw, 1.35rem); }

.records-rhythm-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.records-difficulty-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.records-difficulty-tier { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; padding: 11px; border: 1px solid rgba(125, 138, 199, .28); border-radius: 12px; background: rgba(6, 9, 39, .58); }
.records-difficulty-tier i { display: grid; grid-row: 1 / 3; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #12193d; background: #697295; font-size: .7rem; font-style: normal; font-weight: 1000; }
.records-difficulty-tier strong { color: #d2d7ec; font-size: .8rem; }
.records-difficulty-tier small { color: #7f88ad; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.records-difficulty-tier.is-unlocked { border-color: rgba(78, 228, 255, .44); background: linear-gradient(135deg, rgba(26, 117, 156, .32), rgba(128, 34, 131, .28)); }
.records-difficulty-tier.is-unlocked i { background: linear-gradient(135deg, var(--records-pink), var(--records-cyan)); }
.records-difficulty-tier.is-unlocked strong { color: #fff; }
.records-difficulty-tier.is-unlocked small { color: #79eaff; }

.records-song-groups { display: grid; gap: 14px; }
.records-song-group { padding: 15px; border: 1px solid rgba(111, 130, 202, .25); border-radius: 16px; background: rgba(5, 7, 31, .48); }
.records-song-group > h3 { margin: 0 0 11px; color: #fff; font-size: 1.05rem; }
.records-chart-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.records-chart-card { display: grid; gap: 9px; min-height: 150px; padding: 13px; border: 1px solid rgba(119, 134, 200, .28); border-radius: 13px; background: rgba(21, 24, 70, .68); }
.records-chart-card.is-locked { filter: saturate(.42); opacity: .65; }
.records-chart-card.has-record { border-color: rgba(77, 224, 255, .4); box-shadow: inset 0 0 18px rgba(61, 219, 255, .05); }
.records-chart-card header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.records-chart-card header strong { color: #fff; font-size: .77rem; text-transform: uppercase; }
.records-chart-card header small { color: #7cecff; font-size: .58rem; font-weight: 1000; text-transform: uppercase; }
.records-chart-grade { color: var(--records-gold); font: 900 1.35rem/1 "Bungee", sans-serif; }
.records-chart-card > p { margin: auto 0; color: #9099be; font-size: .75rem; }
.records-chart-card dl { display: grid; gap: 5px; margin: 0; }
.records-chart-card dl div { display: flex; justify-content: space-between; gap: 8px; }
.records-chart-card dt { color: #8d97bc; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.records-chart-card dd { margin: 0; color: #e9ebff; font-size: .7rem; font-weight: 900; }

@media (max-width: 900px) {
  .records-overview, .records-rhythm-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .records-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .records-panel-heading { align-items: flex-start; flex-direction: column; }
  .records-overview, .records-prism-grid, .records-rhythm-summary, .records-difficulty-track, .records-chart-grid { grid-template-columns: 1fr; }
  .records-game-picker { display: grid; grid-template-columns: 1fr; }
}