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

        :root {
            --gold:         #c9a84c;
            --gold-light:   #f0d080;
            --gold-dark:    #7a5e20;
            --gold-glow:    rgba(201,168,76,.35);
            --crimson:      #8b1a1a;
            --crimson-glow: #c0392b;
            --arcane:       #3b1f6e;
            --arcane-glow:  #7c4dbb;
            --green-ok:     #27ae60;
            --bg-deep:      #05030a;
            --bg-mid:       #0d0a18;
            --bg-card:      #100d1e;
            --border:       rgba(201,168,76,.18);
            --border-hi:    rgba(201,168,76,.55);
            --text-prime:   #e8ddc8;
            --text-muted:   #6a6050;
        }

        body::before {
            content: ''; position: fixed; inset: 0;
            background: linear-gradient(to bottom, rgba(5,3,10,.86) 0%, rgba(5,3,10,.7) 40%, rgba(5,3,10,.92) 100%);
            pointer-events: none; z-index: 0;
        }

        #runeCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .4; }

        .page-wrapper {
            position: relative; z-index: 2;
            max-width: 1280px; margin: 0 auto;
            padding: 0 1.5rem 6rem;
            display: grid;
            grid-template-columns: 1fr 310px;
            gap: 0 2.5rem;
        }

        /* ── Header ── */
        .page-header {
            grid-column: 1 / -1;
            padding: 3rem 0 2rem;
            text-align: center;
        }

        .event-badge {
            display: inline-flex; align-items: center; gap: .5rem;
            font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .3em; text-transform: uppercase;
            color: var(--gold); border: 1px solid var(--gold-dark);
            padding: .25rem 1rem;
            clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
            background: rgba(201,168,76,.06); margin-bottom: 1rem;
        }
        .event-badge::before {
            content: ''; width: 6px; height: 6px;
            background: var(--gold); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
        }

        .header-title {
            font-family: 'Cinzel Decorative', serif;
            font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 900;
            background: linear-gradient(135deg, #fff8d0 0%, var(--gold-light) 30%, var(--gold) 60%, #c07000 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            filter: drop-shadow(0 0 22px rgba(201,168,76,.5));
            letter-spacing: .06em; line-height: 1.15;
        }

        .header-sub {
            font-family: 'Crimson Text', serif; font-style: italic;
            font-size: 1.1rem; color: var(--text-muted); margin-top: .5rem;
        }

        .progress-summary {
            margin-top: 1.8rem;
            display: inline-flex; align-items: center; gap: 2.5rem;
            background: rgba(16,13,30,.8); border: 1px solid var(--border);
            padding: .9rem 2rem;
            clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
        }
        .progress-stat { text-align: center; }
        .progress-stat .val {
            font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700;
            color: var(--gold-light); display: block;
            filter: drop-shadow(0 0 8px rgba(201,168,76,.4));
        }
        .progress-stat .lbl {
            font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
            color: var(--text-muted); display: block; margin-top: .1rem;
        }
        .progress-sep { width: 1px; height: 36px; background: var(--border); }

        .divider-row { display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; }
        .divider-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold-dark), var(--gold), var(--gold-dark), transparent); opacity: .5; }
        .divider-gem  { width: 8px; height: 8px; background: var(--gold); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow: 0 0 10px var(--gold); }

        /* ── Content ── */
        .content-area { grid-column: 1; padding-top: .5rem; }

        .milestones-list { display: flex; flex-direction: column; gap: 1.2rem; }

        /* ── Milestone Row ── */
        .milestone {
            display: grid;
            grid-template-columns: 140px 1fr auto;
            align-items: center;
            background: linear-gradient(135deg, rgba(16,13,30,.97) 0%, rgba(20,15,35,.97) 100%);
            border: 1px solid var(--border);
            position: relative; overflow: hidden;
            transition: border-color .3s, box-shadow .3s, transform .3s;
            clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
            animation: rowReveal .4s ease both;
        }

        @keyframes rowReveal {
            from { opacity: 0; transform: translateX(-18px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        .milestone:nth-child(1){animation-delay:.05s} .milestone:nth-child(2){animation-delay:.12s}
        .milestone:nth-child(3){animation-delay:.19s} .milestone:nth-child(4){animation-delay:.26s}
        .milestone:nth-child(5){animation-delay:.33s} .milestone:nth-child(6){animation-delay:.4s}

        .milestone::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
            opacity: 0; transition: opacity .3s;
        }
        .milestone:hover:not(.claimed)::before { opacity: .6; }
        .milestone:hover:not(.claimed) {
            border-color: var(--border-hi);
            box-shadow: 0 6px 32px rgba(0,0,0,.5), 0 0 20px rgba(201,168,76,.07);
            transform: translateY(-2px);
        }

        .milestone.claimed {
            opacity: .55;
            background: linear-gradient(135deg, rgba(10,10,10,.97) 0%, rgba(14,12,20,.97) 100%);
        }
        .milestone.claimed::after {
            content: ''; position: absolute; inset: 0;
            background: repeating-linear-gradient(-45deg, transparent 0, transparent 6px, rgba(0,0,0,.18) 6px, rgba(0,0,0,.18) 7px);
            pointer-events: none;
        }

        .milestone.unlocked {
            border-color: rgba(201,168,76,.4);
            box-shadow: 0 0 24px rgba(201,168,76,.06), inset 0 0 30px rgba(201,168,76,.03);
        }
        .milestone.unlocked::before { opacity: .4; }
        .milestone.locked { border-color: rgba(201,168,76,.08); }

        /* Amount column */
        .milestone-amount {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 1.4rem .8rem;
            border-right: 1px solid var(--border);
            background: linear-gradient(to bottom, rgba(201,168,76,.04), transparent);
            min-height: 100%; gap: .2rem;
        }
        .amount-icon  { font-size: 1.3rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(201,168,76,.5)); }
        .amount-value { font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700; color: var(--gold-light); letter-spacing: .04em; white-space: nowrap; }
        .amount-label { font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); }

        /* Rewards column */
        .milestone-rewards {
            display: flex; align-items: start; gap: .6rem;
            padding: .9rem 1.2rem; flex-wrap: wrap;
        }
        .reward-item {
            display: flex; flex-direction: column; align-items: center; gap: .3rem;
            transition: transform .2s;
        }
        .reward-item:hover { transform: translateY(-3px); }
        .reward-img-wrap {
            width: 50px; height: 52px;
            border: 1px solid var(--border);
            background: rgba(0,0,0,.4);
            display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden;
            clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
        }
        .milestone.unlocked .reward-img-wrap { border-color: rgba(201,168,76,.35); }
        .milestone.claimed  .reward-img-wrap { filter: grayscale(1) brightness(.5); }
        .reward-img-wrap img {
            width: 44px; height: 44px; object-fit: contain;
            filter: drop-shadow(0 0 6px rgba(201,168,76,.3)); transition: transform .3s;
        }
        .reward-item:hover .reward-img-wrap img { transform: scale(1.12); }
        .reward-qty {
            position: absolute; bottom: 2px; right: 3px;
            font-family: 'Cinzel', serif; font-size: .58rem; font-weight: 700;
            color: #fff; background: rgba(0,0,0,.75); padding: .05rem .3rem; line-height: 1.4;
        }
        .reward-img-wrap.rarity0 {
            background-image: url('/assets/images/dragonnest/rarity/itemrarity0.png');
        }
        .reward-img-wrap.rarity1 {
            background-image: url('/assets/images/dragonnest/rarity/itemrarity1.png');
        }
        .reward-img-wrap.rarity2 {
            background-image: url('/assets/images/dragonnest/rarity/itemrarity2.png');
        }
        .reward-img-wrap.rarity3 {
            background-image: url('/assets/images/dragonnest/rarity/itemrarity3.png');
        }
        .reward-img-wrap.rarity4 {
            background-image: url('/assets/images/dragonnest/rarity/itemrarity4.png');
        }
        .reward-img-wrap.rarity5 {
            background-image: url('/assets/images/dragonnest/rarity/itemrarity5.png');
        }
        .reward-img-wrap.rarity6 {
            background-image: url('/assets/images/dragonnest/rarity/itemrarity6.png');
        }
        .reward-img-wrap.rarity7 {
            background-image: url('/assets/images/dragonnest/rarity/itemrarity7.png');
        }
        .reward-name {
            font-size: .65rem; letter-spacing: .06em; color: var(--text-muted);
            text-align: center; max-width: 60px; line-height: 1.2;
        }
        .milestone.unlocked .reward-name { color: var(--gold); opacity: .8; }
        .reward-plus { font-family: 'Cinzel', serif; font-size: .9rem; color: var(--text-muted); opacity: .5; padding: 0 .1rem; align-self: center; }

        /* Action column */
        .milestone-action {
            padding: .9rem 1.2rem;
            display: flex; flex-direction: column; align-items: center; gap: .4rem;
            border-left: 1px solid var(--border); min-width: 130px;
        }

        /* Lock icon */
        .lock-icon { position: absolute; top: .5rem; right: .65rem; opacity: .25; pointer-events: none; }

        /* ── Buttons ── */
        .btn-claim {
            width: 100%; font-family: 'Cinzel', serif; font-size: .7rem; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            padding: .65rem .8rem; border: none; cursor: pointer;
            position: relative; overflow: hidden;
            clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
            transition: all .3s ease; white-space: nowrap;
            display: flex; align-items: center; justify-content: center; gap: .35rem;
        }
        .btn-claim.state-locked {
            background: rgba(255,255,255,.04); color: var(--text-muted);
            border: 1px solid rgba(255,255,255,.06); cursor: not-allowed; clip-path: none;
        }
        .btn-claim.state-unlocked {
            background: linear-gradient(135deg, #2a1800, #6a3a00 40%, #c9820a 70%, #e8a020);
            color: #fff8d0;
            box-shadow: 0 0 0 1px rgba(201,130,0,.4), 0 4px 18px rgba(180,90,0,.4), inset 0 1px 0 rgba(255,230,100,.18);
            animation: pulseGlow 2.2s ease infinite;
        }
        .btn-claim.state-unlocked::before {
            content: ''; position: absolute; top: -50%; left: -60%;
            width: 30%; height: 200%;
            background: linear-gradient(90deg, transparent, rgba(255,255,200,.22), transparent);
            transform: skewX(-20deg); animation: shimmer 2.5s ease infinite;
        }
        @keyframes shimmer { 0%{left:-60%} 60%,100%{left:140%} }
        @keyframes pulseGlow {
            0%,100%{box-shadow:0 0 0 1px rgba(201,130,0,.4),0 4px 18px rgba(180,90,0,.4)}
            50%{box-shadow:0 0 0 1px rgba(201,168,76,.7),0 6px 28px rgba(200,120,0,.7),0 0 18px rgba(201,168,76,.2)}
        }
        .btn-claim.state-unlocked:hover:not(:disabled) {
            background: linear-gradient(135deg, #3a2200, #8a5000 40%, #e09000 70%, #f8b030);
        }
        .btn-claim.state-claimed {
            background: rgba(39,174,96,.08); color: #3dbd72;
            border: 1px solid rgba(39,174,96,.25); cursor: not-allowed; clip-path: none; font-size: .65rem;
        }
        .btn-claim.state-loading {
            background: rgba(201,168,76,.1); color: var(--gold); cursor: wait; clip-path: none;
        }
        .btn-claim:disabled { opacity: .8; }

        .claim-status-text { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
        .claim-status-text.need-more { color: var(--text-muted); }
        .claim-status-text.ready     { color: var(--gold); opacity: .8; }
        .claim-status-text.done      { color: var(--green-ok); opacity: .7; }

        /* ── Sidebar ── */
        .sidebar { grid-column: 2; padding-top: .5rem; }
        .section-title {
            font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
            color: var(--gold); opacity: .8; margin-bottom: 1rem;
            padding-bottom: .5rem; border-bottom: 1px solid var(--border);
        }

        .event-info-card, .progress-card, .countdown-wrap {
            background: linear-gradient(145deg, rgba(16,13,30,.97), rgba(20,15,35,.97));
            border: 1px solid var(--border);
            clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
            padding: 1.3rem; margin-bottom: 1.5rem;
        }
        .event-info-card h3, .progress-card h3, .countdown-wrap h3 {
            font-family: 'Cinzel', serif; font-size: .8rem; font-weight: 600;
            color: var(--gold-light); letter-spacing: .1em; margin-bottom: 1rem;
        }
        .info-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: .55rem 0; border-bottom: 1px solid rgba(201,168,76,.06); font-size: .85rem;
        }
        .info-row:last-child { border-bottom: none; }
        .info-row .key { color: var(--text-muted); font-size: .78rem; }
        .info-row .val { color: var(--text-prime); font-family: 'Cinzel', serif; font-size: .82rem; }
        .info-row .val.gold { color: var(--gold-light); }

        .progress-track {
            position: relative; height: 10px;
            background: rgba(255,255,255,.05); border: 1px solid rgba(201,168,76,.12); margin-bottom: .5rem;
        }
        .progress-fill {
            position: absolute; top: 0; left: 0; height: 100%;
            background: linear-gradient(90deg, #7a4000, #c9820a, #f0c040);
            box-shadow: 0 0 10px rgba(201,130,10,.5);
        }
        .progress-fill::after {
            content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20px;
            background: linear-gradient(90deg, transparent, rgba(255,230,100,.5));
        }
        .progress-pct { font-family: 'Cinzel', serif; font-size: .75rem; color: var(--gold); text-align: right; margin-top: .3rem; }

        .countdown-wrap { text-align: center; }
        .countdown-wrap h3 { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); }
        .countdown-digits { display: flex; justify-content: center; gap: .5rem; }
        .cd-block { text-align: center; }
        .cd-val {
            font-family: 'Cinzel Decorative', serif; font-size: 1.6rem; font-weight: 700;
            color: var(--gold-light); display: block; line-height: 1;
            filter: drop-shadow(0 0 8px rgba(201,168,76,.4));
        }
        .cd-lbl { font-size: .58rem; letter-spacing: .15em; color: var(--text-muted); text-transform: uppercase; margin-top: .2rem; }
        .cd-sep { font-family: 'Cinzel', serif; font-size: 1.4rem; color: var(--gold-dark); align-self: center; margin-top: -.3rem; }

        /* ── Toast ── */
        .toast-container { position: fixed; bottom: 2rem; right: 2rem; z-index: 9999; display: flex; flex-direction: column; gap: .6rem; }
        .toast {
            font-family: 'Cinzel', serif; font-size: .75rem; letter-spacing: .1em;
            padding: .75rem 1.3rem; border: 1px solid;
            clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
            display: flex; align-items: center; gap: .6rem;
            animation: toastIn .35s ease; max-width: 320px;
        }
        .toast.success { background: rgba(39,174,96,.12); border-color: rgba(39,174,96,.4); color: #5dde8a; }
        .toast.error   { background: rgba(192,57,43,.12); border-color: rgba(192,57,43,.4);  color: #e87070; }
        @keyframes toastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

        /* ── No event state ── */
        .no-event {
            grid-column: 1 / -1; text-align: center; padding: 6rem 2rem;
        }
        .no-event h3 { font-family: 'Cinzel', serif; font-size: 1.2rem; color: var(--gold); opacity: .6; margin-bottom: .75rem; }
        .no-event p  { font-family: 'Crimson Text', serif; font-style: italic; color: var(--text-muted); }

        @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

        ::-webkit-scrollbar{width:5px}
        ::-webkit-scrollbar-track{background:var(--bg-deep)}
        ::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:3px}

        @media(max-width:960px){
            .page-wrapper{grid-template-columns:1fr}
            .sidebar{grid-column:1;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
            .section-title{grid-column:1/-1}
        }
        /* ── Choice Group ── */
        .choice-group {
            border: 1px solid rgba(155,89,182,.35);
            background: linear-gradient(135deg, rgba(59,31,110,.12) 0%, rgba(16,13,30,.97) 100%);
            clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
            animation: rowReveal .4s ease both;
            overflow: hidden;
        }
        .choice-group-header {
            display: flex; align-items: center; gap: 1rem;
            padding: .65rem 1rem;
            border-bottom: 1px solid rgba(155,89,182,.2);
            background: rgba(155,89,182,.06);
        }
        .choice-group-badge {
            display: inline-flex; align-items: center; gap: .4rem;
            font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
            color: #b57af8;
            border: 1px solid rgba(155,89,182,.45);
            padding: .2rem .75rem;
            clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
            background: rgba(155,89,182,.12);
            white-space: nowrap; flex-shrink: 0;
        }
        .choice-group-hint {
            font-family: 'Crimson Text', serif; font-style: italic;
            font-size: .88rem; color: var(--text-muted);
        }
        .choice-group-cards {
            display: flex; align-items: stretch;
        }
        .choice-item {
            flex: 1; clip-path: none !important; border: none !important;
            border-radius: 0; animation: none !important;
        }
        .choice-item + .choice-item { border-left: 1px solid rgba(155,89,182,.2) !important; }
        .choice-or-divider {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: .5rem .3rem; min-width: 28px;
            background: rgba(155,89,182,.06);
            border-left: 1px solid rgba(155,89,182,.15);
            border-right: 1px solid rgba(155,89,182,.15);
        }
        .choice-or-divider span {
            font-family: 'Cinzel', serif; font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
            color: #b57af8; opacity: .75;
            writing-mode: vertical-rl; text-orientation: mixed;
        }

        /* Group-taken state */
        .milestone.group-taken {
            opacity: .45;
            background: linear-gradient(135deg, rgba(59,31,110,.08) 0%, rgba(10,8,18,.97) 100%);
        }
        .milestone.group-taken::after {
            content: ''; position: absolute; inset: 0;
            background: repeating-linear-gradient(-45deg, transparent 0, transparent 6px, rgba(155,89,182,.05) 6px, rgba(155,89,182,.05) 7px);
            pointer-events: none;
        }
        .milestone.group-taken .reward-img-wrap { filter: grayscale(.8) brightness(.5); }
        .btn-claim.state-group-taken {
            background: rgba(155,89,182,.07); color: rgba(155,89,182,.55);
            border: 1px solid rgba(155,89,182,.2); cursor: not-allowed; clip-path: none; font-size: .65rem;
        }
        .claim-status-text.group-taken { color: rgba(155,89,182,.6); }

        @media(max-width:640px){
            .milestone{grid-template-columns:110px 1fr}
            .milestone-action{grid-column:1/-1;border-left:none;border-top:1px solid var(--border);flex-direction:row;justify-content:space-between;padding:.75rem 1rem}
            .sidebar{grid-template-columns:1fr}
            .choice-group-cards { flex-direction: column; }
            .choice-or-divider { flex-direction: row; padding: .3rem .75rem; min-width: unset; min-height: 24px; border-left: none; border-right: none; border-top: 1px solid rgba(155,89,182,.2); border-bottom: 1px solid rgba(155,89,182,.2); }
            .choice-or-divider span { writing-mode: horizontal-tb; }
            .choice-item + .choice-item { border-left: none !important; border-top: 1px solid rgba(155,89,182,.2) !important; }
        }