#jm-arena { --jm-accent:#e8a34b; --jm-accent-ink:#231a0c; --jm-radius:10px; --f7-theme-color:var(--jm-accent); --f7-font-family:system-ui,-apple-system,sans-serif; font-family:system-ui,-apple-system,sans-serif; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#jm-arena input, #jm-arena textarea, #jm-arena select, #jm-arena [contenteditable], #jm-arena [data-view=info], #jm-arena .jm-legal { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
#jm-arena * { box-sizing:border-box; }
#jm-arena .jm-stage { padding:22px 12px; }
#jm-arena .jm-app { --jm-bg:light-dark(#eee9db,#181d1a); --jm-panel:light-dark(#e5dfd0,#222a25); --jm-panel-alt:light-dark(#f8f2e5,#2b342d); --jm-ink:light-dark(#20271f,#f0e9d7); --jm-soft:light-dark(#53604e,#b4bead); --jm-line:light-dark(#c7cabb,#465045); --jm-green:light-dark(#316b55,#9bc0a4); --jm-red:light-dark(#a4432c,#ef987d); --jm-title:Impact,Haettenschweiler,'Arial Narrow','Avenir Next Condensed',sans-serif; position:relative; isolation:isolate; max-width:416px; margin:auto; background:var(--jm-bg); color:var(--jm-ink); border-radius:19px; border:1px solid var(--jm-line); box-shadow:0 20px 50px #00000018; overflow:hidden; color-scheme:dark; }
#jm-arena button, #jm-arena input, #jm-arena select { font:inherit; }
#jm-arena button { color:inherit; cursor:var(--cursor-interaction,pointer); -webkit-tap-highlight-color:transparent; }
#jm-arena button:focus-visible, #jm-arena input:focus-visible, #jm-arena select:focus-visible { outline:3px solid var(--jm-green); outline-offset:3px; }
#jm-arena button:disabled { opacity:.4; cursor:default; }
#jm-arena button { transition:background .15s,transform .12s; }
#jm-arena button:active:not(:disabled) { transform:translateY(1px); }
#jm-arena [hidden] { display:none!important; }
#jm-arena .jm-head { display:flex; gap:11px; align-items:center; padding:23px 20px 19px; }
#jm-arena .jm-crest { flex:none; display:grid; place-items:center; width:45px; height:62px; color:var(--jm-ink); background:var(--jm-panel-alt); border:1px solid var(--jm-line); clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%); }
#jm-arena .jm-crest svg { width:26px; height:26px; stroke-width:1.8; }
#jm-arena .jm-skull { display:block; position:relative; width:29px; height:39px; transform:translateY(-4px); background:var(--jm-ink); clip-path:polygon(27% 0,73% 0,89% 10%,88% 25%,100% 35%,83% 49%,72% 48%,71% 81%,64% 100%,36% 100%,29% 81%,28% 48%,17% 49%,0 35%,12% 25%,11% 10%); }
#jm-arena .jm-skull:before { content:''; position:absolute; width:8px; height:9px; border-radius:50% 45% 55% 35%; background:var(--jm-panel-alt); top:8px; left:2px; box-shadow:17px 0 var(--jm-panel-alt); }
#jm-arena .jm-skull:after { content:''; position:absolute; top:22px; left:12px; width:5px; height:11px; background:var(--jm-panel-alt); clip-path:polygon(50% 0,100% 90%,65% 100%,35% 100%,0 90%); }
#jm-arena .jm-teeth { position:absolute; width:14px; height:7px; left:7px; top:29px; background:linear-gradient(90deg,var(--jm-panel-alt) 0 2px,transparent 2px 12px,var(--jm-panel-alt) 12px); clip-path:polygon(0 0,100% 0,86% 100%,14% 100%); }
#jm-arena .jm-symbol { display:inline-block; width:17px; height:17px; flex:none; vertical-align:middle; }
#jm-arena .jm-brand { font:800 28px/.85 var(--jm-title); letter-spacing:.3px; flex:1; min-width:0; margin:0; }
#jm-arena .jm-tagline { display:block; font:500 11px/1.3 system-ui,-apple-system,sans-serif; letter-spacing:0; margin-top:6px; overflow-wrap:anywhere; }
#jm-arena .jm-intro { margin-bottom:24px; line-height:1.6; overflow-wrap:anywhere; }
#jm-arena .jm-intro h3 { font-size:18px; margin:0 0 8px; }
#jm-arena .jm-intro p { margin:0; }
#jm-arena .jm-app { container-type:inline-size; }
#jm-arena .jm-head-actions { display:flex; gap:7px; flex:none; }
#jm-arena .jm-icon-button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--jm-line); border-radius:var(--jm-radius); background:transparent; }
#jm-arena .jm-language-select { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; font-size:9px; font-weight:800; letter-spacing:.8px; line-height:1; }
#jm-arena .jm-language-select select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:var(--cursor-interaction,pointer); }
#jm-arena .jm-language-select:focus-within { outline:3px solid var(--jm-green); outline-offset:3px; }
#jm-arena .jm-locale-code:after { content:'⌄'; margin-left:3px; }
#jm-arena .jm-flag { display:block; width:24px; height:16px; object-fit:contain; border-radius:2px; box-shadow:0 0 0 1px #0002; }
#jm-arena .jm-flag[data-language=en] { width:28px; height:14px; }
@container(max-width:360px) { #jm-arena .jm-brand { font-size:18px; } #jm-arena .jm-head { gap:8px; padding-left:12px; padding-right:12px; } #jm-arena .jm-crest { width:38px; } }
@container(max-width:310px) { #jm-arena .jm-brand { font-size:18px; } #jm-arena .jm-head { gap:7px; } #jm-arena .jm-crest { width:34px; height:56px; } }
#jm-arena .jm-icon-button svg { width:19px; height:19px; }
#jm-arena .jm-stripe { height:4px; background:repeating-linear-gradient(120deg,var(--jm-accent),var(--jm-accent) 10px,var(--jm-bg) 10px,var(--jm-bg) 14px); }
/* Keep responsive sizing outside the scaled match content. */
#jm-arena .jm-body { container-type:inline-size; padding:22px 20px 18px; min-height:594px; }
/* Hide placeholder values until saved settings and translations are ready. */
#jm-arena .jm-app[aria-busy=true] .jm-body, #jm-arena .jm-app[aria-busy=true] .jm-nav { visibility:hidden; }
#jm-arena .jm-topline { display:flex; gap:8px; align-items:center; justify-content:space-between; }
#jm-arena .jm-eyebrow { font-size:10px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:var(--jm-soft); }
#jm-arena .jm-phase { font:700 25px/1 var(--jm-title); letter-spacing:.8px; text-transform:uppercase; margin:7px 0 0; }
#jm-arena .jm-state { font-size:10px; font-weight:800; letter-spacing:.8px; padding:7px 9px; border:1px solid var(--jm-line); border-radius:4px; white-space:nowrap; }
#jm-arena .jm-state[data-running=true] { background:var(--jm-green); border-color:var(--jm-green); color:var(--jm-bg); }
#jm-arena .jm-stones { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; column-gap:12px; position:relative; padding:16px 0 12px; text-align:center; }
#jm-arena .jm-counter { display:flex; align-items:center; justify-content:center; height:110px; }
#jm-arena .jm-stone-number { font:700 clamp(24px,calc(44cqw / var(--jm-stone-digits,1)),110px)/1 var(--jm-title); letter-spacing:-3px; font-variant-numeric:tabular-nums; }
#jm-arena .jm-stones .jm-clock-number { font-size:clamp(24px,9.6cqw,110px); white-space:nowrap; direction:ltr; }
#jm-arena .jm-stone-caption { margin-top:2px; font-size:10px; font-weight:800; letter-spacing:2.6px; color:var(--jm-soft); }
#jm-arena .jm-teams { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:17px; }
#jm-arena .jm-team { background:var(--jm-panel); padding:12px 12px 11px; border-radius:var(--jm-radius); position:relative; overflow:hidden; text-align:center; }
#jm-arena .jm-team:before { content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--jm-team-color); }
#jm-arena .jm-team:first-child { --jm-team-color:#c9724f; }
#jm-arena .jm-team:last-child { --jm-team-color:#76a38b; }
#jm-arena .jm-team-logo { display:block; width:clamp(72px,14vw,112px); height:clamp(72px,14vw,112px); max-width:100%; object-fit:contain; margin:0 auto 10px; }
#jm-arena .jm-stones .jm-team-logo { width:clamp(48px,20cqw,112px); height:clamp(48px,20cqw,112px); margin:0 auto; }
#jm-arena .jm-team-brand { grid-row:1; width:48%; min-width:0; min-height:calc(clamp(48px,20cqw,112px) + 19px); justify-self:center; display:flex; flex-direction:column; justify-content:center; }
#jm-arena .jm-team-brand[data-team-side=teamA] { grid-column:1; }
#jm-arena .jm-team-brand[data-team-side=teamB] { grid-column:2; }
#jm-arena .jm-counter, #jm-arena [data-read=match-clock] { grid-column:1/-1; grid-row:1; }
#jm-arena .jm-stone-caption { grid-column:1/-1; }
#jm-arena .jm-team-name { display:flex; justify-content:center; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:1.2px; min-width:0; min-height:19px; }
#jm-arena .jm-team-brand:has(.jm-team-logo[hidden]) { padding:8px 4px; border:3px solid var(--jm-team-color); border-radius:var(--jm-radius); background:color-mix(in srgb,var(--jm-team-color) 30%,var(--jm-bg)); }
#jm-arena .jm-team-brand[data-team-color=false]:has(.jm-team-logo[hidden]) { border-color:var(--jm-line); background:var(--jm-panel); }
#jm-arena .jm-team-brand:has(.jm-team-logo[hidden]) .jm-team-name { font:700 clamp(18px,4.5cqw,30px)/1.1 var(--jm-title); letter-spacing:.3px; }
#jm-arena .jm-team-brand:has(.jm-team-logo[hidden]) .jm-team-name>span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; white-space:normal; overflow-wrap:anywhere; }
#jm-arena .jm-team-name>span, #jm-arena .jm-result-team { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#jm-arena .jm-score { font:700 69px/1.1 var(--jm-title); font-variant-numeric:tabular-nums; }
#jm-arena .jm-score-controls { display:flex; gap:6px; margin-top:4px; }
#jm-arena .jm-score-controls button { min-height:44px; border:1px solid var(--jm-line); background:transparent; border-radius:5px; font-size:12px; font-weight:800; }
#jm-arena .jm-score-controls .jm-minus { width:44px; flex:none; font-size:20px; }
#jm-arena .jm-score-controls .jm-point { flex:1; }
#jm-arena .jm-timing { display:flex; justify-content:space-between; gap:8px; margin:16px 0; }
#jm-arena .jm-timing div { display:flex; flex-direction:column; justify-content:center; text-align:center; flex:1; }
#jm-arena .jm-timing span { display:block; font-size:9px; font-weight:700; color:var(--jm-soft); letter-spacing:.9px; text-transform:uppercase; }
#jm-arena .jm-timing strong { display:block; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:4px; }
#jm-arena .jm-primary { display:flex; align-items:center; justify-content:center; gap:10px; background:var(--jm-accent); border:0; color:var(--jm-accent-ink); min-height:56px; width:100%; border-radius:var(--jm-radius); font-size:14px; font-weight:800; }
#jm-arena .jm-primary svg { width:18px; height:18px; }
#jm-arena [data-action=toggle] { margin-top:14px; }
#jm-arena [data-view=setup]>.jm-primary { margin-top:14px; }
#jm-arena [data-read=stones] { width:calc(var(--jm-stone-digits,1)*1ch + 12px); max-width:30%; min-width:56px; height:100%; min-height:56px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--jm-ink); text-align:center; appearance:textfield; }
#jm-arena [data-read=stones]::-webkit-inner-spin-button, #jm-arena [data-read=stones]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
#jm-arena [data-read=stones]:focus-visible { outline:3px solid var(--jm-green); outline-offset:3px; border-radius:6px; }
#jm-arena .jm-secondary { border:1px solid var(--jm-line); border-radius:var(--jm-radius); background:transparent; min-height:44px; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 12px; }
#jm-arena .jm-secondary svg { width:15px; height:15px; }
#jm-arena .jm-secondary[aria-pressed=true] { background:var(--jm-ink); color:var(--jm-bg); }
#jm-arena .jm-actions { display:flex; gap:10px; margin-top:10px; }
#jm-arena .jm-actions>* { flex:1; }
#jm-arena .jm-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; background:var(--jm-panel); padding:10px 10px 13px; border-top:1px solid var(--jm-line); }
#jm-arena .jm-nav button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border:0; background:transparent; color:var(--jm-soft); border-radius:7px; font-size:11px; font-weight:800; }
#jm-arena .jm-nav svg { width:17px; height:17px; }
#jm-arena .jm-nav button[aria-current=page] { background:var(--jm-panel-alt); color:var(--jm-ink); box-shadow:inset 0 -2px var(--jm-accent); }
#jm-arena .jm-page-title { font:700 39px/1 var(--jm-title); margin:8px 0 22px; text-transform:uppercase; }
#jm-arena .jm-field { display:block; margin:17px 0; }
#jm-arena .jm-label { display:flex; justify-content:space-between; gap:8px; font-size:11px; font-weight:700; margin-bottom:9px; }
#jm-arena .jm-label output { color:var(--jm-soft); font-variant-numeric:tabular-nums; flex-shrink:0; white-space:nowrap; direction:ltr; }
#jm-arena .jm-sound-tabs { display:flex; gap:8px; margin-bottom:20px; border-bottom:1px solid var(--jm-line); }
#jm-arena .jm-sound-tabs button { flex:1; min-width:0; min-height:48px; padding:10px 8px; border:0; border-bottom:3px solid transparent; border-radius:6px 6px 0 0; background:transparent; color:var(--jm-soft); font-size:14px; font-weight:700; }
#jm-arena .jm-sound-tabs button[aria-selected=true] { border-bottom-color:var(--jm-accent); background:var(--jm-panel); color:var(--jm-ink); }
#jm-arena .jm-range { width:100%; accent-color:var(--jm-accent); height:24px; margin:0; cursor:var(--cursor-interaction,pointer); }
#jm-arena .jm-wave { height:63px; display:flex; align-items:center; justify-content:center; gap:3px; padding:8px 16px; margin:15px 0 18px; background:var(--jm-panel); border-radius:var(--jm-radius); }
#jm-arena .jm-wave span { width:4px; flex:1; max-width:5px; background:var(--jm-accent); border-radius:2px; }
#jm-arena .jm-field input[type=text], #jm-arena .jm-field input[type=number], #jm-arena .jm-field select { width:100%; min-width:0; padding:11px 12px; min-height:44px; border:1px solid var(--jm-line); border-radius:6px; background:var(--jm-panel); color:var(--jm-ink); font-size:14px; }
#jm-arena .jm-fields-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
#jm-arena .jm-fields-pair .jm-field { margin-top:0; }
#jm-arena .jm-field { min-width:0; }
#jm-arena .jm-team-card { padding:12px; border:1px solid var(--jm-line); border-radius:var(--jm-radius); }
#jm-arena .jm-logo-editor { display:grid; gap:8px; margin-top:12px; }
#jm-arena .jm-logo-editor .jm-team-logo { width:64px; height:64px; margin-bottom:0; }
#jm-arena .jm-logo-preview { display:flex; justify-content:center; }
#jm-arena .jm-logo-preview .jm-team-logo { margin:0; }
#jm-arena .jm-logo-preview:has(.jm-team-logo[hidden]) { display:none; }
#jm-arena .jm-logo-actions { display:flex; align-items:center; gap:8px; }
#jm-arena .jm-logo-actions .jm-logo-upload { flex:1; }
#jm-arena .jm-logo-upload { position:relative; overflow:hidden; cursor:pointer; }
#jm-arena .jm-logo-upload input[type=file] { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
#jm-arena .jm-logo-upload:has(input:disabled) { opacity:.45; cursor:default; }
#jm-arena .jm-logo-upload:focus-within { outline:2px solid var(--jm-green); outline-offset:3px; }
#jm-arena [data-view=setup]>.jm-logo-hint { grid-column:1/-1; margin:8px 0 14px; }
#jm-arena .jm-team-color { display:block; margin-top:12px; }
#jm-arena .jm-color-actions { display:flex; align-items:center; gap:8px; }
#jm-arena .jm-color-actions input[type=color] { flex:1; min-width:0; }
#jm-arena .jm-color-actions .jm-icon-button { flex:none; }
#jm-arena .jm-color-actions[data-empty=true] input::-webkit-color-swatch { opacity:0; }
#jm-arena .jm-color-actions[data-empty=true] input::-moz-color-swatch { opacity:0; }
#jm-arena .jm-team-entry { display:flex; gap:8px; align-items:center; min-width:0; direction:ltr; }
#jm-arena .jm-team-combo { position:relative; flex:1; min-width:0; }
[dir=rtl] #jm-arena .jm-team-combo { direction:rtl; }
#jm-arena .jm-team-combo input[type=text] { padding-inline-end:48px; }
#jm-arena .jm-team-combo select { position:absolute; inset-block:0; inset-inline-end:0; width:44px; padding:0; appearance:none; color:transparent; background:transparent; border:0; border-inline-start:1px solid var(--jm-line); border-radius:0; }
#jm-arena .jm-team-combo select option { color:var(--jm-ink); background:var(--jm-panel); }
#jm-arena .jm-team-combo>span { position:absolute; inset-inline-end:0; top:0; width:44px; height:100%; display:grid; place-items:center; pointer-events:none; }
#jm-arena .jm-team-delete { width:44px; flex-shrink:0; }
#jm-arena .jm-divider { border:0; border-top:1px solid var(--jm-line); margin:22px 0; }
#jm-arena .jm-check { display:flex; align-items:center; gap:10px; min-height:44px; font-size:12px; font-weight:600; }
#jm-arena .jm-check input { width:18px; height:18px; accent-color:var(--jm-accent); }
#jm-arena .jm-note { font-size:10px; color:var(--jm-soft); margin:13px 0 0; text-align:center; line-height:1.6; }
#jm-arena .jm-sheet-cover { position:absolute; z-index:10; inset:0; background:#0008; display:flex; align-items:flex-end; }
#jm-arena .jm-sheet { background:var(--jm-bg); width:100%; border-radius:17px 17px 0 0; padding:24px 22px; border-top:1px solid var(--jm-line); }
#jm-arena .jm-sheet h3 { font:700 35px/1 var(--jm-title); margin:0 0 12px; }
#jm-arena .jm-sheet p { font-size:13px; line-height:1.7; margin:0 0 22px; }
#jm-arena .jm-sheet .jm-secondary { width:100%; margin-top:9px; }
#jm-arena .jm-app { height:auto!important; width:100%; font-size:14px; --f7-dialog-bg-color:var(--jm-panel-alt); --f7-dialog-text-color:var(--jm-ink); --f7-dialog-button-text-color:var(--jm-ink); --f7-dialog-border-radius:17px; --f7-dialog-title-font-size:25px; }
#jm-arena .jm-app .dialog { position:absolute; max-width:calc(100% - 32px); color:var(--jm-ink); background:var(--jm-panel-alt); border:1px solid var(--jm-line); border-radius:17px; }
#jm-arena .jm-app .dialog-title { font-family:var(--jm-title); line-height:1.1; }
#jm-arena .jm-app .dialog-text { font-size:13px; line-height:1.6; }
#jm-arena .jm-result-dialog .dialog-inner { max-height:calc(100dvh - 160px); overflow:auto; }
#jm-arena .jm-result-dialog .jm-dialog-description:not(.jm-winner-message) { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
#jm-arena .jm-winner-message { display:flex; align-items:baseline; justify-content:center; white-space:pre; }
#jm-arena .jm-winner-message>span:not(.jm-result-team) { flex:none; }
#jm-arena .jm-final-score { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; margin:16px 0; text-align:start; }
#jm-arena .jm-final-score strong { font-size:clamp(26px,7vw,36px); font-weight:900; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#jm-arena .jm-final-score b { font-size:44px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
#jm-arena .jm-app .dialog-button { border-radius:9px; background:var(--jm-panel); color:var(--jm-ink); font:700 12px/1.4 system-ui,-apple-system,sans-serif; text-transform:none; min-height:44px; white-space:normal; padding:10px; }
#jm-arena .jm-app .dialog-button.button-fill { background:var(--jm-accent); color:var(--jm-accent-ink); }
#jm-arena .jm-app .dialog-backdrop { position:absolute; inset:0; background:#0008; }
#jm-arena .jm-range-wrap { height:28px; position:relative; --f7-range-bar-size:4px; --f7-range-knob-size:23px; --f7-range-knob-color:var(--jm-accent); --f7-range-bar-active-bg-color:var(--jm-accent); --f7-range-bar-bg-color:var(--jm-line); }
#jm-arena .jm-range-wrap input[type=range] { display:block!important; opacity:0; position:absolute; inset:0; width:100%; height:28px; z-index:3; pointer-events:none; }
#jm-arena .jm-range-wrap:focus-within { outline:2px solid var(--jm-green); outline-offset:4px; border-radius:4px; }
#jm-arena .jm-nav .tab-link { height:auto; flex-direction:row; text-decoration:none; }
@media(max-width:380px) { #jm-arena .jm-stage { padding:12px 0; } #jm-arena .jm-head { padding:20px 15px 17px; } #jm-arena .jm-body { padding:19px 14px 17px; } #jm-arena .jm-score-controls .jm-point { font-size:11px; } #jm-arena .jm-team { padding:12px 8px 10px; } }
@media(prefers-reduced-motion:reduce) { #jm-arena button { transition:none; } }

html { color-scheme:dark; background:light-dark(#eee9db,#181d1a); }
body { margin:0; font-family:system-ui,-apple-system,sans-serif; }
.jm-noscript { max-width:720px; margin:auto; padding:24px; line-height:1.6; }
#jm-arena .jm-statusbar { display:none; }
@supports(-webkit-touch-callout:none) {
  @media(display-mode:standalone) {
    /* iOS 27 samples a real fixed background to avoid blurring the status bar. */
    #jm-arena .jm-statusbar { display:block; position:fixed; top:0; left:0; right:0; height:6px; background:light-dark(#eee9db,#181d1a); z-index:1000; pointer-events:none; }
  }
}
#jm-arena .jm-stage { padding:0; }
#jm-arena .jm-app { max-width:none; min-height:100dvh; border:0; border-radius:0; box-shadow:none; overflow:visible; padding-top:env(safe-area-inset-top); }
#jm-arena .jm-head { padding-top:16px; padding-bottom:16px; }
#jm-arena .jm-body { min-height:0; }
#jm-arena .jm-stage>.jm-app { display:flex; flex-direction:column; height:100vh!important; height:100dvh!important; min-height:0; overflow:hidden; }
#jm-arena .jm-stage>.jm-app>.jm-nav { flex-shrink:0; }
#jm-arena .jm-stage>.jm-app>.jm-head, #jm-arena .jm-stage>.jm-app>.jm-stripe { flex-shrink:0; }
#jm-arena [data-view=match] { width:calc(100% / var(--jm-match-scale,1)); min-height:var(--jm-match-content-height,0px); transform:scale(var(--jm-match-scale,1)); transform-origin:top left; }
#jm-arena .jm-body[data-fit-match] { height:var(--jm-match-height); overflow:hidden; }
#jm-arena .jm-scroll { flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
#jm-arena .jm-language-picker { position:relative; }
#jm-arena .jm-language-select { gap:1px; }
#jm-arena .jm-language-select .jm-select-arrow { width:10px; height:10px; }
#jm-arena .jm-language-options { position:absolute; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); top:calc(100% + 7px); right:0; padding:5px; width:min(244px,calc(100vw - 32px)); max-height:min(60vh,320px); overflow-y:auto; z-index:30; background:var(--jm-panel-alt); border:1px solid var(--jm-line); border-radius:var(--jm-radius); box-shadow:0 8px 20px #0003; }
#jm-arena .jm-language-options button { display:grid; place-items:center; min-height:44px; width:100%; background:transparent; border:0; border-radius:5px; }
#jm-arena .jm-language-options button[aria-selected=true] { background:var(--jm-panel); box-shadow:inset 0 -2px var(--jm-accent); }
#jm-arena .jm-field input[type=color] { width:100%; height:44px; padding:4px; border:1px solid var(--jm-line); background:var(--jm-panel); border-radius:6px; }
#jm-arena .jm-field input[type=text], #jm-arena .jm-field input[type=number], #jm-arena .jm-field select { font-size:16px; }
#jm-arena .jm-eyebrow, #jm-arena .jm-stone-caption, #jm-arena .jm-state, #jm-arena .jm-note { font-size:11px; }
#jm-arena .jm-label, #jm-arena .jm-secondary, #jm-arena .jm-nav button { font-size:12px; }
#jm-arena .jm-nav { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
#jm-arena .jm-timing { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
#jm-arena .jm-timing span { font-size:10px; letter-spacing:.2px; }
#jm-arena .jm-app .dialog, #jm-arena .jm-app .dialog-backdrop { position:fixed; }
#jm-arena .jm-offline { padding:12px 20px; font-size:11px; color:var(--jm-soft); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#jm-arena .jm-version { margin-left:auto; }
#jm-arena .jm-offline button { border:1px solid var(--jm-line); border-radius:5px; padding:8px; color:var(--jm-ink); background:var(--jm-panel); min-height:44px; }
#jm-arena .jm-alert, #jm-arena .jm-update { margin:12px 20px; padding:12px; background:var(--jm-panel-alt); border:1px solid var(--jm-line); border-radius:var(--jm-radius); font-size:13px; line-height:1.5; }
#jm-arena .jm-update { display:flex; align-items:center; gap:12px; justify-content:space-between; }
#jm-arena .jm-countdown { font:700 64px/1.2 var(--jm-title); text-align:center; color:var(--jm-ink); padding:12px 0; }
#jm-arena .jm-sets { padding:12px; text-align:center; font-weight:700; background:var(--jm-panel); border-radius:var(--jm-radius); margin-top:12px; }
#jm-arena .jm-sets { display:grid; place-items:center; }
#jm-arena .jm-info-links { display:grid; gap:10px; }
#jm-arena .jm-info-links details { border:1px solid var(--jm-line); background:var(--jm-panel); border-radius:var(--jm-radius); }
#jm-arena .jm-info-links summary { padding:16px; min-height:48px; font-weight:600; cursor:pointer; }
#jm-arena .jm-document { padding:0 16px 16px; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
#jm-arena .jm-document h1 { font:700 28px/1.2 var(--jm-title); }
#jm-arena .jm-document h2 { font-size:18px; line-height:1.3; margin-top:24px; }
#jm-arena .jm-document[aria-busy=true] { opacity:.5; }
#jm-arena .jm-document pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; margin:0; }
#jm-arena .jm-info-links .jm-document a { display:inline; padding:0; min-height:0; border:0; background:transparent; text-decoration:underline; }
#jm-arena .jm-info-links a { display:block; padding:16px; min-height:48px; border:1px solid var(--jm-line); color:var(--jm-ink); background:var(--jm-panel); border-radius:var(--jm-radius); font-weight:600; text-decoration:none; }
#jm-arena .jm-info-version { color:var(--jm-soft); margin:0 0 24px; }
#jm-arena [data-view=info] .jm-alert { margin:0 0 24px; }
#jm-arena .jm-home-guide { margin-bottom:24px; line-height:1.6; font-size:14px; overflow-wrap:anywhere; }
#jm-arena .jm-home-guide h3 { font-size:18px; margin:0 0 10px; }
#jm-arena .jm-home-guide details { margin:8px 0; padding:0 12px; border:1px solid var(--jm-line); border-radius:var(--jm-radius); background:var(--jm-panel); }
#jm-arena .jm-home-guide summary { padding:12px 0; min-height:44px; cursor:pointer; font-weight:600; }
#jm-arena .jm-home-guide ol { padding-inline-start:22px; margin:0 0 12px; }
#jm-arena .jm-home-guide li+li { margin-top:8px; }
#jm-arena .jm-volume { margin-bottom:18px; min-width:0; }
#jm-arena .jm-volume>.jm-field { margin-bottom:0; }
#jm-arena .jm-custom-audio { min-width:0; }
#jm-arena input[type=file] { width:100%; min-width:0; color:var(--jm-ink); font-size:14px; }
#jm-arena input[type=file]::file-selector-button { padding:10px; margin-inline-end:8px; border:1px solid var(--jm-line); border-radius:6px; background:var(--jm-panel); color:var(--jm-ink); }
#jm-arena [data-action=use-custom] { overflow-wrap:anywhere; }
#jm-arena [data-action=delete-custom] { flex:0 0 44px; }
#jm-arena .jm-release-notes { margin-bottom:20px; font-size:14px; }
#jm-arena .jm-head, #jm-arena .jm-nav, #jm-arena .jm-counter, #jm-arena .jm-score, #jm-arena .jm-timing strong { direction:ltr; }
#jm-arena .jm-legal { max-width:900px; padding:20px; line-height:1.7; }
#jm-arena .jm-legal header { display:flex; align-items:center; justify-content:space-between; gap:20px; direction:ltr; }
#jm-arena .jm-legal h1 { font:700 42px/1.1 var(--jm-title); margin-top:28px; }
#jm-arena .jm-legal h2 { font-size:20px; line-height:1.3; margin-top:30px; }
#jm-arena .jm-legal a { color:var(--jm-green); text-underline-offset:3px; }
#jm-arena .jm-legal footer { display:flex; gap:18px; flex-wrap:wrap; margin-top:32px; }
@media(max-width:699px) {
  #jm-arena .jm-team-fields { grid-template-columns:minmax(0,1fr); }
  #jm-arena [data-view=match] { display:flex; flex-direction:column; }
  #jm-arena [data-view=match]>.jm-actions { margin-top:auto; margin-bottom:14px; }
  #jm-arena [data-action=toggle] { margin-top:0; }
}
@media(min-width:700px) {
  #jm-arena .jm-body { padding:26px 30px; max-width:1600px; margin-inline:auto; width:100%; }
  #jm-arena [data-view=match] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:18px; }
  #jm-arena [data-view=match]>.jm-topline, #jm-arena [data-view=match]>.jm-timing, #jm-arena [data-view=match]>.jm-primary, #jm-arena [data-view=match]>.jm-actions, #jm-arena [data-view=match]>.jm-sets, #jm-arena [data-view=match]>.jm-stones, #jm-arena [data-view=match]>.jm-teams { grid-column:1/-1; }
  #jm-arena .jm-teams { margin-top:0; align-content:center; }
  #jm-arena [data-action=toggle] { margin-top:0; }
  #jm-arena .jm-head { padding-left:30px; padding-right:30px; }
}
@media(min-width:1000px) {
  #jm-arena [data-view=setup]>.jm-team-fields { grid-column:1/-1; }
  #jm-arena [data-view=sound], #jm-arena [data-view=setup] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:36px; align-content:start; max-width:none; }
  #jm-arena [data-view=sound]>.jm-eyebrow, #jm-arena [data-view=sound]>.jm-page-title, #jm-arena .jm-sound-tabs, #jm-arena .jm-sound-editor, #jm-arena [data-view=sound]>.jm-actions { grid-column:1/-1; }
  #jm-arena .jm-sound-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:36px; }
  #jm-arena .jm-sound-editor>.jm-wave, #jm-arena .jm-sound-editor>.jm-sound-preview { grid-column:1/-1; }
  #jm-arena [data-view=setup]>.jm-eyebrow, #jm-arena [data-view=setup]>.jm-page-title, #jm-arena [data-view=setup]>.jm-divider, #jm-arena [data-view=setup]>.jm-check, #jm-arena [data-view=setup]>.jm-primary, #jm-arena [data-view=setup]>.jm-actions, #jm-arena [data-view=setup]>.jm-note { grid-column:1/-1; }
}
@media(max-width:479px) {
  #jm-arena[lang=de] .jm-nav { grid-template-columns:minmax(0,1fr) minmax(max-content,1fr) minmax(0,1fr) minmax(0,1fr); }
  #jm-arena .jm-nav .tab-link { flex-direction:column; gap:4px; min-width:0; padding:5px 2px; }
}
@media(max-width:699px) and (max-height:740px) {
  #jm-arena .jm-body[data-fit-match] { padding:4px 14px; }
  #jm-arena [data-view=match] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; }
  #jm-arena [data-view=match]>* { grid-column:1/-1; }
  #jm-arena [data-view=match]>.jm-actions { display:contents; }
  #jm-arena [data-view=match] .jm-secondary { padding:4px; gap:4px; font-size:10px; }
  #jm-arena .jm-phase { font-size:21px; margin-top:3px; }
  #jm-arena .jm-stones { padding:0; column-gap:8px; }
  #jm-arena .jm-stone-number { font-size:min(clamp(24px,calc(44cqw / var(--jm-stone-digits,1)),110px),clamp(48px,10vh,74px)); }
  #jm-arena .jm-counter { height:clamp(48px,10vh,74px); }
  #jm-arena .jm-teams { margin:0; gap:8px; }
  #jm-arena .jm-team { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px; padding:5px 8px; }
  #jm-arena .jm-team-name { letter-spacing:.3px; }
  #jm-arena .jm-score-controls { grid-column:1/-1; margin:0; }
  #jm-arena .jm-score { font-size:28px; line-height:1; }
  #jm-arena [data-action=toggle] { margin:0; min-height:44px; }
  #jm-arena .jm-timing { margin:0; }
  #jm-arena .jm-timing strong { margin-top:2px; }
  #jm-arena .jm-sets { padding:5px; margin:0; }
}

#jm-arena [data-view=match]>.jm-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#jm-arena [data-view=match]>.jm-actions button { min-width:0; padding-inline:6px; gap:4px; }
#jm-arena .jm-app .jm-history-dialog { --f7-dialog-width:min(420px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; }
#jm-arena .jm-history-dialog .dialog-inner, #jm-arena .jm-history-dialog .dialog-text { display:flex; flex-direction:column; min-height:0; }
#jm-arena .jm-history-dialog .dialog-buttons { flex-shrink:0; }
#jm-arena .jm-results-list { max-height:55dvh; min-height:0; overflow-y:auto; overscroll-behavior:contain; text-align:start; overflow-wrap:anywhere; }
#jm-arena .jm-results-list ul { list-style:none; margin:0; padding:0; }
#jm-arena .jm-results-list li { padding:14px 0; border-bottom:1px solid var(--jm-line); }
#jm-arena .jm-results-list small { display:block; margin-top:4px; color:var(--jm-soft); }
@media(max-width:699px) and (max-height:740px) { #jm-arena [data-view=match]>.jm-actions { margin-top:0; } }
@media(max-width:359px) { #jm-arena [data-view=match]>.jm-actions svg { display:none; } }

#jm-arena .jm-stone-dialog { --f7-dialog-width:min(360px,calc(100vw - 32px)); }
#jm-arena .jm-stone-entry { width:100%; min-height:48px; padding:6px; border:1px solid var(--jm-line); border-radius:6px; background:var(--jm-panel); color:var(--jm-ink); text-align:center; font-size:28px; font-variant-numeric:tabular-nums; }
#jm-arena .jm-stone-entry:invalid { border-color:var(--jm-red); }
#jm-arena .jm-stone-wheel { height:180px; margin-top:12px; direction:ltr; --f7-picker-item-height:36px; --f7-picker-inline-height:180px; --f7-picker-column-font-size:28px; --f7-picker-item-selected-bg-color:var(--jm-panel-alt); --f7-picker-item-text-color:var(--jm-soft); --f7-picker-item-selected-text-color:var(--jm-ink); }
#jm-arena .jm-stone-wheel .picker-column { flex:1; min-width:0; padding:0; }
#jm-arena .jm-stone-wheel .picker-column:focus-visible { outline:2px solid var(--jm-green); outline-offset:-2px; }
#jm-arena .jm-stone-wheel .picker-item { padding:0; }
#jm-arena .jm-stone-wheel .picker-columns { --f7-picker-mask-bg-color:var(--jm-bg); text-align:center; }