/* Not Flip 7 on the phone. Dark rules first, then the light theme (the default) repaints
   what they hard-code. The peek and sheets come from the core (.ndp-*); the rest is .f7p-*. */
.f7p { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; }
.f7p.docked { padding-bottom: 150px; }

/* whose turn */
.f7p-bar { display: flex; align-items: center; gap: 10px; border-radius: 18px; padding: 12px 14px; min-height: 64px; }
.f7p-bt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.f7p-bar.me { background: linear-gradient(120deg, #ffd60a, #ffa400); color: #1b1b1b; box-shadow: 0 10px 30px rgba(255,170,0,.45); animation: f7p-throb 1.6s ease-in-out .4s infinite; }
.f7p-bar.me.fresh { animation: f7p-pop .35s cubic-bezier(.2,1.4,.4,1) both, f7p-throb 1.6s ease-in-out .4s infinite; }
.f7p-bar.me b, .f7p-bar.flip b { font-size: 30px; font-weight: 900; font-style: italic; letter-spacing: -.01em; line-height: 1; }
.f7p-bar.me span { font-size: 15px; font-weight: 700; }
.f7p-bar.me .tclock { width: 60px; height: 60px; }
.f7p-bar.me .tclock b { font-size: 24px; font-style: normal; }
.f7p-bar.me:has(.tclock.urgent) { background: linear-gradient(120deg, #ff7a3d, #ff3b30); color: #fff; }
.f7p-bar.me .tclock.urgent .fg { stroke: #fff; }
.f7p-bar.me .tclock.urgent .bg { stroke: rgba(255,255,255,.25); }
.f7p-bar.flip { background: #13a3b4; color: #fff; box-shadow: 0 10px 30px rgba(19,163,180,.45); }
.f7p-bar.flip span { font-size: 15px; font-weight: 700; opacity: .9; }
.f7p-drum .f7c { animation: f7p-wob .25s ease-in-out infinite alternate; }
@keyframes f7p-wob { from { transform: rotate(-6deg) translateY(1px); } to { transform: rotate(6deg) translateY(-2px); } }
.f7p-bar.idle { background: rgba(0,0,0,.3); color: var(--label-2); }
.f7p-bar.idle b { color: var(--text); }
.f7p-bar.idle .f7p-bt { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 16px; }
.f7p-bar.idle .tclock { width: 46px; height: 46px; }
.f7p-bar.idle .tclock .bg { stroke: rgba(255,255,255,.14); }
.f7p-bar.idle .tclock .fg { stroke: #ffb800; }
.f7p-bar.idle .tclock.urgent .fg { stroke: #ff453a; }
.f7p-bar.idle .tclock b { font-size: 17px; color: var(--text); }
.f7p-chip { font-size: 12px; font-weight: 900; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.f7p-chip.bust { background: #e0353f; color: #fff; } .f7p-chip.stayed { background: #2c9c4a; color: #fff; } .f7p-chip.frozen { background: #8fd0ee; color: #0e3456; }
@keyframes f7p-pop { from { transform: scale(.86); } }
@keyframes f7p-throb { 50% { box-shadow: 0 10px 40px rgba(255,170,0,.75); transform: scale(1.012); } }
body.f7p-myturn::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 15; box-shadow: inset 0 0 0 5px #ffc400, inset 0 0 50px rgba(255,196,0,.45); animation: f7p-frame 1.6s ease-in-out infinite; }
@keyframes f7p-frame { 50% { box-shadow: inset 0 0 0 7px #ffc400, inset 0 0 80px rgba(255,196,0,.6); } }
body.f7p-flipping::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 15; box-shadow: inset 0 0 0 4px #13a3b4, inset 0 0 60px rgba(19,163,180,.5); animation: f7p-frame-t .3s ease-in-out infinite alternate; }
@keyframes f7p-frame-t { to { box-shadow: inset 0 0 0 7px #13a3b4, inset 0 0 90px rgba(19,163,180,.7); } }

/* my row */
.f7p-me { position: relative; background: rgba(0,0,0,.26); border-radius: 22px; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.f7p-mehead { display: flex; align-items: center; justify-content: space-between; }
.f7p-pips { display: flex; gap: 6px; }
.f7p-pips i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.f7p-pips i[style] { background: var(--pc); box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 0 8px color-mix(in srgb, var(--pc) 60%, transparent); }
.f7p-tot { font-size: 15px; font-weight: 700; color: var(--label-2); font-variant-numeric: tabular-nums; }
.f7p-tot b { font-size: 24px; font-weight: 900; color: var(--text); margin-right: 2px; }
.f7p-row { position: relative; height: calc(var(--cw) * 1.4 + 6px); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.f7p-row .f7c { position: absolute; top: 4px; transition: transform .15s; cursor: pointer; }
.f7p-me .f7c.peeking { transform: translateY(-14px); z-index: 60 !important; }
/* the big card you are reading floats over the top half of the screen */
.f7p-peek.ndp-peek { position: fixed; top: calc(var(--safe-top) + 64px); bottom: auto; z-index: 50; }
.f7p-none { height: 100%; display: flex; align-items: center; justify-content: center; border: 3px dashed rgba(255,255,255,.18); border-radius: 14px; color: var(--label-2); font-weight: 700; }
.f7p-extras { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.f7p-extras .f7c { cursor: pointer; }
.f7p-me .f7c.f7-new { animation: f7p-in .55s .15s cubic-bezier(.2,1.2,.35,1) both; }
@keyframes f7p-in { from { transform: translateY(-44vh) rotateY(90deg) scale(.6); opacity: 0; } 55% { opacity: 1; } }
.f7p-stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-9deg); z-index: 70; font-family: "Rockwell Extra Bold", Rockwell, "Roboto Slab", Georgia, serif; font-weight: 900; font-size: 44px; letter-spacing: .08em; padding: 0 16px; border: 5px solid currentColor; border-radius: 12px; pointer-events: none; background: rgba(0,0,0,.25); }
.f7p-stamp.fresh { animation: f7p-stampin .4s .5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes f7p-stampin { from { transform: translate(-50%, -50%) rotate(-9deg) scale(2.2); opacity: 0; } }
.f7p-stamp.bust { color: #ff4d55; } .f7p-stamp.frozen { color: #9fdcff; } .f7p-stamp.seven { color: #ffd23f; text-shadow: 3px 3px 0 #3d1504; }
.f7p-me.s-busted .f7c:not(.bad) { filter: grayscale(.85) brightness(.75); }
.f7p-me.s-frozen .f7p-row::after { content: ''; position: absolute; inset: -2px -4px; border-radius: 12px; z-index: 65; pointer-events: none; background: linear-gradient(180deg, rgba(200,236,255,.4), rgba(140,200,240,.22)); box-shadow: inset 0 0 24px rgba(220,245,255,.7); }
.f7p-bank { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline; }
.f7p-bank span { font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--label-2); text-transform: uppercase; }
.f7p-bank b { grid-row: span 2; font-size: 46px; font-weight: 900; line-height: 1; color: #ffd23f; font-variant-numeric: tabular-nums; align-self: center; }
.f7p-bank b.stayed { color: #4cd471; } .f7p-bank b.frozen { color: #8fd0ee; } .f7p-bank b.busted { color: #ff6b6b; text-decoration: line-through; }
.f7p-bank small { font-size: 14px; color: var(--label-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.f7p-bank small i { font-style: normal; font-weight: 900; color: #fff; padding: 0 5px; border-radius: 5px; background: #ea861a; }
.f7p-bank small i.x { background: #b5560c; }
.f7p-bank small i.b { background: linear-gradient(90deg, #f0682a, #e8506f, #7a4fd6); }
.f7p-risk { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 2px; }
.f7p-risk span { font-size: 12px; font-weight: 900; letter-spacing: .14em; color: var(--label-2); }
.f7p-risk i { height: 12px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.f7p-risk u { display: block; height: 100%; border-radius: 999px; transition: width .4s; }
.f7p-risk b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.f7p-risk small { grid-column: 2 / 4; font-size: 12px; color: var(--label-2); }
.f7p-risk.h1 u { background: #30d158; } .f7p-risk.h1 b { color: #4cd471; }
.f7p-risk.h2 u { background: #ffd23f; } .f7p-risk.h2 b { color: #ffd23f; }
.f7p-risk.h3 u { background: #ff9f0a; } .f7p-risk.h3 b { color: #ff9f0a; }
.f7p-risk.h4 u { background: #ff453a; } .f7p-risk.h4 b { color: #ff453a; }

/* everyone else */
.f7p-opps { display: flex; flex-direction: column; gap: 6px; }
.f7p-opp { display: grid; grid-template-columns: 28px minmax(0, 72px) minmax(0, 1fr) auto 38px; align-items: center; gap: 8px; background: rgba(0,0,0,.22); border-radius: 14px; padding: 6px 10px 6px 6px; border: 2px solid transparent; font-size: 14px; }
.f7p-opp.on { border-color: #ffb800; box-shadow: 0 0 12px rgba(255,184,0,.45); }
.f7p-opp .nm { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f7p-nums { display: flex; gap: 3px; flex-wrap: nowrap; overflow: hidden; }
.f7p-nums i { font-style: normal; min-width: 22px; height: 26px; padding: 0 3px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #fff; background: var(--pc); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.18); font-family: Rockwell, "Roboto Slab", Georgia, serif; }
.f7p-nums i.m { background: #ea861a; }
.f7p-nums i.sc { background: #c22727; font-family: inherit; font-size: 10px; }
.f7p-opp em { font-style: normal; font-weight: 900; font-size: 15px; color: #ffd23f; text-align: right; font-variant-numeric: tabular-nums; }
.f7p-opp em.bust { color: #ff6b6b; font-size: 12px; letter-spacing: .06em; } .f7p-opp em.stayed { color: #4cd471; } .f7p-opp em.frozen { color: #8fd0ee; }
.f7p-opp .tt { text-align: right; font-weight: 700; color: var(--label-2); font-variant-numeric: tabular-nums; }
.f7p-opp.s-busted .f7p-nums { opacity: .45; }
.f7p-last { font-size: 13px; color: var(--label-2); text-align: center; min-height: 18px; }

/* the two big buttons */
.f7p-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-width: 520px; margin: 0 auto; padding: 12px 12px calc(var(--safe-bottom) + 12px); display: flex; gap: 10px; background: linear-gradient(to top, rgba(6,30,36,.95) 72%, rgba(6,30,36,0)); }
.f7p-dock button { flex: 1; min-height: 112px; border-radius: 22px; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: inherit; transition: transform .08s; }
.f7p-dock button b { font-family: "Rockwell Extra Bold", Rockwell, "Roboto Slab", Georgia, serif; font-size: 46px; font-weight: 900; letter-spacing: .02em; line-height: 1; }
.f7p-dock button small { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.f7p-dock button:active { transform: translateY(3px) scale(.98); }
.f7p-hit { background: linear-gradient(170deg, #ff8a3d, #e3471a); color: #fff8ea; box-shadow: 0 6px 0 #8f2a08, 0 14px 30px rgba(227,71,26,.45); }
.f7p-hit b { text-shadow: 2px 3px 0 #8f2a08; }
.f7p-stay { background: linear-gradient(170deg, #45c96a, #1f8f3d); color: #f2fff4; box-shadow: 0 6px 0 #0f5a23, 0 14px 30px rgba(31,143,61,.45); }
.f7p-stay b { text-shadow: 2px 3px 0 #0f5a23; }
.f7p-stay:disabled { opacity: .35; }
.f7p-dock.sent button { opacity: .5; pointer-events: none; }

/* sheets */
.ndp-ov.f7p-still, .ndp-ov.f7p-still .ndp-bigcard { animation: none; }
.f7p-sheettop { display: flex; gap: 12px; align-items: center; }
.f7p-sheettop .h2 { font-size: 20px; font-weight: 800; }
.f7p-sheettop .p { font-size: 14px; color: var(--label-2); margin-top: 4px; line-height: 1.35; }
.f7p-pickclock { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--label-2); }
.f7p-pickclock .tclock.bar { flex: 1; }
.ndp-sheet .btn.who.f7p-target { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; text-align: left; min-height: 64px; align-items: center; }
.ndp-sheet .btn.f7p-target .avatar { grid-row: span 2; }
.ndp-sheet .btn.f7p-target span { font-size: 19px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndp-sheet .btn.f7p-target small { margin: 0; font-size: 13px; color: var(--label-2); font-weight: 600; }
.f7p-big { --cw: min(52vw, 210px); }

/* between rounds */
.f7p-round { display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; padding-top: 8px; }
.f7p-rbig { font-family: "Rockwell Extra Bold", Rockwell, "Roboto Slab", Georgia, serif; font-size: 72px; font-weight: 900; line-height: 1; color: #ffd23f; text-shadow: 4px 5px 0 rgba(0,0,0,.35); animation: f7p-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.f7p-rbig.busted { color: #ff6b6b; }
.f7p-rsub { font-size: 16px; font-weight: 700; color: var(--label-2); }
.f7p-rcards { display: flex; justify-content: center; padding: 4px 0; }
.f7p-rcards .f7c + .f7c { margin-left: calc(var(--cw) * -0.22); }
.f7p-rcards .f7c:nth-child(odd) { transform: rotate(-3deg); } .f7p-rcards .f7c:nth-child(even) { transform: rotate(3deg) translateY(3px); }
.f7p-rtot { font-size: 18px; }
.f7p-rtot b { font-size: 26px; }
.f7p-tie { background: #7a4fd6; color: #fff; font-weight: 800; border-radius: 14px; padding: 10px; }
.f7p-stand { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.f7p-st { display: grid; grid-template-columns: 18px 28px minmax(0, 90px) 1fr 40px; align-items: center; gap: 8px; background: rgba(0,0,0,.22); border-radius: 12px; padding: 6px 10px; font-size: 15px; }
.f7p-st.me { box-shadow: inset 0 0 0 2px #ffd23f; }
.f7p-st > span:first-child { font-weight: 900; color: var(--label-2); }
.f7p-st b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f7p-st i { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--c) var(--w), rgba(255,255,255,.1) var(--w)); }
.f7p-st em { font-style: normal; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.f7p-end .f7-logo b { font-size: 60px; }

/* big moments */
.f7p-moment { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; background: radial-gradient(circle, rgba(0,0,0,.3), rgba(0,0,0,.7) 75%); animation: f7p-mo 2.1s ease both; }
.f7p-moment.k-seven { animation-duration: 2.8s; background: radial-gradient(circle, rgba(255,210,63,.45), rgba(0,0,0,.6) 75%), repeating-conic-gradient(rgba(255,210,63,.18) 0 8deg, transparent 8deg 16deg); }
.f7p-moment.k-bust { background: radial-gradient(circle, rgba(200,20,30,.55), rgba(40,0,0,.75) 75%); }
.f7p-moment.k-freeze { background: radial-gradient(circle, rgba(140,210,245,.55), rgba(10,40,70,.75) 75%); }
.f7p-moment.k-flip3 { background: radial-gradient(circle, rgba(255,210,63,.5), rgba(40,20,0,.7) 75%); }
.f7p-moment.k-saved { background: radial-gradient(circle, rgba(240,80,80,.5), rgba(40,0,0,.7) 75%); }
.f7p-moment.k-tie { background: radial-gradient(circle, rgba(122,79,214,.55), rgba(10,0,30,.7) 75%); }
@keyframes f7p-mo { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.f7p-moment .big { font-family: "Rockwell Extra Bold", Rockwell, "Roboto Slab", Georgia, serif; font-size: 64px; font-weight: 900; line-height: .95; text-align: center; color: #fff; -webkit-text-stroke: 3px #2a0a06; paint-order: stroke fill; text-shadow: 4px 5px 0 #2a0a06; transform: rotate(-6deg); animation: f7p-slam .5s cubic-bezier(.2,1.5,.4,1) both; }
.f7p-moment.k-bust .big { color: #ff4d55; font-size: 92px; }
.f7p-moment.k-seven .big { color: #ffd23f; font-size: 88px; }
.f7p-moment.k-freeze .big { color: #e2f5fd; -webkit-text-stroke-color: #14406a; text-shadow: 4px 5px 0 #14406a; }
.f7p-moment.k-flip3 .big { color: #ffd23f; font-size: 54px; }
.f7p-moment.k-saved .big { font-size: 44px; }
@keyframes f7p-slam { from { transform: rotate(-6deg) scale(3); opacity: 0; } }
.f7p-mcard { transform: rotate(-8deg); animation: f7p-slam .45s cubic-bezier(.2,1.5,.4,1) both; }
.f7p-moment .who { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.72); color: #fff; font-size: 17px; font-weight: 800; padding: 8px 16px 8px 8px; border-radius: 999px; max-width: 92vw; }
.f7p-moment .avatar { width: 38px; height: 38px; font-size: 17px; }

/* ---- light theme ---- */
[data-theme="light"] body.felt::before { background: transparent; }
[data-theme="light"] .f7p-bar.idle, [data-theme="light"] .f7p-me, [data-theme="light"] .f7p-opp, [data-theme="light"] .f7p-st { background: rgba(255,255,255,.78); box-shadow: 0 4px 14px rgba(80,60,30,.1); }
[data-theme="light"] .f7p-bar.idle .tclock .bg { stroke: rgba(0,0,0,.1); }
[data-theme="light"] .f7p-opp.on { border-color: #ffb800; box-shadow: 0 0 0 2px rgba(255,184,0,.3), 0 4px 14px rgba(255,170,0,.25); }
[data-theme="light"] .f7p-pips i { box-shadow: inset 0 0 0 2px rgba(90,60,20,.2); }
[data-theme="light"] .f7p-pips i[style] { box-shadow: 0 0 0 2px #fff; }
[data-theme="light"] .f7p-none { border-color: rgba(90,60,20,.2); }
[data-theme="light"] .f7p-bank b { color: #c77d00; } [data-theme="light"] .f7p-bank b.stayed { color: #1f8a3c; } [data-theme="light"] .f7p-bank b.frozen { color: #2a7fb8; } [data-theme="light"] .f7p-bank b.busted { color: #d42a35; }
[data-theme="light"] .f7p-risk i { background: rgba(90,60,20,.1); }
[data-theme="light"] .f7p-risk.h1 b { color: #1f8a3c; } [data-theme="light"] .f7p-risk.h2 b { color: #b98a00; } [data-theme="light"] .f7p-risk.h3 b { color: #d97706; } [data-theme="light"] .f7p-risk.h4 b { color: #d42a35; }
[data-theme="light"] .f7p-opp em { color: #c77d00; } [data-theme="light"] .f7p-opp em.bust { color: #d42a35; } [data-theme="light"] .f7p-opp em.stayed { color: #1f8a3c; } [data-theme="light"] .f7p-opp em.frozen { color: #2a7fb8; }
[data-theme="light"] .f7p-stamp { background: rgba(255,255,255,.6); }
[data-theme="light"] .f7p-stamp.bust { color: #d42a35; } [data-theme="light"] .f7p-stamp.frozen { color: #2a7fb8; }
[data-theme="light"] .f7p-me.s-frozen .f7p-row::after { background: linear-gradient(180deg, rgba(190,230,252,.55), rgba(150,205,240,.35)); box-shadow: inset 0 0 0 2px rgba(120,190,235,.6), inset 0 0 24px rgba(255,255,255,.7); }
[data-theme="light"] .f7p-dock { background: linear-gradient(to top, rgba(242,233,215,.97) 72%, rgba(242,233,215,0)); }
[data-theme="light"] .f7p-rbig { color: #f0682a; text-shadow: 3px 4px 0 #3d1504; }
[data-theme="light"] .f7p-rbig.busted { color: #d42a35; }
[data-theme="light"] .f7p-st i { background: linear-gradient(90deg, var(--c) var(--w), rgba(90,60,20,.1) var(--w)); }