:root{
    --wj-theme: #c62828;
    --wj-bg1: #fff5f2;
    --wj-bg2: #ffe0d6;
    --wj-text: #2b2b2b;
    --wj-gold: #ffca28;
}
*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; padding:0; }
body{
    font-family: "Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
    color: var(--wj-text);
    background: radial-gradient(circle at 50% 0%, var(--wj-bg2), var(--wj-bg1) 60%);
    min-height: 100vh;
    display: flex; justify-content: center;
}
.wj-wrap{
    width: 100%; max-width: 480px;
    padding: 24px 16px 32px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.wj-header h1{
    margin: 8px 0 4px; font-size: 26px; font-weight: 800;
    color: var(--wj-theme);
    letter-spacing: 1px;
}
.wj-sub{ margin: 0 0 8px; font-size: 15px; color:#7a5c54; }

.wj-stage{
    position: relative; width: 100%; max-width: 360px;
    aspect-ratio: 1 / 1; margin: 18px auto 8px;
    display: flex; align-items: center; justify-content: center;
}
#wjWheel{
    width: 100%; height: 100%;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(198,40,40,.28), 0 0 0 10px #fff, 0 0 0 14px var(--wj-gold);
    background:#fff;
}
/* 指針（頂端朝下） */
.wj-pointer{
    position:absolute; top:-6px; left:50%; transform:translateX(-50%);
    width:0;height:0;
    border-left:18px solid transparent;
    border-right:18px solid transparent;
    border-top:30px solid var(--wj-theme);
    filter: drop-shadow(0 3px 3px rgba(0,0,0,.25));
    z-index:5;
}
/* 中央按鈕 */
.wj-spin-btn{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width: 92px; height:92px; border-radius:50%;
    border:none; cursor:pointer;
    background: var(--wj-theme); color:#fff;
    font-size:18px; font-weight:800; letter-spacing:1px;
    box-shadow: 0 4px 10px rgba(0,0,0,.3), inset 0 0 0 4px rgba(255,255,255,.85);
    transition: transform .1s ease;
    z-index:4;
}
.wj-spin-btn:active{ transform: translate(-50%,-50%) scale(.94); }
.wj-spin-btn:disabled{ background:#bdbdbd; cursor:not-allowed; }

.wj-hint{ font-size:13px; color:#8d6e63; margin:12px 0 0; }
.wj-closed{ margin:48px 0; font-size:18px; color:#8d6e63; }
.wj-footer{ margin-top:28px; font-size:12px; color:#b09b95; }

/* 彈窗 */
.wj-modal{
    position:fixed; inset:0; background:rgba(0,0,0,.55);
    display:flex; align-items:center; justify-content:center; padding:24px; z-index:50;
}
.wj-modal[hidden]{ display:none; }
.wj-modal-box{
    background:#fff; border-radius:20px; padding:28px 24px 24px;
    width:100%; max-width:340px; text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.3);
    animation: wjpop .28s ease;
}
@keyframes wjpop{ from{ transform:scale(.8); opacity:0 } to{ transform:scale(1); opacity:1 } }
.wj-modal-icon{ font-size:52px; line-height:1; }
.wj-modal-box h2{ margin:10px 0 6px; color:var(--wj-theme); font-size:22px; }
.wj-modal-prize{ font-size:20px; font-weight:800; margin:6px 0; }
.wj-modal-msg{ font-size:14px; color:#6d4c41; margin:12px 0 18px; line-height:1.6; }
.wj-code-wrap{ margin:14px auto; }
.wj-code-label{ font-size:12px; color:#999; }
.wj-code{
    font-family: "Courier New", monospace; font-size:24px; font-weight:800;
    letter-spacing:2px; color:#fff; background:var(--wj-theme);
    border-radius:12px; padding:10px 8px; margin-top:6px;
    user-select:all;
}
.wj-modal-close{
    background:var(--wj-theme); color:#fff; border:none; border-radius:999px;
    padding:12px 40px; font-size:16px; font-weight:700; cursor:pointer;
}