/* Not Pandemic on the phone. Dark first, then the light theme. */
.npp { display: flex; flex-direction: column; gap: 10px; padding-bottom: 250px; }
.npp-turnbar { display: flex; align-items: center; gap: 10px; border-radius: 18px; padding: 12px 14px; font-size: 16px; }
.npp-turnbar.me { justify-content: space-between; background: linear-gradient(120deg, #ffd60a, #ffb000); color: #1b1b1b; box-shadow: 0 10px 30px rgba(255,190,0,.45); animation: npp-pop .35s cubic-bezier(.2,1.4,.4,1) both, npp-throb 1.6s ease-in-out .4s infinite; }
.npp-turnbar.me b { display: block; font-size: 30px; font-weight: 900; font-style: italic; letter-spacing: -.01em; line-height: 1; }
.npp-turnbar.me span { display: block; font-size: 15px; font-weight: 700; margin-top: 3px; }
.npp-turnbar.idle { background: rgba(0,0,0,.3); color: var(--label-2); }
.npp-turnbar.idle b { color: var(--text); }
.npp-turnbar.idle small { margin-left: auto; font-size: 13px; text-align: right; }
.npp-pips { display: flex; align-items: center; gap: 5px; flex: none; }
.npp-pips i { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(27,27,27,.4); }
.npp-pips i.on { background: #1b1b1b; border-color: #1b1b1b; }
.npp-pips small { font-size: 13px; font-weight: 900; margin-left: 2px; }
@keyframes npp-pop { from { transform: scale(.94); } }
@keyframes npp-throb { 50% { box-shadow: 0 10px 40px rgba(255,190,0,.75); transform: scale(1.015); } }
body.npp-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: npp-frame 1.6s ease-in-out infinite; }
@keyframes npp-frame { 50% { box-shadow: inset 0 0 0 7px #ffc400, inset 0 0 80px rgba(255,196,0,.6); } }
.npp.waiting .ndp-fan { opacity: .62; filter: saturate(.75); transition: opacity .3s; }
.npp.waiting .ndp-fan .npcard.peeking { opacity: 1; }

.npp-team { display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.npp-mate { display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 999px; background: rgba(0,0,0,.28); border: 2px solid transparent; color: inherit; font: inherit; flex: none; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent); }
.npp-mate.turn { border-color: #ffb800; }
.npp-mate .nm { font-size: 14px; font-weight: 800; line-height: 1.05; text-align: left; }
.npp-mate .nm small { display: block; font-size: 11px; font-weight: 600; color: var(--label-2); }
.npp-mate .ct { background: rgba(255,255,255,.14); border-radius: 999px; padding: 1px 7px; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }

.npp-mapwrap { overflow-x: auto; overflow-y: hidden; border-radius: 16px; -webkit-overflow-scrolling: touch; box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(140,190,255,.2); scrollbar-width: none; }
.npp-mapwrap::-webkit-scrollbar { display: none; }
.npp-map { position: relative; }
.npp-board, .npp-board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.npp .npm-label { font-size: 23px; stroke-width: 6px; }
.npp .npm-pawn { transition-duration: .8s; }
.npp-pickbar { display: flex; align-items: center; gap: 12px; background: rgba(255,214,10,.16); border: 1px solid rgba(255,214,10,.5); border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 700; }
.npp-pickbar span { flex: 1; }
.npp-hint:empty, .npp-panel:empty, .npp-log:empty { display: none; }

.npp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.npp-act { min-height: 60px; border-radius: 14px; border: 2px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3); color: inherit; text-align: left; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; font: inherit; cursor: pointer; transition: transform .08s; }
.npp-act:active { transform: scale(.97); }
.npp-act b { font-size: 17px; font-weight: 900; }
.npp-act small { font-size: 12px; color: var(--label-2); margin-top: 2px; line-height: 1.2; }
.npp-act.off { opacity: .38; }
.npp-act.on { border-color: #ffd60a; }
.npp .btn.npp-end { min-height: 46px; margin-top: 8px; background: rgba(255,255,255,.08); }
.npp .btn.npp-big { min-height: 66px; font-size: 21px; font-weight: 900; letter-spacing: .04em; }
.npp .btn.sm { min-height: 40px; width: auto; padding: 8px 14px; font-size: 15px; }
.npp .btn.danger { background: #ff453a; color: #fff; }
.npp-note { font-size: 13px; text-align: center; color: var(--label-2); margin-top: 6px; }
.npp-epi { border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #3a1018, #1a0709); border: 2px solid #ffd60a; padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.npp-epi b { font-size: 19px; font-weight: 900; color: #ffd60a; }
.npp-epi span { font-size: 13px; opacity: .9; }
.npp-asking { display: flex; align-items: center; gap: 10px; background: rgba(100,210,255,.14); border: 1px solid rgba(100,210,255,.5); border-radius: 14px; padding: 10px 12px; font-size: 14px; font-weight: 700; }
.npp-asking span:not(.ap-spin) { flex: 1; }

.npp-trk { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; color: var(--label-2); padding: 0 2px; }
.npp-trk b { color: var(--text); font-size: 15px; }
.npp-trk .bad b { color: #ff6b6b; }
.npp-cures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.npp-cures span { display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 12px; padding: 6px 2px; background: rgba(0,0,0,.25); border: 2px solid transparent; }
.npp-cures span .np-germ { opacity: .55; }
.npp-cures span.cured, .npp-cures span.gone { border-color: var(--dc); background: color-mix(in srgb, var(--dc) 22%, rgba(0,0,0,.2)); }
.npp-cures span.cured .np-germ, .npp-cures span.gone .np-germ { opacity: 1; }
.npp-cures small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.npp-cures i { font-style: normal; font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 3px; color: var(--label-2); }

.npp-rolebtn { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: none; border-radius: 14px; padding: 8px 12px; background: rgba(0,0,0,.28); box-shadow: inset 5px 0 0 var(--rc); color: inherit; font: inherit; cursor: pointer; }
.npp-rolebtn b { display: block; font-size: 16px; font-weight: 900; }
.npp-rolebtn small { display: block; font-size: 12px; color: var(--label-2); }
.npp-roledet { margin-top: 8px; }
.npp-stored { display: flex; gap: 10px; align-items: center; margin-top: 8px; background: rgba(255,214,107,.1); border-radius: 14px; padding: 8px; font-size: 14px; }
.npp-stored small { display: block; font-size: 12px; color: var(--label-2); margin: 2px 0 6px; }
.npp-log { font-size: 13px; color: var(--label-2); line-height: 1.45; padding: 0 4px; }
.npp-log .l-turn { color: var(--text); font-weight: 700; }
.npp-log .l-outbreak, .npp-log .l-epidemic, .npp-log .l-lose { color: #ff8a80; font-weight: 700; }
.npp-log .l-cure, .npp-log .l-win { color: #7ee787; font-weight: 700; }
.npp-log .l-event { color: #ffd66b; }

/* the hand */
.npp-dockhead { text-align: center; }
.npp-handlabel { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--label-2); }
.npp-discardhint { font-size: 14px; font-weight: 900; color: #1b1b1b; background: #ff9f0a; border-radius: 999px; padding: 5px 12px; display: inline-block; animation: npp-pop .3s both; }
.npp-dock .ndp-fan { height: calc(var(--cw) * 1.4 + 30px); }
.ndp-fan .npcard { position: absolute; top: 20px; transform-origin: 50% 100%; transition: transform .18s ease, filter .2s; cursor: pointer; }
.ndp-fan .npcard.peeking { translate: 0 -30px; z-index: 60 !important; filter: none; box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.ndp-fan .npcard.npp-in { animation: npp-in .6s cubic-bezier(.2,1.1,.35,1) both; }
@keyframes npp-in { from { translate: 0 -52vh; scale: .45; opacity: 0; } 60% { opacity: 1; } }
.npp-big { --cw: min(44vw, 180px); }

/* sheets */
.npp-sheet { gap: 8px; }
.npp-sheet.tall { max-height: 80vh; }
.npp-sheet .h2 { font-size: 20px; }
.npp-sub { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--label-2); margin-top: 6px; }
.npp-cgroup + .npp-cgroup { margin-top: 6px; }
.npp-cg { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--label-2); margin-bottom: 4px; }
.npp-cbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.npp-cbtn { border: none; border-radius: 10px; padding: 8px 11px; min-height: 44px; font: inherit; font-size: 15px; font-weight: 700; background: color-mix(in srgb, var(--dc) 22%, rgba(255,255,255,.06)); color: inherit; box-shadow: inset 4px 0 0 var(--dc); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.npp-cbtn i { font-style: normal; font-size: 11px; font-weight: 900; background: rgba(255,69,58,.85); color: #fff; border-radius: 999px; padding: 1px 6px; }
.npp-sheet .btn.npp-way { display: flex; justify-content: space-between; align-items: center; text-align: left; }
.npp-way small { font-size: 13px; font-weight: 600; opacity: .8; }
.npp-sheet .btn.npp-colbtn { display: flex; align-items: center; gap: 10px; text-align: left; box-shadow: inset 5px 0 0 var(--dc); }
.npp-colbtn small { margin-left: auto; font-size: 13px; color: var(--label-2); font-weight: 600; }
.npp-sheet .btn.npp-sharebtn, .npp-sheet .btn.npp-pawnbtn { display: flex; align-items: center; gap: 12px; text-align: left; }
.npp-pawnbtn small { display: block; font-size: 13px; color: var(--label-2); font-weight: 600; }
.npp-handgrid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 4px 0; }
.npp-cardpick { background: none; border: none; padding: 0; border-radius: 10px; cursor: pointer; transition: transform .15s; }
.npp-cardpick.on { transform: translateY(-6px); }
.npp-cardpick.on .npcard { box-shadow: 0 0 0 4px #ffd60a, 0 10px 24px rgba(0,0,0,.5); }
.npp-fc { display: flex; flex-direction: column; gap: 6px; }
.npp-fcrow { display: flex; align-items: center; gap: 6px; }
.npp-fcrow .np-itag, .npp-herdbtn .np-itag { flex: 1; font-size: 15px; padding: 6px 10px 6px 6px; }
.np-itag em { font-style: normal; font-weight: 700; font-size: 12px; opacity: .65; margin-left: auto; padding-left: 8px; }
.npp-arrow { width: 44px; height: 44px; border-radius: 10px; border: none; background: rgba(255,255,255,.1); color: inherit; font-size: 16px; cursor: pointer; }
.npp-arrow:disabled { opacity: .25; }
.npp-herdbtn { border: none; background: none; padding: 0; text-align: left; display: flex; width: 100%; cursor: pointer; }
.npp-askcard { display: flex; justify-content: center; }
.npp-row2 { display: flex; gap: 8px; }
.npp-row2 .btn { flex: 1; }
.npp-teamhead { display: flex; align-items: center; gap: 10px; }
.npp-teamhead .muted { margin-left: auto; font-size: 14px; color: var(--label-2); }

/* the end */
.npp-end .npp-endgerms { display: flex; gap: 10px; }
.npp-end .npp-endgerms span { opacity: .3; filter: grayscale(.8); }
.npp-end .npp-endgerms span.ok { opacity: 1; filter: none; }
.npp-end.win .h1 { color: #7ee787; }
.npp-end.lose .h1 { color: #ff8a80; }

/* the big moments, on every phone */
.npp-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(--dc) 50%, transparent), rgba(0,0,0,.6) 75%); animation: npp-moment 2.8s ease both; }
.npp-moment.k-outbreak { background: radial-gradient(circle, rgba(255,69,58,.6), rgba(30,0,0,.7) 75%); }
@keyframes npp-moment { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.npp-hazard { position: absolute; left: 0; right: 0; top: 18%; height: 26px; background: repeating-linear-gradient(-45deg, #ffd60a 0 20px, #141414 20px 40px); transform: rotate(-4deg); }
.npp-moment .npp-mgerm { animation: npp-spin 2.8s ease both; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.npp-moment .npp-mgerms { display: flex; gap: 10px; animation: npp-spin 2.8s ease both; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.npp-moment.k-win { background: radial-gradient(circle, rgba(61,220,151,.5), rgba(0,20,10,.6) 75%); }
.npp-moment.k-win .big { color: #7ee787; text-shadow: 4px 4px 0 #1f6b45, 8px 8px 0 rgba(0,0,0,.35); }
@keyframes npp-spin { from { transform: scale(.3) rotate(-90deg); } 20% { transform: scale(1.1) rotate(10deg); } 30% { transform: scale(1) rotate(0); } }
.npp-moment .big { font-size: 60px; font-weight: 900; font-style: italic; line-height: .9; color: #fff; letter-spacing: -.03em; text-shadow: 4px 4px 0 var(--dc), 8px 8px 0 rgba(0,0,0,.35); transform: rotate(-5deg); animation: npp-slam .5s cubic-bezier(.2,1.5,.4,1) both; text-align: center; }
.npp-moment.k-epidemic .big { color: #ffd60a; text-shadow: 4px 4px 0 #e2383f, 8px 8px 0 rgba(0,0,0,.35); }
.npp-moment.k-outbreak .big { text-shadow: 4px 4px 0 #ff453a, 8px 8px 0 rgba(0,0,0,.35); }
@keyframes npp-slam { from { transform: rotate(-5deg) scale(3); opacity: 0; } }
.npp-moment .who { background: rgba(0,0,0,.72); color: #fff; font-size: 17px; font-weight: 800; padding: 9px 16px; border-radius: 999px; max-width: 90vw; text-align: center; }

/* ---- light theme ---- */
[data-theme="light"] .npp-turnbar.idle, [data-theme="light"] .npp-mate, [data-theme="light"] .npp-act, [data-theme="light"] .npp-rolebtn, [data-theme="light"] .npp-cures span { background: rgba(255,255,255,.86); box-shadow: 0 4px 14px rgba(30,40,80,.08); }
[data-theme="light"] .npp-rolebtn { box-shadow: inset 5px 0 0 var(--rc), 0 4px 14px rgba(30,40,80,.08); }
[data-theme="light"] .npp-mate { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent), 0 3px 10px rgba(30,40,80,.08); }
[data-theme="light"] .npp-mate.turn { border-color: #f0a500; }
[data-theme="light"] .npp-mate .ct { background: rgba(0,0,0,.07); }
[data-theme="light"] .npp-act { border-color: rgba(0,0,0,.06); }
[data-theme="light"] .npp-act.on { border-color: #f0a500; }
[data-theme="light"] .npp .btn.npp-end { background: rgba(0,0,0,.06); }
[data-theme="light"] .npp-cures span.cured, [data-theme="light"] .npp-cures span.gone { background: color-mix(in srgb, var(--dc) 16%, #fff); }
[data-theme="light"] .npp-mapwrap { box-shadow: 0 8px 22px rgba(30,60,100,.16), inset 0 0 0 1px rgba(40,90,140,.2); }
[data-theme="light"] .npp-pickbar { background: rgba(255,204,0,.2); border-color: rgba(183,121,31,.5); }
[data-theme="light"] .npp-asking { background: rgba(14,116,144,.1); border-color: rgba(14,116,144,.4); }
[data-theme="light"] .npp-trk .bad b { color: #e0352b; }
[data-theme="light"] .npp-log .l-outbreak, [data-theme="light"] .npp-log .l-epidemic, [data-theme="light"] .npp-log .l-lose { color: #c62828; }
[data-theme="light"] .npp-log .l-cure, [data-theme="light"] .npp-log .l-win { color: #1f8f3a; }
[data-theme="light"] .npp-log .l-event { color: #8a5a00; }
[data-theme="light"] .npp-stored { background: rgba(255,204,0,.14); }
[data-theme="light"] .npp-cbtn { background: color-mix(in srgb, var(--dc) 14%, #fff); box-shadow: inset 4px 0 0 var(--dc), 0 2px 6px rgba(30,40,80,.08); }
[data-theme="light"] .npp-arrow { background: rgba(0,0,0,.06); }
[data-theme="light"] body.g-notpandemic .ndp-dock { background: linear-gradient(to top, rgba(234,240,245,.97) 72%, rgba(234,240,245,0)); }
[data-theme="light"] .ndp-fan .npcard.peeking { box-shadow: 0 14px 30px rgba(30,40,80,.3); }
[data-theme="light"] .npp-end.win .h1 { color: #1f8f3a; }
[data-theme="light"] .npp-end.lose .h1 { color: #c62828; }