@import url("https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito+Sans:wght@400;600;700;800;900&display=swap");

/* The live setup UI sits on original, reference-matched arena artwork. */
#setup {
  --ink: #422810;
  --muted: #88705a;
  --cream: #fff2d9;
  --wood: #8e4d25;
  position: absolute;
  inset: 0;
  padding: 18px 20px 32px;
  background:
    linear-gradient(180deg, #1c80ca08 25%, #a9641b08 85%, #6b441d38),
    url("/design/arena-background.jpg") center center/cover fixed;
  color: var(--ink);
  font-family: "Nunito Sans", system-ui, sans-serif;
  image-rendering: auto;
  isolation: isolate;
  scroll-behavior: smooth;
}
#setup *,
#setup *::before,
#setup *::after {
  box-sizing: border-box;
}
#setup [hidden] {
  display: none !important;
}
#setup button,
#setup input,
#setup textarea {
  font-family: inherit;
}
#setup button:focus-visible,
#setup a:focus-visible,
#setup summary:focus-visible {
  outline: 3px solid #42caff;
  outline-offset: 4px;
}
.brand-header {
  width: min(600px, 85vw);
  flex-shrink: 0;
  text-align: center;
  position: relative;
  z-index: 2;
  margin: 0 0 -8px;
}
.brand-header h1 {
  margin: 0;
  line-height: 0;
}
.brand-header img {
  width: 100%;
  height: 205px;
  object-fit: contain;
  filter: drop-shadow(0 5px 2px #38200e55);
}
.brand-tagline {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #fff8df;
  text-shadow: 0 2px 3px #3c240c;
  margin: -2px 0 9px;
}
.wood-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(790px, 100%);
  min-height: 59px;
  padding: 8px 22px;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  border: 3px solid #5d321c;
  border-radius: 9px;
  background:
    repeating-linear-gradient(0deg, #713e2400 0 16px, #502a1a55 17px, #d78e4650 19px),
    linear-gradient(#aa6c39, #8a4a25 48%, #713a20 50%, #9c6031);
  box-shadow:
    inset 0 2px #f2bc7d,
    inset 0 -3px #613218,
    0 5px 0 #4d2a19,
    0 8px 12px #3c240d40;
}
.wood-nav::before,
.wood-nav::after {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 23px;
  border: 3px solid #806f5c;
  background: linear-gradient(100deg, #dccbb1, #ac9b85 60%, #e7d7be);
  border-radius: 7px;
  box-shadow:
    inset 0 2px #fff3d3,
    0 4px 0 #705642;
}
.wood-nav::before {
  left: -10px;
  transform: rotate(-2deg);
}
.wood-nav::after {
  right: -10px;
  transform: rotate(2deg);
}
.wood-nav button {
  flex: 1;
  background: linear-gradient(#8d512b, #794122);
  color: #fff4dc;
  text-shadow: 0 2px #422510;
  border: 1px solid #67391f;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 900;
  padding: 7px 8px;
  white-space: nowrap;
  box-shadow: inset 0 1px #c18a5244;
}
.wood-nav button:hover {
  background: linear-gradient(#b27638, #8b4d25);
}
.nav-symbol {
  font-family: "Segoe UI Emoji", sans-serif;
  font-size: 22px;
  vertical-align: -2px;
  margin-right: 7px;
  filter: drop-shadow(0 2px 1px #422510);
}
#setup .setup-card {
  position: relative;
  width: min(556px, 100%);
  margin: 11px 0 0;
  padding: 0;
  border: 7px solid #8b4c28;
  border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, #4024153b 35px, #dfa26a44 37px),
    linear-gradient(90deg, #804322, #aa713c 45%, #844424);
  box-shadow:
    inset 0 0 0 2px #d0985a,
    0 5px 0 #512d1b,
    0 8px 14px #47240755;
  flex-shrink: 0;
}
.parchment {
  position: relative;
  padding: 19px 48px 14px;
  margin: 5px 9px 0;
  border: 2px solid #cba279;
  border-radius: 6px;
  background: radial-gradient(ellipse at center, #fff7e9, #f6dfbc);
  box-shadow:
    inset 0 0 22px #c9914b30,
    0 2px 2px #532d1733;
}
.entry-title {
  font-family: "Lilita One", sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.2px;
  margin: 0 0 12px;
  color: #3c220e;
  text-shadow: 0 1px #fff8e8;
  text-transform: uppercase;
}
.name-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #88705a;
  font-weight: 800;
  margin-bottom: 7px;
}
#nameCount {
  color: #87633f;
  font-variant-numeric: tabular-nums;
}
#nameCount.over {
  color: #bf3425;
}
.text-action {
  background: none;
  color: #796044;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#nameRows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 245px;
  overflow-y: auto;
  padding: 2px;
}
.name-entry {
  display: flex;
  position: relative;
  min-height: 36px;
  align-items: center;
  background: linear-gradient(#fffdf8, #f5ece0);
  border: 1px solid #d7b797;
  border-radius: 6px;
  box-shadow:
    inset 0 1px #fff,
    0 1px 1px #9b754515;
}
.name-entry:focus-within {
  border-color: #c38b3a;
  box-shadow: 0 0 0 2px #f1c16750;
}
.name-entry input {
  background: transparent;
  border: 0;
  outline: 0;
  color: #503725;
  padding: 8px 36px 8px 12px;
  font-size: 14px;
  font-weight: 700;
  width: 100%;
  min-width: 0;
}
.name-entry input::placeholder {
  color: #998673;
  font-weight: 600;
}
.remove-name {
  position: absolute;
  right: 6px;
  width: 26px;
  height: 26px;
  background: none;
  color: #8c7864;
  font-size: 23px;
  line-height: 1;
  border-radius: 4px;
}
.remove-name:hover {
  background: #d8b69838;
  color: #a43e28;
}
#addNameBtn {
  width: 100%;
  margin-top: 7px;
  padding: 8px;
  border: 1px dashed #c49c71;
  border-radius: 6px;
  background: #ebd1ad20;
  color: #92704c;
  font-size: 12px;
  font-weight: 800;
  min-height: 35px;
}
#addNameBtn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #967750;
  color: #fff2d8;
  border-radius: 50%;
  width: 19px;
  height: 19px;
  font-size: 20px;
  margin-right: 9px;
  vertical-align: -2px;
}
#addNameBtn:hover {
  background: #e4c18d50;
  color: #604322;
}
#bulkNames label {
  font:
    800 12px "Nunito Sans",
    sans-serif;
  margin-bottom: 6px;
  color: #785b3e;
}
#setup #names {
  width: 100%;
  height: 240px;
  min-height: 180px;
  margin: 0;
  padding: 10px 12px;
  line-height: 1.8;
  font:
    600 16px/1.8 "Nunito Sans",
    sans-serif;
  background: #fffbf2;
  color: #503725;
  border: 1px solid #d2af85;
  border-radius: 5px;
  resize: vertical;
}
#setup #names:focus {
  outline: 3px solid #e6b74c70;
  outline-offset: 1px;
  border-color: #be873b;
}
#namesHint {
  margin-top: 7px;
  color: #8b6a48;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.bracket {
  position: absolute;
  width: 31px;
  height: 43px;
  border: 2px solid #5f574c;
  border-radius: 6px;
  background: linear-gradient(120deg, #c7c5bd, #a6a69e 50%, #dedacf);
  box-shadow:
    inset 0 2px #fff8df,
    0 3px 0 #54402b;
  z-index: 2;
  pointer-events: none;
}
.bracket::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7e807e;
  box-shadow:
    inset 0 1px 1px #30322f,
    0 1px #fff8df;
}
.bracket.tl {
  top: -7px;
  left: -11px;
}
.bracket.tr {
  top: -7px;
  right: -11px;
}
.bracket.bl {
  bottom: -5px;
  left: -11px;
  height: 35px;
}
.bracket.br {
  bottom: -5px;
  right: -11px;
  height: 35px;
}
.royal-banner {
  position: absolute;
  top: 6px;
  width: 55px;
  height: 124px;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #edba4d;
  font-size: 30px;
  background: linear-gradient(90deg, #173f77, #2d66a7 50%, #234e8b);
  border-left: 4px solid #c58d35;
  border-right: 4px solid #f1c063;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 83%, 0 100%);
  filter: drop-shadow(1px 3px 1px #4e321c);
}
.royal-banner.left {
  left: -69px;
}
.royal-banner.right {
  right: -69px;
}
.arena-picker {
  padding: 8px 13px 11px;
}
.wood-label {
  font-family: "Lilita One", sans-serif;
  display: block;
  position: relative;
  margin: -2px auto 9px;
  padding: 5px 20px;
  width: max-content;
  max-width: 90%;
  border: 2px solid #65391f;
  border-radius: 6px;
  color: #fff3d6;
  background: linear-gradient(#aa703e, #814622);
  box-shadow:
    inset 0 1px #e0aa68,
    0 2px #5b311c;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.3px;
  text-shadow: 0 2px #593318;
  text-transform: uppercase;
  text-align: center;
}
.arena-picker .wood-label {
  margin-top: -12px;
}
#setup .map-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}
#setup .mapbtn {
  min-width: 0;
  position: relative;
  height: 111px;
  padding: 0;
  overflow: hidden;
  border: 2px solid #f9e0b4;
  border-radius: 9px;
  box-shadow: 0 3px 0 #422719;
  color: #fffaf1;
  background: #694c32;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.arena-art {
  position: absolute;
  inset: 0;
  background-image: url("/design/arena-cards.jpg");
  background-size: 300% auto;
  background-repeat: no-repeat;
  transition: transform 0.25s;
}
.arena-art.colosseum {
  background-position: 0 50%;
}
.arena-art.forest {
  background-position: 50% 50%;
}
.arena-art.castle {
  background-position: 100% 50%;
}
.arena-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 2px;
  background: linear-gradient(#42321abf, #352613ee);
  font:
    400 17px/1.1 "Lilita One",
    sans-serif;
  text-shadow: 0 2px 2px #1d160e;
}
#setup .mapbtn:hover {
  transform: translateY(-2px);
}
#setup .mapbtn:hover .arena-art {
  transform: scale(1.06);
}
#setup .mapbtn.on {
  border-color: #fff;
  background: #4c98b5;
  box-shadow:
    0 0 0 3px #31c9ff,
    0 0 16px 3px #28c7ffac,
    0 3px 0 #23566a;
}
.arena-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  gap: 8px;
}
#setup .mapbtn.random-map {
  height: auto;
  padding: 4px 8px;
  border: 1px solid #d5b48e66;
  box-shadow: none;
  border-radius: 4px;
  background: #623d2777;
  font:
    800 10px/1.3 "Nunito Sans",
    sans-serif;
  letter-spacing: 0;
}
#setup .mapbtn.random-map.on {
  background: #f5d68c;
  color: #57371c;
  border-color: #ffe3a5;
  box-shadow: 0 1px 0 #4d2b16;
}
.arena-hint {
  color: #f6dfb9;
  font-size: 10px;
  font-weight: 700;
  text-shadow: 0 1px #5c321c;
}
#setup .view-row {
  margin: 0;
  padding: 9px 11px 7px;
  border: 0;
  border-top: 1px solid #bd8b5455;
  border-radius: 0;
  background: #f7e7c5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
#setup .view-row .map-label {
  font:
    900 10px "Nunito Sans",
    sans-serif;
  color: #896343;
  letter-spacing: 0.5px;
  margin: 0 7px 0 0;
}
#setup .viewbtn {
  background: #e7d3ae;
  color: #94734c;
  border: 1px solid #c8ab7e;
  padding: 5px 10px;
  border-radius: 4px;
  font:
    900 10px/1.5 "Nunito Sans",
    sans-serif;
  box-shadow: 0 1px #fff4d9;
  letter-spacing: 0.4px;
}
#setup .viewbtn[aria-pressed="true"] {
  background: linear-gradient(#6d93b8, #386594);
  color: #fff8e9;
  border-color: #305880;
  box-shadow:
    inset 0 1px #a5c6df,
    0 1px 1px #714b2333;
}
#setup .view-note {
  font-size: 10px;
  color: #99734f;
  font-weight: 700;
  text-align: center;
  flex: 1 1 100%;
  line-height: 1.5;
}
#modeStatus {
  margin: 6px 14px !important;
  color: #b34326 !important;
  font-size: 12px !important;
}
.start-plinth {
  width: min(556px, 100%);
  padding: 13px 25px 0;
  position: relative;
  flex-shrink: 0;
}
.start-plinth::before {
  content: "";
  position: absolute;
  inset: 5px -17px 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #e0c9a4, #b4956d);
  border: 2px solid #a3855f;
  box-shadow:
    inset 0 3px #f7e3bc,
    0 3px 0 #775b3b;
  z-index: -1;
  clip-path: polygon(5% 13%, 13% 13%, 16% 0, 84% 0, 87% 13%, 95% 13%, 100% 100%, 0 100%);
}
#setup .battle-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 19px;
  width: 100%;
  min-height: 76px;
  margin: 0;
  padding: 12px 15px;
  border: 3px solid #4f2c0e;
  border-radius: 18px;
  background: linear-gradient(#ffe961, #ffca19 52%, #ffb00b);
  color: #462800;
  box-shadow:
    inset 0 3px #fff5a0,
    inset 0 -4px #e78b00,
    0 5px 0 #8d4d09,
    0 8px 0 #4e2e10,
    0 10px 15px #62351344;
  text-shadow: 0 2px #ffea6d;
  font:
    400 clamp(23px, 4vw, 34px)/1.1 "Lilita One",
    sans-serif;
  letter-spacing: 0.6px;
  transition:
    transform 0.1s,
    filter 0.1s;
}
.battle-start .start-swords {
  font-family: "Segoe UI Symbol", sans-serif;
  font-size: 40px;
  color: #4a2c04;
  text-shadow: 1px 2px #ffdf47;
}
#setup .battle-start:hover:enabled {
  filter: brightness(1.07);
  transform: translateY(-2px);
}
#setup .battle-start:active:enabled {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px #fff5a0,
    inset 0 -3px #e78b00,
    0 2px 0 #8d4d09;
}
#setup .battle-start:disabled {
  opacity: 1;
  filter: saturate(0.72);
  cursor: not-allowed;
  color: #7d5c23;
}
.setup-actions {
  width: min(556px, 100%);
  display: flex;
  justify-content: center;
  gap: 4px 18px;
  flex-wrap: wrap;
  margin: 19px 0 10px;
  flex-shrink: 0;
}
#setup .setup-actions .btn {
  background: none;
  min-height: 23px;
  margin: 0;
  padding: 2px 0;
  box-shadow: none;
  color: #fff7e3;
  text-shadow:
    0 1px 3px #4f2b12,
    0 0 6px #4e2a17;
  font:
    900 11px/1.5 "Nunito Sans",
    sans-serif;
  letter-spacing: 0;
  border-bottom: 1px solid #fff1c282;
  border-radius: 0;
}
#setup .setup-actions .btn:hover {
  color: #ffe089;
}
#setup .setup-actions .btn:disabled {
  opacity: 0.55;
}
.feature-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(860px, 100%);
  margin: 7px 0 14px;
  flex-shrink: 0;
}
.feature-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 17px;
  border: 2px solid #c3a279;
  border-radius: 8px;
  background: radial-gradient(ellipse at center, #fff6e4, #f0dbb8);
  box-shadow:
    inset 0 2px #fff8e8,
    0 3px 0 #9e7c51,
    0 5px 8px #61432133;
}
.feature-icon {
  font-family: "Segoe UI Emoji", sans-serif;
  font-size: 35px;
  filter: drop-shadow(0 2px 1px #75542d44);
}
.feature-tile h3 {
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  margin: 0 0 3px;
}
.feature-tile p {
  font-size: 12px;
  line-height: 1.35;
  color: #75573d;
  font-weight: 700;
  margin: 0;
}
.champions-board {
  width: min(860px, 100%);
  position: relative;
  margin: 4px 0 13px;
  padding: 14px 15px 12px;
  border: 5px solid #8b532b;
  border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, #fff0dc00 0 38px, #93643928 39px, #fff0dc70 42px), #d2b48c;
  box-shadow:
    inset 0 2px #ebc896,
    0 3px 0 #543018,
    0 5px 8px #4a2d1833;
  flex-shrink: 0;
}
.champions-board > .wood-label {
  margin-top: -30px;
  margin-bottom: 9px;
  min-width: 230px;
}
#recentChampions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.champion-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  background: linear-gradient(#fff5df, #e8ccaa);
  border: 1px solid #ae8a5d;
  border-radius: 6px;
  box-shadow:
    inset 0 1px #fff9e8,
    0 2px 1px #70472155;
}
.champion-avatar {
  position: relative;
  width: 43px;
  height: 48px;
  flex-shrink: 0;
  border: 2px solid #a17943;
  border-radius: 6px;
  background: linear-gradient(135deg, #a7bd7e, #6f8d6a);
  overflow: hidden;
}
.champion-avatar canvas {
  width: 40px;
  height: 45px;
  image-rendering: pixelated;
}
.champion-copy {
  min-width: 0;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 700;
  color: #765735;
}
.champion-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
  color: #412810;
}
.champion-copy time {
  font-size: 9px;
  color: #9e7c55;
}
.champions-empty {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 6px;
  min-height: 54px;
  font-size: 12px;
  font-weight: 800;
  color: #8e6b45;
  text-align: center;
}
.champions-empty span {
  font-family: "Segoe UI Emoji", sans-serif;
  font-size: 29px;
}
.setup-details {
  width: min(860px, 100%);
  padding: 10px 15px;
  border: 1px solid #a87e4c;
  border-radius: 6px;
  background: #fff0d8e8;
  box-shadow: 0 2px 0 #98744666;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  margin-bottom: 8px;
}
.setup-details summary {
  cursor: pointer;
  color: #795432;
  list-style-position: inside;
}
#setup .legend {
  color: #765b40;
  font-family: "Nunito Sans", sans-serif;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0;
  border: 1px solid #c9aa80;
  background: #e5ceaa33;
  border-radius: 5px;
  margin: 12px 0;
  padding: 12px;
  font-weight: 600;
}
#setup .legend b {
  color: #53361d;
}
#setup .legend .lg-title {
  font-size: 12px;
  color: #62441f;
  font-family: "Lilita One", sans-serif;
}
#setup .roster-label {
  width: 100%;
  margin: 14px 0;
  color: #795735;
  font:
    900 12px/1.5 "Nunito Sans",
    sans-serif;
  letter-spacing: 0;
  gap: 5px;
}
#setup #roster {
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 9px;
  margin-top: 10px;
}
#setup .fighter-chip {
  background: #f4e1bf;
  border: 1px solid #b89b70;
  border-radius: 7px;
  box-shadow: inset 0 1px #fff3dc;
  padding: 10px 7px;
  gap: 7px;
}
#setup .fighter-chip span {
  font:
    800 12px "Nunito Sans",
    sans-serif;
  color: #6a4a2b;
}
#setup .add-btn {
  font:
    900 10px "Nunito Sans",
    sans-serif;
  color: #875c2e;
  background: #e3c798;
  border-color: #bc955f;
  border-radius: 4px;
}
#setup .fighter-chip canvas {
  width: 67px;
  height: 75px;
}
#setup .active-tag {
  background: #fff2d7;
  border-width: 1px;
  border-radius: 4px;
  color: #6b4628;
}
.setup-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  font-size: 11px;
  color: #fff8e3;
  font-weight: 800;
  text-shadow: 0 1px 3px #4e3117;
  flex-shrink: 0;
}
.setup-footer a {
  color: #fff8e3;
  text-decoration: none;
  border-bottom: 1px solid #f7e2b08c;
  padding-bottom: 2px;
}
.setup-footer a:hover {
  color: #ffdf68;
}
#battleLinkPanel {
  width: min(556px, 100%);
  background: #fff0d9ed;
  border: 2px solid #bd9868;
  border-radius: 6px;
  padding: 13px;
  margin: 8px 0;
  font:
    700 12px "Nunito Sans",
    sans-serif;
  flex-shrink: 0;
}
#battleLinkPanel label {
  font-size: 12px;
  color: #705031;
  font-weight: 900;
  margin: 0 0 7px;
  display: block;
}
#battleLinkUrl {
  background: #fff9ee;
  color: #67482c;
  border: 1px solid #c7a579;
  border-radius: 4px;
  font-size: 12px;
  height: 37px;
}
#setup #battleLinkPanel .btn {
  font:
    900 11px "Nunito Sans",
    sans-serif;
  min-height: 32px;
  padding: 7px 12px;
  background: #d9ba86;
  color: #65441e;
  box-shadow: 0 2px 0 #95713c;
  border-radius: 4px;
  letter-spacing: 0;
}
#setup #battleLinkStatus {
  max-width: 550px;
  flex-shrink: 0;
  color: #fff8e8;
  font:
    800 12px/1.5 "Nunito Sans",
    sans-serif;
  margin: 0 0 8px;
  text-shadow: 0 1px 3px #4d2d12;
  text-align: center;
}
.guide-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(540px, calc(100% - 30px));
  max-height: 85dvh;
  padding: 29px;
  color: #5a3c20;
  border: 7px solid #8f522b;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, #fff7e6, #f1d8af);
  box-shadow:
    inset 0 0 0 2px #d5aa70,
    0 15px 60px #24130688;
  font:
    700 14px/1.7 "Nunito Sans",
    sans-serif;
}
.guide-dialog::backdrop {
  background: #20130c99;
  backdrop-filter: blur(4px);
}
.guide-dialog h2 {
  font:
    400 27px "Lilita One",
    sans-serif;
  margin: 0 35px 13px 0;
  color: #4b2c11;
}
.guide-dialog h3 {
  font:
    900 15px "Nunito Sans",
    sans-serif;
  margin: 16px 0 5px;
  color: #593915;
}
.guide-dialog ol {
  padding-left: 21px;
}
.guide-dialog p {
  margin-bottom: 9px;
}
.guide-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  font:
    25px/1 "Nunito Sans",
    sans-serif;
  border: 1px solid #c49c68;
  border-radius: 4px;
  color: #7d5631;
  background: #ead0a8;
}
#abilModal {
  font-family: "Nunito Sans", sans-serif;
}
#abilModal .modal-card {
  background: #fff1d5;
  border: 5px solid #976136;
  border-radius: 10px;
  color: #65451f;
}
#abilModal .modal-title,
#abilModal .modal-title b {
  color: #68421c;
  font-family: "Lilita One", sans-serif;
  letter-spacing: 0;
}
#abilModal .abil-row {
  background: #eed9b7;
  border: 1px solid #c5a379;
  border-radius: 5px;
  font-family: "Nunito Sans", sans-serif;
  color: #684825;
}
#abilModal .abil-row.on {
  background: #fff5df;
}
#abilModal .abil-name {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0;
  color: #60451d;
}
#abilModal .abil-desc,
#abilModal .modal-foot {
  font-family: "Nunito Sans", sans-serif;
  color: #8a6a42;
  font-size: 12px;
}
#abilModal .abil-icon {
  background: #fff4d9;
  border-radius: 6px;
  border-width: 1px;
}
#abilModal .abil-state {
  font:
    800 10px "Nunito Sans",
    sans-serif;
  color: #866642;
  border-color: #b59a70;
}
@media (min-width: 900px) and (max-height: 850px) {
  #setup {
    padding-top: 7px;
  }
  .brand-header img {
    height: 120px;
  }
  .brand-tagline {
    font-size: 10px;
    margin-top: -1px;
  }
  .wood-nav {
    min-height: 48px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .wood-nav button {
    font-size: 13px;
    padding: 5px;
  }
  .parchment {
    padding-top: 13px;
    padding-bottom: 10px;
  }
  .entry-title {
    font-size: 19px;
    margin-bottom: 8px;
  }
  .name-entry {
    min-height: 31px;
  }
  .name-entry input {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .name-toolbar {
    margin-bottom: 4px;
  }
  #nameRows {
    gap: 5px;
  }
  #addNameBtn {
    padding: 5px;
    min-height: 29px;
  }
  .arena-picker {
    padding-bottom: 8px;
  }
  #setup .mapbtn {
    height: 91px;
  }
  #setup .view-row {
    padding-top: 6px;
    padding-bottom: 4px;
  }
  .start-plinth {
    padding-top: 10px;
  }
  #setup .battle-start {
    min-height: 64px;
    font-size: 29px;
  }
  .feature-tile {
    padding: 10px 14px;
  }
  .feature-strip {
    margin-top: 3px;
  }
  .setup-actions {
    margin-top: 15px;
    margin-bottom: 7px;
  }
}
@media (max-width: 760px) {
  #setup {
    padding: 12px 16px 26px;
    background-attachment: scroll;
    background-position: center top;
  }
  .brand-header {
    width: min(500px, 95%);
    margin-bottom: 0;
  }
  .brand-header img {
    height: 137px;
  }
  .brand-tagline {
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  .wood-nav {
    width: min(600px, 100%);
    gap: 4px;
    padding: 7px 14px;
    min-height: 49px;
  }
  .wood-nav button {
    font-size: 12px;
    padding: 6px 3px;
  }
  .nav-symbol {
    font-size: 18px;
    margin-right: 3px;
  }
  .wood-nav::before,
  .wood-nav::after {
    width: 17px;
  }
  .parchment {
    padding: 17px 25px 12px;
  }
  .entry-title {
    font-size: 20px;
  }
  .royal-banner {
    width: 36px;
    height: 88px;
    font-size: 23px;
  }
  .royal-banner.left {
    left: -45px;
  }
  .royal-banner.right {
    right: -45px;
  }
  .feature-tile {
    padding: 10px;
    gap: 7px;
  }
  .feature-icon {
    font-size: 27px;
  }
  .feature-tile h3 {
    font-size: 15px;
  }
  .feature-tile p {
    font-size: 11px;
  }
  .champions-board {
    margin-top: 7px;
  }
  #recentChampions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  #setup {
    padding-left: 12px;
    padding-right: 12px;
  }
  .brand-header img {
    height: 118px;
  }
  .brand-tagline {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .wood-nav {
    gap: 4px;
    padding: 7px 9px;
    border-width: 2px;
  }
  .wood-nav button {
    font-size: 11px;
  }
  .nav-symbol {
    font-size: 16px;
    margin-right: 1px;
  }
  #setup .setup-card {
    border-width: 5px;
  }
  .parchment {
    margin: 4px 5px 0;
    padding: 17px 13px 12px;
  }
  .entry-title {
    font-size: 18px;
  }
  .royal-banner {
    display: none;
  }
  .arena-picker {
    padding: 8px 8px 9px;
  }
  #setup .map-row {
    gap: 8px;
  }
  #setup .mapbtn {
    height: 95px;
  }
  .arena-name {
    font-size: 15px;
  }
  .wood-label {
    font-size: 16px;
    padding: 5px 17px;
  }
  .bracket {
    width: 23px;
    height: 34px;
  }
  .bracket::after {
    left: 6px;
    top: 8px;
    width: 6px;
    height: 6px;
  }
  .bracket.tl,
  .bracket.bl {
    left: -7px;
  }
  .bracket.tr,
  .bracket.br {
    right: -7px;
  }
  #setup .view-row .map-label {
    margin-right: 3px;
    font-size: 9px;
  }
  #setup .viewbtn {
    font-size: 10px;
    padding: 5px 8px;
  }
  .start-plinth {
    padding-left: 13px;
    padding-right: 13px;
  }
  .start-plinth::before {
    left: 0;
    right: 0;
  }
  #setup .battle-start {
    min-height: 67px;
    font-size: 28px;
    gap: 12px;
  }
  .battle-start .start-swords {
    font-size: 32px;
  }
  .setup-actions {
    gap: 5px 12px;
  }
  #setup .setup-actions .btn {
    font-size: 10px;
  }
  .feature-strip {
    gap: 6px;
  }
  .feature-tile {
    flex-direction: column;
    gap: 4px;
    padding: 9px 5px;
    text-align: center;
  }
  .feature-icon {
    font-size: 29px;
  }
  .feature-tile h3 {
    font-size: 14px;
  }
  .feature-tile p {
    font-size: 10px;
    line-height: 1.3;
  }
  .champions-board {
    padding: 13px 9px 9px;
  }
  .champions-board > .wood-label {
    min-width: 190px;
  }
  .champions-empty {
    font-size: 11px;
    padding: 5px;
    gap: 7px;
  }
  .setup-footer {
    font-size: 10px;
    gap: 10px;
  }
  .champion-card {
    padding: 6px;
    gap: 6px;
  }
  .champion-copy strong {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #setup {
    scroll-behavior: auto;
  }
  #setup .mapbtn,
  #setup .arena-art,
  #setup .battle-start {
    transition: none;
  }
}

@media (max-width: 700px) {
  .royal-banner {
    display: none;
  }
}

@media (max-width: 360px) {
  .wood-nav button {
    font-size: 10px;
  }
  .wood-nav .nav-symbol {
    font-size: 13px;
  }
}

.guide-dialog a {
  color: #94622d;
  font-weight: 900;
}