/* Not Flip 7 card faces, the wordmark and the table, shared by the TV and the phones.
   Size a card with --cw. The card's own box is sized from --cw; cqw only inside it. */
.f7c, .f7c * { box-sizing: border-box; }
.f7c {
  --paper: #fcf5e3; --paper2: #f1e2bd; --rule: #b39a55;
  width: var(--cw, 100px); aspect-ratio: 5 / 7; container-type: inline-size; position: relative; flex: none;
  filter: drop-shadow(0 calc(var(--cw, 100px) * .02) calc(var(--cw, 100px) * .035) rgba(40,25,5,.38));
  user-select: none; -webkit-user-select: none;
  font-family: "Avenir Next", "Inter", "Helvetica Neue", Arial, sans-serif;
}
.f7c .f7-in {
  position: absolute; inset: 0; border-radius: 6cqw; overflow: hidden; color: var(--ink, #333);
  background:
    radial-gradient(ellipse 90% 60% at 30% 18%, rgba(255,255,255,.55), transparent 60%),
    repeating-linear-gradient(115deg, rgba(120,90,30,.025) 0 1.2cqw, transparent 1.2cqw 2.6cqw),
    linear-gradient(165deg, var(--paper), var(--paper2));
  /* the ticket notches on both sides */
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 5cqw, #000 5.4cqw) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 5cqw, #000 5.4cqw) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, #0000 5cqw, #000 5.4cqw) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 5cqw, #000 5.4cqw) right / 51% 100% no-repeat;
}
.f7c .f7-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.f7c .f7-fan { position: absolute; top: 50%; width: 15cqw; height: 30cqw; transform: translateY(-50%); }
.f7c .f7-fan svg { width: 100%; height: 100%; display: block; }
.f7c .f7-fan.l { left: 0; }
.f7c .f7-fan.r { right: 0; transform: translateY(-50%) scaleX(-1); }
.f7c .f7-big {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-54%); text-align: center; line-height: 1;
  font-family: "Rockwell Extra Bold", Rockwell, "Roboto Slab", "Arvo", Georgia, serif; font-weight: 900;
  font-size: 60cqw; letter-spacing: -.04em; color: var(--ink);
  -webkit-text-stroke: 1.3cqw var(--shade); paint-order: stroke fill;
  text-shadow: 1.6cqw 1.9cqw 0 var(--shade), 2.4cqw 3cqw 0 rgba(60,30,0,.14);
}
.f7c .f7-big.two { font-size: 47cqw; letter-spacing: -.07em; transform: translate(-1.5cqw, -54%); }
.f7c .f7-pip { position: absolute; font-family: "Rockwell Extra Bold", Rockwell, "Roboto Slab", Georgia, serif; font-weight: 900; font-size: 13cqw; line-height: 1; color: var(--ink); -webkit-text-stroke: .5cqw var(--shade); paint-order: stroke fill; }
.f7c .f7-pip.tl { left: 12cqw; top: 11cqw; }
.f7c .f7-pip.br { right: 12cqw; bottom: 11cqw; transform: rotate(180deg); }
.f7c .f7-word { position: absolute; left: 0; right: 0; bottom: 19cqw; text-align: center; font-size: 8.4cqw; font-weight: 800; letter-spacing: .16em; padding-left: .16em; color: var(--shade); }
/* a hairline ring above the number, like the stub of a ticket */
/* a little star on a ribbon above the number, like the stub of a ticket */
.f7c.k-num .f7-in::before { content: ''; position: absolute; left: 50%; top: 15.5cqw; width: 34cqw; height: 1cqw; transform: translateX(-50%); border-radius: 1cqw; background: linear-gradient(90deg, transparent, var(--ink) 18% 36%, transparent 36% 64%, var(--ink) 64% 82%, transparent); opacity: .8; }
.f7c.k-num .f7-in::after { content: ''; position: absolute; left: 50%; top: 12cqw; width: 8cqw; height: 8cqw; transform: translateX(-50%); background: var(--ink); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* score modifiers: amber tickets with a sunburst */
.f7c.k-mod { --paper: #fbb945; --paper2: #ea861a; --rule: #fff1d2; --ink: #fff3d6; --ink2: #ffd27a; --shade: #6e2f02; }
.f7c.k-mod .f7-burst { position: absolute; left: 50%; top: 47%; width: 84cqw; height: 84cqw; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(rgba(255,244,214,.34) 0 10deg, transparent 10deg 20deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
.f7c .f7-big.mod { font-size: 44cqw; letter-spacing: -.05em; color: #fff8ea; -webkit-text-stroke: 1.3cqw #6e2f02; text-shadow: 1.6cqw 1.9cqw 0 #6e2f02; }
.f7c.k-mod.times .f7-big.mod { font-size: 48cqw; }
.f7c.k-mod .f7-word { color: #5a2400; bottom: 22cqw; font-size: 9cqw; }
.f7c .f7-tiny { position: absolute; left: 0; right: 0; bottom: 14cqw; text-align: center; font-size: 5.6cqw; font-weight: 800; letter-spacing: .14em; color: rgba(90,36,0,.7); }

/* action cards */
.f7c.k-act .f7-art { position: absolute; left: 50%; top: 36%; width: 58cqw; height: 58cqw; transform: translate(-50%, -50%); }
.f7c.k-act .f7-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.f7c.k-act .f7-act { position: absolute; left: 0; right: 0; bottom: 13cqw; display: flex; flex-direction: column; align-items: center; line-height: .92; }
.f7c.k-act .f7-act b { font-family: "Rockwell Extra Bold", Rockwell, "Roboto Slab", Georgia, serif; font-weight: 900; font-size: 15cqw; letter-spacing: .01em; }
.f7c.a-freeze { --paper: #e2f5fd; --paper2: #8fcfee; --rule: #ffffff; }
.f7c.a-freeze .f7-art { color: #1d5a8c; filter: drop-shadow(0 0 2cqw rgba(255,255,255,.9)); }
.f7c.a-freeze .f7-act b { color: #14406a; text-shadow: .9cqw 1cqw 0 #fff; font-size: 17cqw; }
.f7c.a-flip3 { --paper: #ffe577; --paper2: #f4b40a; --rule: #fff8d9; }
.f7c.a-flip3 .f7-act b { color: #7a2a0a; text-shadow: .9cqw 1cqw 0 #fff1b8; }
.f7c.a-chance { --paper: #f4645b; --paper2: #c22727; --rule: #ffd7c4; }
.f7c.a-chance .f7-act b { color: #fff6e6; -webkit-text-stroke: .7cqw #5a1010; paint-order: stroke fill; text-shadow: .9cqw 1cqw 0 #5a1010; font-size: 13.5cqw; }

/* the back: teal with the box's rays and a cream banner */
.f7c.k-back { --paper: #13a0b0; --paper2: #06505f; --rule: #f4e5c4; }
.f7c .f7-rays { position: absolute; inset: 0; background: repeating-conic-gradient(from -90deg at 50% 112%, rgba(255,214,90,.5) 0 7deg, transparent 7deg 14deg, rgba(240,104,42,.42) 14deg 21deg, transparent 21deg 28deg, rgba(232,80,111,.38) 28deg 35deg, transparent 35deg 42deg); -webkit-mask: linear-gradient(to top, #000 20%, transparent 95%); mask: linear-gradient(to top, #000 20%, transparent 95%); }
.f7c .f7-mark { position: absolute; left: 7cqw; right: 7cqw; top: 50%; transform: translateY(-50%) rotate(-8deg); background: #fbf1d9; border-radius: 3cqw; padding: 3cqw 0 4cqw; box-shadow: 0 1.5cqw 0 #6e2f02, 0 3cqw 6cqw rgba(0,0,0,.3); display: flex; flex-direction: column; align-items: center; line-height: .9; }
.f7c .f7-mark small { font-size: 8cqw; line-height: 1; font-weight: 900; letter-spacing: .3em; padding-left: .3em; margin-bottom: 2cqw; color: #0b6b7a; }
.f7c .f7-mark b { font-family: "Rockwell Extra Bold", Rockwell, "Roboto Slab", Georgia, serif; font-weight: 900; font-size: 22cqw; color: #f0682a; -webkit-text-stroke: .8cqw #4a1c04; paint-order: stroke fill; text-shadow: 1cqw 1.2cqw 0 #4a1c04; letter-spacing: -.02em; }
.f7c .f7-mark b i { font-style: normal; color: #ffd23f; margin-left: 1cqw; }
.f7c .f7-mark.st b { font-size: 15cqw; }
.f7c .f7-mark.st b + b { font-size: 10cqw; color: #0b6b7a; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: .08em; margin-top: 1cqw; }

/* states */
.f7c.dim { filter: saturate(.4) brightness(.85) drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.f7c.bad .f7-in { box-shadow: inset 0 0 0 2.6cqw #e0353f; }
.f7c.bad { filter: drop-shadow(0 0 calc(var(--cw, 100px) * .08) rgba(224,53,63,.9)); }

/* the wordmark */
.f7-logo { display: flex; flex-direction: column; align-items: center; line-height: .86; transform: rotate(-5deg); }
.f7-logo small { font-size: 17px; font-weight: 900; letter-spacing: .34em; padding: 3px 6px 3px calc(6px + .34em); margin-bottom: 4px; color: #fff8ea; background: #0b7f8e; border-radius: 6px; box-shadow: 2px 3px 0 #3d1504; transform: rotate(3deg); }
.f7-logo b { font-family: "Rockwell Extra Bold", Rockwell, "Roboto Slab", Georgia, serif; font-weight: 900; font-size: 74px; letter-spacing: -.02em; color: #f0682a; -webkit-text-stroke: 3px #3d1504; paint-order: stroke fill; text-shadow: 4px 5px 0 #3d1504; }
.f7-logo b i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 1.05em; height: 1.05em; margin-left: .12em; border-radius: 50%; color: #3d1504; -webkit-text-stroke: 0; text-shadow: none; font-size: .82em; background: radial-gradient(circle, #ffe066 0 52%, transparent 53%), repeating-conic-gradient(#ffd23f 0 12deg, #f0a01a 12deg 24deg); box-shadow: 0 0 0 3px #3d1504, 3px 4px 0 3px #3d1504; vertical-align: middle; }
.f7-logo.st b { font-size: 50px; }
.f7-logo.st b + b { font-size: 34px; color: #13a3b4; text-shadow: 3px 4px 0 #3d1504; }

/* help text */
.f7-explain { background: var(--fill, rgba(120,120,128,.14)); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; color: var(--text); }
.f7-explain .f7-xkind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--label-2); }
.f7-explain p { margin: 5px 0 0; }

/* The table: midnight teal with the box's rays (dark); a whitewashed plank table in daylight (light). */
.tbl-flip7 {
  --tbl-edge: #052329; --tbl-rim: #1f8794; --tbl-glow: rgba(255,214,140,.08);
  background:
    repeating-conic-gradient(from 0deg at 50% 44%, rgba(255,255,255,.03) 0 5deg, transparent 5deg 10deg),
    radial-gradient(ellipse 52% 60% at 50% 44%, rgba(30,170,185,.26), transparent 72%),
    radial-gradient(ellipse 120% 70% at 50% 120%, rgba(240,104,42,.12), transparent 60%),
    linear-gradient(180deg, #0c3f4a 0%, #08313b 60%, #06262f 100%);
}
[data-theme="light"] .tbl-flip7 {
  --tbl-edge: #fffaf0; --tbl-rim: #d8c49c; --tbl-glow: rgba(255,255,255,.35);
  background:
    repeating-conic-gradient(from 0deg at 50% 44%, rgba(19,163,180,.045) 0 5deg, rgba(240,104,42,.03) 5deg 10deg),
    radial-gradient(ellipse 50% 58% at 50% 44%, rgba(255,251,240,.9), transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 238px, rgba(128,96,52,.13) 238px 240px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 3px, transparent 3px 11px, rgba(150,110,60,.05) 11px 13px, transparent 13px 19px),
    linear-gradient(180deg, #f2e9d7 0%, #e9dcc3 100%);
}