/* Ink Transfer. Logical geometry and hit testing belong to the game, not the skin. */
:root:not([data-theme="plain"]) {
  --paper:#f3eedf;
  --board:#f5f1e62e;
  --ink:#304c40;
  --muted:#526252;
  --line:#8c99817a;
  --accent:#355c48;
  --soft:#dbcfaa75;
  --pip-line:#758271;
  --control-line:#95988199;
  --control-hover:#e2ddc9a6;
  --target-line:#71806c;
  --mini-line:#87927b;
  --empty:#8c987d;
  --stamp-empty:#74826b;
  --board-empty:#8c987d;
  --anchor:#657d63;
  --won-board:#e1e6d340;
  --won-line:#526f52;
  --accent-hover:#294735;
  --dialog-shadow:#34372424;
  --backdrop:#313f354d;
  --board-size:min(404px, calc(100vw - 40px), calc(100svh - 420px));
  font-family:Georgia, 'Times New Roman', serif;
}

:root:not([data-theme="plain"]) body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--paper) url('../assets/ink-room.png') center / cover no-repeat;
  pointer-events:none;
}

:root:not([data-theme="plain"]) .app {
  padding:22px 20px 24px;
}

:root:not([data-theme="plain"]) .masthead {
  display:block;
  width:min(350px, calc(100vw - 60px));
  text-align:center;
  margin:0 0 9px;
}

:root:not([data-theme="plain"]) .masthead h1 {
  margin:0;
  padding-left:.27em;
  font-size:28px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:.27em;
  color:var(--ink);
}

:root:not([data-theme="plain"]) .title-rule {
  height:1px;
  width:72%;
  margin:10px auto 0;
  background:linear-gradient(90deg, transparent, #6f816370 15%, #6f816370 85%, transparent);
}

:root:not([data-theme="plain"]) .top {
  width:min(404px, calc(100vw - 40px));
  height:38px;
  margin-bottom:12px;
}

:root:not([data-theme="plain"]) .level {width:34px; height:38px;}
:root:not([data-theme="plain"]) .level::after {inset:6px 4px;}
:root:not([data-theme="plain"]) .pip {width:6px; height:6px;}
:root:not([data-theme="plain"]) .level.complete .pip {width:12px; height:12px;}
:root:not([data-theme="plain"]) .help-open {width:36px; height:36px; color:var(--ink);}

:root:not([data-theme="plain"]) .reference {padding:0 22px; margin-bottom:20px;}
:root:not([data-theme="plain"]) .reference figure {width:112px;}
:root:not([data-theme="plain"]) .reference figcaption {
  font-size:17px;
  line-height:21px;
  color:var(--ink);
  letter-spacing:0;
  margin-bottom:10px;
}
:root:not([data-theme="plain"]) .mini,
:root:not([data-theme="plain"]) #target,
:root:not([data-theme="plain"]) #stamp {width:88px; height:88px;}

:root:not([data-theme="plain"]) .target-frame {
  fill:#f5f1e630;
  stroke-width:1.35;
  stroke-dasharray:none;
  filter:url('#paper-edge');
}
:root:not([data-theme="plain"]) .stamp-frame {
  stroke-width:1.8;
  filter:url('#paper-edge');
}
:root:not([data-theme="plain"]) #stamp {
  filter:drop-shadow(0 2px 0 #4d5d4080) drop-shadow(0 5px 5px #46473224);
}
:root:not([data-theme="plain"]) .mini-line {opacity:.8; stroke-width:1;}
:root:not([data-theme="plain"]) .mark {
  filter:url('#ink-edge');
  stroke:var(--ink);
  stroke-width:.22;
  stroke-opacity:.5;
}
:root:not([data-theme="plain"]) #goal-check {top:48px; right:-2px;}

:root:not([data-theme="plain"]) .board-bg {
  stroke-width:1.15;
  filter:url('#paper-edge');
}
:root:not([data-theme="plain"]) .board-wrap {
  border-radius:13px;
  box-shadow:0 2px 3px #41482f08, 0 10px 24px #625d3205;
}
:root:not([data-theme="plain"]) .board-line {stroke-width:.8;}
:root:not([data-theme="plain"]) .anchor {stroke-width:.9; opacity:.6;}
:root:not([data-theme="plain"]) .select-tint {opacity:.065;}
:root:not([data-theme="plain"]) .select-outline {stroke-width:1.9;}

:root:not([data-theme="plain"]) .instructions {
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  margin:17px 0 16px;
  max-width:440px;
}
:root:not([data-theme="plain"]) .controls {gap:12px; height:54px;}
:root:not([data-theme="plain"]) .controls .icon {
  background:#f5f1e638;
  box-shadow:inset 0 1px 0 #fffff74d, 0 2px 2px #4f4e3210;
}
:root:not([data-theme="plain"]) .controls .icon:not(:disabled):hover {background:var(--control-hover);}
:root:not([data-theme="plain"]) .controls .icon:disabled {opacity:.32; box-shadow:none;}
:root:not([data-theme="plain"]) .controls #next.ready {background:var(--accent); color:var(--paper);}
:root:not([data-theme="plain"]) .controls #next.ready:hover {background:var(--accent-hover);}
:root:not([data-theme="plain"]) .icon svg {stroke-width:1.65;}

:root:not([data-theme="plain"]) dialog {
  background:var(--paper) url('../assets/ink-room.png') center / auto 1000px;
  border-color:#8a967c80;
  border-radius:10px;
}
:root:not([data-theme="plain"]) .help-head h1 {font-size:23px; font-weight:400;}
:root:not([data-theme="plain"]) dialog p {font-size:16px;}
:root:not([data-theme="plain"]) dialog .help-foot {font-size:13px;}

@media (max-width:600px) {
  /* Quiet texture beneath play. portrait.css brings the decorative corners back. */
  :root:not([data-theme="plain"]) body::before {background-size:auto max(100%, 900px);}
  :root:not([data-theme="plain"]) .reference {padding:0 12px;}
}

@media (max-height:740px) {
  :root:not([data-theme="plain"]) {--board-size:min(380px, calc(100vw - 40px), calc(100svh - 360px));}
  :root:not([data-theme="plain"]) .app {padding:14px 20px 16px;}
  :root:not([data-theme="plain"]) .masthead {margin-bottom:6px;}
  :root:not([data-theme="plain"]) .masthead h1 {font-size:25px;}
  :root:not([data-theme="plain"]) .title-rule {margin-top:7px;}
  :root:not([data-theme="plain"]) .top {height:34px; margin-bottom:8px;}
  :root:not([data-theme="plain"]) .reference {margin-bottom:17px;}
  :root:not([data-theme="plain"]) .reference figcaption {font-size:16px; line-height:19px; margin-bottom:8px;}
  :root:not([data-theme="plain"]) .mini,
  :root:not([data-theme="plain"]) #target,
  :root:not([data-theme="plain"]) #stamp {width:80px; height:80px;}
  :root:not([data-theme="plain"]) .instructions {font-size:15px; margin:14px 0 13px;}
  :root:not([data-theme="plain"]) #goal-check {top:43px; right:0;}
}

@media (max-height:620px) {
  :root:not([data-theme="plain"]) {--board-size:min(328px, calc(100vw - 40px), calc(100svh - 312px));}
  :root:not([data-theme="plain"]) .app {padding:10px 20px 12px;}
  :root:not([data-theme="plain"]) .masthead h1 {font-size:21px;}
  :root:not([data-theme="plain"]) .title-rule {margin-top:5px;}
  :root:not([data-theme="plain"]) .top {height:32px; margin-bottom:5px;}
  :root:not([data-theme="plain"]) .reference {margin-bottom:14px;}
  :root:not([data-theme="plain"]) .reference figcaption {font-size:14px; margin-bottom:6px;}
  :root:not([data-theme="plain"]) .mini,
  :root:not([data-theme="plain"]) #target,
  :root:not([data-theme="plain"]) #stamp {width:68px; height:68px;}
  :root:not([data-theme="plain"]) .instructions {font-size:13px; margin:11px 0;}
  :root:not([data-theme="plain"]) #goal-check {top:35px; right:5px; width:18px; height:18px;}
}

@media (max-width:350px) {
  :root:not([data-theme="plain"]) .reference {padding:0 6px;}
  :root:not([data-theme="plain"]) .instructions {font-size:12.5px;}
}

@media (max-height:470px) and (min-width:600px) {
  /* A short landscape screen can scroll without compressing the board's cells. */
  :root:not([data-theme="plain"]) .app {justify-content:flex-start;}
}