/* DeadBoost-style skin for deadlock.events and the draft tool (2026-10-06).
   Loaded last on both pages. Remove the <link> to this file (and restore the old font link) to revert.
   Tilts use the standalone `rotate` property so they stack with motion.css transforms instead of replacing them. */
:root {
  --db-bg-0: #000;
  --db-bg-1: #070707;
  --db-bg-2: #111;
  --db-bg-3: #1c1c1c;
  --db-navy: #1a202b;
  --db-navy-2: #252d3c;
  --db-ink: #fff1dc;
  --db-ink-2: #cbc8c2;
  --db-muted: #9a9ea6;
  --db-orange: #da5a29;
  --db-amber: #ffac11;
  --db-sapphire: #3874ae;
  --db-sky: #6aa3dc;
  --db-red: #e8321e;
  --db-line: rgba(255, 241, 220, .08);
  --db-line-2: rgba(255, 241, 220, .16);
  --db-shadow: 0 10px 40px #000c;
  --db-body: "Jost", "Segoe UI", system-ui, sans-serif;
  --db-eyebrow: "Oswald", "Arial Narrow", sans-serif;
  --db-logo: "Unbounded", "Jost", "Arial Black", sans-serif;

  /* deadlock.events tokens */
  --color-sand-100: var(--db-ink);
  --color-sand-150: var(--db-ink);
  --color-sand-200: var(--db-ink-2);
  --color-sand-300: var(--db-muted);
  --color-accent-400: var(--db-orange);
  --color-accent-300: var(--db-amber);
  --font-rajdhani: var(--db-body);
  --font-oxanium: var(--db-eyebrow);

  /* draft tokens */
  --ink: var(--db-bg-1);
  --panel: rgba(13, 13, 13, .94);
  --panel-2: rgba(17, 17, 17, .96);
  --line: var(--db-line);
  --line-strong: var(--db-line-2);
  --text: var(--db-ink);
  --muted: var(--db-muted);
  --amber: var(--db-amber);
  --amber-bg: rgba(255, 172, 17, .14);
  --blue: var(--db-sky);
  --blue-bg: rgba(56, 116, 174, .22);
  --red: var(--db-red);
  --card: var(--db-bg-3);
  --radius: 0px;
  --display: var(--db-eyebrow);
  --body: var(--db-body);

  /* motion layer: warmer bloom in brand colours */
  --warm: rgba(255, 172, 17, .2);
  --warm-strong: rgba(255, 241, 220, .32);
}

html { background: var(--db-bg-1); overflow-x: clip; }
body { font-family: var(--db-body); font-weight: 400; color: var(--db-ink); font-size: 17px; }

/* ---------- ground: the city as a hard black and white print, grain on top ---------- */
.page-bg { inset: 0; filter: grayscale(1) contrast(1.5) brightness(.72);
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0) scale(1.08); }
.page-bg::after { background: linear-gradient(180deg, #07070755 0%, #070707b8 55%, #070707f2 100%); }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

/* ---------- wordmark ---------- */
.brand-name { font-family: var(--db-logo); font-weight: 800; font-size: 1.3rem; letter-spacing: .01em; text-transform: uppercase; color: var(--db-ink); }

/* ---------- buttons: square, solid, the main one is a tilted orange block with a hard shadow ---------- */
.btn {
  border-radius: 0; border: 0; background: var(--db-navy); color: var(--db-ink);
  font: 600 1.05rem/1.2 var(--db-body); letter-spacing: .01em; text-transform: none;
  padding: .65rem 1.2rem; transition-property: transform, rotate, background-color, box-shadow, color;
}
.btn:hover { background: var(--db-navy-2); border-color: transparent; }
.btn-ghost { border: 1px solid var(--db-line-2); background: rgba(7, 7, 7, .6); }
.btn-ghost:hover { background: var(--db-navy); }
.nav-right .btn-ghost { font: 600 1.05rem var(--db-body); letter-spacing: .01em; text-transform: none; }
.btn-primary {
  background: var(--db-orange); color: var(--db-bg-1); font-weight: 600; font-size: 1.15rem;
  rotate: -1.5deg; box-shadow: 5px 5px 0 var(--db-navy);
}
.btn-primary:hover { background: #e4693a; color: var(--db-bg-1); box-shadow: 7px 8px 0 var(--db-navy); }
.btn-primary:active { box-shadow: 2px 2px 0 var(--db-navy); }
.btn.btn-icon { border-radius: 0; padding: 0; width: 2.4rem; height: 2.4rem; justify-content: center; }
.btn.btn-discord { background: #5865f2; color: #fff; border: 0; }
.btn.btn-discord:hover { background: #4752c4; }
.btn.btn-youtube { background: #ff0033; color: #fff; border: 0; }
.btn.btn-youtube:hover { background: #d9002b; }
.btn-on, .seg .btn.on { background: var(--db-amber); color: var(--db-bg-1); border: 0; }
.btn:disabled { opacity: .45; }

input[type=text], input[type=number], input[type=password] {
  border-radius: 0; border: 1px solid var(--db-line-2); background: var(--db-bg-1); color: var(--db-ink); font: 500 1.05rem var(--db-body);
}
input:focus { outline: 2px solid var(--db-orange); outline-offset: 0; }
label.field { font: 500 .95rem var(--db-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--db-muted); }

/* ---------- headings: orange plate, skewed, dark block behind ---------- */
.section-title, .pagehead h1 {
  position: relative; isolation: isolate; display: inline-block; rotate: -1.5deg;
  padding: .12em .6em .18em; margin: 0 0 .4rem .4rem;
  font: 700 clamp(1.9rem, 3.6vw, 2.8rem)/1.05 var(--db-body); letter-spacing: -.005em; text-transform: none; color: var(--db-bg-1);
}
.section-title::before, .pagehead h1::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--db-orange);
  transform: skewX(-8deg); box-shadow: 7px 7px 0 var(--db-navy);
}
#tools .section-title::before, .pagehead.alt h1::before { background: var(--db-sapphire); }
#tools .section-title { color: var(--db-ink); }
.pagehead { padding: .8rem 0 1.4rem; }
.pagehead h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.panel h2, .modal header h2 { font: 700 1.45rem var(--db-body); letter-spacing: 0; text-transform: none; color: var(--db-ink); }
.modal h3 { font: 500 1rem var(--db-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--db-muted); }

/* ---------- deadlock.events home ---------- */
.kicker { font: 500 1rem var(--db-eyebrow); letter-spacing: .12em; color: var(--db-muted); }
.hero {
  position: relative; margin: 1.5rem 0 3rem; padding: 2rem 2.2rem 2.4rem; max-width: 46rem;
  background: var(--db-bg-1); box-shadow: 10px 10px 0 var(--db-navy), var(--db-shadow); rotate: -1.2deg;
}
.hero .kicker {
  display: inline-block; background: var(--db-navy); color: var(--db-ink); padding: .3rem .7rem; margin-bottom: 1.2rem;
}
.hero h1 {
  font: 900 clamp(2.3rem, 5.4vw, 4.2rem)/1 var(--db-logo); letter-spacing: -.01em; text-transform: uppercase; color: var(--db-ink); margin: 0;
}
.hero h1 .accent { color: var(--db-orange); }
.section { padding: 1.75rem 0; }
.section-header { margin-bottom: 1.4rem; }

.event-card, .scrim-row {
  border-radius: 0; border: 0; background: var(--db-bg-2); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 var(--db-line), var(--db-shadow);
}
.event-card:hover { background-color: #161616; border-color: transparent; box-shadow: inset 4px 0 0 var(--db-orange), inset 0 1px 0 var(--db-line), 0 18px 34px -20px #000; }
.scrim-row .event-name { font: 700 1.45rem var(--db-body); letter-spacing: 0; text-transform: none; }
.scrim-state { font: 600 1.2rem var(--db-eyebrow); letter-spacing: .1em; color: var(--db-muted); }
.scrim-state.is-live { color: var(--db-amber); }

.footer { border-top: 1px solid var(--db-line); font: 400 .95rem var(--db-body); color: var(--db-muted); margin-top: 5rem; }
.footer a { font: 500 1rem var(--db-body); color: var(--db-ink-2); }
.footer a:hover { color: var(--db-amber); }

/* ---------- draft: shared chrome ---------- */
.panel, .board, .grid, .team, .modal {
  border-radius: 0; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 var(--db-line), var(--db-shadow);
}
.panel, .board, .grid { background: var(--panel); }
.team { background: var(--panel-2); }
.tag { border-radius: 0; border: 0; background: var(--db-navy); color: var(--db-ink-2); font: 500 .95rem var(--db-eyebrow); letter-spacing: .08em; text-transform: uppercase; padding: .15rem .6rem; }
.conn { font: 500 1rem var(--db-eyebrow); letter-spacing: .1em; color: #8fd18a; }
.conn.off { color: var(--db-red); }
.empty { color: var(--db-muted); }
.lobby-row { border-top-color: var(--db-line); }
.lobby-row b { font: 700 1.25rem var(--db-body); letter-spacing: 0; text-transform: none; }
.create-grid .or { font: 500 1.1rem var(--db-eyebrow); letter-spacing: .1em; }

/* lobby seats */
.team h3 { font: 900 1.45rem var(--db-logo); letter-spacing: 0; min-width: 0; }
.team h3 span, .roster h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster h3 { font-size: 1.1rem; }
.team h3 img, .heads .name img, .fhead img { border-radius: 0; }
.slot { border-radius: 0; border: 0; background: var(--db-bg-1); box-shadow: inset 0 0 0 1px var(--db-line); font: 500 1.1rem var(--db-body); }
button.slot:hover { background: #151515; box-shadow: inset 0 0 0 1px var(--db-line-2); }
.t1 .slot.cap { background: var(--amber-bg); box-shadow: inset 4px 0 0 var(--db-amber), inset 0 0 0 1px rgba(255, 172, 17, .35); }
.t2 .slot.cap { background: var(--blue-bg); box-shadow: inset 4px 0 0 var(--db-sapphire), inset 0 0 0 1px rgba(106, 163, 220, .35); }
.slot .who b { font-weight: 600; }
.slot .role { font: 500 .9rem var(--db-eyebrow); letter-spacing: .1em; }
.avatar { border-radius: 0; background: var(--db-navy); color: var(--db-ink-2); }
.kick { border-radius: 0; border: 0; background: #4a1a14; color: #ffd6cc; }
.kick:hover { background: var(--db-red); }
.vs { font: 900 1.6rem var(--db-logo); color: var(--db-muted); }
.shadow button { border-radius: 0; border: 0; background: var(--db-navy); }

/* ---------- draft board ---------- */
.chip { border-radius: 0; border: 0; background: var(--db-bg-1); color: #6d6a64; font: 500 1rem var(--db-eyebrow); letter-spacing: .1em; box-shadow: inset 4px 0 0 #2a2a2a; }
.chip.t1 { box-shadow: inset 4px 0 0 #7a5410; }
.chip.t2 { box-shadow: inset 4px 0 0 #284c70; }
.chip.done { color: var(--db-muted); }
.chip.now.t1 { background: var(--db-amber); color: var(--db-bg-1); box-shadow: 3px 3px 0 var(--db-navy); }
.chip.now.t2 { background: var(--db-sapphire); color: var(--db-ink); box-shadow: 3px 3px 0 #000; }
.heads .name { font: 900 clamp(1.4rem, 2.4vw, 2rem)/1 var(--db-logo); letter-spacing: -.01em; }
.heads .n1, .t1 h3, .t1 .role, .fhead .n1 { color: var(--db-amber); }
.heads .n2, .t2 h3, .t2 .role, .fhead .n2 { color: var(--db-sky); }
.t1 h3 img, .n1 img, .fhead .k1, .htile .badge.k1, .c1 .num { background: var(--db-amber); }
.t2 h3 img, .n2 img, .fhead .k2, .htile .badge.k2, .c2 .num { background: var(--db-sapphire); }
.c2 .num { color: var(--db-ink); }

.pcard { border-radius: 0; border: 0; background: var(--db-bg-3); box-shadow: inset 0 0 0 1px var(--db-line); }
.pcard.next.t1 { outline: 3px solid var(--db-amber); outline-offset: -3px; }
.pcard.next.t2 { outline: 3px solid var(--db-sapphire); outline-offset: -3px; }
.pcard span, .htile span { background: #070707d9; font: 500 .95rem var(--db-eyebrow); letter-spacing: .06em; color: var(--db-ink); }

.clock { border-radius: 0; border: 0; background: var(--db-bg-1); box-shadow: inset 0 0 0 1px var(--db-line); }
.clock.t1.on { background: var(--db-amber); box-shadow: 4px 4px 0 var(--db-navy); }
.clock.t2.on { background: var(--db-sapphire); box-shadow: 4px 4px 0 #000; }
.clock.t1.on, .clock.t1.on small, .clock.t1.on b { color: var(--db-bg-1); }
.clock.t2.on, .clock.t2.on small { color: var(--db-ink); }
.clock small { font: 500 .9rem var(--db-eyebrow); letter-spacing: .12em; }
.clock b { font: 800 1.4rem var(--db-logo); letter-spacing: 0; }
.clock b.low { color: var(--db-red); }
.clock.on b.low { color: #5c0d04; }
.clock.t2.on b.low { color: #ffd6cc; }

.action .btn { border-radius: 0; font: 600 1.15rem/1.15 var(--db-body); letter-spacing: 0; text-transform: none; rotate: -1deg; }
.action .btn.t1 { background: var(--db-amber); color: var(--db-bg-1); box-shadow: 5px 5px 0 var(--db-navy); }
.action .btn.t2 { background: var(--db-sapphire); color: var(--db-ink); box-shadow: 5px 5px 0 #000; }
.action .btn:disabled { rotate: 0deg; box-shadow: none; }

.ban { border-radius: 0; border: 2px solid var(--db-red); background: #2a1410; }
.ban.skip { border-style: dashed; }

/* hero grid: square tiles that tip over on hover like a card picked off the table */
.htile { border-radius: 0; background: var(--db-bg-3); border: 2px solid transparent;
  transition: transform .45s var(--spring), rotate .45s var(--spring), border-color .25s var(--ease-out), box-shadow .4s var(--ease-out); }
.htile:nth-child(odd):not(.gone):hover { rotate: -2.5deg; }
.htile:nth-child(even):not(.gone):hover { rotate: 2.5deg; }
.htile:not(.gone):hover { border-color: var(--db-ink); box-shadow: 6px 6px 0 #000; }
.htile.sel { border-color: var(--db-orange); rotate: -2deg; box-shadow: 6px 6px 0 #000, 0 0 0 2px var(--db-orange); }
.htile.banned { border-color: var(--db-red); }
.htile .badge { border-radius: 0; }

/* finished */
.fhead .fn { font: 900 clamp(1.7rem, 3.6vw, 2.5rem)/1 var(--db-logo); letter-spacing: -.01em; }
.num { border-radius: 0; font: 700 .95rem var(--db-logo); }
.fcode { font: 500 1.1rem var(--db-eyebrow); letter-spacing: .1em; }
.party-code { font: 700 1.6rem var(--db-logo); letter-spacing: .08em; }

/* modal, settings grid, toast */
.scrim { background: #000000d0; }
.modal { background: var(--db-bg-1); }
.modal header, .modal footer { border-color: var(--db-line); }
.cell { border-radius: 0; border: 0; background: var(--db-bg-2); box-shadow: inset 0 0 0 1px var(--db-line); font: 800 1.05rem var(--db-logo); }
.cell.c1 { box-shadow: inset 4px 0 0 var(--db-amber); color: var(--db-amber); }
.cell.c2 { box-shadow: inset 4px 0 0 var(--db-sapphire); color: var(--db-sky); }
.ordergrid .n, .orderlabels { font: 500 .95rem var(--db-eyebrow); letter-spacing: .08em; }
.toast { border-radius: 0; border: 0; background: var(--db-navy); box-shadow: inset 4px 0 0 var(--db-orange), var(--db-shadow); font: 500 1.05rem var(--db-body); }

@media (max-width: 820px) {
  .hero { padding: 1.5rem 1.3rem 1.8rem; rotate: -.8deg; }
  .hero h1 { font-size: clamp(1.45rem, 7vw, 2.3rem); }
  .heads .name { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .htile:hover, .htile.sel { rotate: 0deg; }
}

/* one-screen draft: lifted or tipped tiles must never add a scrollbar */
@media (min-width: 1101px) and (min-height: 620px) {
  body[data-view=draft] .container { overflow: clip; overflow-clip-margin: 0; }
}
.btn-primary.btn-wide, .create-grid .btn-primary { rotate: -.6deg; }