:root{--bg:#f3f4f5;--text:#242629;--accent:#ff6600;--button-text:#171717;--font:Arial,"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif;--heading-size:34px;--result-size:19px;--weight:400;--style:normal}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-weight:var(--weight);font-style:var(--style);line-height:1.5}button,input,select{font:inherit}button,summary,select,input[type=checkbox],input[type=color]{cursor:pointer}button{border:1px solid #c9cdd1;background:#fff;color:#25282b;border-radius:9px;padding:10px 14px;min-height:44px;font-weight:600;transition:background .15s,transform .15s}button:hover:enabled{background:#eceeef}button:active:enabled{transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #1474b8;outline-offset:4px}header{background:#fff;color:#242629;border-top:5px solid var(--accent);border-bottom:1px solid #e0e3e6;padding:22px max(24px,calc((100vw - 1380px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:14px}.brand-line{display:block;width:5px;height:44px;background:var(--accent)}.brand strong{display:block;font-size:21px;letter-spacing:-.5px}.brand small{display:block;font-size:11px;letter-spacing:1.7px;margin-top:2px}nav{display:flex;gap:8px;flex-wrap:wrap}nav button{font-size:14px}main{max-width:1430px;margin:auto;padding:30px 28px 12px}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:20px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.9px;margin:0 0 8px}h1{font-size:var(--heading-size);line-height:1.15;letter-spacing:-1px;margin:0}.round-tag{font-size:14px;border:1px solid #c7cbd0;border-radius:30px;padding:8px 16px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}.stage{border-radius:20px;background:#fff;color:#242629;border:1px solid #e0e3e6;padding:22px 28px 24px;box-shadow:0 8px 28px #20242a05;position:relative;overflow:hidden}.stage-top{display:flex;justify-content:space-between;align-items:center}.stage-top .eyebrow{margin:0;color:#5d646b}.stage-top #remaining{font-size:14px;font-weight:600}.wheel-wrap{position:relative;max-width:650px;width:100%;margin:12px auto 18px;aspect-ratio:1}.wheel-wrap:before{content:"";position:absolute;inset:2.2%;border:1px solid #e3e5e6;border-radius:50%}#wheel{width:100%;height:100%;display:block;filter:drop-shadow(0 9px 7px #25282b16)}.pointer{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:36px solid #242629;filter:drop-shadow(0 3px 2px #fff)}.hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18%;height:18%;border-radius:50%;background:#fff;border:7px solid #fff;box-shadow:0 0 0 1px #d9dde0,0 4px 12px #20242a20;display:grid;place-items:center;text-align:center;line-height:1.25;font-size:clamp(10px,1.05vw,15px);font-weight:800;letter-spacing:1px}.spin-area{text-align:center}.primary{background:var(--accent);color:var(--button-text);border-color:transparent}.primary:hover:enabled{background:var(--accent);filter:brightness(.93)}.spin{min-width:285px;padding:16px 26px;font-size:21px;border-radius:12px;box-shadow:0 5px 0 #00000012}.spin span{margin-left:35px}.spin-area p{font-size:14px;margin:14px 0 0;color:#5d646b}.sidebar{display:grid;gap:16px}.panel{background:#fff;color:#242629;border:1px solid #dfe3e7;border-radius:14px;padding:20px}.counts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.counts strong{display:block;font-size:34px;line-height:1.1}.counts span{font-size:13px;color:#5d646b}.counts>div:first-child strong{color:#a94300}.progress{height:5px;background:#edeff1;border-radius:3px;overflow:hidden;margin:20px 0}.progress span{display:block;height:100%;background:var(--accent);width:0}.round-actions{display:flex;gap:8px}.round-actions button{font-size:13px;padding:8px;flex:1}summary{font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:24px}summary:after{content:"+";font-size:21px;font-weight:400}details[open]>summary:after{content:"−"}summary span{font-size:12px;font-weight:400;color:#5d646b;margin-left:auto}summary::-webkit-details-marker{display:none}.helper{font-size:14px;color:#59616a;line-height:1.55}.event-row{display:grid;grid-template-columns:20px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid #e7e9eb;font-size:14px;align-items:start}.event-row:last-child{border-bottom:0}.event-row input{margin:4px 0;width:18px;height:18px;accent-color:#bf4c00}.event-row small{display:block;font-size:12px;color:#69727c;margin-top:3px}.event-row.drawn span{text-decoration:line-through}.event-row.drawn small{text-decoration:none}#history{padding:0;list-style:none;margin-bottom:0;counter-reset:draw}#history li{margin-top:8px}#history button{width:100%;text-align:left;font-size:14px;border:0;background:#f3f4f5;display:flex;gap:12px;align-items:center}#history button:before{counter-increment:draw;content:counter(draw,decimal-leading-zero);font-size:12px;color:#656b70}fieldset{border:0;padding:0;margin:20px 0 0;min-width:0}fieldset label{display:block;font-size:14px;margin:13px 0}select{width:100%;padding:10px;border:1px solid #bcc3ca;border-radius:7px;background:white;color:#25282b;margin-top:6px}input[type=range]{display:block;width:100%;margin-top:8px;accent-color:#bd4d00}output{float:right;color:#59616a}.setting-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.colours{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.colours label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}input[type=color]{width:38px;height:32px;border:1px solid #ccd1d6;border-radius:6px;background:#fff;padding:2px}.preview{background:var(--bg);color:var(--text);border:1px solid #cdd2d7;border-radius:10px;padding:14px;margin-top:14px;font-size:var(--result-size)}.preview strong{font-size:18px}.preview p{margin:8px 0}#defaults{width:100%}footer{display:flex;justify-content:space-between;gap:14px;font-size:12px;padding:24px 0;color:var(--text)}dialog{border:0;border-radius:20px;padding:0;width:min(900px,calc(100% - 32px));max-height:90dvh;color:var(--text);background:var(--bg);box-shadow:0 30px 100px #0006}dialog::backdrop{background:#101820b8;backdrop-filter:blur(5px)}dialog[open]{display:flex;flex-direction:column}.modal-body{overflow:auto;padding:34px 40px}.modal-body>.eyebrow{color:var(--text);border-left:4px solid var(--accent);padding-left:10px}h2{font-size:var(--heading-size);line-height:1.2;margin:15px 0 22px;overflow-wrap:anywhere}h3{font-size:18px;margin:0 0 14px}.event-copy{font-size:var(--result-size);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.impact{border-left:5px solid var(--accent);background:#fff;color:#242629;border-radius:4px 12px 12px 4px;padding:24px;margin-top:28px}.modal-footer{border-top:1px solid #cdd1d5;display:flex;justify-content:space-between;align-items:center;padding:18px 32px;gap:18px}.modal-footer span{font-size:13px}.modal-footer button{flex-shrink:0}#confirmReset{max-width:550px}.notice{background:#fff2d4;border:1px solid #9c6c0b;color:#513500;padding:12px 18px;border-radius:8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.presentation .sidebar,.presentation .page-heading,.presentation footer{display:none}.presentation .workspace{display:block}.presentation main{max-width:1100px;padding-top:16px}.presentation .wheel-wrap{max-width:min(68vh,780px)}.presentation .stage{padding:16px 28px}.presentation header{padding-top:10px;padding-bottom:10px}.presentation .spin-area p{margin-top:10px}.presentation #review{margin-top:12px}[hidden]{display:none!important}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:16px}.stage{padding:18px 12px}.hub{font-size:10px}header{padding:16px 24px}.brand strong{font-size:17px}.brand small{font-size:9px}nav button{font-size:12px;padding:8px}.panel{padding:16px}}@media(max-width:760px){header{align-items:flex-start;flex-direction:column;gap:12px;padding:16px}nav{width:100%}nav button{flex:1}main{padding:22px 12px 8px}.workspace{grid-template-columns:1fr}.page-heading{margin-bottom:20px}.round-tag{display:none}h1{font-size:min(var(--heading-size),36px)}.eyebrow{font-size:11px}.stage-top{padding:0 8px}.wheel-wrap{margin:18px auto}.stage{border-radius:14px}.hub{font-size:10px}.spin{min-width:250px}.sidebar{gap:12px}.modal-body{padding:24px 20px}.modal-footer{padding:16px 20px}.modal-footer>span{max-width:50%}.impact{padding:18px}.counts strong{font-size:32px}footer{flex-direction:column;gap:3px}.presentation .wheel-wrap{max-width:min(60vh,650px)}.presentation header .brand{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

h1,h2,.event-points{font-weight:var(--weight);font-style:var(--style)}

.preview{display:grid;gap:8px}.preview span{font-size:var(--result-size)}
.result-sections{display:grid;gap:22px;clear:both}.result-section{border:1px solid #d9dde0;background:#fff;color:#242629;border-radius:12px;padding:22px 24px}.result-section h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:20px}.result-section h3:before{content:"";width:5px;height:24px;border-radius:4px;background:var(--accent);flex:0 0 auto}.event-points{font-size:var(--result-size);line-height:1.65;margin:0;padding-left:1.35em;overflow-wrap:anywhere}.event-points li{padding-left:.35em;margin:.55em 0}.event-points li:first-child{margin-top:0}.event-points li:last-child{margin-bottom:0}.description{background:color-mix(in srgb,#fff 94%,var(--accent))}.impact{margin-top:0;border-left:1px solid #d9dde0;border-radius:12px}.impact .event-points li::marker{color:var(--accent)}

@media(min-width:761px){body:not(.presentation) .wheel-wrap{max-width:clamp(340px,calc(100dvh - 390px),650px)}}
/* PE character edition */
body{background-image:linear-gradient(#ffffff88,#ffffff88),url('./assets/sky.jpg');background-size:cover;background-attachment:fixed}
header{background:#fff}.official-logo{width:205px;height:auto;display:block}.brand-caption{border-left:1px solid #d9dde0;padding-left:18px}.brand-caption strong{font-size:17px}.brand-caption small{font-size:10px;letter-spacing:1px}nav button[aria-pressed=true]{background:#fff1e5;border-color:#cf620c}
.stage{background:linear-gradient(#ffffffc9,#ffffff55 65%,#fffffff2),url('./assets/forest.png') center bottom/cover;border:3px solid #fff;box-shadow:0 12px 35px #28586518;border-radius:26px}.stage-top{position:relative;z-index:1}.stage-top>span{background:#fffffff0;padding:6px 12px;border-radius:30px}.play-scene{position:relative}.wheel-wrap{z-index:1}.wheel-wrap:before{border:10px solid #ffffffa8;inset:1%;box-shadow:0 0 0 2px #ff660035}.hub{border-color:#fff7ec;background:#fff7ec;color:#633a14}.cast{position:absolute;bottom:0;display:flex;align-items:flex-end;z-index:2;width:24%;pointer-events:none}.cast-left{left:-24px}.cast-right{right:-24px}.character{width:68%;height:auto;filter:drop-shadow(0 7px 4px #29413220);transform-origin:center bottom}.cast img+img{margin-left:-27%}.bobo{z-index:2;transform:rotate(-6deg)}.lion{transform:translateY(9px) rotate(7deg)}.goat{transform:rotate(-7deg)}.pig{transform:translateY(8px) rotate(7deg)}.spin-area{position:relative;z-index:3}.spin{border:3px solid #fff;border-radius:50px;box-shadow:0 6px 0 #ad4700,0 12px 24px #c96a0022}.spin-area #hint{background:#ffffffe8;display:table;margin:17px auto 0;padding:3px 12px;border-radius:20px}.panel{border:2px solid #fff;box-shadow:0 6px 18px #2858650b;border-radius:18px}.round-panel{border-top:5px solid var(--accent)}.round-tag{background:#fff9}.audio-label{display:block;font-size:14px;margin:16px 0 8px}.audio-label input{accent-color:#bf4c00}.result-character{float:right;width:88px;height:100px;margin:-14px -12px 0 16px}.result-character img{width:100%;height:100%;object-fit:contain}#resultName{min-height:60px}.is-spinning .character{animation:cheer .7s ease-in-out infinite alternate}.is-spinning .lion,.is-spinning .pig{animation-delay:.25s}.is-spinning .pointer{animation:pointer-tick .13s ease-in-out infinite alternate}.is-spinning .wheel-wrap:before{box-shadow:0 0 0 3px #ff660088,0 0 28px #ffbf5488}.result-fresh .result-character img{animation:welcome .5s ease-out both}@keyframes cheer{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-12px) rotate(4deg)}}@keyframes pointer-tick{to{transform:translateX(-50%) rotate(-9deg)}}@keyframes welcome{from{transform:translateY(12px);opacity:.4}to{transform:translateY(0);opacity:1}}
@media(max-width:1150px){header{flex-wrap:wrap}.official-logo{width:175px}.brand-caption{padding-left:12px}.cast{width:25%}.cast-left{left:-12px}.cast-right{right:-12px}}
@media(max-width:760px){.official-logo{width:160px}.brand-caption strong{font-size:15px}.brand-caption small{font-size:9px}nav{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}nav button{font-size:11px;padding:7px 5px}.wheel-wrap{margin-bottom:28px}.stage{padding-left:12px;padding-right:12px}.stage-top>span{font-size:10px;padding:5px 8px}.result-character{width:65px;height:85px;margin-right:-6px}header{gap:14px}.result-section{padding:18px 16px}.result-section h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){.character,.pointer,.result-character img{animation:none!important}}

body{background-image:linear-gradient(color-mix(in srgb,var(--bg) 65%,transparent),color-mix(in srgb,var(--bg) 65%,transparent)),url('./assets/sky.jpg')}
.cast-left{left:0}.cast-right{right:0}.character{width:62%}.cast img+img{margin-left:-24%}