/* /pathglyph/pathglyph.css
*/

:root{
  /* PathGlyph accent (gold ink) */
  --pg-gold: #d7b35a;
  --pg-gold2:#f1d37e;
  --pg-obsidian:#0b0f14;
  --pg-ink:#0d0f12;

  /* board sizing */
  --pg-board-max: 560px;
  --pg-board-pad: 14px;

  /* nodes / stroke */
  --pg-node-r: 11;
  --pg-node-r-sm: 9;
  --pg-stroke: 10;
  --pg-stroke-sm: 8;
  --pg-hit-r: 22;

  /* subtle paper + border */
  --pg-paper: rgba(255,255,255,.04);
  --pg-border: rgba(255,255,255,.10);
  --pg-border2: rgba(255,255,255,.14);

  /* glows */
  --pg-glow: 0 0 0 2px rgba(215,179,90,.28), 0 0 22px rgba(215,179,90,.20);
  --pg-glow-strong: 0 0 0 2px rgba(241,211,126,.42), 0 0 30px rgba(241,211,126,.28);
}

/* Light theme tweaks (keep premium, not harsh) */
html[data-theme="light"]{
  --pg-paper: rgba(10,15,20,.04);
  --pg-border: rgba(10,15,20,.10);
  --pg-border2: rgba(10,15,20,.16);
}

/* --- Card layout bits --- */
.pgCard{ padding: 14px; }

.pgTopRow{
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.pgMeta{
  flex: 1 1 420px;
  min-width: 260px;
}

.pgModeRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.pgModeLine{
  margin-top:10px;
  font-size: 14px;
  opacity: .95;
}

.pgRule{
  margin-top:6px;
  font-size: 13px;
  line-height: 1.35;
}

.pgStats{
  display:flex;
  gap:12px;
  flex: 0 0 auto;
  align-items:stretch;
}

.pgStat{
  border: 1px solid var(--pg-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  min-width: 92px;
}

html[data-theme="light"] .pgStat{
  background: linear-gradient(180deg, rgba(10,15,20,.03), rgba(10,15,20,.01));
}

.pgStatVal{
  margin-top:4px;
  font-size: 16px;
  letter-spacing: .2px;
}

.pgStatusRow{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--pg-border);
}

.pgSeed{
  opacity:.7;
  font-size: 12px;
  user-select:text;
}

.pgBottomBar{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--pg-border);
}

.pgControlsRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}

.pgHintRow{
  margin-top:10px;
  font-size: 12.5px;
  line-height: 1.35;
  opacity:.85;
}

.pgLegend{
  margin-top: 10px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}

.pgLegendItem{
  display:flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--pg-border);
  background: rgba(255,255,255,.02);
}

html[data-theme="light"] .pgLegendItem{ background: rgba(10,15,20,.02); }

.pgIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
}

.pgStart{ background: rgba(215,179,90,.16); border:1px solid rgba(215,179,90,.35); }
.pgEnd{ background: rgba(241,211,126,.12); border:1px solid rgba(241,211,126,.30); }
.pgStone{ background: rgba(255,255,255,.06); border:1px solid var(--pg-border); }
.pgBlock{ background: rgba(255,255,255,.04); border:1px solid var(--pg-border); }

/* --- Board wrapper (premium frame) --- */
.pgBoardWrap{
  margin-top: 12px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.pgMount{
  width: min(100%, var(--pg-board-max));
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  touch-action: none; /* critical for drag */
  user-select: none;

  border: 1px solid var(--pg-border2);
  background:
    radial-gradient(140% 110% at 20% 10%, rgba(215,179,90,.12), transparent 60%),
    radial-gradient(140% 120% at 90% 20%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(160% 130% at 50% 100%, rgba(0,0,0,.35), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

html[data-theme="light"] .pgMount{
  background:
    radial-gradient(140% 110% at 20% 10%, rgba(215,179,90,.10), transparent 60%),
    radial-gradient(140% 120% at 90% 20%, rgba(10,15,20,.06), transparent 55%),
    radial-gradient(160% 130% at 50% 100%, rgba(10,15,20,.10), transparent 50%),
    linear-gradient(180deg, rgba(10,15,20,.03), rgba(10,15,20,.01));
}

/* Papyrus texture layer (subtle, no image) */
.pgMount::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.55;
  background:
    repeating-linear-gradient( 90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(  0deg, rgba(0,0,0,.02) 0 1px, transparent 1px 10px);
  mix-blend-mode: overlay;
  pointer-events:none;
}

html[data-theme="light"] .pgMount::before{
  opacity:.35;
  background:
    repeating-linear-gradient( 90deg, rgba(10,15,20,.03) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(  0deg, rgba(10,15,20,.02) 0 1px, transparent 1px 10px);
  mix-blend-mode: multiply;
}

/* Ornamental border corners (faint) */
.pgMount::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 14px;
  border: 1px solid rgba(215,179,90,.18);
  pointer-events:none;
  opacity:.7;
}

/* --- SVG inside mount --- */
.pgSvg{
  width:100%;
  height:100%;
  display:block;
}

/* Background grid hint (very faint) */
.pgGridLine{
  stroke: rgba(255,255,255,.04);
  stroke-width: 1;
}
html[data-theme="light"] .pgGridLine{
  stroke: rgba(10,15,20,.06);
}

/* --- Nodes --- */
.pgNode{
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}

.pgNodeCircle{
  fill: rgba(255,255,255,.10);
  stroke: rgba(255,255,255,.14);
  stroke-width: 1.5;
}
html[data-theme="light"] .pgNodeCircle{
  fill: rgba(10,15,20,.06);
  stroke: rgba(10,15,20,.14);
}

.pgNodeInner{
  fill: rgba(255,255,255,.10);
  opacity:.6;
}
html[data-theme="light"] .pgNodeInner{ fill: rgba(10,15,20,.08); }

.pgNodeStart .pgNodeCircle{
  fill: rgba(215,179,90,.18);
  stroke: rgba(215,179,90,.45);
}
.pgNodeEnd .pgNodeCircle{
  fill: rgba(241,211,126,.14);
  stroke: rgba(241,211,126,.38);
}

.pgNodeBlocked .pgNodeCircle{
  fill: rgba(255,255,255,.03);
  stroke: rgba(255,255,255,.08);
  opacity:.55;
}
html[data-theme="light"] .pgNodeBlocked .pgNodeCircle{
  fill: rgba(10,15,20,.03);
  stroke: rgba(10,15,20,.08);
}

.pgNodeBlocked{
  opacity:.35;
  pointer-events:none;
}

/* Start/End glyph */
.pgGlyph{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight: 700;
  font-size: 16px;
  fill: rgba(255,255,255,.90);
  text-anchor: middle;
  dominant-baseline: central;
}
html[data-theme="light"] .pgGlyph{ fill: rgba(10,15,20,.86); }

.pgNodeStart .pgGlyph{ fill: rgba(241,211,126,.95); }
.pgNodeEnd .pgGlyph{ fill: rgba(241,211,126,.95); }

/* Neighbor highlight (subtle pulse) */
.pgNeighbor .pgNodeCircle{
  stroke: rgba(241,211,126,.55);
  filter: drop-shadow(0 0 10px rgba(241,211,126,.18));
}
.pgNeighbor{
  animation: pgPulse 1.05s ease-in-out infinite;
}
@keyframes pgPulse{
  0%,100%{ transform: translateZ(0) scale(1); }
  50%{ transform: translateZ(0) scale(1.045); }
}

/* Visited stones (dim) */
.pgVisited{ opacity:.62; }
.pgVisited .pgNodeCircle{
  fill: rgba(255,255,255,.06);
  stroke: rgba(255,255,255,.10);
}
html[data-theme="light"] .pgVisited .pgNodeCircle{
  fill: rgba(10,15,20,.04);
  stroke: rgba(10,15,20,.10);
}

/* --- Ink path --- */
.pgInk{
  fill: none;
  stroke: rgba(241,211,126,.92);
  stroke-width: var(--pg-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.22)) drop-shadow(0 0 16px rgba(241,211,126,.10));
}

/* inner highlight to feel “premium” */
.pgInkHi{
  fill: none;
  stroke: rgba(255,255,255,.35);
  stroke-width: calc(var(--pg-stroke) * 0.46);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity:.55;
}

/* current “rubber-band” segment (while dragging) */
.pgInkGhost{
  fill:none;
  stroke: rgba(215,179,90,.28);
  stroke-width: var(--pg-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 8 10;
  opacity:.75;
}

/* Illegal move flash */
.pgMount.pgIllegal{
  animation: pgIllegal .18s ease-in-out 2;
}
@keyframes pgIllegal{
  0%{ transform: translateX(0); }
  50%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

/* Win shimmer */
.pgMount.pgWin::after{
  border-color: rgba(241,211,126,.32);
  box-shadow: var(--pg-glow);
  animation: pgWinGlow 1.2s ease-in-out 1;
}
@keyframes pgWinGlow{
  0%{ box-shadow: 0 0 0 rgba(241,211,126,0); }
  45%{ box-shadow: var(--pg-glow-strong); }
  100%{ box-shadow: var(--pg-glow); }
}

/* A shimmering “sweep” overlay */
.pgWinSweep{
  position:absolute;
  inset:-20%;
  background: linear-gradient(110deg, transparent 30%, rgba(241,211,126,.12) 45%, transparent 60%);
  transform: translateX(-60%) rotate(0.0001deg);
  pointer-events:none;
  opacity:0;
}
.pgMount.pgWin .pgWinSweep{
  opacity:1;
  animation: pgSweep .85s ease-out 1;
}
@keyframes pgSweep{
  0%{ transform: translateX(-70%) rotate(0.0001deg); opacity:0; }
  15%{ opacity:.85; }
  100%{ transform: translateX(70%) rotate(0.0001deg); opacity:0; }
}

/* --- Dialog skins (match site) --- */
.pgHelpDlg .dlg,
.pgShareDlg .dlg{
  max-width: 520px;
}

.pgHelp{
  border: 1px solid var(--pg-border2);
}

.pgHelpScroll{
  max-height: min(68vh, 520px);
  overflow:auto;
  padding-right: 6px;
}

.pgHelpBox{
  border: 1px solid var(--pg-border);
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
  background: rgba(255,255,255,.02);
}
html[data-theme="light"] .pgHelpBox{ background: rgba(10,15,20,.02); }

.pgHelpKicker{
  font-size: 12px;
  opacity:.85;
  letter-spacing:.4px;
  margin-bottom: 6px;
}

.pgHelpList{
  margin: 0;
  padding-left: 18px;
}

.pgHelpActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 10px;
}

/* Make buttons feel a bit more “premium” without changing global seg */
.pgCard .seg{
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pgCard .seg:active{
  transform: translateY(1px) scale(.99);
}
.pgCard .seg.on{
  border-color: rgba(241,211,126,.38);
  box-shadow: 0 0 0 2px rgba(241,211,126,.10);
}

/* --- Responsive tweaks --- */
@media (max-width: 420px){
  .pgStat{ min-width: 82px; padding: 9px 10px; }
  .pgStatVal{ font-size: 15px; }

  :root{
    --pg-node-r: var(--pg-node-r-sm);
    --pg-stroke: var(--pg-stroke-sm);
    --pg-board-pad: 12px;
  }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .pgNeighbor{ animation:none; }
  .pgMount.pgIllegal{ animation:none; }
  .pgMount.pgWin::after{ animation:none; }
  .pgMount.pgWin .pgWinSweep{ animation:none; opacity:.25; }
}





/* Make Start/End symbols (☥ / 𓂀) bigger + clearer */
.pgGlyph{
  font-size: 22px;           /* was 16px */
  font-weight: 800;
  letter-spacing: .2px;
  paint-order: stroke fill;  /* crisp on textured bg */
  stroke: rgba(0,0,0,.28);   /* subtle outline */
  stroke-width: 2px;
}

html[data-theme="light"] .pgGlyph{
  stroke: rgba(255,255,255,.55); /* outline flips for light */
}

/* Give the Start/End stones a slightly larger “medallion” */
.pgNodeStart .pgNodeCircle,
.pgNodeEnd .pgNodeCircle{
  stroke-width: 2.2px;
}



/* --- Help dialog border fix: remove weird borders, keep a clean gold frame --- */

/* Remove default dialog border/shadow quirks */
.pgHelpDlg{
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* If your base .dlg has a border, kill it here for this dialog only */
.pgHelpDlg .dlg{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* The actual panel: single premium gold frame */
.pgHelpDlg .pgHelp{
  border: 1.5px solid rgba(241,211,126,.38) !important;
  box-shadow: 0 0 0 2px rgba(215,179,90,.10), 0 18px 50px rgba(0,0,0,.35);
  border-radius: 18px;
  background: rgba(12,16,22,.92);
  backdrop-filter: blur(10px);
}

/* Light theme panel */
html[data-theme="light"] .pgHelpDlg .pgHelp{
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 2px rgba(215,179,90,.10), 0 18px 50px rgba(10,15,20,.18);
}

/* Backdrop (optional: nicer, less harsh) */
.pgHelpDlg::backdrop{
  background: rgba(0,0,0,.45);
}
html[data-theme="light"] .pgHelpDlg::backdrop{
  background: rgba(10,15,20,.22);
}

/* PathGlyph Help — LIGHT MODE: make panel solid (not translucent) */
html[data-theme="light"] .pgHelpDlg .pgHelp{
  background: #ffffff !important;          /* solid */
  backdrop-filter: none !important;        /* kill glass */
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 0 0 2px rgba(215,179,90,.10),
    0 18px 50px rgba(10,15,20,.16) !important;
}