/* 隐喻联想卡：一屏手机页面（奶油白牌桌）。样式只作用于 body.cardmode，不影响其他页面 */
body.cardmode .wrap{max-width:none;padding:0;height:100%}
body.cardmode{
  /* 淡彩牌桌：奶油白底，莫兰迪六色（雾蓝、藕紫、豆沙粉、燕麦、灰蓝、鼠尾草），墨色粗体字，大圆角 */
  --bg:#faf6ec; --fg:#2d2926; --mute:#8b8378; --line:#e9e2d3; --soft:#f1ebdc; --accent:#3a332d; --on-accent:#ffffff;
  --p1:#cbdadd; --p2:#d9cce0; --p3:#e4cdc9; --p4:#e1dccb; --p5:#ccd3e1; --p6:#ccdcd5;
  --shadow:0 2px 0 rgba(45,41,38,.10),0 8px 16px rgba(70,55,40,.16);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
html{height:100%}
body.cardmode{height:100%}
body.cardmode{background:var(--grain),var(--bg);color:var(--fg);font:14px/1.5 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;overscroll-behavior:none}
#app{height:100%}
.cp{height:100%;width:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:10px;padding-block:8px 10px;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));overflow:hidden}
.cp button,.cv button{box-shadow:none;border:0;background:none;color:inherit;font:inherit;padding:0;border-radius:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.cp button:focus-visible,.cv button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cp-top{display:flex;align-items:center;justify-content:space-between;height:34px;flex:none}
.cp-title{font-size:20px;font-weight:800;letter-spacing:.14em}
.cp-top{position:relative;margin-bottom:6px}
.cp-top::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:radial-gradient(circle at 7px 0,var(--p3) 0 5px,transparent 5.5px) 0 0/28px 8px repeat-x,radial-gradient(circle at 7px 0,var(--p5) 0 5px,transparent 5.5px) 14px 0/28px 8px repeat-x}
.cp-back{width:34px;height:34px;font-size:28px;line-height:28px;color:var(--fg)}
.cp-sp{width:34px}
.cp-seg{display:flex;background:var(--grain),var(--soft);border-radius:16px;padding:4px;flex:none}
.cp-seg button{flex:1;height:34px;border-radius:12px;font-size:15px;color:var(--mute);transition:background .2s,color .2s}
.cp-seg button.on{background:#fff;color:var(--fg);font-weight:700;box-shadow:0 1px 4px rgba(70,55,40,.16)}
.cp-tabs button{height:38px;font-size:16px;letter-spacing:.3em}
.cp-label{flex:none;font-size:13px;color:var(--mute);text-align:center;margin-top:-2px}
.cp-nums{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;flex:none}
.cp-num{aspect-ratio:1;border-radius:16px!important;background-color:var(--p1)!important;background-image:var(--grain);box-shadow:0 2px 0 rgba(45,41,38,.14)!important;color:var(--fg);font-size:22px;font-weight:900;transition:transform .15s,background .2s,color .2s}
.cp-num:active{transform:scale(.92)}
.cp-num.on{background:var(--accent)!important;background-image:none!important;color:var(--on-accent)}
.cp-stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;position:relative}
.cp-row{flex:1 1 0;min-height:0;display:flex;justify-content:center;align-items:center;gap:8px}
.cp-row>.cell{flex:none}
.cp-stage.empty{display:flex;align-items:center;justify-content:center;background:var(--grain),var(--soft);border-radius:22px;overflow:hidden}
.cp-empty{display:flex;flex-direction:column;gap:6px;text-align:center;padding:0 28px;color:var(--mute);font-size:13px}
.cp-empty b{color:var(--fg);font-size:17px;font-weight:800}
.cp-foot{flex:none;text-align:center;font-size:13px;color:var(--mute);min-height:38px}
.cp-foot .hint{font-size:12px;opacity:.85}
.cp-foot.bar{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--fg);min-height:46px}
.cp-go{height:46px;padding:0 24px!important;border-radius:18px!important;background:var(--accent)!important;color:var(--on-accent);font-weight:700}
.cp-go:disabled{opacity:.3}
/* 卡 */
.cell{container-type:size;display:grid;place-items:center;min-width:0;min-height:0;touch-action:none}
.pc{position:relative;width:min(100cqw,calc(100cqh*.6667));aspect-ratio:2/3;perspective:900px;transition:opacity .35s,transform .35s}
.pc.tw{width:min(100cqw,calc(100cqh*.6667));aspect-ratio:2/3}
.pc.gone{opacity:0;transform:scale(.85);pointer-events:none}
.pin{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1);cursor:pointer}
.pc.up .pin{transform:rotateY(180deg)}
.pf{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.pf.front{transform:rotateY(180deg);background:none}
.cface{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none}
.cback{position:relative;background:var(--grain),var(--pb,var(--p1));display:flex;align-items:center;justify-content:center}
.cback::before{content:"";position:absolute;inset:8%;border:1.5px dashed rgba(45,41,38,.22);border-radius:9px}
.cback::after{content:"";position:absolute;inset:0;background:
 radial-gradient(circle at 0 0,var(--bg) 0 11px,transparent 11.5px) top left/22px 22px no-repeat,
 radial-gradient(circle at 100% 0,var(--bg) 0 11px,transparent 11.5px) top right/22px 22px no-repeat,
 radial-gradient(circle at 0 100%,var(--bg) 0 11px,transparent 11.5px) bottom left/22px 22px no-repeat,
 radial-gradient(circle at 100% 100%,var(--bg) 0 11px,transparent 11.5px) bottom right/22px 22px no-repeat}
/* 字卡 */
.wcard{container-type:inline-size;position:relative;background:#fbfaf7;overflow:hidden}
.wcard.dark{background:#17171a}
.wframe{position:absolute;left:18%;right:18%;top:14%;bottom:14%;overflow:hidden;border-radius:3cqw}
.w{position:absolute;font-family:"Songti SC","Noto Serif SC","STSong",SimSun,serif;font-weight:700;color:#1d1d1f;font-size:11cqw;line-height:1;white-space:nowrap}
.wcard.dark .w{color:#f5f2ea}
.wcard.long .w{font-size:9cqw}
.w-top{top:3%;left:50%;transform:translateX(-50%)}
.w-bottom{bottom:3%;left:50%;transform:translateX(-50%) rotate(180deg)}
.w-left{left:9%;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}
.w-right{left:91%;top:50%;transform:translate(-50%,-50%) rotate(90deg)}
/* 选卡 */
.cp-browse{flex:1;min-height:0;overflow-y:auto;display:grid;gap:10px;padding:4px 2px 8px;align-content:start;grid-template-columns:repeat(4,1fr);-webkit-overflow-scrolling:touch}
.cp-browse.word{grid-template-columns:repeat(3,1fr)}
.cp button.th{position:relative;display:block;border-radius:12px!important;aspect-ratio:2/3;transition:transform .15s}
.cp-browse.word .th{aspect-ratio:2/3}
.th>.cface{border-radius:12px;box-shadow:0 3px 8px rgba(90,40,20,.22)}
.th:active{transform:scale(.96)}
.th.on>.cface{box-shadow:0 0 0 3px var(--accent),0 3px 8px rgba(70,50,30,.2)}
.th .badge{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;border-radius:11px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:700;line-height:22px;text-align:center;display:none;padding:0 4px;animation:pop .25s cubic-bezier(.2,.9,.3,1.4)}
.th.on .badge{display:block}
/* 大图 */
.cv{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:rgba(250,246,236,.97);color:var(--fg);animation:fadein .2s ease}
.cv.out{opacity:0;transition:opacity .18s}
.cv-bar{display:flex;justify-content:space-between;align-items:center;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));font-size:14px;color:var(--mute)}
.cv-x{width:36px;height:36px;font-size:16px;border-radius:14px!important;background:var(--soft)!important;color:var(--fg)}
.cv-mid{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 6px}
.cv-stage{display:grid;place-items:center;flex:1;min-width:0}
.cv-card{width:min(78vw,calc(62vh*.6667));aspect-ratio:2/3;border-radius:16px;overflow:hidden;box-shadow:0 14px 36px rgba(70,50,30,.28);background:#fbfaf7;animation:fadein .35s ease}
.cv-card.tw{width:min(78vw,calc(62vh*.6667));aspect-ratio:2/3;transform:scale(1.06)}
.cv-card.still{animation:none}
.cv-arrow{width:30px;height:60px;font-size:34px;color:var(--mute)}
.cv-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:12px;min-height:74px}
.cv-act{height:50px;padding:0 24px!important;border-radius:18px!important;font-size:16px;font-weight:700;transition:transform .15s}
.cv-act:active{transform:scale(.95)}
.cv-act.keep{background:var(--accent)!important;color:var(--on-accent)}
.cv-act.keep.on{background:var(--p6)!important;color:var(--fg)}
.cv-act.rot{background:var(--p5)!important;color:var(--fg)}
.cv-act.del{background:var(--p3)!important;color:var(--fg)}
.cv-act.ico{width:60px;height:60px;padding:0!important;border-radius:50%!important;display:grid;place-items:center}
.cv-act.ico.keep{background:#fff!important}
.cv-act.ico.split{background:#4f7d8a!important}
.cv-act.ico.split .cv-ico{width:36px;height:36px}
.wsolo{display:flex;align-items:center;justify-content:center;padding:8%;text-align:center}
.wsolo span{font-family:"Songti SC","Noto Serif SC","STSong",SimSun,serif;font-weight:900;font-size:26cqw;line-height:1.15;color:#1d1d1f;word-break:keep-all}
.wsolo.dark span{color:#f5f2ea}
.cv-ico{display:block;width:28px;height:28px}
.cv-ico svg{display:block;width:100%;height:100%}
/* 动效 */
.pile-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;display:flex;flex-direction:column;align-items:center;gap:18px}
.pile-text{pointer-events:none;position:absolute;left:0;right:0;bottom:100%;margin-bottom:18px}
.pile-deck{position:relative;cursor:pointer;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.pile-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;letter-spacing:.2em;color:var(--fg);pointer-events:none;transition:opacity .6s ease}
.pile-fly{position:absolute;z-index:2;pointer-events:none;border-radius:14px;overflow:hidden}
.cp-bar{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px}
.cp .cp-align{width:44px;height:44px;padding:0;border:0;border-radius:12px;background:#8b6b4e;color:#fff;font-size:14px;font-weight:700;box-shadow:0 2px 0 rgba(45,41,38,.14);cursor:pointer}
.cp-trash{display:flex;flex-direction:row-reverse;gap:5px;margin-left:auto}
.cp-label .hint{font-size:12px;opacity:.85}
.pk-body{flex:1;min-height:0;display:flex;gap:8px}
.pk-main{flex:3;min-width:0;min-height:0;overflow-y:auto;scrollbar-width:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start;padding:2px}
.pk-main::-webkit-scrollbar{display:none}
.cp .pk-main .th{width:100%;aspect-ratio:2/3;container-type:size;border-radius:10px}
.pk-side{flex:2;min-width:0;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;align-content:start;overflow-y:auto;scrollbar-width:none;gap:6px;background:var(--soft);border-radius:16px;padding:6px}
.pk-slot{position:relative;min-width:0;aspect-ratio:2/3;border:1.5px dashed #c9bba6;border-radius:10px;display:grid;place-items:center;container-type:size;touch-action:none}
.pk-card{width:100%;height:100%;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);container-type:size;position:relative}
/* 候选区里的纯字卡比图卡略大，和抽卡、结果页一样 */
.pk-card.wbig{transform:scale(1.06)}
.pk-ghost{position:fixed;left:0;top:0;width:76px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);pointer-events:none;z-index:300}
.cp .pk-confirm{flex:1;margin-left:0;color:var(--on-accent)}
.cp .cp-shuffle{height:44px;padding:0 20px;border-radius:999px;background:#4f7d8a;color:#fff;font-size:15px;font-weight:700;box-shadow:0 2px 0 rgba(45,41,38,.14);cursor:pointer}
.cp .cp-clear{height:46px;padding:0 14px;border-radius:18px;background:#fff;color:var(--fg);font-size:14px;font-weight:700;box-shadow:0 2px 0 rgba(45,41,38,.14);cursor:pointer}
.cp .cp-clear:disabled{opacity:.3}
.cp .cp-tr{container-type:inline-size;position:relative;width:34px;aspect-ratio:2/3;padding:0;border:0;border-radius:6px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow);background:none}
@keyframes pop{from{transform:scale(.3);opacity:0}}
@keyframes fadein{from{opacity:0}}
.pin{will-change:transform}
@media (prefers-reduced-motion:reduce){.cell,.cv-card,.pin{animation:none!important;transition-duration:.01s!important}}