/* Page 53 round 2 (29 Oct): the scale to 140 % (DEEPER NIGHT), the real game stills, SEND MY PICKS. Extends 53_nl.css only. */
.n53-deepword { color: #9FC4FF; white-space: nowrap; }

/* 11 levels: two rows on a narrow block, one on a wide one; the deeper four sit in their own night-blue */
.n53-lvls { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; }
.n53-lv.is-deep { background: #0B0E2A; border-color: #05061A; }
.n53-lv.is-deep .n53-lv__n { color: #CFE0FF; }
.n53-lv.is-deep.is-on { background: #1A2050; }
.n53-lv.is-deep.is-pick { background: linear-gradient(180deg, #3A3010, #241E0A); }
.n53-lv__rec.bd { background: #9FC4FF; }
.n53-film { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.n53-film .n53-fr b { font-size: 11px; }
@media (max-width: 1100px) {
  .n53-lvls { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 14px; }
  .n53-film { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .n53-lvls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .n53-film { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* the sliders: 0-140 with the deeper part marked */
.n53-range--x .n53-range__deep { position: absolute; top: 9px; right: 0; height: 12px; border-radius: 0 8px 8px 0; background: repeating-linear-gradient(135deg, rgba(10, 14, 46, 0.95) 0 5px, rgba(40, 56, 140, 0.95) 5px 9px); box-shadow: 0 0 0 2px var(--ink); pointer-events: none; }
.n53-range__ticks span.dx { color: #9FC4FF; }
.n53-gauge__mark.dx { border-top-color: rgba(159, 196, 255, 0.6); }

/* the map header: today / build D / our 22 Oct idea */
.n53-hist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 10px; }
.n53-hist span { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px 7px; border-radius: 12px; border: 3px solid var(--ink); background: rgba(10, 8, 20, 0.55); font: 800 10.5px/1.15 var(--f-body); letter-spacing: 0.07em; color: var(--cream-2); box-shadow: 1px 3px 0 var(--ink); }
.n53-hist span:first-child { background: rgba(124, 255, 163, 0.12); }
.n53-hist b { font: 400 22px/1 var(--f-display); color: #fff; letter-spacing: 0.02em; }
.n53-hist small { font: 600 10.5px/1.25 var(--f-body); letter-spacing: 0.02em; color: var(--cream-3); }
.n53-why__then { color: var(--cream-3); font-weight: 800; letter-spacing: 0.06em; font-size: 12px; }

/* GAME STILL: the real game at the level, over the live phone */
.n53-vbtns { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.n53-gamebtn.on { background: #1C2A5A; color: #fff; }
.n53-gamebtn.on i { background: var(--yellow); }
.n53-gstill { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover; background: #05040A; }
.n53-dev.is-ipad .n53-gstill { object-fit: contain; }
.n53-gstill__tag { position: absolute; z-index: 5; left: 50%; bottom: 8px; translate: -50% 0; padding: 4px 9px 3px; border-radius: 8px; border: 2.5px solid var(--ink); background: var(--yellow); color: var(--ink); font: 400 12.5px/1 var(--f-display); letter-spacing: 0.04em; box-shadow: 1px 3px 0 var(--ink); white-space: nowrap; }
.n53-map.is-game .n53-scr__lvl { z-index: 6; }

/* the new rule (110-140) */
.n53-rule--new { box-shadow: 0 0 0 3px #3A62B4, 2px 5px 0 var(--ink); }

/* page vs game, all 18 maps */
#pvg2 { margin-top: 6px; }
.n53-pvg2__row { display: grid; grid-template-columns: 120px repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; margin-top: 10px; }
#pvg2wrap .n53-pvg__verdict { margin: 10px 0 4px; }
@media (max-width: 760px) {
  .n53-pvg2__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .n53-pvg2__row .n53-pvg__name { grid-column: 1 / -1; }
}

/* the picks: all maps at once, SEND */
.n53-allbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; font: 800 12px/1 var(--f-body); letter-spacing: 0.08em; color: var(--cream-2); }
.n53-allbtns small { font: 600 11.5px/1.3 var(--f-body); letter-spacing: 0.02em; color: var(--cream-3); }
.n53-allbtns .n53-btn--sm { background: linear-gradient(180deg, #3A62B4, #1C2A5A); }
.n53-sent { display: none; flex-basis: 100%; text-align: right; font: 700 12.5px/1.35 var(--f-body); letter-spacing: 0.03em; color: var(--mint); }
.n53-sent.on { display: block; }
.n53-sent a, .pickbar__sent a { color: var(--yellow); }
.pickbar__send { margin-left: 8px; background: linear-gradient(180deg, #7BEFA5, var(--green, #1FBF5C) 50%, #0F9442); }
.pickbar__sent.is-on { display: inline; margin-left: 8px; max-width: 360px; }
@media (max-width: 700px) { .pickbar__send { margin-left: 0; margin-top: 6px; } }
