/* OfficiateHockey.com Penalty Box Simulator. Everything is scoped to .oh-sim / #app so it can sit inside the site layout. Layout: facilitator = control console beside a live copy of the stage; presentation = the stage alone, covering the window. The scoreboard and the scoresheet are objects with their own fixed look (LED board, paper form) in both themes. Site pages can retint the app with --oh-accent / --oh-accent-deep on any ancestor. No inline styles are needed (CSP). */ @font-face { font-family: 'OH Oxanium'; font-style: normal; font-weight: 600 800; font-display: optional; src: url(fonts/oxanium-latin.woff2) format('woff2'); } @font-face { font-family: 'OH Patrick Hand'; font-style: normal; font-weight: 400; font-display: optional; src: url(fonts/patrickhand-latin.woff2) format('woff2'); } .oh-sim { --navy: #13233a; --navy-2: #1d3352; --bg: #f4f6f9; --panel: #ffffff; --ink: #1f2933; --ink2: #52606d; --line: #d5dbe3; --field: #ffffff; --accent: var(--oh-accent, #1d5ca8); --accent-ink: #ffffff; --accent-deep: var(--oh-accent-deep, #164a87); --tint: #e7eff9; --ok: #1d7a45; --bad: #b3261e; --hold: #855400; --home: #c62f3b; --visitor: #2863c4; --board: #141516; --board-2: #1e2023; --board-ink: #f4f0ea; --board-dim: #9a9ea4; --board-line: #2f3236; --led: #ff8a3d; --led-soft: #ffd7b8; --ice: #eaf3f8; --ice-line: #b7cfde; --glass: #cfe0ea; --paper: #fffef7; --paper-ink: #111111; --paper-line: #1b1b1b; --paper-soft: #6f6f6f; --pen: #1b3f96; --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-led: 'OH Oxanium', 'Consolas', 'Menlo', monospace; --font-hand: 'OH Patrick Hand', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .oh-sim { --bg: #15191f; --panel: #1f252d; --ink: #eef1f4; --ink2: #b3bcc6; --line: #36404c; --field: #181d23; --tint: #1b2b40; --accent: var(--oh-accent, #3b7fd4); --accent-deep: var(--oh-accent-deep, #8fbaf0); --ok: #55c487; --bad: #ff8a80; --hold: #f0b95b; color-scheme: dark; } } :root[data-theme="dark"] .oh-sim { --bg: #15191f; --panel: #1f252d; --ink: #eef1f4; --ink2: #b3bcc6; --line: #36404c; --field: #181d23; --tint: #1b2b40; --accent: var(--oh-accent, #3b7fd4); --accent-deep: var(--oh-accent-deep, #8fbaf0); --ok: #55c487; --bad: #ff8a80; --hold: #f0b95b; color-scheme: dark; } /* Isolation: undo whatever the site stylesheet gives these elements (specificity 1,0,0, so every #app rule below wins). */ #app :where(*:not(svg, svg *)) { all: revert; } #app, #app * { box-sizing: border-box; } #app [hidden] { display: none !important; } .oh-sim { color: var(--ink); max-width: 100%; } .oh-sim .sim-notice { background: var(--tint); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 8px; padding: 12px 14px; margin: 0 0 12px; font-family: var(--font-ui); } .oh-sim .sim-notice[hidden] { display: none; } #app { display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 14px; line-height: 1.4; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; text-align: left; } #app button, #app input, #app select, #app textarea { font: inherit; color: inherit; } #app button { cursor: pointer; } #app a { color: var(--accent-deep); } #app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #app h2, #app h3, #app p, #app ul, #app ol { margin: 0; } #app h2, #app h3 { text-wrap: balance; } #app b { font-weight: 700; } #app .top { background: var(--navy); color: #fff; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 10px 16px; border-bottom: 3px solid var(--accent); } #app .brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; } #app .appname { font-weight: 800; font-size: 18px; color: #fff; letter-spacing: -.1px; } #app .tag { color: #c9d3df; font-size: 12px; } #app .codes { display: flex; flex-wrap: wrap; gap: 6px; } #app .views { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #app .seg { background: transparent; color: #fff; border: 1px solid #5b6b80; padding: 6px 12px; border-radius: 6px; font-weight: 600; } #app .seg:hover { border-color: #fff; } #app .seg.on { background: var(--accent); border-color: #9cc1ee; } #app .codes .seg.on { background: #fff; color: var(--navy); border-color: #fff; } #app .views a { color: #cfe2fa; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } #app .sim-main { flex: 1; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 16px; padding: 16px; align-items: start; } #app #console { display: flex; flex-direction: column; gap: 14px; min-width: 0; } #app #stage { min-width: 0; display: flex; flex-direction: column; gap: 14px; } #app .colL, #app .colR { display: contents; } #app .board { order: 1; } #app .ask { order: 2; } #app .boxes { order: 3; } #app #presRul { order: 4; } #app .sheetwrap { order: 5; } #app .credit { order: 6; } #app .alert { background: var(--tint); border: 1px solid var(--bad); border-left-width: 5px; border-radius: 8px; padding: 10px 12px; color: var(--ink); font-weight: 600; font-size: 13px; } @media (max-width: 1080px) { #app .sim-main { grid-template-columns: minmax(0, 1fr); } } #app .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-width: 0; } #app .card > h2 { font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink2); margin-bottom: 10px; } #app .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #app .row + .row { margin-top: 10px; } #app .grow { flex: 1 1 120px; min-width: 0; } #app label.f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink2); font-weight: 600; min-width: 0; } #app input[type=text], #app input[type=number], #app select, #app textarea { background: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; min-width: 0; width: 100%; color: var(--ink); } #app textarea { min-height: 110px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; } #app .chk { display: flex; gap: 7px; align-items: center; font-size: 13px; color: var(--ink); } #app .hint { font-size: 12px; color: var(--ink2); } #app .btn { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 8px 12px; font-weight: 600; color: var(--ink); } #app .btn:hover { border-color: var(--accent); } #app .btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } #app .btn.pri:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; } #app .btn.dark { background: var(--navy); border-color: var(--navy); color: #fff; } #app .btn.sm { padding: 5px 9px; font-size: 12px; } #app .btn.on { background: var(--tint); border-color: var(--accent); } #app .btn.home.on { background: var(--home); border-color: var(--home); color: #fff; } #app .btn.vis.on { background: var(--visitor); border-color: var(--visitor); color: #fff; } #app .btn[disabled] { opacity: .45; cursor: default; } #app .btn.link { border: 0; background: none; padding: 2px 4px; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } /* transport */ #app .tclock { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } #app .tclock b { font-family: var(--font-led); font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; } #app .tclock span { color: var(--ink2); font-weight: 600; } #app .pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--tint); color: var(--accent-deep); } #app .pill.run { background: var(--ok); color: #fff; } #app .pill.rev { background: var(--hold); color: #fff; } #app .scrub { position: relative; padding-top: 12px; } #app .scrub input { width: 100%; padding: 0; border: 0; background: none; accent-color: var(--accent); } #app .marks { position: absolute; left: 8px; right: 8px; top: 0; height: 12px; pointer-events: none; } #app .marks i { position: absolute; top: 2px; width: 3px; height: 9px; margin-left: -1px; border-radius: 2px; background: var(--ink2); } #app .marks i.H { background: var(--home); } #app .marks i.V { background: var(--visitor); } #app .marks i.g { height: 12px; top: 0; width: 4px; } #app .marks i.p { background: var(--line); width: 1px; height: 12px; top: 0; } /* tabs */ #app .tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: -4px -4px 12px; padding: 0 4px; } #app .tabs button { border: 0; background: none; padding: 8px 10px; font-weight: 700; color: var(--ink2); border-bottom: 3px solid transparent; } #app .tabs button.on { color: var(--ink); border-bottom-color: var(--accent); } #app .kinds { display: flex; flex-wrap: wrap; gap: 6px; } #app .partlist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 30px; } #app .part { background: var(--navy); color: #fff; border-radius: 6px; padding: 3px 8px; font-weight: 700; font-size: 13px; border: 0; } #app .part:after { content: ' ×'; opacity: .7; } #app .msg { font-size: 13px; font-weight: 600; color: var(--bad); min-height: 18px; } #app .msg.ok { color: var(--ok); } #app table.log { width: 100%; border-collapse: collapse; font-size: 13px; } #app table.log td { padding: 6px 6px; border-top: 1px solid var(--line); vertical-align: top; } #app table.log tr.future td { opacity: .5; } #app table.log tr.stop td { color: var(--ink2); font-size: 12px; } #app table.log tr.editing td { background: var(--tint); } #app table.log .tm { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; } #app .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--ink2); } #app .dot.H { background: var(--home); } #app .dot.V { background: var(--visitor); } #app .logwrap { max-height: 320px; overflow: auto; } #app .rule { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; } #app .rule:first-child { border-top: 0; } #app .rule .when { flex: 0 0 62px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink2); } #app .rule .body { flex: 1 1 0; min-width: 0; } #app .rule .cite { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--ink2); white-space: nowrap; } #app .rule.terminate .when, #app .rule.washout .when { color: var(--bad); } #app .rule.release .when { color: var(--ok); } #app .rule.choice, #app .rule.warn { border-left: 4px solid var(--accent); padding-left: 8px; margin-left: -12px; } #app .rule.warn { border-left-color: var(--hold); } #app .rule.choice .when { color: var(--accent-deep); } #app .rule.warn .when { color: var(--hold); } #app .rule .tagk { display: inline-block; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; font-weight: 800; color: var(--accent-deep); margin-right: 2px; } #app .rule.warn .tagk { color: var(--hold); } #app .choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } #app .choices .btn { text-align: left; white-space: normal; } #app .choices .btn.on { border-width: 2px; padding: 4px 8px; } #app .empty { color: var(--ink2); font-size: 13px; } /* ---------- stage ---------- */ #app .board { background: var(--board); color: var(--board-ink); border-radius: 12px; padding: 14px 16px 12px; border: 2px solid var(--board-line); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 14px; align-items: center; } #app .board .tmn { display: flex; align-items: center; gap: 12px; min-width: 0; } #app .board .tmn.vis { flex-direction: row-reverse; text-align: right; } #app .tname { font-weight: 800; font-size: 20px; letter-spacing: .5px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding: 2px 10px; border-radius: 6px; color: #fff; } #app .tmn.home .tname { background: var(--home); } #app .tmn.vis .tname { background: var(--visitor); } #app .score { font-family: var(--font-led); font-weight: 800; font-size: 54px; line-height: 1; color: var(--led); font-variant-numeric: tabular-nums; } #app .mid { text-align: center; } #app .per { font-size: 12px; letter-spacing: 2px; color: var(--board-dim); font-weight: 700; } #app .clock { font-family: var(--font-led); font-weight: 800; font-size: 68px; line-height: 1; color: var(--led); font-variant-numeric: tabular-nums; } #app .runst { font-size: 11px; letter-spacing: 1.6px; font-weight: 700; color: var(--board-dim); min-height: 15px; } #app .runst.go { color: #7fe3a5; } #app .runst.rev { color: #ffcf6b; } #app .pens { display: flex; flex-direction: column; gap: 5px; min-height: 62px; min-width: 0; } #app .pens.vis { align-items: flex-end; } #app .pc { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; background: var(--board-2); border: 1px solid var(--board-line); border-radius: 6px; padding: 3px 10px; min-width: 0; } #app .pc .n { font-family: var(--font-led); font-weight: 700; font-size: 20px; color: var(--board-ink); } #app .pc .t { font-family: var(--font-led); font-weight: 800; font-size: 24px; color: var(--led); font-variant-numeric: tabular-nums; } #app .pc .k { font-size: 10px; letter-spacing: 1px; color: var(--board-dim); text-transform: uppercase; white-space: nowrap; } #app .pc.empty { opacity: .28; } #app .dly { font-size: 11px; color: var(--led-soft); letter-spacing: .4px; } #app .str { text-align: center; } #app .str b { display: block; font-family: var(--font-led); font-size: 26px; font-weight: 800; color: var(--board-ink); } #app .str span { font-size: 11px; letter-spacing: 1.4px; color: var(--board-dim); font-weight: 700; text-transform: uppercase; } #app .str.pp span { color: var(--led); } #app .boxes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } @media (max-width: 640px) { #app .boxes { grid-template-columns: minmax(0, 1fr); } #app .board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #app .board .mid { grid-column: 1 / -1; grid-row: 1; } #app .board .tmn.home { grid-column: 1; grid-row: 2; } #app .board .tmn.vis { grid-column: 2; grid-row: 2; } #app .pens.home { grid-column: 1; grid-row: 3; } #app .pens.vis { grid-column: 2; grid-row: 3; } #app .str { grid-column: 1 / -1; grid-row: 4; } #app .score { font-size: 40px; } #app .clock { font-size: 52px; } #app .tname { font-size: 16px; } #app .pc { gap: 0 6px; padding: 3px 6px; } #app .pc .n { font-size: 16px; } #app .pc .t { font-size: 20px; } } #app .pbox { position: relative; background: var(--board-2); border: 2px solid var(--board-line); border-radius: 12px; overflow: hidden; color: var(--board-ink); } #app .pbox h3 { font-size: 11px; letter-spacing: 1.6px; padding: 7px 12px; color: #fff; display: flex; justify-content: space-between; gap: 8px; } #app .pbox.home h3 { background: var(--home); } #app .pbox.vis h3 { background: var(--visitor); } #app .bench { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 12px 6px; min-height: 126px; align-items: flex-start; } #app .bench .none { color: var(--board-dim); font-size: 13px; align-self: center; } #app .ice { position: relative; height: 36px; background: var(--ice); border-top: 3px solid var(--glass); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; color: #33566b; font-size: 11px; font-weight: 700; letter-spacing: 1px; overflow: hidden; } #app .ice > span { position: relative; z-index: 2; } #app .door { display: inline-flex; align-items: center; gap: 6px; } #app .door i { width: 12px; height: 12px; border-radius: 50%; background: #c9d6dd; border: 2px solid #8fa9b8; } #app .door.open i { background: #2fc46e; border-color: #17813f; box-shadow: 0 0 0 4px rgba(47, 196, 110, .3); } #app .relmsg { font-weight: 800; color: #17813f; background: var(--ice); padding: 0 6px; border-radius: 4px; letter-spacing: .3px; text-align: right; min-width: 0; margin-left: auto; } #app .relmsg:empty { display: none; } #app .relmsg.out { color: #8a2a22; } #app .skater { position: absolute; z-index: 1; top: 50%; width: 30px; height: 28px; margin: -14px 0 0 -15px; animation: skate 1.9s ease-in forwards; pointer-events: none; } #app .skater svg { width: 100%; height: 100%; display: block; } #app .skater b { position: absolute; left: 0; right: 0; top: 8px; text-align: center; font-family: var(--font-led); font-weight: 800; font-size: 10px; line-height: 1; color: #fff; } @keyframes skate { 0% { transform: translate(0, -24px); opacity: 0; } 18% { transform: translate(0, 0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--dx, -200px), 0); opacity: 0; } } #app .pl { width: 86px; text-align: center; } #app .jersey { position: relative; width: 64px; height: 60px; margin: 0 auto; } #app .jersey svg { width: 100%; height: 100%; display: block; } #app .jersey b { position: absolute; left: 0; right: 0; top: 17px; font-family: var(--font-led); font-weight: 800; font-size: 21px; color: #fff; line-height: 1; } #app .pl .tl { font-family: var(--font-led); font-weight: 800; font-size: 19px; color: var(--led); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; } #app .pl .stt { font-size: 10.5px; line-height: 1.2; color: var(--board-dim); letter-spacing: .2px; } #app .pl.sub .jersey { opacity: .78; } #app .pl .badge { position: absolute; right: -6px; top: -4px; background: var(--board-ink); color: #111; font-size: 9px; font-weight: 800; border-radius: 4px; padding: 1px 4px; letter-spacing: .5px; } #app .pl.delayed .jersey { filter: grayscale(.7); opacity: .65; } #app .pl.delayed .tl { color: var(--board-dim); } #app .pl.coin .tl, #app .pl.misc .tl { color: var(--led-soft); } #app .pl.waiting .tl { color: #7fe3a5; font-size: 13px; padding-top: 3px; } #app .pl.waiting .jersey { animation: pulse 1.1s ease-in-out infinite; } @keyframes pulse { 50% { transform: translateY(-3px); } } #app .pl.leaving { animation: leave .55s ease-in forwards; pointer-events: none; } #app .pl.leaving .jersey { animation: none; } #app .pl.leaving.gone { animation: fadeout .55s ease-in forwards; } @keyframes leave { to { transform: translateY(30px); opacity: 0; } } @keyframes fadeout { to { opacity: 0; } } #app .pl.entering .jersey { animation: sitin .5s ease-out; } @keyframes sitin { from { transform: translateY(26px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { #app .pl.waiting .jersey, #app .pl.entering .jersey { animation: none; } #app .pl.leaving { animation: fadeout .55s forwards; } #app .skater { animation: fadeout 1.9s forwards; left: 28px !important; } } #app .ask { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 8px; padding: 12px 14px; } #app .ask .src { font-size: 11px; color: var(--ink2); letter-spacing: .3px; } #app .ask .q { font-size: 17px; font-weight: 700; margin-top: 3px; } #app .ask .a { margin-top: 8px; font-size: 16px; font-weight: 800; color: var(--ok); } #app .ask ul { margin: 6px 0 0; padding-left: 18px; } #app .ask li { margin: 2px 0; } /* scoresheet replica */ #app .sheetwrap { overflow-x: auto; border-radius: 6px; } #app .sheet { background: var(--paper); color: var(--paper-ink); border: 2px solid var(--paper-line); padding: 10px 12px 12px; min-width: 760px; font-family: Arial, Helvetica, sans-serif; } #app .sheet .ttl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } #app .sheet .ttl b { font-size: 19px; font-weight: 900; letter-spacing: .3px; } #app .sheet .ttl span { font-size: 10px; color: var(--paper-soft); } #app .sheet .names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 36%) minmax(0, 1fr); gap: 14px; align-items: end; margin: 6px 0 8px; } #app .sheet .nm { font-size: 11px; font-weight: 800; border-bottom: 1.5px solid var(--paper-line); padding-bottom: 1px; display: flex; gap: 8px; align-items: baseline; } #app .sheet .nm i { font-family: var(--font-hand); font-style: normal; color: var(--pen); font-size: 20px; line-height: 1; } #app .sheet .halves { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #app .sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; } #app .sheet caption { background: var(--paper-line); color: #fff; font-weight: 900; font-size: 11px; letter-spacing: 1px; padding: 3px 0; caption-side: top; } #app .sheet th { font-size: 8.5px; font-weight: 800; border: 1px solid var(--paper-line); padding: 2px 1px; background: #f0efe8; color: var(--paper-ink); } #app .sheet td { border: 1px solid var(--paper-line); height: 22px; padding: 1px 3px; font-family: var(--font-hand); color: var(--pen); font-size: 16px; line-height: 1; text-align: center; overflow: hidden; white-space: normal; overflow-wrap: break-word; } #app .sheet td.l { text-align: left; } #app .sheet td.new { animation: ink 1.2s ease-out; } @keyframes ink { from { background: #ffe9a8; } to { background: transparent; } } #app .sheet .byper { width: 100%; table-layout: fixed; } #app .sheet .byper .lab { width: 34%; } #app .sheet .byper td.lab { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 800; color: var(--paper-ink); text-align: left; } #app .sheet .gap { height: 8px; } #app .credit { font-size: 11px; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; } #app .pbar { display: none; } /* ---------- presentation view: the stage alone ---------- */ /* the presentation view covers the window, whatever the site layout around it */ html.oh-sim-present, html.oh-sim-present body { overflow: hidden; } #app[data-view="present"] { background: #0e0f10; position: fixed; inset: 0; z-index: 2147483000; border: 0; border-radius: 0; overflow: auto; } #app[data-view="present"] .top, #app[data-view="present"] #console { display: none; } #app[data-view="present"] .sim-main { grid-template-columns: minmax(0, 1fr); max-width: 1500px; width: 100%; margin: 0 auto; padding-block: 16px 60px; } #app[data-view="present"] .clock { font-size: clamp(64px, 10vw, 128px); } #app[data-view="present"] .score { font-size: clamp(48px, 7.5vw, 96px); } #app[data-view="present"] .tname { font-size: clamp(18px, 2.4vw, 32px); } #app[data-view="present"] .pc .t { font-size: clamp(24px, 3vw, 38px); } #app[data-view="present"] .pc .n { font-size: clamp(20px, 2.4vw, 30px); } #app[data-view="present"] .str b { font-size: clamp(26px, 3.4vw, 44px); } #app[data-view="present"] .pl { width: 104px; } #app[data-view="present"] .jersey { width: 80px; height: 75px; } #app[data-view="present"] .jersey b { font-size: 26px; top: 22px; } #app[data-view="present"] .pl .tl { font-size: 24px; } #app[data-view="present"] .pl .stt { font-size: 12px; } #app[data-view="present"] .bench { min-height: 160px; } #app[data-view="present"] .credit { color: #8c9096; } #app[data-view="present"] .ask { background: #1e2023; border-color: #2f3236; border-left-color: var(--accent); color: #f4f0ea; } #app[data-view="present"] .ask .src { color: #8c9096; } #app[data-view="present"] .ask .a { color: #7fe3a5; } #app[data-view="present"] .ask .q { font-size: 22px; } #app[data-view="present"] .ask .a { font-size: 20px; } #app[data-view="present"] .ask li { font-size: 16px; } #app[data-view="present"] .rulings-card { background: #1e2023; border-color: #2f3236; color: #f4f0ea; } #app[data-view="present"] .rulings-card h2, #app[data-view="present"] .rule .when, #app[data-view="present"] .rule .cite { color: #b4b7bb; } #app[data-view="present"] .rule { border-color: #2f3236; font-size: 15px; } #app[data-view="present"] .rule .tagk, #app[data-view="present"] .rule.choice .when { color: #ff9a5c; } #app[data-view="present"] .rule.warn .tagk, #app[data-view="present"] .rule.warn .when { color: #f0b95b; } #app[data-view="present"] .rule.release .when { color: #7fe3a5; } #app[data-view="present"] .rule.terminate .when, #app[data-view="present"] .rule.washout .when { color: #ff8a80; } #app[data-view="present"] .pbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px 12px; flex-wrap: wrap; align-items: center; background: rgba(20, 21, 22, .92); color: #c4c6c9; font-size: 12px; opacity: .25; transition: opacity .2s; z-index: 5; } #app[data-view="present"] .pbar:hover, #app[data-view="present"] .pbar:focus-within { opacity: 1; } #app[data-view="present"] .pbar .btn { background: #2a2c2f; border-color: #44474c; color: #fff; } #app[data-view="present"] .pbar b { color: #fff; } #app[data-view="present"] .pbar .chk { color: #e6e7e9; font-size: inherit; } #app .pbar .keys { margin-left: auto; } #app kbd { font-family: ui-monospace, Consolas, monospace; font-size: 11px; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; opacity: .85; } /* ---------- presentation on a projector or shared screen: everything on one screen, nothing to scroll ---------- Sizes are in --u, one hundredth of a 16:9 slide that fits the window, so the page scales like a slide. */ @media (min-width: 1000px) and (min-aspect-ratio: 5/4) { #app[data-view="present"] { --u: min(1vw, 1.778vh); height: 100vh; min-height: 0; overflow: hidden; } #app[data-view="present"] .sim-main { display: block; flex: none; height: 100%; max-width: none; margin: 0; padding: calc(var(--u) * .7) calc(var(--u) * .9) 52px; } #app[data-view="present"] #stage { height: 100%; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); grid-template-rows: minmax(0, 1fr) auto; gap: calc(var(--u) * .5) calc(var(--u) * .9); } #app[data-view="present"] .colL, #app[data-view="present"] .colR { display: flex; flex-direction: column; gap: calc(var(--u) * .7); min-width: 0; min-height: 0; overflow: hidden auto; scrollbar-width: thin; } #app[data-view="present"] .board, #app[data-view="present"] .boxes, #app[data-view="present"] .ask { flex: none; } #app[data-view="present"] #presRul { flex: 1 1 0; min-height: 0; overflow: hidden; padding: calc(var(--u) * .6) calc(var(--u) * .8); } #app[data-view="present"] .sheetwrap { flex: 0 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; } #app[data-view="present"] .credit { grid-column: 1 / -1; font-size: calc(var(--u) * .74); } #app[data-view="present"] .board { padding: calc(var(--u) * .7) calc(var(--u) * .9); gap: calc(var(--u) * .4) calc(var(--u) * .8); } #app[data-view="present"] .board .tmn { gap: calc(var(--u) * .7); } #app[data-view="present"] .tname { font-size: calc(var(--u) * 1.3); padding: calc(var(--u) * .15) calc(var(--u) * .5); white-space: normal; overflow-wrap: anywhere; line-height: 1.1; max-height: 2.4em; } #app[data-view="present"] .score { font-size: calc(var(--u) * 4.4); } #app[data-view="present"] .clock { font-size: calc(var(--u) * 6); } #app[data-view="present"] .per { font-size: calc(var(--u) * .95); } #app[data-view="present"] .runst { font-size: calc(var(--u) * .85); min-height: calc(var(--u) * 1.1); } #app[data-view="present"] .pens { gap: calc(var(--u) * .3); min-height: calc(var(--u) * 6.6); } #app[data-view="present"] .pc { padding: calc(var(--u) * .1) calc(var(--u) * .5); gap: 0 calc(var(--u) * .5); } #app[data-view="present"] .pc .n { font-size: calc(var(--u) * 1.4); } #app[data-view="present"] .pc .t { font-size: calc(var(--u) * 1.8); } #app[data-view="present"] .pc .k { font-size: calc(var(--u) * .74); flex-basis: 100%; } #app[data-view="present"] .dly { font-size: calc(var(--u) * .85); } #app[data-view="present"] .str b { font-size: calc(var(--u) * 2); } #app[data-view="present"] .str span { font-size: calc(var(--u) * .78); } #app[data-view="present"] .boxes { gap: calc(var(--u) * .9); } #app[data-view="present"] .pbox h3 { font-size: calc(var(--u) * .8); padding: calc(var(--u) * .4) calc(var(--u) * .7); } #app[data-view="present"] .bench { padding: calc(var(--u) * .6) calc(var(--u) * .6) calc(var(--u) * .3); gap: calc(var(--u) * .5); min-height: calc(var(--u) * 8.6); } #app[data-view="present"] .bench .none { font-size: calc(var(--u) * .85); } #app[data-view="present"] .pl { width: calc(var(--u) * 5.5); } #app[data-view="present"] .jersey { width: calc(var(--u) * 4.2); height: calc(var(--u) * 3.94); } #app[data-view="present"] .jersey b { font-size: calc(var(--u) * 1.4); top: calc(var(--u) * 1.15); } #app[data-view="present"] .pl .tl { font-size: calc(var(--u) * 1.3); } #app[data-view="present"] .pl.waiting .tl { font-size: calc(var(--u) * .9); padding-top: calc(var(--u) * .2); } #app[data-view="present"] .pl .stt { font-size: calc(var(--u) * .74); } #app[data-view="present"] .pl .badge { font-size: calc(var(--u) * .66); } #app[data-view="present"] .ice { height: calc(var(--u) * 2.2); font-size: calc(var(--u) * .74); } #app[data-view="present"] .relmsg { font-size: calc(var(--u) * .85); } #app[data-view="present"] .ask { padding: calc(var(--u) * .6) calc(var(--u) * .9); } #app[data-view="present"] .ask .src { font-size: calc(var(--u) * .74); } #app[data-view="present"] .ask .q { font-size: calc(var(--u) * 1.2); } #app[data-view="present"] .ask .a { font-size: calc(var(--u) * 1.15); margin-top: calc(var(--u) * .3); } #app[data-view="present"] .ask ul { margin-top: calc(var(--u) * .2); } #app[data-view="present"] .ask li { font-size: calc(var(--u) * .88); margin: 0; } #app[data-view="present"] .rulings-card h2 { font-size: calc(var(--u) * .74); margin-bottom: calc(var(--u) * .3); } #app[data-view="present"] .rule { font-size: calc(var(--u) * .85); padding: calc(var(--u) * .3) 0; gap: calc(var(--u) * .6); } #app[data-view="present"] .rule .when { flex-basis: calc(var(--u) * 4.4); } #app[data-view="present"] .rule .cite, #app[data-view="present"] .rule .tagk { font-size: calc(var(--u) * .74); } #app[data-view="present"] .sheet { min-width: 0; padding: calc(var(--u) * .5) calc(var(--u) * .7) calc(var(--u) * .7); } #app[data-view="present"] .sheet .ttl b { font-size: calc(var(--u) * 1.1); } #app[data-view="present"] .sheet .ttl span { font-size: calc(var(--u) * .74); } #app[data-view="present"] .sheet .names { gap: calc(var(--u) * .8); margin: calc(var(--u) * .3) 0 calc(var(--u) * .5); grid-template-columns: minmax(0, 1fr) minmax(0, 40%) minmax(0, 1fr); } #app[data-view="present"] .sheet .nm { font-size: calc(var(--u) * .76); } #app[data-view="present"] .sheet .nm i { font-size: calc(var(--u) * 1.3); } #app[data-view="present"] .sheet .halves { gap: calc(var(--u) * .7); } #app[data-view="present"] .sheet caption { font-size: calc(var(--u) * .76); padding: calc(var(--u) * .12) 0; } #app[data-view="present"] .sheet th { font-size: calc(var(--u) * .74); padding: calc(var(--u) * .1) 1px; } #app[data-view="present"] .sheet td { font-size: calc(var(--u) * 1.08); height: calc(var(--u) * 1.5); padding: 0 calc(var(--u) * .15); } #app[data-view="present"] .sheet .byper td.lab { font-size: calc(var(--u) * .74); } #app[data-view="present"] .sheet .gap { height: calc(var(--u) * .45); } #app[data-view="present"] .pbar { flex-wrap: nowrap; font-size: 14px; } #app[data-view="present"] .pbar > * { flex: none; } #app[data-view="present"] .pbar .keys { flex: 1 1 0; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ---------- layout helpers (replace the old inline styles; CSP allows no style attributes) ---------- */ #app .w60 { flex: 0 0 60px; } #app .w72 { flex: 0 0 72px; } #app .w76 { flex: 0 0 76px; } #app .w78 { flex: 0 0 78px; } #app .w90 { flex: 0 0 90px; } #app .w92 { flex: 0 0 92px; } #app .w96 { flex: 0 0 96px; } #app .w110 { flex: 0 0 110px; } #app .w120 { flex: 0 0 120px; } #app .f150 { flex: 1 1 150px; } #app .ae { align-self: flex-end; } #app .pb7 { padding-bottom: 7px; } #app .ml-auto { margin-left: auto; } #app .row.aend { align-items: flex-end; } #app .row.sep { border-top: 1px solid var(--line); padding-top: 10px; } #app p.sep { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; } #app .cauto { margin: 2px 0 10px; } #app .mt12 { margin-top: 12px; } #app table.log td.acts { white-space: nowrap; text-align: right; } #app .help h3 { font-size: 14px; margin-bottom: 6px; } #app .help ol, #app .help ul { margin: 0 0 10px; padding-left: 20px; } #app .help li { margin: 2px 0; } #app [data-pane] > .hint, #app [data-pane] > p { margin-top: 10px; } #app .scnlinks a { margin-right: 10px; font-weight: 600; } #app .sheet .cg-goals col:nth-child(1) { width: 10%; } #app .sheet .cg-goals col:nth-child(2) { width: 11%; } #app .sheet .cg-goals col:nth-child(3) { width: 22%; } #app .sheet .cg-goals col:nth-child(4) { width: 14%; } #app .sheet .cg-goals col:nth-child(5) { width: 25%; } #app .sheet .cg-goals col:nth-child(6) { width: 18%; } #app .sheet .cg-pens col:nth-child(1), #app .sheet .cg-pens col:nth-child(2) { width: 8%; } #app .sheet .cg-pens col:nth-child(3) { width: 36%; } #app .sheet .cg-pens col:nth-child(4) { width: 12%; } #app .sheet .cg-pens col:nth-child(5) { width: 11%; } #app .sheet .cg-pens col:nth-child(6), #app .sheet .cg-pens col:nth-child(7) { width: 12.5%; } /* ---------- rule set card ---------- */ #app .rsname { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 4px; } #app #rsCard .hint { margin-top: 4px; } #app details.nm { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; } #app details.nm summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink); display: list-item; } #app details.nm ul { margin: 6px 0 0; padding-left: 20px; font-size: 13px; color: var(--ink2); } #app details.nm li { margin: 3px 0; } #app .ask .replay { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--hold); } #app[data-view="present"] .ask .replay { color: #f0b95b; } #app .pbar .pcode { color: #fff; font-weight: 700; border: 1px solid #44474c; border-radius: 4px; padding: 1px 6px; } /* ---------- phone width: nothing wider than the screen ---------- */ @media (max-width: 520px) { #app .top { padding: 10px 12px; } #app .sim-main { padding: 12px 10px; gap: 12px; } #app .card { padding: 12px; } #app .views { margin-left: 0; } #app .tclock b { font-size: 34px; } #app .rule .when { flex-basis: 54px; } } #app .sheet th { text-align: center; }