/* Tonight's round: the ring, dartboard, ALPHA terminal, your corner */

.ring {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: var(--edge);
  box-shadow: 10px 10px 0 var(--ink);
  padding-top: 22px;
  background: var(--ink);
}
/* ring ropes: red, chalk, blue */
.ring::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22px;
  background: linear-gradient(to bottom,
    var(--red) 0 6px, var(--ink) 6px 8px,
    var(--chalk) 8px 14px, var(--ink) 14px 16px,
    var(--blue) 16px 22px);
}

.corner {
  display: grid;
  gap: 1rem;
  align-content: start;
  justify-items: center;
  padding: clamp(1rem, 3vw, 1.75rem);
}
.corner--randy { background: var(--chalk); border-right: var(--edge); }
.corner--alpha { background: var(--navy); color: var(--chalk); }

.corner__top {
  justify-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}
.corner__who { font-family: var(--f-slab); font-size: var(--t-xl); line-height: 1; }
.corner--randy .corner__who { color: var(--red); }
.corner--alpha .corner__who { color: var(--banana); }
.corner__method {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

/* ---------- dartboard ---------- */
.board-wrap { width: 100%; max-width: 430px; }
#board { display: block; width: 100%; height: auto; overflow: visible; }
#board .lbl { font-family: var(--f-mono); font-weight: 700; font-size: 12.5px; fill: var(--chalk); letter-spacing: 0.02em; }
#board .lbl.is-hit { fill: var(--banana); }
#board .wedge { transition: fill 0.2s; }
#board .wedge.is-hit { animation: hit 0.9s steps(2, jump-none) 3; }
@keyframes hit { 50% { fill: var(--banana); } }
#board.is-wobble { animation: wobble 0.45s ease-out; transform-origin: 50% 50%; }
@keyframes wobble { 30% { transform: rotate(1.4deg) scale(0.99); } 60% { transform: rotate(-0.8deg); } }

.throwlog {
  justify-self: stretch;
  min-height: 3.4em;
  padding: 0.55rem 0.75rem;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.throwlog b { color: var(--banana); }
.linkish {
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  background: transparent;
  border: 1px solid var(--banana);
  color: var(--banana);
  font: 700 var(--t-xs)/1.5 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.linkish:hover { background: var(--banana); color: var(--ink); }

/* ---------- ALPHA terminal ---------- */
.term {
  justify-self: stretch;
  border: var(--edge);
  border-color: #000;
  background: #07113F;
  box-shadow: inset 0 0 0 1px var(--navy-2), 0 0 0 1px #000;
}
.term__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  background: var(--ink);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: #B9B09A;
}
.term__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.term__bar i:nth-child(2) { background: var(--banana); }
.term__bar i:nth-child(3) { background: var(--chalk); }
.term__bar span { min-width: 0; margin-left: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term__body {
  height: clamp(300px, 34vw, 392px);
  overflow-y: auto;
  padding: 0.9rem 1rem 1.1rem;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 1.62;
  color: #DCE3FF;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
}
.term__body .ln { white-space: pre-wrap; overflow-wrap: anywhere; }
.term__body .dim { color: #7F8FD6; }
.term__body .ok { color: var(--banana); }
.term__body .warn { color: var(--red-lite); }
.term__body .buy {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.1rem 0.45rem;
  background: var(--banana);
  color: var(--ink);
  font-weight: 700;
}
.term__body .smug { color: var(--chalk); font-style: italic; }
.caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  vertical-align: -0.18em;
  background: var(--banana);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- your corner ---------- */
.you {
  max-width: var(--max);
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  display: grid;
  gap: 1.25rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  background: var(--ink);
  color: var(--chalk);
  border: var(--edge);
  box-shadow: 10px 10px 0 var(--red);
}
.you__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; }
.you__head h3 { color: var(--banana); font-size: var(--t-2xl); }
.you__head p { color: #D9CFA8; }

.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.5rem;
}
.chipbtn {
  position: relative;
  padding: 0.5rem 0.3rem;
  background: var(--ink-2);
  color: var(--chalk);
  border: 2px solid #5E5436;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
}
.chipbtn:hover { border-color: var(--banana); }
.chipbtn[aria-checked="true"] { background: var(--banana); color: var(--ink); border-color: var(--banana); transform: translateY(-2px); }
.chipbtn .mk { position: absolute; top: -7px; right: -5px; display: flex; gap: 2px; }
.chipbtn .mk i { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; }
.chipbtn .mk .r { background: var(--red); }
.chipbtn .mk .a { background: var(--blue); }

.chips.is-shake { animation: shake 0.42s ease-in-out; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.notice {
  padding: 0.6rem 0.9rem;
  background: var(--red);
  color: var(--chalk);
  font-weight: 700;
  border: 2px solid var(--chalk);
}

.you__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.fine { font-family: var(--f-mono); font-size: var(--t-xs); color: #B9B09A; }

.result { display: grid; gap: 1rem; }
.result__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.res {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  background: var(--ink-2);
  border: 2px solid #5E5436;
  font-variant-numeric: tabular-nums;
}
.res__who { font-stretch: 62%; font-weight: 850; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.12em; color: #D9CFA8; }
.res__tk { font-family: var(--f-mono); font-weight: 700; font-size: var(--t-lg); }
.res__ret { font-family: var(--f-slab); font-size: 2rem; line-height: 1; color: var(--banana); }
.res__ret.neg { color: var(--red-lite); }
.res--empty .res__ret { color: #8A7F5E; }
.res__bar { position: relative; height: 10px; background: #3A3322; }
.res__bar span { position: absolute; top: 0; bottom: 0; left: 50%; background: var(--banana); transition: width 0.7s cubic-bezier(.2, .8, .2, 1), left 0.7s cubic-bezier(.2, .8, .2, 1); }
.res__bar span.neg { background: var(--red); }
.res__bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--chalk); }
.res--win { border-color: var(--banana); box-shadow: 4px 4px 0 var(--banana); }
.res--win::before {
  content: attr(data-win);
  position: absolute;
  top: -0.8rem;
  right: 0.7rem;
  padding: 0.1rem 0.45rem;
  background: var(--banana);
  color: var(--ink);
  font: 700 var(--t-xs)/1.4 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.verdict { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.verdict__line { font-family: var(--f-slab); font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.05; color: var(--chalk); text-wrap: balance; }
.verdict__tag { font-family: var(--f-mono); font-size: var(--t-xs); color: #B9B09A; text-transform: uppercase; letter-spacing: 0.08em; }
html[lang="zh-CN"] .verdict__line { font-family: var(--f-cjk-display); font-weight: 900; }

@media (max-width: 860px) {
  .ring { grid-template-columns: minmax(0, 1fr); }
  .corner--randy { border-right: 0; border-bottom: var(--edge); }
  .result__cards { grid-template-columns: 1fr; }
}