/* bingoontv.com - landing pages.
   Mobile first. Must also work on a TV browser at 1280px with a remote,
   so: visible focus rings, no hover-only affordances, generous tap targets. */

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: #0B0D12;
  color: #F2F4F8;
  font-family: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* The artwork is deliberately empty in the middle so the TV caller can put
   huge text there. "cover" on a phone crops to exactly that empty middle and
   shows nothing. Scaling to full width instead puts the whole image - corners
   included - as a band across the top, with the theme colour below it. */
body {
  background-color: var(--deep);
  /* A gradient over the artwork: the band still reads as themed, but the
     headline and intro sit on something dark enough to be legible. Old
     browsers that ignore the gradient fall back to the flat colour. */
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0.62) 0%,
      rgba(0,0,0,0.80) 45%,
      var(--deep) 88%),
    var(--bgimage);
  background-size: 100% 100%, 100% auto;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 18px 40px;
}

/* ---------- header ---------- */

.brand {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 18px;
}

h1 {
  font-size: 29px;
  line-height: 1.12;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.intro {
  font-size: 16px;
  line-height: 1.55;
  color: #CDD3DF;
  margin: 0 0 6px;
}

.free {
  font-size: 15px;
  font-weight: bold;
  color: #E4E9F2;
  margin: 0 0 16px;
}

/* ---------- sample card ---------- */

.card {
  background-color: rgba(8, 10, 18, 0.82);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin: 0 0 16px;
}

.card-head {
  display: block;
  overflow: hidden;
  margin: 0 0 10px;
}
.card-title {
  float: left;
  font-size: 14px;
  font-weight: bold;
  color: var(--accent);
  letter-spacing: 1px;
}
.card-note {
  float: right;
  font-size: 12px;
  color: var(--dim);
}

table.grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
table.grid th {
  font-size: 15px;
  color: var(--accent);
  padding: 0 0 6px;
  letter-spacing: 2px;
}
table.grid td {
  border: 1px solid var(--line);
  height: 40px;
  text-align: center;
  vertical-align: middle;
  font-size: 11px;
  line-height: 1.15;
  padding: 2px;
  word-wrap: break-word;
  color: #E6EAF2;
}
table.grid td.num { font-size: 16px; }
table.grid td.free {
  background-color: var(--accentsoft);
  color: var(--accent);
  font-weight: bold;
  font-size: 12px;
}

/* ---------- buttons ---------- */

.actions { margin: 0 0 22px; }

a.btn {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 17px 16px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px;
  border: 2px solid transparent;
}
a.btn-primary {
  background-color: var(--accent);
  color: #0B0D12;
  border-color: var(--accent);
}
a.btn-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  color: #F2F4F8;
  border-color: var(--line2);
}
a.btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px #FFD166;
}
a.btn:active { opacity: 0.9; }

.hint {
  font-size: 13px;
  color: var(--dim);
  text-align: center;
  margin: 0;
}

/* ---------- theme picker ---------- */

/* Theme chips. Compact on purpose: at six themes, thumbnail cards would eat
   the whole fold on a phone before anyone reached the sample card. */
.pick { margin: 0 0 16px; }
.pick p.label {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 10px;
}
.chips { display: block; overflow: hidden; }
a.chip {
  display: inline-block;
  vertical-align: top;
  margin: 0 6px 6px 0;
  padding: 8px 12px;
  border: 2px solid var(--line2);
  border-radius: 22px;
  text-decoration: none;
  color: #E4E9F2;
  font-size: 15px;
  white-space: nowrap;
  background: rgba(255,255,255,0.04);
}
a.chip span.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 8px 0 0;
  vertical-align: 1px;
}
a.chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #0B0D12;
  font-weight: bold;
}
a.chip.on span.dot { background: rgba(0,0,0,0.35) !important; }
a.chip span.tick { margin-left: 8px; font-weight: bold; }
a.chip span.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--accent);
  color: #0B0D12;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  vertical-align: 1px;
}
a.chip:focus { outline: none; box-shadow: 0 0 0 4px #FFD166; }

/* Words or numbers - the two are different products, so the labels say which */
.mode { margin: 0 0 14px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mode span.mode-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 8px 0 0;
}
a.mode-opt {
  display: inline-block;
  margin: 0 6px 0 0;
  padding: 8px 13px;
  border: 2px solid var(--line2);
  border-radius: 8px;
  text-decoration: none;
  color: #E4E9F2;
  font-size: 15px;
}
a.mode-opt.on {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: bold;
}
a.mode-opt:focus { outline: none; box-shadow: 0 0 0 4px #FFD166; }

/* The win rule belongs with the card it describes */
p.rule {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--dim);
  text-align: center;
}

p.reassure {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--dim);
  text-align: center;
}

/* TV setup collapsed - it competed with the main flow */
details.tvhelp {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  margin: 0 0 22px;
}
details.tvhelp summary {
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  color: #F2F4F8;
}
details.tvhelp summary:focus { outline: none; box-shadow: 0 0 0 4px #FFD166; }
details.tvhelp dl { margin-top: 16px; }

/* Print guidance - hosts often start on the TV and forget cards print
   somewhere else. */
.notice {
  border: 1px solid var(--line2);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 13px 15px;
  margin: 0 0 26px;
}
.notice p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #CDD3DF;
}

/* ---------- content sections ---------- */

section {
  border-top: 1px solid var(--line);
  padding: 22px 0 0;
  margin: 0 0 22px;
}
h2 {
  font-size: 19px;
  margin: 0 0 12px;
}
section p, section li {
  font-size: 15px;
  line-height: 1.6;
  color: #CDD3DF;
}
section p { margin: 0 0 12px; }

dl.devices { margin: 0; }
dl.devices dt {
  font-size: 15px;
  font-weight: bold;
  color: #F2F4F8;
  margin: 0 0 2px;
}
dl.devices dd {
  font-size: 15px;
  line-height: 1.5;
  color: #CDD3DF;
  margin: 0 0 14px;
}

ol.steps { margin: 0; padding: 0 0 0 20px; }
ol.steps li { margin: 0 0 10px; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  font-size: 13px;
  color: var(--dim);
  line-height: 1.7;
}
footer a { color: var(--dim); }

/* ---------- wider screens and TVs ---------- */

@media (min-width: 900px) {
  .wrap { max-width: 760px; padding-top: 40px; }
  h1 { font-size: 40px; }
  .intro { font-size: 18px; }
  table.grid td { height: 54px; font-size: 13px; }
  table.grid td.num { font-size: 20px; }
  a.btn { font-size: 20px; padding: 19px 16px; }
  a.chip { font-size: 16px; padding: 11px 16px; }
  section p, section li, dl.devices dd { font-size: 16px; }
}