:root{
  --navy:#153f97;
  --navy-dark:#0a2967;
  --navy-mid:#2258bf;
  --red:#b50f10;
  --red-dark:#780809;
  --cream:#f2dfbd;
  --cream-2:#ead4b0;
  --cream-3:#fff4dc;
  --ink:#231f1a;
  --brown:#a6672f;
  --brown-dark:#603612;
  --brown-mid:#7a4518;
  --gold:#d19a55;
  --panel:#f7edda;
  --line:#cfa977;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#8f8f8f,#d9d9d9);overflow-x:hidden}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.hidden{display:none!important}
.square{border-radius:0!important}
.min0{min-width:0}

.app-shell{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:0}
.phone-frame{
  width:min(430px,100vw);
  min-height:100vh;
  background:linear-gradient(180deg,#20170f,#030303);
  padding:0 8px;
  box-shadow:0 16px 42px rgba(0,0,0,.38);
}
.phone-frame::before,.phone-frame::after{content:'';display:block;height:10px;background:linear-gradient(180deg,#140f0b,#000)}
.screen-wrap{
  position:relative;
  width:100%;
  min-height:100vh;
  padding:14px 10px 22px;
  overflow-x:hidden;
  background:
    linear-gradient(180deg, rgba(52,24,4,.12), rgba(255,255,255,.03) 10%, rgba(0,0,0,.06) 100%),
    url('court-bg.png') center top / cover no-repeat;
}
.screen-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.06), transparent 40%);
  opacity:.72;
}
.screen-wrap::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 3px rgba(90,49,18,.42), inset 0 0 0 7px rgba(255,228,188,.16);
}
main,.view,.panel,.menu-grid{position:relative;z-index:1}

.brand-header{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;margin-bottom:13px;border:4px solid var(--brown-dark);
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.18), transparent 60%),
    repeating-radial-gradient(circle at 30% 40%, rgba(118,79,34,.07) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, rgba(90,49,19,.32), rgba(255,255,255,.08) 12%, transparent 24%),
    linear-gradient(180deg,var(--cream),var(--cream-2));
  box-shadow:inset 0 0 0 2px var(--cream-3), inset 0 0 0 6px rgba(130,78,28,.32), 0 3px 0 rgba(95,52,18,.72), 0 6px 12px rgba(0,0,0,.12);
}
.brand-title{
  color:var(--navy);
  font-size:clamp(27px,8vw,44px);
  line-height:1;
  font-weight:900;
  letter-spacing:-.05em;
  text-shadow:0 1px 0 #fff, 0 2px 0 rgba(0,0,0,.08);
}
.brand-emoji{font-size:36px;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))}

.hero-bar{display:block;width:100%;text-align:center;text-transform:uppercase;color:#fff;font-weight:900;font-size:18px;line-height:1.1;padding:16px 12px;margin-bottom:16px;border:4px solid var(--brown-dark);background:repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 2px, transparent 2px 9px), linear-gradient(180deg, rgba(255,255,255,.20), transparent 16%), linear-gradient(180deg,var(--red),var(--red-dark));box-shadow:inset 0 0 0 2px rgba(255,226,190,.22), inset 0 0 0 6px rgba(80,0,0,.20), 0 3px 0 rgba(95,52,18,.72), 0 5px 10px rgba(0,0,0,.12)}
.back-home{font-size:17px}

.menu-grid,.content-stack{display:grid;gap:14px}
.content-stack.compact{gap:10px}
.menu-card{display:flex;align-items:center;gap:14px;min-height:104px;width:100%;padding:18px 18px;border:4px solid var(--brown-dark);box-shadow:inset 0 0 0 2px rgba(255,255,255,.16), inset 0 0 0 6px rgba(124,74,29,.18), 0 3px 0 rgba(95,52,18,.72), 0 6px 12px rgba(0,0,0,.12)}
.menu-blue{color:#fff;background:repeating-radial-gradient(circle at 35% 35%, rgba(255,255,255,.05) 0 2px, transparent 2px 9px), radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), transparent 25%), linear-gradient(180deg,#1b59c8,#0f3889)}
.menu-dark{color:#fff;background:repeating-radial-gradient(circle at 35% 35%, rgba(255,255,255,.04) 0 2px, transparent 2px 9px), radial-gradient(circle at 30% 30%, rgba(255,255,255,.07), transparent 25%), linear-gradient(180deg,#42424b,#17171d)}
.menu-light{color:var(--navy);background:repeating-radial-gradient(circle at 35% 35%, rgba(122,82,30,.05) 0 2px, transparent 2px 9px), linear-gradient(180deg,#fff8eb,#f1e3cd)}
.menu-icon{width:58px;min-width:58px;height:58px;display:grid;place-items:center;font-size:32px;border:3px solid rgba(255,255,255,.38);background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08));box-shadow:inset 0 0 0 2px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.12)}
.menu-light .menu-icon{background:#fff;border-color:rgba(180,150,110,.8)}
.menu-text{
  min-width:0;
  font-size:clamp(24px,6.6vw,36px);
  font-weight:900;line-height:1;
  text-shadow:0 2px 0 rgba(0,0,0,.24);
}
.menu-light .menu-text{text-shadow:none}

.panel{width:100%;background:repeating-radial-gradient(circle at 30% 30%, rgba(122,82,30,.04) 0 2px, transparent 2px 10px), linear-gradient(180deg, rgba(255,255,255,.34), transparent 12%), linear-gradient(180deg,#fff7ea,#f4e7d1);border:3px solid rgba(115,71,31,.48);box-shadow:inset 0 0 0 2px rgba(255,255,255,.58), 0 3px 0 rgba(95,52,18,.40), 0 6px 12px rgba(0,0,0,.08);padding:14px}
.top-gap{margin-top:14px}
.row{display:flex;align-items:center}.between{justify-content:space-between}.end{justify-content:flex-end}.wrap{flex-wrap:wrap}.gap12{gap:12px}.grow{flex:1 1 180px}
label,.field label{display:block;margin-bottom:6px;font-size:11px;font-weight:900;color:#4a3928;text-transform:uppercase;letter-spacing:.02em}
input,select,button{font:inherit;max-width:100%}
input,select{width:100%;min-width:0;padding:12px 10px;border:2px solid #d1c2ad;background:linear-gradient(180deg,#fffefb,#fbf6eb);color:var(--ink);box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
button,.primary-btn,.secondary-btn,.danger-btn,.mini-btn,.icon-btn,.ghost,.danger{
  border:3px solid rgba(103,58,23,.5);
  cursor:pointer;
  font-weight:900;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 0 rgba(95,52,18,.28);
}
.primary-btn{color:#fff;background:repeating-radial-gradient(circle at 35% 35%, rgba(255,255,255,.05) 0 2px, transparent 2px 8px), linear-gradient(180deg,#1a55bf,#0e3581);padding:12px 14px}
.secondary-btn,.mini-btn,.icon-btn,.ghost{
  color:var(--ink);
  background:linear-gradient(180deg,#fffefb,#eee2ce);
  padding:12px 14px;
}
.danger-btn,.danger{color:#fff;background:repeating-radial-gradient(circle at 35% 35%, rgba(255,255,255,.04) 0 2px, transparent 2px 8px), linear-gradient(180deg,var(--red),var(--red-dark));padding:12px 14px}
.month-nav{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;max-width:100%}
.month-label{font-weight:900;text-transform:capitalize;min-width:130px;text-align:center;font-size:16px}
.calendar-head,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calendar-head div{text-align:center;font-size:11px;font-weight:900;color:#4a3928;padding:4px 1px;overflow:hidden}
.day-cell{
  min-width:0;min-height:74px;padding:5px;text-align:left;
  background:rgba(255,252,245,.9);
  border:2px solid #d3c0a7;
}
.day-cell.other-month{opacity:.45}
.day-cell.selected{border-color:#295fcc;outline:2px solid rgba(41,95,204,.18)}
.day-number{font-weight:900;font-size:14px;margin-bottom:4px}
.day-events-preview{display:grid;gap:3px}
.event-chip{
  font-size:10px;font-weight:900;background:#edf2ff;color:var(--navy);
  padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid rgba(19,63,146,.14)
}
.muted{color:#6d5f4f}
.event-card,.player-row{border:2px solid #d8cab5;background:#fffdf8;padding:12px}
.event-meta{color:#6d5f4f;margin-top:6px;font-size:13px}
.small-actions{display:flex;gap:8px;flex-wrap:wrap}
.grid2,.grid3,.filters{display:grid;gap:12px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3,.filters{grid-template-columns:repeat(3,minmax(0,1fr))}
.span3{grid-column:1 / -1}
.pill{background:#f2f5ff;color:var(--navy);border:2px solid rgba(19,63,146,.18);padding:8px 10px;font-weight:900}
.attendance-list{display:grid;gap:8px;max-height:none;overflow:visible}
.att-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px;border:2px solid #ddd1bf;background:#fffdf7;min-width:0}
.att-name{font-weight:800;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inline-check{display:flex;align-items:center;gap:8px;margin:0;flex:0 0 auto}
.inline-check input{width:auto}
.player-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.player-number{min-width:54px;text-align:center;background:#edf2ff;color:var(--navy);border:2px solid rgba(19,63,146,.16);padding:10px 8px;font-weight:900}
.player-sub{color:#6d5f4f;font-size:12px;margin-top:4px}
.table-wrap{overflow-x:auto}
.table-wrap table{width:100%;border-collapse:collapse;background:#fffdf8}
.table-wrap th,.table-wrap td{border:1px solid #d8cab5;padding:8px 5px;text-align:left}
.stats-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
.panel,.filters>div,.stats-filters>div{min-width:0}
.table-wrap.stats-table-wrap{overflow-x:hidden}
.stats-table{width:100%;table-layout:fixed}
.stats-table th,.stats-table td{padding:6px 2px;font-size:9px;text-align:center;word-break:break-word}
.stats-table th:nth-child(1),.stats-table td:nth-child(1){width:11%}
.stats-table th:nth-child(2),.stats-table td:nth-child(2){width:34%;text-align:left}
.stats-table th:nth-child(3),.stats-table td:nth-child(3),.stats-table th:nth-child(4),.stats-table td:nth-child(4),.stats-table th:nth-child(5),.stats-table td:nth-child(5),.stats-table th:nth-child(6),.stats-table td:nth-child(6){width:13.75%}
.stats-table .athlete-cell{line-height:1.05}
.stats-table .athlete-short{display:block;font-weight:800;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats-note{font-size:11px}.stats-title{font-size:18px}.stats-compact h2{font-size:18px;margin-bottom:4px}
.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:#151515;color:#fff;padding:10px 14px;z-index:2000;border:2px solid #fff}

.editor-panel{padding:12px;min-height:calc(100vh - 150px)}
.editor-form{width:100%;max-width:100%}
.editor-form .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.editor-attendance-list{max-height:none;overflow:visible}
#eventEditorView{width:100%;max-width:100%}
#eventEditorView .panel{width:100%;max-width:100%;overflow-x:hidden}

@media (max-width:520px){
  .phone-frame{width:100vw;padding:0 5px}
  .screen-wrap{padding:10px 8px 16px}
  .brand-header{padding:12px 12px}
  .brand-title{font-size:clamp(24px,9.4vw,36px)}
  .brand-emoji{font-size:30px}
  .hero-bar{font-size:15px;padding:14px 10px}
  .menu-card{min-height:92px;padding:14px}
  .menu-icon{width:52px;min-width:52px;height:52px;font-size:28px}
  .menu-text{font-size:clamp(20px,8vw,28px)}
  .grid2,.grid3,.filters{grid-template-columns:1fr}
  .stats-filters{grid-template-columns:1fr 1fr}
  .month-nav{width:100%;justify-content:space-between}
  .month-label{flex:1 1 auto;min-width:0;font-size:14px}
  .calendar-head,.calendar-grid{gap:3px}
  .calendar-head div{font-size:10px;padding:3px 1px}
  .day-cell{min-height:62px;padding:4px}
  .day-number{font-size:13px}
  .event-chip{font-size:9px}
  .player-row{grid-template-columns:1fr}
  .player-number{width:fit-content}
  .stats-table th,.stats-table td{padding:5px 1px;font-size:8.5px}
  .stats-table .athlete-short{font-size:8.5px}
  .editor-panel{padding:10px;min-height:calc(100vh - 140px)}
  .editor-form{gap:10px}.editor-form h3{font-size:18px}
  .editor-form input,.editor-form select,.editor-form button{font-size:16px}
  .editor-form .grid2{grid-template-columns:1fr 1fr;gap:10px}
  .editor-attendance-list .att-row{padding:8px}.editor-attendance-list .att-name{font-size:12px}
  .editor-form .row.gap12.end.wrap{justify-content:stretch}.editor-form .row.gap12.end.wrap>*{flex:1 1 100%;width:100%}
}

.hero-bar,.menu-card,.panel,.primary-btn,.danger-btn,.secondary-btn,.mini-btn,.icon-btn,.ghost,.danger,input,select,.event-card,.player-row,.att-row,.day-cell,.event-chip,.pill{border-radius:0!important}
.panel h2,.panel h3{font-weight:900;letter-spacing:-.02em}
.event-card{background:linear-gradient(180deg,#fffdf8,#f8ecd9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.pill{background:linear-gradient(180deg,#f2f5ff,#e7edff)}