/* Offer Night v3: everything scoped under .lvl-offer-night. Designed at 400 x 600 logical px.
   Calm on purpose: nothing moves. News arrives as a soft fade (cards change colour, sealed offers fade to
   their price). Cards have a fixed height so a reveal never shifts the layout; the result area is reserved
   at the bottom. */
.lvl-offer-night { font-family: var(--font-sans, "Inter", sans-serif); color: #1A1D1A; background: #F7F8F6; }
.lvl-offer-night * { box-sizing: border-box; }
.lvl-offer-night p { margin: 0; }

/* the goal, on screen the whole round */
.lvl-offer-night .on-goal { margin: 10px 12px 0; padding: 9px 14px; border-radius: 12px; background: #1A1D1A; color: #F7F8F6; }
.lvl-offer-night .on-goal-a { font-size: 15px; font-weight: 700; line-height: 1.3; }
.lvl-offer-night .on-goal-b { margin-top: 2px; font-size: 13.5px; line-height: 1.3; color: #F0DDB4; font-weight: 600; }

.lvl-offer-night .on-home { margin: 7px 14px 6px; display: flex; gap: 10px; align-items: center; min-height: 34px; }
.lvl-offer-night .on-house { flex: 0 0 26px; }
.lvl-offer-night .on-house svg { display: block; width: 26px; height: auto; }
.lvl-offer-night .on-home-txt { font-size: 13px; line-height: 1.3; color: #4A5048; }
.lvl-offer-night .on-home-txt strong { color: #1A1D1A; }

.lvl-offer-night .on-cards, .lvl-offer-night .on-rivals, .lvl-offer-night .on-lbl { margin-left: 12px; margin-right: 12px; }
.lvl-offer-night .on-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5C6360; margin-bottom: 5px; }
.lvl-offer-night .on-cards { display: flex; flex-direction: column; gap: 10px; }

/* an offer card: price and deposit on top; conditions and closing under it */
.lvl-offer-night .on-card { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; align-content: center; column-gap: 8px; row-gap: 7px; width: 100%; height: 86px; padding: 0 14px; text-align: left; font: inherit; color: inherit;
  background: #fff; border: 2px solid #DDDEDA; border-radius: 12px; cursor: pointer; transition: opacity .4s ease, border-color .4s ease, background-color .4s ease; }
.lvl-offer-night button.on-card:hover { border-color: #92A88A; }
.lvl-offer-night button.on-card:focus-visible { outline: 3px solid #7A8F72; outline-offset: 2px; }
.lvl-offer-night .on-price { font-family: var(--font-serif, "DM Serif Display", Georgia, serif); font-size: 27px; line-height: 1.05; white-space: nowrap; }
.lvl-offer-night .on-right { justify-self: end; display: flex; }
.lvl-offer-night .on-dep { font-size: 13px; font-weight: 600; color: #4A5048; white-space: nowrap; }
.lvl-offer-night .on-chips { display: flex; gap: 5px; min-width: 0; overflow: hidden; }
.lvl-offer-night .on-chip { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; white-space: nowrap; background: #F4EAD7; color: #7A5A1E; }
.lvl-offer-night .on-c-firm { background: #E3EDE5; color: #3E6B4B; }
.lvl-offer-night .on-close { justify-self: end; font-size: 12px; color: #5C6360; white-space: nowrap; }
.lvl-offer-night .on-after { display: none; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: #1A1D1A; color: #fff; }
.lvl-offer-night .has-after .on-dep { display: none; }
.lvl-offer-night .has-after .on-after { display: block; animation: on-fade .45s ease both; }
.lvl-offer-night .on-key { display: none; }
@media (hover: hover) { .lvl-offer-night .on-key { display: block; position: absolute; left: 4px; top: 3px; font-size: 10px; color: #A0A59F; } }

.lvl-offer-night .on-cards.n4 { gap: 6px; }
.lvl-offer-night .on-cards.n4 .on-card { height: 78px; row-gap: 6px; }
.lvl-offer-night .on-cards.n4 .on-price { font-size: 25px; }

/* buying: one line per card, and the sealed offers above */
.lvl-offer-night .on-cards.is-buy { gap: 7px; }
.lvl-offer-night .on-cards.is-buy .on-card { height: 54px; }
.lvl-offer-night .on-cards.is-buy.n3 .on-card { height: 60px; }
.lvl-offer-night .on-cards.is-buy .on-price { font-size: 24px; }
.lvl-offer-night .on-rivals { display: flex; gap: 6px; margin-bottom: 10px; }
.lvl-offer-night .on-rival { position: relative; flex: 1 1 0; min-width: 0; height: 50px; border-radius: 10px; background: #EDEEE9; border: 2px solid #E4E5DF; transition: background-color .5s ease, border-color .5s ease; }
.lvl-offer-night .on-r-back, .lvl-offer-night .on-r-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; transition: opacity .5s ease; }
.lvl-offer-night .on-r-back { font-size: 12px; font-weight: 600; color: #8A8F88; }
.lvl-offer-night .on-r-face { opacity: 0; font-size: 15px; font-weight: 700; color: #2A2E2A; }
.lvl-offer-night .on-rival.is-open { background: #fff; }
.lvl-offer-night .on-rival.is-open .on-r-back { opacity: 0; }
.lvl-offer-night .on-rival.is-open .on-r-face { opacity: 1; }
.lvl-offer-night .on-rival.is-win { border-color: #B84233; background: #FBF1EF; }
.lvl-offer-night .on-rival.is-next { border-color: #8A8F88; }

/* what a tap does */
.lvl-offer-night .on-card.is-dim { opacity: .55; }
.lvl-offer-night .on-card[aria-disabled="true"] { cursor: default; }
.lvl-offer-night .on-card.is-picked { border-color: #1A1D1A; }
.lvl-offer-night .on-card.st-sold { border-color: #4A7C59; background: #F1F6F2; }
.lvl-offer-night .on-card.st-sold .on-after { background: #4A7C59; }
.lvl-offer-night .on-card.st-fell { border-color: #B84233; background: #FBF1EF; }
.lvl-offer-night .on-card.st-fell .on-after { background: #B84233; }
.lvl-offer-night .on-card.is-dim .on-after { background: #DDDEDA; color: #2A2E2A; }
.lvl-offer-night .on-card.is-dim.st-dimfell .on-after { background: #F3DAD5; color: #8E3327; }

/* the result area, reserved at the bottom so nothing shifts */
.lvl-offer-night .on-res { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 116px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.lvl-offer-night .on-res > * { animation: on-fade .45s ease both; }
.lvl-offer-night .on-res-hint { text-align: center; font-size: 15px; color: #5C6360; padding-bottom: 46px; }
.lvl-offer-night .on-res-t { font-family: var(--font-serif, "DM Serif Display", Georgia, serif); font-size: 22px; line-height: 1.15; }
.lvl-offer-night .on-wait { color: #5C6360; }
.lvl-offer-night .on-good { color: #3E6B4B; }
.lvl-offer-night .on-bad { color: #B84233; }
.lvl-offer-night .on-pts { font-family: var(--font-sans, "Inter", sans-serif); font-size: 15px; font-weight: 700; color: #1A1D1A; margin-left: 4px; }
.lvl-offer-night .on-res-l { font-size: 13px; line-height: 1.32; color: #2A2E2A; }
.lvl-offer-night .on-next { margin-top: 5px; flex: 0 0 46px; width: 100%; border: 0; border-radius: 12px; background: #7A8F72; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.lvl-offer-night .on-next:focus-visible { outline: 3px solid #1A1D1A; outline-offset: 2px; }

.lvl-offer-night .on-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lvl-offer-night .on-end-t { font-size: 15px; color: #5C6360; }
.lvl-offer-night .on-zach svg { display: block; }

@keyframes on-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lvl-offer-night .on-card, .lvl-offer-night .on-rival, .lvl-offer-night .on-r-back, .lvl-offer-night .on-r-face { transition: none; }
  .lvl-offer-night .has-after .on-after, .lvl-offer-night .on-res > * { animation: none; }
}