/* Rebirth Halloween: compact mobile-first layout and distinct event/drop art. */
.l2-halloween-page {
  padding: 12px;
  max-width: 720px;
  margin: 0 auto;
  color: #e5d8cb;
}
.l2-halloween-back {
  display: inline-block;
  margin: 8px 0 14px;
  color: #edb683;
  text-decoration: none;
}
.l2-halloween-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid #745038;
  border-radius: 8px;
  background: linear-gradient(120deg, #321c25, #211c20);
}
.l2-halloween-event-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  font-size: 29px;
  line-height: 1;
  border: 1px solid #784a47;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, #56344e, #25202f);
  box-shadow: inset 0 0 10px rgba(230, 122, 63, .18);
}
.l2-halloween-header h1 {
  margin: 0;
  font-size: clamp(18px, 5.3vw, 25px);
  line-height: 1.25;
  color: #ffae57;
}
.l2-halloween-header p {
  margin: 4px 0 0;
  color: #c6aebd;
  font-size: 12px;
}
.l2-halloween-intro,
.l2-halloween-set {
  padding: 11px 12px;
  margin-top: 11px;
  background: #241e20;
  border: 1px solid #4f3431;
  border-radius: 8px;
  line-height: 1.48;
  font-size: 13px;
}
.l2-halloween-intro p,
.l2-halloween-set p {
  margin: 5px 0 9px;
}
.l2-halloween-set h2 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #f9bd78;
}
.l2-halloween-accent--gold { color: #ffca72; }
.l2-halloween-accent--green { color: #90e5a2; }
.l2-halloween-accent--cyan { color: #91dfff; }
.l2-halloween-accent--violet { color: #d5acff; }
.l2-halloween-accent--warning { color: #ff9990; }
.l2-halloween-balance {
  margin-top: 11px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #f4bd72;
  font-size: 16px;
  font-weight: 600;
}
.l2-halloween-balance b {
  color: #90e5a2;
  font-variant-numeric: tabular-nums;
}
.l2-halloween-period {
  color: #bbb0cd;
  font-size: 12px;
}
.l2-halloween-rewards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 11px;
}
.l2-halloween-reward {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #5f4439;
  border-radius: 8px;
  background: linear-gradient(110deg, #2f2425, #1d1b20);
}
.l2-halloween-reward img {
  width: 44px;
  height: 44px;
  max-width: 44px;
  flex: 0 0 44px;
  object-fit: contain;
  border: 1px solid #89603d;
  border-radius: 5px;
}
.l2-halloween-reward-copy { min-width: 0; }
.l2-halloween-reward h3 {
  margin: 0 0 3px;
  color: #ffdaa8;
  font-size: 14px;
  line-height: 1.25;
}
.l2-halloween-reward h3.l2-halloween-material-name { color: #d4b7ff; }
.l2-halloween-reward p {
  margin: 0 0 5px;
  color: #c1b0a8;
  font-size: 12px;
  line-height: 1.35;
}
.l2-halloween-reward .l2-halloween-statline { color: #b8aab2; }
.l2-halloween-reward button {
  padding: 4px 8px;
  min-height: 27px;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.25;
}
.l2-halloween-reward button:disabled { opacity: .55; }
.l2-halloween-status {
  min-height: 30px;
  margin: 10px 0;
  color: #f4ad74;
  font-size: 13px;
}
@media (min-width: 650px) {
  .l2-halloween-rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Halloween actions reuse the compact bronze shop-button language, not City-wide tile dimensions. */
.l2-halloween-page .l2-halloween-reward-copy { flex:1 1 auto; }
.l2-halloween-page .l2-halloween-reward button.l2-halloween-exchange-btn {
  display:inline-flex !important; align-items:center; justify-content:center;
  width:auto !important; min-height:28px !important; max-width:100% !important;
  box-sizing:border-box; margin:5px 0 0; padding:4px 10px !important;
  font:700 12px/1.2 Georgia,serif !important; color:#f1e3c9;
  border:1px solid #675440 !important; border-radius:5px !important;
  background:linear-gradient(180deg,#4a4034,#2e2820 55%,#1f1a14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11); cursor:pointer;
}
.l2-halloween-page .l2-halloween-exchange-btn:not(:disabled):active,
.l2-halloween-modal .l2-halloween-action-btn:active { filter:brightness(1.17); }
.l2-halloween-page .l2-halloween-exchange-btn:focus-visible,
.l2-halloween-modal .l2-halloween-action-btn:focus-visible,
.l2-halloween-modal__close:focus-visible { outline:2px solid #d5b27c; outline-offset:2px; }
.l2-halloween-set-bonus { display:flex; flex-wrap:wrap; gap:7px; margin:9px 0 5px; }
.l2-halloween-set-bonus span {
  padding:5px 8px; border:1px solid #614e42; border-radius:4px;
  background:#211e1e; font-size:12px; font-weight:700;
}
.l2-halloween-set p.l2-halloween-set-state {
  display:inline-block; padding:4px 8px; margin:5px 0 1px;
  border:1px solid #5b4b41; border-radius:4px; color:#b8a998;
  background:#1c1c1b; font-size:11px;
}
.l2-halloween-set p.l2-halloween-set-state--active { border-color:#6c744b; color:#a7d5a1; }
body.l2-halloween-dialog-open { overflow:hidden; }
.l2-halloween-modal[hidden] { display:none !important; }
.l2-halloween-modal {
  position:fixed; inset:0; z-index:9900; padding:12px;
  box-sizing:border-box; display:flex; align-items:center; justify-content:center;
}
.l2-halloween-modal__shade { position:absolute; inset:0; background:rgba(0,0,0,.78); }
.l2-halloween-modal__dialog {
  position:relative; width:min(100%,370px); box-sizing:border-box;
  padding:14px; border:1px solid #96764e; border-radius:5px;
  background:linear-gradient(180deg,#332b25,#211d1a);
  box-shadow:inset 0 1px 0 rgba(255,230,174,.14),0 12px 36px rgba(0,0,0,.7);
  color:#e5d6bc;
}
.l2-halloween-modal__dialog h2 {
  margin:0 30px 12px 0; padding-bottom:9px;
  border-bottom:1px solid rgba(175,141,92,.36);
  color:#e9c38c; font:700 17px/1.2 Georgia,serif;
}
.l2-halloween-modal__close {
  position:absolute; top:8px; right:8px; width:27px; height:27px;
  border:1px solid #6d5641; border-radius:4px;
  background:#3c3025; color:#e9d9bf; font-size:18px; cursor:pointer;
}
.l2-halloween-modal__reward { display:flex; align-items:center; gap:10px; min-width:0; }
.l2-halloween-modal__reward img {
  width:42px; height:42px; flex:0 0 42px; border:1px solid #775b40;
  border-radius:4px; object-fit:contain;
}
.l2-halloween-modal__reward div { min-width:0; }
.l2-halloween-modal__reward strong { display:block; font-size:13px; color:#f0d2a6; }
.l2-halloween-modal__reward p { margin:3px 0 0; color:#aaa0a5; font-size:11px; }
.l2-halloween-modal__price {
  margin:12px 0; padding:7px 0; border-block:1px dotted #65513d;
  color:#d8c5a7; font-size:12px;
}
.l2-halloween-modal__price strong { color:#efbe76; }
.l2-halloween-modal__actions { display:flex; justify-content:flex-end; gap:7px; }
.l2-halloween-modal .l2-halloween-action-btn {
  min-width:95px; min-height:32px; padding:6px 12px; border:1px solid #705941;
  border-radius:4px; background:linear-gradient(180deg,#4a4034,#2e2820 55%,#1f1a14);
  color:#eee0c6; font:700 12px Georgia,serif; cursor:pointer;
}
.l2-halloween-modal .l2-halloween-action-btn--primary {
  border-color:#a17d4e; background:linear-gradient(180deg,#70563a,#433221 65%,#2c231c);
  color:#ffe5bb;
}

/* Collapsible Top-10 shares the compact, dark-bronze L2WAP event chrome. */
.l2-halloween-top { margin-top:11px; border:1px solid #594536; border-radius:7px;
 background:linear-gradient(110deg,#302521,#201c1c); overflow:hidden; }
.l2-halloween-page button.l2-halloween-top-toggle {
 display:flex; width:100%; min-height:39px; padding:8px 12px;
 align-items:center; justify-content:space-between; gap:8px;
 border:0; background:transparent; color:#f0c389;
 font:700 14px/1.35 Georgia,serif; text-align:left; cursor:pointer;
}
.l2-halloween-top-toggle small { color:#c3a98a; font:normal 11px/1.3 Arial,sans-serif; white-space:nowrap; }
.l2-halloween-top-toggle:focus-visible { outline:2px solid #d7b16c; outline-offset:-3px; }
.l2-halloween-top-body[hidden] { display:none !important; }
.l2-halloween-top-body { padding:8px 10px 10px; border-top:1px solid #554133; }
.l2-halloween-top-body > p { margin:2px 0 8px; color:#bcac9f; font-size:11px; line-height:1.4; }
.l2-halloween-top-list { list-style:none; padding:0; margin:0; }
.l2-halloween-top-row { display:grid; grid-template-columns:25px minmax(0,1fr) auto;
 align-items:center; gap:7px; padding:7px 6px; border-bottom:1px solid #3b3430;
 color:#d4c6b6; font-size:12px; }
.l2-halloween-top-row:last-child { border-bottom:0; }
.l2-halloween-top-rank { color:#a69a8d; font-variant-numeric:tabular-nums; }
.l2-halloween-top-row--podium .l2-halloween-top-rank { color:#f1bf79; font-weight:700; }
.l2-halloween-top-row--self { background:rgba(174,133,75,.12); border-radius:4px; }
.l2-halloween-top-name { min-width:0; overflow-wrap:anywhere; }
.l2-halloween-top-count { color:#a6d49c; font-variant-numeric:tabular-nums; text-align:right; }
.l2-halloween-top-body p.l2-halloween-top-status { margin:8px 2px 0; color:#e0b98a; }