/* Three material families. Decoration never changes grid geometry or hit areas. */
.wood-detail,.linen-detail,.stone-detail{display:none;pointer-events:none}
:root[data-theme="wood"] :is(#board,#target,#stamp) .wood-detail,.skin-preview[data-material="wood"] .wood-detail,
:root[data-theme="linen"] :is(#board,#target,#stamp) .linen-detail,.skin-preview[data-material="linen"] .linen-detail,
:root[data-theme="stone"] :is(#board,#target,#stamp) .stone-detail,.skin-preview[data-material="stone"] .stone-detail{display:block}

:root[data-theme="wood"],.skin-preview[data-material="wood"]{
  --room-image:url('../assets/wood-room.png');--paper:#e9c999;--board:#997044;--ink:#42291e;--muted:#63432e;
  --line:#8b5c37;--accent:#694127;--accent-hover:#523019;--soft:#b98d5480;--control-line:#79522b80;--control-hover:#e9c491;
  --target-line:#986a40;--mini-line:#956b43;--empty:#a78050;--stamp-empty:#997148;--board-empty:#a78050;
  --won-board:#997044;--won-line:#5e3820;--dialog-shadow:#36201040;--backdrop:#39281c88;--tile-fill:url('#wood-stock');
}
:root[data-theme="linen"],.skin-preview[data-material="linen"]{
  --room-image:url('../assets/linen-room.png');--paper:#eee5d8;--board:#c8bca9;--ink:#624759;--muted:#735e69;
  --line:#ab948f;--accent:#77556b;--accent-hover:#614357;--soft:#ba9aaa55;--control-line:#a48a926e;--control-hover:#e4d5d7;
  --target-line:#b59fa0;--mini-line:#aa9396;--empty:#ada096;--stamp-empty:#a08b8e;--board-empty:#ada096;
  --won-board:#c8bca9;--won-line:#87677b;--dialog-shadow:#52404730;--backdrop:#50444b66;--tile-fill:url('#linen-stock');
}
:root[data-theme="stone"],.skin-preview[data-material="stone"]{
  color-scheme:dark;--room-image:url('../assets/stone-room.png');--paper:#263540;--board:#17232e;--ink:#e1eaf0;--muted:#b7c8d3;
  --line:#8299ad;--accent:#c3dbe8;--accent-hover:#e7f3fa;--soft:#748fa04d;--control-line:#9ab0c177;--control-hover:#456070;
  --target-line:#8da4b7;--mini-line:#788fa1;--empty:#788e9f;--stamp-empty:#859caa;--board-empty:#839cac;
  --won-board:#17232e;--won-line:#cfdfeb;--dialog-shadow:#07111a88;--backdrop:#08121bd6;--tile-fill:url('#stone-stock');
}

:root:is([data-theme="wood"],[data-theme="linen"],[data-theme="stone"]) .material-tile,
.skin-preview:is([data-material="wood"],[data-material="linen"],[data-material="stone"]) .preview-tile{
  display:block;fill:var(--tile-fill);stroke:none;rx:5px;pointer-events:none;
}
:root:is([data-theme="wood"],[data-theme="linen"],[data-theme="stone"]) :is(.board-line,.mini-line,#board .anchor),
.skin-preview:is([data-material="wood"],[data-material="linen"],[data-material="stone"]) .preview-grid{display:none}
:root:is([data-theme="wood"],[data-theme="linen"],[data-theme="stone"]) :is(.board-bg,.target-frame,.stamp-frame),
.skin-preview:is([data-material="wood"],[data-material="linen"],[data-material="stone"]) .preview-surface{fill:var(--board);stroke:var(--target-line);stroke-width:1.6;filter:none}
:root:is([data-theme="wood"],[data-theme="linen"],[data-theme="stone"]) .mini-outline{display:block;stroke:var(--target-line);stroke-width:1.4}
:root:is([data-theme="wood"],[data-theme="linen"],[data-theme="stone"]) #stamp .mini-outline{stroke:var(--accent);stroke-width:1.8}
:root:is([data-theme="wood"],[data-theme="linen"],[data-theme="stone"]) .same-pattern #stamp .mini-outline{stroke-width:3}
:root:is([data-theme="wood"],[data-theme="linen"],[data-theme="stone"]) .title-rule{background:linear-gradient(90deg,transparent,var(--control-line),transparent)}
:root:is([data-theme="wood"],[data-theme="linen"],[data-theme="stone"]) .board-wrap{box-shadow:none}
:root:is([data-theme="wood"],[data-theme="linen"],[data-theme="stone"]) .controls .icon{border-radius:12px}

/* Carved oak squares, fine routed joints, dark walnut inlays. */
:root[data-theme="wood"] .board-wrap,.skin-preview[data-material="wood"] svg{filter:drop-shadow(0 3px 1px #765032b3) drop-shadow(2px 8px 6px #63422540)}
:root[data-theme="wood"] #target{filter:drop-shadow(0 2px 1px #79512e66)}
:root[data-theme="wood"] #stamp{filter:drop-shadow(0 3px 1px #654328b3) drop-shadow(1px 5px 4px #51382144)}
:root[data-theme="wood"] :is(.mark,.transfer-mark),.skin-preview[data-material="wood"] .preview-mark{filter:url('#wood-inlay');stroke:#38251b;stroke-width:.55;stroke-opacity:.8}
:root[data-theme="wood"] .controls .icon{background:linear-gradient(140deg,#eed2a6,#dab27d 75%,#c99e64);border-color:#9d764c;box-shadow:inset 0 1px 0 #fff0c999,0 2px 1px #79533470}
:root[data-theme="wood"] dialog{background-image:linear-gradient(#f0d8b3ca,#f0d8b3ca),var(--room-image)}

/* Nine padded linen panels, embroidered seams and plum thread marks. */
:root[data-theme="linen"] body::before,:root[data-theme="linen"] .title-screen{background-image:radial-gradient(ellipse at center,#eee5d8b8 30%,#eee5d84d 75%,transparent),var(--room-image)}
:root[data-theme="linen"] .material-tile,.skin-preview[data-material="linen"] .preview-tile{rx:4px}
:root[data-theme="linen"] .board-wrap,.skin-preview[data-material="linen"] svg{filter:drop-shadow(1px 3px 2px #6f56653d) drop-shadow(2px 6px 5px #58414e24)}
:root[data-theme="linen"] #stamp{filter:drop-shadow(1px 3px 2px #6b4c635c)}
:root[data-theme="linen"] #target{filter:drop-shadow(1px 2px 1px #6b4c632e)}
:root[data-theme="linen"] :is(.mark,.transfer-mark),.skin-preview[data-material="linen"] .preview-mark{filter:url('#linen-thread');stroke:#94798b;stroke-width:.8;stroke-dasharray:1.3 .7;stroke-opacity:.9}
:root[data-theme="linen"] .controls .icon{border-radius:11px;border-style:dashed;background:linear-gradient(140deg,#f6ede3,#e1d2cf);box-shadow:inset 0 1px 0 #fff9,1px 2px 2px #7957692e}
:root[data-theme="linen"] dialog{background-image:linear-gradient(#f4eae1cb,#f4eae1cb),var(--room-image)}

/* Honed slate squares, silver mineral edges and inset moonstone circles. */
:root[data-theme="stone"] .board-wrap,.skin-preview[data-material="stone"] svg{filter:drop-shadow(0 3px 1px #08131dbb) drop-shadow(2px 8px 7px #060f1955)}
:root[data-theme="stone"] #stamp{filter:drop-shadow(0 3px 1px #0a1520aa) drop-shadow(1px 5px 4px #060f1944)}
:root[data-theme="stone"] #target{filter:drop-shadow(0 2px 1px #0a152077)}
:root[data-theme="stone"] :is(.mark,.transfer-mark),.skin-preview[data-material="stone"] .preview-mark{filter:url('#moonstone-inlay');stroke:#f3f7fb;stroke-width:.35;stroke-opacity:.6}
:root[data-theme="stone"] .controls .icon{background:linear-gradient(145deg,#425766,#283d4d);border-color:#8099ac;box-shadow:inset 0 1px 0 #d3e7f033,0 2px 2px #07132180}
:root[data-theme="stone"] .title-emblem{filter:drop-shadow(0 1px 2px #07121b80)}
:root[data-theme="stone"] dialog{background-image:linear-gradient(#263540dd,#263540dd),var(--room-image)}
:root[data-theme="stone"] .select-tint{opacity:.11}
:root[data-theme="stone"] .select-outline{stroke-width:2.3;filter:drop-shadow(0 0 1px #d1e8f366)}

@media(max-width:600px) and (orientation:portrait){
  :root:is([data-theme="wood"],[data-theme="linen"],[data-theme="stone"]){--portrait-art-position:left top,right bottom;--portrait-art-opacity:.8;--portrait-corner-width:clamp(90px,27vw,150px)}
  :root[data-theme="stone"]{--portrait-art-opacity:.7}
}