/* ==========================================================================
   Clubs Deuce Mugger: one stylesheet for every page.
   Look: old-web password page. Black, square, plain borders, bevelled buttons.

   Contents
     1. Font and colours
     2. Base (reset, text, links, headings)
     3. Layout (page, boxes, header, panels)
     4. Forms (fields, sliders, check boxes, buttons, messages)
     5. Components (chips, lists, progress, alerts, feed, leaderboard)
     6. Pages (sign in, mug finder results)
     7. Small screens
   ========================================================================== */

/* ---------- 1. Font and colours ---------- */

/* Fontstuck by KevinHilt, CC BY-SA 3.0 (see /fonts/LICENSE-fontstuck.txt) */
@font-face {
  font-family: "Fontstuck";
  src: url("/fonts/fontstuck.woff2") format("woff2");
  font-display: swap;
}

:root {
  --text: #d8d6e0;
  --muted: #8d8a9c;
  --line: #4a4a58;
  --derse: #a066d6; /* purple */
  --derse-l: #c9a2f2;
  --club: #3ddc7a; /* green */
  --club-d: #1d8f4c;
  --danger: #ff6b8a;
  --font-big: "Fontstuck", "Courier New", monospace; /* headings and big text */
  --font-small: "Courier New", Courier, monospace; /* everything else (bold) */
}

/* ---------- 2. Base ---------- */

* { box-sizing: border-box; border-radius: 0 !important; } /* everything is square */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: #000;
  color: var(--text);
  font-family: var(--font-small);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); /* notch */
}
[hidden] { display: none !important; } /* keeps hidden buttons hidden even when a class sets display */

a { color: var(--derse-l); text-decoration: underline; }
a:hover { color: var(--club); }
h1, h2, h3 { font-family: var(--font-big); font-weight: 400; margin: 0; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }

.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; image-rendering: pixelated; }
.club-c { color: var(--club); }
.hint { color: var(--muted); font-size: .8rem; font-weight: 400; }
.foot { margin-top: 24px; font-size: .75rem; color: var(--muted); font-weight: 400; }

/* ---------- 3. Layout ---------- */

.wrap { width: min(1000px, 100% - 24px); margin: 0 auto; padding: 20px 0 30px; }
.narrow { width: min(520px, 100% - 24px); } /* sign in and recovery pages */

/* a box: plain lines, no shadows */
.card { position: relative; background: #000; border: 2px solid var(--line); padding: 16px; margin: 0 0 18px; text-align: center; }
.card.dashed { border: 1px dashed var(--muted); }
.card.hover:hover { border-color: var(--club); }
.panel h2 { font-size: 1.4rem; margin-bottom: 10px; }

/* top of the app pages */
.topbar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; padding: 14px 12px; border: 2px solid var(--line); text-align: center; }
.topbar h1 { font-size: 1.7rem; display: block; width: 100%; text-align: center; }
.topbar .who { color: var(--club); width: 100%; word-break: break-all; }
.topbar .actions { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }

/* boxes in one column on phones, two on wide screens */
.panels { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 8px; }
.panels .card { margin: 0; }
@media (min-width: 820px) { .panels { grid-template-columns: 1fr 1fr; } }

.row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.row > input { flex: 1; min-width: 0; max-width: 260px; }
.stack { display: grid; gap: 10px; justify-items: center; }

/* ---------- 4. Forms ---------- */

label, .label { display: grid; gap: 4px; font-size: .9rem; color: var(--club); justify-items: center; width: 100%; }
input[type="text"], input[type="password"], input[type="number"], select {
  width: min(100%, 320px); min-height: 44px; padding: 6px 8px;
  font: inherit; font-size: 1rem; color: var(--text);
  background: #000; border: 2px solid var(--text); outline: none; caret-color: var(--club);
}
input:focus, select:focus { border-color: var(--club); }

/* slider with its number box beside it */
.slider-row { display: grid; grid-template-columns: 1fr 130px; gap: 10px; align-items: center; width: 100%; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--text); }
input[type="range"]::-moz-range-track { height: 4px; background: var(--text); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 28px; margin-top: -12px; background: #c0c0c8; border: 2px solid; border-color: #fff #5a5a62 #5a5a62 #fff; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 24px; background: #c0c0c8; border: 2px solid #fff; border-radius: 0; }

/* old-Windows style check box */
.check { display: flex; align-items: center; gap: 10px; justify-content: center; }
.check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative;
  width: 26px; height: 26px; margin: 0; cursor: pointer;
  background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; outline: 1px solid #000; outline-offset: -3px;
}
.check input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 7px; top: 1px; width: 6px; height: 13px;
  border: solid #000; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.check input[type="checkbox"]:focus-visible { outline: 2px dotted var(--club); outline-offset: 2px; }

/* bevelled buttons: .green, .ghost and .small change the look */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 18px;
  font-family: var(--font-small); font-weight: 700; font-size: 1rem; color: #000; background: #c0c0c8;
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  border: 2px solid; border-color: #fff #5a5a62 #5a5a62 #fff;
}
.btn:hover { background: #dcdce4; color: #000; }
.btn:active { border-color: #5a5a62 #fff #fff #5a5a62; background: #a8a8b0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.green { background: var(--club); border-color: #b6f5cf #11602f #11602f #b6f5cf; }
.btn.green:hover { background: #6ff0a2; }
.btn.green:active { border-color: #11602f #b6f5cf #b6f5cf #11602f; background: var(--club-d); }
.btn.ghost { background: #2b2b34; color: var(--text); border-color: #6a6a78 #101014 #101014 #6a6a78; }
.btn.ghost:hover { background: #3a3a46; color: #fff; }
.btn.small { min-height: 40px; padding: 4px 12px; font-size: .95rem; }
.x-btn { min-width: 44px; padding: 4px 10px; }

/* feedback lines: <3 after good news, :( after bad */
.msg { min-height: 1.4em; font-size: .95rem; }
.msg.ok { color: var(--club); }
.msg.err { color: var(--danger); }
.msg.info { color: var(--derse-l); }
.msg.ok::after { content: " <3"; }
.msg.err::after { content: " :("; }

/* "More options" fold-out */
details.more { margin: 14px 0 6px; text-align: center; }
details.more > summary { cursor: pointer; text-decoration: underline; color: var(--derse-l); min-height: 40px; display: flex; align-items: center; justify-content: center; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more[open] > summary { margin-bottom: 10px; }

/* ---------- 5. Components ---------- */

/* small removable tags (watchlist items) */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 2px 4px 2px 10px; border: 1px dashed var(--muted); font-size: .9rem; }
.chip button { all: unset; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; color: var(--danger); text-decoration: underline; }
.chip button:hover { color: #fff; }

/* scan controls */
.scanbar { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 10px 0 8px; }
.progress { height: 14px; border: 2px solid var(--text); margin: 10px 0; }
.progress > div { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--club) 0 8px, #000 8px 10px); }
.sortbar { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 16px 0; }
.sortbar label { width: auto; min-width: 160px; }
.sub-h { font-size: 1.2rem; margin: 16px 0 8px; }

/* lists: owner panel and invites */
.list { width: 100%; text-align: left; display: grid; gap: 8px; margin-top: 10px; }
.list .item { border: 1px dashed var(--line); padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: space-between; align-items: center; }
.list .item .meta { color: var(--muted); font-size: .8rem; font-weight: 400; }
.item .acts { display: flex; gap: 8px; }
.tag { font-size: .8rem; padding: 0 6px; border: 2px solid; }
.tag.pending { color: var(--derse-l); border-color: var(--derse); }
.tag.active { color: var(--club); border-color: var(--club); }
.invite-box { display: grid; gap: 10px; width: 100%; }
.invite-link { width: 100%; word-break: break-all; border: 1px dashed var(--club); padding: 10px; color: var(--club); text-align: left; font-weight: 400; }

/* jackpot alerts at the top of the Mug Finder */
.alerts { display: grid; gap: 10px; margin-bottom: 16px; }
.alert { border: 3px solid var(--club); background: #04180c; padding: 12px; color: var(--club); text-align: center; }
.alert .face { font-family: var(--font-big); font-size: 1.6rem; letter-spacing: .1em; }
.alert a { color: var(--club); }

/* mug feed (auto hunt) */
.feed { border: 3px solid var(--club); padding: 14px; margin-bottom: 18px; background: #04100a; }
.feed-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; margin-bottom: 6px; }
.feed .results { margin-top: 12px; }

/* leaderboard */
.board { display: grid; gap: 8px; margin: 12px 0; text-align: left; }
.board .item { border: 1px dashed var(--line); padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; align-items: center; }
.board .item.me { border: 2px solid var(--club); }
.board .item .meta { color: var(--muted); font-size: .8rem; font-weight: 400; width: 100%; }

/* ---------- 6. Pages ---------- */

/* sign in: title, big club symbol, "Enter Password:" */
.brand { padding: 14px 0 6px; }
.brand h1 { font-size: clamp(1.4rem, 7vw, 3rem); color: var(--text); overflow-wrap: anywhere; }
.big-symbol { width: 190px; height: 190px; margin: 6px auto 16px; display: block; color: var(--derse); }
.secret .prompt { font-family: var(--font-small); font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--club); margin: 0 0 6px; }
.arrow-note { color: var(--muted); font-weight: 400; margin: 6px 0 12px; }

/* result cards */
.results { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.empty { color: var(--muted); padding: 30px 12px; grid-column: 1 / -1; border: 1px dashed var(--muted); }
.target { margin: 0; padding: 16px; }
.target .name { font-family: var(--font-big); font-size: 1.5rem; margin: 0; word-break: break-word; text-decoration: underline; }
.target .sub { color: var(--muted); font-size: .8rem; margin: 2px 0 0; font-weight: 400; }
.target dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0; border-top: 1px dashed var(--muted); padding-top: 10px; text-align: left; }
.target dt { color: var(--muted); font-size: .85rem; }
.target dt::after { content: ":"; }
.target dd { margin: 0; text-align: right; }
.target .x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; z-index: 1; cursor: pointer; font: 700 1rem var(--font-small); color: #000; background: #c0c0c8; border: 2px solid; border-color: #fff #5a5a62 #5a5a62 #fff; }
.target .x:active { border-color: #5a5a62 #fff #fff #5a5a62; }
/* everything a seller has that qualifies */
.items { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--muted); text-align: left; display: grid; gap: 8px; }
.items .line { display: flex; justify-content: space-between; gap: 10px; }
.items .meta { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
.status { display: inline-block; font-weight: 700; }
.status.okay { color: var(--club); }
.status.out { color: var(--derse-l); }
.status.pending { color: var(--muted); }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btns .btn::after { content: "->"; } /* these open Torn */

/* "A new version is ready" bar */
.update-bar { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 12px; border-bottom: 2px solid var(--club); background: #04180c; color: var(--club); }

/* ---------- 7. Small screens ---------- */

@media (max-width: 480px) { .slider-row { grid-template-columns: 1fr 100px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- mug rating ---- */
.rating.good { color: var(--club); }
.rating.mediocre { color: var(--muted); }
.rating.bad { color: var(--derse-l); }

/* ---- finder tabs and the company type list ---- */
.tabs { display: flex; gap: 10px; justify-content: center; margin: 0 0 16px; flex-wrap: wrap; }
.tabs a { padding: 10px 16px; border: 2px solid var(--line); color: var(--muted); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.tabs a[aria-current="page"] { color: var(--club); border-color: var(--club); }
.checklist { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; border: 2px solid var(--line); padding: 8px 12px; text-align: left; width: 100%; }

/* ---- bonus weapon rarity ---- */
.rarity-yellow { color: #f4e04d; }
.rarity-orange { color: #ff9a3c; }
.rarity-red { color: #ff5470; }
.bonus-line { font-weight: 700; margin: 4px 0 0; }

.suggested { color: var(--club); font-weight: 700; }

.keycheck { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.keycheck .yes { color: var(--club); }
.keycheck .no { color: var(--derse-l); }

.card.recent-mug { border-color: var(--derse-l); }