:root{
  --meow:#ff8a19;
  --meow-glow: rgba(255,138,25,.38);
  --woof:#11c5d8;
  --woof-glow: rgba(17,197,216,.38);
  --text:#f5f6f7;
  --muted:#aab0b6;
  --border:rgba(255,255,255,.09);

  /* === 统一：四边留白 = 两面板间距 === */
  --arena-gap: 8px; /* 想更贴边设 8px，想稍松设 12px */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:"Sora",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:#000; overflow-x:hidden;
}

/* Background */
.bg{position:fixed; inset:0; z-index:-3; overflow:hidden}
.bg img,.bg source{width:100%; height:100%; object-fit:cover; filter:brightness(.9)}
@media (max-aspect-ratio:1/1){
  .bg source:first-child{content:url('assets/hero-3x2-3840x2560.webp')}
}

/* Ambient */
.ambient{position:fixed; inset:0; z-index:-2; pointer-events:none}
.ambient::before,.ambient::after{
  content:""; position:absolute; width:42vw; height:42vw; filter:blur(28px);
  bottom:-16vw; border-radius:50%;
  background:radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.2) 60%),
             radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.04), transparent 60%);
  animation:pulse 4s infinite;
}
.ambient::before{ left:-10vw; box-shadow:0 -40px 140px var(--meow-glow) inset; }
.ambient::after{ right:-10vw; box-shadow:0 -40px 140px var(--woof-glow) inset; }
@keyframes pulse {0%,100%{opacity:.2} 50%{opacity:.3}}

/* Header */
.site-top{ padding:20px clamp(16px,6vw,56px) 0; display:flex; justify-content:flex-end; }
.title{display:flex; align-items:center; gap:12px; text-shadow:0 6px 28px rgba(0,0,0,.5)}
.title h1{margin:0; font-weight:800; letter-spacing:.4px; font-size: clamp(22px,2.4vw,28px)}
.title .meow{color:var(--meow)}
.title .vs{opacity:.8; margin:0 .28em}
.title .woof{color:var(--woof)}
.coin{width:64px; height:64px; opacity:.98}

/* Buttons */
.btn, .btn-ghost, .btn-primary, .btn-outline, .btn-link{
  border:1px solid var(--border); background:rgba(0,0,0,.3); color:var(--text);
  padding:10px 14px; border-radius:12px; cursor:pointer;
  font-weight:600; font-size:14px; line-height:1.1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
a.btn{ text-decoration:none; }
.btn:hover{transform:translateY(-1px)}
.btn-link{border:none; background:transparent; padding:8px 6px}
.btn-ghost{display:flex; align-items:center; gap:8px}
.btn-ghost.small{padding:6px 10px; font-size:13px}
.btn-ghost .dot{width:8px; height:8px; border-radius:50%; background:#666}
.btn-ghost .dot.ok{background:#20d97a}
.btn-ghost .dot.off{background:#666}
.claim-glow{ text-shadow:none; }
body[data-winner="meow"] #btn-claim.claim-glow{
  text-shadow:0 0 10px rgba(255,138,25,.85), 0 0 22px rgba(255,138,25,.55);
}
body[data-winner="woof"] #btn-claim.claim-glow{
  text-shadow:0 0 10px rgba(17,197,216,.90), 0 0 22px rgba(17,197,216,.55);
}
.btn[disabled], .btn:disabled{
  opacity:.55; cursor:not-allowed; filter:grayscale(.35);
  box-shadow:none !important; text-shadow:none !important;
}

/* Dock */
.dock{
  display:grid; gap:12px; width:min(1180px,94vw);
  margin:12px auto 0; padding:14px 16px; border-radius:16px;
  background:rgba(0,0,0,.40); border:1px solid var(--border); backdrop-filter: blur(8px);
}
.dock-row.top{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px}
.winner{display:flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.06); font-weight:700}
.winner .dot{width:8px; height:8px; border-radius:50%; background:#666}
body[data-winner="meow"] .winner .dot{background:var(--meow)}
body[data-winner="woof"] .winner .dot{background:var(--woof)}
.roundbox{display:flex; flex-direction:column; gap:4px; justify-self:center; text-align:center}
.roundbox .dim{opacity:.8}
.rline.small{font-size:12px; color:var(--muted)}
.top-actions{display:flex; gap:10px; align-items:center; justify-self:end}
/* --- Top Dock extras (moved from inline) --- */
.dock .roundbox .rline.big { font-size:22px; font-weight:800; letter-spacing:.2px; }
.dock .roundbox .tag { margin-left:8px; font-weight:700; opacity:.85; }
.claim-wrap { display:flex; flex-direction:column; align-items:center; }
.claim-subtxt{
  margin-top:6px; font-size:12px; line-height:18px; height:18px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.75;
}
/* 旧“Claim ends …”那行如果还在页面，可隐藏；若你已在HTML删除，此条可不写 */
#deadline { display:none; }
/* 为右侧两颗按钮预留与 subtxt 等高的空间，避免 Claim 被“顶上去” */
#btn-activity, #btn-trade { margin-bottom:24px; }

.dock-row.kpis{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; align-items:center; }
.chip{
  position:relative; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03); font-weight:700; box-shadow:0 10px 36px rgba(0,0,0,.35);

  /* FIX: 为右侧小箭头预留空间，避免覆盖数字 */
  padding-right: 2.25rem;
}
.chip .label{font-size:12px; color:#cbd5e1}
.chip strong{font-size:18px; white-space:nowrap;} /* FIX: 避免与按钮换行重叠 */
.chip.meow{box-shadow:0 10px 36px var(--meow-glow)}
.chip.woof{box-shadow:0 10px 36px var(--woof-glow)}
.chip .mini-open{
  /* FIX: 右侧垂直居中，不再压住数字 */
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; display:grid; place-items:center;
  border:none; background:transparent; color:#cbd5e1; border-radius:8px;
  font-size:12px; cursor:pointer; opacity:.85; z-index:1;
}
.chip .mini-open:hover{opacity:1; background:rgba(255,255,255,.06)}
.dock-row.meta{display:grid; grid-template-columns:1fr auto; align-items:center}
.status{display:flex; gap:8px; align-items:center; justify-self:end}
.net{display:flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.35); border:1px solid var(--border); font-size:13px}
.net.small{padding:5px 9px; font-size:12px}
.net .dot{width:8px; height:8px; border-radius:50%; background:#666}
.net .dot.ok{background:#20d97a}
.net .dot.warn{background:#e6b800}
.my-claim{display:flex; gap:10px; align-items:center}
.my-claim.hidden{display:none}

/* ===== Arena (21:9 外框) ===== */
.arena{display:grid; place-items:center; margin:24px auto 8px; width:min(1180px,94vw)}
.arena-inner{
  position:relative; width:100%; aspect-ratio:21/9;
  border-radius:16px; border:1px solid var(--border); background:rgba(0,0,0,.35);
  overflow:hidden;


  padding: 0;
}
.arena-hint{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.hint-title{font-size: clamp(18px,2vw,24px); font-weight:800; margin-bottom:6px}
.hint-sub{color:var(--muted); font-size:14px}

/* ===== Battle —— 四边留白 = 中间间距 ===== */
.battle{
  position:absolute;                 /* 直接铺满父容器内容区 */
  inset: var(--arena-gap);           /* 四边留白 = --arena-gap */
  display:grid; 
  grid-template-columns: 38fr 62fr;
  gap: var(--arena-gap);
}

.battle__left,.battle__right{ min-height:0; border-radius:16px; }

/* 左侧面板 */
.battle__left{
  display:flex; flex-direction:column; gap:12px;
  padding:12px; background:rgba(255,255,255,.06); backdrop-filter:blur(6px);
  margin:0;
}

/* 右侧图片面板（去掉 figure 默认外边距） */
.battle__right{ position:relative; overflow:hidden; background:#0b0f14; margin:0; }
.battle figure{ margin:0; }

.battle__right img{ width:100%; height:100%; object-fit:cover; display:none; }
.b-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:.1em; opacity:.5; }

.b-metric{ display:flex; flex-direction:column; gap:6px; }
.b-metric__title{ font-size:14px; opacity:.85; }
.b-bars{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center; }
.b-bars > div{
  position:relative; min-height:8px; border-radius:999px; overflow:visible;
  background:linear-gradient(90deg,#ff9f40,#ff6a00);
  width:0%; transition:width .5s ease;
}

/* 百分比在条外侧（配合 data-val），颜色跟随 side */
.b-bars>div::after{
  content:attr(data-val);
  position:absolute; top:50%; left:calc(100% + 10px); transform:translateY(-50%);
  font-size:11px; line-height:1; font-weight:700; opacity:.95; white-space:nowrap;
  color:currentColor; text-shadow:0 1px 2px rgba(0,0,0,.25); pointer-events:none;
}
.b-bars>div[data-side="meow"]{ color: var(--meow); }
.b-bars>div[data-side="woof"]{ color: var(--woof); }

#bar-A-woof,#bar-H-woof,#bar-P-woof,#bar-L-woof,#bar-R-woof{
  background:linear-gradient(90deg,#00e5ff,#00bcd4);
}

.b-comment{ margin-top:8px; opacity:.9; font-size:14px; }

@media (max-width:900px){
  .battle{ grid-template-columns:1fr; }
}

/* Four cards */
.under-avatars{
  width:min(1947px,94vw);
  margin:6px auto 18px;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:16px; align-items:stretch;
}
/* Make grid items fill the row height so Recap == Panel */
.under-avatars > .card{
  height:100%;
  display:flex;           /* allow internal layout without overflow issues */
  flex-direction:column;
}
.card{
  background:rgba(0,0,0,.45); border:1px solid var(--border); border-radius:18px; padding:14px 20px;
  min-width:0; max-width:100%; overflow:auto;
}
.card header{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.card h2{margin:0; font-size:16px; letter-spacing:.3px}
.card .mini{width:20px; height:20px}
.card.meow{box-shadow: 0 10px 36px var(--meow-glow)}
.card.woof{box-shadow: 0 10px 36px var(--woof-glow)}

.recap.card{ padding:14px 20px; }
/* Hide Recap prize/burn rows until data is ready (JS will unhide) */
#row-meow-prize, #row-meow-burn,
#row-woof-prize, #row-woof-burn{ display:none; }
.recap-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.recap-head .left{display:flex; gap:10px; align-items:center}
.recap-head h3{margin:0; font-size:16px}
.selector{display:flex; gap:6px; align-items:center}
.b-head-right .selector{display:flex;align-items:center;gap:8px}
.b-head-right .badge{display:inline-flex;align-items:center;gap:.35em}
.selector select{padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:rgba(0,0,0,.25); color:var(--text); font-size:13px}
.nav.small{padding:6px 10px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text); cursor:pointer}
.recap-row{display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px; padding:6px 8px; border:1px dashed var(--border); border-radius:12px; background:rgba(255,255,255,.02); margin-bottom:8px}
.recap-row .label{color:#cbd5e1; font-size:13px}
.recap-row .value{display:flex; gap:8px; align-items:center; font-weight:700; }
.recap-row .value .time{color:var(--muted); font-size:12px}
.badge{padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800; border:1px solid var(--border); background:rgba(255,255,255,.06)}
.badge.won{background:rgba(32,217,122,.25); border-color:rgba(32,217,122,.35); }
.badge.lost{opacity:.75}
.badge.pending{opacity:.7}
.tiny{font-size:12px; opacity:.9; text-decoration:none; color:#cbd5e1}
.tiny:hover{opacity:1; text-decoration:underline}

.kv{list-style:none; margin:6px 0 10px; padding:0; display:grid; gap:8px}
.kv li{display:grid; grid-template-columns: 1fr auto 24px; align-items:center; gap:10px; padding:8px 10px; border:1px dashed var(--border); border-radius:12px; background:rgba(255,255,255,.02)}
.kv li span{color:#cbd5e1; font-size:13px}
.kv li strong{font-weight:800}
.ext{width:24px; height:24px; display:grid; place-items:center; cursor:pointer; user-select:none; border-radius:8px; opacity:.85}
.ext:hover{opacity:1; background:rgba(255,255,255,.06)}
.links{display:flex; gap:10px; padding:4px 4px 0}
.links .soft{font-size:13px; color:var(--muted)}
.links .soft:hover{color:#fff}

/* Details */
.details{display:grid; grid-template-columns:1fr 1fr; gap:20px; width:min(1180px,94vw); margin:8px auto 30px}
.details h3{margin:0 0 8px; font-size:16px}
.details ol{margin:0 0 10px 18px; font-size:12.5px}
.details p{ font-size:12.5px; line-height:1.45; }
.details .muted{color:var(--muted); font-size:12.5px}
.explorer-select{display:flex; flex-direction:column; gap:6px; margin:6px 0}
.explorer-select select{padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:rgba(0,0,0,.25); color:var(--text); font-size:13px}
.explorer-select label{
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  text-decoration:none;
}

/* Footer */
.site-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,6vw,56px) 28px; color:var(--muted)
}
.site-footer .right a{color:var(--muted); text-decoration:none; margin-left:14px}
.site-footer .right a:hover{color:#fff}
.site-footer .right .x{font-weight:800; letter-spacing:.02em; font-size:18px; line-height:1; display:inline-block; transform: translateY(1px);}

/* Contact modal */
.modal{position:fixed; inset:0; z-index:60; display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px)}
.modal-card{
  position:relative; z-index:1; width:min(560px,92vw); margin:8vh auto 0;
  background:rgba(0,0,0,.55); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 20px 80px rgba(0,0,0,.5);
  padding:18px 16px;
}
.modal-card h3{margin:0 0 10px; font-size:18px; font-weight:800}
.modal-close{
  position:absolute; top:8px; right:10px; border:1px solid var(--border); background:transparent;
  color:var(--text); border-radius:10px; width:32px; height:32px; cursor:pointer;
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px}
.block{display:block; margin-bottom:10px}
.input,.textarea{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:rgba(0,0,0,.25); color:var(--text);
}
.input::placeholder,.textarea::placeholder{color:#8a8f95}
.form-actions{display:flex; gap:10px; align-items:center; margin-top:8px}
.form-note{margin-top:8px}
.muted{color:var(--muted); font-size:12px}
.botcheck{display:none}
.turnstile-wrap{margin:8px 0}

/* Responsive */
@media (max-width: 1180px){
  .under-avatars{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 720px){
  .under-avatars{grid-template-columns: 1fr;}
  .card { font-size: clamp(12px, 4vw, 16px); }
}
@media (max-width: 980px){
  .dock{gap:10px}
  .dock-row.top{grid-template-columns:1fr; gap:10px}
  .dock-row.kpis{grid-template-columns:1fr 1fr;}
  .dock-row.meta{grid-template-columns:1fr}
  .arena{width:min(760px,96vw)}
  .details{grid-template-columns:1fr}
}

/* —— Battle 行为提示（A/H/P/L/R 行） —— */
.b-metric{
  position: relative;
  padding: 4px 6px;
  border-radius: 10px;
  cursor: pointer;                     /* 光标手型 */
  transition: background .18s ease, box-shadow .18s ease, transform .05s ease;
}
.b-metric:hover{
  background: rgba(255,255,255,.04);   /* 悬停微底色 */
}
.b-metric:active{
  transform: translateY(1px);          /* 点击有按压感 */
}
.b-metric.on{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08),
              0 0 0 1px rgba(255,255,255,.06);   /* 选中高亮 */
  background: rgba(255,255,255,.03);
}

/* 右侧小“▸”提示：默认很淡，悬停/选中更明显，不会挡住进度条 */
.b-metric::after{
  content: "▸";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #cbd5e1;
  opacity: .20;
  pointer-events: none;
}
.b-metric:hover::after,
.b-metric.on::after{ opacity: .55; }

/* 悬停时条内数字更清晰一点 */
.b-metric:hover .b-bars > div::after{ opacity: .95; }

/* 键盘可达性：Tab 过去时给明确的描边 */
.b-metric:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}

/* === Round spin pill (battle) – compact + site glass style === */
.round-spin{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* 更小的体积 */
  padding: 3px 9px 3px 10px;
  border-radius:12px;

  /* 与全站一致的“玻璃+高光” */
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    rgba(0,0,0,.35);
  box-shadow:
    0 10px 36px rgba(0,0,0,.35),            /* 外部阴影（与 .chip 一致） */
    inset 0 1px 0 rgba(255,255,255,.18),    /* 顶部高光线 */
    inset 0 -2px 0 rgba(0,0,0,.45);         /* 底部内阴影 */
  backdrop-filter: blur(2px);
}

.round-spin::before{
  /* 顶部柔光带，跟你页面其它胶囊一致 */
  content:"";
  position:absolute; left:8px; right:40px; top:2px; height:36%;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none; opacity:.85;
}

.round-spin__label{ font-size:12px; color:var(--text); opacity:.9; }
.round-spin__val{ font-weight:800; font-size:16px; color:var(--text); letter-spacing:.2px; }

/* 右侧上下箭头胶囊，也用站内的玻璃质感 */
.round-spin__arrows{
  display:flex; flex-direction:column; gap:2px; margin-left:6px;
  padding:2px 3px; border-radius:8px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.30));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.45);
}
.round-spin__arrows button{
  width:14px; height:11px; line-height:11px;
  font-size:10px; font-weight:700; padding:0; border:0;
  background: transparent; color:var(--text); cursor:pointer; border-radius:3px;
  text-shadow:0 1px 1px rgba(0,0,0,.6);
}
.round-spin__arrows button:hover{ background: rgba(255,255,255,.07); }
.round-spin__arrows button:active{ transform: translateY(1px); }