/* ハロウィンイベント2026 専用デザイン（/event/halloween-2026.html）
   核になる要素：マイクラのアイテムのツールチップ（暗い紫地＋紫の枠＋角の欠け）。
   配色はキービジュアルに合わせ、ライト/ダークどちらのモードでも同じ見た目にする。 */

.theme-halloween {
    --hw-night-1: #1a0f33;
    --hw-night-2: #2b1650;
    --hw-tip-bg: #100010;
    --hw-tip-edge-1: #5a1fe0;
    --hw-tip-edge-2: #28007f;
    --hw-purple: #b98cff;
    --hw-orange: #ff8a1f;
    --hw-yellow: #ffc83d;
    --hw-mint: #3fe0c5;
    --hw-text: #f3ecff;
    --hw-pixel: 'DotGothic16', 'Kosugi Maru', sans-serif;
    /* 角を段々に欠けさせる（4px刻み） */
    --hw-notch: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
            calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
            100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
            8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
}

/* ページ全体の背景（カードの左右に見える部分）。広い画面でも白い余白を出さない */
html:has(body.theme-halloween),
body.theme-halloween {
    background-color: #0d0620 !important;
}

body.theme-halloween {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(142, 91, 208, 0.22), transparent 34%),
        radial-gradient(circle at 90% 70%, rgba(255, 138, 31, 0.1), transparent 30%) !important;
    background-attachment: fixed;
}

/* 左のメニューを畳んだとき、枠や影が画面端に残らないようにする */
body.theme-halloween.sidenav-collapsed .site-sidenav {
    border-right: none;
    box-shadow: none;
    visibility: hidden;
}

.hw-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.theme-halloween main {
    max-width: 1100px;
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: 24px;
    color: var(--hw-text);
    background:
        radial-gradient(circle at 85% 6%, rgba(255, 200, 61, 0.2), transparent 36%),
        radial-gradient(circle at 8% 92%, rgba(142, 91, 208, 0.26), transparent 40%),
        linear-gradient(160deg, var(--hw-night-2), var(--hw-night-1));
    box-shadow: 0 12px 40px rgba(26, 15, 51, 0.5);
}

.theme-halloween main a {
    color: var(--hw-yellow);
}

/* キービジュアル（先頭） */
.theme-halloween .event-key-visual {
    margin-bottom: 28px;
    border: 3px solid var(--hw-tip-edge-1);
    box-shadow: 0 0 0 3px var(--hw-tip-bg), 0 10px 32px rgba(0, 0, 0, 0.5);
}

/* 開催期間（ツールチップ風の札） */
.hw-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 560px;
    margin: 0 auto 28px;
    padding: 18px 24px 20px;
    background: var(--hw-tip-bg);
    border: 4px solid;
    border-image: linear-gradient(var(--hw-tip-edge-1), var(--hw-tip-edge-2)) 1;
    clip-path: var(--hw-notch);
    text-align: center;
}

.hw-date__label {
    font-family: var(--hw-pixel);
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    color: var(--hw-purple);
}

.hw-date__value {
    font-family: var(--hw-pixel);
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--hw-yellow);
}

.theme-halloween .event-lead {
    margin-bottom: 44px;
    color: var(--hw-text);
}

/* 見出し */
.theme-halloween .section-title {
    font-family: var(--hw-pixel);
    font-weight: 400;
    color: var(--hw-yellow);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}

.theme-halloween .section-title span {
    font-family: var(--hw-pixel);
    color: var(--hw-purple);
}

/* イベント内容：アイテムのツールチップ */
.hw-quests {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.hw-quest {
    --hw-accent: var(--hw-purple);
    padding: 20px 20px 24px;
    background: var(--hw-tip-bg);
    border: 4px solid;
    border-image: linear-gradient(var(--hw-tip-edge-1), var(--hw-tip-edge-2)) 1;
    clip-path: var(--hw-notch);
    transition: transform 0.2s steps(3);
}

.hw-quest:hover {
    transform: translateY(-4px);
}

.hw-quest--search {
    --hw-accent: var(--hw-purple);
}

.hw-quest--pumpkin {
    --hw-accent: var(--hw-orange);
}

.hw-quest--game {
    --hw-accent: var(--hw-mint);
}

.hw-quest__icon {
    display: block;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    image-rendering: pixelated;
}

.hw-quest__title {
    margin: 0 0 10px;
    font-family: var(--hw-pixel);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--hw-accent);
}

.hw-quest__text {
    margin: 0;
    line-height: 1.85;
    color: #ddd0f2;
}

/* 開催情報 */
.theme-halloween .event-info th {
    font-family: var(--hw-pixel);
    font-weight: 400;
    color: var(--hw-orange);
}

.theme-halloween .event-info th,
.theme-halloween .event-info td {
    border-bottom-color: rgba(185, 140, 255, 0.4);
}

.theme-halloween .event-note {
    color: #cdbbea;
}

/* 戻るボタン */
.theme-halloween .btn-nav.btn-outline-nav {
    font-family: var(--hw-pixel);
    border-color: var(--hw-orange);
    color: var(--hw-yellow);
    background: transparent;
}

.theme-halloween .btn-nav.btn-outline-nav:hover {
    background: var(--hw-orange);
    color: #1a0f33;
}

.theme-halloween .btn-nav:focus-visible,
.theme-halloween main a:focus-visible {
    outline: 3px solid var(--hw-yellow);
    outline-offset: 3px;
}

@media (max-width: 860px) {
    .hw-quests {
        grid-template-columns: 1fr;
    }

    .hw-date__value {
        font-size: 1.3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hw-quest {
        transition: none;
    }
}

/* =========================================
   ヘッダー・メニュー・フッターも、イベントの配色に合わせる
   （共通ヘッダー/フッターのHTMLは変えず、このページのbodyクラスで上書きする）
   ========================================= */

/* ヘッダー */
body.theme-halloween header,
body.theme-halloween header.scrolled {
    background: rgba(16, 0, 16, 0.96) !important;
    border-bottom-color: rgba(90, 31, 224, 0.5);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

body.theme-halloween header::before {
    background: linear-gradient(90deg, transparent, var(--hw-tip-edge-1), var(--hw-orange), var(--hw-tip-edge-1), transparent);
}

body.theme-halloween #main-nav a {
    color: var(--hw-text);
}

body.theme-halloween #main-nav a:hover {
    color: var(--hw-yellow);
}

body.theme-halloween #main-nav a.nav-start {
    color: var(--hw-yellow);
    border-color: var(--hw-orange);
}

body.theme-halloween #main-nav a.nav-start:hover {
    background: var(--hw-orange);
    color: var(--hw-tip-bg);
}

body.theme-halloween #main-nav > ul > li > a.nav-start {
    background: rgba(255, 138, 31, 0.16);
}

body.theme-halloween .menu-toggle .bar {
    background-color: var(--hw-orange) !important;
}

body.theme-halloween #dark-mode-container .dark-mode-toggle-btn {
    background: rgba(185, 140, 255, 0.14);
    border-color: var(--hw-tip-edge-1);
}

/* ドロップダウン：ツールチップ風 */
body.theme-halloween .dropdown-content {
    background: var(--hw-tip-bg) !important;
    border: 3px solid var(--hw-tip-edge-1);
    border-radius: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
}

body.theme-halloween .dropdown-content a {
    color: var(--hw-text) !important;
}

body.theme-halloween .dropdown-content a:hover {
    background-color: rgba(90, 31, 224, 0.28);
    color: var(--hw-yellow) !important;
}

body.theme-halloween .dropdown-content .dropdown-label {
    color: var(--hw-purple);
}

/* スマホの≡メニュー */
body.theme-halloween #main-nav {
    background-color: var(--hw-tip-bg) !important;
}

body.theme-halloween #main-nav > ul > li {
    border-bottom-color: rgba(90, 31, 224, 0.45);
}

/* 左のメニュー（ページ一覧） */
body.theme-halloween .site-sidenav {
    background: var(--hw-tip-bg);
    border-right: 3px solid var(--hw-tip-edge-1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.55);
}

body.theme-halloween .sidenav-head {
    border-bottom-color: var(--hw-tip-edge-2);
    color: var(--hw-yellow);
    font-family: var(--hw-pixel);
    font-weight: 400;
}

body.theme-halloween .sidenav-close,
body.theme-halloween .sidenav-collapse {
    color: var(--hw-text);
}

body.theme-halloween .site-sidenav .sidenav-group {
    color: var(--hw-purple);
    font-family: var(--hw-pixel);
}

body.theme-halloween .site-sidenav nav li a:not([aria-current]) {
    color: var(--hw-text) !important;
}

body.theme-halloween .site-sidenav a:hover,
body.theme-halloween .site-sidenav a[aria-current="page"] {
    background: rgba(90, 31, 224, 0.28);
}

body.theme-halloween .site-sidenav nav li a:hover {
    color: var(--hw-yellow) !important;
}

body.theme-halloween .site-sidenav a[aria-current="page"] {
    border-left-color: var(--hw-orange);
}

body.theme-halloween .sidenav-toggle {
    background: var(--hw-tip-bg);
    border: 3px solid var(--hw-tip-edge-1);
    border-radius: 0;
    color: var(--hw-yellow);
    font-family: var(--hw-pixel);
    font-weight: 400;
}

body.theme-halloween .sidenav-toggle:hover {
    background: var(--hw-orange);
    border-color: var(--hw-orange);
    color: var(--hw-tip-bg);
}

/* フッター */
body.theme-halloween footer {
    background: linear-gradient(160deg, var(--hw-night-2), var(--hw-night-1)) !important;
    border-top: 4px solid var(--hw-tip-edge-1) !important;
}

body.theme-halloween footer::before {
    content: "🎃";
    opacity: 0.08;
}

body.theme-halloween .footer-social-link {
    background: var(--hw-tip-bg);
    border: 2px solid var(--hw-tip-edge-1);
    border-radius: 0;
    color: var(--hw-text) !important;
}

body.theme-halloween .footer-social-link:hover {
    background: var(--hw-orange);
    border-color: var(--hw-orange);
    color: var(--hw-tip-bg) !important;
}

body.theme-halloween .footer-group a {
    color: #d9c8f5 !important;
}

body.theme-halloween .footer-group a:hover {
    color: var(--hw-yellow) !important;
}

body.theme-halloween .footer-group a::after {
    background: var(--hw-orange);
}

body.theme-halloween .footer-separator {
    color: rgba(185, 140, 255, 0.45);
}

body.theme-halloween footer p,
body.theme-halloween footer p small {
    color: #bfaee0;
}

body.theme-halloween .server-counter-box {
    background: var(--hw-tip-bg);
    border: 2px solid var(--hw-tip-edge-1);
    border-radius: 0;
    color: var(--hw-text);
}

body.theme-halloween .reborn-days {
    border-color: var(--hw-orange) !important;
    background: var(--hw-tip-bg);
}

body.theme-halloween .counter-highlight {
    color: var(--hw-yellow);
}