/* A common baseline, stable reserve and same-sized touch targets at every level. */
.sizes-scene { --sizes-art-height: clamp(90px, 18vh, 168px); --sizes-width: clamp(60px, 15vw, 112px); display: grid; grid-template-rows: minmax(0, 1fr) 64px minmax(0, 1fr) 24px; gap: 8px; align-items: center; justify-items: center; max-width: 720px; margin: auto; max-height: 570px; }
.sizes-choices, .sizes-train { display: grid; grid-template-columns: repeat(var(--sizes-count), var(--sizes-width)); gap: 12px; justify-content: center; align-items: end; position: relative; }
.sizes-choices { border-bottom: 2px solid var(--tf-border); padding-bottom: 4px; }
.sizes-piece, .sizes-wagon { position: relative; width: var(--sizes-width); height: calc(var(--sizes-art-height) + 28px); min-width: 56px; min-height: 56px; display: flex; align-items: flex-start; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--tf-muted); touch-action: none; }
.sizes-piece { height: var(--sizes-art-height); cursor: grab; z-index: 2; }
.sizes-piece .sizes-art, .sizes-cargo { display: block; width: 100%; height: var(--sizes-art-height); pointer-events: none; }
.sizes-piece svg, .sizes-cargo svg { width: 100%; height: 100%; }
.sizes-key { position: absolute; top: calc(100% + 8px); left: 0; right: 0; font: 500 11px/1 var(--tf-font); color: var(--tf-subtle); }
.sizes-piece.sizes-placed { visibility: hidden; }
.sizes-piece.sizes-dragging { cursor: grabbing; z-index: 8; filter: drop-shadow(0 7px 5px rgb(0 0 0 / 20%)); }
.sizes-wagon { cursor: default; }
.sizes-wagon.sizes-active { cursor: pointer; }
.sizes-wagon-bed { position: absolute; bottom: 14px; left: 2px; right: 2px; height: 17px; border-radius: 5px; background: #819697; box-shadow: inset 0 -4px 0 rgb(31 60 64 / 18%); }
.sizes-wagon-bed::after { content: ''; position: absolute; width: 18px; height: 4px; right: -15px; top: 8px; background: #819697; }
.sizes-wagon:last-child .sizes-wagon-bed::after { display: none; }
.sizes-wagon-wheels { position: absolute; height: 15px; bottom: 0; left: 10px; right: 10px; }
.sizes-wagon-wheels::before, .sizes-wagon-wheels::after { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #526d79; border: 5px solid #bed1ce; bottom: 0; }
.sizes-wagon-wheels::before { left: 0; }.sizes-wagon-wheels::after { right: 0; }
.sizes-wagon.sizes-active .sizes-wagon-bed { background: #f0d28d; outline: 2px solid #f7e5b8; outline-offset: 3px; }
.sizes-filled .sizes-wagon-bed { background: #b7caa8; }
.sizes-wagon:not(.sizes-filled) .sizes-cargo { opacity: .18; }
.sizes-pending .sizes-cargo { visibility: hidden; }
.sizes-next { display: none; position: absolute; top: 40%; left: 0; right: 0; font-size: 28px; line-height: 1; color: var(--tf-text); }
.sizes-active:not(.sizes-filled) .sizes-next { display: block; }
.sizes-scene[data-level="1"] .sizes-next { top: 12%; }
.sizes-between { display: grid; place-items: center; width: 100%; height: 64px; pointer-events: none; }
.sizes-arrow { color: var(--tf-subtle); font-size: 25px; }
.sizes-measure { display: none; color: var(--tf-link); pointer-events: none; }
.sizes-measure-top { stroke-dasharray: 4 4; }
.sizes-measure-base { opacity: .65; }
.sizes-comparing .sizes-look .sizes-measure, .sizes-comparing .sizes-reference .sizes-measure { display: inline; }
.sizes-comparing .sizes-piece:not(.sizes-look):not(.sizes-reference) { opacity: .4; }
.sizes-reference { outline: 2px solid var(--tf-link); outline-offset: -2px; }
.sizes-status { margin: 0; color: var(--tf-muted); font-size: 12px; line-height: 1.3; min-height: 16px; text-align: center; }
.sizes-look { outline: 2px solid var(--tf-muted); outline-offset: -2px; }
.sizes-hint, .sizes-over { outline: 3px dashed var(--tf-link); outline-offset: 4px; }
.sizes-piece.sizes-hint { outline-offset: -3px; }
.sizes-flight { position: fixed; z-index: 8; pointer-events: none; }
.sizes-complete .sizes-wagon-bed { background: #b7caa8; }
@media (hover:hover) { .sizes-piece:not(.sizes-placed):hover { background: var(--play-hover); } }
@media (max-width:600px) {
  .sizes-scene { --sizes-art-height: clamp(90px, 18vh, 126px); --sizes-width: clamp(60px, 17vw, 84px); gap: 6px; grid-template-rows: minmax(0, 1fr) 52px minmax(0, 1fr) 20px; max-height: 430px; }
  .sizes-choices, .sizes-train { gap: 10px; }
  .sizes-between { height: 52px; }
}
@media (max-width:370px) {
  .sizes-scene { --sizes-width: 60px; --sizes-art-height: 88px; gap: 3px; grid-template-rows: auto 44px auto 18px; align-content: center; }
  .sizes-choices, .sizes-train { gap: 9px; }
  .sizes-between { height: 44px; }
}
@media (max-height:520px) and (orientation:landscape) {
  body[data-game="sizes"] .play-topline { flex-basis: 66px; }
  body[data-game="sizes"] .game-content { margin-top: 0; }
  body[data-game="sizes"] .play-heading { top: 14px; right: 24px; }
  .sizes-scene { --sizes-art-height: clamp(78px, 24vh, 110px); --sizes-width: 56px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0,1fr) 16px; column-gap: 28px; row-gap: 10px; max-width: 800px; max-height: 190px; }
  .sizes-choices, .sizes-train { gap: 3px; }
  .sizes-choices { margin-bottom: 26px; }
  .sizes-between { display: none; }
  .sizes-status { grid-column: 1 / -1; }
}
@media (max-height:360px) and (orientation:landscape) {
  body[data-game="sizes"] .play-topline { flex-basis: 66px; }
  body[data-game="sizes"] .play-heading h1 { font-size: 20px; }
  body[data-game="sizes"] .play-heading p { font-size: 12px; }
  .sizes-scene { --sizes-art-height: 78px; row-gap: 4px; }
  .sizes-status { font-size: 11px; }
}