/* Hiscores: an OSRS skills tab and chatbox. Pixel fonts and sprites at whole-number scales,
 * never smoothed. One theme only: the game has no light mode. */
@font-face { font-family: "RS Small"; src: url("assets/runescape-small.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "RS Plain"; src: url("assets/runescape-plain-12.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "RS Bold"; src: url("assets/runescape-bold-12.ttf") format("truetype"); font-display: block; }

:root {
  --bg: #1b1712;
  --stone: #3e3529;
  --stone-hi: #5d5242;
  --stone-lo: #221d16;
  --slot: #4a4033;
  --yellow: #ffff00;
  --orange: #ff981f;
  --ink: #000;
  --blue: #000080;
  --link: #0000ff;
  --tip: #ffffa0;
  --s: 2; /* pixel scale */
}
@media (max-width: 419px) { :root { --s: 1.8; } } /* 3 x 62 px slots must fit 358 px */
@media (min-width: 720px) { :root { --s: 3; } }

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #2a241b 0%, var(--bg) 70%);
  color: var(--yellow);
  font-family: "RS Plain", system-ui, sans-serif;
  -webkit-font-smoothing: none;
  font-smooth: never;
  -webkit-tap-highlight-color: transparent;
}
img { image-rendering: pixelated; }
main {
  max-width: calc(204px * var(--s) + 32px);
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8px * var(--s));
}

.top { width: 100%; text-align: center; position: relative; }
.back { position: absolute; left: 0; top: 4px; color: var(--orange); font-family: "RS Small"; font-size: calc(8px * var(--s)); text-decoration: none; text-shadow: 1px 1px 0 #000; }
h1 { margin: 0; font-family: "RS Bold"; font-weight: normal; font-size: calc(12px * var(--s)); color: var(--orange); text-shadow: calc(1px * var(--s)) calc(1px * var(--s)) 0 #000; letter-spacing: 0; }
.sub { margin: 4px 0 0; font-family: "RS Small"; font-size: calc(8px * var(--s)); color: var(--yellow); text-shadow: 1px 1px 0 #000; }

/* ---------- The skills tab ---------- */
.tab {
  position: relative;
  padding: calc(4px * var(--s));
  background: var(--stone);
  border: calc(1px * var(--s)) solid var(--stone-lo);
  box-shadow: inset calc(1px * var(--s)) calc(1px * var(--s)) 0 var(--stone-hi), inset calc(-1px * var(--s)) calc(-1px * var(--s)) 0 #2b251c, 0 calc(4px * var(--s)) calc(12px * var(--s)) rgba(0, 0, 0, .5);
  border-radius: calc(2px * var(--s));
}
.grid { display: grid; grid-template-columns: repeat(3, calc(62px * var(--s))); gap: calc(1px * var(--s)); }
.slot {
  position: relative;
  height: calc(32px * var(--s));
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, #554a3b 0%, var(--slot) 45%, #3a3128 100%);
  box-shadow: inset calc(1px * var(--s)) calc(1px * var(--s)) 0 #6b5f4c, inset calc(-1px * var(--s)) calc(-1px * var(--s)) 0 #29231a;
  cursor: pointer;
  font: inherit;
  color: var(--yellow);
}
.slot:focus-visible { outline: calc(1px * var(--s)) solid var(--yellow); outline-offset: calc(-2px * var(--s)); }
.slot.on { background: linear-gradient(180deg, #6a5c48 0%, #5a4e3e 50%, #463b2f 100%); }
.slot img { position: absolute; left: calc(15px * var(--s)); top: 50%; transform: translate(-50%, -50%) scale(var(--s)); transform-origin: center; }
.lv {
  position: absolute;
  font-family: "RS Small";
  font-size: calc(8px * var(--s));
  line-height: 1;
  color: var(--yellow);
  text-shadow: calc(1px * var(--s) / 2) calc(1px * var(--s) / 2) 0 #000, 1px 1px 0 #000;
}
.lv.a { right: calc(22px * var(--s)); top: calc(5px * var(--s)); }
.lv.b { right: calc(6px * var(--s)); bottom: calc(5px * var(--s)); }
.slash { position: absolute; right: calc(17px * var(--s)); top: calc(8px * var(--s)); width: calc(1px * var(--s)); height: calc(16px * var(--s)); background: var(--yellow); transform: rotate(28deg); box-shadow: 1px 1px 0 #000; }
.slot .gain { position: absolute; left: calc(2px * var(--s)); bottom: calc(2px * var(--s)); width: calc(3px * var(--s)); height: calc(3px * var(--s)); background: #00ff00; box-shadow: 1px 1px 0 #000; }
.slot.empty { cursor: default; background: #3a3128; box-shadow: inset calc(1px * var(--s)) calc(1px * var(--s)) 0 #4a4033, inset calc(-1px * var(--s)) calc(-1px * var(--s)) 0 #29231a; }
.rs-btn {
  min-height: 44px;
  padding: calc(4px * var(--s)) calc(10px * var(--s));
  border: calc(1px * var(--s)) solid #000;
  background: linear-gradient(180deg, #5d5242 0%, #3e3529 100%);
  box-shadow: inset calc(1px * var(--s)) calc(1px * var(--s)) 0 #75684f, inset calc(-1px * var(--s)) calc(-1px * var(--s)) 0 #221d16;
  color: var(--orange);
  font-family: "RS Bold";
  font-size: calc(6px * var(--s) + 6px);
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
}
.rs-btn[hidden] { display: none; }
.rs-btn:hover:not(:disabled) { color: #fff; }
.rs-btn:active:not(:disabled) { box-shadow: inset calc(-1px * var(--s)) calc(-1px * var(--s)) 0 #75684f, inset calc(1px * var(--s)) calc(1px * var(--s)) 0 #221d16; }
.rs-btn:disabled { color: #9f8f70; cursor: default; }
.slot.total { cursor: default; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2px * var(--s)); }
.slot.total span { font-family: "RS Small"; font-size: calc(8px * var(--s)); color: var(--yellow); text-shadow: 1px 1px 0 #000; }

.tip {
  position: absolute;
  z-index: 3;
  padding: calc(2px * var(--s)) calc(3px * var(--s));
  background: var(--tip);
  border: calc(1px * var(--s) / 2) solid #000;
  color: #000;
  font-family: "RS Small";
  font-size: calc(8px * var(--s));
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
}
.tip[hidden] { display: none; }

/* ---------- The chatbox ---------- */
.chat {
  position: relative;
  width: calc(204px * var(--s));
  height: calc(100px * var(--s));
  background: url("assets/chatbox.png") center / 100% 100% no-repeat, #d1c29f;
  border: calc(1px * var(--s)) solid #000;
  box-shadow: 0 calc(4px * var(--s)) calc(12px * var(--s)) rgba(0, 0, 0, .5);
}
.log {
  position: absolute;
  inset: calc(4px * var(--s)) calc(5px * var(--s));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #5d5242 transparent;
}
.log p { margin: 0; font-family: "RS Plain"; font-size: calc(6px * var(--s) + 4px); line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.log p:first-child { margin-top: auto; }
.log .t { color: #000; opacity: .75; }
.log .x { color: #7f0000; }
.log .lvl { color: var(--blue); }
.log .hi { color: #00007f; }

.levelup { position: absolute; inset: 0; display: flex; align-items: center; gap: calc(6px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s)); background: url("assets/chatbox.png") center / 100% 100% no-repeat, #d1c29f; }
.levelup[hidden] { display: none; }
.levelup img { flex: 0 0 auto; width: calc(46px * var(--s) / 1.5); height: auto; }
.lu-text { flex: 1; text-align: center; font-family: "RS Plain"; font-size: calc(6px * var(--s) + 4px); line-height: 1.35; color: #000; }
.lu-text p { margin: 0; }
.lu-blue { color: var(--blue); }
.lu-next { margin-top: calc(3px * var(--s)); padding: 4px 8px; border: 0; background: none; color: var(--link); font: inherit; cursor: pointer; }
.lu-next:hover { color: #fff; text-shadow: 1px 1px 0 #000; }
.levelup.wait .lu-next::after { content: " \2022 tap for sound"; color: #7f0000; }

/* ---------- Level-up fireworks: square pixels flying out of the skill ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.px { position: absolute; width: calc(2px * var(--s)); height: calc(2px * var(--s)); animation: burst 1100ms cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes burst {
  0% { transform: translate(0, 0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.slot.flash { animation: flash 900ms steps(2) 3; }
@keyframes flash { 50% { filter: brightness(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .px { animation-duration: 1ms; }
  .slot.flash { animation: none; }
}

.foot { margin: 0; font-family: "RS Small"; font-size: calc(7px * var(--s)); color: #9f8f70; text-align: center; text-shadow: 1px 1px 0 #000; }
.nocode { max-width: 360px; margin: 30vh auto 0; padding: 0 16px; text-align: center; font-family: "RS Plain"; font-size: 16px; color: var(--yellow); }