/* =============================================================================
   幸运大转盘 · 视觉层（糖果魔法课堂风）
   -----------------------------------------------------------------------------
   换素材只动这里和 :root 里的图片变量；游戏逻辑都在 game.js。
   页面不使用浏览器默认控件样式：按钮 / 弹窗 / 开关全部按糖果风自定义。
   ============================================================================= */

:root {
    /* ---- 素材集中在这里，替换素材只改这一段 ---- */
    --img-bg: url("assets/bg.webp");
    --img-ring: url("assets/wheel-ring.webp");
    --img-center: url("assets/center-btn.webp");
    --img-pointer: url("assets/pointer.webp");
    --img-modal: url("assets/modal-panel.webp");
    --img-result-art: url("assets/result-art.webp");
    --img-chest: url("assets/icons/chest.webp");
    --img-star: url("assets/icons/star.webp");
    --img-coin: url("assets/icons/coin.webp");
    --img-flower: url("assets/icons/flower.webp");
    --img-question: url("assets/icons/question.webp");
    --img-trophy: url("assets/icons/trophy.webp");

    --candy-pink: #ff5f9e;
    --candy-pink-dark: #e0417f;
    --candy-yellow: #ffd23e;
    --candy-blue: #4fc3f7;
    --candy-purple: #8b5cf6;
    --candy-cream: #fff7e8;
    --ink: #5b3a64;

    --wheel-size: min(72vh, 74vw, 660px);
}

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

html, body { height: 100%; }

body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--ink);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- 背景：魔法课堂 ---------- */
.bg-layer {
    position: fixed;
    inset: 0;
    background: var(--img-bg) center / cover no-repeat;
    z-index: 0;
}
.bg-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 42%, rgba(255, 246, 214, .12), rgba(58, 32, 84, .38) 88%);
}

/* ---------- 舞台布局 ---------- */
.stage {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    gap: 18px;
    padding: 14px 18px 14px;
}

.main-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ---------- 模式切换 Tab（糖果药丸） ---------- */
.mode-tabs {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .18);
    border: 2px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 26px rgba(58, 32, 84, .35);
}

.mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    font: 800 15px/1 inherit;
    letter-spacing: 1px;
    color: #fff;
    padding: 11px 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08)), rgba(139, 92, 246, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 rgba(90, 44, 131, .45);
    transition: transform .15s, box-shadow .15s, background .2s;
    text-shadow: 0 1px 2px rgba(90, 30, 90, .45);
}
.mode-tab img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(90, 30, 90, .4)); }
.mode-tab:hover { transform: translateY(-2px); }
.mode-tab:active { transform: translateY(1px) scale(.97); }

.mode-tab.active {
    background: linear-gradient(180deg, #ffd76e, #ff9f43 55%, #ff7eb3);
    color: #7a2d52;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 0 #d4508b, 0 12px 24px rgba(212, 80, 139, .45);
    transform: translateY(-3px) scale(1.04);
}
.mode-tab.active img { filter: drop-shadow(0 1px 1px rgba(122, 45, 82, .35)); }

/* ---------- 转盘主视觉 ---------- */
.wheel-zone {
    flex: 1;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 0;
}

.wheel-wrap {
    position: relative;
    width: var(--wheel-size);
    height: var(--wheel-size);
    filter: drop-shadow(0 24px 44px rgba(40, 16, 70, .5));
}

/* 扇面（旋转层）：conic-gradient 由 game.js 生成 */
.wheel-disc {
    position: absolute;
    inset: 13.2%;
    border-radius: 50%;
    background: #f7edff;
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .85), inset 0 0 34px rgba(122, 60, 160, .28);
    will-change: transform;
}
.wheel-disc .sector-sep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}
.wheel-disc .sector-shine {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 46%);
}

/* 扇区文字 / 图标（随盘旋转） */
.sl {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.sl span {
    margin-top: 7.5%;
    width: 34%;
    text-align: center;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 0 rgba(140, 40, 90, .5), 0 0 8px rgba(120, 40, 110, .35);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.15;
}
.sl span small { font-weight: 700; font-size: .68em; opacity: .92; }
.sl img {
    width: 58%;
    max-width: 64px;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(120, 40, 110, .4));
}

/* 外框（不旋转） */
.wheel-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* 顶部指针 */
.wheel-pointer {
    position: absolute;
    top: -7.5%;
    left: 50%;
    width: 21%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 8px 14px rgba(40, 16, 70, .45));
    transform-origin: 50% 18%;
}
.wheel-pointer.wobble { animation: ptr-wobble .12s ease-in-out; }
@keyframes ptr-wobble {
    0% { transform: translateX(-50%) rotate(0deg); }
    40% { transform: translateX(-50%) rotate(-13deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}

/* 中心「开始」按钮（独立素材按钮） */
.wheel-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 27%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: 6;
    border: 0;
    padding: 0;
    background: var(--img-center) center / contain no-repeat;
    cursor: pointer;
    transition: transform .12s, filter .2s;
    filter: drop-shadow(0 10px 18px rgba(40, 16, 70, .5));
}
.wheel-center:hover { transform: translate(-50%, -50%) scale(1.05); }
.wheel-center:active,
.wheel-center.pressed { transform: translate(-50%, -50%) scale(.92); }
.wheel-center:disabled { cursor: default; filter: grayscale(.25) brightness(.92) drop-shadow(0 10px 18px rgba(40, 16, 70, .5)); }
.wheel-center.spinning { animation: center-pulse 1s ease-in-out infinite; }
@keyframes center-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.045); }
}

/* ---------- 右侧窄控制区 ---------- */
.side-panel {
    width: 284px;
    flex: 0 0 284px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 58px 14px 16px;   /* 顶部留给右上角的班级悬浮条 */
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 251, 240, .92), rgba(255, 240, 250, .86));
    border: 2px solid rgba(255, 255, 255, .75);
    box-shadow: 0 18px 44px rgba(58, 32, 84, .4), inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    overflow: auto;
}
.side-panel h2 {
    font-size: 17px;
    font-weight: 900;
    color: #a33d78;
    text-align: center;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.side-panel h2::before, .side-panel h2::after {
    content: "";
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #ffb7d0);
}
.side-panel h2::after { background: linear-gradient(90deg, #ffb7d0, transparent); }

.panel-block {
    background: rgba(255, 255, 255, .72);
    border: 1.5px dashed #f3a8c6;
    border-radius: 18px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.panel-block h3 { font-size: 13px; color: #b0568b; letter-spacing: 1px; }

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #6d4b7d;
}

/* 糖果开关 */
.switch {
    position: relative;
    width: 52px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: #d9c3e8;
    box-shadow: inset 0 2px 5px rgba(90, 44, 131, .3);
    transition: background .2s;
    flex: 0 0 52px;
}
.switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, #ffe9f3);
    box-shadow: 0 2px 5px rgba(90, 44, 131, .4);
    transition: left .18s;
}
.switch.on { background: linear-gradient(180deg, #ff8fb8, var(--candy-pink)); }
.switch.on::after { left: 27px; }

/* 糖果按钮（控制区用） */
.candy-btn {
    border: 0;
    cursor: pointer;
    font: 800 14px/1 inherit;
    color: #fff;
    padding: 11px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #7dd8ff, #38a8f0 60%, #2f8fd6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 4px 0 #2274b8, 0 8px 16px rgba(34, 116, 184, .35);
    transition: transform .12s, box-shadow .12s;
    text-shadow: 0 1px 2px rgba(20, 80, 130, .4);
}
.candy-btn.pink { background: linear-gradient(180deg, #ff9fc4, #ff5f9e 60%, #ef4183); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 4px 0 #c93370, 0 8px 16px rgba(201, 51, 112, .35); text-shadow: 0 1px 2px rgba(150, 30, 90, .4); }
.candy-btn.violet { background: linear-gradient(180deg, #c9a6ff, #9a6cf5 60%, #8452e6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 4px 0 #6a3fc4, 0 8px 16px rgba(106, 63, 196, .35); text-shadow: 0 1px 2px rgba(70, 30, 140, .4); }
.candy-btn:hover { transform: translateY(-2px); }
.candy-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 0 rgba(0,0,0,.18); }
.candy-btn:disabled { opacity: .55; cursor: default; transform: none; }

.candy-input, .candy-area {
    width: 100%;
    border: 2px solid #f3b7d2;
    border-radius: 13px;
    background: #fffdf8;
    padding: 9px 11px;
    font: 600 14px/1.5 inherit;
    color: #6d4b7d;
    outline: none;
    resize: none;
}
.candy-input:focus, .candy-area:focus { border-color: var(--candy-pink); box-shadow: 0 0 0 3px rgba(255, 95, 158, .22); }
.candy-area { min-height: 128px; }

/* 点名进度：三个小统计块（避免一行文字挤成两行） */
.stat-row { display: flex; gap: 8px; }
.stat {
    flex: 1;
    text-align: center;
    background: #ffeef5;
    border: 1.5px solid #ffc4dc;
    border-radius: 13px;
    padding: 8px 4px;
}
.stat b { display: block; font-size: 20px; color: #e0417f; }
.stat span { font-size: 11.5px; font-weight: 700; color: #b0568b; }

.progress-pill {
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    color: #a33d78;
    background: #ffeef5;
    border: 1.5px solid #ffc4dc;
    border-radius: 12px;
    padding: 8px;
}

/* 奖项名称编辑 */
.prize-list { display: flex; flex-direction: column; gap: 8px; }
.prize-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: #6d4b7d; }
.prize-item img { width: 30px; height: 30px; object-fit: contain; }
.prize-name-input {
    min-width: 0;
    flex: 1;
    border: 1.5px solid #f3b7d2;
    border-radius: 10px;
    background: #fffdf8;
    padding: 7px 9px;
    font: 700 13px/1.2 inherit;
    color: #6d4b7d;
    outline: none;
    user-select: text;
    -webkit-user-select: text;
}
.prize-name-input:focus { border-color: var(--candy-pink); box-shadow: 0 0 0 3px rgba(255, 95, 158, .18); }
.prize-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prize-actions .candy-btn { padding: 9px 7px; font-size: 12.5px; }
.candy-btn.soft {
    color: #8f5b7a;
    background: linear-gradient(180deg, #fff, #ffeaf3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 0 #e5b5c9, 0 8px 16px rgba(167, 83, 126, .15);
    text-shadow: none;
}

/* 历史记录 */
.hist-list { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow: auto; }
.hist-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: #6d4b7d;
    background: #fff;
    border: 1px solid #ffd9e8;
    border-radius: 10px;
    padding: 6px 8px;
}
.hist-item img { width: 20px; height: 20px; object-fit: contain; }
.hist-item time { margin-left: auto; color: #b48baa; font-weight: 600; font-size: 11px; }
.hist-empty { text-align: center; color: #b48baa; font-size: 12.5px; padding: 6px; }

/* ---------- 结果弹窗（锚定素材的固定构图） ---------- */
/* 设计原则：彩带拱门、面板卡片、标题、图标、按钮全部锚定在 .modal-stage 上，
   尺寸一律用舞台/卡片的百分比和 cqw（卡片容器宽度单位），不用任何 vh/vw/clamp，
   因此屏幕宽窄变化时构图永远是同一张图的整体缩放，元素之间不会相对漂移。 */
.modal-layer {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: rgba(46, 22, 66, .45);
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
}
.modal-layer.show { opacity: 1; pointer-events: auto; }

/* 舞台 = 彩带拱门素材的完整画布（1100×619），宽度同时受视口宽/高约束 */
.modal-stage {
    position: relative;
    width: min(94vw, calc(92vh * 1100 / 619), 1160px);
    aspect-ratio: 1100 / 619;
    opacity: 0;
    transform: scale(.8) rotate(-2deg);
    transition: opacity .35s, transform .48s cubic-bezier(.2, 1.4, .4, 1);
}
.modal-layer.show .modal-stage { opacity: 1; transform: scale(1) rotate(0deg); }

/* 彩带拱门铺满舞台 */
.celebrate-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    filter: drop-shadow(0 14px 30px rgba(40, 16, 70, .4));
}

/* 面板卡片：在舞台上的位置/大小固定（拱门洞口实测 x 27%~73%、y 39% 起） */
.modal-card {
    position: absolute;
    left: 50%;
    top: 26.5%;
    transform: translateX(-50%);
    width: 47%;
    aspect-ratio: 4 / 3;              /* 与 modal-panel 素材一致（1200×900），不被拉变形 */
    background: var(--img-modal) center / 100% 100% no-repeat;
    container-type: inline-size;      /* 内部文字/图标用 cqw，随卡片等比缩放 */
    filter: drop-shadow(0 10px 22px rgba(40, 16, 70, .35));
}

/* 标题落在面板顶部横幅空白处（素材实测 y 14%~24%） */
.modal-title {
    position: absolute;
    top: 18.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 46%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 4.6cqw;
    font-weight: 900;
    color: #8a2be2;
    letter-spacing: .5cqw;
    text-shadow: 0 1px 0 #fff, 0 3px 6px rgba(138, 43, 226, .25);
}

/* 图标 + 名字 + 副文案：奶油内容区（素材实测 y 33%~72%） */
.modal-body {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 33%;
    height: 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2cqw;
}
.modal-icon {
    width: 13.5cqw;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(120, 40, 110, .35));
    animation: prize-pop .55s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes prize-pop {
    0% { transform: scale(0) rotate(-30deg); }
    70% { transform: scale(1.15) rotate(6deg); }
    100% { transform: scale(1) rotate(0); }
}
.modal-name {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 5.2cqw;
    font-weight: 900;
    color: #ff4f8d;
    text-shadow: 0 2px 0 #fff, 0 6px 12px rgba(255, 79, 141, .35);
    text-align: center;
    line-height: 1.15;
}
.modal-sub {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 2.5cqw;
    font-weight: 700;
    color: #9b6bb8;
}

/* 按钮固定在奶油区下缘、底部月牙装饰之上 */
.modal-actions {
    position: absolute;
    left: 50%;
    bottom: 24.5%;
    transform: translateX(-50%);
    display: flex;
    gap: 3cqw;
}
.modal-actions .candy-btn {
    font-size: 2.7cqw;
    padding: 1.9cqw 4.6cqw;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------- 彩带庆祝层 ---------- */
.confetti-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.confetti-layer .ribbon, .confetti-layer .star-bit { position: absolute; top: -6%; will-change: transform; }
.confetti-layer .ribbon { width: 10px; height: 26px; border-radius: 3px; animation: confetti-fall linear forwards; }
.confetti-layer .star-bit { width: 22px; height: 22px; background: var(--img-star) center / contain no-repeat; animation: confetti-fall linear forwards; }
@keyframes confetti-fall {
    0% { transform: translateY(-8vh) rotate(0deg) rotateX(0deg); opacity: 1; }
    100% { transform: translateY(108vh) rotate(720deg) rotateX(540deg); opacity: .9; }
}

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translate(-50%, -90px);
    z-index: 70;
    background: linear-gradient(180deg, #fff, #fff3fa);
    color: #a33d78;
    font-weight: 800;
    font-size: 15px;
    padding: 12px 22px;
    border: 2px solid #ffc4dc;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(58, 32, 84, .35);
    transition: transform .3s cubic-bezier(.2, 1.4, .4, 1);
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- 响应式 ---------- */
@media (max-width: 1020px) {
    body { overflow: auto; }
    .stage { flex-direction: column; height: auto; min-height: 100%; }
    :root { --wheel-size: min(88vw, 520px); }
    .side-panel { width: 100%; flex: initial; }
    .wheel-zone { min-height: unset; padding: 6px 0 12px; }
}