/* Belfast Giants house style.
   Palette lifted from belfastgiants.com's own custom properties.
   The club's display face (poster-gothic-excond-atf) is an Adobe Typekit licence
   tied to their domain, so Oswald stands in for it: same tall condensed gothic
   feel, free to serve from here. Body copy stays in a plain readable sans -- this
   page gets read aloud, and condensed type is the wrong tool for that. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

:root{
  /* straight from the club site */
  --teal:#004d58; --teal-roll:#06606c;
  --dark:#111010; --dark-roll:#2a2828;
  --red:#bc2f2c;  --red-roll:#e03e3a;
  --grey:#1c1b1b; --grey-font:#6a6a6a; --grey-light:#aaa;
  --grey-medium:#424242; --grey-teal:#bfd2d5;

  /* derived: the brand teal is too dark to read as an accent on #111010 */
  --teal-bright:#17a2b8;

  --bg:var(--dark); --panel:var(--grey); --panel2:var(--dark-roll);
  --line:var(--grey-medium); --ink:#fff; --dim:var(--grey-light);
  --accent:var(--teal-bright); --goal:var(--teal-bright); --pen:var(--red);
  --display:'Oswald',"Helvetica Neue",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --radius:4px;                      /* the club uses hard corners, not pills */
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--body)}

header{display:flex;align-items:center;gap:1rem;padding:.9rem 1.2rem;
  background:#000;border-bottom:3px solid var(--teal);flex-wrap:wrap}
h1.brand{margin:0;display:flex;align-items:center;gap:.75rem;line-height:1}
h1.brand img{height:42px;width:auto;display:block}
h1.brand span{font-family:var(--display);font-size:1.15rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;color:var(--grey-teal);
  padding-left:.75rem;border-left:1px solid var(--grey-medium)}
.fixture{color:var(--dim);flex:1;min-width:12rem;font-size:.95rem}
.conn{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em;font-family:var(--display)}
.dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--grey-font)}
.dot.on{background:var(--teal-bright);box-shadow:0 0 8px var(--teal-bright)}
.dot.off{background:var(--red)}

.tabs{display:flex;gap:.25rem;padding:.6rem 1.2rem 0;background:#000;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{background:none;border:0;color:var(--dim);padding:.6rem 1.05rem;cursor:pointer;
  border-radius:var(--radius) var(--radius) 0 0;font-family:var(--display);
  font-size:1rem;text-transform:uppercase;letter-spacing:.05em}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--bg);color:var(--ink);box-shadow:inset 0 3px 0 var(--teal-bright)}
main{padding:1.2rem;max-width:1100px;margin:0 auto}
.panel{display:none}.panel.active{display:block}

.bar{display:flex;gap:1rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:.4rem;color:var(--dim);font-size:.9rem}
.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  padding:.55rem 1.1rem;border-radius:var(--radius);cursor:pointer;
  font-family:var(--display);font-size:.95rem;text-transform:uppercase;letter-spacing:.05em}
.btn:hover{border-color:var(--teal-bright);color:var(--grey-teal)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teal-roll);border-color:var(--teal-roll);color:#fff}

.events{display:flex;flex-direction:column;gap:.9rem}
.empty{color:var(--dim);text-align:center;padding:2rem}
.ev{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--line);
  border-radius:var(--radius);padding:.9rem 1.1rem}
.ev.goal{border-left-color:var(--goal)} .ev.pen{border-left-color:var(--pen)}
.ev.fresh{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:#123b42}100%{background:var(--panel)}}
.ev .meta{display:flex;gap:.6rem;align-items:center;color:var(--dim);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;flex-wrap:wrap;
  font-family:var(--display)}
.ev .tag{padding:.12rem .55rem;border-radius:var(--radius);background:#000;font-weight:600}
.ev .tag.goal{color:var(--teal-bright)} .ev .tag.pen{color:var(--red-roll)}
/* the read itself stays in body type: it is spoken from, not looked at */
.read{font-size:1.22rem;line-height:1.55;margin:.2rem 0 .6rem;cursor:pointer}
.read:hover{color:var(--grey-teal)}
.brief{color:var(--dim);font-size:.95rem;cursor:pointer;padding-top:.5rem;
  border-top:1px dashed var(--line)}
.brief:hover{color:var(--grey-teal)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.2rem;margin-bottom:1.2rem}
.card h2{margin:0 0 .5rem;font-family:var(--display);font-size:1.25rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--grey-teal)}
.hint{color:var(--dim);font-size:.9rem;margin:.2rem 0 .9rem}
.hint code{background:#000;padding:.1rem .35rem;border-radius:3px;color:var(--grey-teal)}
.row{display:flex;gap:.6rem;margin-bottom:.7rem;flex-wrap:wrap}
input{background:#000;border:1px solid var(--line);color:var(--ink);
  padding:.55rem .7rem;border-radius:var(--radius);font-size:.95rem;flex:1;min-width:6rem;
  font-family:var(--body)}
input:focus{outline:none;border-color:var(--teal-bright)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.8rem;
  margin-bottom:.9rem}
.grid2 label{display:flex;flex-direction:column;gap:.3rem;color:var(--dim);font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em;font-family:var(--display)}
.status{color:var(--dim);font-size:.88rem;min-height:1.2rem;margin-top:.5rem}
.status.err{color:var(--red-roll)} .status.ok{color:var(--teal-bright)}

table.roster{width:100%;border-collapse:collapse;margin-top:.6rem}
table.roster th{text-align:left;color:var(--dim);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.06em;padding:.4rem .5rem;border-bottom:2px solid var(--teal);
  font-family:var(--display);font-weight:500}
table.roster td{padding:.3rem .5rem;border-bottom:1px solid #262424}
table.roster td input{width:100%}
.num{font-family:var(--display);font-weight:700;color:var(--grey-teal);font-size:1.15rem;width:3.5rem}
.sheet{color:var(--grey-font);font-size:.82rem;white-space:nowrap}
.del{background:none;border:0;color:var(--grey-font);cursor:pointer;font-size:1.2rem;line-height:1}
.del:hover{color:var(--red-roll)}
.hit{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);
  padding:.6rem .8rem;margin:.4rem 0;cursor:pointer}
.hit:hover{border-color:var(--teal-bright);color:var(--grey-teal)}

.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%) translateY(3rem);
  background:var(--teal);color:#fff;padding:.6rem 1.2rem;border-radius:var(--radius);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;
  opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* run of show */
.pgline{font-size:1.1rem;line-height:1.5;margin:.35rem 0;padding:.45rem .6rem;
  border-radius:var(--radius);cursor:pointer;background:#000;border:1px solid transparent}
.pgline:hover{border-color:var(--teal-bright);color:var(--grey-teal)}

textarea{background:#000;border:1px solid var(--line);color:var(--ink);
  padding:.55rem .7rem;border-radius:var(--radius);font-size:.92rem;width:100%;
  font-family:var(--body);line-height:1.45;resize:vertical;margin-top:.3rem}
textarea:focus{outline:none;border-color:var(--teal-bright)}

@media(max-width:600px){ .read{font-size:1.08rem} main{padding:.8rem}
  h1.brand img{height:32px} h1.brand span{font-size:.95rem} }

/* manual fallback: present, but out of the way */
details.manual{margin-top:1rem;border-top:1px solid var(--grey-medium);padding-top:.8rem}
details.manual summary{cursor:pointer;color:var(--grey-font);font-family:var(--display);
  font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;list-style:none;
  padding:.2rem 0}
details.manual summary::-webkit-details-marker{display:none}
details.manual summary::before{content:'+ ';color:var(--teal-bright)}
details.manual[open] summary::before{content:'\2212 '}
details.manual summary:hover{color:var(--grey-teal)}
details.manual > *:not(summary){margin-top:.7rem}

select{background:#000;border:1px solid var(--line);color:var(--ink);
  padding:.55rem .7rem;border-radius:var(--radius);font-size:.95rem;
  font-family:var(--body);min-width:16rem}
select:focus{outline:none;border-color:var(--teal-bright)}
#padText{min-height:22rem;font-size:1.02rem;line-height:1.6}

/* Chuck A Puck: three numbers, colour-coded to the pucks themselves */
.chuck{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.9rem}
.puck{display:flex;flex-direction:column;gap:.35rem}
.puck span{font-family:var(--display);font-size:.85rem;text-transform:uppercase;
  letter-spacing:.1em;display:flex;align-items:center;gap:.45rem}
.puck span::before{content:'';width:.85rem;height:.85rem;border-radius:50%;
  border:2px solid rgba(255,255,255,.25)}
.puck.red  span{color:var(--red-roll)}   .puck.red  span::before{background:var(--red)}
.puck.teal span{color:var(--teal-bright)}.puck.teal span::before{background:var(--teal-bright)}
.puck.gold span{color:#e0b13c}           .puck.gold span::before{background:#d4a537}
.puck input{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;
  text-align:center;padding:.5rem}
.puck.red  input:focus{border-color:var(--red-roll)}
.puck.gold input:focus{border-color:#e0b13c}

/* read-out events fade back so the unannounced ones hold the eye */
.doneBtn{margin-left:auto;background:none;border:1px solid var(--grey-medium);
  color:var(--grey-font);font-family:var(--display);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.08em;padding:.2rem .6rem;
  border-radius:var(--radius);cursor:pointer;white-space:nowrap}
.doneBtn:hover{border-color:var(--teal-bright);color:var(--grey-teal)}
/* announced: drop the card entirely so only unread events read as cards */
.ev.done{opacity:.32;background:none;border-color:transparent;
  border-left-color:transparent;padding:.2rem 1.1rem .2rem .6rem}
.ev.done .read{color:var(--grey-light);font-size:1rem;line-height:1.4;margin:.1rem 0 .25rem}
.ev.done .brief{border-top:0;padding-top:0;font-size:.85rem}
.ev.done .meta{margin-bottom:.15rem;font-size:.7rem}
.ev.done .tag{background:none;padding:0;color:var(--grey-font)}
.ev.done .doneBtn{border-color:transparent;color:var(--grey-font)}
.ev.done:hover{opacity:.7}
.ev.done:hover .doneBtn{border-color:var(--grey-medium)}