/* Detailed print artwork generated from the supplied visual reference.
   Decorative PNGs are backgrounds only. Text, scores and controls remain HTML. */
:root{--serif:Georgia,'Times New Roman',serif;--ink:#2c2015;--red:#67221d;--muted:#826747}
body{background:#25221b;overflow-x:clip}
.hero{max-width:1536px;min-height:0;z-index:1;aspect-ratio:1536/274;box-shadow:none}
.hero-shade{background:linear-gradient(180deg,#0001,transparent 75%,#251b1340)}
.edition{font-size:8px;opacity:.75;left:36px;top:22px}
.gear-button{top:19px;right:23px;width:43px;height:43px;border:1px solid #b4975c99;background:#38281dd9;color:#e9d3aa;box-shadow:inset 0 0 0 2px #1e171166,0 2px 9px #0008;border-radius:50%}
.gear-button:hover{background:#712b21;transform:rotate(15deg)}
.parchment{isolation:isolate;max-width:1536px;margin-top:-6px;padding:24px 56px 0;border:0;background:#dfc59d url('assets/tactile/paper-panel-cutout.png') center/cover;box-shadow:inset 0 0 45px #92623680,0 3px 10px #0007;overflow-x:clip;overflow-y:visible}
.parchment::before{inset:9px 15px 10px;border:1px solid #8f623d45;border-radius:13px;box-shadow:inset 0 0 0 3px #eddbba33;pointer-events:none}
.overview-line{min-height:20px;margin-bottom:21px;gap:12px}
.overview-line .eyebrow{font-size:8px;letter-spacing:1.6px;color:#7f603b}.overview-line h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.phase-badge{font-size:9px;padding:6px 10px;border:1px solid #9d7a4e66;border-radius:2px;background:#e9d2ac33;color:#755c37;box-shadow:none}
.tournament-grid{grid-template-columns:1fr 1fr 1.08fr;gap:24px}
.paper-panel{position:relative;isolation:isolate;background:none;border:0;border-radius:0;box-shadow:none}
.paper-panel::before{content:'';position:absolute;inset:-4px -7px;z-index:-1;background:url('assets/tactile/paper-panel-cutout.png') center/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(1px 3px 2px #54371966)}
.group-panel{padding:3px 20px 17px}
.group-title{position:relative;isolation:isolate;height:59px;width:calc(100% + 28px);margin:-9px -14px 0;color:#67251c;font-size:25px;font-weight:700;text-transform:uppercase;letter-spacing:-.7px;white-space:nowrap;text-shadow:0 1px 0 #fff5;gap:0}
.group-title::before{content:'';position:absolute;inset:-8px -11px -10px;width:auto;height:auto;z-index:-1;background:url('assets/tactile/group-heading.png') center/100% 100% no-repeat;transform:none}
.group-title::after{display:none}
.group-subtitle{margin-top:-2px;font-family:var(--serif);font-size:10px;letter-spacing:.3px;text-transform:none;color:#8b6e47}
.standings{font-size:16px;font-weight:400;margin:17px 0 18px;color:#2c2014}
.standings thead{font-family:var(--serif);font-size:12px;color:#39271a;border-bottom-color:#a57a46}
.standings th{font-weight:700;padding-bottom:7px}.standings td{padding-top:8px;padding-bottom:8px;border-bottom-color:#ad844b66;line-height:1.2}
.standings th:nth-child(2),.standings td:nth-child(2){width:32%;padding-left:4px}.standings td:nth-child(2){font-weight:700}
.standings td:first-child{font-family:var(--serif);font-size:13px;color:#755633}.standings th:last-child{width:15%}.standings th:nth-last-child(2){width:16%}
.standings td:last-child{font-size:20px;font-weight:700}.standings tbody tr:first-child{background:linear-gradient(90deg,#dbb65eae,#dfbb685c);color:#2c1b0b}
.standings-note{font-family:var(--serif);font-size:9px;line-height:1.4;color:#96754c;margin:-8px 0 18px}
.matches-title{font-size:16px;font-weight:700;color:#713c27;margin-bottom:11px;gap:11px}
.matches-title::before,.matches-title::after{height:1px;background:#ad804a77}
.session{padding:0;border:0;margin:0}
.session:last-child{padding:0}
.game-row{border:0;border-bottom:1px solid #b08a5866;border-radius:0;background:transparent;padding:6px 1px;gap:7px;min-height:33px;line-height:1.15}
.game-row:hover{background:#a6782829;box-shadow:none}
.game-row .game-role{font-family:var(--serif);font-size:13px;font-weight:400;color:#392719;overflow:hidden;text-overflow:ellipsis;min-width:0;white-space:nowrap;flex:1}
.game-role span{color:#795737;font-style:italic;font-size:11px}
.game-score{font-size:16px;font-weight:700;letter-spacing:2px;min-width:45px;text-align:center;line-height:1.1}.game-score.pending{font-size:15px;color:#80633c}
.role{width:21px;height:21px;font-family:var(--serif);font-size:12px;line-height:1;background:radial-gradient(circle at 33% 26%,#a55542,#762a24 55%,#411a16);color:#f3dfb8;border:1px solid #e4b28580;box-shadow:inset 0 0 0 2px #471b174a,0 1px 1px #51391a66;text-shadow:0 1px 1px #35150f}
.role.hunter{background:radial-gradient(circle at 33% 26%,#637068,#35423e 55%,#1d2724);border-color:#c2c3a566}
.game-status{width:15px;height:15px;stroke-width:3;color:#506637;margin-left:2px}.game-status.pending{width:11px;height:11px;border-color:#8c714a;margin-left:4px}
.group-foot{font-family:var(--serif);font-size:10px;color:#8c6b43;margin-top:19px;border:0;padding-top:0;gap:9px}
.side-column{gap:19px}
.final-panel{isolation:isolate;position:relative;overflow:visible;flex:1;min-height:320px;padding:63px 23px 22px;border:0;border-radius:0;background:none;box-shadow:none;color:#f5dfb8}
.final-panel::before{content:'';position:absolute;inset:-15px -6px -5px;z-index:-1;background:url('assets/tactile/final-panel.png') center/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(0 3px 2px #51351f55)}
.final-ornament{display:none}.final-panel h2{font-size:32px;letter-spacing:1px;font-weight:700;text-shadow:0 2px 2px #220c0a}
.final-subtitle{font-size:13px;font-style:italic;color:#e1bc94;margin-top:7px}
.finalists{grid-template-columns:minmax(0,1fr) 21px minmax(0,1fr);gap:8px;margin:20px 0 12px}
.finalist-name{position:relative;isolation:isolate;background:none;border:0;box-shadow:none;min-height:43px;padding:12px 3px;color:#3b2517;font-size:17px;font-weight:700;white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.15;display:grid;place-items:center}
.finalist-name::before{content:'';position:absolute;inset:-3px -4px;z-index:-1;border:12px solid transparent;border-image:url('assets/tactile/paper-panel-cutout.png') 86 fill / 12px / 0 stretch;pointer-events:none;filter:drop-shadow(0 2px 1px #16090777)}
.finalists .versus{font-size:17px;font-weight:700;color:#eed6ad}
.final-role{font-family:var(--serif);font-size:10px;letter-spacing:.2px;margin-top:10px;color:#d4ad84;min-height:17px}
.final-role .role{width:18px;height:18px;font-size:10px}
.final-wait{font-size:13px;line-height:1.7;color:#e8c6a1;border-top:1px solid #cc9b6055;padding-top:12px;margin-top:14px}.final-wait svg{width:13px;height:13px}
.final-panel .button{position:relative;isolation:isolate;width:100%;margin-top:16px;min-height:40px;padding:11px 8px;border:0;background:none;color:#442b1b;box-shadow:none;font-size:14px}
.final-panel .button::before{content:'';position:absolute;inset:-4px;z-index:-1;border:14px solid transparent;border-image:url('assets/tactile/paper-panel-cutout.png') 86 fill / 14px / 0 stretch;pointer-events:none}
.winner{font-size:21px;line-height:1.25;color:#f3d392}.winner svg{width:23px;height:23px}
.progress-panel{padding:17px 19px 16px}.progress-panel h2{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:-.6px}
.progress-track{margin-top:18px}.progress-track::before{height:3px;background:linear-gradient(90deg,#82352a,#b59b72);top:14px;left:15%;right:15%}
.progress-step{font-size:13px;font-weight:700}.step-icon{width:29px;height:29px;margin-bottom:6px;border:2px solid #ab8956;background:#e4cba1;box-shadow:inset 0 1px 3px #72512b44}
.progress-step.active .step-icon,.progress-step.done .step-icon{background:#7a3026;color:#f1dfbb;box-shadow:inset 0 0 0 1px #a4684a;border-color:#6e2a20}.step-icon svg{width:17px;height:17px}
.progress-step small{font-size:11px;color:#775b39;line-height:1.4;margin-top:2px}
.progress-caption{margin-top:12px;padding-top:10px;border-color:#a67b4366;font-family:var(--serif);font-size:9px;color:#937049}
.next-panel{position:relative;isolation:isolate;background:#302f25;border:1px solid #7b63424d;border-radius:3px;box-shadow:inset 0 0 15px #13160f88,0 2px 4px #46301866;padding:20px 25px 20px 94px;margin-top:26px;gap:17px;min-height:94px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h160v160H0z' fill='%23ad9570' opacity='.2' filter='url(%23n)'/%3E%3C/svg%3E")}
.next-emblem{width:31px;height:36px;transform:none;border:0;margin:0}.next-emblem svg{width:29px;height:29px;transform:none;color:#e8d3a8;stroke-width:1.6}
.next-copy .eyebrow{font-family:var(--serif);font-size:15px;color:#e8d1a5;letter-spacing:.4px}.next-copy h3{font-size:21px;line-height:1.25;margin-top:4px}.next-copy h3 span{font-size:15px}.next-copy p{font-size:12px;margin-top:3px;color:#bca98a}
.button{position:relative;isolation:isolate;min-height:42px;padding:12px 19px;border:0;border-radius:0;background:none;box-shadow:none;font-size:15px;line-height:1.2;font-weight:700;transition:filter .15s,transform .15s}
.button::before{content:'';position:absolute;inset:-3px -4px;z-index:-1;border:14px solid transparent;border-image:url('assets/tactile/paper-panel-cutout.png') 86 fill / 14px / 0 stretch;pointer-events:none}
.button.primary{color:#f3ddba;background:none;text-shadow:0 1px 2px #210e0b}
.button.primary::before{border-image:url('assets/tactile/red-button.png') 150 95 fill / 13px 13px / 0 stretch}
.button.subtle{background:none;color:#4f321c}
.button:hover{filter:brightness(1.1)}.button:active{transform:translateY(1px)}
.scene-raven{position:absolute;left:-18px;bottom:12px;width:152px;height:auto;pointer-events:none;z-index:2;filter:drop-shadow(2px 2px 1px #68452555)}
.page-footer{padding:19px 0 23px;margin-left:77px;gap:12px;font-family:var(--serif);font-size:10px;color:#8e6b43}.page-footer p{font-size:10px;gap:7px}.page-footer b{color:#604321}
.bottom-note{font-size:7px;color:#b99c6b6b;padding-top:20px}.bottom-note span{margin-top:7px}
.paper-dialog{position:relative;isolation:isolate;background:none;border:0;border-radius:0;box-shadow:none;padding:30px;max-height:90vh;max-height:90dvh;color:#3c2819}
.paper-dialog::before{content:'';position:absolute;inset:0;z-index:-1;border:30px solid transparent;border-image:url('assets/tactile/paper-panel-cutout.png') 86 fill / 30px / 0 stretch;pointer-events:none}
.dialog-top h2{font-size:28px;color:#602e22}.dialog-top .eyebrow{font-size:9px;letter-spacing:1.4px}
.muted,.match-description{font-size:14px;line-height:1.6;color:#7d5d39}.settings-groups legend{font-size:20px;color:#6d3929}.small-note{color:#8a6840;font-size:11px}.settings-groups{gap:24px}
input,select{border:1px solid #a17d4b;background:#f8e7cba8;color:#4b301d;font-size:14px;box-shadow:inset 0 1px 4px #7e58261c;border-radius:2px}
.dialog-actions{gap:15px}.data-actions button{font-size:11px;color:#896039}.game-editor h3{font-size:14px}.game-editor h3 .game-index{font-size:9px}.outcome-options{gap:9px}
.outcome-options label{isolation:isolate;border:0;background:none;min-height:58px;font-size:14px;padding:13px 7px;line-height:1.25}
.outcome-options label::before{content:'';position:absolute;inset:0;z-index:-1;border:14px solid transparent;border-image:url('assets/tactile/paper-panel-cutout.png') 86 fill / 14px / 0 stretch;pointer-events:none}
.outcome-options label:has(input:checked){color:#f5dfba;background:none}
.outcome-options label:has(input:checked)::before{border-image:url('assets/tactile/red-button.png') 150 95 fill / 14px / 0 stretch}
.outcome-options small{font-size:8px;margin-top:5px}.clear-game{font-size:11px}
@media(min-width:1450px){.parchment{padding-left:64px;padding-right:64px}.group-panel{padding-left:24px;padding-right:24px}}
@media(max-width:1150px){.parchment{padding:25px 32px 0}.tournament-grid{gap:20px}.group-panel{padding-left:16px;padding-right:16px}.group-title{font-size:23px}.standings{font-size:15px}.standings thead{font-size:11px}.game-row{gap:5px}.game-row .game-role{font-size:12px}.game-score{min-width:39px;font-size:15px;letter-spacing:1px}.role{width:19px;height:19px;font-size:11px}.final-panel{padding-left:18px;padding-right:18px}.finalist-name{font-size:16px}.finalists{gap:5px}.progress-panel{padding-left:15px;padding-right:15px}.progress-panel h2{font-size:18px}.progress-step{font-size:12px}.progress-step small{font-size:10px}.next-copy h3{font-size:19px}.page-footer{margin-left:68px}.scene-raven{width:135px}}
@media(max-width:900px){.tournament-grid{grid-template-columns:1fr 1fr}.side-column{grid-template-columns:1fr 1fr;gap:22px;margin-top:10px}.group-panel{padding-left:20px;padding-right:20px}.group-title{font-size:27px}.standings{font-size:17px}.standings thead{font-size:13px}.game-row{gap:6px;min-height:35px}.game-row .game-role{font-size:13px}.game-score{font-size:16px;min-width:43px}.role{width:21px;height:21px;font-size:12px}.final-panel{min-height:320px;padding-top:67px}.final-panel h2{font-size:32px}.finalist-name{font-size:16px}.progress-panel{display:flex;flex-direction:column;justify-content:center;padding:25px 19px}.progress-panel h2{font-size:22px}.progress-step{font-size:14px}.progress-step small{font-size:11px}.progress-track{margin-top:25px}.progress-caption{margin-top:21px}.next-panel{padding-left:68px;gap:12px}.next-copy h3{font-size:19px}.next-panel>.button{font-size:14px}.page-footer{flex-wrap:wrap}.hero{aspect-ratio:1536/274}.edition{top:15px;left:22px;font-size:6px}.gear-button{width:36px;height:36px;top:13px;right:15px}}
@media(max-width:600px){.hero{aspect-ratio:1536/310;background-size:120% auto}.gear-button{width:34px;height:34px;top:10px;right:10px}.gear-button svg{width:19px;height:19px}.parchment{padding:23px 22px 0}.parchment::before{inset:8px}.overview-line{margin-bottom:24px;align-items:center}.overview-line .eyebrow{font-size:6px;letter-spacing:1px;max-width:155px;line-height:1.6;display:block}.phase-badge{font-size:8px;padding:5px 7px}.tournament-grid{grid-template-columns:1fr;gap:26px}.group-panel{padding:2px 17px 18px}.group-title{font-size:25px;height:61px}.group-subtitle{font-size:9px;margin-top:-3px}.standings{font-size:16px;margin-top:17px}.standings thead{font-size:12px}.standings td{padding-top:9px;padding-bottom:9px}.standings td:last-child{font-size:21px}.standings-note{font-size:9px;margin-bottom:17px}.matches-title{font-size:16px;margin-bottom:10px}.game-row{padding:8px 1px;gap:6px;min-height:38px}.game-row .game-role{font-size:12px}.game-role span{font-size:11px}.game-score{font-size:16px;min-width:39px}.role{width:21px;height:21px}.game-status{width:13px;height:13px}.group-foot{font-size:9px;margin-top:19px}.side-column{grid-template-columns:1fr;gap:24px;margin-top:1px}.final-panel{padding:67px 22px 25px;min-height:334px}.final-panel h2{font-size:34px}.final-subtitle{font-size:13px}.finalist-name{font-size:17px;min-height:47px}.finalists{gap:8px;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)}.final-wait{font-size:13px}.progress-panel{padding:22px 20px 19px}.progress-panel h2{font-size:21px}.progress-step{font-size:14px}.progress-step small{font-size:11px}.progress-track{margin-top:22px}.progress-caption{font-size:9px;margin-top:16px}.next-panel{padding:19px 18px 21px 40px;margin-top:28px;flex-wrap:wrap;gap:11px}.next-emblem{width:23px;height:27px}.next-emblem svg{width:23px;height:23px}.next-copy .eyebrow{font-size:13px}.next-copy h3{font-size:17px}.next-copy h3 span{font-size:13px}.next-copy p{font-size:11px}.next-panel>.button{width:100%;margin:8px 0 0 14px;font-size:15px}.scene-raven{width:100px;left:-24px;bottom:7px}.page-footer{margin-left:38px;padding-top:18px;padding-bottom:20px;gap:7px;justify-content:center}.page-footer p{font-size:8px;gap:5px;line-height:1.8;flex-wrap:wrap;justify-content:center}.bottom-note{font-size:6px;letter-spacing:1px}.button{font-size:14px}.paper-dialog{padding:27px 23px;max-width:calc(100vw - 20px)}.dialog-top h2{font-size:25px}.settings-groups{gap:15px}.settings-groups legend{font-size:19px}.settings-groups label{gap:6px}.muted,.match-description{font-size:13px}.dialog-actions{gap:13px}.dialog-actions .button{font-size:14px;padding-left:15px;padding-right:15px}.data-actions{gap:10px;flex-wrap:wrap;justify-content:center}.data-actions button{font-size:10px}.outcome-options{gap:6px}.outcome-options label{font-size:13px;padding-left:6px;padding-right:6px}.outcome-options small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.button,.gear-button{transition:none}}
/* Keep paper grain at a useful scale, and keep the standings as compact as the reference. */
.parchment{background-size:115% auto;background-position:center 48%}
.group-subtitle{display:none}
.standings-note{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.standings{margin-top:14px;margin-bottom:18px}
.game-row .game-role{font-size:15px}
.final-panel{min-height:300px}
.progress-panel::before{background:none;border:20px solid transparent;border-image:url('assets/tactile/paper-panel-cutout.png') 86 fill / 20px / 0 stretch}
.button.primary::before{border:0;border-image:none;background:url('assets/tactile/red-button.png') center 42% / 100% 145% no-repeat;inset:-5px -6px}
@media(max-width:1150px){.game-row .game-role{font-size:13px}}
@media(max-width:900px){.game-row .game-role{font-size:14px}.final-panel{min-height:315px}}
@media(max-width:600px){.game-row .game-role{font-size:13px}.final-panel{min-height:334px}.parchment{background-size:auto 1600px}}

/* Reference finishes: paper lip, rope, wax, botanical engraving and antique type. */
:root {
  --serif: 'Alegreya', Georgia, serif;
  --display: 'Alegreya SC', Georgia, serif;
}
body { font-weight: 500; }
.hero { z-index: auto; }
.parchment {
  z-index: 1;
  margin-top: -2px;
  padding-top: 37px;
  padding-left: 62px;
  padding-right: 62px;
}
.parchment::before { inset: 14px 25px 12px; border-color: #8f623d33; }
.parchment-lip {
  position: absolute;
  left: 0;
  right: 0;
  top: -43px;
  height: 94px;
  z-index: 2;
  background: url('assets/tactile/parchment-lip.png') center / 100% auto no-repeat;
  pointer-events: none;
}
.rope-edge {
  position: absolute;
  top: 0;
  bottom: 6px;
  width: 36px;
  z-index: 3;
  background: url('assets/tactile/hemp-rope.png') center top / auto 410px repeat-y;
  filter: drop-shadow(1px 1px 1px #4b301965);
  pointer-events: none;
}
.rope-left { left: 5px; }
.rope-right { right: 5px; transform: scaleX(-1); }
.gear-button, .gear-button:hover {
  z-index: 10;
  top: auto;
  bottom: -44px;
  right: 9px;
  width: 87px;
  height: 87px;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  background: url('assets/tactile/wax-seal.png') center / contain no-repeat;
  filter: brightness(.82) saturate(.82) drop-shadow(1px 3px 2px #28110c77);
  transform: rotate(9deg);
}
.gear-button svg {
  opacity: 0;
  width: 28px;
  height: 28px;
  color: #f0d8ab;
  background: #5b1c18dc;
  border-radius: 50%;
  padding: 5px;
  box-sizing: content-box;
  transition: opacity .15s;
}
.gear-button:hover, .gear-button:focus-visible { filter: brightness(.95) saturate(.85) drop-shadow(1px 3px 2px #28110c77); }
.gear-button:hover svg, .gear-button:focus-visible svg { opacity: 1; }
.overview-line { margin-bottom: 24px; }
.group-title {
  font-family: var(--display);
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -.6px;
  line-height: 1;
  height: 76px;
  margin-top: -18px;
  margin-bottom: 1px;
  padding-top: 2px;
}
.group-title::before {
  inset: -13px -9px -12px;
  background-size: 100% auto;
}
.standings { font-size: 19px; font-weight: 500; margin-top: 10px; }
.standings thead { font-size: 15px; }
.standings td { padding-top: 5px; padding-bottom: 5px; }
.standings td:nth-child(2) { font-weight: 700; }
.standings td:first-child { font-size: 15px; }
.standings td:last-child { font-size: 23px; }
.matches-title { font-size: 19px; font-weight: 700; }
.game-row .game-role { font-size: 17px; }
.game-role span { font-size: 14px; }
.game-score { font-size: 18px; }
.group-foot { font-size: 11px; }
.final-panel { padding-top: 65px; padding-bottom: 23px; min-height: 320px; }
.final-panel::before { z-index: -2; }
.final-panel::after {
  content: '';
  position: absolute;
  top: 127px;
  right: 17px;
  bottom: 13px;
  left: 17px;
  border-radius: 8px 8px 12px 12px;
  z-index: -1;
  background: linear-gradient(180deg, #1a090500, #19090585 17%, #120706ad);
  pointer-events: none;
}
.final-panel h2 {
  font-family: var(--display);
  font-size: 41px;
  line-height: 1;
  letter-spacing: .6px;
  font-weight: 700;
}
.final-subtitle { font-size: 15px; line-height: 1.3; margin-top: 5px; }
.finalists { margin-top: 21px; }
.finalist-name { font-size: 21px; padding-top: 11px; padding-bottom: 11px; }
.finalists .versus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 18px;
  line-height: 1.1;
  transform: translateY(-8px);
}
.final-crown { display: block; color: #d8ac58; height: 24px; }
.final-crown svg {
  width: 25px;
  height: 24px;
  fill: #d3a34d;
  stroke: #f2d290;
  stroke-width: 1.25;
  filter: drop-shadow(0 1px 1px #1b0a03);
}
.final-role { font-size: 12px; }
.final-wait { font-size: 15px; line-height: 1.5; }
.progress-panel h2 { font-family: var(--display); font-size: 26px; line-height: 1.1; }
.progress-step { font-size: 16px; }
.progress-step small { font-size: 13px; }
.progress-caption { font-size: 11px; }
/* Use the entire dedicated control artwork, with no sliced center seams. */
.button::before,
.final-panel .button::before,
.finalist-name::before,
.outcome-options label::before {
  border: 0;
  border-image: none;
  inset: -5px -6px;
  background: url('assets/tactile/parchment-button.png') center 45% / 100% 120% no-repeat;
}
.button.primary::before,
.outcome-options label:has(input:checked)::before {
  border: 0;
  border-image: none;
  background: url('assets/tactile/red-button.png') center 42% / 100% 145% no-repeat;
}
.button { font-size: 18px; padding-top: 11px; padding-bottom: 11px; font-weight: 700; }
.final-panel .button { font-size: 17px; }
.outcome-options label { font-size: 17px; }
.outcome-options small { font-size: 8px; }
.next-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: 24px 39px 24px 106px;
  min-height: 127px;
  margin-top: 27px;
}
.next-panel::before {
  content: '';
  position: absolute;
  inset: -9px -11px;
  z-index: -1;
  background: url('assets/tactile/charcoal-banner.png') center 48% / 100% 210% no-repeat;
  filter: drop-shadow(0 3px 2px #3e2b1d66);
  pointer-events: none;
}
.next-emblem { width: 34px; }
.next-emblem svg { width: 30px; height: 30px; }
.next-copy .eyebrow { font-family: var(--display); font-size: 23px; letter-spacing: .3px; line-height: 1.1; }
.next-copy h3 { font-size: 26px; line-height: 1.2; margin-top: 6px; }
.next-copy h3 span { font-size: 19px; }
.next-copy p { font-size: 15px; line-height: 1.2; }
.scene-raven { bottom: 9px; left: -13px; width: 171px; z-index: 4; }
.scene-herbs {
  position: absolute;
  right: -2px;
  bottom: 6px;
  width: 151px;
  height: auto;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(-1px 1px 1px #66322233);
}
.page-footer { margin-left: 92px; margin-right: 72px; padding-bottom: 24px; }
.page-footer p { font-size: 12px; }
.dialog-top h2 { font-family: var(--display); font-size: 32px; }
.settings-groups legend { font-family: var(--display); font-size: 25px; }
.muted, .match-description { font-size: 17px; line-height: 1.5; }
.small-note { font-size: 13px; }
.game-editor h3 { font-size: 17px; }
input, select { font-size: 17px; }
.data-actions button { font-size: 13px; }

@media (max-width: 1150px) {
  .parchment { padding-left: 43px; padding-right: 43px; }
  .rope-edge { width: 29px; background-size: auto 335px; }
  .rope-left { left: 2px; } .rope-right { right: 2px; }
  .gear-button, .gear-button:hover { width: 75px; height: 75px; right: 5px; bottom: -37px; }
  .group-title { font-size: 29px; }
  .standings { font-size: 18px; }
  .standings thead { font-size: 13px; }
  .game-row .game-role { font-size: 15px; }
  .finalist-name { font-size: 19px; }
  .final-panel h2 { font-size: 37px; }
  .final-wait { font-size: 14px; }
  .progress-panel h2 { font-size: 23px; }
  .next-panel { padding-left: 90px; padding-right: 30px; }
  .next-copy h3 { font-size: 24px; }
  .next-panel > .button { font-size: 17px; }
  .scene-raven { width: 150px; } .scene-herbs { width: 125px; }
  .page-footer { margin-left: 75px; margin-right: 62px; }
}
@media (max-width: 900px) {
  .group-title { font-size: 33px; }
  .standings { font-size: 20px; }
  .standings thead { font-size: 15px; }
  .game-row .game-role { font-size: 17px; }
  .final-panel { padding-top: 69px; }
  .final-panel h2 { font-size: 41px; }
  .finalist-name { font-size: 21px; }
  .progress-panel h2 { font-size: 26px; }
  .progress-step { font-size: 16px; }
  .progress-step small { font-size: 13px; }
  .next-panel { padding-left: 64px; flex-wrap: wrap; }
  .next-copy h3 { font-size: 24px; }
  .next-panel > .button { margin-left: auto; }
  .next-copy .eyebrow { font-size: 21px; }
  .scene-raven { width: 136px; } .scene-herbs { width: 112px; }
  .page-footer { justify-content: center; margin-left: 55px; margin-right: 48px; }
}
@media (max-width: 600px) {
  .parchment { padding: 29px 26px 0; }
  .parchment::before { inset: 10px 14px 12px; }
  .parchment-lip { height: 37px; top: -16px; background-size: 120% auto; }
  .rope-edge { width: 19px; background-size: auto 215px; }
  .rope-left { left: 0; } .rope-right { right: 0; }
  .gear-button, .gear-button:hover { width: 56px; height: 56px; bottom: -27px; right: 2px; }
  .gear-button svg { width: 22px; height: 22px; padding: 4px; }
  .overview-line { margin-bottom: 24px; }
  .overview-line .eyebrow { font-size: 6px; max-width: 145px; }
  .phase-badge { font-size: 7px; margin-right: 17px; }
  .group-title { height: 75px; font-size: 31px; margin-top: -17px; }
  .group-title::before { inset: -11px -8px; }
  .standings { font-size: 19px; margin-top: 9px; }
  .standings thead { font-size: 14px; }
  .standings td { padding-top: 6px; padding-bottom: 6px; }
  .standings td:last-child { font-size: 24px; }
  .matches-title { font-size: 18px; }
  .game-row .game-role { font-size: 15px; }
  .game-role span { font-size: 12px; }
  .game-score { font-size: 18px; }
  .group-foot { font-size: 10px; }
  .final-panel { padding-top: 67px; min-height: 357px; }
  .final-panel h2 { font-size: 41px; }
  .final-subtitle { font-size: 15px; }
  .final-panel::after { top: 126px; right: 13px; left: 13px; }
  .finalist-name { font-size: 21px; }
  .final-wait { font-size: 15px; }
  .progress-panel h2 { font-size: 27px; }
  .progress-step { font-size: 17px; }
  .progress-step small { font-size: 13px; }
  .next-panel { padding: 23px 21px 24px 39px; margin-top: 28px; min-height: 167px; gap: 11px; }
  .next-panel::before { inset: -10px -8px; background-size: 100% 220%; }
  .next-copy .eyebrow { font-size: 20px; }
  .next-copy h3 { font-size: 23px; }
  .next-copy h3 span { font-size: 17px; }
  .next-copy p { font-size: 14px; }
  .next-panel > .button { width: 100%; margin: 8px 0 0 15px; font-size: 18px; }
  .scene-raven { width: 111px; left: -23px; bottom: 10px; }
  .scene-herbs { width: 87px; right: -4px; bottom: 7px; }
  .page-footer { margin-left: 39px; margin-right: 29px; padding-bottom: 24px; }
  .page-footer p { font-size: 10px; gap: 5px; }
  .button, .final-panel .button { font-size: 17px; }
  .dialog-top h2 { font-size: 28px; }
  .settings-groups legend { font-size: 23px; }
  .muted, .match-description { font-size: 16px; }
  .small-note { font-size: 12px; }
  .dialog-actions .button { font-size: 17px; }
  .outcome-options label { font-size: 16px; }
  .outcome-options small { font-size: 8px; }
  .data-actions button { font-size: 12px; }
}
.paper-dialog { scrollbar-width: thin; scrollbar-color: #a6814e transparent; }
.paper-dialog::-webkit-scrollbar { width: 5px; height: 5px; background: transparent; }
.paper-dialog::-webkit-scrollbar-thumb { background: #a6814e88; border-radius: 5px; }
@media (max-width: 1150px) { .gear-button, .gear-button:hover { right: 7px; } }
@media (max-width: 600px) { .gear-button, .gear-button:hover { right: 6px; } }

/* Optical alignment: the paper and its live caption share a center;
   uppercase letterforms sit slightly above the center of their line box. */
.group-title {
  display: grid;
  place-items: center;
  padding: 0;
}
.group-title-text {
  display: block;
  line-height: 1;
  transform: translateY(-.05em);
}
.final-crown {
  display: grid;
  place-items: center;
  width: 38px;
  height: 28px;
}
.crown-art {
  display: block;
  width: 38px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px #17080155);
}
.winner-crown {
  display: inline-block;
  width: 36px;
  height: 24px;
  object-fit: contain;
  vertical-align: -4px;
  margin-right: 6px;
}
/* A lighter visual frame leaves the engraved panels in the foreground. */
.rope-edge { width: 28px; background-size: auto 310px; opacity: .93; }
.parchment-lip { filter: brightness(.97) saturate(.94); }
.phase-badge {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15px;
  color: #705630;
  border-color: #a98b5c55;
  background-color: #ead4ab28;
}
.group-foot { color: #775a35; font-size: 12px; }
.progress-caption { color: #7e5e35; font-size: 12px; }
.progress-step small { color: #735632; }
.session + .session { margin-top: 4px; }
.session:not(:last-of-type) .game-row:last-child { border-bottom-color: #94713e88; }
.game-row { transition: background .15s, box-shadow .15s; }
.game-row:hover { background: #a6782829; box-shadow: inset 3px 0 #8c472b80; }
.game-row:focus-visible { outline-width: 2px; outline-offset: 1px; }
.final-wait em { font-size: .94em; color: #cba77e; }
.page-footer p { color: #81613b; }

@media (max-width: 1150px) {
  .rope-edge { width: 24px; background-size: auto 265px; }
  .group-foot, .progress-caption { font-size: 11px; }
}
@media (max-width: 600px) {
  .rope-edge { width: 17px; background-size: auto 185px; }
  .phase-badge { font-size: 10px; padding: 4px 7px; }
  .group-foot { font-size: 11px; }
  .progress-caption { font-size: 12px; }
  .crown-art { width: 36px; height: 27px; }
  .session + .session { margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) { .game-row { transition: none; } }

/* Keep tournament management discoverable, independently of the wax ornament. */
.settings-toggle {
  position: absolute;
  z-index: 12;
  top: 20px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid #b79a668c;
  border-radius: 3px;
  background: #251e16e8;
  box-shadow: 0 2px 8px #0005, inset 0 0 0 2px #b89a5d0c;
  color: #f0dcb9;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.settings-toggle svg { width: 22px; height: 22px; }
.settings-toggle:hover, .settings-toggle:focus-visible {
  background: #4a3022f2;
  border-color: #dfbc7e;
}
.header-wax {
  position: absolute;
  z-index: 10;
  bottom: -44px;
  right: 9px;
  width: 87px;
  height: 87px;
  object-fit: contain;
  transform: rotate(9deg);
  filter: brightness(.82) saturate(.82) drop-shadow(1px 3px 2px #28110c77);
  pointer-events: none;
}
.finalists {
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  column-gap: 14px;
}
.finalists .versus { justify-self: center; gap: 3px; }
@media (max-width: 1150px) {
  .header-wax { width: 75px; height: 75px; right: 7px; bottom: -37px; }
  .finalists { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); column-gap: 11px; }
}
@media (max-width: 600px) {
  .settings-toggle { top: 7px; right: 8px; width: 38px; min-height: 38px; padding: 7px; gap: 0; }
  .settings-toggle span { display: none; }
  .settings-toggle svg { width: 23px; height: 23px; }
  .header-wax { width: 48px; height: 48px; bottom: -32px; right: 6px; }
  .finalists { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); column-gap: 11px; }
}
@media (prefers-reduced-motion: reduce) { .settings-toggle { transition: none; } }

/* Server-backed interactions. */
[hidden] { display: none !important; }
dialog button:disabled { cursor: wait; opacity: .65; }
.noscript-note { position: fixed; inset: auto 12px 12px; z-index: 100; background: #ead5af; color: #3d241b; padding: 18px; text-align: center; }