/* Evento della settimana (weekly.js) sui riquadri del Covo e della Spedizione e nelle loro schermate */

/* Riquadro della home con evento attivo: bordo dorato e alone del colore dell'evento */
.tile.wk-on { --wc: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 75%, transparent); box-shadow: 0 5px 0 color-mix(in srgb, var(--tc) 45%, #000), inset 0 0 0 2px color-mix(in srgb, var(--wc) 55%, transparent), 0 0 14px color-mix(in srgb, var(--yellow) 35%, transparent); }
.tile.wk-on:hover { border-color: #fff; }
.tile .dt-main small.wk-when {
  display: inline-block; max-width: 100%; margin-top: 4px; padding: 2px 7px 1px; border-radius: 99px;
  font: 900 10px/1.3 var(--body); color: var(--ink); background: var(--yellow); opacity: 1;
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.wk-when em { font-style: normal; color: var(--red-d); text-transform: uppercase; letter-spacing: .4px; }
.tile .dt-main small.wk-name { margin-top: 3px; font: 900 12px/1.25 var(--body); opacity: 1; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.tile .dt-main small.wk-name .ico { margin-right: 2px; }

/* Riquadro nella schermata della modalita */
.wk-box {
  --wc: var(--yellow);
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 12px 16px; border-radius: 20px;
  border: 3px solid color-mix(in srgb, var(--yellow) 70%, transparent); color: #fff;
  background: var(--gloss), var(--stripes), linear-gradient(110deg, color-mix(in srgb, var(--wc) 75%, #000), var(--card) 75%);
  box-shadow: var(--shadow);
}
.wk-ico { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); }
.wk-txt { flex: 1; min-width: 0; }
.wk-box .wk-when { display: inline-block; padding: 2px 8px 1px; border-radius: 99px; font: 900 11px/1.3 var(--body); color: var(--ink); background: var(--yellow); }
.wk-box b { display: block; margin-top: 4px; font: 400 22px/1.05 var(--display); text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.wk-box p { margin: 4px 0 0; font: 700 13px/1.35 var(--body); opacity: .92; }
.wk-box p.wk-bonus { font-weight: 900; color: var(--yellow); opacity: 1; }

@media (max-width: 760px) {
  .wk-box { gap: 10px; padding: 10px 12px; align-items: flex-start; }
  .wk-ico { width: 42px; height: 42px; font-size: 22px; }
  .wk-box b { font-size: 18px; }
  .wk-box p { font-size: 12px; }
}