:root{
  /* Bootstrap radius tweaks */
  --bs-border-radius:      0.25rem !important;
  --bs-border-radius-sm:   0.2rem !important;
  --bs-border-radius-lg:   0.3rem !important;
  --bs-border-radius-xl:   0.4rem !important;
  --bs-border-radius-xxl:  0.5rem !important;
  --bs-border-radius-pill: 50rem !important;

  /* palette */
  --pal_red:         rgba(224, 50,  50, 1);
  --pal_red50:       rgba(191, 99,  64, .8);
  --pal_green:       rgba(200, 200, 50, 1);
  --pal_green50:     rgba(200, 200,  0, .5);
  --pal_cream:       rgba(210, 210, 220, .5);
  --pal_blue_light:  rgba(200, 200, 210, 1);
  --pal_blue:        rgba(  7,  52,  99, 1);
  --pal_blue50:      rgba(  7,  52,  99, 0.8);
  --pal_grey_light:  rgba(  0,   0,   0, .1);
  --pal_grey_medium: rgba(  0,   0,   0, .2);
  --pal_grey_dark:   rgba(  0,   0,   0, .5);
  --scoripurp:       rgba(220,   0, 220, .8);
  --mirror-pink:     rgba(200, 100, 200, .8);
  --white:           rgba(255, 255, 255, 1);

  /* header backgrounds */
  --FTHeader:               rgba(0,0,0,0.1) !important; 
  --HTHeader:               rgba(0,0,0,0.5) !important;

  --FTHeaderText:           rgba(0,0,0,1) !important; 
  --HTHeaderText:           rgba(0,0,0,1) !important; 

  --FTRowHeaderHighlight:   var(--pal_red) !important;   
  --HTRowHeaderHighlight:   var(--pal_red50) !important;  
  --FTHeaderHighlightText:  var(--white) !important; 

  --FTColHeaderHighlight:   var(--pal_blue) !important;  
  --HTColHeaderHighlight:   var(--pal_blue50) !important; 
  --HTHeaderHighlightText:  var(--white) !important; 

  /* sizing */
  --ht-h: clamp(14px, 4vw, 22px);
  --ht-w: calc(var(--ht-h) * 1.3);
  --hdrcolheight: 75px;
  --hdrrowwidth:  75px;


  /* grid lines */
  --grid-line:    rgba(0,0,0,.04);
  --grid-hairline:1px;

  /* highlights / low-light (tweak these for whole-grid dimming) */
  --ft_dim:       rgba(0,0,0,.35);     /* FT low-light overlay */
  --ht_dim:       rgba(0,0,0,.35);     /* HT low-light overlay */
  --ft-row-color: var(--pal_red);

  /* theme */
  --accent:       var(--pal_blue_light);
  --accent-light: var(--pal_blue_light);
  --bg:           var(--pal_cream);

  /* corner dimensions */
  --corner-w:   70px;
  --corner-h:   50px;

  /* popup */
  --pop-font:   12px;
  --pop-pad-x:  14px;
  --pop-pad-y:  10px;
  --pop-bg:     #fff;
  --pop-border: #a00;
  --pop-shadow: 0 10px 30px rgba(0,0,0,.25);
  --pop-ease:   .18s ease;
  --pop-maxw:   620px;

  /* buckets */
  --bucket1:#000099; --bucket2:#085A8E; --bucket3:#18789A; --bucket4:#27947F;
  --bucket5:#379E63; --bucket6:#55A943; --bucket7:#78AE34; --bucket8:#94B22A;
  --bucket9:#B0B523; --bucket10:#C9A81B; --bucket11:#CC9014; --bucket12:#BE7310;
  --bucket13:#A9570E; --bucket14:#91380F; --bucket15:#7A2614; --bucket16:#702929;

  --ft_bg: rgba(222, 222, 222, 0.8);
}

/* hi-dpi hairlines */
@media (min-resolution: 2dppx) { :root { --grid-hairline: .5px; } }
@media (min-resolution: 3dppx) { :root { --grid-hairline: .3334px; } }

/* base */
html, body { width:100%; }
body{
  background: var(--bg);
  font-family:ui-monospace, Menlo, Consolas, monospace !important;
  color:#111;
}
img, svg, canvas, iframe, table { max-width:100%; height:auto; }

/* layout */
.container-narrow{ width:min(100%,1100px); margin-inline:auto; padding-inline:1rem; }
.section{
  xbackground:#fff; border-radius:.75rem;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
  margin-top:.75rem; padding:1.15rem 1.15rem 1rem;
  position:relative; z-index:5; overflow:hidden;
}
.section h2{
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:.6rem;
  padding-bottom:.35rem;
}
footer{ text-align:center; font-size:.9rem; color:#777; margin:3rem 0 2rem; }

.scale-wrap{
  position:relative;
  width:100%;
  padding-bottom:.5rem;
  max-width:100%;
  overflow:hidden;     /* desktop default; x-scroll added later */
}
.scale-target{
  transform-origin:top left;
  width:max-content;
  max-width:none;
  display:inline-block;
}

/* season filter */
.season-summary{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.45rem .6rem; border:1px solid var(--accent-light);
  border-radius:.5rem; background:#fff;
}
.season-summary .label{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.season-summary .label .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--accent); flex:0 0 .5rem; }
.season-summary .label .text{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.season-summary .btn-toggle{ white-space:nowrap; }

#seasonCollapse{
  border:1px solid var(--accent-light); border-radius:.5rem; background:#fff;
  margin-top:.5rem; padding:.5rem .4rem;
}
.season-filter{ display:flex; flex-wrap:wrap; gap:.4rem; }
.season-filter :is(.btn,a){
  border-radius:.35rem !important; padding:.3rem .6rem !important;
  font-size:.8rem !important; line-height:1.1;
}
.season-filter :is(.btn.active,a.active){ background:var(--accent); color:#fff; border-color:var(--accent); }
.season-filter :is(.btn:hover,a:hover){ background:var(--accent-light); border-color:var(--accent); color:var(--accent); }

/* latest scores */
.latest-scores .list-group-item {
	padding:.5rem .25rem;
}

@media (max-width:575.98px){ .latest-scores .list-group-item{ font-size:.95rem; } }

/* grid container */
.grid-wrap {
  display:inline-block;
  margin:1rem;
  position:relative;
  font-family:ui-monospace, Menlo, Consolas, monospace !important;
}

/* Make the whole grid one tight matrix */
table.outer {
  border-collapse:collapse;
  table-layout:fixed;
}

/* No padding at all in grid headers/cells; borders are added per-class */
.outer th, .outer td{
  padding:0;
  border:none;
}

/* headers & borders */
.corner{
  width: var(--corner-w);
  height: var(--corner-h);
  background:#f6f6f6; text-align:center;
  vertical-align:middle; font-weight:700; line-height:1.2;
  border: 1px solid #999 !important;
}

.corner4 {
	background:#f6f6f6; text-align:center;
	border: 1px solid black;  
	width: var(--corner4);
	height: 100%;
}

/* FT column + row headers (structure + borders) */
.ftrowhdr{
  width:            var(--hdrrowwidth);
  white-space:      nowrap;
  border-right:     1px solid var(--pal_red) !important;
  border-bottom:    1px solid var(--pal_red) !important;
  text-align:       center;
  background-color: var(--FTHeader);
}

.ftcolhdr{
  height:           var(--hdrcolheight);
  white-space:      nowrap;
  border-top:       1px solid var(--pal_blue) !important;
  border-right:     1px solid var(--pal_blue) !important;
  text-align:       center;
  background-color: var(--FTHeader);
}

.ftcolhdr.is-hl {
  background-color: var(--FTColHeaderHighlight);
  color: var(--FTHeaderHighlightText);
}
.ftrowhdr.is-hl {
  background-color: var(--FTRowHeaderHighlight);
  color: var(--FTHeaderHighlightText);
}

/* === HT HEADERS (row & column) ===================================== */

.htrowhdr {
  padding:0;
  background-color: var(--HTHeader);
}

.htcolhdr {
  padding:1;
  background-color: var(--HTHeader);
}

.htcolhdr.is-hl,
.htcowldr.hdr-count
.htcol-num.is-hl {
  background-color: var(--HTColHeaderHighlight);
  color: var(--HTHeaderHighlightText);
}

.htrowhdr.is-hl,
.htrowhdr.hdr-count
.htrow-num.is-hl {
  background-color: var(--HTRowHeaderHighlight);
  color: var(--HTHeaderHighlightText);
}

/* HT column header digits – fill the cell exactly */
.htcolhdr .htcol-grid {
  display:grid;
  grid-auto-flow:column;          /* left → right */
  grid-auto-columns:var(--ht-w);  /* same width as HT cells */
  height:var(--ht-h);             /* same height as HT cells */
}

/* HT row header digits – stacked to match mini grid below */
.htrowhdr .htrow-grid {
  display:grid;
  grid-auto-rows:var(--ht-h);     /* one digit per HT row */
  width:var(--ht-w);              /* same width as HT cells */
}

/* Individual HT header “cells” – full borders so they look like grid cells */
.htrow-num {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.7rem;
  margin:0;
  padding:0px;
  background:#fff;
  border-top:1px solid rgba(0,111,111,0.35);
}

.htcol-num {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.7rem;
  margin:1;
  padding:0px;
  background:#fff;
  border-left:1px solid rgba(0,111,0,0.35); 
}

/* Highlighted HT header digits */
.htcol-num.is-hl,
.htrow-num.is-hl {
  background: var(--HTHeaderHighlight);
  font-weight:600;
}

.ftrowhdr .hdr-combo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  padding: 0;
}



/* FT cells */
.ftcell{
  transition: background .15s ease, color .15s ease;
}
tbody tr:first-of-type .ftcell{ border-top-width:1px; }
tbody tr:last-of-type  .ftcell{ border-bottom-width:1px; }
tbody tr > .ftcell:first-of-type{ border-left-width:1px; }
tbody tr > .ftcell:last-of-type { border-right-width:1px; }

/* FT border overlay always on top of minis */
.ftcell::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid rgba(0,111,0,.4); box-sizing:border-box; z-index:400;
}

/* FT overlay layer (for row/col & global low-light) */
.ftcell::before{
  content:""; position:absolute; inset:0; background:transparent;
  pointer-events:none; z-index:1; transition:background .12s ease;
}

/* FT row/col dim/highlight using the same layer (used by guides) */
.ftcell.hi_ft_row::before,
.ftcell.hi_ft_col::before {
  background: var(--ft_dim);
}

/* when BOTH hi_ft_row and hi_ft_col are present, clear it (cross cell) */
.ftcell.hi_ft_row.hi_ft_col::before {
  background: none !important;
}

/* GLOBAL low-light for FT cells (set via JS by toggling .ft-dim) */
.ftcell.ft-dim::before {
  background: var(--ft_dim);
}

/* mini HT cells */
.mini{ display:grid; }

.htcell{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:var(--ht-w); height:var(--ht-h); background:#fff; cursor:pointer; overflow:hidden;
  z-index:0; transition: background-color .15s linear, color .15s linear;
}
.htcell::before,
.htcell::after{
  content:""; position:absolute; inset:0; pointer-events:none; transition:background .12s ease;
}

/* HT dim overlays (row/col guides) */
.htcell.hi_ht_row::before,
.htcell.hi_ht_col::before,
.htcell.hl-ht-row::before,
.htcell.hl-ht-col::before{
  background:var(--ht_dim) !important;
  z-index:150;
}

/* optional: GLOBAL low-light for HT cells (if you ever add .ht-dim) */
.htcell.ht-dim::before {
  background: var(--ht_dim);
  z-index:120;
}

/* cross HT cell — purple bg + white text */
.htcell.hi_ht_both{
  background:var(--scoripurp) !important;
  z-index:9999 !important;
  isolation:isolate !important;
}
.htcell.hi_ht_both::before{ background:transparent !important; }
.htcell.kill-overlays::before,
.htcell.kill-overlays::after{ background:transparent !important; }
.htcell.ht-hover{
  background:#fff !important;
  z-index:9999 !important;
  isolation:isolate !important;
}

/* Mirror-highlighted cell (opposite HT/FT) */
.htcell.hi_mirror {
  background-color: var(--mirror-pink, #ff80c0) !important;
}
.htcell.hi_mirror .label {
  color: #000;
}

/* labels */
.label{
  position:relative; z-index:250; font-size:10px; line-height:1; color:#fff; pointer-events:none;
}
.htcell.hi_ht_both .label,
.htcell.ht-hover .label{
  color:#fff !important; z-index:10000 !important; mix-blend-mode:normal !important;
}

/* hairline on blanks only */
.htcell.blank{
  background:#fff;
  box-shadow: inset 0 0 0 var(--grid-hairline) var(--grid-line) !important;
}
.htcell.has-val{ box-shadow:none !important; }

/* FT guides */
.ft-guides-svg{ position:absolute; left:0; top:0; pointer-events:none; z-index:9997; }
.ft-line{ stroke:var(--ft-row-color); stroke-width:var(--ft-em); shape-rendering:crispEdges; }

/* popup / tooltip (single, clean definition) */
.popup-dim{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.35);
  z-index:2147483640;
  opacity:0;
  transition:opacity var(--pop-ease);
  pointer-events:none;
}
.popup-dim.show{
  opacity:1;
  pointer-events:auto;
}
.popup-card{
  position:fixed;
  transform:translate(0,0) scale(.96);
  background:var(--pop-bg);
  border:1px solid var(--pop-border);
  border-radius:12px;
  box-shadow:var(--pop-shadow);
  padding:var(--pop-pad-y) var(--pop-pad-x);
  font:400 var(--pop-font)/1.5 system-ui,Arial,sans-serif;
  color:#111;
  max-width:min(90vw, var(--pop-maxw));
  max-height:min(85vh, 900px);
  overflow:auto;
  z-index:2147483641;
  opacity:0;
  transition:opacity var(--pop-ease), transform var(--pop-ease);
  text-align:left;
  white-space:normal;
  pointer-events:none;
}
.popup-card.show{
  opacity:.98;
  transform:scale(1);
  pointer-events:auto;
}
.popup-card a{ color:#0056b3; text-decoration:underline; }
.popup-card a:hover{ color:#003974; text-decoration:none; }

.scori-tip{
  position:fixed; z-index:2147483642; pointer-events:none; background:rgba(255,255,255,.95); color:#000;
  font:400 var(--pop-font)/1.5 system-ui,Arial,sans-serif; padding:6px 8px; border-radius:6px;
  border:1px solid var(--pop-border); box-shadow:0 6px 18px rgba(0,0,0,.25);
  transform:translate(-50%,-120%); opacity:0; transition:opacity .12s ease, transform .12s ease; white-space:nowrap;
}
.scori-tip.show{ opacity:1; }

/* grid header helpers */
#jsonStatus{ font-size:12px; color:#888; margin:.5rem 0; }
.hdr-num{ font-size:0.9rem; line-height:1; font-weight:700; }
.hdr-count{ font-size:10px; line-height:1;}

/* latest highlight */
.htcell.scori-glow{ box-shadow: 0 0 0 2px #ffd54f inset, 0 0 12px rgba(255,213,79,.9); }
.htcell.scori-latest{ box-shadow: 0 0 0 3px #ffd54f inset; }


/* Active HT cell (single cell, keep bucket colour underneath) */
.htcell.ht-active {
  box-shadow: inset 0 0 0 2px var(--scoripurp);
  position: relative;
}
/* Scorigami purple highlight on hovered HT cell */
.htcell:hover,
.htcell.ht-active {
  outline: 2px solid var(--scoripurp);
  outline-offset: -2px;
  position: relative;
  z-index: 2;
}

/* HT guides: text should be black while guide is active */
.htcell.ht-index .label {
  color: #000;
}

/* --- Scorigami grid + stats layout --- */
.scori-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 1rem;
  align-items: start;
}
.scori-grid-col { min-width: 0; }
.scori-stats-col { min-width: 260px; }

/* horizontal scrolling for grid */
.scori-grid-col,
.scale-wrap {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.scori-grid-col.dragging,
.scale-wrap.dragging {
  cursor:grabbing;
  user-select:none;
}

.scori-grid .htcell,
.scori-grid .hthead,
.scori-grid .fthead,
.scori-grid .axiscell{
  width:var(--ht-w) !important;
  min-width:var(--ht-w) !important;
  height:var(--ht-h) !important;
  line-height:var(--ht-h) !important;
  box-sizing:border-box !important;
}

.scori-grid{
  font-size:clamp(10px, 2.6vw, 14px) !important;
  table-layout:fixed; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch;
}
@media (max-width:576px){
  :root{ --grid-hairline:.2px; }
  .scori-grid .htcell,
  .scori-grid .hthead,
  .scori-grid .fthead,
  .scori-grid .axiscell{ border-width:var(--grid-hairline) !important; }
}

/* Stack on narrower screens, sidebar below grid */
@media (max-width:1200px){
  .scori-layout { grid-template-columns: 1fr; }
}

/* Optional sticky sidebar on large screens */
@media (min-width:1201px){
  .scori-stats-col { position:sticky; top:1rem; }
}

/* hero */
.hero{
  background: var(--pal_blue_light);
  color:#fff; border-bottom:5px solid var(--pal_red); padding:4px 0 14px;
}
.hero-inner{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
}
.hero-logo{ height:90px; width:auto; display:block; }
.hero-center{ justify-self:left; }
.hero-title{ height:90px; width:auto; max-width:90%; display:block; }
.hero-right{
  text-align:right;
  line-height:1.2;
  max-width:420px;
  font-family:'Times New Roman',serif;
  color: var(--pal_blue);
}
.hero-right .dicword{ font-style:normal; font-size:22px; font-weight:600; }
.hero-right .pron{    font-style:normal; font-size:22px; font-weight:300; }
.hero-right .def{     font-style:normal; font-size:20px; }

@media (max-width:767.98px){
  .hero-inner{ grid-template-columns:1fr; gap:.6rem; }
  .hero-center{ justify-self:start; }
  .hero-right{ text-align:left; max-width:100%; }
  .hero-title{ height:80px; }
}

/* --- Responsive adjustments --- */
@media (max-width: 992px) {
  .hero-logo { height: 50px; }
  .hero-title { height: 50px; }
}
@media (max-width: 768px) {
  .hero-right { display:none; }
  .hero-inner {
    justify-content:center;
    flex-wrap:nowrap;
  }
  .hero-logo { height:45px; margin-right:.5rem; }
  .hero-title{ height:45px; }
}
@media (max-width: 480px) {
  .hero-logo { height:35px; margin-right:.4rem; }
  .hero-title{ height:35px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

.mono { font-family:ui-monospace, Menlo, Consolas, monospace !important;  }
.scori-link .badge { font-size: 0.75rem; }

/* cards / latest scorigamis */
.scori-card {
  position: relative;
  border-radius: 12px;
  transition: box-shadow .2s ease-in-out;
}
.scori-card:hover { box-shadow: 0 4px 10px rgba(0,0,0,.08); }

.scori-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .35rem;
}
.scori-rank {
  font: 700 .8rem/1 ui-monospace,Menlo,Consolas;
  background:#eef1f5;
  color:#333;
  border-radius:.5rem;
  padding:.15rem .45rem;
}
.scori-date.badge { font-size:.72rem; }

.scori-scoreline {
  font-family:ui-monospace, Menlo, Consolas, monospace !important;
  font-weight: 800;
  font-size: 1.4rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  line-height: 1.1;
}
.scori-ht {
  font-size: .8rem;
  color: #6c757d;
}
.scori-teams {
  font: 700 .95rem/1.1 ui-monospace,Menlo,Consolas;
  text-transform: uppercase;
  letter-spacing:.6px;
  margin-top:.3rem;
}
@media (min-width:768px){ .scori-scoreline{font-size:1.55rem} }

/* Latest Scorigamis — Ticket list */
.scori-list {
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.scori-item {
  background: var(--ft_bg);
  border: 3px solid rgba(0,0,0,.2);
  border-radius: .5rem;
  overflow: clip;
}
.scori-item .scori-link {
  padding:.2rem .5rem;
  text-decoration:none;
  color:inherit;
}
.scori-item .scori-link:focus-visible {
  outline:2px solid var(--pal_blue_light, #7bb3ff);
  outline-offset:2px;
  border-radius:.5rem;
}
.scori-rank-badge {
  display:inline-block;
  min-width:.25rem;
  text-align:left;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  border-radius:.2rem;
}
.scori-teams {
  font-weight:600;
  letter-spacing:.02em;
  overflow:hidden;
  text-overflow:ellipsis;
}
.scori-teams .sep { opacity:.6; margin:0 .05rem; text-transform: lowercase;}
.scori-score .ft { font-weight:800; }
.scori-score .ht { opacity:.8; }
.scori-date {
  margin-left:auto;
  white-space:nowrap;
}
@media (max-width:576px) {
  .scori-item .scori-link { flex-wrap:wrap; row-gap:.25rem; }
  .scori-date { order:4; }
}
.scori-item:hover { border-color: var(--scoripurp); }

/* Hand cursor for interactive tickets */
.scori-list .scori-link { cursor:default; }
.scori-list .scori-link[href],
#scores-list .scori-link[data-ft-h] { cursor:pointer; }

/* Latest scorigamis date pill */
.scori-item .scori-date {
  flex:0 0 80px;
  font-size:0.7rem;
  text-align:center;
  white-space:nowrap;
  padding:2px 6px;
  font-family:ui-monospace, Menlo, Consolas, monospace !important;
}
.scori-list,
.scori-item,
.scori-link {
  font-family:ui-monospace, Menlo, Consolas, monospace !important;
  line-height:1.2;
}
.scori-link .scori-score,
.scori-link .scori-teams,
.scori-link .scori-date {
  font-family:ui-monospace, Menlo, Consolas, monospace !important;
  font-weight:500;
  display:inline-flex;
  align-items:center;
}

/* external link icon in popups */
.ext-link-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  font-style:normal;
  font-weight:bold;
  font-size:0.9em;
  color:#fff !important;
  background:#0d6efd;
  border-radius:4px;
  width:1.3em;
  height:1.3em;
  text-decoration:none !important;
  margin-left:4px;
  line-height:2;
  position:relative;
  top:-0.05em;
  box-shadow:none;
  border:none;
  overflow:hidden;
}
.ext-link-icon:hover {
  background:#0b5ed7;
  transform:translateY(-1px);
}
.ext-link-icon::after {
  content:'';
  display:none;
}

/* --- HARD GUARDS --- */
#grid-title-bar{
  position:sticky;
  top:0;
  z-index:2147483647;
  isolation:isolate;
  background:transparent !important;
  padding:.25rem 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-bottom:1px solid var(--accent-light);
  margin-bottom:.6rem;
}
#grid-title, #grid-title * { position:relative; z-index:2; pointer-events:auto; }
#grid-title {
  color: var(--pal_blue);
  margin:0;
  font-weight:600;
}
.season-filter-wrap { flex-shrink:0; }

/* Push grid/sidebars below */
.scori-layout, .scori-grid-col, .scale-wrap { position:relative; z-index:1; }

/* Ensure menus pop */
.dropdown-menu, .collapse.show, .modal, .offcanvas { z-index:2147483646; }

/* Optional: highlight class you use */
.hover-match { 
	xoutline:2px dashed #f00;
}

/* Debug banner */
#boot-debug {
  position:sticky; top:0; z-index:2147483647;
  display:none; padding:.25rem .5rem; font:12px/1.3 system-ui;
}
#boot-debug.ok { display:block; background:#e9f7ef; color:#0f5132; }
#boot-debug.err{ display:block; background:#fde2e1; color:#842029; }

/* Debug toggle styles */
#click-debug {
  position:fixed; right:10px; bottom:10px; z-index:2147483647;
}
.no-grid-clicks .scori-layout * { pointer-events:none !important; }

h1, h2, h3, h4, h5, h6 {
  color: var(--pal_blue);
}

/* top-left meta corner: total + F1/F2/HT */
.corner {
  /* let the inner table control the size */
  xbackground:#fff;
  text-align:center;
  vertical-align:middle;
  font-weight:700;
  line-height:1.2;
}

/* inner 2×2 table */
.corner4{
  border-collapse:collapse;
  border-spacing:0;
  table-layout:fixed;
  xwidth:100%;
  xheight:100%;
}

/* all 4 small cells */
.corner4 td{
  padding:0;
  xborder:1px solid rgba(0,0,0,.4);
  box-sizing:border-box;
  text-align:center;
  vertical-align:middle;
  font-size:0.75rem;
}

/* match column widths:
   - left col = FT row header width
   - right col = HT index column width
*/
.corner4 td:first-child{
  width:var(--hdrrowwidth);
}
.corner4 td:last-child{
  width:var(--ht-w);
}

.corner-ht {
	border-top: 1px solid #000 !important;
	border-left: 1px solid #000 !important;
}

/* match row heights:
   - top row = FT column header height
   - bottom row = HT header height
*/
.corner4 tr:first-child td{
  height:var(--hdrcolheight);
  background:var(--FTHeader);
}
.corner4 tr:last-child td{
  height:var(--ht-h);
  xbackground:var(--HTHeader);
}

/* big total cell stays white inside */
.corner4 .corner{
  xbackground:#fff;
}

.corner-f1 {
  display: flex;
  align-items: center;
  justify-content: center;
  /* vertical text */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  background: var(--white) !important;
}