* { box-sizing: border-box; font-family: "Comic Sans MS"; }
body {
  min-height: 100vh;
  margin: 0;
  padding: 3rem 2rem;
  color: #210052;
  background: repeating-linear-gradient(135deg, #fffb00 0 25px, #ff75d8 25px 50px, #4dfcff 50px 75px);
  overflow-x: hidden;
}
.mode-toggle { position: fixed; top: .75rem; right: .9rem; z-index: 20; display: flex; align-items: center; gap: .45rem; padding: .45rem .7rem; color: #210052; background: #fffad1; border: 4px solid #5426b9; box-shadow: 4px 4px 0 #e4007c; font-size: .85rem; font-weight: bold; cursor: pointer; }
.mode-toggle input { width: 1.1rem; height: 1.1rem; accent-color: #5426b9; }
.evil-reveal, .evil-warlocks, .graph-side-gifs { display: none; }
.evil-banner { margin: 1rem 0; padding: .7rem 1rem; color: #ffb7e5; background: #1d0925; border: 5px double #ff258f; box-shadow: 6px 6px 0 #6300a3; font-size: 1.15rem; font-weight: bold; letter-spacing: .08em; text-align: center; }
.evil-warlocks { align-items: center; justify-content: space-around; gap: 1rem; margin: 1rem auto 1.5rem; padding: .75rem; background: #100817; border: 6px solid #6300a3; box-shadow: 8px 8px 0 #7d003f; }
.evil-warlocks img { display: block; width: min(42%, 260px); height: 180px; object-fit: cover; border: 3px solid #ff258f; }
.graph-side-gifs { align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin: 1.25rem 0; }
.graph-side-gifs img { z-index: 1; width: 150px; height: 150px; object-fit: cover; border: 4px solid #ff258f; box-shadow: 6px 6px 0 #6300a3; }
main {
  position: relative;
  z-index: 2;
  max-width: 1050px;
  margin: auto;
}
.title-box {
  position: relative;
  padding: 1.5rem;
  text-align: center;
  background: #7dff53;
  border: 8px ridge #7437ff;
  box-shadow: 13px 13px 0 #ff3e00;
  transform: rotate(-1deg);
}
.alliance-logo { position: absolute; left: 1rem; top: 50%; width: 105px; height: 125px; transform: translateY(-50%) rotate(-6deg); filter: drop-shadow(5px 5px 0 #ff63cc); }
.eyebrow { color: #e00078; font-size: 1.2rem; letter-spacing: .15em; }
h1 { margin: .25rem 0; color: #3820c9; font-size: clamp(2rem, 7vw, 4.5rem); text-shadow: 3px 3px #ff63cc; }
.guild-name { display: block; width: min(100%, 399px); height: auto; margin: .25rem auto; image-rendering: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wacky-strip { display: flex; justify-content: space-around; gap: 1rem; margin: 2.5rem 0 1.5rem; color: white; font-size: 1.1rem; }
.wacky-strip div { padding: .6rem 1rem; background: #f00081; border: 4px dashed #fff700; transform: rotate(3deg); }
.wacky-strip div:nth-child(2) { background: #5926d9; transform: rotate(-8deg) scale(1.4); }
.shoutbox { margin: 1.2rem 0 1.5rem; padding: .8rem; background: #ff9f1c; border: 6px dotted #1428bf; box-shadow: -7px 7px 0 #00b853; }
.shoutbox-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.shoutbox h2 { margin: 0; color: #3f1bb3; font-size: 1.35rem; }
.shoutbox-heading span { color: #5d257d; font-size: .8rem; font-weight: bold; }
.shoutbox-messages { display: grid; gap: .3rem; max-height: 9rem; min-height: 2.5rem; margin: .6rem 0; padding: .45rem; overflow-y: auto; background: #fffad1; border: 3px solid #5426b9; }
.shoutbox-message { display: flex; gap: .55rem; padding: .25rem .35rem; font-size: .88rem; }
.shoutbox-message:nth-child(odd) { background: #fff59b; }
.shoutbox-message strong { flex: 0 0 auto; color: #d4006f; }
.shoutbox-message span { overflow-wrap: anywhere; }
.shoutbox-form { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: .5rem; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.shoutbox-form input { min-width: 0; padding: .45rem; border-width: 3px; }
.shoutbox-form button { padding: .45rem .8rem; }
form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
  margin: 2rem 0;
  padding: 1.4rem;
  background: #ff9f1c;
  border: 7px dotted #1428bf;
  box-shadow: -10px 10px 0 #00b853;
}
label { display: grid; flex: 1 1 150px; gap: .3rem; color: #3a006b; font-weight: bold; }
input, select, button { font-size: 1rem; padding: .6rem; border: 4px solid #5426b9; background: #fffad1; }
button { color: white; background: #e4007c; cursor: pointer; box-shadow: 4px 4px 0 #1622a2; transform: rotate(-2deg); }
button:hover { color: #191064; background: #7dff53; transform: rotate(2deg) scale(1.08); }
.roster-box { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: 1rem max(1rem, calc((100vw - 1400px) / 2)); overflow-x: hidden; background: #b8fffb; border: 8px groove #ff1783; border-left: 0; border-right: 0; transform: none; }
.sheet-help { position: sticky; left: 0; margin-bottom: .7rem; color: #31117e; font-weight: bold; }
table { border-collapse: collapse; width: 100%; min-width: 0; background: #fff; table-layout: fixed; }
th, td { border: 2px solid #777; padding: 0; text-align: left; }
th { color: #fff; background: #4030bd; }
.spreadsheet th { height: 38px; padding: .4rem; text-align: center; }
.spreadsheet th:nth-child(1) { width: 3%; }
.spreadsheet th:nth-child(2) { width: 6%; }
.spreadsheet th:nth-child(3), .spreadsheet th:nth-child(4) { width: 12%; }
.spreadsheet th:nth-child(5), .spreadsheet th:nth-child(6) { width: 10%; }
.spreadsheet th:nth-child(7) { width: 9%; }
.spreadsheet th:nth-child(8) { width: 15%; }
.spreadsheet th:nth-child(9) { width: 17%; }
.spreadsheet th:nth-child(10) { width: 12%; }
.spreadsheet input, .spreadsheet select { width: 100%; height: 54px; padding: .45rem; border: 0; outline: 0; background: transparent; }
.spreadsheet input:focus, .spreadsheet select:focus { background: #fff; box-shadow: inset 0 0 0 4px #087cff; }
.choice-with-icon { display: flex; align-items: center; min-width: 0; }
.choice-with-icon select { min-width: 0; flex: 1; }
.cell-icon { flex: 0 0 30px; width: 30px; height: 30px; margin-left: .25rem; }
.row-number { color: #333; text-align: center; background: #d8d8d8 !important; }
.image-cell { text-align: center; background: #fff !important; }
.character-image { display: block; width: 54px; height: 54px; margin: auto; object-fit: cover; }
.row-actions { display: flex; gap: .35rem; padding: .35rem; }
.row-actions button { flex: 1; padding: .35rem; font-size: .75rem; box-shadow: 2px 2px 0 #1622a2; }
.url-cell input { font-size: .78rem; }
#add-rows { position: sticky; left: 0; margin-top: 1rem; }
tbody tr:nth-child(odd) { background: #fff59b; }
tbody tr:nth-child(even) { background: #ffb8e3; }
#message { min-height: 1.5rem; padding: .4rem 1rem; color: #121b8b; font-size: 1.15rem; font-weight: bold; background: #76ff52; border: 3px solid #ff2d9b; }
.error { color: #fff !important; background: #c90042 !important; }
#sync-status { margin: .5rem 0 1rem; color: #5d257d; font-size: .9rem; font-weight: bold; }
.sync-live { color: #087c38 !important; }
.sync-offline { color: #a44a00 !important; }
.chart-section { margin: 2rem 0; padding: 1rem 1.25rem 1.25rem; background: #fffad1; border: 7px ridge #7437ff; box-shadow: 10px 10px 0 #ff3e00; }
.chart-section:nth-of-type(even) { background: #d7ffca; transform: rotate(-.4deg); }
.chart-section h2 { margin: 0; color: #3f1bb3; font-size: 1.4rem; }
.chart-subtitle { margin: .15rem 0 1rem; color: #5d257d; font-size: .85rem; }
.chart-nonsense h2 { color: #d4006f; }
.chart { display: grid; gap: .2rem; max-width: 900px; }
.chart-axis-wrap { display: grid; grid-template-columns: 1rem minmax(0, 1fr); height: 12rem; }
.chart-y-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: end; padding-right: .2rem; color: #21105f; font-size: .7rem; border-right: 3px solid #21105f; }
.chart-plot { display: flex; align-items: stretch; gap: .8rem; min-width: 0; height: 100%; padding: .25rem .75rem 0; border-bottom: 3px solid #21105f; background: repeating-linear-gradient(to top, transparent 0 24%, #f0b5df 24% 25%); }
.chart-line { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; flex: 1 1 0; align-items: end; justify-items: center; min-width: 0; height: 100%; font-size: .8rem; }
.chart-label { overflow: hidden; max-width: 7rem; margin-top: .35rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.chart-track { display: flex; align-items: end; width: min(2.2rem, 70%); height: 100%; overflow: hidden; background: #ffc1e9; }
.chart-fill { display: block; width: 100%; min-height: 0; background: #5426b9; }
.chart-value { color: #3f1bb3; text-align: center; }
.chart-x-axis { margin-left: 1rem; padding: .2rem .75rem 0; color: #21105f; font-size: .72rem; text-align: center; }
.sticker { position: absolute; top: -28px; right: -18px; z-index: 3; padding: .6rem; color: #fff; background: #ff4300; border: 5px double #fff600; border-radius: 50%; transform: rotate(15deg); }
.blob { position: fixed; z-index: 1; padding: 1rem; font-size: 1.6rem; font-weight: bold; border-radius: 45% 55% 60% 40%; }
.blob-one { top: 2%; left: 1%; color: #fff; background: #f00081; transform: rotate(-18deg); }
.blob-two { right: 2%; bottom: 4%; color: #31006f; background: #7dff53; font-size: 4rem; transform: rotate(12deg); }
.blob-three { top: 42%; right: -12px; color: #fff700; background: #2531be; transform: rotate(22deg); }
.brad-cameo { position: fixed; left: max(0px, calc(50% - 900px)); bottom: 8px; z-index: 4; width: 150px; padding: .35rem; color: #fff; text-align: center; background: #e4007c; border: 5px dashed #fff700; box-shadow: 6px 6px 0 #4020ad; transform: rotate(-3deg); }
.brad-cameo img { display: block; width: 100%; height: 150px; object-fit: contain; object-position: bottom; }
.brad-cameo div { font-size: .8rem; }
.brad-dismiss { position: absolute; top: -13px; right: -13px; z-index: 2; width: 28px; height: 28px; padding: 0; color: #fff; background: #121b8b; border: 3px solid #fff700; border-radius: 50%; font: 700 16px/20px "Comic Sans MS", cursive; cursor: pointer; }
.brad-dismiss:hover { color: #121b8b; background: #fff700; }
.confetti div { position: fixed; z-index: 0; font-size: 2rem; color: #e00078; }
.confetti div:nth-child(1) { top: 18%; left: 4%; }
.confetti div:nth-child(2) { top: 70%; left: 2%; color: #143dcc; }
.confetti div:nth-child(3) { top: 8%; right: 15%; color: #e73d00; }
.confetti div:nth-child(4) { bottom: 8%; left: 18%; color: #6d24c7; }
.confetti div:nth-child(5) { top: 58%; right: 5%; color: #d4006f; }
@media (max-width: 700px) {
  body { padding: 1.5rem .75rem; }
  .wacky-strip { flex-wrap: wrap; }
  .alliance-logo { position: static; width: 70px; height: 82px; transform: rotate(-6deg); }
  .brad-cameo { position: relative; left: auto; bottom: auto; width: 135px; margin: 0 auto 1rem; }
  .blob { opacity: .55; }
}

@media (max-width: 900px) {
  .shoutbox-form { grid-template-columns: 1fr 1fr; }
  .shoutbox-form button { grid-column: 1 / -1; }
  .roster-box { width: 100vw; margin-left: calc(50% - 50vw); padding: .65rem; }
  .spreadsheet, .spreadsheet tbody, .spreadsheet tr, .spreadsheet td { display: block; }
  .spreadsheet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .spreadsheet tr { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 .8rem; border: 3px solid #4030bd; box-shadow: 4px 4px 0 #ff1783; }
  .spreadsheet td { display: grid; grid-template-columns: 5.8rem minmax(0, 1fr); align-items: center; min-height: 52px; border-width: 1px 0 0; }
  .spreadsheet td::before { content: attr(data-label); padding: .35rem; color: #4030bd; font-size: .75rem; font-weight: bold; text-transform: uppercase; }
  .spreadsheet .row-number { display: block; grid-column: 1 / -1; min-height: auto; padding: .25rem; text-align: left; }
  .spreadsheet .row-number::before { content: "Row "; display: inline; padding: 0; }
  .spreadsheet .image-cell { display: block; grid-column: 1 / -1; min-height: 74px; padding: .35rem; }
  .spreadsheet .image-cell::before { display: inline-block; width: 5.8rem; vertical-align: top; }
  .spreadsheet .character-image { display: inline-block; vertical-align: middle; }
  .spreadsheet .actions-cell { display: block; grid-column: 1 / -1; padding: .35rem; }
  .spreadsheet .actions-cell::before { display: block; }
  .spreadsheet input, .spreadsheet select { min-width: 0; height: 48px; }
  .spreadsheet .url-cell { grid-column: 1 / -1; }
  .spreadsheet .choice-with-icon { min-width: 0; }
  .spreadsheet .cell-icon { flex-basis: 26px; width: 26px; height: 26px; }
}

@media (max-width: 520px) {
  .shoutbox-form { grid-template-columns: 1fr; }
  .shoutbox-form button { grid-column: auto; }
  .graph-side-gifs img { width: 88px; height: 88px; }
  .chart-plot { gap: .35rem; padding-inline: .25rem; }
  .chart-line { min-width: 0; }
  .chart-track { width: min(1.7rem, 80%); }
  .chart-label { max-width: 4.5rem; font-size: .68rem; }
}

body.evil-mode { color: #f5e8ff; color-scheme: dark; background: repeating-linear-gradient(135deg, #100817 0 25px, #32102d 25px 50px, #171036 50px 75px); }
body.evil-mode .evil-reveal, body.evil-mode .evil-warlocks { display: flex; }
body.evil-mode .graph-side-gifs { display: flex; }
body.evil-mode .evil-reveal { color: #ff72ba; font-weight: 900; letter-spacing: .12em; text-shadow: 2px 2px #45002c; }
body.evil-mode .title-box .evil-reveal { display: block; margin-top: .4rem; }
body.evil-mode .mode-toggle { color: #f5e8ff; background: #241329; border-color: #a0005a; box-shadow: 4px 4px 0 #6300a3; }
body.evil-mode .title-box { background: #21112d; border-color: #8c004f; box-shadow: 13px 13px 0 #50001f; }
body.evil-mode .shoutbox { background: #241329; border-color: #97005b; box-shadow: -7px 7px 0 #6300a3; }
body.evil-mode .shoutbox h2, body.evil-mode .shoutbox-heading span { color: #efb8ff; }
body.evil-mode .shoutbox-messages { background: #130d1d; border-color: #7800a8; }
body.evil-mode .shoutbox-message:nth-child(odd) { background: #30162f; }
body.evil-mode .shoutbox-message strong { color: #ff72ba; }
body.evil-mode .alliance-logo { filter: grayscale(.7) hue-rotate(190deg) drop-shadow(5px 5px 0 #a0005a); }
body.evil-mode h1 { color: #f1b8ff; text-shadow: 3px 3px #8f0058; }
body.evil-mode .eyebrow { color: #ff5cba; }
body.evil-mode .wacky-strip div { background: #71003f; border-color: #ff5cba; }
body.evil-mode .wacky-strip div:nth-child(2) { background: #3d1975; }
body.evil-mode #message { color: #ffeafa; background: #43133f; border-color: #d00071; }
body.evil-mode #sync-status { color: #e7bbff; }
body.evil-mode .sync-live { color: #70ffba !important; }
body.evil-mode .sync-offline { color: #ffb36b !important; }
body.evil-mode .roster-box { background: #1c1428; border-color: #97005b; }
body.evil-mode table { background: #130d1d; }
body.evil-mode th { background: #4b123f; }
body.evil-mode td { border-color: #5a4767; color: #f5e8ff; }
body.evil-mode tbody tr:nth-child(odd) { background: #291934; }
body.evil-mode tbody tr:nth-child(even) { background: #372036; }
body.evil-mode .row-number { color: #f5e8ff; background: #493050 !important; }
body.evil-mode .image-cell { background: #21152b !important; }
body.evil-mode input, body.evil-mode select { color: #f5e8ff; background: #21152b; }
body.evil-mode .spreadsheet input, body.evil-mode .spreadsheet select { color: #f5e8ff; background: #21152b; }
body.evil-mode .spreadsheet input:focus, body.evil-mode .spreadsheet select:focus { color: #fff; background: #382044; box-shadow: inset 0 0 0 4px #ff3b9d; }
body.evil-mode option { color: #f5e8ff; background: #21152b; }
body.evil-mode .chart-section { background: #21142c; border-color: #7800a8; box-shadow: 10px 10px 0 #50001f; }
body.evil-mode .chart-section:nth-of-type(even) { background: #28172f; }
body.evil-mode .chart-section h2 { color: #efb8ff; }
body.evil-mode .chart-nonsense h2 { color: #ff72ba; }
body.evil-mode .chart-subtitle, body.evil-mode .chart-label, body.evil-mode .chart-value, body.evil-mode .chart-y-axis, body.evil-mode .chart-x-axis { color: #e7caff; }
body.evil-mode .chart-y-axis, body.evil-mode .chart-plot { border-color: #c16bdf; }
body.evil-mode .chart-plot { background: repeating-linear-gradient(to top, transparent 0 24%, #452c57 24% 25%); }
body.evil-mode .chart-track { background: #3b2547; }
body.evil-mode .chart-fill { background: #ff3b9d; }
body.evil-mode button { color: #fff0fb; background: #71003f; border-color: #c10075; }
body.evil-mode button:hover { color: #fff; background: #9b0061; }