*{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}
.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}
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}
.tab-btn.active{background:var(--line);color:#fff}
.panel{display:none}
.panel.active{display:block}

.page-title{background:none;color:var(--line);font-size:15px;}

.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{width:100%}
.frames{display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--line);border-left:2px solid var(--line)}
.frame{min-height:130px;background:var(--card);border-right:2px solid var(--line);border-bottom:2px solid var(--line)}
.frame-title{padding:6px 2px;background:var(--head);text-align:center;font-size:13px;font-weight:bold}
.frame-bonus .frame-title{background:var(--line);color:#fff}
.rolls{display:flex;height:38px;border-bottom:2px solid var(--line)}
.roll{flex:1;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);font-size:18px;font-weight:bold}
.roll:last-child{border-right:none}
.score-label{margin-top:4px;text-align:center;font-size:10px;font-weight:bold;color:var(--sub);text-transform:uppercase}
.score{height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:bold;color:#4a8f00}

.bottom-area{display:grid;grid-template-columns:repeat(5,1fr);width:100%}
.button-area{grid-column:1/5;padding-top:10px}
.controls-title{margin-bottom:7px;text-align:center;font-size:15px;font-weight:bold}
.pin-buttons{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.pin-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){.pin-button:hover:not(:disabled){background:none;border-color:var(--line);color:var(--line)}}
.pin-button:active:not(:disabled){transform:scale(.96)}
.pin-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}

.totals{grid-column:5}
.total-box{margin-top:5px;padding:6px 3px;background:var(--head);text-align:center;border:2px solid var(--line)}
.total-label{display:block;margin-bottom:3px;font-size:11px;font-weight:bold}
.total-box input{width:100%;max-width:55px;padding:2px;border:1px solid #999;border-radius:4px;text-align:center;font-size:14px}
.grand-total-value{display:block;font-size:20px;font-weight:bold;color:#4a8f00}

.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}
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}
.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}