:root {
  --bg: #0a0f09;
  --gold: #e2b857;
  --gold-dark: #6b4a12;
  --parch: #eadbb5;
  --dim: #a8997a;
  --red: #e2452f;
  --ink: #120c06;
  --display: "Almendra", "Palatino Linotype", Georgia, serif;
  --text: "Alegreya Sans", "Segoe UI", Verdana, sans-serif;
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--parch);
  font-family: var(--text);
  user-select: none;
}

#c, #gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#gl { display: none; }
body.playing #c { cursor: none; }

#banner {
  position: fixed;
  left: 0; right: 0; top: 22%;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
#banner.show { opacity: 1; }
#bannerMain {
  font: 700 clamp(40px, 8vw, 100px) var(--display);
  letter-spacing: 0.01em;
  color: var(--gold);
  text-shadow: 0 4px 0 #000, 3px 0 0 #000, -3px 0 0 #000, 0 -3px 0 #000, 0 0 40px rgba(0, 0, 0, 0.9);
}
#banner.bad #bannerMain { color: var(--red); }
#bannerSub {
  font: 700 clamp(17px, 2.2vw, 26px) var(--text);
  letter-spacing: 0.04em;
  color: #fff6dc;
  margin-top: 4px;
  text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000, 0 0 14px #000;
}

#overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(8, 10, 6, 0.55), rgba(4, 6, 3, 0.93));
  padding: 16px;
}

.panel {
  width: min(540px, 100%);
  padding: 32px 34px 26px;
  text-align: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.25)),
    #33230f;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px var(--ink), 0 24px 70px rgba(0, 0, 0, 0.8), inset 0 0 50px rgba(0, 0, 0, 0.45);
}

h1, h2 { margin: 0 0 6px; font-variant: small-caps; letter-spacing: 0.06em; font-weight: bold; }
h1 { font-size: 50px; color: var(--gold); text-shadow: 0 3px 0 #000, 0 0 18px rgba(0, 0, 0, 0.8); }
h2 { font-size: 28px; color: var(--gold); text-shadow: 0 2px 0 #000; }
#end.lose h1 { color: var(--red); }

.tag { color: var(--parch); margin: 0 0 24px; font-size: 17px; font-style: italic; }
.tag em { color: var(--gold); }
.msg { color: var(--dim); font-size: 14px; min-height: 18px; margin: 14px 0 0; }

button {
  font: 700 20px var(--display);
  letter-spacing: 0.01em;
  color: #2a1a05;
  background: linear-gradient(#f0d07a, #c8992f 55%, #a67a1f);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--gold-dark), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 0 #000;
  padding: 11px 34px;
  cursor: pointer;
  transition: transform 0.06s, filter 0.15s;
}
button:not(:disabled):hover { filter: brightness(1.12); }
button:not(:disabled):active { transform: translateY(3px); }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid #fff6dc; outline-offset: 3px; }

.linkrow { display: flex; gap: 10px; }
.linkrow input {
  flex: 1; min-width: 0;
  font: 16px var(--text);
  color: var(--parch);
  background: #170f06;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--gold-dark);
  padding: 0 12px;
  user-select: all;
}
.linkrow button { padding: 10px 18px; font-size: 16px; }

.controls {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(226, 184, 87, 0.3);
  display: grid;
  gap: 9px;
  text-align: left;
  font-size: 14px;
  color: var(--parch);
}
.controls span { margin-left: 10px; color: var(--dim); }
kbd {
  font: 700 13px var(--text);
  color: var(--parch);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 0 #000;
  border-radius: 3px;
  padding: 2px 7px;
  background: #4a4035;
}

.msg.warn { color: var(--red); min-height: 0; margin: 0 0 10px; font-weight: bold; }
.msg.warn:empty { display: none; }

.namefield {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 11px 14px;
  font: bold 17px var(--text);
  text-align: center;
  color: var(--parch);
  background: #170f06;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--gold-dark);
  user-select: text;
}
.namefield:focus { box-shadow: 0 0 0 2px var(--gold); }
.namefield::placeholder { color: #a8997a; font-weight: normal; }

button.link {
  display: block;
  margin: 12px auto 0;
  padding: 2px 0;
  font: 500 16px var(--text);
  letter-spacing: 0;
  color: var(--dim);
  background: none;
  border: 0;
  box-shadow: none;
  text-decoration: underline;
}
button.link:not(:disabled):hover { color: var(--parch); filter: none; }
button.link:not(:disabled):active { transform: none; }

.plist { margin: 18px 0; display: grid; gap: 6px; text-align: left; }
.prow {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(226, 184, 87, 0.22);
  font: 700 16px var(--text);
}
.dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #000; flex: none; }
.pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.ptag { color: var(--dim); font-weight: 500; font-size: 14px; text-align: right; }

.panel.wide { width: min(760px, 100%); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 6px; }
button.card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 12px 14px;
  min-height: 215px;
  letter-spacing: 0;
  color: var(--parch);
  background: linear-gradient(#4a3418, #2a1b0b);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--gold-dark), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 0 #000;
}
button.card:not(:disabled):hover { filter: none; background: linear-gradient(#5e431f, #33210d); box-shadow: 0 0 0 2px var(--gold), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 0 #000; transform: translateY(-3px); }
.ckey {
  position: absolute; top: 7px; left: 9px;
  font: 700 13px var(--text);
  color: var(--parch);
  border: 1px solid rgba(226, 184, 87, 0.5); border-radius: 3px; padding: 1px 6px;
}
.cname { font: 700 24px var(--display); color: var(--gold); text-shadow: 0 2px 0 #000; }
.cdesc { flex: 1; font: 16px/1.4 var(--text); color: var(--parch); }
.clevel { font: 500 14px var(--text); color: var(--dim); }
.prow.picking .ptag { color: var(--gold); }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } button.card { min-height: 0; } }

button.card.legend {
  background: linear-gradient(#6b4a12, #3a2606 60%, #2a1b0b);
  box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(226, 184, 87, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 0 #000;
}
button.card.legend .cname { color: #fff1b8; text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 220, 120, 0.9); }
button.card.legend .clevel { color: var(--gold); font-weight: bold; }
@keyframes legend {
  0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(226, 184, 87, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 0 #000; }
  50% { box-shadow: 0 0 0 2px #fff1b8, 0 0 40px rgba(255, 215, 110, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 0 #000; }
}
@media (prefers-reduced-motion: reduce) { button.card.legend { animation: none; } }

/* mjuka övergångar */
.panel { animation: panel-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
button.card { animation: card-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
button.card:nth-child(2) { animation-delay: 0.09s; }
button.card:nth-child(3) { animation-delay: 0.18s; }
button.card.legend { animation: card-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) both, legend 1.6s ease-in-out 0.4s infinite; }
@keyframes card-in { from { opacity: 0; transform: translateY(26px) rotate(-2deg) scale(0.9); } to { opacity: 1; transform: none; } }
.prow { animation: row-in 0.3s ease-out both; }
@keyframes row-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.cicon { display: block; width: 62px; height: 62px; margin-top: -6px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.6)); }
button.card.legend .cicon { filter: drop-shadow(0 0 10px rgba(255, 220, 120, 0.9)); }
@media (prefers-reduced-motion: reduce) { .panel, button.card, .prow { animation: none; } }

/* klassval */
#lobby { width: min(640px, 100%); }
.classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 4px; }
button.cls {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 8px 10px;
  letter-spacing: 0;
  color: var(--parch);
  background: linear-gradient(#3d2b14, #24170a);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--gold-dark), 0 3px 0 #000;
}
button.cls:not(:disabled):hover { filter: none; background: linear-gradient(#4f3819, #2e1e0c); }
button.cls.on { background: linear-gradient(#6b4a12, #3a2606); box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(226, 184, 87, 0.45), 0 3px 0 #000; }
.clsicon { display: block; width: 64px; height: 64px; }
.clsname { font: 700 22px var(--display); color: var(--gold); text-shadow: 0 2px 0 #000; }
.clsdesc { font: 14px/1.35 var(--text); color: var(--parch); }
@media (max-width: 560px) { .classes { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- startsidan */
/* Matchen mellan botar är sidans bild: den ligger fri till höger, och texten
   står direkt på en toning till vänster i stället för i en ruta ovanpå. */
h1, h2 { font-family: var(--display); font-variant: normal; letter-spacing: 0; font-weight: 700; animation: none; }
#overlay.atLanding { padding: 0; align-items: stretch; background: linear-gradient(90deg, rgba(7, 9, 5, 0.96) 0%, rgba(7, 9, 5, 0.86) 30%, rgba(7, 9, 5, 0.25) 55%, rgba(7, 9, 5, 0) 70%); }
#landing { position: relative; width: 100%; height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold-dark) #0b0d08; }
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(18px, 5vw, 64px); }
.wordmark { font: 700 30px var(--display); color: var(--gold); text-shadow: 0 2px 0 #000; }
.topbar nav { display: flex; gap: 22px; }
.topbar button.link { margin: 0; font: 700 17px var(--text); color: var(--parch); text-shadow: 0 1px 4px #000; }

.hero { position: relative; min-height: 100%; display: flex; align-items: center; padding: 84px clamp(18px, 5vw, 64px) 40px; }
.herocol { position: relative; width: min(540px, 100%); text-align: left; }
.pitch { margin: 0 0 14px; font-size: clamp(44px, min(7.4vw, 11.5vh), 104px); line-height: 0.92; color: #fff6dc; text-shadow: 0 4px 0 #000, 0 0 40px rgba(0, 0, 0, 0.7); }
.pitch span { display: block; color: inherit; text-shadow: inherit; animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pitch span:nth-child(2) { animation-delay: 0.12s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.lede { margin: 0 0 22px; max-width: 46ch; font-size: 19px; line-height: 1.5; color: var(--parch); text-shadow: 0 1px 6px #000; }
.lede.center { margin: -6px auto 22px; text-align: center; }
.invite { margin: 0 0 14px; padding: 9px 12px; font: 700 15px var(--text); color: #2a1a05; background: var(--gold); }

.herocol .classes { margin: 0 0 8px; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.herocol button.cls { flex-direction: row; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px 6px 4px; background: rgba(20, 14, 6, 0.72); }
.herocol button.cls.on { background: linear-gradient(#6b4a12, #3a2606); }
.herocol .clsicon { width: 54px; height: 54px; }
.herocol .clsname { font-size: 22px; }
.herocol .clsdesc { display: none; }
.blurb { margin: 0 0 18px; min-height: 2.9em; max-width: 54ch; font-size: 17px; line-height: 1.45; color: var(--parch); text-shadow: 0 1px 4px #000; }

.playrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.playrow .namefield { margin: 0; text-align: left; font: 700 18px var(--text); background: rgba(12, 8, 3, 0.85); }
button.big { padding: 15px 30px; font-size: 26px; white-space: nowrap; }
.altrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.altrow button.alt { font-size: 19px; padding: 10px 8px; background: rgba(40, 27, 11, 0.9); }
#trainMore { margin: 10px 0 0; }
.touchnote { margin: 0 0 12px; padding: 12px 14px; font-size: 17px; line-height: 1.45; color: #2a1a05; background: var(--gold); }
.trainopts { position: absolute; left: 0; right: 0; z-index: 3; margin-top: 8px; padding: 12px; background: #150e05; border: 1px solid rgba(226, 184, 87, 0.3); display: grid; gap: 10px; }
.optrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 15px var(--text); color: var(--parch); }
.seg { display: flex; }
.seg button { padding: 6px 14px; font: 700 15px var(--text); letter-spacing: 0; color: var(--dim); background: #1c140a; border: 1px solid var(--gold-dark); box-shadow: none; margin-left: -1px; }
.seg button.on { color: #2a1a05; background: var(--gold); }
.seg button:not(:disabled):hover { filter: none; }
.seg button:not(:disabled):active, button.card:not(:disabled):active, button.cls:not(:disabled):active { transform: none; }
.trainopts > button { padding: 9px; }
.herocol .msg { text-align: left; font: 16px var(--text); }
.herocol .msg.err { color: #ff8a70; font-weight: 700; }
.live { margin: 4px 0 0; font: 500 15px var(--text); color: var(--gold); text-shadow: 0 1px 4px #000; }
.live:empty { display: none; }

/* det som händer i matchen bakom, i realtid */
.ticker { position: absolute; right: clamp(18px, 5vw, 64px); bottom: 26px; margin: 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px; font: 500 15px var(--text); color: var(--parch); background: rgba(12, 8, 3, 0.8); border: 1px solid rgba(226, 184, 87, 0.3); }
.ticker i { width: 9px; height: 9px; border-radius: 50%; background: #e2452f; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.below { position: relative; background: linear-gradient(rgba(10, 12, 7, 0) 0, #0b0d08 90px); padding-top: 60px; }
.info { max-width: 1040px; margin: 0 auto; padding: 44px clamp(18px, 4vw, 40px); text-align: center; }
.info h2 { margin: 0 0 26px; font-size: clamp(34px, 4.4vw, 54px); color: #fff6dc; text-shadow: 0 3px 0 #000; }
.classinfo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; text-align: left; }
.clscard .clsicon { width: 132px; height: 132px; margin: 0 0 4px -14px; }
.clscard h3 { margin: 0 0 6px; font: 700 34px var(--display); color: var(--gold); }
.clscard > p { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--parch); }
.clscard dl { margin: 0; display: grid; gap: 10px; }
.clscard dt { font: 700 17px var(--text); color: #fff6dc; }
.clscard dd { margin: 0; font-size: 16px; line-height: 1.45; color: var(--dim); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; counter-reset: step; text-align: left; }
.flow li { counter-increment: step; padding-top: 14px; border-top: 2px solid var(--gold-dark); }
.flow li::before { content: counter(step); display: block; font: 700 48px/1 var(--text); color: var(--gold); }
.flow h3 { margin: 8px 0 6px; font: 700 20px var(--text); color: #fff6dc; }
.flow p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--dim); }
.showcase { grid-template-columns: repeat(4, 1fr); }
#topPreview { max-width: 620px; margin: 0 auto 8px; }
.info .controls { max-width: 560px; margin: 0 auto 30px; border-top: 0; padding-top: 0; font: 16px var(--text); }
.info.last { padding-bottom: 80px; }

@media (max-width: 980px) {
  #overlay.atLanding { background: rgba(7, 9, 5, 0.82); }
  .ticker { position: static; margin-top: 22px; align-self: flex-start; }
  .hero { flex-direction: column; align-items: flex-start; justify-content: center; }
  .classinfo, .flow { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .playrow { grid-template-columns: 1fr; }
  .herocol .clsicon { width: 40px; height: 40px; }
  .herocol .clsname { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .pitch span, .ticker i { animation: none; } }

/* ---------------------------------------------------------------- statistik och resultat */
.panel { max-height: calc(100% - 12px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold-dark) transparent; }
.statgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 16px 0 6px; }
.stat { padding: 10px 4px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(226, 184, 87, 0.22); }
.stat b { display: block; font: 700 28px var(--text); color: var(--gold); }
.stat span { font: 14px var(--text); color: var(--dim); }
.panel h3 { text-align: left; margin: 18px 0 6px; font: 700 22px var(--display); color: var(--gold); }
#stats .plist, #result .plist { margin: 6px 0; }
.cardsline { margin: -2px 0 6px; padding: 0 12px; text-align: left; font: 14px var(--text); color: var(--dim); }
.rating { margin: 0 0 4px; font: 700 19px var(--text); color: var(--parch); min-height: 0; }
.rating b.up { color: #8fd45a; }
.rating b.down { color: #ff8a70; }
.rating:empty { display: none; }
.back { margin-top: 14px; }
@media (max-width: 620px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }

/* knapprader och länkrader i lobbyn och på resultatskärmen */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
button.alt { padding: 10px 8px; font-size: 18px; color: var(--parch); background: linear-gradient(#4a3418, #2a1b0b); box-shadow: 0 0 0 1px var(--gold-dark), 0 3px 0 #000; }
button.alt:not(:disabled):hover { filter: none; background: linear-gradient(#5e431f, #33210d); }
.links { display: flex; justify-content: center; gap: 18px; margin-top: 8px; }
.links button.link { margin: 6px 0 0; }

/* startsidan, finputs */
.showcase .card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 14px 16px; min-height: 210px; text-align: center;
  color: var(--parch);
  background: linear-gradient(#6b4a12, #3a2606 60%, #2a1b0b);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(226, 184, 87, 0.3);
}
.showcase .cname { color: #fff1b8; }
.showcase .clevel { font-weight: 700; color: var(--gold); }
.showcase .cicon { filter: drop-shadow(0 0 10px rgba(255, 220, 120, 0.8)); }
@media (max-width: 520px) {
  .herocol button.cls { flex-direction: column; padding: 6px 4px; gap: 0; }
}

/* ---------------------------------------------------------------- finputs efter granskningen */
.label { margin: 16px 0 -8px; text-align: left; font: 500 15px var(--text); color: var(--dim); }
.panel > button:not(.link) { display: block; width: 100%; margin-top: 12px; }
.prow.me { border-color: var(--gold); background: rgba(226, 184, 87, 0.13); }
.prow.ghost { opacity: 0.45; font-weight: 500; font-style: italic; animation: none; }
.prow .num { flex: none; min-width: 3.2em; text-align: right; font: 700 19px var(--text); font-variant-numeric: tabular-nums; color: var(--gold); }
.prow.fresh { animation: fresh 0.9s ease-out; }
@keyframes fresh { from { background: rgba(226, 184, 87, 0.55); } }
#end .clsdesc { display: none; }
#end button.cls { flex-direction: row; justify-content: center; padding: 4px 10px 4px 2px; }
#end .clsicon { width: 46px; height: 46px; }
#endMsg { font: 700 18px var(--text); color: var(--gold); }
#lobbyHint { font-size: 16px; color: var(--parch); }

/* uppgraderingsvalet: tiden som rinner ut, och ett val som känns */
.timerbar { height: 6px; margin: -12px 0 16px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--ink); }
.timerbar i { display: block; height: 100%; background: var(--gold); transform-origin: left; }
.timerbar.low i { background: var(--red); }
button.card.legend:not(:disabled):hover { background: linear-gradient(#85601c, #4a3108 60%, #33210d); }
.cards.picked button.card { pointer-events: none; transition: opacity 0.3s, transform 0.3s; opacity: 0.22; animation: none; }
.cards.picked button.card.chosen { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 3px #fff1b8, 0 0 34px rgba(255, 215, 110, 0.8), 0 4px 0 #000; }
.cicon.star { background: radial-gradient(circle, rgba(255, 226, 140, 0.55), rgba(255, 226, 140, 0) 68%); }

/* åskådarraden */
#specbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 16px; font: 500 17px var(--text); color: var(--parch); background: #33230f; border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--gold), 0 8px 30px rgba(0, 0, 0, 0.7); }
#specbar button { padding: 7px 18px; font-size: 18px; }
#specbar button.link { margin: 0; padding: 2px 0; }

.more { position: absolute; left: clamp(18px, 5vw, 64px); bottom: 22px; margin: 0; font: 500 16px var(--text); color: var(--parch); text-shadow: 0 1px 4px #000; }

@media (max-height: 800px) {
  .panel { padding: 18px 28px 16px; }
  #lobby .clsdesc { display: none; }
  .panel .clsicon { width: 48px; height: 48px; }
  .prow { padding: 4px 12px; }
  button.card { min-height: 180px; }
  .hero { padding-top: 64px; padding-bottom: 20px; }
  .lede { font-size: 17px; margin-bottom: 14px; }
  .blurb { margin-bottom: 12px; }
  button.link.more { display: none; }
}
@media (max-width: 980px) { button.link.more { display: none; } }
@media (prefers-reduced-motion: reduce) { .cards.picked button.card, .prow.fresh { transition: none; animation: none; } }

.topbar { background: linear-gradient(rgba(7, 9, 5, 0.75), rgba(7, 9, 5, 0)); }
#players .prow, #draftList .prow:not(.fresh), #endScores .prow { animation: none; }
button.link.more { margin: 0; }
@media (max-width: 520px) { .altrow button.alt { font-size: 16px; } }