/* OVERWORK INC. - evening.css : the evening's activity cards (js/home.js cardEl), built like the chapter select's (css/chsel.css).
 *   .hm-card   (perspective; the deal from below the tray; lift on hover; the soft shadow on the cork)
 *   .hm-tilt   (leans toward the pointer: --px / --py in -1..1)
 *   .hm-flip   (dealt face down, flipped face up)
 *   .hm-cface   (a candy-stripe rim in the activity's colour, rivets, a cream panel; the scene window's sky and icon slide against
 *               the lean; the relief medal breaks out of the top corner, nearest of all; a rainbow ring runs round it on hover)
 * Colours by kind of evening (data.js cat): relax mint, connect rose, master lilac, escape (the traps) coral, bed night blue.
 * States: .disabled (no time / locked by the night's note) greys out and stops leaning; .did gets a check stamp; .trap warns. */

#screen-home .hm-tray { height: 206px; gap: 12px; padding: 26px 18px 14px; align-items: flex-end; }
/* the time and stress are on the HUD already: no free-time pill, no tomorrow forecast (kids: fewer things to read) */
#screen-home .hm-bank, #screen-home .hm-forecast { display: none !important; }

/* ---------- the card: perspective, rest tilt, lift, shadow on the cork ---------- */
.hm-card { --tone: #b9f0d6; --deep: #2fb57a; --tilt: -1.4deg; --px: 0; --py: 0;
  position: relative; display: block; flex: 1 1 0; min-width: 0; height: 164px; margin: 0; padding: 0; border: 0; background: none; color: #3a2433; text-align: center; cursor: pointer;
  font-family: var(--font-ui); perspective: 700px; rotate: var(--tilt); -webkit-tap-highlight-color: transparent; container-type: inline-size;
  transition: translate .3s cubic-bezier(.3,1.5,.5,1), rotate .3s cubic-bezier(.3,1.5,.5,1), scale .3s cubic-bezier(.3,1.5,.5,1); }
.hm-card:nth-child(even) { --tilt: 1.3deg; }
.hm-card:nth-child(3n) { --tilt: -.6deg; }
.hm-card::after { content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: -10px; height: 18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(70,30,10,.5), transparent 70%); translate: calc(var(--px) * -8px) 0; transition: scale .3s, opacity .3s, translate .2s; }
.hm-card.hm-hot, .hm-card.hover, .hm-card:focus-visible { z-index: 3; rotate: 0deg; translate: 0 -14px; scale: 1.06; outline: none; }
.hm-card.hm-hot::after, .hm-card.hover::after, .hm-card:focus-visible::after { scale: 1.1 1.25; opacity: .65; translate: calc(var(--px) * -12px) 12px; }
.hm-card:active:not(.disabled) { translate: 0 -6px; scale: .98; transition-duration: .08s; }

/* WebKit lays a <button> out as a flexbox whatever its display, and home.css gives the bed card align-items: flex-start:
   without these the bed card's body shrank to 17 px on iPads */
.hm-card { align-items: stretch !important; justify-content: flex-start !important; }
.hm-tilt { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateY(calc(var(--px) * 15deg)) rotateX(calc(var(--py) * -12deg)); transition: transform .55s cubic-bezier(.3,1.6,.5,1); }
.hm-hot > .hm-tilt { transition: transform .12s ease-out; }
.hm-flip { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.hm-cface, .hm-rear { position: absolute; inset: 0; box-sizing: border-box; border: 3px solid #3a2433; border-radius: 17px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* the face: a candy-stripe rim in the activity's colours around a cream panel */
.hm-k-relax { --tone: #b9f0d6; --deep: #2fb57a; }
.hm-k-connect { --tone: #ffc8dd; --deep: #ff4f86; }
.hm-k-master { --tone: #d6c8ff; --deep: #7a5cd6; }
.hm-k-escape { --tone: #ffd2bf; --deep: #f0603a; }
.hm-k-bed { --tone: #c9d3ff; --deep: #4a5bb8; }
.hm-cface { display: flex; transform-style: preserve-3d; padding: 5px;
  background: repeating-linear-gradient(-45deg, var(--tone) 0 7px, color-mix(in srgb, var(--tone), var(--deep) 30%) 7px 14px);
  box-shadow: 0 5px 0 #3a2433, inset 0 0 0 2px rgba(255,255,255,.55); }
.hm-cface::before { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; z-index: 1;      /* rivets */
  background: radial-gradient(circle 3px at 9px 9px, #fff7f0 1.8px, #3a2433 2.2px, transparent 3.1px), radial-gradient(circle 3px at calc(100% - 9px) 9px, #fff7f0 1.8px, #3a2433 2.2px, transparent 3.1px),
    radial-gradient(circle 3px at 9px calc(100% - 9px), #fff7f0 1.8px, #3a2433 2.2px, transparent 3.1px), radial-gradient(circle 3px at calc(100% - 9px) calc(100% - 9px), #fff7f0 1.8px, #3a2433 2.2px, transparent 3.1px); }
.hm-panel { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; transform-style: preserve-3d; border: 2.5px solid #3a2433; border-radius: 11px;
  background: radial-gradient(rgba(58,36,51,.06) 1px, transparent 1.5px) 0 0 / 6px 6px, #fff9f2; box-shadow: inset 0 -4px 0 rgba(58,36,51,.07); }

/* the scene window: a sky in the activity's colour (far, slides with the lean) and the drawn icon (near, slides against it) */
.hm-cover { position: relative; display: block; flex: 1 1 auto; min-height: 0; margin: 4px 4px 0; border: 2.5px solid #3a2433; border-radius: 8px; overflow: hidden; transform: translateZ(4px);
  background: color-mix(in srgb, var(--tone), #fff 30%); }
.hm-sky { position: absolute; inset: -12px; transition: transform .5s cubic-bezier(.3,1.4,.5,1); transform: translate(calc(var(--px) * 6px), calc(var(--py) * 4px));
  background: radial-gradient(circle at 74% 30%, rgba(255,255,255,.95) 0 12%, rgba(255,255,255,0) 32%),
    radial-gradient(color-mix(in srgb, var(--deep), transparent 78%) 1.6px, transparent 2.2px) 0 0 / 11px 11px,
    linear-gradient(180deg, color-mix(in srgb, var(--tone), #fff 45%), var(--tone) 70%, color-mix(in srgb, var(--tone), var(--deep) 25%)); }
.hm-k-master .hm-sky { background: radial-gradient(circle at 74% 30%, rgba(255,255,255,.95) 0 12%, rgba(255,255,255,0) 32%),
    linear-gradient(color-mix(in srgb, var(--deep), transparent 84%) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, color-mix(in srgb, var(--deep), transparent 84%) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(180deg, color-mix(in srgb, var(--tone), #fff 45%), var(--tone)); }
.hm-k-escape .hm-sky { background: radial-gradient(circle at 74% 30%, rgba(255,255,255,.9) 0 12%, rgba(255,255,255,0) 32%),
    repeating-linear-gradient(-45deg, rgba(240,96,58,.16) 0 8px, transparent 8px 16px), linear-gradient(180deg, #ffe6da, #ffc9b3); }
.hm-k-bed .hm-sky { background: radial-gradient(circle at 76% 28%, #fff6c8 0 9%, rgba(255,246,200,.35) 11%, transparent 26%),
    radial-gradient(#fff 1px, transparent 1.6px) 3px 4px / 17px 13px, radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.4px) 10px 9px / 23px 19px,
    linear-gradient(180deg, #3b4a9a, #6f7fd0); }
.hm-art { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; transition: transform .5s cubic-bezier(.3,1.4,.5,1);
  transform: translate(calc(var(--px) * -5px), calc(var(--py) * -4px)); filter: drop-shadow(0 3px 0 rgba(58,36,51,.35)); }
.hm-art svg, .hm-art .ico-svg { display: block; width: 100%; height: 100%; }
.hm-hot .hm-sky, .hm-hot .hm-art { transition-duration: .14s; transition-timing-function: ease-out; }
.hm-hot .hm-art, .hover .hm-art { scale: 1.12; }
.hm-gloss { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
  background: radial-gradient(circle at calc(50% + var(--px) * 45%) calc(45% + var(--py) * 45%), rgba(255,255,255,.95), rgba(255,255,255,0) 55%); }
.hm-hot .hm-gloss { opacity: 1; }
.hm-cover::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-120%) skewX(-16deg); }
.hm-card.hm-hot:not(.disabled) .hm-cover::after { animation: hm-sheen .7s ease-out; }
@keyframes hm-sheen { 0% { opacity: 1; transform: translateX(-120%) skewX(-16deg); } 100% { opacity: 1; transform: translateX(330%) skewX(-16deg); } }

/* the ribbon nameplate across the window's foot, then the minutes */
.hm-card .nm { position: relative; z-index: 2; display: block; align-self: center; margin: -16px -10px 0; padding: 6px 12px 7px; max-height: 2.4em; text-align: center; max-width: calc(100% + 20px); box-sizing: border-box;
  white-space: normal; overflow: hidden; text-wrap: balance; font: 400 clamp(19px, 16cqi, 24px)/1.02 var(--font-display);   /* big enough for kids: two lines when it must */ letter-spacing: .01em; color: #fff7f0;
  -webkit-text-stroke: 4px #3a2433; paint-order: stroke fill; text-shadow: 0 2px 0 #3a2433;
  background: linear-gradient(var(--deep), color-mix(in srgb, var(--deep), #3a2433 22%));
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%); filter: drop-shadow(0 2px 0 #3a2433); transform: translateZ(18px) rotate(-1.5deg); }
.hm-card .ft { display: flex; justify-content: center; padding: 4px 4px 5px; transform: translateZ(10px); }
.hm-card .mn { display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px 1px 4px; border-radius: 999px; background: #fff; border: 2px solid rgba(58,36,51,.28);
  font: 900 17px/1.1 var(--font-ui); letter-spacing: .04em; color: #3a2433; white-space: nowrap; direction: ltr; }
.hm-mico { display: block; width: 20px; height: 20px; }
.hm-mico svg, .hm-bico svg, .hm-fico svg, .hm-rico svg { display: block; width: 100%; height: 100%; }

/* the relief medal: breaks out of the top corner, nearest of all */
.hm-card .st { position: absolute; z-index: 4; top: -15px; left: -12px; min-width: 46px; height: 46px; box-sizing: border-box; padding: 0 5px;
  display: flex; align-items: center; justify-content: center; border: 3px solid #3a2433; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff, #f1fff7 45%, #c9f3dc); box-shadow: 0 3px 0 #3a2433, 0 0 0 3px #2fb57a inset;
  font: 400 21px/1 var(--font-display); color: #1f9a62; -webkit-text-stroke: 4px #3a2433; paint-order: stroke fill;
  transform: translateZ(36px) rotate(-10deg); pointer-events: none; transition: transform .45s cubic-bezier(.3,1.7,.5,1); }
.hm-hot .st, .hover .st, .hm-card:focus-visible .st { transform: translateZ(46px) rotate(6deg) scale(1.1); }
html[dir=rtl] .hm-card .st { left: auto; right: -12px; }     /* .st keeps direction: ltr for its numbers (css/a11y.css), so not inset-inline */
.hm-card.trap .st { background: radial-gradient(circle at 35% 30%, #fff, #fff1ec 45%, #ffd2bf); box-shadow: 0 3px 0 #3a2433, 0 0 0 3px #f0603a inset; color: #e0442a; }

/* the rainbow ring: runs round the card on hover */
.hm-ring { position: absolute; inset: -8px; border-radius: 24px; padding: 5px; pointer-events: none; opacity: 0; transform: translateZ(-1px);
  background: conic-gradient(from var(--cs-ang), #ffd76a, #ff6f9a, #c9b6ff, #7fd0ff, #7fdcb0, #ffd76a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .25s; }
.hm-hot .hm-ring, .hover .hm-ring, .hm-card:focus-visible .hm-ring { opacity: 1; animation: cs-ang 2.4s linear infinite; }
.hm-card.disabled .hm-ring { display: none; }

/* the back (seen while it is dealt): the show's rose stripes and a heart */
.hm-rear { display: flex; align-items: center; justify-content: center; transform: rotateY(180deg);
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 7px, transparent 7px 14px), linear-gradient(#ff93b5, #ff5a8c);
  box-shadow: 0 5px 0 #3a2433, inset 0 0 0 6px #ff5a8c, inset 0 0 0 8px rgba(255,247,240,.85); }
.hm-rear-ico { width: 42px; height: 42px; filter: drop-shadow(0 3px 0 #3a2433); }
.hm-rear-ico svg { display: block; width: 100%; height: 100%; }

/* ---------- go to bed: the night's last card ---------- */
.hm-card.hm-bed { flex: 0 0 140px; }
.hm-bed .hm-cover { margin-bottom: 0; }
.hm-bed .nm { margin-bottom: 9px; }
.hm-bed .hm-art { width: 60px; height: 60px; margin: -27px 0 0 -30px; }

/* ---------- states ---------- */
/* no time left for it, or the night's note locks it: greyed, still, no lift */
.hm-card.disabled { opacity: 1; cursor: not-allowed; --tone: #e4d9e2; --deep: #9d8a98; }
.hm-card.disabled.hm-hot, .hm-card.disabled.hover { translate: 0 -4px; scale: 1; rotate: var(--tilt); }
.hm-card.disabled .hm-cover { filter: grayscale(1) brightness(.92); }
.hm-card.disabled .hm-panel { background: #f4eef2; }
.hm-card.disabled .st { filter: grayscale(1); opacity: .7; }
.hm-card.disabled .mn { color: #8a7a9a; }
/* done tonight: a check stamped on the window */
.hm-card.did .hm-cover::before { content: ''; position: absolute; z-index: 3; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #3a2433;
  background: #7fdcb0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%233a2433' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  box-shadow: 0 2px 0 #3a2433; transform: rotate(-8deg); }
.hm-card.did .hm-art { opacity: .85; }
/* the night's note on it (Drilling. Ugh.) */
.hm-card .why { position: absolute; z-index: 5; left: 8px; right: 8px; top: 10px; padding: 4px 6px; border-radius: 7px; background: #3a2433; color: #ffe1ea;
  font: 800 12px/1.2 var(--font-ui); text-align: center; transform: translateZ(30px) rotate(-2deg); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
/* introduced today */
.hm-card.new::before { content: 'NEW'; position: absolute; z-index: 6; top: -11px; inset-inline-end: 6px; padding: 2px 8px; border-radius: 999px; background: #ff4f86; color: #fff;
  border: 2px solid #3a2433; font: 900 15px/1.2 var(--font-ui); letter-spacing: .06em; transform: rotate(4deg); box-shadow: 0 2px 0 #3a2433; }
html[lang=ar] .hm-card.new::before { content: 'جديد'; letter-spacing: 0; }
.hm-tray.hm-deal .hm-card.new .hm-ring { opacity: 1; animation: cs-ang 2.4s linear infinite, hm-breathe 2.2s ease-in-out 1.4s infinite; }
@keyframes hm-breathe { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }

/* ---------- the deal: up from below the tray face down, then flipped ---------- */
.hm-tray.hm-deal .hm-card { animation: hm-deal .8s cubic-bezier(.3,.9,.35,1) backwards; animation-delay: calc(.15s + var(--i) * .07s); }
.hm-tray.hm-deal .hm-flip { animation: hm-flip-in .8s cubic-bezier(.3,1.3,.5,1) backwards; animation-delay: calc(.15s + var(--i) * .07s); }
@keyframes hm-deal {
  0% { opacity: 0; translate: 0 240px; rotate: var(--r0); scale: .85; }
  12% { opacity: 1; }
  62% { translate: 0 -16px; rotate: 0deg; scale: 1.04; }
  100% { opacity: 1; translate: 0 0; rotate: var(--tilt); scale: 1; }
}
@keyframes hm-flip-in { 0%, 40% { transform: rotateY(180deg); } 82% { transform: rotateY(-12deg); } 100% { transform: rotateY(0deg); } }

/* ---------- phones, accessibility, reduced motion ---------- */
html.a11y-big .hm-card .nm { font-size: clamp(15px, 12.5cqi, 22px); }
@media (prefers-reduced-motion: reduce) {
  .hm-tray.hm-deal .hm-card { animation: nbf-fade .4s backwards; animation-delay: calc(var(--i) * .04s); }
  .hm-tray.hm-deal .hm-flip { animation: none; }
  .hm-tilt { transform: none !important; }
  .hm-ring { animation: none !important; }
}

/* ---------- the rest of the evening: icons and numbers, few words (kids play this too) ---------- */
#screen-home .hm-bank { padding: 3px 12px 3px 6px; }
.hm-bico { display: block; width: 26px; height: 26px; }
#screen-home .hm-forecast { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; }
.hm-fico { display: block; width: 30px; height: 30px; }
#screen-home .hm-forecast em { display: flex; align-items: center; gap: 2px; direction: ltr; }
.hm-result .big { display: flex; align-items: center; justify-content: center; gap: 10px; direction: ltr; }
.hm-rico { display: block; width: 62px; height: 62px; }