:root{
  --bg:#f4fbff;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0b6b8f; /* dark teal */
  --accent-2:#ff6b35; /* gator orange */
  --glass: rgba(255,255,255,0.7);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
body{background:linear-gradient(180deg,#eaffff 0%,var(--bg) 60%);color:#0f172a}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid rgba(12,44,60,0.06);}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:54px;height:54px}
.title{font-family:Merriweather,serif;font-weight:700;font-size:20px;color:var(--accent)}
.subtitle{font-size:12px;color:var(--muted);margin-top:2px}
.header-note{font-size:13px;color:var(--muted)}
.container{display:flex;gap:26px;max-width:1100px;margin:36px auto;padding:0 22px}
.panel{flex:1}
.panel-left{max-width:380px}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(12,44,60,0.06);margin-bottom:18px}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:8px 12px;border-radius:10px;border:none;cursor:pointer;font-weight:600}
.btn:active{transform:translateY(1px)}
.card.small{padding:14px}
.muted{color:var(--muted)}
h2,h3{margin:0 0 8px 0;font-weight:600}
.select-wrap select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(12,44,60,0.06);font-size:15px}
.arrive-row{display:flex;align-items:center;gap:12px;margin-top:16px}
#arrivalInput{flex:1}
.arrive-value{width:64px;text-align:right;font-weight:600}
.explain{font-size:13px;margin-top:12px}
.result{min-height:360px;display:flex;align-items:center;justify-content:center}
.result.empty{opacity:0.98}
.result-inner{width:100%}
.result-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.game-title{font-weight:700;font-size:18px}
.wait-badge{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:10px 14px;border-radius:999px;font-weight:700}
.wait-area{display:flex;flex-direction:column;gap:12px;align-items:center}
.wait-large{font-size:48px;font-weight:800;color:var(--accent)}
.wait-sub{color:var(--muted)}
.bar-wrap{width:100%;padding:8px 0}
.bar-bg{height:14px;background:linear-gradient(90deg,rgba(11,107,143,0.12),rgba(255,107,53,0.08));border-radius:12px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0;transition:width 550ms cubic-bezier(.2,.9,.2,1)}
.bar-legend{font-size:12px;text-align:right;color:var(--muted);margin-top:6px}
.breakdown{margin-top:16px;padding-top:12px;border-top:1px dashed rgba(12,44,60,0.04)}
.site-footer{max-width:1100px;margin:0 auto;padding:18px 22px;color:var(--muted);display:flex;justify-content:space-between}

@media (max-width:900px){
  .container{flex-direction:column;padding:18px}
  .panel-left{max-width:none}
}

/* small helpers */
.small{font-size:13px}
.credit code{background:#f3f7fb;padding:4px 6px;border-radius:4px;font-size:12px}