/* Not Herd Mentality: the pieces the TV and the phones share. The table is a pasture: a
   sunny one by day (light, the default) and a moonlit one at night (dark). The question is a
   white card with a cow-print band; answers go up on tiles that turn over like a game-show
   board. Dark rules first, then [data-theme="light"]. */
:root {
  --nh-ink: #1d1b20;
  --nh-paper: #fffdf7;
  --nh-pink: #ff7aa6;
  --nh-pink-2: #ffb7cf;
  --nh-gold: #ffbf1f;
  --nh-grass: #3f9b4a;
  --nh-font: "Arial Rounded MT Bold", "Avenir Next Rounded", "Nunito", "Varela Round", "Trebuchet MS", system-ui, sans-serif;
  /* panels that sit on the pasture (or on any mood table, which is always dark) */
  --nh-panel: rgba(12,20,32,.84); --nh-panel-t: #f3f1ea; --nh-panel-2: rgba(243,241,234,.66);
}
:root[data-theme="light"] { --nh-panel: rgba(255,253,247,.93); --nh-panel-t: #1d1b20; --nh-panel-2: rgba(29,27,32,.64); }
.nh-round { font-family: var(--nh-font); font-weight: 800; letter-spacing: -.01em; }
.nh-tv [hidden], .nhp [hidden] { display: none !important; }

/* ---- the pasture ---- */
.tbl-herd {
  --tbl-edge: #0b1220; --tbl-rim: #2f4a3a; --tbl-glow: rgba(200,230,255,.06);
  --nh-sky-1: #0d1730; --nh-sky-2: #1c2c4c; --nh-hill-1: #1d3a2b; --nh-hill-2: #173123; --nh-grass-1: #1f4a2e; --nh-grass-2: #143520;
  --nh-barn: #8f2f26; --nh-roof: #4a1d1a; --nh-door: #7a2820; --nh-trim: #e9e1d2; --nh-window: #ffd27a;
  --nh-wood: #6b4a2e; --nh-wood-2: #4e341f; --nh-wood-t: #f4e6cf; --nh-tree: #12301f; --nh-trunk: #2a2016;
  background:
    radial-gradient(1.6px 1.6px at 12% 8%, rgba(255,255,255,.9), transparent 2px),
    radial-gradient(1.4px 1.4px at 31% 15%, rgba(255,255,255,.7), transparent 2px),
    radial-gradient(1.8px 1.8px at 48% 6%, rgba(255,255,255,.85), transparent 2px),
    radial-gradient(1.3px 1.3px at 66% 12%, rgba(255,255,255,.6), transparent 2px),
    radial-gradient(1.6px 1.6px at 79% 4%, rgba(255,255,255,.9), transparent 2px),
    radial-gradient(1.2px 1.2px at 91% 17%, rgba(255,255,255,.6), transparent 2px),
    radial-gradient(1.4px 1.4px at 22% 26%, rgba(255,255,255,.5), transparent 2px),
    radial-gradient(1.4px 1.4px at 58% 24%, rgba(255,255,255,.55), transparent 2px),
    radial-gradient(ellipse 70% 30% at 30% 74%, var(--nh-hill-1), transparent 70%),
    radial-gradient(ellipse 60% 26% at 80% 70%, var(--nh-hill-2), transparent 70%),
    linear-gradient(180deg, var(--nh-sky-1) 0%, var(--nh-sky-2) 50%, var(--nh-grass-1) 64%, var(--nh-grass-2) 100%);
}
[data-theme="light"] .tbl-herd {
  --tbl-edge: #ffffff; --tbl-rim: #b9d7a4; --tbl-glow: rgba(255,255,255,.35);
  --nh-sky-1: #8fd0f4; --nh-sky-2: #d4effc; --nh-hill-1: #9ed37a; --nh-hill-2: #86c464; --nh-grass-1: #8fcb68; --nh-grass-2: #6db14f;
  --nh-barn: #d0432f; --nh-roof: #6e2a22; --nh-door: #b8392a; --nh-trim: #fffaf0; --nh-window: #5a2a1e;
  --nh-wood: #c99a62; --nh-wood-2: #a87a46; --nh-wood-t: #3a2412; --nh-tree: #4f9b45; --nh-trunk: #7a5530;
  background:
    radial-gradient(ellipse 70% 30% at 30% 74%, var(--nh-hill-1), transparent 70%),
    radial-gradient(ellipse 60% 26% at 80% 70%, var(--nh-hill-2), transparent 70%),
    linear-gradient(180deg, var(--nh-sky-1) 0%, var(--nh-sky-2) 50%, var(--nh-grass-1) 64%, var(--nh-grass-2) 100%);
}

/* cow print: irregular black patches on white, for card bands and tile backs */
.nh-print { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='130' viewBox='0 0 220 130'%3E%3Cg fill='%231d1b20'%3E%3Cpath d='M10 6c12-6 30-5 40 2 9 7 6 20-3 27-10 8-25 9-34 3C4 32 1 22 3 14c1-4 3-6 7-8z'/%3E%3Cpath d='M86 2c10-2 22 0 27 7 5 8-1 17-9 21-9 4-20 3-25-4-5-8-3-21 7-24z'/%3E%3Cpath d='M152 22c14-8 34-6 46 3 10 8 9 23-2 30-12 8-30 8-42 1-10-6-12-16-9-24 1-4 4-7 7-10z'/%3E%3Cpath d='M50 58c11-5 26-3 33 5 6 7 3 18-6 23-10 6-24 5-31-2-6-6-6-16 0-22 1-2 3-3 4-4z'/%3E%3Cpath d='M120 78c8-4 19-3 24 3 4 6 1 13-6 17-8 4-18 3-22-3-4-5-2-13 4-17z'/%3E%3Cpath d='M14 98c7-3 16-2 20 3s1 11-5 13c-7 3-15 1-18-4-2-5-1-10 3-12z'/%3E%3Cpath d='M180 90c8-2 17 1 20 7 3 7-2 14-10 15-8 2-16-2-17-8-2-6 1-12 7-14z'/%3E%3Cpath d='M96 46c3-2 8-2 9 1 2 3 0 6-3 7-4 1-7 0-8-3 0-2 1-4 2-5z'/%3E%3Cpath d='M70 110c4-2 9-1 11 2 1 3-1 7-5 7-4 1-8-1-8-4 0-2 1-4 2-5z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 130px, #fff; }

/* ---- the question card ---- */
.nh-card { position: relative; background: var(--nh-paper); color: var(--nh-ink); border-radius: 26px; box-shadow: 0 0 0 3px var(--nh-ink), 0 10px 0 rgba(0,0,0,.18), 0 24px 60px rgba(0,0,0,.28); overflow: hidden; }
.nh-card-band { height: 34px; border-bottom: 3px solid var(--nh-ink); background-position: -18px -46px; }
.nh-card-body { padding: 18px 34px 26px; }
.nh-kicker { display: flex; align-items: center; gap: 12px; font-family: var(--nh-font); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: rgba(29,27,32,.55); }
.nh-kicker .nh-pack { letter-spacing: .06em; text-transform: none; font-weight: 800; color: #fff; background: #2f8a46; border-radius: 999px; padding: 2px 12px; }
.nh-kicker .nh-pack.v { background: #1b6fb5; }
.nh-qtext { font-family: var(--nh-font); font-weight: 900; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }

/* ---- cows ---- */
.nh-face, .nh-cow, .nh-token { display: block; overflow: visible; }
.nh-face .nh-bell { transform-box: fill-box; transform-origin: 50% 0; }
.nh-face.ring .nh-bell { animation: nh-ring .6s ease-in-out 2; }
@keyframes nh-ring { 25% { transform: rotate(18deg); } 75% { transform: rotate(-18deg); } }
.nh-face.chew .nh-mouth { animation: nh-chew .7s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes nh-chew { 50% { transform: translateX(3px) scaleY(.6); } }
.nh-face .nh-blink { transform-box: fill-box; transform-origin: 50% 50%; animation: nh-blink 5s infinite; }
@keyframes nh-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.nh-face .nh-ear-l, .nh-face .nh-ear-r { transform-box: fill-box; }
.nh-face .nh-ear-l { transform-origin: 100% 50%; }
.nh-face .nh-ear-r { transform-origin: 0% 50%; }
.nh-face.chew .nh-ear-l { animation: nh-flick-l 3.2s ease-in-out infinite; }
.nh-face.chew .nh-ear-r { animation: nh-flick-r 3.2s 1.1s ease-in-out infinite; }
@keyframes nh-flick-l { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(14deg); } 92% { transform: rotate(-4deg); } }
@keyframes nh-flick-r { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-14deg); } 92% { transform: rotate(4deg); } }

/* a whole cow walking or trotting: legs swing, the body bobs, the tail flicks */
.nh-cow .nh-leg, .nh-cow .nh-tail, .nh-cow .nh-head { transform-box: fill-box; }
.nh-cow .nh-leg { transform-origin: 50% 0; }
.nh-cow .nh-tail { transform-origin: 90% 0; animation: nh-tail 2.4s ease-in-out infinite; }
.nh-cow .nh-head { transform-origin: 10% 60%; }
@keyframes nh-tail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
.nh-cow.walk .nh-leg.f1, .nh-cow.walk .nh-leg.b2 { animation: nh-step .42s ease-in-out infinite alternate; }
.nh-cow.walk .nh-leg.f2, .nh-cow.walk .nh-leg.b1 { animation: nh-step .42s ease-in-out infinite alternate-reverse; }
.nh-cow.walk .nh-body, .nh-cow.walk .nh-head { animation: nh-bob .42s ease-in-out infinite alternate; }
@keyframes nh-step { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes nh-bob { to { transform: translateY(-2.5px); } }
.nh-cow.graze .nh-head { animation: nh-graze 4.5s ease-in-out infinite; }
@keyframes nh-graze { 0%, 30%, 100% { transform: rotate(0); } 45%, 80% { transform: rotate(22deg) translateY(6px); } }

/* ---- answer tiles: a game-show board ---- */
.nh-tile { position: relative; perspective: 1400px; min-width: 0; min-height: 0; }
.nh-tile-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.35,.45,1); }
.nh-tile.up .nh-tile-in { transform: rotateX(180deg); }
.nh-tile.now .nh-tile-in { transition: none; }
.nh-tile-back, .nh-tile-face { position: absolute; inset: 0; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 0 3px var(--nh-ink), 0 7px 0 rgba(0,0,0,.2); overflow: hidden; }
.nh-tile-back { display: flex; align-items: center; justify-content: center; }
.nh-tile-back b { width: 1.9em; height: 1.9em; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--nh-paper); color: var(--nh-ink); font-family: var(--nh-font); font-weight: 900; box-shadow: 0 0 0 3px var(--nh-ink); }
.nh-tile-face { transform: rotateX(180deg); background: var(--nh-paper); color: var(--nh-ink); display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; align-items: center; column-gap: 14px; }
.nh-tile-ans { font-family: var(--nh-font); font-weight: 900; line-height: 1.02; letter-spacing: -.01em; min-width: 0; overflow-wrap: anywhere; }
.nh-tile-n { align-self: center; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--nh-ink); color: #fff; font-family: var(--nh-font); font-weight: 900; }
.nh-tile-who { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.nh-tile-alt { grid-column: 1 / -1; font-weight: 700; color: rgba(29,27,32,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-tile.herd .nh-tile-face { background: linear-gradient(180deg, #fff7d6, #ffe58a); box-shadow: 0 0 0 4px var(--nh-ink), 0 0 0 10px var(--nh-gold), 0 0 60px rgba(255,191,31,.65); }
.nh-tile.herd .nh-tile-n { background: #2f8a46; }
.nh-tile.tied .nh-tile-face { background: #eef0f2; }
.nh-tile.odd .nh-tile-face { background: linear-gradient(180deg, #fff0f5, #ffd0e0); box-shadow: 0 0 0 3px var(--nh-ink), 0 0 0 8px var(--nh-pink); }
.nh-tile.dim .nh-tile-face { background: #e9e8e3; color: rgba(29,27,32,.62); }
.nh-tile.dim .nh-tile-n { background: rgba(29,27,32,.5); }
.nh-tile.dim .avatar { filter: saturate(.4); opacity: .8; }
.nh-tile.merged .nh-tile-face { animation: nh-merge .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes nh-merge { 0% { transform: rotateX(180deg) scale(.9); } 60% { transform: rotateX(180deg) scale(1.05); } }
.nh-ribbon { position: absolute; z-index: 3; left: 50%; top: -14px; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; font-family: var(--nh-font); font-weight: 900; letter-spacing: .12em; padding: 4px 14px; border-radius: 10px; box-shadow: 0 0 0 3px var(--nh-ink), 0 6px 14px rgba(0,0,0,.25); animation: nh-stamp .45s cubic-bezier(.2,1.6,.4,1) both; }
.nh-ribbon.herd { background: var(--nh-gold); color: var(--nh-ink); }
.nh-ribbon.tie { background: #fff; color: var(--nh-ink); }
.nh-ribbon.odd { background: var(--nh-pink); color: #fff; }
@keyframes nh-stamp { from { transform: translateX(-50%) rotate(-8deg) scale(1.8); opacity: 0; } }