/* Solo Designs: shared look for the public site and the staff page.
   Chrome on concrete. Flat dark surfaces, cut corners, and the chrome
   gradient saved for the things that matter (cases, primary actions). */

@font-face { font-family: 'Rajdhani'; font-weight: 500; font-display: swap; src: url('/fonts/rajdhani-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 600; font-display: swap; src: url('/fonts/rajdhani-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url('/fonts/rajdhani-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'K2D'; font-weight: 400; font-display: swap; src: url('/fonts/k2d-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'K2D'; font-weight: 500; font-display: swap; src: url('/fonts/k2d-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'K2D'; font-weight: 600; font-display: swap; src: url('/fonts/k2d-latin-600-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --ink: #05070a;
  --bg: #080b10;
  --panel: #0e131a;
  --panel-2: #141a23;
  --panel-3: #1a222d;
  --line: #1f2834;
  --line-2: #2c3848;
  --text: #e9eff6;
  --muted: #8a98ab;
  --dim: #5b687a;
  --blue: #2ea6f2;
  --blue-deep: #0f6aa8;
  --ice: #c9ecff;
  --ok: #3ddc84;
  --warn: #ffb020;
  --bad: #ff4d5e;
  --rar: #8fa3b8;
  --display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --body: 'K2D', 'Segoe UI', system-ui, sans-serif;
  --chrome: linear-gradient(180deg, #ffffff 0%, #d5ecff 22%, #58b9f7 46%, #0f6aa8 54%, #7fd0ff 78%, #f2faff 100%);
  --cut: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: .005em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
::selection { background: var(--blue); color: var(--ink); }

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--blue); color: var(--ink); font-weight: 600; }
.skip-link:focus { left: 8px; }

/* Cut-corner surface. The outer layer is the border, ::before is the fill. */
.cut {
  position: relative;
  isolation: isolate;
  background: var(--line-2);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.cut::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--panel);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  background: var(--panel-3);
  color: var(--text);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: filter .15s ease, transform .15s ease, background-color .15s ease;
}
.button svg { width: 19px; height: 19px; flex: none; }
.button:hover { filter: brightness(1.15); }
.button:active { transform: translateY(1px); }
.button:disabled { cursor: not-allowed; filter: grayscale(.7) brightness(.6); }
.button-primary { background: linear-gradient(180deg, #7fd0ff 0%, #2ea6f2 45%, #1378c2 100%); color: #03101a; text-shadow: 0 1px 0 #ffffff55; }
.button-ghost { background: #ffffff12; color: var(--text); box-shadow: inset 0 0 0 1px #ffffff26; clip-path: none; }
.button-ghost:hover { background: #ffffff1c; filter: none; }
.button-danger { background: #3a1218; color: #ffb3bb; box-shadow: inset 0 0 0 1px #ff4d5e55; clip-path: none; }
.button-discord { background: #5865f2; color: #fff; }
.button-large { min-height: 52px; padding: 0 28px; font-size: 18px; }
.button-small { min-height: 32px; padding: 0 12px; font-size: 14px; }
.button-block { width: 100%; }
.link-button { padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.link-button:hover { color: var(--text); }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-2); background: var(--panel); color: var(--muted); }
.icon-button:hover { color: var(--text); border-color: var(--dim); }
.icon-button svg { width: 19px; height: 19px; }

.chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--panel); font-family: var(--display); font-size: 17px; font-weight: 700; }
.chip-icon { width: 20px; height: 20px; color: #ffc23d; }
.chip-icon svg { width: 100%; height: 100%; }

/* Reward card (shared by the reel, the stash, the case contents and the staff page) */
.item-card {
  --rar: #8fa3b8;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 14px 10px 0;
  background: linear-gradient(180deg, #151c26 0%, #0c1016 100%);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  text-align: center;
}
.item-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--rar) 34%, transparent), transparent 62%);
  pointer-events: none;
}
.item-card::after { content: ''; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--rar); }
.item-icon { position: relative; width: 62px; height: 62px; color: var(--rar); }
.item-icon svg, .item-icon img { width: 100%; height: 100%; object-fit: contain; }
.item-name { position: relative; margin-top: 10px; font-family: var(--display); font-size: 16px; font-weight: 700; line-height: 1.1; }
.item-rarity { position: relative; margin: 3px 0 12px; color: var(--rar); font-size: 12px; font-weight: 500; }

.crate-art { position: relative; }
.crate-art .crate-svg { width: 100%; height: auto; overflow: visible; }
.crate-lid { transform-box: fill-box; transform-origin: 8% 100%; transition: transform .55s var(--ease); }
.crate-light { opacity: .16; transition: opacity .5s ease; }
.crate-art.is-open .crate-lid { transform: translateY(-30px) rotate(-11deg); }
.crate-art.is-open .crate-light { opacity: 1; }

.empty-state { padding: 34px 24px; border: 1px dashed var(--line-2); color: var(--muted); text-align: center; }
.empty-state b { display: block; margin-bottom: 4px; color: var(--text); font-family: var(--display); font-size: 20px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 90;
  max-width: min(520px, calc(100% - 32px));
  padding: 12px 18px;
  transform: translateX(-50%);
  border-left: 3px solid var(--blue);
  background: #111822;
  box-shadow: 0 18px 50px #000c;
  font-size: 14px;
}
.toast.is-error { border-left-color: var(--bad); }

/* People who turn animations off in their system settings lose the idle decoration only.
   Opening a case always animates: it is what they pressed the button for, and it has a Skip. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .crate-float .crate-svg, .crate-float .crate-img { animation: none; }
}