@import url('./tokens.css');

* { box-sizing: border-box; }
body.bws-site { background: var(--bws-bg); color: var(--bws-ink); }
.bws-shell { width: min(100% - 32px, 760px); margin: 0 auto; padding: 32px 0 64px; }
.bws-card { background: var(--bws-paper); border: 1px solid var(--bws-border); border-radius: var(--bws-radius); padding: clamp(20px, 4vw, 40px); box-shadow: 0 8px 24px rgba(22,22,22,.05); }
.bws-hero-card { margin-top: 8vh; }
.bws-eyebrow { margin: 0 0 8px; color: var(--bws-muted); font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1, h2 { line-height: 1.15; }
h1 { margin: 0 0 16px; font-size: clamp(2rem, 7vw, 3.75rem); }
h2 { margin-top: 0; font-size: 1.25rem; }
p, li { font-size: 1rem; }
.bws-muted, .bws-small { color: var(--bws-muted); }
.bws-small { font-size: .875rem; }
.bws-row { display: flex; gap: 16px; align-items: center; }
.bws-row-between { justify-content: space-between; }
.bws-member-line { margin: 4px 0 12px; }
.bws-team-badge { display: inline-flex; min-height: 40px; align-items: center; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--bws-ink); font-weight: 800; }
.bws-team-badge[data-team='black'] { color: #fff; background: var(--bws-black-team); }
.bws-team-badge[data-team='white'] { color: var(--bws-ink); background: var(--bws-white-team); }
.bws-score-panel { display: grid; gap: 4px; margin: 24px 0; padding: 24px 0; border-top: 1px solid var(--bws-border); border-bottom: 1px solid var(--bws-border); }
.bws-label { color: var(--bws-muted); font-size: .875rem; }
.bws-big-score { display: block; font-size: clamp(4rem, 16vw, 7rem); line-height: .95; font-variant-numeric: tabular-nums; }
.bws-actions { display: grid; gap: 12px; margin: 20px 0; }
.bws-button, .bws-link-button, .bws-text-link { font: inherit; }
.bws-button, .bws-link-button { min-height: var(--bws-control-min); display: inline-flex; justify-content: center; align-items: center; padding: 12px 18px; border: 2px solid var(--bws-ink); border-radius: 12px; text-decoration: none; font-weight: 800; cursor: pointer; }
.bws-button:focus-visible, .bws-link-button:focus-visible, .bws-text-link:focus-visible, input:focus-visible { outline: 4px solid #e1b800; outline-offset: 3px; }
.bws-button-dark { color: #fff; background: var(--bws-ink); }
.bws-button-light, .bws-link-button { color: var(--bws-ink); background: #fff; }
.bws-button-line { color: #fff; border-color: var(--bws-line); background: var(--bws-line); }
.bws-link-button { min-height: 48px; padding: 8px 12px; }
.bws-text-link { color: var(--bws-ink); font-weight: 700; }
.bws-status { min-height: 1.5em; margin: 12px 0 0; }
.bws-debug-panel { margin-top: 20px; padding: 16px; border: 1px dashed #777; border-radius: 10px; background: #f7f7f7; }
.bws-debug-panel h2 { margin: 0; font-size: 1rem; }
.bws-debug-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.bws-debug-actions .bws-button { min-height: 44px; padding: 8px; font-size: .875rem; }
.bws-debug-panel textarea { display: block; width: 100%; min-height: 190px; padding: 10px; border: 1px solid var(--bws-border); border-radius: 8px; background: #fff; color: var(--bws-ink); font: .75rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: none; overflow-wrap: anywhere; }
.bws-team-score-row { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 20px 0; font-variant-numeric: tabular-nums; }
.bws-team-score-row strong { font-size: 2.5rem; }
.bws-team-score-large > div { display: grid; gap: 4px; text-align: center; }
.bws-board-preview { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--bws-border); }
.bws-active-match { margin: 16px 0; padding: 16px; border: 2px solid var(--bws-ink); border-radius: 12px; }
.bws-receipt { text-align: center; }
.bws-qr-frame { width: min(300px, 80vw); aspect-ratio: 1; display: grid; place-items: center; margin: 16px auto; border: 12px solid #fff; outline: 1px solid var(--bws-border); background: #fff; }
.bws-qr-frame canvas, .bws-qr-frame img { max-width: 100%; height: auto; }
.bws-short-code { display: block; font-size: clamp(2rem, 9vw, 4rem); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.bws-code-form { margin-top: 24px; }
.bws-code-form label { display: block; margin-bottom: 8px; font-weight: 800; }
.bws-inline-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
input { width: 100%; min-height: var(--bws-control-min); padding: 12px 14px; border: 2px solid var(--bws-ink); border-radius: 12px; font: inherit; font-size: 1.1rem; text-transform: uppercase; }
.bws-preview { margin-top: 20px; padding: 18px; border: 2px solid var(--bws-ink); border-radius: 12px; }
.bws-scan-panel { display: grid; gap: 10px; }
.bws-scan-panel video { width: 100%; min-height: 220px; background: #111; border-radius: 12px; object-fit: cover; }
.bws-history-list { display: grid; gap: 12px; margin: 20px 0; }
.bws-history-item { padding: 16px; border: 1px solid var(--bws-border); border-radius: 12px; }
.bws-history-item p { margin: 4px 0; }
.bws-board-columns { display: grid; gap: 24px; margin-top: 28px; }
.bws-board-columns ol { padding-left: 28px; }
.bws-board-columns li { padding: 8px 0; border-bottom: 1px solid var(--bws-border); }
.bws-entry-list { display: grid; gap: 16px; margin-top: 24px; }
.bws-entry-card { padding: 20px; border: 1px solid var(--bws-border); border-radius: 12px; }
.bws-entry-card h2 { margin-bottom: 0; }
.bws-entry-team-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bws-status-badge { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border: 1px solid var(--bws-border); border-radius: 999px; color: var(--bws-muted); font-size: .875rem; font-weight: 700; white-space: nowrap; }
.bws-readable-list { padding-left: 24px; }
.bws-readable-list li { margin: 12px 0; }
.bws-footer { display: flex; justify-content: center; gap: 10px; padding: 20px 16px 40px; font-size: .875rem; }
.bws-footer a { color: var(--bws-ink); }
.bws-skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10; padding: 12px; background: #fff; color: #000; }
.bws-skip-link:focus { left: 8px; }
.bws-skeleton { overflow: hidden; position: relative; background: #e8e5de; border-radius: 8px; }
.bws-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: bws-shimmer 1.2s infinite; }
.bws-skeleton-title { width: 60%; height: 34px; margin-bottom: 20px; }
.bws-skeleton-line { width: 85%; height: 18px; }
.bws-skeleton-score { width: 35%; height: 96px; margin: 24px 0; }
@keyframes bws-shimmer { to { transform: translateX(100%); } }
@media (min-width: 620px) { .bws-inline-form, .bws-actions { grid-template-columns: repeat(2, 1fr); } .bws-board-columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .bws-entry-card .bws-row-between { align-items: flex-start; flex-direction: column; } .bws-entry-team-actions { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bws-debug-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bws-skeleton::after { animation: none; } * { scroll-behavior: auto !important; } }