/* Smocza Matematyka — module 'plaster' (Plaster miodu): the memorization charts as a honeycomb.
 * Every selector starts with .mod-plaster. Hexagons: flat-top, clip-path (the outline marks are SVG rings).
 */

.mod-plaster {
  --pl-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --pl-wax: #f6d47e;
  --pl-wax-deep: #c48a2c;
  --pl-honey-ink: #5b3a10;
  --pl-wood: #a8743a;
  --pl-wood-deep: #7a4f22;
  --pl-ray: 123, 92, 214; /* dragon purple (--accent) as rgb */
}

/* ---------- task band ---------- */

.mod-plaster .pl-expr {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 700 64px/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  animation: pop-in 0.3s ease;
}
.mod-plaster .pl-op {
  color: var(--ink-soft);
}
.mod-plaster .pl-q {
  color: #c4b9a4;
}
.mod-plaster .pl-res {
  color: var(--gold-deep);
  animation: pop-in 0.35s ease;
}
.mod-plaster .pl-turned {
  color: var(--accent);
  animation: pop-in 0.35s ease;
}
.mod-plaster .pl-bookbtn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--line);
  background: var(--panel);
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  flex: none;
  padding: 0;
  margin-right: 8px; /* band gap 16 + 8 = 24 px to the ear */
}
.mod-plaster .pl-bookbtn:active {
  transform: translateY(3px);
}
.mod-plaster .pl-bandround {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 92px;
}
.mod-plaster .pl-bandtext {
  font: 700 30px/1.1 var(--font);
  color: var(--ink-soft);
}

/* gold attention glow that follows the hexagon (not the square tap area, which reaches past it). !important: also
   over the core's static reduced-motion ring; with motion reduced the cut animation leaves the static glow. */
.mod-plaster .pl-head.fx-highlight,
.mod-plaster .pl-scell.fx-highlight {
  box-shadow: none !important;
  filter: drop-shadow(0 0 5px rgba(242, 183, 5, 0.95)) drop-shadow(0 0 2px rgba(242, 183, 5, 0.9));
  animation: pl-hexglow 1.2s ease-in-out infinite;
}
@keyframes pl-hexglow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(242, 183, 5, 0)); }
  50% { filter: drop-shadow(0 0 7px rgba(242, 183, 5, 1)) drop-shadow(0 0 3px rgba(242, 183, 5, 1)); }
}
.mod-plaster .pl-rowhit.demo-target {
  background: rgba(242, 183, 5, 0.16);
  box-shadow: inset 0 0 0 4px var(--gold);
}

/* the tile in her hand (task card of L3) */
.mod-plaster .pl-btile {
  position: relative;
  width: 104px;
  height: 90px;
  flex: none;
  filter: drop-shadow(0 4px 3px rgba(90, 55, 10, 0.25));
}
.mod-plaster .pl-btile.enter {
  animation: pl-tilein 0.35s ease;
}
.mod-plaster .pl-btile-hex {
  position: absolute;
  inset: 0;
  clip-path: var(--pl-hex);
  background: #b98a4a;
}
.mod-plaster .pl-btile-hex::after {
  content: '';
  position: absolute;
  inset: 5px;
  clip-path: var(--pl-hex);
  background: linear-gradient(180deg, #fffdf6, #f4e6c8);
}
.mod-plaster .pl-btile-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 46px/1 var(--font-num);
  color: #4a3215;
}
.mod-plaster .pl-btile.is-err .pl-btile-hex {
  background: var(--err);
}
.mod-plaster .pl-btile.is-err .pl-btile-hex::after {
  background: var(--err-soft);
}
@keyframes pl-tilein {
  from { transform: translateX(60px) scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- the honeycomb board ---------- */

.mod-plaster .pl-board {
  position: absolute;
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 26% 14%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #fbe39a, #f0c25a 58%, #e3aa3f);
  box-shadow: inset 0 0 0 4px var(--pl-wax-deep), 0 7px 0 rgba(120, 72, 10, 0.22), 0 14px 28px rgba(90, 50, 0, 0.16);
}
.mod-plaster .pl-corner {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 64px/1 var(--font-num);
  color: var(--pl-wood-deep);
}
.mod-plaster .pl-heads {
  position: absolute;
  border-radius: 18px;
}
.mod-plaster .pl-head {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
/* Size and place are set inline by plaster.js: 46 x 64 / 64 x 46 plus a transparent reach away from the grid
   (L1–L2: top 46 x 88, left 88 x 46, beside Cofnij 72 x 46). The hexagon keeps to the grid side, so it never moves;
   pop / select scale around the hexagon. */
.mod-plaster .pl-head-top {
  width: 46px;
  height: 64px;
  transform-origin: 50% calc(100% - 29px);
}
.mod-plaster .pl-head-left {
  width: 64px;
  height: 46px;
  transform-origin: calc(100% - 28px) 50%;
}
.mod-plaster .pl-hhex {
  position: absolute;
  width: 44px;
  height: 38px;
  clip-path: var(--pl-hex);
  background: radial-gradient(circle at 50% 30%, #c99456, var(--pl-wood) 55%, var(--pl-wood-deep));
  transition: transform 0.2s ease;
}
.mod-plaster .pl-head-top .pl-hhex {
  left: 1px;
  bottom: 10px;
}
.mod-plaster .pl-head-left .pl-hhex {
  right: 6px;
  top: 4px;
}
.mod-plaster .pl-hnum {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 38px;
  font: 700 23px/1 var(--font-num);
  color: #fff8ea;
  text-shadow: 0 1px 1px rgba(60, 30, 0, 0.45);
}
.mod-plaster .pl-head-top .pl-hnum {
  left: 1px;
  bottom: 10px;
}
.mod-plaster .pl-head-left .pl-hnum {
  right: 6px;
  top: 4px;
}
.mod-plaster .pl-head:active .pl-hhex {
  transform: scale(0.93);
}
.mod-plaster .pl-head.is-sel {
  filter: drop-shadow(0 0 7px rgba(var(--pl-ray), 0.95));
  z-index: 2;
}
.mod-plaster .pl-head.is-sel .pl-hhex {
  background: radial-gradient(circle at 50% 30%, #b6a0f5, #7b5cd6 60%, #5a3fb3);
  transform: scale(1.12);
}

.mod-plaster .pl-grid {
  position: absolute;
}
.mod-plaster .pl-cell {
  position: absolute;
  width: 46px;
  height: 46px;
}
.mod-plaster .pl-hex {
  position: absolute;
  left: 1px;
  top: 4px;
  width: 44px;
  height: 38px;
  clip-path: var(--pl-hex);
  transition: transform 0.25s ease, filter 0.25s ease;
}
.mod-plaster .pl-cell.is-full .pl-hex {
  background: radial-gradient(circle at 50% 28%, #fff0bd, #fad46a 58%, #eeb43a);
}
.mod-plaster .pl-cell.is-empty .pl-hex {
  background: radial-gradient(circle at 50% 72%, #fff8de, #f5dc98 68%, #e6c36c);
}
.mod-plaster.pl-L2 .pl-cell.is-diag .pl-hex {
  background: radial-gradient(circle at 50% 28%, #ffe8a6, #f6be45 58%, #e09d26);
}
.mod-plaster .pl-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--font-num);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  color: var(--pl-honey-ink);
  pointer-events: none;
  transition: transform 0.25s ease, color 0.25s ease;
}
.mod-plaster .pl-cell.is-meet {
  z-index: 3;
}
.mod-plaster .pl-cell.is-meet .pl-hex {
  transform: scale(1.18);
  background: radial-gradient(circle at 50% 30%, #ffffff, #fff1c2 55%, #f7cf62);
}
.mod-plaster .pl-cell.is-meet .pl-num {
  transform: scale(1.22);
  color: #2a1a55;
}
.mod-plaster .pl-cell.is-q::after {
  content: '?';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 28px/1 var(--font-num);
  color: var(--accent);
  animation: pop-in 0.3s ease;
}
.mod-plaster .pl-cell.is-err .pl-hex {
  background: radial-gradient(circle at 50% 30%, #fff, var(--err-soft) 70%);
}
.mod-plaster .pl-cell.is-win .pl-hex {
  transform: scale(1.18);
  background: radial-gradient(ellipse 60% 40% at 50% 22%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #fff3b0, var(--gold) 55%, var(--gold-deep));
}
.mod-plaster .pl-cell.is-pulse .pl-hex,
.mod-plaster .pl-cell.is-pulse .pl-tile {
  animation: pl-pulse 0.6s ease;
}
@keyframes pl-pulse {
  0%, 100% { transform: scale(1); filter: none; }
  45% { transform: scale(1.3); filter: brightness(1.15) drop-shadow(0 0 4px rgba(var(--pl-ray), 0.8)); }
}

/* L3 comparison: the control chart lies over the honeycomb for a moment (row by row) */
.mod-plaster .pl-ovl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--font-num);
  letter-spacing: -0.5px;
  color: rgba(91, 58, 16, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mod-plaster .pl-board.pl-overlay .pl-ovl {
  opacity: 1;
}
.mod-plaster .pl-board:not(.pl-overlay) .pl-ovl {
  transition-delay: 0s !important;
}

/* ghost numbers of "Policzmy razem" (L3 rung 2) */
.mod-plaster .pl-ghostnum {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--font-num);
  color: var(--accent);
  z-index: 2;
  pointer-events: none;
  animation: pop-in 0.25s ease;
}

/* ---------- the dragon rays (L1/L2) ---------- */

.mod-plaster .pl-ray {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 3px rgba(var(--pl-ray), 0.85), 0 0 14px 2px rgba(var(--pl-ray), 0.45);
  transition: width 0.45s ease, height 0.45s ease, top 0.9s ease, left 0.9s ease, opacity 0.2s ease;
}
.mod-plaster .pl-ray-h {
  height: 40px;
  width: 0;
  background: linear-gradient(90deg, rgba(var(--pl-ray), 0.06), rgba(var(--pl-ray), 0.24));
}
.mod-plaster .pl-ray-v {
  width: 40px;
  height: 0;
  background: linear-gradient(180deg, rgba(var(--pl-ray), 0.06), rgba(var(--pl-ray), 0.24));
}
.mod-plaster .pl-ray.on {
  opacity: 1;
}
.mod-plaster .pl-ray.on.search {
  opacity: 0.55;
}
/* the mirror line of the half chart: glows while the rays turn */
.mod-plaster .pl-diag {
  position: absolute;
  left: 94px; /* centre of cell 1 · 1 */
  top: 92px;
  width: 586px; /* to the centre of cell 10 · 10 */
  height: 0;
  border-top: 4px dashed rgba(var(--pl-ray), 0.9);
  transform-origin: 0 0;
  transform: rotate(45deg);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mod-plaster .pl-board.pl-turning .pl-diag {
  opacity: 1;
}

/* ---------- outline marks (SVG hex rings) ---------- */

.mod-plaster .pl-marks {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.mod-plaster .pl-ring {
  position: absolute;
  width: 56px;
  height: 48px;
  overflow: visible;
}
.mod-plaster .pl-ring polygon {
  fill: none;
  stroke-width: 4;
  stroke-linejoin: round;
}
.mod-plaster .pl-ring.is-meet polygon {
  stroke: var(--accent);
}
.mod-plaster .pl-ring.is-meet {
  filter: drop-shadow(0 0 5px rgba(var(--pl-ray), 0.8));
}
.mod-plaster .pl-ring.is-err polygon {
  stroke: var(--err);
  stroke-width: 6;
}
.mod-plaster .pl-ring.is-err {
  animation: pl-errpulse 1.1s ease-in-out infinite;
}
.mod-plaster .pl-ring.is-home polygon {
  stroke: var(--gold-deep);
  stroke-width: 4;
  stroke-dasharray: 7 5;
  fill: rgba(242, 183, 5, 0.22);
}
.mod-plaster .pl-ring.is-home {
  animation: pl-homeglow 1.2s ease-in-out infinite;
}
@keyframes pl-errpulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.75; }
}
@keyframes pl-homeglow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(242, 183, 5, 0)); }
  50% { filter: drop-shadow(0 0 8px rgba(242, 183, 5, 0.95)); }
}

/* ---------- L3: rows, tiles, comparison ---------- */

.mod-plaster .pl-rowhit {
  position: absolute;
  z-index: 5;
  border-radius: 16px;
}
.mod-plaster .pl-rowhit:active,
.mod-plaster .pl-rowhit.is-open {
  background: rgba(var(--pl-ray), 0.1);
  box-shadow: inset 0 0 0 3px rgba(var(--pl-ray), 0.55);
}
.mod-plaster .pl-tile {
  position: absolute;
  left: 0;
  top: 3px;
  width: 46px;
  height: 40px;
  z-index: 1;
  filter: drop-shadow(0 2px 1px rgba(90, 55, 10, 0.35));
}
.mod-plaster .pl-tile-hex {
  position: absolute;
  inset: 0;
  clip-path: var(--pl-hex);
  background: #b98a4a;
}
.mod-plaster .pl-tile-hex::after {
  content: '';
  position: absolute;
  inset: 3px;
  clip-path: var(--pl-hex);
  background: linear-gradient(180deg, #fffdf6, #f4e6c8);
}
.mod-plaster .pl-tile-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--font-num);
  letter-spacing: -0.5px;
  color: #4a3215;
}
/* golden scale (right after the comparison) */
.mod-plaster .pl-tile.is-ok .pl-tile-hex {
  background: var(--gold-deep);
}
.mod-plaster .pl-tile.is-ok .pl-tile-hex::after {
  background:
    radial-gradient(ellipse 62% 36% at 50% 20%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 70% 40% at 50% 112%, rgba(201, 143, 0, 0.6), rgba(201, 143, 0, 0) 70%),
    linear-gradient(160deg, #fff3b0, var(--gold) 55%, #dca10a);
}
.mod-plaster .pl-tile.is-ok .pl-tile-num {
  color: #3d2a05;
}
/* misplaced: amber, glowing and gently pulsing until she moves it */
.mod-plaster .pl-tile.is-err {
  animation: pl-errtile 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 3px var(--err)) drop-shadow(0 0 5px rgba(240, 140, 46, 0.75));
  z-index: 2;
}
.mod-plaster .pl-tile.is-err .pl-tile-hex {
  background: var(--err);
}
.mod-plaster .pl-tile.is-err .pl-tile-hex::after {
  inset: 4px;
  background: var(--err-soft);
}
@keyframes pl-errtile {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.mod-plaster .pl-board.pl-win .pl-tile.is-ok {
  animation: pl-shine 1.6s ease-in-out 2;
}
@keyframes pl-shine {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.18) drop-shadow(0 0 5px rgba(242, 183, 5, 0.9)); }
}
.mod-plaster .pl-sweep {
  position: absolute;
  left: 67px;
  width: 468px;
  top: 71px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(242, 183, 5, 0), rgba(255, 246, 200, 0.95), rgba(242, 183, 5, 0));
  box-shadow: 0 0 18px 6px rgba(242, 183, 5, 0.55);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
}
.mod-plaster .pl-sweep.run {
  animation: pl-sweep 1.6s linear forwards;
}
@keyframes pl-sweep {
  0% { transform: translateY(0); opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateY(456px); opacity: 0; }
}
.mod-plaster .pl-ghosttile {
  position: absolute;
  z-index: 40;
  width: 44px;
  height: 38px;
  pointer-events: none;
  transition: left 0.55s ease, top 0.55s ease, transform 0.3s ease;
  transform: scale(1.35);
  filter: drop-shadow(0 6px 5px rgba(60, 30, 0, 0.3));
}
.mod-plaster .pl-ghosttile.home {
  transform: scale(1);
}
.mod-plaster .pl-ghosttile.home .pl-tile-hex::after {
  background: linear-gradient(160deg, #fff3b0, var(--gold) 60%, #dca10a);
}

/* the enlarged row (§1.4 a): 10 cells of 96 px over the chart */
.mod-plaster .pl-catch {
  position: absolute;
  inset: 0;
  z-index: 24;
  background: rgba(42, 34, 56, 0.12);
  animation: fade-in 0.15s ease;
}
.mod-plaster .pl-strip {
  position: absolute;
  left: 8px;
  width: 1024px;
  height: 140px;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  padding: 0 4px 8px;
  border-radius: 26px;
  background: linear-gradient(180deg, #fde9ad, #f2c75f);
  box-shadow: inset 0 0 0 4px var(--pl-wax-deep), 0 14px 30px rgba(60, 30, 0, 0.3);
  animation: pl-stripin 0.2s ease;
}
@keyframes pl-stripin {
  from { transform: scaleY(0.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.mod-plaster .pl-strip-label {
  position: relative;
  width: 56px;
  height: 96px;
  flex: none;
}
.mod-plaster .pl-strip-label .pl-hhex,
.mod-plaster .pl-strip-label .pl-hnum {
  left: 4px;
  top: 26px;
  width: 50px;
  height: 44px;
}
.mod-plaster .pl-strip-label .pl-hnum {
  font-size: 28px;
}
.mod-plaster .pl-strip-cells {
  display: flex;
}
.mod-plaster .pl-scell {
  position: relative;
  width: 96px;
  height: 128px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
.mod-plaster .pl-scol {
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 24px/1 var(--font-num);
  color: var(--pl-wood-deep);
}
.mod-plaster .pl-shex {
  position: absolute;
  left: 4px;
  top: 36px;
  width: 88px;
  height: 78px;
  clip-path: var(--pl-hex);
  background: radial-gradient(circle at 50% 72%, #fff8de, #f5dc98 68%, #e6c36c);
  transition: transform 0.12s ease;
}
.mod-plaster .pl-scell:active .pl-shex {
  transform: scale(0.94);
}
.mod-plaster .pl-snum {
  position: absolute;
  left: 4px;
  top: 36px;
  width: 88px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 36px/1 var(--font-num);
  color: #4a3215;
}
.mod-plaster .pl-scell.has-tile .pl-shex {
  background: linear-gradient(180deg, #fffdf6, #f4e6c8);
  box-shadow: none;
}
.mod-plaster .pl-scell.is-ok .pl-shex {
  background: radial-gradient(ellipse 62% 36% at 50% 20%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 72%), linear-gradient(160deg, #fff3b0, var(--gold) 55%, #dca10a);
}
.mod-plaster .pl-scell.is-err .pl-shex {
  background: var(--err);
}
.mod-plaster .pl-scell.is-err .pl-snum {
  color: #5a2a00;
}
.mod-plaster .pl-scell.is-home {
  filter: drop-shadow(0 0 6px rgba(242, 183, 5, 0.95));
}
.mod-plaster .pl-scell.is-home .pl-shex {
  background: repeating-linear-gradient(135deg, #fff1bf 0 10px, #ffe38a 10px 20px);
}

/* ---------- right panel: answers (L1/L2) and the tile tray (L3) ---------- */

.mod-plaster .pl-choicebox {
  position: absolute;
  left: 796px;
  top: 136px;
  width: 220px;
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mod-plaster .pl-choicebox.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mod-plaster .pl-choicebox.pl-locked {
  pointer-events: none;
}
.mod-plaster .pl-choices {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 28px;
  width: 220px;
}
.mod-plaster .pl-choices .btn {
  width: 220px;
  min-width: 0;
  font-family: var(--font-num);
  font-size: 54px;
}
.mod-plaster .pl-choices .btn.pl-tried {
  opacity: 0.32;
  filter: grayscale(0.5);
}
.mod-plaster .pl-choices .btn.pl-picked {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 5px var(--gold), var(--shadow);
}

.mod-plaster .pl-tray {
  position: absolute;
  left: 806px;
  top: 142px; /* ends 24 px above the main button */
  width: 200px;
  padding: 22px 0;
  display: grid;
  grid-template-columns: repeat(2, 76px);
  grid-auto-rows: 66px;
  gap: 16px 24px;
  justify-content: center;
  border-radius: 26px;
  background: linear-gradient(180deg, #e9c58f, #d6a462);
  box-shadow: inset 0 0 0 4px var(--pl-wood), 0 6px 0 rgba(90, 55, 10, 0.2);
}
.mod-plaster .pl-slot {
  position: relative;
}
.mod-plaster .pl-slot-hex {
  position: absolute;
  inset: 0;
  clip-path: var(--pl-hex);
  background: rgba(110, 70, 25, 0.25);
  transition: background 0.25s ease;
}
.mod-plaster .pl-slot.full .pl-slot-hex {
  background: #b98a4a;
}
.mod-plaster .pl-slot-hex::after {
  content: '';
  position: absolute;
  inset: 4px;
  clip-path: var(--pl-hex);
  background: transparent;
}
.mod-plaster .pl-slot.full .pl-slot-hex::after {
  background:
    radial-gradient(ellipse 60% 34% at 50% 22%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 72%),
    linear-gradient(160deg, #fbe39a, #f0c25a 60%, #e3aa3f);
}

/* ---------- Księga (control chart) ---------- */

.mod-plaster .pl-book {
  position: absolute;
  left: 0;
  top: 110px;
  width: 1040px;
  height: 602px;
  z-index: 30;
  background: rgba(246, 239, 224, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  animation: fade-in 0.2s ease;
}
.mod-plaster .pl-book-page {
  padding: 14px 18px;
  border-radius: 22px;
  background: var(--panel);
  border: 3px solid var(--line);
  box-shadow: var(--shadow);
}
.mod-plaster .pl-chart {
  display: grid;
  grid-template-columns: repeat(11, 62px);
  grid-auto-rows: 40px;
  gap: 3px;
}
.mod-plaster .pl-ch {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--font-num);
  color: var(--pl-honey-ink);
  border-radius: 8px;
  background: #fff4d1;
}
.mod-plaster .pl-ch.pl-ch-head {
  background: var(--pl-wood);
  color: #fff8ea;
}
.mod-plaster .pl-ch.pl-ch-head.on {
  background: var(--accent);
}
.mod-plaster .pl-ch.line {
  background: #ece6ff;
}
.mod-plaster .pl-ch.hit {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--gold-deep);
  transform: scale(1.1);
  position: relative;
  z-index: 1;
}
.mod-plaster .pl-bookclose {
  min-height: 72px;
}

/* ---------- success sparkles ---------- */

.mod-plaster .pl-spark {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fffbe6 0, var(--gold) 45%, rgba(242, 183, 5, 0) 72%);
  animation: pl-spark 0.9s ease-out forwards;
  z-index: 50;
}
@keyframes pl-spark {
  from { transform: translate(0, 0) scale(0.4); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(1.15); opacity: 0; }
}

/* reduced motion: no pulsing marks, rays without sliding */
@media (prefers-reduced-motion: reduce) {
  .mod-plaster .pl-ring.is-err,
  .mod-plaster .pl-ring.is-home,
  .mod-plaster .pl-tile.is-err {
    animation: none;
  }
}
/* the parent's reduced-motion setting is handled globally in base.css (#stage.reduced-motion) */
.mod-plaster .pl-rowhit.fx-highlight {
  animation: pl-rowglow 1.2s ease-in-out infinite;
}
@keyframes pl-rowglow {
  0%, 100% { box-shadow: inset 0 0 0 4px var(--gold), 0 0 0 0 rgba(242, 183, 5, 0.8); }
  50% { box-shadow: inset 0 0 0 4px var(--gold), 0 0 0 10px rgba(242, 183, 5, 0); }
}

/* the main button keeps exactly 220 px: the honeycomb ends 24 px to the left of it ("Porównaj" too) */
.mod-plaster .action-bar .btn-main {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  padding: 0 14px;
  gap: 10px;
  white-space: nowrap;
}
.mod-plaster.pl-L3 .action-bar .btn-main {
  font-size: 30px;
}

/* "Duży tekst": Cofnij keeps its size here — the honeycomb starts 24 px to the right of it */
.mod-plaster .action-bar .btn-undo {
  font-size: 26px;
  max-width: 186px;
}