:root{--ui-scale: 1;--ui-zoom: 1;--vh: calc(1vh / var(--ui-zoom));--vw: calc(1vw / var(--ui-zoom));--font: system-ui, -apple-system, "Segoe UI", sans-serif;--font-title: "Trebuchet MS", "Avenir Next", system-ui, sans-serif;--fs-xs: calc(11px * var(--ui-scale));--fs-s: calc(13px * var(--ui-scale));--fs-m: calc(15px * var(--ui-scale));--fs-l: calc(19px * var(--ui-scale));--fs-xl: calc(28px * var(--ui-scale));--glass: rgba(10, 16, 32, .72);--glass-strong: rgba(10, 16, 32, .92);--line: rgba(255, 255, 255, .18);--line-strong: rgba(255, 255, 255, .32);--ink: #fff;--ink-dim: rgba(255, 255, 255, .68);--gold: #ffd86a;--amber: #ffb347;--good: #7dffb0;--warn: #ffb347;--bad: #ff5a5a;--fire: #ff6a2a;--water: #3fa7ff;--earth: #7fa44a;--air: #d9e6ff;--none: #9b7bff;--r-s: 8px;--r-m: 12px;--r-l: 16px;--shadow: 0 8px 30px rgba(0, 0, 0, .45);--ease: cubic-bezier(.2, .8, .2, 1)}html,body{margin:0;height:100%;background:#0b1020;overflow:hidden;font-family:var(--font);color:var(--ink);font-size:var(--fs-m)}canvas{display:block}kbd{display:inline-block;background:#ffffffeb;color:#111;border-radius:4px;padding:0 5px;font-weight:700;font-size:var(--fs-xs);font-family:var(--font);line-height:1.6}button{font-family:var(--font)}.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-m);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}[hidden]{display:none!important}body>:not(canvas){zoom:var(--ui-zoom)}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#hud button{pointer-events:auto}.hud-top-left{position:absolute;left:16px;top:16px;display:flex;gap:10px;align-items:center;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-l);padding:8px 14px 8px 8px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hud-top-left .portrait{position:relative;width:56px;height:56px;border-radius:var(--r-m);overflow:visible;background:#00000059;border:2px solid var(--line-strong)}.hud-top-left .portrait canvas{width:100%;height:100%;border-radius:10px;image-rendering:pixelated}.hud-top-left .portrait .level{position:absolute;right:-8px;bottom:-8px;min-width:22px;height:22px;line-height:22px;text-align:center;border-radius:999px;background:var(--gold);color:#1a1200;font-weight:800;font-size:var(--fs-xs);padding:0 4px;box-shadow:0 1px 4px #00000080}.hud-top-left .portrait .level.pop{animation:pop .5s var(--ease)}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.5)}to{transform:scale(1)}}.hud-top-left .who{display:flex;flex-direction:column;gap:2px;min-width:150px}.hud-top-left .name{font-weight:800;font-size:var(--fs-l);letter-spacing:.5px}.hud-top-left .who-origin{font-size:var(--fs-xs);color:var(--ink-dim)}.hud-top-left .xp{position:relative;height:8px;margin:3px 0 13px;background:#00000073;border-radius:999px;border:1px solid var(--line)}.hud-top-left .xp .fill{border-radius:999px;height:100%;background:linear-gradient(90deg,#ffd86a,#ffb347);transition:width .4s var(--ease)}.hud-top-left .xp .text{position:absolute;right:0;top:10px;font-size:10px;color:var(--ink-dim);white-space:nowrap}.hud-top-right{position:absolute;right:16px;top:16px;display:flex;gap:6px}.hud-icon{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;width:46px;padding:5px 0 3px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-m);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s}.hud-icon:hover{background:#ffffff29}.hud-icon.on{border-color:#ffd86ab3}.hud-icon .icon{font-size:18px;line-height:1}.hud-icon .key{font-size:10px;color:var(--ink-dim)}.hud-icon .badge,.menu-tab .badge{position:absolute;right:-4px;top:-4px;min-width:16px;height:16px;line-height:16px;border-radius:999px;background:var(--good);color:#0a2a14;font-size:10px;font-weight:800;text-align:center;font-style:normal;padding:0 3px;animation:pulse 1.6s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}.hud-bottom{position:absolute;left:50%;bottom:14px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}.hud-bottom .hint{background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:var(--fs-xs);color:var(--ink-dim)}.hud-bottom .hpbar{position:relative;width:320px;height:16px;background:#00000080;border-radius:999px;overflow:hidden;border:1px solid var(--line-strong)}#hud-hp{height:100%;width:100%;background:linear-gradient(90deg,#ff5a5a,#ffb347);transition:width .25s var(--ease)}#hud-hp.low{animation:hp-low .9s infinite}@keyframes hp-low{0%,to{filter:brightness(1)}50%{filter:brightness(1.6)}}.hud-bottom .hpbar .text{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;font-size:11px;font-weight:700;line-height:16px;text-shadow:0 1px 2px #000}.hud-bottom .actions{display:flex;gap:8px}.slot{position:relative;width:58px;height:58px;border-radius:var(--r-m);background:var(--glass);border:1px solid var(--line-strong);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:hidden;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.slot .ring{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.slot .icon{font-size:22px;line-height:1;z-index:1}.slot .label{font-size:10px;color:var(--ink-dim);z-index:1}.slot kbd{position:absolute;left:3px;top:3px;font-size:9px;padding:0 3px;z-index:1}.slot .count{position:absolute;right:4px;bottom:3px;font-size:11px;color:var(--gold);z-index:1}.slot.ready{border-color:#ffd86a8c}.slot.charging{box-shadow:0 0 14px #ffd86ab3}.slot.empty{opacity:.5}#hud .fps{position:absolute;left:16px;bottom:10px;font-size:10px;color:#ffffff73}#hud.low-hp:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 160px #ff1e1e59;animation:hp-low .9s infinite;pointer-events:none}#hurt{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;box-shadow:inset 0 0 120px #ff282800}#hurt.on{animation:hurt .4s ease-out}@keyframes hurt{0%{box-shadow:inset 0 0 120px #ff2828b3}to{box-shadow:inset 0 0 120px #ff282800}}#keys{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,calc(100% - 32px));background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:var(--r-l);padding:18px 24px;z-index:9;pointer-events:auto}#keys h3{margin:0 0 10px;font-family:var(--font-title);letter-spacing:1px}#keys .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}#keys h4{margin:0 0 6px;color:var(--gold);font-size:var(--fs-s);text-transform:uppercase;letter-spacing:1px}#keys p{margin:4px 0;font-size:var(--fs-s);color:var(--ink-dim)}#keys kbd{margin-right:3px}#crosshair{position:fixed;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border:2px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 4px #000;pointer-events:none}#crosshair:after{content:"";position:absolute;left:3px;top:3px;width:4px;height:4px;background:#fff;border-radius:50%}#prompt{position:fixed;left:50%;bottom:128px;transform:translate(-50%);width:max-content;max-width:calc(100 * var(--vw) - 32px);box-sizing:border-box;background:var(--glass);border:1px solid var(--line-strong);border-radius:10px;padding:7px 14px;font-size:var(--fs-s);pointer-events:none;animation:toast-in .2s var(--ease)}#prompt kbd{margin-right:6px}#zonetitle{position:fixed;left:50%;top:22%;transform:translate(-50%);width:max-content;max-width:calc(100 * var(--vw) - 32px);box-sizing:border-box;text-align:center;pointer-events:none;z-index:4;opacity:0}#zonetitle.in{animation:zone-in .9s var(--ease) forwards}#zonetitle.out{animation:zone-out .9s ease-in forwards}#zonetitle .name{font-family:var(--font-title);font-size:calc(var(--fs-xl) * 1.5);font-weight:800;letter-spacing:4px;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.8),0 0 30px rgba(255,216,106,.4)}#zonetitle .sub{font-size:var(--fs-m);color:var(--ink);letter-spacing:2px;text-shadow:0 1px 6px #000;margin-top:4px}@keyframes zone-in{0%{opacity:0;transform:translate(-50%,10px) scale(.96)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes zone-out{0%{opacity:1}to{opacity:0}}#floaters{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3}.floater{position:absolute;transform:translate(-50%,-50%);font-weight:800;font-size:var(--fs-m);text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.6);white-space:nowrap}.floater.damage{color:#ffe08a}.floater.crit{color:#ff8a40;font-size:var(--fs-l)}.floater.heal{color:var(--good)}.floater.xp{color:var(--gold);font-size:var(--fs-s)}.floater.info{color:#fff;font-size:var(--fs-s)}#dialog{--speaker: var(--gold);position:fixed;left:50%;bottom:24px;transform:translate(-50%);width:min(820px,calc(100% - 32px));display:flex;gap:14px;align-items:flex-end;z-index:5;animation:toast-in .25s var(--ease)}#dialog .portrait{flex:0 0 auto;width:96px;height:96px;border-radius:var(--r-l);border:3px solid var(--speaker);background:#00000080;overflow:hidden;box-shadow:var(--shadow)}#dialog .portrait canvas{width:100%;height:100%;image-rendering:pixelated}#dialog .bubble{position:relative;flex:1 1 auto;background:var(--glass-strong);border:1px solid var(--line-strong);border-left:4px solid var(--speaker);border-radius:var(--r-l);padding:14px 18px 12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow)}#dialog.narrator .bubble{border-left-color:var(--line-strong);font-style:italic}#dialog .speaker{font-weight:800;color:var(--speaker);margin-bottom:4px;font-family:var(--font-title);letter-spacing:.5px;font-size:var(--fs-l)}#dialog .text{white-space:pre-line;line-height:1.55;margin-bottom:10px;min-height:1.5em;font-size:var(--fs-m)}#dialog .more{position:absolute;right:14px;bottom:8px;font-size:11px;color:var(--ink-dim);animation:bob 1s infinite}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}#dialog .options{display:flex;gap:8px;flex-wrap:wrap;transition:opacity .2s}#dialog .options.pending,#dialog .card.pending{opacity:.15;pointer-events:none}#dialog .options button{font:inherit;font-size:var(--fs-s);background:#ffffff1a;color:#fff;border:1px solid var(--line-strong);border-radius:10px;padding:7px 12px 7px 8px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .15s,transform .15s}#dialog .options button:hover{background:#ffffff38;transform:translateY(-1px)}#dialog .options button:first-child{border-color:var(--speaker)}#dialog .card{margin:4px 0 12px;padding:10px 14px;border-radius:var(--r-m);background:#ffd86a14;border:1px dashed rgba(255,216,106,.5);transition:opacity .2s}#dialog .card.done{background:#7dffb014;border-color:#7dffb080}#dialog .card-head{display:flex;gap:8px;align-items:center;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;color:var(--gold)}#dialog .card.done .card-head{color:var(--good)}#dialog .card-head .cat{opacity:.7}#dialog .card-title{font-weight:800;font-size:var(--fs-l);margin:2px 0;font-family:var(--font-title)}#dialog .card-goal{font-size:var(--fs-s)}#dialog .card-reward{font-size:var(--fs-s);color:var(--ink-dim);margin-top:4px}#toasts{z-index:7;position:fixed;left:16px;bottom:36px;display:flex;flex-direction:column-reverse;gap:6px;align-items:flex-start;pointer-events:none;max-width:calc(42 * var(--vw))}.toast{background:var(--glass-strong);border:1px solid var(--line-strong);border-left:3px solid var(--line-strong);border-radius:10px;padding:7px 14px;font-size:var(--fs-s);animation:toast-in .25s var(--ease)}.toast.xp{border-left-color:var(--gold);color:var(--gold)}.toast.level{border-left-color:var(--good);color:var(--good);font-weight:700}.toast.out{opacity:0;transition:opacity .5s}@keyframes toast-in{0%{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}#tracker{position:fixed;top:14px;left:50%;transform:translate(-50%);width:max-content;max-width:calc(100 * var(--vw) - 32px);box-sizing:border-box;display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid rgba(255,216,106,.6);border-radius:999px;padding:6px 14px;font-size:var(--fs-s);pointer-events:none}#tracker .arrow{display:inline-block;color:var(--gold);font-size:18px;line-height:1;transition:transform .1s}#tracker .dist{color:var(--gold);font-weight:700}#tutorial{position:fixed;right:16px;top:84px;pointer-events:none;width:250px;background:var(--glass);border:1px solid rgba(255,216,106,.5);border-radius:var(--r-m);padding:10px 14px;font-size:var(--fs-s);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#tutorial h3{margin:0 0 6px;font-size:var(--fs-s);color:var(--gold)}#tutorial ul{list-style:none;margin:0;padding:0}#tutorial li{padding:3px 0 3px 22px;position:relative;opacity:.9}#tutorial li:before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border:2px solid rgba(255,255,255,.6);border-radius:4px}#tutorial li.ok{opacity:.5;text-decoration:line-through}#tutorial li.ok:before{background:var(--good);border-color:var(--good)}#bossbar{position:fixed;top:56px;left:50%;transform:translate(-50%);width:min(520px,calc(80 * var(--vw)));text-align:center;pointer-events:none}#bossbar .name{font-weight:800;color:#ff7a40;text-shadow:0 1px 3px #000;letter-spacing:1px;margin-bottom:4px;font-family:var(--font-title)}#bossbar .track{height:12px;background:#00000080;border:1px solid rgba(255,120,60,.8);border-radius:999px;overflow:hidden}#bossbar .fill{height:100%;width:100%;background:linear-gradient(90deg,#ff3a10,#ffb060);transition:width .15s}#trialtimer{position:fixed;top:100px;left:50%;transform:translate(-50%);background:var(--glass);border:1px solid #ff6a2a;color:#ffb080;border-radius:999px;padding:6px 16px;font-weight:700;pointer-events:none}#minimap{position:fixed;right:16px;bottom:16px;width:180px;height:180px;pointer-events:none;opacity:.92}#menu{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0407108c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:6;padding:16px;box-sizing:border-box;animation:zone-out .2s reverse}.menu-card{width:min(1180px,100%);height:min(calc(86 * var(--vh)),900px);display:flex;flex-direction:column;background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.menu-tabs{display:flex;gap:4px;padding:10px 12px 0;border-bottom:1px solid var(--line);background:#00000040}.menu-tab{position:relative;display:flex;align-items:center;gap:8px;padding:10px 14px;background:transparent;border:1px solid transparent;border-bottom:none;border-radius:12px 12px 0 0;color:var(--ink-dim);cursor:pointer;font-size:var(--fs-s)}.menu-tab .icon{font-size:18px}.menu-tab kbd{opacity:.7}.menu-tab:hover{color:var(--ink);background:#ffffff0f}.menu-tab.on{color:var(--ink);background:#ffffff1a;border-color:var(--line);font-weight:700}.menu-tab.on .label{color:var(--gold)}.menu-close{margin-left:auto;align-self:center;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:999px;width:32px;height:32px;cursor:pointer}.menu-close:hover{background:#ffffff26}.menu-body{flex:1 1 auto;overflow:auto;padding:16px 20px}.menu-pane{min-height:100%}.menu-foot{padding:6px 16px;font-size:var(--fs-xs);color:var(--ink-dim);border-top:1px solid var(--line);background:#0003}.menu-pane>#questlog,.menu-pane>#inventory,.menu-pane>#skilltree,.menu-pane>#settings,.menu-pane>#map,.menu-pane>#charsheet{position:static!important;transform:none!important;width:auto!important;max-width:none!important;max-height:none!important;background:transparent!important;border:0!important;padding:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}.menu-pane>#map{display:grid;grid-template-columns:1fr;justify-items:center}.menu-pane>#map .map-wrap{width:min(calc(86 * var(--vh) - 240px),660px,100%)}.menu-pane>#map canvas{width:100%;height:auto;aspect-ratio:1}.menu-pane>#map .legend{position:static;transform:none;margin-top:8px}#inventory{display:flex;flex-direction:column;gap:0}#inventory .head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}#inventory h2{margin:0 0 8px;font-family:var(--font-title)}#inventory h2 small{font-weight:400;opacity:.6;font-size:var(--fs-xs)}#inventory .summary{opacity:.7;font-size:var(--fs-s)}#inventory .tools{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}#inventory input{font:inherit;font-size:var(--fs-m);color:#fff;background:#0006;border:1px solid var(--line-strong);border-radius:10px;padding:8px 12px;outline:none}#inventory input:focus{border-color:var(--gold)}#inventory .chips{display:flex;flex-wrap:wrap;gap:6px}#inventory .chip{font:inherit;font-size:var(--fs-xs);color:#fff;background:#ffffff14;border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer}#inventory .chip span{opacity:.6;margin-left:4px}#inventory .chip.on{background:var(--gold);color:#111;border-color:var(--gold)}#inventory .chip.on span{opacity:.7}#inventory .list{list-style:none;margin:0;padding:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}#inventory .row{background:#ffffff0f;border-left:3px solid var(--line-strong);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:3px}#inventory .row.cat-use{border-left-color:var(--good)}#inventory .row.cat-quest{border-left-color:var(--gold)}#inventory .row.cat-treasure{border-left-color:#8ad0ff}#inventory .row .main{display:flex;align-items:baseline;gap:8px}#inventory .row .count{opacity:.8;font-variant-numeric:tabular-nums}#inventory .row .tag{margin-left:auto;font-size:var(--fs-xs);opacity:.55;text-transform:uppercase;letter-spacing:1px}#inventory .row small{opacity:.75;line-height:1.35}#inventory .row .use{align-self:flex-start;margin-top:4px;font:inherit;font-size:var(--fs-xs);color:#111;background:var(--good);border:0;border-radius:8px;padding:4px 10px;cursor:pointer}#inventory .row .use:hover{filter:brightness(1.1)}#inventory .empty{opacity:.6;padding:12px 0}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(ellipse at top,#1a2a4a,#0b1020 70%);z-index:10;padding:16px;box-sizing:border-box}.panel{width:min(900px,100%);background:#ffffff0f;border:1px solid var(--line);border-radius:var(--r-l);padding:24px;box-sizing:border-box}.panel .brand{display:flex;align-items:center;gap:16px;margin-bottom:6px}.panel h1{margin:0;letter-spacing:4px;font-size:32px;line-height:1;font-family:var(--font-title)}.panel .subtitle{font-size:16px;letter-spacing:1px;color:var(--gold);margin-top:4px}.panel .sub{margin:4px 0 18px;opacity:.8}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;font-size:var(--fs-s)}.field input{font-size:18px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-strong);background:#0000004d;color:#fff;outline:none}.field input:focus{border-color:#fff}.origins{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}.origin{--accent: #fff;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;background:#0000004d;color:#fff;border:2px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;font:inherit;min-height:140px}.origin:hover{border-color:var(--accent)}.origin.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,rgba(0,0,0,.3))}.origin .emoji{font-size:26px}.origin small{opacity:.8;font-size:var(--fs-xs);line-height:1.4}button.primary{font:inherit;font-size:18px;font-weight:700;padding:12px 24px;border-radius:12px;border:none;background:var(--amber);color:#1a1200;cursor:pointer}button.primary:disabled{opacity:.4;cursor:not-allowed}#questlog{font-size:var(--fs-s)}#questlog h2{margin:0 0 8px;font-size:var(--fs-l);font-family:var(--font-title)}#questlog h2 small{font-weight:400;opacity:.6;font-size:var(--fs-xs)}#questlog h3{margin:10px 0 4px;font-size:var(--fs-xs);opacity:.7;text-transform:uppercase;letter-spacing:1px}#questlog ul{list-style:none;margin:0;padding:0}#questlog li{padding:6px 8px;border-radius:8px;margin-bottom:4px;background:#ffffff0f}#questlog li.done{opacity:.6}#questlog li.empty{opacity:.6;background:none}#charsheet .cs-head{display:flex;gap:16px;align-items:center;margin-bottom:16px}#charsheet .cs-portrait{width:96px;height:96px;border-radius:var(--r-l);border:3px solid var(--gold);image-rendering:pixelated;background:#0006}#charsheet h2{margin:0;font-family:var(--font-title);font-size:var(--fs-xl)}#charsheet .cs-origin{color:var(--ink-dim)}#charsheet .cs-level{font-size:var(--fs-s);color:var(--gold);margin-top:4px}#charsheet .cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}#charsheet section{background:#ffffff0d;border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px}#charsheet h3{margin:0 0 8px;font-size:var(--fs-s);text-transform:uppercase;letter-spacing:1px;color:var(--gold)}#charsheet h3 small{opacity:.6;margin-left:6px}#charsheet table{width:100%;border-collapse:collapse;font-size:var(--fs-s)}#charsheet td{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06)}#charsheet td:last-child{text-align:right;font-weight:700}#charsheet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}#charsheet li small{display:block;opacity:.7;font-size:var(--fs-xs)}#charsheet .empty{opacity:.6;font-size:var(--fs-s)}#charsheet .cs-badges{display:flex;flex-wrap:wrap;gap:6px}#charsheet .cs-badge{background:#ffd86a1f;border:1px solid rgba(255,216,106,.5);border-radius:999px;padding:4px 10px;font-size:var(--fs-xs)}#skilltree h2{margin:0 0 4px;font-family:var(--font-title)}#skilltree h2 small{font-weight:400;opacity:.6;font-size:var(--fs-xs)}#skilltree .points{margin:0 0 14px;opacity:.85;font-size:var(--fs-s)}#skilltree .branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}#skilltree .branches.wanderer{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}#skilltree .fork{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}#skilltree .fork:before{content:"";position:absolute;left:25%;right:25%;top:-8px;height:8px;border:2px solid var(--accent);border-bottom:0;border-radius:8px 8px 0 0;opacity:.5}#skilltree .path{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:12px;background:#ffffff0a;position:relative}#skilltree .path .node+.node:before{content:"";position:absolute;left:50%;top:-10px;width:2px;height:10px;background:var(--accent);opacity:.5}#skilltree .path.chosen{background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.04))}#skilltree .path.closed{opacity:.4}#skilltree .path h4{margin:0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;color:var(--accent)}#skilltree .path h4 span{color:#fff;opacity:.7;text-transform:none;letter-spacing:0}#skilltree .section{margin:18px 0 8px;font-size:var(--fs-m)}#skilltree .section small{font-weight:400;opacity:.6;font-size:var(--fs-xs);margin-left:6px}#skilltree .fusions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;--accent: #ffb0e0}#skilltree .node em{font-style:normal;font-weight:400;font-size:var(--fs-xs);opacity:.7;margin-left:6px}#skilltree .node .why{font-size:var(--fs-xs);color:var(--gold);opacity:.9}#skilltree .branch{--accent: #fff;display:flex;flex-direction:column;gap:8px}#skilltree .branch h3{margin:0 0 4px;color:var(--accent);font-size:var(--fs-m)}#skilltree .node{position:relative;font:inherit;text-align:left;display:flex;flex-direction:column;gap:4px;color:#fff;background:#00000059;border:2px solid var(--line);border-radius:12px;padding:10px 12px;cursor:default}#skilltree .node small{opacity:.75;font-size:var(--fs-xs);line-height:1.35}#skilltree .node.learned{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 25%,rgba(0,0,0,.35));box-shadow:0 0 12px color-mix(in srgb,var(--accent) 35%,transparent)}#skilltree .node.available{border-style:dashed;border-color:var(--accent);cursor:pointer;animation:avail 2s infinite}@keyframes avail{0%,to{box-shadow:0 0 #fff0}50%{box-shadow:0 0 10px color-mix(in srgb,var(--accent) 50%,transparent)}}#skilltree .node.available:hover{background:color-mix(in srgb,var(--accent) 15%,rgba(0,0,0,.35))}#skilltree .node.locked{opacity:.45}#ttt{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#00000080;z-index:6}#ttt .panel{background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:var(--r-l);padding:18px 22px;width:min(420px,calc(100% - 32px));text-align:center}#ttt h2{margin:0 0 6px}#ttt .say{font-size:var(--fs-s);opacity:.9;min-height:40px}#ttt .board{display:grid;grid-template-columns:repeat(3,84px);gap:6px;justify-content:center;margin:10px 0}#ttt .board button{width:84px;height:84px;font-size:40px;background:#e8d9a8;border:2px solid #b8a070;border-radius:10px;cursor:pointer}#ttt .board button:disabled{cursor:default}#ttt .close{font:inherit;font-size:var(--fs-m);padding:8px 16px;border-radius:10px;border:none;background:var(--amber);color:#1a1200;cursor:pointer;margin-top:6px}#fishing{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#00000080;z-index:6}#fishing .panel{background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:var(--r-l);padding:18px 22px;width:min(460px,calc(100% - 32px));text-align:center}#fishing h2{margin:0 0 6px}#fishing .say{font-size:var(--fs-s);opacity:.9;min-height:40px}#fishing .bar{position:relative;height:26px;background:#ffffff1f;border-radius:999px;margin:12px 0;overflow:hidden}#fishing .zone{position:absolute;top:0;bottom:0;background:#7dffb099}#fishing .marker{position:absolute;top:0;bottom:0;width:6px;margin-left:-3px;background:var(--gold);box-shadow:0 0 6px var(--gold)}#fishing .score{font-size:var(--fs-s);margin-bottom:8px}#fishing .close{font:inherit;font-size:var(--fs-s);padding:6px 14px;border-radius:10px;border:none;background:#fff3;color:#fff;cursor:pointer}#banner{position:fixed;left:50%;top:18%;transform:translate(-50%);background:var(--glass-strong);border:2px solid var(--gold);color:var(--gold);border-radius:var(--r-l);padding:14px 24px;font-size:22px;font-weight:700;text-align:center;width:max-content;max-width:calc(80 * var(--vw));box-sizing:border-box;z-index:7;animation:toast-in .4s ease-out;font-family:var(--font-title)}#banner.out{opacity:0;transition:opacity 1s}.confetti{position:fixed;top:-10px;width:10px;height:14px;pointer-events:none;z-index:8;animation:fall linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}#fade{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;opacity:0;pointer-events:none;transition:opacity .3s;z-index:9}#fade.on{opacity:1}#faint{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#140000bf;color:#fff;font-size:28px;font-weight:700;z-index:8;text-align:center;transition:opacity .4s}#faint small{display:block;font-size:16px;font-weight:400;opacity:.8;margin-top:8px}#hud-settings{display:none}#settings{display:flex;flex-direction:column;gap:12px;max-width:520px}#settings h2{margin:0;font-size:var(--fs-l);font-family:var(--font-title)}#settings h3{margin:10px 0 0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;color:var(--gold)}#settings label,#settings .row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-s)}#settings input[type=range]{width:160px}#settings .note{margin:-6px 0 0;font-size:var(--fs-xs);color:var(--ink-dim);line-height:1.4}#settings .seg{display:flex;gap:4px}#settings .seg button{font:inherit;font-size:var(--fs-xs);background:#ffffff14;color:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}#settings .seg button.on{background:var(--gold);color:#111;border-color:var(--gold)}#settings button.action{font:inherit;background:var(--amber);color:#1a1200;border:none;border-radius:10px;padding:8px 14px;cursor:pointer;align-self:flex-start}#settings button.secondary{font:inherit;background:#ffffff26;color:#fff;border:none;border-radius:10px;padding:8px 14px;cursor:pointer;align-self:flex-start;font-size:var(--fs-s)}#settings button.danger{font:inherit;background:#ff5a5a2e;color:#ffb0b0;border:1px solid rgba(255,90,90,.5);border-radius:10px;padding:8px 14px;cursor:pointer;align-self:flex-start;font-size:var(--fs-s)}#settings input[type=file]{max-width:220px;font-size:var(--fs-xs)}#map canvas{width:min(calc(90 * var(--vh)),calc(90 * var(--vw)));height:min(calc(90 * var(--vh)),calc(90 * var(--vw)));border-radius:var(--r-l);border:2px solid rgba(255,216,106,.6);image-rendering:auto}#map .legend{font-size:var(--fs-s);opacity:.85;text-align:center}@media (max-width: 760px){.hud-top-left .who{min-width:110px}.hud-bottom .hpbar{width:240px}.slot{width:48px;height:48px}.hud-icon{width:40px}#minimap{width:120px;height:120px}#dialog .portrait{display:none}}#questlog .ql-tabs{display:flex;gap:6px;margin-bottom:12px}#questlog .ql-tabs button{font:inherit;font-size:var(--fs-s);background:#ffffff14;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer}#questlog .ql-tabs button.on{background:var(--gold);color:#111;border-color:var(--gold);font-weight:700}#questlog .hint{color:var(--ink-dim);font-size:var(--fs-s);margin:0 0 12px}#questlog .ql-cols{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.4fr);gap:16px}#questlog h4{margin:10px 0 6px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;color:var(--gold)}#questlog h4 small{opacity:.6;margin-left:4px}#questlog .done-h button{font:inherit;background:none;border:0;color:var(--ink-dim);cursor:pointer;padding:0;text-transform:uppercase;letter-spacing:1px;font-size:var(--fs-xs)}#questlog li.q{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;margin-bottom:4px;background:#ffffff0d;cursor:pointer;border:1px solid transparent}#questlog li.q:hover{background:#ffffff1a}#questlog li.q.sel{border-color:var(--gold);background:#ffd86a1a}#questlog li.q.tracked .pin{color:var(--gold)}#questlog li.q .ico{font-size:18px}#questlog li.q .t{display:flex;flex-direction:column;flex:1}#questlog li.q small{opacity:.65;font-size:var(--fs-xs)}#questlog li.q.done{opacity:.55}#questlog .ql-detail{background:#ffffff0d;border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;min-height:200px}#questlog .d-head .cat{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;color:var(--gold)}#questlog .d-head h3{margin:2px 0;font-family:var(--font-title);font-size:var(--fs-l)}#questlog .giver{font-size:var(--fs-s);color:var(--ink-dim)}#questlog .d-desc{line-height:1.5;font-size:var(--fs-s)}#questlog .stages{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:6px}#questlog .stages li{display:flex;gap:8px;font-size:var(--fs-s);padding:6px 8px;border-radius:8px;background:#00000040}#questlog .stages li.done{opacity:.55;text-decoration:line-through}#questlog .stages li.now{border-left:3px solid var(--gold);background:#ffd86a14}#questlog .stages li.later{opacity:.45}#questlog .stages .mark{width:16px;text-align:center;color:var(--gold)}#questlog .stages small{color:var(--ink-dim)}#questlog .d-reward{font-size:var(--fs-s);color:var(--ink-dim);margin:8px 0}#questlog .d-done{color:var(--good);font-size:var(--fs-s)}#questlog .d-actions{display:flex;gap:8px}#questlog .d-actions button{font:inherit;font-size:var(--fs-s);background:#ffffff1a;color:#fff;border:1px solid var(--line-strong);border-radius:10px;padding:7px 12px;cursor:pointer}#questlog .d-actions button.track.on{background:var(--gold);color:#111;border-color:var(--gold)}#questlog .empty{opacity:.6;font-size:var(--fs-s)}#questlog .rep{display:flex;flex-direction:column;gap:10px;max-width:640px}#questlog .rep-row{display:grid;grid-template-columns:90px 1fr 200px;gap:12px;align-items:center}#questlog .rep-bar{height:12px;background:#0006;border-radius:999px;overflow:hidden;border:1px solid var(--line)}#questlog .rep-bar .fill{height:100%;background:var(--gold)}#questlog .rep-fire .fill{background:var(--fire)}#questlog .rep-water .fill{background:var(--water)}#questlog .rep-earth .fill{background:var(--earth)}#questlog .rep-air .fill{background:var(--air)}#questlog .rep-rank small{display:block;opacity:.6;font-size:var(--fs-xs)}#questlog .bst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}#questlog .bst{background:#ffffff0d;border:1px solid var(--line);border-radius:var(--r-m);padding:10px 12px;font-size:var(--fs-s);opacity:.55}#questlog .bst.seen{opacity:1;border-color:#ffd86a66}#questlog .bst p{margin:4px 0;line-height:1.4}#questlog .bst .hab,#questlog .bst .snd{display:block;color:var(--ink-dim);font-size:var(--fs-xs)}#questlog .tale{background:#ffffff0d;border:1px solid var(--line);border-radius:var(--r-m);padding:10px 14px;margin-bottom:8px;font-size:var(--fs-s)}#questlog .tale small{display:block;color:var(--ink-dim)}#questlog .tale p{line-height:1.5}#map .map-tabs{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;justify-content:center}#map .map-tabs button{font:inherit;font-size:var(--fs-xs);background:#ffffff14;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}#map .map-tabs button.on{background:var(--gold);color:#111;border-color:var(--gold)}#map .map-wrap{position:relative}#map .map-tip{position:absolute;background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:8px;padding:4px 10px;font-size:var(--fs-xs);pointer-events:none;white-space:nowrap;z-index:2}#map .map-filters{display:flex;gap:14px;justify-content:center;margin:8px 0 4px;font-size:var(--fs-xs);color:var(--ink-dim);flex-wrap:wrap}#map .map-filters label{display:flex;gap:4px;align-items:center}.panel.cc{width:min(980px,100%);max-height:calc(100 * var(--vh) - 32px);overflow-y:auto;box-sizing:border-box}.cc-side .skin-grid{grid-template-columns:repeat(7,1fr);gap:5px}.cc-side .skin-card{padding:4px 1px 3px;font-size:9px}.cc-side .skin-card canvas{width:24px;height:48px}.cc-cols{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start}.cc-stage{position:relative;background:radial-gradient(ellipse at 50% 30%,#ffd86a1f,#00000059 70%);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}.cc-stage canvas{display:block;width:360px;height:420px}.cc-turn{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:var(--fs-xs);color:var(--ink-dim)}.cc-side h3{margin:0 0 8px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;color:var(--gold)}.cc-looks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.cc-look{font:inherit;font-size:var(--fs-s);background:#ffffff14;color:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:6px 12px;cursor:pointer}.cc-look.on{background:var(--gold);color:#111;border-color:var(--gold)}.cc-upload{display:block;font-size:var(--fs-xs);color:var(--ink-dim);margin-bottom:18px}.cc-upload input{display:block;margin-top:4px;font-size:var(--fs-xs)}.cc-intro{font-size:var(--fs-m);line-height:1.6;min-height:5.5em;color:var(--ink);background:#00000040;border-left:3px solid var(--gold);border-radius:8px;padding:10px 14px;cursor:pointer}.cc-why{margin-left:10px;font-size:var(--fs-s);color:var(--ink-dim)}.cc-actions{display:flex;gap:10px;align-items:center}.cc-actions .secondary{font:inherit;font-size:var(--fs-s);background:#ffffff1f;color:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 18px;cursor:pointer}@media (max-width: 820px){.cc-cols{grid-template-columns:1fr}.cc-stage canvas{width:100%;height:auto}}#questlog .d-now{font-size:var(--fs-s);padding:8px 10px;border-radius:8px;background:#ffd86a14;border-left:3px solid var(--gold)}#skilltree .st-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}#skilltree .st-side{position:sticky;top:0}#skilltree .st-card{background:#ffffff0f;border:1px solid var(--line-strong);border-radius:var(--r-m);padding:14px 16px;font-size:var(--fs-s)}#skilltree .st-card.empty{opacity:.8}#skilltree .st-branch{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;color:var(--gold)}#skilltree .st-card h3{margin:4px 0 6px;font-family:var(--font-title);font-size:var(--fs-l)}#skilltree .st-desc{line-height:1.5}#skilltree .st-reqs{margin:8px 0;padding-left:18px;color:var(--ink-dim)}#skilltree .st-warn{background:#ffb3471f;border-left:3px solid var(--amber);padding:8px 10px;border-radius:8px}#skilltree .st-ok{color:var(--good)}#skilltree .st-why{color:var(--gold)}#skilltree .st-learn{font:inherit;font-size:var(--fs-m);font-weight:700;background:var(--gold);color:#111;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;width:100%}#skilltree .node{cursor:pointer}#skilltree .node.sel{outline:2px solid var(--gold);outline-offset:2px}@media (max-width: 900px){#skilltree .st-cols{grid-template-columns:1fr}#skilltree .st-side{position:static}}#crash{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#040710cc;z-index:20;padding:16px;box-sizing:border-box}.crash-card{width:min(520px,100%);background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:var(--r-l);padding:22px 26px;box-shadow:var(--shadow)}.crash-card h2{margin:0 0 8px;font-family:var(--font-title);color:var(--gold)}.crash-card p{margin:0 0 12px;line-height:1.5}.crash-card pre{margin:0 0 16px;padding:8px 10px;background:#0006;border-radius:var(--r-s);font-size:var(--fs-xs);color:var(--ink-dim);white-space:pre-wrap;word-break:break-word;max-height:120px;overflow:auto}.crash-dismiss{font:inherit;font-size:var(--fs-s);margin-left:10px;background:transparent;color:var(--ink-dim);border:1px solid var(--line);border-radius:10px;padding:10px 16px;cursor:pointer}#loading{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;background:radial-gradient(ellipse at top,#1a2a4a,#0b1020 70%);z-index:9}#loading .loading-title{font-family:var(--font-title);font-size:40px;font-weight:800;letter-spacing:8px;color:var(--gold)}#loading .loading-sub{margin-top:10px;color:var(--ink-dim);letter-spacing:2px;animation:hp-low 1.4s infinite}.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;margin-bottom:12px}.skin-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 4px;font:inherit;font-size:10px;line-height:1.15;color:var(--ink-dim);background:#ffffff0f;border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer;transition:background .15s,transform .15s}.skin-card canvas{width:32px;height:64px;image-rendering:pixelated}.skin-card span{text-align:center;overflow-wrap:anywhere}.skin-card:hover{background:#ffffff29;transform:translateY(-1px)}.skin-card.on{border-color:var(--gold);background:#ffd86a29;color:var(--ink)}.skin-card:disabled{opacity:.3;cursor:default}#settings .skin-grid{max-width:520px}.panel.ps{width:min(760px,100%);max-height:calc(100 * var(--vh) - 32px);overflow-y:auto}.ps-list{display:flex;flex-direction:column;gap:8px;margin:14px 0}.ps-card{--accent: var(--gold);display:flex;align-items:center;gap:14px;padding:10px 14px;background:#ffffff0f;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-m)}.ps-card canvas{width:32px;height:64px;image-rendering:pixelated;flex:0 0 auto}.ps-emoji{width:32px;height:64px;display:grid;place-items:center;font-size:26px;flex:0 0 auto}.ps-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.ps-text strong{font-size:var(--fs-l);font-family:var(--font-title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ps-text span{font-size:var(--fs-s)}.ps-text small{font-size:var(--fs-xs);color:var(--ink-dim)}.ps-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.ps-actions .primary{font-size:var(--fs-m);padding:8px 18px}.ps-actions .secondary,.ps-actions .danger{font:inherit;font-size:var(--fs-xs);border-radius:10px;padding:7px 10px;cursor:pointer}.ps-actions .secondary{background:#ffffff1f;color:#fff;border:1px solid var(--line)}.ps-actions .danger{background:#ff5a5a24;color:#ffb0b0;border:1px solid rgba(255,90,90,.45)}.ps-actions button:disabled{opacity:.4;cursor:default}.ps-foot{display:flex;align-items:center;gap:14px}.ps-count{font-size:var(--fs-s);color:var(--ink-dim)}#settings details>summary{cursor:pointer;font-size:var(--fs-s);padding:6px 0}.keys-table{display:flex;flex-direction:column;gap:4px;margin-top:6px}.keys-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-s)}.keys-key{font:inherit;font-size:var(--fs-xs);min-width:120px;background:#ffffff1a;color:#fff;border:1px solid var(--line-strong);border-radius:8px;padding:5px 10px;cursor:pointer}.keys-key.waiting{background:var(--gold);color:#111;border-color:var(--gold)}.keys-foot{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}.keys-foot .note{margin:0}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}#touch{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2;user-select:none;-webkit-user-select:none}#touch .stick{position:absolute;left:28px;bottom:96px;width:132px;height:132px;border-radius:50%;background:#ffffff1a;border:2px solid var(--line-strong);pointer-events:auto}#touch .knob{position:absolute;left:31%;top:31%;width:38%;height:38%;border-radius:50%;background:#ffffff73}#touch .pad{position:absolute;right:24px;bottom:96px;display:grid;grid-template-columns:repeat(2,64px);gap:12px;pointer-events:auto}#touch .pad button{width:64px;height:64px;border-radius:50%;font-size:24px;color:#fff;background:#0a10208c;border:2px solid var(--line-strong)}#touch .pad button.big{background:#ff6a2a73}#touch .pad button.down{background:#ffd86a99}html.touch #minimap{bottom:auto;top:84px}html.touch .slot kbd,html.touch .hud-icon .key,html.touch #tutorial{display:none}#sharksong{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#000a1e99;z-index:6}#sharksong .panel{background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:var(--r-l);padding:18px 22px;width:min(520px,calc(100% - 32px));text-align:center}#sharksong h2{margin:0 0 6px;font-family:var(--font-title);color:var(--water)}#sharksong .say{font-size:var(--fs-s);opacity:.9;min-height:40px}#sharksong .track{position:relative;height:54px;margin:10px 0;background:#3fa7ff1f;border-radius:999px;overflow:hidden}#sharksong .ring{position:absolute;left:20%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid var(--gold);box-shadow:0 0 10px #ffd86a99}#sharksong .note{position:absolute;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;line-height:30px;font-size:24px;color:#fff;text-shadow:0 0 8px var(--water)}#sharksong .lyrics{list-style:none;margin:8px 0;padding:0;font-size:var(--fs-s);line-height:1.6;color:var(--ink-dim)}#sharksong .lyrics li.now{color:var(--ink);font-weight:700}#sharksong .lyrics li.ok{color:var(--good)}#sharksong .lyrics li.miss{color:var(--bad);text-decoration:line-through}#sharksong .score{font-size:var(--fs-s);margin-bottom:8px}#sharksong .row{display:flex;gap:10px;justify-content:center;align-items:center}#sharksong .close{font:inherit;font-size:var(--fs-s);padding:8px 14px;border-radius:10px;border:none;background:#fff3;color:#fff;cursor:pointer}