/* Edición pizarrón. La versión original conserva sus propios archivos. */
@font-face {
  font-family: 'Gis';
  src: url('fonts/PatrickHand-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { --green: #214c3e; --ink: #233d34; --paper: #f3f4f0; }
body { background: #f3f4f0; }
.table {
  position: relative;
  isolation: isolate;
  border: 12px solid #986a42;
  border-top-color: #b1865c;
  border-right-color: #805331;
  border-bottom-color: #724a2e;
  border-radius: 7px;
  padding: 18px 24px 15px;
  background-color: #234b3d;
  background-image:
    radial-gradient(ellipse at 23% 35%, #d6e6bf0b 0%, transparent 53%),
    radial-gradient(ellipse at 78% 76%, #edf4da09 0%, transparent 46%),
    repeating-linear-gradient(3deg, transparent 0 4px, #e4ebd503 5px, transparent 6px),
    repeating-linear-gradient(94deg, transparent 0 9px, #0b221914 10px, transparent 11px);
  box-shadow: inset 0 3px 9px #092118a6, inset 0 0 48px #0b211d40,
    0 2px 0 #ceab7d, 0 7px 0 #513a27, 0 13px 20px #33261826;
  margin-bottom: 26px;
}
.table::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: -14px;
  right: -14px;
  height: 5px;
  border-top: 2px solid #c39d6c;
  background: #805634;
  box-shadow: 0 3px 2px #36231555;
  pointer-events: none;
}
.table-heading, .table-instruction, .end, .table-center, .scroll-note, .join {
  font-family: 'Gis', 'Segoe Print', 'Chalkboard SE', cursive;
  font-weight: 400;
  color: #f1f2d9;
  text-shadow: .4px .5px 0 #f2f3d63b, -.5px -.2px 0 #f2f3d62b;
}
.table-heading h2 { font-size: 1.85rem; font-weight: 400; letter-spacing: .02em; }
.table-heading span { font-size: 1rem; color: #e1e7cf; letter-spacing: .06em; }
.table-instruction { font-size: 1.22rem; margin-top: 0; color: #e2e7d1; }
.table-center { font-family: 'Gis', cursive; font-size: 3rem; font-style: normal; color: #f4e394; transform: rotate(-7deg); }
.end {
  border: 2px dashed #d7dec39e;
  border-radius: 5px 9px 6px 8px;
  min-height: 96px;
  background: #102f2026;
  padding: 10px 16px;
  gap: 3px;
}
.end span { font-size: 1.15rem; color: #e2e7d1; }
.end strong { font-size: 1.65rem; font-weight: 400; color: #f4e394; }
.end:disabled { opacity: .88; }
.end:not(:disabled) { background: #f2e8ab08; border: 2px dashed #f4e394; box-shadow: inset 0 0 14px #f4e39408; }
.end:not(:disabled):hover { background: #f4e39414; }
.end.drop-hover strong { color: #173e38; }
.scroll-note { font-size: 1rem; color: #ccd9c2; }
.join { font-size: 1.3rem; color: #d6e0c6; padding: 0 9px; }
.chain-scroll { padding: 26px 6px 29px; scrollbar-color: #b1bea2 #173e30; }

/* La cara de marfil queda sobre un canto grueso y una base oscura. */
.tile {
  background: linear-gradient(155deg, #fffef6 12%, #f0eddb 100%);
  color: #252c28;
  border: 2px solid #bfb8a2;
  border-top-color: #fffffa;
  border-left-color: #fdfcf1;
  border-radius: 12px;
  min-height: 102px;
  padding: 0;
  box-shadow: inset 0 0 0 2px #fffff180, inset 0 -3px 5px #a3997629,
    0 3px 0 #d2ccb7, 0 7px 0 #aaa28a, 0 10px 0 #383c35,
    1px 13px 9px #0b160d40;
}
.tile-half {
  position: relative;
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
  padding: 17px 12px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  text-shadow: 0 1px 0 #fff, 0 -.5px 0 #151c1820;
}
.tile .equation { border-right: 0; }
.tile .equation::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: -1px;
  width: 2px;
  background: #6a6e603f;
  box-shadow: 1px 0 0 #fffff5, -1px 0 1px #31382c18;
}
.tile .equation::before {
  content: '';
  position: absolute;
  top: calc(50% - 3px);
  right: -3px;
  width: 5px;
  height: 5px;
  border: 1px solid #9b957f;
  border-radius: 50%;
  background: #dad3bc;
  box-shadow: inset 0 1px 1px #fff7db;
  z-index: 1;
}
.tile .value { background: #ffffff08; }
.chain .tile { width: 246px; }
.hand { gap: 23px 19px; padding: 2px 3px 12px; }
.hand .tile { min-height: 106px; }
.hand .tile:hover, .hand .tile[aria-pressed=true] {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 2px #fffff180, inset 0 -3px 5px #a3997629,
    0 3px 0 #d2ccb7, 0 7px 0 #aaa28a, 0 10px 0 #383c35, 1px 18px 12px #0b160d38;
}
.hand .tile[aria-pressed=true] { outline: 3px solid #b47c09; outline-offset: 3px; }
.hand .tile[aria-pressed=true] .value { background: #f8d86b40; }
.hand .tile.drag-source { transform: none; opacity: .2; box-shadow: 0 3px 0 #aaa28a; }
.drag-ghost {
  box-shadow: inset 0 0 0 2px #fffff180, 0 3px 0 #d2ccb7, 0 7px 0 #aaa28a,
    0 10px 0 #383c35, 5px 23px 22px #0b160d55;
}
.dragging .chain .drop-hover { text-shadow: none; }

@media(max-width:800px) {
  .table { padding: 16px; border-width: 10px; }
  .tile-half { padding: 15px 8px; }
  .dragging .ends { background-color: #234b3d; border: 4px solid #986a42; border-bottom-color: #724a2e; }
  .drag-ghost .tile-half { min-width: 0; width: 50%; flex: 1 1 50%; }
}
@media(max-width:560px) {
  .table { border-width: 8px; padding: 13px 10px; }
  .table::after { left: -10px; right: -10px; bottom: -9px; }
  .table-heading h2 { font-size: 1.65rem; }
  .table-heading span { font-size: .875rem; letter-spacing: .025em; }
  .table-instruction { font-size: 1.1rem; line-height: 1.35; margin-bottom: 15px; }
  .end { padding: 8px; min-height: 98px; }
  .end span { font-size: 1rem; line-height: 1.2; }
  .end strong { font-size: 1.4rem; line-height: 1.3; }
  .hand { gap: 22px 12px; }
  .hand .tile { min-height: 104px; }
  .hand .tile-half, .drag-ghost .tile-half {
    min-width: 0;
    flex: 1 1 50%;
    width: 50%;
    padding: 13px 8px;
    font-size: .9375rem;
  }
  .chain .tile { width: 224px; min-height: 98px; }
  .chain .tile-half { font-size: 1rem; }
  .scroll-note { font-size: .9375rem; line-height: 1.3; }
}