/* Not Carcassonne: tile colours, the table surface and map highlights, shared by
   the TV and the phones. Dark first (dusk over the countryside), then the light
   theme (a sunny afternoon) overrides. */
:root {
  --ncs-field: #6f9a4c; --ncs-grass: #4f7a34; --ncs-tuft: #93b86a; --ncs-flower: #e8dca0;
  --ncs-road: #d9cba8; --ncs-road-edge: #85714f;
  --ncs-city: #c9b48d; --ncs-wall: #b39d74; --ncs-wall-edge: #574631;
  --ncs-roof: #b3533a; --ncs-roof-2: #8c3c28; --ncs-roof-hi: #d27a59;
  --ncs-abbey: #d9ccae; --ncs-garden: #8fb25f; --ncs-pennant: #3561ad; --ncs-gold: #f0c64a;
  --ncs-seam: rgba(20,15,5,.38);
}
[data-theme="light"] {
  --ncs-field: #97c457; --ncs-grass: #6f9e3a; --ncs-tuft: #c4e07e; --ncs-flower: #fff3b0;
  --ncs-road: #f1e6c8; --ncs-road-edge: #a8916a;
  --ncs-city: #e8d6ad; --ncs-wall: #cfb88c; --ncs-wall-edge: #7d6646;
  --ncs-roof: #d45d3d; --ncs-roof-2: #aa452c; --ncs-roof-hi: #ee9068;
  --ncs-abbey: #f2e8cf; --ncs-garden: #b9d97c; --ncs-pennant: #2b5aa6; --ncs-gold: #f2cc4f;
  --ncs-seam: rgba(70,50,20,.28);
}

/* The table: dusk over the hills (dark), a sunny afternoon (light). */
.tbl-carc {
  --tbl-edge: #141826; --tbl-rim: #59618a; --tbl-glow: rgba(255,190,120,.12);
  background:
    radial-gradient(ellipse 60% 45% at 78% 8%, rgba(255,170,110,.22), transparent 70%),
    radial-gradient(ellipse 80% 50% at 15% 100%, rgba(60,90,70,.35), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #2b2f4d 0%, #2a3346 45%, #1f2a2c 100%);
}
[data-theme="light"] .tbl-carc {
  --tbl-edge: #fffaf0; --tbl-rim: #d9c79c; --tbl-glow: rgba(255,240,200,.4);
  background:
    radial-gradient(ellipse 55% 45% at 85% 0%, rgba(255,236,170,.75), transparent 70%),
    radial-gradient(ellipse 70% 45% at 10% 100%, rgba(170,210,120,.35), transparent 70%),
    repeating-linear-gradient(115deg, rgba(150,120,60,.035) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #fbf3dc 0%, #f4ead0 55%, #ebe2c4 100%);
}

/* ---- the map ---- */
.ncs-map { display: block; width: 100%; height: 100%; overflow: visible; }
.ncs-map .ncs-shadow { fill: rgba(10,8,20,.35); }
[data-theme="light"] .ncs-map .ncs-shadow { fill: rgba(90,70,30,.22); }
.ncs-map .ncs-last { fill: none; stroke: var(--pc); stroke-width: 6; filter: drop-shadow(0 0 6px var(--pc)); animation: ncs-last 1.8s ease-in-out infinite; }
@keyframes ncs-last { 50% { stroke-width: 9; } }
.ncs-map .ncs-drop { transform-box: fill-box; transform-origin: center; animation: ncs-drop .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes ncs-drop { from { transform: scale(1.35); opacity: 0; } }
.ncs-map .ncs-glow { fill: rgba(255,214,90,.28); stroke: #ffd65a; stroke-width: 6; animation: ncs-glow 4.5s ease-out both; }
@keyframes ncs-glow { 0% { opacity: 0; } 10%, 70% { opacity: 1; } 100% { opacity: 0; } }
.ncs-map .ncs-spot rect { fill: rgba(255,230,140,.16); stroke: #ffd65a; stroke-width: 4; stroke-dasharray: 10 7; }
.ncs-map .ncs-spot path { stroke: #ffd65a; stroke-width: 6; stroke-linecap: round; opacity: .9; }
.ncs-map .ncs-spot.alt rect { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.55); stroke-width: 3; }
.ncs-map .ncs-spot.alt path { stroke: rgba(255,255,255,.55); }
.ncs-map .ncs-spot.on rect { fill: rgba(255,214,90,.32); stroke-dasharray: none; }
[data-theme="light"] .ncs-map .ncs-spot rect { fill: rgba(255,214,90,.28); stroke: #c98a00; }
[data-theme="light"] .ncs-map .ncs-spot path { stroke: #c98a00; }
[data-theme="light"] .ncs-map .ncs-spot.alt rect { fill: rgba(255,255,255,.25); stroke: rgba(110,80,20,.45); }
[data-theme="light"] .ncs-map .ncs-spot.alt path { stroke: rgba(110,80,20,.45); }
.ncs-map .ncs-ghost { opacity: .92; }
.ncs-map .ncs-ghost rect { fill: none; stroke: #fff; stroke-width: 5; stroke-dasharray: 12 8; animation: ncs-march 1s linear infinite; }
@keyframes ncs-march { to { stroke-dashoffset: -40; } }
[data-theme="light"] .ncs-map .ncs-ghost rect { stroke: #1c1c1e; }

/* ---- one tile on its own ---- */
.ncs-tile { display: block; width: 100%; height: auto; overflow: visible; }
.ncs-fspot .ring { fill: rgba(255,255,255,.55); stroke: #1c1c1e; stroke-width: 2; stroke-dasharray: 4 3; }
.ncs-fspot .num { font: 900 13px Inter, Arial, sans-serif; fill: #1c1c1e; }
.ncs-fspot.on .ring { fill: rgba(255,214,90,.9); stroke: #1c1c1e; stroke-dasharray: none; stroke-width: 2.6; }
.ncs-fspot { cursor: pointer; }

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

/* ---- motion: Weeples pop down and hop home after a score ---- */
.ncs-map .ncs-pop { transform-box: fill-box; transform-origin: 50% 100%; animation: ncs-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes ncs-pop { from { transform: translateY(-40px) scale(1.6); opacity: 0; } 60% { opacity: 1; } }
.ncs-map .ncs-hop { transform-box: fill-box; transform-origin: 50% 100%; animation: ncs-hop 1.15s cubic-bezier(.3,.6,.4,1) both; }
@keyframes ncs-hop { 0% { transform: none; opacity: 1; } 25% { transform: translateY(-34px) scale(1.25); opacity: 1; } 45% { transform: translateY(-6px) scale(1.1); } 70% { transform: translateY(-46px) scale(1.15); opacity: .9; } 100% { transform: translateY(-130px) scale(.7); opacity: 0; } }