/* The Crossed Racks board, shared by the puzzle book and a letter's free sample (2026-10-19).
   Drawn by /puzzle-book/crossed.js. Each page may set the --xr-* colours on .xr-play;
   the book's own paper colours are the fallback. */
.xr-play{--xr-hi:var(--teal,#157F75);--xr-hi-soft:var(--teal-soft,#D5EEEA);--xr-hi-line:#BFE4E0;--xr-good:var(--good,#2E7D4F);--xr-bad:var(--bad,#B4483F); /* theme-ok: the puzzle is printed paper, light in every theme */
  --xr-num:#85671F;--xr-dash:#B5A27E;--xr-cellbg:rgba(255,255,255,.75); /* theme-ok: the puzzle is printed paper, light in every theme */
  display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media(min-width:820px){.xr-play.xwrap{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.xr-play .grid{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:2px;width:100%;max-width:640px;padding:22px 0 0 22px}
.xr-play .cell{aspect-ratio:544/752;position:relative;border-radius:4px}
.xr-play .cell.on{background:var(--xr-cellbg);border:1px dashed var(--xr-dash);cursor:pointer}
.xr-play .cell.on.full{border:0;background:transparent}
.xr-play .cell.given{cursor:default}
.xr-play .cell img{width:100%;height:100%;display:block;border-radius:4px;pointer-events:none}
/* the clue number sits outside the rack: left of an across rack, above a down rack (#793) */
.xr-play .cell .num{position:absolute;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;background:var(--xr-num);color:#fff;z-index:3;pointer-events:none}
.xr-play .cell .num.a{right:calc(100% + 3px);top:50%;transform:translateY(-50%)}
.xr-play .cell .num.d{bottom:calc(100% + 3px);left:50%;transform:translateX(-50%)}
.xr-play .cell.sel{outline:2px solid var(--xr-hi);outline-offset:1px;z-index:2}
.xr-play .cell.hl:not(.sel){box-shadow:0 0 0 2px var(--xr-hi-line)}
.xr-play .cell.on.right{box-shadow:0 0 0 2.5px var(--xr-good)} .xr-play .cell.on.wrong{box-shadow:0 0 0 2.5px var(--xr-bad)}
.xr-play .cell.over{outline:3px dashed var(--xr-hi);outline-offset:2px}
.xr-play .cluelist h4{font-family:var(--display,'Playfair Display',Georgia,serif);font-size:17px;margin:0 0 6px}
.xr-play .cluelist ol{list-style:none;padding:0;margin:0 0 14px}
.xr-play .cluelist li{padding:8px 10px;border-radius:10px;cursor:pointer;font-family:var(--voice,'Crimson Text',Georgia,serif);font-size:18px;line-height:1.35}
.xr-play .cluelist li b{font-family:var(--ui,'Lato',Arial,sans-serif);font-size:13px;color:var(--xr-num);margin-right:6px}
.xr-play .cluelist li.on{background:var(--xr-hi-soft)}
/* a tile being dragged follows the finger, wherever the puzzle sits */
.ghost-drag{position:fixed;pointer-events:none;z-index:50;transform:translate(-50%,-60%) scale(1.08);filter:drop-shadow(0 10px 14px rgba(40,25,10,.35))}