/* Game Fish Tournament — Design Tokens & Shared Styles
 * Source: DESIGN.md — "Navigational Brutalism" Dark Ocean Theme
 * When prototype conflicts with this file, prototype wins.
 */

/* ============================================================
   CSS RESET & TOKENS
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;border-radius:0 !important}
.live-dot,.live-dot::after{border-radius:50% !important}

:root{
  --bg:#0c141f;
  --s1:#141c27;
  --s2:#18202b;
  --s3:#232a36;
  --s4:#2d3541;
  --yellow:#c4d000;
  --blue:#1a5fbf;
  --blue-light:#adc6ff;
  --green:#2eb87a;
  --red:#e05252;
  --red-bg:#93000a;
  --text:#dbe3f3;
  --muted:#64748b;
  --dim:#424752;
}

html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font-family:'Public Sans',sans-serif}

/* ============================================================
   GLOBAL ICON SETTINGS
   ============================================================ */
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
}

/* ============================================================
   STATUS CHIPS
   ============================================================ */
.status-chip{
  display:inline-block;
  font-family:'Lexend',sans-serif;
  font-size:8px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:3px 7px;
  margin-left:4px;
}
.chip-ok{background:rgba(46,184,122,0.15);color:var(--green)}
.chip-pend{background:rgba(196,208,0,0.12);color:var(--yellow)}
.chip-dq{background:var(--red-bg);color:#ffb4ab}

/* ============================================================
   SECTION LABEL
   ============================================================ */
.section-label{
  font-family:'Lexend',sans-serif;
  font-size:9px;
  font-weight:700;
  color:var(--blue);
  letter-spacing:0.22em;
  text-transform:uppercase;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.section-label::after{
  content:'';
  flex:1;
  height:1px;
  background:rgba(26,95,191,0.2);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes ping{
  0%{transform:scale(0.8);opacity:0.8}
  100%{transform:scale(2.2);opacity:0}
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes scoreFlash{
  0%{background:rgba(196,208,0,0.3)}
  100%{background:transparent}
}
@keyframes slideUp{
  from{transform:translateY(20px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.score-updated{animation:scoreFlash 0.8s ease-out}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--green);color:#fff;
  font-family:'Lexend',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:12px 20px;
  animation:slideUp 0.3s ease;
  display:flex;align-items:center;gap:8px;
  z-index:999;
}
.toast.error{background:var(--red)}

/* ============================================================
   CTA BUTTON
   ============================================================ */
.cta-btn{
  background:var(--yellow);
  color:#303300;
  font-family:'Lexend',sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:0.15em;
  text-transform:uppercase;
  border:none;
  padding:14px 32px;
  cursor:pointer;
  transition:filter 0.15s;
}
.cta-btn:hover{filter:brightness(1.1)}

/* ============================================================
   INPUT / SELECT (underline style)
   ============================================================ */
.gf-input,.gf-select{
  background:var(--s3);
  border:none;
  border-bottom:2px solid var(--dim);
  color:var(--text);
  font-family:'Public Sans',sans-serif;
  font-size:14px;
  padding:10px 12px;
  outline:none;
  transition:border-color 0.2s;
  -webkit-appearance:none;
  width:100%;
}
.gf-input:focus,.gf-select:focus{border-bottom-color:var(--blue)}
.gf-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238c909e' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:28px;
}
.gf-select option{background:var(--s3);color:var(--text)}