/* Not Monopoly, shared by the TV and the phones: title deeds, Rain Check and
   Community Centre cards, pieces, dice, the board ring and the table surface.
   Dark rules first, [data-theme="light"] overrides at the end. */
.nmdeed, .nmdeed *, .nmcard, .nmcard *, .nm-board, .nm-board * { box-sizing: border-box; }

/* ---- the table surface ---- */
.tbl-mono {
  --tbl-edge: #08130e; --tbl-rim: #2f5e47; --tbl-glow: rgba(160,230,190,.10);
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(120,200,160,.14), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #123326 0%, #0d271d 60%, #0a1f17 100%);
}
[data-theme="light"] .tbl-mono {
  --tbl-edge: #ffffff; --tbl-rim: #b9cdb6; --tbl-glow: rgba(255,255,255,.4);
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255,255,255,.55), transparent 70%),
    repeating-linear-gradient(45deg, rgba(40,90,60,.035) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(40,90,60,.03) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #e4eee0 0%, #dae8d6 60%, #d2e2cd 100%);
}

/* ---- pieces ---- */
.nm-token { --ts: 34px; width: var(--ts); height: var(--ts); border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--tc) 55%, #fff) 0, var(--tc) 48%, color-mix(in srgb, var(--tc) 62%, #000) 100%);
  box-shadow: 0 0 0 calc(var(--ts) * .07) #fff, 0 0 0 calc(var(--ts) * .11) rgba(10,14,20,.7), 0 calc(var(--ts) * .12) calc(var(--ts) * .22) rgba(0,0,0,.45); }
.nm-token svg { width: 74%; height: 74%; filter: drop-shadow(0 1px 1.2px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.6)); }

/* ---- dice ---- */
.nm-die { --ds: 64px; width: var(--ds); height: var(--ds); border-radius: 20%; background: linear-gradient(160deg, #ffffff, #ece8dc); display: inline-grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: calc(var(--ds) * .15); flex: none;
  box-shadow: inset 0 calc(var(--ds) * -.07) 0 rgba(0,0,0,.12), 0 calc(var(--ds) * .12) calc(var(--ds) * .25) rgba(0,0,0,.35); }
.nm-die i { width: 74%; aspect-ratio: 1; border-radius: 50%; place-self: center; }
.nm-die i.on { background: radial-gradient(circle at 40% 35%, #444, #111); }

/* ---- title deeds (size with --cw) ---- */
.nmdeed {
  width: var(--cw, 100px); aspect-ratio: 5 / 7; container-type: inline-size; position: relative; flex: none; overflow: hidden;
  border-radius: calc(var(--cw, 100px) * .06); background: #fbf8ee; color: #1b1f2a; padding: calc(var(--cw, 100px) * .05);
  box-shadow: 0 calc(var(--cw, 100px) * .03) calc(var(--cw, 100px) * .1) rgba(0,0,0,.4), inset 0 0 0 calc(var(--cw, 100px) * .012) rgba(0,0,0,.14);
  font-family: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Avenir Next", system-ui, sans-serif; user-select: none; -webkit-user-select: none;
  display: flex; flex-direction: column;
}
.nmdeed .nd-band { position: relative; background: var(--sc); color: var(--si); border: .9cqw solid #1b1f2a; border-radius: 2.4cqw; padding: 2.6cqw 3cqw 3.4cqw; text-align: center; }
.nmdeed .nd-band small { display: block; font-size: 5.6cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; line-height: 1.1; }
.nmdeed .nd-band b { display: block; font-size: 11cqw; font-weight: 900; line-height: .96; text-transform: uppercase; letter-spacing: .01em; margin-top: 1cqw; }
.nmdeed .nd-band .nm-blds { position: absolute; right: 2cqw; bottom: -4.6cqw; display: flex; gap: .6cqw; background: #fbf8ee; border: .7cqw solid #1b1f2a; border-radius: 99px; padding: .8cqw 1.8cqw; }
.nmdeed .nd-band .nm-blds svg { width: 7cqw; height: 7cqw; }
.nmdeed .nd-rows { margin: 3.4cqw 2.4cqw 0; display: flex; flex-direction: column; }
.nmdeed .nd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; font-size: 6.3cqw; font-weight: 700; color: #3b3528; padding: .75cqw 0; border-bottom: .45cqw dotted rgba(0,0,0,.2); line-height: 1.1; }
.nmdeed .nd-row b { color: #12161f; font-weight: 900; font-size: 7cqw; }
.nmdeed .nd-row.set span { color: #12161f; }
.nmdeed .nd-foot { margin: auto 1cqw 0; display: flex; flex-direction: column; gap: .4cqw; font-size: 5.2cqw; font-weight: 700; color: #5b5240; text-align: center; border-top: .7cqw solid #1b1f2a; padding-top: 1.8cqw; line-height: 1.12; }
.nmdeed .nd-art { display: flex; justify-content: center; margin: 4cqw 0 1cqw; color: #1b1f2a; }
.nmdeed .nd-art svg { width: 34cqw; height: 34cqw; }
.nmdeed .nd-util { font-size: 6.6cqw; font-weight: 700; color: #3b3528; text-align: center; line-height: 1.25; margin: 2cqw 3cqw; }
.nmdeed .nd-util b { color: #12161f; font-size: 7.6cqw; }
.nmdeed.k-transit .nd-band, .nmdeed.k-utility .nd-band { background: #fbf8ee; color: #1b1f2a; }
.nmdeed .nd-stamp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; background: repeating-linear-gradient(45deg, rgba(60,40,20,.13) 0 2cqw, rgba(251,248,238,.55) 2cqw 5cqw); }
.nmdeed .nd-stamp b { font-size: 11cqw; font-weight: 900; color: #c81e1e; border: 1.4cqw solid #c81e1e; border-radius: 3cqw; padding: 1cqw 4cqw; transform: rotate(-18deg); background: rgba(251,248,238,.92); letter-spacing: .04em; }
.nmdeed .nd-stamp span { font-size: 6.4cqw; font-weight: 800; color: #7a1414; background: rgba(251,248,238,.92); border-radius: 99px; padding: .6cqw 3cqw; transform: rotate(-18deg) translateY(4cqw); }
.nmdeed .nd-price { display: none; }
.nmdeed.fresh { animation: nm-in .55s cubic-bezier(.2,1.25,.4,1) both; }
@keyframes nm-in { from { transform: translateY(-40%) rotate(-8deg) scale(.6); opacity: 0; } }

/* ---- Rain Check and Community Centre cards (size with --cw; landscape by default) ---- */
.nmcard { width: var(--cw, 300px); aspect-ratio: 8 / 5; container-type: inline-size; position: relative; flex: none; overflow: hidden;
  border-radius: calc(var(--cw, 300px) * .05); padding: calc(var(--cw, 300px) * .045) calc(var(--cw, 300px) * .06);
  box-shadow: 0 calc(var(--cw, 300px) * .03) calc(var(--cw, 300px) * .09) rgba(0,0,0,.4), inset 0 0 0 calc(var(--cw, 300px) * .012) rgba(255,255,255,.35);
  font-family: "Avenir Next", "Futura", "Inter", Arial, sans-serif; display: flex; flex-direction: column; align-items: center; text-align: center; user-select: none; -webkit-user-select: none; }
.nmcard.d-chance { color: #fff; background: repeating-linear-gradient(105deg, rgba(255,255,255,.07) 0 .7cqw, transparent .7cqw 6cqw), linear-gradient(160deg, #46709e, #2c4a70); }
.nmcard.d-chest { color: #3a2604; background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.4), transparent 45%), linear-gradient(160deg, #fbd774, #f0b12a); }
.nmcard .nc-head { display: flex; align-items: center; gap: 2cqw; font-size: 4.6cqw; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; opacity: .92; }
.nmcard .nc-ico svg { width: 8cqw; height: 8cqw; display: block; }
.nmcard.d-chance .nc-ico svg path, .nmcard.d-chance .nc-ico svg text { filter: brightness(1.6); }
.nmcard .nc-title { font-size: 8.4cqw; font-weight: 900; line-height: 1; margin: 2.6cqw 0 2cqw; letter-spacing: -.01em; }
.nmcard .nc-text { font-size: 5.6cqw; font-weight: 600; line-height: 1.22; max-width: 92%; }
.nmcard .nc-keep { margin-top: auto; font-size: 3.8cqw; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; border-top: .4cqw solid currentColor; padding-top: 1cqw; opacity: .8; }
.nmcard.portrait { width: var(--cw, 100px); aspect-ratio: 5 / 7; padding: calc(var(--cw, 100px) * .07) calc(var(--cw, 100px) * .06); border-radius: calc(var(--cw, 100px) * .06); }
.nmcard.portrait .nc-head { flex-direction: column; font-size: 6.4cqw; letter-spacing: .1em; gap: 1cqw; }
.nmcard.portrait .nc-ico svg { width: 26cqw; height: 26cqw; }
.nmcard.portrait .nc-title { font-size: 12cqw; margin: 3cqw 0; }
.nmcard.portrait .nc-text { font-size: 7.2cqw; }
.nmcard.portrait .nc-keep { font-size: 5.6cqw; }
.nmcard.back { justify-content: center; }
.nmcard .nc-backin { position: absolute; inset: 4cqw; border-radius: 3cqw; border: .8cqw dashed rgba(255,255,255,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5cqw; }
.nmcard.d-chest .nc-backin { border-color: rgba(90,58,4,.4); }
.nmcard .nc-backin .nc-ico svg { width: 22cqw; height: 22cqw; }
.nmcard .nc-backin b { font-size: 7cqw; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.nmcard.flip { animation: nm-flip .7s cubic-bezier(.2,1.1,.3,1) both; }
@keyframes nm-flip { 0% { transform: perspective(900px) rotateY(90deg) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }

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

/* ---- the board ring (size with --B on .nm-board; children use cqw of the board) ---- */
.nm-board {
  --B: 900px; --bd-line: #08100c; --bd-sp: #1b2923; --bd-ink: #e8efe9; --bd-ink2: rgba(232,239,233,.66); --bd-mid: #13211a; --bd-jail: #c46f1d;
  width: var(--B); height: var(--B); position: relative; container-type: size; flex: none;
  display: grid; grid-template-columns: calc(var(--B) * .13) repeat(9, 1fr) calc(var(--B) * .13); grid-template-rows: calc(var(--B) * .13) repeat(9, 1fr) calc(var(--B) * .13);
  gap: calc(var(--B) * .0016); background: var(--bd-line); border: calc(var(--B) * .006) solid var(--bd-line); border-radius: calc(var(--B) * .008);
  box-shadow: 0 calc(var(--B) * .02) calc(var(--B) * .06) rgba(0,0,0,.5);
  font-family: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Avenir Next", system-ui, sans-serif; color: var(--bd-ink);
}
.nm-sp { --sp-bg: var(--bd-sp); --bar: 0px; position: relative; background: var(--bd-sp); overflow: hidden; display: grid; text-align: center; color: var(--bd-ink); }
.nm-sp.k-street { --bar: 2.5cqw; }
.nm-sp.s-b { grid-template-rows: var(--bar) auto 1fr auto; grid-template-areas: "bar" "name" "ico" "price"; }
.nm-sp.s-t { grid-template-rows: auto 1fr auto var(--bar); grid-template-areas: "price" "ico" "name" "bar"; }
.nm-sp.s-l { grid-template-columns: auto 1fr var(--bar); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "ico . bar" "ico name bar" "ico price bar" "ico . bar"; text-align: left; }
.nm-sp.s-r { grid-template-columns: var(--bar) 1fr auto; grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "bar . ico" "bar name ico" "bar price ico" "bar . ico"; text-align: left; }
.nm-sp .sp-bar { grid-area: bar; background: var(--sc); position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 .16cqw var(--bd-line); }
.nm-sp .sp-name { grid-area: name; font-size: 1.36cqw; font-weight: 800; text-transform: uppercase; line-height: 1.05; letter-spacing: .005em; padding: .55cqw .3cqw .2cqw; }
.nm-sp .sp-name.l8 { font-size: 1.24cqw; }
.nm-sp .sp-name.l9 { font-size: 1.12cqw; letter-spacing: -.01em; }
.nm-sp .sp-price { grid-area: price; font-size: 1.42cqw; font-weight: 900; padding: .2cqw .3cqw .7cqw; color: var(--bd-ink); }
.nm-sp .sp-ico { grid-area: ico; display: flex; align-items: center; justify-content: center; color: var(--bd-ink); padding: .2cqw; min-height: 0; }
.nm-sp .sp-ico svg { width: 4.4cqw; height: 4.4cqw; }
.nm-sp .sp-ico.big svg { width: 5.6cqw; height: 5.6cqw; }
.nm-sp.s-l .sp-name, .nm-sp.s-r .sp-name { padding: 0 .6cqw; font-size: 1.42cqw; }
.nm-sp.s-l .sp-name.l9, .nm-sp.s-r .sp-name.l9 { font-size: 1.22cqw; }
.nm-sp.s-l .sp-price, .nm-sp.s-r .sp-price { padding: .2cqw .6cqw 0; }
.nm-sp.s-l .sp-ico, .nm-sp.s-r .sp-ico { padding: 0 .3cqw 0 .8cqw; }
.nm-sp.s-r .sp-ico { padding: 0 .8cqw 0 .3cqw; }
.nm-sp.s-l .sp-ico svg, .nm-sp.s-r .sp-ico svg { width: 3.8cqw; height: 3.8cqw; }
.nm-sp.s-l .sp-ico.big svg, .nm-sp.s-r .sp-ico.big svg { width: 5cqw; height: 5cqw; }
.nm-sp .nm-blds { display: flex; gap: .15cqw; align-items: center; }
.nm-sp .nm-blds svg { width: 1.9cqw; height: 1.9cqw; filter: drop-shadow(0 .1cqw .1cqw rgba(0,0,0,.45)); }
.nm-sp .nm-blds svg + svg { margin-left: -.25cqw; }
.nm-sp.s-l .nm-blds, .nm-sp.s-r .nm-blds { flex-direction: column; }
.nm-sp.s-l .nm-blds svg + svg, .nm-sp.s-r .nm-blds svg + svg { margin: -.35cqw 0 0; }
.nm-sp .sp-own { position: absolute; z-index: 1; background: var(--oc); box-shadow: 0 0 0 .16cqw rgba(0,0,0,.45); }
.nm-sp.s-b .sp-own { left: 0; right: 0; bottom: 0; height: 1.1cqw; }
.nm-sp.s-t .sp-own { left: 0; right: 0; top: 0; height: 1.1cqw; }
.nm-sp.s-l .sp-own { top: 0; bottom: 0; left: 0; width: 1.1cqw; }
.nm-sp.s-r .sp-own { top: 0; bottom: 0; right: 0; width: 1.1cqw; }
.nm-sp.owned .sp-price { visibility: hidden; }
.nm-sp.mort::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.2) 0 .45cqw, transparent .45cqw 1.3cqw); pointer-events: none; }
.nm-sp.mort .sp-name { opacity: .7; }
.nm-sp.lit { box-shadow: inset 0 0 0 .5cqw #ffb800, inset 0 0 3cqw rgba(255,184,0,.6); z-index: 2; }
.nm-sp.landed { animation: nm-landed 1.6s ease-out both; z-index: 2; }
@keyframes nm-landed { 0% { box-shadow: inset 0 0 0 .7cqw #ffb800, 0 0 4cqw rgba(255,184,0,.9); } 100% { box-shadow: inset 0 0 0 0 rgba(255,184,0,0), 0 0 0 rgba(255,184,0,0); } }

/* corners */
.nm-sp.corner { display: flex; align-items: center; justify-content: center; }
.nm-sp .sp-go { position: relative; width: 100%; height: 100%; }
.nm-sp .sp-gotext { position: absolute; left: 0; right: 4%; top: 0; bottom: 34%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-45deg); line-height: 1; text-align: center; }
.nm-sp .sp-go small { font-size: 1.02cqw; font-weight: 800; text-transform: uppercase; max-width: 8.4cqw; letter-spacing: .02em; line-height: 1.1; }
.nm-sp .sp-go b { font-family: "Futura", "Avenir Next", Arial, sans-serif; font-size: 5.2cqw; font-weight: 900; color: #d0262b; letter-spacing: -.02em; margin-top: .2cqw; }
.nm-sp .sp-goarrow { position: absolute; left: 10%; right: 10%; bottom: 6%; display: flex; justify-content: center; transform: scaleX(-1); }
.nm-sp .sp-goarrow svg { width: 9cqw; height: 3.4cqw; }
.nm-sp .sp-corner { display: flex; flex-direction: column; align-items: center; gap: .3cqw; transform: rotate(45deg); font-size: 1.8cqw; font-weight: 900; letter-spacing: .04em; }
.nm-sp.c-tr .sp-corner { transform: rotate(-135deg) rotate(180deg); }
.nm-sp .sp-corner svg { width: 5.4cqw; height: 5.4cqw; color: var(--bd-ink); }
.nm-sp .sp-jail { position: relative; width: 100%; height: 100%; }
.nm-sp .sp-jail .cell { position: absolute; right: 0; top: 0; width: 68%; height: 68%; background: var(--bd-jail); display: flex; align-items: center; justify-content: center; border-left: .3cqw solid var(--bd-line); border-bottom: .3cqw solid var(--bd-line); }
.nm-sp .sp-jail .bars { position: absolute; inset: 12% 10%; background: repeating-linear-gradient(90deg, rgba(20,12,4,.55) 0 .5cqw, transparent .5cqw 1.7cqw); border-radius: .3cqw; }
.nm-sp .sp-jail .cell b { position: relative; font-size: 1.7cqw; font-weight: 900; line-height: 1; color: #fff; background: rgba(20,12,4,.65); padding: .4cqw .7cqw; border-radius: .4cqw; transform: rotate(45deg); }
.nm-sp .sp-jail .jv1 { position: absolute; left: .4cqw; top: 34%; font-size: 1.4cqw; font-weight: 900; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .1em; }
.nm-sp .sp-jail .jv2 { position: absolute; left: 32%; right: 0; bottom: .6cqw; font-size: 1.4cqw; font-weight: 900; letter-spacing: .08em; text-align: center; }

/* the middle */
.nm-mid { position: relative; background: var(--bd-mid); overflow: hidden; }
.nm-logo { display: inline-flex; flex-direction: column; align-items: center; font-family: "Futura", "Avenir Next", Arial, sans-serif; line-height: 1; transform: rotate(-4deg); }
.nm-logo .nm-lnot { font-weight: 900; font-size: 2.2cqw; letter-spacing: .5em; padding: .2cqw .6cqw .2cqw 1.2cqw; background: #ffd23f; color: #1b1f2a; margin-bottom: -.6cqw; z-index: 1; transform: rotate(5deg); box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.35); }
.nm-logo .nm-lword { font-weight: 900; font-size: 6.4cqw; letter-spacing: .06em; padding: .6cqw 2.4cqw .5cqw; background: #d0262b; color: #fff; border: .5cqw solid #fff; outline: .45cqw solid #d0262b; box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.45); }
/* Store edition: two lines, navy, no NOT tag. */
.nm-logo.st .nm-lword { background: #1f3a5f; outline-color: #1f3a5f; line-height: 1.04; text-align: center; }
.nm-logo .nm-led { margin-top: 1cqw; font-weight: 800; font-size: 1.5cqw; letter-spacing: .34em; padding: .35cqw .8cqw .35cqw 1.2cqw; color: #fff; background: #0e7490; transform: rotate(4deg); box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.3); }

/* ---- light theme ---- */
[data-theme="light"] .nm-board { --bd-line: #1d2b23; --bd-sp: #f6f2e3; --bd-ink: #17211b; --bd-ink2: rgba(23,33,27,.66); --bd-mid: #d6eadb; --bd-jail: #f08a24; box-shadow: 0 calc(var(--B) * .02) calc(var(--B) * .06) rgba(30,60,40,.28); }
[data-theme="light"] .nm-sp.mort::after { background: repeating-linear-gradient(45deg, rgba(60,40,20,.16) 0 .45cqw, transparent .45cqw 1.3cqw); }
[data-theme="light"] .nmdeed { box-shadow: 0 calc(var(--cw, 100px) * .03) calc(var(--cw, 100px) * .1) rgba(30,40,80,.22), inset 0 0 0 calc(var(--cw, 100px) * .012) rgba(0,0,0,.14); }
[data-theme="light"] .nmcard { box-shadow: 0 calc(var(--cw, 300px) * .03) calc(var(--cw, 300px) * .09) rgba(30,40,80,.25), inset 0 0 0 calc(var(--cw, 300px) * .012) rgba(255,255,255,.35); }
/* keep names clear of the owner's strip on the side columns */
.nm-sp.owned.s-l .sp-name, .nm-sp.owned.s-l .sp-price { padding-left: 1.7cqw; }
.nm-sp.owned.s-l .sp-ico { padding-left: 1.7cqw; }
.nm-sp.owned.s-r .sp-ico { padding-right: 1.7cqw; }
.nm-sp.owned.s-b .sp-ico { padding-bottom: 1.2cqw; }
.nm-sp.owned.s-t .sp-ico { padding-top: 1.2cqw; }