/* ============================================================
   丰收纸牌 · Harvest Solitaire
   暖黄 + 青绿的田园手绘感，纯 CSS，无外部资源
   ============================================================ */

:root{
  --cream:#fdf3dc;
  --paper:#fffaef;
  --ink:#5a4429;
  --ink-soft:#8b7350;
  --amber:#f2b544;
  --amber-deep:#d9862b;
  --amber-dark:#a35f1c;
  --teal:#3f8f7a;
  --teal-deep:#2c6a5a;
  --teal-light:#8ccbb4;
  --red:#c9553f;
  --line:#c8a877;
  --shadow:rgba(90,60,25,.28);
  --card-w:80px;
  --card-h:112px;
  --row-step:38px;
  --radius:14px;
  font-size:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft Yahei",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:#f6e5c2;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

/* ---------------- 背景（按章节换色） ---------------- */
#bg{position:fixed;inset:0;overflow:hidden;z-index:0;
  background:linear-gradient(180deg,var(--sky-a,#bfe3e0) 0%,var(--sky-b,#e9f2cf) 46%,var(--sky-c,#f7e8c3) 100%);}

/* 太阳：本体缓慢呼吸，外面套一圈更慢反向转的光芒 */
.bg-sun{position:absolute;left:8%;top:6%;width:22vmin;height:22vmin;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(255,246,208,.95),rgba(250,205,110,.55) 55%,rgba(250,205,110,0) 72%);
  filter:blur(1px);
  animation:sunPulse 7s ease-in-out infinite;
  will-change:transform,opacity;}
/* 光芒：锥形渐变切出的放射线，转得很慢，只在边缘隐约可见 */
.bg-sun::before{content:"";position:absolute;inset:-42%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,240,190,.3) 0deg 5deg,rgba(255,240,190,0) 5deg 22deg);
  -webkit-mask:radial-gradient(circle,rgba(0,0,0,0) 34%,rgba(0,0,0,.85) 52%,rgba(0,0,0,0) 74%);
  mask:radial-gradient(circle,rgba(0,0,0,0) 34%,rgba(0,0,0,.85) 52%,rgba(0,0,0,0) 74%);
  animation:sunRays 70s linear infinite;}
/* 内圈柔光，和本体反相呼吸 */
.bg-sun::after{content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,250,225,.5),rgba(255,250,225,0) 62%);
  animation:sunGlow 7s ease-in-out infinite reverse;}

@keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes sunGlow{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.14);opacity:.9}}
@keyframes sunRays{to{transform:rotate(360deg)}}

/* 云：一律用 transform 横移（走合成层，不触发重排）。
   起点放在屏幕右外侧，向左飘出屏幕后由动画循环重来。 */
.bg-cloud{position:absolute;height:8vmin;border-radius:99px;background:rgba(255,255,255,.55);
  filter:blur(.5px);left:100%;will-change:transform;}
.bg-cloud::before,.bg-cloud::after{content:"";position:absolute;border-radius:50%;
  background:inherit;}
/* 两个鼓包让云不是一根胶囊 */
.bg-cloud::before{width:52%;height:170%;left:14%;top:-78%;}
.bg-cloud::after{width:38%;height:135%;right:16%;top:-52%;}

.bg-cloud.c1{width:26vmin;top:11%;animation:drift 68s linear infinite;}
.bg-cloud.c2{width:18vmin;top:27%;opacity:.6;animation:drift 96s linear infinite;animation-delay:-38s;}
.bg-cloud.c3{width:13vmin;top:5%;opacity:.42;animation:drift 124s linear infinite;animation-delay:-80s;}

/* 移动距离 = 屏幕宽 + 云自身宽度，保证完全飘出再回来 */
@keyframes drift{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100vw - 30vmin))}
}

.bg-hill{position:absolute;left:-12%;right:-12%;border-radius:50% 50% 0 0;}
.bg-hill.h1{bottom:26%;height:34vmin;background:var(--hill-a,#a9cf9a);opacity:.85;}
.bg-hill.h2{bottom:20%;height:24vmin;left:-30%;right:26%;background:var(--hill-b,#8fbf88);opacity:.8;}
.bg-field{position:absolute;left:-5%;right:-5%;bottom:-4%;height:34%;
  background:
    repeating-linear-gradient(94deg,rgba(255,255,255,.16) 0 10px,rgba(0,0,0,.05) 10px 22px),
    linear-gradient(180deg,var(--field-a,#cfd97a),var(--field-b,#b6bf5f));
  border-radius:44% 56% 0 0/12% 12% 0 0;
  transform-origin:50% 100%;
  animation:fieldSway 11s ease-in-out infinite;}
/* 麦田极轻微的起伏，像风吹过 */
@keyframes fieldSway{0%,100%{transform:skewX(0deg)}50%{transform:skewX(.5deg)}}

.bg-fence{position:absolute;left:0;right:0;bottom:29%;height:3vmin;opacity:.35;
  background:repeating-linear-gradient(90deg,transparent 0 6vmin,rgba(120,80,40,.5) 6vmin 6.6vmin);
  border-top:.5vmin solid rgba(120,80,40,.35);border-bottom:.5vmin solid rgba(120,80,40,.25);}

body[data-theme="spring"]{--sky-a:#c6e6e2;--sky-b:#eaf4d3;--sky-c:#f9edcb;--hill-a:#a8d59b;--hill-b:#87c186;--field-a:#d3e089;--field-b:#b3cd6b;}
body[data-theme="summer"]{--sky-a:#a9dcea;--sky-b:#e2f0c4;--sky-c:#fbe6ae;--hill-a:#7cc38b;--hill-b:#5faa78;--field-a:#e7d569;--field-b:#c9b74c;}
body[data-theme="autumn"]{--sky-a:#f0cfa2;--sky-b:#f6dfae;--sky-c:#f2c98c;--hill-a:#cf9f5f;--hill-b:#b3803f;--field-a:#e0a95a;--field-b:#c07f3a;}
body[data-theme="winter"]{--sky-a:#cfe0e8;--sky-b:#e8eef2;--sky-c:#f4f1e6;--hill-a:#b9c8c9;--hill-b:#9fb2b4;--field-a:#e6e7dd;--field-b:#cfd2c4;}
/* 冬天日头淡、云走得慢 */
body[data-theme="winter"] .bg-sun{opacity:.6;}
body[data-theme="winter"] .bg-sun::before{opacity:.35;}
body[data-theme="winter"] .bg-cloud{animation-duration:110s;}
body[data-theme="winter"] .bg-cloud.c2{animation-duration:150s;}
/* 夏天日头最盛 */
body[data-theme="summer"] .bg-sun{animation-duration:5.5s;}
body[data-theme="summer"] .bg-sun::before{opacity:1.15;}

/* ---------------- 通用 ---------------- */
#app{position:relative;z-index:1;height:100%;}
.screen{position:absolute;inset:0;display:none;flex-direction:column;}
.screen.active{display:flex;}

.btn{
  font:inherit;font-weight:700;color:#fff;cursor:pointer;
  padding:.62em 1.15em;border-radius:12px;border:none;
  background:linear-gradient(180deg,var(--teal-light),var(--teal));
  box-shadow:0 3px 0 var(--teal-deep),0 6px 14px rgba(40,80,60,.22);
  transition:transform .08s ease,box-shadow .08s ease,filter .15s ease;
}
.btn:hover{filter:brightness(1.05);}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--teal-deep),0 2px 6px rgba(40,80,60,.2);}
.btn.primary{background:linear-gradient(180deg,#f8cd6a,var(--amber-deep));box-shadow:0 3px 0 var(--amber-dark),0 6px 14px rgba(150,90,20,.25);}
.btn.primary:active{box-shadow:0 0 0 var(--amber-dark);}
.btn.ghost{background:rgba(255,250,239,.9);color:var(--ink);box-shadow:0 3px 0 #d8bd90,inset 0 0 0 1px #e2cba2;}
.btn.ghost:active{box-shadow:0 0 0 #d8bd90;}
.btn.small{padding:.45em .85em;font-size:.86rem;border-radius:10px;}
.btn.tiny{padding:.35em .6em;font-size:.8rem;border-radius:9px;}
.btn:disabled{opacity:.42;cursor:default;filter:grayscale(.5);pointer-events:none;}

.bar{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;flex:0 0 auto;
  background:linear-gradient(180deg,rgba(255,250,239,.94),rgba(255,246,226,.82));
  border-bottom:2px solid rgba(200,168,119,.5);box-shadow:0 4px 14px rgba(120,90,50,.12);}
.bar-title{font-weight:800;font-size:1.1rem;letter-spacing:.06em;}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:.6rem;}
.coin-chip{background:#fff6de;border:2px solid var(--amber);border-radius:99px;padding:.25em .7em;font-weight:800;color:var(--amber-dark);}
.scroll-body{flex:1 1 auto;overflow-y:auto;padding:1.1rem clamp(.8rem,4vw,3rem) 3rem;}
.note{color:var(--ink-soft);font-size:.85rem;text-align:center;margin:1.4rem auto 0;max-width:34rem;line-height:1.7;}

/* ---------------- 主菜单 ---------------- */
#screen-menu{align-items:center;justify-content:center;}
.menu-card{
  background:linear-gradient(180deg,rgba(255,251,240,.96),rgba(255,244,222,.94));
  border:3px solid rgba(200,168,119,.8);border-radius:26px;
  padding:clamp(1.6rem,4vw,2.8rem) clamp(1.6rem,6vw,3.4rem);
  text-align:center;box-shadow:0 18px 44px rgba(120,85,40,.26);max-width:26rem;
}
.logo{margin:0;font-size:clamp(2.1rem,7vw,3rem);letter-spacing:.14em;color:var(--amber-dark);
  text-shadow:2px 3px 0 #fff,4px 6px 0 rgba(200,150,70,.28);}
.logo span{display:block;font-size:.72rem;letter-spacing:.42em;color:var(--teal);margin-top:.5rem;text-shadow:none;}
.tagline{color:var(--ink-soft);margin:.9rem 0 1.6rem;font-size:.92rem;}
.menu-btns{display:flex;flex-direction:column;gap:.7rem;}
.menu-foot{margin:1.3rem 0 0;color:var(--ink-soft);font-size:.82rem;min-height:1.2em;}

/* ---------------- 地图 ---------------- */
.chapter{margin:0 auto 1.6rem;max-width:56rem;
  background:linear-gradient(180deg,rgba(255,251,240,.92),rgba(255,245,225,.86));
  border:3px solid rgba(200,168,119,.7);border-radius:20px;padding:1rem 1.1rem 1.2rem;
  box-shadow:0 10px 26px rgba(120,90,50,.16);}
.chapter.locked{opacity:.6;}
.chapter h3{margin:.1rem 0 .2rem;font-size:1.15rem;letter-spacing:.08em;}
.chapter .cdesc{margin:0 0 .9rem;color:var(--ink-soft);font-size:.84rem;}
.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.2rem,1fr));gap:.7rem;}
.lv{
  position:relative;
  text-align:left;cursor:pointer;border:2px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,#fffdf6,#fdf0d5);padding:.6rem .7rem;
  box-shadow:0 3px 0 rgba(200,168,119,.6);transition:transform .1s ease;
  font:inherit;color:var(--ink);
}
.lv:hover{transform:translateY(-2px);}
.lv:disabled{cursor:default;opacity:.5;transform:none;}
.lv .lv-no{font-weight:800;font-size:.8rem;color:var(--teal-deep);letter-spacing:.08em;}
/* 关卡卡片右上角标出这一关的新机制 */
.lv .lv-tag{position:absolute;top:.4rem;right:.45rem;font-size:.78rem;line-height:1;}
.lv .lv-tag.leaf{right:1.5rem;}
.lv .lv-name{font-weight:700;margin:.15rem 0 .3rem;}
.lv .lv-meta{font-size:.74rem;color:var(--ink-soft);}
.lv .lv-stars{color:var(--amber-deep);letter-spacing:.14em;font-size:.9rem;}
.lv.cleared{background:linear-gradient(180deg,#f4fbf1,#e5f4dd);}

/* ---------------- 商店 / 配置 ---------------- */
.shop-grid,.loadout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.9rem;max-width:56rem;margin:0 auto;}
.item-card{background:linear-gradient(180deg,#fffdf6,#fdf0d5);border:2px solid var(--line);border-radius:16px;
  padding:.9rem;text-align:center;box-shadow:0 4px 0 rgba(200,168,119,.55);}
.item-card .ico{font-size:2.1rem;line-height:1.2;}
.item-card h4{margin:.25rem 0 .2rem;font-size:1rem;}
.item-card p{margin:0 0 .6rem;font-size:.78rem;color:var(--ink-soft);line-height:1.6;min-height:3.4em;}
.item-card .own{font-size:.78rem;color:var(--teal-deep);font-weight:700;margin-bottom:.5rem;}
.item-card.sel{border-color:var(--amber-deep);box-shadow:0 4px 0 var(--amber-deep),0 0 0 3px rgba(242,181,68,.35);}
.count-row{display:flex;align-items:center;justify-content:center;gap:.6rem;}
.count-row b{min-width:1.6em;font-size:1.05rem;}

/* ---------------- HUD ---------------- */
.hud{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem .7rem;background:linear-gradient(180deg,rgba(255,250,239,.95),rgba(255,246,226,.8));
  border-bottom:2px solid rgba(200,168,119,.5);}
.hud-left,.hud-right{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.hud-right{margin-left:auto;}
.stat{background:#fff8e6;border:2px solid rgba(200,168,119,.65);border-radius:11px;padding:.18rem .55rem;line-height:1.25;text-align:center;min-width:3.4rem;}
.stat i{display:block;font-style:normal;font-size:.62rem;letter-spacing:.1em;color:var(--ink-soft);}
.stat b{font-size:.98rem;font-variant-numeric:tabular-nums;}
.stat.goal b{color:var(--amber-dark);}
.stat b.mult{color:var(--teal-deep);}
.stat b.mult.hot{color:var(--red);}
.stat.bump{animation:bump .28s ease;}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}

/* ---------------- 牌桌 ---------------- */
.table-wrap{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:.4rem;overflow:auto;}
#table{position:relative;}

/* 三维牌桌：canvas 铺满整个牌桌区，DOM 牌阵让位 */
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;touch-action:none;}
body.mode-3d .table-wrap{overflow:hidden;padding:0;}
body.mode-3d #table{display:none;}
/* 注意：#bg 只在「牌桌这一屏」让位给三维天空 —— 主菜单/地图/商店仍然靠它做背景，
   全局隐藏会让那三屏变成一片空白。 */
body.mode-3d.in-game #bg{visibility:hidden;}
body.mode-3d .hint-tip{z-index:3;}
/* 三维下补牌堆/手牌堆在场景里，底部只留道具与按钮 */
body.mode-3d .dock-piles{display:none;}
body.mode-2d #stage{display:none;}
/* 牌阵下方的一片柔光，让牌读起来是摆在桌面上而不是浮在背景里 */
#table::before{content:"";position:absolute;left:-8%;right:-8%;top:-6%;bottom:-10%;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 52%,
    rgba(255,248,224,.55),rgba(255,246,214,.22) 52%,rgba(255,246,214,0) 74%);}

/* 牌是正面朝人的方正矩形，不做任何旋转 —— 立体感来自三层：
   1) --slab-side  实心侧面厚度（box-shadow 的硬偏移，牌看着是一块有厚度的板）
   2) --slab-cast  投影，按 --depth（层级比）递增：越靠顶层的牌投得越大越远
   3) inset 顶部高光 + 底部内阴影，压出纸张的厚度感
   厚度和投影抽成 --slab 变量，各状态叠高亮环时只需 `<环>, var(--slab)`，
   不会像之前那样把厚度整条覆盖掉。 */
.card{
  position:absolute;width:var(--card-w);height:var(--card-h);
  left:calc(var(--cx) * var(--card-w) / 2);
  top:calc(var(--cy) * var(--row-step));
  border-radius:calc(var(--card-w) * .12);

  --thick:calc(var(--card-w) * .075);
  --cast-y:calc(var(--thick) + var(--card-w) * .035 + var(--card-w) * var(--depth,0) * .075);
  --cast-blur:calc(var(--card-w) * .09 + var(--card-w) * var(--depth,0) * .13);
  --slab:
    0 var(--thick) 0 var(--side-a,#e2c692),
    0 calc(var(--thick) + 1px) 0 var(--side-b,#bd9c5d),
    0 var(--cast-y) var(--cast-blur) rgba(96,66,30,.34);

  background:
    radial-gradient(circle at 22% 16%,rgba(255,255,255,.85),rgba(255,255,255,0) 42%),
    repeating-linear-gradient(102deg,rgba(190,150,90,.055) 0 3px,rgba(255,255,255,0) 3px 7px),
    linear-gradient(168deg,#fffdf4,#fbeed3);
  border:2px solid #d9bd8b;
  box-shadow:var(--slab);
  transition:transform .14s ease,box-shadow .14s ease,filter .2s ease,opacity .2s ease;
  overflow:hidden;
}
/* 顶部高光 + 底部内阴影：让牌面本身也有一点浮雕的鼓感 */
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:
    inset 0 calc(var(--card-w) * .022) 0 rgba(255,255,255,.8),
    inset 0 calc(var(--card-w) * -.05) calc(var(--card-w) * .07) rgba(150,110,55,.13);}
.card .r{position:absolute;top:4%;left:7%;font-weight:800;font-size:calc(var(--card-w)*.27);line-height:1;letter-spacing:-.02em;}
.card .s{position:absolute;top:4%;right:6%;font-size:calc(var(--card-w)*.2);line-height:1.1;}
.card .pip{position:absolute;left:0;right:0;bottom:6%;text-align:center;font-size:calc(var(--card-w)*.44);opacity:.9;}
.card.suit-wheat .r{color:#b07a1e;}
.card.suit-apple .r{color:#c0483a;}
.card.suit-carrot .r{color:#cc7126;}
.card.suit-leaf  .r{color:#3d8a6f;}

/* 被压住的牌：沉在阴影里，侧面也压暗，投影收紧（离桌面更近） */
.card.blocked{--side-a:#d3b787;--side-b:#a8874c;
  --cast-blur:calc(var(--card-w) * .07);
  filter:brightness(.92) saturate(.88);}
.card.blocked::after{content:"";position:absolute;inset:0;background:rgba(90,68,41,.18);}
.card.free{cursor:default;}
/* 各状态一律 `<高亮环>, var(--slab)` —— 保住厚度和投影 */
.card.match{cursor:pointer;border-color:var(--amber-deep);
  --side-a:#f7d98f;--side-b:#cf9a2c;
  box-shadow:0 0 0 3px rgba(242,181,68,.55),var(--slab);}
/* 悬停：牌整块抬起，侧面加厚、投影推远 —— 抬起来了所以离桌面更高 */
.card.match:hover,.card.hoe-target:hover{
  transform:translateY(calc(var(--card-w) * -.09));
  --thick:calc(var(--card-w) * .1);
  --cast-y:calc(var(--card-w) * .3);
  --cast-blur:calc(var(--card-w) * .3);
  z-index:500;}
.card.match:hover{box-shadow:0 0 0 3px rgba(242,181,68,.7),var(--slab);}
.card.hoe-target{cursor:crosshair;border-color:var(--red);
  --side-a:#eeb0a2;--side-b:#b2402c;
  box-shadow:0 0 0 3px rgba(201,85,63,.5),var(--slab);}
.card.hoe-target:hover{box-shadow:0 0 0 3px rgba(201,85,63,.68),var(--slab);}

.card.gold{background:
    radial-gradient(circle at 24% 14%,rgba(255,255,255,.9),rgba(255,255,255,0) 44%),
    linear-gradient(168deg,#fff4c9,#f6d478);
  border-color:#d8a72f;
  --side-a:#f6dd93;--side-b:#c69a25;}
.sheen{position:absolute;inset:-30% -60%;pointer-events:none;
  background:linear-gradient(70deg,transparent 44%,rgba(255,255,255,.75) 50%,transparent 56%);
  animation:sheen 2.6s linear infinite;}
@keyframes sheen{0%{transform:translateX(-40%)}100%{transform:translateX(40%)}}

.card.rotted{background:linear-gradient(168deg,#d8cbb2,#b6a488);border-color:#8d7a5c;filter:saturate(.5);
  --side-a:#c4b79d;--side-b:#8d7a5c;}
.card.rotted .r,.card.rotted .s,.card.rotted .pip{opacity:.28;}
.card.rotted .rot-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--card-w)*.5);}

.badge{position:absolute;bottom:4%;left:4%;display:flex;align-items:center;gap:.12em;
  font-size:calc(var(--card-w)*.17);font-weight:800;padding:.1em .32em;border-radius:99px;
  background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(0,0,0,.2);}
.badge.vine{color:#2f7a55;background:rgba(226,246,232,.95);}
.badge.rot{color:#8a5b2a;background:rgba(255,238,214,.95);right:4%;left:auto;}
.badge.pick{left:auto;right:4%;bottom:auto;top:34%;background:transparent;box-shadow:none;font-size:calc(var(--card-w)*.26);}
.badge.ice{color:#2c6a8a;background:rgba(222,242,250,.95);right:4%;left:auto;}
/* 🍂 被落叶盖住（二维降级牌桌用；三维那边画在贴图里） */
.card.leafed{--side-a:#dcb27e;--side-b:#a3702f;}
.card.leafed::after{content:"";position:absolute;inset:0;background:rgba(176,110,48,.32);}
.card.leafed .leaf-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--card-w)*.46);z-index:2;}
.card.leafed{cursor:pointer;}
/* ❄️ 冻住 */
.card.iced{--side-a:#bfe2f0;--side-b:#4e86a8;}
.card.iced::after{content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(190,226,240,.55),rgba(226,244,252,.4)),
             repeating-linear-gradient(64deg,rgba(255,255,255,.5) 0 4px,rgba(255,255,255,0) 4px 12px);}
.card.locked{filter:saturate(.85);--side-a:#c2e0d0;--side-b:#4e8a72;}
.card.locked::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(52deg,rgba(63,143,122,.42) 0 5px,rgba(63,143,122,0) 5px 13px);}

.card.gone{opacity:0;pointer-events:none;transform:scale(.6);}
/* 飞向手牌堆的替身：放在 #fx（position:fixed 顶层浮层）里，
   用屏幕坐标飞，绕开 .table-wrap 的 overflow 裁剪。 */
.card.fly-ghost{position:fixed;margin:0;pointer-events:none;
  transform-origin:top left;will-change:transform;}
/* 替身落地前先藏住手牌堆顶那张，免得同一张牌同时出现在两处 */
#waste-pile.landing .wtop{visibility:hidden;}
.shake{animation:shake .3s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.hint-tip{position:absolute;left:50%;bottom:.3rem;transform:translateX(-50%);
  background:rgba(90,68,41,.82);color:#fff8e6;font-size:.78rem;padding:.35em .8em;border-radius:99px;
  opacity:0;transition:opacity .25s ease;pointer-events:none;white-space:nowrap;}
.hint-tip.show{opacity:1;}

/* ---------------- 底部操作区 ---------------- */
.dock{flex:0 0 auto;display:flex;align-items:flex-end;gap:.8rem;flex-wrap:wrap;
  padding:.5rem .8rem .7rem;background:linear-gradient(0deg,rgba(255,250,239,.96),rgba(255,246,226,.72));
  border-top:2px solid rgba(200,168,119,.5);}
.dock-piles{display:flex;gap:.7rem;}
.pile-slot{display:flex;flex-direction:column;align-items:center;gap:.15rem;}
.pile-cap{font-size:.66rem;letter-spacing:.12em;color:var(--ink-soft);}
.pile{position:relative;width:var(--dock-w,72px);height:calc(var(--dock-w,72px) * 1.4);
  --dth:calc(var(--dock-w,72px) * .075);}
.pile .card{position:absolute;--card-w:var(--dock-w,72px);--card-h:calc(var(--dock-w,72px)*1.4);left:0;top:0;}
/* 补牌堆的每一层：靠 --k 逐层往上垒，露出下面每张牌的侧面，摞高即剩余量 */
.pile .back{
  position:absolute;inset:0;border-radius:calc(var(--dock-w,72px)*.12);border:2px solid #b6883f;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 6px,rgba(0,0,0,.06) 6px 12px),
    linear-gradient(160deg,#e9b552,#c98c33);
  display:flex;align-items:center;justify-content:center;font-size:calc(var(--dock-w,72px)*.42);
  transform:translateY(calc(var(--k,0) * var(--dth) * -1));
  box-shadow:
    0 var(--dth) 0 #e0a94a,
    0 calc(var(--dth) + 1px) 0 #a9762a,
    0 calc(var(--dth) + 5px) calc(var(--dock-w,72px) * .16) rgba(96,66,30,.3);
  cursor:pointer;
}
#stock-pile:hover .back.top{transform:translateY(calc(var(--k,0) * var(--dth) * -1 - 3px));}
#stock-pile:active .back.top{transform:translateY(calc(var(--k,0) * var(--dth) * -1 + 2px));}
.pile .back.empty{background:linear-gradient(160deg,#e4d6b7,#cdbb96);border-style:dashed;cursor:default;
  filter:grayscale(.4);box-shadow:inset 0 2px 6px rgba(120,90,50,.2);}
.pile .count{position:absolute;right:-.3rem;bottom:-.3rem;background:var(--teal);color:#fff;font-weight:800;
  font-size:.72rem;border-radius:99px;padding:.1em .5em;box-shadow:0 2px 5px rgba(0,0,0,.25);}
#stock-pile .back:active{transform:translateY(2px);}
.pile .wildmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--dock-w,72px)*.5);}

.dock-items{display:flex;gap:.45rem;flex-wrap:wrap;}
.item-btn{position:relative;font:inherit;cursor:pointer;border:2px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,#fffdf6,#fbeed3);padding:.3rem .55rem;text-align:center;color:var(--ink);
  box-shadow:0 3px 0 rgba(200,168,119,.6);min-width:3.4rem;}
.item-btn .ico{font-size:1.25rem;display:block;line-height:1.15;}
.item-btn .nm{font-size:.62rem;letter-spacing:.06em;color:var(--ink-soft);}
.item-btn .n{position:absolute;top:-.35rem;right:-.35rem;background:var(--teal);color:#fff;border-radius:99px;
  font-size:.68rem;font-weight:800;padding:0 .38em;box-shadow:0 1px 4px rgba(0,0,0,.25);}
.item-btn:disabled{opacity:.4;pointer-events:none;}
.item-btn.armed{border-color:var(--red);box-shadow:0 3px 0 var(--red),0 0 0 3px rgba(201,85,63,.28);}
.dock-btns{margin-left:auto;display:flex;gap:.45rem;}

/* ---------------- 弹层 ---------------- */
#modal-layer{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(70,50,25,.46);backdrop-filter:blur(2px);padding:1rem;}
#modal-layer.hidden{display:none;}
.modal{display:none;width:min(38rem,100%);max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,#fffdf5,#fdf1d8);border:3px solid rgba(200,168,119,.85);
  border-radius:22px;padding:1.3rem 1.4rem 1.1rem;box-shadow:0 20px 50px rgba(60,40,15,.4);
  animation:pop .22s ease;}
.modal.active{display:block;}
@keyframes pop{from{transform:scale(.92) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.modal h2{margin:.1rem 0 .5rem;text-align:center;font-size:1.4rem;letter-spacing:.08em;color:var(--amber-dark);}
.modal-sub{text-align:center;color:var(--ink-soft);margin:.2rem 0 1rem;font-size:.88rem;}
.modal-body{font-size:.9rem;line-height:1.85;}
.modal-body ul{padding-left:1.2rem;margin:.4rem 0;}
.modal-body kbd{background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:0 .35em;font-size:.85em;}
.modal-btns{display:flex;gap:.6rem;justify-content:center;margin-top:1.1rem;flex-wrap:wrap;}
.modal-btns.col{flex-direction:column;}
.stars{text-align:center;font-size:2.4rem;letter-spacing:.2em;color:#dcc9a4;min-height:1.2em;}
.stars b{color:var(--amber);text-shadow:0 2px 6px rgba(216,167,47,.5);animation:starPop .4s ease backwards;}
.stars b:nth-child(1){animation-delay:.05s}.stars b:nth-child(2){animation-delay:.2s}.stars b:nth-child(3){animation-delay:.35s}
@keyframes starPop{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
.result-rows{margin:.9rem auto 0;max-width:22rem;}
.result-rows div{display:flex;justify-content:space-between;padding:.3rem .2rem;border-bottom:1px dashed rgba(200,168,119,.6);font-size:.92rem;}
.result-rows div.total{border-bottom:none;font-weight:800;font-size:1.05rem;color:var(--amber-dark);}

/* ---------------- 特效层 ---------------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:70;}
.float{position:absolute;transform:translate(-50%,-50%);font-weight:800;white-space:nowrap;
  text-shadow:0 2px 0 #fff,0 3px 8px rgba(0,0,0,.2);animation:floatUp .9s ease-out forwards;}
.float.score{color:var(--teal-deep);font-size:1.1rem;}
.float.gold{color:var(--amber-dark);font-size:1.05rem;}
.float.coin{color:#c9891f;font-size:1.02rem;}
.float.seed{color:#3f8f7a;font-size:1rem;}
.float.warn{color:var(--red);font-size:.98rem;}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}
  22%{opacity:1;transform:translate(-50%,-70%) scale(1.06)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}

#combo-banner{position:fixed;left:50%;top:34%;transform:translate(-50%,-50%);z-index:71;pointer-events:none;
  font-weight:900;font-size:clamp(1.6rem,6vw,2.6rem);letter-spacing:.06em;color:var(--amber-dark);
  text-shadow:0 3px 0 #fff,0 6px 16px rgba(160,100,20,.35);opacity:0;}
#combo-banner.show{animation:comboPop .8s ease-out;}
@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-6deg)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(2deg)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-90%) scale(.95)}}

#toast{position:fixed;left:50%;bottom:12%;transform:translateX(-50%);z-index:72;pointer-events:none;
  background:rgba(90,68,41,.9);color:#fff8e6;padding:.5em 1em;border-radius:99px;font-size:.88rem;
  opacity:0;transition:opacity .25s ease;}
#toast.show{opacity:1;}

/* ---------------- 窄屏 ---------------- */
@media (max-width:720px){
  .hud{padding:.4rem .5rem;gap:.3rem;}
  .stat{min-width:2.9rem;padding:.12rem .4rem;}
  .stat b{font-size:.88rem;}
  .dock{gap:.5rem;padding:.4rem .5rem .6rem;}
  .dock-btns{margin-left:0;width:100%;justify-content:flex-end;}
  .modal{padding:1.1rem .9rem .9rem;}
}
@media (max-height:560px){
  .pile-cap{display:none;}
}

/* 关掉动效偏好：取消倾斜和弧线，回到平面，保证可读性；背景也全部静止 */
@media (prefers-reduced-motion:reduce){
  .card.match:hover,.card.hoe-target:hover{transform:none;}
  /* 关掉动效偏好时 flyOut 直接不生成替身，这里只兜底 */
  .card.fly-ghost{display:none;}
  #waste-pile.landing .wtop{visibility:visible;}
  .sheen{animation:none;opacity:.35;}
  .bg-sun,.bg-sun::before,.bg-sun::after,.bg-cloud,.bg-field{animation:none;}
  /* 静止时把云放回可见位置，否则它们停在屏幕外侧 */
  .bg-cloud.c1{left:auto;right:12%;}
  .bg-cloud.c2{left:32%;}
  .bg-cloud.c3{left:8%;}
}