:root{
    --bg0:#05070C;
    --bg1:#0A0D14;
    --panel:rgba(255,255,255,0.035);
    --line:rgba(255,255,255,0.08);
    --line2:rgba(255,255,255,0.05);
    --txt:rgba(255,255,255,0.95);
    --muted:rgba(255,255,255,0.55);

    --good:#2cff8a; /* down (green) */
    --bad:#ff3c3c;  /* up (red) */

    --white:#b9c0cb;
    --blue:#4ab2ff;
    --gold:#ffc857;

    --fund:#63d6ff;
    --stock:#ffcf5a;
    --human:#ff7aa2;
    --tool:#9aff7a;

    --cap:25;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    color:var(--txt);
    font-family: "DengXian","等线",system-ui,-apple-system,"Segoe UI",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
    overflow:hidden;
    background:
      radial-gradient(1100px 700px at 22% 18%, rgba(58,160,255,0.14), transparent 58%),
      radial-gradient(900px 520px at 78% 28%, rgba(255,179,71,0.12), transparent 60%),
      radial-gradient(1000px 600px at 50% 86%, rgba(126,224,126,0.10), transparent 62%),
      linear-gradient(180deg, var(--bg0), var(--bg1));
  }

  /* ========= Market mood (B: casino vibe) ========= */
  body.market-up{
    background:
      radial-gradient(900px 600px at 50% 40%, rgba(255,60,60,0.10), transparent 62%),
      radial-gradient(1100px 700px at 22% 18%, rgba(74,178,255,0.10), transparent 58%),
      linear-gradient(180deg, var(--bg0), var(--bg1));
  }
  body.market-down{
    background:
      radial-gradient(900px 600px at 50% 40%, rgba(44,255,138,0.10), transparent 62%),
      radial-gradient(1100px 700px at 22% 18%, rgba(74,178,255,0.10), transparent 58%),
      linear-gradient(180deg, var(--bg0), var(--bg1));
  }

  /* ========= Typography ========= */
  .hFont{
    font-family: "Microsoft YaHei","微软雅黑","PingFang SC","DengXian","等线",sans-serif;
    font-weight:900;
    letter-spacing:.5px;
  }
  .small{ font-size:12px; color:var(--muted); }
  .muted{ color:var(--muted); }

  /* ========= MENU ========= */
  .menuPage{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .menuFX{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0.9;
    background:
      radial-gradient(900px 400px at 50% 38%, rgba(255,255,255,0.06), transparent 65%),
      linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.10));
  }
  .ticker{
    position:absolute;
    left:0; right:0; bottom:18px;
    height:34px;
    overflow:hidden;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    opacity:0.55;
    pointer-events:none;
  }
  .tickerTrack{
    display:flex;
    gap:18px;
    white-space:nowrap;
    will-change:transform;
    animation:ticker 26s linear infinite;
    font-size:12px;
    color:rgba(255,255,255,0.72);
  }
  @keyframes ticker{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .menuPanel{
    position:relative;
    width:min(560px, 92vw);
    padding:26px 22px 20px 22px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(10,12,18,0.78);
    box-shadow:0 24px 90px rgba(0,0,0,0.70);
    overflow:hidden;
  }
  .menuPanel:before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      radial-gradient(800px 420px at 20% 10%, rgba(58,160,255,0.18), transparent 55%),
      radial-gradient(700px 380px at 80% 15%, rgba(255,179,71,0.16), transparent 58%);
    filter:blur(0px);
    z-index:0;
  }
  .menuInner{ position:relative; z-index:1; text-align:center; }
  .gameTitle{
    font-size:38px;
    margin:8px 0 10px 0;
  }
  .menuSub{
    font-size:12px;
    line-height:1.55;
    margin:0 0 18px 0;
    color:rgba(255,255,255,0.68);
  }
  .menuCards{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:14px 0 6px 0;
  }
  .miniCard{
    width:78px; height:96px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.03);
    position:relative;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.35);
    transform:rotate(-2deg);
  }
  .miniCard:nth-child(2){ transform:rotate(1deg) translateY(-4px); }
  .miniCard:nth-child(3){ transform:rotate(3deg); }
  .miniArt{
    position:absolute; inset:10px 10px 32px 10px;
    border-radius:12px;
    background:linear-gradient(135deg, rgba(58,160,255,0.30), rgba(126,224,126,0.22));
    border:1px solid rgba(255,255,255,0.10);
  }
  .miniName{
    position:absolute; left:10px; right:10px; bottom:10px;
    height:16px;
    border-radius:10px;
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.10);
  }
  .menuBtns{
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:stretch;
    margin-top:16px;
  }
  .menuBtn{
    height:58px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.06);
    color:#fff;
    font-size:16px;
    cursor:pointer;
    transition:transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  }
  .menuBtn:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.22);
  }
  .menuBtn:disabled{ opacity:0.45; cursor:not-allowed; transform:none; }
  .menuBtn.primary{
    border:none;
    color:#091019;
    font-weight:1000;
    background:linear-gradient(90deg, rgba(58,160,255,0.98), rgba(126,224,126,0.88));
    box-shadow:0 18px 60px rgba(0,0,0,0.60);
  }
  .menuBtn.primary:hover{ transform:translateY(-2px) scale(1.01); filter:saturate(1.05); }


  /* ========= ROLE PAGES ========= */
  .rolePage{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .rolePanel{
    width:min(980px, 94vw);
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(10,12,18,0.80);
    box-shadow:0 24px 90px rgba(0,0,0,0.75);
    padding:18px 18px 16px 18px;
    overflow:hidden;
    position:relative;
  }
  .rolePanel:before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      radial-gradient(900px 360px at 18% 0%, rgba(58,160,255,0.18), transparent 60%),
      radial-gradient(900px 360px at 82% 0%, rgba(255,179,71,0.16), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
    z-index:0;
  }
  .roleHeader,.roleFooter,.roleGrid,.upgradeGrid,.upgradeHint{ position:relative; z-index:1; }
  .roleHeader{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    padding:6px 6px 14px 6px;
    border-bottom:1px solid rgba(255,255,255,0.10);
  }
  .roleGrid{
    padding:16px 6px 6px 6px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
  }
  .roleCard{
    border-radius:22px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(0,0,0,0.22);
    padding:14px;
    cursor:pointer;
    transition:transform .16s ease, border-color .16s ease, background .16s ease, filter .16s ease;
    overflow:hidden;
    position:relative;
  }
  .roleCard:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,0.24);
    background:rgba(255,255,255,0.05);
    filter:saturate(1.02);
  }
  .roleCard.disabled{
    opacity:0.45;
    cursor:not-allowed;
    transform:none !important;
    filter:none !important;
  }
  .roleCard.selected{
    border-color:rgba(126,224,126,0.55);
    box-shadow:0 0 0 2px rgba(126,224,126,0.22) inset, 0 18px 50px rgba(0,0,0,0.45);
  }
  .roleTopRow{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
  }
  .roleName{
    font-size:18px;
    text-shadow:0 10px 28px rgba(0,0,0,0.65);
  }
  .roleStars{
    font-size:12px;
    letter-spacing:1px;
    white-space:nowrap;
    color:rgba(255,255,255,0.88);
  }
  .roleMeta{
    margin-top:10px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .tag{
    padding:3px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(0,0,0,0.20);
    font-size:11px;
    color:rgba(255,255,255,0.78);
  }
  .tag.hp{ color:rgba(255,120,120,0.95); }
  .roleDesc{
    margin-top:10px;
    font-size:12px;
    line-height:1.35;
    color:rgba(255,255,255,0.78);
    min-height:44px;
  }
  .roleFooter{
    margin-top:10px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px 6px 4px 6px;
    border-top:1px solid rgba(255,255,255,0.10);
  }

  .upgradeHint{
    padding:14px 6px 2px 6px;
    line-height:1.45;
    color:rgba(255,255,255,0.70);
  }
  .upgradeGrid{
    padding:14px 6px 6px 6px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
  }
  .upgradeCard{
    border-radius:22px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(0,0,0,0.22);
    padding:14px;
    cursor:pointer;
    transition:transform .16s ease, border-color .16s ease, background .16s ease;
  }
  .upgradeCard:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,0.24);
    background:rgba(255,255,255,0.05);
  }
  .upgradeCard.selected{
    border-color:rgba(58,160,255,0.65);
    box-shadow:0 0 0 2px rgba(58,160,255,0.22) inset;
  }
  .upgradeTitle{
    font-size:14px;
  }
  .upgradeDesc{
    margin-top:8px;
    font-size:12px;
    line-height:1.35;
    color:rgba(255,255,255,0.76);
    min-height:40px;
  }

  @media (max-width: 980px){
    .roleGrid,.upgradeGrid{ grid-template-columns:1fr; }
  }

  /* ========= GAME LAYOUT ========= */
  .gamePage{ display:none; height:100vh; }
  .gameContainer{
    height:100%;
    display:grid;
    grid-template-columns: 360px 1fr 380px;
    gap:12px;
    padding:12px;
  }
  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:0;
    box-shadow: 0 16px 55px rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
  }

  /* ========= Center stage ========= */
  .panel.centerStage{
    position:relative;
    border:1px solid rgba(255,255,255,0.14);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.04) inset,
      0 0 40px rgba(74,178,255,0.15),
      0 22px 80px rgba(0,0,0,0.68);
  }
  .panel.centerStage:before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      radial-gradient(650px 320px at 50% 34%, rgba(74,178,255,0.11), transparent 62%);
    pointer-events:none;
  }
  .panelHeader{
    padding:12px 14px;
    border-bottom:1px solid var(--line2);
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  }
  .panelTitle{ font-size:13px; }
  .panelSub{ margin-top:4px; font-size:11px; color:rgba(255,255,255,0.60); line-height:1.25; }
  .metaSmall{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    font-size:11px;
    color:rgba(255,255,255,0.70);
    white-space:nowrap;
  }

  /* LEFT */
  .leftBody{
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:0;
    overflow:auto;
  }
  .section{
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    background:rgba(0,0,0,0.20);
    overflow:hidden;
  }
  .sectionHead{
    padding:10px 12px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .sectionName{ font-size:12px; }
  .sectionHint{ font-size:11px; color:rgba(255,255,255,0.55); }
  .gridWrap{ padding:10px; }
  .emptyHint{ color:rgba(255,255,255,0.55); font-size:12px; line-height:1.35; padding:10px; }
  .miniGrid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; }

  /* CENTER */
  .centerBody{
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:0;
  }
  .centerTop{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
  }

  /* Delivery pressure bar */
  .deliveryBar{
    width:100%;
    height:14px;
    border-radius:999px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.10);
    overflow:hidden;
    margin-bottom:10px;
  }
  .deliveryInner{
    height:100%;
    width:100%;
    background:linear-gradient(90deg, var(--blue) 0%, var(--gold) 60%, var(--bad) 100%);
    transition:width .40s ease;
  }
  .deliveryBar.danger{
    animation:pulseDanger 1s infinite;
  }
  @keyframes pulseDanger{
    0%{ box-shadow:0 0 0 rgba(255,60,60,0); }
    50%{ box-shadow:0 0 18px rgba(255,60,60,0.55); }
    100%{ box-shadow:0 0 0 rgba(255,60,60,0); }
  }
  .targetText{ font-size:14px; }
  .deliveryText{
    color:rgba(255,255,255,0.72);
    font-size:12px;
    text-align:right;
    line-height:1.25;
  }
  .hpRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .hearts{
    display:flex;
    gap:8px;
    user-select:none;
  }
  .heart{
    width:18px; height:18px;
    position:relative;
    transform:rotate(-45deg);
  }
  .heart:before,.heart:after{
    content:"";
    position:absolute;
    width:10px; height:16px;
    background:linear-gradient(180deg, rgba(255,80,80,0.95), rgba(210,67,67,0.95));
    border-radius:10px 10px 0 0;
    top:0;
    left:8px;
    box-shadow:0 6px 16px rgba(0,0,0,0.35);
  }
  .heart:after{ left:0; transform:rotate(90deg); transform-origin:bottom left; }
  .progressRow{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .moneyLabel{ font-size:12px; color:rgba(255,255,255,0.72); white-space:nowrap; }
  .progressOuter{
    width:min(720px, 60vw);
    height:16px;
    border-radius:999px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.14);
    overflow:hidden;
    position:relative;
    transform-origin:center;
    flex:1 1 260px;
  }
  .progressInner{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, rgba(58,160,255,0.92), rgba(126,224,126,0.86));
    border-right:1px solid rgba(255,255,255,0.25);
    transition:width .22s ease;
  }
  .progressOuter.pulse{ animation:barPulse .32s ease; }
  @keyframes barPulse{
    0%{ transform:translateY(0) scaleY(1); }
    50%{ transform:translateY(-1px) scaleY(1.10); }
    100%{ transform:translateY(0) scaleY(1); }
  }
  .barFloat{
    position:absolute;
    top:-26px;
    right:10px;
    font-weight:1000;
    font-size:16px;
    text-shadow:0 2px 10px rgba(0,0,0,0.55);
    animation:floatUp 1.0s forwards;
    pointer-events:none;
  }
  @keyframes floatUp{
    from{ opacity:1; transform:translateY(0); }
    to{ opacity:0; transform:translateY(-18px); }
  }
  .bigOpenBtn{
    width:min(560px, 92%);
    height:96px;
    margin:2px auto 0 auto;
    font-size:36px;
    font-weight:1000;
    border-radius:28px;
    border:none;
    cursor:pointer;
    color:#0a0f14;
    background:linear-gradient(90deg, rgba(255,60,60,0.96), rgba(255,200,87,0.96));
    box-shadow:0 0 30px rgba(255,60,60,0.35), 0 20px 80px rgba(0,0,0,0.75);
    transition:transform .15s ease, filter .15s ease;
  }
  .bigOpenBtn:hover{ transform:scale(1.06); filter:saturate(1.18); }
  .bigOpenBtn:disabled{ opacity:0.45; cursor:not-allowed; transform:none; }

  .revealWrap{ flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; }
  .revealTitle{
    font-size:12px;
    color:rgba(255,255,255,0.65);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .revealGrid{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:repeat(3, 1fr);
    gap:10px;
  }
  .cell{
    border-radius:18px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    min-height:92px;
  }
  .cell.revealed.good{ background:rgba(44,255,138,0.18); border-color:rgba(44,255,138,0.40); }
  .cell.revealed.bad{  background:rgba(255,60,60,0.18); border-color:rgba(255,60,60,0.42); }

  .hugeDelta{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:1000;
    font-size:56px;
    letter-spacing:1px;
    opacity:0;
    transform:scale(0.92);
    animation:hugePop 1.05s forwards;
    text-shadow:0 10px 26px rgba(0,0,0,0.65);
    pointer-events:none;
  }
  @keyframes hugePop{
    0%{ opacity:0; transform:scale(0.90); }
    18%{ opacity:1; transform:scale(1.04); }
    100%{ opacity:0; transform:scale(1.00); }
  }

  /* RIGHT */
  .rightBody{ padding:12px; min-height:0; overflow:auto; }
  .historyList{ display:flex; flex-direction:column; gap:10px; }
  .hItem{
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    background:rgba(0,0,0,0.22);
    padding:10px;
  }
  .hTop{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    font-weight:900;
  }
  .hSub{ margin-top:6px; font-size:11px; color:rgba(255,255,255,0.72); line-height:1.35; }
  .goodTxt{ color:rgba(255,120,120,0.98); font-weight:1000; }
  .badTxt{  color:rgba(44,255,138,0.95); font-weight:1000; }

  /* ========= Hearthstone-like card ========= */
  .hsCard{
    width:100%;
    max-width:260px;
    border-radius:18px;
    position:relative;
    padding:8px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 14px 40px rgba(0,0,0,0.45);
    overflow:hidden;
  }
  .hsCard.r1{ border-color:rgba(185,192,203,0.32); }
  .hsCard.r2{ border-color:rgba(58,160,255,0.42); }
  .hsCard.r3{ border-color:rgba(255,179,71,0.42); }

  .hsFrame{
    border-radius:14px;
    padding:10px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.42));
    border:1px solid rgba(255,255,255,0.10);
  }
  .hsFrame:before{
    content:"";
    position:absolute;
    inset:-60px -60px auto -60px;
    height:140px;
    background:radial-gradient(120px 120px at 40% 60%, rgba(255,255,255,0.10), transparent 70%);
    pointer-events:none;
    opacity:0.8;
  }

  .hsTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    position:relative;
    z-index:1;
  }
  .hsName{
    flex:1;
    min-width:0;
    font-size:16px;
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-shadow:0 4px 12px rgba(0,0,0,0.65);
  }
  .hsStars{
    font-size:12px;
    letter-spacing:1px;
    color:rgba(255,255,255,0.86);
    text-shadow:0 4px 12px rgba(0,0,0,0.55);
    white-space:nowrap;
  }
  .hsStars.r1{ color:rgba(255,255,255,0.75); }
  .hsStars.r2{ color:rgba(58,160,255,0.95); }
  .hsStars.r3{ color:rgba(255,179,71,0.95); }

  .hsArt{
    margin-top:10px;
    height:112px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:
      radial-gradient(220px 140px at 35% 30%, rgba(255,255,255,0.08), transparent 60%),
      linear-gradient(135deg, rgba(58,160,255,0.25), rgba(255,179,71,0.18));
    position:relative;
    overflow:hidden;
  }
  .hsArt .colorCore{
    position:absolute;
    inset:12px;
    border-radius:12px;
    background:var(--c);
    filter:saturate(1.1);
    opacity:0.96;
  }
  .hsArt .shine{
    position:absolute;
    inset:-40px -60px auto -60px;
    height:160px;
    background:radial-gradient(180px 120px at 50% 70%, rgba(255,255,255,0.18), transparent 70%);
    transform:rotate(8deg);
    opacity:0.65;
  }

  .hsBadges{
    margin-top:10px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    position:relative;
    z-index:1;
  }
  .pill{
    padding:2px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.16);
    font-size:11px;
    color:rgba(255,255,255,0.78);
    background:rgba(0,0,0,0.22);
  }
  .pill.cat-fund{ color:var(--fund); }
  .pill.cat-stock{ color:var(--stock); }
  .pill.cat-human{ color:var(--human); }
  .pill.cat-tool{ color:var(--tool); }

  .hsNums{
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-weight:1000;
    position:relative;
    z-index:1;
  }
  .hsUp, .hsDown{
    width:48%;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.12);
    padding:8px 10px;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    background:rgba(0,0,0,0.18);
  }
  .hsUp{ color:rgba(255,115,115,0.98); }   /* up in red */
  .hsDown{ color:rgba(160,255,160,0.95); } /* down in green */
  .hsLabel{ font-size:11px; color:rgba(255,255,255,0.66); font-weight:700; }
  .hsVal{ font-size:16px; }

  .hsEff{
    margin-top:10px;
    min-height:34px;
    font-size:12px;
    line-height:1.28;
    color:rgba(255,255,255,0.78);
    position:relative;
    z-index:1;
  }

  /* MINI TILES (left grids + reveal grid) */
  .logoTile{
    position:relative;
    height:44px;
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    user-select:none;
    overflow:hidden;
  }
  .logoTile:hover{ border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.05); }
  .logo{
    width:32px; height:32px;
    border-radius:12px;
    background:var(--c);
    border:1px solid rgba(255,255,255,0.14);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 10px 24px rgba(0,0,0,0.35);
  }
  .rarDot{
    position:absolute;
    width:8px; height:8px;
    border-radius:50%;
    top:7px; right:7px;
    opacity:0.95;
    box-shadow:0 0 0 2px rgba(0,0,0,0.25);
  }
  .rar1{ background:var(--white); }
  .rar2{ background:var(--blue); }
  .rar3{ background:var(--gold); }

  /* Tooltip */
  .tooltip{
    position:fixed;
    z-index:9999;
    pointer-events:none;
    display:none;
    width:280px;
    transform:translateZ(0);
  }
  .tooltip .hsCard{ max-width:280px; }

  /* Mix overlay */
  .mixPile{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(0.98);
    width:240px;
    height:130px;
    background:rgba(10,12,18,0.88);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:0.25s;
    pointer-events:none;
    z-index:40;
    box-shadow:0 18px 60px rgba(0,0,0,0.70);
  }
  .mixPile.active{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .mixText{ color:rgba(255,255,255,0.88); font-size:12px; letter-spacing:1px; }

  /* Reward overlay */
  .rewardOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.58);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:60;
  }
  .rewardPanel{
    width:min(980px, 92vw);
    border-radius:22px;
    background:rgba(10,12,18,0.92);
    border:1px solid rgba(255,255,255,0.18);
    box-shadow:0 18px 70px rgba(0,0,0,0.75);
    overflow:hidden;
  }
  .rewardHeader{
    padding:14px 16px 12px 16px;
    border-bottom:1px solid rgba(255,255,255,0.10);
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    background:
      radial-gradient(720px 220px at 20% 0%, rgba(58,160,255,0.16), transparent 60%),
      radial-gradient(720px 220px at 80% 0%, rgba(255,179,71,0.14), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
  }
  .rewardHeader .h{ font-size:14px; }
  .rewardHeader .s{ font-size:11px; color:rgba(255,255,255,0.62); }

  .rewardGrid{
    padding:16px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
  }
  .rewardPick{
    cursor:pointer;
    transition:transform .16s ease, filter .16s ease;
  }
  .rewardPick:hover{ transform:translateY(-3px); filter:saturate(1.05); }
  .rewardPick:active{ transform:translateY(-1px) scale(0.99); }

  /* Panel reset button */
  .ghostBtn{
    height:36px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.06);
    color:#fff;
    font-size:12px;
    cursor:pointer;
  }
  .ghostBtn:hover{ border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.08); }

  /* Responsive */
  @media (max-width: 1180px){
    .gameContainer{ grid-template-columns: 320px 1fr 340px; }
  }
  @media (max-width: 980px){
    body{ overflow:auto; }
    .gamePage{ height:auto; min-height:100vh; }
    .gameContainer{ height:auto; min-height:100vh; grid-template-columns: 1fr; }
    .progressOuter{ width:100%; }
  }

  /* ================== 2.7: Integrated Market Machine Skin ================== */
  /* Background: unified "trading floor" texture (no external images) */
  body{
    background:
      radial-gradient(1200px 700px at 50% 20%, rgba(74,178,255,0.10), transparent 55%),
      radial-gradient(900px 520px at 80% 30%, rgba(255,200,87,0.10), transparent 60%),
      radial-gradient(1000px 600px at 30% 85%, rgba(44,255,138,0.08), transparent 62%),
      linear-gradient(180deg, var(--bg0), var(--bg1));
  }

  /* texture layers */
  body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    opacity:0.65;
    background:
      /* subtle grid */
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
      /* scanlines */
      repeating-linear-gradient(180deg, rgba(0,0,0,0.00) 0px, rgba(0,0,0,0.00) 2px, rgba(0,0,0,0.20) 3px),
      /* noise (procedural-ish via gradients) */
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.10), transparent 60%),
      radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.08), transparent 60%),
      radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.06), transparent 60%),
      radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.07), transparent 60%);
    background-size:
      42px 42px,
      42px 42px,
      100% 6px,
      220px 220px,
      260px 260px,
      300px 300px,
      240px 240px;
    mix-blend-mode:overlay;
    filter:saturate(0.9);
  }

  /* vignette + moving market shimmer */
  body:after{
    content:"";
    position:fixed;
    inset:-40px;
    pointer-events:none;
    z-index:-1;
    background:
      radial-gradient(1200px 700px at 50% 45%, rgba(0,0,0,0.18), rgba(0,0,0,0.70) 68%),
      linear-gradient(120deg,
        rgba(255,60,60,0.00) 0%,
        rgba(255,60,60,0.05) 35%,
        rgba(44,255,138,0.05) 55%,
        rgba(74,178,255,0.00) 100%);
    opacity:0.95;
    animation:marketShimmer 8s ease-in-out infinite;
  }
  @keyframes marketShimmer{
    0%{ transform:translateX(-2%) translateY(-1%); filter:hue-rotate(0deg); }
    50%{ transform:translateX(2%) translateY(1%); filter:hue-rotate(10deg); }
    100%{ transform:translateX(-2%) translateY(-1%); filter:hue-rotate(0deg); }
  }

  /* Unified "machine" shell for the whole play area */
  .terminalShell{
    height:100%;
    border-radius:22px;
    padding:10px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
      radial-gradient(900px 420px at 50% 0%, rgba(74,178,255,0.10), transparent 55%),
      rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.14);
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.50) inset,
      0 28px 110px rgba(0,0,0,0.72);
    position:relative;
    overflow:hidden;
  }
  .terminalShell:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(10px 10px at 18px 18px, rgba(255,255,255,0.18), transparent 65%),
      radial-gradient(10px 10px at calc(100% - 18px) 18px, rgba(255,255,255,0.18), transparent 65%),
      radial-gradient(10px 10px at 18px calc(100% - 18px), rgba(255,255,255,0.18), transparent 65%),
      radial-gradient(10px 10px at calc(100% - 18px) calc(100% - 18px), rgba(255,255,255,0.18), transparent 65%),
      linear-gradient(90deg, rgba(255,200,87,0.10), rgba(74,178,255,0.10));
    opacity:0.65;
    mix-blend-mode:screen;
  }
  .terminalShell:after{
    content:"";
    position:absolute;
    left:-30%;
    top:-10%;
    width:60%;
    height:120%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.08), transparent);
    transform:skewX(-18deg);
    opacity:0.35;
    animation:shellSweep 6.5s linear infinite;
    pointer-events:none;
  }
  @keyframes shellSweep{
    0%{ transform:translateX(-40%) skewX(-18deg); }
    100%{ transform:translateX(180%) skewX(-18deg); }
  }

  /* Make panels feel like embedded modules on a machine */
  .panel{
    background:rgba(0,0,0,0.26);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.03) inset,
      0 16px 60px rgba(0,0,0,0.45);
  }
  .panelHeader{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  }

  /* Market LED strip (subtle) on top of major panels */
  .panelHeader:after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:-1px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(74,178,255,0.0), rgba(74,178,255,0.55), rgba(255,200,87,0.55), rgba(255,60,60,0.35), rgba(74,178,255,0.0));
    opacity:0.55;
  }
  .panelHeader{ position:relative; }

  /* Menu / Role pages: same background, add "cover-like" hero watermark without isolation */
  .menuPanel:before, .rolePanel:before{
    filter:blur(0px);
    opacity:0.95;
  }
  .menuPanel{
    backdrop-filter: blur(10px);
  }
  .rolePanel{
    backdrop-filter: blur(10px);
  }

  /* Subtle market iconography on menu as a watermark */
  .menuPanel:after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(600px 240px at 50% 18%, rgba(255,200,87,0.10), transparent 60%),
      linear-gradient(90deg, rgba(255,60,60,0.00), rgba(255,60,60,0.05), rgba(44,255,138,0.05), rgba(74,178,255,0.00));
    opacity:0.65;
    mix-blend-mode:screen;
  }

  /* Reduce "isolated picture" feeling by keeping all pages inside same world */
  .menuPage,.rolePage,.gamePage{
    background:transparent;
  }

  /* Slightly calmer brightness swings: keep gambling mood but avoid harsh flicker */
  @keyframes marketShimmer{
    0%{ transform:translateX(-1.5%) translateY(-0.8%); filter:hue-rotate(0deg); }
    50%{ transform:translateX(1.5%) translateY(0.8%); filter:hue-rotate(8deg); }
    100%{ transform:translateX(-1.5%) translateY(-0.8%); filter:hue-rotate(0deg); }
  }

  /* Improve logo tiles to feel like physical buttons */
  .logoTile{
    background:rgba(255,255,255,0.035);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.04) inset,
      0 10px 24px rgba(0,0,0,0.35);
  }
  .logoTile:active{ transform:translateY(1px); }

  /* Open cells: add bevel + slight inner glow */
  .cell{
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.03) inset,
      0 18px 40px rgba(0,0,0,0.35);
  }

  /* Make huge delta look more like "machine display" */
  .hugeDelta{
    font-size:68px;
    letter-spacing:2px;
  }

  /* Ensure center stage remains the bright "table" */
  .panel.centerStage:before{
    opacity:0.95;
    background:
      radial-gradient(800px 420px at 50% 35%, rgba(74,178,255,0.16), transparent 60%),
      radial-gradient(700px 380px at 60% 55%, rgba(255,200,87,0.10), transparent 65%);
  }


/* ================================================================
 *  ✦ ART OVERHAUL v3.0 — "交易所霓虹" 主题
 *  全面升级美术：色调、卡牌、按钮、粒子、动效、排版
 * ================================================================ */

/* ── 1. 根变量增强：更饱和的霓虹调色板 ── */
:root {
  --neon-blue:   #3dd8ff;
  --neon-green:  #2dff9a;
  --neon-gold:   #ffcf4a;
  --neon-red:    #ff4060;
  --glow-blue:   rgba(61, 216, 255, 0.55);
  --glow-green:  rgba(45, 255, 154, 0.55);
  --glow-gold:   rgba(255, 207, 74, 0.55);
  --glow-red:    rgba(255, 64, 96, 0.55);
  --border-bright: rgba(255,255,255,0.22);
  --panel-bg:    rgba(8, 10, 18, 0.78);
  --card-shine:  rgba(255,255,255,0.12);
}

/* ── 2. 背景：深邃夜空 + 动态极光层 ── */
body {
  background:
    radial-gradient(1400px 800px at 30% 0%,   rgba(61,216,255,0.13),  transparent 55%),
    radial-gradient(1100px 700px at 75% 10%,  rgba(255,207,74,0.10),  transparent 55%),
    radial-gradient(900px  600px at 15% 80%,  rgba(45,255,154,0.09),  transparent 58%),
    radial-gradient(700px  500px at 85% 75%,  rgba(180,100,255,0.08), transparent 55%),
    linear-gradient(180deg, #030509, #070b14) !important;
}

/* 更丰富的背景纹理 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(rgba(61,216,255,0.04) 1px,  transparent 1px),
    linear-gradient(90deg, rgba(61,216,255,0.03) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.14) 4px);
  background-size: 60px 60px, 60px 60px, 100% 4px;
  opacity: 0.70;
  mix-blend-mode: screen;
}

/* 极光流动层 */
body::after {
  content: "";
  position: fixed;
  inset: -60px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 900px 400px at 25% 50%, rgba(61,216,255,0.07), transparent 65%),
    radial-gradient(ellipse 800px 350px at 75% 55%, rgba(255,100,160,0.06), transparent 65%),
    radial-gradient(1500px 900px at 50% 50%, rgba(0,0,0,0.25), rgba(0,0,0,0.75) 70%);
  animation: auroraFlow 12s ease-in-out infinite;
}
@keyframes auroraFlow {
  0%   { transform: translateX(-2%) translateY(-1%) rotate(0deg);   filter: hue-rotate(0deg); }
  33%  { transform: translateX(1.5%) translateY(0.8%) rotate(0.5deg); filter: hue-rotate(12deg); }
  66%  { transform: translateX(-1%) translateY(1.2%) rotate(-0.3deg); filter: hue-rotate(6deg); }
  100% { transform: translateX(-2%) translateY(-1%) rotate(0deg);   filter: hue-rotate(0deg); }
}

/* ── 3. 游戏标题：渐变文字 + 发光 ── */
.gameTitle {
  font-size: 46px !important;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--neon-blue) 0%, #fff 40%, var(--neon-gold) 70%, var(--neon-green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(61,216,255,0.65));
  animation: titleGlow 4s ease-in-out infinite;
  margin: 10px 0 14px !important;
}
@keyframes titleGlow {
  0%,100% { filter: drop-shadow(0 0 18px rgba(61,216,255,0.55)); }
  50%      { filter: drop-shadow(0 0 32px rgba(255,207,74,0.60)); }
}

/* ── 4. 菜单面板：更厚重的玻璃感 ── */
.menuPanel {
  border: 1px solid rgba(61,216,255,0.28) !important;
  background: rgba(5, 8, 16, 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(61,216,255,0.10) inset,
    0 0 60px rgba(61,216,255,0.12),
    0 32px 120px rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
}
.menuPanel::before {
  background:
    radial-gradient(900px 320px at 18% 0%,   rgba(61,216,255,0.22), transparent 55%),
    radial-gradient(800px 280px at 82% 0%,   rgba(255,207,74,0.18), transparent 58%),
    radial-gradient(400px 200px at 50% 100%, rgba(45,255,154,0.10), transparent 60%) !important;
}

/* 菜单小卡美化 */
.miniCard {
  box-shadow: 0 16px 48px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08) !important;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.miniCard:hover { filter: brightness(1.15) saturate(1.2); }
.miniCard:nth-child(1) { transform: rotate(-3deg) translateY(4px); border-color: rgba(61,216,255,0.30) !important; }
.miniCard:nth-child(2) { transform: rotate(0.5deg) translateY(-6px); border-color: rgba(255,207,74,0.30) !important; }
.miniCard:nth-child(3) { transform: rotate(3.5deg) translateY(2px); border-color: rgba(45,255,154,0.28) !important; }
.miniCard:nth-child(1) .miniArt { background: linear-gradient(135deg, rgba(61,216,255,0.45), rgba(45,255,154,0.25)) !important; }
.miniCard:nth-child(2) .miniArt { background: linear-gradient(135deg, rgba(255,207,74,0.45), rgba(255,100,160,0.25)) !important; }
.miniCard:nth-child(3) .miniArt { background: linear-gradient(135deg, rgba(180,100,255,0.40), rgba(61,216,255,0.25)) !important; }

/* ── 5. 主要按钮 (primary) — 霓虹蓝绿渐变 ── */
.menuBtn.primary {
  background: linear-gradient(90deg, #0ea5e9, #22d3ee, #34d399) !important;
  color: #03070f !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  letter-spacing: 1px;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.20) inset,
    0 0 28px rgba(34,211,238,0.40),
    0 20px 70px rgba(0,0,0,0.65) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.20);
  position: relative;
  overflow: hidden;
}
.menuBtn.primary::after {
  content: "";
  position: absolute;
  top: -50%; left: -60%;
  width: 50%; height: 200%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  animation: btnShine 3.5s ease-in-out infinite;
}
@keyframes btnShine {
  0%, 70%, 100% { left: -60%; opacity: 0; }
  30%            { left: 120%; opacity: 1; }
}
.menuBtn.primary:hover {
  transform: translateY(-3px) scale(1.015) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.28) inset,
    0 0 45px rgba(34,211,238,0.55),
    0 28px 90px rgba(0,0,0,0.72) !important;
  filter: brightness(1.08) saturate(1.10) !important;
}

/* ── 6. 开盘大按钮 — 霓虹红金渐变 + 脉冲 ── */
.bigOpenBtn {
  background: linear-gradient(95deg, #ff2d55, #ff6030, #ffb830) !important;
  color: #fff !important;
  font-size: 40px !important;
  letter-spacing: 3px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.40);
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 0 40px rgba(255,70,50,0.45),
    0 0 80px rgba(255,100,30,0.25),
    0 28px 90px rgba(0,0,0,0.80) !important;
  position: relative;
  overflow: hidden;
}
.bigOpenBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,255,255,0.22), transparent 65%);
  pointer-events: none;
}
.bigOpenBtn::after {
  content: "";
  position: absolute;
  top: -50%; left: -60%;
  width: 45%; height: 200%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.30), transparent);
  transform: skewX(-20deg);
  animation: bigBtnShine 2.8s ease-in-out infinite;
}
@keyframes bigBtnShine {
  0%, 60%, 100% { left: -60%; opacity: 0; }
  25%            { left: 120%; opacity: 1; }
}
.bigOpenBtn:hover {
  transform: scale(1.07) translateY(-2px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.28) inset,
    0 0 60px rgba(255,70,50,0.65),
    0 0 120px rgba(255,100,30,0.35),
    0 36px 110px rgba(0,0,0,0.85) !important;
  filter: saturate(1.15) brightness(1.06) !important;
}
.bigOpenBtn:not(:disabled) { animation: openBtnPulse 2.4s ease-in-out infinite; }
@keyframes openBtnPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 0 40px rgba(255,70,50,0.45), 0 28px 90px rgba(0,0,0,0.80); }
  50%     { box-shadow: 0 0 0 1px rgba(255,255,255,0.22) inset, 0 0 65px rgba(255,120,40,0.65), 0 28px 90px rgba(0,0,0,0.80); }
}

/* ── 7. 面板：更深邃的玻璃层 ── */
.panel {
  background: rgba(6, 9, 18, 0.76) !important;
  border: 1px solid rgba(61,216,255,0.14) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 30px rgba(61,216,255,0.08),
    0 20px 70px rgba(0,0,0,0.60) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
}
.panelHeader {
  background: linear-gradient(180deg, rgba(61,216,255,0.08), rgba(61,216,255,0.01)) !important;
  border-bottom: 1px solid rgba(61,216,255,0.16) !important;
  position: relative;
}
.panelTitle {
  font-size: 14px !important;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.96) !important;
}

/* 面板标题底部霓虹条 */
.panelHeader::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    rgba(61,216,255,0.70),
    rgba(255,207,74,0.65),
    rgba(255,64,96,0.45),
    transparent);
  opacity: 0.75;
}

/* 中央舞台更强的发光 */
.panel.centerStage {
  border: 1px solid rgba(61,216,255,0.28) !important;
  box-shadow:
    0 0 0 1px rgba(61,216,255,0.08) inset,
    0 0 50px rgba(61,216,255,0.18),
    0 0 100px rgba(61,216,255,0.08),
    0 28px 100px rgba(0,0,0,0.75) !important;
}
.panel.centerStage::before {
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(61,216,255,0.14), transparent 62%),
    radial-gradient(700px 400px at 60% 65%, rgba(255,207,74,0.08), transparent 65%) !important;
  opacity: 1 !important;
}

/* ── 8. 炉石风卡牌：史诗级质感提升 ── */
.hsCard {
  border-radius: 20px !important;
  padding: 9px !important;
  background: rgba(8, 12, 22, 0.92) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.65), 0 6px 20px rgba(0,0,0,0.45) !important;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}
.hsCard::before {
  content: "";
  position: absolute;
  top: -1px; left: 20%; right: 20%;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  opacity: 0.7;
}

/* 稀有度边框 + 光晕 */
.hsCard.r1 {
  border: 1px solid rgba(185,192,203,0.40) !important;
  box-shadow: 0 0 0 1px rgba(185,192,203,0.08) inset, 0 18px 55px rgba(0,0,0,0.65) !important;
}
.hsCard.r2 {
  border: 1px solid rgba(61,216,255,0.55) !important;
  box-shadow:
    0 0 0 1px rgba(61,216,255,0.10) inset,
    0 0 22px rgba(61,216,255,0.25),
    0 18px 55px rgba(0,0,0,0.65) !important;
}
.hsCard.r3 {
  border: 1px solid rgba(255,207,74,0.65) !important;
  box-shadow:
    0 0 0 1px rgba(255,207,74,0.12) inset,
    0 0 28px rgba(255,207,74,0.35),
    0 18px 55px rgba(0,0,0,0.65) !important;
  animation: legendGlow 3s ease-in-out infinite;
}
@keyframes legendGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,207,74,0.12) inset, 0 0 25px rgba(255,207,74,0.30), 0 18px 55px rgba(0,0,0,0.65); }
  50%      { box-shadow: 0 0 0 1px rgba(255,207,74,0.18) inset, 0 0 42px rgba(255,207,74,0.52), 0 18px 55px rgba(0,0,0,0.65); }
}

.hsFrame {
  border-radius: 15px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.50)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* 卡牌艺术区：更有层次的渐变图案 */
.hsArt {
  height: 120px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background:
    radial-gradient(180px 120px at 30% 35%, rgba(255,255,255,0.12), transparent 62%),
    radial-gradient(100px  80px at 75% 65%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(145deg, rgba(30,30,60,0.85), rgba(10,10,20,0.95)) !important;
  overflow: hidden !important;
  position: relative !important;
}
.hsArt .colorCore {
  inset: 10px !important;
  border-radius: 11px !important;
  opacity: 0.90 !important;
  filter: saturate(1.3) brightness(1.05) !important;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.40) !important;
}
.hsArt .colorCore::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 55% at 35% 25%, rgba(255,255,255,0.28), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,0.14), transparent 50%);
  pointer-events: none;
}
.hsArt .shine {
  opacity: 0.80 !important;
  background: radial-gradient(220px 150px at 45% 65%, rgba(255,255,255,0.22), transparent 72%) !important;
}

/* 卡牌名称 */
.hsName {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.80) !important;
}
/* 稀有度星级颜色 */
.hsStars.r1 { color: rgba(210,220,235,0.85) !important; }
.hsStars.r2 { color: var(--neon-blue)  !important; text-shadow: 0 0 10px rgba(61,216,255,0.55); }
.hsStars.r3 { color: var(--neon-gold)  !important; text-shadow: 0 0 14px rgba(255,207,74,0.70); }

/* 数值区 */
.hsUp {
  border: 1px solid rgba(255,64,96,0.40) !important;
  background: rgba(255,40,70,0.10) !important;
  color: var(--neon-red) !important;
  border-radius: 12px !important;
}
.hsDown {
  border: 1px solid rgba(45,255,154,0.38) !important;
  background: rgba(30,200,100,0.10) !important;
  color: var(--neon-green) !important;
  border-radius: 12px !important;
}
.hsVal { font-size: 18px !important; text-shadow: 0 2px 8px rgba(0,0,0,0.55); }

/* 标签丸 */
.pill {
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.05) !important;
  font-size: 11px !important;
}
.pill.cat-fund   { color: var(--neon-blue)  !important; border-color: rgba(61,216,255,0.30)  !important; }
.pill.cat-stock  { color: var(--neon-gold)  !important; border-color: rgba(255,207,74,0.30)  !important; }
.pill.cat-human  { color: #ff8ab8 !important; border-color: rgba(255,100,160,0.28) !important; }
.pill.cat-tool   { color: #9aff7a !important; border-color: rgba(154,255,122,0.28) !important; }

/* ── 9. 逐格揭晓：更戏剧化的结果 ── */
.cell {
  border-radius: 20px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.30) !important;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.4s !important;
}
.cell.revealed.good {
  background: rgba(45,255,154,0.15) !important;
  border-color: rgba(45,255,154,0.55) !important;
  box-shadow:
    inset 0 0 20px rgba(45,255,154,0.12),
    0 0 22px rgba(45,255,154,0.30) !important;
}
.cell.revealed.bad {
  background: rgba(255,64,96,0.15) !important;
  border-color: rgba(255,64,96,0.55) !important;
  box-shadow:
    inset 0 0 20px rgba(255,64,96,0.12),
    0 0 22px rgba(255,64,96,0.32) !important;
}

/* 揭晓数字：更大更戏剧 */
.hugeDelta {
  font-size: 72px !important;
  letter-spacing: 3px !important;
  text-shadow: 0 0 30px currentColor, 0 10px 30px rgba(0,0,0,0.70) !important;
}

/* ── 10. 进度条：霓虹渐变 + 流光 ── */
.progressOuter {
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  overflow: hidden !important;
  position: relative !important;
}
.progressOuter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%);
  animation: progressShimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes progressShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.progressInner {
  background: linear-gradient(90deg, var(--neon-blue), #22c55e, var(--neon-green)) !important;
  border-right: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 0 12px rgba(45,255,154,0.45) !important;
}

/* 资金进度条脉冲更强 */
@keyframes barPulse {
  0%   { transform: translateY(0) scaleY(1); }
  45%  { transform: translateY(-2px) scaleY(1.15); box-shadow: 0 0 20px rgba(45,255,154,0.60); }
  100% { transform: translateY(0) scaleY(1); }
}

/* ── 11. 血量心形：发光红心 ── */
.heart::before, .heart::after {
  background: linear-gradient(180deg, #ff6b8a, #e02045) !important;
  box-shadow: 0 0 12px rgba(255,50,80,0.55), 0 6px 16px rgba(0,0,0,0.35) !important;
}

/* ── 12. 交付进度条：彩虹流动 ── */
.deliveryInner {
  background: linear-gradient(90deg,
    var(--neon-blue)  0%,
    var(--neon-green) 35%,
    var(--neon-gold)  65%,
    var(--neon-red)   100%) !important;
  box-shadow: 0 0 10px rgba(61,216,255,0.40) !important;
}
.deliveryBar {
  height: 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.04) !important;
}
@keyframes pulseDanger {
  0%   { box-shadow: 0 0 0 rgba(255,64,96,0); }
  50%  { box-shadow: 0 0 28px rgba(255,64,96,0.70); }
  100% { box-shadow: 0 0 0 rgba(255,64,96,0); }
}

/* ── 13. Logo 小方块：物理按钮感 ── */
.logoTile {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 10px 28px rgba(0,0,0,0.40),
    0 2px 4px rgba(255,255,255,0.04) !important;
  transition: transform 0.12s, filter 0.12s, box-shadow 0.12s !important;
}
.logoTile:hover {
  border-color: rgba(61,216,255,0.40) !important;
  background: rgba(61,216,255,0.06) !important;
  box-shadow: 0 0 14px rgba(61,216,255,0.22), 0 10px 28px rgba(0,0,0,0.40) !important;
  filter: brightness(1.08) !important;
}
.logoTile:active { transform: translateY(2px) scale(0.97) !important; }

.logo {
  width: 30px; height: 30px;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 14px rgba(0,0,0,0.45) !important;
  filter: saturate(1.2) brightness(1.05);
}

/* 稀有点颜色增强 */
.rar1 { background: radial-gradient(circle, #c8d0de, #a0a8b8); box-shadow: 0 0 5px rgba(200,208,222,0.55) !important; }
.rar2 { background: radial-gradient(circle, var(--neon-blue),  #1a80cc); box-shadow: 0 0 8px rgba(61,216,255,0.65) !important; }
.rar3 { background: radial-gradient(circle, var(--neon-gold),  #cc8a00); box-shadow: 0 0 10px rgba(255,207,74,0.75) !important; }

/* ── 14. section 区块 ── */
.section {
  border: 1px solid rgba(255,255,255,0.09) !important;
  background: rgba(0,0,0,0.28) !important;
  border-radius: 18px !important;
}
.sectionHead {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent) !important;
}
.sectionName {
  font-size: 12px !important;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.90) !important;
}

/* ── 15. 历史记录：颜色对比度提升 ── */
.hItem {
  border: 1px solid rgba(255,255,255,0.09) !important;
  background: rgba(0,0,0,0.30) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hItem:hover {
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.40) !important;
}
.goodTxt {
  color: #ff4f70 !important;
  text-shadow: 0 0 10px rgba(255,64,96,0.45);
}
.badTxt {
  color: var(--neon-green) !important;
  text-shadow: 0 0 10px rgba(45,255,154,0.45);
}
.hTop { font-size: 13px !important; }
.hSub { color: rgba(255,255,255,0.75) !important; }

/* ── 16. 奖励面板 / 结算面板 ── */
.rewardPanel {
  background: rgba(5, 8, 18, 0.95) !important;
  border: 1px solid rgba(61,216,255,0.26) !important;
  box-shadow: 0 0 50px rgba(61,216,255,0.14), 0 24px 100px rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
}
.rewardHeader {
  background:
    radial-gradient(800px 200px at 20% 0%, rgba(61,216,255,0.16), transparent 60%),
    radial-gradient(800px 200px at 80% 0%, rgba(255,207,74,0.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent) !important;
  border-bottom: 1px solid rgba(61,216,255,0.18) !important;
}
.rewardPick:hover { transform: translateY(-5px) scale(1.01) !important; }

/* ── 17. 角色选择页 ── */
.rolePanel {
  background: rgba(5, 8, 18, 0.90) !important;
  border: 1px solid rgba(61,216,255,0.22) !important;
  box-shadow: 0 0 40px rgba(61,216,255,0.10), 0 28px 110px rgba(0,0,0,0.80) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
}
.roleCard {
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 20px !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.roleCard:hover {
  border-color: rgba(61,216,255,0.40) !important;
  background: rgba(61,216,255,0.06) !important;
  box-shadow: 0 0 22px rgba(61,216,255,0.18), 0 16px 50px rgba(0,0,0,0.45) !important;
}
.roleCard.selected {
  border-color: rgba(45,255,154,0.70) !important;
  box-shadow:
    0 0 0 2px rgba(45,255,154,0.22) inset,
    0 0 30px rgba(45,255,154,0.28),
    0 18px 55px rgba(0,0,0,0.50) !important;
}
.roleName {
  font-size: 19px !important;
  font-weight: 900 !important;
  text-shadow: 0 4px 16px rgba(0,0,0,0.65) !important;
  letter-spacing: 0.5px;
}

/* 升级卡 */
.upgradeCard {
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 20px !important;
}
.upgradeCard:hover {
  border-color: rgba(61,216,255,0.38) !important;
  background: rgba(61,216,255,0.05) !important;
}
.upgradeCard.selected {
  border-color: rgba(61,216,255,0.68) !important;
  box-shadow: 0 0 0 2px rgba(61,216,255,0.22) inset, 0 0 20px rgba(61,216,255,0.25) !important;
}

/* ── 18. Ghost 按钮 ── */
.ghostBtn {
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  transition: all 0.15s ease;
}
.ghostBtn:hover {
  border-color: rgba(61,216,255,0.40) !important;
  background: rgba(61,216,255,0.08) !important;
  box-shadow: 0 0 12px rgba(61,216,255,0.18) !important;
}

/* ── 19. 股票行情滚动栏：更鲜明 ── */
.tickerTrack {
  color: rgba(255,255,255,0.78) !important;
  font-size: 12px !important;
}
.ticker { opacity: 0.70 !important; }

/* ── 20. 整体 terminalShell：加强外边框 ── */
.terminalShell {
  border: 1px solid rgba(61,216,255,0.20) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.60) inset,
    0 0 60px rgba(61,216,255,0.10),
    0 38px 140px rgba(0,0,0,0.80) !important;
}

/* ── 21. 悬浮卡牌 Tooltip ── */
.tooltip .hsCard {
  box-shadow: 0 0 50px rgba(61,216,255,0.22), 0 28px 80px rgba(0,0,0,0.75) !important;
}

/* ── 22. 混合提示弹窗 ── */
.mixPile {
  background: rgba(5,8,18,0.92) !important;
  border: 1px solid rgba(61,216,255,0.30) !important;
  box-shadow: 0 0 30px rgba(61,216,255,0.22), 0 20px 70px rgba(0,0,0,0.80) !important;
}
.mixText {
  color: var(--neon-blue) !important;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(61,216,255,0.55);
}

/* ── 23. 标签 tag ── */
.tag {
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(0,0,0,0.28) !important;
  padding: 3px 9px !important;
}
.tag.hp { color: #ff6b8a !important; border-color: rgba(255,80,120,0.35) !important; text-shadow: 0 0 8px rgba(255,80,120,0.40); }

/* ── 24. 弹出数字浮动 ── */
.barFloat {
  font-size: 18px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 14px currentColor, 0 2px 10px rgba(0,0,0,0.60) !important;
}

/* ── 25. 剧情页面美化 ── */
#storySlide {
  border: 1px solid rgba(61,216,255,0.20) !important;
  background: rgba(0,0,0,0.32) !important;
  padding: 28px 22px !important;
}

/* ── 26. 结算页面 ── */
#endBody {
  border: 1px solid rgba(61,216,255,0.18) !important;
  background: rgba(0,0,0,0.30) !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.88) !important;
}

/* ── 27. scrollbar 美化 ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.25); border-radius: 5px; }
::-webkit-scrollbar-thumb { background: rgba(61,216,255,0.30); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(61,216,255,0.50); }

/* ── 28. 浮动粒子装饰层（仅CSS，不影响逻辑） ── */
#menuPage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(2px 2px at 15% 20%, rgba(61,216,255,0.60), transparent),
    radial-gradient(2px 2px at 85% 30%, rgba(255,207,74,0.55), transparent),
    radial-gradient(2px 2px at 45% 70%, rgba(45,255,154,0.50), transparent),
    radial-gradient(2px 2px at 70% 80%, rgba(255,100,160,0.45), transparent),
    radial-gradient(1px 1px at 25% 55%, rgba(61,216,255,0.40), transparent),
    radial-gradient(1px 1px at 60% 15%, rgba(255,207,74,0.35), transparent);
  background-size: 300px 300px, 400px 400px, 350px 350px, 500px 500px, 200px 200px, 450px 450px;
  animation: sparkleFloat 8s ease-in-out infinite;
  opacity: 0.65;
  z-index: 0;
}
@keyframes sparkleFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.02); }
}

/* ── 29. 响应式保持 ── */
@media (max-width: 980px) {
  .gameTitle { font-size: 34px !important; }
  .bigOpenBtn { font-size: 30px !important; }
}

.gameContainer{
  grid-template-columns: 1fr !important;
}

.legacyAssetPanel{
  display:none !important;
}

.hallActionBar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:8px 0 14px 0;
  flex-wrap:wrap;
}

.hallCleanupBtn{
  height:54px !important;
  min-width:136px;
  border-radius:18px !important;
  font-size:15px !important;
}

.hallCleanupBtn.active{
  border-color:rgba(255,100,100,0.65) !important;
  background:rgba(255,64,96,0.14) !important;
  box-shadow:0 0 16px rgba(255,64,96,0.25) !important;
}

.placementHint{
  margin:0 auto 14px auto;
  max-width:960px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(61,216,255,0.25);
  background:rgba(61,216,255,0.08);
  color:rgba(255,255,255,0.9);
  font-size:14px;
  line-height:1.6;
  text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,0.28);
}

.boardPoolLegend{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.poolTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.05);
}

.poolTag-normal{ color:#d0e7ff; }
.poolTag-insurance{ color:#7ef0b4; }
.poolTag-dividend{ color:#ffd66b; }

.revealGrid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
}

.cell.board-row-start{
  margin-top:18px;
}

.cell.board-row-start[data-row="0"]{
  margin-top:0;
}

.cell.board-empty{
  border-style:dashed !important;
  opacity:0.9;
}

.cell.board-placeable{
  border-color:rgba(61,216,255,0.55) !important;
  background:rgba(61,216,255,0.10) !important;
  box-shadow:0 0 18px rgba(61,216,255,0.18) !important;
  cursor:pointer;
}

.cell.board-placeable:hover{
  transform:translateY(-2px);
}

.cell.board-blocked{
  opacity:0.55;
}

.cell.embedTargetable{
  cursor:pointer;
  border-color:rgba(255,200,87,0.42) !important;
}

.cell.embedSelected{
  border-color:rgba(255,200,87,0.80) !important;
  box-shadow:0 0 20px rgba(255,200,87,0.30) !important;
}

.boardSlot{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:16px 10px 12px;
  position:relative;
}

.boardRowBadge{
  position:absolute;
  left:10px;
  top:10px;
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.32);
  border:1px solid rgba(255,255,255,0.12);
}

.boardCardName{
  font-size:13px;
  font-weight:900;
  text-align:center;
  line-height:1.3;
  padding:0 4px;
}

.boardCardMeta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
}

.boardStatBadge{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
}

.boardNetBadge.up{
  color:#ff7f93;
}

.boardNetBadge.down{
  color:#74f5b1;
}

.boardEmptyHint{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:100%;
  font-size:13px;
  color:rgba(255,255,255,0.6);
}

.boardEmptyMain{
  font-weight:900;
  color:rgba(255,255,255,0.82);
}

.boardDropHint{
  font-size:11px;
  color:#9adfff;
}

@media (max-width: 980px) {
  .boardPoolLegend{
    justify-content:flex-start;
  }
  .hallActionBar{
    gap:10px;
  }
}

/* End of Art Overhaul v3.0 */


/* ================================================================
 *  ✦ ART OVERHAUL v2.8 — 进度条·大数字·金币·爱心
 * ================================================================ */

/* ── 1. 面板 header 左侧区域 ── */
.centerHeaderLeft {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.statsChips {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.statChip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 12px 5px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  min-width: 58px;
}
.chipLabel {
  font-size: 10px;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.chipVal {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  font-family: "DengXian","等线","Microsoft YaHei",sans-serif;
}
.chipGold {
  color: #ffd060;
  text-shadow: 0 0 14px rgba(255,200,60,0.70);
}
.chipBlue {
  color: #3dd8ff;
  text-shadow: 0 0 12px rgba(61,216,255,0.60);
}
.chipRed {
  color: #ff6880;
  text-shadow: 0 0 12px rgba(255,80,100,0.55);
}
.chipSub, .dualLabelSub {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
}

/* ── 2. 双进度条对比区 ── */
.dualProgressSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 2px;
}

.dualProgressRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dualLabel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 54px;
  gap: 1px;
}
.dualLabelText {
  font-size: 11px;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.dualLabelNum {
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  line-height: 1.1;
}

.dualBarOuter {
  flex: 1;
  height: 20px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  overflow: visible !important;
  position: relative !important;
  min-width: 0;
}

/* 取消旧 progressOuter 内部溢出遮挡 */
.dualBarOuter.progressOuter {
  overflow: visible !important;
}

.dualBarInner {
  height: 100%;
  border-radius: 999px !important;
  transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative;
  z-index: 1;
}

/* 开盘进度条初始色 ── 蓝色主调 */
.dualBarOpen {
  background: linear-gradient(90deg, #1e90ff, #3dd8ff, #60a5fa);
  box-shadow: 0 0 10px rgba(61,216,255,0.50);
}

/* 资金进度条初始色 ── 黄色主调 */
.dualBarMoney {
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #fde68a);
  box-shadow: 0 0 10px rgba(251,191,36,0.55);
}

/* 进度条内部流光 */
.dualBarInner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: dualBarShimmer 2.2s ease-in-out infinite;
}
@keyframes dualBarShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* 拖尾发光节点 */
.dualBarGlow {
  position: absolute;
  right: 0; top: 50%;
  transform: translate(50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0.10));
  pointer-events: none;
  z-index: 2;
  display: none; /* shown via JS when width > 0 */
}

/* 进度条 pulse 动画 */
@keyframes barPulse {
  0%   { transform: scaleY(1); }
  40%  { transform: scaleY(1.18); }
  100% { transform: scaleY(1); }
}

/* ── 3. 爱心 HP ── */
.hearts {
  gap: 10px !important;
}
.heartEmoji {
  font-size: 26px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s, filter 0.2s;
  user-select: none;
}
.heartFull {
  filter: drop-shadow(0 0 8px rgba(255,80,100,0.70));
  animation: heartBeat 1.4s ease-in-out infinite;
}
.heartEmpty {
  opacity: 0.30;
  filter: grayscale(1);
}
@keyframes heartBeat {
  0%,100% { transform: scale(1); }
  14%     { transform: scale(1.18); }
  28%     { transform: scale(1); }
  42%     { transform: scale(1.10); }
  56%     { transform: scale(1); }
}

/* ── 4. 金币粒子 ── */
.coinParticle {
  position: absolute;
  font-size: 22px;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
  animation: coinFly 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes coinFly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.6);
  }
  40% {
    opacity: 1;
    transform: translate(calc(-50% + var(--cx) * 0.5), calc(-50% + var(--cy) * 0.5))
               rotate(calc(var(--cr) * 0.4)) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy)))
               rotate(var(--cr)) scale(0.5);
  }
}

/* ── 5. 揭晓区图例 ── */
.revealLegend {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}
.legend-up {
  color: #ff6070;
  text-shadow: 0 0 8px rgba(255,64,80,0.55);
}
.legend-dn {
  color: #2dff9a;
  text-shadow: 0 0 8px rgba(45,255,154,0.50);
}

/* ── 6. reveal cell overflow visible for coins ── */
.cell {
  overflow: visible !important;
}

/* ── 7. hugeDelta 数字增强 ── */
.hugeDelta {
  font-size: 64px !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 30px currentColor, 0 6px 18px rgba(0,0,0,0.80) !important;
  z-index: 10;
}

/* ── 8. deliveryBar danger 修复 ── */
@keyframes pulseDanger {
  0%   { box-shadow: 0 0 0 rgba(255,64,80,0); }
  50%  { box-shadow: 0 0 30px rgba(255,64,80,0.80); }
  100% { box-shadow: 0 0 0 rgba(255,64,80,0); }
}

/* ── 9. moneyLabel 隐藏（已被双进度条取代） ── */
.progressRow .moneyLabel { display: none; }

/* ── 10. 中央面板内边距微调 ── */
.centerBody {
  gap: 12px !important;
}

/* End of 2.8 patch */


/* ================================================================
 *  ✦ 2.9 CSS — statusPanel / 音乐按钮 / 卡牌标记 / 历史样式
 * ================================================================ */

/* ── 1. 集成状态面板 ── */
.statusPanel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 14px 12px 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
}

.dualProgressRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 右侧附加信息（目标值 / 体力）*/
.barSuffix {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 62px;
  gap: 2px;
}
.barSuffixLabel {
  font-size: 10px;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.5px;
}
.barSuffixVal {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}
.numGold { color:#ffd060; text-shadow:0 0 12px rgba(255,200,60,0.65); }

/* ── 2. 数字高亮 ── */
.numHighlight {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transition: color 0.3s, text-shadow 0.3s;
}
.numBlue  { color:#3dd8ff; text-shadow:0 0 12px rgba(61,216,255,0.55); }
.numMoney { color:#e0e8f0; text-shadow: none; }

/* 体力在右侧 suffix 里的爱心对齐 */
.barSuffix .hearts {
  display: flex;
  gap: 5px !important;
  align-items: center;
}
.barSuffix .heartEmoji { font-size: 18px !important; }

/* ── 3. 资产卡 勾选标记 ── */
.logoTile { position: relative; transition: border-color 0.2s, box-shadow 0.2s; }

.logoTile.mark-up::after,
.logoTile.mark-down::after {
  content: "✓";
  position: absolute;
  top: 3px; right: 3px;
  font-size: 11px;
  font-weight: 900;
  color: #3dd8ff;
  text-shadow: 0 0 7px rgba(61,216,255,0.90);
  line-height: 1;
  background: rgba(0,20,60,0.65);
  border-radius: 4px;
  padding: 0px 2px;
  pointer-events: none;
  z-index: 5;
}
.logoTile.mark-up,
.logoTile.mark-down {
  border-color: rgba(61,216,255,0.60) !important;
  box-shadow: 0 0 12px rgba(61,216,255,0.35), 0 10px 28px rgba(0,0,0,0.40) !important;
}

/* ── 4. 空格子快速跳过样式 ── */
.cell.empty-slot {
  opacity: 0.25;
}
.emptySlotMark {
  color: rgba(255,255,255,0.30);
  font-size: 22px;
  font-weight: 900;
}

/* ── 5. 历史记录：自然语言样式 ── */
.hNarr {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  padding: 2px 0;
}
.hNarrDetail {
  font-size: 11px;
  color: rgba(255,255,255,0.50);
}
.hItem {
  padding: 9px 12px !important;
  border-radius: 12px !important;
}
.hItemBad {
  border-color: rgba(255,64,96,0.22) !important;
  background: rgba(255,40,60,0.06) !important;
}

/* ── 6. 大金币粒子 ── */
.coinBig {
  font-size: 42px !important;
  filter: drop-shadow(0 0 18px rgba(255,200,50,0.90));
}

/* ── 7. 奖励面板打开时 —— 进度条区域高亮 ── */
body.reward-open .statusPanel {
  border-color: rgba(61,216,255,0.38) !important;
  box-shadow: 0 0 28px rgba(61,216,255,0.22) !important;
}
body.reward-open .rewardOverlay {
  backdrop-filter: blur(4px);
}

/* ── 8. 奖励 header 数字 ── */
.rewardHeader .s {
  font-size: 14px !important;
  line-height: 1.5;
}

/* ── 9. BGM 按钮 ── */
#bgmBtn {
  font-size: 14px !important;
  height: 44px !important;
  border-radius: 14px !important;
  letter-spacing: 1px;
}

/* ── 10. 隐藏旧的 hpRow（现在 hp 在 statusPanel 里）── */
.hpRow { display: none !important; }

/* ── 11. 删除旧 statsChips 多余样式引起的空白 ── */
.centerHeaderLeft { flex-direction: row !important; align-items: center !important; }

/* ── 12. 奖励overlay时左侧panel保持可见 ── */
.rewardOverlay {
  background: rgba(0,0,0,0.48) !important;
}

/* End of 2.9 patch */

/* ═══════════════════════════════════════════
 *  2.9.1 CSS Patch
 * ═══════════════════════════════════════════ */

/* 行3体力行样式 */
.hpProgressRow {
  align-items: center;
  min-height: 32px;
}
.hpProgressRow .dualLabel {
  min-width: 48px;
}
.hpHeartsWrap {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 4px;
}
.hpHeartsWrap .hearts {
  display: flex;
  gap: 6px;
}

/* 开盘数字：蓝色高亮 */
.numBlue291 {
  color: #3dd8ff !important;
  text-shadow: 0 0 14px rgba(61,216,255,0.75) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

/* 资金数字：黄色高亮 */
.numYellow291 {
  color: #ffd060 !important;
  text-shadow: 0 0 14px rgba(255,208,60,0.75) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

/* 两阶段开盘：抽取预览阶段，cell蓝色对勾动画 */
@keyframes pickReveal {
  0%   { transform: scale(0.4) rotate(-20deg); opacity:0; }
  60%  { transform: scale(1.2) rotate(5deg);  opacity:1; }
  100% { transform: scale(1)   rotate(0deg);  opacity:1; }
}
.cell.pick-preview {
  background: rgba(30,80,180,0.25) !important;
  border: 1.5px solid rgba(61,216,255,0.55) !important;
}
.cell.pick-preview .pickCheck {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 28px;
  animation: pickReveal 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 0 8px rgba(61,216,255,0.85));
}
.cell.pick-empty {
  background: rgba(20,20,30,0.30) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.cell.pick-empty .emptyDash {
  position: absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  color: rgba(255,255,255,0.20);
  font-size: 18px;
}

/* 覆盖旧的 numMoney（兼容保留） */
.numMoney { color: #ffd060 !important; }

/* 对话框/overlay 过渡 */
.rewardOverlay {
  transition: opacity 0.22s ease !important;
}
.rewardOverlay.overlay-hide {
  opacity: 0 !important;
  pointer-events: none !important;
}
.rewardPanel {
  transition: transform 0.25s cubic-bezier(0.34,1.3,0.64,1), opacity 0.22s ease !important;
  transform-origin: center bottom;
}
.rewardOverlay.overlay-hide .rewardPanel {
  transform: scale(0.92) translateY(16px) !important;
  opacity: 0 !important;
}
.rewardOverlay.overlay-show .rewardPanel {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}
@keyframes overlayEnter {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes panelEnter {
  from { transform: scale(0.88) translateY(24px); opacity:0; }
  to   { transform: scale(1) translateY(0); opacity:1; }
}
.rewardOverlay.overlay-enter {
  animation: overlayEnter 0.22s ease both;
}
.rewardOverlay.overlay-enter .rewardPanel {
  animation: panelEnter 0.28s cubic-bezier(0.34,1.3,0.64,1) both;
}

/* 3选1：选我！按钮 */
.pickMeBtn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  background: linear-gradient(135deg, rgba(61,216,255,0.18), rgba(58,100,255,0.22));
  border: 1.5px solid rgba(61,216,255,0.45);
  border-radius: 10px;
  color: #3dd8ff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 2px;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.pickMeBtn:hover {
  background: linear-gradient(135deg, rgba(61,216,255,0.30), rgba(58,100,255,0.35));
  box-shadow: 0 0 16px rgba(61,216,255,0.45);
  transform: translateY(-2px);
}
.pickMeBtn:active {
  transform: translateY(0) scale(0.97);
}

/* 3选1：跳过按钮移到底部中间 */
.rewardFooter {
  text-align: center;
  padding: 12px 0 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* 星星统一黄色 */
.hsStars,
.hsStars.r1,
.hsStars.r2,
.hsStars.r3,
.roleStars {
  color: #ffd060 !important;
  text-shadow: 0 0 10px rgba(255,210,60,0.65) !important;
}

/* 累计净赚 tooltip 附加信息 */
.tooltipNetEarn {
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(255,208,60,0.08);
  border: 1px solid rgba(255,208,60,0.25);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  text-align: center;
}
.tooltipNetEarn .netVal {
  font-weight: 900;
  font-size: 14px;
}
.tooltipNetEarn .netPos { color: #ff8090; }
.tooltipNetEarn .netNeg { color: #2dff9a; }

/* 抽取预览阶段：revealGrid 微弱蓝色光晕 */
.revealGrid.phase-pick {
  box-shadow: 0 0 24px rgba(61,216,255,0.15), inset 0 0 16px rgba(61,216,255,0.05);
  border: 1px solid rgba(61,216,255,0.18);
  border-radius: 12px;
  transition: box-shadow 0.3s, border 0.3s;
}
.revealGrid.phase-settle {
  box-shadow: none;
  border: none;
}

/* 音效音符飘出动画 */
@keyframes noteFloat {
  0%   { opacity:1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform: translate(-50%, -120%) scale(1.4); }
}
.noteParticle {
  position: absolute;
  pointer-events: none;
  font-size: 20px;
  animation: noteFloat 0.8s ease-out both;
  z-index: 20;
}

/* End of 2.9.1 CSS */

/* ═══════════════════════════════════════════
 *  2.9.2 CSS Patch
 * ═══════════════════════════════════════════ */

/* /9 和 /25 放大加粗 */
.numSubBig {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.70) !important;
  letter-spacing: 0;
}
/* /25 目标感知 */
.numTargetHint {
  color: #ffd060 !important;
  text-shadow: 0 0 8px rgba(255,208,60,0.45) !important;
  position: relative;
}
.numTargetHint::after {
  content: "目标";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: rgba(255,208,60,0.65);
  white-space: nowrap;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* 左侧资产卡：本次被选中（阶段一）*/
@keyframes pickSelectedPulse {
  0%   { box-shadow: 0 0 0px rgba(61,216,255,0); }
  50%  { box-shadow: 0 0 18px rgba(61,216,255,0.80), inset 0 0 8px rgba(61,216,255,0.30); }
  100% { box-shadow: 0 0 10px rgba(61,216,255,0.45), inset 0 0 4px rgba(61,216,255,0.15); }
}
.logoTile.pick-selected {
  border: 1.5px solid rgba(61,216,255,0.85) !important;
  background: rgba(30,80,180,0.28) !important;
  animation: pickSelectedPulse 0.35s ease both;
  position: relative;
  overflow: visible !important;
}
.logoTile.pick-selected::after {
  content: "✓";
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #1e90ff;
  border: 1.5px solid #3dd8ff;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 8px rgba(61,216,255,0.70);
  z-index: 5;
}
.logoTile.pick-not-selected {
  opacity: 0.38 !important;
  filter: grayscale(0.4);
  transition: opacity 0.2s, filter 0.2s;
}

/* 奖励Overlay时：背景遮罩仅盖中间，左侧面板保持可见 */
body.reward-open .rewardOverlay {
  /* 用pointer-events none让backdrop不拦截左侧点击 */
  pointer-events: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
body.decision-open .rewardOverlay {
  pointer-events: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
/* 但rewardPanel本身要可点击 */
body.reward-open .rewardPanel {
  pointer-events: auto !important;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.38), 0 18px 70px rgba(0,0,0,0.75) !important;
}
body.decision-open .rewardPanel {
  pointer-events: auto !important;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.38), 0 18px 70px rgba(0,0,0,0.75) !important;
}
/* 奖励/决策开启时：左侧panel、statusPanel、盘面区域保持可交互 */
body.reward-open .statusPanel,
body.reward-open #assetGrid,
body.reward-open .leftBody,
body.reward-open .panel:first-child,
body.reward-open .revealWrap,
body.reward-open #revealGrid {
  pointer-events: auto !important;
  z-index: 1 !important;
}
body.decision-open .statusPanel,
body.decision-open #assetGrid,
body.decision-open .leftBody,
body.decision-open .panel:first-child,
body.decision-open .revealWrap,
body.decision-open #revealGrid {
  pointer-events: auto !important;
  z-index: 1 !important;
}

/* 奖励时左侧高亮（轻微蓝边）*/
body.reward-open .statusPanel {
  border-color: rgba(61,216,255,0.45) !important;
  box-shadow: 0 0 20px rgba(61,216,255,0.18) !important;
}

/* 奖励Header：净收益/剩余/体力都放在同一行 */
.rewardHeaderInfo {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.rewardInfoChip {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.rewardInfoChip.netPos { background: rgba(255,80,100,0.18); color: #ff8090; border: 1px solid rgba(255,80,100,0.30); }
.rewardInfoChip.netNeg { background: rgba(44,255,138,0.14); color: #2dff9a; border: 1px solid rgba(44,255,138,0.30); }
.rewardInfoChip.openLeft { background: rgba(61,216,255,0.12); color: #3dd8ff; border: 1px solid rgba(61,216,255,0.28); }
.rewardInfoChip.hpChip { background: rgba(255,80,100,0.12); color: #ff8090; border: 1px solid rgba(255,80,100,0.25); }
.rewardInfoChip.hpWarn { background: rgba(255,50,50,0.22); color: #ff4060; border: 1px solid rgba(255,50,50,0.45); animation: hpWarnBlink 0.7s ease infinite; }
@keyframes hpWarnBlink {
  0%,100% { opacity:1; }
  50% { opacity:0.55; }
}

/* 体力扣除时的爱心振动 */
@keyframes heartShake {
  0%   { transform: scale(1) rotate(0deg); }
  20%  { transform: scale(1.25) rotate(-12deg); }
  40%  { transform: scale(1.15) rotate(10deg); }
  60%  { transform: scale(1.20) rotate(-8deg); }
  80%  { transform: scale(1.08) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.heartEmoji.hp-losing {
  animation: heartShake 0.55s cubic-bezier(0.36,0.07,0.19,0.97) both !important;
  filter: drop-shadow(0 0 18px rgba(255,50,50,0.95)) !important;
}

/* End of 2.9.2 CSS */

/* ═══════════════════════════════════════════
 *  2.9.3 CSS Patch
 * ═══════════════════════════════════════════ */

/* 开盘行标签：蓝色 */
.openRowLabel {
  color: rgba(61,216,255,0.75) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}
/* 资金行标签：黄色 */
.moneyRowLabel {
  color: rgba(255,191,36,0.75) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

/* /9 蓝色 */
.dualProgressRow:first-child .numSubBig {
  color: rgba(61,216,255,0.85) !important;
  text-shadow: 0 0 6px rgba(61,216,255,0.40) !important;
}
/* /25 黄色（用 numYellow291 已有） */

/* 开盘进度条外框蓝色边框 */
#openProgressRow .dualBarOuter {
  border-color: rgba(61,216,255,0.22) !important;
}
/* 资金进度条外框黄色边框 */
#moneyProgressRow .dualBarOuter {
  border-color: rgba(251,191,36,0.22) !important;
}

/* 资金进度条 CSS 初始黄色（覆盖旧的蓝色）*/
.dualBarMoney {
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #fde68a) !important;
  box-shadow: 0 0 10px rgba(251,191,36,0.55) !important;
}

/* 奖励面板：新三行 header */
.rewardHeader293 {
  padding: 14px 18px 12px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background:
    radial-gradient(600px 160px at 20% 0%, rgba(61,216,255,0.08), transparent 60%),
    radial-gradient(600px 160px at 80% 0%, rgba(251,191,36,0.07), transparent 60%) !important;
}
.rewardHeaderTitle {
  font-size: 15px;
  color: rgba(255,255,255,0.88);
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.rewardInfoRows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rewardInfoRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.rewardInfoIcon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.rewardInfoLabel {
  color: rgba(255,255,255,0.50);
  font-size: 12px;
  min-width: 72px;
  flex-shrink: 0;
}
.rewardInfoVal {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* 行1：开盘 - 蓝色 */
.rewardInfoRow--open {
  background: rgba(61,216,255,0.06);
  border: 1px solid rgba(61,216,255,0.18);
}
.rewardInfoRow--open .rewardInfoVal {
  color: #3dd8ff;
  text-shadow: 0 0 8px rgba(61,216,255,0.50);
}

/* 行2：收益 - 黄色 */
.rewardInfoRow--money {
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.18);
}
.rewardInfoRow--money .rewardInfoVal {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251,191,36,0.50);
}

/* 行3：体力 - 红色 */
.rewardInfoRow--hp {
  background: rgba(255,80,100,0.06);
  border: 1px solid rgba(255,80,100,0.18);
}
.rewardInfoRow--hp .rewardInfoVal {
  color: #ff8090;
  text-shadow: 0 0 8px rgba(255,80,100,0.45);
}
/* 体力危险时闪烁 */
.rewardInfoRow--hp.hp-critical .rewardInfoVal {
  color: #ff3050 !important;
  animation: hpWarnBlink 0.65s ease infinite;
}
/* 本轮失去体力时强调 */
.rewardInfoRow--hp.hp-lost {
  background: rgba(255,50,50,0.14) !important;
  border-color: rgba(255,50,50,0.45) !important;
  animation: hpWarnBlink 0.7s ease 3;
}

/* End of 2.9.3 CSS */

/* ═══════════════════════════════════════════
 *  2.9.4 CSS — 最终版美术基础架构
 * ═══════════════════════════════════════════ */

/* ── 目标常驻提示 ── */
.goalHint {
  text-align: center;
  padding: 4px 0 8px;
  margin-bottom: 2px;
}
.goalHintText {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
}
.goalHintNum {
  color: #fbbf24;
  font-weight: 800;
  font-size: 13px;
  text-shadow: 0 0 8px rgba(251,191,36,0.55);
}

/* ── 体力行标签 → 红色 ── */
.hpProgressRow .dualLabelText {
  color: rgba(255,100,100,0.75) !important;
  font-weight: 700 !important;
}

/* ── revealLegend 涨=红 跌=绿（覆盖） ── */
.legend-up {
  color: #ff5060 !important;
  text-shadow: 0 0 8px rgba(255,64,80,0.60) !important;
}
.legend-dn {
  color: #20e888 !important;
  text-shadow: 0 0 8px rgba(32,232,136,0.55) !important;
}

/* ── cell 颜色覆盖：涨=红 跌=绿（A股） ── */
/* bad = 涨（up=true → cell.add("bad")） */
.cell.revealed.bad {
  background: rgba(255,60,60,0.20) !important;
  border-color: rgba(255,60,60,0.50) !important;
}
/* good = 跌（up=false → cell.add("good")） */
.cell.revealed.good {
  background: rgba(32,232,136,0.16) !important;
  border-color: rgba(32,232,136,0.42) !important;
}

/* ── pick-selected：持续展示版 ── */
@keyframes pickSelectedBounce {
  0%   { transform: scale(0.7); opacity:0; }
  55%  { transform: scale(1.25); opacity:1; }
  75%  { transform: scale(0.92); }
  100% { transform: scale(1.0); opacity:1; }
}
.logoTile.pick-selected {
  border: 2px solid rgba(61,216,255,0.90) !important;
  background: rgba(20,60,160,0.25) !important;
  /* 不设animation，改为持续状态 */
  box-shadow: 0 0 14px rgba(61,216,255,0.50), inset 0 0 6px rgba(61,216,255,0.18) !important;
  overflow: visible !important;
}
.logoTile.pick-selected::after {
  content: "✓";
  position: absolute;
  top: -7px; right: -7px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #1e90ff;
  border: 2px solid #3dd8ff;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(61,216,255,0.80);
  z-index: 6;
  animation: pickSelectedBounce 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
/* 被抽中后进入结算：保持蓝色但透明度恢复 */
.logoTile.pick-selected.mark-up,
.logoTile.pick-selected.mark-down {
  border: 2px solid rgba(61,216,255,0.80) !important;
  box-shadow: 0 0 14px rgba(61,216,255,0.45) !important;
}

/* ── 角色卡体力红心 ── */
.roleHpTag {
  font-size: 16px !important;
  letter-spacing: 2px !important;
  background: rgba(255,80,100,0.10) !important;
  border-color: rgba(255,80,100,0.30) !important;
  padding: 4px 8px !important;
}

/* ── /25 覆盖确保黄色 ── */
#moneyProgressRow .dualLabelSub {
  color: #fbbf24 !important;
  text-shadow: 0 0 6px rgba(251,191,36,0.40) !important;
}

/* ── 进度条外轨美化 ── */
#openProgressRow .dualBarOuter {
  background: rgba(61,216,255,0.06) !important;
  border-color: rgba(61,216,255,0.20) !important;
}
#moneyProgressRow .dualBarOuter {
  background: rgba(251,191,36,0.06) !important;
  border-color: rgba(251,191,36,0.20) !important;
}
#hpProgressRow .dualBarOuter,
#hpProgressRow .hpHeartsWrap {
  /* 体力行无进度条，只有爱心 */
}

/* ── 奖励收益行颜色：黄色（覆盖旧netPos/netNeg） ── */
.rewardInfoRow--money .rewardInfoVal {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251,191,36,0.55) !important;
}

/* ── 历史记录数值颜色 ── */
/* 上涨金额显示为黄色（来自addHistoryItem），已在JS中处理 */

/* ── 开盘按钮优化 ── */
.bigOpenBtn {
  font-size: 22px !important;
  letter-spacing: 4px !important;
}

/* ── statusPanel 间距优化 ── */
.statusPanel {
  gap: 6px !important;
}

/* ── 体力行标签颜色（覆盖之前的白色）── */
.dualLabelText {
  text-transform: none !important; /* 移除大写，中文不需要 */
  letter-spacing: 0.5px !important;
}

/* End of 2.9.4 CSS */

/* ═══════════════════════════════════════════
 *  2.9.5 CSS — 字体放大 + 硬币特效
 * ═══════════════════════════════════════════ */

/* ── 开盘/资金 标签（dualLabelText）放大 ── */
.dualLabelText {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
}
/* 开盘标签蓝色已有 .openRowLabel，无需重复 */
/* 资金标签黄色已有 .moneyRowLabel，无需重复 */

/* ── 体力行标签放大 ── */
.hpProgressRow .dualLabelText {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: rgba(255,100,100,0.85) !important;
}

/* ── 开盘 / 资金 大数字放大 ── */
.dualLabelNum {
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

/* ── /9  /25 分母放大 ── */
.numSubBig {
  font-size: 22px !important;
  font-weight: 800 !important;
}

/* ── 本局目标提示放大 ── */
.goalHintText {
  font-size: 15px !important;
  color: rgba(255,255,255,0.65) !important;
}
.goalHintNum {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  text-shadow: 0 0 10px rgba(251,191,36,0.65) !important;
}
.goalHint {
  padding: 6px 0 10px !important;
}

/* ── /9 蓝色（强制覆盖 numSubBig 白色）── */
#openProgressRow .numSubBig,
#openProgressRow .dualLabelSub {
  color: #3dd8ff !important;
  text-shadow: 0 0 8px rgba(61,216,255,0.55) !important;
}

/* ── 多硬币粒子：小型随机散落 ── */
.coinMulti {
  position: absolute;
  font-size: 18px;
  pointer-events: none;
  z-index: 101;
  transform: translate(-50%, -50%);
  animation: coinMultiFly var(--cm-dur, 0.9s) cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes coinMultiFly {
  0%   { opacity:1; transform: translate(-50%,-50%) scale(0.5) rotate(0deg); }
  45%  { opacity:1; }
  100% {
    opacity:0;
    transform: translate(calc(-50% + var(--cmx,0px)), calc(-50% + var(--cmy,-60px)))
               rotate(var(--cmr,20deg)) scale(0.3);
  }
}

/* ── 亏损粒子 ── */
.lossSmoke {
  position: absolute;
  font-size: 16px;
  pointer-events: none;
  z-index: 101;
  transform: translate(-50%,-50%);
  animation: lossSmokeFly 0.8s ease-out forwards;
}
@keyframes lossSmokeFly {
  0%   { opacity: 0.9; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(calc(-50% + var(--lsx,0px)), calc(-50% + var(--lsy,-40px))) scale(0.4); }
}

/* End of 2.9.5 CSS */

/* ═══════════════════════════════════════════
 *  2.9.6 CSS — 字体更大 + /9蓝色 + 硬币图标修复
 * ═══════════════════════════════════════════ */






/* ── 每轮剧情内嵌信息格 ── */
.roundInfoGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.rInfoBox{
  border:1px solid rgba(255,255,255,0.14);
  border-radius:18px;
  background:rgba(0,0,0,0.28);
  padding:18px 20px;
  text-align:center;
}
.rInfoBoxFinal{
  border-color:rgba(255,200,87,0.40);
  background:rgba(255,200,87,0.08);
}
.rInfoLabel{ font-size:13px; color:rgba(255,255,255,0.58); margin-bottom:8px; }
.rInfoVal{ font-size:32px; font-weight:900; line-height:1; }
.riBlue{ color:#4ab2ff; }
.riGold{ color:#ffc857; }
.riWhite{ color:rgba(255,255,255,0.92); }
.riTeal{ color:#63d6ff; }
.roundStoryText{
  display:grid;
  gap:10px;
  font-size:15px;
  line-height:1.8;
}
@media(max-width:600px){
  .roundInfoGrid{ grid-template-columns:1fr; }
  .rInfoVal{ font-size:28px; }
}

/* 3.4master visual asset hooks */
.hsCard {
  --art-fill: #1d3f5d;
  --art-accent: #63d6ff;
  --art-image: none;
}

.hsArt {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--art-fill) 82%, #08111c 18%), color-mix(in srgb, var(--art-accent) 46%, #08111c 54%)),
    var(--art-image) center/cover no-repeat !important;
  border-color: color-mix(in srgb, var(--art-accent) 42%, rgba(255,255,255,0.14)) !important;
}

.hsArt .colorCore {
  background:
    radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--art-accent) 82%, transparent), transparent 48%),
    linear-gradient(160deg, color-mix(in srgb, var(--art-fill) 84%, #0a1220 16%), color-mix(in srgb, var(--art-accent) 38%, #0a1220 62%)) !important;
}

.logoTile {
  --art-fill: #1d3f5d;
  --art-accent: #63d6ff;
  --art-image: none;
  --mark-fill: #0d2640;
  --mark-accent: #63d6ff;
  --mark-image: none;
}

.logo {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--art-fill) 88%, #08111c 12%), color-mix(in srgb, var(--art-accent) 42%, #08111c 58%)),
    var(--art-image) center/cover no-repeat !important;
  border-color: color-mix(in srgb, var(--art-accent) 30%, rgba(255,255,255,0.14)) !important;
}

.logoTile.mark-up::after,
.logoTile.mark-down::after,
.logoTile.pick-selected::after {
  background:
    linear-gradient(135deg, var(--mark-fill), color-mix(in srgb, var(--mark-accent) 38%, var(--mark-fill) 62%)),
    var(--mark-image) center/cover no-repeat !important;
  border-color: var(--mark-accent) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--mark-accent) 70%, transparent) !important;
}

.logoTile.mark-up,
.logoTile.mark-down,
.logoTile.pick-selected {
  border-color: color-mix(in srgb, var(--mark-accent) 58%, rgba(255,255,255,0.18)) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--mark-accent) 26%, transparent), 0 10px 28px rgba(0,0,0,0.40) !important;
}

body.decision-open #assetGrid,
body.decision-open .panel:first-child,
body.decision-open .statusPanel {
  border-color: rgba(61,216,255,0.55) !important;
  box-shadow: 0 0 24px rgba(61,216,255,0.18) !important;
}

.pickedLocked {
  opacity: 0.68;
  filter: saturate(0.8);
}

/* 3.5master polish */
.goalHint {
  padding: 10px 0 14px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.goalHintText {
  font-size: 18px !important;
  font-weight: 900;
  color: rgba(255,255,255,0.82) !important;
  letter-spacing: 1.2px !important;
}

.goalHintValue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,191,36,0.12), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,191,36,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.22);
  font-size: 18px;
  color: rgba(255,244,214,0.9);
}

.goalHintNum {
  font-size: 28px !important;
  letter-spacing: 0.5px;
}

.panel.centerStage {
  background:
    radial-gradient(900px 360px at 50% -6%, rgba(255,191,36,0.12), transparent 52%),
    linear-gradient(180deg, rgba(18,22,34,0.96), rgba(8,11,19,0.98)) !important;
}

.panel.centerStage::before {
  background:
    radial-gradient(780px 300px at 50% 0%, rgba(255,191,36,0.13), transparent 56%),
    radial-gradient(980px 460px at 50% 100%, rgba(74,178,255,0.12), transparent 62%) !important;
}

.statusPanel {
  border: 1px solid rgba(255,255,255,0.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 16px 40px rgba(0,0,0,0.24) !important;
}

.revealWrap {
  padding: 12px 14px 14px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.revealGrid {
  padding: 6px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -18px 28px rgba(0,0,0,0.18);
}

.cell {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    linear-gradient(180deg, rgba(14,18,28,0.92), rgba(9,12,20,0.98));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 22px rgba(0,0,0,0.28);
}

.cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 34%, transparent 66%, rgba(255,191,36,0.05));
  pointer-events: none;
}

.logoTile,
.logo {
  border-radius: 16px !important;
}

.logo {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -10px 16px rgba(0,0,0,0.18),
    0 8px 16px rgba(0,0,0,0.22);
}

.hsCard {
  box-shadow:
    0 18px 42px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.hsFrame {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.42));
}

.ghostBtn,
.menuBtn:not(.primary) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 16px rgba(0,0,0,0.16);
}

.ghostBtn:hover,
.menuBtn:not(.primary):hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)) !important;
  border-color: rgba(255,191,36,0.28) !important;
}

.menuBtn:disabled {
  opacity: 0.6;
  filter: grayscale(0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

.rewardPanel,
.rolePanel,
.menuPanel {
  backdrop-filter: blur(14px);
}

/* 3.5master interaction clarity */
#btnOpen {
  background:
    linear-gradient(180deg, rgba(255,214,102,1), rgba(255,155,46,0.98)) !important;
  color: #1a1204 !important;
  border: 1px solid rgba(255,241,186,0.5) !important;
  box-shadow:
    0 0 0 4px rgba(255,191,36,0.12),
    0 20px 48px rgba(255,138,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

#btnOpen:hover {
  filter: saturate(1.08) brightness(1.03) !important;
}

#btnOpen:disabled {
  background: linear-gradient(180deg, rgba(130,120,96,0.76), rgba(82,76,62,0.72)) !important;
  color: rgba(255,255,255,0.6) !important;
  box-shadow: none !important;
}

#btnRoundStoryOk,
#btnRoundEndOk,
#btnStarterOk,
#storyBtnNext,
#btnLobbyStart,
#btnRoleNext {
  background:
    linear-gradient(180deg, rgba(90,202,255,0.98), rgba(41,114,255,0.94)) !important;
  color: #eef8ff !important;
  border: 1px solid rgba(158,228,255,0.36) !important;
  box-shadow:
    0 0 0 3px rgba(74,178,255,0.12),
    0 14px 28px rgba(20,78,173,0.26),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

#btnRoundStoryOk:hover,
#btnRoundEndOk:hover,
#btnStarterOk:hover,
#storyBtnNext:hover,
#btnLobbyStart:hover,
#btnRoleNext:hover {
  filter: brightness(1.05) saturate(1.06) !important;
}

#btnRewardSkip,
#btnStrategySkip,
#storyBtnBack,
.panel .ghostBtn,
.rewardFooter .ghostBtn {
  background:
    linear-gradient(180deg, rgba(47,88,146,0.94), rgba(29,52,92,0.92)) !important;
  color: rgba(239,247,255,0.96) !important;
  border: 1px solid rgba(132,196,255,0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 20px rgba(9,32,76,0.24) !important;
}

#btnRewardSkip:hover,
#btnStrategySkip:hover,
#storyBtnBack:hover,
.panel .ghostBtn:hover,
.rewardFooter .ghostBtn:hover {
  background:
    linear-gradient(180deg, rgba(74,128,208,0.98), rgba(35,76,148,0.94)) !important;
  border-color: rgba(168,223,255,0.46) !important;
  color: #f5fbff !important;
}

#rewardOverlay,
#reinforceRewardOverlay,
#roundStoryOverlay {
  inset: auto !important;
  min-height: 0 !important;
  height: auto !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 !important;
  background:
    linear-gradient(180deg, rgba(7,10,18,0.05), rgba(7,10,18,0.34) 16%, rgba(7,10,18,0.72) 42%, rgba(7,10,18,0.86) 100%) !important;
}

#rewardOverlay .rewardPanel,
#reinforceRewardOverlay .rewardPanel,
#roundStoryOverlay .rewardPanel {
  margin-top: 0 !important;
  max-height: 100% !important;
  overflow: auto !important;
}

#reinforceRewardOverlay .rewardPanel,
#rewardOverlay .rewardPanel {
  border-top: 3px solid rgba(255,191,36,0.3) !important;
}

#roundStoryOverlay .rewardPanel {
  border-top: 3px solid rgba(74,178,255,0.3) !important;
}

.rewardPick {
  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease !important;
}

.rewardPick.rewardPick-hover,
.rewardPick:hover {
  border-color: rgba(104,205,255,0.9) !important;
  box-shadow:
    0 0 0 2px rgba(86,180,255,0.22),
    0 20px 36px rgba(11,58,122,0.24),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
  filter: saturate(1.08) brightness(1.04) !important;
}

.rewardPick.rewardPick-hover .hsFrame,
.rewardPick:hover .hsFrame {
  background:
    linear-gradient(180deg, rgba(135,222,255,0.12), rgba(18,33,58,0.48)) !important;
}

.panel.centerStage .centerBody {
  position: relative;
}

.stageBoundOverlay {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  z-index: 5 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  margin: 2px 0 8px !important;
}

.stageBoundOverlay .rewardPanel {
  width: min(100%, 1180px) !important;
  margin: 0 auto !important;
  max-height: none !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

body.reward-open .stageBoundOverlay,
body.decision-open .stageBoundOverlay {
  pointer-events: auto !important;
  backdrop-filter: none !important;
}

body.reward-open .stageBoundOverlay .rewardPanel,
body.decision-open .stageBoundOverlay .rewardPanel {
  pointer-events: auto !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

body.reward-open #rewardOverlay.rewardOverlay,
body.reward-open #reinforceRewardOverlay.rewardOverlay,
body.reward-open #roundStoryOverlay.rewardOverlay,
body.decision-open #rewardOverlay.rewardOverlay,
body.decision-open #reinforceRewardOverlay.rewardOverlay,
body.decision-open #roundStoryOverlay.rewardOverlay {
  background:
    linear-gradient(180deg, rgba(7,10,18,0.02), rgba(7,10,18,0.20) 18%, rgba(7,10,18,0.54) 46%, rgba(7,10,18,0.72) 100%) !important;
}

body.stage-flow-open .panel.centerStage #btnOpen {
  visibility: hidden !important;
}

/* 弹窗打开时，盘面区域保持可交互（强化/奖励/故事等弹窗期间可点击查看卡片） */
body.stage-flow-open .revealWrap,
body.stage-flow-open #revealGrid,
body.stage-flow-open .boardPoolCard {
  pointer-events: auto !important;
  z-index: 2 !important;
}




/* 3.7master layout + cleanup */
.gameContainer{grid-template-columns:380px 1fr !important;}
.artPanelTitle{
  font-size:36px !important;
  letter-spacing:2px !important;
  font-family:"STKaiti","KaiTi","FangSong","Microsoft YaHei",serif !important;
  font-weight:900 !important;
  text-shadow:0 0 16px rgba(255,197,64,0.45), 0 0 32px rgba(71,214,255,0.24) !important;
}
.hallTitle{font-size:44px !important;letter-spacing:4px !important;}
.settingsBtn{height:36px;align-self:center;}

.stockCardGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  max-height:56vh;
  overflow-y:auto;
  padding-right:4px;
  cursor:grab;
}
.stockCardGrid.dragging{cursor:grabbing;user-select:none;}
.stockCardTile{
  border:1px solid rgba(255,255,255,0.16);
  border-radius:12px;
  padding:6px;
  background:rgba(9,14,26,0.72);
  transition:all .16s ease;
  position:relative;
  min-height:156px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  overflow:hidden;
}
.stockCardTile .logo{
  width:100%;
  height:78px;
  border-radius:10px;
  margin:0 0 6px 0;
}
.stockThumbName{
  font-size:12px;
  line-height:1.2;
  color:rgba(255,255,255,0.95);
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stockCardTile.cleanupMode{cursor:pointer;}
.stockCardTile.embedTargetable{
  cursor:pointer;
  animation:embedPulse 1.1s ease-in-out infinite;
}
.stockCardTile.embedSelected{
  border-color:rgba(255,219,118,0.95) !important;
  box-shadow:0 0 0 2px rgba(255,219,118,0.45), 0 0 22px rgba(255,219,118,0.35);
}
.stockCardTile.cleanupSelected{
  border-color:rgba(255,92,92,0.85);
  box-shadow:0 0 0 2px rgba(255,92,92,0.32), 0 10px 28px rgba(0,0,0,0.35);
}
.stockCardTile.pick-selected{border-color:rgba(83,171,255,0.9);}
.stockCardTile.pick-not-selected{opacity:.55;}
.stockCardTile.mark-up{box-shadow:0 0 0 2px rgba(255,95,95,0.24) inset;}
.stockCardTile.mark-down{box-shadow:0 0 0 2px rgba(75,224,138,0.24) inset;}

.stockMarkerBar{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:2px;
}
.reinforceBadge{
  font-size:10px;
  line-height:1.2;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,209,102,0.92);
  color:#1a1a1a;
  font-weight:700;
  white-space:nowrap;
}
.reinforceBadge.more{background:rgba(120,208,255,0.9);}
.stockCardFooter{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
}
.stockPrincipal{color:#ffd166;}
.stockPickHint{color:#7fd4ff;}

.leftBody{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.leftStockActionRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px 0;
}
.leftStockCount{
  font-size:14px;
  color:rgba(255,255,255,0.72);
  font-weight:700;
}
.leftStockGridWrap{
  flex:1;
  min-height:0;
}

.cleanupDock{
  margin-top:10px;
  border-top:1px dashed rgba(255,255,255,0.2);
  padding:10px 10px 0;
  display:flex;
  gap:12px;
  align-items:center;
}
.cleanupBtn{
  min-width:64px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(28,36,52,0.82);
  color:#ffd166;
  font-size:20px;
  cursor:pointer;
}
.cleanupBtn.passive{
  cursor:default;
  color:#bfe6ff;
  border-color:rgba(191,230,255,0.35);
  background:rgba(28,36,52,0.55);
}
.cleanupBtn.active{box-shadow:0 0 0 2px rgba(255,94,94,0.35);}
.cleanupInfo{
  flex:1;
  min-width:0;
  padding-bottom:4px;
}
.cleanupStatus{font-size:12px;color:rgba(255,255,255,0.82);margin-bottom:6px;}
.cleanupActions{display:flex;gap:8px;flex-wrap:wrap;}

.settingsDrawer{
  position:absolute;
  right:14px;
  top:66px;
  width:min(520px, 72%);
  max-height:70%;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:14px;
  background:rgba(8,12,24,0.94);
  box-shadow:0 14px 42px rgba(0,0,0,0.5);
  z-index:8;
  overflow:hidden;
}
.settingsDrawerHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.16);
}
.settingsDrawerBody{
  padding:10px 12px 12px;
  max-height:calc(70vh - 60px);
  overflow:auto;
}

.reinforceStone{
  border:1px solid rgba(255,255,255,0.22);
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,0.24), rgba(0,0,0,0.08) 45%, rgba(0,0,0,0.35));
  border-radius:999px;
  width:100%;
  min-height:218px;
  color:#fff;
  padding:16px 18px;
  text-align:center;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease;
}
.reinforceStone:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 12px 30px rgba(0,0,0,0.35), 0 0 0 2px rgba(255,217,120,0.28) inset;
}
.reinforceEmbedPanel{
  border:1px solid rgba(255,221,130,0.5) !important;
  box-shadow:0 0 0 2px rgba(255,221,130,0.25), 0 14px 36px rgba(0,0,0,0.45) !important;
}
.reinforceEmbedInline{
  margin:0 16px 14px;
  border-radius:14px;
  border:1px solid rgba(255,221,130,0.45);
  background:linear-gradient(180deg, rgba(255,216,128,0.10), rgba(13,18,33,0.76));
  box-shadow:0 10px 30px rgba(0,0,0,0.35) inset;
}
.reinforceInlineHead{
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(255,221,130,0.28);
}
.reinforceEmbedBody{
  padding:12px 14px 14px;
  display:grid;
  gap:12px;
}
.reinforceEmbedActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.ruleTriggerLayer{
  position:fixed;
  left:50%;
  top:104px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
  z-index:520;
}
.ruleTriggerToast{
  min-width:220px;
  max-width:360px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(135deg, rgba(11,22,37,0.94), rgba(28,44,68,0.88));
  box-shadow:0 18px 42px rgba(0,0,0,0.34);
  color:#fff7d6;
  animation:ruleToastIn .22s ease-out both, ruleToastOut .28s ease-in forwards;
  animation-delay:0s, 1.38s;
}
.ruleTriggerToast.first{
  border-color:rgba(255,208,107,0.7);
  background:linear-gradient(135deg, rgba(74,38,12,0.96), rgba(142,68,19,0.92));
  box-shadow:0 18px 46px rgba(148,90,22,0.3);
}
.ruleTriggerTitle{
  font-size:20px;
  font-weight:900;
  letter-spacing:0.08em;
}
.ruleTriggerSub{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,0.78);
}
@keyframes ruleToastIn{
  from{ opacity:0; transform:translateY(-10px) scale(0.92); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes ruleToastOut{
  from{ opacity:1; transform:translateY(0) scale(1); }
  to{ opacity:0; transform:translateY(-8px) scale(0.96); }
}
.stoneName{font-size:22px;margin-bottom:8px;}
.stoneEff{font-size:13px;line-height:1.55;color:rgba(255,255,255,0.88);}
.hallKeepDelta{
  position:absolute;
  right:10px;
  bottom:8px;
  font-size:24px;
  font-weight:1000;
  text-shadow:0 5px 12px rgba(0,0,0,0.65);
  letter-spacing:0.5px;
}
.hallKeepDelta.up{color:rgba(255,108,122,0.98);}
.hallKeepDelta.down{color:rgba(96,255,176,0.98);}
.futureInfluenceStack{
  position:absolute;
  left:8px;
  top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:4;
  pointer-events:none;
}
.futureInfluenceBadge{
  min-width:46px;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:0.2px;
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 6px 16px rgba(0,0,0,0.28);
  backdrop-filter:blur(4px);
}
.futureInfluenceBadge.up{
  color:rgba(255,240,244,0.98);
  background:linear-gradient(135deg, rgba(255,92,112,0.92), rgba(164,20,38,0.84));
}
.futureInfluenceBadge.price{
  color:rgba(255,248,218,0.98);
  background:linear-gradient(135deg, rgba(255,192,86,0.92), rgba(172,102,12,0.84));
}
.futureInfluenceBadge.down{
  color:rgba(234,255,244,0.98);
  background:linear-gradient(135deg, rgba(52,198,124,0.92), rgba(16,106,70,0.84));
}

.tooltipMarkerList{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:8px;
}
.tooltipMarkerItem{
  border-radius:10px;
  border:1px solid rgba(255,208,112,0.38);
  background:rgba(255,208,112,0.14);
  padding:8px 10px;
}
.tooltipMarkerTitle{
  font-size:12px;
  font-weight:800;
  color:rgba(255,248,220,0.97);
  margin-bottom:4px;
}
.tooltipMarkerDesc{
  font-size:12px;
  line-height:1.4;
  color:rgba(245,248,255,0.86);
}

@keyframes embedPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(102,220,255,0.35), 0 0 8px rgba(102,220,255,0.2);}
  50%{box-shadow:0 0 0 2px rgba(102,220,255,0.7), 0 0 20px rgba(102,220,255,0.45);}
}

.revealGrid.opening-zoom{
  animation:revealGridZoom .58s cubic-bezier(.2,.65,.2,1);
}
.cell.reveal-pop{
  animation:revealCellPop .38s cubic-bezier(.14,.76,.25,1);
}
.hallLogoZoom{
  animation:hallLogoZoomIn .34s cubic-bezier(.18,.75,.24,1);
}
@keyframes revealGridZoom{
  0%{transform:scale(0.94); filter:saturate(0.82);}
  100%{transform:scale(1); filter:saturate(1);}
}
@keyframes revealCellPop{
  0%{transform:scale(0.72);}
  70%{transform:scale(1.08);}
  100%{transform:scale(1);}
}
@keyframes hallLogoZoomIn{
  0%{transform:scale(0.58); opacity:0.3;}
  100%{transform:scale(1); opacity:1;}
}

.dealGhostCard{
  position:fixed;
  z-index:1400;
  border-radius:12px;
  border:1px solid rgba(120,214,255,0.72);
  background:linear-gradient(145deg, rgba(52,120,220,0.82), rgba(22,44,88,0.74));
  box-shadow:0 12px 34px rgba(0,0,0,0.45), 0 0 20px rgba(120,214,255,0.28);
  pointer-events:none;
  transform:translate(0,0) scale(1) rotate(0deg);
  transition:transform .48s cubic-bezier(.2,.7,.23,1), opacity .48s ease;
  overflow:hidden;
}
.dealGhostCore{
  position:absolute;
  inset:6px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,0.25);
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,0.28), rgba(0,0,0,0.08) 45%, rgba(0,0,0,0.35));
}
.dealGhostName{
  position:absolute;
  left:8px;
  right:8px;
  bottom:7px;
  font-size:11px;
  font-weight:800;
  color:rgba(245,252,255,0.95);
  text-shadow:0 3px 8px rgba(0,0,0,0.5);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cell.dealTarget{
  box-shadow:0 0 0 3px rgba(120,214,255,0.55), 0 0 26px rgba(120,214,255,0.38);
}
.cell.dealt-preview{
  border-color:rgba(120,214,255,0.42);
  box-shadow:0 0 0 2px rgba(120,214,255,0.18) inset;
}
.cell.dealt-preview .dealtThumb{
  opacity:0.94;
  filter:saturate(1.08) brightness(1.04);
}

.mixPile{
  top:54% !important;
  width:min(860px, 78vw) !important;
  height:220px !important;
  border-radius:26px !important;
  border-width:2px !important;
  box-shadow:0 0 42px rgba(61,216,255,0.30), 0 30px 90px rgba(0,0,0,0.82) !important;
}
.mixText{
  font-size:40px !important;
  font-weight:900 !important;
  letter-spacing:6px !important;
}

/* 3.8 usability hotfix: full-screen layout, wider entry pages, clearer start CTA */
.menuPage,
.rolePage,
.gamePage{
  width:100vw !important;
  min-height:100vh !important;
}

.menuPage,
.rolePage{
  padding:24px !important;
}

.menuPanel{
  width:min(1100px, calc(100vw - 48px)) !important;
  min-height:min(720px, calc(100vh - 48px)) !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:40px 46px 36px !important;
}

.menuInner{
  width:min(760px, 100%) !important;
}

.gameTitle{
  font-size:64px !important;
  margin-bottom:18px !important;
}

.menuSub{
  font-size:18px !important;
  line-height:1.8 !important;
  margin-bottom:30px !important;
}

.menuCards{
  gap:18px !important;
  margin:22px 0 20px !important;
}

.miniCard{
  width:128px !important;
  height:156px !important;
  animation:miniMoodFlash 1.55s steps(1, end) infinite;
  transform-origin:center bottom;
}

.miniCard:nth-child(1){
  animation-delay:0s;
}

.miniCard:nth-child(2){
  animation-delay:0s;
}

.miniCard:nth-child(3){
  animation-delay:0s;
}

.miniCard .miniArt{
  background:linear-gradient(135deg, rgba(255,84,110,0.58), rgba(180,30,58,0.34)) !important;
}

.miniCard::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,88,112,0.26), rgba(180,22,48,0.10));
  mix-blend-mode:screen;
  animation:miniMoodOverlay 1.55s steps(1, end) infinite;
  pointer-events:none;
}

.miniCard .miniName{
  animation:miniMoodName 1.55s steps(1, end) infinite;
}

.menuBtns{
  width:min(540px, 100%) !important;
  margin:20px auto 0 !important;
  gap:16px !important;
}

.menuBtn{
  min-height:62px;
  font-size:20px !important;
}

.rolePanel{
  width:min(1320px, calc(100vw - 48px)) !important;
  min-height:min(820px, calc(100vh - 48px)) !important;
  padding:26px 28px 22px !important;
}

.roleGrid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:18px !important;
}

.roleHeader{
  padding-bottom:18px !important;
}

.roleFooter{
  margin-top:auto !important;
  padding-top:18px !important;
}

.gamePage{
  padding:0 !important;
}

.gameContainer{
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  grid-template-columns:minmax(0, 1fr) !important;
  gap:0 !important;
  padding:18px !important;
}

.legacyAssetPanel{
  display:none !important;
}

.panel.centerStage{
  width:100% !important;
  max-width:none !important;
  min-height:calc(100vh - 36px) !important;
  border-radius:26px !important;
}

.panel.centerStage .panelHeader{
  padding:18px 22px !important;
}

.panel.centerStage .centerBody{
  padding:18px 22px 22px !important;
  gap:18px !important;
}

.hallActionBar{
  width:100%;
  gap:16px !important;
}

#btnOpen.bigOpenBtn{
  width:min(760px, 100%) !important;
  min-height:104px !important;
  font-size:42px !important;
}

#hallCleanupBtn{
  min-width:168px;
  min-height:64px;
  font-size:18px !important;
}

.revealWrap{
  width:100% !important;
}

.revealGrid{
  width:100% !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows:repeat(3, minmax(132px, 1fr)) !important;
  gap:18px !important;
}

.cell{
  min-height:132px !important;
}

#starterGrid.rewardGrid{
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) !important;
}

@media (max-width: 980px){
  .menuPage,
  .rolePage{
    padding:12px !important;
  }

  .menuPanel,
  .rolePanel{
    width:calc(100vw - 24px) !important;
    min-height:calc(100vh - 24px) !important;
    padding:20px 18px 18px !important;
  }

  .gameTitle{
    font-size:42px !important;
  }

  .menuSub{
    font-size:15px !important;
  }

  .roleGrid{
    grid-template-columns:1fr !important;
  }

  .gameContainer{
    padding:10px !important;
    height:auto !important;
  }

  .panel.centerStage{
    min-height:calc(100vh - 20px) !important;
  }

  .hallActionBar{
    flex-direction:column;
  }

  #btnOpen.bigOpenBtn,
  #hallCleanupBtn{
    width:100% !important;
  }

  .revealGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows:none !important;
  }
}

/* 3.9 UI cleanup: row-based board, lighter history, no grid feel */
.historyDock{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:1180px;
  margin:2px auto 12px;
}

.historyDockHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 6px;
  font-size:12px;
  color:rgba(255,255,255,0.62);
}

.historyDockSub{
  color:rgba(255,255,255,0.42);
}

.historyRail{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 12px;
  max-height:110px;
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.09);
  background:rgba(0,0,0,0.18);
}

.historyRail .hItem{
  flex:1 1 240px;
  min-width:220px;
  margin:0 !important;
  padding:8px 10px !important;
  border-radius:12px !important;
}

.historyRail .hNarr{
  font-size:12px;
  line-height:1.35;
}

.revealGrid{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
  padding:0 !important;
}

.boardRow{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.14);
}

.boardRow.boardRow-dropReady{
  border-color:rgba(61,216,255,0.26);
  box-shadow:0 0 22px rgba(61,216,255,0.08);
}

.boardRowHead{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:12px;
}

.boardRowCount{
  font-size:12px;
  color:rgba(255,255,255,0.48);
}

.boardRowCount-left{
  margin-top:2px;
}

.boardRowTrack{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.boardSlot{
  position:relative;
  min-height:150px;
  padding:14px 12px 12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  overflow:hidden;
}

.boardSlot.board-empty{
  border-color:transparent;
  background:rgba(255,255,255,0.015);
  box-shadow:none;
}

.boardSlot.board-placeable{
  cursor:pointer;
  border-color:rgba(61,216,255,0.42);
  background:rgba(61,216,255,0.08);
  box-shadow:0 0 18px rgba(61,216,255,0.10);
}

.boardSlot.board-placeable:hover{
  transform:translateY(-2px);
}

.boardSlot.board-blocked{
  opacity:0.55;
}

.boardSlot.revealed.good{
  background:rgba(44,255,138,0.12);
  border-color:rgba(44,255,138,0.34);
}

.boardSlot.revealed.bad{
  background:rgba(255,60,60,0.12);
  border-color:rgba(255,60,60,0.34);
}

.boardSlot.reveal-pop{
  animation:boardSlotPop .38s cubic-bezier(.14,.76,.25,1);
}

.boardSlot.embedTargetable{
  cursor:pointer;
  border-color:rgba(255,200,87,0.35);
}

.boardSlot.embedSelected{
  border-color:rgba(255,200,87,0.85);
  box-shadow:0 0 20px rgba(255,200,87,0.22);
}

.boardEmptyHint{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:108px;
  color:rgba(255,255,255,0.58);
  text-align:center;
}

.boardEmptyMain{
  font-size:14px;
  font-weight:900;
  color:rgba(255,255,255,0.84);
}

.boardDropHint{
  font-size:11px;
  color:#9adfff;
}

.boardRowDropHint{
  font-size:11px;
  color:rgba(154,223,255,0.72);
  margin-top:-4px;
  padding-left:4px;
}

.poolTag-dividend{
  color:#ff5870;
  border-color:rgba(255,88,112,0.26);
  background:rgba(255,88,112,0.08);
}

@keyframes boardSlotPop{
  0%{ transform:scale(0.95); }
  70%{ transform:scale(1.03); }
  100%{ transform:scale(1); }
}

/* 3.10 pool-first refresh */
#menuPage .menuSub{
  display:none !important;
}

.tickerTrack{
  gap:10px !important;
  font-size:13px !important;
  animation-duration:18s !important;
}

.tickerTrack span{
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:linear-gradient(135deg, rgba(255,72,90,0.16), rgba(52,198,124,0.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 18px rgba(0,0,0,0.18);
}

.tickerTrack span:nth-child(odd){
  color:#ff8899;
  border-color:rgba(255,92,110,0.18);
}

.tickerTrack span:nth-child(even){
  color:#8ff0ba;
  border-color:rgba(74,222,128,0.18);
}

.menuPanel{
  background:
    radial-gradient(circle at top left, rgba(255,90,110,0.16), transparent 36%),
    radial-gradient(circle at top right, rgba(52,198,124,0.12), transparent 38%),
    rgba(10,12,18,0.84) !important;
}

.menuPanel:after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:20px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,72,90,0.10), transparent 18%, transparent 82%, rgba(52,198,124,0.10)),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(255,255,255,0.035) 58px 59px);
  opacity:0.75;
}

#rolePage .rolePanel{
  width:min(980px, calc(100vw - 48px)) !important;
  min-height:auto !important;
  padding:30px 30px 26px !important;
}

#rolePage .roleGrid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:18px !important;
}

.roleSelectTitle{
  font-size:28px;
  letter-spacing:2px;
}

.roleSelectSub{
  margin-top:8px;
  font-size:14px;
  color:rgba(255,255,255,0.62);
}

#rolePage .roleCard{
  min-height:180px;
  padding:22px 20px;
  border-radius:24px;
  background:
    radial-gradient(circle at top left, rgba(74,178,255,0.16), transparent 42%),
    linear-gradient(180deg, rgba(12,18,30,0.94), rgba(8,12,22,0.9));
  border:1px solid rgba(255,255,255,0.12);
}

#rolePage .roleCard.selected{
  border-color:rgba(255,200,87,0.72);
  box-shadow:0 0 0 2px rgba(255,200,87,0.20) inset, 0 18px 50px rgba(0,0,0,0.42);
}

#rolePage .roleName{
  font-size:28px !important;
}

#rolePage .roleDesc{
  margin-top:16px;
  font-size:15px;
  line-height:1.6;
  min-height:72px;
}

#rolePage .roleFooter{
  justify-content:flex-start;
}

.historyDock,
.historyRail-hidden{
  display:none !important;
}

.revealWrap{
  gap:8px !important;
  min-height:0;
  flex:1 1 auto;
  overflow:visible;
}

.revealTitle{
  min-height:18px;
  justify-content:flex-start !important;
}

.revealTitle .boardPoolLegend{
  display:none !important;
}

.boardPoolMeta{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}

.boardRowBadge{
  position:static !important;
  left:auto !important;
  top:auto !important;
  padding:4px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
}

.boardPoolEffect{
  font-size:13px;
  color:rgba(255,255,255,0.62);
}

.boardPoolAction{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:0;
  justify-content:flex-start;
}

.boardPoolRow{
  padding:10px 12px !important;
  border-radius:20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.014)),
    rgba(0,0,0,0.22) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
}

.boardPoolRow-normal{
  border-color:rgba(87,170,255,0.26) !important;
  box-shadow:inset 4px 0 0 rgba(87,170,255,0.8);
}

.boardPoolRow-normal .boardRowBadge{
  color:#9fd0ff;
  background:rgba(87,170,255,0.14);
  border-color:rgba(87,170,255,0.24);
}

.boardPoolRow-insurance{
  border-color:rgba(52,198,124,0.26) !important;
  box-shadow:inset 4px 0 0 rgba(52,198,124,0.86);
  background:
    linear-gradient(180deg, rgba(52,198,124,0.08), rgba(255,255,255,0.012)),
    rgba(0,0,0,0.20) !important;
}

.boardPoolRow-insurance .boardRowBadge{
  color:#92f0b8;
  background:rgba(52,198,124,0.14);
  border-color:rgba(52,198,124,0.24);
}

.boardPoolRow-dividend{
  border-color:rgba(255,92,112,0.26) !important;
  box-shadow:inset 4px 0 0 rgba(255,92,112,0.88);
  background:
    linear-gradient(180deg, rgba(255,92,112,0.08), rgba(255,255,255,0.012)),
    rgba(0,0,0,0.20) !important;
}

.boardPoolRow-dividend .boardRowBadge{
  color:#ff9eaa;
  background:rgba(255,92,112,0.14);
  border-color:rgba(255,92,112,0.24);
}

.boardPoolTrack{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px !important;
  min-height:84px;
  align-items:flex-start;
}

.boardPoolCard{
  width:min(142px, calc(25% - 6px));
  min-width:118px;
  min-height:92px;
  padding:8px 8px 6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)),
    rgba(255,255,255,0.02);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  position:relative;
  overflow:hidden;
}

.boardPoolCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,72,90,0.10), transparent 38%, transparent 62%, rgba(74,222,128,0.08));
  pointer-events:none;
}

.boardPoolState{
  width:100%;
  min-height:72px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.02);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.48);
  font-size:14px;
}

.poolPlaceBtn{
  min-height:34px;
  padding:0 12px;
  border:none;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(74,178,255,0.94), rgba(126,224,126,0.86));
  color:#091019;
  cursor:pointer;
}

.boardRowTrack-openPhase{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.boardRow-openPhase .boardSlot{
  min-height:150px;
}

.boardSlot-openGhost{
  background:rgba(255,255,255,0.025);
  border-color:rgba(255,255,255,0.06);
}

.starterShowcaseCard{
  background:
    radial-gradient(circle at top left, rgba(126,224,126,0.18), transparent 48%),
    rgba(255,255,255,0.03) !important;
  transform:none !important;
}

.panel.centerStage{
  min-height:calc(100vh - 20px) !important;
  overflow:visible !important;
}

.panel.centerStage .panelHeader{
  padding:12px 16px !important;
}

.panel.centerStage .centerBody{
  padding:10px 14px 12px !important;
  gap:8px !important;
  overflow:visible !important;
}

.statusPanel{
  gap:6px !important;
}

.hallActionBar{
  margin:0 !important;
  gap:12px !important;
}

#btnOpen.bigOpenBtn{
  min-height:66px !important;
  font-size:30px !important;
  border-radius:18px !important;
}

#hallCleanupBtn{
  min-height:44px !important;
  min-width:120px !important;
}

.boardCardName{
  font-size:13px !important;
  line-height:1.2;
}

.boardCardMeta{
  gap:4px !important;
  justify-content:center;
}

.boardStatBadge{
  font-size:10px !important;
  padding:2px 6px !important;
}

.hugeDelta{
  font-size:42px !important;
  z-index:8;
}

.coinParticle,
.coinMulti,
.coinDust{
  z-index:9;
}

@keyframes miniMoodFlash{
  0%,49%{
    transform:translateY(-5px) scale(1.03);
    border-color:rgba(255,84,110,0.52);
    box-shadow:0 18px 42px rgba(0,0,0,0.42), 0 0 28px rgba(255,84,110,0.26);
  }
  50%,100%{
    transform:translateY(-5px) scale(1.03);
    border-color:rgba(52,198,124,0.48);
    box-shadow:0 18px 42px rgba(0,0,0,0.42), 0 0 28px rgba(52,198,124,0.24);
  }
}

@keyframes miniMoodOverlay{
  0%,49%{
    background:linear-gradient(135deg, rgba(255,88,112,0.34), rgba(180,22,48,0.14));
    opacity:.95;
  }
  50%,100%{
    background:linear-gradient(135deg, rgba(52,198,124,0.32), rgba(10,110,68,0.14));
    opacity:.95;
  }
}

@keyframes miniMoodName{
  0%,49%{
    background:rgba(255,88,112,0.28);
    border-color:rgba(255,88,112,0.34);
    box-shadow:0 0 18px rgba(255,88,112,0.18);
  }
  50%,100%{
    background:rgba(52,198,124,0.26);
    border-color:rgba(52,198,124,0.32);
    box-shadow:0 0 18px rgba(52,198,124,0.16);
  }
}

@media (max-width: 980px){
  #rolePage .roleGrid{
    grid-template-columns:1fr !important;
  }

  .boardPoolCard{
    width:calc(50% - 5px);
    min-width:0;
  }

  .boardPoolAction{
    width:100%;
    justify-content:space-between;
  }

  .boardRowHead{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ══════════════════════════════════════════
 *  新手教程引导系统
 * ══════════════════════════════════════════ */

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  pointer-events: none;
}
.tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, 0.55);
  /* 去掉 backdrop-filter 避免与弹窗层叠加导致背景过度模糊 */
}
.tutorial-highlight {
  position: absolute;
  border: 3px solid rgba(99, 214, 255, 0.95);
  border-radius: 16px;
  box-shadow:
    0 0 0 9999px rgba(3, 5, 12, 0.58),
    0 0 28px rgba(99, 214, 255, 0.35),
    0 0 60px rgba(99, 214, 255, 0.12),
    inset 0 0 14px rgba(99, 214, 255, 0.15);
  transition: all 0.40s cubic-bezier(.22,1,.36,1);
  z-index: 2;
  animation: tutorialPulse 2s ease-in-out infinite;
}

@keyframes tutorialPulse {
  0%, 100% { box-shadow:
    0 0 0 9999px rgba(3, 5, 12, 0.58),
    0 0 28px rgba(99, 214, 255, 0.35),
    0 0 60px rgba(99, 214, 255, 0.12), 
    inset 0 0 14px rgba(99, 214, 255, 0.15); }
  50% { box-shadow:
    0 0 0 9999px rgba(3, 5, 12, 0.55),
    0 0 36px rgba(99, 214, 255, 0.50),
    0 0 80px rgba(99, 214, 255, 0.18),
    inset 0 0 18px rgba(99, 214, 255, 0.22); }
}
.tutorial-bubble {
  position: absolute;
  width: min(440px, calc(100vw - 28px));
  background: linear-gradient(180deg, rgba(14,20,36,0.98), rgba(6,9,18,1));
  border: 2px solid rgba(99,214,255,0.55);
  border-radius: 22px;
  padding: 24px 24px 18px;
  color: #eef2fa;
  font-size: 16px;
  line-height: 1.85;
  box-shadow:
    0 28px 80px rgba(0,0,0,0.72),
    0 0 44px rgba(99,214,255,0.16),
    0 0 4px rgba(99,214,255,0.30);
  z-index: 3;
  pointer-events: auto;
}
.tutorial-bubble-title {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  color: #aeefff;
  text-shadow: 0 2px 12px rgba(99,214,255,0.45);
}
.tutorial-bubble-body {
  margin-bottom: 16px;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 0 rgba(0,0,0,0.22);
}
.tutorial-bubble-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.tutorial-skip-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  user-select: none;
}
.tutorial-skip-label input {
  accent-color: #63d6ff;
  cursor: pointer;
}
.tutorial-bubble-actions {
  display: flex;
  gap: 8px;
}
.tutorial-step-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
}
.tutorial-step-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  transition: all 0.25s ease;
}
.tutorial-step-dots .dot.active {
  background: #63d6ff;
  box-shadow: 0 0 8px rgba(99,214,255,0.5);
  transform: scale(1.25);
}
@media (max-width: 768px) {
  .tutorial-bubble {
    width: min(100vw - 20px, 420px);
    padding: 20px 18px 16px;
    font-size: 15px;
    line-height: 1.75;
  }
  .tutorial-bubble-title {
    font-size: 19px;
  }
  .tutorial-bubble-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .tutorial-bubble-actions {
    justify-content: stretch;
  }
  .tutorial-bubble-actions .ghostBtn,
  .tutorial-bubble-actions .menuBtn {
    flex: 1 1 auto;
  }
}