:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f4fbf7;
  background: #07110d;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { background: #050906; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: #050906;
  background-image:
    linear-gradient(180deg, rgba(2,7,4,.30) 0%, rgba(2,7,4,.42) 55%, rgba(2,7,4,.58) 100%),
    url("./assets/zoo-jungle-background.png");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}
body.modal-open { overflow: hidden; }
button,input,select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.app-shell { position: relative; min-height: 100vh; overflow: hidden; background:linear-gradient(90deg,rgba(0,0,0,.10),transparent 28%,transparent 72%,rgba(0,0,0,.10)); }
.app-shell::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(3,10,6,.05) 0%,rgba(3,10,6,.18) 42%,rgba(3,10,6,.46) 100%); }
.ambient { display:none; }
.ambient-one { top:16%; left:-150px; background:#59ef9c; }
.ambient-two { right:-170px; bottom:4%; background:#2a8f61; }
.page-wrap { position:relative; z-index:1; width:min(960px,calc(100% - 28px)); margin:0 auto; padding:34px 0 48px; filter:drop-shadow(0 18px 40px rgba(0,0,0,.22)); }
.hero { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.brand-lockup { display:flex; align-items:center; gap:15px; }
.brand-mark { display:grid; place-items:center; width:58px; height:58px; border:1px solid #d6b84c; border-radius:18px; color:#171104; background:linear-gradient(145deg,#f3d977,#b9962f); font-size:18px; font-weight:950; letter-spacing:-.06em; box-shadow:0 10px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.45); }
.eyebrow,.section-kicker { margin:0 0 4px; color:#d7c47c; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hero h1,.section-heading h2,.modal-heading h2 { margin:0; }
.hero h1 { font-size:clamp(24px,4vw,34px); letter-spacing:-.045em; color:#fffdf2; text-shadow:0 2px 14px rgba(0,0,0,.75); }
.top-actions { display:flex; gap:10px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid transparent; border-radius:12px; cursor:pointer; font-weight:800; transition:transform .15s ease,border-color .15s ease,background .15s ease,opacity .15s ease; }
.button:hover:not(:disabled) { transform:translateY(-1px); }
.button:active:not(:disabled) { transform:translateY(0); }
.button:disabled { cursor:not-allowed; opacity:.48; }
.button-primary { color:#161003; border-color:#e6ca64; background:linear-gradient(145deg,#f4dc7d,#c2a13b); box-shadow:0 10px 24px rgba(0,0,0,.28); }
.button-secondary { color:#fffdf4; border-color:#8f7938; background:rgba(8,15,11,.94); box-shadow:0 8px 20px rgba(0,0,0,.22); }
.button-danger { color:#ffe8e8; border-color:rgba(236,108,108,.3); background:rgba(125,39,39,.44); }
.full-width { width:100%; }
.error-banner,.setup-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; padding:12px 14px; border-radius:12px; }
.error-banner { border:1px solid rgba(248,113,113,.3); color:#ffd5d5; background:rgba(127,29,29,.26); }
.setup-banner { align-items:flex-start; flex-direction:column; border:1px solid rgba(246,190,70,.26); color:#f1d797; background:rgba(93,67,14,.22); }
.setup-banner span { color:#a99261; font-size:12px; }
.setup-banner code { color:#e8cf92; }
.error-banner button,.icon-button { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; padding:0; border:1px solid #234233; border-radius:10px; color:#a8c2b3; background:rgba(12,28,21,.76); cursor:pointer; font-size:22px; line-height:1; }
.section-card { margin-bottom:18px; padding:20px; border:1px solid rgba(211,182,77,.42); border-radius:20px; background:linear-gradient(180deg,rgba(7,15,10,.95),rgba(5,11,8,.96)); box-shadow:0 22px 60px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter:blur(10px); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.section-heading h2 { font-size:22px; letter-spacing:-.03em; color:#fffef8; }
.heading-badge { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid #746431; border-radius:999px; color:#f5e6aa; background:#10150e; font-size:12px; font-weight:800; }
.event-list,.leaderboard-list,.missed-player-list { display:grid; gap:8px; }
.event-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:13px; width:100%; padding:11px 12px; border:1px solid rgba(156,133,55,.22); border-radius:14px; color:inherit; background:rgba(11,18,13,.94); text-align:left; cursor:pointer; transition:background .15s ease,border-color .15s ease,transform .15s ease; }
.event-row:hover { border-color:#b69a3e; background:rgba(18,27,20,.98); transform:translateY(-1px); }
.event-date-tile { display:grid; place-items:center; width:50px; min-height:54px; padding:6px; border:1px solid #8e7936; border-radius:12px; background:#111a12; }
.event-date-tile strong { font-size:18px; line-height:1; }
.event-date-tile span { margin-top:4px; color:#f0d66d; font-size:10px; font-weight:900; letter-spacing:.08em; }
.event-copy { min-width:0; }
.event-copy h3 { margin:0 0 5px; overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.event-copy p { margin:0; color:#c8d1ca; font-size:12px; line-height:1.35; }
.event-missed { min-width:54px; text-align:right; }
.event-missed strong { display:block; color:#ffb5b5; font-size:18px; }
.event-missed span { color:#c49a9d; font-size:11px; font-weight:800; text-transform:uppercase; }
.row-chevron { color:#b79b45; font-size:28px; line-height:1; }
.leaderboard-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; min-height:52px; padding:7px 11px; border:1px solid rgba(156,133,55,.2); border-radius:13px; background:rgba(11,18,13,.94); }
.rank { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:#e3e8e3; background:#1c261d; font-size:13px; font-weight:950; }
.rank-1 { color:#211902; background:linear-gradient(145deg,#f6dc70,#c8a72b); }
.rank-2 { color:#1b2021; background:linear-gradient(145deg,#dde2df,#9baca2); }
.rank-3 { color:#2a1306; background:linear-gradient(145deg,#e8a66d,#a76431); }
.player-name { overflow:hidden; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.miss-count { min-width:60px; text-align:right; }
.miss-count strong { display:block; color:#ffb5b5; font-size:18px; }
.miss-count span { color:#c49a9d; font-size:10px; font-weight:900; text-transform:uppercase; }
.empty-state { display:grid; place-items:center; min-height:150px; padding:22px; border:1px dashed #8b7636; border-radius:14px; color:#c2cec5; background:rgba(7,13,9,.7); text-align:center; }
.empty-icon { margin-bottom:4px; font-size:28px; }
.empty-state strong { margin-top:7px; color:#fffef6; }
.empty-state span { margin-top:4px; font-size:13px; }
.empty-state.compact { min-height:110px; }
footer { padding:10px 0 0; color:#d2c995; text-shadow:0 2px 10px rgba(0,0,0,.9); font-size:11px; text-align:center; }
.modal-backdrop { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:18px; background:rgba(2,9,6,.76); backdrop-filter:blur(7px); }
.modal-card { width:min(460px,100%); max-height:min(760px,calc(100vh - 36px)); overflow-y:auto; padding:20px; border:1px solid #8c7738; border-radius:20px; background:linear-gradient(180deg,#101810,#080e0a); box-shadow:0 28px 90px rgba(0,0,0,.5); }
.modal-card.modal-wide { width:min(620px,100%); }
.modal-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.modal-heading h2 { font-size:22px; letter-spacing:-.03em; }
.modal-form { display:grid; gap:14px; }
.modal-form label { display:grid; gap:7px; color:#e4e8e4; font-size:12px; font-weight:800; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
input,select { width:100%; min-height:46px; padding:0 12px; border:1px solid #7b6933; border-radius:11px; outline:none; color:#fffef8; background:#070d09; transition:border-color .15s ease,box-shadow .15s ease; }
input:focus,select:focus { border-color:#e2c55a; box-shadow:0 0 0 3px rgba(226,197,90,.12); }
input::placeholder { color:#496053; }
.manage-meta { margin:-6px 0 14px; color:#d4ddd6; font-size:13px; }
.manage-callout { display:grid; gap:3px; margin-bottom:15px; padding:12px 14px; border:1px solid rgba(207,90,90,.24); border-radius:12px; background:rgba(91,26,26,.2); }
.manage-callout span { color:#987e7e; font-size:11px; font-weight:800; text-transform:uppercase; }
.manage-callout strong { color:#ffd2d2; font-size:14px; }
.add-miss-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.missed-list-heading { display:flex; justify-content:space-between; margin:20px 2px 9px; color:#d2c47e; font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.missed-player-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px; border:1px solid #66572d; border-radius:12px; background:rgba(10,16,11,.96); }
.avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#f7df7e; background:#20281b; font-size:12px; font-weight:950; }
.missed-player-row strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.missed-player-row span { display:block; margin-top:2px; color:#c49a9d; font-size:10px; }
.remove-button { padding:7px 8px; border:0; border-radius:8px; color:#cf8e8e; background:transparent; cursor:pointer; font-size:11px; font-weight:850; }
.remove-button:hover { background:rgba(116,42,42,.2); }
.remove-button:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:690px) {
  .page-wrap { width:min(100% - 20px,960px); padding-top:18px; }
  .hero { align-items:stretch; flex-direction:column; gap:16px; }
  .brand-mark { width:52px; height:52px; border-radius:16px; }
  .hero h1 { font-size:26px; }
  .top-actions { display:grid; grid-template-columns:1fr 1fr; }
  .button { padding-inline:12px; }
  .section-card { padding:14px; border-radius:17px; }
  .event-row { grid-template-columns:auto minmax(0,1fr) auto; gap:10px; padding:10px; }
  .row-chevron { display:none; }
  .heading-badge { padding-inline:8px; }
  .form-grid { grid-template-columns:1fr; }
  .modal-card { padding:17px; border-radius:18px; }
}
@media (max-width:430px) {
  .brand-lockup { gap:11px; }
  .brand-mark { width:48px; height:48px; }
  .eyebrow { font-size:10px; }
  .hero h1 { font-size:22px; }
  .top-actions { gap:8px; }
  .top-actions .button { min-height:46px; font-size:13px; }
  .event-date-tile { width:46px; min-height:50px; }
  .event-missed { min-width:46px; }
  .event-missed span { font-size:9px; }
  .add-miss-row { grid-template-columns:1fr; }
  .add-miss-row .button { width:100%; }
  .missed-player-row { grid-template-columns:auto minmax(0,1fr); }
  .remove-button { grid-column:2; justify-self:start; padding-left:0; }
}

@media (max-width: 900px) {
  body { background-attachment: scroll; background-position: 42% top; }
}