:root { --bg:#f5f5f5; --card:#fff; --line:#ddd; --ink:#111; --muted:#555; --primary:#b48cff; --soft:#d9c1ff; }
* { box-sizing:border-box; }
body { margin:0; padding:16px; background:var(--bg); color:var(--ink); font-family:Arial,sans-serif; }
main { max-width:1400px; margin:auto; display:grid; gap:16px; }
h1,h2,p { margin:0 0 12px; }
h1 { font-size:clamp(24px,3vw,38px); }
h2 { font-size:22px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.muted { color:var(--muted); line-height:1.5; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.stack { display:grid; gap:12px; }
label { display:grid; gap:7px; color:var(--muted); font-weight:700; }
input,select,textarea { width:100%; min-width:0; border:1px solid var(--line); border-radius:10px; padding:12px; font:inherit; color:var(--ink); background:white; }
textarea { min-height:160px; resize:vertical; }
button,.button { min-height:52px; border:0; border-radius:12px; padding:12px 16px; font:700 18px Arial,sans-serif; background:var(--soft); color:var(--ink); cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; text-align:center; }
.primary { background:var(--primary); color:#fff; }
.danger { background:#efb2b2; }
.clock-correction { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:end; }
.clock-correction label { min-width:0; }
#clock_current { background:#e3e3e3; color:#666; cursor:default; }
.lineup-editor-row { display:grid; grid-template-columns:80px minmax(0,1fr) auto; gap:10px; align-items:end; }
input[type="checkbox"] { width:auto; }
[hidden] { display:none!important; }
.reset-dialog { width:min(640px,94vw); border:2px solid #b42330; border-radius:16px; padding:24px; background:#fff; color:#191919; }
.reset-dialog::backdrop { background:#0009; }
.reset-confirm { background:#b42330; color:#fff; }
button:disabled { background:#ddd; color:#888; cursor:not-allowed; }
.hidden { display:none!important; }
#message { min-height:24px; color:#a22232; white-space:pre-wrap; }
.notice { background:#faf6ff; border:1px solid #eadbff; padding:12px; border-radius:10px; }
.score-card { text-align:center; min-height:220px; display:flex; flex-direction:column; justify-content:center; gap:16px; overflow-wrap:anywhere; }
.blue { background:#223a5e; color:white; }
.red { background:#582a34; color:white; }
.score { font-size:clamp(64px,10vw,150px); line-height:1; font-weight:700; font-variant-numeric:tabular-nums; }
.team-name { font-size:clamp(22px,3vw,40px); font-weight:700; }
.logo { width:70px; height:70px; object-fit:contain; margin:auto; }
.clock { font-size:clamp(38px,5vw,76px); font-variant-numeric:tabular-nums; font-weight:700; }
.operator-head { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.score-button { min-height:76px; font-size:30px; }
.field-card { display:grid; gap:10px; }
.field-card .clock { font-size:32px; }
code { overflow-wrap:anywhere; }
.viewer { background:var(--tv-background,#101826); color:#f7f8fb; min-height:100vh; padding:20px; }
.viewer main { max-width:none; min-height:calc(100vh - 40px); grid-template-rows:auto minmax(0,1fr); }
.tv-head { display:grid; grid-template-columns:minmax(0,1fr) clamp(90px,14vw,220px) minmax(0,1fr); gap:20px; background:var(--tv-header-bg,#1b2434); color:var(--tv-header-text,#aebacf); border:1px solid #394152; border-radius:20px; padding:24px; }
.tv-head .tv-meta { grid-column:1; grid-row:1; min-width:0; }
.tv-head .status-slot { grid-column:3; grid-row:1; justify-self:end; width:min(100%,320px); }
.tournament-logo-slot { grid-column:2; grid-row:1; position:relative; min-width:0; }
.tournament-logo-slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.logo-preview-slot { height:110px; }
.logo-preview-slot img { max-width:220px; height:100%; object-fit:contain; }
input[type="color"] { height:48px; padding:4px; cursor:pointer; }
.tv-meta { display:grid; gap:10px; text-align:left; }
.tv-meta .muted { color:var(--tv-header-text,#aebacf); font-size:clamp(18px,2vw,30px); overflow-wrap:anywhere; }
.tv-clockline { display:flex; align-items:center; gap:24px; flex-wrap:wrap; font-size:clamp(20px,2.5vw,36px); }
.status-slot { display:flex; align-items:stretch; }
.status-banner { width:100%; display:flex; justify-content:center; align-items:center; text-align:center; padding:10px; background:#842e39; border-radius:18px; font-size:clamp(18px,2.5vw,36px); font-weight:700; visibility:hidden; }
.status-banner.visible { visibility:visible; }
.viewer .score-card { border-radius:20px; padding:26px; }
.viewer .blue { background:var(--tv-team-a-bg,#223a5e); color:var(--tv-team-a-text,#ffffff); }
.viewer .red { background:var(--tv-team-b-bg,#582a34); color:var(--tv-team-b-text,#ffffff); }
.viewer #score_a { background:var(--tv-score-a-bg,#223a5e); color:var(--tv-score-a-text,#ffffff); border-radius:12px; }
.viewer #score_b { background:var(--tv-score-b-bg,#582a34); color:var(--tv-score-b-text,#ffffff); border-radius:12px; }
.viewer #clock { background:var(--tv-clock-bg,#1b2434); color:var(--tv-clock-text,#f7f8fb); border-radius:10px; }
.viewer .status-banner { background:var(--tv-pause-bg,#842e39); color:var(--tv-pause-text,#ffffff); }
.viewer .score { font-size:clamp(120px,20vw,340px); }
.viewer .team-name { font-size:clamp(28px,4vw,68px); }
.connection { position:fixed; bottom:8px; right:12px; background:#8c2834; color:white; padding:6px 12px; border-radius:6px; z-index:5; }
.paste-dialog { width: min(800px,90vw); max-height:85vh; overflow:auto; border:2px solid #ccc; border-radius:16px; padding:24px; }
.paste-dialog textarea { width:100%; }
.paste-dialog pre { white-space:pre-wrap; max-height:25vh; overflow:auto; }
.paste-dialog::backdrop { background:rgba(0,0,0,.55); }
.overlay-page { background:transparent; margin:0; padding:20px; }
.overlay-board { width:720px; max-width:100%; color:white; font-size:22px; }
.overlay-top { background:#1b2434; display:flex; align-items:center; gap:16px; padding:8px 14px; font-size:16px; }
.overlay-top .clock { font-size:26px; margin-left:auto; }
.overlay-row { display:grid; grid-template-columns:36px minmax(0,1fr) 72px; align-items:center; gap:8px; padding:8px 14px; }
.overlay-row .logo { width:30px; height:30px; }
.overlay-row .team-name { grid-column:2; grid-row:1; font-size:22px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.overlay-row .score { grid-column:3; grid-row:1; font-size:30px; text-align:center; }
.overlay-status { background:#842e39; text-align:center; font-weight:700; padding:6px; }
@media(max-width:800px) { .three,.four { grid-template-columns:repeat(2,minmax(0,1fr)); } .tv-head { padding:14px; gap:10px; grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr); } .tv-clockline { gap:8px; } .viewer .clock { font-size:clamp(24px,5vw,40px); } .viewer .status-banner { font-size:16px; overflow-wrap:anywhere; } }
@media(max-width:520px) { body { padding:8px; } .form-grid,.help-grid { grid-template-columns:1fr; } .card { padding:12px; } .score-card { min-height:170px; } .viewer .score { font-size:24vw; } .viewer .team-name { font-size:24px; } .viewer .score-card { padding:12px; } button,.button { font-size:16px; } }