/* ============================================================
   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:6px;background:var(--panel);
  position:relative;overflow:hidden;flex:none;font-family:var(--font);}
.pv--sm{width:46px;height:46px;border-radius:5px;}

.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;}

/* Patchwork — a little quilt of fabric squares */
.pv.patchwork{display:grid;grid-template:repeat(4,1fr)/repeat(4,1fr);gap:2px;background:var(--raised);padding:5px;}
.pv.patchwork i{border-radius:3px;background:#E8E1CE;}
.pv.patchwork i.a{background:#B8674F;}
.pv.patchwork i.b{background:#6E8B6E;}
.pv.patchwork i.c{background:#7C8CA8;}

/* The Studio — three colourful brush strokes on paper */
.pv.studio{background:var(--raised);}
.pv.studio b{position:absolute;border-radius:6px;}
.pv.studio .st-a{left:14%;top:22%;width:56%;height:9%;background:#C63A2C;transform:rotate(-8deg);}
.pv.studio .st-b{left:20%;top:45%;width:52%;height:9%;background:#3D6DA8;transform:rotate(5deg);}
.pv.studio .st-c{left:16%;top:66%;width:46%;height:9%;background:#7FB350;transform:rotate(-4deg);}

/* Read the Label — a packet with its little label */
.pv.labels{background:var(--raised);}
.pv.labels .lb-box{position:absolute;left:22%;top:20%;width:44%;height:54%;
  border:1.5px solid var(--line);border-radius:4px;background:var(--covered);}
.pv.labels .lb-tag{position:absolute;left:52%;top:52%;width:26%;height:20%;
  border:1.5px solid var(--sage);border-radius:3px;background:var(--panel);}

/* How Long Does It Last? — three bars, shortest to longest */
.pv.howlong{background:var(--raised);}
.pv.howlong b{position:absolute;left:16%;height:12%;border-radius:6px;background:var(--slate);opacity:.75;}
.pv.howlong .hl-a{top:24%;width:22%;}
.pv.howlong .hl-b{top:46%;width:42%;}
.pv.howlong .hl-c{top:68%;width:66%;}

.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;}


/* Match It Up — two columns of cards waiting to be paired */
.pv.match b{position:absolute;height:15%;border-radius:2px;border:1px solid var(--line-2);
  background:var(--panel);}
.pv.match .mt-l{left:8%;width:36%;}
.pv.match .mt-r{right:8%;width:36%;border-style:dashed;background:transparent;}


/* ---------------- worlds ----------------
   A world's picture has to read at a glance and at thumbnail size, so each
   is one shape and nothing else. Drawn here rather than as an image so it
   follows the theme - a world card sits next to game cards and must not
   look like it came from somewhere else. */
.pv.w-world,.pv.w-creatures,.pv.w-making{background:var(--raised);
  display:flex;align-items:center;justify-content:center;}
.pv.w-world b{width:52%;aspect-ratio:1;border-radius:50%;
  border:1.5px solid var(--accent);position:relative;}
/* A meridian and an equator. Rotating an arc of the same circle was the first
   attempt and drew nothing at all - a circle turned about its own centre lands
   exactly on itself. The meridian has to be a NARROWER ellipse to read. */
.pv.w-world b::before{content:"";position:absolute;top:-1.5px;bottom:-1.5px;left:50%;
  width:46%;transform:translateX(-50%);border:1.5px solid var(--accent);border-radius:50%;}
.pv.w-world b::after{content:"";position:absolute;left:-1.5px;right:-1.5px;top:50%;
  height:0;border-top:1.5px solid var(--accent);}

/* a paw: one pad, three toes */
.pv.w-creatures b{width:26%;aspect-ratio:1/.86;border-radius:46% 46% 42% 42%;
  border:1.5px solid var(--sage);margin-top:9%;}
.pv.w-creatures i{position:absolute;width:9%;aspect-ratio:1/1.25;border-radius:50%;
  border:1.5px solid var(--sage);}
.pv.w-creatures i:nth-of-type(1){left:31%;top:27%;transform:rotate(-20deg);}
.pv.w-creatures i:nth-of-type(2){left:45.5%;top:22%;}
.pv.w-creatures i:nth-of-type(3){left:60%;top:27%;transform:rotate(20deg);}

.pv.w-making{gap:7%;}
.pv.w-making b{width:27%;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--clay);}
.pv.w-making b:last-child{width:17%;opacity:.7;}


/* Take a Journey — a road bending across the town, with two stops on it */
.pv.journey{background:var(--raised);}
.pv.journey .jy-road{position:absolute;background:var(--line-2);border-radius:2px;}
.pv.journey .jy-h{height:3px;}
.pv.journey .jy-v{width:3px;}
.pv.journey .jy-stop{position:absolute;width:11px;height:11px;border-radius:3px;
  border:1.5px solid var(--slate);background:var(--panel);}
.pv.journey .jy-end{border-color:var(--accent);}