/* Same parchment, wood frames and raised buttons as the rest of the game.
   Header/wallet/tabs stay put; only the selected panel can scroll. */
#halloween-modal { z-index: 24; }
#halloween-modal .modal-box {
  max-width: 600px; height: min(610px, calc(100dvh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(ellipse at top right, #a477be30, transparent 65%), linear-gradient(155deg, var(--cream), #eee0ed);
  border-color: #593b55; color: var(--wood-dark); padding: 14px;
  box-shadow: 0 8px 0 #3e2639, 0 0 24px #e8791f30;
}
#halloween-modal .modal-box::before {
  content: ''; position: absolute; right: 0; top: 0; width: 92px; height: 92px;
  pointer-events: none; opacity: .3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23744f86' stroke-width='1.5'%3E%3Cpath d='M100 0L0 0M100 0L0 100M100 0L100 100M100 0L50 100M100 0L0 50M75 0Q75 25 100 25M50 0Q50 50 100 50M25 0Q25 75 100 75M0 0Q0 100 100 100'/%3E%3C/g%3E%3C/svg%3E") right top / contain no-repeat;
}
#halloween-modal .modal-close { z-index: 2; }
#halloween-body { display: flex; flex-direction: column; flex: 1; min-height: 0; text-align: left; gap: 10px; }
.hw-header { padding-right: 28px; }
.hw-header h2 { font-size: 25px; margin: 0; color: #653c64; text-shadow: 0 1px #fff8e7, 0 0 12px #e8791f35; }
.hw-header h2::after { content: ''; display: inline-block; width: 18px; height: 18px; margin-left: 9px; border-radius: 50%; background: #f3b854; box-shadow: inset -5px -2px 0 #9671a6; vertical-align: 1px; }
.hw-header p { font-size: 12px; margin: 3px 0 0; opacity: .8; }
.hw-admin { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hw-admin small { font-weight: bold; color: #724491; }
.hw-admin button { background: #ecdaf4; color: #643c7b; border: 2px solid #9873ab; border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: bold; }
.hw-status { font-size: 12px; padding: 6px 8px; border-radius: 8px; background: #ecdaf4; color: #643c7b; }
.hw-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hw-wallet > span { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 2px solid #9770a9; border-radius: 12px; background: #f1e5f8; min-width: 0; }
.hw-wallet > span:last-child { border-color: #b18038; background: #ffedbd; }
.hw-wallet svg { flex: 0 0 30px; width: 30px; height: 30px; }
.hw-wallet b { font-size: 19px; line-height: 1.1; }
.hw-wallet small { display: block; font-size: 10px; font-weight: normal; margin-top: 3px; }
.hw-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border: 2px solid #593b55; border-radius: 12px; background: #78506c; flex-shrink: 0; }
.hw-tabs button { position: relative; min-width: 0; min-height: 38px; padding: 5px 3px; border-radius: 7px; background: #eeddeb; color: var(--wood-dark); font-weight: bold; font-size: 14px; }
.hw-tabs button[aria-selected="true"] { background: linear-gradient(#ffb03a, #e8791f); color: var(--cream); text-shadow: 1px 1px var(--wood-dark); box-shadow: inset 0 0 0 2px #bd6a24; }
.hw-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.hw-tab-badge {
  position: absolute; top: -8px; right: 0; z-index: 2;
  display: grid; place-items: center; width: 20px; height: 20px;
  border: 2px solid #ffe5da; border-radius: 50%; background: #d72f3e; color: #fff;
  font-size: 11px; font-weight: bold; line-height: 1; text-shadow: none;
  box-shadow: 0 2px 4px #160d2580; pointer-events: none;
}
.hw-panel {
  position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 3px 4px;
  background: radial-gradient(ellipse at 12% 48%, #ad8cc30b, transparent 44%), radial-gradient(ellipse at 90% 88%, #e8b8710a, transparent 38%);
  box-shadow: inset 0 0 30px #100b150e;
}
.hw-panel h3 { font-size: 18px; margin: 0; }
.hw-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 0 10px; }
.hw-panel-heading small { font-size: 11px; text-align: right; }
.hw-hint { font-size: 12px; line-height: 1.4; margin: 9px 0 0; opacity: .85; }
.hw-progress { position: relative; height: 18px; border: 2px solid var(--wood-dark); border-radius: 8px; background: #e6d4a7; overflow: hidden; }
.hw-progress i { display: block; height: 100%; background: linear-gradient(#a5dc68, #69af40); }
.hw-progress b { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 14px; }
.hw-road { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; padding: 12px 2px 12px; touch-action: pan-x; scrollbar-color: #92608e #ead9e7; scrollbar-width: thin; }
.hw-road article { flex: 0 0 148px; min-height: 226px; padding: 9px; border: 3px solid #795475; border-radius: 14px; background: linear-gradient(#f3e6f0, #e8d7e7); display: flex; flex-direction: column; gap: 9px; align-items: center; text-align: center; }
.hw-road article.reached { border-color: #b87521; background: #fff0c4; box-shadow: inset 0 0 0 2px #ffd66b, 0 0 9px #ef9b3e40; }
.hw-road article.claimed { opacity: .7; background: #e5edcf; }
.hw-milestone { background: linear-gradient(#86508c, #613d69); color: var(--cream); border-radius: 8px; padding: 4px 7px; font-size: 12px; white-space: nowrap; }
.hw-reward-art { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 64px; width: 100%; }
.hw-reward-art canvas, .hw-reward-art .icon, .hw-candy-art, .hw-candy-art svg { display: block; width: 64px; height: 64px; flex: none; }
.hw-reward-art.multiple canvas, .hw-reward-art.multiple .icon { width: 50px; height: 50px; }
.hw-reward-name { font-size: 13px; line-height: 1.25; flex: 1; display: flex; align-items: center; }
.hw-road .action-btn { flex: none; width: 100%; padding: 6px; font-size: 14px; min-height: 36px; }
.hw-tasks { display: grid; gap: 8px; }
.hw-task { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border: 2px solid var(--wood-dark); border-radius: 12px; padding: 9px; background: #f3e3bd; }
.hw-task.claimed { background: #e5edcf; }
.hw-task-info { min-width: 0; }
.hw-task-info > b { display: block; font-size: 14px; }
.hw-task .action-btn { font-size: 13px; padding: 7px; min-height: 38px; }
.hw-task-rewards { display: flex; gap: 14px; margin: 5px 0; }
.hw-task-rewards span { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: bold; }
.hw-task-rewards svg { width: 22px; height: 22px; }
.hw-boss-heading { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.hw-boss-heading canvas { width: 76px; height: 76px; }
.hw-boss-heading h3 { font-size: 24px; }
.hw-difficulties, .hw-boss-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hw-difficulties .action-btn { padding: 7px 2px; font-size: 14px; }
.hw-boss-actions { grid-template-columns: 1fr 1fr; margin: 12px 0; }
.hw-boss-actions .action-btn { font-size: 16px; padding: 9px; }
.hw-boss-prize { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin: 12px 0 8px; font-size: 14px; }
.hw-boss-prize svg { width: 28px; height: 28px; }
.hw-boss-prize span { font-size: 12px; }
.hw-boss-rules { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.hw-boss-rules span { padding: 4px 6px; border-radius: 6px; background: #f0dca8; font-size: 11px; }
.hw-info { font-size: 12px; line-height: 1.4; padding: 8px; border: 1px dashed #ad946e; border-radius: 8px; margin-top: 10px; }
.hw-info summary { cursor: pointer; font-weight: bold; }
.hw-info p { margin-top: 7px; }
.hw-shop-chest { display: flex; gap: 9px; align-items: center; border: 2px solid var(--wood-dark); padding: 8px; border-radius: 12px; background: #ffedbd; }
.hw-shop-chest > .icon { width: 54px; height: 54px; flex: none; }
.hw-shop-chest > div { flex: 1; font-size: 15px; }
.hw-shop-chest small { display: block; font-size: 11px; margin-top: 4px; }
.hw-shop-chest .action-btn { flex: none; padding: 6px; font-size: 14px; }
.hw-shop-chest button svg, .hw-pins button svg { width: 23px; height: 23px; flex: none; }
.hw-pins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.hw-pins article { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 4px; border: 2px solid var(--wood-dark); border-radius: 12px; background: #f3e3bd; }
.hw-pins canvas { width: 56px; height: 56px; }
.hw-pins b { font-size: 12px; text-align: center; flex: 1; }
.hw-pins .action-btn { flex: none; width: 100%; font-size: 12px; padding: 5px 1px; min-height: 35px; gap: 2px; }
@media (max-width: 480px) {
  #halloween-modal { padding: 8px; }
  #halloween-modal .modal-box { padding: 10px; border-width: 4px; height: min(630px, calc(100dvh - 24px)); }
  #halloween-body { gap: 8px; }
  .hw-header h2 { font-size: 22px; }
  .hw-header p { font-size: 11px; }
  .hw-tabs button { font-size: 12px; }
  .hw-wallet > span { padding: 5px 6px; gap: 5px; }
  .hw-wallet svg { width: 26px; height: 26px; flex-basis: 26px; }
  .hw-wallet b { font-size: 17px; }
  .hw-wallet small { font-size: 9px; }
  .hw-panel h3 { font-size: 16px; }
  .hw-road article { flex-basis: 140px; min-height: 218px; }
  .hw-panel-heading { gap: 4px; }
  .hw-panel-heading small { font-size: 10px; }
}
@media (max-width: 360px) {
  .hw-tabs button { font-size: 11px; padding-inline: 2px; }
  #halloween-modal .hw-header h2 { font-size: 18px; white-space: nowrap; }
  #halloween-modal .hw-header p { font-size: 9px; }
}

/* ---------- Full Halloween: moonlit forest palette ---------- */
#halloween-modal .modal-box {
  background:
    radial-gradient(ellipse at 85% 4%, #8750a33b, transparent 42%),
    radial-gradient(ellipse at 8% 100%, #9a4b2833, transparent 38%),
    linear-gradient(155deg, #21172b 0%, #302038 48%, #201723 100%);
  border-color: #201329;
  color: #f4e8d1;
  box-shadow: 0 8px 0 #130d19, 0 0 30px #130d19c9;
}
#halloween-modal .modal-box::before {
  opacity: .38;
  filter: drop-shadow(0 0 4px #c68de050);
}
#halloween-modal .modal-close { color: #f4dfbd; text-shadow: 0 1px #211329; }
.hw-header h2 { color: #f3d5a0; text-shadow: 0 2px #211329, 0 0 13px #a75ab06b; }
.hw-header h2::after { background: #f3c968; box-shadow: inset -5px -2px 0 #9875a0, 0 0 11px #f0bd69a0; }
.hw-header p { color: #d5c5dc; opacity: 1; }
.hw-admin small { color: #e0b6ef; }
.hw-admin button { color: #f7e9ff; background: #533e62; border-color: #9a79ab; }
.hw-status { color: #f4e8d1; background: #47344f; border: 1px solid #96709e; }
.hw-sync-warning { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #d58c46; border-radius: 9px; background: #4c2e32; color: #fff0d5; font-size: 11px; }
.hw-sync-warning span { flex: 1; }
.hw-sync-warning button { flex: none; border: 2px solid #39232b; border-radius: 7px; background: linear-gradient(#f2b85e,#a94f27); color: #fff6e7; font: inherit; font-weight: bold; font-size: 11px; padding: 5px 7px; }
.hw-wallet > span, .hw-wallet > span:last-child {
  color: #f5eadc; background: linear-gradient(145deg, #37283f, #29212f);
  border-color: #856c91; box-shadow: inset 0 1px #ffffff0b, 0 2px 0 #17101c;
}
.hw-wallet > span:last-child { border-color: #a17a3c; background: linear-gradient(145deg, #49372e, #30262a); }
.hw-wallet small { color: #d3c2da; }
.hw-tabs { border-color: #17101d; background: linear-gradient(#503756, #33253a); box-shadow: 0 3px 0 #17101d; }
.hw-tabs button { background: linear-gradient(#e5d8e7, #cfc0d3); color: #36243b; }
.hw-tabs button[aria-selected="true"] { background: linear-gradient(#ffca68, #c86c27); color: #fff4df; box-shadow: inset 0 0 0 2px #885024, 0 0 10px #f59b3961; }
.hw-panel { color: #f2e6d4; scrollbar-color: #79577f #29212f; }
.hw-panel h3 { color: #e7c58d; text-shadow: 0 1px #1b1324; }
.hw-panel-heading small, .hw-hint { color: #d0c0d4; opacity: 1; }
.hw-progress { background: #18131f; border-color: #9b8050; box-shadow: inset 0 1px 4px #0e0a12; }
.hw-progress i { background: linear-gradient(#f5cf75, #a96a35); box-shadow: 0 0 9px #e1a75170; }
.hw-progress b { color: #fff4df; text-shadow: 0 1px #27172d; }
.hw-road { scrollbar-color: #9573a1 #211b28; }
.hw-road article {
  position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(155deg, #34283b, #29212f 78%);
  border-color: #715779;
  box-shadow: inset 0 1px #ffffff0c, 0 3px 0 #17101d;
}
.hw-road article > * { position: relative; z-index: 1; }
.hw-road article::before {
  content: ''; position: absolute; z-index: 0; right: 0; top: 0; width: 57px; height: 57px;
  border: 1px solid #d8b4e32a; border-width: 0 0 1px 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23d8b4e3' stroke-width='.8' opacity='.7'%3E%3Cpath d='M60 0L0 60M60 0L0 30M60 0L30 60M60 0L60 60M60 10Q50 10 50 0M60 22Q38 22 38 0M60 36Q24 36 24 0M60 50Q10 50 10 0M48 0Q48 12 60 12'/%3E%3C/g%3E%3C/svg%3E") right top / contain no-repeat;
  border-radius: 0 9px 0 0; pointer-events: none; opacity: .58;
}
.hw-road article.reached { background: linear-gradient(155deg, #594332, #33252f 78%); border-color: #d39b4f; box-shadow: inset 0 0 0 1px #f1c6714a, 0 0 12px #df9b3b36; }
.hw-road article.claimed { background: linear-gradient(155deg, #30352e, #25252b); border-color: #71815b; opacity: .8; }
.hw-milestone { background: linear-gradient(#825b8a, #503b5c); color: #f6e9ff; box-shadow: inset 0 1px #ffffff28; }
.hw-reward-name { color: #f3e8d6; text-shadow: 0 1px #160f1c; }
.hw-road .action-btn, .hw-task .action-btn, .hw-boss-actions .action-btn, .hw-pins .action-btn, .hw-shop-chest .action-btn {
  color: #fff1db; background: linear-gradient(#76547e, #48334f); border-color: #24182c;
  box-shadow: 0 3px 0 #170f1d; text-shadow: 0 1px #26182d;
}
.hw-road .action-btn.use, .hw-task .action-btn.use, .hw-boss-actions .action-btn.use, .hw-difficulties .action-btn.use {
  background: linear-gradient(#f2b85e, #a94f27); border-color: #32202a; color: #fff6e7;
}
.hw-road .action-btn:disabled, .hw-task .action-btn:disabled, .hw-boss-actions .action-btn:disabled, .hw-pins .action-btn:disabled, .hw-shop-chest .action-btn:disabled {
  filter: grayscale(.55) brightness(.78); opacity: .72;
}
.hw-task, .hw-pins article {
  background: linear-gradient(145deg, #382b40, #29222f); color: #f3e8d6;
  border-color: #765c80; box-shadow: inset 0 1px #ffffff0b, 0 2px 0 #17101d;
}
.hw-task.claimed { background: linear-gradient(145deg, #34372f, #292a2a); border-color: #839066; }
.hw-task-info > b, .hw-pins b { color: #f3e8d6; }
.hw-task-rewards { color: #eddbbe; }
.hw-boss-heading canvas { filter: drop-shadow(0 3px 4px #100b16b0); }
.hw-difficulties .action-btn { background: linear-gradient(#705277, #443149); color: #f6eafa; border-color: #21172a; }
.hw-difficulties .action-btn.use { background: linear-gradient(#e9ad55, #a74928); }
.hw-boss-prize { color: #ffe0a4; text-shadow: 0 1px #211329; }
.hw-boss-rules span { color: #eee0ef; background: #49364e; border: 1px solid #775e80; }
.hw-info { color: #eaddec; background: #211a29b8; border-color: #856c8d; }
.hw-info summary { color: #f2cc8b; }
.hw-shop-chest { color: #fff0d4; background: linear-gradient(145deg, #513a32, #33272d); border-color: #a77a43; box-shadow: inset 0 1px #ffffff0d, 0 3px 0 #19111b; }
.hw-shop-chest small { color: #dccbb4; }
.hw-pins article { border-color: #795d83; }
.hw-pins canvas { filter: drop-shadow(0 2px 4px #100b16a0); }
.hw-wallet, .hw-tabs, .hw-panel { position: relative; z-index: 1; }
.hw-panel::after {
  content: ''; position: sticky; pointer-events: none; display: block; height: 12px;
  bottom: 0; margin-top: -12px; background: linear-gradient(transparent, #20172370);
}
.hw-header { position: relative; }
.hw-header::after {
  content: ''; position: absolute; right: 28px; top: 0; width: 46px; height: 28px; opacity: .48;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 55'%3E%3Cpath fill='%23171020' d='M0 31Q12 20 22 30Q30 9 42 29Q50 18 59 30Q70 8 79 30Q91 17 100 31Q83 28 76 42Q69 31 61 41Q50 29 42 42Q32 29 23 42Q13 28 0 31Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hw-bat-drift 5.5s ease-in-out infinite;
}
@keyframes hw-bat-drift { 50% { transform: translate(-5px, 3px) scale(.92); opacity: .72; } }
@media (prefers-reduced-motion: no-preference) {
  .hw-panel { background-size: 145% 145%, 130% 130%; animation: hw-fog-drift 24s ease-in-out infinite alternate; }
}
@keyframes hw-fog-drift { to { background-position: 90% 70%, 0% 15%; } }
@media (prefers-reduced-motion: reduce) {
  .hw-road, .hw-header::after, .hw-panel { scroll-behavior: auto; animation: none; }
}

/* Bring back the illustrated haunted-night scene from the first Halloween
   road; keep the new tabs, panel dimensions and scrolling untouched. */
#halloween-body { gap: 8px; }
.hw-hero {
  position: relative; isolation: isolate; overflow: hidden; flex: 0 0 auto;
  height: clamp(70px, 17vw, 104px); min-width: 0; border: 3px solid #160826; border-radius: 12px;
  background: #21102f; box-shadow: inset 0 -18px 20px #16082670, 0 2px 0 #160826;
}
#halloween-modal .hween-scene {
  position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%;
  border: 0; border-radius: 0; object-fit: cover; filter: saturate(1.15) contrast(1.12);
}
#halloween-modal .hw-header {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  min-width: 0; padding: 9px 38px 8px 12px;
  background: linear-gradient(90deg, #1c0b2ee8 0%, #2d1744a8 48%, #1c0b2e08 100%);
}
#halloween-modal .hw-header h2 {
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #ff9a3c; font-size: clamp(19px, 4.5vw, 27px);
  text-shadow: 0 0 12px #e8791fbb, 2px 2px 0 #160826;
}
#halloween-modal .hw-header h2::after {
  width: 15px; height: 15px; margin-left: 8px; vertical-align: 1px;
  background: #f5e6b8; box-shadow: inset -4px -1px 0 #b6a3c1, 0 0 12px #fff1c0;
}
#halloween-modal .hw-header p { color: #fff1d6; font-size: 11px; text-shadow: 0 1px #160826, 0 0 6px #160826; }
@media (max-width: 400px) {
  .hw-hero { height: 66px; }
  #halloween-modal .hw-header { padding: 6px 34px 6px 8px; }
  #halloween-modal .hw-header h2 { font-size: clamp(16px, 5vw, 19px); }
  #halloween-modal .hw-header h2::after { width: 12px; height: 12px; margin-left: 4px; }
  #halloween-modal .hw-header p { font-size: 9px; line-height: 1.1; }
  .hw-header::after { right: 24px; width: 30px; height: 18px; }
}
.hw-road article {
  border: 2px solid rgba(255, 214, 107, .35);
  background: rgba(255, 246, 224, .055);
}
.hw-road article.reached {
  background: #e8791f18; border-color: rgba(232,121,31,.75);
  box-shadow: inset 0 0 0 1px #f1c67130, 0 0 12px #df9b3b30;
}
.hw-road article.claimed { background: rgba(255,246,224,.035); border-color: rgba(255,214,107,.25); }
.hw-milestone { background: linear-gradient(#7a3fb0, #4a1f7a); color: #ffd66b; }