.live-values-page { display: block; max-width: 1280px; padding: 1rem clamp(1rem, 4vw, 3.5rem); }
.notebook-header:has(+ .save-warning + .chapter-nav + #story .live-values-page) { min-height: 70px; }
.play-heading h1 { font-size: clamp(2rem, 3.5vw, 3.2rem); margin-bottom: 0.6rem; }
.play-instruction { font-size: 1.125rem; line-height: 1.6; max-width: 65ch; margin: 0.6rem 0; }
.practice-label { color: var(--blue); padding-left: 0.7rem; border-left: 3px solid var(--blue); }
.play-surface { position: relative; display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1rem, 4vw, 4rem); min-height: 410px; padding: 1rem 0; }
.play-surface h2 { font-size: 1.15rem; font-weight: 400; font-style: italic; color: var(--muted); }
.pieces-pool { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; align-content: start; min-height: 330px; }
.value-piece { position: relative; z-index: 3; width: 100%; min-width: 0; min-height: 54px; overflow-wrap: anywhere; padding: 0.7rem 0.5rem; border: 1px solid #a18051; border-radius: 1px 6px 2px 4px; background: linear-gradient(112deg, #fffaf0, #eee0bf); color: #433324; box-shadow: 2px 4px 0 #66451c19, 0 7px 13px #4426110c; font: 1.05rem/1.3 Georgia, serif; touch-action: manipulation; }
.value-piece:hover, .value-piece:focus-visible { background: #fffaf0; border-color: var(--blue); box-shadow: 2px 8px 9px #47331828; translate: 0 -4px; }
.value-piece[aria-pressed='true'] { border-color: var(--blue); color: #234f66; background: linear-gradient(110deg, #fff9e9, #d9e7de); }
.value-piece:disabled { opacity: 1; }
.collection-area { position: relative; padding-top: 5rem; min-width: 0; }
.play-suitcase { display: block; position: absolute; right: 0; top: -1rem; width: 145px; max-width: 45%; mix-blend-mode: multiply; pointer-events: none; }
.collection-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0.9rem; min-height: 285px; padding: 1.1rem; border-block: 1px dashed #a58b5b; background: #af96620a; }
.collection-slots:empty::after { content: 'Your choices gather here'; grid-column: 1 / -1; text-align: center; color: var(--muted); font-style: italic; padding-top: 2rem; }
.play-particles { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 8; }
.ink-letter { position: absolute; font: 1rem Georgia, serif; color: #7b633f; opacity: 0; }
.piece-meaning { min-height: 3.2em; padding: 0.7rem 1rem; border-left: 2px solid var(--ochre); line-height: 1.6; }
.play-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.play-controls button { padding: 0.6rem 0.8rem; }
.play-count { flex-basis: 100%; margin: 0 0 0.2rem; color: var(--blue); }
.values-play .context { margin-top: 1rem; }
.two-remain { display: block; min-height: 320px; }
.two-remain .collection-area { padding-top: 4rem; max-width: 740px; margin: auto; }
.two-remain .play-suitcase { width: 220px; opacity: 0.85; top: 0; right: calc(50% - 110px); }
.two-remain .collection-area h2 { position: relative; z-index: 2; margin-top: 7rem; text-align: center; }
.two-remain .collection-slots { min-height: 90px; background: none; border: 0; }
.two-remain .value-piece { font-size: clamp(1.5rem, 3vw, 2.5rem); padding: 1rem; }
.live-values-page .source-note { max-width: 75ch; }
@media (max-width: 650px) {
  .play-surface { grid-template-columns: 1fr; gap: 0.4rem; }
  .pieces-pool { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; gap: 0.55rem; }
  .value-piece { font-size: 0.95rem; }
  .collection-area { padding-top: 2.3rem; }
  .play-suitcase { width: 95px; }
  .collection-slots { min-height: 115px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .value-piece:hover { translate: none; } }