:root{color-scheme:light;--ink:#372641;--muted:#6e576d;--paper:#fffaf0;--line:#eadac8;--clay:#a84831;--blue:#284372;--gold:#ffcf6d;font-family:"PingFang HK","Noto Sans CJK TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:#fff6e8}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 52% 49%,#ffefd2 0,transparent 56%),radial-gradient(ellipse at 7% 86%,#ffe5db 0,transparent 38%),#fff9ee}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #446aab;outline-offset:3px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:15px clamp(18px,4vw,68px);border-bottom:1px solid #ecdecc;background:#fffaf0d9}
.brand{border:0;background:none;display:flex;align-items:center;gap:10px;text-align:left;font-size:.9rem;font-weight:900;letter-spacing:.07em;padding:0}
.brand-mark{display:grid;place-items:center;background:#f8d785;color:#653926;width:35px;height:35px;border:1px solid #e6b35b;border-radius:11px;transform:rotate(-9deg);font-size:1.2rem}
.brand small{display:block;color:var(--muted);font-size:.68rem;letter-spacing:.12em}
.teacher-button,.plain-button{border:1px solid #ddc6b5;background:#fff9ee;border-radius:11px;font-weight:750;padding:9px 14px}
.teacher-button span{color:var(--clay);margin-left:5px}
button:hover:not(:disabled){filter:brightness(.97)}
.hero{text-align:center;padding:24px 16px 0}
.eyebrow,.kicker{color:var(--clay);font-size:.75rem;font-weight:900;letter-spacing:.16em;margin:0}
.hero .eyebrow span{width:24px;height:1px;background:#d58b66;display:inline-block;vertical-align:middle;margin:0 7px}
h1,h2,p{margin:0}
.hero h1{font-size:clamp(2rem,5.2vw,4.55rem);letter-spacing:-.065em;line-height:1.18;margin:.17em 0 .15em;font-weight:950}
.hero h1 span{color:#a84831}
.hero h1 .title-star{display:inline-block;color:#c27825;font-size:.58em;margin-left:.23em;vertical-align:.4em;transform:rotate(10deg)}
.hero>p:last-child{color:var(--muted);font-size:clamp(.92rem,1.6vw,1.12rem);font-weight:650}
.play-grid{display:grid;grid-template-columns:minmax(250px,1fr) minmax(350px,1.35fr) minmax(250px,1fr);align-items:center;gap:12px;max-width:1400px;margin:0 auto;padding:8px clamp(12px,3vw,40px) 0}
.panel{background:#fffaf2;border:1px solid var(--line);border-radius:24px;box-shadow:0 7px 0 #efdcca80}
.roster{align-self:center;padding:17px;z-index:1;min-width:0}
.roster-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:12px}
.roster h2,.admin-panel h2{font-size:1.48rem;line-height:1.2;margin:.2rem 0 .1rem}
.counter{background:#f2e6f0;color:#704364;border-radius:999px;padding:.4em .7em;font-size:.78rem;font-weight:850;white-space:nowrap}
.name-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:340px;overflow:auto;padding:4px}
.name-card{border:1px solid #ebd9cb;border-radius:13px;min-height:47px;background:#fffcf6;display:flex;align-items:center;gap:5px;text-align:left;padding:4px 6px;font-weight:750;min-width:0}
.name-card .name{overflow-wrap:anywhere;min-width:0}
.name-card[aria-pressed="true"]{background:#fff0c7;border-color:#bd792c;box-shadow:0 0 0 1px #bd792c}
.name-card.played{background:#f5efe7;color:#6f605c}
.check{color:#376149;margin-left:auto;font-weight:900}
.avatar{position:relative;width:33px;aspect-ratio:1;flex:none;overflow:hidden;border-radius:50%;background:#e6e7f4;display:inline-block}
.avatar.girl{background:#f7e1e8}
.avatar img,.peek img{position:absolute;width:300%;max-width:none;height:auto;left:calc(-100% * var(--col));top:calc(-100% * var(--row));mix-blend-mode:multiply;pointer-events:none}
.roster-note{font-size:.75rem;color:var(--muted);margin:10px 0 0}
.machine-area{min-width:0;text-align:center;position:relative}
.stage{position:relative;width:min(100%,420px,calc(100vh - 270px));min-width:280px;aspect-ratio:1;margin:0 auto}
.machine{width:100%;height:100%;display:block;mix-blend-mode:multiply}
.spark{position:absolute;color:#ba792e;font-size:clamp(1.5rem,4vw,3rem);z-index:2;pointer-events:none}
.spark.a{left:13%;top:14%;transform:rotate(-12deg)}.spark.b{right:10%;top:29%;color:#b96366}
.slot{position:absolute;left:53%;top:49%;width:15%;height:9%;border:2px dashed transparent;border-radius:10px;background:transparent;padding:0;z-index:4}
.slot span{position:absolute;left:94%;top:9%;padding:3px 6px;background:#fff3cb;color:#644129;border-radius:6px;font-size:.7rem;font-weight:900;white-space:nowrap;visibility:hidden}
.slot.ready{border-color:#fff2b8;box-shadow:0 0 0 2px #82432b,0 0 18px #ffe280}
.slot.ready span{visibility:visible}
.slot.over{background:#ffd46488;box-shadow:0 0 0 3px #9d6024,0 0 20px #fff4bc}
.knob{position:absolute;left:36.2%;top:52%;width:16.4%;aspect-ratio:1;border-radius:50%;opacity:0}
.knob.turning{opacity:1;background:radial-gradient(circle,#ffd46a 58%,#e8a13c 59%,#fbc859 72%);animation:turn 1s ease-in-out}
.knob.turning::after{content:"";position:absolute;left:9%;top:40%;width:82%;height:22%;border-radius:99px;background:#ffe19b;box-shadow:0 3px #c37e23}
@keyframes turn{from{transform:rotate(-15deg)}to{transform:rotate(345deg)}}
.drop-capsule{position:absolute;left:43%;top:70%;width:13%;pointer-events:none;z-index:3;animation:drop 650ms ease-out both}
@keyframes drop{0%{transform:translateY(-26%) scale(.4);opacity:0}60%{transform:translateY(69%) rotate(115deg) scale(1.1);opacity:1}100%{transform:translateY(56%) rotate(160deg) scale(1.15)}}
.coin-dock{position:relative;min-height:89px;display:grid;place-items:start center;margin:-6px auto 0}
.coin-dock p{font-size:.9rem;font-weight:800;margin-top:5px;align-self:end;padding:0 5px;min-height:23px}
.coin,.coin-placeholder{width:56px;height:56px;border-radius:50%;display:grid;place-items:center}
.coin{border:0;background:none;padding:0;touch-action:none;cursor:grab;z-index:20;animation:coin-pop .32s ease-out both}
.coin img{width:116%;height:116%;max-width:none;pointer-events:none;user-select:none;object-fit:contain;filter:drop-shadow(0 4px 3px #a45d4260)}
.coin.dragging{position:fixed;margin:0;cursor:grabbing;pointer-events:none;animation:none}
@keyframes coin-pop{from{transform:scale(.45) translateY(16px);opacity:0}to{transform:scale(1);opacity:1}}
.coin-placeholder{border:1.5px dashed #d9b685;color:#bd955c;background:#ffe8bd55;font-size:1.25rem}
.cheer{height:340px;position:relative;overflow:hidden;align-self:center;border-right:2px dashed #e3b797;border-radius:24px;padding-right:5px}
.cheer-message{position:absolute;right:47%;top:7%;padding:9px 14px;background:#fff2d8;color:#96402d;font-size:.94rem;font-weight:900;border:1px solid #edcea2;border-radius:99px 99px 3px 99px;transform:rotate(-8deg);white-space:nowrap}
.peek{position:absolute;width:145px;aspect-ratio:1;overflow:hidden;mix-blend-mode:multiply}
.peek-one{--col:0;--row:0;right:-15px;top:11px;transform:rotate(-24deg)}
.peek-two{--col:2;--row:0;right:-34px;top:111px;transform:rotate(-27deg)}
.peek-three{--col:1;--row:1;right:-19px;top:212px;transform:rotate(-21deg)}
.cheer-star{position:absolute;right:58%;bottom:12%;color:#d08932;font-size:2.2rem}
.steps{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:6px auto 18px;font-size:.78rem;font-weight:750}
.steps span{background:#fffaf1;color:#745c65;border:1px solid #ecdbcb;border-radius:99px;padding:5px 9px;white-space:nowrap}
.steps b{display:inline-grid;place-items:center;background:#ecdfdc;border-radius:50%;width:19px;height:19px;margin-right:2px}
.steps .current{background:#ffe9ad;color:#603f32;border-color:#ddb16a}.steps .current b{background:#cf843f;color:#24182d}
footer{text-align:center;color:#76596a;font-size:.65rem;font-weight:850;letter-spacing:.12em;padding:8px 14px 17px}
footer span{margin-left:5px;background:#f5e5dc;border-radius:5px;padding:2px 5px;letter-spacing:normal}
#admin{max-width:1500px;margin:auto;padding:clamp(18px,4vw,55px)}
.admin-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px}
.admin-title h1{font-size:clamp(2rem,4.6vw,3.45rem);line-height:1.25;margin:5px 0}
.admin-title p:last-child,.subtle{color:var(--muted)}
.local-note{border:1px solid #e5d3bc;background:#fff2d8;border-radius:12px;padding:10px 13px;font-size:.86rem;margin-bottom:18px}
.admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) minmax(0,1.1fr);align-items:start;gap:16px}
.admin-panel{padding:17px;min-width:0}
.admin-panel h2{margin-bottom:14px}
.admin-panel label{display:block;font-size:.85rem;font-weight:850;margin:10px 0 4px}
.admin-panel input:not([type=checkbox]),.admin-panel select{background:#fffdf8;border:1px solid #dec8ba;border-radius:9px;width:100%;padding:9px}
.action{border:1px solid #8f3628;background:#a84831;color:#fff9ee;border-radius:11px;font-weight:850;padding:9px 13px}
.action:disabled{opacity:.55}
#student-form button{margin:10px 0 0}
.manage-roster{list-style:none;max-height:360px;overflow:auto;padding:0;margin:12px 0;display:grid;gap:5px}
.manage-roster li{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid #eadac8}
.manage-roster li span:nth-child(2){flex:1;overflow-wrap:anywhere;min-width:0}
.manage-roster button{padding:5px 6px;border:1px solid #eadac8;border-radius:7px;background:#fffaf0;font-size:.8rem;flex:none}
.pool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:560px;overflow:auto;padding:4px}
.pool-grid label{margin:0;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:4px;border:1px solid #e0cdbc;border-radius:10px;padding:5px;background:#fffdf9;cursor:pointer;line-height:1.2}
.pool-grid label:has(input:checked){background:#fff3d7;border-color:#dbac61}
.pool-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px;grid-column:1/-1;margin-bottom:5px}
.pool-grid input{accent-color:#a84831;width:16px;height:16px;margin:2px}
.subtle{font-size:.82rem;margin-bottom:9px;line-height:1.45}
.session-actions{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.table-wrap{overflow:auto;max-height:400px}
table{width:100%;border-collapse:collapse;font-size:.8rem;text-align:left}
td,th{border-bottom:1px solid #eadac8;padding:7px 5px}
th{background:#fbecdb;color:#543c50;position:sticky;top:0}
dialog{border:none;color:var(--ink);border-radius:24px;padding:0;background:transparent;overflow:auto;max-height:95dvh;max-width:96vw;width:min(730px,96vw);text-align:center}
dialog::backdrop{background:#281e35d1}
.reveal-content{padding:14px 10px 12px;overflow:hidden;color:#fff9ee}
.reveal-content .eyebrow{color:#ffe0a1}
.reveal-content h2{font-size:clamp(1.45rem,5vw,2.6rem);margin:4px 0 5px}
#open-capsule{width:min(370px,76vw,58dvh);margin:4px auto;padding:0;border:none;background:none;color:#fff9ee;font-weight:900;display:grid;justify-items:center;animation:zoom .44s cubic-bezier(.23,.78,.29,1.18) both}
#open-capsule img{width:100%;filter:drop-shadow(0 13px 24px #ffb75857)}
#open-capsule span{padding:8px 16px;border-radius:99px;background:#ffe29c;color:#58332a}
@keyframes zoom{from{transform:translateY(27vh) scale(.16);opacity:.1}to{transform:translateY(0) scale(1);opacity:1}}
.prize-stage{position:relative;display:grid;justify-items:center;padding:5px 0 0}
.open-art{width:min(360px,62vw,41dvh);grid-area:1/1;align-self:end;margin-bottom:-30px;animation:unfold .42s ease-out both}
.reward-art{width:min(610px,100%,calc(54dvh * 16 / 9));aspect-ratio:16/9;object-fit:contain;border-radius:13px;grid-area:1/1;z-index:1;align-self:start;animation:rise .5s .26s ease-out both;box-shadow:0 8px 32px #23172c77}
.prize-stage::after{content:"";height:clamp(38px,10dvh,78px);grid-area:2/1}
.prize .action{background:#ffe29c;color:#58332a;border-color:#ffe29c;position:relative;z-index:1}
@keyframes unfold{from{transform:scaleX(.3) rotate(-8deg);opacity:.3}to{transform:scaleX(1) rotate(0);opacity:1}}
@keyframes rise{from{transform:translateY(65px) scale(.25);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@media(max-width:930px){
 .play-grid{grid-template-columns:minmax(200px,1fr) minmax(290px,1.42fr) minmax(105px,.68fr)}
 .peek{width:120px}.cheer-message{right:38%;top:1%;font-size:.8rem}
 .admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-grid section:last-child{grid-column:1/-1}
}
@media(max-width:655px){
 .topbar{padding:10px 15px}.hero{padding-top:15px}
 .play-grid{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 12px 0}
 .roster{width:min(100%,430px);justify-self:center;padding:10px 12px}
 .roster-heading{margin-bottom:4px}.roster h2{font-size:1.25rem}
 .name-grid{max-height:150px}
 .stage{width:min(100%,340px,calc(100dvh - 175px));min-width:0}
 .machine-area{scroll-margin:14px}.cheer{display:none}
 .steps{margin-top:5px}
 .admin-grid{grid-template-columns:minmax(0,1fr)}
 .admin-title .plain-button{white-space:nowrap;padding:7px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important}}
.coin-dock>.coin,.coin-dock>.coin-placeholder{grid-area:1/1}
.coin-placeholder.behind{opacity:0;pointer-events:none}
.peek img{inset:0;width:100%;height:100%;object-fit:contain}
.peek{width:140px}
.peek-one{top:7px;right:-21px}.peek-two{top:113px;right:-19px}.peek-three{top:211px;right:-26px}
.prize-stage{padding-bottom:clamp(60px,12dvh,104px)}
.open-art{position:absolute;bottom:-12px;width:min(330px,61vw,38dvh);margin:0}
.prize-stage::after{content:none}
#open-capsule{border-radius:24px}
@media(min-width:1080px){.stage{width:min(100%,465px,calc(100dvh - 320px))}}
@media(max-width:930px){.peek{width:120px}}

@font-face{font-family:"粉圓";src:url("assets/jf-openhuninn-1.1.woff2") format("woff2");font-weight:400;font-display:swap}
:root{font-family:"粉圓","粉圓補字","Arial Rounded MT Bold",sans-serif;font-synthesis:weight;font-weight:400}
input,select,button,dialog{font-family:inherit}
.hero h1{letter-spacing:-.04em}
.class-picker{max-width:790px;margin:25px auto 30px;padding:23px clamp(15px,3.2vw,38px)}
.class-picker h2{margin:.2em 0 .65em;font-size:clamp(1.55rem,3.8vw,2.15rem)}
.class-grid{display:grid;gap:9px}
.grade-row{display:grid;grid-template-columns:minmax(52px,.92fr) repeat(4,minmax(0,1fr));align-items:center;gap:7px}
.grade-row strong{font-size:.94rem;color:var(--muted)}
.class-choice{font-size:clamp(1rem,3vw,1.35rem);font-weight:900;min-height:48px;border:1px solid #e6c6a6;border-radius:14px;background:#fff3dc;color:#7d422a}
.grade-row:nth-child(even) .class-choice{background:#eaf0fb;border-color:#c8d8ee;color:#2e4f76}
.class-choice:hover{box-shadow:0 3px 0 #be9c7a4a;transform:translateY(-1px)}
.class-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:1400px;padding:0 clamp(12px,3vw,40px);margin:10px auto 0}
.class-toolbar .counter{font-size:.95rem;background:#ffe9b8;color:#744228}
.admin-class-bar{display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px;margin-bottom:16px;padding:13px;border:1px solid #e5d3bc;border-radius:13px;background:#fffaf2}
.admin-class-bar label{font-weight:900}
.admin-class-bar select{background:#fffdf8;border:1px solid #dec8ba;border-radius:9px;padding:7px}
.admin-class-bar .subtle{margin:0}
#assign-form .action{margin-top:8px}
.manage-roster li label.legacy-select{display:flex;align-items:center;gap:7px;flex:1;margin:0;min-width:0}
.manage-roster li label.legacy-select span:last-child{overflow-wrap:anywhere}
.manage-roster .legacy-select input{width:18px;height:18px;accent-color:var(--clay)}
.avatar{background:#cde9ff;isolation:isolate}
.avatar.girl{background:#ffd8ea}
.avatar img{inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}
.coin,.coin img{background:transparent;border:0}
.glass-layer,.glass-card{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.glass-card{clip-path:inset(14.86% 38.52% 60.45% 38.25% round 2%);mix-blend-mode:normal}
.cheer{height:382px}
.peek{width:clamp(155px,14vw,206px);opacity:1;mix-blend-mode:normal}
.peek img{opacity:1;mix-blend-mode:normal}
.peek-one{top:0;right:-20px}.peek-two{top:111px;right:-31px}.peek-three{top:224px;right:-27px}
.cheer-message{right:50%;z-index:2}
@media(max-width:930px){.cheer-message{right:22%;top:2%}.peek{width:155px}.peek-one{right:-43px}.peek-two{right:-47px}.peek-three{right:-45px}}
@media(max-width:820px){.class-picker{margin-left:12px;margin-right:12px}}
@media(max-width:655px){.class-toolbar{margin-top:12px}}

@media(max-width:655px){
 .play-grid{position:relative}
 .cheer{display:block;position:absolute;right:0;bottom:84px;width:76px;height:236px;border:0;border-radius:0;pointer-events:none}
 .cheer-message,.cheer-star{display:none}
 .peek{width:98px}
 .peek-one{top:0;right:-24px}.peek-two{top:69px;right:-29px}.peek-three{top:139px;right:-23px}
}
@font-face{font-family:"粉圓補字";src:url("assets/classroom-rounded-supplement.woff2") format("woff2");font-weight:400;font-display:swap}
.roster-import{margin:0 0 16px;padding:12px 15px;border:1px solid #e5d3bc;border-radius:13px;background:#fffaf2}
.roster-import summary{font-weight:900;cursor:pointer}
.roster-import p{margin-top:8px}
.roster-import-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 13px;margin-top:10px}
.roster-import-form label{display:grid;gap:4px;font-weight:700;min-width:0;max-width:100%}
.roster-import-form input{width:min(245px,100%);padding:6px;border:1px solid #dec8ba;border-radius:8px;background:#fffdf8}