/* GRAPHICS PASS B — quieter engraved puzzle tablets, scribe's paper,
   and a clear difficulty symbol system.
   All decorative layers ignore pointer events and reserve no new
   vertical space in the student interface. */

/* Small geometric medals: the text difficulty label remains visible. */
.home-card-number {
  display:flex!important;align-items:center;justify-content:space-between;
  gap:5px;min-height:20px;line-height:1.15;
}
.home-card-number>span {min-width:0;}
.difficulty-emblem {
  display:block;flex:0 0 auto;width:25px;height:25px;
  color:#957a50;overflow:visible;pointer-events:none;
}
.difficulty-emblem-ring {
  fill:#f6ecda;fill-opacity:.72;
  stroke:currentColor;stroke-opacity:.55;stroke-width:1;
}
.difficulty-emblem-drawing {
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.difficulty-triangle{color:#99865f}
.difficulty-double{color:#85785e}
.difficulty-column{color:#866f50}
.difficulty-laurel{color:#56765a}
.difficulty-temple{color:#476b67}
.home-challenge-card:hover .difficulty-emblem-ring,
.home-challenge-card:focus-visible .difficulty-emblem-ring {
  stroke-opacity:.88;fill:#fff8ec;
}
.chapter {
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;vertical-align:middle;
}
.chapter .difficulty-emblem {width:20px;height:20px;}
.chapter .difficulty-emblem-ring {fill:#f1e5d1;}

/* Engraved tablet housing — never draw above mathematical labels. */
.tablet {position:relative;}
.tablet::after {
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:5px;
  pointer-events:none;opacity:.24;
  background:url("./assets/greek-key.svg") repeat-x 0 0 / 64px 12px;
}
.tablet-bar {
  position:relative;border-bottom:1px solid #8f795744;
}
.tablet-bar-brand {
  display:inline-flex;align-items:center;gap:7px;
  min-width:0;white-space:nowrap;
}
.tablet-seal {
  display:inline-flex;flex:0 0 auto;width:23px;height:23px;
  align-items:center;justify-content:center;color:#9a7948;
  pointer-events:none;
}
.tablet-seal svg{width:23px;height:23px;}
.tablet-seal svg circle,.tablet-seal svg path {
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.tablet-inside {position:relative;}
.tablet-inside::before,.tablet-inside::after {opacity:0;}
.tablet-engraving {
  position:absolute;inset:3px;z-index:0;
  pointer-events:none;overflow:hidden;
}
.tablet-engraving::before,.tablet-engraving::after {
  content:"";position:absolute;left:16px;right:16px;
  height:5px;opacity:.22;
  background:url("./assets/greek-key.svg") repeat-x 0 0 / 64px 12px;
}
.tablet-engraving::before {top:4px;}
.tablet-engraving::after {bottom:4px;}
.tablet-engraving-corner {
  position:absolute;display:block;
  font:28px Georgia,serif;line-height:1;
  color:#977e51;opacity:.58;user-select:none;
}
.tablet-engraving-nw{top:11px;left:7px}
.tablet-engraving-ne{top:11px;right:7px}
.tablet-engraving-sw{bottom:11px;left:7px}
.tablet-engraving-se{bottom:11px;right:7px}
#diagram {position:relative;z-index:1;}
.diagram-caption {z-index:1;pointer-events:none;}
.skip {z-index:3;}

/* The idle drawing pad feels like a scribe's scroll. Once the first
   stroke is started, the watermark disappears. It returns on Clear
   or Undo only if the canvas becomes fully empty. */
.ws-ink-frame.ws-ink-empty::before {
  content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;opacity:.17;
  background:url("./assets/scribe-triangle.svg") center center /
    min(46%,195px) auto no-repeat;
}
.ws-ink-canvas {position:relative;z-index:1;}
.ws-ink-frame::after {z-index:2;}

/* A small scribe's rule at the top of the maths workspace. Keep the
   actual student writing surface and touch targets unchanged. */
.ws-root {position:relative;}
.ws-root::before {
  content:"";position:absolute;left:9px;right:9px;top:4px;
  height:1px;background:#b8a17d60;pointer-events:none;
}
.ws-header {position:relative;z-index:1;}

@media (min-width:900px) and (max-height:730px) {
  .home-card-number {min-height:15px;font-size:8px;}
  .home-card-number .difficulty-emblem {width:18px;height:18px;}
  .tablet-seal,.tablet-seal svg {width:19px;height:19px;}
}
@media (max-width:650px) {
  .tablet-engraving::before,.tablet-engraving::after {opacity:.15;}
  .tablet-engraving-corner{opacity:.33;font-size:22px;}
  .tablet-bar-brand{font-size:9px;gap:4px;}
  .tablet-seal,.tablet-seal svg{width:19px;height:19px;}
  .chapter .difficulty-emblem {width:17px;height:17px;}
}
@media (prefers-reduced-motion:reduce) {
  .difficulty-emblem {transition:none!important;}
}