/* Not Pandemic: the world map, card faces, role cards and the table surface,
   shared by the TV and the phones. Dark rules first, then the light theme. */

/* ---- the table: a disease-control situation room (dark) / an atlas desk (light) ---- */
.tbl-pandemic {
  --tbl-edge: #050c18; --tbl-rim: #1f4e7a; --tbl-glow: rgba(90,170,255,.10);
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(60,140,230,.16), transparent 70%),
    repeating-linear-gradient(0deg, rgba(120,180,255,.045) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(120,180,255,.045) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #0a1a30 0%, #071324 60%, #050d1a 100%);
}
[data-theme="light"] .tbl-pandemic {
  --tbl-edge: #f4f1e8; --tbl-rim: #7fa7c9; --tbl-glow: rgba(255,255,255,.4);
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(255,255,255,.7), transparent 70%),
    repeating-linear-gradient(0deg, rgba(40,90,140,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(40,90,140,.05) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #eef3f7 0%, #e4ebf1 100%);
}

/* ---- the map ---- */
.np-map { --np-sea1: #0f3459; --np-sea2: #081b33; --np-shape: #10345a; --np-dot: #4c86bd; --np-grat: rgba(140,190,255,.08); --np-route: rgba(222,236,255,.66); --np-label: #f2f7ff; --np-halo: #061427; --np-hl: #ffd60a; }
[data-theme="light"] .np-map { --np-sea1: #dcedf8; --np-sea2: #bcd9ec; --np-shape: #f3f1e4; --np-dot: #b3c08f; --np-grat: rgba(30,80,130,.10); --np-route: rgba(36,64,104,.55); --np-label: #10223a; --np-halo: #f6fafd; --np-hl: #e8a500; }
.npm-board { display: block; width: 100%; height: 100%; }
.npm-sea1 { stop-color: var(--np-sea1); } .npm-sea2 { stop-color: var(--np-sea2); }
.npm-shape { fill: var(--np-shape); stroke: none; }
.npm-shape-hole { fill: var(--np-sea2); }
.npm-dots { fill: none; stroke: var(--np-dot); stroke-width: 5.2; stroke-linecap: round; }
.npm-grat { fill: none; stroke: var(--np-grat); stroke-width: 1.2; }
.npm-eq { fill: none; stroke: var(--np-grat); stroke-width: 2; stroke-dasharray: 6 8; }
.npm-routes line { stroke: var(--np-route); stroke-width: 2.6; stroke-linecap: round; }
.npm-node { stroke: #fff; stroke-width: 3; }
.npm-city.c-black .npm-node { stroke: #e9edf5; }
.npm-halo { opacity: .28; }
.npm-city.c-blue .npm-halo { fill: #2f6fe4; } .npm-city.c-yellow .npm-halo { fill: #f2c230; } .npm-city.c-black .npm-halo { fill: #7a7f92; } .npm-city.c-red .npm-halo { fill: #e2383f; }
.npm-hq { stroke: #fff; stroke-width: 2.4; stroke-dasharray: 4 3; }
[data-theme="light"] .npm-hq { stroke: #10223a; }
.npm-label { font: 800 15.5px "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; fill: var(--np-label); stroke: var(--np-halo); stroke-width: 4.6px; paint-order: stroke; stroke-linejoin: round; letter-spacing: .01em; }

/* live layer */
.npm-live { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.npm-live .npm-hit { pointer-events: all; }
.npm-cube.c-black > rect:first-child { stroke: #b4bccd; }
.npm-cube.full > rect:first-child { stroke: #fff; stroke-width: 1.6; }
.npm-cube.drop { animation: npm-drop .7s cubic-bezier(.2,1.3,.4,1) var(--d, 0ms) both; }
@keyframes npm-drop { 0% { translate: 0 -46px; opacity: 0; } 55% { opacity: 1; } 75% { translate: 0 3px; } 100% { translate: 0 0; } }
.npm-hot { fill: none; stroke: #ff453a; stroke-width: 3; opacity: .85; transform-box: fill-box; transform-origin: center; animation: npm-hot 1.4s ease-in-out infinite; }
@keyframes npm-hot { 50% { opacity: .25; scale: 1.25; } }
.npm-lab.fresh { animation: npm-rise .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes npm-rise { from { translate: 0 18px; opacity: 0; } }
.npm-pawn { transition: transform 1s cubic-bezier(.45,.05,.2,1); }
.npm-pawnring { fill: rgba(255,184,0,.22); stroke: #ffb800; stroke-width: 3; }
.npm-pawn.now .npm-pawnbody { animation: npm-bob 1.1s ease-in-out infinite; }
@keyframes npm-bob { 50% { translate: 0 -5px; } }
.npm-hl { fill: color-mix(in srgb, var(--np-hl) 28%, transparent); stroke: var(--np-hl); stroke-width: 3.5; transform-box: fill-box; transform-origin: center; animation: npm-pulse 1.2s ease-in-out infinite; }
@keyframes npm-pulse { 50% { scale: 1.18; opacity: .7; } }
.npm-hit { fill: transparent; cursor: pointer; }
.npm-mark { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 5 4; }
[data-theme="light"] .npm-mark { stroke: #10223a; }
.npm-ring { fill: none; stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: npm-ring 1.3s ease-out both; }
@keyframes npm-ring { from { scale: .4; opacity: 1; } to { scale: 2.6; opacity: 0; } }
.npm-burst { fill: none; stroke-width: 7; transform-box: fill-box; transform-origin: center; animation: npm-burst 1.6s cubic-bezier(.2,.8,.3,1) var(--d, 0ms) both; }
@keyframes npm-burst { 0% { scale: .3; opacity: 1; } 100% { scale: 4.2; opacity: 0; } }
.npm-float { font: 900 22px "Inter", Arial, sans-serif; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 4px; animation: npm-float 1.8s ease-out both; }
@keyframes npm-float { 0% { translate: 0 6px; opacity: 0; } 15% { opacity: 1; } 100% { translate: 0 -34px; opacity: 0; } }

/* ---- germs, cubes, labs ---- */
.np-germ, .np-cube, .np-lab, .np-roleicon, .np-evicon, .np-pawnicon { display: inline-block; vertical-align: middle; flex: none; }

/* ---- player cards: city, event, epidemic and the backs. Size with --cw. ---- */
.npcard, .npcard * { box-sizing: border-box; }
.npcard {
  width: var(--cw, 100px); aspect-ratio: 5 / 7; container-type: inline-size; position: relative; flex: none;
  border-radius: calc(var(--cw, 100px) * .08); background: #fdfcf8; padding: calc(var(--cw, 100px) * .045); user-select: none; -webkit-user-select: none;
  box-shadow: 0 calc(var(--cw, 100px) * .02) calc(var(--cw, 100px) * .07) rgba(0,0,0,.35), inset 0 0 0 calc(var(--cw, 100px) * .008) rgba(0,0,0,.12);
  font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; color: #15202f;
}
.npcard .npc-in { position: relative; width: 100%; height: 100%; border-radius: 6cqw; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
.npcard.k-city .npc-in { background: linear-gradient(180deg, #f6f3ea, #ebe6d8); }
.npcard .npc-band { width: 100%; background: var(--dc); color: var(--di); display: flex; align-items: center; gap: 3cqw; padding: 4cqw 5cqw; position: relative; }
.npcard .npc-band::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.12) 0 3cqw, transparent 3cqw 6cqw); }
.npcard .npc-band .np-germ { width: 24cqw; height: 24cqw; position: relative; z-index: 1; }
.npcard .npc-dis { font-size: 11cqw; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; position: relative; z-index: 1; }
.npcard .npc-name { font-size: 14.5cqw; font-weight: 900; line-height: 1.02; text-align: center; padding: 5cqw 4cqw 2cqw; letter-spacing: -.01em; text-wrap: balance; }
.npcard .npc-loc { width: 88%; flex: 1; min-height: 0; border-radius: 4cqw; background: #dbe8f1; box-shadow: inset 0 0 0 .8cqw rgba(0,0,0,.08); }
.npcard .npc-loc use { stroke: #9fb3a0; fill: none; }
.npcard .npc-ping { fill: var(--dc); opacity: .25; }
.npcard .npc-pop { font-size: 8.5cqw; font-weight: 700; color: #5d6574; padding: 3cqw 0 4cqw; }
.npcard.k-event .npc-in { background: linear-gradient(160deg, #ffe082, #f4b63f 55%, #e39a22); color: #3a2604; padding: 4cqw; }
.npcard .npc-evtop { font-size: 9cqw; font-weight: 900; letter-spacing: .3em; background: #3a2604; color: #ffd66b; border-radius: 99cqw; padding: 1.5cqw 6cqw; }
.npcard .npc-evart { margin: 5cqw 0 1cqw; color: #3a2604; }
.npcard .npc-evart .np-evicon { width: 44cqw; height: 44cqw; filter: drop-shadow(0 1.5cqw 0 rgba(255,255,255,.4)); }
.npcard.k-event .npc-name { font-size: 13.5cqw; padding: 1cqw 2cqw; }
.npcard .npc-text { font-size: 8.4cqw; font-weight: 700; line-height: 1.2; text-align: center; color: rgba(58,38,4,.85); }
.npcard .npc-foot { margin-top: auto; font-size: 7.5cqw; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.npcard.k-epi .npc-in { background: radial-gradient(circle at 50% 40%, #3b1d22, #140a0d); color: #fff; }
.npcard .npc-stripes { width: 100%; height: 13cqw; background: repeating-linear-gradient(-45deg, #ffd60a 0 6cqw, #141414 6cqw 12cqw); }
.npcard .npc-epiart { margin: 6cqw 0 2cqw; width: 50cqw; height: 50cqw; border-radius: 50%; background: #e2383f; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12cqw rgba(226,56,63,.7); }
.npcard .npc-epiart .np-germ { width: 40cqw; height: 40cqw; }
.npcard.k-epi .npc-name { font-size: 15cqw; color: #ffd60a; letter-spacing: .04em; }
.npcard .npc-steps { margin: 1cqw 0 0; padding: 0 0 0 12cqw; font-size: 8.5cqw; font-weight: 800; line-height: 1.3; align-self: flex-start; }
.npcard.k-back .npc-in { background: radial-gradient(circle at 50% 38%, #1b4c80, #0a1f3c 70%); color: #fff; justify-content: center; gap: 6cqw; }
.npcard .npc-globe { width: 58cqw; height: 58cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5bc0ff, #1b5ea8 60%, #0d2d55); box-shadow: 0 0 0 2cqw rgba(255,255,255,.75), 0 0 14cqw rgba(91,192,255,.6); position: relative; }
.npcard .npc-globe::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55) 1.4cqw, transparent 1.6cqw) 0 0 / 8cqw 8cqw; opacity: .55; -webkit-mask: radial-gradient(circle, #000 60%, transparent 71%); mask: radial-gradient(circle, #000 60%, transparent 71%); }
.npcard .npc-backname { font-size: 12cqw; font-weight: 900; letter-spacing: .05em; text-align: center; line-height: 1; }
.npcard .npc-backname small { display: block; font-size: 8cqw; letter-spacing: .4em; color: #ffd60a; margin-bottom: 1cqw; }
.npcard.k-iback .npc-in { background: radial-gradient(circle at 50% 40%, #7b1e2e, #2a0910 75%); }
.npcard .npc-backart { width: 52cqw; height: 52cqw; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.6cqw rgba(255,255,255,.3); }
.npcard .npc-backart .np-germ { width: 42cqw; height: 42cqw; }
.npcard.dim { filter: saturate(.4) brightness(.85); }

/* ---- small infection-card tags ---- */
.np-itag { display: inline-flex; align-items: center; gap: 6px; background: #f6f3ea; color: #15202f; border-radius: 8px; padding: 3px 9px 3px 4px; font-weight: 800; box-shadow: inset 4px 0 0 var(--dc), 0 2px 6px rgba(0,0,0,.25); white-space: nowrap; }
.np-itag b { font-weight: 800; }

/* ---- role cards ---- */
.np-rolecard { border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 5px 0 0 var(--rc); }
.np-rolehead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 30%, transparent), transparent); }
.np-rolehead b { display: block; font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.np-rolehead small { display: block; font-size: 13px; font-weight: 600; opacity: .75; }
.np-rolecard ul { margin: 0; padding: 4px 14px 12px 32px; font-size: 14px; line-height: 1.4; }
.np-rolecard li + li { margin-top: 4px; }
[data-theme="light"] .np-rolecard { background: #fff; border-color: rgba(0,0,0,.06); box-shadow: inset 5px 0 0 var(--rc), 0 4px 14px rgba(30,40,80,.08); }

.np-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); }
.np-explain .np-xkind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--label-2); }
.np-explain p { margin: 5px 0 0; }