/* =========================================================================
   HenPoker · cartoon-scene.css
   卡通手绘国风场景背景（替代写实国风 JPG/SVG）
   加载顺序：在 scene.css 之后加载，class 形式覆盖写实 url
   ========================================================================= */

/* 通用：场景容器 */
.bg-login, .bg-room{
  position: relative;
  overflow: hidden;
}
.bg-lobby{
  position: relative;
}

/* ============= 通用 SVG 装饰：灯笼/卷云/铜钱/牌九 ============= */
/* 卡通灯笼（圆润，红色+金边） */
.lt-svg-lantern{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 60 80''><defs><radialGradient id=''g'' cx=''50%'' cy=''40%''><stop offset=''0%'' stop-color=''%23FF8E78''/><stop offset=''60%'' stop-color=''%23E8483B''/><stop offset=''100%'' stop-color=''%238B0000''/></radialGradient></defs><ellipse cx=''30'' cy=''40'' rx=''26'' ry=''30'' fill=''url(%23g)'' stroke=''%236B0000'' stroke-width=''2''/><ellipse cx=''30'' cy=''22'' rx=''4'' ry=''2'' fill=''%23D89000''/><rect x=''18'' y=''2'' width=''24'' height=''4'' rx=''1'' fill=''%23D89000''/><rect x=''18'' y=''74'' width=''24'' height=''4'' rx=''1'' fill=''%23D89000''/><line x1=''30'' y1=''78'' x2=''30'' y2=''88'' stroke=''%23F5B324'' stroke-width=''2''/><circle cx=''30'' cy=''90'' r=''2'' fill=''%23F5B324''/><text x=''30'' y=''46'' text-anchor=''middle'' font-family=''serif'' font-size=''16'' font-weight=''900'' fill=''%23FFE48A''>福</text></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* 卷云（手绘卡通风） */
.lt-svg-cloud{
  background-image: url("../img/cartoon/cloud.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* 卡通铜钱 */
.lt-svg-coin{
  background-image: url("../img/cartoon/coin.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* 卡通扑克堆（3 张，旋转叠放） */
.lt-svg-cards{
  background-image: url("../img/cartoon/cards.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* 卡通牌九（中间带"九"字） */
.lt-svg-paijiu{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 80 100''><rect x=''4'' y=''4'' width=''72'' height=''92'' rx=''8'' fill=''%23FFFFFF'' stroke=''%233D2817'' stroke-width=''3''/><rect x=''10'' y=''10'' width=''60'' height=''80'' rx=''4'' fill=''%23FFF6E0'' stroke=''%23D89000'' stroke-width=''2''/><text x=''40'' y=''56'' text-anchor=''middle'' font-family=''serif'' font-size=''36'' font-weight=''900'' fill=''%23E8483B''>九</text><circle cx=''20'' cy=''22'' r=''2.5'' fill=''%23D89000''/><circle cx=''60'' cy=''78'' r=''2.5'' fill=''%23D89000''/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ============= 登录页 .bg-login ============= */
#screen-login.bg-login{
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,212,92,.35) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(232,72,59,.25) 0%, transparent 50%),
    linear-gradient(160deg, #8B1A12 0%, #E8483B 40%, #FF6B5E 100%) !important;
  position: relative;
}
#screen-login.bg-login::before,
#screen-login.bg-login::after{
  content:""; position:absolute; width:90px; height:120px; pointer-events:none;
  background-image: url("../img/cartoon/lantern.svg");
  background-repeat: no-repeat; background-size: contain; opacity:.95;
  animation: lt-sway 3.5s ease-in-out infinite alternate;
}
#screen-login.bg-login::before{ top: 12px; left: 14px; }
#screen-login.bg-login::after{ top: 12px; right: 14px; animation-delay: -1.5s; }
@keyframes lt-sway{
  from{ transform: rotate(-4deg); }
  to  { transform: rotate(4deg); }
}

/* 登录页底部：卡通扑克堆 */
#screen-login.bg-login .login-right::before{
  content:""; position:absolute; right:-10px; bottom:10px; width:120px; height:80px; pointer-events:none;
  background-image: url("../img/cartoon/cards.svg");
  background-repeat:no-repeat; background-size: contain; opacity:.85;
}

/* 登录页：登录卡片浮起感 */
#screen-login.bg-login .login-card{
  background: rgba(255,251,236,.94) !important;
  border: 3px solid var(--wood-700) !important;
  box-shadow: 0 8px 0 var(--wood-500), 0 16px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.8) !important;
  border-radius: var(--r-xl) !important;
}

/* ============= 大厅 .bg-lobby ============= */
.bg-lobby{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(245,179,36,.25) 0%, transparent 60%),
    linear-gradient(180deg, #3D2817 0%, #6B4E33 50%, #3D2817 100%) !important;
  position: relative;
}
.bg-lobby::before,
.bg-lobby::after{
  content:""; position:absolute; width:70px; height:90px; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 60 80''><defs><radialGradient id=''g'' cx=''50%'' cy=''40%''><stop offset=''0%'' stop-color=''%23FF8E78''/><stop offset=''60%'' stop-color=''%23E8483B''/><stop offset=''100%'' stop-color=''%238B0000''/></radialGradient></defs><ellipse cx=''30'' cy=''40'' rx=''22'' ry=''26'' fill=''url(%23g)'' stroke=''%236B0000'' stroke-width=''2''/><rect x=''18'' y=''6'' width=''24'' height=''3'' rx=''1'' fill=''%23D89000''/><rect x=''18'' y=''71'' width=''24'' height=''3'' rx=''1'' fill=''%23D89000''/><line x1=''30'' y1=''74'' x2=''30'' y2=''82'' stroke=''%23F5B324'' stroke-width=''1.5''/><text x=''30'' y=''44'' text-anchor=''middle'' font-family=''serif'' font-size=''13'' font-weight=''900'' fill=''%23FFE48A''>福</text></svg>");
  background-repeat:no-repeat; background-size: contain; opacity:.9;
  animation: lt-sway 3.2s ease-in-out infinite alternate;
}
.bg-lobby::before{ top: 60px; left: 10px; z-index: 0; pointer-events: none; }
.bg-lobby > *{ position: relative; z-index: 1; }
.bg-lobby::after{ top: 60px; right: 10px; z-index: 0; pointer-events: none; animation-delay: -1.2s; }

/* 大厅内层：卡通绿毡底 */
.bg-lobby .content-scroll-inner{ padding: 16px; }
.bg-lobby .page-title-area::after{
  content:""; display:block; height: 14px; margin-top: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 200 14''><path d=''M0 7 Q 25 0, 50 7 T 100 7 T 150 7 T 200 7'' stroke=''%23F5B324'' stroke-width=''2'' fill=''none'' stroke-linecap=''round''/><circle cx=''50'' cy=''7'' r=''2.5'' fill=''%23FFD45C'' stroke=''%23D89000'' stroke-width=''1''/><circle cx=''150'' cy=''7'' r=''2.5'' fill=''%23FFD45C'' stroke=''%23D89000'' stroke-width=''1''/></svg>");
  background-repeat: no-repeat; background-size: 100% 100%;
}

/* ============= 房间 .bg-room ============= */
.bg-room{
  background:
    radial-gradient(ellipse at 50% 45%, #2B7A4A 0%, var(--green-700) 60%, #0A4A22 100%) !important;
  position: relative;
}
.bg-room::before{
  /* 卡通缝线 */
  content:""; position:absolute; inset:14px; border-radius: 18px;
  border: 2.5px dashed rgba(255,212,92,.5);
  pointer-events:none;
}
.bg-room::after{
  /* 卡通金币角标 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    url("../img/cartoon/coin.svg");
  background-repeat: no-repeat; background-size: 32px;
  background-position: 16px 16px, calc(100% - 16px) 16px, 16px calc(100% - 16px), calc(100% - 16px) calc(100% - 16px);
}

/* 房间顶部：卡通灯笼挂串 */
.bg-room .room-topbar-wrap::before{
  content:""; position:absolute; top:-2px; left:0; right:0; height:34px; pointer-events:none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 60 80''><defs><radialGradient id=''g'' cx=''50%'' cy=''40%''><stop offset=''0%'' stop-color=''%23FF8E78''/><stop offset=''60%'' stop-color=''%23E8483B''/><stop offset=''100%'' stop-color=''%238B0000''/></radialGradient></defs><ellipse cx=''30'' cy=''40'' rx=''20'' ry=''24'' fill=''url(%23g)'' stroke=''%236B0000'' stroke-width=''2''/><rect x=''20'' y=''8'' width=''20'' height=''3'' rx=''1'' fill=''%23D89000''/><rect x=''20'' y=''69'' width=''20'' height=''3'' rx=''1'' fill=''%23D89000''/></svg>");
  background-repeat: repeat-x; background-size: auto 32px;
  background-position: 0 0;
  opacity:.85;
  z-index: 1;
}

/* ============= 牌桌（覆盖在 .felt-cartoon 之上） ============= */
#screen-table, .screen-table{
  background:
    radial-gradient(ellipse at 50% 50%, #2B7A4A 0%, var(--green-700) 60%, #0A4A22 100%) !important;
  position: relative;
}
#screen-table::before{
  content:""; position:absolute; inset:8px; border-radius: 24px;
  border: 2.5px dashed rgba(255,212,92,.5);
  pointer-events:none;
}
#screen-table::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    url("../img/cartoon/coin.svg");
  background-repeat: no-repeat; background-size: 24px;
  background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px);
  opacity:.8;
}

/* ============= 修复：游戏瓦片标题彩虹色 → 墨色 ============= */
.game-tile .gt-name{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--wood-700) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.4) !important;
}
.game-tile .gt-name span,
.game-tile .gt-name *{ color: inherit !important; }

/* ============= 红色 hero 卡片（"早上好"）改成卡通木桌 ============= */
.hero-banner{background:linear-gradient(180deg,#1FA85A 0%,#0F6630 60%,#0A4A22 100%) !important;border:3px solid var(--gold-700) !important;border-radius:var(--r-xl) !important;box-shadow:0 6px 0 var(--wood-700),0 12px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,212,92,.4) !important;color:var(--cream-50) !important;position:relative;overflow:hidden}
.hero-banner::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:80px;height:80px;opacity:.7;pointer-events:none;background-image:url("../img/cartoon/coin.svg");background-repeat:no-repeat;background-size:contain;}
.hero-banner .hb-greet{ color: var(--gold-300) !important; }
.hero-banner .hb-sub{ color: var(--cream-100) !important; }

/* ============= 顶部条：卡通木金边（cn-theme 已被兼容层升级） ============= */
/* 顶部条下方卡通云纹分隔 */
.top-strip::after{
  content:"" !important; display:block !important; height:6px !important; margin: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 100 6''><path d=''M0 3 Q 12 0, 25 3 T 50 3 T 75 3 T 100 3'' stroke=''%23F5B324'' stroke-width=''1.5'' fill=''none''/><circle cx=''25'' cy=''3'' r=''1.5'' fill=''%23FFD45C'' stroke=''%23D89000'' stroke-width=''1''/><circle cx=''75'' cy=''3'' r=''1.5'' fill=''%23FFD45C'' stroke=''%23D89000'' stroke-width=''1''/></svg>") !important;
  background-repeat: repeat-x !important; background-size: 100px 6px !important;
  background: linear-gradient(90deg, transparent 0%, var(--gold-500) 20%, var(--gold-300) 50%, var(--gold-500) 80%, transparent 100%) !important;
}

/* ============= 牌桌顶部加金边 ============= */
.tt-badge, .badge-cartoon{ border: 2px solid var(--wood-700) !important; }

/* ============= 让手牌（.pcard）套用卡通糖豆 ============= */
.pcard, .pcard-small{
  border-radius: 8px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream-50) 100%) !important;
  border: 1.5px solid var(--wood-700) !important;
  box-shadow: 0 2px 0 var(--wood-300), 0 3px 6px rgba(0,0,0,.25) !important;
}
.pcard.back, .pcard-small.back{
  background: linear-gradient(135deg, var(--red-500) 0%, var(--red-700) 100%) !important;
  border-color: var(--red-700) !important;
}

/* ============= 移动端微调：缩小装饰，避免遮挡 ============= */
@media (max-width: 720px){
  #screen-login.bg-login::before, #screen-login.bg-login::after{ width: 60px; height: 80px; }
  .bg-lobby::before, .bg-lobby::after{ width: 50px; height: 70px; }
  .bg-room::after{ background-size: 24px; }
  .hero-banner::after{ width: 56px; height: 56px; }
}

/* ============= 房间顶部条卡通化 ============= */
.room-topbar{
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(180deg, #1A0E08 0%, #2A1810 100%) !important;
  border-bottom: 3px solid var(--gold-700) !important;
  padding: 10px 14px !important;
  color: var(--cream-50) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
.room-topbar .tt-badge{
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500)) !important;
  color: var(--wood-700) !important;
  border: 2px solid var(--gold-900) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px 10px !important;
  font-family: var(--ff-display) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  box-shadow: 0 2px 0 var(--gold-900) !important;
}
.room-topbar .tt-btn{
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500)) !important;
  color: var(--wood-700) !important;
  border: 2px solid var(--gold-900) !important;
  box-shadow: 0 2px 0 var(--gold-900) !important;
}

/* ============= 房间底部按钮区卡通化 ============= */
.room-actions{
  background: linear-gradient(180deg, #1A0E08 0%, #2A1810 100%) !important;
  border-top: 3px solid var(--gold-700) !important;
  padding: 12px 14px !important;
  display:flex; gap:8px;
  box-shadow: 0 -4px 12px rgba(0,0,0,.4) !important;
}