.coinflip {
  grid-column: auto;
  border-color: #ffe06b99;
  background: radial-gradient(circle at 85% 40%, #6b4b164f, transparent 24%), linear-gradient(140deg, #1d1725, #100b18);
}
.coinflip h3, .coinflip p { max-width: 65%; }
.coin-mark { position: absolute; right: 8%; top: 50%; width: 128px; height: 128px; transform: translateY(-50%); }
.coin-mark i { position: absolute; inset: 0; display: grid; place-items: center; border: 4px double #ffe06b; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff9, transparent 7%), #c4922d; color: #2b1905; font: 800 16px system-ui; box-shadow: 0 0 25px #ffe06b33; }
.coin-mark i:last-child { transform: translate(42px, 24px) scale(.72); background: #8c93a0; border-color: #eef1f5; opacity: .88; }
.records-card { min-height: 0; padding: 19px; border: 1px solid #ffe06b73; background: linear-gradient(145deg,#21172c,#0d1715); overflow: hidden; }
.records-head { display: flex; justify-content: space-between; color: #a996b9; font-size: 9px; letter-spacing: .12em; }
.records-card h3 { margin: 18px 0 9px; font-size: clamp(24px,2.5vw,34px); }
.records-card ol,.records-card ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.records-card li { display: flex; justify-content: space-between; gap: 8px; color: #d8cde1; font-size: 10px; }
.records-card li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.records-card li b { flex: none; color: #80f9a5; }
.records-card .other-title { margin: 13px 0 6px; padding-top: 9px; border-top: 1px solid #a16be044; color: #b786ff; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

@media (min-width: 641px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coin-mark { right: 5%; width: 92px; height: 92px; }
  .coin-mark i { font-size: 12px; }
  .records-card { padding: 16px 18px; }
  .records-card h3 { margin: 14px 0 7px; font-size: clamp(25px,2.1vw,31px); }
  .records-card .other-title { margin-top: 9px; padding-top: 7px; }
}

@media (max-width: 640px) {
  .coinflip { grid-column: auto; }
  .coinflip h3, .coinflip p { max-width: 62%; }
  .coin-mark { right: 7%; width: 82px; height: 82px; }
  .coin-mark i { font-size: 11px; }
  .records-card { min-height: 190px; padding: 16px; }
  .records-card h3 { margin-top: 13px; font-size: 27px; }
  .records-card li { font-size: 9px; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .coinflip { grid-column: auto; }
  .coin-mark { width: 60px; height: 60px; right: 5%; }
}