/* 各页面布局：发现、任务详情、我的任务、发布、成就、登录。全站部件在 style.css。 */

/* ================= 发现 ================= */
.home{padding-bottom:80px}
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:30px 0 22px}
.hello h1{font-size:30px;line-height:1.3;letter-spacing:.02em}
.hello p{margin-top:6px;color:var(--ink-2);font-size:15px}
.hello p b{font:800 17px var(--num);color:var(--ink);padding:0 2px}
.hello-me{display:flex;gap:10px;flex:none;align-items:stretch}
.level-card{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;row-gap:8px;width:300px;padding:12px 16px;border-radius:18px;background:var(--paper);transition:transform 220ms var(--pop)}
.level-card:hover{transform:translateY(-2px)}
.level-card .lv{grid-row:span 1}
.level-text b{display:block;font-size:13.5px}
.level-text small{font-size:12px;color:var(--sub)}
.level-card .bar{grid-column:1/-1}
.mail-card{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:18px;background:var(--yellow);color:var(--ink);font-size:13px;animation:mail-wiggle 2.8s var(--arrive) infinite}
.mail-card svg{width:30px;height:30px}
.mail-card b{display:block;font-size:14px}
.mail-card small{font-weight:700}
@keyframes mail-wiggle{0%,75%,100%{transform:none}80%{transform:rotate(-2deg) translateY(-2px)}88%{transform:rotate(1.5deg)}94%{transform:rotate(-.5deg)}}
.hand{display:grid;align-content:start;gap:4px;width:250px;padding:12px 16px;border-radius:18px;background:var(--paper)}
.hand>span{font-size:12px;font-weight:700;color:var(--faint)}
.hand a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:13px;font-weight:700}
.hand a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hand a em{font:700 12px var(--num);font-style:normal;color:var(--sub)}

.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.sec-head h2{font-size:20px;letter-spacing:.02em}
.sec-head small{color:var(--sub);font-size:13px}
.sec-head .count{font:800 15px var(--num);color:var(--faint)}
.sec-head .right{margin-left:auto}
.shuffle{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:800;font-size:13px;transition:transform 200ms var(--pop)}
.shuffle svg{width:16px;height:16px;transition:transform 480ms var(--pop)}
.shuffle:hover svg{transform:rotate(180deg)}
.shuffle:active{transform:scale(.95)}
.pick-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pick{position:relative;display:grid;grid-template-rows:176px auto;border-radius:24px;background:var(--paper);overflow:hidden;transition:transform 300ms var(--pop),box-shadow 300ms var(--arrive)}
.pick:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 14px 0 -6px rgba(27,29,42,.12)}
.pick:active{transform:translateY(-2px) scale(.99);transition-duration:90ms}
.pick>a.cover{position:absolute;inset:0;z-index:1}
.pick form,.pick .sticker{position:relative;z-index:2}
.pick-field{position:relative;background:var(--hue);overflow:hidden}
.pick-art{position:absolute;inset:0;width:100%;height:100%}
.pick-art .fl{transition:transform 640ms var(--pop)}
.pick:hover .pick-art .fl{transform:translate(var(--fx,0),var(--fy,0))}
.pick-field .sticker{position:absolute;top:18px;left:18px}
.pick-x{position:absolute!important;top:12px;right:12px}
.pick-x button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:var(--ink);cursor:pointer;opacity:0;transition:opacity 160ms,transform 160ms var(--pop)}
.pick:hover .pick-x button,.pick-x button:focus-visible{opacity:1}
.pick-x button:active{transform:scale(.9)}
.pick-x svg{width:16px;height:16px}
.pick>.pick-medal{position:absolute;left:22px;top:122px;width:96px;height:96px;border-radius:50%;box-shadow:0 0 0 5px #fff;z-index:2;pointer-events:none}
.pick-body{display:grid;gap:6px;padding:40px 22px 20px}
.pick-body .kicker{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--sub);font-weight:700}
.pick-body .kicker .soon{color:var(--red-text)}
.pick-body h3{font-size:20px;line-height:1.4}
.pick-body .goal{font-size:13px}
.pick-foot{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--sub);font-weight:700}
.pick-foot .ava{width:24px;height:24px;font-size:11px}
.pick-foot form{margin-left:auto}

.ticker{margin:30px 0 22px;border-block:1.5px solid var(--ink);overflow:hidden;background:var(--paper)}
.ticker-in{display:flex;width:max-content;animation:marquee 60s linear infinite}
.ticker:hover .ticker-in{animation-play-state:paused}
.ticker-in>div{display:flex;align-items:center}
.tk{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;font-size:13.5px;font-weight:700;white-space:nowrap;border-right:1px solid var(--line)}
.tk:hover{background:var(--ground)}
.tk .medal{width:24px;height:24px}
.tk .ava{width:24px;height:24px;font-size:11px}
.tk em{font-style:normal;color:var(--sub);font-weight:700;font-size:12px}
@keyframes marquee{to{transform:translateX(-50%)}}

.bundle{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;gap:28px;padding:22px 28px;margin-bottom:34px}
.bundle-art svg{display:block;width:100%;height:auto}
.piece:not(.on) *{fill:var(--ground);stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:5 5}
.piece.on{transform-box:fill-box;transform-origin:center}
html:not([data-motion="off"]) .bundle .piece.on{animation:assemble 640ms var(--arrive) both;animation-delay:calc(var(--i) * 80ms);--dx:0px;--dy:-24px;--r:20deg}
.bundle-body{display:grid;gap:8px}
.bundle-body h2{display:flex;align-items:baseline;gap:10px;font-size:24px}
.bundle-body h2 small{font:800 15px var(--num);color:var(--faint)}
.bundle-body p{color:var(--sub);font-size:13px;max-width:44em}
.slots{display:flex;gap:14px;margin-top:6px}
.slot{display:grid;justify-items:center;gap:4px;font-size:11.5px;color:var(--faint);font-weight:700}
.slot .medal,.slot-need{width:58px;height:58px;border-radius:50%}
.slot-need{display:grid;place-items:center;border:2px dashed var(--line-2);font-size:20px;font-weight:800;color:var(--faint)}
.slot.filled small{color:var(--ink)}
.bundle.is-done{outline:2px solid var(--yellow);outline-offset:-2px}

.browse{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.browse-main{min-width:0}
.timeseg{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--paper)}
.timeseg a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--sub);white-space:nowrap}
.timeseg a[aria-current]{background:var(--ink);color:#fff}
.timeseg .medal{width:18px;height:18px}
.frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.search{display:flex;align-items:center;gap:8px;flex:1;min-width:200px;height:42px;padding:0 16px;border-radius:999px;background:var(--paper);color:var(--faint)}
.search svg{width:18px;height:18px;flex:none}
.search input{border:0!important;box-shadow:none!important;background:none;padding:0!important;height:100%;min-width:0}
.frow select{width:auto;height:42px;border-radius:999px;border:0;padding:0 34px 0 16px;font-weight:700;font-size:13px}
.toggle{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 8px;border-radius:999px;background:var(--paper);font-size:12.5px;font-weight:800;white-space:nowrap}
.toggle i{position:relative;width:36px;height:22px;border-radius:11px;background:var(--line-2);transition:background 200ms}
.toggle i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform 260ms var(--pop)}
.toggle.on i{background:var(--ink)}
.toggle.on i::after{transform:translateX(14px);background:var(--yellow)}
.tag-row{margin-bottom:16px}
.wall-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:-6px 0 10px;font-weight:800}
.wall-toolbar .btn{width:38px;padding:0}
.wall-viewport{overflow:hidden;margin:-8px;padding:8px}
.wall-zone .card{animation:rise 460ms var(--arrive) both;animation-delay:calc(var(--i) * 35ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.also{margin-top:18px;font-size:12.5px;color:var(--sub)}
.also a{font-weight:800;color:var(--ink);margin-left:10px}
.team{position:sticky;top:calc(var(--top) + 20px);display:grid;gap:14px}
.week{display:grid;gap:4px;padding:20px 20px 18px}
.week .big{font-size:60px}
.bigrow{display:flex;align-items:baseline;gap:10px}
.bigrow span{font-size:15px;font-weight:800}
.week small{color:var(--sub);font-size:12.5px}
.week small b{color:var(--green-text);font-family:var(--num)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:64px;margin-top:10px}
.days i{display:block;border-radius:6px 6px 2px 2px;background:var(--c,var(--ground));height:var(--h);transform-origin:bottom;animation:grow-up 600ms var(--pop) both}
.days i.today{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
@keyframes grow-up{from{transform:scaleY(0)}}
.days-l{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:10.5px;color:var(--faint);text-align:center;font-weight:700}
.feed{padding:18px 18px 8px}
.feed h3{font-size:14px;margin-bottom:4px}
.fi{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.feed h3+.fi{border-top:0}
.fi .ava{width:30px;height:30px}
.fi p{font-size:13px;line-height:1.55}
.fi p b{font-weight:800}
.fi p a:hover{text-decoration:underline}
.fi .meta{display:flex;align-items:center;gap:8px;margin-top:6px}
.fi .meta .medal{width:24px;height:24px}
.fi time{font:600 11px var(--num);color:var(--faint)}
.fi form{margin-left:auto}
.feed-empty{padding:10px 0 14px;color:var(--sub);font-size:13px}
.clap,.clap-count{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper);font:800 12px var(--num);cursor:pointer;transition:transform 220ms var(--pop),background 160ms}
.clap-count{margin-left:auto;border-color:var(--line-2);color:var(--sub);cursor:default}
.clap svg,.clap-count svg{width:14px;height:14px}
.clap:hover{transform:scale(1.08)}
.clap:active{transform:scale(.9)}
.clap.on{background:var(--yellow);border-color:var(--yellow)}
.wall-link{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-weight:800;font-size:13.5px}
.wall-link svg{width:18px;height:18px}

/* ================= 任务详情 ================= */
.detail{display:grid;gap:18px;padding-top:20px;padding-bottom:80px}
.back{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:var(--sub)}
.back svg{width:16px;height:16px}
.qband{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;padding:30px 34px 28px;border-radius:26px;background:var(--hue);color:var(--on,#fff)}
.qband>.pick-art{position:absolute;inset:0;z-index:0}
.qband>*{position:relative;z-index:1}
.qband .sticker{margin-bottom:10px}
.qband h1{font-size:34px;line-height:1.3;margin:6px 0;overflow-wrap:anywhere}
.qband .lead{font-size:15px;opacity:.95;max-width:44em}
.qband .chips{margin-top:14px}
.qband .chips span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:rgba(27,29,42,.86);color:#fff;font-size:12.5px;font-weight:700}
.qband-reward{display:grid;justify-items:center;gap:8px;text-align:center;padding:18px 22px 16px;border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.qband-reward .medal{width:112px;height:112px;border-radius:50%}
.qband-reward b{font-size:15px}

.flow{display:grid;grid-template-columns:repeat(4,1fr);padding:18px 24px}
.flow li{position:relative;display:grid;justify-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--faint);text-align:center}
.flow li::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line-2)}
.flow li:first-child::before{display:none}
.flow i{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--line-2);display:grid;place-items:center;font:800 12px var(--num);font-style:normal}
.flow small{font:600 11px var(--num);color:var(--faint);min-height:16px}
.flow .done{color:var(--ink)}
.flow .done::before,.flow .now::before{background:var(--ink)}
.flow .done i{background:var(--ink);box-shadow:none;color:#fff}
.flow .now{color:var(--ink)}
.flow .now i{background:var(--orange);box-shadow:0 0 0 5px rgba(243,152,0,.22);color:#fff;animation:pulse 2.2s var(--arrive) infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(243,152,0,.08)}}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.dmain,.dside{display:grid;gap:18px;min-width:0}
.dside{position:sticky;top:calc(var(--top) + 20px)}
.block{padding:24px 26px}
.block>.sec{margin-bottom:14px}
.why ul{display:grid;gap:10px}
.why li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.why li i{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;font:800 12px var(--num);font-style:normal;color:#fff;background:var(--ink)}
.ask{position:relative;margin-top:8px;padding:20px 22px 16px;border-radius:14px;background:var(--ground);font-size:15px;line-height:1.85;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.ask::before{content:"“";position:absolute;top:-16px;left:12px;font:800 48px/1 var(--num);color:var(--ink)}
.ask cite{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--faint);font-weight:700;white-space:normal}
.rules{display:grid;grid-template-columns:1fr 1fr}
.rules>div{padding:22px 26px;min-width:0}
.rules>div+div{border-left:1px solid var(--line)}
.rules .sec{margin-bottom:10px}
.rules p{white-space:pre-wrap;overflow-wrap:anywhere}
.rules li{position:relative;padding:8px 0 8px 22px;border-bottom:1px dashed var(--line)}
.rules li:last-child{border-bottom:0}
.rules li::before{content:"";position:absolute;left:4px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.comment{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:12px;padding-top:16px;border-top:1px solid var(--line)}
.comment textarea{min-height:46px;height:46px}
.act{display:grid;gap:12px;padding:24px}
.act h3{font-size:17px}
.act>p{font-size:12.5px;color:var(--sub)}
.act .est{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.act .est div{padding:12px 14px;border-radius:14px;background:var(--ground)}
.act .est small{display:block;font-size:11.5px;color:var(--faint);font-weight:700}
.act .est b{font-size:17px}
.act .est b.soon{color:var(--red-text)}
.act .btn{height:54px;font-size:16px}
.act .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.act .row .btn{height:48px;font-size:15px}
.praise{display:flex;flex-wrap:wrap;gap:6px}
.praise .chip{height:30px}
.receipt{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--ink);color:#fff;overflow:hidden}
.receipt .stamp{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--yellow);color:var(--yellow);font-size:16px;font-weight:900;transform:rotate(-12deg)}
.receipt b{display:block;font-size:16px}
.receipt small{color:rgba(255,255,255,.75);font-size:12.5px}
html:not([data-motion="off"]) .receipt .stamp{animation:stamp 520ms var(--pop) 120ms both}
html:not([data-motion="off"]) .receipt{animation:receipt-in 380ms var(--arrive) both}
@keyframes stamp{0%{transform:scale(2.2) rotate(-30deg);opacity:0}55%{transform:scale(.92) rotate(-10deg);opacity:1}100%{transform:scale(1) rotate(-12deg)}}
@keyframes receipt-in{from{opacity:0;transform:translateY(-8px)}}
.tbl{display:grid;padding:6px 22px}
.tbl>div{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:8px;min-height:46px;border-bottom:1px solid var(--line)}
.tbl>div:last-child{border-bottom:0}
.tbl dt{font-size:12px;color:var(--faint);font-weight:700}
.tbl dd{display:flex;align-items:center;gap:8px;font-weight:700;flex-wrap:wrap;min-width:0}
.tbl dd small{font:600 12px var(--num);color:var(--sub)}
.tbl .ava{width:24px;height:24px;font-size:11px}
.tbl .muted{color:var(--faint);font-weight:600}
.ghost-medal{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1.5px dashed var(--line-2);font-size:12.5px;color:var(--sub);font-weight:700}
.ghost-medal .medal{width:40px;height:40px}
.done-card{display:grid;justify-items:center;gap:8px;padding:26px 22px;text-align:center}
.done-card .medal{width:110px;height:110px}
.done-card b{font-size:18px}
.done-card small{color:var(--sub)}

/* ================= 我的任务 ================= */
.mine{display:grid;gap:28px;padding-top:24px;padding-bottom:80px}
.mine-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.mine-group{display:grid;gap:12px}
.mine-group .sec small{margin-left:4px}
.mlist{display:grid;padding:4px 22px}
.mrow{display:grid;grid-template-columns:44px minmax(0,1fr) 200px 84px;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);transition:background 160ms}
.mrow:last-child{border-bottom:0}
.mrow .medal{width:44px;height:44px}
.mrow-main{min-width:0}
.mrow-main b{display:block;font-size:15px}
.mrow-main p{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-tag{flex:none;font-style:normal;font-weight:700;font-size:11px;line-height:19px;padding:0 7px;border-radius:999px;background:var(--ground);color:var(--ink-2)}
.ev-tag.return{background:var(--red);color:#fff}
.ev-tag.accept{background:var(--green);color:#fff}
.mrow .due{justify-self:end}
.mrow:hover .medal .m-a{animation:m-pop 420ms var(--pop) calc(var(--i) * 110ms) both}

/* ================= 发布 ================= */
.compose{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start;padding-top:24px;padding-bottom:80px}
.editor{display:grid;gap:22px;padding:30px 32px 32px}
.editor h1{font-size:28px}
.editor .intro{color:var(--sub);margin-top:-14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.seg.two-up{grid-template-columns:1fr 1fr}
.opt{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--line-2);cursor:pointer;transition:border-color 160ms,background 160ms,transform 180ms var(--pop)}
.opt:active{transform:scale(.97)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .medal{width:42px;height:42px}
.opt b{display:block;font-size:14px}
.opt small{display:block;font-size:12px;color:var(--sub);line-height:1.4}
.opt:has(input:checked){border-color:var(--ink);background:var(--ground);box-shadow:inset 0 0 0 1px var(--ink)}
.opt:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.dot-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--ground);font-weight:800}
.dot-ic.hot{background:var(--red);color:#fff}
.tag-input{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:46px;padding:6px 8px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--paper)}
.tag-input:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(40,102,177,.16)}
.tag-input input{flex:1;min-width:120px;border:0!important;box-shadow:none!important;padding:4px 6px!important;height:32px}
.tag-input .chip{height:30px;background:var(--ink);border-color:var(--ink);color:#fff}
.tag-input .chip button{border:0;background:none;color:inherit;cursor:pointer;padding:0 0 0 2px;font-weight:800}
.suggest{display:flex;flex-wrap:wrap;gap:6px}
.suggest button{height:28px;padding:0 10px;border:1px dashed var(--line-2);border-radius:999px;background:none;font-size:12px;font-weight:700;color:var(--sub);cursor:pointer}
.suggest button:hover{border-style:solid;color:var(--ink)}
.submit-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:6px;border-top:1px solid var(--line)}
.submit-row p{font-size:12.5px;color:var(--sub)}
.preview-col{position:sticky;top:calc(var(--top) + 20px);display:grid;gap:14px}
.preview-col .card{outline:2px solid var(--ink)}
.preview-col .card:hover{transform:none;box-shadow:none}
.explain{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:20px}
.explain .medal{width:86px;height:86px}
.explain b{font-size:18px}
.explain p{font-size:12.5px;color:var(--sub);margin-top:4px}

/* ================= 成就 ================= */
.ach{display:grid;gap:18px;padding-top:26px;padding-bottom:80px}
.ach-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}
.pedit{display:grid;gap:16px;padding:24px;align-content:start}
.pedit-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pedit-head small{color:var(--sub);font-size:12.5px}
.shelf-editor summary{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;font-weight:800;font-size:13px;cursor:pointer;list-style:none}
.shelf-editor summary::-webkit-details-marker{display:none}
.shelf-editor[open] summary{background:var(--ink);color:#fff}
.shelf-editor form{display:grid;gap:12px;margin-top:14px}
.shelf-pick{display:flex;flex-wrap:wrap;gap:8px}
.shelf-pick label{position:relative;display:grid;justify-items:center;gap:4px;padding:8px;border-radius:14px;border:1.5px solid var(--line-2);font-size:12px;font-weight:800;cursor:pointer;transition:transform 180ms var(--pop)}
.shelf-pick label:active{transform:scale(.95)}
.shelf-pick input{position:absolute;opacity:0}
.shelf-pick .medal{width:46px;height:46px}
.shelf-pick label:has(input:checked){border-color:var(--ink);background:var(--ground);box-shadow:inset 0 0 0 1px var(--ink)}

.level-panel{display:grid;align-content:space-between;gap:16px;padding:26px 28px}
.level-now{display:flex;align-items:baseline;gap:12px}
.level-now b{font:700 64px/.9 var(--num);letter-spacing:-.03em}
.level-now span{font-size:16px;font-weight:800}
.level-panel .bar{height:12px}
.level-meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--sub);font-weight:700}
.ladder{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ladder li{display:grid;gap:4px;font-size:11.5px;font-weight:700;color:var(--faint);text-align:center}
.ladder li i{height:8px;border-radius:4px;background:var(--line)}
.ladder li.got i{background:var(--ink)}
.ladder li.now{color:var(--ink)}
.ladder li.now i{background:var(--yellow);box-shadow:0 0 0 2px var(--ink)}
.xp-rule{display:flex;flex-wrap:wrap;gap:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--sub)}
.xp-rule span{display:inline-flex;align-items:center;gap:6px}
.xp-rule .medal{width:20px;height:20px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{display:grid;gap:2px;padding:22px 24px}
.stat b{font:700 44px/1 var(--num);letter-spacing:-.02em}
.stat span{font-size:13px;font-weight:800}
.stat small{font-size:12px;color:var(--sub)}
.honor-back{display:grid;gap:0;padding:0 20px 16px}
.honor-back li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:10px 0;border-top:1px dashed var(--line-2);font-size:12.5px}
.honor-back .stamp-date{grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--c,var(--ink));color:var(--c,var(--ink));font:800 11px var(--num);transform:rotate(-8deg)}
.honor-back b{font-size:13px}
.honor-back span{color:var(--sub)}
.ach-mid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch}
.story{padding:24px 28px}
.story li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.story li:first-child{border-top:0}
.story .medal{width:44px;height:44px}
.story b{display:block;font-size:14.5px}
.story small{font-size:12px;color:var(--sub)}
.story time{font:700 12px var(--num);color:var(--sub)}
.likes{padding:24px 28px;display:grid;gap:12px;align-content:start}
.likes p{font-size:12.5px;color:var(--sub)}
.likes form{display:grid;gap:12px}
.team-wall{padding:24px 28px 28px}
.wall-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.wall-grid .plate.me{outline:3px solid var(--ink);outline-offset:3px}

/* ================= 登录 ================= */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.auth-art{position:relative;overflow:hidden;background:var(--blue);color:#fff;padding:48px;display:grid;align-content:space-between}
.auth-art svg.compose{position:absolute;right:-40px;bottom:-30px;width:min(640px,90%);height:auto}
.auth-art .logo{position:relative}
.auth-art .wordmark{color:#fff;font-size:30px}
.auth-art .wordmark small{color:rgba(255,255,255,.75)}
.auth-art .logo svg{width:40px;height:40px;padding:4px;border-radius:12px;background:#fff}
.auth-art h1{position:relative;font-size:40px;line-height:1.3;max-width:9em}
.slogan{line-height:1.62!important;margin-bottom:.4em}
.slogan .s-dots i{position:relative;display:inline-block;font-style:normal}
.slogan .s-dots i::after{content:"";position:absolute;left:50%;bottom:-.02em;width:.19em;height:.19em;margin-left:-.095em;border-radius:50%;background:var(--c)}
.slogan .s-line{position:relative;display:inline-block}
.slogan .s-line::after{content:"";position:absolute;left:.04em;right:.04em;bottom:-.1em;height:.11em;border-radius:.06em;background:#fff;transform-origin:left center}
.slogan .s-plane{position:relative;display:inline-block;isolation:isolate;padding:0 .1em;margin-left:.06em}
.slogan .s-plane::before{content:"";position:absolute;inset:.12em 0 .02em;z-index:-1;border-radius:.06em;background:var(--red);transform-origin:left center}
html:not([data-motion="off"]) .slogan .s-dots i::after{animation:m-pop 440ms var(--pop) calc(320ms + var(--k) * 120ms) both}
html:not([data-motion="off"]) .slogan .s-line::after{animation:m-grow 520ms var(--arrive) 900ms both}
html:not([data-motion="off"]) .slogan .s-plane::before{animation:m-grow 600ms var(--arrive) 1250ms both}
.auth-art p{position:relative;max-width:26em;opacity:.9}
.auth-medals{position:relative;display:flex;gap:10px}
.auth-medals .medal{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 3px #fff}
.auth-form{display:grid;place-items:center;padding:40px 24px;background:var(--paper)}
.auth-form form{display:grid;gap:18px;width:min(380px,100%)}
.auth-form h2{font-size:26px}
.auth-form .switch{font-size:13px;color:var(--sub)}
.auth-form .switch a{color:var(--blue-text);font-weight:800}
.auth-form .demo{padding:12px 14px;border-radius:14px;background:var(--ground);font-size:12.5px;color:var(--sub)}
.compose .pc{transform-box:fill-box;transform-origin:center}
html:not([data-motion="off"]) .compose .pc{animation:assemble 640ms var(--arrive) both;animation-delay:calc(var(--i) * 80ms + 120ms)}
@keyframes assemble{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}

/* 错误页 */
.error-page{display:grid;justify-items:center;gap:14px;padding:90px 20px;text-align:center}
.error-page .big{font-size:120px}

/* ================= 响应式 ================= */
@media(max-width:1180px){
  .browse{grid-template-columns:minmax(0,1fr)}
  .team{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .team .wall-link{grid-column:1/-1}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ach-top,.ach-mid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:980px){
  .hello{flex-direction:column;align-items:stretch}
  .hello-me{flex-wrap:wrap}
  .level-card,.hand{flex:1;width:auto;min-width:220px}
  .pick-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(290px,80%);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 10px;scrollbar-width:none}
  .pick{scroll-snap-align:start}
  .bundle{grid-template-columns:minmax(0,1fr)}
  .bundle-art{max-width:420px}
  .dgrid,.compose{grid-template-columns:minmax(0,1fr)}
  .dside,.preview-col{position:static}
  .qband{grid-template-columns:minmax(0,1fr)}
  .qband-reward{justify-items:start;grid-template-columns:auto 1fr;text-align:left;align-items:center}
  .wall-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-art{min-height:300px;padding:28px 24px}
  .auth-art h1{font-size:30px}
}
@media(max-width:760px){
  .hello{padding:18px 0 14px;gap:14px}
  .hello h1{font-size:24px}
  .ticker{margin:22px 0 18px}
  .bundle{padding:18px;gap:16px;margin-bottom:24px}
  .slots{flex-wrap:wrap}
  .timeseg{overflow-x:auto;max-width:100%;scrollbar-width:none;margin-left:0}
  .search{flex-basis:100%}
  .tag-row{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:0 var(--gutter);scrollbar-width:none}
  .team{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .qband{padding:22px 20px;border-radius:22px}
  .qband>.pick-art{display:none}
  .qband h1{font-size:26px}
  .qband-reward .medal{width:84px;height:84px}
  .flow{padding:16px 10px}
  .block,.rules>div{padding:20px}
  .rules{grid-template-columns:minmax(0,1fr)}
  .rules>div+div{border-left:0;border-top:1px solid var(--line)}
  .mine-head{flex-direction:column;align-items:stretch}
  .mlist{padding:2px 16px}
  .mrow{grid-template-columns:40px minmax(0,1fr) auto;gap:4px 12px;align-items:start}
  .mrow .medal{width:40px;height:40px;grid-row:span 2}
  .mrow-main p{white-space:normal}
  .mrow .st{grid-column:2}
  .mrow .due{grid-column:3;grid-row:1}
  .editor{padding:22px 20px}
  .two,.seg{grid-template-columns:minmax(0,1fr)}
  .seg.two-up{grid-template-columns:1fr 1fr}
  .pedit,.level-panel,.story,.likes,.team-wall{padding:20px}
  .stat{padding:16px}
  .stat b{font-size:34px}
  .wall-grid{grid-template-columns:minmax(0,1fr)}
}

/* ================= 发现 · 头部的迷你勋章柜 ================= */
.mini-case{grid-column:1/-1;display:flex;align-items:center;gap:5px;padding-top:10px;border-top:1px dashed var(--line)}
.mc{position:relative;width:26px;height:26px;flex:none}
.mc .medal{width:100%;height:100%}
.mc .medal.ghost{opacity:.7}
.mc b{position:absolute;right:-5px;bottom:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--ink);color:#fff;font-size:9.5px;line-height:15px;text-align:center;box-shadow:0 0 0 1.5px #fff}
.mini-case em{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;color:var(--sub);white-space:nowrap}
.mini-case em b{font:800 19px var(--num);color:var(--ink);margin-right:2px}
.level-card:hover .mc.got{animation:mc-hop 460ms var(--pop) calc(var(--i) * 45ms)}
@keyframes mc-hop{35%{transform:translateY(-6px) rotate(-8deg)}}

/* ================= 发现 · 方向条：每次进来都能重新点 ================= */
.dirs{padding:22px 24px 20px;margin-bottom:30px}
.dirs-head{display:flex;align-items:baseline;gap:4px 14px;flex-wrap:wrap;margin-bottom:16px}
.dirs-head h2{font-size:22px;letter-spacing:.02em}
.dirs-head p{color:var(--sub);font-size:13px}
.dirs-side{margin-left:auto;display:flex;align-items:center;gap:8px}
.dirs-count{font-size:12.5px;font-weight:800;color:var(--sub);white-space:nowrap}
.dirs-count b{display:inline-block;font-size:17px;color:var(--ink);min-width:1ch;text-align:center}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dir{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:end;gap:1px;min-height:118px;padding:12px 14px 12px;border-radius:18px;background:var(--ground);color:var(--ink);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform 240ms var(--pop),color 200ms;animation:dir-in 460ms var(--pop) calc(var(--i) * 28ms) both}
@keyframes dir-in{from{opacity:0;transform:translateY(12px) scale(.94)}}
.dir:hover{transform:translateY(-3px)}
.dir:active{transform:scale(.95);transition-duration:80ms;transition-timing-function:var(--press)}
.dir input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.dir:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.dir-fill{position:absolute;inset:0;z-index:-1;background:var(--tone);clip-path:circle(0% at var(--x,50%) var(--y,50%));transition:clip-path 480ms var(--arrive)}
.dir-art{position:absolute;top:10px;right:10px;width:54px;height:54px;overflow:visible;transition:transform 420ms var(--pop)}
.dir-art .e1{fill:var(--tone);transition:fill 200ms}
.dir-art .e1s{fill:none;stroke:var(--tone);transition:stroke 200ms}
.dir-art .e2{fill:var(--ink)}
.dir-art .d-a{transform-box:fill-box;transform-origin:center}
.dir-art .d-grow{transform-origin:left center}
.dir:hover .dir-art{transform:rotate(-8deg) scale(1.06)}
.dir-art.anim .d-a{animation:m-pop 420ms var(--pop) calc(var(--i) * 70ms) both}
.dir-art.anim .d-grow{animation-name:m-grow;animation-timing-function:var(--arrive)}
.dir b{font-size:16.5px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;padding-right:8px}
.dir small{font-size:11.5px;font-weight:700;color:var(--sub);transition:color 200ms}
.dir em{font-style:normal;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 200ms}
.dir-check{position:absolute;top:10px;left:10px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transform:scale(0) rotate(-40deg);transition:transform 340ms var(--pop)}
.dir-check svg{width:15px;height:15px;stroke-width:3}
.dir:has(input:checked){color:var(--on)}
.dir:has(input:checked) .dir-fill{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
.dir:has(input:checked) .dir-art .e1{fill:#fff}
.dir:has(input:checked) .dir-art .e1s{stroke:#fff}
.dir:has(input:checked) small,.dir:has(input:checked) em{color:inherit;opacity:.82}
.dir:has(input:checked) .dir-check{transform:scale(1) rotate(-8deg)}
.dir-extra{display:none}
.dirs.more .dir-extra{display:grid}
.dirs-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:0;border:0;background:none;color:var(--sub);font-size:13px;font-weight:800;cursor:pointer}
.dirs-more:hover{color:var(--ink)}
.dirs-more svg{width:16px;height:16px;transition:transform 260ms var(--pop)}
.dirs.more .dirs-more svg{transform:rotate(180deg)}

/* ---------- 两排推荐：按你选的方向 / 按你做过的 ---------- */
.lane{margin-bottom:30px}
.lane .sec-head{align-items:center}
.lane-why{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--sub);font-weight:700}
.lane-why .tag{height:24px;font-size:12px}
.lane-why .tag i{font-style:normal;margin-left:4px;color:var(--faint);font-size:11px}
.tag[style*="--tone"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tone);margin-right:5px}
.lane-body{position:relative}
.lane-empty{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;min-height:210px}
.lane-empty i{border-radius:24px;outline:2px dashed var(--line-2);outline-offset:-2px}
.lane-empty p{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;padding:20px;text-align:center;color:var(--sub);font-size:13px}
.lane-empty b{color:var(--ink);font-size:16px}

/* ================= 成就 · 勋章柜 ================= */
.case{position:relative;isolation:isolate;overflow:hidden;padding:28px 30px 30px;border-radius:28px;background:#1B1D2A radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.7px) 0 0/22px 22px;color:#fff}
.case-deco{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.case-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:18px 44px;margin-bottom:24px}
.case-label{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:12.5px;font-weight:800;letter-spacing:.12em;transform:rotate(-3deg)}
.case-title h1{display:flex;align-items:baseline;gap:10px;margin-top:12px;font-size:18px;font-weight:800;white-space:nowrap}
.case-title h1 b{font:700 88px/.82 var(--num);letter-spacing:-.04em}
.case-facts{display:flex;flex-wrap:wrap;gap:12px 30px;margin:0;padding-bottom:4px}
.case-facts div{display:grid;gap:2px}
.case-facts dt{font-size:12px;color:rgba(255,255,255,.55);font-weight:700}
.case-facts dd{margin:0;font-size:14px;color:rgba(255,255,255,.6);font-weight:700}
.case-facts dd b{font-size:17px;color:#fff}
.case-facts dd.num b{font:700 26px/1.1 var(--num)}
.case-tip{display:flex;align-items:center;gap:6px;padding-bottom:6px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.6)}
.case-grid{display:grid;grid-template-columns:84px repeat(3,minmax(0,1fr));gap:14px}
.case-col{display:flex;align-items:baseline;gap:8px;padding:0 6px}
.case-col b{font-size:18px}
.case-col small,.case-row small{font-size:12px;font-weight:700;color:rgba(255,255,255,.5)}
.case-row{display:grid;align-content:center;gap:2px}
.case-row b{font-size:15px}
.case-row.complete b::after{content:"齐了";margin-left:6px;padding:0 7px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:11px;line-height:18px;vertical-align:2px}
.tile{--edge:color-mix(in srgb,var(--hue) 60%,#000);--edge-2:color-mix(in srgb,var(--hue) 42%,#000);position:relative;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:transform 280ms var(--pop),box-shadow 200ms}
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(70% 62% at 50% 0%,color-mix(in srgb,var(--hue) 42%,transparent),transparent 72%);pointer-events:none}
.tile.locked::before{background:radial-gradient(70% 62% at 50% 0%,rgba(255,255,255,.06),transparent 72%)}
.tile:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.tile summary{position:relative;display:grid;justify-items:center;gap:4px;padding:24px 14px 18px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.tile summary::-webkit-details-marker{display:none}
.tile summary:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:22px}
.tile-stage{position:relative;width:116px;height:116px;margin-bottom:18px;transition:transform 140ms var(--press)}
.case .tile-stage{animation:tile-drop 640ms var(--pop) calc(var(--n) * 70ms + 120ms) both}
@keyframes tile-drop{0%{opacity:0;transform:translateY(-38px) scale(.72)}55%{opacity:1;transform:translateY(5px) scale(1.05,.95)}100%{transform:none}}
.tile summary:active .tile-stage{transform:scale(.93)}
.tile-stage .medal{position:relative;width:100%;height:100%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35));transition:transform 360ms var(--pop)}
.tile:hover .tile-stage .medal{transform:translateY(-6px) rotate(-6deg)}
.tile-stack{position:absolute;inset:0;border-radius:50%;background:var(--edge);opacity:0}
.tile-stage[data-stack="2"] .tile-stack{opacity:1;transform:translateY(7px)}
.tile-stage[data-stack="3"] .tile-stack{opacity:1;transform:translateY(7px);box-shadow:0 7px 0 var(--edge-2)}
.tile-stage::after{content:"";position:absolute;left:6%;right:6%;bottom:-20px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);transition:transform 360ms var(--pop),opacity 360ms}
.tile:hover .tile-stage::after{transform:scale(.8);opacity:.7}
.tile.locked .medal{opacity:.2;filter:none}
.tile.picked .tile-stage .medal{visibility:hidden}
.tile-name{display:flex;align-items:baseline;gap:8px}
.tile-name b{font-size:20px}
.tile-name .cnt{font:700 22px var(--num)}
.tile.locked .cnt{display:none}
.tile.locked .tile-name b{color:rgba(255,255,255,.55)}
.tile-sub{font-size:12px;font-weight:700;color:rgba(255,255,255,.55)}
.on-plate{position:absolute;top:12px;right:12px;padding:0 8px;border-radius:999px;background:#fff;color:var(--ink);font-size:11px;font-weight:800;line-height:20px}
.tile.collection-new{box-shadow:inset 0 0 0 2px var(--yellow)}
.tile.collection-new summary::after{content:"新";position:absolute;top:10px;left:12px;width:26px;height:26px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-size:12.5px;font-weight:800;transform:rotate(-10deg);animation:m-stamp 360ms var(--pop) both}
.tile-back{padding:0 16px 16px}
.tile-back .honor-back{padding:0}
.tile-back .honor-back li{border-top-color:rgba(255,255,255,.14)}
.tile-back .honor-back span,.tile .how{color:rgba(255,255,255,.65)}
.tile .how{font-size:12.5px;font-weight:700}
.tile .how a{color:#fff;text-decoration:underline}

/* ---------- 拿起一枚来看 ---------- */
.inspect{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.inspect::backdrop{background:transparent}
.inspect-bg{position:absolute;inset:0;overflow:hidden;background:#12141C}
.inspect-glow{position:absolute;left:var(--cx,32%);top:var(--cy,48%);width:min(1000px,150vmin);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background-color:var(--hue,#2866B1);-webkit-mask-image:radial-gradient(closest-side,#000,rgba(0,0,0,.35) 45%,transparent);mask-image:radial-gradient(closest-side,#000,rgba(0,0,0,.35) 45%,transparent);opacity:.55;transition:background-color 420ms var(--arrive)}
.inspect-rays{position:absolute;left:var(--cx,32%);top:var(--cy,48%);width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.045) 0deg 6deg,transparent 6deg 18deg);-webkit-mask-image:radial-gradient(closest-side,#000 6%,transparent 55%);mask-image:radial-gradient(closest-side,#000 6%,transparent 55%);animation:rays 80s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
.inspect-bits{position:absolute;inset:0;width:100%;height:100%}
.inspect-bits .bit{fill:#fff;opacity:.13;transform-box:fill-box;animation:bit-drift 10s ease-in-out var(--d) infinite}
@keyframes bit-drift{50%{transform:translate(14px,-18px) rotate(20deg)}}
.inspect-in{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,440px);align-items:center;gap:24px 48px;padding:48px max(40px,calc((100% - 1180px) / 2));overflow:auto;overscroll-behavior:contain}
.inspect-stage{--coin:min(300px,62vw);display:grid;justify-items:center;gap:18px;user-select:none;-webkit-user-select:none}
.coin-fly{position:relative;isolation:isolate;width:var(--coin);height:var(--coin)}
.coin-float{width:100%;height:100%;perspective:1100px;animation:coin-float 3.8s ease-in-out infinite}
@keyframes coin-float{50%{transform:translateY(-10px)}}
.coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;cursor:grab;touch-action:pan-y}
.coin.dragging{cursor:grabbing}
.coin-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.coin-front{transform:translateZ(7px)}
.coin-front .medal{width:100%;height:100%}
.coin-front .medal.ghost{opacity:.3}
.coin-front::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.6) 49%,transparent 60%) 140% 0/300% 100% no-repeat;pointer-events:none}
.coin.shine .coin-front::after{animation:shine 900ms var(--arrive)}
@keyframes shine{from{background-position:140% 0}to{background-position:-40% 0}}
.coin-back{transform:rotateY(180deg) translateZ(7px);display:grid;place-content:center;justify-items:center;gap:8px;padding:15%;background:var(--hue);color:var(--on,#fff);text-align:center;box-shadow:inset 0 0 0 7px rgba(255,255,255,.28),inset 0 0 0 9px rgba(0,0,0,.08)}
.coin-back .cb-n{font:800 12px var(--num);letter-spacing:.24em;opacity:.75}
.coin-back q{font-size:clamp(15px,calc(var(--coin) / 15),21px);font-weight:800;line-height:1.45;quotes:"「" "」";text-shadow:0 1px 0 rgba(0,0,0,.12)}
.coin-back small{font-size:12px;font-weight:700;opacity:.8}
.coin-back .cb-q{font:800 clamp(44px,calc(var(--coin) / 4),76px)/1 var(--num);opacity:.85}
.coin-edge i{position:absolute;inset:0;border-radius:50%;background:var(--edge,#333);transform:translateZ(var(--z))}
.coin-shadow{width:calc(var(--coin) * .62);height:18px;margin-top:-4px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);animation:shadow-breathe 3.8s ease-in-out infinite}
@keyframes shadow-breathe{50%{transform:scale(.86);opacity:.7}}
.inspect .burst{z-index:-1}
.inspect-tools{display:flex;align-items:center;gap:14px}
.inspect-tip{display:grid;justify-items:center;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.6);text-align:center}
.inspect-tip span{font-size:11px;color:rgba(255,255,255,.4)}
.inspect-nav,.inspect-close{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background 160ms,transform 160ms var(--pop)}
.inspect-nav:hover,.inspect-close:hover{background:rgba(255,255,255,.2)}
.inspect-nav:active,.inspect-close:active{transform:scale(.9)}
.inspect-nav svg,.inspect-close svg{width:20px;height:20px}
.inspect-close{position:absolute;top:20px;right:20px;z-index:2}
.inspect-info{display:grid;gap:16px;align-content:center;min-width:0}
.inspect-kicker{font-size:12.5px;font-weight:800;color:rgba(255,255,255,.6);letter-spacing:.06em}
.inspect-info h2{display:flex;align-items:center;gap:14px;font-size:68px;line-height:1;letter-spacing:.02em;transform-origin:left center}
.inspect-info h2 .award-tier{font-size:13px;height:26px}
.inspect-nums{display:flex;flex-wrap:wrap;gap:12px 30px}
.inspect-nums div{display:grid;gap:2px}
.inspect-nums b{font:700 36px/1 var(--num);letter-spacing:-.02em}
.inspect-nums small{font-size:12px;font-weight:700;color:rgba(255,255,255,.55)}
.inspect-info h3{font-size:13px;color:rgba(255,255,255,.6);margin-top:4px}
.tickets{display:grid;gap:8px;max-height:min(44vh,400px);overflow:auto;padding:2px 4px 2px 2px;scrollbar-width:thin}
.ticket{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;padding:11px 14px;border-radius:14px;background:#fff;color:var(--ink)}
.ticket .stamp-date{grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--c);color:var(--c);font:800 11px var(--num);transform:rotate(-8deg)}
.ticket b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket a{color:inherit}
.ticket a:hover{text-decoration:underline}
.ticket span{font-size:12px;color:var(--sub)}
.ticket q{color:var(--ink-2);font-weight:700;quotes:"「" "」"}
.inspect-lock{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.08);font-size:14px;line-height:1.7;color:rgba(255,255,255,.8)}
.inspect-lock b{color:#fff}
.inspect-actions{display:flex;flex-wrap:wrap;gap:10px}
.inspect .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.inspect .btn:not(.btn-line){background:#fff;color:var(--ink);border-color:#fff}

@media(max-width:980px){
  .case-head{grid-template-columns:auto minmax(0,1fr)}
  .case-tip{grid-column:1/-1}
  .inspect-in{grid-template-columns:minmax(0,1fr);align-content:start;padding:64px 24px 32px}
  .tickets{max-height:none;overflow:visible}
}
@media(max-width:760px){
  .hello-me .mail-card{flex:1 1 100%}
  .dirs{padding:18px 16px 16px;margin-bottom:24px}
  .dirs-head h2{font-size:19px}
  .dirs-side{margin-left:0;width:100%}
  .dirs-side .btn-ghost{margin-left:auto}
  .dir-grid{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:132px;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scroll-snap-type:x proximity;scrollbar-width:none}
  .dir{min-height:98px;scroll-snap-align:start}
  .dir-art{width:42px;height:42px}
  .dir em{display:none}
  .dir-extra{display:grid}
  .dirs-more{display:none}
  .lane-empty{grid-template-columns:minmax(0,1fr);min-height:150px}
  .lane-empty i+i{display:none}
  .case{padding:20px 16px 18px;border-radius:22px}
  .case-head{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:18px}
  .case-title h1 b{font-size:64px}
  .case-facts{gap:10px 22px}
  .case-facts dd.num b{font-size:21px}
  .case-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .case-corner,.case-col{display:none}
  .case-row{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;margin-top:6px}
  .tile{border-radius:16px}
  .tile summary{padding:14px 4px 12px;gap:2px}
  .tile-stage{width:72px;height:72px;margin-bottom:12px}
  .tile-stage[data-stack="2"] .tile-stack,.tile-stage[data-stack="3"] .tile-stack{transform:translateY(5px)}
  .tile-stage[data-stack="3"] .tile-stack{box-shadow:0 5px 0 var(--edge-2)}
  .tile-stage::after{bottom:-15px;height:10px}
  .tile-name{gap:5px}
  .tile-name b{font-size:16px}
  .tile-name .cnt{font-size:16px}
  .tile-sub{font-size:11px;text-align:center}
  .on-plate{top:6px;right:6px;font-size:10px;line-height:17px;padding:0 6px}
  .inspect-in{padding:60px 16px 28px;gap:18px}
  .inspect-stage{--coin:min(210px,58vw)}
  .inspect-info h2{font-size:48px}
  .inspect-nums b{font-size:28px}
  .inspect-close{top:12px;right:12px}
}

/* ================= 发现 · 纸条（鼓掌的回声、学期绘卷） ================= */
.pinboard{display:flex;flex-wrap:wrap;gap:14px;margin:-6px 0 24px}
.note-card{position:relative;display:flex;align-items:center;gap:12px;max-width:380px;padding:14px 18px 13px;border-radius:4px 4px 14px 4px;background:#FFF6D6;color:var(--ink);box-shadow:0 8px 18px -10px rgba(27,29,42,.35);transform:rotate(var(--r,0deg));transition:transform 260ms var(--pop);animation:note-in 620ms var(--pop) calc(200ms + var(--i) * 120ms) both}
.note-card:hover{transform:rotate(0) translateY(-3px)}
.note-card .icon{width:26px;height:26px;color:#C47F00}
.note-card b{display:block;font-size:13.5px}
.note-card small{font-size:12px;color:var(--ink-2)}
.note-card .tape{position:absolute;left:50%;top:-8px;width:56px;height:16px;margin-left:-28px;background:rgba(255,255,255,.7);box-shadow:0 1px 2px rgba(27,29,42,.08);transform:rotate(-3deg)}
.recap-note{background:#E7F3FF}
.recap-note .icon{color:var(--blue)}
@keyframes note-in{from{opacity:0;transform:translateY(-24px) rotate(calc(var(--r,0deg) * -4))}}
.coldtag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#F3E9DE;color:#7A5230;font-size:11.5px;font-weight:800;white-space:nowrap}

/* 任务详情：新人第一单 */
.first-timer{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#FDF1F4;font-size:13px;color:var(--ink-2)}
.first-timer .hanko{font-size:18px}
.first-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:#FDF1F4;font-size:12.5px;color:var(--ink-2)}
.first-note .icon{color:var(--red);margin-top:2px}
.debut-note{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--red-text)}

/* ================= 成就 · 全收集和称号墙 ================= */
.case.complete{box-shadow:0 0 0 3px var(--yellow),0 0 40px -6px rgba(242,183,0,.55)}
.case-label + .case-label{margin-left:8px}
.titles{padding:24px 28px}
.titles>.sec{flex-wrap:wrap;margin-bottom:16px}
.title-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ttl button,.ttl-inner{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;width:100%;min-height:92px;padding:14px 16px;border:0;border-radius:16px;background:var(--ground);text-align:left;cursor:pointer;transition:transform 220ms var(--pop),box-shadow 200ms}
.ttl.got button:hover{transform:translateY(-3px);box-shadow:0 8px 0 -4px rgba(27,29,42,.1)}
.ttl.got button:active{transform:scale(.97)}
.ttl.locked button,.ttl.locked .ttl-inner{cursor:default;background:transparent;outline:1.5px dashed var(--line-2);outline-offset:-1.5px}
.ttl .hanko{font-size:17px}
.ttl-text{display:grid;gap:2px;min-width:0}
.ttl-text b{font-size:15px}
.ttl-text small{font-size:12px;color:var(--sub);line-height:1.5}
.ttl.locked .ttl-text b{color:var(--faint);letter-spacing:.2em}
.ttl-bar{display:flex;align-items:center;gap:8px;margin-top:4px}
.ttl-bar .bar{flex:1;height:6px}
.ttl-bar em{font-size:11px;font-style:normal;color:var(--sub);font-weight:700}
.ttl.on button{background:var(--ink);color:#fff}
.ttl.on .ttl-text small{color:rgba(255,255,255,.7)}
.ttl .on-plate{top:8px;right:8px}
.ttl.fresh button{box-shadow:inset 0 0 0 2px var(--yellow)}
.ttl.fresh button::after{content:"新";position:absolute;top:-8px;left:-6px;width:24px;height:24px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-size:11.5px;font-weight:800;transform:rotate(-10deg);animation:m-stamp 360ms var(--pop) both}
.stat-link{align-content:start;gap:6px;background:var(--ink);color:#fff;transition:transform 220ms var(--pop)}
.stat-link:hover{transform:translateY(-3px)}
.stat-link .icon{width:30px;height:30px;color:var(--yellow)}
.stat-link small{color:rgba(255,255,255,.7)}
.pedit-head .btn svg{width:16px;height:16px}
.share-dialog{width:min(560px,calc(100% - 32px));padding:18px;border:0;border-radius:24px;background:var(--paper);display:grid;gap:12px;justify-items:center;text-align:center}
.share-dialog[open]{animation:card-in 420ms var(--pop) both}
.share-dialog::backdrop{background:rgba(27,29,42,.66)}
.share-dialog img{width:100%;max-height:68vh;object-fit:contain;border-radius:14px;box-shadow:0 10px 30px rgba(27,29,42,.18)}
.share-dialog p{font-size:12.5px;color:var(--sub)}
.share-actions{display:flex;gap:10px}

/* ================= 縁側（游戏角） ================= */
.play{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding-top:26px;padding-bottom:80px}
.play-hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:stretch;padding:30px 32px;border-radius:28px;background:#1B1D2A radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.7px) 0 0/22px 22px;color:#fff}
.play-hero h1{margin-top:14px;font-size:38px;line-height:1.25}
.play-hero p{margin-top:10px;max-width:36em;color:rgba(255,255,255,.75);font-size:14px}
.wallet{display:grid;align-content:start;gap:12px;padding:20px;border-radius:20px;background:rgba(255,255,255,.07)}
.wallet-count{display:flex;align-items:center;gap:10px}
.wallet-log{display:grid;gap:4px;font-size:12.5px;color:rgba(255,255,255,.75)}
.wallet-log li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.wallet-log em{font-style:normal;font-weight:800;color:var(--yellow)}
.wallet-log span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallet-log span i{font-style:normal;margin-left:6px;padding:0 6px;border-radius:5px;background:#9C6B3F;color:#fff;font-size:11px}
.wallet-log time{color:rgba(255,255,255,.5)}
.wallet-empty{font-size:12.5px;color:rgba(255,255,255,.7)}
.game-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.game-card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 14px 0 -6px rgba(27,29,42,.12)}
.game-card:active{transform:scale(.99)}
.game-art{position:relative;display:grid;place-items:center;overflow:hidden}
.game-lines .game-art{background:var(--cyan)}
.game-stamp .game-art{background:var(--red)}
.game-art svg{width:200px;height:200px}
.game-art line{stroke:rgba(255,255,255,.45);stroke-width:3;stroke-linecap:round}
.game-art line.lit{stroke:var(--ink);stroke-width:4.5}
.game-art circle{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.game-card:hover .game-art line.lit{animation:lit 900ms var(--arrive) calc(var(--i) * 80ms) both}
@keyframes lit{0%{stroke:rgba(255,255,255,.45)}50%{stroke:#fff}}
.game-text{display:grid;gap:8px;padding:20px 22px 8px}
.game-text h2{font-size:24px}
.game-text p{font-size:13.5px;color:var(--sub)}
.game-stat{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--sub);font-weight:700}
.game-stat b{color:var(--ink);font-size:16px}
.mini-belt{position:absolute;left:0;right:0;top:50%;height:70px;transform:translateY(-50%);display:flex;gap:22px;padding-left:18px;align-items:center;background:rgba(0,0,0,.12)}
.mini-slip{display:inline-block;flex:none;width:76px;height:48px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.mini-slip.urgent{background:#FFE4EA}
.mini-slip.void{background:#D7DAE0;box-shadow:inset 0 0 0 2px var(--faint)}
.game-card:hover .mini-belt{animation:belt 1.6s linear infinite}
@keyframes belt{to{transform:translate(-98px,-50%)}}
.mini-stamp{position:absolute;left:50%;top:22px;width:58px;height:58px;margin-left:-29px;display:grid;place-items:center;border-radius:12px;background:var(--ink);box-shadow:0 6px 0 rgba(0,0,0,.25)}
.mini-stamp i{font-style:normal;font-weight:900;color:#fff;font-size:14px;border:2px solid #fff;padding:1px 4px;border-radius:4px}
.game-card:hover .mini-stamp{animation:stamp-bob 900ms var(--press) infinite}
@keyframes stamp-bob{30%{transform:translateY(26px)}45%{transform:translateY(26px)}}
.game-titles{padding:24px 28px}
.game-titles .sec{margin-bottom:14px}

/* 游戏页公共 */
.game-page{padding-top:22px;padding-bottom:80px}
.game-head{display:flex;align-items:center;gap:10px 16px;margin-bottom:16px}
.game-head h1{display:flex;align-items:baseline;gap:12px;font-size:26px;flex-wrap:wrap}
.game-head h1 span{font-size:14px;color:var(--sub);font-weight:700}
.game-head h1 span b{color:var(--ink)}
.game-head .back{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--sub);white-space:nowrap;flex:none}

/* 一笔画 */
.lines-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.board-wrap{position:relative;padding:18px;display:grid;gap:12px}
.board{width:100%;max-height:min(64vh,580px);aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}
.board .edge{stroke:var(--line-2);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1.5 3.5}
.board .edge.used{stroke:transparent}
.board .trail{stroke-width:2.8;stroke-linecap:round}
.board .rubber{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:2 2;opacity:0;pointer-events:none}
.board .rubber.show{opacity:.5}
.board .node{fill:#fff;stroke:var(--ink);stroke-width:1.8;transition:fill 160ms}
.board .node.on{fill:var(--ink)}
.board .node.end{fill:var(--yellow);stroke-width:2.4}
.board .node.stuck{fill:var(--red)}
.board .node.odd{stroke:var(--red);stroke-width:2.6;animation:odd 1s ease-in-out infinite}
@keyframes odd{50%{stroke-width:5}}
.board.cleared .node{fill:var(--ink)}
.board-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.board-tools svg{width:16px;height:16px}
.board-progress{margin-left:auto;font-size:13px;color:var(--sub);font-weight:700}
.board-progress b{font-size:18px;color:var(--ink)}
.solved{position:absolute;inset:auto 18px 70px;display:grid;justify-items:center;gap:10px;padding:22px;border-radius:20px;background:rgba(255,255,255,.95);box-shadow:0 20px 50px rgba(27,29,42,.18);text-align:center}
.solved-stamp{display:inline-grid;place-items:center;width:92px;height:92px;border-radius:50%;border:4px solid var(--red);color:var(--red);font-size:24px;font-weight:900;transform:rotate(-8deg)}
.solved p{font-weight:700}
.solved-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.solved-titles{display:flex;align-items:center;gap:12px;font-weight:800}
.solved-titles .hanko{font-size:20px}
.level-side{padding:20px;display:grid;gap:14px}
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.lvl{display:grid;place-items:center;aspect-ratio:1;border-radius:12px;background:var(--ground);font:800 15px var(--num);transition:transform 160ms var(--pop)}
a.lvl:hover{transform:translateY(-2px)}
.lvl.solved{background:var(--ink);color:#fff}
.lvl.now{box-shadow:0 0 0 2.5px var(--yellow),0 0 0 4.5px var(--ink)}
.lvl.locked{background:transparent;color:var(--faint);outline:1.5px dashed var(--line-2);outline-offset:-1.5px}
.how-to{display:grid;gap:10px;font-size:12.5px;color:var(--sub)}
.how-to b{display:block;color:var(--ink);margin-bottom:2px}

/* 盖章挑战 */
.stamp-stage{position:relative;height:520px;border-radius:26px;background:#1B1D2A radial-gradient(rgba(255,255,255,.06) 1.2px,transparent 1.7px) 0 0/22px 22px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation;color:#fff;transition:box-shadow 200ms}
.stamp-stage.hurry{box-shadow:inset 0 0 0 3px var(--red)}
.stamp-stage.levelup{box-shadow:inset 0 0 60px rgba(242,183,0,.5)}
.stamp-hud{position:absolute;left:24px;right:24px;top:18px;display:flex;align-items:center;gap:20px;z-index:3}
.hud-score{display:flex;align-items:baseline;gap:6px;font-weight:700;color:rgba(255,255,255,.7)}
.hud-score b{font-size:34px;color:#fff}
.hud-combo{display:flex;align-items:baseline;gap:6px;font-weight:700;color:rgba(255,255,255,.7)}
.hud-combo b{font-size:28px;color:#fff;display:inline-block}
.hud-combo i{font-style:normal;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.12);font-size:13px;line-height:22px;color:#fff}
.hud-combo.hot i{background:var(--yellow);color:var(--ink)}
.hud-time{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.hud-time i{display:block;height:100%;width:100%;background:var(--green)}
.hurry .hud-time i{background:var(--red)}
.belt{position:absolute;left:0;right:0;top:58%;height:150px;transform:translateY(-50%)}
.belt-floor{position:absolute;inset:18px 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 40px,transparent 40px 80px);border-top:2px solid rgba(255,255,255,.12);border-bottom:2px solid rgba(255,255,255,.12)}
.belt-mark{position:absolute;left:50%;top:0;bottom:0;width:56px;margin-left:-28px;border-left:2px dashed rgba(242,183,0,.6);border-right:2px dashed rgba(242,183,0,.6)}
.slip{position:absolute;left:0;top:50%;width:150px;height:100px;display:grid;align-content:start;gap:2px;padding:10px 12px;border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 8px 0 rgba(0,0,0,.25);will-change:transform}
.slip b{font-size:11px;letter-spacing:.1em;color:var(--sub)}
.slip span{font-size:15px;font-weight:800}
.slip.urgent{background:#FFE4EA}
.slip.urgent b{color:var(--red-text)}
.slip.void{background:#C9CCD4}
.slip.void b{color:var(--ink)}
.slip.void span{text-decoration:line-through;color:var(--sub)}
.slip-target{position:absolute;left:50%;bottom:10px;width:38px;height:38px;margin-left:-19px;border-radius:50%;border:2px dashed var(--line-2)}
.slip.missed{opacity:.5}
.slip-mark{position:absolute;bottom:8px;width:52px;height:42px;margin-left:-26px;display:grid;place-items:center;border:3px solid var(--red);border-radius:6px;color:var(--red);font-style:normal;font-weight:900;font-size:16px;transform:rotate(-10deg);background:rgba(255,255,255,.4);animation:m-stamp 220ms var(--pop) both}
.slip.off .slip-mark{opacity:.55}
.slip.wrong .slip-mark{border-color:var(--ink);color:var(--ink)}
.ink{position:absolute;bottom:29px;width:9px;height:9px;border-radius:50%;background:var(--red);pointer-events:none}
.stamper{position:absolute;left:50%;top:calc(58% - 164px);z-index:2;display:grid;justify-items:center;transform:translate(-50%,0);pointer-events:none}
.stamper-handle{width:26px;height:34px;border-radius:13px 13px 4px 4px;background:var(--yellow)}
.stamper-head{display:grid;place-items:center;width:70px;height:40px;border-radius:8px;background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.3)}
.stamper-head i{font-style:normal;font-weight:900;color:var(--red);font-size:15px;border:2px solid var(--red);padding:0 4px;border-radius:4px}
.judge{position:absolute;left:50%;top:calc(58% + 90px);z-index:3;transform:translate(-50%,0);font-size:22px;font-weight:900;white-space:nowrap;opacity:0;pointer-events:none}
.judge.perfect{color:var(--yellow);font-size:28px}
.judge.good{color:#fff}
.judge.miss{color:var(--red)}
.judge.count,.judge.go{top:42%;font-size:64px;color:#fff}
.stamp-cover{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:20px;background:rgba(27,29,42,.94);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cover-card{display:grid;justify-items:center;gap:12px;max-width:440px;text-align:center}
.cover-card h2{font-size:30px}
.cover-card p{font-size:13.5px;color:rgba(255,255,255,.75)}
.cover-rules{display:grid;gap:8px;text-align:left;font-size:13px;color:rgba(255,255,255,.85)}
.cover-rules li{display:flex;align-items:center;gap:10px}
.cover-rules .mini-slip{width:34px;height:22px}
.cover-card .btn{background:#fff;color:var(--ink);border-color:#fff}
.cover-card .btn-line{background:transparent;color:#fff}
.result-score{display:flex;align-items:baseline;gap:8px}
.result-score b{font:700 84px/.9 var(--num)}
.result-stats{display:grid;grid-template-columns:repeat(4,auto);gap:18px;margin:0}
.result-stats div{display:grid;gap:2px}
.result-stats dt{font-size:12px;color:rgba(255,255,255,.6)}
.result-stats dd{margin:0;font-size:22px;font-weight:700}
.result-actions{display:flex;gap:10px;margin-top:6px}
.stamp-tip{margin-top:12px;text-align:center;font-size:12.5px;color:var(--sub)}

/* ================= 学期绘卷 ================= */
.recap{display:grid;gap:18px;padding-top:24px;padding-bottom:80px}
.slide{position:relative;isolation:isolate;overflow:hidden;min-height:min(78vh,640px);display:grid;align-items:center;padding:56px clamp(24px,6vw,80px);border-radius:32px;background:var(--bg,#fff);color:var(--fg,var(--ink))}
.slide-cover,.slide-ink{--bg:#1B1D2A;--fg:#fff}
.slide-yellow{--bg:var(--yellow)}
.slide-blue{--bg:var(--blue);--fg:#fff}
.slide-green{--bg:var(--green);--fg:#fff}
.slide-red{--bg:var(--red);--fg:#fff}
.slide-paper{--bg:#FFF6D6}
.slide-team{--bg:var(--cyan)}
.slide-end{--bg:var(--ground);min-height:auto}
.slide-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.95}
.slide-in{display:grid;gap:16px;max-width:760px}
html:not([data-motion="off"]) .slide:not(.in) .slide-in>*{opacity:0;transform:translateY(24px)}
.slide.in .slide-in>*{transition:opacity 600ms var(--arrive),transform 700ms var(--pop)}
.slide.in .slide-in>*:nth-child(2){transition-delay:120ms}
.slide.in .slide-in>*:nth-child(3){transition-delay:260ms}
.slide.in .slide-in>*:nth-child(4){transition-delay:400ms}
.slide.in .slide-in>*:nth-child(5){transition-delay:520ms}
.slide h1{display:grid;gap:8px;font-size:clamp(34px,6vw,64px);line-height:1.15}
.slide h1 span{font-size:16px;letter-spacing:.2em;opacity:.7}
.slide p{font-size:clamp(15px,1.8vw,19px);line-height:1.7}
.slide .lead{font-size:clamp(18px,2.4vw,26px);font-weight:800}
.slide .small{font-size:14px;opacity:.8}
.huge{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px}
.huge b{font:700 clamp(96px,16vw,200px)/.85 var(--num);letter-spacing:-.04em}
.huge span{font-size:clamp(20px,2.6vw,30px);font-weight:800}
.huge.tagline span{font-size:clamp(48px,9vw,110px);font-weight:900;line-height:1}
.scroll-hint{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;opacity:.6}
html:not([data-motion="off"]) .scroll-hint svg{animation:hint 1.6s ease-in-out infinite}
@keyframes hint{50%{transform:translateY(5px)}}
.term-pick{display:flex;gap:8px;flex-wrap:wrap}
.slide-cover .chip{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.slide-cover .chip[aria-current]{background:#fff;color:var(--ink)}
.slide-medals{display:flex;flex-wrap:wrap;gap:18px}
.slide-medals span{display:grid;justify-items:center;gap:6px}
.slide-medals .medal{width:96px;height:96px;border-radius:50%;box-shadow:0 0 0 4px #fff}
.slide-medals b{font-size:20px}
.slide.in .slide-medals span{animation:tile-drop 640ms var(--pop) calc(300ms + var(--i) * 90ms) both}
.slide-people{display:flex;flex-wrap:wrap;gap:10px}
.slide-people span{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:800}
.slide-people .ava{width:32px;height:32px;box-shadow:0 0 0 2px #fff}
.slide-tags{display:flex;gap:8px;flex-wrap:wrap}
.slide-tags .tag{height:30px;font-size:14px;background:rgba(255,255,255,.2);color:#fff}
.slide-tags .tag::before{color:rgba(255,255,255,.6)}
.slide-tags .tag i{font-style:normal;margin-left:6px;opacity:.75}
.slide-big{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:20px;background:rgba(255,255,255,.14);max-width:560px}
.slide-big .medal{width:72px;height:72px;border-radius:50%;box-shadow:0 0 0 3px #fff}
.slide-big div{display:grid;gap:2px}
.slide-big b{font-size:20px}
.slide-big small{font-size:13px;opacity:.8}
.slide-quotes{display:grid;gap:14px}
.slide-quotes blockquote{margin:0;padding:18px 22px;border-radius:6px 6px 18px 6px;background:#fff;box-shadow:0 10px 24px -14px rgba(27,29,42,.4);transform:rotate(var(--r))}
.slide-quotes blockquote p{font-size:clamp(18px,2.4vw,24px);font-weight:800}
.slide-quotes cite{font-style:normal;font-size:13px;color:var(--sub);font-weight:700}
.slide-hanko{display:flex;flex-wrap:wrap;gap:22px}
.slide-hanko span{display:grid;justify-items:center;gap:8px}
.slide-hanko .hanko{font-size:30px}
.slide-hanko small{font-size:12px;opacity:.7;max-width:10em;text-align:center}
.recap-card{position:relative;display:grid;gap:14px;width:min(420px,100%);padding:30px 28px;border-radius:24px;background:#1B1D2A;color:#fff;overflow:hidden;justify-self:start}
.recap-card::before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:var(--red);z-index:0}
.recap-card>*{position:relative}
.rc-term{justify-self:start;padding:2px 12px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:13px;font-weight:800}
.rc-name{font-size:36px}
.rc-nums{display:flex;gap:20px;font-size:13px;color:rgba(255,255,255,.75)}
.rc-nums b{display:block;font-size:32px;color:#fff}
.rc-medals{display:flex;gap:8px}
.rc-medals .medal{width:40px;height:40px}
.rc-quote{font-weight:800;font-size:16px}
.rc-quote cite{display:block;font-style:normal;font-weight:700;font-size:12px;opacity:.7}
.rc-foot{font-size:12px;opacity:.7}
.recap-actions{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:980px){
  .play-hero{grid-template-columns:minmax(0,1fr)}
  .lines-layout{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .pinboard{margin-top:0}
  .note-card{max-width:100%;flex:1 1 100%}
  .titles,.game-titles{padding:20px}
  .title-grid{grid-template-columns:minmax(0,1fr)}
  .play-hero{padding:22px 18px}
  .play-hero h1{font-size:28px}
  .game-cards{grid-template-columns:minmax(0,1fr)}
  .game-head h1{font-size:21px}
  .board-wrap{padding:10px}
  .solved{inset:auto 10px 64px}
  .stamp-stage{height:420px;border-radius:20px}
  .stamp-hud{left:14px;right:14px;gap:12px}
  .hud-score b{font-size:26px}
  .hud-combo b{font-size:22px}
  .slip{width:120px;height:92px;padding:8px 10px}
  .slip span{font-size:13px}
  .result-stats{grid-template-columns:repeat(2,auto)}
  .result-score b{font-size:64px}
  .slide{padding:40px 22px;border-radius:24px;min-height:min(80vh,560px)}
  .slide-medals .medal{width:64px;height:64px}
}
.ticket b .hanko{font-size:10px;margin-left:8px;vertical-align:1px}
.slide-in>.case-label,.slide-in>.scroll-hint,.slide-in>.btn{justify-self:start}

/* ================= 縁側 · 玩法列表、一笔画、盖章挑战的选项 ================= */
.road{padding:22px 24px}
.game-card{position:relative;display:grid;grid-template-rows:200px auto 1fr;border-radius:24px;background:var(--paper);overflow:hidden}
.game-card .game-art{transition:filter 200ms}
.game-card .game-art:hover{filter:brightness(1.05)}
.game-modes{display:grid;gap:8px;padding:6px 22px 22px;align-content:start}
.mode{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--ground);transition:transform 220ms var(--pop),background 160ms}
a.mode:hover{transform:translateX(4px);background:#E9EBEF}
a.mode:active{transform:scale(.98)}
.mode>.icon{width:22px;height:22px}
.mode b{display:block;font-size:14.5px}
.mode small{font-size:12px;color:var(--sub)}
.mode.locked{background:transparent;outline:1.5px dashed var(--line-2);outline-offset:-1.5px;color:var(--faint)}
.mode.locked b{color:var(--sub)}
.mode.done>.icon{color:var(--green)}
.mode.now{background:var(--ink);color:#fff}
.mode.now small{color:rgba(255,255,255,.7)}
.side-modes{display:grid;gap:8px}
.board-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:#FFF6D6;font-size:13px;font-weight:700}
.board-note .icon{color:#C47F00}
.game-head h1 span[data-mode-label]{padding:0 10px;border-radius:999px;background:var(--ink);color:#fff;line-height:24px}

/* 盖章挑战 · 玩法和印章样式 */
.pick-modes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pick-mode{position:relative;display:grid;gap:1px;min-width:104px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);cursor:pointer;transition:transform 180ms var(--pop)}
.pick-mode:active{transform:scale(.96)}
.pick-mode input,.pick-style input{position:absolute;opacity:0;pointer-events:none}
.pick-mode b{font-size:15px}
.pick-mode small{display:inline-flex;align-items:center;justify-content:center;gap:3px;font-size:11.5px;color:rgba(255,255,255,.65)}
.pick-mode small svg{width:11px;height:11px}
.pick-mode:has(input:checked){background:#fff;color:var(--ink);box-shadow:none}
.pick-mode:has(input:checked) small{color:var(--sub)}
.pick-mode:has(input:focus-visible),.pick-style:has(input:focus-visible){outline:2px solid var(--yellow);outline-offset:2px}
.pick-mode.locked,.pick-style.locked{cursor:not-allowed;opacity:.5}
.pick-styles{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pick-style{position:relative;display:grid;justify-items:center;gap:4px;cursor:pointer}
.pick-style small{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:rgba(255,255,255,.65)}
.pick-style small svg{width:10px;height:10px}
.stamp-face{display:grid;place-items:center;min-width:52px;height:42px;padding:0 6px;border:3px solid var(--c,var(--red));border-radius:6px;background:#fff;color:var(--c,var(--red));font-weight:900;font-size:15px;transform:rotate(-8deg);transition:transform 200ms var(--pop)}
.pick-style:has(input:checked) .stamp-face{box-shadow:0 0 0 3px var(--yellow);transform:rotate(-8deg) scale(1.08)}
.face-good,.face-great{border-radius:50%;width:44px;min-width:44px;height:44px;font-size:20px}
.face-great{--c:#F39800}
.face-dlm svg,.slip-mark.face-dlm svg,.stamper-head .face-dlm svg{width:34px;height:20px;fill:currentColor;stroke:currentColor}
.face-dlm{--c:var(--blue)}
.face-title{font-size:12px;line-height:1.05;writing-mode:vertical-rl;height:46px;min-width:46px;padding:2px}
.slip-mark.face-good,.slip-mark.face-great{border-radius:50%;width:44px;margin-left:-22px}
.slip-mark.face-great{border-color:#F39800;color:#F39800}
.slip-mark.face-dlm{border-color:var(--blue);color:var(--blue)}
.slip-mark.face-title{border-color:var(--c);color:var(--c);font-size:11px;writing-mode:vertical-rl;line-height:1.05;height:46px;width:46px;margin-left:-23px}
.stamper-head i.face-good,.stamper-head i.face-great{border-radius:50%;padding:2px 6px}
.stamper-head i.face-great{border-color:#F39800;color:#F39800}
.stamper-head i.face-dlm{border-color:var(--blue);color:var(--blue);display:grid;place-items:center}
.stamper-head i.face-title{border-color:var(--c);color:var(--c);font-size:10px;writing-mode:vertical-rl;line-height:1.05;padding:2px}
.result-nudge{font-size:13px;color:var(--yellow) !important;max-width:24em}
.result-actions{flex-wrap:wrap;justify-content:center}
@media(max-width:760px){
  .road{padding:18px 16px}
  .game-card{grid-template-rows:160px auto 1fr}
  .game-modes{padding:4px 16px 16px}
  .pick-mode{min-width:92px;padding:8px 10px}
  .stamp-stage{height:520px}
  .cover-card{gap:9px}
  .cover-card h2{font-size:24px}
  .cover-rules{font-size:12px}
}
.stamp-cover{overflow:auto}

/* ================= 縁側 · 勋章解锁 ================= */
.wallet-swatches{display:flex;flex-wrap:wrap;gap:8px}
.wallet-swatches i{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.wallet-swatches i.open{background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.wallet-swatches i.new{animation:tile-drop 640ms var(--pop) both;box-shadow:0 0 0 3px var(--yellow)}
.wallet-count b{font:700 52px/.9 var(--num)}
.wallet-count span{font-weight:800;color:rgba(255,255,255,.75)}
.wallet-next{display:grid;gap:8px}
.wallet-next li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-size:12.5px;color:rgba(255,255,255,.75)}
.wallet-next .icon{width:16px;height:16px;margin-top:2px;color:rgba(255,255,255,.5)}
.wallet-next b{display:block;color:#fff;font-size:13px}
.blocks-card{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:center;padding:24px}
.blocks-preview{display:block;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1.5px var(--line);transition:transform 260ms var(--pop)}
.blocks-preview:hover{transform:rotate(-1.5deg) scale(1.02)}
.blocks-preview .build{display:block;width:100%;height:auto}
.blocks-text{display:grid;gap:12px}
.blocks-text h2{display:flex;align-items:baseline;gap:10px;font-size:30px}
.blocks-text h2 small{font-size:14px;color:var(--sub)}
.blocks-text p{color:var(--sub);font-size:14px}
.part-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.part-strip .part-icon{width:34px;height:34px;padding:4px;border-radius:10px;background:var(--ground)}
.part-strip .more{font-size:12.5px;color:var(--sub);font-weight:700}
.blocks-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.muted{color:var(--sub);font-size:13px}
.block-wall{padding:22px 24px}
.block-wall .sec{margin-bottom:14px;flex-wrap:wrap}
.wall-row{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:14px;overflow-x:auto;padding-bottom:6px}
.wall-row figure{margin:0;display:grid;gap:6px}
.wall-row .build{width:150px;height:150px;border-radius:14px;box-shadow:0 0 0 1.5px var(--line)}
.wall-row figcaption{font-size:12px;color:var(--sub)}
.wall-row figcaption b{display:block;color:var(--ink);font-size:13px}
.road h3{margin:16px 0 8px;font-size:13px;color:var(--sub)}
.road-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.road-item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:transparent;outline:1.5px dashed var(--line-2);outline-offset:-1.5px;color:var(--faint)}
.road-item b{display:block;font-size:13px;color:var(--sub)}
.road-item small{font-size:11.5px}
.road-item .icon{width:15px;height:15px}
.road-item .dot{width:22px;height:22px;border-radius:50%;background:var(--line);box-shadow:inset 0 0 0 1.5px rgba(27,29,42,.1)}
.road-item .part-icon{width:30px;height:30px;opacity:.35}
.road-item.open{outline:0;background:var(--ground);color:var(--sub)}
.road-item.open b{color:var(--ink)}
.road-item.open .dot{background:var(--c)}
.road-item.open .part-icon{opacity:1}
.road-item.new{box-shadow:0 0 0 2px var(--yellow)}
.award-opens{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;border-radius:14px;background:#E7F3FF;font-size:13px;font-weight:700;color:var(--blue-text);text-align:left}
.award-opens .icon{width:20px;height:20px;flex:none}

/* 名牌上的积木作品 */
.plate-build{position:absolute;right:16px;bottom:16px;z-index:0;width:112px;height:112px;padding:5px;border-radius:16px;background:#fff;box-shadow:0 6px 16px rgba(27,29,42,.18);transform:rotate(3deg)}
.plate-build .build{display:block;width:100%;height:100%;border-radius:11px}
.plate.big .plate-build{width:168px;height:168px;right:22px;bottom:22px}
.plate.small .plate-build{width:78px;height:78px;right:10px;bottom:10px;padding:3px;border-radius:12px}
.plate:has(.plate-build) .plate-medals{justify-content:flex-start}
.plate:has(.plate-build) .plate-seal{right:auto;left:auto;top:auto}

/* ================= 积木编辑器 ================= */
.blocks-layout{display:grid;grid-template-columns:270px minmax(0,1fr) 210px;gap:16px;align-items:start}
.parts-box{padding:16px;display:grid;gap:14px;max-height:calc(100vh - var(--top) - 120px);overflow:auto;position:sticky;top:calc(var(--top) + 16px)}
.part-family h2{display:flex;align-items:baseline;gap:8px;font-size:14px;margin-bottom:8px}
.part-family h2 small{font-size:11.5px;color:var(--sub);font-weight:600}
.part-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.part-btn{position:relative;display:grid;justify-items:center;gap:2px;padding:8px 4px 6px;border:0;border-radius:12px;background:var(--ground);font-size:11.5px;font-weight:800;color:var(--ink-2);cursor:pointer;transition:transform 160ms var(--pop),box-shadow 160ms}
.part-btn:hover{transform:translateY(-2px)}
.part-btn:active{transform:scale(.94)}
.part-btn .part-icon{width:40px;height:40px}
.part-btn[aria-pressed="true"]{background:#fff;box-shadow:0 0 0 2.5px var(--ink)}
.part-btn.locked{background:transparent;outline:1.5px dashed var(--line-2);outline-offset:-1.5px;color:var(--faint)}
.part-btn.locked .part-icon{opacity:.18}
.part-need{display:flex;align-items:center;gap:2px;font-size:10.5px;white-space:nowrap;font-weight:700;line-height:1.3;text-align:center;color:var(--faint)}
.part-need svg{width:10px;height:10px;flex:none}
.board-area{display:grid;gap:12px;min-width:0}
.build-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.build-name{flex:1;min-width:140px;height:40px!important;font-weight:800;font-size:15px}
.build-bar .btn.on{background:var(--ink);color:#fff}
.board-frame{position:relative;padding:12px;border-radius:24px;background:var(--paper)}
.block-board{display:block;width:100%;max-height:calc(100vh - var(--top) - 320px);aspect-ratio:1;margin:0 auto;border-radius:14px;touch-action:none;user-select:none;-webkit-user-select:none;color:rgba(27,29,42,.18);box-shadow:0 0 0 1px var(--line)}
.block-board.dark{color:rgba(255,255,255,.22)}
.block-board.holding{cursor:copy}
.block-board .pop{transform-box:fill-box;transform-origin:center}
.block-board .ghost{opacity:.45;pointer-events:none}
.select-box{fill:none;stroke:var(--ink);stroke-width:.8;stroke-dasharray:2.5 1.8;pointer-events:none;animation:ants 1s linear infinite}
.block-board.dark .select-box{stroke:#fff}
@keyframes ants{to{stroke-dashoffset:-8.6}}
.board-empty{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-weight:800;color:var(--faint);font-size:14px}
.tool-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tool{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 12px;border:0;border-radius:999px;background:var(--paper);font-size:12.5px;font-weight:800;color:var(--ink);cursor:pointer;transition:transform 160ms var(--pop)}
.tool svg{width:16px;height:16px}
.tool:active{transform:scale(.92)}
.tool:disabled{opacity:.35;cursor:default}
.tool-gap{flex:1}
.part-count{font-size:12px;color:var(--sub)}
.paint-box{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:10px 14px;border-radius:18px;background:var(--paper)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(27,29,42,.15);cursor:pointer;color:var(--faint);transition:transform 160ms var(--pop)}
.swatch[aria-checked="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--ink)}
.swatch.locked{background:var(--ground);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.swatch svg{width:14px;height:14px}
.bgs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:800;color:var(--sub)}
.bg-btn{width:26px;height:26px;border:0;border-radius:7px;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(27,29,42,.15);cursor:pointer}
.bg-btn[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.paint-hint{font-size:12px;color:var(--sub)}
.works{padding:16px;display:grid;gap:10px;align-content:start}
.work{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:10px;padding:6px;border-radius:14px;font-size:12.5px;font-weight:700;transition:background 160ms}
.work:hover{background:var(--ground)}
.work.now{background:var(--ground);box-shadow:inset 0 0 0 2px var(--ink)}
.work .build{width:52px;height:52px;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.work span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work span i{font-style:normal;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--yellow);font-size:10.5px}
.work.new{grid-template-columns:52px 1fr}
.work.new .icon{width:52px;height:52px;padding:14px;border-radius:10px;border:1.5px dashed var(--line-2)}
@media(max-width:1180px){
  .blocks-layout{grid-template-columns:240px minmax(0,1fr)}
  .works{grid-column:1/-1;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .works .sec{grid-column:1/-1}
}
@media(max-width:860px){
  .blocks-card{grid-template-columns:minmax(0,1fr)}
  .blocks-preview{max-width:320px}
  .blocks-layout{grid-template-columns:minmax(0,1fr)}
  .board-area{order:-1}
  .parts-box{position:static;max-height:none}
  .block-board{max-height:none}
}
@media(max-width:760px){
  .part-grid{grid-template-columns:repeat(4,1fr)}
  .tool span{display:none}
  .tool{padding:0 11px}
  .board-frame{padding:6px;border-radius:18px}
  .plate-build{width:84px;height:84px}
  .plate.big .plate-build{width:120px;height:120px}
}

/* ================= 发布页：从团队的标签表里挑 ================= */
.tag-pick{display:flex;flex-wrap:wrap;gap:6px}
.tag-pick .chip:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.new-tags{height:40px!important;margin-top:4px}
.field-note{font-size:11.5px;color:var(--faint)}
.dirs-admin{margin-left:6px;font-weight:800;color:var(--blue-text);white-space:nowrap}

/* ================= 团队标签表 ================= */
.team-tags{display:grid;gap:16px;padding-top:26px;padding-bottom:80px;max-width:1080px}
.tags-head h1{margin-top:10px;font-size:30px}
.tags-head p{margin-top:8px;max-width:46em;color:var(--sub)}
.team-tags .panel{padding:22px 24px}
.team-tags .sec{margin-bottom:14px;flex-wrap:wrap}
.tag-row-form{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:10px}
.tag-row-form input,.tag-edit input{height:40px!important}
.tag-rows{display:grid;gap:8px}
.tag-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"pos edit tools" ". use use";gap:4px 12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--ground);scroll-margin-top:calc(var(--top) + 20px)}
.tag-row:target{box-shadow:0 0 0 2px var(--yellow)}
.tag-pos{grid-area:pos;font-weight:800;color:var(--faint);text-align:center}
.tag-edit{grid-area:edit;display:grid;grid-template-columns:110px minmax(0,1.3fr) minmax(0,1fr) auto;gap:8px;align-items:center}
.tag-name{font-size:15px;overflow-wrap:anywhere}
.tag-use{grid-area:use;font-size:12px;color:var(--sub)}
.tag-tools{grid-area:tools;display:flex;gap:6px}
.tag-tools .icon-btn{width:34px;height:34px}
.tag-tools .icon-btn svg{width:16px;height:16px;transform:rotate(90deg)}
.tag-tools .icon-btn.down svg{transform:rotate(-90deg)}
.tag-tools form:last-child .icon-btn svg{transform:none}
.tags-loose .chips form{display:contents}
@media(max-width:760px){
  .tag-row-form{grid-template-columns:minmax(0,1fr)}
  .tag-row{grid-template-columns:24px minmax(0,1fr);grid-template-areas:"pos edit" ". use" ". tools"}
  .tag-edit{grid-template-columns:minmax(0,1fr)}
  .team-tags .panel{padding:18px 16px}
}
@media(max-width:760px){
  .auth-art .compose{width:min(260px,62%);opacity:.5}
  .auth-art p{font-size:13px}
}