/* Glazed tiles rendered as ink patterns on warm newsprint. */
html[data-theme="newspaper"] #game-dialog .mosaic-grid{--region-border:#77766b;border-color:#77766b;background:#bdb9ac}
html[data-theme="newspaper"] #game-dialog .mosaic-grid .entry-cell.cell{
 background-color:#eeeadf;background-image:var(--tile-pattern);background-size:12px 12px;
 color:#34332c;border-color:#c8c4b7;box-shadow:inset 0 0 0 2px #faf7edcc;
 font:23px/1 Georgia,'Times New Roman',serif;text-shadow:0 0 3px #f4f0e3,0 0 3px #f4f0e3;
}
html[data-theme="newspaper"] #game-dialog .mosaic-grid .entry-cell.cell.fixed{font-weight:700;color:#34332c;background-color:#dfdbcf}
html[data-theme="newspaper"] #game-dialog .mosaic-grid .entry-cell.cell.selected{outline:2px solid #34332c;outline-offset:-5px;background-color:#f7f3e8}
html[data-theme="newspaper"] #game-dialog .mosaic-grid .entry-cell.cell:hover:not(.selected){background-color:#f4f0e5}
html[data-theme="newspaper"] .tectonic-card-preview{background:#f4f0e3;border-color:#77766b}
html[data-theme="newspaper"] .tectonic-card-preview .preview-grid{stroke:#c8c4b7}
html[data-theme="newspaper"] .tectonic-card-preview .preview-regions{stroke:#77766b}
html[data-theme="newspaper"] .tectonic-card-preview text{fill:#34332c;paint-order:stroke fill;stroke:#f4f0e3;stroke-width:1.5px;stroke-linejoin:round}

/* Shared SVG rules meet cleanly, matching Air Strike's border construction. */
html[data-theme="newspaper"] #game-dialog .mosaic-grid{position:relative;isolation:isolate;border-width:3px}
html[data-theme="newspaper"] #game-dialog .mosaic-grid .entry-cell.cell{border:0;box-shadow:none}
html[data-theme="newspaper"] #game-dialog .mosaic-grid.air-wave-running{border-color:transparent;background:transparent}
.mosaic-grid.air-wave-running>.air-grid-rules{visibility:hidden}
.entry-cell>.air-wave-rules{visibility:visible;overflow:hidden}

/* Optional illustrated rules: a second card alongside the puzzle. */
.mosaic-play{min-width:0}
.mosaic-explanation-toggle{display:block;margin:-3px 0 20px;padding:7px 13px;border:1px solid #77766b;background:transparent;color:#494437;font:13px Georgia,serif;cursor:pointer}
.mosaic-explanation-toggle:hover{background:#e8e2d2}
.mosaic-explanation-toggle:focus-visible,.mosaic-guide button:focus-visible{outline:2px solid #77766b;outline-offset:3px}
.mosaic-guide{position:fixed;inset:auto;margin:0;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;box-shadow:6px 6px 0 #24241b20;padding:17px;border:1px solid #a69a7e;background:#eee8d9;color:#494437;min-width:0}
.mosaic-guide[hidden]{display:none}
.mosaic-guide-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}
.mosaic-guide h3{font:700 22px/1.15 Georgia,serif;margin:0}
.mosaic-guide h3:focus{outline:none}
.mosaic-guide-heading button{border:0;background:none;color:inherit;padding:0 3px;font:24px/1 Georgia,serif;cursor:pointer}
.mosaic-guide p,.mosaic-guide figcaption{font:13px/1.5 Georgia,serif}
.mosaic-guide p{margin:12px 0 18px}
.mosaic-guide figure{margin:0 0 18px}
.mosaic-guide figure:last-child{margin-bottom:0}
.mosaic-guide img{display:block;width:100%;height:auto;border:1px solid #c6bfac;background:#f4f0e3}
.mosaic-guide figcaption{margin-top:8px}
html[data-colour-mode="monochrome"] .mosaic-guide img{filter:grayscale(1)}
@media(max-width:800px){
 .mosaic-guide img{max-width:340px;margin:0 auto}
}

/* Phones use a sheet over the unchanged puzzle rather than a narrow side card. */
@media(max-width:600px){
 .mosaic-guide{border-radius:18px 18px 0 0;border-bottom:0;padding:0 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -8px 32px #29282035;scroll-padding-top:76px}
 .mosaic-guide:popover-open{animation:mosaic-sheet-arrive 220ms ease-out}
 .mosaic-guide::backdrop{background:#29282066;pointer-events:auto}
 .mosaic-guide-heading{position:sticky;top:0;z-index:1;background:#eee8d9;align-items:center;padding:22px 0 14px;margin-bottom:8px;border-bottom:1px solid #c6bfac}
 .mosaic-guide-heading::before{content:"";position:absolute;top:8px;left:calc(50% - 18px);width:36px;height:4px;border-radius:2px;background:#a69a7e}
 .mosaic-guide-heading button{display:grid;place-items:center;min-width:44px;min-height:44px;font-size:28px}
 .mosaic-guide p,.mosaic-guide figcaption{font-size:14px;line-height:1.55}
}
@keyframes mosaic-sheet-arrive{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(min-width:601px){
 .mosaic-guide:popover-open{animation:mosaic-guide-arrive 240ms cubic-bezier(.2,.75,.25,1)}
}
@keyframes mosaic-guide-arrive{from{opacity:0;translate:-14px 0}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.mosaic-guide:popover-open{animation:none}}