:root{
  /* richer variation across the red family for the Star Catches chart */
  --red1: rgba(255, 170, 110, .88);
  --red2: rgba(255, 120, 90, .88);
  --red3: rgba(255, 70, 70, .88);
  --red4: rgba(230, 30, 70, .88);
  --red5: rgba(150, 0, 40, .92);

  --bg:#0b1b3a;
  --bg2:#0a2a5a;
  --panel:#07193a;
  --panel2:#08224d;
  --ink:#e9f1ff;
  --muted:#a9bddc;
  --accent:#ffc400;

  --common:#7dd3fc;
  --rare:#60a5fa;
  --epic:#a78bfa;
  --legendary:#facc15;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background-image: linear-gradient(180deg, var(--bg) 0%, #8ab6ff 100%);
  /* force a single gradient "tile" (no repeating artifacts) */
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
}

.topbar{
  /* single, smooth gradient (no 3-band look) */
  background:linear-gradient(90deg, #001a66 0%, #000e3a 100%);
  background-repeat:no-repeat;
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:visible;

  padding: 4px 12px;}
.topbar-inner{
  /* banner content ~40% thinner */
  max-width: 100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  /* thinner header */
  /* extra right padding so title never collides with the logo */
  padding: 12px 24px;
  min-height: 64px;
}
.brand{ text-align:left; }
.brand-title{
  font-weight:900;
  letter-spacing:2px;
  font-size:44px;
  color:var(--accent);
  line-height:1;
}
.brand-sub{
  font-size:11px;
  letter-spacing:1.2px;
  color:rgba(255,255,255,.75);
  margin-top:0;
}
.brand-mark{
  font-size:38px;
  opacity:.9;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

.layout{
  max-width: 100%;
  margin:0 auto;
  display:grid;
  grid-template-columns: 230px 1fr;
  gap:18px;
  padding: 12px 24px;
}

.sidebar{
  background:linear-gradient(180deg, rgba(4,12,34,.88), rgba(6,22,60,.88));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding: 12px 24px;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.sidebar-section{margin-bottom:18px}
.sidebar-title{
  font-size:12px;
  color:rgba(255,255,255,.8);
  letter-spacing:1.1px;
  text-transform:uppercase;
  margin:6px 0 10px;
}

.btn-list{display:flex; flex-direction:column; gap:6px}
.loc-btn{
  width:100%;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:var(--ink);
  padding: 12px 24px;
  font-size:13px;
  text-align:left;
  cursor:pointer;
}
.loc-btn:hover{background:rgba(255,255,255,.12)}
.loc-btn.active{
  background:rgba(255,196,0,.18);
  border-color:rgba(255,196,0,.4);
}

.rarity-legend{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.legend-item{display:flex; align-items:center; gap:8px; font-size:10px; color:rgba(255,255,255,.85)}
.swatch{width:14px; height:14px; border-radius:4px; display:inline-block}
.swatch.common{background:var(--common)}
.swatch.rare{background:var(--rare)}
.swatch.epic{background:var(--epic)}
.swatch.legendary{background:var(--legendary)}

.progress{display:flex; flex-direction:column; align-items:center}
.donut{
  width:160px;
  height:160px;
  border-radius:50%;
  background:conic-gradient(#9ad54d 0deg, #9ad54d 0deg, rgba(255,255,255,.14) 0deg);
  display:flex;
  align-items:center;
  justify-content: space-between;
  box-shadow: inset 0 0 0 18px rgba(4,12,34,.88);
}
.donut-value{font-size:14px; font-weight:800; color:#0b1b3a; background:#9ad54d; padding: 12px 24px; border-radius:999px}

.content{display:flex; flex-direction:column; gap:14px}

.kpis{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap:12px;
}
.kpi{
  background:linear-gradient(180deg, rgba(4,12,34,.86), rgba(3,10,28,.86));
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding: 12px 24px;
  box-shadow:0 16px 36px rgba(0,0,0,.2);
}
.kpi-label{font-size:10px; color:rgba(255,255,255,.78); margin-bottom:6px}
.kpi-value{font-size:26px; font-weight:900; letter-spacing:0.5px}
.kpi-stars{font-size:26px; color:var(--accent); letter-spacing:2px}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.panel{
  background:linear-gradient(180deg, rgba(4,12,34,.86), rgba(3,10,28,.86));
  border:1px solid rgba(255,255,255,.09);
  border-radius:28px;
  padding: 12px 24px;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.panel.span-2{grid-column:1 / span 1}
.panel-title{font-size:12px; color:rgba(255,255,255,.78); margin:2px 0 8px}

canvas{width:100% !important; height:260px !important;}
.panel canvas{height:260px !important}
.panel:nth-child(2) canvas,
.panel:nth-child(4) canvas{height:300px !important}

.table-wrap{
  background:linear-gradient(180deg, rgba(4,12,34,.86), rgba(3,10,28,.86));
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.table-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding: 12px 24px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.table-title{font-size:14px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.9)}
.location-select{font-size:12px; color:rgba(255,255,255,.78); display:flex; gap:10px; align-items:center; flex-wrap:wrap}
select{
  background:rgba(255,255,255,.08);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.16);
  padding: 12px 24px;
  border-radius:10px;
}
.total-fish{font-size:12px; color:rgba(255,255,255,.82)}
.total-fish strong{color:var(--accent)}

.table-scroll{max-height:380px; overflow:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{
  position:sticky;
  top:0;
  background:rgba(5,16,44,.98);
  color:rgba(255,255,255,.9);
  padding: 12px 24px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.12);
}
tbody td{padding: 12px 24px; border-bottom:1px solid rgba(255,255,255,.06)}
tbody tr:hover{background:rgba(255,255,255,.05)}

.fish-name{cursor:help; border-bottom:1px dotted rgba(255,255,255,.35)}

.input-cell{min-width:160px}
input{
  width:120px;
  padding: 12px 24px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:var(--ink);
}
input:focus{outline:none; border-color:rgba(255,196,0,.55); box-shadow:0 0 0 3px rgba(255,196,0,.12)}
input.outofrange{border-color:rgba(255,90,90,.75)}

.inline-error{
  display:none;
  font-size:11px;
  color:#ffd1d1;
  margin-top:4px;
}
.inline-error.show{display:block}

tbody tr.common td:first-child{color:var(--common)}
tbody tr.rare td:first-child{color:var(--rare)}
tbody tr.epic td:first-child{color:var(--epic)}
tbody tr.legendary td:first-child{color:var(--legendary)}

@media (max-width: 100%){
  .layout{grid-template-columns:1fr}
  .sidebar{order:2}
  .kpis{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns: 1fr 1fr;
  width:auto;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
  /* keep logo pinned right while allowing a thinner header bar */
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
}
@media (max-width: 100%){
  .topbar-inner{ padding: 12px 24px; 
  min-height: 64px;}
  .brand-logo{ height:128px; right:16px; }
}

to{transform:translateY(-120px)}}
@keyframes puff{
0%{transform:translate(0,0);opacity:0;}
20%{opacity:1;}
100%{transform:translate(60px,-40px);opacity:0;}
}


15%{opacity:1;}
  60%{opacity:0.85;}
  100%{transform:translate(28px,-26px) scale(1.15); opacity:0;}
}