@font-face{
  font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/archivo-black.woff2") format("woff2");
}
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:500 700;font-display:swap;
  src:url("/fonts/space-grotesk.woff2") format("woff2");
}
@font-face{
  font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/space-mono-700.woff2") format("woff2");
}

:root{
  --cream:#EFE4C8;        /* 页面奶油底 */
  --card:#FBF3E0;         /* 卡片奶油 */
  --ink:#15110B;          /* 近黑描边/文字 */
  --yellow:#FFD23F;       /* 马卡龙黄 */
  --pink:#FF9DBB;         /* 马卡龙粉 */
  --blue:#8FD3F0;         /* 马卡龙蓝 */
  --peach:#FFC26B;        /* 猫卡蜜桃 */
  --green:#B6E2A1;        /* 点缀绿 */
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --r:20px;
  --barH:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 12% 8%, #f6edd4 0, rgba(246,237,212,0) 40%),
    radial-gradient(circle at 88% 90%, #f2e8cf 0, rgba(242,232,207,0) 45%),
    var(--cream);
  color:var(--ink);
  font-family:"Space Grotesk",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  padding-bottom:96px;
  min-height:100vh;
}
.num{font-family:"Archivo Black","Space Grotesk",sans-serif;}
.mono{font-family:"Space Mono","Space Grotesk",monospace;}

/* ===== 弹幕层（顶部） ===== */
#barrage{
  position:fixed;top:0;left:0;right:0;height:var(--barH);
  background:var(--card);
  border-bottom:3px solid var(--ink);
  overflow:hidden;z-index:50;pointer-events:none;
}
#barrage::before{
  content:"弹幕";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-family:"Archivo Black",sans-serif;font-size:13px;color:var(--ink);
  background:var(--yellow);border:3px solid var(--ink);border-radius:10px;
  padding:3px 8px;z-index:2;letter-spacing:1px;
}
.dm{
  position:absolute;left:100%;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:15px;font-weight:700;
  padding:5px 12px;border:3px solid var(--ink);border-radius:999px;
  background:#fff;box-shadow:var(--shadow-sm);
  animation:fly linear forwards;will-change:transform;
}
.dm.sys{background:var(--green);}
.dm.cat{background:var(--peach);}
.dm.me{background:var(--pink);}
@keyframes fly{
  from{transform:translate(0,-50%);}
  to{transform:translate(calc(-100vw - 120%),-50%);}
}

/* ===== 页面容器 ===== */
.page{max-width:760px;margin:0 auto;padding:calc(var(--barH) + 22px) 18px 28px;}
header.hero{text-align:center;margin-bottom:20px;}
.badge{
  display:inline-block;font-family:"Archivo Black",sans-serif;font-size:13px;
  background:var(--ink);color:var(--cream);padding:6px 14px;border-radius:999px;
  letter-spacing:2px;transform:rotate(-1.5deg);
}
h1.title{
  font-family:"Archivo Black",sans-serif;font-size:clamp(40px,9vw,68px);
  margin:14px 0 6px;line-height:.95;letter-spacing:1px;
  text-shadow:4px 4px 0 var(--yellow);
}
.sub{font-size:15px;font-weight:700;color:#5b554a;max-width:520px;margin:0 auto;line-height:1.5;}
.sub b{color:var(--ink);}

.card{
  background:var(--card);border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow);
}

/* 猫卡 */
.catcard{padding:16px 18px;display:flex;align-items:center;gap:16px;margin-bottom:18px;background:var(--peach);}
.catcard .svgwrap{width:104px;height:104px;flex:0 0 auto;cursor:pointer;}
.catcard .meta{flex:1;min-width:0;}
.catcard .rank1{font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:1px;}
.catcard h2{font-family:"Archivo Black",sans-serif;font-size:26px;margin:2px 0 4px;}
.catcard .inf{font-size:14px;font-weight:700;}
.catcard .inf .infty{font-family:"Archivo Black",sans-serif;font-size:18px;}
.catcard .tip{font-size:12.5px;font-weight:600;color:#6b4a1f;margin-top:4px;}
.catcard .svgwrap{cursor:pointer;}
.catcard .pet{margin-top:6px;font-size:12.5px;font-weight:700;color:#6b4a1f;}
.catcard .pet b{font-family:"Space Mono",monospace;font-size:15px;color:var(--ink);}
@keyframes pet{0%{transform:scale(1);}40%{transform:scale(1.09) rotate(-2deg);}100%{transform:scale(1);}}
.svgwrap.petting{animation:pet .45s ease;}
.tail{transform-origin:88px 78px;animation:wag 1.1s ease-in-out infinite alternate;}
@keyframes wag{from{transform:rotate(-9deg);}to{transform:rotate(11deg);}}

/* 三张马卡龙大数字卡 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;}
.stat{padding:16px 14px 18px;border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);text-align:center;background:var(--card);}
.stat.y{background:var(--yellow);}
.stat.p{background:var(--pink);}
.stat.b{background:var(--blue);}
.stat .lab{font-family:"Archivo Black",sans-serif;font-size:14px;letter-spacing:.5px;}
.stat .big{font-family:"Archivo Black",sans-serif;font-size:clamp(46px,12vw,72px);line-height:1;margin:8px 0 2px;}
.stat .sub2{font-size:12px;font-weight:700;color:#4a463c;min-height:16px;}
.stat .pill{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:1px 8px;background:#fff;}

/* 加入 / 状态 */
.panel{padding:16px 18px;margin-bottom:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.panel .txt{flex:1;min-width:180px;font-weight:700;font-size:14px;line-height:1.5;}
.panel .txt small{display:block;color:#6b6456;font-weight:600;font-size:12px;margin-top:3px;}
.beat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;margin-top:4px;}
.dot{width:9px;height:9px;border-radius:50%;background:#3aa655;border:2px solid var(--ink);}
.dot.off{background:#d6443a;}
.btn{
  font-family:"Archivo Black",sans-serif;font-size:16px;cursor:pointer;
  border:3px solid var(--ink);border-radius:14px;padding:12px 22px;background:var(--green);
  box-shadow:var(--shadow-sm);transition:transform .06s, box-shadow .06s;letter-spacing:1px;
}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);}
.btn:disabled{background:#e7dec6;color:#9a927f;cursor:wait;}

/* 队伍名单 */
.qhead{display:flex;justify-content:space-between;align-items:baseline;margin:4px 4px 10px;}
.qhead h3{font-family:"Archivo Black",sans-serif;font-size:20px;margin:0;}
.qhead .cnt{font-size:13px;font-weight:700;color:#6b6456;}
.queue{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;}
.row{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border:3px solid var(--ink);
  border-radius:14px;background:var(--card);box-shadow:var(--shadow-sm);
}
.row.cat{background:var(--peach);}
.row.you{background:var(--green);box-shadow:6px 6px 0 var(--ink);}
.row.more{border-style:dashed;box-shadow:none;background:transparent;justify-content:center;color:#6b6456;}
.row .rk{font-family:"Archivo Black",sans-serif;font-size:20px;width:46px;flex:0 0 auto;text-align:center;}
.row .nm{flex:1;min-width:0;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row .nm .tag{font-size:11px;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:0 7px;margin-left:6px;background:#fff;}
.row .nm .tag.npc{background:var(--blue);}
.row .dur{font-family:"Space Mono",monospace;font-weight:700;font-size:13px;color:#4a463c;flex:0 0 auto;}
.row .mini{font-size:10.5px;color:#6b6456;font-weight:600;}
.queue.small .row{padding:8px 12px;border-width:2.5px;}
.queue.small .row .rk{font-size:16px;width:38px;}
.queue.small .row .nm{font-size:13.5px;}

/* 页脚 */
footer{margin-top:22px;text-align:center;font-size:12.5px;font-weight:600;color:#6b6456;line-height:1.7;}
footer .honesty{display:inline-block;border:2px dashed var(--ink);border-radius:12px;padding:7px 12px;background:#fff7;margin-bottom:8px;}
footer .dom{font-family:"Archivo Black",sans-serif;color:var(--ink);letter-spacing:.5px;}

/* 里程碑大广播 */
#flash{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:80;
  pointer-events:none;
}
#flash .box{
  background:var(--yellow);border:4px solid var(--ink);border-radius:24px;box-shadow:10px 10px 0 var(--ink);
  padding:22px 30px;text-align:center;transform:rotate(-2deg);max-width:84%;
  animation:pop .5s cubic-bezier(.2,1.4,.5,1);
}
@keyframes pop{from{transform:rotate(-2deg) scale(.5);opacity:0;}to{transform:rotate(-2deg) scale(1);opacity:1;}}
#flash .box .k{font-family:"Archivo Black",sans-serif;font-size:14px;letter-spacing:2px;}
#flash .box .m{font-family:"Archivo Black",sans-serif;font-size:clamp(22px,6vw,34px);margin-top:6px;}

/* 底部弹幕输入 */
#composer{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--card);border-top:3px solid var(--ink);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:10px;align-items:center;
}
#composer input{
  flex:1;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;
  border:3px solid var(--ink);border-radius:14px;padding:11px 14px;background:#fff;color:var(--ink);
}
#composer input:disabled{background:#eee6cf;color:#9a927f;}
#composer .send{
  font-family:"Archivo Black",sans-serif;font-size:14px;cursor:pointer;
  border:3px solid var(--ink);border-radius:14px;padding:11px 16px;background:var(--pink);box-shadow:var(--shadow-sm);
}
#composer .send:disabled{background:#eee6cf;color:#9a927f;box-shadow:none;}
#composer .send:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);}
#composer .hint{position:absolute;top:-22px;right:14px;font-size:11px;font-weight:700;color:#b0443a;}

/* ===== 手机端专属元素（桌面隐藏，见下方 media query） ===== */
.toprow .topr,
.catcard .cap,
.lede,
.lede2,
.stat.extra,
.darkcopy,
.deco,
footer .meow{display:none;}
.stat .sub2.mob{display:none;}

/* ===== 手机端：对齐 promo 海报构图 ===== */
@media (max-width:560px){
  html,body{overflow-x:hidden;}
  .desk-only{display:none;}

  /* 顶部：徽章左 · 队首猫章右 */
  .page{position:relative;padding-left:16px;padding-right:16px;}
  .toprow{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .topr{
    display:inline-block;font-family:"Archivo Black",sans-serif;font-size:12px;white-space:nowrap;
    background:var(--peach);border:3px solid var(--ink);border-radius:12px;padding:5px 10px;
    box-shadow:4px 4px 0 var(--ink);
  }
  header.hero{text-align:left;margin-bottom:14px;}
  h1.title{font-size:clamp(44px,15vw,72px);margin:16px 0 10px;text-shadow:4px 4px 0 var(--yellow);}
  .lede{display:block;font-size:clamp(17px,5.2vw,22px);font-weight:700;line-height:1.28;}
  .lede2{display:block;font-size:clamp(14px,4.2vw,17px);font-weight:700;color:#5b554a;margin-top:5px;}

  /* 名次主卡 + 猫盒 同行，下方三宫格 */
  .stage{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
  .stats{display:contents;}
  .stat{padding:10px 10px 12px;border-radius:16px;box-shadow:4px 4px 0 var(--ink);text-align:left;}
  .stat .lab{font-size:12px;letter-spacing:0;}
  .stat .big{font-size:min(4.4vw,17px);line-height:1.05;margin:6px 0 3px;white-space:nowrap;}
  .stat .sub2{font-size:10px;line-height:1.35;}
  .stat .pill{display:none;}
  .stat.bigrank{grid-column:1/3;grid-row:1;padding:14px 14px 16px;box-shadow:6px 6px 0 var(--ink);}
  .stat.bigrank .lab{font-size:13px;}
  .stat.bigrank .big{font-size:clamp(46px,14.5vw,70px);line-height:.94;margin:4px 0 2px;}
  .stat.bigrank .sub2{font-size:11px;}
  .stat.p{grid-column:2/3;grid-row:2;}
  .stat.b{grid-column:3/4;grid-row:2;}
  .stat.extra{display:block;grid-column:1/2;grid-row:2;}
  .stat.p #cumSub{display:none;}
  .stat .sub2.mob{display:block;}

  .catcard{
    grid-column:3/4;grid-row:1;flex-direction:column;align-items:center;justify-content:center;
    gap:0;padding:12px 6px;margin:0;text-align:center;box-shadow:6px 6px 0 var(--ink);
  }
  .catcard .meta{display:none;}
  .catcard .svgwrap{width:100%;max-width:80px;height:auto;aspect-ratio:1/1;}
  .catcard .cap{display:block;font-family:"Archivo Black",sans-serif;font-size:11px;line-height:1.2;margin-top:3px;}
  .catcard .pet{font-size:10px;line-height:1.25;margin-top:3px;}
  .catcard .pet b{font-size:12.5px;}
  .catcard .pet .pet-long{display:none;}

  /* 没有奖品 */
  .darkcopy{display:block;margin:0 4px 14px;}
  .darkcopy .line{font-weight:700;font-size:13.5px;line-height:1.5;}
  .darkcopy .strike{font-family:"Archivo Black",sans-serif;font-size:15px;margin-top:3px;}

  /* 页脚：域名章 + 猫气泡 */
  footer{text-align:left;}
  footer .footrow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;}
  footer .dom{
    display:inline-block;background:var(--ink);color:var(--cream);
    font-family:"Archivo Black",sans-serif;font-size:13.5px;letter-spacing:.5px;
    padding:8px 13px;border-radius:12px;
  }
  footer .meow{
    display:inline-block;background:var(--pink);border:3px solid var(--ink);border-radius:14px;
    padding:8px 12px;box-shadow:4px 4px 0 var(--ink);font-weight:700;font-size:12.5px;line-height:1.3;
    transform:rotate(-2deg);max-width:62%;
  }

  /* 装饰圆点（海报同款，压在卡片之下） */
  .deco{display:block;position:absolute;border:3px solid var(--ink);border-radius:50%;z-index:-1;pointer-events:none;}
  .d1{width:52px;height:52px;background:var(--yellow);opacity:.85;right:-24px;top:200px;}
  .d2{width:28px;height:28px;background:var(--pink);left:-4px;top:100px;}
  .d3{width:20px;height:20px;background:var(--blue);right:30px;top:66px;}
}