/* A repeating ticket, a whole wooden train, and cargo within easy reach. */
.patterns-scene { --patterns-size: clamp(44px, 9vw, 84px); --patterns-gap: clamp(2px, .6vw, 6px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(108px, 1.1fr) minmax(82px, 1fr) 20px; align-items: center; justify-items: center; gap: 10px; max-width: 820px; max-height: 500px; align-self: center; margin: auto; }
.patterns-ticket-row { display: flex; justify-content: center; align-items: center; }
.patterns-ticket { display: flex; align-items: center; gap: 12px; padding: 9px 17px; color: #53696e; background: #f0e4c9; border: 0; border-radius: 12px; min-height: 58px; box-shadow: 0 4px 0 rgb(11 28 34 / 12%); touch-action: manipulation; }
.patterns-ticket[hidden], .patterns-builder[hidden], #patterns-parent-controls [hidden] { display: none; }
.patterns-ticket-mark, .patterns-ticket-arrow { font-size: 27px; line-height: 1; }
.patterns-model { display: flex; gap: 5px; }
.patterns-model-object { display: block; width: clamp(32px, 6vw, 44px); height: clamp(32px, 6vw, 44px); border-radius: 7px; }
.patterns-model-object.patterns-hint { outline: 3px dashed #6c7353; outline-offset: 2px; }
.patterns-model-object.patterns-beat { background: #cfdbba; outline: 2px solid #53696e; outline-offset: 2px; }
.patterns-builder { display: flex; gap: 8px; padding: 7px 11px; background: #f0e4c9; border-radius: 12px; box-shadow: 0 4px 0 rgb(11 28 34 / 12%); }
.patterns-slot { position: relative; width: 52px; height: 52px; padding: 3px 3px 10px; border: 2px solid transparent; color: #344c52; background: transparent; touch-action: manipulation; }
.patterns-slot[aria-pressed="true"] { border-color: #53696e; background: #fff7e4; }
.patterns-slot span { position: absolute; bottom: 1px; left: 0; right: 0; font: 500 10px/1 var(--tf-font); }
.patterns-station { width: max(100%, 312px); max-width: calc(100vw - 8px); position: relative; padding: 13px 0 9px; }
.patterns-convoy { display: flex; gap: var(--patterns-gap); align-items: end; justify-content: center; position: relative; z-index: 1; }
.patterns-train { display: grid; grid-template-columns: repeat(6, var(--patterns-size)); gap: var(--patterns-gap); }
.patterns-engine { position: relative; display: flex; align-items: end; justify-content: center; flex: 0 0 clamp(44px, 6vw, 72px); width: clamp(44px, 6vw, 72px); min-width: 44px; height: 70px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--tf-accent-text); touch-action: manipulation; }
.patterns-engine::after { content: ''; position: absolute; inset: 0 -6px 0 -6px; }
.patterns-engine svg { width: 100%; height: auto; pointer-events: none; }
.patterns-wagon { width: var(--patterns-size); height: calc(var(--patterns-size) + 22px); position: relative; display: block; background: transparent; color: var(--tf-accent-text); border: 0; border-radius: 12px; padding: 0 0 22px; touch-action: manipulation; cursor: default; }
.patterns-wagon.patterns-active, .patterns-wagon.patterns-editable { cursor: pointer; }
.patterns-cargo { display: block; width: 100%; height: 100%; padding: 3px; pointer-events: none; }
.patterns-empty { display: block; width: 85%; height: 90%; margin: auto; border: 2px dashed var(--tf-control-border); border-radius: 12px; }
.patterns-active .patterns-empty { border-color: var(--tf-accent-text); border-width: 3px; }
.patterns-wagon-base { position: absolute; height: 12px; bottom: 13px; left: 0; right: 0; border-radius: 4px; background: #d9bb91; box-shadow: inset 0 -3px 0 rgb(105 78 59 / 15%); }
.patterns-wagon-base::after { content: ''; position: absolute; top: 6px; width: calc(var(--patterns-gap) + 2px); height: 3px; left: 100%; background: #88a3a1; }
.patterns-wagon:last-child .patterns-wagon-base::after { display: none; }
.patterns-wheels { position: absolute; bottom: 0; left: 7px; right: 7px; height: 14px; }
.patterns-wheels::before, .patterns-wheels::after { content: ''; position: absolute; top: 0; width: 14px; height: 14px; border: 4px solid #b9cebd; background: #536f7a; border-radius: 50%; }
.patterns-wheels::before { left: 0; }.patterns-wheels::after { right: 0; }
.patterns-target { display: none; position: absolute; top: -29px; left: 0; right: 0; text-align: center; font-size: 26px; line-height: 1; }
.patterns-active .patterns-target { display: block; }
.patterns-scene[data-mode="create"] .patterns-target { display: none; }
.patterns-track { display: block; height: 4px; border-radius: 2px; background: var(--tf-border); margin-top: 4px; opacity: .8; }
.patterns-choices { display: flex; gap: clamp(20px, 5vw, 40px); justify-content: center; align-items: center; }
.patterns-choice { width: clamp(66px, 15vw, 118px); height: clamp(76px, 17vw, 128px); display: block; position: relative; border: 2px solid var(--tf-border); border-bottom-width: 5px; border-radius: 24px; padding: 8px 8px 15px; background: var(--tf-surface); touch-action: none; color: var(--tf-muted); cursor: grab; user-select: none; -webkit-user-select: none; }
.patterns-choice svg { pointer-events: none; }
.patterns-choice kbd { position: absolute; left: 0; right: 0; bottom: 3px; font: 500 10px/1 var(--tf-font); color: var(--tf-subtle); }
.patterns-choice.patterns-look { border-color: var(--tf-control-border); }
.patterns-choice.patterns-hint { outline: 3px dashed var(--tf-accent-text); outline-offset: 5px; }
.patterns-wagon.patterns-hint .patterns-empty { outline: 3px dashed var(--tf-accent-text); outline-offset: 4px; }
.patterns-beat .patterns-cargo { outline: 2px solid var(--tf-accent-text); outline-offset: -2px; border-radius: 12px; }
.patterns-linked .patterns-wagon-base, .patterns-ready .patterns-wagon-base { background: #b7caa8; }
.patterns-drop { outline: 3px solid var(--tf-accent-text); outline-offset: 2px; }
.patterns-held { opacity: .35; }
.patterns-choice.patterns-ghost { position: fixed; z-index: 6; pointer-events: none; margin: 0; background: transparent; border-color: transparent; box-shadow: none; cursor: grabbing; }
.patterns-ghost kbd { display: none; }
.patterns-status { margin: 0; width: 100%; text-align: center; font-size: 12px; line-height: 1.3; color: var(--tf-muted); }
#patterns-parent-controls { display: grid; gap: 12px; }
@media (hover: hover) { .patterns-choice:hover { border-color: var(--tf-control-border); }.patterns-ticket:hover { background: #f7ead0; }.patterns-engine:hover svg { filter: brightness(1.08); } }
@media (max-width: 400px) { .patterns-scene { --patterns-size: 44px; --patterns-gap: 0px; }.patterns-choice { border-radius: 18px; }.patterns-engine { height: 54px; } }
@media (max-height: 620px) and (orientation: portrait) { .patterns-scene { grid-template-rows: 62px minmax(86px, 1fr) 78px 16px; gap: 8px; }.patterns-ticket { min-height: 46px; padding: 5px 12px; }.patterns-model-object:not(.patterns-slot) { width: 30px; height: 30px; }.patterns-choice { width: 66px; height: 76px; }.patterns-station { padding-top: 18px; }.patterns-target { top: -23px; font-size: 22px; } }
@media (max-height: 520px) and (orientation: landscape) { .patterns-scene { --patterns-size: 44px; --patterns-gap: 2px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr 1fr; gap: 3px 16px; max-width: 640px; max-height: 220px; }.patterns-ticket-row { grid-column: 1; grid-row: 1; align-self: start; }.patterns-ticket { min-height: 44px; padding: 4px 12px; gap: 8px; }.patterns-model-object:not(.patterns-slot) { width: 27px; height: 27px; }.patterns-ticket-mark, .patterns-ticket-arrow { font-size: 21px; }.patterns-station { grid-column: 1; grid-row: 2; width: 100%; min-width: 312px; padding-top: 7px; padding-bottom: 0; align-self: end; }.patterns-engine { flex-basis: 44px; width: 44px; height: 54px; }.patterns-target { font-size: 19px; top: -18px; }.patterns-choices { grid-column: 2; grid-row: 1 / 3; gap: 6px; flex-direction: column; }.patterns-choice { width: 56px; height: 52px; padding: 2px 6px 10px; border-radius: 14px; border-bottom-width: 3px; }.patterns-slot { width: 44px; height: 44px; }.patterns-builder { padding: 3px 9px; }.patterns-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }.patterns-track { height: 3px; margin-top: 2px; } }
@media (max-height: 350px) and (orientation: landscape) { .patterns-scene { grid-template-rows: 48px 1fr; }.patterns-choices { flex-direction: row; gap: 6px; max-width: 118px; flex-wrap: wrap; }.patterns-choice { width: 52px; height: 54px; }.patterns-station { align-self: center; } }
@media (forced-colors: active) { .patterns-ticket,.patterns-choice,.patterns-slot { border: 2px solid ButtonText; }.patterns-active,.patterns-drop,.patterns-beat { outline: 3px dashed Highlight; } }