:root {
  color-scheme: dark;
  font-family: "Petrov Sans", ui-sans-serif, system-ui, sans-serif;
  background: #080a10;
  color: #f8f9ff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 15% 0%, #263a68 0, transparent 28rem),
    radial-gradient(circle at 90% 100%, #21184b 0, transparent 30rem),
    #080a10;
}

main { width: min(1050px, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 4rem; }
header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
h1 {
  margin: 0;
  color: #fff;
  font-family: "Petrov Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  text-transform: lowercase;
}
.intro { max-width: 42rem; color: #b3bad0; font-size: 1.1rem; line-height: 1.6; }

.game-layout { display: grid; gap: 1rem; margin: 2rem 0 1.1rem; }
.card {
  position: relative;
  display: grid;
  min-height: 340px;
  overflow: hidden;
  padding: 2rem;
  border: 1px solid #3d4967;
  border-radius: .55rem;
  background: linear-gradient(135deg, rgb(28 35 55 / .92), rgb(16 20 32 / .95));
  box-shadow: 0 24px 70px rgb(0 0 0 / .28);
  transition: height .42s cubic-bezier(.22, 1, .36, 1);
}
.card::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--rarity-color) 40%, transparent), transparent 45%);
  transition: opacity .45s ease;
}
.card.high-rarity {
  border-color: var(--rarity-color);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rarity-color) 30%, #17213c), color-mix(in srgb, var(--rarity-color) 12%, #121724));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rarity-color) 30%, transparent), 0 28px 80px color-mix(in srgb, var(--rarity-color) 22%, transparent);
}
.card.high-rarity::before { opacity: 1; }
#state { align-self: center; color: #c8cee1; font-size: 1.1rem; }
.spinner { position: absolute; z-index: 2; top: 50%; left: 50%; width: min(90%, 620px); transform: translate(-50%, -50%); text-align: center; transition: top .52s cubic-bezier(.22, 1, .36, 1), transform .52s cubic-bezier(.22, 1, .36, 1), opacity .22s ease; }
.spinner p { margin: 0 0 .7rem; color: #8ca4ed; font-size: .72rem; font-weight: 900; letter-spacing: .18em; }
.spinner strong { display: block; min-height: 2.5em; font-size: clamp(1.7rem, 3.5vw, 2.45rem); letter-spacing: -.04em; }
.spinner span { display: inline-block; margin-top: .7rem; padding: .35rem .65rem; border: 1px solid var(--rarity-color); color: var(--rarity-color); font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-shadow: 0 0 12px var(--rarity-color); }
.spinner.settling { top: 2rem; transform: translate(-50%, 0); }
.spinner.settling strong { min-height: 0; }
.spinner.settling p { position: absolute; opacity: 0; transition: opacity .18s ease; }
.spinner.settling span { opacity: 0; transition: opacity .18s ease; }
.spinner.fading { opacity: 0; }
article { position: relative; z-index: 1; display: grid; gap: 1.5rem; opacity: 1; transform: translateY(0); transition: opacity .42s ease, transform .42s cubic-bezier(.22, 1, .36, 1); }
article.entering { opacity: 0; transform: translateY(.75rem); }
.article-header { text-align: center; }
.article-header .rarity { margin: .5rem 0 0; }
.article-details { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 205px) 1fr; align-items: center; }
img { width: 205px; max-height: 220px; border: 1px solid rgb(255 255 255 / .18); border-radius: .9rem; object-fit: cover; box-shadow: 0 12px 30px rgb(0 0 0 / .3); }
.rarity { color: var(--rarity-color); font-size: .85rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 0 20px var(--rarity-color); }
h2 { margin: 0; font-size: clamp(1.7rem, 3.5vw, 2.45rem); letter-spacing: -.04em; }
#description { margin-bottom: .35rem; color: #d4d8e5; font-weight: 650; }
#extract { color: #b8bfd1; line-height: 1.55; }
/* On wider screens the card keeps one height whether it's spinning or showing
   an article, so the ladder and buttons below never jump between rolls. Long
   titles and summaries are clipped to fit; the Wikipedia link has the rest. */
@media (min-width: 561px) {
  .card { height: 460px; }
  h2, .spinner strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .spinner strong { min-height: 2.5em; }
  #description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  #extract { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
}
a { color: #b9cbff; font-weight: 700; }

.rarity-ladder { padding: 1rem 1.1rem .8rem; border: 1px solid #303a55; border-radius: .55rem; background: rgb(15 19 30 / .76); }
.ladder-label { margin: 0 0 .8rem; color: #8792ad; font-size: .64rem; font-weight: 900; letter-spacing: .13em; }
.rarity-ladder ol { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; height: 170px; gap: .35rem; margin: 0; padding: 0 0 1.65rem; list-style: none; }
.rarity-ladder li { position: relative; isolation: isolate; align-self: end; height: var(--tier-height); border-top: 3px solid var(--tier-color); color: var(--tier-color); opacity: .6; transition: height .25s ease, opacity .18s ease; }
.rarity-ladder li::before { position: absolute; z-index: 0; inset: 0; content: ""; background: color-mix(in srgb, var(--tier-color) 32%, transparent); pointer-events: none; }
.rarity-ladder li.current { opacity: 1; text-shadow: 0 0 13px var(--tier-color); }
.rarity-ladder li.current .tier-name::before { position: absolute; left: 50%; bottom: calc(100% + .25rem); content: "▼"; transform: translateX(-50%); color: #fff; font-size: 1rem; text-shadow: 0 0 8px var(--tier-color); }
.tier-name { position: absolute; z-index: 1; top: calc(100% + .4rem); left: 50%; color: var(--tier-color); font-size: .58rem; font-weight: 800; letter-spacing: .03em; transform: translateX(-50%); white-space: nowrap; }
.tier-tooltip { position: absolute; z-index: 3; bottom: calc(100% + .55rem); left: 50%; display: grid; width: max-content; max-width: 190px; padding: .35rem .5rem; place-items: center; border: 1px solid var(--tier-color); background: #101523; color: #fff; font-size: .61rem; letter-spacing: .02em; line-height: 1.2; opacity: 0; pointer-events: none; text-align: center; text-transform: none; transform: translateX(-50%); transition: opacity .16s ease; }
/* Keep the edge tooltips inside the ladder; even while invisible they would widen the page on phones. */
.rarity-ladder li:nth-child(-n+2) .tier-tooltip { left: 0; transform: none; }
.rarity-ladder li:nth-last-child(-n+3) .tier-tooltip { right: 0; left: auto; transform: none; }
.rarity-ladder li:hover, .rarity-ladder li:focus { opacity: 1; outline: none; }
.rarity-ladder li:hover .tier-tooltip, .rarity-ladder li:focus .tier-tooltip { opacity: 1; }

button { border: 0; border-radius: .25rem; padding: .85rem 1.15rem; background: #6f8ff2; box-shadow: 0 3px 6px rgb(0 0 0 / .28); color: #fff; cursor: pointer; font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
button:hover:not(:disabled) { background: #86a2ff; box-shadow: 0 5px 10px rgb(0 0 0 / .36); transform: translateY(-1px); }
button:active:not(:disabled) { box-shadow: 0 2px 3px rgb(0 0 0 / .3); transform: translateY(0); }
button:disabled { cursor: not-allowed; opacity: .55; }
.game-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
#pull-article { min-width: 200px; }
#reroll-article { background: #7446b9; }
#reroll-article:hover:not(:disabled) { background: #8a5bd1; }
#share-pull { background: #303b58; }
#share-pull:hover:not(:disabled) { background: #414f73; }
.coin-balance { display: inline-flex; align-items: center; padding: .75rem .9rem; border: 1px solid #916d26; border-radius: .25rem; background: rgb(54 40 17 / .62); color: #ffcf63; font-size: .88rem; font-weight: 900; }
.note { max-width: 48rem; color: #8c95ad; font-size: .82rem; line-height: 1.55; }
.login-form, .player { display: flex; gap: .5rem; align-items: center; }
.login-form input { min-width: 0; width: 10rem; border: 0; border-bottom: 2px solid #627092; border-radius: .2rem .2rem 0 0; padding: .8rem .65rem .65rem; outline: none; background: rgb(12 16 27 / .8); color: #fff; font: inherit; transition: border-color .18s ease, background .18s ease; }
.login-form input:hover { background: rgb(25 32 52 / .9); }
.login-form input:focus { border-color: #8da8ff; box-shadow: 0 0 0 3px rgb(112 145 255 / .18); }
.login-form button, .player button { padding: .8rem; }
.player { padding: .3rem .3rem .3rem .85rem; border: 1px solid #303a55; border-radius: .3rem; background: rgb(13 17 27 / .62); color: #cbd4ec; font-weight: 700; }
.history { max-width: 650px; margin-top: 2.5rem; padding: 1.3rem 1.5rem; border-top: 1px solid #313a50; }
.history h2 { font-size: 1.25rem; }
.history ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; line-height: 1.4; }
.history li { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; background: #1a2030; border-left: 4px solid var(--tier-color, #888); border-radius: 4px; }
.lb-rank { min-width: 2.2rem; color: #8b93a8; font-weight: 700; }
.lb-body { display: grid; flex: 1; min-width: 0; }
.lb-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-meta { color: var(--tier-color, #b8bfd1); font-size: .85rem; font-weight: 600; }
.lb-coins { color: #f5c542; font-weight: 700; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .rarity-ladder ol { gap: .2rem; }
}

@media (max-width: 560px) {
  main { padding-top: 2rem; }
  header { align-items: stretch; flex-direction: column; }
  .login-form, .player { justify-content: space-between; }
  .card { min-height: 300px; padding: 1.3rem; }
  .spinner.settling { top: 1.3rem; }
  .article-details { grid-template-columns: 1fr; }
  img { width: 100%; max-width: 250px; }
  .game-actions button { flex: 1 1 auto; }
  #pull-article { min-width: 0; }
  .rarity-ladder ol { height: 215px; padding-bottom: 4.75rem; }
  .tier-name {
    top: calc(100% + .35rem);
    font-size: .56rem;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner, button { transition: none; }
}