*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
  font-family: 'SourGummy';
  src: url('font/SourGummy-Medium.ttf');
}

@font-face {
  font-family: 'EdmundMcMillen';
  src: url('font/EdmundMcMillen_v2.ttf');
}

body {
  font-family: 'SourGummy', sans-serif;
  background: #bbb8b8;
  color: #110;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem 0.5rem;
  min-height: 100vh;
}

/* --- Footer and support --- */

#footer {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: max-content;
  max-width: 90vw;
  align-content: center;
}

#footer p, a {
    text-align: center;
    color: #252525;
    margin: 0;
    font-size: clamp(10px, 3vw, 12px);
}


/* --- Paper wrapper --- */
.paper {
  position: relative;
  width: 100%;
  max-width: 600px;
  min-height: 60vh;
}

.paper-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.container {
  position: relative;
  z-index: 1;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem) clamp(0.75rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem);
}

/* Lock endcap area to a fixed size so the paper never shifts */
#endcap-card {
  min-height: 200px;
}
#endcap-label {
  height: 5vh;
  width: 160px;
  object-fit: contain;
}

/* Endcap title wrapper — background image sits behind the title */
.endcap-title-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.endcap-title-wrapper .endcap-title-bg {
  position: absolute;
  inset: -14px -24px -30px -24px;
  width: calc(100% + 48px);
  height: calc(100% + 44px);
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
}

.endcap-title-wrapper #endcap-label {
  position: relative;
  z-index: 1;
}

/* --- Top bar --- */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.5rem;
  position: relative;
}

h1 { display: none; }

button#options-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
button#options-btn img {
  height: 40px;
  width: auto;
  display: block;
}

/* --- Error banner --- */
#error-msg {
  display: none;
  background: #fff0f0;
  border: 1px solid #f5c0c0;
  color: #c0392b;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 1rem;
  text-align: center;
}
#error-msg.visible { display: block; }

.section-label {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin-bottom: 10px;
}

/* --- Class grid --- */
.grid-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  margin-bottom: 24px;
}

/* grid title image — sits above the postit background, centered */
.grid-title {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 160px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  margin-bottom: clamp(8px, 4vh, 32px);
}

/* postit_classes.png: real <img> tag injected by JS, sits behind the grid */
.grid-bg {
  position: absolute;
  /* match the full 4-card width exactly */
  width: calc(4 * clamp(80px, 22vw, 125px) + 3 * 4px);
  height: auto;           /* natural aspect ratio, no stretching */
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
  /* vertically center on the cards */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.grid {
  /* cards sit within 8.5%–91.5% of the image width (83%) */
  width: calc(0.83 * (4 * clamp(80px, 22vw, 125px) + 3 * 4px));
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.8vw;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0px, 0.2vw, 4px);
  width: clamp(20px, 17vw, 80px);
  flex-shrink: 0;
}

.card .icon-box {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;

}

.card .icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* label hidden — name shown via tooltip instead */
.label { display: none; font-size: clamp(8px, 3vw, 16px);}
.labels-visible .label { display: block; }

/* cursor-following tooltip — positioned via JS */
#cursor-tooltip {
  position: fixed;
  display: none;
  background: #1a1a1a;
  color: #fff;
  font-family: 'EdmundMcMillen', sans-serif;
  font-size: 22px;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(12px, -50%);
}

hr {
  display: block;
  border: none;
  border-top: 3px solid #92929211;
  margin: 1.5vw 0 1.5vw;
}

/* --- Bottom randomize button --- */

.roll-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

button#roll-bottom {
  position: relative;
  background: none;
  
  /* margin: 1.5rem auto 0; */
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
button#roll-bottom img {
  height: clamp(20px, 20vw, 120px);
  width: auto;
  display: block;
}


#roll-bottom:hover { opacity: 0.95; }
/* #roll-bottom:active { transform: scale(0.995); } */


/* --- Endcap --- */
#endcap-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  width: fit-content;
}

.endcap-icon-wrapper {
  position: relative;
  width: clamp(80px, 25vw, 120px);
  height: clamp(80px, 25vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.endcap-icon-wrapper .postit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.endcap-icon-wrapper .endcap-icon {
  position: relative;
  width: 50%;
  height: 50%;
  object-fit: contain;
  z-index: 2;
}

.endcap-icon-wrapper .endcap-difficulty-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  opacity: 0.8;
}

.placeholder-text {
  font-size: 11px;
  color: #aaa;
}

/* --- Options overlay & panel --- */
#options-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 100;
}
#options-overlay.open { display: block; }

#options-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(300px, 100vw);
  height: 100vh;
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 1.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 101;
  font-family: 'SourGummy', sans-serif;
}
#options-panel.open { transform: translateX(0); }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.panel-header h2 {
  font-size: 15px;
  font-weight: 500;
}

.panel-header button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #888;
  line-height: 1;
  padding: 0;
}
.panel-header button:hover { color: #111; }

.option-section {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e0e0e0;
}
.option-section:last-child { border-bottom: none; }

.section-title {
  font-size: 12px;
  color: #888;
  display: block;
  margin-bottom: 8px;
}

.section-description {
  font-size: 10px;
  color: #888;
  display: block;
  margin-bottom: 8px;
}

/* --- Class count --- */
.class-count-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  width: 70%;
  box-sizing: border-box;
}
.class-count-range input[type="number"],
.class-count-fixed input[type="number"] {
  width: 52px;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.class-count-range span {
  font-size: 13px;
  color: #888;
}
.class-count-range label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
}
body.dark-mode .class-count-range label {
  color: #ddd;
}
.class-count-fixed {
  margin-bottom: 8px;
}

/* --- Toggle rows --- */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.toggle-row label {
  font-size: 13px;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toggle-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

/* --- Act rows --- */
.act-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.act-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.act-name {
  font-size: 13px;
  color: #111;
  font-weight: 500;
}

/* --- Endcap sub-rows --- */
.endcap-sub-list {
  margin: 4px 0 10px 23px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.endcap-sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.endcap-sub-row input[type="checkbox"] {
  width: 13px;
  height: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.endcap-sub-row img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
.endcap-sub-row .endcap-sub-name {
  font-size: 12px;
  color: #444;
  flex: 1;
}
.endcap-sub-row.disabled .endcap-sub-name {
  color: #bbb;
}
.endcap-sub-row.disabled img {
  opacity: 0.35;
}

/* --- Class toggle rows --- */
.class-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.class-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.class-row .class-name {
  font-size: 13px;
  flex: 1;
  color: #111;
}
.class-row .weight-input {
  width: 52px;
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 12px;
  color: #111;
  text-align: center;
  font-family: inherit;
}
.class-row .weight-input:disabled {
  background: #f0f0f0;
  color: #bbb;
}

.class-group-toggles {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.group-btn {
  flex: 1;
  padding: 5px 0;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f5f5f5;
  color: #444;
}
.group-btn:hover { background: #e8e8e8; }
.group-btn.active { background: #111; color: #fff; border-color: #111; }

.col-headers {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.col-headers span { font-size: 11px; color: #aaa; }
.col-headers .spacer { flex: 1; }
.col-headers .weight-col { width: 52px; text-align: center; }

/* --- Graffiti background --- */
#graffiti-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.graffiti {
  position: absolute;
  opacity: 0.7;
  user-select: none;
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 90px;
  max-height: 90px;
}

/* --- Dark mode --- */
body.dark-mode {
  background: #262525;
}
body.dark-mode .graffiti {
  filter: invert(1);
}
body.dark-mode #options-overlay {
  background: rgba(0,0,0,0.5);
}
body.dark-mode #options-panel {
  background: #1e1e1e;
  border-left-color: #444;
  color: #e0e0e0;
}
body.dark-mode .panel-header h2 {
  color: #e0e0e0;
}
body.dark-mode .panel-header button {
  color: #aaa;
}
body.dark-mode .panel-header button:hover {
  color: #fff;
}
body.dark-mode .option-section {
  border-bottom-color: #444;
}
body.dark-mode .section-title {
  color: #aaa;
}
body.dark-mode .section-description {
  color: #aaa;
}
body.dark-mode .act-name,
body.dark-mode .class-name,
body.dark-mode .endcap-sub-name,
body.dark-mode .toggle-row label,
body.dark-mode .col-headers span {
  color: #d0d0d0;
}
body.dark-mode .act-endcaps {
  color: #777;
}
body.dark-mode .weight-input,
body.dark-mode .class-count-range input,
body.dark-mode .class-count-fixed input {
  background: #2e2e2e;
  border-color: #555;
  color: #e0e0e0;
}
body.dark-mode .weight-input:disabled {
  background: #252525;
  color: #555;
}
body.dark-mode .group-btn {
  background: #2e2e2e;
  border-color: #555;
  color: #ccc;
}
body.dark-mode .group-btn:hover {
  background: #3a3a3a;
}
body.dark-mode .group-btn.active {
  background: #e0e0e0;
  color: #111;
  border-color: #e0e0e0;
}
body.dark-mode #footer p {
  color: #adadad;
}
body.dark-mode #footer a {
  color: #adadad;
}


/* --- Animation button --- */
button#animation-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
button#animation-btn img {
  height: 36px;
  width: auto;
  display: block;
}

/* --- Balanced team button --- */
button#balanced-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
button#balanced-btn img {
  height: 36px;
  width: auto;
  display: block;
}

/* --- Daily run button (hanging sign) --- */
button#daily-btn {
  --sign-height: 84px;
  --sign-width: 40%;
  --sign-font-size: calc(var(--sign-width) * 4.5);
  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  width: var(--sign-width);
  height: var(--sign-height);
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.15s ease;
  display: block;
}

@media (max-width: 600px) {
  button#daily-btn {
    --sign-height: 84px;
    --sign-width: 50%;
    --sign-font-size: calc(var(--sign-width) * 3);
  }
}

/* Rope: extends only UPWARD from just behind the top edge of the sign,
   reaching beyond the top of the viewport. Tiles vertically so the rope
   PNG keeps its natural aspect ratio at any length. Sits behind the sign. */
button#daily-btn .daily-rope {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Bottom of rope tucks a few px behind the top of the sign so it appears
     to be attached under the sign, with no visible seam. */
  bottom: calc(80%);
  /* Extend upward past the top of the viewport. */
  height: 100vh;
  /* Rope spans the full width of the sign. */
  width:  60%;
  background: url('img/rope.png') repeat-y center top;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 0;
}

/* Sign background + text container. Sits in front of the rope. */
button#daily-btn .daily-sign {
  position: absolute;
  inset: 0;
  background: transparent url('img/sign_background.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-family: 'EdmundMcMillen', sans-serif;
  font-size: var(--sign-font-size);
  color: #1f1f1f;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* Keep the text within the central 80% of the sign. */
button#daily-btn #daily-btn-date {
  display: block;
  width: 80%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

button#daily-btn:hover:not(:disabled) {
  transform: translate(-50%, calc(-50% - 1px));
}
button#daily-btn:active:not(:disabled) {
  transform: translate(-50%, calc(-50% + 1px));
}
button#daily-btn:disabled,
button#daily-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
body.dark-mode button#daily-btn .daily-sign {
  color: #0a0a0a;
}
body.dark-mode button#daily-btn:disabled,
body.dark-mode button#daily-btn.disabled {
  opacity: 0.4;
}


/* --- Support button (fixed bottom-right) --- */
#support-btn {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}
#support-btn img {
  width: clamp(36px, 8vw, 52px);
  height: auto;
  display: block;
}
#support-btn:hover { opacity: 0.85; }
#support-btn:active { transform: scale(0.95); }

/* --- Support overlay --- */
#support-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300;
}
#support-overlay.open { display: block; }

/* --- Support popup --- */
#support-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: min(360px, 92vw);
  background: #fff;
  border-radius: 12px;
  padding: 1.75rem 1.5rem 1.5rem;
  z-index: 301;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, opacity 0.15s ease;
  opacity: 0;
}
#support-popup.open {
  display: block;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

#support-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #888;
  line-height: 1;
}
#support-close:hover { color: #111; }

#support-popup h2 {
  font-family: 'EdmundMcMillen', sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #111;
  margin-bottom: 0.6rem;
}

#support-popup > p {
  font-size: 13px;
  color: #555;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.support-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.9rem 0;
  border-top: 1px solid #eee;
}
.support-option:last-child { border-bottom: 1px solid #eee; }

.support-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.support-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.support-label {
  font-size: 12px;
  color: #888;
}

.support-link-btn {
  display: inline-block;
  padding: 6px 14px;
  background: #111;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  font-family: inherit;
  width: fit-content;
}
.support-link-btn:hover { opacity: 0.85; }

.btc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#btc-address {
  font-family: monospace;
  font-size: 11px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

#btc-copy-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f5f5f5;
  color: #333;
}
#btc-copy-btn:hover { background: #e8e8e8; }
#btc-copy-btn.copied { background: #111; color: #fff; border-color: #111; }

/* Dark mode support popup */
body.dark-mode #support-popup {
  background: #1e1e1e;
  color: #e0e0e0;
}
body.dark-mode #support-popup h2 { color: #e0e0e0; }
body.dark-mode #support-popup > p { color: #aaa; }
body.dark-mode #support-close { color: #888; }
body.dark-mode #support-close:hover { color: #fff; }
body.dark-mode .support-option { border-color: #333; }
body.dark-mode .support-label { color: #777; }
body.dark-mode #btc-address { color: #ccc; }
body.dark-mode #btc-copy-btn { background: #2e2e2e; border-color: #555; color: #ccc; }
body.dark-mode #btc-copy-btn:hover { background: #3a3a3a; }
body.dark-mode #btc-copy-btn.copied { background: #e0e0e0; color: #111; border-color: #e0e0e0; }