/* Not Carcassonne on the phone: your tile, the map, your Weeples. Dusk first, then sunny light. */
body.g-notcarcassonne { font-family: "Spectral", Georgia, serif; }
body.g-notcarcassonne .h1, body.g-notcarcassonne .h2 { font-family: "IM Fell English SC", Georgia, serif; font-weight: 400; letter-spacing: .01em; }
.ncsp { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; }
.ncsp-status { display: flex; align-items: center; gap: 10px; background: rgba(20,22,36,.6); border: 1px solid rgba(214,190,140,.3); border-radius: 16px; padding: 10px 14px; font-size: 16px; min-height: 46px; }
.ncsp-status b { font-weight: 700; line-height: 1.2; }
.ncsp-status.me { background: rgba(240,198,74,.18); border-color: rgba(240,198,74,.6); }
.ncsp-left { margin-left: auto; font: 700 12px Inter, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--label-2); white-space: nowrap; }
.ncsp-opps { display: flex; flex-wrap: wrap; gap: 6px; }
.ncsp-opps:empty { display: none; }
.ncsp-opp { display: inline-flex; align-items: center; gap: 6px; background: rgba(20,22,36,.5); border-radius: 999px; padding: 4px 10px 4px 4px; font: 700 14px Inter, Arial, sans-serif; border: 2px solid transparent; }
.ncsp-opp.turn { border-color: var(--pc); }
.ncsp-opp .nm { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncsp-opp b { color: #f0c64a; font-variant-numeric: lining-nums; }
.ncsp-opp .ct { display: inline-flex; align-items: center; gap: 2px; color: var(--label-2); font-size: 12px; }
.ncsp-w { width: 15px; height: 19px; fill: var(--pc, #ffd93d); stroke: #221a12; stroke-width: 2.4; stroke-linejoin: round; flex: none; }
.ncsp-w.tiny { width: 11px; height: 14px; }
.ncsp-w.out { fill: none; stroke: var(--label-3); stroke-width: 1.8; }

.ncsp-card { display: flex; gap: 14px; align-items: center; background: rgba(20,22,36,.6); border: 1px solid rgba(214,190,140,.3); border-radius: 18px; padding: 12px; }
.ncsp-card.mine { border-color: rgba(240,198,74,.65); }
.ncsp-big { width: 128px; flex: none; padding: 0; border: none; background: none; cursor: pointer; filter: drop-shadow(0 10px 14px rgba(0,0,0,.4)); }
.ncsp-big .ncs-tile { transition: transform .2s; }
.ncsp-small { width: 78px; flex: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.ncsp-ctl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ncsp-tname { font-family: "IM Fell English SC", Georgia, serif; font-size: 20px; line-height: 1.1; }
.ncsp-sub { font-size: 15px; line-height: 1.25; }
.ncsp-sub.dim { color: var(--label-2); font-size: 13px; }
.ncsp-btns { display: flex; flex-direction: column; gap: 6px; }
.ncsp-btns .btn { min-height: 48px; font: 700 16px Inter, Arial, sans-serif; padding: 8px 10px; border-radius: 12px; }
.ncsp-rot { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.12); }
.ncsp-rot svg { width: 22px; height: 22px; }
.ncsp-hint { font-size: 13px; color: #f0c64a; font-style: italic; line-height: 1.25; }
.ncsp-what { align-self: flex-start; background: none; border: none; color: var(--blue); font: 600 14px Inter, Arial, sans-serif; padding: 0 4px; cursor: pointer; min-height: 32px; }
.ncsp-explain .ncs-explain { font-family: Inter, Arial, sans-serif; background: rgba(20,22,36,.6); }

.ncsp-mapwrap { position: relative; height: 300px; border-radius: 18px; overflow: hidden; background: rgba(10,12,22,.35); box-shadow: inset 0 0 0 1px rgba(214,190,140,.3), inset 0 0 40px rgba(0,0,0,.35); }
.ncsp-mapwrap.big { height: 360px; }
.ncsp-maphost { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.ncsp-maphost .ncs-spot { cursor: pointer; }
.ncsp-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.ncsp-zoom button { width: 44px; height: 44px; border-radius: 12px; border: none; background: rgba(20,22,36,.78); color: #fff; font: 700 24px Inter, Arial, sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.3); cursor: pointer; }
.ncsp-zoom svg { width: 22px; height: 22px; }
.ncsp-maphint { position: absolute; left: 10px; bottom: 8px; right: 60px; font: 600 12px Inter, Arial, sans-serif; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.8); pointer-events: none; }

.ncsp-mine { display: flex; align-items: center; gap: 10px; font: 600 13px Inter, Arial, sans-serif; color: var(--label-2); padding: 0 4px; }
.ncsp-mine .lbl { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.ncsp-mine .ws { display: flex; gap: 2px; }
.ncsp-mine .ncsp-w { width: 18px; height: 23px; }
.ncsp-mine .n { margin-left: auto; }
.ncsp-log { font-size: 14px; line-height: 1.4; color: var(--label-2); padding: 0 4px; }
.ncsp-log .l-score { color: #f0c64a; font-weight: 700; }
.ncsp-log .l-turn, .ncsp-log .l-win { color: var(--text); font-weight: 700; }
.ncsp-log .l-discard { color: #ff9b85; }

/* the Weeple sheet */
.ncsp-ov { align-items: flex-end; }
.ncsp-sheet { background: #1d2032; border-color: rgba(214,190,140,.35); max-height: 86vh; }
.ncsp-sheet > * { flex: none; }
.ncsp-shead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ncsp-hide { background: none; border: none; color: var(--blue); font: 600 15px Inter, Arial, sans-serif; cursor: pointer; min-height: 40px; }
.ncsp-ftile { width: min(58vw, 230px); align-self: center; filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
.ncsp-fopts { display: flex; flex-direction: column; gap: 6px; }
.ncsp-fopt { display: flex; align-items: center; gap: 10px; text-align: left; background: rgba(255,255,255,.07); border: 2px solid transparent; border-radius: 12px; padding: 8px 10px; color: var(--text); font: 500 14px Inter, Arial, sans-serif; line-height: 1.3; min-height: 48px; cursor: pointer; }
.ncsp-fopt .num { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.85); color: #1c1c1e; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none; }
.ncsp-fopt.on { border-color: #f0c64a; background: rgba(240,198,74,.18); }
.ncsp-fopt.on .num { background: #f0c64a; }
.ncsp-fopts.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ncsp-fopts.grid .ncsp-fopt { min-height: 46px; padding: 6px 8px; }
.ncsp-fopt small { color: var(--label-2); font-size: 12px; }
.ncsp-fhelp { font: 500 13px Inter, Arial, sans-serif; color: var(--label-2); text-align: center; line-height: 1.35; min-height: 18px; }
.ncsp-small-note { font: 500 12px Inter, Arial, sans-serif; color: var(--label-2); text-align: center; line-height: 1.35; }
.ncsp-minbar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--safe-bottom) + 12px); z-index: 40; min-height: 54px; border-radius: 16px; border: none; background: #f0c64a; color: #2a1c08; font: 800 16px Inter, Arial, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: 496px; margin: 0 auto; cursor: pointer; }

/* final */
.ncsp-final .ncsp-ftile { width: 150px; }
.ncsp-fbreak { width: 100%; max-width: 340px; background: rgba(20,22,36,.6); border-radius: 16px; padding: 8px 14px; font: 500 15px Inter, Arial, sans-serif; }
.ncsp-fbreak div { display: flex; justify-content: space-between; padding: 6px 0; }
.ncsp-fbreak div + div { box-shadow: inset 0 1px 0 var(--sep); }
.ncsp-fbreak .tot { font-weight: 800; font-size: 18px; }
.ncsp-fbreak .tot b { color: #f0c64a; }

/* ---- light theme: a sunny afternoon ---- */
[data-theme="light"] body.g-notcarcassonne.felt::before { background: transparent; }
[data-theme="light"] .ncsp-status, [data-theme="light"] .ncsp-card, [data-theme="light"] .ncsp-opp, [data-theme="light"] .ncsp-fbreak { background: rgba(255,250,236,.92); border-color: #d9c08a; box-shadow: 0 4px 14px rgba(110,80,20,.1); color: #2a1c08; }
[data-theme="light"] .ncsp-opp { border-color: transparent; }
[data-theme="light"] .ncsp-opp.turn { border-color: var(--pc); }
[data-theme="light"] .ncsp-status.me, [data-theme="light"] .ncsp-card.mine { background: rgba(255,236,170,.75); border-color: #c99a2e; }
[data-theme="light"] .ncsp-opp b, [data-theme="light"] .ncsp-fbreak .tot b { color: #9a6410; }
[data-theme="light"] .ncsp-hint { color: #8a5a00; }
[data-theme="light"] .ncsp-rot { background: rgba(110,80,20,.1); color: #2a1c08; }
[data-theme="light"] .ncsp-big, [data-theme="light"] .ncsp-small, [data-theme="light"] .ncsp-ftile { filter: drop-shadow(0 8px 12px rgba(110,80,20,.28)); }
[data-theme="light"] .ncsp-mapwrap { background: rgba(255,248,226,.6); box-shadow: inset 0 0 0 1px #d9c08a, inset 0 0 40px rgba(160,120,40,.12); }
[data-theme="light"] .ncsp-zoom button { background: rgba(255,250,236,.95); color: #2a1c08; box-shadow: 0 4px 12px rgba(110,80,20,.2); }
[data-theme="light"] .ncsp-maphint { color: #3d2a12; text-shadow: 0 1px 2px rgba(255,255,255,.9); }
[data-theme="light"] .ncsp-explain .ncs-explain { background: rgba(255,250,236,.92); }
[data-theme="light"] .ncsp-log .l-score { color: #9a6410; }
[data-theme="light"] .ncsp-log .l-discard { color: #c2410c; }
[data-theme="light"] .ncsp-sheet { background: #fffaf0; border-color: #e2cf9f; }
[data-theme="light"] .ncsp-fopt { background: rgba(110,80,20,.07); }
[data-theme="light"] .ncsp-fopt .num { background: #2a1c08; color: #fff; }
[data-theme="light"] .ncsp-fopt.on { background: rgba(255,214,90,.3); border-color: #c99a2e; }
[data-theme="light"] .ncsp-fopt.on .num { background: #c99a2e; color: #fff; }
[data-theme="light"] .ncsp-minbar { box-shadow: 0 10px 30px rgba(110,80,20,.3); }

/* ---- whose turn, unmistakable ---- */
.ncsp-status span small { display: block; font-size: 12px; color: var(--label-2); font-style: italic; }
.ncsp-status.me { flex-direction: column; align-items: flex-start; gap: 3px; background: linear-gradient(120deg, #ffd60a, #ffb000); border-color: #ffb000; color: #1b1b1b; box-shadow: 0 10px 30px rgba(255,190,0,.45); animation: ncsp-pop .35s cubic-bezier(.2,1.4,.4,1) both, ncsp-throb 1.6s ease-in-out .4s infinite; }
.ncsp-status.me b { font: 900 italic 30px Inter, Arial, sans-serif; letter-spacing: -.01em; line-height: 1; }
.ncsp-status.me span { font: 700 14px Inter, Arial, sans-serif; line-height: 1.25; }
@keyframes ncsp-pop { from { transform: scale(.8); opacity: 0; } }
@keyframes ncsp-throb { 50% { box-shadow: 0 10px 40px rgba(255,190,0,.75); transform: scale(1.015); } }
.ncsp.waiting .ncsp-hand { opacity: .62; filter: saturate(.75); transition: opacity .3s; }
.ncsp.waiting .ncsp-status { color: var(--label-2); }
.ncsp.waiting .ncsp-status b { color: var(--text); }
body.ncsp-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: ncsp-frame 1.6s ease-in-out infinite; }
@keyframes ncsp-frame { 50% { box-shadow: inset 0 0 0 7px #ffc400, inset 0 0 80px rgba(255,196,0,.6); } }
[data-theme="light"] .ncsp-status.me { background: linear-gradient(120deg, #ffd60a, #ffb000); border-color: #e0a000; color: #1b1b1b; }

/* ---- motion: your tile flies to the map ---- */
.ncsp-flyer { position: fixed; z-index: 70; pointer-events: none; transform-origin: 0 0; filter: drop-shadow(0 16px 24px rgba(0,0,0,.45)); }

/* ---- big moments on every phone ---- */
.ncsp-moment { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 55%, transparent), rgba(0,0,0,.6) 75%); animation: ncsp-moment 2.8s ease both; }
.ncsp-moment.k-final { animation-duration: 3.6s; }
@keyframes ncsp-moment { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.ncsp-moment .big { font-family: "Spectral", Georgia, serif; font-weight: 800; font-variant-numeric: lining-nums; font-size: 96px; line-height: .9; color: #ffd65a; text-align: center; padding: 0 16px; text-shadow: 4px 4px 0 #8a3a1c, 8px 8px 0 rgba(0,0,0,.3); animation: ncsp-slam .5s cubic-bezier(.2,1.5,.4,1) both; }
.ncsp-moment.k-final .big { font-size: 58px; }
@keyframes ncsp-slam { from { transform: scale(3); opacity: 0; } }
.ncsp-moment .who { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.7); color: #fff; font: 800 17px Inter, Arial, sans-serif; padding: 8px 16px 8px 8px; border-radius: 999px; max-width: 92vw; }
.ncsp-moment .avatar { width: 40px; height: 40px; font-size: 18px; }