*{box-sizing:border-box}
:root{--bg:#eee;--card:#fff;--ink:#222;--sub:#666;--line:#68C000;--head:#ddd}
body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--ink)}
.app{width:100%;max-width:900px;margin:0 auto;padding:16px}
.admin-bar{text-align:right;font-size:13px;color:var(--sub);margin-bottom:6px}
.admin-bar a{color:var(--line);font-weight:bold;text-decoration:none}
.admin-note{font-size:13px;color:var(--sub)}
.admin-note a{color:var(--line);font-weight:bold}
.player-name-highlight{color:var(--line)}
.admin-panel{background:var(--head);border-radius:8px;padding:12px;margin-bottom:16px}
.admin-panel h3{margin-top:0}
.admin-action{padding:4px 8px;font-size:12px;border:1px solid var(--line);border-radius:4px;background:none;color:var(--line);cursor:pointer;margin:0 2px}
.admin-action-danger{border-color:#c0392b;color:#c0392b}
.total-label{display:block;margin-bottom:3px;font-size:11px;font-weight:bold}
h1{margin:0 0 14px;text-align:center;font-size:26px}
.card{background:var(--card);border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,.15);padding:16px;margin-bottom:14px}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tab-btn{flex:1;padding:10px;border:2px solid var(--line);border-radius:8px;background:none;color:var(--line);font-weight:bold;font-size:15px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.tab-btn:hover{background:#cdeba3;color:#777}
.tab-btn.active{background:var(--line);color:#fff}
.tab-btn.active:hover{background:var(--line);color:#fff}
.panel{display:none}
.panel.active{display:block}

.player-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.player-row select,.player-row input{padding:8px;border:1px solid #999;border-radius:5px;font-size:14px}
.player-row select{flex:1;min-width:140px}
.player-row input{flex:1;min-width:140px}
.player-row button{padding:8px 16px;border:none;border-radius:5px;background:var(--line);color:#fff;font-weight:bold;cursor:pointer}

/* play-layout is a grid so ball-buttons can be repositioned beside the
   scoresheet on mobile (see media query below) without changing the
   markup order — desktop just stacks everything in one column. */
.play-layout{width:100%;display:grid;grid-template-columns:1fr;grid-template-areas:"sheet" "title" "balls" "msg" "reset"}
.scoresheet{grid-area:sheet}
.controls-title{grid-area:title;margin-top:14px;margin-bottom:7px;text-align:center;font-size:15px;font-weight:bold}
.ball-buttons{grid-area:balls}
.message{grid-area:msg}
.reset-area{grid-area:reset}

/* Flat spreadsheet-style scoresheet (frame headers / innings / running
   score in one continuous grid, with a merged Handicap+Total box at the
   end of the row) — modeled after the reference scoresheet layout. */
.scoresheet{display:flex;align-items:stretch;border:1px solid #ccc;border-radius:6px;overflow:hidden;background:var(--card)}
.sheet-frames{flex:1;display:grid;grid-template-columns:repeat(5,1fr)}
.sheet-frames>*{border-right:1px solid #ccc;border-bottom:1px solid #ccc}
.sheet-frames>*:nth-child(5n){border-right:none}
.frame-header{padding:6px 2px;background:#e9e9e9;text-align:center;font-size:14px;font-weight:bold}
.frame-innings{display:flex;height:40px}
.inning{flex:1;display:flex;align-items:center;justify-content:center;border-right:1px solid #ddd;font-size:18px;font-weight:bold;transition:background-color .15s ease}
.inning:last-child{border-right:none}
.inning.active{background:#fff9c4}
.frame-score{height:40px;display:flex;align-items:center;justify-content:center;background:#f7f7f7;font-size:20px;font-weight:bold;color:#4a8f00;border-bottom:none}

.side-box{width:110px;flex:0 0 110px;border-left:2px solid #ccc;background:#fafafa;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:8px}
.side-pair{display:flex;flex-direction:column;align-items:center}
.side-label{font-size:11px;font-weight:bold;color:var(--sub);text-transform:uppercase;letter-spacing:.3px}
.side-value{font-size:22px;font-weight:bold;color:#4a8f00}

.ball-buttons{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.ball-button{width:42px;height:38px;border:1px solid transparent;border-radius:5px;background:var(--line);color:#fff;font-size:16px;font-weight:bold;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .1s}
@media (hover:hover) and (pointer:fine){.ball-button:hover:not(:disabled){background:none;border-color:var(--line);color:var(--line)}}
.ball-button:active:not(:disabled){transform:scale(.96)}
.ball-button:disabled{background:#aaa;color:#fff;cursor:not-allowed}
.message{min-height:22px;margin-top:8px;text-align:center;font-size:14px;font-weight:bold}
.reset-area{text-align:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.reset-button{margin-top:12px;padding:8px 22px;border:1px solid transparent;border-radius:5px;background:var(--line);color:#fff;font-size:14px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
@media (hover:hover) and (pointer:fine){.reset-button:hover:not(:disabled){border-color:var(--line);background:none;color:var(--line)}}
.reset-button:disabled{background:#aaa;color:#fff;cursor:not-allowed}
.save-button{margin-top:12px;padding:8px 22px;border:1px solid transparent;border-radius:5px;background:#1b6fd1;color:#fff;font-size:14px;font-weight:bold;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
@media (hover:hover) and (pointer:fine){.save-button:hover:not(:disabled){border-color:#1b6fd1;background:none;color:#1b6fd1}}
.save-button:disabled{background:#aaa;color:#fff;cursor:not-allowed}

/* ============ MOBILE SCORESHEET (<=600px) ============
   Matches the reference: each frame becomes its own row (# | innings |
   score), the ball buttons form a vertical column running alongside the
   table instead of a row underneath, and Handicap/Total move to a
   single footer row below the table. */
@media (max-width: 600px) {
  .play-layout{
    grid-template-columns:1fr 72px;
    /* Column 1 (1fr) always holds title/sheet/msg/reset, so they share
       one centered width with each other — title/msg don't span into
       column 2, unlike an earlier version of this layout, where they
       spanned the full row (buttons included) while reset only centered
       within the narrower column, so their centers didn't line up.
       "balls" only repeats in the sheet/msg/reset rows (not title) so
       the button column's top starts level with the scoresheet's top,
       not higher up alongside the title. */
    grid-template-areas:"title ." "sheet balls" "msg balls" "reset balls";
    column-gap:8px;
    align-items:start;
  }
  /* Both of these are confined to the left column now (see
     grid-template-areas above) — pinned to full width of that column and
     centered explicitly here so they can't end up hugging one side. */
  .controls-title{width:100%;text-align:center}
  .message{width:100%;text-align:center}
  .scoresheet{flex-direction:column}
  .sheet-frames{grid-template-columns:34px 1fr 56px}
  /* Reposition the 15 children (5 headers, then 5 innings, then 5
     scores, in that source order) into one row per frame. */
  .sheet-frames>*:nth-child(1){grid-row:1;grid-column:1}
  .sheet-frames>*:nth-child(2){grid-row:2;grid-column:1}
  .sheet-frames>*:nth-child(3){grid-row:3;grid-column:1}
  .sheet-frames>*:nth-child(4){grid-row:4;grid-column:1}
  .sheet-frames>*:nth-child(5){grid-row:5;grid-column:1}
  .sheet-frames>*:nth-child(6){grid-row:1;grid-column:2}
  .sheet-frames>*:nth-child(7){grid-row:2;grid-column:2}
  .sheet-frames>*:nth-child(8){grid-row:3;grid-column:2}
  .sheet-frames>*:nth-child(9){grid-row:4;grid-column:2}
  .sheet-frames>*:nth-child(10){grid-row:5;grid-column:2}
  .sheet-frames>*:nth-child(11){grid-row:1;grid-column:3}
  .sheet-frames>*:nth-child(12){grid-row:2;grid-column:3}
  .sheet-frames>*:nth-child(13){grid-row:3;grid-column:3}
  .sheet-frames>*:nth-child(14){grid-row:4;grid-column:3}
  .sheet-frames>*:nth-child(15){grid-row:5;grid-column:3}
  .sheet-frames>*:nth-child(n+11){border-right:none}
  /* The desktop-only "nth-child(5n){border-right:none}" rule above also
     matches frame 5's header (5) and innings (10) cells here, since the
     mobile layout repositions them into row 5 instead of column 5 —
     restore their dividers. */
  .sheet-frames>*:nth-child(5),.sheet-frames>*:nth-child(10){border-right:1px solid #ccc}
  .frame-innings{height:44px}
  .frame-score{height:44px;border-bottom:1px solid #ccc}

  .side-box{
    width:auto;flex:0 0 auto;
    flex-direction:row;justify-content:space-around;
    border-left:none;border-top:2px solid #ccc;
    padding:10px 4px;gap:0;
  }
  .side-pair{flex-direction:row;gap:6px;padding:0 14px}
  .side-pair+.side-pair{border-left:1px solid #ccc}

  .ball-buttons{
    grid-area:balls;
    flex-direction:column;flex-wrap:nowrap;align-items:center;
    gap:6px;
  }
  /* Same fixed size as the desktop/landscape buttons (width:42px;
     height:38px, set in the base .ball-button rule above) — just
     stacked in a column instead of wrapped in a row. */
  .ball-button{flex:none}
}

.final-score{margin-top:14px;text-align:center;font-size:20px;font-weight:bold}

table.standings-table{width:100%;border-collapse:collapse;font-size:14px}
.standings-table th,.standings-table td{padding:8px 6px;text-align:center;border-bottom:1px solid #ccc}
.standings-table th{background:var(--head)}
.standings-table td:first-child,.standings-table th:first-child{text-align:left}
.standings-table tbody tr:nth-child(1) td:first-child{font-weight:bold;color:#4a8f00}
.standings-table th.sortable{cursor:pointer;user-select:none}
.standings-table th.sortable:hover{background:#e2e2e2}
.standings-table .sort-arrow{font-size:11px;color:#4a8f00;margin-left:2px}
h3{margin:16px 0 8px;font-size:16px}
#recent-games{list-style:none;padding:0;margin:0;font-size:14px}
#recent-games li{padding:6px 0;border-bottom:1px solid #ccc;display:flex;justify-content:space-between}
.team-tag{color:var(--sub);font-size:12px}
.empty-note{color:var(--sub);font-size:13px;text-align:center;padding:10px}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:10px}
.stat-tile{background:var(--card);border:1px solid #ddd;border-radius:8px;padding:10px;text-align:center}
.stat-tile .stat-value{font-size:20px;font-weight:bold;color:#4a8f00}
.stat-tile .stat-label{margin-top:2px;font-size:10px;font-weight:bold;color:var(--sub);text-transform:uppercase;letter-spacing:.3px}