body {
    background: #181a22;
    color: #eee;
    font-family: "Noto Sans TC", "Microsoft JhengHei", "Arial", sans-serif;
}

:root {
    font-size: clamp(15px, 2.2vw, 18px);
}

@media (max-width: 600px) {
    :root {
        font-size: clamp(13px, 4.2vw, 18px);
    }
}

/* 主要內容區塊 */
#golden-apple-simulator {
    width: 100%;
    max-width: 900px;
    margin: 2.4em auto 2em auto;
    box-sizing: border-box;
    padding: 2.4em 1.2em 2em 1.2em;
    background: rgba(30, 27, 48, 0.93);
    border-radius: 1.6em;
    box-shadow: 0 0 32px #0008, 0 4px 24px #4b3b1a33;
    border: 1.5px solid #303057;
    position: relative;
}

@media (max-width: 1100px) {

    #golden-apple-simulator,
    .draw-log-wrap {
        max-width: 99vw;
        padding: 2vw 1vw;
    }
}

@media (max-width: 600px) {

    #golden-apple-simulator,
    .draw-log-wrap {
        padding: 0.7em 0.5em !important;
        max-width: 99vw;
        border-radius: 0.7em;
    }
}

/* 標題 */
#golden-apple-simulator h1 {
    width: 100%;
    text-align: center;
    font-size: 2.3em;
    color: #ffe15b;
    margin-bottom: 1.25em;
    margin-left: 0;
    margin-right: 0;
    text-shadow: 0 3px 16px #ffe87f88, 0 1px 0 #444;
    letter-spacing: 0.04em;
    font-weight: bold;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    #golden-apple-simulator h1 {
        font-size: clamp(1.36em, 6vw, 2.3em) !important;
        padding: 0 0.4em;
        word-break: break-word;
    }
}

/* 按鈕區 */
.sim-btns {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85em;
}

.sim-btns button {
    font-size: 1.16em;
    padding: 0.7em 2.1em;
    border-radius: 1.3em;
    margin: 0 0.2em 0.7em 0.2em;
    background: linear-gradient(98deg, #ffe15b 0%, #ffda66 90%);
    color: #222;
    border: none;
    cursor: pointer;
    transition: background 0.16s, box-shadow 0.21s, transform 0.12s;
    box-shadow: 0 4px 16px #ffeebb55, 0 1.5px 6px #0002;
    font-weight: bold;
    letter-spacing: 0.04em;
    outline: none;
    border: 1.5px solid #fffbe0;
    min-width: 150px;
}

.sim-btns button:disabled {
    background: #aaa;
    color: #ddd;
    cursor: not-allowed;
    box-shadow: none;
    border: 1.5px solid #666;
}

.sim-btns button:active:not(:disabled) {
    background: linear-gradient(98deg, #ffd52a 0%, #eec136 90%);
    transform: scale(0.97);
}

@media (max-width: 600px) {
    .sim-btns button {
        min-width: 85vw !important;
        max-width: 99vw;
        font-size: 1.06em;
        margin-bottom: 0.5em;
        padding: 0.95em 0;
    }

    .sim-btns {
        gap: 0.55em;
        flex-direction: column;
        align-items: center;
    }
}

/* 目標獎品/單抽金額區：橫排並排，手機下自動壓縮，極窄才單欄 */
.jackpot-bottom-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    /* 讓兩個欄位在外框中間 */
    align-items: flex-start;
    gap: 2.2em;
    width: 100%;
    max-width: 670px;
    /* 你可以改成你要的最大寬度 */
    margin: 0.8em auto 0.5em auto;
}

.jackpot-col {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    min-width: 0;
    max-width: 450px;
    gap: 0.55em;
}

.jackpot-label {
    font-size: 1.11em;
    font-weight: bold;
    color: #ffe15b;
    white-space: nowrap;
    margin-right: 0.1em;
    letter-spacing: 0.02em;
}

#jackpot-keywords {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 0.5em;
    border: 1.7px solid #f6c73c;
    background: #181818;
    color: #ffe15b;
    padding: 0.5em 1.1em;
    font-size: 1.13em;
    outline: none;
    transition: border 0.15s;
    margin: 0;
    text-align: left;
}

.jackpot-money-wrap {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.jackpot-money-input,
#draw-money-unit {
    width: 3.7em;
    min-width: 2.8em;
    max-width: 7em;
    box-sizing: border-box;
    border-radius: 0.5em;
    border: 1.7px solid #f6c73c;
    background: #181818;
    color: #ffe15b;
    padding: 0.5em 1.1em;
    font-size: 1.13em;
    outline: none;
    transition: border 0.15s;
    margin: 0;
    display: block;
    text-align: right;
}

.jackpot-money-unit {
    color: #ffe15b;
    font-weight: bold;
    font-size: 1.13em;
    margin-left: 0.15em;
    white-space: nowrap;
}

#jackpot-keywords:focus,
.jackpot-money-input:focus,
#draw-money-unit:focus {
    border-color: #ffea98;
}

@media (max-width: 700px) {
    .jackpot-bottom-row {
        gap: 0.7em;
        max-width: 99vw;
    }

    .jackpot-col {
        gap: 0.25em;
        min-width: 0;
        max-width: 99vw;
        flex: 1 1 0;
    }

    #jackpot-keywords {
        font-size: 1em;
        padding: 0.42em 0.7em;
    }

    .jackpot-money-input,
    #draw-money-unit {
        font-size: 1em;
        width: 3.2em;
        max-width: 6.7em;
        padding: 0.42em 0.7em;
    }

    .jackpot-label {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .jackpot-bottom-row {
        flex-wrap: wrap;
        flex-direction: column;
        gap: 0.32em;
    }

    .jackpot-col {
        width: 100%;
        max-width: 99vw;
        margin-bottom: 0.12em;
        gap: 0.15em;
    }
}

/* 自動抽獎速度置中 */
.speed-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4em;
    margin: 0.6em auto 0.5em auto;
    font-size: 1.10em;
    width: 100%;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .speed-row {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
    }
}

.speed-row input[type="range"] {
    vertical-align: middle;
    margin: 0 0.9em;
    accent-color: #ffe15b;
    width: 185px;
}

@media (max-width: 600px) {
    .speed-row input[type="range"] {
        width: 75vw !important;
        min-width: 55vw;
        margin: 0 0.1em 0 0.2em;
    }
}

#auto-speed-val {
    color: #ffe15b;
    font-weight: bold;
    font-size: 1.13em;
    margin-left: 0.3em;
    text-shadow: 0 1px 6px #ffea9890;
}

/* 對話框卡片 */
.draw-log-wrap {
    width: 100%;
    max-width: 1400px;
    margin: 2.2em auto 0 auto;
    background: rgba(23, 19, 33, 0.96);
    border-radius: 1.3em;
    min-height: 8em;
    max-height: 25em;
    box-shadow: 0 3px 24px #c6b97023, 0 4px 18px #000a;
    border: 1.8px solid #e4d6a1bb;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-bottom: 3.5px solid #ffe36a95;
}

/* 對話內容區 */
.draw-log {
    height: 21.5em;
    max-height: 21.5em;
    overflow-y: auto;
    padding: 1.25em 1.8em 0.6em 1.8em;
    display: flex;
    flex-direction: column;
    font-size: 1.19em;
    align-items: flex-start;
    gap: 0.14em;
    scroll-behavior: smooth;
}

@media (max-width: 600px) {
    .draw-log {
        font-size: clamp(0.95em, 3.4vw, 1.13em) !important;
        padding: 1.1em 0.6em 0.4em 0.6em;
    }
}

/* 單筆對話紀錄 */
.log-entry {
    display: flex;
    align-items: center;
    background: linear-gradient(98deg, #2e2948 30%, #181c32 100%);
    color: #ccd7fc;
    border-radius: 0.9em;
    padding: 0.54em 1.22em 0.48em 1.22em;
    margin-bottom: 0.33em;
    box-shadow: 0 2px 10px #fffbe024, 0 0.5px 4px #ffe2c422;
    font-weight: 500;
    word-break: break-word;
    text-align: left;
    font-size: 1.15em;
    letter-spacing: 0.01em;
    border-left: 5px solid #a3aff0;
    transition: background 0.18s, color 0.18s;
}

@media (max-width: 600px) {
    .log-entry {
        font-size: clamp(0.98em, 3vw, 1.15em) !important;
        padding: 0.35em 0.55em 0.32em 0.56em;
        margin-bottom: 0.19em;
    }
}

.log-entry .prefix {
    color: #c2c2c2;
    font-weight: bold;
    margin-right: 0.62em;
    letter-spacing: 0.04em;
    font-size: 1em;
    flex-shrink: 0;
}

.log-entry .prize {
    color: #67cbfd;
    font-weight: bold;
    font-size: 1.05em;
    background: none;
    padding: 0 0.08em;
    letter-spacing: 0.02em;
    transition: color 0.18s;
}

/* -- 好獎高亮動畫 -- */
.log-entry.good {
    background: linear-gradient(92deg, #fff9dd 6%, #ffe15b 94%);
    border-left: 6px solid #ffd700;
    box-shadow: 0 2px 32px #ffe15b50, 0 0.5px 14px #ffd70034;
    color: #7c5c11;
    font-weight: bold;
    position: relative;
}

.log-entry.good .prefix {
    color: #b88702;
    font-size: 1.01em;
}

.log-entry.good .prize {
    color: #e43030;
    font-weight: bold;
    text-shadow: 0 1px 7px #ffe15b99;
    letter-spacing: 0.05em;
    font-size: 1.13em;
    background: none;
}

/* 單抽動畫，連抽時不加 */
.popgood {
    animation: popgood 0.56s cubic-bezier(.49, 1.75, .48, .85);
}

@keyframes popgood {
    0% {
        transform: scale(0.82) rotate(-3deg);
        box-shadow: 0 0 0 #ffd70000;
    }

    60% {
        transform: scale(1.13) rotate(2deg);
    }

    80% {
        transform: scale(0.98) rotate(-1.1deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

/* 狀態統計列 */
.counter-wrap {
    margin: 1.7em auto 0.9em auto;
    font-size: 1.19em;
    color: #ffe15b;
    font-weight: bold;
    text-shadow: 0 1px 8px #ffefb088;
    letter-spacing: 0.03em;
    background: rgba(27, 23, 30, 0.56);
    border-radius: 0.8em;
    padding: 0.7em 1em 0.65em 1em;
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    word-break: break-all;
}

@media (max-width: 600px) {
    .counter-wrap {
        font-size: clamp(1em, 3.5vw, 1.19em) !important;
        padding: 0.7em 0.3em 0.65em 0.3em;
    }
}

/* 機率表 */
.accordion-btn {
    width: 98%;
    margin: 1.7em auto 0.3em auto;
    background: linear-gradient(91deg, #ffefb0, #ffe15b 90%);
    color: #c08d12;
    border: 1.5px solid #ffd700;
    border-radius: 0.7em;
    font-size: 1.14em;
    font-weight: bold;
    cursor: pointer;
    padding: 0.67em 0;
    transition: background 0.15s;
    box-shadow: 0 2.5px 11px #ffd90019;
    display: block;
    text-align: center;
    outline: none;
}

.accordion-btn:hover {
    background: #ffe073;
}

.accordion-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.38s cubic-bezier(.5, 1.5, .5, 1), padding 0.2s;
    padding: 0;
    margin-bottom: 0.2em;
}

.prize-list {
    background: #fff8e1ee;
    border-radius: 1em;
    box-shadow: 0 2px 13px #ffd90022;
    text-align: left;
    width: 98%;
    margin: 0 auto;
}

.prize-list ul {
    padding-left: 1.2em;
    margin: 0;
}

.prize-list li {
    margin-bottom: 0.22em;
    font-size: 1.09em;
    color: #57430a;
    font-weight: 500;
    letter-spacing: 0.01em;
}

@media (max-width: 600px) {

    .accordion-btn,
    .prize-list {
        width: 99vw !important;
        font-size: 1em;
    }
}

/* 活動資訊與版本 */
.event-period,
.simulator-version {
    color: #ffe15b;
    font-size: 1.12em;
    margin: 1.25em 0 0.3em 0;
    font-weight: 500;
    text-shadow: 0 1px 7px #ffea9815;
    letter-spacing: 0.03em;
    text-align: center;
    display: block;
}

/* 截圖按鈕 */
#screenshot-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
    background: #ffe15b;
    color: #333;
    border: none;
    border-radius: 0.7em;
    padding: 0.45em 1.2em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 10px #fffbe024, 0 0.5px 4px #ffe2c422;
    transition: background 0.16s;
}

#screenshot-btn:hover {
    background: #ffe95b;
}

@media (max-width: 600px) {
    #screenshot-btn {
        top: 7px;
        right: 8px;
        padding: 0.42em 0.93em;
        font-size: 1em;
    }
}

.jackpot-counter-wrap {
    margin: 0.2em auto 1em auto;
    font-size: 1.09em;
    color: #e43030;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.04em;
}