/* ═══ FIELD INTERNET LIVE — the big circle page ═══ */
.fil-hero {
  min-height: 40vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 120px 20px 20px;
}
.fil-kicker { font-size: 13px; letter-spacing: .3em; color: #d4a843; margin-bottom: 10px; }
.fil-hero h1 { font-size: clamp(40px, 7vw, 72px); margin: 0 0 12px; }
.fil-sub { color: #b8b2a4; font-size: 16px; max-width: 560px; margin: 0 auto; }

.fil-main { min-height: 60vh; display: flex; flex-direction: column; align-items: center; padding: 20px 16px 80px; }
.fil-stage { display: flex; flex-direction: column; align-items: center; gap: 26px; }

/* the circle: φ proportions, breathing ring */
.fil-circle {
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #16102a 0%, #0a0a18 62%, #06060f 100%);
  border: 2px solid rgba(212, 168, 67, 0.65);
  cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .3s, border-color .2s, transform .15s;
  color: #d4a843;
}
.fil-circle:hover { box-shadow: 0 0 60px rgba(212, 168, 67, .25); border-color: #d4a843; }
.fil-circle:active { transform: scale(.985); }
.fil-circle.on-air {
  border-color: #d4a843;
  box-shadow: 0 0 90px rgba(212, 168, 67, .35);
  animation: fil-breathe 3.2s ease-in-out infinite;
}
@keyframes fil-breathe {
  0%, 100% { box-shadow: 0 0 40px rgba(212,168,67,.18); }
  50% { box-shadow: 0 0 110px rgba(212,168,67,.4); }
}
.fil-circle.on-air { animation: fil-breathe 3.2s ease-in-out infinite; }
.fil-circle-ring {
  position: absolute; inset: 16px; border-radius: 50%;
  border: 1px solid rgba(212, 168, 67, 0.35);
}
.fil-circle-core {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #e6bc59 0%, #d4a843 55%, #8a6a1e 100%);
  box-shadow: 0 0 30px rgba(212, 168, 67, .45);
}
.fil-circle-label {
  position: absolute; bottom: 44px; left: 0; right: 0;
  text-align: center; font-size: 15px; letter-spacing: .28em; font-weight: 700;
  color: #d4a843;
}
.fil-hint { color: #8a8577; font-size: 13.5px; margin: 0; }

/* the live readout */
.fil-status { width: min(980px, 96vw); margin-top: 30px; }
.fil-status[hidden] { display: none; }
.fil-status-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.fil-cell {
  background: #0a0a18; border: 1px solid rgba(212, 168, 67, .22);
  border-radius: 12px; padding: 16px 18px;
}
.fil-cell b { display: block; font-size: 20px; color: #e8e2d4; font-variant-numeric: tabular-nums; }
.fil-cell span { display: block; margin-top: 5px; font-size: 11px; color: #8a8577; letter-spacing: .04em; }
.fil-cell.fil-message b { font-size: 14px; color: #d4a843; letter-spacing: .04em; }
.fil-note { color: #8a8577; font-size: 12.5px; margin-top: 16px; text-align: center; }

/* the agreement modal (the site's modal register) */
.fi-modal {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(4, 4, 12, .82); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.fi-modal[hidden] { display: none; }
.fi-modal-card {
  width: min(620px, 94vw); background: #0a0a18;
  border: 1px solid rgba(212, 168, 67, .5); border-radius: 14px;
  padding: 26px 28px; box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}
.fi-modal-card h3 { margin: 0 0 12px; color: #d4a843; font-size: 19px; }
.fi-modal-copy { font-size: 13.5px; line-height: 1.65; color: #b8b2a4; margin: 0 0 12px; }
.fi-modal-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.fi-btn { padding: 11px 22px; border-radius: 999px; cursor: pointer; font-size: 14px; }
.fi-yes { background: #d4a843; color: #06060f; border: none; font-weight: 700; }
.fi-yes:hover { background: #e6bc59; }
.fi-no { background: transparent; color: #b8b2a4; border: 1px solid rgba(212,168,67,.3); }

@media (max-width: 640px) {
  .fil-circle { width: 220px; height: 220px; }
  .fil-circle-core { width: 76px; height: 76px; }
  .fil-circle-label { bottom: 34px; font-size: 13px; }
}

/* ═══ the tutorial ═══ */
.fil-tutorial { width: min(1080px, 96vw); margin-top: 70px; }
.fil-tutorial h2 { font-size: clamp(26px, 4vw, 40px); color: #d4a843; text-align: center; margin-bottom: 34px; }
.fil-tut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.fil-tut-card {
  background: #0a0a18; border: 1px solid rgba(212, 168, 67, .22);
  border-radius: 14px; padding: 22px 24px;
}
.fil-tut-card.fil-tut-wide { grid-column: 1 / -1; }
.fil-tut-card h3 { margin: 0 0 12px; font-size: 16px; color: #e8e2d4; display: flex; align-items: center; gap: 10px; }
.fil-tut-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: #d4a843; color: #06060f; font-weight: 700; font-size: 14px;
}
.fil-tut-card p { font-size: 13.5px; line-height: 1.7; color: #b8b2a4; margin: 0 0 8px; }
.fil-tut-card p strong { color: #e8e2d4; }
.fil-tut-card em { color: #d4a843; }
.fil-tut-list { margin: 0; padding-left: 18px; font-size: 13.5px; color: #b8b2a4; line-height: 1.8; }
.fil-tut-list b { color: #d4a843; }
.rico-github-link { color: #d4a843; }


.fil-back {
  position: absolute; top: 18px; left: 22px;
  color: #d4a843; text-decoration: none; font-size: 13.5px;
  padding: 8px 16px; border: 1px solid rgba(212, 168, 67, .35);
  border-radius: 999px; z-index: 10;
}
.fil-back:hover { border-color: #d4a843; box-shadow: 0 0 14px rgba(212,168,67,.2); }
.fil-hero { position: relative; padding-top: 150px; }


/* ═══ THE WI-FI, HONESTLY — the standing disclosure ═══ */
.fil-tut-card#fil-wifi-honest {
  border-color: rgba(212,168,67,.55);
  background: rgba(212,168,67,.05);
}
.fil-tut-card#fil-wifi-honest p { line-height: 1.75; }