/* The Sat-Link minutes badge (game/minutes-badge.js): the minutes left on the line, always in sight, with a way to
   buy more. Full on the main menu and the start screen, compact in the HUD. */

.minutes { --mgold: #ffcf6b; --mgold-2: #ffb15c; font-family: var(--font-body); color: #fff; }
.minutes__ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--mgold); stroke-width: 1.8; stroke-linecap: round; }
.minutes__num { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; color: var(--mgold); }
.minutes__unit { font-weight: 600; opacity: 0.85; }

/* full: a card with a label, the number, the hours it buys, and Buy minutes */
.minutes--full {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(20, 30, 22, 0.82), rgba(10, 18, 13, 0.82)); border: 1px solid rgba(255, 207, 107, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: left;
}
.minutes--full .minutes__ico { width: 30px; height: 30px; }
.minutes__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.minutes__label { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.minutes__line { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.minutes--full .minutes__num { font-size: 1.7rem; }
.minutes--full .minutes__unit { font-size: 0.85rem; }
.minutes__hours { font-size: 0.72rem; color: rgba(255, 255, 255, 0.62); margin-top: 3px; white-space: nowrap; }
.minutes__buy {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: none; border-radius: 13px; cursor: pointer;
  background: linear-gradient(135deg, var(--mgold), #ff9a3d); color: #2a1604; font: 800 0.92rem/1 var(--font-body); white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255, 154, 61, 0.35);
}
.minutes__buy span { font-size: 1.2em; line-height: 1; }
.minutes__buy:hover, .minutes__buy:focus-visible { filter: brightness(1.08); outline: none; box-shadow: 0 0 0 2px #fff, 0 4px 18px rgba(255, 154, 61, 0.5); }

/* compact, in the HUD: the number, "min" and a + to buy, one tap target */
.minutes--hud { display: inline-flex; pointer-events: auto; }
.minutes__show {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 6px 0 11px; border-radius: 999px; cursor: pointer;
  background: rgba(10, 18, 13, 0.72); border: 1px solid rgba(255, 207, 107, 0.55); color: #fff; font: 600 0.82rem/1 var(--font-body);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.minutes--hud .minutes__num { font-size: 1rem; }
.minutes--hud .minutes__unit { font-size: 0.72rem; }
.minutes__plus {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; margin-left: 2px;
  background: linear-gradient(135deg, var(--mgold), #ff9a3d); color: #2a1604; font-weight: 900; font-size: 1.05rem; line-height: 1;
}
.minutes__show:hover, .minutes__show:focus-visible { border-color: var(--mgold); outline: none; box-shadow: 0 0 0 2px rgba(255, 207, 107, 0.35); }

/* on the main menu: the top right corner, beside the fullscreen button; on a narrow screen, a slimmer card */
.title .minutes--full { position: fixed; z-index: 6; top: calc(12px + var(--sat, 0px)); right: calc(12px + var(--sar, 0px)); }
.title__corner:not([hidden]) ~ .minutes--full { right: calc(66px + var(--sar, 0px)); }
.title:not([data-screen="main"]) .minutes--full { display: none; }
@media (max-width: 600px) {
  .title .minutes--full { right: calc(10px + var(--sar, 0px)); top: calc(8px + var(--sat, 0px)); gap: 8px; padding: 6px 6px 6px 10px; border-radius: 15px; }
  .title .minutes--full .minutes__label, .title .minutes--full .minutes__hours { display: none; }
  .title .minutes--full .minutes__num { font-size: 1.15rem; }
  .title .minutes--full .minutes__ico { width: 22px; height: 22px; }
  .title .minutes--full .minutes__buy { min-height: 36px; padding: 0 11px; font-size: 0.8rem; border-radius: 11px; }
}
/* a phone on its side: the menu fills the right half, so the card goes in the left one, under the name */
@media (orientation: landscape) and (max-height: 500px) {
  .title .minutes--full { top: auto; right: auto; left: calc(16px + var(--sal, 0px)); bottom: calc(66px + var(--sab, 0px)); padding: 5px 6px 5px 10px; gap: 8px; }
  .title__corner:not([hidden]) ~ .minutes--full { right: auto; }
  .title .minutes--full .minutes__hours { display: none; }
  .title .minutes--full .minutes__num { font-size: 1.2rem; }
  .title .minutes--full .minutes__buy { min-height: 36px; }
}

/* on the start screen, under the brief */
.startscreen .minutes--full { margin: 10px 0 2px; }

/* a short desktop window (a laptop at 1280 × 720): Cara fills the height and her head reaches the top, so the card
   slims to the number and Buy and keeps to the corner beside her */
@media (min-width: 901px) and (max-height: 820px) {
  .title .minutes--full { gap: 9px; padding: 6px 6px 6px 11px; }
  .title .minutes--full .minutes__label, .title .minutes--full .minutes__hours { display: none; }
  .title .minutes--full .minutes__ico { width: 24px; height: 24px; }
  .title .minutes--full .minutes__num { font-size: 1.3rem; }
  .title .minutes--full .minutes__buy { min-height: 38px; padding: 0 12px; font-size: 0.85rem; }
}

/* a phone held upright: the card is a bar across the top, so the name starts below it */
@media (max-width: 600px) and (orientation: portrait) {
  .screen--main { padding-top: calc(66px + var(--sat, 0px)); }
}
@media (max-height: 500px) {
  .startscreen .minutes--full { margin: 6px 0 0; gap: 8px; padding: 5px 6px 5px 10px; border-radius: 14px; }
  .startscreen .minutes--full .minutes__label, .startscreen .minutes--full .minutes__hours { display: none; }
  .startscreen .minutes--full .minutes__ico { width: 22px; height: 22px; }
  .startscreen .minutes--full .minutes__num { font-size: 1.15rem; }
  .startscreen .minutes--full .minutes__buy { min-height: 34px; padding: 0 11px; font-size: 0.8rem; border-radius: 10px; }
}

/* the coins and gems beside the minutes (game/store.js: every pack brings some of each) */
.minutes__purse { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.minutes__purse > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.minutes__purse i { font-style: normal; font-size: 0.95em; line-height: 1; }
.minutes__coin b { color: #ffd66b; }
.minutes__gem b { color: #8fe3ff; }
.minutes--full .minutes__purse { margin-top: 4px; }
.minutes--hud .minutes__purse { margin-left: 4px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
/* a narrow screen: the HUD pill keeps the minutes and the gems, the coins drop out */
@media (max-width: 600px) { .minutes--hud .minutes__coin { display: none; } }
/* coins or gems just earned: the purse pops */
.minutes__purse.is-pop { animation: purse-pop 0.7s ease-out; }
@keyframes purse-pop { 0% { transform: scale(1); } 30% { transform: scale(1.25); filter: brightness(1.4); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .minutes__purse.is-pop { animation: none; } }

/* the badge's frames, bought in the Shop (engine/client/character/wardrobe.js FRAME_ITEMS, docs/102): on the card
   (full) or the pill (HUD), and on the Shop's previews */
.minutes { --bf-fill: rgba(12, 20, 15, 0.9); }
.bframe--jade { border: 2px solid #3fdc9a; box-shadow: 0 0 0 1px rgba(63, 220, 154, 0.25), 0 0 14px rgba(63, 220, 154, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35); }
.bframe--ember { border: 2px solid #ff8a3d; box-shadow: 0 0 16px rgba(255, 120, 40, 0.55), inset 0 0 10px rgba(255, 120, 40, 0.22); animation: bf-ember 2.2s ease-in-out infinite alternate; }
@keyframes bf-ember { to { box-shadow: 0 0 24px rgba(255, 170, 60, 0.75), inset 0 0 14px rgba(255, 90, 30, 0.3); border-color: #ffc14a; } }
.bframe--tide, .bframe--rainbow, .bframe--starlight { border: 2px solid transparent; background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 300% 100%; animation: bf-slide 6s linear infinite; }
.bframe--tide { background-image: linear-gradient(var(--bf-fill), var(--bf-fill)), linear-gradient(90deg, #1f8a96, #5ec8f2, #c9f4ff, #5ec8f2, #1f8a96); box-shadow: 0 0 14px rgba(94, 200, 242, 0.45); }
.bframe--rainbow { background-image: linear-gradient(var(--bf-fill), var(--bf-fill)), linear-gradient(90deg, #ff5f6d, #ffc371, #f9f871, #6ee7b7, #60a5fa, #a78bfa, #ff5f6d); box-shadow: 0 0 16px rgba(167, 139, 250, 0.45); animation-duration: 3.5s; }
.bframe--starlight { background-image: linear-gradient(var(--bf-fill), var(--bf-fill)), linear-gradient(90deg, #8a5cff, #ffd84a, #c86bff, #ffd84a, #8a5cff); box-shadow: 0 0 18px rgba(138, 92, 255, 0.5); }
.minutes__show.bframe--starlight { position: relative; }
.minutes__show.bframe--starlight::after, .minutes__show.bframe--starlight::before { position: absolute; pointer-events: none; color: #ffe27a; text-shadow: 0 0 6px #ffd84a; animation: bf-twinkle 1.6s ease-in-out infinite alternate; }
.minutes__show.bframe--starlight::after { content: '✦'; top: -9px; right: -5px; font-size: 14px; }
.minutes__show.bframe--starlight::before { content: '✧'; bottom: -9px; left: 8px; font-size: 12px; animation-delay: 0.8s; }
@keyframes bf-slide { to { background-position: 0 0, 300% 0; } }
@keyframes bf-twinkle { from { opacity: 0.3; transform: scale(0.8); } to { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .bframe--ember, .bframe--tide, .bframe--rainbow, .bframe--starlight, .minutes__show.bframe--starlight::after, .minutes__show.bframe--starlight::before { animation: none; } }