:root{
    --yellow:#FFCF5C; --purple:#B48CE0; --blue:#7FB2F0; --green:#7BD389;
    --ink:#3E3027; --cream:#FFFDF6; --line:#4A3B2F;
    --pink:#FF9FB2; --mint:#A8E6CF;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html,body{height:100%; margin:0}
  body{
    font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(900px 500px at 15% 0%, #FFF0D9 0%, transparent 60%),
      radial-gradient(900px 520px at 90% 10%, #FFE1EC 0%, transparent 55%),
      linear-gradient(180deg,#E8F7FF 0%, #DDF1E7 55%, #F7E6D6 100%);
    overflow:hidden; user-select:none;
  }
  body::before{
    content:"🐾"; position:fixed; top:12%; left:6%; font-size:120px; opacity:.06; transform:rotate(-18deg);
    pointer-events:none;
  }
  body::after{
    content:"🐾"; position:fixed; bottom:8%; right:5%; font-size:150px; opacity:.05; transform:rotate(22deg);
    pointer-events:none;
  }
  #app{height:100%; display:flex; flex-direction:column; position:relative; z-index:1}

  /* ---------- 顶栏 ---------- */
  header{
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    background:rgba(255,255,255,.72); backdrop-filter:blur(8px);
    border-bottom:3px solid rgba(74,59,47,.10); z-index:6;
  }
  .logo{font-weight:900; font-size:20px; letter-spacing:1px; color:#7A4E2D;
    text-shadow:0 2px 0 #FFE6A8}
  .logo small{font-weight:700; font-size:11px; color:#B08A6A; margin-left:6px; letter-spacing:0}
  .spacer{flex:1}
  .btn{
    border:3px solid var(--line); background:#FFF6E0; color:var(--ink);
    padding:6px 14px; border-radius:999px; font-size:13px; font-weight:800; cursor:pointer;
    box-shadow:0 4px 0 rgba(74,59,47,.25); transition:transform .12s, box-shadow .12s;
  }
  .btn:hover{transform:translateY(-2px); box-shadow:0 6px 0 rgba(74,59,47,.22)}
  .btn:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(74,59,47,.25)}
  .btn.primary{background:linear-gradient(180deg,#FFE08A,#FFC24B)}

  /* ---------- 牌桌 ---------- */
  #table{flex:1; position:relative; display:flex; flex-direction:column; align-items:center;
    padding:8px 8px 0; min-height:0}
  .felt{
    position:absolute; inset:12px 14px 8px; border-radius:34px;
    background:radial-gradient(ellipse at 50% 35%, #C4F0DA 0%, #9FE0C3 55%, #85D2B2 100%);
    border:8px solid #F6C9A2;
    box-shadow:0 14px 30px rgba(122,78,45,.18), inset 0 0 0 4px rgba(255,255,255,.5), inset 0 0 50px rgba(90,160,130,.25);
  }
  .felt::after{content:""; position:absolute; inset:16px; border-radius:24px;
    border:3px dashed rgba(255,255,255,.55);
    background:
      radial-gradient(circle at 18% 22%, rgba(255,255,255,.16) 0 5px, transparent 6px),
      radial-gradient(circle at 24% 30%, rgba(255,255,255,.16) 0 4px, transparent 5px),
      radial-gradient(circle at 30% 22%, rgba(255,255,255,.16) 0 4px, transparent 5px),
      radial-gradient(circle at 76% 68%, rgba(255,255,255,.14) 0 5px, transparent 6px),
      radial-gradient(circle at 82% 76%, rgba(255,255,255,.14) 0 4px, transparent 5px),
      radial-gradient(circle at 88% 68%, rgba(255,255,255,.14) 0 4px, transparent 5px);
    pointer-events:none}
  .seat[data-seat="1"] .avatar{background:radial-gradient(circle at 35% 28%, #FFE9D2, #FFC99C)}
  .seat[data-seat="2"] .avatar{background:radial-gradient(circle at 35% 28%, #E4F7FF, #B7E0F2)}
  .seat[data-seat="3"] .avatar{background:radial-gradient(circle at 35% 28%, #FFE7F0, #FFC2D6)}

  .seat{position:relative; z-index:3; display:flex; align-items:center; gap:10px;
    padding:6px 12px 6px 6px; border-radius:20px; transition:.18s; cursor:pointer}
  .seat:hover{background:rgba(255,255,255,.35)}
  .seat.active{background:rgba(255,255,255,.6); box-shadow:0 6px 0 rgba(74,59,47,.12)}
  .avatar{
    width:62px;height:62px;border-radius:50%; display:grid; place-items:center;
    font-size:36px; flex:none; position:relative;
    background:radial-gradient(circle at 35% 28%, #FFFDF6, #FFE8C4);
    border:4px solid var(--line);
    box-shadow:0 5px 0 rgba(74,59,47,.18), inset 0 -6px 12px rgba(240,180,120,.25);
    transition:transform .15s;
  }
  .seat:hover .avatar{transform:rotate(-6deg) scale(1.05)}
  .seat.active .avatar{animation:bob 1s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(-6px) rotate(3deg)}}
  .seat .meta{display:flex; flex-direction:column; gap:3px; line-height:1.1}
  .seat .name{font-size:14px; font-weight:900; color:#5A4638}
  .seat .count{font-size:11px; font-weight:700; color:#8E7A68}
  .count b{color:#D9772E}
  .seat.active::after{
    content:"✨该我啦"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    background:#FFF; border:2px solid var(--line); border-radius:999px;
    font-size:10px; font-weight:800; padding:1px 8px; white-space:nowrap;
    animation:pop 1.4s infinite; color:#E07A2F;
  }
  @keyframes pop{50%{transform:translate(-50%,-4px)}}
  .seat.targetable .avatar{outline:3px dashed #FF8FA3; outline-offset:4px; animation:wiggle .5s infinite}
  @keyframes wiggle{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}

  .top-seat{align-self:center; margin-top:4px}
  .mid-row{flex:1; width:100%; display:flex; align-items:center; justify-content:space-between;
    gap:8px; min-height:0; padding:0 4px}

  /* ---------- 中央牌堆 ---------- */
  .center{position:relative; flex:1; height:100%; display:flex; align-items:center; justify-content:center; gap:38px}
  .pile{position:relative; width:92px; height:132px; cursor:pointer}
  .card{
    position:relative; width:92px; height:132px; border-radius:16px; flex:none;
    background:linear-gradient(170deg,#FFFDF6,#FFF3DC);
    border:3px solid var(--line);
    box-shadow:0 6px 0 rgba(74,59,47,.22);
    display:grid; place-items:center; transition:transform .16s, box-shadow .16s, filter .16s;
    color:var(--ink); overflow:hidden;
  }
  .card::before{content:""; position:absolute; inset:8px; border-radius:10px;
    border:2px dashed rgba(74,59,47,.18)}
  .card .main{font-size:40px; font-weight:900; line-height:1; z-index:2;
    text-shadow:0 2px 0 rgba(255,255,255,.7)}
  .card .ico{font-size:38px; z-index:2}
  .card .tag{position:absolute; bottom:8px; font-size:10px; font-weight:800; color:#7A6A58; z-index:2}
  .card .corner{position:absolute; top:6px; left:8px; font-size:13px; font-weight:900; z-index:2}
  .card .corner.br{left:auto; right:8px; top:auto; bottom:6px; transform:rotate(180deg)}
  .c-yellow{background:linear-gradient(170deg,#FFF6D8,#FFE28F)}
  .c-purple{background:linear-gradient(170deg,#F3E9FF,#D9C2F2)}
  .c-blue{background:linear-gradient(170deg,#E4F1FF,#AFD2F7)}
  .c-green{background:linear-gradient(170deg,#E7FBEA,#AEE8B7)}
  .c-wild{background:linear-gradient(135deg,#FFE28F,#FFB1C6 28%,#D9C2F2 52%,#AFD2F7 74%,#AEE8B7)}
  .c-wild .main{font-size:16px; color:#fff; text-shadow:0 2px 4px rgba(74,59,47,.55)}

  .card.back{
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 30%, transparent 31%),
      repeating-linear-gradient(45deg, #7FA8D9 0 10px, #6C93C4 10px 20px);
    border-color:#3F5C82;
  }
  .card.back::before{border-color:rgba(255,255,255,.45); border-style:solid}
  .card.back::after{content:"🐾"; position:absolute; font-size:30px; opacity:.95;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
  .stack .card.back:nth-child(2){position:absolute; inset:0; transform:translate(4px,5px) rotate(1deg)}
  .stack .card.back:nth-child(3){position:absolute; inset:0; transform:translate(8px,10px) rotate(2deg)}

  .discard .card{position:absolute; inset:0}
  .discard .card.top{animation:drop .35s cubic-bezier(.2,.9,.3,1.25)}
  @keyframes drop{from{transform:translateY(-30px) rotate(-10deg) scale(1.1); opacity:.3} to{transform:none; opacity:1}}

  .color-chip{position:absolute; top:-32px; left:50%; transform:translateX(-50%);
    display:flex; gap:6px; align-items:center; font-size:11px; font-weight:800; color:#5A4638;
    background:#fff; border:2px solid var(--line); border-radius:999px; padding:2px 10px; white-space:nowrap}
  .dot{width:12px;height:12px;border-radius:50%; border:2px solid rgba(74,59,47,.35)}
  .dot.yellow{background:var(--yellow)} .dot.purple{background:var(--purple)}
  .dot.blue{background:var(--blue)} .dot.green{background:var(--green)}

  .center-info{position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
    display:flex; gap:12px; font-size:11px; font-weight:800; color:#5F7A6C; white-space:nowrap}
  .dir .arrow{display:inline-block; transition:.3s}

  .bomb-badge{position:absolute; top:-26px; right:-20px; font-size:12px; font-weight:800;
    background:#FF8A8A; color:#fff; border:2px solid var(--line); padding:2px 9px; border-radius:999px;
    animation:pulse 1s infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 7px rgba(255,138,138,.22)}}

  /* ---------- 手牌 ---------- */
  .hand-wrap{position:relative; z-index:4; width:100%; padding:30px 8px 12px;
    display:flex; align-items:flex-end; justify-content:center; min-height:0}
  .hand{display:flex; align-items:flex-end; justify-content:center; max-width:100%;
    overflow-x:auto; overflow-y:visible; padding:18px 8px 6px; scrollbar-width:none}
  .hand::-webkit-scrollbar{display:none}
  .hand .card{width:76px; height:110px; cursor:pointer; margin-left:-10px; transform-origin:bottom center;
    transition:transform .16s, box-shadow .16s, filter .16s}
  .hand .card:first-child{margin-left:0}
  .hand .card.playable{box-shadow:0 8px 0 rgba(74,59,47,.2), 0 0 0 4px #FFD166; animation:wob 2.2s ease-in-out infinite}
  @keyframes wob{50%{transform:translateY(-4px)}}
  .hand .card.playable:hover{transform:translateY(-16px) rotate(0deg) scale(1.06)}
  .hand .card:not(.playable){filter:grayscale(.25) brightness(.94)}
  .hand .card .main{font-size:32px}
  .hand .card .ico{font-size:30px}
  .hand .card .corner{font-size:12px}
  .hand .card .tag{font-size:9px}

  .hand-tip{position:absolute; top:2px; left:50%; transform:translateX(-50%);
    font-size:12px; font-weight:800; color:#8A5A2B; background:#FFF3C9; border:2px solid var(--line);
    padding:3px 12px; border-radius:999px; opacity:0; transition:.2s; white-space:nowrap; z-index:5}
  .hand-tip.show{opacity:1; animation:pop2 1.6s infinite}
  @keyframes pop2{50%{transform:translate(-50%,-3px)}}
  #endTurnBtn{position:absolute; right:14px; bottom:14px; display:none; z-index:6}

  /* ---------- 道具栏 ---------- */
  #dock{
    position:absolute; left:16px; bottom:12px; z-index:7;
    display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  }
  .dock-title{font-size:11px; font-weight:900; color:#8A5A2B; background:#FFF3C9;
    border:2px solid var(--line); border-radius:999px; padding:2px 10px; box-shadow:0 3px 0 rgba(74,59,47,.18)}
  .dock-items{display:flex; gap:8px; background:rgba(255,255,255,.82); padding:8px 10px;
    border:3px solid var(--line); border-radius:20px; box-shadow:0 5px 0 rgba(74,59,47,.2)}
  .item{
    width:46px;height:46px; border-radius:14px; border:2px solid transparent; background:#FFF6E0;
    font-size:24px; display:grid; place-items:center; cursor:pointer; transition:.15s; position:relative;
  }
  .item:hover{transform:translateY(-3px) rotate(-6deg)}
  .item.sel{border-color:var(--line); background:#FFE7A8; box-shadow:0 0 0 3px #FFD166 inset; transform:translateY(-3px)}
  .item .nm{position:absolute; bottom:-15px; font-size:9px; font-weight:800; color:#8E7A68; display:none}

  /* ---------- 提示 ---------- */
  #log{position:fixed; right:14px; top:60px; width:230px; display:flex; flex-direction:column;
    gap:6px; z-index:25; pointer-events:none}
  .toast{font-size:12px; font-weight:700; color:#5A4638; background:#FFFDF6;
    border:2px solid var(--line); border-left:6px solid #FFCF5C; border-radius:12px;
    padding:6px 10px; box-shadow:0 4px 0 rgba(74,59,47,.15); animation:slideIn .25s ease-out}
  @keyframes slideIn{from{transform:translateX(20px); opacity:0}}

  /* ---------- 特效层 ---------- */
  #fx{position:fixed; inset:0; pointer-events:none; z-index:30; overflow:hidden}
  .projectile{position:fixed; font-size:34px; filter:drop-shadow(0 6px 6px rgba(0,0,0,.2)); will-change:transform}
  .splat{position:fixed; transform:translate(-50%,-50%); pointer-events:none}
  .splat .blob{position:absolute; border-radius:50%; opacity:.9}
  .bubble{
    position:fixed; transform:translate(-50%,-100%);
    background:#fff; border:3px solid var(--line); border-radius:16px; padding:6px 12px;
    font-size:13px; font-weight:800; color:#5A4638; white-space:nowrap; z-index:32;
    box-shadow:0 5px 0 rgba(74,59,47,.18); animation:bubbleIn .25s cubic-bezier(.2,.9,.3,1.4);
  }
  .bubble::after{content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
    border:8px solid transparent; border-top-color:var(--line)}
  .bubble::before{content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
    border:7px solid transparent; border-top-color:#fff; z-index:1}
  .bubble.below{transform:translate(-50%,0)}
  .bubble.below::after{bottom:auto; top:-10px; border-top-color:transparent; border-bottom-color:var(--line)}
  .bubble.below::before{bottom:auto; top:-6px; border-top-color:transparent; border-bottom-color:#fff}
  @keyframes bubbleIn{from{transform:translate(-50%,-60%) scale(.6); opacity:0}}
  .drop{position:fixed; font-size:18px; pointer-events:none; z-index:31}
  .stain{position:fixed; z-index:29; font-size:30px; transform:translate(-50%,-50%); opacity:.85;
    animation:stainIn .3s ease-out}
  @keyframes stainIn{from{transform:translate(-50%,-50%) scale(2); opacity:0}}
  .shake{animation:shakeSeat .4s}
  @keyframes shakeSeat{25%{transform:translate(-5px,2px) rotate(-2deg)}75%{transform:translate(5px,-2px) rotate(2deg)}}
  .wet .avatar{filter:saturate(.7) brightness(.9); box-shadow:0 5px 0 rgba(74,59,47,.18), inset 0 0 22px rgba(80,160,240,.65)}
  .splatted .avatar{box-shadow:0 5px 0 rgba(74,59,47,.18), inset 0 0 22px rgba(230,80,90,.55)}

  /* ---------- 弹窗 ---------- */
  .modal-bg{position:fixed; inset:0; background:rgba(62,48,39,.45); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:40; padding:16px}
  .modal-bg.show{display:flex}
  .modal{width:min(560px,94vw); max-height:86vh; overflow:auto;
    background:linear-gradient(180deg,#FFFDF6,#FFF4E2);
    border:4px solid var(--line); border-radius:26px; padding:20px 22px;
    box-shadow:0 18px 0 rgba(74,59,47,.22), 0 30px 60px rgba(0,0,0,.2)}
  .modal h2{margin:0 0 10px; font-size:21px; color:#C26A2E; font-weight:900}
  .modal p,.modal li{font-size:13px; line-height:1.75; color:#5A4638; font-weight:600}
  .modal ul{padding-left:18px; margin:6px 0}
  .modal .row{display:flex; gap:8px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap}
  .color-pick{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px}
  .color-btn{border:3px solid var(--line); border-radius:16px; padding:16px; font-size:16px; font-weight:900;
    color:#fff; cursor:pointer; text-shadow:0 2px 2px rgba(0,0,0,.18); box-shadow:0 5px 0 rgba(74,59,47,.2)}
  .color-btn.yellow{background:linear-gradient(180deg,#FFDD7A,#F4B73C)}
  .color-btn.purple{background:linear-gradient(180deg,#CDA8EE,#9A6FD0)}
  .color-btn.blue{background:linear-gradient(180deg,#A6CBFA,#5E93D8)}
  .color-btn.green{background:linear-gradient(180deg,#A6E7B0,#5FB56A)}
  .color-btn:hover{filter:brightness(1.06); transform:translateY(-2px)}

  .score-table{width:100%; border-collapse:collapse; margin-top:8px}
  .score-table th,.score-table td{padding:8px 10px; font-size:13px; text-align:left;
    border-bottom:2px dashed rgba(74,59,47,.15); font-weight:700}
  .score-table th{color:#9A8571}
  .score-table tr.me td{color:#C26A2E}

  .confetti{position:fixed; top:-20px; width:9px; height:15px; border-radius:3px; z-index:41;
    animation:fall linear forwards; pointer-events:none}
  @keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

  @media (max-width:1150px){
    #dock{left:10px; right:10px; bottom:8px; align-items:center}
    .dock-items{width:100%; max-width:560px; margin:0 auto; justify-content:space-between}
    .hand-wrap{padding-bottom:90px}
    #endTurnBtn{right:12px; bottom:148px}
  }
  @media (max-width:760px){
    html,body{overflow-x:hidden}
    #app{overflow:hidden}
    #table{width:100%; overflow:hidden}
    header{padding:6px 8px; gap:5px; flex-wrap:nowrap}
    .logo{max-width:112px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
    .btn{padding:3px 8px; font-size:10.5px}
    .hand-wrap,.hand{min-width:0; width:100%}
    .mid-row{width:100%}
    .logo{font-size:15px} .logo small{display:none}
    .btn{padding:4px 9px; font-size:11px}
    #table{padding:4px 2px 0}
    .felt{inset:6px 4px 4px; border-width:6px; border-radius:22px}
    .top-seat{margin-top:2px; padding:2px 6px; gap:4px}
    .top-seat .avatar{width:40px;height:40px;font-size:22px;border-width:3px}
    .top-seat .name{font-size:11px} .top-seat .count{font-size:9px}
    .mid-row{display:flex; align-items:center; justify-content:space-between; padding:0 2px; gap:2px}
    .side-seat{flex-direction:column; gap:2px; padding:0}
    .side-seat .avatar{width:42px;height:42px;font-size:23px;border-width:3px}
    .side-seat .meta{align-items:center}
    .side-seat .name{font-size:10px} .side-seat .count{font-size:9px}
    .center{flex:1; gap:10px; height:auto}
    .pile,.card{width:60px;height:86px;border-radius:12px}
    .card .main{font-size:26px} .card .ico{font-size:24px}
    .card .tag{font-size:8px;bottom:5px}
    .color-chip{top:-26px;font-size:10px;padding:1px 8px}
    .center-info{bottom:-20px;font-size:10px;gap:8px}
    .hand-wrap{margin-top:auto; padding:16px 4px 96px}
    .hand .card{width:58px;height:86px;margin-left:-12px}
    .hand .card .main{font-size:24px} .hand .card .ico{font-size:22px}
    #dock{left:6px; right:6px; bottom:6px; align-items:center}
    .dock-title{font-size:10px; padding:1px 8px}
    .dock-items{width:100%; justify-content:space-between; gap:4px; padding:6px 8px}
    .item{width:36px;height:36px;font-size:19px;border-radius:11px}
    #log{width:150px; right:8px; top:54px}
    .seat.active::after{font-size:9px; padding:0 6px}
    #endTurnBtn{right:6px; bottom:78px}
  }