/* ===========================================================================
   Alcosmeg Bowling League — authentically late-90s / early-2000s styling.
   Tiled background, bevelled tables, Comic Sans, the works.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px 8px;
  font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif;
  color: #ffff00;
  /* Classic tiled "starfield on teal" look, faked with CSS gradients so we
     don't have to ship a tile image. */
  background-color: #008080;
  background-image:
    radial-gradient(white 1px, transparent 1px),
    radial-gradient(white 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 20px 20px;
}

a { color: #00ffff; }
a:visited { color: #ff00ff; }
a:hover { color: #ffffff; background: #000080; }

/* Page wrapper: gif gutter | centred frame | gif gutter */
.pagewrap { display: flex; justify-content: center; align-items: flex-start; gap: 14px; }
.sidegutter {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  padding-top: 4px;
}
.sidegif { width: 160px; height: auto; border: 2px ridge #c0c0c0; display: block; }
/* On narrower screens there's no room for the gutters — hide them. */
@media (max-width: 1320px) { .sidegutter { display: none; } }

/* Outer page frame — a chunky bevelled box, centred. */
table.frame {
  width: 800px;
  max-width: 100%;
  background: #c0c0c0;
  color: #000080;
  border: 4px ridge #dfdfdf;
}
td.framecell { padding: 10px; }

/* ---- Header ------------------------------------------------------------- */
.header { text-align: center; background: #000080; padding: 10px; border: 2px inset #c0c0c0; }
.logo { max-width: 90%; max-height: 110px; width: auto; height: auto; border: 3px outset #808080; }
.sitetitle {
  margin: 8px 0 4px;
  font-size: 28px;
  color: #ffff00;
  text-shadow: 2px 2px 0 #ff00ff, 4px 4px 0 #000;
}
blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.marquee { color: #00ff00; background: #000; border: 2px inset #808080; padding: 3px; font-weight: bold; }

/* ---- Navigation --------------------------------------------------------- */
.nav { text-align: center; margin: 10px 0 4px; padding: 6px; background: #000080; border: 2px outset #c0c0c0; }
.navlink {
  display: inline-block;
  padding: 3px 8px;
  color: #ffff00;
  font-weight: bold;
  text-decoration: none;
}
.navlink:hover { color: #fff; background: #ff00ff; }
.navlink.here { color: #00ff00; text-decoration: underline; }
.navsep { color: #ffff00; font-weight: bold; vertical-align: middle; }
hr.rule {
  border: none;
  height: 6px;
  width: 100%;
  margin: 10px 0;
  background: linear-gradient(to right, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
}

/* ---- Main content ------------------------------------------------------- */
.content { background: #ffffff; color: #000080; padding: 14px; border: 2px inset #808080; min-height: 220px; }
.content p, .content li { color: #000080; }
.pagehead {
  text-align: center;
  color: #ff0000;
  text-shadow: 1px 1px 0 #ffff00;
  border-bottom: 3px double #000080;
  padding-bottom: 6px;
}
.errdetail code { color: #800000; font-size: 12px; word-break: break-word; }

/* ---- Seasons ------------------------------------------------------------ */
.seasonbanner {
  text-align: center;
  margin: 0 0 12px;
  padding: 8px;
  font-size: 17px;
  color: #ffff00;
  background: #000080;
  border: 3px outset #6060c0;
}
.seasonbanner b { color: #00ff00; }
.seasonhead {
  margin: 18px 0 4px;
  padding: 4px 8px;
  color: #ffff00;
  background: #800080;
  border: 2px outset #c000c0;
}
.seasoncount { font-size: 12px; font-weight: normal; color: #ffd700; }

/* ---- Data tables (standings, players, games, scorecards) ---------------- */
table.data {
  width: 100%;
  border-collapse: collapse;
  background: #ffffcc;
  color: #000080;
  border: 3px outset #808080;
  margin: 8px 0;
}
table.data th {
  background: #000080;
  color: #ffff00;
  padding: 5px 8px;
  border: 1px solid #4040a0;
}
table.data th a { color: #ffff00; text-decoration: none; }
table.data th a:hover { color: #fff; text-decoration: underline; background: transparent; }
table.data td { padding: 4px 8px; border: 1px solid #c0c0a0; text-align: center; }
table.data td.name, table.data th.name { text-align: left; }
table.data tr:nth-child(even) td { background: #ffffe8; }
table.data tr.rank1 td { background: #ffd700; font-weight: bold; }
table.data tr.rank2 td { background: #e8e8e8; }
table.data tr.rank3 td { background: #f0c890; }
.rankmedal { font-size: 16px; }
.sortarrow { font-size: 10px; }

/* Player stat cards */
.statcard { display: inline-block; min-width: 120px; margin: 6px; padding: 8px 14px; background: #000080; color: #ffff00; border: 3px outset #6060c0; text-align: center; }
.statcard .val { display: block; font-size: 24px; color: #00ff00; }
.statcard .lbl { font-size: 12px; }

/* Bowling scorecard — keeps each frame a readable size and scrolls sideways
   (inside .tablescroll) on screens too narrow to fit all ten frames, rather
   than squishing them all into the viewport width. */
table.scorecard { width: auto; min-width: 100%; border-collapse: collapse; margin: 6px 0 18px; border: 2px solid #000080; }
table.scorecard th { background: #000080; color: #fff; border: 1px solid #000; padding: 2px 4px; font-size: 12px; }
table.scorecard td { border: 1px solid #000080; vertical-align: top; padding: 0; }
table.scorecard th, table.scorecard td { min-width: 34px; }
.frameshots { display: flex; justify-content: flex-end; min-height: 16px; }
.frameshots span { width: 16px; height: 16px; line-height: 16px; font-size: 11px; border-left: 1px solid #000080; border-bottom: 1px solid #000080; }
.framescore { text-align: center; font-weight: bold; padding: 2px; font-size: 13px; }
/* Freeze the player-name column so you can tell whose row is whose while the
   frames scroll horizontally. */
.scorecard th.name, .scorecard td.scoreboard-name {
  position: sticky; left: 0; z-index: 2;
  min-width: 0; padding: 2px 6px; text-align: left; white-space: nowrap;
}
.scorecard th.name { background: #000080; }
.scoreboard-name { font-weight: bold; background: #ffffcc; }

/* Two scorecard layouts: the classic (players as rows) for desktop and a
   transposed one (frames as rows, players as columns) for phones. Only one is
   shown at a time. */
.sc-mobile { display: none; }
table.sc-mobile-table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 2px solid #000080; margin: 6px 0 18px; }
.sc-mobile-table th, .sc-mobile-table td { border: 1px solid #000080; font-size: 11px; }
.sc-mobile-table th { background: #000080; color: #fff; padding: 2px; }
.sc-mobile-table td { vertical-align: top; padding: 0; }
.sc-mobile-table .sc-fnum { width: 30px; }
.sc-mobile-table .sc-pname { white-space: normal; word-break: break-word; font-size: 10px; }
.sc-mobile-table .sc-total { font-size: 14px; }

/* ---- Footer ------------------------------------------------------------- */
.footer { text-align: center; margin-top: 10px; padding: 8px; background: #000080; border: 2px inset #c0c0c0; color: #c0c0c0; }
.footer p { margin: 4px 0; font-size: 12px; }
.footgif { height: 48px; margin: 4px; }
.best { color: #00ff00; }
.counter .hits { font-family: "Courier New", monospace; background: #000; color: #00ff00; padding: 1px 4px; border: 1px solid #00ff00; letter-spacing: 2px; }
.madein { color: #c0c0c0; }

/* Decorative gif strip used on the home page */
.gifstrip { text-align: center; margin: 10px 0; }
.gifstrip img { height: 90px; margin: 4px; border: 2px ridge #c0c0c0; }

/* ---- Mobile / responsive ------------------------------------------------ */
/* Wide tables (league table, scorecard) scroll sideways inside their own box
   rather than forcing the whole page wider than a phone screen. */
.tablescroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.tablescroll > table.data,
.tablescroll > table.scorecard { margin: 0; }
/* Long single-word player names (e.g. "Pinswithgrandad") wrap instead of
   stretching the table. */
table.data td.name, table.data th.name { word-break: break-word; }

@media (max-width: 600px) {
  body { padding: 8px 4px; }
  td.framecell { padding: 6px; }
  .content { padding: 10px; }
  table.frame { border-width: 3px; }

  .sitetitle { font-size: 19px; }
  .logo { max-height: 72px; }
  .marquee { font-size: 12px; }

  .nav { padding: 4px; margin: 8px 0 4px; }
  .navlink { padding: 3px 5px; }
  .navsep { display: none; } /* dots eat width when links wrap to many rows */

  /* Compact the data tables so the 6-column league table fits a phone. */
  table.data { font-size: 12px; }
  table.data th, table.data td { padding: 4px 4px; }
  .rankmedal { font-size: 13px; }

  .statcard { min-width: 0; margin: 4px; padding: 6px 10px; }
  .statcard .val { font-size: 20px; }

  .pagehead { font-size: 18px; }

  /* a ten-frame row won't fit a phone, so swap to the transposed scorecard */
  .sc-desktop { display: none; }
  .sc-mobile { display: block; }
}