.demo-badge {
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:5px 10px;
  border:1px solid #be901f66;
  border-radius:6px;
  background:#fff4ca;
  color:#705411;
  font-size:.8125rem;
  font-weight:700;
  line-height:1.4;
  white-space:nowrap
}
.arena-activity {
  overflow:hidden;
  padding:22px 0 18px;
  background:linear-gradient(110deg,#fff2b4,#fff8df 60%,#ffedab);
  border-bottom:1px solid #e8cc75
}
.activity-heading,.activity-heading>div {
  display:flex;
  align-items:center;
  gap:12px
}
.activity-heading { justify-content:space-between }
.activity-heading h2 { font-size:1.25rem; letter-spacing:-.02em }
.ticker-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:98px;
  gap:8px;
  padding:6px 10px;
  background:#fffdf7;
  color:var(--ink);
  border:1px solid #d9bf70;
  border-radius:9px;
  font-size:.875rem;
  font-weight:650
}
.ticker-toggle [aria-hidden] { width:14px; text-align:center }
.activity-disclosure { color:#67572b; font-size:.875rem; margin-top:3px }
.activity-footnote { color:#6b5d37; font-size:.75rem; line-height:1.5; margin-top:8px }
.ticker-window { margin-top:12px; overflow:hidden }
.ticker-track { display:flex; width:max-content; animation:arena-marquee 76s linear infinite }
.ticker-list {
  display:flex;
  gap:14px;
  min-width:100vw;
  list-style:none;
  margin:0;
  padding:4px 14px 4px 0
}
.ticker-item {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:12px;
  width:360px;
  padding:16px 18px;
  border:1px solid #dec98f;
  border-radius:13px;
  background:var(--paper);
  box-shadow:0 3px 7px #8b690810
}
.ticker-initial {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex-shrink:0;
  color:#fff4ba;
  background:#087055;
  border:2px solid #d6b651;
  border-radius:50%;
  font-weight:750
}
.ticker-content { min-width:0; flex:1 }
.ticker-title { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.875rem }
.ticker-time { font-size:.75rem; font-weight:400; color:#65716b; white-space:nowrap }
.ticker-detail { font-size:.8125rem; line-height:1.5; margin-top:3px; color:#5a6b63; white-space:nowrap }
.ticker-result { font-size:.8125rem; line-height:1.5; color:#366050; margin-top:3px; white-space:nowrap }
.ticker-result strong { font-size:1.0625rem; color:#087153; margin:0 2px }
.is-paused .ticker-track,.is-hidden .ticker-track,.ticker-window:hover .ticker-track { animation-play-state:paused }
@keyframes arena-marquee { to { transform:translateX(-50%) } }

.community {
  background:radial-gradient(ellipse at 95% 15%,#f7dfa744,transparent 55%),#fffaf0;
  border-bottom:1px solid #e9dfc7
}
.community-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px }
.community .eyebrow { color:#987015 }
.community h2 em { color:var(--emerald) }
.community-disclosure { max-width:65ch; color:#6d6b5c; font-size:.875rem; line-height:1.55; margin-top:18px }
.review-grid { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px) / 3); gap:20px; margin-top:30px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; padding-bottom:12px }
.review-grid::-webkit-scrollbar { display:none }
.review-card {
  display:flex;
  flex-direction:column;
  padding:25px;
  background:#fff;
  border:1px solid #e2decc;
  border-top:3px solid #d5b358;
  border-radius:18px;
  box-shadow:0 9px 22px #3f4a2710;
  min-width:0;
  scroll-snap-align:start
}
.review-profile { display:flex; align-items:center; gap:13px }
.review-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid #e2d09a; flex-shrink:0 }
.review-nickname { font-size:1rem; letter-spacing:0; line-height:1.4; font-weight:750 }
.review-date { display:block; font-size:.8125rem; color:#73786d; margin-top:2px }
.review-quote { margin:22px 0 24px; font-size:1rem; line-height:1.7; letter-spacing:0; color:#294b40; text-wrap:pretty }
.review-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:15px; border-top:1px solid #eeece4 }
.review-game { font-size:.8125rem; color:#087052; font-weight:700; padding:4px 8px; border-radius:5px; background:#eef6ef }
.review-example { font-size:.75rem; color:#757666 }
.review-controls { display:flex; justify-content:space-between; align-items:center; margin-top:8px }
.review-controls>div { display:flex; gap:10px }
.review-controls button { display:grid; place-items:center; width:44px; height:44px; border:1px solid #c9bd96; border-radius:50%; color:var(--emerald); background:#fffdf7; font-size:1.3rem }
.review-controls button:disabled { opacity:.35; cursor:default }
.review-position { font-size:.875rem; color:#626d62 }

@media(max-width:800px) {
  .community-heading { align-items:flex-start; flex-direction:column; gap:18px }
  .community-disclosure { margin-top:12px }
  .review-grid { grid-auto-columns:calc(66% - 10px); margin-top:24px }
}
@media(max-width:600px) {
  .arena-activity { padding-block:14px }
  .activity-heading { gap:8px }
  .activity-heading>div { gap:8px }
  .activity-heading h2 { font-size:1.1rem }
  .ticker-toggle { min-width:89px; padding-inline:8px; font-size:.8125rem }
  .activity-disclosure { font-size:.8125rem; margin-top:6px; max-width:calc(100% - 36px) }
  .ticker-item { width:326px; padding:14px 12px; gap:10px }
  .ticker-initial { width:32px; height:32px; font-size:.875rem }
  .ticker-detail { font-size:.75rem }
  .ticker-result { font-size:.75rem }
  .ticker-result strong { font-size:1rem }
  .activity-footnote { max-width:calc(100% - 36px) }
  .community h2 { font-size:2.15rem }
  .review-grid { grid-auto-columns:90%; gap:14px }
  .review-card { padding:20px }
  .review-quote { font-size:1rem; line-height:1.6; margin-block:20px }
}
@media(max-width:360px) {
  .ticker-item { width:280px; min-height:138px }
  .ticker-title { flex-wrap:wrap; gap:1px }
  .ticker-time { width:100% }
  .ticker-detail,.ticker-result { white-space:normal }
}
@media(prefers-reduced-motion:reduce) {
  .ticker-window { overflow-x:auto; scrollbar-width:thin }
  .ticker-track { animation:none }
  .ticker-toggle { display:none }
  .ticker-list[aria-hidden] { display:none }
  .review-grid { scroll-behavior:auto }
}