*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}html{touch-action:manipulation}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:#6fa8bd;color:#241c1a}:root{--sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));--sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));--ui: 1;--ink: #241c1a;--card: #fffcf2;--card-shade: #f2e8d3;--violet: #6b478c;--hot: #e6494a}#app{position:relative;width:100%;max-width:min(100vw,52vh);height:100%;margin:0 auto;overflow:hidden;background:#8fd3e8}#stage{position:absolute;inset:0;width:100%;height:100%;display:block}#topbar{position:absolute;top:calc(var(--sat) + 10px * var(--ui));left:0;right:0;height:calc(52px * var(--ui));display:flex;align-items:center;justify-content:space-between;padding:0 calc(14px * var(--ui));z-index:3}.chip{width:calc(44px * var(--ui));height:calc(44px * var(--ui));border:calc(3px * var(--ui)) solid var(--ink);border-radius:calc(14px * var(--ui));background:var(--card);box-shadow:calc(3px * var(--ui)) calc(3px * var(--ui)) 0 #241c1a42;font-size:calc(19px * var(--ui));line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);font-weight:800;transition:transform .12s}.chip:active{transform:scale(.9) translate(2px,2px)}#plaque{padding:calc(7px * var(--ui)) calc(20px * var(--ui));background:var(--card);border:calc(3px * var(--ui)) solid var(--ink);box-shadow:calc(3px * var(--ui)) calc(3px * var(--ui)) 0 #241c1a42;transform:rotate(-1.5deg);clip-path:polygon(2% 6%,98% 0%,100% 92%,96% 100%,3% 97%,0% 12%);font-size:calc(21px * var(--ui));font-weight:900;letter-spacing:calc(3px * var(--ui))}#bubble-band{position:absolute;top:calc(var(--sat) + 72px * var(--ui));left:0;right:0;height:calc(74px * var(--ui));display:flex;align-items:center;justify-content:center;padding:0 calc(18px * var(--ui));pointer-events:none;z-index:3}#bubble{position:relative;max-width:100%;padding:calc(10px * var(--ui)) calc(16px * var(--ui));background:var(--card);border:calc(3px * var(--ui)) solid var(--ink);border-radius:calc(16px * var(--ui));box-shadow:calc(3px * var(--ui)) calc(3px * var(--ui)) 0 #241c1a42;font-size:calc(15px * var(--ui));font-weight:700;line-height:1.35;text-align:center;transform-origin:center bottom;animation:pop .22s cubic-bezier(.2,1.4,.4,1)}#bubble:after{content:"";position:absolute;bottom:calc(-9px * var(--ui));left:50%;width:calc(14px * var(--ui));height:calc(14px * var(--ui));background:var(--card);border-right:calc(3px * var(--ui)) solid var(--ink);border-bottom:calc(3px * var(--ui)) solid var(--ink);transform:translate(-50%) rotate(45deg)}@keyframes pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.hidden{display:none!important}#propbar{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 118px * var(--ui));display:flex;justify-content:center;gap:calc(12px * var(--ui));z-index:3}.prop{width:calc(60px * var(--ui));padding:calc(7px * var(--ui)) 0 calc(5px * var(--ui));background:var(--card);border:calc(3px * var(--ui)) solid var(--ink);border-radius:calc(16px * var(--ui));box-shadow:calc(3px * var(--ui)) calc(3px * var(--ui)) 0 #241c1a42;display:flex;flex-direction:column;align-items:center;gap:calc(2px * var(--ui));cursor:pointer;transition:transform .12s;color:var(--ink)}.prop:active{transform:scale(.9) translate(2px,2px)}.prop-icon{font-size:calc(23px * var(--ui));line-height:1}.prop-name{font-size:calc(11px * var(--ui));font-weight:800}#dock{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 16px * var(--ui));display:flex;align-items:center;justify-content:space-between;padding:0 calc(18px * var(--ui));z-index:3}.pill{min-width:calc(66px * var(--ui));padding:calc(9px * var(--ui)) calc(12px * var(--ui));background:var(--card);border:calc(3px * var(--ui)) solid var(--ink);border-radius:calc(14px * var(--ui));box-shadow:calc(3px * var(--ui)) calc(3px * var(--ui)) 0 #241c1a42;font-size:calc(14px * var(--ui));font-weight:800;color:var(--ink);cursor:pointer;transition:transform .12s}.pill:active{transform:scale(.92) translate(2px,2px)}#btn-play{background:var(--violet);color:#fff;font-size:calc(16px * var(--ui));padding:calc(11px * var(--ui)) calc(18px * var(--ui))}@keyframes nudge{0%,86%,to{transform:none}90%{transform:scale(1.07)}95%{transform:scale(.98)}}#btn-play.nudge{animation:nudge 5s ease-in-out infinite}#btn-best{display:flex;flex-direction:column;align-items:center;gap:calc(1px * var(--ui));padding:calc(6px * var(--ui)) calc(10px * var(--ui));background:#fffcf2d1;box-shadow:calc(2px * var(--ui)) calc(2px * var(--ui)) 0 #241c1a33}#btn-best b{font-size:calc(13px * var(--ui));font-weight:900}#btn-best i{font-style:normal;font-size:calc(10px * var(--ui));font-weight:700;color:#9a8d84}@media(prefers-reduced-motion:reduce){#btn-play.nudge{animation:none}}#micwrap{display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--ui))}#btn-mic{width:calc(72px * var(--ui));height:calc(72px * var(--ui));border-radius:50%;border:calc(4px * var(--ui)) solid var(--ink);background:var(--card);box-shadow:calc(4px * var(--ui)) calc(4px * var(--ui)) 0 #241c1a42;font-size:calc(30px * var(--ui));line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,background .2s}#btn-mic:active{transform:scale(.92) translate(2px,2px)}#btn-mic.recording{background:var(--hot);animation:pulse 1s infinite}#btn-mic.playing{background:var(--violet)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}#mic-label{font-size:calc(13px * var(--ui));font-weight:800;padding:calc(3px * var(--ui)) calc(10px * var(--ui));background:#fffcf2e6;border:calc(2px * var(--ui)) solid var(--ink);border-radius:calc(10px * var(--ui))}#hud{position:absolute;top:calc(var(--sat) + 70px * var(--ui));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:calc(8px * var(--ui));padding:0 calc(24px * var(--ui));z-index:3;pointer-events:none}#hud-score{display:flex;align-items:baseline;gap:calc(5px * var(--ui));font-size:calc(30px * var(--ui));font-weight:900;color:var(--ink);text-shadow:0 calc(2px * var(--ui)) 0 rgba(255,252,242,.9)}#hud-score em{font-size:calc(12px * var(--ui));font-style:normal;font-weight:800}#hud-prompt{padding:calc(9px * var(--ui)) calc(26px * var(--ui));background:var(--violet);color:#fff;border:calc(3px * var(--ui)) solid var(--ink);border-radius:calc(16px * var(--ui));box-shadow:calc(3px * var(--ui)) calc(3px * var(--ui)) 0 #241c1a4d;font-size:calc(26px * var(--ui));font-weight:900;letter-spacing:calc(3px * var(--ui));animation:pop .2s cubic-bezier(.2,1.4,.4,1)}#hud-bar{width:100%;max-width:calc(240px * var(--ui));height:calc(10px * var(--ui));background:#fffcf2bf;border:calc(2.5px * var(--ui)) solid var(--ink);border-radius:calc(6px * var(--ui));overflow:hidden}#hud-bar-fill{display:block;width:100%;height:100%;background:var(--hot);transform-origin:left center}.sheet{position:absolute;inset:0;background:#241c1a8c;display:flex;align-items:center;justify-content:center;padding:calc(24px * var(--ui));z-index:10;animation:fade .18s}@keyframes fade{0%{opacity:0}to{opacity:1}}.sheet-x{position:absolute;top:calc(14px * var(--ui));right:calc(14px * var(--ui));width:calc(38px * var(--ui));height:calc(38px * var(--ui));border-radius:50%;border:calc(3px * var(--ui)) solid var(--ink);background:var(--card);color:var(--ink);font-size:calc(22px * var(--ui));line-height:1;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;box-shadow:calc(2px * var(--ui)) calc(2px * var(--ui)) 0 #241c1a59;transition:transform .12s}.sheet-x:active{transform:scale(.9)}.about-card{width:100%;max-height:82%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;background:var(--card);border:calc(3px * var(--ui)) solid var(--ink);border-radius:calc(20px * var(--ui));box-shadow:calc(4px * var(--ui)) calc(4px * var(--ui)) 0 #241c1a66;padding:calc(22px * var(--ui))}.about-card h1{font-size:calc(21px * var(--ui));margin-bottom:calc(10px * var(--ui))}.about-card h2{font-size:calc(15px * var(--ui));margin:calc(16px * var(--ui)) 0 calc(6px * var(--ui));color:var(--violet)}.about-card h2.first{margin-top:0}.about-card p{font-size:calc(13.5px * var(--ui));line-height:1.65;margin-bottom:calc(6px * var(--ui));color:#4a3f3a}.fortune-card{position:relative;width:100%;background:var(--card);border:calc(3px * var(--ui)) solid var(--ink);border-radius:calc(20px * var(--ui));box-shadow:calc(5px * var(--ui)) calc(5px * var(--ui)) 0 #241c1a66;padding:calc(30px * var(--ui)) calc(24px * var(--ui)) calc(22px * var(--ui));text-align:center;animation:pop .3s cubic-bezier(.2,1.4,.4,1)}.fortune-seal{position:absolute;top:calc(-16px * var(--ui));left:50%;transform:translate(-50%);width:calc(38px * var(--ui));height:calc(38px * var(--ui));background:var(--hot);color:#fff;border:calc(3px * var(--ui)) solid var(--ink);border-radius:calc(10px * var(--ui));font-size:calc(19px * var(--ui));font-weight:900;display:flex;align-items:center;justify-content:center}.fortune-title{font-size:calc(30px * var(--ui));font-weight:900;letter-spacing:calc(4px * var(--ui));color:var(--violet);margin-bottom:calc(12px * var(--ui))}.fortune-body{font-size:calc(15px * var(--ui));font-weight:600;line-height:1.7;color:#4a3f3a;padding:0 calc(6px * var(--ui))}.fortune-foot{margin-top:calc(16px * var(--ui));padding-top:calc(12px * var(--ui));border-top:calc(2px * var(--ui)) dashed var(--card-shade);font-size:calc(11px * var(--ui));letter-spacing:calc(1px * var(--ui));color:#9a8d84}.result-score{display:flex;flex-direction:column;align-items:center;margin:calc(4px * var(--ui)) 0 calc(12px * var(--ui))}.result-score span{font-size:calc(64px * var(--ui));font-weight:900;line-height:1;color:var(--ink)}.result-score em{font-style:normal;font-size:calc(11px * var(--ui));font-weight:800;letter-spacing:calc(2px * var(--ui));color:#9a8d84;margin-top:calc(4px * var(--ui))}#lang-row{display:flex;gap:calc(6px * var(--ui));margin:calc(10px * var(--ui)) 0 calc(14px * var(--ui))}.lang{flex:1;padding:calc(6px * var(--ui)) calc(4px * var(--ui));border:calc(2px * var(--ui)) solid var(--ink);border-radius:calc(10px * var(--ui));background:var(--card-shade);color:var(--ink);font-size:calc(11.5px * var(--ui));font-weight:800;cursor:pointer;transition:transform .12s}.lang.on{background:var(--violet);color:#fff}.lang:active{transform:scale(.94)}.credit{margin-top:calc(18px * var(--ui));padding-top:calc(12px * var(--ui));border-top:calc(2px * var(--ui)) dashed var(--card-shade);font-size:calc(11.5px * var(--ui))!important;letter-spacing:calc(.5px * var(--ui));color:#9a8d84!important;text-align:center}#zonemap{width:100%;display:block;margin:calc(8px * var(--ui)) 0;border:calc(3px * var(--ui)) solid var(--ink);border-radius:calc(14px * var(--ui));background:var(--card-shade)}#zonelegend{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:calc(5px * var(--ui)) calc(10px * var(--ui));margin-bottom:calc(4px * var(--ui))}#zonelegend li{display:flex;align-items:center;gap:calc(6px * var(--ui));font-size:calc(12.5px * var(--ui));font-weight:700;color:#4a3f3a}#zonelegend b{flex:none;width:calc(18px * var(--ui));height:calc(18px * var(--ui));border-radius:50%;background:var(--violet);color:#fff;border:calc(2px * var(--ui)) solid var(--ink);font-size:calc(11px * var(--ui));display:flex;align-items:center;justify-content:center}.share-card{text-align:center}#share-preview{width:100%;max-width:calc(220px * var(--ui));margin:calc(12px * var(--ui)) auto 0;display:block;border:calc(3px * var(--ui)) solid var(--ink);border-radius:calc(12px * var(--ui))}#share-tip{margin-top:calc(10px * var(--ui));font-size:calc(12px * var(--ui));color:#9a8d84;min-height:calc(16px * var(--ui))}.sheet-actions{display:flex;gap:calc(10px * var(--ui));margin-top:calc(18px * var(--ui))}.btn-primary,.btn-ghost{flex:1;margin-top:calc(18px * var(--ui));padding:calc(12px * var(--ui));border:calc(3px * var(--ui)) solid var(--ink);border-radius:calc(14px * var(--ui));font-size:calc(15px * var(--ui));font-weight:800;cursor:pointer;width:100%;transition:transform .12s;color:var(--ink)}.sheet-actions .btn-primary,.sheet-actions .btn-ghost{margin-top:0}.btn-primary{background:var(--violet);color:#fff}.btn-ghost{background:var(--card-shade)}.btn-primary:active,.btn-ghost:active{transform:scale(.96)}