* { box-sizing: border-box }
:root { color-scheme: dark }
body { margin: 0; min-height: 100vh; background: #19171e; color: #eee5e0; font: 16px/1.6 system-ui,sans-serif; padding: 28px 22px }
main { width: min(100%, 640px); margin: auto }
header { text-align: center }
.cookie-button { display: block; width: 248px; height: 248px; padding: 8px; margin: 0 auto 12px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: transform 120ms ease; -webkit-tap-highlight-color: transparent }
.cookie-button img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none }
.cookie-button:hover { transform: scale(1.035) }
.cookie-button:active { transform: scale(.95) }
button:focus-visible,a:focus-visible { outline: 2px solid #edce8a; outline-offset: 5px }
h1 { margin: 0; font-size: clamp(25px, 6vw, 34px); font-weight: 600; letter-spacing: -.045em }
.cookie-feedback { min-height: 23px; margin: 3px 0 0; font-size: 13px; color: #ad9faa }
.jar { margin: 12px 0 30px; color: #edce8a; font-variant-numeric: tabular-nums }
.jar strong { font-size: clamp(40px, 9vw, 60px); font-weight: 600; letter-spacing: -.045em }
.total-label { display: block; margin-top: -8px; font-size: 14px; color: #c2b6bf }
.board { padding: 8px 22px; border: 1px solid #413b45; border-radius: 14px; background: #211d26; scroll-margin-top: 24px }
.board-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #38313c }
h2 { font-size: 16px; font-weight: 500; letter-spacing: -.015em }
.refresh { width: 36px; height: 36px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #c2b6bf; cursor: pointer; font: 23px/1 system-ui,sans-serif }
.refresh:hover { color: #edce8a; background: #342b36 }
.refresh:disabled { cursor: wait; opacity: .45 }
.status { margin: 20px 0; text-align: center; color: #b6a9b4; font-size: 14px }
.status[hidden] { display: none }
ol { list-style: none; margin: 0; padding: 0 }
li { display: grid; grid-template-columns: minmax(25px,auto) minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 70px; padding: 12px 0; border-top: 1px solid #342e38 }
li:first-child { border-top: 0 }
.rank { color: #9e909f; font-variant-numeric: tabular-nums }
li:first-child .rank { color: #edce8a }
.identity { min-width: 0 }
.name { display: block; font-weight: 500; overflow-wrap: anywhere }
.world { display: block; color: #ad9faa; font-size: 13px }
.amount { color: #edce8a; text-align: right; font-variant-numeric: tabular-nums; font-size: 15px }
.amount span { display: block; color: #ad9faa; font-size: 11px }
footer { margin: 28px 0 12px; text-align: center; color: #ad9faa; font-size: 12px }
@media(max-width:400px) { body { padding: 22px 14px } .cookie-button { width: 208px; height: 208px } .board { padding: 8px 14px } li { gap: 8px } }
@media(prefers-reduced-motion:reduce) { .cookie-button { transition: none } }

.riri-link{color:inherit;text-decoration:none}
.riri-link:hover,.riri-link:focus-visible{color:#f2cf88;text-decoration:underline;text-underline-offset:.18em}
.riri-link:focus-visible{outline:1px solid #f2cf88;outline-offset:5px;border-radius:3px}
footer p{margin:0 0 12px}
.privacy-link{color:inherit;font-size:12px;text-underline-offset:3px}
.download-count{color:#c4b9a8;font-size:14px;margin-top:28px;letter-spacing:.02em}
.privacy-page{text-align:left;max-width:680px;padding-bottom:60px;line-height:1.7}
.privacy-page h1{font-size:30px}
.privacy-page h2{font-size:20px;margin-top:30px}
.privacy-page a{color:#f2cf88}
