/* ISARO · game screens. The mine is always dark rock under pearl glass; the camp sits on the sea. */
.isaro-mine{position:fixed;inset:0;z-index:40;background:#1b1620;opacity:0;transition:opacity .4s ease;touch-action:manipulation;-webkit-user-select:none;user-select:none;
  --g-bg:linear-gradient(140deg,rgba(255,255,255,.95),rgba(236,246,241,.9));--g-edge:rgba(255,255,255,.75);--g-sh:0 10px 30px rgba(8,4,14,.35),inset 1px 1px 1px rgba(255,255,255,.9)}
.isaro-mine.on{opacity:1}
.m-cv{position:absolute;inset:0;display:block;cursor:pointer}
.m-over{margin:0;font:600 8px/1.2 var(--f-ui);letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase}
.m-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;gap:10px;pointer-events:none;
  padding:calc(12px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px))}
.m-top>*{pointer-events:auto}
.m-site,.m-stat,.m-bag{border-radius:18px;border:1px solid var(--g-edge);background:var(--g-bg);box-shadow:var(--g-sh);color:var(--ink)}
.m-site{padding:9px 14px 9px;min-width:0;max-width:34vw}
.m-site h2{margin:3px 0 0;font:500 14px/1.25 var(--f-voice);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-depth{margin:2px 0 0;font:italic 400 15px/1 var(--f-latin);color:#4f9e8c;font-variant-numeric:tabular-nums}
.m-stat{flex:1;max-width:360px;margin:0 auto;padding:9px 14px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:center}
.m-hp{grid-row:span 3;display:flex;gap:3px}
.m-hp i{display:block;width:17px;height:17px;color:rgba(80,70,90,.18)}
.m-hp i.on{color:#e98aa3;filter:drop-shadow(0 1px 1px rgba(160,60,90,.25))}
.m-hp svg{width:100%;height:100%;fill:currentColor}
.m-bar{display:grid;grid-template-columns:30px 1fr 24px;align-items:center;gap:7px;font:400 10px/1 var(--f-ui);letter-spacing:.06em;color:var(--ink-3)}
.m-bar[hidden]{display:none}
.m-bar i{display:block;height:5px;border-radius:3px;background:rgba(60,80,76,.12);overflow:hidden}
.m-bar b{display:block;height:100%;border-radius:3px;transition:width .3s ease}
.m-bar em{font:500 10px/1 var(--f-ui);font-style:normal;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.m-bar.st b{background:linear-gradient(90deg,#8fd0b8,#5fae95)}
.m-bar.oil b{background:linear-gradient(90deg,#f7d79b,#e3a95c)}
.m-bar.air b{background:linear-gradient(90deg,#b7c6f4,#7d93dc)}
.m-bar.low{color:#b2506a}.m-bar.low b{animation:low 1s ease-in-out infinite}
@keyframes low{50%{opacity:.45}}
.m-bag{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 14px;cursor:pointer;font:400 10px/1 var(--f-ui);letter-spacing:.08em;color:var(--ink-3)}
.m-bag b{font:italic 400 17px/1 var(--f-latin);color:var(--ink);font-variant-numeric:tabular-nums}
.m-bag.full b{color:#c26a3f}
.m-bag small{font:400 9.5px/1 var(--f-ui);color:var(--muted);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.m-log{position:absolute;left:50%;top:calc(96px + env(safe-area-inset-top,0px));transform:translate(-50%,-6px);margin:0;max-width:calc(100% - 32px);padding:7px 16px;border-radius:12px;
  background:rgba(20,14,26,.78);color:#f4eef2;font:400 12.5px/1.5 var(--f-voice);letter-spacing:.06em;opacity:0;transition:opacity .3s,transform .4s;pointer-events:none;text-align:center;transform:translate(-50%,0)}
.m-log.bad{color:#ffd0da}.m-log.warn{color:#ffe7b8}.m-log.good{color:#c9f1e2}
.m-act{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:4px;padding:6px;border-radius:22px;
  border:1px solid var(--g-edge);background:var(--g-bg);box-shadow:var(--g-sh)}
.m-act button{position:relative;width:54px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;border-radius:16px;background:transparent;color:var(--control);cursor:pointer;
  font:400 10.5px/1 var(--f-ui);letter-spacing:.06em;transition:background .25s,transform .15s}
.m-act button[hidden]{display:none}
.m-act button:hover{background:rgba(255,255,255,.6)}.m-act button:active{transform:scale(.95)}
.m-act button:disabled{opacity:.38;cursor:default;background:transparent}
.m-act button.on{background:linear-gradient(140deg,#d7e5ff,#b9cdf5);color:#2e4a7c}
.m-act button.go{background:var(--mint-glass);color:var(--ink)}
.m-act svg{width:21px;height:21px}
.m-act b{position:absolute;top:4px;right:6px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:rgba(72,97,87,.14);font:600 9px/15px var(--f-ui);color:var(--ink-2);font-variant-numeric:tabular-nums}
.m-fufu{position:absolute;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:56px;height:56px;padding:0;border-radius:50%;cursor:pointer}
@keyframes ping{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
.m-say{position:absolute;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:min(320px,calc(100% - 28px));padding:11px 15px;border-radius:16px 16px 16px 5px;
  border:1px solid var(--g-edge);background:var(--g-bg);box-shadow:var(--g-sh);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .4s;pointer-events:none}
.m-say.on{opacity:1;transform:none;pointer-events:auto}
.m-say p{margin:0;font:400 13px/1.75 var(--f-voice);color:var(--ink-2);letter-spacing:.03em}
.m-say .tb{display:block;margin-top:6px;padding:4px 0;color:#3f7f73}
.m-sure{display:block;margin-top:6px;font:400 11.5px/1.6 var(--f-ui);color:var(--ink-3)}
.m-sure .tb{display:inline;margin-left:8px}
.m-panel{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;min-width:min(400px,calc(100% - 28px));max-width:min(620px,calc(100% - 28px));max-height:calc(100% - 200px);overflow:auto;padding:16px 18px 18px;border-radius:24px;
  border:1px solid var(--g-edge);background:linear-gradient(140deg,rgba(255,255,255,.97),rgba(238,247,242,.94));box-shadow:var(--g-sh);color:var(--ink);animation:mp .32s cubic-bezier(.16,1,.3,1)}
@keyframes mp{from{opacity:0;transform:translate(-50%,10px) scale(.98)}}
.m-panel[hidden]{display:none}
.mp-head{display:flex;align-items:flex-start;gap:10px}
.mp-head>div{flex:1;min-width:0}
.mp-head h3{margin:4px 0 0;font:500 16px/1.35 var(--f-voice);letter-spacing:.05em}
.mp-foot{display:flex;justify-content:flex-end;margin-top:14px}
.vg-list{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.vg-c{flex:0 0 180px;margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:7px}
.vg-c canvas{width:100%;aspect-ratio:6/5;border-radius:14px;display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.vg-c figcaption{display:flex;flex-direction:column;gap:3px;padding:0 2px}
.vg-c figcaption b{font:500 13px/1.3 var(--f-voice);letter-spacing:.04em}
.vg-c figcaption span{font:400 10.5px/1.3 var(--f-ui);color:var(--muted);letter-spacing:.04em}
.vg-b{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vb{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:12px;cursor:pointer;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.55);color:var(--ink);transition:background .2s,transform .15s}
.vb:hover{background:rgba(255,255,255,.9)}.vb:active{transform:scale(.97)}
.vb b{font:500 12.5px/1 var(--f-ui);letter-spacing:.1em}
.vb small{font:400 9.5px/1 var(--f-ui);color:var(--muted);letter-spacing:.02em}
.vb.slow{background:var(--mint-glass)}
.vg-warn{margin:10px 0 0;min-height:1.4em;font:400 12px/1.5 var(--f-voice);color:#b2506a;opacity:0;transition:opacity .3s}
.vg-warn.on{opacity:1}
.bg-list,.sum-l{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.bg-list li,.sum-l li{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--rule);font:400 13px/1.35 var(--f-voice);letter-spacing:.03em}
.bg-list li span{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.bg-list small,.sum-l small{font:400 10.5px/1.2 var(--f-ui);color:var(--muted);letter-spacing:.03em}
.sum-l small{margin-left:auto}
.dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c,#ccc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 3px rgba(255,255,255,.7)}
.dot.ore{border-radius:3px;transform:rotate(45deg)}
.dot.relic{background:#e8c98a}
.bg-sup,.sum-n{margin:10px 0 0;font:400 11.5px/1.6 var(--f-ui);color:var(--ink-3);letter-spacing:.04em}
.isaro-mine.paneled .m-say{bottom:auto;top:calc(96px + env(safe-area-inset-top,0px))}
.isaro-mine.over .m-act,.isaro-mine.over .m-fufu,.isaro-mine.over .m-say{opacity:0;pointer-events:none;transition:opacity .3s}
.m-panel.sum{bottom:50%;transform:translate(-50%,50%);animation:none}
.m-veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.96),rgba(214,244,232,.92));opacity:0;pointer-events:none;transition:opacity .5s}
.m-veil.on{opacity:1}
@media (max-width:719px){
  .m-top{flex-wrap:wrap;gap:6px}
  .m-site{max-width:none;flex:1;padding:8px 12px}
  .m-site h2{font-size:13px}
  .m-stat{order:3;flex:1 1 100%;max-width:none;padding:8px 12px}
  .m-bag{padding:8px 12px}
  .m-log{top:calc(150px + env(safe-area-inset-top,0px))}
  .m-act{gap:0;padding:4px;left:auto;right:max(10px,env(safe-area-inset-right,0px));transform:none}
  .m-act button{width:46px;height:48px;font-size:9.5px}
  .m-fufu{width:50px;height:50px}
  .m-say{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .isaro-mine.paneled .m-say{top:calc(150px + env(safe-area-inset-top,0px))}
  .m-panel{bottom:calc(74px + env(safe-area-inset-bottom,0px));max-height:calc(100% - 230px);padding:14px}
  .vg-c{flex-basis:150px}
}

/* ---------- the mineral card, laid out like Fufu's No. 000 ---------- */
.mcard{--gold:#b8955a;--gold-2:rgba(184,149,90,.38);position:relative;aspect-ratio:2/3;width:100%;perspective:1400px;cursor:pointer;color:#24413c;-webkit-user-select:none;user-select:none}
.mc-in{position:absolute;inset:0;transition:transform .8s cubic-bezier(.3,1.25,.45,1);transform-style:preserve-3d}
.mcard.flip .mc-in{transform:rotateY(180deg)}
.mc-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:5px;overflow:hidden;container-type:inline-size;text-align:center;
  background:radial-gradient(circle,rgba(150,160,170,.16) .6px,transparent .9px) 0 0/5.2% 3.47%,linear-gradient(172deg,#fbeeed 0%,#faf6f2 42%,#f3f7f4 78%,#ecf5f2 100%);
  box-shadow:0 14px 36px rgba(36,77,59,.13),0 2px 6px rgba(36,77,59,.07)}
.mc-face::before,.mc-face::after{content:"";position:absolute;pointer-events:none}
.mc-face::before{inset:3.4cqw;border:1px solid rgba(184,149,90,.78)}
.mc-face::after{inset:4.5cqw;border:.5px solid var(--gold-2)}
.mc-back{transform:rotateY(180deg)}
.mc-c{position:absolute;width:4.4cqw;height:4.4cqw;color:var(--gold);z-index:1}
.mc-c svg,.mc-orn svg,.mc-bstar svg{width:100%;height:100%;fill:currentColor;display:block}
.mc-c.a{left:1.2cqw;top:1.2cqw}.mc-c.b{right:1.2cqw;top:1.2cqw}.mc-c.c{left:1.2cqw;bottom:1.2cqw}.mc-c.d{right:1.2cqw;bottom:1.2cqw}
.mc-face p,.mc-face h3{position:absolute;left:8cqw;right:8cqw;margin:0}
.mc-mg{top:6.2cqw;font:italic 400 1.8cqw/1.3 var(--f-latin);color:#8b6d3f;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-top{top:11cqw;font:400 2.2cqw/1.3 var(--f-voice);letter-spacing:.24em;color:#3d514b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-side{top:50%!important;left:auto!important;right:auto!important;width:auto;writing-mode:vertical-rl;font:italic 400 1.55cqw/1 var(--f-latin);color:#8b6d3f;white-space:nowrap;transform:translateY(-50%)}
.mc-side.l{left:5.4cqw!important;transform:translateY(-50%) rotate(180deg)}.mc-side.r{right:5.4cqw!important}
.mc-art,.mc-img{position:absolute;left:8cqw;top:15.5cqw;width:84cqw;height:77cqw;display:block}
.mc-img img{width:100%;height:100%;object-fit:contain;filter:saturate(1.05)}
.mc-img .bub{position:absolute;left:calc(52.4% - .75cqw);top:calc(32.6% - .2cqw);width:1.5cqw;height:1.5cqw;border-radius:50%;border:.32cqw solid rgba(38,58,66,.78);background:rgba(255,255,255,.92);box-shadow:0 0 .6cqw rgba(255,255,255,.9);animation:bub 7s ease-in-out infinite}
@keyframes bub{0%,100%{transform:translate(0,0)}38%{transform:translate(0,5.4cqw)}52%{transform:translate(0,5.6cqw)}78%{transform:translate(0,1cqw)}}
.mc-en{top:97cqw;font:400 5.6cqw/1.1 var(--f-mark);letter-spacing:.26em;color:#24413c;white-space:nowrap;overflow:hidden;text-overflow:clip}
.mc-cn{top:105cqw;font:500 3.8cqw/1.2 var(--f-voice);letter-spacing:.42em;padding-left:.42em;color:#24413c}
.mc-orn{top:111.5cqw;display:flex;justify-content:center;align-items:center;gap:1.6cqw;color:var(--gold)}
.mc-orn i{width:1.7cqw;height:1.7cqw}.mc-orn span{width:2cqw;height:3.4cqw}.mc-orn span svg{fill:none}
.mc-meta{top:116.5cqw;font:400 2.3cqw/1.3 var(--f-voice);letter-spacing:.14em;color:#3d514b}
.mc-rule{position:absolute;left:10cqw;right:10cqw;top:124cqw;height:1px;background:linear-gradient(90deg,transparent,rgba(184,149,90,.6) 12%,rgba(184,149,90,.6) 88%,transparent)}
.mc-tag{top:128cqw;font:italic 400 2.8cqw/1.3 var(--f-latin);color:#3d514b}
.mc-tag em{font-style:italic}
.mc-tag b.g,.cl-tip b.g{display:inline-grid;place-items:center;width:1.9em;height:1.9em;margin-right:.5em;border-radius:50%;font:500 .82em/1 var(--f-latin);font-style:normal;color:#fff;vertical-align:.05em;background:#9aa8a3}
.g.gS{background:linear-gradient(140deg,#e7c27a,#b98a3f)}.g.gA{background:linear-gradient(140deg,#c2a3e6,#8b6dc2)}.g.gB{background:linear-gradient(140deg,#8fd0b8,#4f9e8c)}.g.gC{background:#9ab0bf}.g.gD{background:#b6aca4}
.mc-tag{font-family:var(--f-voice);font-style:normal;font-size:2.5cqw;letter-spacing:.06em}
.enh .mc-tag{font:italic 400 2.8cqw/1.3 var(--f-latin);letter-spacing:0}
.mc-ft{bottom:7cqw;font:italic 400 1.75cqw/1.3 var(--f-latin);color:#8b6d3f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-bstar{position:absolute;left:50%;top:8.5cqw;width:4.6cqw;height:4.6cqw;margin-left:-2.3cqw;color:var(--gold)}
.mc-bh{top:16cqw;font:400 4.8cqw/1.1 var(--f-mark);letter-spacing:.28em;white-space:nowrap}
.mc-bc{top:23.5cqw;font:500 3cqw/1.2 var(--f-voice);letter-spacing:.4em;padding-left:.4em}
.mc-bn{top:29cqw;font:400 1.9cqw/1.2 var(--f-voice);letter-spacing:.2em;color:#3d514b}
.mc-dl{position:absolute;left:9cqw;right:9cqw;top:35cqw;margin:0;display:grid;grid-template-columns:19cqw 1fr;text-align:left;font:400 2.15cqw/1.62 var(--f-voice);color:#24413c}
.mc-dl dt,.mc-dl dd{margin:0;padding:1.7cqw 0;border-top:1px solid rgba(118,152,150,.18)}
.mc-dl dt{color:#3d514b;padding-left:1cqw}
.mc-cr{bottom:11cqw;font:italic 400 1.6cqw/1.35 var(--f-latin);color:#8b6d3f}
.mc-cr a{color:inherit;text-decoration:underline;text-decoration-color:rgba(139,109,63,.4);text-underline-offset:2px}
.mc-src{bottom:7.5cqw;font:italic 400 1.6cqw/1.4 var(--f-latin);color:#3d514b}
.mcard.locked .mc-face{background:radial-gradient(circle,rgba(150,160,170,.14) .6px,transparent .9px) 0 0/5.2% 3.47%,linear-gradient(172deg,#f6f2ef,#f4f3f0)}
.mcard.locked{cursor:default}.mcard.locked .mc-en{color:#9aa6a3}.mcard.locked .mc-cn{color:#9aa6a3}.mcard.locked .mc-art{opacity:.75}
.mcard.small .mc-mg,.mcard.small .mc-ft,.mcard.small .mc-side,.mcard.small .mc-tag,.mcard.small .mc-rule{display:none}
.mcard.small .mc-top{top:9.5cqw;font-size:3.4cqw;letter-spacing:.12em}
.mcard.small .mc-art,.mcard.small .mc-img{top:16cqw}
.mcard.small .mc-en{top:98cqw;font-size:6.6cqw;letter-spacing:.14em}
.mcard.small .mc-cn{top:108cqw;font-size:6.4cqw;letter-spacing:.24em}
.mcard.small .mc-orn{top:119cqw}.mcard.small .mc-orn i{width:2.6cqw;height:2.6cqw}.mcard.small .mc-orn span{width:3cqw;height:5cqw}
.mcard.small .mc-meta{top:127cqw;font-size:4cqw;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard.small .mc-meta:has(+.mc-rule+.mc-tag b){display:none}
.mcard.small.enh .mc-tag{display:none}
.mcard.small .mc-tag{display:block;top:127cqw;font-size:4.2cqw}
.mcard:not(.locked):hover .mc-face{box-shadow:0 18px 40px rgba(36,77,59,.18),0 2px 6px rgba(36,77,59,.08)}

/* ---------- the camp: a glass panel on the sea ---------- */
.camp{position:fixed;z-index:12;right:max(24px,env(safe-area-inset-right,0px));top:calc(24px + env(safe-area-inset-top,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:min(600px,54vw);
  display:flex;flex-direction:column;border-radius:28px;color:var(--ink);border:1px solid var(--edge);
  background:radial-gradient(ellipse at 8% 0%,rgba(255,255,255,.4),transparent 55%),linear-gradient(138deg,rgba(250,255,252,.8),rgba(234,247,240,.66) 50%,rgba(214,236,224,.6));background-color:rgba(240,249,245,.74);
  -webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%);box-shadow:0 24px 60px #244d3b22,0 4px 12px #244d3b0c,inset 1px 1px 1px #ffffffc0,inset -1px -1px 1px #7ba78b26;
  opacity:0;transform:translateX(24px);pointer-events:none;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.camp.on{opacity:1;transform:none;pointer-events:auto}
.cp-head{display:flex;align-items:flex-end;gap:16px;padding:20px 24px 14px;border-bottom:1px solid var(--rule)}
.cp-ttl{flex:1;min-width:0}
.cp-ttl h2{margin:4px 0 0;font:500 19px/1.3 var(--f-voice);letter-spacing:.06em}
.cp-stats{display:flex;gap:18px;margin:0}
.cp-stats div{display:flex;flex-direction:column;gap:4px;min-width:0}
.cp-stats dt{font:600 7.5px/1 var(--f-ui);letter-spacing:.2em;color:var(--ink-3)}
.cp-stats dd{margin:0;font:italic 400 19px/1 var(--f-latin);color:var(--ink);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.cp-stats .stb dd{font-size:14px}
.cp-stats .stb i{display:block;width:64px;height:5px;border-radius:3px;background:rgba(60,80,76,.12);overflow:hidden}
.cp-stats .stb b{display:block;height:100%;background:linear-gradient(90deg,#8fd0b8,#5fae95);border-radius:3px;transition:width .5s}
.trust{display:inline-flex;gap:2px}.trust i{width:6px;height:6px;transform:rotate(45deg);background:linear-gradient(140deg,#e7c27a,#b98a3f);border-radius:1px}
.cp-tabs{display:flex;gap:2px;padding:8px 14px;border-bottom:1px solid var(--rule)}
.cp-tabs button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 7px;border:0;border-radius:14px;background:transparent;color:var(--muted);cursor:pointer;font:400 11px/1 var(--f-ui);letter-spacing:.08em;transition:background .25s,color .25s}
.cp-tabs button:hover{background:rgba(255,255,255,.45);color:var(--ink-2)}
.cp-tabs button.on{background:rgba(255,255,255,.72);color:var(--ink);box-shadow:inset 0 1px 1px #fff,0 2px 8px #244d3b10}
.cp-tabs svg{width:20px;height:20px}
.cp-tabs b{position:absolute;top:3px;right:calc(50% - 22px);min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#e98aa3;color:#fff;font:600 9px/15px var(--f-ui)}
.cp-tabs b[hidden]{display:none}
.cp-body{flex:1;min-height:0;overflow:auto;padding:16px 24px 24px;scrollbar-width:none}
.cp-lead{margin:0 0 14px;font:400 13px/1.85 var(--f-voice);color:var(--ink-2);text-wrap:pretty}
.cp-lead span{color:var(--muted);font-size:12px}
.cp-note{margin:-6px 0 14px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.5);font:400 11.5px/1.7 var(--f-ui);color:var(--ink-3)}
.cp-empty{margin:40px 0;text-align:center;font:400 13px/2 var(--f-voice);color:var(--muted)}
.cp-empty.sm{margin:6px 0 14px;text-align:left;font-size:12px}
.cp-h{display:flex;align-items:baseline;gap:10px;margin:18px 0 8px;font:500 13px/1.3 var(--f-voice);letter-spacing:.1em;color:var(--ink)}
.cp-h:first-child{margin-top:0}
.cp-h small{font:400 10.5px/1 var(--f-ui);letter-spacing:.04em;color:var(--muted)}
.cp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.cp-foot p{margin:0;font:400 11.5px/1.5 var(--f-ui);color:var(--ink-3);letter-spacing:.03em}
.tb.rest{display:inline-flex;align-items:center;gap:6px}.tb.rest svg{width:15px;height:15px}
.sites{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:14px 14px 14px 12px;border-radius:18px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 1px #fff}
.site.lock{opacity:.55}
.s-no{font:400 22px/1 var(--f-mark);color:#4f9e8c;text-align:center}
.s-main{min-width:0}
.s-main h3{margin:0;font:500 15px/1.3 var(--f-voice);letter-spacing:.05em}
.s-main p{margin:4px 0 0;font:400 12px/1.65 var(--f-voice);color:var(--ink-3)}
.s-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px!important}
.s-meta span{padding:3px 8px;border-radius:8px;background:rgba(60,80,76,.07);font:400 10.5px/1.2 var(--f-ui);color:var(--ink-3);letter-spacing:.04em}
.s-meta .hz.fall{background:rgba(185,150,110,.18);color:#7a5a36}.s-meta .hz.water{background:rgba(110,190,200,.2);color:#2f6f78}.s-meta .hz.gas{background:rgba(190,205,110,.24);color:#5f6a22}
.s-lock{display:flex;align-items:center;gap:4px;margin:0;font:400 11px/1 var(--f-ui);color:var(--ink-3)}.s-lock svg{width:14px;height:14px}
.raws{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.raw{display:flex;flex-direction:column;gap:3px;padding:8px 8px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.5);cursor:pointer;text-align:left;color:var(--ink);transition:transform .2s,background .2s}
.raw:hover{background:rgba(255,255,255,.8);transform:translateY(-2px)}
.raw canvas{width:100%;aspect-ratio:12/11;border-radius:10px;display:block;margin-bottom:4px}
.raw b{font:500 13px/1.3 var(--f-voice);letter-spacing:.04em;padding:0 2px}.raw small{font:400 10.5px/1.3 var(--f-ui);color:var(--muted);padding:0 2px}
.ores{list-style:none;margin:0;padding:0}
.ores li{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--rule)}
.ores li span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font:400 13px/1.3 var(--f-voice)}
.ores small{font:400 10.5px/1.2 var(--f-ui);color:var(--muted)}
.offers{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.offers li{display:grid;grid-template-columns:84px 1fr auto;gap:12px;align-items:center;padding:8px 12px 8px 8px;border-radius:16px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7)}
.offers li.sold{opacity:.5}
.offers canvas{width:84px;aspect-ratio:10/9;border-radius:10px;display:block}
.of-m{display:flex;flex-direction:column;gap:3px;min-width:0}
.of-m b{font:500 13.5px/1.3 var(--f-voice)}.of-m small{font:400 10.5px/1 var(--f-ui);color:var(--muted)}
.of-who{margin:0;font:600 8px/1 var(--f-ui);letter-spacing:.18em;color:var(--ink-3)}
.of-h{margin:3px 0 0;font:400 11.5px/1.4 var(--f-voice);color:#3f7f73}
.of-b{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.of-s{font:400 11px/1 var(--f-ui);color:var(--muted)}
.tasks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tasks li{position:relative;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.55)}
.tasks li.now{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.9);box-shadow:0 8px 22px #244d3b12,inset 0 1px 1px #fff;padding:16px 18px}
.tasks li.later{opacity:.45}.tasks li.later h3{filter:blur(.3px)}
.tasks li.done{opacity:.62}
.t-who{display:flex;align-items:center;gap:5px;font:600 8px/1 var(--f-ui);letter-spacing:.18em;color:var(--ink-3)}.t-who svg{width:13px;height:13px;color:#4f9e8c}
.tasks h3{margin:6px 0 0;font:500 14px/1.45 var(--f-voice);letter-spacing:.04em}
.tasks li.now h3{font-size:15.5px}
.t-tip{margin:6px 0 0;font:400 12px/1.7 var(--f-voice);color:var(--ink-3)}
.t-pg{margin:8px 0 0;font:italic 400 14px/1 var(--f-latin);color:#4f9e8c}
.t-rw{margin:8px 0 0;font:400 10.5px/1 var(--f-ui);color:var(--muted);letter-spacing:.04em}
.tasks .b1{position:absolute;right:16px;bottom:14px}
.tools{list-style:none;margin:0;padding:0}
.tools li{display:flex;align-items:center;gap:14px;padding:12px 2px;border-bottom:1px solid var(--rule)}
.tools li>div{flex:1;min-width:0}
.tools h3{margin:0;display:flex;align-items:baseline;gap:8px;font:500 14px/1.3 var(--f-voice);letter-spacing:.05em}
.tools .lv{font:italic 400 13px/1 var(--f-latin);color:#4f9e8c}
.tools p{margin:3px 0 0;font:400 11.5px/1.6 var(--f-ui);color:var(--ink-3)}
.tools .nx{color:var(--muted)}
.tools .max{font:400 11px/1 var(--f-ui);color:var(--muted)}
.dex{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
/* the crystal in the corner */
.crys{position:fixed;z-index:30;left:max(20px,env(safe-area-inset-left,0px));top:calc(20px + env(safe-area-inset-top,0px));opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .5s,transform .7s cubic-bezier(.3,1.5,.5,1)}
.crys.on{opacity:1;transform:none;pointer-events:auto}
.crys-b{position:relative;width:56px;height:56px;padding:0;border-radius:50%;cursor:pointer}
.m-fufu{z-index:2}
.crys-b.pulse{animation:cpulse 1s ease}
@keyframes cpulse{30%{box-shadow:0 0 0 10px rgba(181,223,204,.35),0 10px 26px #244d3b26}}
.crys-m{position:absolute;left:0;top:78px;display:flex;flex-direction:column;min-width:150px;padding:6px;border-radius:18px;border:1px solid var(--edge);
  background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(238,248,243,.82));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 14px 34px #244d3b22;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .3s}
.crys.open .crys-m{opacity:1;transform:none;pointer-events:auto}
.crys-m button{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border:0;border-radius:12px;background:transparent;cursor:pointer;font:400 13px/1 var(--f-voice);letter-spacing:.08em;color:var(--ink);text-align:left}
.crys-m button:hover{background:rgba(255,255,255,.8)}
.crys-m small{font:400 10px/1 var(--f-ui);color:var(--muted);letter-spacing:.02em}
/* sheets over the camp */
.cp-sheet{position:fixed;inset:0;z-index:35;display:grid;place-items:center;padding:20px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));background:rgba(36,61,56,.16);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.cp-sheet.on{opacity:1}
.cs-in{width:min(520px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:18px 22px 22px;border-radius:26px;border:1px solid var(--edge);color:var(--ink);
  background:linear-gradient(140deg,rgba(255,255,255,.94),rgba(240,249,245,.9));box-shadow:0 30px 70px #244d3b30,inset 1px 1px 1px #fff;transform:translateY(10px) scale(.98);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.cp-sheet.on .cs-in{transform:none}
.cs-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}.cs-head>div{flex:1}
.cs-head h3{margin:4px 0 0;font:500 17px/1.35 var(--f-voice);letter-spacing:.05em}
.cs-foot{display:flex;justify-content:flex-end;margin-top:16px}
.cl-wrap{position:relative;width:min(400px,100%);margin:0 auto;aspect-ratio:12/11;border-radius:16px;overflow:hidden;background:#fcf9f4;transition:aspect-ratio .5s}
.cl-wrap>canvas{position:absolute;inset:0;width:100%;height:100%}
.cl-mud{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='12' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 14 14,crosshair;touch-action:none}
.cl-card{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .6s}
.cl-wrap.done{aspect-ratio:2/3;width:min(300px,100%);overflow:visible;background:transparent}
.cl-wrap.done .cl-art{opacity:0;transition:opacity .4s}
.cl-wrap.done .cl-card{opacity:1;pointer-events:auto;animation:cardin .9s cubic-bezier(.2,1.3,.4,1)}
@keyframes cardin{from{transform:rotateY(80deg) scale(.9)}}
.cl-tip{margin:12px 0 0;text-align:center;font:400 12.5px/1.8 var(--f-voice);color:var(--ink-3)}
.cl-tip .v{margin-left:10px;font:italic 400 14px/1 var(--f-latin);color:#4f9e8c}
.cl-kb{display:block;margin:6px auto 0}
.cl-wrap.done+.cl-kb{display:none}
.cl-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.cl-act p{flex:1 1 100%;margin:0;font:400 12px/1.6 var(--f-voice);color:#3f7f73}
.cl-new{color:#b98a3f!important}
.spk{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;margin:-7px;pointer-events:none;z-index:3;background:radial-gradient(circle,#fff 0 20%,transparent 22%),conic-gradient(from 45deg,transparent 0 22%,#fff6d8 24% 26%,transparent 28% 47%,#fff6d8 49% 51%,transparent 53% 72%,#fff6d8 74% 76%,transparent 78%);
  animation:spk 1.4s var(--d) ease-out both;transform:scale(var(--s))}
@keyframes spk{0%{opacity:0;transform:scale(0) rotate(0)}30%{opacity:1}100%{opacity:0;transform:scale(calc(var(--s)*1.6)) rotate(90deg) translateY(-20px)}}
.rv{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rv li{display:grid;grid-template-columns:90px 1fr auto;gap:12px;align-items:center;padding:6px;border-radius:14px;background:rgba(255,255,255,.55);transition:opacity .3s}
.rv li.gone{opacity:.3;pointer-events:none}
.rv canvas{width:90px;aspect-ratio:10/9;border-radius:10px}
.rv b{font:500 14px/1.3 var(--f-voice)}.rv p{margin:4px 0 0;font:400 11.5px/1.6 var(--f-voice);color:var(--ink-3)}
.rv p .v{margin-left:6px;font:italic 400 13px/1 var(--f-latin);color:#4f9e8c}
.rv p b.g{display:inline-grid;place-items:center;width:1.8em;height:1.8em;margin-right:.3em;border-radius:50%;font:500 .85em/1 var(--f-latin);color:#fff}
.rv-b{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.endst{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;margin:8px 0 0}
.endst div{display:flex;flex-direction:column;gap:5px}.endst dt{font:600 8px/1 var(--f-ui);letter-spacing:.2em;color:var(--ink-3)}.endst dd{margin:0;font:italic 400 22px/1 var(--f-latin)}
.ct-say{margin:0;font:400 14px/1.9 var(--f-voice);color:var(--ink-2)}
.pact{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 16px;border-radius:16px;background:linear-gradient(130deg,rgba(255,244,250,.9),rgba(238,240,255,.8));border:1px solid #fff}
.pact>div{flex:1}.pact h4{margin:0;font:500 14px/1.3 var(--f-voice);letter-spacing:.12em}.pact p{margin:4px 0 0;font:400 12px/1.7 var(--f-voice);color:var(--ink-3)}
.ct-n{margin:10px 0 0;font:400 10.5px/1.5 var(--f-ui);color:var(--muted)}
.big-card{width:min(320px,80vw);margin:0 auto}
@media (max-width:719px){
  .camp{left:0;right:0;top:auto;bottom:0;width:auto;height:min(66dvh,620px);border-radius:28px 28px 0 0;transform:translateY(24px);border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .cp-head{padding:16px 18px 10px;flex-wrap:wrap;gap:10px}
  .cp-ttl{flex:1 1 100%}
  .cp-stats{gap:14px}
  .cp-tabs{padding:6px 8px}.cp-tabs button{font-size:10px;padding:7px 0 6px}.cp-tabs svg{width:18px;height:18px}
  .cp-body{padding:14px 18px 22px}
  .site{grid-template-columns:24px 1fr;gap:10px}.site .b1,.site .s-lock{grid-column:2;justify-self:start}
  .offers li{grid-template-columns:64px 1fr;}.offers canvas{width:64px}.of-b{grid-column:1/-1;flex-direction:row;justify-content:flex-end}
  .tasks .b1{position:static;margin-top:10px}
  .dex{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
  .crys-b.lgc{width:34px;height:60px}.crys-m{top:68px}
}

/* ---------- the enhydro crystal as a liquid-glass line drawing: the button is the crystal itself ---------- */
.lgc{width:40px;height:70px;padding:0;border:0;background:none;cursor:pointer;border-radius:0;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.lgc:hover{transform:translateY(-2px) rotate(-3deg)}.lgc:active{transform:scale(.94)}
.lgc .enh-glass{position:absolute;left:4.63%;top:2.67%;width:90.74%;height:94.67%;background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(5px) saturate(185%) brightness(1.1);backdrop-filter:blur(5px) saturate(185%) brightness(1.1)}
.enh-ic{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 9px rgba(36,77,59,.22)) drop-shadow(0 0 6px rgba(255,255,255,.55))}
.enh-bub{transform-box:fill-box;transform-origin:center;animation:enhb 7s ease-in-out infinite}
@keyframes enhb{0%,100%{transform:translateY(0)}38%{transform:translateY(8.6px)}52%{transform:translateY(8.8px)}78%{transform:translateY(1.4px)}}
.crys-b.lgc.pulse{animation:cglow 1.1s ease}
@keyframes cglow{30%{filter:drop-shadow(0 0 14px rgba(181,236,214,.95))}}
.m-fufu.lgc{width:36px;height:63px}
.m-fufu.lgc.ping{animation:cglow 1.4s ease 2}

/* ---------- the mine, v2: a holographic section under pearl liquid glass ---------- */
.isaro-mine{background:#e6e8f0;
  --g-bg:linear-gradient(180deg,rgba(255,255,255,.8) 0%,rgba(246,251,249,.62) 46%,rgba(236,246,243,.7) 100%);
  --g-edge:rgba(255,255,255,.0);
  --g-sh:0 16px 40px rgba(4,12,20,.38),0 2px 8px rgba(4,12,20,.18),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.55),inset 0 12px 22px -16px rgba(255,255,255,.95),inset 0 -16px 26px -20px rgba(90,160,150,.34)}
.isaro-mine .m-site,.isaro-mine .m-stat,.isaro-mine .m-bag,.isaro-mine .m-act,.isaro-mine .m-say,.isaro-mine .m-panel,.isaro-mine .m-leg,.isaro-mine .m-legb{
  border:0;background:var(--g-bg);box-shadow:var(--g-sh);isolation:isolate;
  -webkit-backdrop-filter:blur(18px) saturate(175%) brightness(1.05);backdrop-filter:blur(18px) saturate(175%) brightness(1.05)}
.isaro-mine .m-site,.isaro-mine .m-stat,.isaro-mine .m-bag,.isaro-mine .m-legb{position:relative}
.isaro-mine .m-site::before,.isaro-mine .m-stat::before,.isaro-mine .m-bag::before,.isaro-mine .m-act::before,.isaro-mine .m-say::before,.isaro-mine .m-panel::before,.isaro-mine .m-leg::before,.isaro-mine .m-legb::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;z-index:-1;pointer-events:none;
  background:linear-gradient(155deg,#fff 0%,rgba(255,255,255,.35) 22%,rgba(255,255,255,0) 46%,rgba(201,207,246,.6) 74%,rgba(244,211,215,.65) 88%,#fff 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.isaro-mine .m-site{border-radius:20px;padding:10px 16px 10px}
.isaro-mine .m-over{color:#5b7470;letter-spacing:.22em}
.isaro-mine .m-depth{color:#3f8f7c}
.isaro-mine .m-stat{border-radius:20px}
.isaro-mine .m-bag{border-radius:20px}
.isaro-mine .m-act{border-radius:26px;padding:7px}
.isaro-mine .m-act button{border-radius:18px;color:#3e5852}
.isaro-mine .m-act button:hover{background:rgba(255,255,255,.55)}
.isaro-mine .m-act button.on{background:linear-gradient(160deg,rgba(225,234,255,.95),rgba(190,206,246,.8));color:#2e4a7c;box-shadow:inset 0 1px 0 #fff}
.isaro-mine .m-act button.go{background:linear-gradient(160deg,rgba(214,240,230,.95),rgba(160,214,196,.75));box-shadow:inset 0 1px 0 #fff}
.isaro-mine .m-say{border-radius:18px 18px 18px 6px}
.isaro-mine .m-panel{border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(244,250,248,.84))}
.isaro-mine .m-log{border-radius:14px;background:rgba(14,26,38,.5);color:#eef6f4;-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  box-shadow:0 8px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08)}
.isaro-mine .m-log.bad{color:#ffd3dd}.isaro-mine .m-log.warn{color:#ffeac0}.isaro-mine .m-log.good{color:#cdf3e6}
/* the section's legend */
.m-leg{position:absolute;right:max(14px,env(safe-area-inset-right,0px));top:calc(96px + env(safe-area-inset-top,0px));width:172px;max-height:calc(100% - 210px);overflow:auto;padding:12px 14px 12px;border-radius:20px;color:var(--ink);
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.m-leg h4{margin:4px 0 8px;font:500 13px/1.3 var(--f-voice);letter-spacing:.08em}
.m-leg ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.m-leg ul.fx{margin-top:9px;padding-top:9px;border-top:1px solid rgba(60,90,84,.12)}
.m-leg li{display:flex;align-items:center;gap:8px;font:400 11.5px/1.3 var(--f-voice);color:var(--ink-2);letter-spacing:.03em}
.m-leg .sw{flex:none;width:18px;height:11px;border-radius:3px;box-shadow:inset 0 0 0 .5px rgba(40,60,56,.25)}
.m-leg .fx.vein{background:linear-gradient(180deg,transparent 30%,#f3efe6 30% 70%,transparent 70%),radial-gradient(circle at 30% 50%,#3d3f44 1.4px,transparent 1.6px),radial-gradient(circle at 70% 50%,#3d3f44 1.2px,transparent 1.4px);background-color:rgba(160,150,140,.35)}
.m-leg .fx.vug{background:radial-gradient(ellipse at 50% 55%,#2c2840 30%,#e8ecf6 32% 52%,rgba(190,180,200,.6) 54%)}
.m-leg .fx.water{background:repeating-linear-gradient(90deg,#8fd0e2 0 4px,transparent 4px 7px) center/100% 2px no-repeat}
.m-leg .fx.fault{background:repeating-linear-gradient(90deg,#5d5466 0 5px,transparent 5px 8px) center/100% 2px no-repeat;transform:rotate(-24deg)}
.m-leg .fx.body{background:radial-gradient(circle,#4a4c52 1px,transparent 1.3px) 0 0/5px 5px,#d9d3c6}
.m-leg .fx.dyke{background:linear-gradient(160deg,transparent 25%,#efe2d8 25% 75%,transparent 75%),#cdd4cd}
.m-leg .fx.bed{background:repeating-linear-gradient(180deg,#b97f78 0 2px,#c8c4c9 2px 4px)}
.m-leg .fx.cave{background:radial-gradient(ellipse at 50% 50%,#3c3a48 45%,transparent 48%),#e6e6ea}
.m-legb{display:none;align-items:center;justify-content:center;padding:0 14px;border-radius:20px;cursor:pointer;font:400 11px/1 var(--f-ui);letter-spacing:.14em;color:var(--ink-3)}
.isaro-mine.legon .m-leg{opacity:1;transform:none;pointer-events:auto}
@media (min-width:1040px){.m-leg{opacity:1;transform:none;pointer-events:auto}}
@media (max-width:1039px){.m-legb{display:flex}.isaro-mine .m-legb{min-height:44px}}
@media (max-width:719px){.m-leg{top:calc(150px + env(safe-area-inset-top,0px));width:min(200px,60vw)}.isaro-mine .m-legb{order:2}}
.isaro-mine.paneled .m-leg{opacity:0;pointer-events:none}

/* ---------- the mine, v3 layout: one 8-pt grid, capsule controls of one height, concentric radii ----------
   desktop: a single 52-pt row (site · vitals · bag + legend), toolbar 64 at the bottom, everything on a 16-pt margin.
   phone: a 44-pt row (site · bag · legend) over a 36-pt vitals strip; the crystal and the toolbar share one baseline. */
.isaro-mine .m-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;
  padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.isaro-mine .m-site{justify-self:start;box-sizing:border-box;height:52px;max-width:100%;min-width:0;border-radius:26px;padding:0 8px 0 20px;display:flex;align-items:center;gap:14px}
.m-site-t{min-width:0;display:grid;gap:3px}
.isaro-mine .m-over{font:600 8.5px/1 var(--f-ui);letter-spacing:.2em;color:#62807a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isaro-mine .m-site h2{margin:0;font:500 14px/1.15 var(--f-voice);letter-spacing:.06em;color:var(--ink)}
.isaro-mine .m-depth{flex:none;margin:0;box-sizing:border-box;height:36px;min-width:64px;padding:0 14px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 .5px rgba(60,100,92,.16),inset 0 1px 0 #fff;font:italic 400 16px/1 var(--f-latin);color:#3f8f7c;font-variant-numeric:tabular-nums;white-space:nowrap}
.isaro-mine .m-stat{box-sizing:border-box;height:52px;max-width:none;width:auto;margin:0;border-radius:26px;padding:0 22px 0 20px;display:flex;align-items:center;gap:16px}
.isaro-mine .m-hp{display:flex;gap:4px;grid-row:auto}
.isaro-mine .m-hp i{width:16px;height:16px}
.m-bars{display:grid;gap:6px;width:216px;padding-left:16px;box-shadow:inset 1px 0 0 rgba(60,100,92,.14)}
.isaro-mine .m-bar{grid-template-columns:26px 1fr 22px;gap:8px;font:400 10px/1 var(--f-ui);letter-spacing:.08em;color:#5d7570}
.isaro-mine .m-bar i{height:4px;border-radius:2px;background:rgba(60,90,84,.1)}
.isaro-mine .m-bar b{border-radius:2px}
.isaro-mine .m-bar em{font:500 10.5px/1 var(--f-ui);color:#3c5751}
.m-tr{justify-self:end;display:flex;align-items:center;gap:8px}
.isaro-mine .m-bag{box-sizing:border-box;height:52px;border-radius:26px;padding:0 18px 0 15px;flex-direction:row;align-items:center;gap:10px;color:#4b6761}
.isaro-mine .m-bag .ic{width:22px;height:22px;flex:none}
.m-bag-n{display:grid;gap:3px;justify-items:start}
.isaro-mine .m-bag b{font:italic 400 16px/1 var(--f-latin);color:var(--ink)}
.isaro-mine .m-bag small{font:400 9px/1 var(--f-ui);letter-spacing:.04em;color:#7a8f8a}
.isaro-mine .m-legb{display:flex;box-sizing:border-box;width:52px;height:52px;min-height:0;padding:0;border-radius:50%;color:#4b6761;transition:color .25s,transform .35s cubic-bezier(.2,1.4,.4,1)}
.isaro-mine .m-legb .ic{width:22px;height:22px}
.isaro-mine .m-legb.on{color:#2f6f60;background:linear-gradient(180deg,rgba(226,246,238,.92),rgba(186,226,212,.72))}
.isaro-mine .m-bag,.isaro-mine .m-legb,.isaro-mine .m-act button{transition:transform .35s cubic-bezier(.2,1.4,.4,1),background .25s,color .25s}
.isaro-mine .m-bag:active,.isaro-mine .m-legb:active,.isaro-mine .m-act button:active{transform:scale(.93);transition-duration:.08s}
.isaro-mine .m-bag.pulse{animation:bagp .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes bagp{35%{transform:scale(1.08)}}
.isaro-mine .m-bag.pulse .ic{animation:bagic .7s ease}
@keyframes bagic{30%{color:#c39234;filter:drop-shadow(0 0 6px rgba(255,214,140,.95))}}
.isaro-mine .m-bag.full b{color:#c26a3f}
/* the legend hangs under its button; open by default on wide screens (set in script), never forced */
.isaro-mine .m-leg{top:calc(80px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));width:188px;border-radius:22px;padding:14px 16px}
.isaro-mine:not(.legon) .m-leg{opacity:0;transform:translateY(-4px);pointer-events:none}
.isaro-mine .m-log{top:calc(80px + env(safe-area-inset-top,0px))}
.isaro-mine.paneled .m-say{top:calc(80px + env(safe-area-inset-top,0px))}
/* bottom: the toolbar is a 64-pt capsule; the crystal sits on the same baseline; words and panels rise 12 pt above it */
.isaro-mine .m-act{bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:6px;gap:4px;border-radius:32px}
.isaro-mine .m-act button{width:56px;height:52px;border-radius:26px;gap:4px;font:400 10.5px/1 var(--f-ui);letter-spacing:.08em}
.isaro-mine .m-act svg{width:21px;height:21px}
.isaro-mine .m-act b{top:3px;right:5px}
.isaro-mine .m-fufu.lgc{left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px) + .5px);width:36px;height:63px}
.isaro-mine .m-say{left:max(16px,env(safe-area-inset-left,0px));bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.isaro-mine .m-panel{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
@media (max-width:719px){
  .isaro-mine .m-top{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"site tr" "stat stat";gap:8px;padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .isaro-mine .m-site{grid-area:site;justify-self:stretch;height:44px;border-radius:22px;padding:0 6px 0 16px;gap:10px}
  .isaro-mine .m-over{font-size:8px;letter-spacing:.16em}
  .isaro-mine .m-site h2{font-size:13px}
  .isaro-mine .m-depth{height:32px;min-width:54px;border-radius:16px;padding:0 11px;font-size:14px}
  .m-tr{grid-area:tr}
  .isaro-mine .m-bag{height:44px;border-radius:22px;padding:0 13px 0 11px;gap:7px}
  .isaro-mine .m-bag .ic{width:19px;height:19px}
  .isaro-mine .m-bag b{font-size:14.5px}
  .isaro-mine .m-bag small{font-size:8.5px}
  .isaro-mine .m-legb{width:44px;height:44px}
  .isaro-mine .m-legb .ic{width:20px;height:20px}
  .isaro-mine .m-stat{grid-area:stat;height:36px;border-radius:18px;padding:0 14px;gap:12px;order:0;flex:none}
  .isaro-mine .m-hp{gap:3px}.isaro-mine .m-hp i{width:14px;height:14px}
  .m-bars{display:flex;gap:14px;flex:1;min-width:0;width:auto;padding-left:12px}
  .isaro-mine .m-bar{flex:1;min-width:0;grid-template-columns:auto minmax(0,1fr) auto;gap:6px}
  .isaro-mine .m-bar em:empty{display:none}
  .isaro-mine .m-leg{top:calc(112px + env(safe-area-inset-top,0px));width:min(208px,62vw)}
  .isaro-mine .m-log{top:calc(112px + env(safe-area-inset-top,0px))}
  .isaro-mine.paneled .m-say{top:calc(112px + env(safe-area-inset-top,0px))}
  .isaro-mine .m-act{left:calc(max(16px,env(safe-area-inset-left,0px)) + 44px);right:max(16px,env(safe-area-inset-right,0px));transform:none;padding:4px;gap:0;border-radius:28px;justify-content:space-between}
  .isaro-mine .m-act button{flex:1;min-width:0;width:auto;height:48px;border-radius:24px;font-size:10px;letter-spacing:.04em}
  .isaro-mine .m-act svg{width:20px;height:20px}
  .isaro-mine .m-fufu.lgc{width:32px;height:56px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .isaro-mine .m-say{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .isaro-mine .m-panel{bottom:calc(84px + env(safe-area-inset-bottom,0px));max-height:calc(100% - 210px)}
}
/* titles never cut: no ellipsis, the size steps down in script until the name fits */
.isaro-mine .m-site h2{white-space:nowrap;overflow:hidden;text-overflow:clip}
.m-depth2{display:none}
/* vitals: hairline pearl tracks, fills with a lit leading edge — jade for strength, champagne for the lamp, rose when low */
.isaro-mine .m-bar i{position:relative;height:4px;border-radius:4px;overflow:visible;background:linear-gradient(180deg,rgba(70,92,110,.12),rgba(70,92,110,.06));box-shadow:inset 0 .5px 1px rgba(40,60,80,.12),0 1px 0 rgba(255,255,255,.7)}
.isaro-mine .m-bar b{position:relative;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.isaro-mine .m-bar b::after{content:"";position:absolute;right:0;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 6px 2px var(--glow,rgba(255,255,255,.6))}
.isaro-mine .m-bar.st b{background:linear-gradient(90deg,#d4ece3 0%,#9fd1c1 45%,#6fae9c 100%);--glow:rgba(140,206,186,.75)}
.isaro-mine .m-bar.oil b{background:linear-gradient(90deg,#f4ead6 0%,#e2c99a 45%,#c9a165 100%);--glow:rgba(232,200,140,.8)}
.isaro-mine .m-bar.air b{background:linear-gradient(90deg,#e6e9fa 0%,#b9c3ee 45%,#8d9bd8 100%);--glow:rgba(170,182,238,.8)}
.isaro-mine .m-bar.low b{background:linear-gradient(90deg,#f7e1e6 0%,#e7a9b8 45%,#cf7890 100%);--glow:rgba(232,150,172,.85)}
.isaro-mine .m-bar.low{color:#b0566d}
.isaro-mine .m-bar span{color:#5f7772}
.isaro-mine .m-hp i.on{color:#e3a1b0;filter:drop-shadow(0 1px 1.5px rgba(190,110,130,.3))}
.isaro-mine .m-hp i{color:rgba(90,100,120,.16)}
@media (max-width:719px){
  .isaro-mine .m-site{gap:0;padding:0 16px}
  .isaro-mine .m-site .m-depth{display:none}
  .isaro-mine .m-site h2{font-size:13.5px}
  .isaro-mine .m-bar em{display:none}
  .m-bars{gap:16px}
  .m-depth2{display:block;flex:none;margin:0;padding-left:12px;box-shadow:inset 1px 0 0 rgba(60,100,92,.14);font:italic 400 14px/1 var(--f-latin);color:#3f8f7c;font-variant-numeric:tabular-nums;white-space:nowrap}
}
/* tool levels as pips, the crystal glowing until the first save */
.tools h3 .pips{display:inline-flex;gap:4px;margin-left:10px;vertical-align:middle}
.tools h3 .pips i{width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(63,127,115,.45)}
.tools h3 .pips i.on{background:#4f9e8c;box-shadow:none}
.crys-b.lgc.wait{animation:cglow 1.8s ease-in-out infinite}

.isaro-mine *,.cp-sheet *,.isaro-camp *{scrollbar-width:none}.isaro-mine *::-webkit-scrollbar,.cp-sheet *::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- the mine, v4: glass by rank, Fufu's face, conversations ----------
   Rank 1, always there (site, vitals, bag, legend button): clear glass, you see the section through it.
   Rank 2, what you press (toolbar, Fufu's face): thicker frosted glass with a mint core.
   Rank 3, what opens (vug, bag, summary, legend): dense pearl glass with a prismatic rim and a lit top edge. */
.isaro-mine .m-site,.isaro-mine .m-stat,.isaro-mine .m-bag,.isaro-mine .m-legb{
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.34) 55%,rgba(240,248,246,.44) 100%);
  box-shadow:0 12px 30px -14px rgba(20,30,50,.35),0 1px 3px rgba(20,30,50,.08),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -10px 18px -16px rgba(120,170,160,.4);
  -webkit-backdrop-filter:blur(16px) saturate(180%) brightness(1.06);backdrop-filter:blur(16px) saturate(180%) brightness(1.06)}
.isaro-mine .m-act{
  background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(244,251,248,.72) 50%,rgba(226,243,236,.78) 100%);
  box-shadow:0 18px 40px -16px rgba(20,40,50,.45),0 3px 10px rgba(20,40,50,.12),inset 0 1px 0 #fff,inset 0 -16px 24px -18px rgba(95,174,149,.45);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%)}
.isaro-mine .m-panel,.isaro-mine .m-leg{
  background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(250,250,253,.86) 40%,rgba(243,247,250,.88) 100%);
  box-shadow:0 30px 60px -22px rgba(30,30,70,.45),0 6px 18px rgba(30,30,70,.1),inset 0 1px 0 #fff,inset 0 14px 22px -18px rgba(255,255,255,1),inset 0 -18px 30px -24px rgba(180,170,230,.4);
  -webkit-backdrop-filter:blur(28px) saturate(160%);backdrop-filter:blur(28px) saturate(160%)}
.isaro-mine .m-panel::before,.isaro-mine .m-leg::before{
  background:linear-gradient(140deg,#fff 0%,rgba(255,255,255,.4) 18%,rgba(214,240,230,.9) 38%,rgba(201,207,246,.9) 62%,rgba(244,211,215,.95) 82%,#fff 100%)}
.isaro-mine .m-panel{border-radius:28px}

/* Fufu's face: a round window of frosted glass with her looking out */
.isaro-mine .m-fufu.av{left:max(16px,env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:56px;height:56px;padding:0;border:0;border-radius:50%;overflow:hidden;isolation:isolate;cursor:pointer;
  background:radial-gradient(circle at 50% 30%,#fff 0%,#eef8f4 55%,#dcefe9 100%);
  box-shadow:0 12px 26px -10px rgba(20,40,50,.45),0 2px 6px rgba(20,40,50,.12),inset 0 0 0 1.5px rgba(255,255,255,.9),inset 0 -8px 14px -8px rgba(95,174,149,.4);transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.isaro-mine .m-fufu.av img{position:absolute;inset:-4% -4% auto;width:108%;height:auto;display:block;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 50% 46%,#000 58%,transparent 74%);mask-image:radial-gradient(circle at 50% 46%,#000 58%,transparent 74%)}
.isaro-mine .m-fufu.av::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 32%),radial-gradient(circle at 50% 50%,transparent 60%,rgba(220,236,232,.5) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.isaro-mine .m-fufu.av:hover{transform:scale(1.05)}.isaro-mine .m-fufu.av:active{transform:scale(.95)}
.isaro-mine .m-fufu.av.ping{animation:avb .9s cubic-bezier(.2,1.4,.4,1)}
@keyframes avb{30%{transform:translateY(-4px) scale(1.06)}60%{transform:translateY(0) scale(.98)}}
.isaro-mine .m-say{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
/* while she talks, the mine waits: the controls step back */
.isaro-mine.talking .m-act,.isaro-mine.talking .m-fufu,.isaro-mine.talking .m-say,.isaro-mine.talking .m-log,.isaro-mine.talking .m-leg{opacity:0;pointer-events:none;transition:opacity .3s}

/* the vug: cards share one grid, the panel is as wide as its cards, every button keeps one line */
.isaro-mine .m-panel.vug{min-width:0;width:auto;max-width:calc(100% - 32px);padding:18px 18px 16px}
.isaro-mine .m-panel.vug .mp-head{padding:0 2px 0 4px}
.isaro-mine .vg-list{display:grid;grid-auto-flow:column;grid-auto-columns:176px;gap:12px;margin-top:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px}
.isaro-mine .vg-c{flex:none;width:176px;gap:8px;scroll-snap-align:start}
.isaro-mine .vg-c canvas{border-radius:18px;box-shadow:0 8px 18px -12px rgba(40,40,80,.4),inset 0 0 0 1px rgba(255,255,255,.6)}
.isaro-mine .vg-c figcaption{padding:2px 4px 0}
.isaro-mine .vg-c figcaption b{font:500 14px/1.3 var(--f-voice)}
.isaro-mine .vg-c figcaption span{font:400 11px/1.4 var(--f-ui);color:#7a8f8a}
.isaro-mine .vg-b{grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.isaro-mine .vb{height:52px;padding:0 4px;gap:4px;border:0;border-radius:16px;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(246,248,250,.8));box-shadow:0 4px 10px -6px rgba(40,50,70,.35),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(200,210,220,.35)}
.isaro-mine .vb.slow{background:linear-gradient(180deg,rgba(222,244,235,.98),rgba(178,223,207,.85));box-shadow:0 4px 12px -6px rgba(47,111,96,.45),inset 0 1px 0 #fff}
.isaro-mine .vb b{font:500 13.5px/1 var(--f-voice);letter-spacing:.14em;color:var(--ink)}
.isaro-mine .vb small{font:400 10px/1 var(--f-ui);letter-spacing:0;color:#6c827d;white-space:nowrap}
@media (max-width:719px){
  .isaro-mine .m-fufu.av{width:52px;height:52px;bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .isaro-mine .m-act{left:calc(max(16px,env(safe-area-inset-left,0px)) + 62px)}
  .isaro-mine .m-say{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .isaro-mine .vg-list{grid-auto-columns:150px;gap:10px}
  .isaro-mine .vg-c{width:150px}
  .isaro-mine .m-panel.vug{left:50%;max-width:calc(100% - 32px)}
}
.isaro-mine .vg-warn{min-height:0;margin:0}.isaro-mine .vg-warn.on{margin-top:10px}

/* ---------- 木盒: the hidden line, in the same pearl glass as the camp ---------- */
.bx-moon{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:12px 16px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.44));box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(70,95,95,.14),0 10px 22px -16px rgba(50,70,70,.35)}
.bx-moon-i{flex:none;filter:drop-shadow(0 0 8px rgba(255,248,226,.9))}
.bx-moon h4{margin:3px 0 2px;display:flex;align-items:baseline;gap:8px;font:500 15px/1.3 var(--f-voice);letter-spacing:.08em}
.bx-moon h4 em{font:400 10.5px/1 var(--f-ui);font-style:normal;letter-spacing:.06em;color:#9a7a3e;padding:3px 7px;border-radius:8px;background:rgba(234,211,154,.32)}
.bx-moon p:last-child{margin:0;font:400 11px/1.5 var(--f-ui);color:var(--ink-3);letter-spacing:.03em}
.bx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bx-it{display:flex;flex-direction:column;gap:4px;padding:8px 8px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.5);cursor:pointer;text-align:left;color:var(--ink);transition:background .2s,transform .2s}
.bx-it:hover{background:rgba(255,255,255,.8);transform:translateY(-2px)}
.bx-it canvas,.bx-it img{width:100%;aspect-ratio:10/9;object-fit:contain;border-radius:10px;display:block;margin-bottom:3px;background:#fcf9f4}
.bx-it b{font:500 13px/1.3 var(--f-voice);letter-spacing:.04em;padding:0 2px}
.bx-tags{display:flex;flex-wrap:wrap;gap:4px;padding:0 2px}
.bx-tags{flex-direction:row!important}
.bx-tags i{flex:none;font:400 10px/1 var(--f-ui);font-style:normal;letter-spacing:.03em;color:#4f7f72;padding:3px 6px;border-radius:7px;background:rgba(95,174,149,.12)}
.bx-tags i.hurt{color:#a2516a;background:rgba(226,140,166,.16)}
.bx-top{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:12px}
.bx-top canvas,.bx-top img{width:150px;aspect-ratio:10/9;object-fit:contain;border-radius:12px;background:#fcf9f4;box-shadow:0 0 0 .5px rgba(176,146,98,.3)}
.bx-st{display:grid;gap:8px;min-width:0}
.bx-buy{margin:0;font:400 11.5px/1.5 var(--f-ui);color:var(--ink-3)}.bx-buy b{font:italic 400 17px/1 var(--f-latin);color:#9a7a3e}
.bx-ms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bx-m{display:grid;gap:4px;justify-items:center;padding:12px 6px 11px;border:0;border-radius:16px;cursor:pointer;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.48));box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(70,95,95,.15),0 8px 18px -12px rgba(50,70,70,.35);transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.bx-m:hover{transform:translateY(-2px)}.bx-m:active{transform:scale(.97)}
.bx-m b{font:500 13px/1.2 var(--f-voice);letter-spacing:.05em}.bx-m small{font:400 10px/1.2 var(--f-ui);color:var(--muted);letter-spacing:.03em}
.bx-m:disabled{cursor:default;opacity:.55;transform:none}
.bx-m[data-m="moon"]:not(:disabled){background:linear-gradient(180deg,rgba(255,252,240,.95),rgba(246,236,206,.6));box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(176,146,98,.35),0 0 18px -4px rgba(234,211,154,.7)}
.bx-warn{margin-top:12px;padding:12px 14px;border-radius:16px;background:rgba(255,240,244,.75);box-shadow:inset 0 0 0 .5px rgba(214,120,150,.3)}
.bx-warn p{margin:0;font:400 13px/1.75 var(--f-voice);color:#7a3f52}
.bx-warn small{display:block;margin-top:6px;font:italic 400 11px/1.4 var(--f-latin);color:var(--muted)}
.bx-wb{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.bx-wb .tb{padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.75);box-shadow:0 0 0 .5px rgba(70,95,95,.16);color:var(--ink-2);font-size:12px}
.bx-wb .tb.danger{color:#a2516a}
.bx-lore{margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 .5px rgba(176,146,98,.25);display:grid;gap:8px}
.bx-lore p{margin:0;font:400 12.5px/1.75 var(--f-voice);color:var(--ink-2)}
.bx-lore em{display:block;font:600 8.5px/1 var(--f-ui);font-style:normal;letter-spacing:.18em;color:var(--ink-3);margin-bottom:4px}
.bx-lore p:first-child em{color:#9a7a3e}
.bx-lore small{font:italic 400 11px/1.4 var(--f-latin);color:var(--muted)}
@media (max-width:719px){.bx-top{grid-template-columns:120px minmax(0,1fr)}.bx-top canvas,.bx-top img{width:120px}.bx-ms{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* a button she is teaching you about glows a few times after she has spoken */
.m-act button.cue{animation:cue 1.2s ease-in-out 5}
@keyframes cue{50%{background:rgba(234,211,154,.5);box-shadow:0 0 0 1.5px rgba(214,180,110,.55),0 0 16px rgba(234,211,154,.6)}}
/* her live face in the round window: the Live2D canvas moved inside the button */
.isaro-mine .m-fufu.av canvas.in-av{position:absolute;inset:0;width:100%!important;height:100%!important;visibility:visible!important;pointer-events:none;border-radius:50%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(circle at 50% 50%,#000 70%,transparent 100%)}
@media (prefers-reduced-motion:reduce){.m-act button.cue{animation:none;background:rgba(234,211,154,.4)}}

/* the borehole under the deepest level: its core in trays */
.isaro-mine .m-panel.core{min-width:0;width:min(560px,calc(100% - 32px));padding:18px 20px 16px}
.cr-box{display:block;width:100%;height:auto;margin:14px 0 2px;border-radius:14px}
.cr-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 14px}
.cr-list li{display:flex;align-items:center;gap:8px;min-width:0;font:400 11.5px/1.4 var(--f-ui);color:#6f8582;font-variant-numeric:tabular-nums}
.cr-list i{flex:none;width:10px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(40,34,46,.12)}
.cr-list b{font:500 12.5px/1.4 var(--f-voice);color:#334941;letter-spacing:.04em}
.cr-note{margin:10px 0 0;font:400 12.5px/1.7 var(--f-voice);color:#334941;text-wrap:pretty}
.isaro-mine .m-over .u{text-transform:none;letter-spacing:.06em}
.cr-src{margin:10px 0 0;font:400 9.5px/1.5 var(--f-ui);letter-spacing:.02em;color:#8aa09c}

/* 收工: the result card, in the middle, over a soft veil; rows come in, new minerals get a card, a rare find gets its moment */
.isaro-mine.summing::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,rgba(250,248,252,.5),rgba(224,228,242,.8));
  -webkit-backdrop-filter:blur(7px) saturate(1.08);backdrop-filter:blur(7px) saturate(1.08);animation:smVeil .5s ease both}
@keyframes smVeil{from{opacity:0}}
.isaro-mine .m-panel.sum{box-sizing:border-box;top:50%;bottom:auto;left:50%;z-index:6;transform:translate(-50%,-50%);width:min(468px,calc(100% - 32px));min-width:0;max-width:none;
  max-height:calc(100% - 40px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:hidden;display:flex;flex-direction:column;padding:24px 22px 18px;
  animation:smIn .6s cubic-bezier(.16,1,.3,1) both}
@keyframes smIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}}
.sm-glow{position:absolute;left:50%;top:-40px;width:130%;height:260px;transform:translateX(-50%);pointer-events:none;opacity:0;z-index:0;
  background:radial-gradient(46% 55% at 50% 40%,rgba(255,224,156,.6),rgba(255,224,156,0))}
.m-panel.sum.burst .sm-glow{animation:smGlow 1.8s ease-out forwards}
@keyframes smGlow{0%{opacity:0}25%{opacity:1}100%{opacity:.4}}
.sm-head{position:relative;z-index:1;text-align:center;padding:0 6px}
.sm-head .m-over{text-align:center}
.sm-head h3{margin:8px 0 0;font:500 20px/1.3 var(--f-voice);letter-spacing:.08em;color:var(--ink);text-wrap:balance}
.sm-big{display:inline-flex;align-items:center;gap:7px;margin:12px auto 0;padding:7px 16px;border-radius:999px;font:500 12px/1 var(--f-voice);letter-spacing:.18em;color:#7a5a24;
  background:linear-gradient(120deg,#fff7e2,#f4dfae 55%,#fff3d4);box-shadow:inset 0 1px 0 #fff,0 8px 18px -12px rgba(160,118,40,.7);opacity:0;transform:scale(.7)}
.sm-big.in{opacity:1;transform:none;transition:opacity .4s,transform .7s cubic-bezier(.34,1.56,.64,1)}
.sm-big i{font-style:normal;color:#c9a24f}
.sm-body{position:relative;z-index:1;flex:1;min-height:0;overflow:auto;margin:16px -8px 0;padding:0 8px;scrollbar-width:none;overscroll-behavior:contain}
.sm-body::-webkit-scrollbar{display:none}
.sm-list{list-style:none;margin:0;padding:0}
.sm-row{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid rgba(118,152,150,.14);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1)}
.sm-row:last-child{border-bottom:0}
.sm-row.in{opacity:1;transform:none}
.sm-row .nm{min-width:0;font:400 14px/1.35 var(--f-voice);letter-spacing:.04em;color:var(--ink)}
.sm-row.big .nm{color:#6d5220}
.sm-row small{margin-left:auto;padding-left:8px;flex:none;font:400 11px/1 var(--f-ui);color:#94a6a2;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.sm-row .tag{flex:none;font:500 9.5px/1 var(--f-ui);letter-spacing:.14em;padding:4px 7px 4px 8px;border-radius:999px}
.sm-row .tag.new{color:#2f6f60;background:rgba(181,223,204,.55)}
.sm-row .tag.gold{color:#86621f;background:linear-gradient(120deg,#fff4da,#f1dba4)}
.sm-new{margin-top:18px}
.sm-cap{margin:0 0 12px;text-align:center;font:600 8.5px/1 var(--f-ui);letter-spacing:.26em;color:#62807a}
.sm-cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sm-card{position:relative;margin:0;width:148px;padding:8px 8px 11px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#fff,#f2f6f7);
  box-shadow:0 12px 26px -18px rgba(40,40,80,.5),inset 0 0 0 1px rgba(255,255,255,.95);opacity:0;transform:perspective(700px) rotateY(-75deg) scale(.92)}
.sm-card.in{opacity:1;transform:none;transition:opacity .45s,transform .9s cubic-bezier(.16,1,.3,1)}
.sm-card.in::after{content:"";position:absolute;inset:-30% -60%;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%);transform:translateX(-55%);animation:smSweep 1.2s .3s ease-out forwards}
@keyframes smSweep{to{transform:translateX(55%)}}
.sm-card canvas{display:block;width:100%;aspect-ratio:6/5;border-radius:12px}
.sm-card figcaption{display:flex;flex-direction:column;gap:5px;padding:9px 2px 0;text-align:center}
.sm-card b{font:500 14px/1.2 var(--f-voice);letter-spacing:.1em;color:var(--ink)}
.sm-card small{font:400 10px/1.3 var(--f-ui);color:#94a6a2;letter-spacing:.02em}
.m-panel.sum .sum-n{text-align:center;color:#7d918d}
.sm-foot{position:relative;z-index:1;display:flex;justify-content:center;padding-top:18px}
.sm-foot .b1{min-width:168px;height:42px;font-size:13px;letter-spacing:.2em}
.m-panel.sum.done .sm-foot .b1{animation:smReady 2.4s ease-in-out infinite}
@keyframes smReady{50%{box-shadow:0 0 0 6px rgba(181,223,204,.35),var(--g-sh,0 6px 16px -10px rgba(40,60,60,.4))}}
@media (max-width:560px){.isaro-mine .m-panel.sum{padding:20px 16px 16px}.sm-card{width:calc(50% - 6px);max-width:150px}.sm-head h3{font-size:18px}}
@media (prefers-reduced-motion:reduce){.sm-row,.sm-card,.sm-big{transition:none!important;transform:none!important}.sm-card.in::after,.m-panel.sum.done .sm-foot .b1{animation:none}}

/* the vug buttons: the action reads first, the cost is a quiet second line */
.isaro-mine .vg-c figcaption b{color:var(--ink)}
.isaro-mine .vg-c figcaption span{color:#97a8a4;letter-spacing:.06em}
.isaro-mine .vb b{color:#2a4640}
.isaro-mine .vb small{font-size:9.5px;letter-spacing:.06em;color:#9fb0ac}
.isaro-mine .vb.slow b{color:#24584b}
.isaro-mine .vb.slow small{color:rgba(36,88,75,.55)}
/* props are dragged: no browser panning on the section or off the 支护 button */
.isaro-mine .m-cv,.isaro-mine .m-act [data-a="prop"]{touch-action:none}
.sm-card{box-sizing:border-box}
.sm-foot .b1:focus{outline:none}.sm-foot .b1:focus-visible{outline:2px solid rgba(47,111,96,.45);outline-offset:3px}

/* the vug buttons as two quiet rows: the action on the left, its cost on the right, nothing squeezed */
.isaro-mine .vg-b{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.isaro-mine .vb{flex-direction:row;align-items:center;justify-content:space-between;height:40px;min-width:0;padding:0 12px 0 14px;gap:8px;border-radius:14px;
  background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(196,206,216,.5),0 2px 6px -4px rgba(40,50,70,.22)}
.isaro-mine .vb:hover{background:#fff}
.isaro-mine .vb b{font:500 13.5px/1 var(--f-voice);letter-spacing:.16em;color:#2a4640}
.isaro-mine .vb small{font:400 10px/1 var(--f-ui);letter-spacing:.02em;color:#a3b3af;white-space:nowrap;font-variant-numeric:tabular-nums}
.isaro-mine .vb.slow{background:linear-gradient(180deg,rgba(228,246,239,.98),rgba(194,230,216,.9));box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 4px 10px -7px rgba(47,111,96,.45)}
.isaro-mine .vb.slow:hover{background:linear-gradient(180deg,#eefaf5,rgba(202,236,222,.95))}
.isaro-mine .vb.slow b{color:#24584b}
.isaro-mine .vb.slow small{color:rgba(36,88,75,.55)}
@media (max-width:719px){.isaro-mine .vb{padding:0 10px 0 12px}.isaro-mine .vb b{letter-spacing:.1em}}

/* 暂未确认: the small ? after a name you have only guessed */
.uq{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;margin-left:5px;vertical-align:2px;border-radius:50%;cursor:help;
  font:600 9.5px/1 var(--f-ui);font-style:normal;letter-spacing:0;color:#7d918d;background:rgba(118,152,150,.13);box-shadow:inset 0 0 0 1px rgba(118,152,150,.28);-webkit-user-select:none;user-select:none}
.uq:focus{outline:none}.uq:focus-visible{box-shadow:inset 0 0 0 1px rgba(118,152,150,.28),0 0 0 2px rgba(47,111,96,.35)}
.uq-tip{position:fixed;left:0;top:0;z-index:90;box-sizing:border-box;max-width:min(240px,calc(100vw - 20px));padding:8px 11px;border-radius:11px;white-space:normal;
  font:400 11.5px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC",sans-serif;letter-spacing:.04em;color:#334941;background:rgba(255,255,255,.97);
  box-shadow:0 10px 24px -12px rgba(30,40,60,.5),inset 0 0 0 1px rgba(214,224,230,.9);opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity .16s,transform .2s}
.uq-tip.up{transform:translateY(3px)}
.uq-tip.on{opacity:1;transform:none}
.uq-tip::before{content:"";position:absolute;left:var(--ax,50%);top:-4px;width:8px;height:8px;margin-left:-4px;transform:rotate(45deg);background:inherit;box-shadow:-1px -1px 0 0 rgba(214,224,230,.9)}
.uq-tip.up::before{top:auto;bottom:-4px;box-shadow:1px 1px 0 0 rgba(214,224,230,.9)}
.uq:hover,.uq.on{color:#2f6f60;background:rgba(181,223,204,.5)}
.rv-was{display:block;margin-top:3px;font:400 10.5px/1.3 var(--f-ui);color:#a07a3a;letter-spacing:.03em}
/* the encyclopedia's forms */
.dx-forms{width:min(520px,88vw);margin:18px auto 0}
.dx-cap{margin:0 0 12px;text-align:center;font:600 8.5px/1 var(--f-ui);letter-spacing:.26em;color:#62807a}
.dx-fl{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 12px}
.dx-f{margin:0;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.dx-f canvas{width:84px;height:84px;border-radius:50%;box-shadow:0 8px 18px -12px rgba(40,40,80,.45),0 0 0 1px rgba(255,255,255,.9)}
.dx-f figcaption{display:flex;flex-direction:column;gap:3px}
.dx-f b{font:500 12.5px/1.25 var(--f-voice);letter-spacing:.06em;color:var(--ink)}
.dx-f small{font:400 10px/1.35 var(--f-ui);color:#8fa29e;letter-spacing:.02em}
.dx-f.off canvas{filter:grayscale(1) contrast(.55) brightness(1.18);opacity:.42}
.dx-f.off b{color:#9aaba7}
.dx-pl,.dx-hint{margin:14px 0 0;text-align:center;font:400 11.5px/1.6 var(--f-ui);color:#6f8582;letter-spacing:.03em}
.dx-hint{margin-top:4px;font-family:var(--f-voice);color:#8fa29e}

/* very narrow phones: two crystals still side by side, each button's cost under its name */
@media (max-width:719px){.isaro-mine .vg-list{grid-auto-columns:min(150px,calc((100vw - 78px)/2))}.isaro-mine .vg-c{width:min(150px,calc((100vw - 78px)/2))}}
@media (max-width:360px){.isaro-mine .vb{flex-direction:column;justify-content:center;align-items:center;gap:4px;height:46px;padding:0 6px}.isaro-mine .vb b{letter-spacing:.12em}}
.isaro-mine .vg-c figcaption span,.sm-row small,.raw small{word-break:keep-all;overflow-wrap:break-word}

/* ---------- v22: the encyclopedia card's two stages, the unlock, the 整理台 result ---------- */
/* card back: the mineral, then your collection; what was just added is marked; a sighted card's back is still closed */
.mc-dl .sec{grid-column:1/-1;padding:2.8cqw 0 1.1cqw 1cqw;border-top:0;font:600 1.55cqw/1 var(--f-ui);letter-spacing:.34em;color:#8b6d3f}
.mc-dl .sec~dt,.mc-dl .sec~dd{line-height:1.55}
.mc-dl mark.fresh{color:inherit;padding:0 .4cqw;border-radius:.6cqw;background:linear-gradient(transparent 52%,rgba(240,214,150,.6) 52%)}
.mc-dl mark.fresh i{display:inline-block;margin-left:1cqw;padding:.55cqw 1.2cqw;border-radius:2cqw;font:600 1.35cqw/1 var(--f-ui);font-style:normal;letter-spacing:.14em;color:#fff;background:#c9a24f;vertical-align:.25cqw}
.mc-lock{position:absolute;left:10cqw;right:10cqw;top:38cqw;display:flex;flex-direction:column;align-items:center;gap:2.6cqw;text-align:center}
.mc-lk-ic{width:6.4cqw;height:6.4cqw;color:#8fa29e}
.mc-lk-t{display:block;font:400 3cqw/1.5 var(--f-voice);letter-spacing:.16em;padding-left:.16em;color:#4b615b;white-space:nowrap}
.mc-lock::after{content:"";display:block;margin:7cqw auto 0;width:78%;height:34cqw;background:repeating-linear-gradient(180deg,transparent 0 5.4cqw,rgba(118,152,150,.2) 5.4cqw calc(5.4cqw + 1px))}
.mcard.sight .mc-front .mc-meta{color:#a07a3a;letter-spacing:.12em}
.mcard.unlock-back .mc-dl>*{animation:dlIn .6s cubic-bezier(.16,1,.3,1) both}
@keyframes dlIn{from{opacity:0;transform:translateY(1.6cqw);filter:blur(2px)}}
.mcard.unlock-back .mc-dl>:nth-child(1){animation-delay:0.550s}
.mcard.unlock-back .mc-dl>:nth-child(2){animation-delay:0.605s}
.mcard.unlock-back .mc-dl>:nth-child(3){animation-delay:0.660s}
.mcard.unlock-back .mc-dl>:nth-child(4){animation-delay:0.715s}
.mcard.unlock-back .mc-dl>:nth-child(5){animation-delay:0.770s}
.mcard.unlock-back .mc-dl>:nth-child(6){animation-delay:0.825s}
.mcard.unlock-back .mc-dl>:nth-child(7){animation-delay:0.880s}
.mcard.unlock-back .mc-dl>:nth-child(8){animation-delay:0.935s}
.mcard.unlock-back .mc-dl>:nth-child(9){animation-delay:0.990s}
.mcard.unlock-back .mc-dl>:nth-child(10){animation-delay:1.045s}
.mcard.unlock-back .mc-dl>:nth-child(11){animation-delay:1.100s}
.mcard.unlock-back .mc-dl>:nth-child(12){animation-delay:1.155s}
.mcard.unlock-back .mc-dl>:nth-child(13){animation-delay:1.210s}
.mcard.unlock-back .mc-dl>:nth-child(14){animation-delay:1.265s}
.mcard.unlock-back .mc-dl>:nth-child(15){animation-delay:1.320s}
.mcard.unlock-back .mc-dl>:nth-child(16){animation-delay:1.375s}
.mcard.unlock-back .mc-dl>:nth-child(17){animation-delay:1.430s}
.mcard.unlock-back .mc-dl>:nth-child(18){animation-delay:1.485s}
.mcard.unlock-back .mc-dl>:nth-child(19){animation-delay:1.540s}
.mcard.unlock-back .mc-dl>:nth-child(20){animation-delay:1.595s}
.mcard.unlock-back .mc-dl>:nth-child(21){animation-delay:1.650s}
.mcard.unlock-back .mc-dl>:nth-child(22){animation-delay:1.705s}
.mcard.unlock-back .mc-dl>:nth-child(23){animation-delay:1.760s}
.mcard.unlock-back .mc-dl>:nth-child(24){animation-delay:1.815s}
.mcard.unlock-back .mc-dl>:nth-child(25){animation-delay:1.870s}
.mcard.unlock-back .mc-dl>:nth-child(26){animation-delay:1.925s}

/* the result card: one axis. Title centred, rows and cards and the button all on the same left and right edges */
.sm-sub{margin:6px 0 0;font:400 12px/1.5 var(--f-ui);color:#8fa29e;letter-spacing:.04em}
.sm-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sm-card{width:auto;max-width:none}
.sm-new .sm-cap{text-align:left;padding-left:4px}
.sm-row .tag.new{letter-spacing:.08em}
.sm-foot{padding-top:18px}
.sm-home,.mu-take{display:flex;align-items:center;justify-content:center;width:100%;height:48px;border:0;border-radius:16px;cursor:pointer;
  font:500 14px/1 var(--f-voice);letter-spacing:.34em;padding-left:.34em;color:#24584b;
  background:linear-gradient(180deg,#f4fbf8,#d8efe5);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(47,111,96,.1),0 0 0 1px rgba(170,214,196,.75),0 10px 22px -16px rgba(47,111,96,.6);
  transition:transform .18s,box-shadow .18s,background .18s}
.sm-home:hover,.mu-take:hover{background:linear-gradient(180deg,#f8fdfb,#def3ea);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(150,204,182,.9),0 14px 26px -16px rgba(47,111,96,.65);transform:translateY(-1px)}
.sm-home:active,.mu-take:active{transform:none;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(150,204,182,.9),0 6px 14px -12px rgba(47,111,96,.6)}
.sm-home:focus,.mu-take:focus{outline:none}.sm-home:focus-visible,.mu-take:focus-visible{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(150,204,182,.9),0 0 0 4px rgba(47,111,96,.22)}

/* the unlock: the card comes up over the result, turning in, with a sweep of light; 收下 below it, as wide as the card */
.m-unlock{position:absolute;inset:0;z-index:9;display:grid;place-items:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(circle at 50% 44%,rgba(255,250,238,.6),rgba(222,226,244,.88));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .35s}
.m-unlock.on{opacity:1}.m-unlock.out{opacity:0;pointer-events:none}
.mu-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(300px,78vw,calc((100dvh - 230px)*2/3));transition:transform .32s,opacity .32s}
.mu-in.away{transform:translateY(26px) scale(.94);opacity:0}
.mu-cap{display:flex;align-items:center;gap:8px;margin:0;font:600 9.5px/1 var(--f-ui);letter-spacing:.32em;color:#8b6d3f}
.mu-cap i{font-style:normal;color:#c9a24f}.mu-cap span{margin-left:4px;letter-spacing:.12em;color:#b09b72}
.mu-card{position:relative;width:100%;animation:muIn 1.1s cubic-bezier(.16,1,.3,1) both}
.mu-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%) no-repeat;background-size:250% 100%;background-position:120% 0;animation:muSweep 1.3s .6s ease-out forwards}
@keyframes muIn{0%{opacity:0;transform:perspective(1000px) rotateY(-80deg) translateY(30px) scale(.86)}55%{opacity:1}100%{transform:none}}
@keyframes muSweep{to{background-position:-30% 0}}
.mu-hint{margin:0;font:400 11px/1.4 var(--f-ui);color:#7d918d;letter-spacing:.04em;text-align:center}
@media (prefers-reduced-motion:reduce){.mu-card,.mu-card::after,.mcard.unlock-back .mc-dl>*{animation:none}}

/* 整理台: card, its two numbers, and the two choices, all on the card's own width */
.cl-col{display:flex;flex-direction:column;align-items:center;width:min(400px,100%);margin:0 auto}
.cl-col .cl-wrap{width:100%}
.cl-col .cl-wrap.done{width:min(300px,100%)}
.cl-ribbon{position:absolute;left:50%;top:-15px;z-index:4;margin:0;transform:translateX(-50%);white-space:nowrap;padding:7px 14px;border-radius:999px;
  font:500 11.5px/1 var(--f-voice);letter-spacing:.16em;color:#7a5a24;background:linear-gradient(120deg,#fff7e2,#f4dfae 55%,#fff3d4);box-shadow:inset 0 1px 0 #fff,0 8px 18px -12px rgba(160,118,40,.7);animation:ribIn .7s cubic-bezier(.34,1.56,.64,1) both}
.cl-ribbon i{font-style:normal;color:#c9a24f;margin-right:6px}
@keyframes ribIn{from{opacity:0;transform:translateX(-50%) scale(.7)}}
.cl-col .cl-tip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;width:min(300px,100%);margin:18px 0 0;font:400 13px/1.4 var(--f-ui);color:#334941;letter-spacing:.03em}
.cl-col .cl-tip .k{font-size:11.5px;letter-spacing:.1em;color:#8fa29e}
.cl-col .cl-tip .sep{width:1px;height:12px;margin:0 8px;background:rgba(118,152,150,.32)}
.cl-col .cl-tip .v{margin:0;font:inherit;color:#334941}
.cl-col .cl-tip b.g{margin-right:4px}
.cl-flip{flex-basis:100%;margin-top:2px;text-align:center;font-size:10.5px;letter-spacing:.06em;color:#9aaba7}
.cl-col .cl-act{width:min(300px,100%);display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:16px;padding-top:0;border-top:0}
.cl-col .cl-fit{display:flex;justify-content:center;align-items:center;gap:6px;margin:0;font:400 12px/1.5 var(--f-voice);color:#3f7f73}
.cl-fit i{font-style:normal;color:#c9a24f}
.cl-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cl-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:60px;border:0;border-radius:16px;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.cl-b b{font:500 14px/1 var(--f-voice);letter-spacing:.2em;padding-left:.2em}
.cl-b small{font:400 10.5px/1 var(--f-ui);letter-spacing:.04em}
.cl-b.sell{color:#2a4640;background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px rgba(196,206,216,.6),0 4px 12px -8px rgba(40,50,70,.3)}
.cl-b.sell small{color:#97a8a4}
.cl-b.keep{color:#24584b;background:linear-gradient(180deg,#f4fbf8,#d8efe5);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(170,214,196,.75),0 10px 22px -16px rgba(47,111,96,.6)}
.cl-b.keep small{color:rgba(36,88,75,.62)}
.cl-b:hover{transform:translateY(-1px)}.cl-b:active{transform:none}

/* the card's back has to be read: larger type in the data, and the card a little larger where it is read */
.mc-dl{font-size:2.6cqw;line-height:1.55;grid-template-columns:21cqw 1fr}
.mc-dl dt,.mc-dl dd{padding:1.5cqw 0}
.mc-dl .sec{font-size:1.75cqw}
.cl-col .cl-wrap.done{width:min(340px,100%)}
.cl-col .cl-tip,.cl-col .cl-act{width:min(340px,100%)}
.big-card{width:min(340px,82vw)}
.cl-col .cl-kb{margin:8px auto 0}

/* ---------- v23 ---------- */
/* the crystal in the corner reads against a pale sky: a soft pearl halo behind it, a little larger, a firmer outline (in art.js) */
.crys-b.lgc{width:44px;height:77px}
.crys-b.lgc::before{content:"";position:absolute;left:50%;top:58%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.96),rgba(233,247,241,.82) 55%,rgba(218,236,247,.7));border:1px solid rgba(255,255,255,.95);
  box-shadow:0 10px 24px -6px rgba(36,77,59,.28),0 0 0 5px rgba(255,255,255,.28),inset 0 -6px 12px rgba(150,190,200,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.crys-m{top:92px}
@media (max-width:719px){.crys-b.lgc{width:38px;height:66px}.crys-b.lgc::before{width:58px;height:58px;margin:-29px 0 0 -29px}.crys-m{top:78px}}
/* knocking: 敲 knocks all round; the little corner mark says it holds more (press and hold, or right-click) */
.m-act [data-a="knock"]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.m-act [data-a="knock"]::after{content:"";position:absolute;right:8px;bottom:8px;border-left:5px solid transparent;border-bottom:5px solid currentColor;opacity:.38;border-radius:0 0 1.5px 0}
.m-kt{box-sizing:border-box;position:fixed;z-index:40;width:min(300px,calc(100vw - 20px));padding:8px;border-radius:22px;border:1px solid rgba(255,255,255,.8);color:#334941;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(240,246,252,.9));-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 18px 44px rgba(36,52,77,.22),inset 0 1px 0 #fff;opacity:0;transform:translateY(8px) scale(.97);transform-origin:var(--ax,50%) 100%;transition:opacity .18s,transform .3s cubic-bezier(.2,1.2,.4,1)}
.m-kt.on{opacity:1;transform:none}
.m-kt::after{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:#f3f7fb;border-right:1px solid rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.8)}
.kt-h{margin:5px 10px 7px;font:600 8.5px/1 var(--f-ui);letter-spacing:.3em;color:#62807a}
.kt-o{display:grid;grid-template-columns:38px minmax(0,1fr) 14px;align-items:center;gap:11px;width:100%;padding:8px 10px 8px 8px;border:0;border-radius:15px;background:transparent;text-align:left;cursor:pointer;color:inherit;font:inherit}
.kt-o+.kt-o{margin-top:2px}
.kt-o:hover{background:rgba(255,255,255,.8)}
.kt-o:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(150,190,240,.45)}
.kt-o.on{background:linear-gradient(160deg,rgba(228,236,255,.95),rgba(208,221,249,.7));box-shadow:inset 0 1px 0 #fff}
.kt-o.off{cursor:default}.kt-o.off .kt-i,.kt-o.off b{opacity:.45}.kt-o.off:hover{background:transparent}
.kt-i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(36,77,59,.08);color:#3e5852}
.kt-o.on .kt-i{color:#2e4a7c}
.kt-i svg{width:22px;height:22px}
.kt-t b{display:block;font:500 13.5px/1.3 var(--f-voice);letter-spacing:.06em;color:#334941}
.kt-t small{display:block;margin-top:2px;text-wrap:pretty;font:400 10.5px/1.5 var(--f-ui);color:#8fa29e;letter-spacing:.01em}
.kt-ck{width:6px;height:11px;margin:0 0 3px 3px;border-right:1.8px solid #2e4a7c;border-bottom:1.8px solid #2e4a7c;transform:rotate(42deg)}
.cab-tag{box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:9px 16px;width:100%;margin:0;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(196,206,216,.5)}
.cab-tag dt{font:400 11px/1.5 var(--f-ui);letter-spacing:.12em;color:#8fa29e}
.cab-tag dd{margin:0;font:400 13px/1.5 var(--f-voice);color:#334941;letter-spacing:.02em}
.cab-tag .f{margin-left:6px;font:italic 400 13px/1 var(--f-latin);color:#62807a}
.cab-tag b.g{display:inline-grid;place-items:center;width:1.6em;height:1.6em;margin-right:.4em;border-radius:50%;font:500 .8em/1 var(--f-latin);color:#fff;vertical-align:.05em}
.cabsheet .cs-in{width:min(740px,100%)}
.cab-cols{display:grid;grid-template-columns:minmax(0,290px) minmax(0,340px);justify-content:center;align-items:center;gap:20px 30px;padding:2px 0 4px}
.cab-card{width:100%}
.cab-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.cab-side .cl-act{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0;padding:0;border:0}
.cab-side .cl-fit{display:flex;justify-content:center;align-items:center;gap:6px;margin:0;font:400 12px/1.5 var(--f-voice);color:#3f7f73}
@media (max-width:719px){.cab-cols{grid-template-columns:minmax(0,340px)}.cab-card{width:min(260px,70vw);justify-self:center}}
/* the site lock reads as progress and tells you how to get there */
button.s-lock{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border:0;border-radius:15px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(196,206,216,.6);font:400 11px/1 var(--f-ui);letter-spacing:.04em;color:#62807a;cursor:pointer;font-variant-numeric:tabular-nums}
button.s-lock:hover{background:#fff}
/* ---------- v24: shelf plates, keyboard moving, the cabinet photo ---------- */
.cab-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cab-foot{display:flex;justify-content:center;margin:14px 0 4px}
.cab-shot{width:min(340px,100%)}
.cab-flash{position:absolute;inset:0;z-index:5;border-radius:inherit;background:#fff;pointer-events:none;animation:flash .7s ease-out both}
@keyframes flash{from{opacity:.95}to{opacity:0}}
.photosheet .cs-in{width:min(560px,100%)}
.ph-col{display:flex;flex-direction:column;align-items:center;gap:12px}
.ph-img{display:block;width:auto;max-width:min(400px,100%);max-height:min(60dvh,620px);border-radius:14px;box-shadow:0 18px 40px -20px rgba(36,52,77,.45),0 0 0 1px rgba(196,206,216,.5);-webkit-touch-callout:default;user-select:auto}
.ph-tip{margin:0;font:400 11px/1.6 var(--f-ui);color:#94a6a2;letter-spacing:.03em;text-align:center}
.ph-col .cl-btns{width:min(340px,100%)}
.cl-btns.one{grid-template-columns:1fr}
/* ---------- v25 · the cabinet, in the codex card's own language ----------
   the card face scaled up into a vitrine: its pearl ground and dot grid, its double gold hairline and corner stars. Shelves are lines of
   light, not bars; each piece stands on its line with a reflection in the glass; labels are a museum caption, with the grade as a gold
   italic letter (no coloured discs); the top place is lit by a soft beam with a little dust drifting in it */
.cab-bar{display:flex;flex-direction:column;gap:12px;margin:0 0 16px}
.cab-st{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0;font:400 11.5px/1.4 var(--f-ui);color:#8fa29e;letter-spacing:.03em}
.cab-st b{margin-right:3px;font:400 15px/1 var(--f-latin);font-style:italic;color:#334941}
.cab-st .sep{align-self:center;width:1px;height:12px;background:rgba(118,152,150,.3)}
.cab-tools{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.cab-sort,.cab-sw{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.cab-tools .k{margin-right:8px;font:400 11px/1 var(--f-ui);letter-spacing:.14em;color:#8fa29e}
.cab-sort .cab-sep{font-style:normal;color:#b9c6c3;padding:0 1px}
.cab-sort button{position:relative;padding:6px 6px 7px;border:0;background:none;font:400 13px/1 var(--f-voice);letter-spacing:.12em;color:#334941;cursor:pointer}
.cab-sort button::after{content:"";position:absolute;left:6px;right:6px;bottom:2px;height:1px;background:linear-gradient(90deg,transparent,#8cbfae,transparent);opacity:0;transform:scaleX(.4);transition:opacity .25s,transform .35s}
.cab-sort button:hover::after,.cab-sort button:focus-visible::after{opacity:1;transform:none}
.cab-sort button:active{transform:translateY(1px)}
.cab-sw{gap:10px}
.cab-sw .sw{width:18px;height:18px;padding:0;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 3px rgba(36,77,59,.14);transition:box-shadow .25s,transform .25s}
.sw-pearl{background:linear-gradient(140deg,#fbeeed,#f3f7f4)}.sw-mint{background:linear-gradient(140deg,#f2fbf7,#cdebdf)}.sw-moon{background:linear-gradient(140deg,#f6f3fc,#d6d6f2)}
.cab-sw .sw.on{transform:scale(1.12);box-shadow:inset 0 0 0 1px #fff,0 0 0 3px rgba(255,255,255,.9),0 0 10px 2px rgba(140,191,174,.55)}
.cab-sort button:focus-visible,.cab-sw .sw:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(140,191,174,.55)}
.cab{--gold:#b8955a;--fa:#fbeeed;--fb:#faf6f2;--fc:#f3f7f4;--fd:#ecf5f2;--glow1:150,214,226;--glow2:196,182,240;--beam:255,251,244;--gap:10px;
  position:relative;padding:30px 22px 14px;border-radius:8px;overflow:hidden;
  background:radial-gradient(circle,rgba(150,160,170,.16) .7px,transparent 1px) 0 0/14px 14px,linear-gradient(172deg,var(--fa) 0%,var(--fb) 42%,var(--fc) 78%,var(--fd) 100%);
  box-shadow:0 18px 44px -18px rgba(36,77,59,.28),0 2px 6px rgba(36,77,59,.06)}
.cab.st-mint{--fa:#eef8f4;--fb:#f7fcfa;--fc:#e8f5f0;--fd:#dff1ea;--glow2:170,214,236}
.cab.st-moon{--fa:#f1eefb;--fb:#f9f8fd;--fc:#eef0fa;--fd:#e6e9f7;--glow1:176,196,240;--beam:250,248,255}
.cab::before,.cab::after{content:"";position:absolute;pointer-events:none;border-radius:4px}
.cab::before{inset:9px;border:1px solid rgba(184,149,90,.62)}
.cab::after{inset:13px;border:.5px solid rgba(184,149,90,.3)}
.cab-c{position:absolute;z-index:1;width:13px;height:13px;color:var(--gold)}
.cab-c svg{display:block;width:100%;height:100%;fill:currentColor}
.cab-c.a{left:3px;top:3px}.cab-c.b{right:3px;top:3px}.cab-c.c{left:3px;bottom:3px}.cab-c.d{right:3px;bottom:3px}
/* the top place */
.cab-top{position:relative;display:flex;justify-content:center;margin:0 0 22px}
.cab-beam{position:absolute;left:50%;top:-30px;width:min(340px,86%);height:calc(100% + 24px);transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(var(--beam),.95),rgba(var(--beam),.5) 40%,rgba(var(--beam),0) 78%);
  -webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.cab-dust{position:absolute;left:50%;top:0;width:min(240px,62%);height:78%;transform:translateX(-50%);pointer-events:none}
.cab-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,0) 70%);box-shadow:0 0 4px rgba(var(--glow2),.8);opacity:0;animation:dust 9s linear infinite}
.cab-dust i:nth-child(1){left:22%;animation-delay:0s}.cab-dust i:nth-child(2){left:38%;animation-delay:-1.4s;animation-duration:11s}.cab-dust i:nth-child(3){left:55%;animation-delay:-3s}
.cab-dust i:nth-child(4){left:70%;animation-delay:-4.6s;animation-duration:12s}.cab-dust i:nth-child(5){left:30%;animation-delay:-6s;animation-duration:10s}.cab-dust i:nth-child(6){left:62%;animation-delay:-7.4s}.cab-dust i:nth-child(7){left:47%;animation-delay:-2.2s;animation-duration:13s}
@keyframes dust{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}60%{opacity:.5}100%{transform:translate(10px,150px);opacity:0}}
.cab-slot{position:relative;min-width:0;border-radius:12px;transition:background .25s}
.cab-slot.star{width:min(280px,72%)}
.cab-cv{position:relative;display:block;width:100%;aspect-ratio:240/208}
.cab-slot.star .cab-cv{aspect-ratio:440/340}
.cab-slot.star.empty .cab-cv{aspect-ratio:440/230}
.cab-slot.star.empty .cab-cv::after{top:86%}
.cab-cv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the shelf: a line of light at the floor of every place, running on into the next */
.cab-cv::after{content:"";position:absolute;left:calc(var(--gap) / -2 - 1px);right:calc(var(--gap) / -2 - 1px);top:80%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.75),#fff 50%,rgba(255,255,255,.75));box-shadow:0 0 5px rgba(var(--glow1),.75),0 0 14px rgba(var(--glow2),.45)}
.cab-shelf .cab-slot:first-child .cab-cv::after{left:-6%;background:linear-gradient(90deg,transparent,#fff 40%)}
.cab-shelf .cab-slot:last-child .cab-cv::after{right:-6%;background:linear-gradient(90deg,#fff 60%,transparent)}
.cab-slot.star .cab-cv::after{left:2%;right:2%;background:linear-gradient(90deg,transparent,#fff 30%,#fff 70%,transparent)}
.cab-cv::before{content:"";position:absolute;left:0;right:0;top:80%;height:20%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0))}
.cab-slot.empty .cab-cv::before{display:none}
.cab-ph{position:absolute;left:0;right:0;top:12%;display:flex;flex-direction:column;align-items:center;gap:6px}
.cab-ph i{width:16px;height:16px;color:rgba(184,149,90,.55)}.cab-ph i svg{display:block;width:100%;height:100%;fill:currentColor}
.cab-ph b{font:400 13px/1.2 var(--f-voice);letter-spacing:.3em;padding-left:.3em;color:#62807a}
.cab-ph small{font:400 11px/1.6 var(--f-ui);color:#94a6a2;letter-spacing:.04em}
.cab.dragging .cab-slot.empty .cab-cv{background:radial-gradient(ellipse 50% 30% at 50% 80%,rgba(var(--glow1),.22),transparent 70%)}
.cab-slot.over{background:radial-gradient(ellipse 60% 50% at 50% 70%,rgba(var(--glow1),.4),rgba(var(--glow2),.18) 55%,transparent 75%)}
.cab-shelf{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--gap);margin:0 0 14px}
.cab-it{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:0 0 4px;border:0;border-radius:12px;background:none;cursor:grab;color:inherit;font:inherit;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cab-it canvas{transition:transform .35s cubic-bezier(.2,1.2,.4,1)}
.cab-it:hover canvas{transform:translateY(-3px)}
.cab-it.lifting{opacity:.2}
.cab-lb{display:flex;align-items:baseline;justify-content:center;gap:5px;max-width:100%;margin-top:-6px}
.cab-lb b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 12px/1.3 var(--f-voice);letter-spacing:.12em;color:#334941}
.cab-lb .gr{flex:none;font:italic 400 14px/1 var(--f-latin);color:#8b6d3f}
.cab-en{display:block;max-width:100%;margin-top:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 8.5px/1.2 var(--f-mark);letter-spacing:.24em;text-transform:uppercase;color:#94a6a2}
.star .cab-lb b{font-size:14px;letter-spacing:.2em}.star .cab-lb .gr{font-size:16px}.star .cab-en{font-size:9.5px}
.cab-new{position:absolute;top:2px;right:2px;padding:2px 7px;border-radius:8px;font:500 9px/1.2 var(--f-ui);font-style:normal;letter-spacing:.1em;color:#2f6f60;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(170,214,196,.7)}
.cab-it.fresh{animation:cabin .8s cubic-bezier(.2,1.3,.4,1) both}
@keyframes cabin{from{opacity:0;transform:translateY(-14px)}}
.cab-ghost{position:fixed;z-index:60;pointer-events:none;cursor:grabbing;transform:scale(1.08) rotate(-2deg);filter:drop-shadow(0 16px 18px rgba(36,52,77,.22));transition:none}
.cab-ghost .cab-cv::after,.cab-ghost .cab-cv::before{display:none}
/* a whole shelf of one mineral: its name under the shelf, the way a constellation is named on a star chart */
.cab-plate{display:flex;align-items:center;justify-content:center;gap:9px;margin:-6px 0 18px;pointer-events:none}
.cab-plate i{width:9px;height:9px;color:var(--gold)}.cab-plate i svg{display:block;width:100%;height:100%;fill:currentColor}
.cab-plate b{font:500 12px/1 var(--f-voice);letter-spacing:.34em;padding-left:.34em;color:#7a5a24}
.cab-plate em{font:400 10px/1 var(--f-mark);font-style:normal;letter-spacing:.3em;color:#8b6d3f}
.cab-plate.new{animation:plate 1.1s cubic-bezier(.2,1,.3,1) both}
@keyframes plate{from{opacity:0;letter-spacing:.8em;filter:blur(3px)}}
.cab-it.kb-lift{z-index:3}
.cab-it.kb-lift canvas{transform:translateY(-8px) scale(1.04);filter:drop-shadow(0 12px 10px rgba(36,52,77,.2))}
.cab-hint{margin:14px 0 0;text-align:center;font:400 11px/1.6 var(--f-ui);color:#94a6a2;letter-spacing:.03em}
@media (max-width:719px){.cab{--gap:6px;padding:24px 12px 10px}.cab-lb b{font-size:11px;letter-spacing:.06em}.cab-lb .gr{font-size:12.5px}.cab-en{display:none}.cab-slot.star{width:min(240px,80%)}}
@media (prefers-reduced-motion:reduce){.cab-dust{display:none}.cab-plate.new,.cab-it.fresh{animation:none}}
/* ---------- v25 · 星之契, 体力, 星尘, deep reads ---------- */
.pay-sheet{z-index:80}
.cp-stats .st-b{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 0;margin:-4px 0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;border-radius:10px;transition:background .2s}
.cp-stats .st-b:hover{background:rgba(255,255,255,.55)}
.cp-stats .st-b:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(140,191,174,.5)}
.st-plus{width:11px;height:11px;color:#62807a;opacity:.8}
.pactsheet .cs-in,.packsheet .cs-in,.stsheet .cs-in,.worksheet .cs-in{width:min(440px,100%)}
.pc-until{margin:-6px 0 10px;font:400 11.5px/1.5 var(--f-ui);color:#8fa29e}
.pc-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px}
.pc-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid rgba(118,152,150,.14)}
.pc-list li:first-child{border-top:0}
.pc-ic{width:20px;height:20px;margin-top:1px;color:#486157}.pc-ic svg{display:block;width:100%;height:100%}
.pc-list b{display:block;font:500 13.5px/1.4 var(--f-voice);letter-spacing:.08em;color:#233d38}
.pc-list p{margin:3px 0 0;font:400 12px/1.75 var(--f-voice);color:#334941;text-wrap:pretty}
.pc-list small{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:8px;font:400 10px/1.5 var(--f-ui);color:#7a5a24;background:rgba(244,223,174,.35)}
.pc-site{margin:12px 0 0;font:400 12px/1.75 var(--f-voice);color:#3d514b;text-wrap:pretty}
.pc-terms{margin:8px 0 14px;font:400 11px/1.5 var(--f-ui);letter-spacing:.06em;color:#8fa29e}
.pay-demo{margin:10px 0 0;text-align:center;font:400 10.5px/1.5 var(--f-ui);color:#94a6a2}
.pk-lead{margin:0 0 16px;font:400 13px/1.85 var(--f-voice);color:#334941}.pk-lead span{color:#8fa29e;font-size:12px}.pk-lead b{font:italic 400 15px/1 var(--f-latin);color:#233d38}
/* her works, played like her song card: a small cover, the title, and a play mark with no circle round it */
.wk-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wk{display:grid;grid-template-columns:42px minmax(0,1fr) 22px;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;border:0;border-radius:18px;text-align:left;cursor:pointer;color:inherit;font:inherit;
  background:linear-gradient(130deg,rgba(255,255,255,.72),rgba(226,242,236,.5));box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 4px 12px -8px rgba(36,77,59,.3);transition:transform .2s}
.wk:hover{transform:translateY(-1px)}.wk:disabled{opacity:.45;cursor:default;transform:none}
.wk-cv{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;overflow:hidden}
.wk-cv svg,.wk-big svg{width:56%;height:56%}
.wk-cv.re,.wk-stage.re{background:linear-gradient(135deg,#a8e4ea,#c9b8f2 45%,#f6c4dc 75%,#fde6b8)}
.wk-cv.mo,.wk-stage.mo{background:radial-gradient(circle at 35% 30%,#f6f0ff,#d9cdf2 60%,#c3b6e6)}
.wk-t b{display:block;font:500 13.5px/1.3 var(--f-latin);font-style:italic;letter-spacing:.04em;color:#233d38}
.wk-t small{display:block;margin-top:3px;font:400 11px/1.4 var(--f-ui);color:#8fa29e}
.wk-play{width:18px;height:18px;color:#486157;transition:transform .2s,filter .2s}.wk:hover .wk-play{transform:scale(1.12);filter:drop-shadow(0 0 4px rgba(150,214,226,.9))}
.wk-play svg{display:block;width:100%;height:100%}
.wk-direct{display:flex;justify-content:flex-end;margin-top:6px}
.ds-list{list-style:none;margin:0;padding:0}
.ds-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(118,152,150,.14)}
.ds-list li:first-child{border-top:0}
.ds-list b{display:block;font:500 13px/1.4 var(--f-voice);letter-spacing:.08em;color:#233d38}
.ds-list small{display:block;margin-top:2px;font:400 11px/1.5 var(--f-ui);color:#8fa29e}
.ds-pack{display:flex;justify-content:flex-end;margin-top:4px}
.st-pact{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 0;padding-top:12px;border-top:1px solid rgba(118,152,150,.14);font:400 11.5px/1.6 var(--f-voice);color:#62807a}
.wk-stage{position:relative;display:grid;place-items:center;aspect-ratio:16/10;border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.wk-stage video{width:100%;height:100%;object-fit:cover}
.wk-big{display:grid;place-items:center;width:30%;aspect-ratio:1;animation:wkb 4s ease-in-out infinite}
@keyframes wkb{50%{transform:scale(1.06);filter:drop-shadow(0 0 12px rgba(255,255,255,.9))}}
.wk-bar{position:relative;height:2px;margin:14px 2px 0;border-radius:1px;background:rgba(118,152,150,.18);overflow:visible}
.wk-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:1px;background:linear-gradient(90deg,#9fdcd0,#b9c4f2);box-shadow:0 0 6px rgba(150,214,226,.8)}
.wk-note{margin:10px 0 14px;text-align:center;font:400 11px/1.5 var(--f-ui);color:#94a6a2}
/* a deep read in the wooden box: the title, a lead and the sources are open; the rest waits under a soft fade */
.bx-deep{margin-top:14px;padding:14px 16px 16px;border-radius:16px;background:linear-gradient(160deg,rgba(255,250,240,.75),rgba(246,240,252,.55));box-shadow:inset 0 0 0 .5px rgba(176,146,98,.3)}
.bx-deep .over{margin:0 0 4px;font:600 8.5px/1 var(--f-ui);letter-spacing:.24em;color:#8b6d3f}
.bx-deep h4{margin:0 0 8px;font:500 14.5px/1.4 var(--f-voice);letter-spacing:.06em;color:#233d38}
.bx-deep p{margin:0 0 8px;font:400 12.5px/1.85 var(--f-voice);color:#334941;text-wrap:pretty}
.bx-deep .bd-lead{color:#3d514b}
.bd-lock{position:relative;max-height:4.2em;overflow:hidden;margin-bottom:12px}
.bd-lock i{position:absolute;left:0;right:0;bottom:0;height:3.4em;background:linear-gradient(180deg,rgba(252,248,246,0),rgba(250,246,248,.96))}
.bd-src-h{margin:14px 0 4px!important;font:600 8.5px/1 var(--f-ui)!important;letter-spacing:.2em;color:#62807a!important}
.bd-src{margin:0;padding-left:18px;font:400 11px/1.7 var(--f-ui);color:#62807a}
.bd-src a{color:#4f7f74;text-decoration:none;border-bottom:1px solid rgba(79,127,116,.3)}.bd-src a:hover{border-bottom-color:#4f7f74}
.ds-list .b1:disabled{opacity:.4;cursor:default}
/* ---------- v27 · grades as marks, and the appraisal sheet ----------
   one typeface for every grade: the letter in Cormorant italic, the name in the body serif. Higher grades get a finer finish:
   矿料 plain stone ink · 普品 mint · 精品 aquamarine with a soft glow · 珍品 lilac into rose gold, glowing ·
   博物馆级 a slow holographic sheen with a small spark. No discs, no circles. */
.gq{display:inline-flex;align-items:baseline;gap:.32em;white-space:nowrap;vertical-align:baseline;position:relative}
.gq>i{font:italic 500 1.28em/1 var(--f-latin);font-style:italic;letter-spacing:.02em}
.gq>b{font:500 1em/1.2 var(--f-voice);letter-spacing:.14em}
.gq>i,.gq>b{color:var(--gq-c,#5f8f84)}
.gq-D{--gq-c:#93a19e}
.gq-C{--gq-c:#4f8a7d}
.gq-B>i,.gq-B>b,.gq-A>i,.gq-A>b,.gq-S>i,.gq-S>b{color:transparent;-webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:clone}
.gq-B>i,.gq-B>b{background-image:linear-gradient(120deg,#23847c,#3ba7bf 60%,#5fb9c9);filter:drop-shadow(0 0 2.5px rgba(110,206,220,.45))}
.gq-A>i,.gq-A>b{background-image:linear-gradient(115deg,#8a5cc8,#c46c9c 50%,#b8873a);filter:drop-shadow(0 0 3.5px rgba(216,168,238,.6))}
.gq-S>i,.gq-S>b{background-image:linear-gradient(100deg,#b9842a,#e2ab3e 16%,#d1709d 34%,#7c84e4 52%,#2fa597 70%,#d29a33 86%,#b9842a);background-size:260% 100%;
  animation:gqholo 7s linear infinite;filter:drop-shadow(0 0 4px rgba(255,214,150,.75)) drop-shadow(0 0 1px rgba(150,110,40,.35))}
@keyframes gqholo{to{background-position:-260% 0}}
.gq-S>em{position:absolute;right:-.62em;top:-.42em;width:.62em;height:.62em;pointer-events:none;
  background:radial-gradient(circle,#fff 0 18%,transparent 22%),conic-gradient(from 45deg,transparent 0 22%,#fff3cf 24% 26%,transparent 28% 47%,#fff3cf 49% 51%,transparent 53% 72%,#fff3cf 74% 76%,transparent 78%);
  filter:drop-shadow(0 0 3px rgba(255,214,150,.95));animation:gqspark 3.6s ease-in-out infinite}
@keyframes gqspark{0%,100%{opacity:.25;transform:scale(.6) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}}
.gq.sm>i{font-size:1.15em}.gq.sm>b{font-size:.92em}
@media (prefers-reduced-motion:reduce){.gq-S>i,.gq-S>b,.gq-S>em{animation:none}}
.mc-tag .gq{font-size:1em}.mc-tag .mc-tr{color:#62807a}
.cab-lb .gq>i{font-size:14px}.star .cab-lb .gq>i{font-size:16px}
@media (max-width:719px){.cab-lb .gq>i{font-size:12.5px}}
/* the appraisal sheet */
.cl-col .cl-tip.has-qa{display:block;width:min(340px,100%)}
.qa{display:flex;flex-direction:column;gap:10px;width:100%;text-align:left}
.qa-h{display:flex;align-items:baseline;gap:12px;font-size:16px}
.qa-h .gq{font-size:17px}
.qa-sc{display:inline-flex;align-items:baseline;gap:3px}.qa-sc b{font:italic 400 22px/1 var(--f-latin);color:#233d38}.qa-sc small{font:400 11px/1 var(--f-ui);color:#8fa29e}
.qa-v{margin-left:auto;font:400 12.5px/1 var(--f-ui);color:#334941}.qa-v .k{margin-right:6px;font-size:11px;letter-spacing:.1em;color:#8fa29e}
.qa-tr{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 0}
.qa-tr span{padding:2px 8px;border-radius:8px;font:400 10.5px/1.5 var(--f-ui);color:#7a5a24;background:rgba(244,223,174,.32)}
.qa-l{list-style:none;margin:0;padding:10px 0 0;border-top:1px solid rgba(118,152,150,.16);display:grid;gap:7px}
.qa-l li{display:grid;grid-template-columns:76px minmax(0,1fr) 48px;align-items:center;gap:10px}
.qa-n{font:400 11.5px/1.3 var(--f-voice);letter-spacing:.06em;color:#3d514b;white-space:nowrap}
.qa-bar{position:relative;height:2px;border-radius:1px;background:rgba(118,152,150,.16)}
.qa-bar b{position:absolute;left:0;top:0;bottom:0;border-radius:1px;background:linear-gradient(90deg,#9fdcd0,#b9c4f2);box-shadow:0 0 5px rgba(150,214,226,.75)}
.qa-l em{font:italic 400 14px/1 var(--f-latin);color:#334941;text-align:right;font-style:italic}.qa-l em small{font:400 10px/1 var(--f-ui);color:#94a6a2;font-style:normal}
.qa-chip{margin:0;font:400 11.5px/1.65 var(--f-voice);color:#694637}
.qa-src{margin:0;font:400 10px/1.6 var(--f-ui);color:#94a6a2}
.qa.compact{gap:8px}.qa.compact .qa-h .gq{font-size:15px}.qa.compact .qa-sc b{font-size:19px}
.cab-side .qa{padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(196,206,216,.5);box-sizing:border-box}
.rv p .gq{font-size:12.5px;margin-right:8px}.rv-sc{font:italic 400 14px/1 var(--f-latin);color:#334941;margin-right:10px}.rv-v{font:400 11.5px/1 var(--f-ui);color:#8fa29e}
/* ---------- v29 · the bag is full: leave one, take the new one ---------- */
.sw-new{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:10px 12px;border-radius:14px;background:linear-gradient(130deg,rgba(255,255,255,.75),rgba(226,242,236,.5));box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}
.sw-new .k{font:400 10.5px/1 var(--f-ui);letter-spacing:.12em;color:#8fa29e}
.sw-new b{font:500 14px/1.3 var(--f-voice);letter-spacing:.06em;color:#233d38}
.sw-new small{font:400 11px/1.4 var(--f-ui);color:#8fa29e}
.sw-list li{align-items:center}
.sw-b{flex:none;white-space:nowrap;font-size:11.5px;color:#334941;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(196,206,216,.6)}
.sw-b:hover{background:#fff}
.sw-note{margin:10px 0 0;font:400 11.5px/1.7 var(--f-voice);color:#62807a;text-wrap:pretty}
.sw-foot{display:flex;justify-content:flex-end;margin-top:8px}
.bg-list .bg-n{display:inline-flex;align-items:center;gap:4px;font:inherit;flex-wrap:nowrap}
.isaro-mine .m-panel.vug.swapping{width:min(440px,calc(100% - 32px))}
.sw-list li span{min-width:0}
.tools p.none{color:#a3b2af;letter-spacing:.04em}
/* ---------- v30 · the shop by kind ---------- */
.tl-tabs{display:flex;gap:4px;margin:0 0 6px;padding:4px;border-radius:14px;background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.tl-tabs button{flex:1;min-width:0;padding:9px 6px;border:0;border-radius:11px;background:transparent;font:400 13px/1.2 var(--f-voice);letter-spacing:.08em;color:#62807a;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.tl-tabs button:hover{color:#334941;background:rgba(255,255,255,.45)}
.tl-tabs button.on{color:#233d38;background:linear-gradient(130deg,rgba(255,255,255,.95),rgba(232,244,239,.8));box-shadow:inset 0 0 0 1px #fff,0 2px 8px -2px rgba(36,77,59,.18)}
.tl-tabs button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(140,191,174,.5)}
.tools li{padding:14px 2px}
.tools h3{font:500 15px/1.35 var(--f-voice);letter-spacing:.06em;color:#233d38}
.tools p.cur{margin-top:4px;font:400 12.5px/1.6 var(--f-ui);color:#334941}
.tools p.nx{margin-top:2px;font:400 11.5px/1.6 var(--f-ui);color:#8fa29e}
.tools p.none{margin-top:4px;font-size:12.5px}
.tools .have{margin-left:10px;font:400 11.5px/1 var(--f-ui);letter-spacing:.02em;color:#62807a}
.tools .max{font:400 11.5px/1 var(--f-ui);color:#8fa29e}
@media (max-width:400px){.tl-tabs button{font-size:12px;letter-spacing:.02em;padding:9px 2px}}
/* ---------- v32 · the stamina bar in the mine opens the stamina sheet ---------- */
button.m-bar{-webkit-appearance:none;appearance:none;width:100%;margin:-3px -6px;padding:3px 6px;border:0;border-radius:8px;background:none;text-align:left;cursor:pointer;box-sizing:content-box;transition:background .2s}
button.m-bar:hover{background:rgba(255,255,255,.55)}
button.m-bar:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(140,191,174,.5)}
button.m-bar.cue{animation:cue 1.2s ease-in-out 5}
@media (max-width:719px){button.m-bar{width:auto;margin:-3px -4px;padding:3px 4px}}
.stsheet,.worksheet,.pay-sheet{z-index:80}
/* ---------- v33 · on Fufu's site: sign in, the account line, waiting for a payment in another window ---------- */
.loginsheet .cs-in,.paywait .cs-in{width:min(400px,100%)}
.lg-lead,.pw-lead{margin:0 0 14px;font:400 12.5px/1.85 var(--f-voice);color:#334941;text-wrap:pretty}
.lg-form{display:grid;gap:0}
.lg-l{display:block;margin:10px 0 6px;font:400 11px/1.4 var(--f-ui);letter-spacing:.04em;color:#3d514b}
.lg-l:first-child{margin-top:0}
.lg-in{box-sizing:border-box;width:100%;height:42px;padding:0 13px;border:1px solid #ffffffbc;border-radius:11px;outline:none;
  font:400 15px/1 var(--f-ui);color:#233d38;background:linear-gradient(130deg,#ffffff96,#d0e6db40),#ffffff54;box-shadow:inset 0 1px 1px #ffffffc8,0 1px 2px rgba(36,77,59,.06);
  -webkit-user-select:text;user-select:text;transition:border-color .2s,box-shadow .2s}
.lg-in:focus{border-color:#8cae98a0;box-shadow:inset 0 1px 1px #ffffffc8,0 0 0 3px rgba(140,191,174,.28)}
.lg-code{letter-spacing:.42em;font:500 19px/1 var(--f-mono);text-align:center;padding-left:calc(13px + .42em)}
.lg-msg{min-height:18px;margin:10px 0 12px;font:400 11.5px/1.6 var(--f-ui);color:#3d514b;text-wrap:pretty}
.lg-msg:empty{min-height:0;margin:6px 0 8px}
.lg-msg.bad{color:#694637}
.loginsheet .cl-btns.one,.paywait .cl-btns.one{grid-template-columns:1fr}
.loginsheet .cl-b:disabled{opacity:.55;cursor:default;transform:none}
.paywait a.cl-b{text-decoration:none}
.lg-alt{display:flex;justify-content:center;gap:18px;margin-top:10px}
.pay-who{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 0;font:400 11px/1.5 var(--f-ui);color:#7b9592}
.pay-who span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-out{border:0;background:none;padding:2px 0;cursor:pointer;font:inherit;color:#3d514b;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(62,143,127,.4)}
.pw-wait{display:flex;justify-content:center;gap:7px;margin:4px 0 16px}
.pw-wait i{width:6px;height:6px;border-radius:50%;background:linear-gradient(140deg,#d9efe6,#a9cfc0);box-shadow:0 0 6px rgba(140,191,174,.6);animation:pwBreath 1.6s ease-in-out infinite}
.pw-wait i:nth-child(2){animation-delay:.2s}.pw-wait i:nth-child(3){animation-delay:.4s}
@keyframes pwBreath{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pw-wait i{animation:none;opacity:.7}}
.ticketsheet .tk-who{margin:2px 0 16px;padding:12px 14px;border-radius:12px;text-align:center;font:500 15px/1.4 var(--f-ui);letter-spacing:.02em;color:#233d38;background:linear-gradient(130deg,#ffffff96,#d0e6db40);box-shadow:inset 0 0 0 1px #ffffffbc}