/* 大富翁 · 冒险旅途主题 v2 */
/* qiaomu-design: VARIANCE 8 MOTION 7 DENSITY 5 */
/* 缓动: cubic-bezier(0.16,1,0.3,1) · 时长: 160-400ms */
/* 只动 transform + opacity · 支持 prefers-reduced-motion */

/* ==================== 棋盘地形容器 ==================== */

.monopoly-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: .5rem;
    padding: 2.5rem .75rem 2rem;
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(76,175,80,.07), transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(255,193,7,.06), transparent 40%),
        radial-gradient(ellipse at 85% 50%, rgba(33,150,243,.07), transparent 40%),
        linear-gradient(180deg, rgba(135,206,235,.06) 0%, transparent 12%),
        linear-gradient(180deg, transparent 85%, rgba(139,195,74,.05) 100%);
}
@media (min-width:576px){.monopoly-board{grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:.5rem;padding:2.5rem 1rem 2rem}}
@media (min-width:768px){.monopoly-board{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:.625rem;padding:3rem 1.25rem 2.25rem}}
@media (min-width:1200px){.monopoly-board{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.625rem;padding:3.5rem 1.5rem 2.5rem}}

[data-bs-theme="dark"] .monopoly-board {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(46,125,50,.06), transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(255,193,7,.05), transparent 40%),
        radial-gradient(ellipse at 85% 50%, rgba(33,150,243,.06), transparent 40%),
        linear-gradient(180deg, rgba(25,35,60,.3) 0%, transparent 12%),
        linear-gradient(180deg, transparent 85%, rgba(26,46,30,.2) 100%);
}

/* --- 地形装饰：云朵 --- */
.monopoly-cloud{position:absolute;pointer-events:none;opacity:.5;z-index:0;width:40px;height:16px;background:rgba(255,255,255,.5);border-radius:16px}
.monopoly-cloud::before,.monopoly-cloud::after{content:"";position:absolute;background:rgba(255,255,255,.6);border-radius:50%}
.monopoly-cloud::before{width:24px;height:24px;top:0;left:6px}
.monopoly-cloud::after{width:16px;height:16px;top:6px;left:0}
[data-bs-theme="dark"] .monopoly-cloud{opacity:.1}
[data-bs-theme="dark"] .monopoly-cloud::before,[data-bs-theme="dark"] .monopoly-cloud::after,[data-bs-theme="dark"] .monopoly-cloud{background:rgba(200,210,230,.25)}

/* --- 地形装饰：树木 --- */
.monopoly-tree{position:absolute;pointer-events:none;opacity:.3;z-index:0;width:20px;height:24px}
.monopoly-tree::before{content:"";position:absolute;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:18px solid rgba(46,125,50,.5);top:0;left:4px}
.monopoly-tree::after{content:"";position:absolute;width:4px;height:6px;background:rgba(101,67,33,.4);bottom:0;left:8px}
[data-bs-theme="dark"] .monopoly-tree{opacity:.15}

/* ==================== 格子（路径瓷砖） ==================== */

.monopoly-cell {
    position: relative;
    border-radius: 16px;
    padding: .5rem .25rem 1.5rem;
    text-align: center;
    background: rgba(var(--bs-body-bg-rgb,255,255,255), .72);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 3px 12px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .2s cubic-bezier(0.16,1,0.3,1), box-shadow .2s cubic-bezier(0.16,1,0.3,1);
    z-index: 1;
}
.monopoly-cell:hover { transform: translateY(-3px); }
.monopoly-cell-active {
    transform: translateY(-5px) !important;
    box-shadow: 0 0 0 3px var(--bs-primary), 0 8px 28px rgba(var(--bs-primary-rgb,13,110,253),.25), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* 底部路面虚线 */
.monopoly-cell::after {
    content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .5rem;
    height: 2px; opacity: .18;
    background-image: repeating-linear-gradient(90deg, currentColor 0 .375rem, transparent .375rem .75rem);
}

/* 顶部类型色条 */
.monopoly-cell::before {
    content: ""; position: absolute; top: 0; left: 14px; right: 14px;
    height: 4px; border-radius: 0 0 4px 4px;
}

/* 类型色条 + 图标圆 + 背景晕染 */
.monopoly-cell[data-type="start"]::before{background:#FFC107}
.monopoly-cell[data-type="reward"]::before{background:#28A745}
.monopoly-cell[data-type="punish"]::before{background:#DC3545}
.monopoly-cell[data-type="lucky"]::before{background:#6F42C1}
.monopoly-cell[data-type="forward"]::before{background:#0D6EFD}
.monopoly-cell[data-type="backward"]::before{background:#FD7E14}
.monopoly-cell[data-type="shop"]::before{background:#FFC107}
.monopoly-cell[data-type="task"]::before{background:#0DCAF0}
.monopoly-cell[data-type="event"]::before{background:#6C757D}
.monopoly-cell[data-type="treasure"]::before{background:#FFD700}
.monopoly-cell[data-type="trap"]::before{background:#8B0000}
.monopoly-cell[data-type="rest"]::before{background:#20C997}
.monopoly-cell[data-type="exchange"]::before{background:#E91E63}

.monopoly-cell[data-type="start"]{background:rgba(255,193,7,.06)}
.monopoly-cell[data-type="reward"]{background:rgba(40,167,69,.05)}
.monopoly-cell[data-type="punish"]{background:rgba(220,53,69,.05)}
.monopoly-cell[data-type="lucky"]{background:rgba(111,66,193,.05)}
.monopoly-cell[data-type="forward"]{background:rgba(13,110,253,.05)}
.monopoly-cell[data-type="backward"]{background:rgba(253,126,20,.05)}
.monopoly-cell[data-type="shop"]{background:rgba(255,193,7,.04)}
.monopoly-cell[data-type="task"]{background:rgba(13,202,240,.04)}
.monopoly-cell[data-type="event"]{background:rgba(108,117,125,.04)}
.monopoly-cell[data-type="treasure"]{background:rgba(255,215,0,.06)}
.monopoly-cell[data-type="trap"]{background:rgba(139,0,0,.04)}
.monopoly-cell[data-type="rest"]{background:rgba(32,201,151,.04)}
.monopoly-cell[data-type="exchange"]{background:rgba(233,30,99,.04)}

[data-bs-theme="dark"] .monopoly-cell { background: rgba(var(--bs-body-bg-rgb,33,37,41), .5); border-color: rgba(255,255,255,.04) }

/* 图标圆 */
.monopoly-cell-icon {
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; margin: 0 auto;
    border-radius: 50%; font-size: 1rem; line-height: 1;
}
@media (min-width:768px){.monopoly-cell-icon{width:2rem;height:2rem;font-size:1.125rem}}
.monopoly-cell[data-type="start"] .monopoly-cell-icon{background:rgba(255,193,7,.12);color:#FFC107}
.monopoly-cell[data-type="reward"] .monopoly-cell-icon{background:rgba(40,167,69,.12);color:#28A745}
.monopoly-cell[data-type="punish"] .monopoly-cell-icon{background:rgba(220,53,69,.12);color:#DC3545}
.monopoly-cell[data-type="lucky"] .monopoly-cell-icon{background:rgba(111,66,193,.12);color:#6F42C1}
.monopoly-cell[data-type="forward"] .monopoly-cell-icon{background:rgba(13,110,253,.12);color:#0D6EFD}
.monopoly-cell[data-type="backward"] .monopoly-cell-icon{background:rgba(253,126,20,.12);color:#FD7E14}
.monopoly-cell[data-type="shop"] .monopoly-cell-icon{background:rgba(255,193,7,.12);color:#FFC107}
.monopoly-cell[data-type="task"] .monopoly-cell-icon{background:rgba(13,202,240,.12);color:#0DCAF0}
.monopoly-cell[data-type="event"] .monopoly-cell-icon{background:rgba(108,117,125,.12);color:#6C757D}
.monopoly-cell[data-type="treasure"] .monopoly-cell-icon{background:rgba(255,215,0,.12);color:#FFD700}
.monopoly-cell[data-type="trap"] .monopoly-cell-icon{background:rgba(139,0,0,.12);color:#8B0000}
.monopoly-cell[data-type="rest"] .monopoly-cell-icon{background:rgba(32,201,151,.12);color:#20C997}
.monopoly-cell[data-type="exchange"] .monopoly-cell-icon{background:rgba(233,30,99,.12);color:#E91E63}

/* 起点格发光 */
.monopoly-cell[data-type="start"] .monopoly-cell-icon{filter:drop-shadow(0 0 6px rgba(255,193,7,.4))}
/* 幸运格星光 */
.monopoly-cell[data-type="treasure"] .monopoly-cell-icon{filter:drop-shadow(0 0 6px rgba(255,215,0,.4))}
.monopoly-cell[data-type="lucky"] .monopoly-cell-icon{filter:drop-shadow(0 0 5px rgba(111,66,193,.3))}
/* 惩罚格条纹 */
.monopoly-cell[data-type="punish"]{background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(220,53,69,.03) 6px 12px)}
.monopoly-cell[data-type="trap"]{background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(139,0,0,.04) 5px 10px)}

.monopoly-cell-name{font-size:.6875rem;font-weight:600;line-height:1.1;margin-top:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.monopoly-cell-value{font-size:.625rem;line-height:1.1;margin-top:.125rem;opacity:.65}
.monopoly-cell-pos{position:absolute;top:.375rem;left:.625rem;font-size:.75rem;font-weight:700;opacity:.35}

/* ==================== 角色（扁担挑夫） ==================== */

.monopoly-walker {
    position: absolute; left: -999px; top: -999px;
    width: 3.5rem; height: 4.5rem; pointer-events: none; z-index: 5;
    transition: left .34s cubic-bezier(0.16,1,0.3,1), top .34s cubic-bezier(0.16,1,0.3,1);
    will-change: left, top;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
@media (min-width:768px){.monopoly-walker{width:4rem;height:5.25rem}}
.monopoly-walker svg{display:block;width:100%;height:100%;overflow:visible}
/* ponytail: flip 只翻 SVG scaleX，定位由 left/top 控制，互不干扰 */
.monopoly-walker-flip svg{transform:scaleX(-1)}

.monopoly-walker-body{transform-box:fill-box;transform-origin:50% 100%;animation:mp-bob 2.2s ease-in-out infinite}
.monopoly-walker-walking .monopoly-walker-body{animation-duration:.46s}
.monopoly-walker-walking .mp-leg-l{animation:mp-leg-l .46s ease-in-out infinite}
.monopoly-walker-walking .mp-leg-r{animation:mp-leg-r .46s ease-in-out infinite}
.monopoly-walker-walking .mp-pole{animation:mp-pole-bounce .46s ease-in-out infinite}
.monopoly-walker-walking .mp-bundle-l{animation:mp-bundle-bounce .46s ease-in-out infinite}
.monopoly-walker-walking .mp-bundle-r{animation:mp-bundle-bounce .46s ease-in-out infinite reverse}

.mp-leg-l,.mp-leg-r{transform-box:fill-box;transform-origin:50% 0}
.mp-pole{transform-box:fill-box;transform-origin:50% 50%}
.mp-bundle-l,.mp-bundle-r{transform-box:fill-box;transform-origin:50% 0}

@keyframes mp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes mp-leg-l{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
@keyframes mp-leg-r{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes mp-pole-bounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1px) rotate(1deg)}}
@keyframes mp-bundle-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}

/* 行走轨迹光点 */
.monopoly-trail-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(255,193,7,.6);box-shadow:0 0 4px rgba(255,193,7,.3);pointer-events:none;z-index:4;animation:mp-trail .8s ease-out forwards}
@keyframes mp-trail{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(.2)}}

/* ==================== 骰子 3D ==================== */
.monopoly-dice-3d{display:inline-block;transition:transform .3s}
.monopoly-rolling .monopoly-dice-3d{animation:mp-dice .6s ease-out}
@keyframes mp-dice{0%{transform:rotateX(0) rotateY(0) scale(1)}50%{transform:rotateX(360deg) rotateY(180deg) scale(1.3)}100%{transform:rotateX(720deg) rotateY(360deg) scale(1)}}

/* ==================== 事件气泡 ==================== */
.monopoly-event-popup{position:absolute;z-index:10;max-width:220px;padding:.625rem .875rem;border-radius:14px;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);box-shadow:0 6px 20px rgba(0,0,0,.12);opacity:0;transform:translateY(10px) scale(.92);transition:opacity .3s cubic-bezier(0.16,1,0.3,1),transform .3s cubic-bezier(0.16,1,0.3,1);pointer-events:none;font-size:.8125rem;line-height:1.4}
.monopoly-event-popup.show{opacity:1;transform:translateY(0) scale(1)}
.monopoly-event-popup::after{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--bs-border-color)}
.monopoly-event-popup::before{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--bs-body-bg);z-index:1}

/* ==================== 金币飞字 ==================== */
.monopoly-gold-fly{position:absolute;z-index:10;font-size:1.1rem;font-weight:700;pointer-events:none;animation:mp-gold-fly 1.3s cubic-bezier(0.16,1,0.3,1) forwards;font-variant-numeric:tabular-nums}
@keyframes mp-gold-fly{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1;transform:translateY(-12px) scale(1.25)}100%{opacity:0;transform:translateY(-48px) scale(1)}}

/* ==================== 屏幕震动 ==================== */
.monopoly-shake{animation:mp-shake .4s ease-in-out}
@keyframes mp-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* ==================== HUD 状态栏 ==================== */
.monopoly-hud{display:flex;flex-wrap:wrap;gap:.5rem;padding:.625rem .875rem;border-radius:16px;background:rgba(var(--bs-body-bg-rgb,255,255,255),.7);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.05)}
[data-bs-theme="dark"] .monopoly-hud{background:rgba(var(--bs-body-bg-rgb,33,37,41),.6);border-color:rgba(255,255,255,.04)}
.monopoly-hud-chip{display:flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:999px;flex:1;min-width:0;justify-content:center}
.monopoly-hud-icon{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50%;font-size:1rem;flex-shrink:0}
@media(min-width:768px){.monopoly-hud-icon{width:2rem;height:2rem;font-size:1.125rem}}
.monopoly-hud-value{font-size:1.125rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.monopoly-hud-label{font-size:.625rem;line-height:1.1;opacity:.6;white-space:nowrap}
@media(min-width:768px){.monopoly-hud-value{font-size:1.25rem}.monopoly-hud-label{font-size:.6875rem}}

/* ==================== 遥控骰子点数选择面板 ==================== */
.monopoly-dice-picker-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);animation:mp-fade-in .2s ease}
.monopoly-dice-picker{background:var(--bs-body-bg,#fff);border-radius:1rem;padding:1.5rem;box-shadow:0 8px 32px rgba(0,0,0,.2);max-width:360px;width:90%;text-align:center}
.monopoly-dice-picker-title{font-size:1rem;font-weight:700;margin-bottom:1rem}
.monopoly-dice-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem}
.monopoly-dice-picker-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem .5rem;border:2px solid rgba(0,0,0,.08);border-radius:.75rem;background:rgba(var(--bs-body-bg-rgb,255,255,255),.8);cursor:pointer;transition:transform .15s cubic-bezier(0.16,1,0.3,1),border-color .15s ease}
.monopoly-dice-picker-btn:hover{transform:translateY(-2px);border-color:var(--bs-primary,#0d6efd)}
.monopoly-dice-picker-btn i{font-size:1.75rem;color:var(--bs-primary,#0d6efd)}
.monopoly-dice-picker-btn span{font-size:.75rem;font-weight:600}
@keyframes mp-fade-in{0%{opacity:0}100%{opacity:1}}

/* ==================== 3D 骰子翻滚展示 ==================== */
.monopoly-dice-overlay{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);animation:mp-fade-in .2s ease}
.monopoly-dice-stage{perspective:1000px;width:140px;height:140px;margin-bottom:1rem}
.monopoly-dice-cube{position:relative;width:140px;height:140px;transform-style:preserve-3d;transform:rotateX(0deg) rotateY(0deg);transition:transform 1.8s cubic-bezier(0.22,1,0.36,1)}
.monopoly-dice-face{position:absolute;width:140px;height:140px;border-radius:20px;background:linear-gradient(135deg,#fff,#e8e8e8);border:2px solid rgba(0,0,0,.08);box-shadow:inset 0 0 24px rgba(0,0,0,.08);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:22px;gap:6px}
[data-bs-theme="dark"] .monopoly-dice-face{background:linear-gradient(135deg,#2d3344,#1e2330);border-color:rgba(255,255,255,.06)}
.monopoly-dice-pip{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#666,#1a1a1a);box-shadow:inset 0 2px 3px rgba(255,255,255,.2);align-self:center;justify-self:center}
[data-bs-theme="dark"] .monopoly-dice-pip{background:radial-gradient(circle at 35% 35%,#aaa,#ddd)}
.monopoly-dice-face-1{transform:translateZ(70px)}
.monopoly-dice-face-2{transform:rotateY(90deg) translateZ(70px)}
.monopoly-dice-face-3{transform:rotateY(180deg) translateZ(70px)}
.monopoly-dice-face-4{transform:rotateY(-90deg) translateZ(70px)}
.monopoly-dice-face-5{transform:rotateX(90deg) translateZ(70px)}
.monopoly-dice-face-6{transform:rotateX(-90deg) translateZ(70px)}
.monopoly-dice-label{font-size:1.125rem;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);opacity:0;transition:opacity .3s ease}
.monopoly-dice-label.show{opacity:1}
.monopoly-dice-overlay-hide{animation:mp-dice-overlay-out .3s ease forwards}
@keyframes mp-dice-overlay-out{0%{opacity:1}100%{opacity:0}}

/* ==================== 无障碍 ==================== */
@media (prefers-reduced-motion: reduce) {
    .monopoly-walker{transition:none}
    .monopoly-walker-body,.mp-leg-l,.mp-leg-r,.mp-pole,.mp-bundle-l,.mp-bundle-r,
    .monopoly-rolling .monopoly-dice-3d,.monopoly-shake,.monopoly-trail-dot{animation:none !important}
    .monopoly-cell:hover{transform:none}
    .monopoly-dice-picker-overlay,.monopoly-dice-picker-btn{animation:none !important;transition:none}
    .monopoly-dice-overlay,.monopoly-dice-cube,.monopoly-dice-label{animation:none !important;transition:none}
}

/* ==================== v3 花里胡哨增强 ==================== */

/* --- 格子入场动画（仅透明度） ---
   ponytail: 旧版带 translateY/scale 位移，getBoundingClientRect() 会把 transform
   计入测量结果，入场动画期间角色定位会偏移，动画结束后再被 load/resize 纠正 → 角色跳动。
   改为只淡入不位移，保证角色定位与格子实际位置始终一致；transform/box-shadow
   过渡并入 transition 列表，避免覆盖 base 规则导致 hover/active 过渡失效。 */
.monopoly-cell{opacity:0}
.monopoly-cell.monopoly-cell-enter{opacity:1;transition:opacity .3s cubic-bezier(0.16,1,0.3,1),transform .2s cubic-bezier(0.16,1,0.3,1),box-shadow .2s cubic-bezier(0.16,1,0.3,1)}

/* --- 活跃格子脉冲发光 --- */
.monopoly-cell-active{animation:mp-cell-pulse 1.4s ease-in-out infinite}
@keyframes mp-cell-pulse{0%,100%{box-shadow:0 0 0 3px var(--bs-primary),0 8px 28px rgba(var(--bs-primary-rgb,13,110,253),.25)}50%{box-shadow:0 0 0 5px var(--bs-primary),0 12px 36px rgba(var(--bs-primary-rgb,13,110,253),.4)}}

/* --- 起点格常驻脉冲 --- */
.monopoly-cell[data-type="start"]{animation:mp-start-glow 2s ease-in-out infinite}
@keyframes mp-start-glow{0%,100%{box-shadow:0 0 8px rgba(255,193,7,.15)}50%{box-shadow:0 0 20px rgba(255,193,7,.35)}}

/* --- 格子 hover 涟漪 --- */
.monopoly-cell:hover .monopoly-cell-icon{transform:scale(1.12);transition:transform .2s cubic-bezier(0.16,1,0.3,1)}

/* --- 角色落地弹跳（只动 translateY，不碰 left/top 定位） --- */
.monopoly-walker-land{animation:mp-walker-land .3s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes mp-walker-land{0%{transform:translateY(-12px)}100%{transform:translateY(0)}}

/* --- 尘土效果 --- */
.monopoly-dust{position:absolute;width:24px;height:24px;pointer-events:none;z-index:3}
.monopoly-dust span{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(180,160,130,.4);animation:mp-dust .5s ease-out forwards}
@keyframes mp-dust{0%{opacity:.6;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-12px)) scale(.3)}}

/* --- 五彩纸屑 --- */
.monopoly-confetti{position:absolute;width:8px;height:8px;pointer-events:none;z-index:20;animation:mp-confetti 1.2s cubic-bezier(0.16,1,0.3,1) forwards}
@keyframes mp-confetti{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--cx,0),var(--cy,80px)) rotate(720deg) scale(.4)}}

/* --- 金币雨 --- */
.monopoly-coin-rain{position:absolute;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE082,#FFC107);box-shadow:0 0 6px rgba(255,193,7,.5);pointer-events:none;z-index:20;animation:mp-coin-rain 1.5s cubic-bezier(0.45,0,0.55,1) forwards}
@keyframes mp-coin-rain{0%{opacity:0;transform:translateY(-20px) scale(0) rotate(0)}15%{opacity:1;transform:translateY(0) scale(1) rotate(180deg)}100%{opacity:0;transform:translateY(var(--ry,200px)) scale(.6) rotate(720deg)}}

/* --- 星星爆发 --- */
.monopoly-star-burst{position:absolute;width:4px;height:4px;pointer-events:none;z-index:20;animation:mp-star-burst .8s ease-out forwards}
@keyframes mp-star-burst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--sx,0),var(--sy,0)) scale(0)}}

/* --- 全屏闪光 --- */
.monopoly-flash{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0;animation:mp-flash .5s ease-out forwards}
@keyframes mp-flash{0%{opacity:0}20%{opacity:var(--fo,.3)}100%{opacity:0}}

/* --- 背景飘浮粒子 --- */
.monopoly-bg-particle{position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;z-index:0;animation:mp-bg-float linear infinite}
@keyframes mp-bg-float{0%{opacity:0;transform:translateY(0) translateX(0)}10%{opacity:var(--bo,.3)}90%{opacity:var(--bo,.3)}100%{opacity:0;transform:translateY(var(--bdy,-100px)) translateX(var(--bdx,20px))}}

/* --- 棋盘背景动画渐变 --- */
.monopoly-board::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,193,7,.03),rgba(76,175,80,.03),rgba(33,150,243,.03));background-size:200% 200%;animation:mp-gradient-shift 8s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes mp-gradient-shift{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}

/* --- 骰子按钮脉冲 --- */
#monopoly-roll-btn:not(:disabled){animation:mp-btn-pulse 2s ease-in-out infinite}
@keyframes mp-btn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--bs-primary-rgb,13,110,253),.3)}50%{box-shadow:0 0 0 8px rgba(var(--bs-primary-rgb,13,110,253,0),0)}}

/* --- 音效开关按钮 --- */
.monopoly-sound-toggle{position:absolute;top:.5rem;right:.5rem;z-index:10;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--bs-border-color);background:var(--bs-body-bg);cursor:pointer;font-size:1rem;color:var(--bs-body-color);transition:transform .2s}
.monopoly-sound-toggle:hover{transform:scale(1.1)}

/* --- 结果提示动画 --- */
#monopoly-result:not(.d-none){animation:mp-result-in .4s cubic-bezier(0.16,1,0.3,1)}
@keyframes mp-result-in{0%{opacity:0;transform:translateY(-10px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* --- HUD 值变化弹跳 --- */
.monopoly-hud-value{transition:transform .15s cubic-bezier(0.34,1.56,0.64,1)}
.monopoly-hud-bump{animation:mp-hud-bump .3s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes mp-hud-bump{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* --- 暗色模式闪光调低 --- */
[data-bs-theme="dark"] .monopoly-flash{--fo:.15}
[data-bs-theme="dark"] .monopoly-bg-particle{--bo:.15}

/* --- reduced-motion 禁用所有新增动画 --- */
@media (prefers-reduced-motion: reduce){
    .monopoly-cell{opacity:1;transform:none}
    .monopoly-cell-active,.monopoly-cell[data-type="start"],#monopoly-roll-btn:not(:disabled),
    .monopoly-board::before,.monopoly-confetti,.monopoly-coin-rain,.monopoly-star-burst,
    .monopoly-flash,.monopoly-bg-particle,.monopoly-dust,.monopoly-walker-land,
    #monopoly-result:not(.d-none),.monopoly-hud-bump{animation:none !important}
}

/* ==================== 山水风景背景 v4 ==================== */

/* --- 远山 --- */
.monopoly-mountains{position:absolute;bottom:0;left:0;right:0;height:40%;pointer-events:none;z-index:0;opacity:.2}
[data-bs-theme="dark"] .monopoly-mountains{opacity:.1}
.monopoly-mountains svg{width:100%;height:100%;display:block}

/* --- 河流 --- */
.monopoly-river{position:absolute;pointer-events:none;z-index:0;opacity:.12}
[data-bs-theme="dark"] .monopoly-river{opacity:.06}
.monopoly-river svg{display:block}

/* --- 路径连接线 --- */
.monopoly-path-svg{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.07}
[data-bs-theme="dark"] .monopoly-path-svg{opacity:.04}

/* --- 散落树木 --- */
.monopoly-scene-tree{position:absolute;pointer-events:none;z-index:0;opacity:.25;width:36px;height:40px}
[data-bs-theme="dark"] .monopoly-scene-tree{opacity:.12}
.monopoly-scene-tree svg{width:100%;height:100%;display:block}

/* ==================== 全屏获奖特效 ==================== */

/* --- 全屏金币雨 --- */
.monopoly-fullscreen-coin{position:fixed;top:-40px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFD700,#FFA000);box-shadow:0 0 8px rgba(255,193,7,.5);z-index:9998;pointer-events:none;animation:mp-fs-coin-fall linear forwards}
@keyframes mp-fs-coin-fall{0%{transform:translateY(0) rotate(0deg);opacity:1}90%{opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* --- 全屏粒子爆发 --- */
.monopoly-fullscreen-burst{position:fixed;left:50%;top:40%;width:8px;height:8px;border-radius:50%;z-index:9998;pointer-events:none;animation:mp-fs-burst .8s cubic-bezier(0.16,1,0.3,1) forwards}
@keyframes mp-fs-burst{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(1);opacity:0}}

/* --- 全屏祝贺横幅 --- */
.monopoly-fullscreen-banner{position:fixed;left:50%;top:30%;transform:translateX(-50%) scale(0);z-index:9998;pointer-events:none;opacity:0}
.monopoly-fullscreen-banner.show{animation:mp-fs-banner 3s cubic-bezier(0.34,1.56,0.64,1) forwards}
.monopoly-fullscreen-banner-inner{padding:1.5rem 3rem;border-radius:1.5rem;background:linear-gradient(135deg,rgba(255,193,7,.95),rgba(255,152,0,.95));box-shadow:0 12px 48px rgba(255,152,0,.4),0 0 0 3px rgba(255,255,255,.3);text-align:center}
.monopoly-fullscreen-banner-amount{font-size:2.5rem;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3);line-height:1}
.monopoly-fullscreen-banner-label{font-size:1rem;font-weight:600;color:rgba(255,255,255,.9);margin-top:.5rem}
@keyframes mp-fs-banner{0%{transform:translateX(-50%) scale(0) translateY(20px);opacity:0}15%{transform:translateX(-50%) scale(1.15) translateY(0);opacity:1}30%{transform:translateX(-50%) scale(1) translateY(0);opacity:1}75%{transform:translateX(-50%) scale(1) translateY(0);opacity:1}100%{transform:translateX(-50%) scale(.8) translateY(-30px);opacity:0}}

/* --- 全屏光波 --- */
.monopoly-fullscreen-shockwave{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:50%;border:4px solid var(--sw-color,#FFC107);z-index:9997;pointer-events:none;transform:translate(-50%,-50%);animation:mp-fs-shockwave 1s ease-out forwards}
@keyframes mp-fs-shockwave{0%{width:0;height:0;opacity:.6;border-width:4px}100%{width:100vw;height:100vw;opacity:0;border-width:1px}}

/* ==================== 移动端适配（防闪烁） ====================
   ponytail: 移动端浏览器对 backdrop-filter + 动画的合成层支持不稳定，会引发整片闪烁；
   同时关闭常驻背景动画与 box-shadow 脉冲，减少移动端重绘开销。 */
@media (max-width: 767.98px) {
    .monopoly-cell,
    .monopoly-hud,
    .monopoly-dice-picker-overlay,
    .monopoly-dice-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    /* 格子直接可见，跳过逐格入场（20+ 格逐一淡入在移动端视觉上即闪烁） */
    .monopoly-cell { opacity: 1; transform: none; transition: none; }
    .monopoly-cell.monopoly-cell-enter { transition: none; }
    /* 常驻背景渐变 / 活跃格脉冲 / 起点格发光 / 骰子按钮脉冲：移动端全部关闭 */
    .monopoly-board::before,
    .monopoly-cell-active,
    .monopoly-cell[data-type="start"],
    #monopoly-roll-btn:not(:disabled) { animation: none !important; }
    /* 角色缩小，适配窄屏格子宽度（约 44x60px，小于 58px 最小格子） */
    .monopoly-walker { width: 2.75rem; height: 3.75rem; }
    .monopoly-walker-land { animation: none !important; }
    /* 事件气泡避免超出屏幕宽度 */
    .monopoly-event-popup { max-width: 70vw; }
}