/* ============================================================
   TWO CONKERS — MINIATURE BOARD PREVIEWS
   The game's "picture" is its real board in miniature — no mascots,
   no key art; the task is the art. Markup comes from lib/qh.js
   (QH.pvHTML). Colours come from platform-theme.css only.
   ============================================================ */

.pv{width:74px;height:74px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  position:relative;overflow:hidden;flex:none;font-family:var(--font);}
.pv--sm{width:46px;height:46px;border-radius:8px;}

.pv.meadow{background:repeating-conic-gradient(var(--covered) 0% 25%, var(--covered-2) 0% 50%);background-size:37px 37px;}
.pv--sm.meadow{background-size:23px 23px;}
.pv.meadow b{position:absolute;width:18.5px;height:18.5px;background:var(--dug);
  font:700 10px/18px var(--font);text-align:center;}
.pv.meadow .flag{position:absolute;width:18.5px;height:18.5px;font:600 10px/18px var(--font);
  text-align:center;color:var(--clay);}
.pv--sm.meadow b,.pv--sm.meadow .flag{display:none;}

.pv.sudoku{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);background:var(--raised);}
.pv.sudoku i{border:.5px solid var(--line);font:600 11px/23px var(--font);font-style:normal;
  text-align:center;color:var(--blue);}
.pv--sm.sudoku i{font-size:8px;line-height:14px;}

.pv.words{display:grid;grid-template:repeat(4,1fr)/repeat(4,1fr);background:var(--raised);}
.pv.words span{font:500 9.5px/18px var(--font);text-align:center;color:var(--faint);}
.pv.words span.hit{color:var(--clay);font-weight:700;background:rgba(168,94,51,.09);}
.pv--sm.words span{font-size:7px;line-height:11px;}

.pv.trail{background:var(--raised);}
.pv.trail u{position:absolute;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);font:650 10px/17px var(--font);text-align:center;text-decoration:none;color:var(--blue);}
.pv.trail u.next{border-color:var(--slate);color:var(--slate);}

.pv.forge{background:var(--raised);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;}
.pv.forge .slots,.pv.forge .loose{display:flex;gap:4px;}
.pv.forge .sl{width:15px;height:19px;border-bottom:2px solid var(--line);
  font:700 11px/17px var(--font);text-align:center;color:var(--clay);}
.pv.forge .lt{width:15px;height:19px;border:1px solid var(--line);border-radius:3px;background:var(--panel);
  font:600 10px/18px var(--font);text-align:center;color:var(--soft);}

.pv.ladder{background:var(--raised);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.pv.ladder .tgt{font:650 10px var(--font);color:var(--slate);margin-bottom:2px;}
.pv.ladder .blk{border:1px solid var(--line);border-radius:3px;background:var(--panel);
  font:600 9.5px/14px var(--font);text-align:center;color:var(--blue);}

.pv.slide{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:2px;background:var(--raised);padding:5px;}
.pv.slide i{border:1px solid var(--line);border-radius:3px;background:var(--panel);font-style:normal;
  font:600 10px/19px var(--font);text-align:center;color:var(--blue);}
.pv.slide i.gap{border:0;background:transparent;}

.pv.dominoes{background:var(--raised);display:flex;align-items:center;justify-content:center;gap:6px;}
.pv .dom{width:17px;height:40px;border:1px solid var(--line);border-radius:4px;background:var(--panel);position:relative;}
.pv .dom::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;background:var(--line);}
.pv .dom.a{background-image:radial-gradient(2px 2px at 5px 7px, var(--ink) 97%, transparent),
  radial-gradient(2px 2px at 11px 13px, var(--ink) 97%, transparent),
  radial-gradient(2px 2px at 8px 30px, var(--ink) 97%, transparent);}
.pv .dom.b{background-image:radial-gradient(2px 2px at 8px 10px, var(--ink) 97%, transparent),
  radial-gradient(2px 2px at 5px 27px, var(--ink) 97%, transparent),
  radial-gradient(2px 2px at 11px 33px, var(--ink) 97%, transparent);}

.pv.codeword{display:grid;grid-template:repeat(2,1fr)/repeat(3,1fr);background:var(--raised);}
.pv.codeword i{border:.5px solid var(--line);position:relative;font-style:normal;
  font:600 11px/37px var(--font);text-align:center;color:var(--clay);}
.pv.codeword i::before{content:attr(data-n);position:absolute;top:2px;left:3px;
  font-size:6.5px;line-height:1;color:var(--faint);font-weight:500;}

.pv.pairs{background:var(--raised);display:grid;grid-template:repeat(2,1fr)/repeat(2,1fr);gap:4px;padding:8px;}
.pv.pairs i{border:1px solid var(--line);border-radius:4px;background:var(--covered);font-style:normal;
  font:650 12px/24px var(--font);text-align:center;color:var(--slate);}
.pv.pairs i.up{background:var(--panel);}

.pv.recall{background:var(--raised);display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:5px;padding:10px;}
.pv.recall span{font:600 10px var(--font);color:var(--ink);}
.pv.recall span.faded{color:var(--faint);}

.pv.garden{display:grid;grid-template:repeat(4,1fr)/repeat(4,1fr);gap:2px;background:var(--raised);padding:5px;}
.pv.garden i{border-radius:3px;background:#E4DCC6;}
.pv.garden i.g-f{background:radial-gradient(circle at 50% 45%, #B0654A 0 26%, #DCE4C8 30%);}
.pv.garden i.g-w{background:#A9C4CC;}
.pv.garden i.g-s{background:radial-gradient(ellipse at 45% 40%, #a7a196, #746e64 75%);}
.pv.garden i.g-p{background:#D8C9A4;}
.pv.garden i.g-e{background:#E7E0CB;}

.pv.bridge{background:linear-gradient(180deg,var(--raised) 62%, #E9E2CC 62%);}
.pv.bridge .b-cliff{position:absolute;bottom:0;width:26%;height:52%;background:#C9B489;border-radius:6px 6px 0 0;}
.pv.bridge .b-cliff.l{left:0;}
.pv.bridge .b-cliff.r{right:0;}
.pv.bridge .b-plank{position:absolute;height:3px;background:#8C6A45;border-radius:2px;}

.pv.web{background:var(--raised);}
.pv.web .w-sun{position:absolute;top:8%;left:40%;width:20%;height:20%;border-radius:50%;
  background:radial-gradient(circle,#EAD9A0 0 55%,transparent 60%);border:1.5px solid #D9C078;}
.pv.web .w-node{position:absolute;width:26%;height:16%;border:1px solid var(--line);border-radius:6px;background:var(--panel);}
.pv.web .w-node.g{border-color:var(--sage);}
.pv.web .w-line{position:absolute;width:1.5px;background:var(--sage);opacity:.6;}

.pv.lantern{background:var(--raised);}
.pv.lantern .l-beam{position:absolute;background:rgba(214,178,94,.55);border-radius:2px;}
.pv.lantern .l-beam.h{height:3px;}
.pv.lantern .l-beam.v{width:3px;}
.pv.lantern .l-mirror{position:absolute;width:14%;height:3px;background:var(--slate);transform:rotate(45deg);}
.pv.lantern .l-lamp{position:absolute;width:13%;height:16%;border:1.5px solid #B08D4C;border-radius:4px;
  background:radial-gradient(circle,#EAD9A0 0 40%,transparent 60%);}

.pv.maketen{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);background:var(--raised);}
.pv.maketen i{border:.5px solid var(--line);font:600 12px/23px var(--font);font-style:normal;
  text-align:center;color:var(--blue);}
.pv.maketen i.x{color:var(--faint);opacity:.35;}