:root{
  --white: #ffffff;
  --muted: rgba(255,255,255,0.65);
  --plus: #38ef7d;
  --minus: #ff3b6b;
  --riichi: #ff3b6b;

  /* 印章颜色 */
  --stamp-zimo: #15c56d;
  --stamp-rong: #3b82f6;
  --stamp-fc:   #f61515;
  --stamp-tenpai: #16a34a; /* 绿 */
  --stamp-noten:  #ea580c; /* 橙 */

  /* 胡牌信息（基础） */
  --info-win-bg: rgba(28, 22, 87, 0.608);
  --info-win-bd: #7dd3fc;
}

/* 数码字体 */
@font-face {
  font-family: 'DT';
  src: url('SA-DIGITAL-NUMBER.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:transparent}
body{font-family: "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans SC", sans-serif;color:var(--white)}
.overlay{position:relative;width:100vw;height:100vh;background:transparent;overflow:hidden}

/* Center-screen Riichi animation 容器 */
.center-riichi{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width: 1000px;
  height: 1000px;
  opacity:0;
  pointer-events:none;
  z-index: 9999;

  display:flex;
  align-items:center;
  justify-content:center;
}
.center-riichi.show{
  animation:centerFade 4000ms ease-out forwards;
}

/* 上层队伍 logo 容器 */
.center-riichi-logos{
  position:absolute;
  width: 90%;
  height: 75%;
  left:50%;
  top: 7%;
  transform: translateX(-50%);
  z-index:2;
  pointer-events:none;
}

/* 每个队伍 logo <img> */
.center-riichi-logo-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition: opacity .12s linear;
}
.center-riichi-logo-img.show{
  opacity:1;
}

/* 下层 riichi.webm 视频：同样放大，整体往下挪一些 */
.center-riichi-video{
  position:absolute;
  width: 95%;
  height: 55%;
  left:50%;
  top: 45%;
  transform: translateX(-50%);
  object-fit:contain;
  z-index:1;
  pointer-events:none;
}

/* 4 秒淡入-停留-淡出动画 */
@keyframes centerFade{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.9); }
  10%  { opacity:1; transform:translate(-50%,-50%) scale(1.02); }
  80%  { opacity:1; transform:translate(-50%,-50%) scale(1.0); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.0); }
}

/* Bottom score layout */
.scoreboard{
  position:absolute;
  left:5.3vw; right:5vw; bottom:0.5vh;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:3px;
  align-items:end;
  justify-items:center;
}
.score-card{
  position:relative; background:transparent; text-align:center;
}
.label{ display:none; }

/* Score wrap anchors stamps and delta without layout shift */
.score-wrap{
  display:inline-block;
  padding:8px 14px;
  border-radius:14px;
  transition:filter .2s ease;
  position: relative;
  will-change: transform;
  transform-origin: 50% 75%;
}
.score{
  font-size:52px; font-weight:100; color:var(--white); line-height:1;
  text-shadow:0 2px 3px rgba(0,0,0,.35);
  font-family: 'DT', "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans SC", sans-serif;
}

/* 庄家「親」标记：绝对挂在 score-card 上，不参与 score-wrap 的 bump transform */
.oya{
  position:absolute;
  right:120%;
  top:-140px;
  transform: translate(-8px,-40%) scale(0.8);
  padding:2px 8px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-weight:900;
  font-size:36px;
  letter-spacing:.18em;
  opacity:0;
  pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition: opacity .18s ease, transform .18s ease;
}
.oya.show{
  opacity:1;
  transform: translate(-8px,-40%) scale(1.0);
}

/* 印章 */
.stamp{
  position:absolute;
  top:-179px; left:-88px;
  z-index:2;
  padding:2px 8px;
  font-weight:800;
  font-size:50px;
  letter-spacing:.18em;
  border:7px solid currentColor;
  border-radius:13px;
  background:transparent;
  color:#ff4d6d;
  transform:rotate(-12deg) scale(.96);
  opacity:0;
  pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  transition: opacity .18s ease, transform .18s ease;
}
.stamp.zimo{ color: var(--stamp-zimo); }
.stamp.rong{ color: var(--stamp-rong); }
.stamp.fangchong{ color: var(--stamp-fc); }
.stamp.tenpai{ color: var(--stamp-tenpai); }
.stamp.noten{ color: var(--stamp-noten); }
.stamp.show{ opacity:1; animation: stampIn 700ms ease-out; }
@keyframes stampIn{
  0%{ transform:translate(-6px,-6px) rotate(-18deg) scale(.7); opacity:0; }
  45%{ transform:translate(0,0) rotate(-10deg) scale(1.08); opacity:1; }
  100%{ transform:translate(0,0) rotate(-12deg) scale(1.0); opacity:1; }
}

/* 立直 pill */
.riichi-slot{ height:44px; display:flex; align-items:center; justify-content:center; overflow:visible; }
.riichi{
  padding:6px 18px; background:var(--riichi); color:#fff;
  font-weight:900; font-size:22px; letter-spacing:.14em;
  border-radius:999px; text-align:center;
  opacity:0; visibility:hidden; transform:translateY(8px);
  text-shadow:0 2px 6px rgba(0,0,0,.25);
}
.riichi.show{ visibility:visible; animation:riichiIn .25s ease forwards; }
@keyframes riichiIn{ to{ opacity:1; transform:translateY(0); } }

/* 立直红框 */
.score-card.riichi-on .score-wrap{
  box-shadow:0 0 0 3px var(--riichi), 0 0 20px rgba(255,59,107,.55);
  animation:pulse 2000ms ease-in-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 3px rgba(255,59,107,.9), 0 0 20px rgba(255,59,107,.55); }
  50%{ box-shadow:0 0 0 6px rgba(255,59,107,.5), 0 0 26px rgba(255,59,107,.35); }
  100%{ box-shadow:0 0 0 3px rgba(255,59,107,.9), 0 0 20px rgba(255,59,107,.55); }
}

/* 分数加减气泡 */
.delta{
  position:absolute;
  left:50%; top:0;
  transform:translate(-50%, -300%);
  pointer-events:none;
  font-weight:900;
  font-size:54px;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
  opacity:0;
  z-index:3;
  will-change: transform, opacity;
}
.delta.plus{ color: var(--plus); } 
.delta.minus{ color: var(--minus); }
.delta.holdslide{ animation: deltaHoldSlide 5300ms ease forwards; }
@keyframes deltaHoldSlide{
  0%{ transform:translate(-50%, -320%); opacity:0; }
  10%{ opacity:1; }
  75%{ transform:translate(-50%, -320%); opacity:1; }
  100%{ transform:translate(-50%, -8%); opacity:0; }
}

/* bump 弹跳 */
.bump{
  animation: bumpEx 700ms cubic-bezier(.2,.8,.2,1.05);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
@keyframes bumpEx{
  0%   { transform: translateY(0) scale(1); }
  28%  { transform: translateY(-8px) scale(1.3); }
  60%  { transform: translateY(2px) scale(0.86); }
  100% { transform: translateY(0) scale(1); }
}

/* 胡牌信息徽章容器 */
.info-badge{
  position:absolute;
  left:50%;
  bottom: 330px;
  transform: translateX(-50%);
  z-index: 6;
  opacity: 0;
  white-space: nowrap;
  max-width: none;
  transition: opacity .25s ease;
  pointer-events: none;
}
.info-badge.show{ opacity:1; }

.info-badge .info-inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 22px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 33px;
  letter-spacing: .08em;
  color:#fff;
  background: var(--info-win-bg);
  border: 4px solid var(--info-win-bd);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 16px rgba(125,211,252,.25);
  will-change: transform, filter;
}

/* ====== 胜利信息样式 ====== */
.info-badge.info-win.win-n1 .info-inner{
  background: rgba(17,24,39,0.85);
  border-color:#60a5fa;
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 16px rgba(96,165,250,.35);
}
.info-badge.info-win.win-n2 .info-inner{
  background: linear-gradient(135deg, rgba(30,64,175,0.9), rgba(16,185,129,0.85));
  border-color:#34d399;
  box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 18px rgba(52,211,153,.35);
  animation: popOnceN2 660ms ease-out 1;
}
.info-badge.info-win.win-n3 .info-inner{
  background: linear-gradient(135deg, rgba(5,150,105,0.95), rgba(234,179,8,0.9));
  border-color:#fbbf24;
  box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 22px rgba(251,191,36,.38);
  animation: popOnceN3 660ms ease-out 1;
}

/* 满贯 */
.info-badge.info-win.win-mangan .info-inner{
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  border-color:#f59e0b;
  box-shadow: 0 14px 34px rgba(0,0,0,.6), 0 0 24px rgba(245,158,11,.45);
  animation: glowPulse 1400ms ease-in-out infinite alternate, popOnceM 560ms ease-out 1;
  position: relative;
  overflow: visible;
}
.info-badge.info-win.win-mangan .info-inner::before{
  content:'';
  position:absolute; inset:-3px;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  filter: blur(2px);
  border-radius: inherit;
  transform: translateX(-160%);
  animation: shineSweep 1800ms ease-in-out infinite;
  pointer-events: none;
}

/* 跳满 */
.info-badge.info-win.win-haneman .info-inner{
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-color:#f97316;
  box-shadow: 0 16px 36px rgba(0,0,0,.62), 0 0 26px rgba(249,115,22,.5);
  animation: glowPulse 1300ms ease-in-out infinite alternate, popOnceH 600ms ease-out 1;
  position: relative;
  overflow: visible;
}
.info-badge.info-win.win-haneman .info-inner::before{
  content:'';
  position:absolute; inset:-3px;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  filter: blur(2px);
  border-radius: inherit;
  transform: translateX(-160%);
  animation: shineSweep 1700ms ease-in-out infinite;
  pointer-events: none;
}

/* 倍满 */
.info-badge.info-win.win-baiman .info-inner{
  background: linear-gradient(135deg, #ef4444, #d946ef);
  border-color:#fb7185;
  box-shadow: 0 18px 40px rgba(0,0,0,.66), 0 0 28px rgba(251,113,133,.55);
  animation: glowPulse 1200ms ease-in-out infinite alternate, popOnceBai 640ms ease-out 1;
  position: relative;
  overflow: visible;
}
.info-badge.info-win.win-baiman .info-inner::before{
  content:'';
  position:absolute; inset:-3px;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  filter: blur(2px);
  border-radius: inherit;
  transform: translateX(-160%);
  animation: shineSweep 1800ms ease-in-out infinite;
  pointer-events: none;
}

/* 三倍满 */
.info-badge.info-win.win-sanbaiman .info-inner{
  background: linear-gradient(135deg, #d946ef, #06b6d4);
  border-color:#a78bfa;
  box-shadow: 0 20px 44px rgba(0,0,0,.7), 0 0 32px rgba(167,139,250,.55);
  animation: glowPulse 1100ms ease-in-out infinite alternate, popOnceSan 680ms ease-out 1;
  position: relative;
  overflow: visible;
}
.info-badge.info-win.win-sanbaiman .info-inner::before{
  content:'';
  position:absolute; inset:-4px;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  filter: blur(3px);
  border-radius: inherit;
  transform: translateX(-170%);
  animation: shineSweep 1600ms ease-in-out infinite;
  pointer-events: none;
}
.info-badge.info-win.win-sanbaiman .info-inner::after{
  content:'';
  position:absolute; left:50%; top:50%;
  width: 140%; height: 140%;
  transform: translate(-50%, -50%) scale(.6);
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.18);
  animation: ringPulse 1300ms ease-out infinite;
  pointer-events: none;
}

/* 役满 */
.info-badge.info-win.win-yakuman .info-inner{
  background: linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6, #06b6d4);
  background-size: 300% 300%;
  border-color:#ffe082;
  box-shadow: 0 22px 50px rgba(0,0,0,.75), 0 0 40px rgba(255,224,130,.6), 0 0 22px rgba(255,255,255,.35) inset;
  animation: glowPulse 1000ms ease-in-out infinite alternate, popOnceYaku 720ms ease-out 1, bgFlow 4200ms linear infinite;
  position: relative;
  overflow: visible;
  text-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 12px rgba(255,255,255,.25);
}
.info-badge.info-win.win-yakuman .info-inner::before,
.info-badge.info-win.win-yakuman .info-inner::after{
  content:''; position:absolute; pointer-events:none; border-radius: inherit;
}
.info-badge.info-win.win-yakuman .info-inner::before{
  inset:-5px;
  background: linear-gradient(300deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  filter: blur(3px);
  transform: translateX(170%);
  animation: shineSweepReverse 1800ms ease-in-out infinite;
}
.info-badge.info-win.win-yakuman .info-inner::after{
  left:50%; top:50%;
  width: 160%; height: 160%;
  transform: translate(-50%, -50%) scale(.55);
  border-radius: 999px;
  box-shadow: 0 0 0 8px rgba(255,255,255,.22);
  animation: ringPulse 1200ms ease-out infinite;
}

/* ====== 动画 ====== */
@keyframes glowPulse{
  0%   { filter: brightness(1.0); box-shadow: 0 8px 20px rgba(0,0,0,.36), 0 0 10px rgba(125,211,252,.22); }
  100% { filter: brightness(1.06); box-shadow: 0 14px 34px rgba(0,0,0,.58), 0 0 18px rgba(125,211,252,.38); }
}
@keyframes popOnceN2{ 0%{ transform: scale(.92); } 40%{ transform: scale(1.06); } 100%{ transform: scale(1.0); } }
@keyframes popOnceN3{ 0%{ transform: scale(.9); }  40%{ transform: scale(1.08); } 100%{ transform: scale(1.0); } }
@keyframes popOnceM { 0%{ transform: scale(.9); }  40%{ transform: scale(1.10);} 100%{ transform: scale(1.0); } }
@keyframes popOnceH { 0%{ transform: scale(.88);} 40%{ transform: scale(1.12);} 100%{ transform: scale(1.0); } }
@keyframes popOnceBai{0%{ transform: scale(.86);} 40%{ transform: scale(1.14);} 100%{ transform: scale(1.0); } }
@keyframes popOnceSan{0%{ transform: scale(.84);} 40%{ transform: scale(1.16);} 100%{ transform: scale(1.0); } }
@keyframes popOnceYaku{0%{ transform: scale(.82);} 40%{ transform: scale(1.18);} 100%{ transform: scale(1.0); } }

@keyframes shineSweep{
  0%   { transform: translateX(-170%); opacity: 0; }
  35%  { opacity: .95; }
  100% { transform: translateX(170%);  opacity: 0; }
}
@keyframes shineSweepReverse{
  0%   { transform: translateX(170%);  opacity: 0; }
  35%  { opacity: .95; }
  100% { transform: translateX(-170%); opacity: 0; }
}
@keyframes ringPulse{
  0%   { transform: translate(-50%, -50%) scale(.58); opacity:.42; }
  100% { transform: translate(-50%, -50%) scale(1.36); opacity:0; }
}
@keyframes bgFlow{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}