@font-face{font-family:'JaceBeleren';src:url('/assets/fonts/JaceBeleren-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
/* Design tokens copied from mtgproxy.net (dark default; light only when data-theme="light") */
:root{
  --bg-primary:#1a1b1e; --bg-secondary:#2b2d31; --bg-tertiary:#313338; --bg-hover:#23252a;
  --text-primary:#ffffff; --text-secondary:rgba(255,255,255,.7); --text-tertiary:rgba(255,255,255,.5); --text-disabled:rgba(255,255,255,.38);
  --border-primary:#9333ea; --border-secondary:rgba(255,255,255,.1); --line:rgba(255,255,255,.16);
  --interactive-hover:rgba(255,255,255,.05);
  --accent-primary:#9333ea; --accent-hover:#7c3aed; --accent-text:#c084fc;
  --status-success:#22c55e; --status-warning:#eab308; --status-error:#ef4444;
  --shadow-lg:0 10px 15px rgba(0,0,0,.3);
  --input-dark:#0d0e10;
  --tip-bg:#0d0e10; --tip-ink:#ffffff;
}
:root[data-theme="light"]{
  --bg-primary:#f5f5f5; --bg-secondary:#e8e8e8; --bg-tertiary:#ececec; --bg-hover:#d9d9d9;
  --text-primary:rgba(0,0,0,.87); --text-secondary:rgba(0,0,0,.6); --text-tertiary:rgba(0,0,0,.45); --text-disabled:rgba(0,0,0,.38);
  --border-primary:#9333ea; --border-secondary:rgba(0,0,0,.12); --line:rgba(0,0,0,.16);
  --interactive-hover:rgba(0,0,0,.04);
  --accent-primary:#7c3aed; --accent-hover:#a78bfa; --accent-text:#7c3aed;
  --status-success:#16a34a; --status-warning:#ca8a04; --status-error:#dc2626;
  --shadow-lg:0 4px 8px rgba(0,0,0,.15);
  --input-dark:#f0f0f0;
  --tip-bg:#1a1b1e; --tip-ink:#ffffff;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100%;background:var(--bg-primary);color:var(--text-primary);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;
  transition:background-color .3s ease,color .3s ease}
main{max-width:760px;margin:0 auto;padding:20px 16px 64px}
h1{font-family:'JaceBeleren',serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-primary);font-size:clamp(1.8rem,5vw,2.5rem);margin:0 0 6px;line-height:1.2}
.sub{color:var(--text-secondary);margin:0 0 22px}
.panel{position:relative;background:var(--bg-secondary);border:1px solid var(--border-secondary);border-radius:12px;padding:22px;box-shadow:var(--shadow-lg)}
.panel:has(.sharecorner){padding-top:56px} /* clears the Share corner button, rendered as part of the event page's own content */
.panelwrap{position:relative}
.panelwrap .panel{padding-top:56px} /* clears the corner button in .panelwrap so it never overlaps a heading */
.panelcorner{position:absolute;top:14px;z-index:3;margin:0;width:34px;height:34px;display:grid;place-items:center;color:var(--text-secondary);background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:8px;cursor:pointer;text-decoration:none;transition:all .2s ease}
.panelcorner:hover{color:var(--text-primary);background:var(--interactive-hover)}
.panelcorner:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.sharecorner{right:14px}
.archivecorner{right:56px} /* event-level actions, top right: Archive, Share */
.panelcorner svg{width:18px;height:18px}
.panelback{left:14px}
h2{font-weight:600;font-size:1.35rem;margin:0 0 6px}
.q{color:var(--text-secondary);margin:0 0 16px}
.progress{display:flex;gap:6px;margin-bottom:18px}
.progress span{flex:1;height:4px;border-radius:2px;background:var(--border-secondary);transition:background-color .2s ease}
.progress span.on{background:var(--accent-primary)}
textarea,input[type=number]{width:100%;font:inherit;font-size:14px;color:var(--text-primary);background:var(--input-dark);border:1px solid var(--border-secondary);border-radius:8px;padding:12px 14px;transition:all .2s ease}
textarea{min-height:170px;resize:vertical}
textarea:focus,input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-primary) 10%,transparent)}
.opts{display:grid;gap:10px}
.opts.subopts{margin-left:22px;padding-left:14px;border-left:2px solid var(--accent-primary)}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;font:inherit;color:var(--text-primary);background:transparent;
  border:1px solid var(--border-secondary);border-radius:8px;padding:12px 14px;cursor:pointer;transition:all .2s ease}
.opt:hover{border-color:var(--border-primary);background:var(--interactive-hover)}
.opt.sel{border-color:var(--accent-primary);background:color-mix(in srgb,var(--accent-primary) 14%,transparent)}
.opt b{font-weight:600}
.opt small{display:block;color:var(--text-secondary)}
.badge{min-width:24px;height:24px;border-radius:50%;background:var(--bg-tertiary);display:grid;place-items:center;font-size:.8rem;font-weight:600;flex:none;color:var(--text-primary)}
.opt.sel .badge{background:var(--accent-primary);color:#fff}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
button{font:inherit;cursor:pointer}
/* Unified button: transparent with a purple outline, fills purple on hover (mtgproxy.net) */
.btn{background:transparent;color:var(--text-primary);border:1px solid var(--border-primary);padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;transition:all .2s ease}
.nav .btn{min-width:120px}
.btn:hover:not(:disabled){background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}
.btn.ghost{border-color:var(--border-secondary)}
.btn.ghost:hover:not(:disabled){background:var(--interactive-hover);border-color:var(--border-primary);color:var(--text-primary)}
.btn:disabled{opacity:.5;cursor:default;background:var(--bg-tertiary);color:var(--text-disabled);border-color:var(--bg-tertiary)}
.btn:focus-visible,.opt:focus-visible,.pick:focus-visible,.tip:focus-visible,.score:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.addrow{display:flex;gap:8px}
.addrow input{flex:1;font:inherit;font-size:14px;color:var(--text-primary);background:var(--input-dark);border:1px solid var(--border-secondary);border-radius:8px;padding:12px 14px;transition:all .2s ease}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;min-height:40px}
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:8px;padding:6px 8px 6px 14px;font-size:14px}
.tag button{border:0;background:transparent;color:var(--text-secondary);font-size:1.1rem;line-height:1;padding:2px 6px;border-radius:6px;transition:all .2s ease}
.tag button:hover{color:var(--text-primary);background:var(--interactive-hover)}
.empty{color:var(--text-tertiary);font-size:.92rem;align-self:center}
/* A player's name, until you hover or focus it — then it swaps to "Drop" in place, same size, same click. */
.droppill-name,.droppill-drop{grid-area:1/1;display:flex;align-items:center;justify-content:center;white-space:nowrap;transition:opacity .15s ease}
.droppill-drop{opacity:0;font-weight:600;color:var(--text-secondary)}
.timerclock{font-size:1.3rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary);min-width:2.6em}
.timerclock.expired{color:var(--status-error)}
.timerclock.nolimit{font-size:.9rem;font-weight:400;color:var(--text-secondary)}
.tablesvg{display:block;width:100%;margin:0 auto}
.chair{cursor:pointer}
.chair rect{fill:var(--bg-tertiary);stroke:var(--border-secondary);stroke-width:2}
.across{display:none}
.chair.filled rect{fill:color-mix(in srgb,var(--accent-primary) 30%,var(--bg-secondary));stroke:var(--accent-primary)}
.chair.active rect{stroke:var(--accent-primary);stroke-width:4}
.chair:focus{outline:none}.chair:focus-visible rect{stroke:var(--text-primary);stroke-width:3}
.chair text{fill:var(--text-primary);font-size:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.woodtable{fill:var(--bg-tertiary);stroke:var(--border-primary);stroke-width:2}
.plank{stroke:var(--border-secondary);stroke-width:1.2;opacity:.7}
.chair .back{fill:none;stroke:var(--text-tertiary);stroke-width:3;stroke-linecap:round}
.chair.filled .back{stroke:var(--accent-primary)}
.seatpick{margin-top:14px}
.seatpick p{margin:0 0 8px;font-weight:500}
.seatpick .tags{margin-top:0}
.seatpick .tag{border:1px solid var(--border-secondary);cursor:pointer;padding:7px 14px;color:var(--text-primary);font:inherit;font-size:14px;transition:all .2s ease}
.seatpick .tag:hover{border-color:var(--border-primary)}
.seatpick .tag.here{border-color:var(--accent-primary);background:color-mix(in srgb,var(--accent-primary) 14%,transparent)}
.seatpick .tag small{color:var(--text-secondary);margin-left:4px}
.err{color:var(--status-error);margin:8px 0 0;min-height:1.2em;font-size:.92rem}

.tip{position:relative;border-bottom:1.5px dotted var(--text-tertiary);cursor:help}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  width:max-content;max-width:260px;background:var(--tip-bg);color:var(--tip-ink);border:1px solid var(--border-secondary);font-size:.84rem;font-weight:400;line-height:1.4;
  padding:8px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:20;white-space:normal;text-align:left;box-shadow:var(--shadow-lg)}
.tip:hover::after,.tip:focus::after{opacity:1}

.summary{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 6px}
.summary dt{color:var(--text-secondary)}
.summary dd{margin:0}

.round{margin-top:20px}
.round h3{font-weight:600;font-size:1.1rem;margin:0 0 8px;display:flex;justify-content:space-between;align-items:baseline}
.round h3 small{font-weight:400;color:var(--text-secondary);font-size:.85rem}
.pick{border:1px solid var(--border-secondary);background:transparent;color:var(--text-primary);border-radius:8px;padding:10px 12px;font-weight:600;font-size:14px;width:100%;transition:all .2s ease}
.pick:hover:not(:disabled):not(.won){border-color:var(--border-primary);background:var(--interactive-hover)}
.pick.won{background:var(--status-success);border-color:var(--status-success);color:#fff}
.pick.lost{opacity:.5}
.pick.drawn{background:color-mix(in srgb,var(--status-warning) 22%,transparent);border-color:var(--status-warning)}
.pick:disabled{cursor:default}
.scores{grid-column:1/-1;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}

/* Single-elimination bracket: a tree of matches nested outward from the earliest round, each pair's own
   match centered exactly between the two feeding it. Connector lines are drawn with plain borders on the
   pair/kids wrappers rather than computed pixel positions, so they stay correct at any bracket size. */
.bracket{display:flex;overflow-x:auto;padding:26px 20px 20px}
.bracketpair{display:flex;align-items:center}
.bracketkids{display:flex;flex-direction:column;position:relative;margin-right:28px}
.bracketkids>*{position:relative;margin:10px 0}
.bracketleaf{position:relative}
.bracketmatch{position:relative;width:188px}
.bracketround{position:absolute;top:-22px;left:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);white-space:nowrap}
/* A card row, Challonge-style: seed cell, name, score cell; the winner's score cell fills with the accent. */
.bpick,.pick.bpick{display:flex;align-items:stretch;width:100%;padding:0;border:0;border-radius:0;background:var(--bg-tertiary);color:var(--text-primary);font-size:13px;font-weight:500;text-align:left}
.bseed{flex:0 0 24px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg-primary) 70%,var(--bg-tertiary));color:var(--text-tertiary);font-size:11px;font-variant-numeric:tabular-nums}
.bname{flex:1;min-width:0;padding:7px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bscore{flex:0 0 30px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text-primary) 10%,var(--bg-tertiary));font-weight:700;font-variant-numeric:tabular-nums}
.pick.bpick:hover:not(:disabled){background:color-mix(in srgb,var(--text-primary) 6%,var(--bg-tertiary))}
.pick.bpick.won{background:var(--bg-tertiary);color:var(--text-primary);font-weight:700}
.pick.bpick.won .bscore{background:var(--accent-primary);color:#fff}
.pick.bpick.lost{opacity:.55}
.pick.bpick.drawn .bscore{background:color-mix(in srgb,var(--status-warning) 45%,var(--bg-tertiary))}
.bracketmatch.bye .byeslot,.bracketmatch.tbd .bname{color:var(--text-tertiary);font-style:italic}
.bracketmatch.tbd{opacity:.55}
.pd{grid-column:1/-1;text-align:center;color:var(--text-secondary);font-size:.85rem}

.tablewrap{overflow-x:auto;margin-top:8px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border-secondary);white-space:nowrap}
th{font-weight:600;color:var(--text-secondary);font-size:.88rem}
td.n{text-align:right} th.n{text-align:right}
tr.top td:first-child{color:var(--accent-text);font-weight:600}
.note{color:var(--text-secondary);font-size:.9rem;margin:8px 0 0}
/* Tags: small rounded badges, same shape as mtgproxy.net's type badges */
.pill{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:3px;font-size:11px;font-weight:500;line-height:1.5;vertical-align:middle;white-space:nowrap;text-decoration:none}
.pill[data-tip]{position:relative;cursor:help}
.pill[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  width:max-content;max-width:260px;background:var(--tip-bg);color:var(--tip-ink);border:1px solid var(--border-secondary);font-size:.84rem;font-weight:400;line-height:1.4;
  padding:8px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:20;white-space:normal;text-align:left;box-shadow:var(--shadow-lg)}
.pill[data-tip]:hover::after,.pill[data-tip]:focus::after{opacity:1}
a.pill.official{cursor:pointer}
a.pill.official:hover{filter:brightness(1.2)}
a.pill.official:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.pill[data-tip]::after{transition:none}}
.pill.official{background:color-mix(in srgb,var(--status-success) 20%,transparent);color:var(--status-success)}
.pill.house{background:color-mix(in srgb,var(--accent-primary) 22%,transparent);color:var(--accent-text)}
.tiepick .tag{cursor:pointer;color:var(--text-primary);font:inherit;font-size:14px;padding:7px 14px;transition:all .2s ease}
.tiepick .tag:hover{border-color:var(--border-primary)}
.tiepick .tag.sel{border-color:var(--accent-primary);background:color-mix(in srgb,var(--accent-primary) 14%,transparent)}
.tiepick .tag small{color:var(--text-secondary);margin-left:6px}
.pill.dropped{background:var(--bg-tertiary);color:var(--text-secondary)}
.champ{margin-top:18px;padding:14px;border-radius:8px;background:color-mix(in srgb,var(--accent-primary) 16%,transparent);border:1px solid var(--accent-primary);font-weight:600}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.endrow #new{margin-left:auto}
@media (prefers-reduced-motion: reduce){.tip::after,.btn,.opt,.pick,.score,body{transition:none}}
a.btn{display:inline-block;text-decoration:none;text-align:center}
.titlerow{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:20px;text-align:center}
h2 .count{font-size:.85rem;font-weight:400;color:var(--text-secondary);margin-left:10px}
.nav .btn:only-child{margin-left:auto}
/* Share codes */
.toplinks{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.toplinks .btn{height:44px;min-width:150px;padding:0 18px;justify-content:center;line-height:1}
.titlerow h1{margin:0}
.sub{text-align:center}
.notice{margin:0 0 14px;padding:10px 14px;border:1px solid var(--border-secondary);border-left:3px solid var(--accent-primary);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:.92rem}
.sharebox{margin:10px 0 14px;padding:14px 16px;border:1px solid var(--border-primary);border-radius:8px;background:color-mix(in srgb,var(--accent-primary) 8%,transparent)}
.sharetop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sharelabel{font-size:.78rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}
.sharecode{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.9rem;font-weight:700;letter-spacing:.18em;line-height:1.2}
.sharebtns{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.qrwrap{display:flex;justify-content:center;margin:10px 0 16px}
.qrcode{width:150px;height:150px;border-radius:8px;overflow:hidden;background:#fff}
.qrcode svg{display:block;width:100%;height:100%}
.sharebox .btn{padding:8px 14px}
.viewbanner{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:8px 12px;border:1px solid var(--border-secondary);border-radius:8px;background:var(--bg-tertiary);font-size:.9rem;flex-wrap:wrap}
.viewbanner a.btn{margin-left:auto;height:32px;padding:0 12px;font-size:.85rem}
.livedot{width:9px;height:9px;border-radius:50%;background:var(--text-disabled);flex:none}
.livedot.on{background:var(--status-success);box-shadow:0 0 0 3px color-mix(in srgb,var(--status-success) 25%,transparent)}
/* Buttons with a Lucide icon */
.btn.withicon{display:inline-flex;align-items:center;gap:8px}
.btn svg{width:16px;height:16px;flex:none}
.btn.square{flex-direction:column;justify-content:center;gap:6px;width:88px;height:88px;padding:0}
.btn.square svg{width:24px;height:24px}
/* Modal (layout after mtgproxy.net: blurred dark overlay, header with close button, full-screen on phones) */
.modal{position:fixed;inset:0;z-index:15000;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-content{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow:auto;background:var(--bg-primary);border:1px solid color-mix(in srgb,var(--accent-primary) 30%,transparent);border-radius:12px;box-shadow:0 24px 64px rgba(0,0,0,.9);animation:modalIn .18s ease-out}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border-secondary)}
.modal-header h3{margin:0;font-size:16px;font-weight:600}
.modal-close-btn{background:none;border:0;color:var(--text-primary);width:32px;height:32px;display:grid;place-items:center;border-radius:6px;cursor:pointer;transition:background .2s ease}
.modal-close-btn:hover{background:var(--bg-secondary)}
.modal-close-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.modal-close-btn svg{width:18px;height:18px}
.floatclose{position:absolute;top:10px;right:10px;z-index:2;background:var(--bg-primary)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.modal-body{padding:18px}
.modal-body p{margin:0 0 12px}
.modal-list{margin:0 0 14px;padding-left:20px;color:var(--text-secondary)}
.modal-list li{margin-bottom:6px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.modaltabs{display:flex;gap:20px;margin:-4px 0 16px;border-bottom:1px solid var(--border-secondary)}
.modaltab{background:none;border:0;padding:8px 2px;font:inherit;font-weight:600;font-size:.92rem;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease}
.modaltab:hover{color:var(--text-primary)}
.modaltab.on{color:var(--text-primary);border-bottom-color:var(--accent-primary)}
.modaltab:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.sharelabel{font-size:.78rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 6px}
.sharelabel:first-child{margin-top:0}
.sharerow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sharecode{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:2rem;font-weight:700;letter-spacing:.18em;line-height:1.2}
.linkfield{flex:1;min-width:0;font:inherit;font-size:13px;color:var(--text-primary);background:var(--input-dark);border:1px solid var(--border-secondary);border-radius:8px;padding:10px 12px}
.warn{display:flex;gap:10px;align-items:flex-start;margin:12px 0!important;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--status-warning) 12%,transparent);border:1px solid color-mix(in srgb,var(--status-warning) 35%,transparent);font-size:.88rem}
.warn svg{width:18px;height:18px;flex:none;color:var(--status-warning);margin-top:2px}
.btn.danger{color:var(--status-error);border-color:color-mix(in srgb,var(--status-error) 55%,transparent)}
.btn.danger:hover:not(:disabled){background:var(--status-error);border-color:var(--status-error);color:#fff}
body.modal-open{overflow:hidden}
/* Phones: a centered card, as mtgproxy.net does (95% wide, at most 95% of the visible height, over the dimmed page),
   not a full-screen takeover -- a one-line confirmation used to fill the whole screen. dvh follows the browser bars. */
@media (max-width:640px){.modal{padding:0 2.5vw}.modal-content{max-width:none;max-height:95vh;max-height:95dvh}.modal-header{padding:12px 16px}.modal-body{padding:16px}}
@media (prefers-reduced-motion:reduce){.modal-content{animation:none}}
.codefield{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.6rem;font-weight:700;letter-spacing:.25em;text-align:center;padding:12px}
.codefield::placeholder{color:var(--text-disabled);font-weight:400}
.codefield:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-primary) 10%,transparent)}
/* Title link and the Home screen */
.homelink{color:inherit;text-decoration:none}
.homelink:hover{color:var(--accent-text)}
.homelink:focus-visible{outline:2px solid var(--accent-primary);outline-offset:4px;border-radius:4px}
.hubsec{margin-top:18px}
.hubsec .sharelabel{margin:0 0 6px}
.hubcard{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;margin-top:8px;border:1px solid var(--border-secondary);border-radius:8px;background:var(--bg-tertiary)}
.hubmeta{display:flex;flex-direction:column;gap:2px;min-width:0} /* no flex:1 -- the card keeps its original shape; the buttons wrap below when they don't fit */
.hubmeta span{color:var(--text-secondary);font-size:.9rem}
/* four fixed lines on every Home card (name, format, players · round · status, tags), so all cards match in size */
.hubline{display:block;height:21px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubtags{display:flex;align-items:center;gap:6px;height:24px;margin-top:2px}
.hubactions{display:flex;align-items:center;gap:8px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em}
.pill.sharing{background:color-mix(in srgb,var(--status-success) 20%,transparent);color:var(--status-success);margin-left:0}
.pill.hosting{background:color-mix(in srgb,var(--accent-primary) 22%,transparent);color:var(--accent-text);margin-left:0}
button.pill{border:0;cursor:pointer;font:inherit;transition:filter .2s ease}
button.pill:hover{filter:brightness(1.2)}
button.pill:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
/* Draft name */
.field{width:100%;font:inherit;font-size:14px;color:var(--text-primary);background:var(--input-dark);border:1px solid var(--border-secondary);border-radius:8px;padding:12px 14px;transition:all .2s ease}
.field:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-primary) 10%,transparent)}
.optional{text-transform:none;letter-spacing:0;color:var(--text-tertiary)}
h2.afterfield{margin-top:22px}
.subline{color:var(--text-secondary);margin:-2px 0 12px}
.iconbtn{background:none;border:0;color:var(--text-secondary);width:28px;height:28px;display:inline-grid;place-items:center;border-radius:6px;cursor:pointer;vertical-align:middle;margin-left:6px;transition:all .2s ease}
.iconbtn:hover{background:var(--interactive-hover);color:var(--text-primary)}
.iconbtn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.iconbtn svg{width:16px;height:16px}
.sharename{font-weight:600;margin:0 0 12px!important}
.legalnote{margin:8px auto 0;max-width:560px;color:var(--text-tertiary);text-align:center} /* in the site footer's slot (site.js), centered under "Draft Wizard · © year" (page styles override ::slotted, so the centering has to be here) */
/* Legal & privacy */
.legaldoc h3{margin:20px 0 6px;font-size:1rem;font-weight:600}
.legaldoc h3:first-child{margin-top:8px}
.legaldoc p{margin:0 0 10px;color:var(--text-secondary);line-height:1.6}
.legaldoc a,.legalnote a{color:var(--accent-text)}
.legaldoc b{color:var(--text-primary);font-weight:600}



/* Square icon-only button, the same height as the text buttons beside it (Delete event's trash). */
.btn.iconsq{padding:0;width:46px;min-height:46px;align-self:stretch;display:inline-grid;place-items:center;flex:none}
.btn.iconsq svg{width:18px;height:18px}
.endrow #new + .iconsq{margin-left:0}
/* Press-and-hold confirm: a red fill sweeps across over --hold while it's held, and snaps back if let go. */
.holdbtn{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.holdbtn .holdfill{position:absolute;inset:0;width:0;background:var(--status-error);transition:width .2s ease-out}
.holdbtn.holding .holdfill{width:100%;transition:width var(--hold,5s) linear}
.holdbtn .holdlabel{position:relative}
.holdbtn.holding{color:#fff}
.btn.danger.holdbtn:hover:not(:disabled){background:transparent;color:var(--status-error)}
.btn.danger.holdbtn.holding:hover{color:#fff}

/* ---------- Event page: one design system ----------
   Every section is a closed card with the same 1px line (--line) and 10px corners; its header is the card's top row.
   Everything tappable inside is a filled 5px-corner box on --bg-tertiary, the same as the bracket's cards. Purple only
   ever means won or selected; every label (section headers, column heads, bracket round names) is the same gray. No zebra striping: rows are separated by the same 1px line as everything else. */
.round.fold,.roundclock{border:1px solid var(--line);border-radius:10px;margin-top:14px}
.round.fold{padding:0}
.foldlabel{display:flex;align-items:center;gap:6px;width:100%;margin:0;padding:12px 14px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:10px 10px 0 0;color:var(--text-tertiary);font:inherit;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;text-align:left;cursor:pointer;user-select:none;transition:color .15s ease}
.fold.shut>.foldlabel{border-bottom-color:transparent;border-radius:10px}
.foldlabel:hover{color:var(--text-secondary)}
.foldlabel:focus-visible{outline:2px solid var(--accent-primary);outline-offset:-2px}
.foldlabel svg{width:14px;height:14px;flex:none;opacity:.7}
.foldlabel svg:last-child{width:13px;height:13px;margin-left:auto;opacity:.5;transition:transform .15s ease}
.shut>.foldlabel svg:last-child{transform:rotate(-90deg)}
.foldsub{font-weight:400;text-transform:none;letter-spacing:0;font-size:12px;margin-left:4px}
.foldextra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px 0}
.foldbody{padding:14px}
.foldbody>.note.foldlead{margin-top:0}
.foldbody>.tags{margin-top:12px}
.foldbody .tablewrap{margin-top:0}
/* Previous rounds: the same card, nested inside Pairings */
/* The round clock: a card of its own above the sections */
/* Tables (pairings and standings): one 1px line between rows, none after the last */
th,td{border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
.foldbody th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary)}
.foldbody td{padding:8px 10px}
.eltable td{padding:6px 10px;vertical-align:middle}
.eltable td.elres{font-weight:600;color:var(--text-secondary)}
.eltable .elmuted{color:var(--text-tertiary)}
.eltable .elname{padding-left:20px;font-weight:600}
.eltable tr.elextra td{padding-top:0}
.eltable tr.elextra .scores{justify-content:flex-start}
.eltable tr.elextra .pd{text-align:left}
/* Tappable boxes: names in Pairings, cards in the Bracket, score choices, drop pills -- all the bracket's card style */
.pick.elpick{width:auto;min-width:100%;text-align:left;padding:7px 10px;border:0;border-radius:5px;background:var(--bg-tertiary)}
.pick.elpick:hover:not(:disabled){background:color-mix(in srgb,var(--text-primary) 6%,var(--bg-tertiary))}
.pick.elpick.won{background:var(--accent-primary);color:#fff}
.pick.elpick.lost{opacity:.55}
.pick.elpick.drawn{background:color-mix(in srgb,var(--status-warning) 30%,var(--bg-tertiary))}
.bracketbody{display:flex;flex-direction:column;border-radius:5px;overflow:hidden;background:var(--bg-tertiary)}
.bpick+.bpick{border-top:1px solid var(--line)}
.bracketkids::after{content:"";position:absolute;top:25%;bottom:25%;right:-14px;border-right:1px solid var(--line)}
.bracketkids>*::after{content:"";position:absolute;top:50%;right:-14px;width:14px;height:0;border-top:1px solid var(--line)}
.bracketpair>.bracketleaf::before{content:"";position:absolute;top:50%;left:-14px;width:14px;height:0;border-top:1px solid var(--line)}
.score{border:0;background:var(--bg-tertiary);color:var(--text-primary);border-radius:5px;padding:5px 10px;font-size:.85rem;font-weight:500;transition:all .2s ease}
.score:hover{background:color-mix(in srgb,var(--text-primary) 6%,var(--bg-tertiary))}
.score.sel{background:var(--accent-primary);color:#fff}
.droppill{display:inline-grid;border:0;border-radius:5px;background:var(--bg-tertiary);color:var(--text-primary);font:inherit;font-size:14px;padding:7px 14px;cursor:pointer;transition:all .2s ease}
.droppill:hover,.droppill:focus-visible{background:color-mix(in srgb,var(--text-primary) 6%,var(--bg-tertiary))}
.droppill:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.droppill:hover .droppill-name,.droppill:focus-visible .droppill-name{opacity:0}
.droppill:hover .droppill-drop,.droppill:focus-visible .droppill-drop{opacity:1}
/* A dropped player's tag: the same filled 5px box as the drop pills, with a small Re-enter */
.foldbody .tag{border:0;border-radius:5px;padding:5px 6px 5px 14px;gap:8px}
.foldbody .tag button{font-size:.8rem;font-weight:600;padding:3px 8px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.foldlabel,.foldlabel svg{transition:none}}


/* Round clock: a copy of Google's timer. Ready: underlined time, +time chips, one wide Start. Running: thin ring,
   wide Pause + Reset. Paused: the card turns amber, chips inside the ring. Time's up: red. */
.roundclock{--rc:var(--accent-primary);--rcbtn:var(--bg-tertiary);--rcbtnfg:var(--text-primary);display:flex;flex-direction:column;padding:0;margin-top:6px;transition:background .3s ease}
.roundclock.rc-paused{--rc:var(--status-warning);--rcbtn:color-mix(in srgb,var(--status-warning) 55%,var(--bg-tertiary));background:color-mix(in srgb,var(--status-warning) 9%,transparent)}
.roundclock.rc-expired{--rc:var(--status-error);--rcbtn:color-mix(in srgb,var(--status-error) 45%,var(--bg-tertiary));background:color-mix(in srgb,var(--status-error) 8%,transparent)}
.roundclock.shut>.foldlabel{border-bottom-color:transparent;border-radius:10px}
.foldlabel .rcmini{margin-left:auto;margin-right:6px;text-transform:none;letter-spacing:0;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.foldlabel .rcmini+svg{margin-left:0}
.rc-paused .rcmini{color:var(--status-warning)}
.rc-expired .rcmini{color:var(--status-error)}
.rcbody{position:relative;display:flex;flex-direction:column;padding:10px 12px 12px}
.rcbody[hidden]{display:none}
.rcsound{position:absolute;top:8px;right:8px;margin-left:0;width:32px;height:32px;z-index:1}
.rcsound svg{width:18px;height:18px}
.rcface{position:relative;align-self:center;width:min(236px,68vw);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:4px 0 12px}
.rc-edit .rcface{aspect-ratio:auto;width:100%;min-height:min(236px,68vw)} /* only while typing a time: the three fields don't fit in the ring */
.rcring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rctrack{fill:none;stroke:color-mix(in srgb,var(--rc) 22%,transparent);stroke-width:4}
.rcarc{fill:none;stroke:var(--rc);stroke-width:4;stroke-linecap:round;transition:stroke-dasharray .25s linear}
.rccenter{position:relative;display:flex;flex-direction:column;align-items:center}
.roundclock .timerclock{font-size:clamp(2.6rem,10vw,3.3rem);font-weight:400;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--text-primary);font-family:inherit;min-width:0}
.rc-expired .timerclock{color:var(--status-error)}
button.timerclock{background:none;border:0;border-bottom:1px solid transparent;border-radius:0;padding:0 4px 2px;cursor:pointer}
.rc-ready button.timerclock,.rc-paused button.timerclock{border-bottom-color:var(--text-tertiary)}
button.timerclock:hover{border-bottom-color:var(--text-secondary)}
button.timerclock:focus-visible{outline:2px solid var(--accent-primary);outline-offset:4px}
.roundclock .timerclock.nolimit{font-size:1.05rem;color:var(--text-secondary)}
/* Set time: three fields, hours / minutes / seconds, each tappable on its own; the focused one is highlighted */
.rcsegs{display:flex;align-items:flex-start;justify-content:center}
.rcseg{width:1.35em;padding:0 .04em;border:0;border-bottom:1px solid var(--text-tertiary);border-radius:6px 6px 0 0;background:none;font:inherit;color:var(--text-primary);text-align:center;font-variant-numeric:tabular-nums;caret-color:transparent;outline:none;box-shadow:none;transition:background .15s ease}
.rcseg:hover{background:var(--interactive-hover)}
.rcseg:focus{border-bottom:2px solid var(--accent-primary);background:color-mix(in srgb,var(--accent-primary) 18%,transparent);box-shadow:none}
.rcseg::selection{background:transparent}
.rccolon{padding:0 .04em;color:var(--text-secondary)}
.rcsegwrap{display:flex;flex-direction:column;align-items:center}
.rcunit{margin-top:4px;font-size:.72rem;line-height:1;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em}
.timerclock span[data-seg]{border-radius:4px}
button.timerclock span[data-seg]:hover{background:var(--interactive-hover)}
.rcpresets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.rcchip{border:0;border-radius:999px;background:var(--rcbtn);color:var(--text-primary);font:inherit;font-size:.82rem;font-weight:600;padding:6px 12px;cursor:pointer;font-variant-numeric:tabular-nums;transition:filter .2s ease}
.rcchip:hover{filter:brightness(1.15)}
.rcchip:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.rcbtns{display:flex;gap:8px}
.rcbig{flex:1;height:40px;border:0;border-radius:999px;background:var(--rcbtn);color:var(--rcbtnfg);display:grid;place-items:center;cursor:pointer;transition:filter .2s ease}
.rcbig svg{width:16px;height:16px}
.rcbig:hover:not(:disabled){filter:brightness(1.15)}
.rcbig:disabled{opacity:.35;cursor:default}
.rcbig:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.rc-ready .rcbig,.rc-edit #timerok{background:var(--accent-primary);color:#fff}

/* Rounds: one tab per round (Melee style), the current one selected, then one full-width table */
.rtabs{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:-2px 0 14px;padding-bottom:2px;border-bottom:1px solid var(--line)}
.rtab{flex:0 0 auto;border:0;background:none;color:var(--text-secondary);font:inherit;font-size:.88rem;font-weight:600;padding:8px 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-3px;white-space:nowrap}
.rtab:hover{color:var(--text-primary)}
.rtab.sel{color:var(--text-primary);border-bottom-color:var(--accent-primary)}
.rtab.now::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-primary);margin-left:7px;vertical-align:middle}
.rtab:focus-visible{outline:2px solid var(--accent-primary);outline-offset:-2px;border-radius:4px}

/* Tidier tables: both name columns the same width, the name boxes fill them */
.foldbody td.elp{width:34%}
.pick.elpick{width:100%;min-width:0}

/* Time's up: the card shakes with each chime and a red glow pulses around it while it sits at 0:00 */
@keyframes rcshake{0%,100%{transform:translateX(0)}15%{transform:translateX(-5px) rotate(-.4deg)}30%{transform:translateX(5px) rotate(.4deg)}45%{transform:translateX(-4px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}90%{transform:translateX(2px)}}
@keyframes rcglow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--status-error) 35%,transparent)}}
.roundclock.rc-expired{border-color:var(--status-error);animation:rcglow 1.6s ease-in-out infinite}
.roundclock.rc-expired.rc-shake{animation:rcshake .55s ease-in-out,rcglow 1.6s ease-in-out infinite}
/* deliberately not switched off by prefers-reduced-motion: it's a short, purposeful alert, and the host wants to see it */

/* Share modal: Discord-style copy fields -- the value and a filled Copy button inside one dark box. The code and the
   link are the same size (15px); buttons 14px; even spacing between the QR, the fields and Stop sharing. */
.copyfield{display:flex;align-items:center;gap:8px;background:var(--input-dark);border:1px solid var(--border-secondary);border-radius:8px;padding:5px 5px 5px 14px;transition:border-color .15s ease}
.copyfield:focus-within{border-color:var(--accent-primary)}
.copyvalue{flex:1;min-width:0;border:0;background:none;box-shadow:none;outline:none;color:var(--text-primary);font:inherit;font-size:15px;padding:7px 0;text-overflow:ellipsis}
.copyvalue:focus{box-shadow:none}
.copyvalue.codevalue{font-weight:600;letter-spacing:.14em}
.copybtn{flex:none;min-width:84px;border:0;border-radius:6px;background:var(--accent-primary);color:#fff;font:inherit;font-size:14px;font-weight:600;padding:8px 18px;cursor:pointer;transition:filter .15s ease,background .15s ease}
.copybtn:hover{filter:brightness(1.1)}
.copybtn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.copybtn.copied{background:var(--status-success)}
.modal-body .qrwrap{margin:22px 0 6px} /* 40px above the QR (header to code), the same as QR to the code field below */
.modal-body .copyfield+.sharelabel{margin-top:18px}
.modal-body .copyfield+.modal-actions{margin-top:22px}

/* Paused: a large, solid amber pause symbol over the dimmed time, centered in the ring on its own layer (small, before the time,
   in the folded header) */
.rcface>.rcpaused{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;color:var(--status-warning)}
.rc-paused .rcface .timerclock{opacity:.35} /* the time dims under the solid pause symbol */
.rcface>.rcpaused svg{width:46%;height:46%;fill:currentColor;stroke:none}
.rcmini .rcpaused{display:inline-block;color:var(--status-warning);line-height:0;vertical-align:-2px;margin:0 6px 0 0}
.rcmini .rcpaused svg{width:13px;height:13px;fill:currentColor}

/* Phones and small tablets -- any screen too narrow for the card's full 760px (plus 2x16px gutter) -- the outer card
   runs edge to edge: no side margin, no side borders or rounded corners, just a rule across the top and the bottom.
   Everything outside it (title, notices, footer note) keeps the usual 16px gutter. */
@media (max-width:791px){
  main{padding-left:0;padding-right:0;max-width:none}
  .panel{border-left:0;border-right:0;border-radius:0;box-shadow:none;padding:20px 16px}
  .notice{margin-left:16px;margin-right:16px}
}

/* ---------- Phones: fit first, scroll only where a layout can't fit (after Limitless, TopDeck.gg and Challonge) ---------- */
.narrow{display:none}
.tbtoggle{display:none}
.hscroll.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.hscroll.more-l:not(.nofadeleft){-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px);mask-image:linear-gradient(90deg,transparent,#000 32px)}
.hscroll.more-l.more-r:not(.nofadeleft){-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
.pick.elpick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){
  .wide{display:none}
  .narrow{display:inline}
  .foldbody{padding:12px 10px}
  /* pairings: no Points columns, "#" for Table */
  .eltable .elpts{display:none}
  .eltable th,.eltable td{padding-left:6px;padding-right:6px}
  .foldbody td.elp{width:40%}
  /* standings: # / Player / Record / Pts, tiebreakers behind a button; shown, # and Player stay pinned */
  .tbtoggle{display:inline-block;margin:0 0 10px;border:0;border-radius:5px;background:var(--bg-tertiary);color:var(--text-secondary);font:inherit;font-size:.8rem;font-weight:600;padding:6px 12px;cursor:pointer}
  .tbtoggle[aria-pressed="true"]{color:var(--text-primary)}
  table.standings:not(.alltb) .tb{display:none}
  table.standings.alltb th:nth-child(-n+2),table.standings.alltb td:nth-child(-n+2){position:sticky;background:var(--bg-secondary);z-index:1}
  table.standings.alltb th:nth-child(1),table.standings.alltb td:nth-child(1){left:0;min-width:2.2em}
  table.standings.alltb th:nth-child(2),table.standings.alltb td:nth-child(2){left:2.2em;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* bracket: runs to the section's edges and scrolls (Challonge) */
  .foldbody .bracket{margin-left:-10px;margin-right:-10px;padding-left:14px;padding-right:14px}
  .rtab{padding:8px 10px}
}
/* #home: + New and Join stacked, full width like the event cards under them */
.hubbtns{display:flex;flex-direction:column;gap:8px}
.btn.hubbtn{width:100%;justify-content:center;gap:8px;padding:12px 14px}
.btn.hubbtn svg{width:18px;height:18px}

/* Home cards: the whole card is its main action (a stretched button/link over it; the border and a hover tint say so),
   and a subtle ⋮ at its right edge, vertically centered, opens the other actions */
.hubgo{position:absolute;inset:0;border:0;border-radius:8px;background:none;cursor:pointer;transition:background .15s ease}
.hubgo:hover{background:color-mix(in srgb,var(--accent-primary) 8%,transparent)}
.hubgo:focus-visible{outline:2px solid var(--accent-primary);outline-offset:-2px}
.hubcard:has(.hubgo:hover){border-color:color-mix(in srgb,var(--accent-primary) 45%,var(--border-secondary))}
.hubtags .pill{margin-left:0}
.discardrow{margin:14px 0 0;text-align:center}
.textbtn{border:0;background:none;padding:4px 6px;color:var(--text-tertiary);font:inherit;font-size:.85rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.textbtn:hover{color:var(--status-error)}
.textbtn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-radius:4px}

/* Round complete: the clock has stopped because every match has a result -- a calm grey ring, the frozen time, a note */
.roundclock.rc-done{--rc:var(--text-tertiary)}
.rc-done .roundclock .timerclock,.rc-done .timerclock{color:var(--text-secondary)}
.rcdone{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:.8rem;font-weight:600;color:var(--status-success)}
.rcdone svg{width:14px;height:14px}
/* Rounds card: future round tabs (dimmed), the next one (tappable), and the pending tab's full-width Pair button */
.rtab.future{opacity:.4;cursor:default;pointer-events:none} /* not paired yet: dimmed, no hover highlight, nothing to press (a 🚫 cursor was too loud) */
.rtab.nexttab{color:var(--accent-text)}
.rtab.nexttab:hover{color:var(--text-primary)}
.rpending{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:160px;padding:16px 0;text-align:center}
.rpending .tiepick{width:100%;text-align:left}
.rpending .btn{align-self:stretch;width:100%} /* Pair round N / Start … spans the card */

/* Result dialog: a row per game -- [A] [Draw] [B] -- and the match result worked out underneath */
.gamerows{display:flex;flex-direction:column;gap:8px}
.gamerow{display:grid;grid-template-columns:4.2em 1fr auto 1fr;gap:6px;align-items:center}
.gamelabel{font-size:.8rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.gamerow.locked .gamelabel{color:var(--text-tertiary)}
.gamebtn{min-width:0;border:0;border-radius:6px;background:var(--bg-tertiary);color:var(--text-primary);font:inherit;font-size:.9rem;font-weight:600;padding:10px 8px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .15s ease}
.gamebtn[data-v="d"]{padding:10px 12px;color:var(--text-secondary);font-weight:500}
.gamebtn:hover:not(:disabled){background:var(--interactive-hover)}
.gamebtn.sel{background:var(--accent-primary);color:#fff}
.gamebtn[data-v="d"].sel{background:var(--status-warning);color:#1a1a1a}
.gamebtn:disabled{opacity:.35;cursor:default}
.gamebtn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.gamesum{margin:14px 0 0;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.gamesum.err{color:var(--status-error)}

/* Pairings: each match is one tappable block (a <tbody>), the names plain labels inside it */
span.pick{display:block;cursor:inherit}
.eltable tbody tr:last-child td{border-bottom:1px solid var(--line)}
.eltable tbody:last-child tr:last-child td{border-bottom:0}
.eltable tbody.matchrow tr:not(:last-child) td{border-bottom:0}
tbody.matchrow.go{cursor:pointer}
tbody.matchrow.go:hover td{background:color-mix(in srgb,var(--accent-primary) 16%,transparent)}
tbody.matchrow.go:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent-primary)} /* an accent bar down the match's left edge */
tbody.matchrow.go:focus-visible{outline:2px solid var(--accent-primary);outline-offset:-2px}
tbody.matchrow.go:focus{outline-offset:-2px}

/* the latest round's tab: a ▾ that opens the round menu (Delete round) */
.rtabcaret{display:inline-grid;place-items:center;margin-left:4px;vertical-align:middle;opacity:.6}
.rtabcaret svg{width:12px;height:12px}
.rtab.sel .rtabcaret{opacity:1}
.roundmenu{position:fixed;z-index:60;min-width:200px;padding:6px;background:#17171a;border:1px solid rgba(244,244,245,.1);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.roundmenu button{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:8px 10px;border:0;border-radius:7px;background:none;color:#e4e4e7;font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;white-space:nowrap}
.roundmenu button:hover,.roundmenu button:focus-visible{background:rgba(255,255,255,.07);outline:none}
.roundmenu button.danger,.roundmenu button.danger svg{color:var(--status-error)}
.roundmenu svg{width:18px;height:18px;flex:none}

/* the clock before the first round is paired: just an hourglass in the time's place */
.rc-waiting{--rc:var(--text-tertiary)} /* the empty ring, same size as a running clock's, around the hourglass */
.rchourglass{display:block;line-height:0;color:var(--text-primary);opacity:.5} /* a solid color, faded as a whole: a see-through color (like --text-tertiary) doubles up where the icon's lines overlap */
.rchourglass svg{width:64px;height:64px} /* Lucide hourglass exactly as published: stroke-width 2, no override */

/* Event header: the draft name (small caps, sized to fit by fitEventName) with Archive and Share on the same line */
.evhead{display:flex;align-items:center;gap:10px}
.evname{flex:1;min-width:0;display:flex;align-items:center;margin:0;font-variant-caps:small-caps;letter-spacing:.02em;line-height:1.2}
.evnametext{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* one line, always */
/* the host taps the name to rename it: a plain-looking button, with a soft highlight on hover */
.evnamebtn{flex:1;min-width:0;display:flex;align-items:center;margin:0 0 0 -6px;padding:2px 6px;background:none;border:0;border-radius:6px;color:inherit;font:inherit;font-variant-caps:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;cursor:pointer;transition:background .2s ease}
.evnamebtn:hover{background:var(--interactive-hover)}
.evnamebtn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.evactions{display:flex;gap:6px;flex:none}
.evbtn{width:34px;height:34px;display:grid;place-items:center;color:var(--text-secondary);background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:8px;cursor:pointer;transition:all .2s ease}
.evbtn:hover{color:var(--text-primary);background:var(--interactive-hover)}
.evbtn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.evbtn svg{width:18px;height:18px}

/* The support section in every page's footer (support.js), copied from mtgproxy.net's footer (DonationManager's CSS) with
   Draft Wizard's variables. Unlike mtgproxy it stays on phones (there's no sidebar to move it to): it stacks, centered. */
.donation-section{color:var(--text-primary);animation:slideInGentle .6s ease}
.donation-section,.donation-section *{box-sizing:border-box} /* the footer's shadow root resets inheritance, so the page's border-box doesn't reach in: without this a 140px button came out 190px and wrapped */ /* in the site footer, under its line (site.js's "support" slot) */
.donation-section:empty{display:none}
@keyframes slideInGentle{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.donation-content{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:20px}
.donation-left{display:flex;flex-direction:column;gap:12px;flex:1;min-width:240px}
.donation-text{display:flex;align-items:center;gap:12px}
.donation-message{display:flex;flex-direction:column;gap:2px}
.main-text{color:var(--text-primary);font-weight:600;font-size:16px}
.sub-text{color:var(--text-secondary);font-size:13px}
.server-fees-widget{border-radius:12px;padding:12px 0;max-width:280px;background:transparent}
.server-fees-header{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px;text-align:center}
.server-fees-progress{display:flex;flex-direction:column}
.progress-bar-container{position:relative;width:100%;height:24px;background:var(--bg-secondary);border-radius:12px;overflow:hidden;border:1px solid var(--border-secondary)}
.progress-bar{height:100%;background:linear-gradient(90deg,#7c3aed,#9333ea);transition:width .5s ease;border-radius:12px}
:root[data-theme="light"] .progress-bar{background:linear-gradient(90deg,#c4b5fd,#a78bfa)}
.progress-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text-primary);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.rotating-donor{margin-top:12px;text-align:center;min-height:20px;opacity:1;transition:opacity .5s ease}
.rotating-donor.fading{opacity:0}
.rotating-donor[hidden]{display:none}
.donor-thank-you-link{text-decoration:none;color:inherit;display:block}
.donor-thank-text{font-size:13px;color:var(--text-secondary)}
.donor-name-rotating{color:#9333ea;font-weight:600}
.donor-thank-you-link:hover .donor-name-rotating{text-decoration:underline}
.donation-buttons{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.footer-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;background:transparent;color:var(--text-primary);border:1px solid var(--accent-primary);padding:12px 24px;border-radius:8px;font-size:14px;font-family:inherit;cursor:pointer;transition:all .2s ease;font-weight:600;min-width:140px;text-decoration:none;line-height:1.2}
.footer-btn:hover:not(:disabled){background:var(--accent-primary);border-color:var(--accent-primary)}
.footer-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.footer-btn:disabled{cursor:default;opacity:.6}
.kofi-btn,.footer-btn.likebtn{padding:12px 10px;min-width:auto}
.kofi-icon{display:inline-block;animation:jiggle 2s ease-in-out infinite;margin-right:3px}
img.kofi-icon{height:16px;width:auto;vertical-align:middle}
@keyframes jiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-10deg)}20%{transform:rotate(10deg)}30%{transform:rotate(-10deg)}40%{transform:rotate(10deg)}50%{transform:rotate(0)}}
.kofi-btn:hover .kofi-icon{animation:jiggle .5s ease-in-out infinite}
.likeerr{color:#ff6b6b}
@media (max-width:768px){
  .donation-content{flex-direction:column;align-items:center;text-align:center;gap:20px}
  .donation-left{align-items:center;min-width:0;width:100%}
  .server-fees-widget{width:100%}
  .donation-buttons{justify-content:center}
}
@media (max-width:420px){.donation-buttons .footer-btn{min-width:0;flex:1 1 40%}}
/* like mtgproxy, the cup jiggles and the thanks fade even with reduced motion on (as the clock's alarm shake does) */

/* Send Feedback (support.js), mtgproxy's dialog */
.feedback-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.feedback-modal .modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}
.feedback-content{position:relative;background:var(--bg-primary);border-radius:8px;max-width:500px;width:90%;box-shadow:0 24px 64px rgba(0,0,0,.9);overflow:hidden;display:flex;flex-direction:column;max-height:100dvh}
.feedback-header{display:flex;justify-content:center;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-secondary);position:relative}
.feedback-header h3{color:var(--text-primary);font-size:16px;font-weight:600;margin:0;text-align:center}
.feedback-header .modal-close-btn{position:absolute;right:16px;background:none;border:0;color:var(--text-secondary);font-size:22px;line-height:1;cursor:pointer;width:32px;height:32px;border-radius:6px}
.feedback-header .modal-close-btn:hover{color:var(--text-primary);background:var(--interactive-hover)}
.feedback-body{padding:20px;overflow-y:auto}
.feedback-description{color:var(--text-secondary);margin:0 0 20px;line-height:1.5;font-size:14px}
.feedback-form{display:flex;flex-direction:column;gap:16px}
.feedback-modal .form-group{display:flex;flex-direction:column;gap:8px}
.feedback-modal .form-group label{color:var(--text-primary);font-weight:600;font-size:14px}
.feedback-modal .form-group select,.feedback-modal .form-group textarea,.feedback-modal .form-group input[type="email"]{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:rgba(0,0,0,.3);color:var(--text-primary);font-size:14px;font-family:inherit;transition:all .2s ease}
.feedback-modal .form-group select:focus,.feedback-modal .form-group textarea:focus,.feedback-modal .form-group input[type="email"]:focus{outline:none;border-color:var(--accent-primary);background:rgba(0,0,0,.4)}
.feedback-modal .form-group input::placeholder,.feedback-modal .form-group textarea::placeholder{color:var(--text-disabled)}
.feedback-modal .form-group textarea{resize:vertical;min-height:120px;line-height:1.5}
.feedback-modal .form-group select option{background:var(--bg-primary);color:var(--text-primary)}
.feedback-status{padding:12px;border-radius:6px;margin:16px 0 0;font-size:13px;font-weight:500}
.feedback-status[hidden]{display:none}
.feedback-status.success{background:rgba(34,197,94,.15);color:var(--status-success);border:1px solid rgba(34,197,94,.3)}
.feedback-status.error{background:rgba(239,68,68,.15);color:var(--status-error);border:1px solid rgba(239,68,68,.3)}
.feedback-buttons{display:flex;gap:12px;padding:16px 20px;border-top:1px solid var(--border-secondary)}
.feedback-btn{flex:1;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;background:transparent;border:1px solid #9333ea;color:var(--text-primary);font-family:inherit}
.feedback-btn:hover:not(:disabled){background:#9333ea;border-color:var(--accent-primary)}
.feedback-btn:disabled{opacity:.5;cursor:not-allowed}
.spinner-small{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;animation:spin 1s linear infinite;margin-right:6px;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:640px){.feedback-content{width:100vw;max-width:100vw;height:100dvh;border-radius:0}}
@media print{.donation-section,.feedback-modal{display:none!important}}

/* The Supporters page (/thank-you/) */
.supportbtns{display:flex;justify-content:center;margin-top:14px}
a.btn{text-decoration:none;cursor:pointer}
.kofibtn img{width:20px;height:auto;display:block}
.kofibtn.kofi-btn{padding:12px 24px} /* the Supporters page's big button jiggles like the footer's (.kofi-icon, .kofi-btn:hover) but keeps its size */
.kofibtn img.kofi-icon{width:20px;height:auto;margin-right:0}
.costlist,.donorlist{list-style:none;margin:8px 0 0;padding:0}
.costlist li,.donorlist li{display:flex;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px solid var(--border-secondary)}
.costlist li span:last-child,.donorlist li span{color:var(--text-secondary);white-space:nowrap}
.costlist .costtotal{font-weight:700;border-bottom:0}
.donorlist b{min-width:0;overflow-wrap:anywhere}

/* Accounts on the players step: linked players (@username), guests, the link row (index.html, sync.js) */
.addmore{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 0}
.tag.linked{border-color:color-mix(in srgb,var(--accent-primary) 55%,transparent)}
.tag .tagat{margin-left:6px;font-size:.78em;color:var(--accent-text)}
.linkrow{margin:12px 0 0;padding:12px;border:1px dashed var(--border-secondary);border-radius:10px}
.linkrow .note{margin-top:6px}
.syncask{padding:14px;border:1px solid color-mix(in srgb,var(--accent-primary) 45%,transparent);border-radius:10px;background:color-mix(in srgb,var(--accent-primary) 8%,transparent)}
.syncask p{margin:0 0 10px}
.syncerr{color:var(--status-warning)}