/* town-sheets.css (TW7; town DESIGN §2.2, §2.5-§2.10): the Toy Box drawer, the thing card, the bring card with its badge
   reveal and the nap, on the core tokens (the wish sheet, §2.6, is styled by TW4's wishsheet.js). Every selector names a tw-
   class. Pictures and felt, no words in 6-8 (the 9-10 row and role labels are small and quiet). Every control shows its
   pressed look in the pointerdown itself (.is-down) and is 60 px or more. Tablets (shortest side >= 700 px) scale every
   Town button by 1.15 (--k, §2.2). */

.tw-sheet, .tw-bring, .tw-nap { --k: 1; }
@media (min-width: 700px) and (min-height: 700px) { .tw-sheet, .tw-bring, .tw-nap { --k: 1.15; } }

/* ── the Toy Box drawer: a bottom sheet of 70 % in portrait, a right panel 380 px wide (420 on a tablet) in landscape */
.tw-drawer-bd { background: rgba(24, 22, 18, .18); }
.sheet.tw-drawer { height: 70dvh; max-height: 70dvh; width: 100%; max-width: none; padding: 14px 0 calc(16px + env(safe-area-inset-bottom)); background: var(--paper);
  display: flex; flex-direction: column; }
.tw-drawer .sheet-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tw-drawer .tw-drawer-rows { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
.tw-drawer .tw-row { display: flex; align-items: flex-start; gap: 8px; padding: 0 0 0 12px; }
.tw-drawer .tw-row-head { flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: calc(28px * var(--k)); }
.tw-drawer .tw-row-ico { width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); }
.tw-drawer .tw-row-ico .ico { width: 34px; height: 34px; }
.tw-drawer .tw-row-label { font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.1; text-align: center; }
/* the snapport keeps the row's own 6 px inset, so a row that scrolls sideways opens with its capture tile's ring whole */
.tw-drawer .tw-tiles { flex: 1; min-width: 0; display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; padding: 6px 16px 8px 6px;
  scroll-padding-inline: 6px 16px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tw-drawer .tw-tiles::-webkit-scrollbar { display: none; }
.tw-drawer .tw-tiles.tw-has-cards { padding-bottom: calc(44px * var(--k)); }
.tw-drawer .tw-tilebox { position: relative; flex: none; width: calc(96px * var(--k)); scroll-snap-align: start; }
.tw-drawer .tw-tile { position: relative; width: calc(96px * var(--k)); height: calc(96px * var(--k)); padding: 0; border: 0; border-radius: var(--tile); background: var(--card); box-shadow: var(--shadow), var(--press);
  display: grid; place-items: center; cursor: pointer; touch-action: pan-x; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform var(--t-micro) var(--spring); }
.tw-drawer .tw-tile.is-down, .tw-drawer .tw-cardbtn.is-down, .tw-sheet .tw-roundbtn.is-down, .tw-sheet .tw-close.is-down { transform: scale(.94); transition-duration: 0ms; }
.tw-drawer .tw-tile-pic { width: 87.5%; height: 87.5%; object-fit: contain; pointer-events: none; }
.tw-drawer .tw-tile-new { background: var(--coral-field); box-shadow: 0 0 0 4px var(--coral), var(--shadow); }
.tw-drawer .tw-tile-cam { width: 66%; height: 66%; object-fit: contain; pointer-events: none; }
.tw-drawer .tw-tile.tw-ready { box-shadow: var(--glow-ready), var(--shadow); }
.tw-drawer .tw-tile-badge { position: absolute; right: -6px; top: -6px; width: 34px; height: 34px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow);
  display: grid; place-items: center; pointer-events: none; }
.tw-drawer .tw-tile-badge img { width: 28px; height: 28px; }
.tw-drawer .tw-tile-state { position: absolute; left: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: var(--ink);
  display: grid; place-items: center; box-shadow: var(--shadow); pointer-events: none; }
.tw-drawer .tw-tile-state .ico { width: 20px; height: 20px; }
/* in the rows with card buttons the button sits over the bottom-left corner: the state pictogram moves to the top left */
.tw-drawer .tw-has-cards .tw-tile-state { bottom: auto; top: -4px; }
/* the card button: 60 px under the tile, overlapping it by 24 px, drawn above it so a press on it never reaches the tile */
.tw-drawer .tw-cardbtn { position: absolute; z-index: 2; left: calc(18px * var(--k)); top: calc(72px * var(--k)); width: calc(60px * var(--k)); height: calc(60px * var(--k)); padding: 0; border: 0; border-radius: 50%;
  background: var(--butter); color: var(--ink); box-shadow: var(--shadow-lift); display: grid; place-items: center; cursor: pointer;
  transition: transform var(--t-micro) var(--spring); }
.tw-drawer .tw-cardbtn .ico { width: 26px; height: 26px; }
.tw-drawer .tw-drawer-foot { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 0; }
.tw-sheet .tw-roundbtn, .tw-sheet .tw-close { width: calc(60px * var(--k)); height: calc(60px * var(--k)); padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--ink);
  box-shadow: var(--shadow), var(--press); display: grid; place-items: center; cursor: pointer; transition: transform var(--t-micro) var(--spring);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tw-sheet .tw-roundbtn .ico, .tw-sheet .tw-close .ico { width: 26px; height: 26px; }
.tw-drawer .tw-clapper { width: calc(68px * var(--k)); height: calc(68px * var(--k)); background: var(--card); }
@media (orientation: landscape) {
  .tw-drawer-bd { justify-content: flex-end; align-items: stretch; }
  .sheet.tw-drawer { width: 380px; height: 100dvh; max-height: 100dvh; border-radius: 28px 0 0 28px; padding-top: 12px; }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 700px) { .sheet.tw-drawer { width: 420px; } }

/* ── the thing card: 340 × 540 centred (portrait), 600 × 360 with the picture left (landscape) */
.tw-card-bd { align-items: center; background: rgba(24, 22, 18, .28); }
.sheet.tw-cardsheet { width: min(calc(340px * var(--k)), calc(100vw - 32px)); max-height: min(calc(540px * var(--k)), calc(100dvh - 32px)); border-radius: 28px; padding: 18px; background: var(--paper); }
.tw-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tw-card-pic { width: calc(180px * var(--k)); height: calc(180px * var(--k)); flex: none; display: grid; place-items: center; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); }
.tw-card-pic img { width: 91%; height: 91%; object-fit: contain; }
.tw-card-side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tw-card-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tw-card .tw-cardchip, .tw-card .tw-badge, .tw-card .tw-pretend { width: calc(72px * var(--k)); height: calc(72px * var(--k)); padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--ink);
  box-shadow: var(--shadow), var(--press); display: grid; place-items: center; cursor: pointer; transition: transform var(--t-micro) var(--spring);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.tw-card .tw-cardchip .ico { width: 53%; height: 53%; }
.tw-card .tw-badge { background: var(--card); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--sand-deep), var(--shadow); }
.tw-card .tw-badge img { width: 89%; height: 89%; pointer-events: none; }
.tw-card .tw-badge.tw-claimed { box-shadow: 0 0 0 4px var(--signal), var(--shadow); }
.tw-card .tw-badge.tw-hop { animation: tw-hop 420ms var(--spring); }
.tw-card .tw-pretend { background: var(--butter); }
.tw-card .tw-pretend .ico { width: 47%; height: 47%; }
.tw-card .tw-pretend.tw-open { box-shadow: 0 0 0 4px var(--signal), var(--shadow); }
.tw-card .tw-fit { width: calc(72px * var(--k)); height: calc(72px * var(--k)); display: grid; place-items: center; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); }
.tw-card .tw-fit img { width: 83%; height: 83%; }
.tw-card .tw-close { position: absolute; right: -6px; top: -6px; }
.tw-card :is(.tw-cardchip, .tw-badge, .tw-pretend).is-down { transform: scale(.94); transition-duration: 0ms; }
@media (orientation: landscape) {
  .sheet.tw-cardsheet { width: min(calc(600px * var(--k)), calc(100vw - 32px)); max-height: min(calc(360px * var(--k)), calc(100dvh - 24px)); }
  .tw-card { flex-direction: row; align-items: center; gap: 18px; }
  .tw-card-side { align-items: flex-start; }
  .tw-card-row { justify-content: flex-start; }
}

/* ── the bring card (tw-bring): the island behind it at 40 % dimmed. Portrait: the cut-out, then roles, sizes, material and
   the check in one column; landscape: the cut-out over the check on the left, the three rows on the right, at the §2.9
   sizes (role 104, size 96, check 96); 9-10 on a phone in landscape puts its open material tiles in a third column. */
.tw-bring { position: fixed; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--head) + 4px) 16px calc(24px + env(safe-area-inset-bottom));
  background: rgba(24, 22, 18, .4); pointer-events: auto; overflow-y: auto; }
.tw-bring-card { width: min(calc(380px * var(--k)), 100%); display: grid; grid-template-columns: 1fr; grid-template-areas: "pic" "roles" "sizes" "mats" "ok"; justify-items: center; gap: 12px;
  padding: 16px 12px 18px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-lift); }
.tw-bring-rows { display: contents; }
.tw-bring-top { grid-area: pic; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; }
.tw-bring-pic { width: 200px; height: 200px; display: grid; place-items: center; transition: transform var(--t-card) var(--spring); }
.tw-bring-pic img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(93, 63, 26, .22)); }
.tw-bring-pic[data-size="hand"] { transform: scale(.82); }
.tw-bring-pic[data-size="chair"] { transform: scale(1.1); }
.tw-bring-pic.tw-hop { animation: tw-hop 420ms var(--spring); }
.tw-reveal { position: absolute; right: 0; top: 0; bottom: 0; width: 64px; display: flex; flex-direction: column; justify-content: center; gap: 8px; pointer-events: none; }
.tw-reveal .tw-pop { width: 56px; height: 56px; opacity: 0; transform: scale(.2); transition: opacity 160ms ease, transform 320ms var(--spring); }
.tw-reveal .tw-pop.tw-in { opacity: 1; transform: none; }
.tw-reveal .tw-pop img { width: 100%; height: 100%; }
.tw-roles { grid-area: roles; }
.tw-sizes { grid-area: sizes; }
.tw-roles, .tw-sizes { display: flex; justify-content: center; gap: 12px; }
.tw-bring .tw-choice { position: relative; padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: var(--shadow), var(--press);
  display: grid; place-items: center; cursor: pointer; transition: transform var(--t-micro) var(--spring), box-shadow var(--t-micro) ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tw-bring .tw-role { width: calc(104px * var(--k)); height: calc(104px * var(--k)); }
.tw-bring .tw-size { width: calc(96px * var(--k)); height: calc(96px * var(--k)); }
.tw-bring .tw-choice-pic { display: grid; place-items: center; width: 62%; height: 62%; }
.tw-bring .tw-choice-pic .ico, .tw-bring .tw-choice-pic img { width: 100%; height: 100%; }
.tw-bring .tw-choice-word { position: absolute; left: 50%; bottom: -2px; transform: translate(-50%, 50%); padding: 2px 8px; border-radius: 999px; background: var(--card);
  font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; box-shadow: var(--shadow); }
.tw-bring .tw-choice[aria-checked="true"] { background: var(--coral-field); box-shadow: 0 0 0 4px var(--coral), var(--shadow); }
/* the material: one chip in 6-8 that opens the eight tiles, four to a row */
.tw-bring .tw-mats { grid-area: mats; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: calc(296px * var(--k)); padding: 4px; }
.tw-bring .tw-mat { flex: none; width: calc(64px * var(--k)); height: calc(64px * var(--k)); padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: var(--shadow), var(--press);
  display: grid; place-items: center; cursor: pointer; transition: transform var(--t-micro) var(--spring); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tw-bring .tw-mat .ico { width: 53%; height: 53%; }
.tw-bring .tw-mat[aria-checked="true"], .tw-bring .tw-mat.tw-chip { box-shadow: 0 0 0 4px var(--coral), var(--shadow); }
.tw-bring .tw-ok { grid-area: ok; width: calc(96px * var(--k)); height: calc(96px * var(--k)); padding: 0; border: 0; border-radius: 50%; background: var(--coral); color: var(--ink); box-shadow: var(--shadow-lift), var(--press);
  display: grid; place-items: center; cursor: pointer; transition: transform var(--t-micro) var(--spring); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tw-bring .tw-ok .ico { width: 50%; height: 50%; stroke-width: 2.6; }
.tw-bring :is(.tw-choice, .tw-mat, .tw-ok).is-down { transform: scale(.94); transition-duration: 0ms; }
.tw-bring-card.tw-accepted :is(.tw-roles, .tw-sizes, .tw-mats, .tw-ok) { opacity: .35; pointer-events: none; transition: opacity 200ms ease; }
html.older .tw-bring .tw-roles, html.older .tw-bring .tw-sizes { margin-bottom: 8px; }
@media (orientation: landscape) {
  .tw-bring { padding-top: 10px; padding-bottom: 10px; }
  .tw-bring-card { width: auto; max-width: calc(100vw - 150px); grid-template-columns: auto auto; grid-template-areas: "pic roles" "pic sizes" "ok mats"; align-items: center;
    column-gap: 20px; row-gap: 8px; padding: 12px 18px; }
  .tw-bring-top { min-height: 0; width: auto; }
  .tw-bring-pic { width: 150px; height: 150px; }
  .tw-bring .tw-mats { max-width: none; flex-wrap: nowrap; }
  .tw-bring .tw-mats.tw-open { display: grid; grid-template-columns: repeat(4, calc(60px * var(--k))); padding: 0; }
  .tw-bring .tw-mats.tw-open .tw-mat { width: calc(60px * var(--k)); height: calc(60px * var(--k)); }
  .tw-reveal { right: -44px; }
}
/* a phone in landscape, 9-10: the open material tiles (two columns of four) beside the role and size rows */
@media (orientation: landscape) and (max-height: 699.98px) {
  html.older .tw-bring-card { grid-template-columns: auto auto auto; grid-template-areas: "pic roles mats" "ok sizes mats"; column-gap: 16px; }
  html.older .tw-bring-pic { width: 128px; height: 128px; }
  html.older .tw-bring .tw-mats.tw-open { grid-template-columns: repeat(2, 60px); padding: 0; }
  html.older .tw-bring .tw-roles, html.older .tw-bring .tw-sizes { margin-bottom: 10px; }
  html.older .tw-reveal { right: -36px; }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 700px) {
  .tw-bring-pic { width: 200px; height: 200px; }
}
/* the reveal's 2D acting, 0.4 s each (§2.9) */
.tw-bring-pic.tw-act-rolls { animation: tw-act-roll 400ms ease-in-out; }
.tw-bring-pic.tw-act-bridges { animation: tw-act-flat 400ms ease-in-out; }
.tw-bring-pic.tw-act-catches { animation: tw-act-dip 400ms ease-in-out; }
.tw-bring-pic.tw-act-holdsWater { animation: tw-act-tip 400ms ease-in-out; }
.tw-bring-pic.tw-act-reaches { animation: tw-act-stretch 400ms ease-in-out; }
.tw-bring-pic.tw-act-blowsAway { animation: tw-act-drift 400ms ease-in-out; }
.tw-bring-pic.tw-act-knocks { animation: tw-act-thump 400ms ease-in; }
.tw-bring-pic.tw-act-sinks { animation: tw-act-bob 400ms ease-in-out; }

/* ── the nap (tw-nap): the island at 55 %, 30 % less colour */
.tw-nap { position: fixed; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 30, 51, .55); pointer-events: auto; padding: calc(var(--head) + 8px) 16px calc(24px + env(safe-area-inset-bottom)); }
html.tw-dim-nap #stage { filter: saturate(.7); }
.tw-nap .tw-wake { position: fixed; left: calc(16px + env(safe-area-inset-left)); top: calc(14px + env(safe-area-inset-top)); width: calc(84px * var(--k)); height: calc(84px * var(--k)); padding: 0; border: 0;
  border-radius: 50%; background: var(--butter); color: var(--ink); box-shadow: var(--shadow-lift), var(--press); display: grid; place-items: center; cursor: pointer;
  transition: transform var(--t-micro) var(--spring); z-index: 2; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tw-nap .tw-wake .ico { width: 52%; height: 52%; }
.tw-nap-card { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.tw-nap-pic { width: calc(180px * var(--k)); height: calc(180px * var(--k)); display: grid; place-items: center; border-radius: 28px; background: var(--card); box-shadow: var(--shadow-lift); }
.tw-nap-pic img { width: 89%; height: 89%; object-fit: contain; }
.tw-nap-row { display: flex; gap: 16px; }
.tw-nap .tw-make { position: relative; width: calc(104px * var(--k)); height: calc(104px * var(--k)); padding: 0; border: 0; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-lift), var(--press);
  display: grid; place-items: center; cursor: pointer; transition: transform var(--t-micro) var(--spring); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tw-nap .tw-make img { width: 65%; height: 65%; object-fit: contain; pointer-events: none; }
.tw-nap .tw-make img.tw-make-disc { width: 92%; height: 92%; }
.tw-nap .tw-make .tw-make-hand { position: absolute; right: -10px; bottom: -10px; width: 44%; height: 44%; }
.tw-nap :is(.tw-make, .tw-wake).is-down { transform: scale(.94); transition-duration: 0ms; }
.tw-nap .tw-fold-show { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 12px; background: rgba(36, 30, 51, .6); }
.tw-nap .tw-fold-show[hidden] { display: none; }
.tw-nap .tw-fold-big { width: min(70vw, 60vh, 360px); height: auto; animation: tw-fold-in 400ms var(--spring) both; }
.tw-nap .tw-fold-cam { width: 72px; height: 72px; }
@media (orientation: landscape) {
  .tw-nap { padding-top: 12px; padding-bottom: 12px; }
  .tw-nap-card { flex-direction: row; gap: 28px; }
  .tw-nap-pic { width: calc(160px * var(--k)); height: calc(160px * var(--k)); }
}

/* The wish sheet is TW4's: wishsheet.js draws and styles it, its fit on a phone on its side included (issue TW7-1 is
   resolved there). Nothing here styles .tw-wish-sheet; an earlier override here mixed two landscape layouts. */

@keyframes tw-hop { 40% { transform: translateY(-12px) scale(1.04); } }
@keyframes tw-fold-in { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
@keyframes tw-act-roll { to { transform: rotate(360deg); } }
@keyframes tw-act-flat { 50% { transform: rotate(-90deg) scale(.9); } }
@keyframes tw-act-dip { 50% { transform: scaleY(.78) translateY(10px); } }
@keyframes tw-act-tip { 50% { transform: rotate(28deg); } }
@keyframes tw-act-stretch { 50% { transform: scaleY(1.22) translateY(-10px); } }
@keyframes tw-act-drift { 50% { transform: translate(18px, -22px) rotate(8deg); } }
@keyframes tw-act-thump { 40% { transform: translateY(-14px); } 70% { transform: translateY(4px) scaleY(.9); } }
@keyframes tw-act-bob { 50% { transform: translateY(16px); opacity: .7; } }

@media (prefers-reduced-motion: reduce) {
  .tw-bring-pic[class*="tw-act-"], .tw-bring-pic.tw-hop, .tw-card .tw-badge.tw-hop, .tw-nap .tw-fold-big { animation: none; }
  .tw-drawer .tw-tile.is-down, .tw-drawer .tw-cardbtn.is-down, .tw-sheet :is(.tw-roundbtn, .tw-close).is-down, .tw-card :is(.tw-cardchip, .tw-badge, .tw-pretend).is-down,
  .tw-bring :is(.tw-choice, .tw-mat, .tw-ok).is-down, .tw-nap :is(.tw-make, .tw-wake).is-down { transform: none; filter: brightness(.92); }
}