/* 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: var(--cream); color: var(--wood-dark); padding: 14px;
}
#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; }
.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 var(--wood-dark); border-radius: 12px; background: var(--wood); flex-shrink: 0; }
.hw-tabs button { min-width: 0; min-height: 38px; padding: 5px 3px; border-radius: 7px; background: #f3e3bd; 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-panel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 3px 4px; }
.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; }
.hw-road article { flex: 0 0 148px; min-height: 226px; padding: 9px; border: 3px solid var(--wood-dark); border-radius: 14px; background: #f3e3bd; 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; }
.hw-road article.claimed { opacity: .7; background: #e5edcf; }
.hw-milestone { background: #8a5a2b; 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; }
}