/* Not Exploding Kittens on the phone. Dark rules first, then the light theme (the
   default) repaints what they hard-code. The fan, peek and sheets come from the core
   (.ndp-*); everything game-specific is .ekp-*. */
.ekp { display: flex; flex-direction: column; gap: 10px; padding-bottom: 330px; }

/* whose turn */
.ekp-turnbar { display: flex; align-items: center; gap: 10px; border-radius: 18px; padding: 12px 14px; font-size: 16px; }
.ekp-turnbar.me { flex-direction: column; align-items: flex-start; gap: 3px; background: linear-gradient(120deg, #ffd60a, #ffa400); color: #1b1b1b; box-shadow: 0 10px 30px rgba(255,170,0,.45); animation: ekp-throb 1.6s ease-in-out .4s infinite; }
.ekp-turnbar.me.fresh { animation: ekp-pop .35s cubic-bezier(.2,1.4,.4,1) both, ekp-throb 1.6s ease-in-out .4s infinite; }
.ekp-turnbar.me b { font-size: 30px; font-weight: 900; font-style: italic; letter-spacing: -.01em; line-height: 1; }
.ekp-turnbar.me span { font-size: 15px; font-weight: 700; }
.ekp-turnbar.me.danger { background: linear-gradient(120deg, #ff5a1f, #e23b3b); color: #fff; box-shadow: 0 10px 30px rgba(226,59,59,.5); }
.ekp-turnbar.dead { flex-direction: column; align-items: flex-start; gap: 2px; background: #1f1d24; color: #ffd23f; }
.ekp-turnbar.dead b { font-size: 22px; font-weight: 900; }
.ekp-turnbar.dead span { color: rgba(255,255,255,.7); font-size: 14px; }
.ekp-owe { display: inline-flex; align-items: center; gap: 8px; font-size: 17px !important; font-weight: 900 !important; color: #8a1c00; }
.ekp-pips { display: inline-flex; gap: 4px; }
.ekp-pips i { width: 14px; height: 14px; border-radius: 50%; background: #1f1d24; box-shadow: 0 0 0 2px #fff; display: inline-block; }
.ekp-turnbar.idle { background: rgba(0,0,0,.28); color: var(--label-2); }
.ekp-turnbar.idle b { color: var(--text); }
.ekp-ochip { margin-left: auto; font-size: 13px; font-weight: 900; padding: 3px 10px; border-radius: 999px; background: #ff5a1f; color: #fff; white-space: nowrap; }
@keyframes ekp-pop { from { transform: scale(.8); opacity: 0; } }
@keyframes ekp-throb { 50% { box-shadow: 0 10px 40px rgba(255,170,0,.75); transform: scale(1.015); } }
body.ekp-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: ekp-frame 1.6s ease-in-out infinite; }
@keyframes ekp-frame { 50% { box-shadow: inset 0 0 0 7px #ffc400, inset 0 0 80px rgba(255,196,0,.6); } }
body.ekp-nopeable:not(.ekp-myturn)::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 15; box-shadow: inset 0 0 0 4px #e23b3b, inset 0 0 50px rgba(226,59,59,.4); animation: ekp-frame-r .8s ease-in-out infinite; }
@keyframes ekp-frame-r { 50% { box-shadow: inset 0 0 0 6px #e23b3b, inset 0 0 70px rgba(226,59,59,.55); } }
.ekp.waiting .ndp-fan { opacity: .62; filter: saturate(.75); transition: opacity .3s; }
.ekp.waiting .ndp-fan .kcard.peeking, .ekp.waiting .ndp-fan .kcard.lit { opacity: 1; }
.ekp.gone .ekp-table, .ekp.gone .ekp-opps { opacity: .8; }

/* the other players */
.ekp-opps { display: flex; flex-wrap: wrap; gap: 6px; }
.ekp-opp { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.22); border-radius: 999px; padding: 4px 10px 4px 4px; font-size: 14px; font-weight: 700; border: 2px solid transparent; }
.ekp-opp.turn { border-color: #ffb800; box-shadow: 0 0 12px rgba(255,184,0,.5); }
.ekp-opp.dead { opacity: .5; text-decoration: line-through; }
.ekp-opp .ct { background: rgba(255,255,255,.14); border-radius: 999px; padding: 0 8px; font-variant-numeric: tabular-nums; text-decoration: none; }

/* the table strip */
.ekp-table { display: flex; gap: 12px; align-items: center; background: rgba(0,0,0,.22); border-radius: 18px; padding: 12px; }
.ekp-pile { position: relative; flex: none; }
.ekp-pile .kcard { box-shadow: 0 0 0 1px #1b1b1b, 3px 3px 0 #1b1b1b, 6px 6px 0 #3a2a2a, 0 8px 18px rgba(0,0,0,.4); }
.ekp-pile.h3 .kcard { animation: ekp-tremble .4s ease-in-out infinite; }
.ekp-pile.h4 .kcard { animation: ekp-tremble .18s ease-in-out infinite; }
@keyframes ekp-tremble { 25% { rotate: -2deg; } 75% { rotate: 2deg; } }
.ekp-pcount { position: absolute; right: -10px; top: -10px; z-index: 3; min-width: 32px; padding: 2px 7px; border-radius: 999px; background: #fffaf0; color: #1b1b1b; border: 3px solid #1b1b1b; font-weight: 900; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }
.ekp-disc { flex: none; position: relative; }
.ekp-disc .kcard.ekp-land { animation: ekp-land .42s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes ekp-land { from { translate: 0 -80px; scale: 1.35; rotate: -12deg; opacity: 0; } }
.ekp-disc .kcard.ekp-thud { animation: ekp-thud .25s ease-out both; }
@keyframes ekp-thud { 40% { scale: 1.08; } }
.ekp-empty { width: 60px; aspect-ratio: 63 / 88; border-radius: 8px; border: 3px dashed rgba(255,255,255,.2); }
.ekp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ekp-odds { font-size: 14px; font-weight: 700; color: var(--label-2); }
.ekp-odds b { font-size: 26px; font-weight: 900; color: #30d158; margin-right: 2px; }
.ekp-odds.h2 b { color: #ffd60a; } .ekp-odds.h3 b { color: #ff9f0a; } .ekp-odds.h4 b { color: #ff453a; }
.ekp-small { font-size: 13px; color: var(--muted); }
.ekp-last { font-size: 13px; color: var(--label-2); line-height: 1.3; }

/* what you saw with See the Future */
.ekp-future { display: flex; align-items: center; gap: 10px; border: 2px solid #e64ca0; background: rgba(230,76,160,.14); border-radius: 16px; padding: 8px 12px; color: var(--text); text-align: left; cursor: pointer; }
.ekp-future > span { font-size: 11px; font-weight: 900; letter-spacing: .12em; color: #ff8ac6; flex: 1; }
.ekp-fcards { display: flex; gap: 6px; }
.ekp-fc { position: relative; }
.ekp-fc i { position: absolute; left: -5px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: #e64ca0; color: #fff; font-style: normal; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid #1b1b1b; z-index: 2; }
.ekp-fbig { display: flex; gap: 8px; justify-content: center; }
.ekp-fslot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ekp-fslot b { font-size: 12px; letter-spacing: .14em; font-weight: 900; color: var(--label-2); }
.ekp-fslot:first-child b { color: #e64ca0; }

/* the Nope window */
.ekp-nopebar { display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 10px 10px 10px 14px; background: rgba(226,59,59,.16); border: 2px solid #e23b3b; }
.ekp-nopebar.fresh { animation: ekp-pop .3s cubic-bezier(.2,1.4,.4,1) both; }
.ekp-nopebar.canceled { background: rgba(48,209,88,.14); border-color: #30d158; }
.ekp-ntext { flex: 1; min-width: 0; }
.ekp-ntext b { display: block; font-size: 15px; line-height: 1.25; }
.ekp-ntext span { display: block; font-size: 13px; color: var(--label-2); margin-top: 2px; }
.ekp-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ekp-ring circle { fill: none; stroke-width: 7; }
.ekp-ring .bg { stroke: rgba(255,255,255,.18); }
.ekp-ring .fg { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; }
.ekp-nopebtn { position: relative; flex: none; width: 104px; height: 104px; border-radius: 50%; border: 4px solid #1b1b1b; background: #e23b3b; color: #fff; box-shadow: 4px 5px 0 #1b1b1b; cursor: pointer; animation: ekp-nbtn .7s ease-in-out infinite alternate; }
.ekp-nopebtn b { position: relative; font-size: 22px; font-weight: 900; letter-spacing: .02em; text-shadow: 2px 2px 0 #1b1b1b; }
.ekp-nopebar.canceled .ekp-nopebtn { background: #1f9e4a; }
.ekp-nopebtn:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 #1b1b1b; }
@keyframes ekp-nbtn { to { scale: 1.06; } }
.ekp-nring { position: relative; flex: none; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.ekp-nring .fg { stroke: #e23b3b; }
.ekp-nring b { position: relative; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }

/* the dock and the hand */
body.g-notkittens .ndp-dock { background: linear-gradient(to top, rgba(26,16,14,.95) 70%, rgba(26,16,14,0)); }
.ekp-acts { display: flex; gap: 8px; margin-bottom: 6px; }
.btn.ekp-draw { min-height: 58px; font-size: 20px; font-weight: 900; letter-spacing: .02em; background: #1f1d24; color: #fff; border: 3px solid #ffb800; box-shadow: 0 0 18px rgba(255,184,0,.4); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; padding: 6px 12px; }
.btn.ekp-draw small { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #ffd23f; text-transform: uppercase; }
.ekp-dock .ndp-fan { height: calc(var(--cw) * 88 / 63 + 34px); }
.ndp-fan .kcard { position: absolute; top: 22px; transform-origin: 50% 100%; transition: transform .18s ease, filter .2s, opacity .2s; cursor: pointer; }
.ndp-fan .kcard.peeking { translate: 0 -30px; z-index: 60 !important; filter: none; opacity: 1; }
.ndp-fan .kcard.lit { box-shadow: 0 0 0 calc(var(--cw) * .014) #1b1b1b, 0 0 0 4px #ffd23f, 0 0 18px rgba(255,210,63,.6), 0 6px 16px rgba(0,0,0,.35); }
.ndp-fan .kcard.dim { filter: saturate(.35) brightness(.82); }
.ndp-fan .kcard.ekp-in { animation: ekp-in .55s cubic-bezier(.2,1.1,.35,1) both; }
@keyframes ekp-in { from { translate: 0 -52vh; scale: .45; opacity: 0; } 60% { opacity: 1; } }
.ekp-ghost { position: fixed; z-index: 70; pointer-events: none; transform-origin: 0 0; }
.ekp-ghost .kcard { box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.ekp-big { --cw: min(46vw, 196px); }

/* sheets */
.ndp-ov.ekp-still, .ndp-ov.ekp-still .ndp-bigcard { animation: none; }
.ekp-step { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 900; color: #ff7b1c; }
.ekp-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 4px 0; }
.ekp-grid.names { gap: 8px; }
.ekp-gcard { position: relative; cursor: pointer; transition: transform .15s; border-radius: 10px; }
.ekp-gcard.picked { transform: translateY(-8px); }
.ekp-gcard.picked .kcard { box-shadow: 0 0 0 2px #1b1b1b, 0 0 0 6px #ffd23f, 0 10px 24px rgba(0,0,0,.5); }
.ekp-x { position: absolute; right: -6px; top: -6px; background: #1b1b1b; color: #fff; font-size: 12px; font-weight: 900; border-radius: 999px; padding: 2px 7px; }
.ekp-combo-row { display: flex; justify-content: center; gap: 0; padding: 4px 0 2px; }
.ekp-combo-row .kcard + .kcard { margin-left: calc(var(--cw) * -0.3); }
.ekp-combo-row .kcard:nth-child(odd) { transform: rotate(-4deg); }
.ekp-combo-row .kcard:nth-child(even) { transform: rotate(4deg) translateY(4px); }
.btn.ekp-combo { background: rgba(31,158,137,.22); box-shadow: inset 0 0 0 2px #1f9e89; }
.btn.ekp-nopeplay { background: #e23b3b; color: #fff; font-weight: 900; font-size: 20px; }
.btn.ekp-defuse { background: #7cc142; color: #1b1b1b; font-weight: 900; font-size: 24px; min-height: 66px; border: 3px solid #1b1b1b; box-shadow: 4px 5px 0 #1b1b1b; animation: ekp-nbtn .6s ease-in-out infinite alternate; }
.ndp-ov.ekp-redov { background: radial-gradient(circle at 50% 35%, rgba(255,90,31,.55), rgba(40,6,4,.85) 70%); }
.ekp-shake .kcard { animation: ekp-kshake .09s linear infinite alternate; }
@keyframes ekp-kshake { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
.ekp-bury { gap: 12px; }
.ekp-pilebar { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: .12em; color: var(--label-2); padding: 18px 0 6px; }
.ekp-track { position: relative; flex: 1; height: 26px; margin: 0 18px; border-radius: 6px; background: repeating-linear-gradient(90deg, #2a1a1c 0 5px, #4a2e2a 5px 7px); box-shadow: inset 0 0 0 2px #1b1b1b; }
.ekp-kmark { position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); transition: left .12s ease; }
.ekp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; }
.ekp-range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #ff5a1f, #ffd23f 40%, #7cc142); }
.ekp-range::-moz-range-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #ff5a1f, #ffd23f 40%, #7cc142); }
.ekp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px; margin-top: -15px; border-radius: 50%; background: #1f1d24; border: 4px solid #ffb800; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.ekp-range::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: #1f1d24; border: 4px solid #ffb800; }
.ekp-buryl { text-align: center; line-height: 1.35; }
.ekp-buryl b { display: block; font-size: 18px; }
.ekp-buryl span { display: block; font-size: 14px; color: var(--label-2); margin-top: 2px; }
.ekp-buryl i { font-style: normal; font-weight: 800; color: var(--text); }
.ekp-quick { display: flex; gap: 8px; }
.ekp-quick .btn { min-height: 46px; font-size: 15px; }
.ekp-end .ekp-endcard { transform: rotate(-5deg); }

/* moments: every phone feels the big ones */
.ekp-moment { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 50%, transparent), rgba(0,0,0,.6) 75%); animation: ekp-moment 2.3s ease both; }
@keyframes ekp-moment { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.ekp-moment .big { font-size: 88px; font-weight: 900; font-style: italic; line-height: .9; color: #ffd23f; letter-spacing: -.03em; text-align: center; padding: 0 12px; text-shadow: 4px 4px 0 #1b1b1b, -3px -3px 0 #1b1b1b, 3px -3px 0 #1b1b1b, -3px 3px 0 #1b1b1b, 9px 9px 0 #c4161c; transform: rotate(-7deg); animation: ekp-slam .5s cubic-bezier(.2,1.5,.4,1) both; }
.ekp-moment.k-boom { background: radial-gradient(circle, rgba(255,150,40,.75), rgba(120,20,8,.85) 70%); }
.ekp-moment.k-boom .big { font-size: 96px; }
.ekp-moment.k-defuse { background: radial-gradient(circle, rgba(124,193,66,.65), rgba(10,40,10,.75) 75%); }
.ekp-moment.k-defuse .big { font-size: 64px; color: #a3e635; text-shadow: 4px 4px 0 #1b1b1b, -3px -3px 0 #1b1b1b, 3px -3px 0 #1b1b1b, -3px 3px 0 #1b1b1b, 8px 8px 0 #1f6b2a; }
.ekp-moment.k-steal .big { font-size: 64px; color: #fff; text-shadow: 4px 4px 0 #1b1b1b, -3px -3px 0 #1b1b1b, 3px -3px 0 #1b1b1b, -3px 3px 0 #1b1b1b, 8px 8px 0 #1f9e89; }
.ekp-moment.k-nope, .ekp-moment.k-yup { background: radial-gradient(circle, rgba(226,59,59,.45), transparent 70%); }
.ekp-moment.k-yup { background: radial-gradient(circle, rgba(48,209,88,.4), transparent 70%); }
.ekp-moment.k-nope .big, .ekp-moment.k-yup .big { color: #fff; text-shadow: 4px 4px 0 #1b1b1b, -3px -3px 0 #1b1b1b, 3px -3px 0 #1b1b1b, -3px 3px 0 #1b1b1b, 9px 9px 0 #e23b3b; }
.ekp-moment.k-yup .big { text-shadow: 4px 4px 0 #1b1b1b, -3px -3px 0 #1b1b1b, 3px -3px 0 #1b1b1b, -3px 3px 0 #1b1b1b, 9px 9px 0 #1f9e4a; }
.ekp-moment.k-attack { background: radial-gradient(circle, rgba(242,129,29,.6), rgba(60,20,4,.75) 75%); }
.ekp-moment.k-attack .big { font-size: 66px; }
@keyframes ekp-slam { from { transform: rotate(-7deg) scale(3); opacity: 0; } }
.ekp-moment .who { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.75); color: #fff; font-size: 18px; font-weight: 800; padding: 8px 16px 8px 8px; border-radius: 999px; max-width: 90vw; }
.ekp-moment .avatar { width: 40px; height: 40px; font-size: 18px; }
.ekp-mflash { position: absolute; inset: 0; background: #fff; animation: ekp-mflash .45s ease-out both; }
@keyframes ekp-mflash { from { opacity: 1; } to { opacity: 0; } }

/* a private note: what you drew, what you lost */
.ekp-note { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 24px); top: calc(var(--safe-top) + 56px); z-index: 80; display: flex; align-items: center; gap: 10px; background: #1f1d24; color: #fff; border: 2px solid #ffd23f; border-radius: 16px; padding: 8px 14px 8px 8px; font-size: 15px; font-weight: 700; box-shadow: 0 14px 36px rgba(0,0,0,.45); max-width: 92vw; pointer-events: none; animation: ekp-note 3.8s ease both; }
.ekp-ncards { display: flex; gap: 4px; }
@keyframes ekp-note { 0% { opacity: 0; transform: translateY(-20px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* ======== light theme (the default) ======== */
[data-theme="light"] .ekp-turnbar.idle, [data-theme="light"] .ekp-opp, [data-theme="light"] .ekp-table { background: rgba(255,255,255,.82); box-shadow: 0 4px 14px rgba(120,60,20,.08); }
[data-theme="light"] .ekp-opp .ct { background: rgba(0,0,0,.08); }
[data-theme="light"] .ekp-odds b { color: #1f8f3a; }
[data-theme="light"] .ekp-odds.h2 b { color: #b88a00; } [data-theme="light"] .ekp-odds.h3 b { color: #e07000; } [data-theme="light"] .ekp-odds.h4 b { color: #e0352b; }
[data-theme="light"] .ekp-empty { border-color: rgba(80,40,10,.2); }
[data-theme="light"] .ekp-future { background: rgba(230,76,160,.1); }
[data-theme="light"] .ekp-future > span { color: #b8287a; }
[data-theme="light"] .ekp-nopebar { background: rgba(255,235,232,.92); }
[data-theme="light"] .ekp-nopebar.canceled { background: rgba(232,250,236,.92); }
[data-theme="light"] .ekp-ring .bg { stroke: rgba(0,0,0,.12); }
[data-theme="light"] .ekp-nring .fg { stroke: #e23b3b; }
[data-theme="light"] body.g-notkittens .ndp-dock { background: linear-gradient(to top, rgba(255,240,224,.97) 72%, rgba(255,240,224,0)); }
[data-theme="light"] .btn.ekp-combo { background: rgba(31,158,137,.12); }
[data-theme="light"] .ekp-step { color: #d4561c; }
[data-theme="light"] .ndp-fan .kcard.lit { box-shadow: 0 0 0 calc(var(--cw) * .014) #1b1b1b, 0 0 0 4px #ffb800, 0 6px 16px rgba(120,60,20,.3); }
[data-theme="light"] .ndp-fan .kcard.dim { filter: saturate(.5) opacity(.7); }
[data-theme="light"] .ekp-ghost .kcard { box-shadow: 0 20px 40px rgba(120,60,20,.3); }