/* Tessera: a dark terrazzo table, slate tiles edged in their owner's colour, cut gems, and
   ivory half-shapes that join into whole ones. */
body[data-game="tessera"] #felt {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .03) 0 1px, transparent 2px) 0 0 / 23px 23px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .025) 0 1px, transparent 2px) 0 0 / 31px 31px,
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(230, 220, 200, .07), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, #2c2a33 0%, #1d1c23 55%, #0c0b10 100%);
}
body[data-game="tessera"] #print, body[data-game="tessera"] .fan, body[data-game="tessera"] .sizer { display: none; }

.ts-svg { display: block; overflow: visible; }
.ts-body { fill: #3b3d48; stroke: var(--tc); stroke-width: .9; }
.ts-tile .ts-body { fill: color-mix(in srgb, var(--tc) 14%, #34363f); }
.ts-grid { stroke: rgba(255, 255, 255, .08); stroke-width: .3; fill: none; }
.ts-gem path:first-child { fill: var(--tc); stroke: rgba(0, 0, 0, .45); stroke-width: .35; }
.ts-gem .facet { fill: rgba(255, 255, 255, .22); stroke: rgba(255, 255, 255, .35); stroke-width: .2; }
.ts-sym { fill: #efe6cf; stroke: rgba(0, 0, 0, .3); stroke-width: .2; }
.ts-tile.last .ts-body { stroke: #fff3d6; stroke-width: 1.2; filter: drop-shadow(0 0 1.6px rgba(255, 240, 200, .8)); }
.ts-tile.ghost { opacity: .78; }
.ts-tile.ghost .ts-body { stroke-dasharray: 2 1.2; stroke: #fff3d6; stroke-width: 1; }
.ts-dot { fill: rgba(255, 243, 214, .35); stroke: #fff3d6; stroke-width: .6; cursor: pointer; }
.ts-dot.on { fill: #f6d27a; }

#tessera { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; }
.ts-board { position: absolute; left: 0; top: 0; width: var(--bw); height: var(--bw); transform: translate(-50%, -52%); display: grid; place-items: center; }
.ts-board .ts-svg { max-width: 100%; max-height: 100%; width: 100%; height: 100%; filter: drop-shadow(0 1.4vmin 2.4vmin rgba(0, 0, 0, .5)); }
.ts-msg { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(var(--bw) * -.5 - var(--v) * 4.5)); margin: 0; white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: calc(var(--v) * 2.1); color: var(--ivory); }
.ts-msg b { font-style: normal; font-family: var(--display); font-weight: 600; color: var(--champagne-hi); }

/* ---------- phone ---------- */
body[data-game="tessera"] { background: linear-gradient(180deg, #2a2832, #0c0b10); }
body[data-game="tessera"] #handWrap, body[data-game="tessera"] #handHint { display: none; }
#tsPhone { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 10px; }
.ts-wrap { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 0, 0, .25); padding: 6px; box-sizing: border-box; }
.ts-wrap .ts-svg { width: 100%; height: 100%; }
.ts-choices { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ts-choices > button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 12px; border: 1px solid var(--gold-faint); background: rgba(0, 0, 0, .25); cursor: pointer; }
.ts-choices > button.on { border-color: var(--champagne); box-shadow: 0 0 0 1px var(--champagne); }
.ts-choices small { font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.ts-one { width: 76px; height: 76px; }
.ts-rot { display: flex; flex-direction: column; gap: 6px; }
.ts-rot .panel-btn { min-width: 52px; font-size: 22px; padding: 6px 10px; }