/* The companion (pa-companion.js): the theme's own colours, so it reads in light and dark. */
.pac-beam { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1034; }
.pac-buddy { position: fixed; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: 112px; height: 112px; padding: 0; border: 0; background: transparent; cursor: grab; z-index: 1035;
  touch-action: none; -webkit-user-select: none; user-select: none; transition: opacity .4s, transform .3s; }
.pac-buddy:focus-visible { outline: 3px solid var(--bs-primary, #2E6BB0); outline-offset: 3px; border-radius: 14px; }
.pac-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; animation: pac-bob 3.4s ease-in-out infinite; transition: opacity .6s, filter .6s;
  scale: 1.3; transform-origin: 50% 60%; }
.pac-halo { position: absolute; inset: 8px; border-radius: 50%; background: #F2C230; opacity: 0; transform: scale(.6); transition: opacity .4s, transform .4s; pointer-events: none; }
.pac-petted .pac-halo { opacity: .26; transform: scale(1); }
.pac-dozing .pac-art, .pac-asleep .pac-art { opacity: .55; filter: saturate(.6); animation-duration: 6s; }
.pac-asleep { width: 84px; height: 84px; }
.pac-breathing .pac-halo { opacity: .3; transition: transform var(--pac-breath, 4s) ease-in-out, opacity .4s; }
.pac-jump .pac-art { animation: pac-jump .55s ease-out 3; }
.pac-gone { opacity: 0; transform: translateY(20px); }
.pac-search .pac-art { animation: pac-search 2.6s ease-in-out infinite; }
.pac-spark { position: absolute; width: 10px; height: 10px; pointer-events: none; animation: pac-rise 1s ease-out forwards; }
.pac-spark::before { content: ""; position: absolute; inset: 0; background: #F2C230;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes pac-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-4px) rotate(1.5deg); } }
@keyframes pac-jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
@keyframes pac-search { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes pac-rise { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), -40px) scale(.4); } }

.pac-bubble { position: fixed; z-index: 1036; max-width: calc(100vw - 16px); display: grid; gap: 10px; padding: 12px 12px 10px;
  background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #13294B); border: 1px solid var(--bs-border-color, #D5DEEB);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(10, 25, 50, .18); font-size: 15px; line-height: 1.5; }
.pac-bubble[hidden] { display: none; }
.pac-who { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--bs-primary, #2E6BB0); }
.pac-say { white-space: pre-line; }
/* Arabic, in one face: a tongue twister, and the letters it practises (4 Nov 2026). */
.pac-ar, .pac-letter { font-family: "Noto Naskh Arabic", "Geeza Pro", Amiri, "Traditional Arabic", serif; }
.pac-ar { white-space: pre-line; font-size: 21px; line-height: 1.8; text-align: right; }
.pac-small { font-size: 12.5px; color: var(--bs-secondary-color, #4F6180); }
/* A letter a tongue twister practises, in the small line: large enough to make out, in the bubble's own colour. */
.pac-letter { font-size: 1.6em; line-height: 1; color: var(--bs-body-color, #13294B); }
.pac-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.pac-items li { border-left: 3px solid #F2C230; padding-left: 8px; }
.pac-items span { display: block; font-size: 12.5px; color: var(--bs-secondary-color, #4F6180); }
.pac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pac-chips button { font: inherit; font-size: 13px; line-height: 1.2; padding: 7px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bs-border-color, #D5DEEB); background: var(--bs-tertiary-bg, #F3F6FB); color: var(--bs-body-color, #13294B); }
.pac-chips button:hover { border-color: var(--bs-primary, #2E6BB0); }
.pac-chips button:focus-visible { outline: 2px solid var(--bs-primary, #2E6BB0); outline-offset: 2px; }
.pac-chips .pac-quiet { background: transparent; color: var(--bs-secondary-color, #4F6180); }
.pac-chips .pac-pick { display: grid; justify-items: center; gap: 2px; border-radius: 10px; padding: 4px 6px; }
.pac-chips .pac-pick img { width: 40px; height: 40px; }
.pac-chips .pac-on { border-color: var(--bs-primary, #2E6BB0); border-width: 2px; }
.pac-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 575px) { .pac-buddy { width: 84px; height: 84px; } }
/* Until someone first opens it (3 Nov 2026): a ring of light pulses out and a small tag says what to do. */
.pac-tapme::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 3px solid #F2C230; pointer-events: none;
  animation: pac-pulse 1.8s ease-out infinite; }
.pac-tapme-label { position: absolute; bottom: calc(100% + 10px); right: 50%; transform: translateX(50%); padding: 4px 11px; border-radius: 999px;
  background: #13294B; color: #fff; font: 600 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(10, 25, 50, .22); pointer-events: none; animation: pac-nudge 2.4s ease-in-out infinite; }
@keyframes pac-pulse { 0% { transform: scale(.75); opacity: .95; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes pac-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media print { .pac-buddy, .pac-bubble, .pac-beam { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .pac-art { animation: none !important; } .pac-spark { display: none; }
  .pac-tapme::before { animation: none; opacity: .9; } .pac-tapme-label { animation: none; } }

/* The season's look (Hijri, Settings › Companion): a warm glow in Ramaḍān, stars at ʿĪd and on
   the first day of the year, a slower, calmer sway in exam week. */
.pac-buddy[class*="pac-season-"]::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; }
.pac-season-ramadan .pac-halo { opacity: .16; transform: scale(.95); }
.pac-season-ramadan::after { background: radial-gradient(circle, rgba(242, 194, 48, .18), transparent 65%); }
.pac-season-eid::after, .pac-season-first-day::after {
  background: radial-gradient(circle at 18% 22%, #F2C230 0 2px, transparent 3px), radial-gradient(circle at 82% 18%, #7FB2E5 0 2px, transparent 3px),
    radial-gradient(circle at 88% 70%, #F2C230 0 1.5px, transparent 2.5px), radial-gradient(circle at 12% 74%, #7FB2E5 0 1.5px, transparent 2.5px); }
.pac-season-exams .pac-art { animation-duration: 6s; }
@media (prefers-reduced-motion: reduce) { .pac-season-exams .pac-art { animation: none; } }

/* Short pairs (a prayer and its time, a register count) on one line each. */
.pac-items-tight li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.pac-items-tight span { display: inline; font-size: 14px; color: inherit; font-weight: 600; }

/* Stage 3: the fields in the bubble, and the calm game. */
.pac-field { width: 100%; font: inherit; font-size: 14px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--bs-border-color, #D5DEEB);
  background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #13294B); }
.pac-game { position: fixed; z-index: 1037; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, 94vw);
  background: #0F1D33; color: #E7EEF9; border-radius: 16px; padding: 12px; display: grid; gap: 8px; box-shadow: 0 18px 50px rgba(5, 12, 25, .45); }
.pac-game svg { width: 100%; height: auto; border-radius: 10px; }
.pac-game-top { display: flex; justify-content: space-between; align-items: center; }
.pac-game-x, .pac-game-back { font: inherit; border: 1px solid #2E6BB0; background: transparent; color: #E7EEF9; border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.pac-game-say { margin: 0; font-size: 14px; text-align: center; }
.pac-lamp { cursor: pointer; }
.pac-lamp:focus-visible { outline: none; }
.pac-lamp:focus-visible rect { stroke: #7FB2E5; stroke-width: 2; }
.pac-sweeping { opacity: .25 !important; transform-origin: 180px 62px; animation: pac-sweep 3s ease-in-out infinite alternate; }
@keyframes pac-sweep { from { transform: rotate(-35deg); } to { transform: rotate(20deg); } }

/* Stage 4: a headline is a link out. */
.pac-items a { color: inherit; text-decoration: underline; text-decoration-color: #F2C230; text-underline-offset: 3px; }