:root {
  --black: #0b0d0c;
  --black-2: #141714;
  --panel: #1b1e1b;
  --panel-2: #232722;
  --cream: #f1eadb;
  --cream-2: #d8cfbc;
  --green: #88d337;
  --green-dark: #4f8d19;
  --yellow: #f0c83e;
  --red: #dc5143;
  --muted: #9b9f96;
  --line: #3c413b;
  --shadow: 12px 12px 0 rgba(0, 0, 0, .48);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--cream);
  background-color: var(--black);
  background-image:
    linear-gradient(180deg, rgba(5, 7, 6, .34) 0%, rgba(5, 7, 6, .6) 58%, rgba(5, 7, 6, .82) 100%),
    linear-gradient(90deg, rgba(3, 6, 4, .38), transparent 30%, transparent 70%, rgba(3, 6, 4, .38)),
    url("bowling-hall-led.webp");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(136, 211, 55, .026) 25%, transparent 25%) 0 0 / 36px 36px,
    linear-gradient(315deg, rgba(136, 211, 55, .02) 25%, transparent 25%) 18px 18px / 36px 36px;
}
body > * { position: relative; z-index: 1; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app-shell { min-height:100vh; }
.auth-screen { min-height:100vh; display:grid; place-items:center; padding:28px 18px; }
.auth-card { width:min(100%, 520px); padding:38px; background:linear-gradient(145deg, rgba(31,36,31,.97), rgba(12,15,12,.98)); border:1px solid rgba(191,214,171,.38); border-left:8px solid var(--green); box-shadow:var(--shadow), 0 28px 90px rgba(0,0,0,.62); }
.auth-brand { display:inline-flex; margin-bottom:42px; }
.auth-card h1 { font-size:clamp(2.8rem, 10vw, 4.8rem); }
.auth-intro { margin:18px 0 28px; color:#aeb5aa; line-height:1.55; }
.auth-form { display:grid; gap:18px; }
.auth-form .primary-button { margin-top:8px; justify-content:center; }
.auth-error { margin:22px 0 0; padding:12px 14px; border:1px solid #814b45; border-left:5px solid var(--red); color:#ff9c91; background:rgba(96,29,23,.24); }

.topbar {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1480px) / 2));
  background: rgba(8, 10, 9, .84);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--cream);
  border-bottom: 1px solid #424840;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  position: relative;
  z-index: 3;
}
.topbar::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 32%;
  height: 5px;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.brand { display:flex; align-items:center; gap:14px; color:var(--cream); text-decoration:none; }
.brand > span:last-child { display:flex; flex-direction:column; line-height:1; }
.brand strong { font:900 1.48rem/1 Impact, "Arial Narrow", sans-serif; letter-spacing:.08em; }
.brand small { color:var(--green); font-size:.68rem; font-weight:800; letter-spacing:.27em; margin-top:7px; }
.main-nav { display:flex; align-self:stretch; align-items:stretch; margin-left:auto; }
.nav-tab { min-width:120px; padding:0 18px; border:0; border-left:1px solid #343a34; background:transparent; color:#aeb3a9; font-weight:800; text-transform:uppercase; letter-spacing:.055em; position:relative; transition:.16s; }
.nav-tab:last-child { border-right:1px solid #343a34; }
.nav-tab::after { content:""; position:absolute; left:18px; right:18px; bottom:0; height:4px; background:var(--green); transform:scaleX(0); transition:.18s; }
.nav-tab:hover { color:var(--cream); background:rgba(255,255,255,.035); }
.nav-tab.active { color:var(--green); background:rgba(136,211,55,.07); }
.nav-tab.active::after { transform:scaleX(1); }
.top-actions { display:flex; align-items:center; gap:18px; }
.user-chip { display:flex; flex-direction:column; min-width:90px; }
.user-chip > span { color:var(--cream); font-weight:850; line-height:1.1; }
.user-chip small { margin-top:5px; color:var(--green); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.logout-button { min-height:38px; padding:8px 12px; font-size:.72rem; }
.save-status { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.86rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.save-status > span { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(136,211,55,.75); }
.icon-button { width:44px; height:44px; border:1px solid #4b5249; background:#20241f; color:var(--cream); border-radius:0; display:grid; place-items:center; transition:.15s; }
.icon-button:hover { background:var(--green); color:var(--black); border-color:var(--green); transform:translate(-2px,-2px); box-shadow:3px 3px 0 #416f1a; }
.icon-button svg, .secondary-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

main { max-width:1480px; min-height:calc(100vh - 86px); margin:0 auto; padding:48px 24px 90px; }
.setup-card {
  max-width:1080px;
  margin:0 auto;
  padding:42px 46px;
  background:linear-gradient(145deg, rgba(31,36,31,.94), rgba(17,20,17,.95));
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(191,214,171,.32);
  box-shadow:var(--shadow), 0 24px 80px rgba(0,0,0,.48);
  position:relative;
  overflow:hidden;
}
.setup-card::before { content:""; position:absolute; inset:0 auto 0 0; width:8px; background:var(--green); }
.section-heading, .tournament-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.eyebrow { margin:0 0 9px; color:var(--green); font:800 .78rem/1 "DM Sans"; letter-spacing:.19em; }
h1, h2 { font-family:Impact, "Arial Narrow", sans-serif; text-transform:uppercase; letter-spacing:.045em; }
h1 { margin:0; max-width:800px; font-size:clamp(2.35rem, 5vw, 4.8rem); line-height:.98; color:var(--cream); text-shadow:4px 4px 0 rgba(0,0,0,.42); }
h2 { margin:0; font-size:1.55rem; color:var(--cream); }
.step-badge { padding:10px 13px; border:1px solid #5a6157; color:var(--cream-2); font:800 .72rem/1 "DM Sans"; letter-spacing:.12em; background:#111310; box-shadow:3px 3px 0 var(--green-dark); }
.setup-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:18px; margin:38px 0 40px; }
.field { display:flex; flex-direction:column; gap:9px; }
.field > span { font-size:.79rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#b8bcae; }
input, select {
  width:100%;
  border:1px solid #555c52;
  border-radius:0;
  background:#101210;
  color:var(--cream);
  min-height:50px;
  padding:12px 14px;
  outline:none;
}
select { color-scheme:dark; }
input::placeholder { color:#73796f; }
input:focus, select:focus { border-color:var(--green); box-shadow:0 0 0 2px rgba(136,211,55,.22); }
.teams-header { display:flex; justify-content:space-between; align-items:end; gap:20px; padding-top:30px; border-top:1px solid var(--line); }
.teams-header p { margin:6px 0 0; color:var(--muted); font-size:.92rem; }
.secondary-button, .danger-button {
  min-height:44px;
  padding:10px 15px;
  border:1px solid #60675d;
  background:#20241f;
  color:var(--cream);
  border-radius:0;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:.035em;
  transition:.15s;
}
.secondary-button:hover { background:var(--cream); color:var(--black); border-color:var(--cream); transform:translate(-2px,-2px); box-shadow:4px 4px 0 #5e625b; }
.danger-button { color:#ff7769; border-color:#814b45; }
.danger-button:hover { background:var(--red); color:white; border-color:var(--red); }
.team-inputs { display:grid; grid-template-columns:1fr; gap:12px; margin-top:22px; }
.team-row { position:relative; padding-left:45px; }
.team-row span { position:absolute; left:0; top:0; bottom:0; display:grid; place-items:center; width:45px; background:#2d332c; color:var(--green); border-right:1px solid #50574d; font:800 .76rem/1 "DM Sans"; }
.team-fields { display:grid; grid-template-columns:minmax(180px, .8fr) minmax(240px, 1.2fr); gap:8px; }
.team-row input { font-weight:700; }
.team-row .team-players-input { color:#bac1b4; font-weight:500; }
.setup-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:38px; padding-top:30px; border-top:1px solid var(--line); }
.toggle-row { display:flex; align-items:center; gap:13px; cursor:pointer; }
.toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.toggle { width:46px; height:25px; background:#565a54; position:relative; flex:0 0 auto; transition:.2s; }
.toggle::after { content:""; position:absolute; width:17px; height:17px; left:4px; top:4px; background:var(--cream); transition:.2s; }
.toggle-row input:checked + .toggle { background:var(--green-dark); }
.toggle-row input:checked + .toggle::after { transform:translateX(21px); background:var(--green); }
.toggle-row > span:last-child { display:flex; flex-direction:column; }
.toggle-row strong { font-size:.92rem; }
.toggle-row small { color:var(--muted); margin-top:4px; font-size:.76rem; }
.primary-button {
  min-height:54px;
  border:0;
  border-radius:0;
  padding:14px 24px;
  background:var(--green);
  color:var(--black);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  box-shadow:7px 7px 0 var(--green-dark);
  display:inline-flex;
  align-items:center;
  gap:18px;
  transition:.15s;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}
.primary-button:hover { transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--green-dark); }
.primary-button:active { transform:translate(4px,4px); box-shadow:3px 3px 0 var(--green-dark); }
.primary-button.compact { min-height:44px; padding:10px 16px; box-shadow:4px 4px 0 var(--green-dark); clip-path:none; font-size:.8rem; }

.tournament { width:100%; }
.tournament-head { align-items:end; margin-bottom:26px; padding-bottom:24px; border-bottom:1px solid #41473f; }
.tournament-head h1 { font-size:clamp(2.3rem,5vw,4.6rem); }
.tournament-meta { margin:11px 0 0; color:#abb0a5; font-weight:600; }
.tournament-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.champion-banner {
  margin:22px 0 28px;
  min-height:102px;
  display:flex;
  align-items:center;
  gap:19px;
  padding:20px 27px;
  color:var(--black);
  background:var(--green);
  border:1px solid #b5ef70;
  box-shadow:10px 10px 0 #355f14;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.champion-banner .trophy { font-size:3rem; filter:grayscale(1) contrast(1.6); }
.champion-banner div { display:flex; flex-direction:column; }
.champion-banner small { color:#25450f; font-weight:900; letter-spacing:.2em; }
.champion-banner strong { font:700 2.3rem/1.15 "Oswald"; text-transform:uppercase; margin-top:3px; }
.champion-banner .celebration { margin-left:auto; font-size:2.4rem; color:#294b10; }
.bracket-shell { width:100%; overflow-x:auto; padding:6px 2px 32px; scrollbar-color:var(--green-dark) #171a17; }
.bracket {
  min-width:900px;
  display:flex;
  gap:38px;
  align-items:stretch;
  padding:24px;
  background:rgba(20,23,20,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(191,214,171,.29);
  box-shadow:var(--shadow), 0 24px 80px rgba(0,0,0,.46);
  position:relative;
}
.bracket::before { content:""; position:absolute; top:0; left:0; width:110px; height:5px; background:var(--green); }
.round { flex:1 0 244px; display:flex; flex-direction:column; min-width:244px; }
.round-title { min-height:62px; border-bottom:3px solid var(--cream); margin-bottom:20px; position:relative; }
.round-title::after { content:""; position:absolute; left:0; bottom:-3px; width:42%; height:3px; background:var(--green); }
.round-title small { color:var(--green); font-size:.7rem; letter-spacing:.16em; font-weight:800; }
.round-title h2 { font-size:1.3rem; margin-top:5px; }
.matches { flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:23px; }
.match { position:relative; border:1px solid #555c52; background:#111311; box-shadow:7px 7px 0 rgba(0,0,0,.4); }
.match::after { content:""; position:absolute; right:-9px; top:50%; width:8px; height:2px; background:#667062; }
.round:last-child .match::after { display:none; }
.match-number { position:absolute; left:-1px; top:-20px; color:#858b80; font-size:.65rem; font-weight:800; letter-spacing:.12em; }
.competitor { display:grid; grid-template-columns:minmax(0,1fr) 60px; align-items:center; min-height:50px; }
.competitor + .competitor { border-top:1px solid #3e443d; }
.competitor.winner { background:linear-gradient(90deg, rgba(136,211,55,.25), rgba(136,211,55,.06)); }
.competitor.winner .team-name { color:#b9f174; }
.competitor.winner .team-name::before { content:"✓"; color:var(--green); margin-right:8px; font-weight:900; }
.team-name { padding:10px 11px; display:flex; min-width:0; flex-direction:column; justify-content:center; font-weight:800; white-space:nowrap; overflow:hidden; }
.team-name strong { overflow:hidden; text-overflow:ellipsis; }
.team-name small { margin-top:3px; overflow:hidden; text-overflow:ellipsis; color:#8f978b; font-size:.67rem; font-weight:600; }
.team-name.placeholder { color:#777d74; font-weight:500; font-style:italic; }
.competitor.winner .team-name small { color:#92bd61; }
.score { width:60px; height:100%; min-height:60px; border:0; border-left:1px solid #42483f; border-radius:0; padding:4px; text-align:center; font-weight:900; font-size:1.06rem; background:#252a24; color:var(--cream); }
.score:focus { position:relative; z-index:2; box-shadow:inset 0 0 0 2px var(--green); }
.score:disabled { color:#666b63; background:#1a1d1a; cursor:not-allowed; }
.advance-hint { padding:8px 10px; background:#332c16; color:var(--yellow); font-size:.72rem; font-weight:700; border-top:1px solid #625629; }
.third-place { max-width:540px; margin:34px auto 0; padding:27px; background:#1c201c; border:1px solid #4d554b; box-shadow:9px 9px 0 rgba(0,0,0,.42); position:relative; }
.third-place::before { content:"SIDE MISSION"; position:absolute; right:18px; top:17px; color:#62685f; font-size:.65rem; font-weight:900; letter-spacing:.16em; }
.third-place > div:first-child { margin-bottom:26px; }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; padding:12px 17px; border:1px solid #66705f; border-left:5px solid var(--green); border-radius:0; background:#161916; color:var(--cream); font-weight:700; box-shadow:8px 8px 0 rgba(0,0,0,.5); transition:.22s; z-index:10; }
.toast.show { opacity:1; transform:translate(-50%, 0); }

.leaderboard { width:100%; }
.leaderboard-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid #41473f; }
.leaderboard-layout { display:grid; grid-template-columns:minmax(280px, .72fr) minmax(520px, 1.5fr); gap:28px; align-items:start; }
.score-entry-card, .ranking-card { background:linear-gradient(145deg, rgba(31,36,31,.95), rgba(17,20,17,.96)); border:1px solid rgba(191,214,171,.32); box-shadow:var(--shadow), 0 24px 80px rgba(0,0,0,.42); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); }
.score-entry-card { padding:28px; border-left:7px solid var(--green); }
.score-entry-card h2 { margin-bottom:24px; }
.score-entry-card .field { margin-bottom:17px; }
.score-entry-card .primary-button { width:100%; justify-content:center; margin-top:7px; }
.entry-note { margin:23px 0 0; color:#8f968b; font-size:.78rem; line-height:1.55; }
.ranking-card { padding:28px; }
.ranking-title { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.live-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #4d5849; color:#b8c0b2; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.live-badge i { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(136,211,55,.72); }
.ranking-table-wrap { overflow-x:auto; }
.ranking-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.ranking-table th { padding:10px 14px; color:#828a7f; border-bottom:1px solid #4b5248; font-size:.7rem; text-align:left; text-transform:uppercase; letter-spacing:.13em; }
.ranking-table th:first-child, .ranking-table td:first-child { width:92px; text-align:center; }
.ranking-table th:last-child, .ranking-table td:last-child { width:128px; text-align:right; }
.ranking-table td { height:46px; padding:9px 14px; border-bottom:1px solid #353b34; color:#d8ddcf; font-weight:700; }
.ranking-table tr:last-child td { border-bottom:0; }
.ranking-table .rank { color:#8f978b; font:700 1rem/1 "Oswald",sans-serif; }
.ranking-table .points { color:var(--green); font:700 1.08rem/1 "Oswald",sans-serif; }
.ranking-table .ranking-action { width:110px; text-align:right; }
.ranking-delete { display:inline-grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid #714640; background:rgba(107,45,39,.18); color:#ff5f52; }
.ranking-delete svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ranking-delete:hover, .ranking-delete:focus-visible { border-color:#ff8276; background:rgba(154,55,47,.28); color:#ffd0cb; }
.ranking-table .empty-row td { color:#62685f; font-weight:500; }
.ranking-table tr.podium { background:linear-gradient(90deg, rgba(136,211,55,.13), transparent); }
.ranking-table tr.podium .rank { color:var(--yellow); font-size:1.16rem; }
.ranking-table tr.podium:first-child { background:linear-gradient(90deg, rgba(240,200,62,.18), rgba(136,211,55,.04)); }

.archive { width:100%; }
.archive-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.file-button { cursor:pointer; }
.file-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.archive-group { margin-top:28px; padding:28px; background:linear-gradient(145deg, rgba(31,36,31,.95), rgba(17,20,17,.96)); border:1px solid rgba(191,214,171,.32); box-shadow:var(--shadow), 0 24px 80px rgba(0,0,0,.42); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); }
.archive-group-title { display:flex; align-items:end; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid #42493f; }
.archive-group-title > span { color:#8f978b; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.archive-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:20px; }
.archive-empty { grid-column:1/-1; padding:32px; border:1px dashed #4a5148; color:#858d81; text-align:center; }
.archive-card { border:1px solid #4a5147; background:rgba(12,15,12,.78); }
.archive-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px; border-bottom:1px solid #343a33; }
.archive-card-head h3 { margin:0; color:var(--cream); font:800 1.15rem/1.15 Impact, "Arial Narrow", sans-serif; text-transform:uppercase; letter-spacing:.045em; }
.archive-card-head p { margin:7px 0 0; color:#858d81; font-size:.76rem; }
.archive-card-badge { flex:0 0 auto; padding:7px 9px; background:rgba(136,211,55,.14); color:var(--green); border:1px solid rgba(136,211,55,.35); font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.archive-card-body { padding:18px; }
.archive-results { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.archive-result { padding:11px; background:#20251f; border-left:3px solid #50584e; }
.archive-result:first-child { border-color:var(--yellow); }
.archive-result small { display:block; color:#7f877b; font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.archive-result strong { display:block; margin-top:5px; color:#e4e8dc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.archive-card details { border-top:1px solid #343a33; }
.archive-card summary { padding:13px 18px; color:#aeb5aa; cursor:pointer; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.archived-lists { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 18px 18px; }
.mini-ranking h4 { margin:0 0 9px; color:var(--green); font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; }
.mini-ranking ol { margin:0; padding-left:25px; color:#b9c0b5; }
.mini-ranking li { padding:4px 0; }
.mini-ranking li span { float:right; color:var(--green); font-weight:800; }
.archive-muted { margin:0; color:#747c71; font-size:.78rem; }
.match-history { margin:0; padding:0; list-style:none; }
.match-history li { padding:7px 0; border-bottom:1px solid #30362f; color:#b9c0b5; font-size:.76rem; line-height:1.35; }
.match-history li:last-child { border-bottom:0; }
.match-history small { display:block; color:#747c71; font-size:.61rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.archive-delete { border:0; background:transparent; color:#bd6a61; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.archive-delete:hover { color:#ff8276; }

.admin { width:100%; }
.admin-layout { display:grid; grid-template-columns:minmax(300px,.7fr) minmax(580px,1.5fr); gap:28px; align-items:start; }
.user-management-card { min-width:0; }
.user-list { display:grid; gap:10px; }
.user-row { display:grid; grid-template-columns:minmax(150px,1.2fr) minmax(170px,1fr) auto; gap:12px; align-items:center; padding:14px; border:1px solid #424a40; background:#111411; }
.user-identity { min-width:0; }
.user-identity strong, .user-identity span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-identity span { margin-top:4px; color:#7f887b; font-size:.75rem; }
.user-role-select { min-height:42px; padding:8px 10px; }
.user-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.user-actions button { min-height:36px; padding:7px 9px; font-size:.68rem; }
.user-status { display:inline-block; margin-top:7px; padding:3px 6px; color:var(--green); border:1px solid rgba(136,211,55,.35); font-size:.62rem; font-weight:900; text-transform:uppercase; }
.user-status.blocked { color:#ff8d82; border-color:#814b45; }
.read-only-notice { margin:0 0 24px; padding:12px 15px; background:rgba(240,200,62,.12); border:1px solid rgba(240,200,62,.4); color:#f5d86f; font-weight:700; }
.viewer-only-hidden { display:none !important; }
button:disabled, input:disabled, select:disabled { cursor:not-allowed; opacity:.58; }

@media (max-width: 800px) {
  body { background-attachment:scroll; background-position:center top; }
  .topbar { min-height:72px; padding:12px 16px 0; flex-wrap:wrap; gap:10px 14px; }
  .main-nav { order:3; width:100%; min-height:46px; margin:0; }
  .nav-tab { flex:1; min-width:0; padding:0 9px; font-size:.76rem; }
  .save-status { display:none; }
  main { padding:28px 14px 64px; }
  .setup-card { padding:30px 24px; }
  .setup-grid { grid-template-columns:1fr 1fr; }
  .field-wide { grid-column:1/-1; }
  .team-inputs { grid-template-columns:1fr; }
  .team-fields { grid-template-columns:1fr; }
  .team-row span { align-items:start; padding-top:19px; }
  .setup-footer, .tournament-head, .leaderboard-head { align-items:stretch; flex-direction:column; }
  .primary-button { width:100%; justify-content:center; }
  .tournament-actions { justify-content:flex-start; }
  .bracket { padding:18px; gap:28px; }
  .leaderboard-layout { grid-template-columns:1fr; }
  .archive-actions { justify-content:flex-start; }
  .archive-list { grid-template-columns:1fr; }
  .admin-layout { grid-template-columns:1fr; }
  .user-row { grid-template-columns:1fr; }
  .user-actions { justify-content:flex-start; }
  .user-chip { display:none; }
}
@media (max-width: 520px) {
  .brand strong { font-size:1.16rem; }
  .brand small { font-size:.56rem; }
  .setup-grid { grid-template-columns:1fr; }
  .field-wide { grid-column:auto; }
  .teams-header { align-items:stretch; flex-direction:column; }
  .section-heading { align-items:flex-start; }
  .step-badge { display:none; }
  .toggle-row small { display:none; }
  h1 { font-size:2.5rem; }
  .ranking-card, .score-entry-card { padding:21px; }
  .ranking-table th:first-child, .ranking-table td:first-child { width:64px; }
  .ranking-table th:last-child, .ranking-table td:last-child { width:92px; }
  .archived-lists, .archive-results { grid-template-columns:1fr; }
  .archive-group { padding:21px; }
  .auth-card { padding:30px 24px; }
}

@media print {
  :root { --cream:#111; --green:#467c17; }
  body { background:white; color:#111; }
  .topbar, .setup-card, .tournament-actions, .score-entry-card, .leaderboard-head .danger-button, .toast { display:none !important; }
  main { max-width:none; padding:0; }
  .tournament-head h1, .round-title h2, .third-place h2 { color:#111; text-shadow:none; }
  .tournament-meta { color:#444; }
  .bracket-shell { overflow:visible; }
  .bracket { min-width:0; border:0; padding:8px; gap:14px; background:white; box-shadow:none; }
  .round { min-width:0; flex-basis:auto; }
  .match { background:white; box-shadow:none; border-color:#999; }
  .team-name { color:#111; }
  .score { border:0; background:white; color:#111; }
  .third-place { background:white; box-shadow:none; }
  .leaderboard-layout { grid-template-columns:1fr; }
  .ranking-card { background:white; color:#111; border:0; box-shadow:none; }
  .ranking-table td { color:#111; }
}