:root{--shell-hi:#f8ecfb;--shell-mid:#ecd7f5;--shell-lo:#d4b0e6;--shell-rim:#b48ad0;--bezel:#c3a4e0;--bezel-hi:#dcc8ee;--lcd-bg:#f4ecc8;--lcd-bg-hi:#faf5dc;--pix:#52395c;--btn-face:#ffefb9;--btn-lo:#e8c878;--handle:#d9308f;--handle-hi:#f06ab4;--antenna:#f5e3a8;--paper:#f7edf6;--ink:#5b4364}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-tap-highlight-color:transparent;height:100%}body{background-color:var(--paper);min-height:100%;color:var(--ink);touch-action:manipulation;background-image:radial-gradient(circle at 25% 15%,#f096d238,#0000 42%),radial-gradient(circle at 80% 85%,#b48ce138,#0000 45%),repeating-linear-gradient(0deg,#0000 0 23px,#5b43640d 23px 24px),repeating-linear-gradient(90deg,#0000 0 23px,#5b43640d 23px 24px);padding:28px 16px;font-family:DotGothic16,Microsoft JhengHei,PingFang TC,sans-serif;display:flex}#root{display:contents}.room{flex-direction:column;align-items:center;margin:auto;display:flex}.hang{flex-direction:column;align-items:center;display:flex}.ring{border:7px solid #cfc9d6;border-radius:50%;width:46px;height:46px;box-shadow:inset 0 2px 3px #ffffffb3,0 3px 4px #5b436440}.chain{z-index:3;flex-direction:column;align-items:center;gap:3px;margin:4px 0 -14px;display:flex;position:relative}.chain span{background:radial-gradient(circle at 35% 30%,#f4eff6,#b3aabc 65%,#8b8095);border-radius:50%;width:11px;height:11px;box-shadow:0 2px 2px #5b43644d}.body-wrap{margin-top:10px;display:flex;position:relative}.antenna{background:linear-gradient(90deg, #ffffff8c, transparent 55%), repeating-linear-gradient(180deg, var(--antenna) 0 16px, #e9d18c 16px 21px);z-index:0;border-radius:15px 15px 10px 10px;width:36px;height:130px;position:absolute;top:-34px;left:15%;transform:rotate(-12deg);box-shadow:inset -5px 0 7px #a0782847}.handle{border:13px solid var(--handle);z-index:0;border-bottom:none;border-radius:130px 130px 0 0;width:36%;max-width:150px;height:46px;position:absolute;top:-32px;left:50%;transform:translate(-50%);box-shadow:inset 0 4px 3px #ffffff59,inset 0 -2px #780a464d}.handle:after{content:"";background:var(--handle-hi);opacity:.8;filter:blur(1px);border-radius:8px;width:30%;height:9px;position:absolute;top:-9px;left:16%}.device{aspect-ratio:400/512;background:radial-gradient(circle at 30% 22%, var(--shell-hi), transparent 55%), linear-gradient(160deg, var(--shell-mid) 20%, var(--shell-lo) 85%);border:5px solid var(--shell-rim);z-index:1;border-radius:50% 50% 48% 48%/58% 58% 42% 42%;flex-direction:column;align-items:center;width:min(400px,92vw);padding-top:12%;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 14px 22px #ffffff73,inset 0 -18px 30px #6e3c8c4d,0 22px 40px #5b436459}.shine{filter:blur(6px);pointer-events:none;background:#ffffff80;border-radius:50%;width:20%;height:11%;position:absolute;top:5%;left:14%;transform:rotate(-28deg)}.stripe{pointer-events:none;background:#fff9;border-radius:999px;width:124%;height:15px;position:absolute;top:31%;left:-12%;transform:rotate(-13deg)}.dot{pointer-events:none;border-radius:50%;position:absolute}.dot.d1{background:#ffffffeb;width:30px;height:30px;top:56%;right:8%}.dot.d2{background:#ffffffe6;width:12px;height:12px;top:33%;left:8%}.dot.d3{background:#f3dd9d;width:15px;height:15px;top:43%;left:12%}.dot.d4{background:#c99fe0;width:11px;height:11px;top:25%;left:6.5%}.dot.d5{background:#f3dd9d;width:13px;height:13px;top:29%;right:11%}.dot.d6{background:#ffffffe6;width:9px;height:9px;top:37%;right:7%}.dot.d7{background:#ffffffe6;width:12px;height:12px;bottom:23%;left:11%}.dot.d8{background:#c99fe0;width:10px;height:10px;bottom:27%;right:12%}.dot.d9{background:#ffffffd9;width:8px;height:8px;top:20%;left:17%}.brand{letter-spacing:2px;color:#8347a3;text-shadow:0 1px #fff9;align-items:baseline;gap:10px;margin-bottom:3%;font-family:"Press Start 2P",DotGothic16,monospace;font-size:clamp(10px,3vw,13px);display:flex}.brand-sub{letter-spacing:2px;font-family:DotGothic16,sans-serif;font-size:clamp(9px,2.6vw,12px)}.bezel{background:linear-gradient(180deg, var(--bezel-hi), var(--bezel) 36%);clip-path:polygon(9% 0,91% 0,100% 15%,100% 85%,91% 100%,9% 100%,0 85%,0 15%);z-index:2;width:72%;padding:5.2%;position:relative}#lcd{aspect-ratio:64/40;background:linear-gradient(180deg, var(--lcd-bg-hi), var(--lcd-bg));width:100%;image-rendering:pixelated;border-radius:6px;display:block;box-shadow:inset 0 0 12px #52395c4d}.lcd-grid{pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 calc(2.5% - 1px),#52395c1a calc(2.5% - 1px) 2.5%),repeating-linear-gradient(90deg,#0000 0 calc(1.5625% - 1px),#52395c1a calc(1.5625% - 1px) 1.5625%);border-radius:6px;position:absolute;inset:5.2%}.lcd-glare{pointer-events:none;background:linear-gradient(115deg,#ffffff38 0 12%,#0000 12.5% 70%,#ffffff1a 86%);border-radius:6px;position:absolute;inset:5.2%}.buttons{z-index:2;justify-content:center;align-items:flex-start;gap:10%;width:62%;margin-top:6%;display:flex}.btn-wrap{flex-direction:column;flex:1;align-items:center;gap:6px;display:flex}.btn-wrap.mid{margin-top:5.5%}.pbtn{aspect-ratio:1;background:radial-gradient(circle at 34% 28%, #fffbef, var(--btn-face) 45%, var(--btn-lo) 95%);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border:3px solid #9a63bd;border-radius:50%;width:100%;max-width:62px;transition:transform 50ms,box-shadow 50ms;box-shadow:0 6px #c69c4e,0 9px 10px #5b436466,inset 0 2px 3px #ffffffe6}.pbtn:active,.pbtn.pressed{transform:translateY(5px);box-shadow:0 1px #c69c4e,0 3px 5px #5b436466,inset 0 2px 3px #ffffffe6}.btn-label{letter-spacing:1px;color:#8347a3;text-shadow:0 1px #fff6;-webkit-user-select:none;user-select:none;font-size:clamp(10px,2.8vw,13px)}.speaker{z-index:2;gap:7px;margin-top:3.5%;display:flex}.speaker i{background:#8a63a8b3;border-radius:3px;width:5px;height:14px;box-shadow:0 1px #ffffff59}.help-btn,.sound-btn,.reset-btn{color:#8347a3;background:radial-gradient(circle at 34% 28%, #fffbef, var(--btn-face) 45%, var(--btn-lo) 95%);cursor:pointer;z-index:20;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border:3px solid #9a63bd;border-radius:50%;width:52px;height:52px;font-family:"Press Start 2P",DotGothic16,monospace;font-size:20px;transition:transform 50ms,box-shadow 50ms;position:fixed;top:20px;right:20px;box-shadow:0 5px #c69c4e,0 8px 10px #5b436459,inset 0 2px 3px #ffffffe6}.help-btn:hover,.sound-btn:hover,.reset-btn:hover{filter:brightness(1.05)}.help-btn:active,.sound-btn:active,.reset-btn:active{transform:translateY(4px);box-shadow:0 1px #c69c4e,0 3px 5px #5b436459,inset 0 2px 3px #ffffffe6}.sound-btn{font-size:17px;right:84px}.reset-btn{font-family:DotGothic16,sans-serif;font-size:24px;right:148px}.help-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:30;background:#462d5573;justify-content:center;align-items:center;padding:20px;animation:.18s ease-out helpFade;display:flex;position:fixed;inset:0}@keyframes helpFade{0%{opacity:0}to{opacity:1}}@keyframes helpPop{0%{opacity:0;transform:translateY(14px)scale(.96)}to{opacity:1;transform:none}}.help-card{background:var(--paper);border:4px solid var(--ink);border-radius:18px;width:min(560px,100%);max-height:min(82vh,720px);padding:26px 28px 24px;line-height:1.9;animation:.2s ease-out helpPop;position:relative;overflow-y:auto;box-shadow:0 8px #5b436459,0 24px 50px #28190f73,inset 0 0 0 3px #fff}.help-card h2{letter-spacing:4px;text-align:center;border-bottom:3px dashed #5b43644d;margin-bottom:4px;padding-bottom:10px;font-size:20px}.help-card h3{color:#a678cc;letter-spacing:2px;margin:16px 0 6px;font-size:15px}.help-card h3:before{content:"▸ "}.help-card table{border-collapse:collapse;width:100%}.help-card td{vertical-align:top;padding:3px 8px 3px 0;font-size:14px}.help-card td:first-child{white-space:nowrap}.help-card b{background:var(--ink);color:var(--paper);border-radius:5px;padding:0 7px;font-size:12px;display:inline-block}.help-card td>b:only-child{text-align:center;min-width:24px}.help-card ul{padding-left:20px;font-size:14px}.help-card li{margin:2px 0}.help-note{opacity:.65;margin-top:4px;font-size:12px}.help-close{border:2px solid var(--ink);background:var(--btn-face);width:34px;height:34px;color:var(--ink);cursor:pointer;touch-action:manipulation;border-radius:50%;font-size:15px;transition:transform 50ms,box-shadow 50ms;position:absolute;top:12px;right:12px;box-shadow:0 3px #5b436466}.help-close:active{box-shadow:none;transform:translateY(3px)}.confirm-card{text-align:center;width:min(360px,100%)}.confirm-text{margin:14px 0 18px;font-size:14px}.confirm-actions{justify-content:center;gap:12px;display:flex}.confirm-btn{border:3px solid var(--ink);background:var(--btn-face);color:var(--ink);letter-spacing:2px;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:10px;padding:8px 18px;font-family:inherit;font-size:14px;transition:transform 50ms,box-shadow 50ms;box-shadow:0 4px #5b436466}.confirm-btn:active{box-shadow:none;transform:translateY(3px)}.confirm-btn.danger{background:#f8b7cf}