/* OldOrbit rewards: the monthly calendar, the login screen and the Battle Pass (site pages, the loading screen and the game's windows).
   One look: dark navy glass, thin steel lines, a single amber accent; every reward is a plain inventory slot (the item's own picture, the amount in the corner). */
.ico-cal { background-image: url('/assets/oo_site/hi_calendar.svg?v=1'); left: 176px !important; }
.ico-pass { background-image: url('/assets/oo_site/hi_pass.svg?v=1'); left: 216px !important; }
.ico-cal:hover, .ico-pass:hover, .ico-cal:active, .ico-pass:active { background-position: center; }

/* ---------------------------------------------------------------- one reward: an inventory slot */
.rs { --c: 130, 170, 210; --s: 40px; position: relative; display: inline-block; flex: none; vertical-align: top; width: var(--s); height: var(--s); box-sizing: border-box;
  background: linear-gradient(180deg, #14233a, #0a1220); border: 1px solid #2a4260; border-radius: 3px; box-shadow: inset 0 -2px 0 rgba(var(--c), .7); }
.rs i { display: none; }
.rs img { position: absolute; left: 10%; top: 8%; width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .75)); }
.rs b { position: absolute; right: 3px; bottom: 2px; white-space: nowrap; font: 700 max(9px, calc(var(--s) * .24)) / 1 Oxanium, Rajdhani, sans-serif; letter-spacing: .2px; color: #fff; text-shadow: 0 0 2px #000, 0 1px 1px #000, 1px 0 1px #000; }
.k-credits { --c: 255, 176, 60; } .k-uridium { --c: 67, 198, 240; } .k-exp { --c: 110, 190, 255; } .k-honor { --c: 255, 205, 90; }
.k-extraEnergy { --c: 190, 120, 255; } .k-extraHp { --c: 255, 96, 84; } .k-logDisks { --c: 80, 220, 200; } .k-bootyKeys { --c: 96, 230, 140; }
.k-jumpCredits { --c: 70, 160, 255; } .k-repairCredits { --c: 90, 220, 130; } .k-ammo { --c: 255, 142, 72; } .k-lf4 { --c: 255, 96, 96; } .k-booster { --c: 205, 112, 255; } .k-vip { --c: 255, 192, 64; }
.rs-w { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; max-width: calc(var(--s) + 30px); vertical-align: top; }
.rs-w small { font: 600 11px/1.15 Rajdhani, sans-serif; color: #a9c1d6; text-align: center; }
.rs-more { display: inline-flex; align-items: center; align-self: center; font: 700 11px Oxanium, sans-serif; color: #8fd0ff; padding: 0 2px; }

/* ---------------------------------------------------------------- small drawn icons (calendar and login screen) */
.ic { display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px; background: no-repeat center / contain; }
.ic.big { width: 22px; height: 22px; }
.ic-clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343d3ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.6 2.1'/%3E%3C/svg%3E"); }
.ic-lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcf6a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.ic-info { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb6d8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.2'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- calendar: the whole month on one screen */
.cal { display: flex; flex-direction: column; gap: 6px; height: calc(100vh - 20px); min-height: 488px; box-sizing: border-box; }
.cal-top { position: relative; display: grid; grid-template-columns: auto minmax(150px, 1fr) auto; align-items: center; gap: 18px; padding: 6px 14px 6px 18px; border: 1px solid #22384f; background: linear-gradient(90deg, rgba(34, 58, 86, .9) 0%, rgba(14, 24, 38, .92) 60%, rgba(10, 16, 26, .95) 100%); box-shadow: inset 0 1px 0 rgba(150, 210, 255, .08); }
.cal-top::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; background: var(--amber, #ffb23e); box-shadow: 0 0 8px rgba(255, 178, 62, .8); }
.cal-month { display: flex; align-items: center; gap: 12px; }
.cal-month img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6)); }
.cal-month b { display: block; font: 800 20px/1.05 Oxanium, sans-serif; letter-spacing: 2px; color: #eaf4ff; text-transform: uppercase; white-space: nowrap; }
.cal-month span { display: block; font: 600 12px/1.25 Rajdhani, sans-serif; color: #8aa1b6; white-space: nowrap; }
.cal-mid { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cal-bar { position: relative; height: 8px; margin-top: 7px; border: 1px solid #22384f; background: #0a1220; }
.cal-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9871a, #ffcf6a); box-shadow: 0 0 8px rgba(255, 190, 70, .45); transition: width .4s; }
.cal-bar u { position: absolute; top: -7px; width: 9px; height: 9px; margin-left: -5px; box-sizing: border-box; transform: rotate(45deg); background: #1d324b; border: 1px solid #3a5974; }
.cal-bar u.on { background: #ffcf6a; border-color: #fff1c8; box-shadow: 0 0 6px rgba(255, 200, 90, .8); }
.cal-bar u.vip { top: -8px; width: 11px; height: 11px; margin-left: -6px; border-color: #7a5d22; }
.cal-note { font: 600 13px/1.25 Rajdhani, sans-serif; color: #b6c9db; }
.cal-top .btn-start.small { width: auto; min-width: 190px; min-height: 44px; padding: 0 22px; font-size: 15px; letter-spacing: 1.6px; white-space: nowrap; }
.cal-spare { width: 1px; }
.cal-rules { display: flex; align-items: center; gap: 10px; padding: 4px 12px; border: 1px solid #1d3248; background: rgba(10, 18, 30, .82); font: 600 13px/1.25 Rajdhani, sans-serif; color: #a9c1d6; }
.cr-t { flex: 1; min-width: 0; }
.cr-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border: 1px solid #344a60; border-radius: 3px; background: #0d1928; color: #8aa1b6; font: 700 12px Oxanium, sans-serif; white-space: nowrap; }
.cr-chip b { font-size: 14px; color: #fff; }
.cr-chip em { font: 600 11.5px Rajdhani, sans-serif; font-style: normal; opacity: .9; }
.cr-chip.on { border-color: #2f8fb0; background: rgba(67, 211, 255, .12); color: #bfefff; box-shadow: 0 0 10px rgba(67, 211, 255, .18); }
.cr-chip.idle { opacity: .75; }

/* the month: six days and a big weekly prize in the seventh column, the grand prize at the end of the last row */
.cal-grid { flex: 1; min-height: 0; display: grid; gap: 6px; grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.9fr); grid-template-rows: repeat(3, minmax(84px, 1fr)) minmax(112px, 1.3fr); }
.ct { position: relative; min-width: 0; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; padding: 4px 6px 0; border: 1px solid #1d3248; border-radius: 3px;
  background: linear-gradient(180deg, #10203a, #0a1424); box-shadow: inset 0 1px 0 rgba(120, 190, 255, .07); }
.ct:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ct-top { position: relative; flex: none; display: flex; align-items: center; gap: 6px; height: 20px; }
.ct-d { flex: none; min-width: 26px; height: 18px; padding: 0 5px; box-sizing: border-box; display: inline-grid; place-items: center; clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%); background: #1d324b; color: #a9c1d6; font: 800 12px/1 Oxanium, sans-serif; }
.ct-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 8.5px/1 Oxanium, sans-serif; font-style: normal; letter-spacing: .9px; text-transform: uppercase; color: #7f97ae; }
.ct-st { position: absolute; right: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; font-style: normal; background: no-repeat center / 62%; }
.ct-st.big { position: static; width: 30px; height: 30px; }
.ct-st.ok { background-color: #1b8a4c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.ct-st.clock { background-color: #0c3a4c; box-shadow: inset 0 0 0 1px #2f8fb0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343d3ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.6 2.1'/%3E%3C/svg%3E"); background-size: 78%; }
.ct-st.lock { background-color: #2a2112; box-shadow: inset 0 0 0 1px #7a5d22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcf6a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); background-size: 66%; }
.ct-chest { position: absolute; right: 22px; top: -4px; height: 28px; width: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); pointer-events: none; }
.ct-items { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 3px; padding-bottom: 2px; }
.ct .rs-more { align-self: center; }
@supports (width: 1cqw) {
  .ct .rs { --s: min(42px, calc((100cqw - 14px - (var(--m, var(--n, 2)) - 1) * 3px) / var(--m, var(--n, 2)))) !important; }
  .ct .rs-more.cut { display: none; }
  /* a narrow day tile (a phone, four columns): the bar loses its little clock (the tile has one in its corner), in the narrowest also the "1/day" */
  @container (max-width: 92px) { .ct-bar .ic { display: none; } }
  @container (max-width: 64px) { .ct-bar small { display: none; } .ct .ct-bar { font-size: 8.5px; letter-spacing: .3px; } .ct:not(.big) .ct-tag { display: none; } }
  /* a weekly prize in a narrow column: four plates and a "+2" (the others are in the tooltip) */
  @container (max-width: 185px) { .ct .rs.ex { display: none; } .ct .rs-more.cut { display: inline-flex; } .ct.big .rs { --m: 5; } }
}
.ct-bar { flex: none; margin: 0 -6px; height: 18px; display: flex; align-items: center; justify-content: center; gap: 5px; font: 800 10px/1 Oxanium, sans-serif; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.ct-bar b { font-weight: 800; }
.ct-bar small { font: 700 9.5px Rajdhani, sans-serif; letter-spacing: 0; text-transform: none; opacity: .9; }
.ct-bar.go { background: linear-gradient(180deg, #ffd27a, #e89a1c); color: #2a1700; }
.ct-bar.go.catch { background: linear-gradient(180deg, #6fd8f5, #1f8fb8); color: #03212d; }
.ct-bar.go .ic-clock { filter: brightness(0) saturate(100%); opacity: .75; }
.ct-bar.wait { background: #12233a; color: #7f97ae; border-top: 1px solid #1d3248; }
.ct-bar.vip { background: #2a2112; color: #ffcf6a; border-top: 1px solid #4a3a16; }

.ct.claimed { border-color: #1b3f33; background: linear-gradient(180deg, #0d2028, #09141b); }
.ct.claimed .ct-items { opacity: .38; filter: saturate(.6); }
.ct.claimed .ct-d { background: #1d3d33; color: #7fd6a4; }
.ct.future { opacity: .6; border-style: dashed; border-color: #1a2c40; }
.ct.future .ct-d { background: #14243a; color: #6f869d; }
.ct.locked { border-color: #5b4a1e; }
.ct.locked .ct-items { opacity: .7; }
.ct.missed { border-color: #2a6a82; background: linear-gradient(180deg, #0f2b3c, #09192b); }
.ct.missed .ct-d { background: #17586c; color: #dff6ff; }
.ct.missed .ct-tag { color: #6fd0ec; }
.ct.missed:not(.can) .ct-items { opacity: .72; }
.ct.missed.can { cursor: pointer; }
.ct.missed.can:hover { border-color: #6fd8f5; box-shadow: 0 0 12px rgba(95, 210, 242, .38); }
.ct.big { border-color: #7a5d22; background: linear-gradient(180deg, #2a2213, #120f0a); box-shadow: inset 0 0 20px rgba(255, 190, 70, .1); }
.ct.big .ct-d { background: #7a5d22; color: #fff1c8; }
.ct.big .ct-tag { color: #d9a441; }
.ct.big.claimed { background: linear-gradient(180deg, #1d2218, #0e120c); border-color: #4b4a22; }
.ct.today { cursor: pointer; border-color: #ffb23e; background: linear-gradient(180deg, #2c2414, #12100b); box-shadow: 0 0 0 1px #ffb23e, 0 0 16px rgba(255, 178, 62, .45); animation: calToday 1.8s ease-in-out infinite; }
.ct.today .ct-d { background: #ffcf6a; color: #2a1700; }
.ct.today .ct-tag { color: #ffcf6a; }
.ct.today:hover { filter: brightness(1.1); }
@keyframes calToday { 50% { box-shadow: 0 0 0 1px #ffd27a, 0 0 24px rgba(255, 178, 62, .72); } }

/* the grand prize, VIP members only: the gold chest on the left, then a title row (title and the button) and a row of three plates, each with its name beside it.
   The button never sits beside the plates: a long German or English label wraps inside its own cell, so nothing is drawn over a plate. */
.ct.vip { grid-column: 5 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "chest title act" "chest items items"; align-content: center; align-items: center; row-gap: 8px; padding: 6px 14px; border-color: #9a7424;
  background: radial-gradient(ellipse at 14% 50%, rgba(255, 200, 90, .24), transparent 58%), linear-gradient(90deg, #33270f, #150f08); box-shadow: inset 0 0 0 1px rgba(255, 214, 120, .16), 0 0 20px rgba(255, 178, 62, .16); }
.ct.vip.locked, .ct.vip.future { border-color: #7a5d22; }
.ct.vip.claimed { background: linear-gradient(90deg, #202416, #0e120c); border-color: #4b4a22; }
.ct.vip.claimed .cv-title, .ct.vip.claimed .cv-items, .ct.vip.claimed .cv-chest { opacity: .45; }
.cv-chest { grid-area: chest; width: 76px; height: auto; margin-right: 14px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .65)); }
.cv-main { display: contents; }
.cv-title { grid-area: title; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cv-title > div { min-width: 0; }
.cv-title img { display: none; width: 30px; height: 30px; object-fit: contain; flex: none; }
.cv-title b { display: block; font: 800 14px/1.1 Oxanium, sans-serif; letter-spacing: 1.2px; color: #ffd27a; overflow-wrap: break-word; text-wrap: balance; }
/* the sub-title ("for VIP members only") needs room: a short window leaves it to the tooltip */
.cv-title small { display: none; margin-top: 2px; font: 600 12px/1.2 Rajdhani, sans-serif; color: #d2bd90; }
.cv-items { grid-area: items; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ct.vip .rs { --s: 44px !important; }
.cv-items .rs-w { flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px; min-width: 0; max-width: none; }
.cv-items .rs-w small { min-width: 0; font-size: 11.5px; color: #e6dcc0; text-align: left; overflow-wrap: break-word; }
.cv-act { grid-area: act; margin-left: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cv-act .btn-start.small, .cv-act .btn-metal { width: auto; min-width: 0; max-width: 200px; min-height: 44px; padding: 3px 12px; font-size: 12px; letter-spacing: .5px; line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: break-word; text-wrap: balance; }
.cv-act .btn-metal .ic { margin: -2px 5px 0 0; }
.cv-act .ct-bar { margin: 0; padding: 0 12px; border-radius: 3px; height: 26px; }
/* a tall window (a full-HD screen): more air, bigger plates */
@media (min-width: 761px) and (min-height: 700px) {
  .ct.vip { row-gap: 14px; }
  .ct.vip .rs { --s: 54px !important; }
  .cv-chest { width: 84px; }
  .cv-title b { font-size: 16px; }
  .cv-title small { display: block; font-size: 13px; }
}
@supports (width: 1cqw) {
  /* the grand prize in a narrower month (a window under 900 px): no chest, smaller plates (a container query styles the inside of the tile, never the tile itself) */
  @container (max-width: 440px) { .cv-chest, .cv-title img { display: none; } .ct.vip .rs { --s: 44px !important; } .cv-items { gap: 6px; } .cv-title b { font-size: 13px; letter-spacing: 1px; } }
}

.mp { display: flex; flex-wrap: wrap; gap: 3px; }
.mp i { width: 7px; height: 12px; border: 1px solid #2a4260; background: #0a1220; border-radius: 1px; }
.mp i.big { height: 15px; margin-top: -2px; border-color: #7a5d22; }
.mp i.claimed { background: #d9a441; border-color: #d9a441; }
.mp i.today { background: #fff; border-color: #fff; box-shadow: 0 0 6px #fff; animation: mpBlink 1.1s ease-in-out infinite; }
.mp i.missed { background: #17586c; border-color: #2f8fb0; }
.mp i.vip { width: 11px; height: 15px; margin-top: -2px; border-color: #d9a441; }
@keyframes mpBlink { 50% { opacity: .45; } }

/* ---------------------------------------------------------------- Battle Pass: ten tiers a page */
.bp { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 20px); min-height: 440px; box-sizing: border-box; }
.bp-head { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; gap: 14px; align-items: center; padding: 8px 14px; border: 1px solid #22384f; background: linear-gradient(180deg, #11213a, #0a1423); }
.bp-ring { --p: 0; position: relative; width: 58px; height: 58px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(#43d3ff calc(var(--p) * 1%), #1a2b40 0); }
.bp-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #0b1625; }
.bp-ring b { position: relative; font: 800 22px/1 Oxanium, sans-serif; color: #fff; }
.bp-ring.sm { width: 50px; height: 50px; } .bp-ring.sm b { font-size: 19px; }
.bp-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bp-season { display: flex; align-items: baseline; gap: 12px; }
.bp-season b { font: 800 17px Oxanium, sans-serif; letter-spacing: 1.8px; color: #e9f2fb; white-space: nowrap; }
.bp-season span { font-size: 11px; color: #8aa1b6; }
.bp-bar { height: 5px; border: 1px solid #22384f; background: #0a1220; }
.bp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #1f96cc, #7fe0ff); transition: width .4s; }
.bp-num { font-size: 11px; color: #8aa1b6; }
.bp-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; max-width: 520px; }
.bp-actions .btn-metal, .bp-actions .btn-start { width: auto; font-size: 11px; padding: 6px 12px; }
.bp-plus.on { padding: 6px 12px; border: 1px solid #7a5d22; color: #ffd27a; font: 800 11px Oxanium, sans-serif; letter-spacing: 1.2px; background: #221c12; }
.bp-grid { flex: 1; min-height: 0; display: flex; border: 1px solid #22384f; background: #070d17; }
.bp-labels { flex: none; width: 72px; display: flex; flex-direction: column; border-right: 1px solid #22384f; background: #080f1a; }
.bp-labels > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; font: 800 10px Oxanium, sans-serif; letter-spacing: 1.2px; color: #8aa1b6; }
.bp-labels .plus, .bp-labels .free { flex: 1; }
.bp-labels .plus img { width: 28px; height: 28px; }
.bp-labels .plus b { color: #d9a441; } .bp-labels .free b { color: #8fd0ff; }
.bp-labels small { font: 600 9px Rajdhani, sans-serif; color: #6f8aa3; }
.bp-labels .tier { flex: none; height: 38px; }
.bp-strip { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.bp-col { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #14243a; }
.bp-col:last-child { border-right: 0; }
.bp-tier { position: relative; flex: none; height: 38px; display: flex; align-items: center; justify-content: center; background: #080f1a; }
.bp-tier::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: #15283c; }
.bp-col.reached .bp-tier::before { background: #2a79bd; }
.bp-col.cur .bp-tier::before { background: linear-gradient(90deg, #2a79bd, #15283c); }
.bp-tier b { position: relative; width: 34px; height: 28px; display: grid; place-items: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #1d324b; color: #7f9bb5; font: 800 13px Oxanium, sans-serif; }
.bp-col.reached .bp-tier b { background: #2a6fae; color: #fff; }
.bp-col.cur .bp-tier b { background: #ffcf6a; color: #2a1700; box-shadow: 0 0 10px rgba(255, 190, 70, .7); }
.bp-cell { position: relative; flex: 1; min-height: 0; padding: 4px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.bp-items { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 4px; max-width: 100%; }
.bp-cell .rs { --s: clamp(30px, calc((100vw - 190px) / 10 / 2.4), 44px) !important; }
.bp-cell.n1 .rs { --s: clamp(40px, calc((100vw - 190px) / 10 / 1.7), 60px) !important; }
.bp-cell.plus { background: linear-gradient(180deg, #1c1810, #0e0c09); border-bottom: 1px solid #2c2415; }
.bp-cell.free { background: linear-gradient(180deg, #0d1828, #080f1a); }
.bp-cell.big { box-shadow: inset 0 0 0 1px #7a5d22; }
.bp-cell.top { box-shadow: inset 0 0 0 2px #ffb23e; }
.bp-cell.wait .bp-items { opacity: .75; }
.bp-cell.lock .bp-items { opacity: .4; }
.bp-cell.claimed .bp-items { opacity: .28; }
.bp-cell.ready { cursor: pointer; box-shadow: inset 0 0 0 1px #4cd68b; animation: bpReady 1.6s ease-in-out infinite; }
.bp-cell.ready:hover { filter: brightness(1.2); }
@keyframes bpReady { 50% { box-shadow: inset 0 0 0 1px #8bffbd, inset 0 0 14px rgba(76, 214, 139, .4); } }
.bp-take { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 0 7px; font: 800 9px Oxanium, sans-serif; font-style: normal; letter-spacing: 1px; color: #04281a; background: #4cd68b; border-radius: 2px; }
.bp-mark { position: absolute; font-style: normal; }
.bp-mark.ok { right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #1b8a4c no-repeat center / 62% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.bp-mark.lock { right: 4px; top: 4px; width: 18px; height: 18px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9a441' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.bp-pages { display: flex; align-items: center; gap: 8px; justify-content: center; }
.bp-dots { display: flex; gap: 4px; }
.bp-dot, .bp-pg { border: 1px solid #22384f; background: #0b1625; color: #8aa1b6; font: 700 10px Oxanium, sans-serif; padding: 4px 8px; cursor: pointer; border-radius: 2px; }
.bp-dot.on { background: #1d3a5c; color: #fff; border-color: #3a6a96; }
.bp-dot.cur:not(.on) { border-color: #7a5d22; color: #d9a441; }
.bp-pg:disabled { opacity: .35; cursor: default; }
.bp-pg { padding: 4px 14px; }

/* the pop-up after claiming */
.rw-pop { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 12, .78); }
.rw-pop-card { position: relative; overflow: hidden; display: flex; flex-direction: column; max-width: min(620px, 94vw); max-height: 92vh; padding: 20px 28px 20px; border: 1px solid #7a5d22; border-radius: 3px; text-align: center; background: linear-gradient(180deg, #162842, #0a1423); box-shadow: 0 0 50px rgba(0, 0, 0, .7); animation: rwPop .3s ease-out; }
.rw-pop-rays { display: none; }
.rw-pop-h { position: relative; margin-bottom: 14px; font: 800 19px Oxanium, sans-serif; letter-spacing: 3px; color: #ffcf6a; }
.rw-pop-items { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }      /* many kinds of rewards: the list scrolls, the title and the button stay in view */
.rw-pop-card > button { flex: none; }
.rw-pop-items .rs { --s: 84px !important; }
@keyframes rwPop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lgSpin { to { transform: rotate(360deg); } }

/* inside the game's window / the loading screen: the page's own heading is not repeated */
body.embed-calendar, body.embed-pass { overflow: hidden; }
body.embed-calendar .content, body.embed-pass .content { padding: 6px; }
body.embed-calendar .panel-head, body.embed-pass .panel-head { display: none; }
body.embed-calendar .panel-body, body.embed-pass .panel-body { padding: 0; }
body.embed .rw-panel { margin: 0; border: 0; background: none; box-shadow: none; }
.ggx-line.xhp, .ggx-materializer .xhp { color: #ffe27a; }

/* ---------------------------------------------------------------- the loading screen shows the login rewards */
#login-rewards { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(4, 10, 20, .6), rgba(2, 5, 10, .92)); }
#login-rewards.hidden { display: none; }
#login-frame { width: min(1120px, 97vw); height: min(690px, 95vh); border: 0; background: transparent; }
body.embed-login { background: transparent; overflow: hidden; }
body.embed-login .content { padding: 0; }
.lg { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 14px 20px 16px; box-sizing: border-box; border: 1px solid #2a4260; background: linear-gradient(180deg, #11213a, #070d17); box-shadow: 0 0 60px rgba(0, 0, 0, .75); }
.lg::before { content: ''; position: absolute; left: -1px; top: 14px; width: 3px; height: 38px; background: var(--amber, #ffb23e); box-shadow: 0 0 8px rgba(255, 178, 62, .8); }
.lg-head { display: flex; align-items: center; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid #22384f; }
.lg-logo { height: 56px; width: auto; flex: none; }
.lg-title { display: flex; flex-direction: column; flex: none; }
.lg-title b { font: 800 22px/1.05 Oxanium, sans-serif; letter-spacing: 3px; color: #e9f2fb; }
.lg-title span { font: 600 13px Rajdhani, sans-serif; color: #8aa1b6; }
.lg-pips { flex: 1; display: flex; justify-content: flex-end; }
.lg-main { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; min-height: 0; }
.lg-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 1px solid #7a5d22; background: radial-gradient(ellipse at 50% 38%, #2f2514, #0d0b08 75%); box-shadow: inset 0 0 40px rgba(255, 190, 70, .08); }
.lg-hero.claimed { border-color: #2f6b4d; }
.lg-hero.locked { border-color: #5b4a1e; }
.lg-rays { position: absolute; left: 50%; top: 40%; width: 980px; height: 980px; margin: -490px 0 0 -490px; background: repeating-conic-gradient(rgba(255, 205, 110, .07) 0 6deg, transparent 6deg 12deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 58%); mask-image: radial-gradient(circle, #000 0, transparent 58%); animation: lgSpin 90s linear infinite; pointer-events: none; }
.lg-ribbon { position: absolute; left: 14px; top: 12px; padding: 2px 10px; font: 800 11px Oxanium, sans-serif; letter-spacing: 3px; color: #1a1100; background: #ffcf6a; border-radius: 2px; }
.lg-hero.claimed .lg-ribbon { background: #4cd68b; color: #02221a; }
.lg-hero.missed .lg-ribbon { background: #6fd8f5; color: #03212d; }
.lg-chest { position: relative; height: clamp(64px, 17vh, 118px); width: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)); }
.lg-day { position: relative; display: flex; align-items: baseline; gap: 2px; }
.lg-day b { font: 800 66px/1 Oxanium, sans-serif; color: #fff; text-shadow: 0 0 22px rgba(255, 190, 70, .35); }
.lg-day span { font: 800 22px Oxanium, sans-serif; letter-spacing: 2px; color: #ffcf6a; }
.lg-items { position: relative; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.lg-items .rs { --s: 88px !important; }
.lg-items .rs-w small { font-size: 13px; color: #e6eef6; }
.lg-info { position: relative; display: flex; align-items: center; gap: 8px; font: 600 15px Rajdhani, sans-serif; color: #ffd27a; }
.lg-ok { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #1b8a4c no-repeat center / 60% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.lg-hero.claimed .lg-items, .lg-hero.claimed .lg-chest { opacity: .55; }
.lg-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.lg-h { font: 800 11px Oxanium, sans-serif; letter-spacing: 2px; color: #8fb6d8; }
.lg-next { display: flex; flex-direction: column; gap: 5px; }
.lg-n { display: flex; align-items: center; gap: 12px; padding: 4px 10px 4px 8px; border: 1px solid #1d3248; background: #0c1829; border-radius: 3px; }
.lg-n.big { border-color: #7a5d22; background: linear-gradient(90deg, #2a2213, #120f0a); }
.lg-nd { flex: none; min-width: 30px; height: 26px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%); background: #1d324b; color: #a9c1d6; font: 800 13px Oxanium, sans-serif; }
.lg-n.big .lg-nd { background: #7a5d22; color: #fff1c8; }
.lg-ni { display: flex; gap: 4px; }
.lg-ni .rs { --s: 34px !important; }
.lg-vip { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid #9a7424; border-radius: 3px; background: radial-gradient(ellipse at 12% 50%, rgba(255, 200, 90, .22), transparent 60%), linear-gradient(90deg, #33270f, #150f08); }
.lg-vip.claimed { opacity: .6; }
.lg-vc { flex: none; width: 58px; height: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .65)); }
.lg-vt b { display: block; font: 800 13px Oxanium, sans-serif; letter-spacing: 1px; color: #ffd27a; }
.lg-vt small { display: block; font: 600 12px Rajdhani, sans-serif; color: #d2bd90; }
.lg-vi { display: flex; gap: 5px; margin-top: 5px; }
.lg-vip > .ic.big, .lg-vip > .lg-ok { margin-left: auto; }
.lg-miss { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid #2a6a82; border-radius: 3px; background: linear-gradient(90deg, #0f2b3c, #09192b); }
.lg-miss.off { border-color: #344a60; background: #0d1928; }
.lg-mt { flex: 1; min-width: 0; }
.lg-mt b { display: block; font: 800 11px Oxanium, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: #6fd0ec; }
.lg-mt span { display: block; font: 600 12.5px/1.25 Rajdhani, sans-serif; color: #b6c9db; }
.lg-miss em { flex: none; font: 600 12px Rajdhani, sans-serif; font-style: normal; color: #8aa1b6; }
.lg-miss .btn-metal { flex: none; min-height: 44px; white-space: nowrap; }
.lg-bp { margin-top: auto; padding: 8px 12px; border: 1px solid #22384f; background: linear-gradient(90deg, #11213a, #0a1423); border-radius: 3px; }
.lg-bph { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.lg-bpd { font-size: 12px; color: #8aa1b6; }
.lg-bpr { display: flex; align-items: center; gap: 12px; }
.lg-bpm { flex: 1; }
.lg-lv { margin-bottom: 4px; font: 800 12px Oxanium, sans-serif; letter-spacing: 1px; color: #8aa1b6; white-space: nowrap; }
.lg-lv b { font-size: 17px; color: #fff; }
.lg-bpc { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 13px; color: #b6c9db; }
.lg-bpc .btn-metal { min-height: 44px; }
.lg-foot { display: flex; justify-content: center; }
.lg-foot .btn-start { min-width: 380px; min-height: 52px; font-size: 19px; padding: 12px 34px; }

html:has(body.embed-login) { background: transparent !important; }
body.embed-login, body.embed-login .frame, body.embed-login .content, body.embed-login .page.active, body.embed-login #login-body { height: 100vh; background: transparent !important; }
body.embed-login::before, body.embed-login::after { display: none !important; }

/* narrow windows and phones: four columns, the weekly prizes two wide, the grand prize a full row; the page scrolls and every tap target is 44 px */
@media (max-width: 760px) {
  body.embed-calendar, body.embed-login { overflow-y: auto; }
  .cal, .bp { height: auto; min-height: 0; }
  .cal-top { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px 10px 16px; }
  .cal-top .btn-start.small { width: 100%; min-width: 0; padding: 5px 12px; font-size: 14px; letter-spacing: 1.2px; line-height: 1.15; white-space: normal; text-wrap: balance; }
  .cal-rules { flex-direction: column; align-items: stretch; gap: 6px; }
  .cr-chip { align-self: flex-start; max-width: 100%; flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .cal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 108px; }
  .ct.big { grid-column: span 2; }
  .ct.vip { display: flex; flex-direction: row; grid-column: 1 / -1; grid-row: span 2; flex-wrap: wrap; align-content: center; justify-content: center; padding: 8px 14px; }
  .cv-chest { width: 56px; margin-right: 0; }
  .cv-main { display: flex; flex-direction: column; gap: 7px; flex: 1 1 60%; min-width: 0; }
  .cv-title small { display: block; }
  .cv-act { flex: 1 1 100%; flex-direction: row; justify-content: center; margin-left: 0; }
  .cv-items { display: flex; gap: 8px; }
  .cv-items .rs-w { flex-direction: column; justify-content: flex-start; gap: 5px; max-width: calc(var(--s) + 30px); }
  .cv-items .rs-w small { text-align: center; }
  .ct.vip .rs { --s: 46px !important; }
  @supports (width: 1cqw) { @container (min-width: 441px) { .cv-title img { display: block; } } }
  .bp-head { grid-template-columns: 1fr; justify-items: center; }
  .bp-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bp-labels { width: 52px; }
  .lg { padding: 12px 12px 12px; gap: 10px; }
  .lg-main { display: flex; flex-direction: column; gap: 10px; overflow: auto; }
  .lg-main > * { flex: none; }
  .lg-head { gap: 10px; }
  .lg-logo { height: 32px; }
  .lg-title { flex: 1 1 0; min-width: 0; }
  .lg-title b { font-size: 15px; letter-spacing: 1.2px; overflow-wrap: break-word; text-wrap: balance; }
  .lg-pips { display: none; }
  .lg-hero { min-height: 330px; }
  .lg-chest { height: 76px; }
  .lg-day b { font-size: 48px; }
  .lg-items .rs { --s: 72px !important; }
  .lg-miss { flex-wrap: wrap; }
  .lg-miss .btn-metal { width: 100%; }
  .lg-foot .btn-start { min-width: 0; width: 100%; font-size: 16px; letter-spacing: 1.5px; padding: 10px 14px; }
}
/* a wide window that is short (a phone held sideways): the month keeps its seven columns and the page scrolls */
@media (min-width: 761px) and (max-height: 507px) {
  body.embed-calendar { overflow-y: auto; }
  .cal { height: auto; min-height: 0; }
  .cal-grid { grid-template-rows: repeat(3, 96px) 124px; }
}