/* 正面空台面承载交互整果；较小的库存果堆退入远景。 */
.layout-b .game {
  width: min(100vw, calc(100svh * 1672 / 941));
  max-width: 1920px;
  height: auto;
  aspect-ratio: 1672 / 941;
  --text-body: 14px;
  --rack-tag-height: clamp(13px, 2svh, 20px);
}
.layout-b .game .hud,
.layout-b .game:not([data-state=select]) .hud {
  top: max(14px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  right: max(24px, env(safe-area-inset-right));
  grid-template-columns: 1fr auto 40px;
}
.layout-b .game .room-progress { position: absolute; top: 44px; left: 0; width: auto; }
.layout-b .mission { top: auto; bottom: 20%; left: 3%; right: auto; max-width: 25%; padding: 8px 12px; color: #f3e5c9; background: #183428db; border: 1px solid #b3925a66; border-radius: 3px; }
.layout-b .game[data-state=select] { display: block; }
.layout-b .game[data-state=select] .scene { inset: 0; }
.layout-b .game[data-state=select] .scene-image--vendor {
  object-fit: cover;
  object-position: center;
  background: #0b1712;
}
.layout-b .scene-grade { background: linear-gradient(180deg, #23140b0a 50%, #100e0b33); }
.layout-b .action-deck {
  position: absolute;
  inset: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 0;
  border: 0;
  background: none;
  container-type: normal;
  pointer-events: none;
}
.layout-b .action-deck::before { content: none; }
.layout-b .durian-picker,
.layout-b .durian-picker:has(>.durian-choice:nth-child(4):last-child) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  background: none;
  border: 0;
  overflow: visible;
  transform: none;
  pointer-events: none;
}
.layout-b .game .durian-choice {
  position: absolute;
  /* 同一水平落点，果顶上方保留抬起空间；数量只改变间距与果宽。 */
  left: calc(29% + 65% * var(--slot-position));
  /* 价签底端落在画幅 73%，距木台前沿约 2%，手机也保留完整桌面余量。 */
  top: calc(73% - var(--prop-tag-height, 40px) + 6px);
  width: min(calc(64% / var(--slot-count) - .8%), 160px);
  min-width: 0;
  min-height: 0;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  transform: translate(-50%, -100%);
  pointer-events: auto;
}
.layout-b .game .durian-choice:hover:not([aria-disabled=true]),
.layout-b #game .durian-choice:active:not([aria-disabled=true]),
.layout-b .game .durian-choice[aria-disabled=true] { transform: translate(-50%, -100%); }
.layout-b .durian-choice::before {
  content: "";
  position: absolute;
  inset: auto 20% 0;
  height: 7%;
  border-radius: 50%;
  background: #25160966;
  filter: blur(2px);
  pointer-events: none;
}
.layout-b .durian-choice .picker-fruit {
  display: block;
  width: 100%;
  height: clamp(48px, 18svh, 145px);
  object-fit: contain;
  filter: drop-shadow(2px 4px 3px #25160955);
  transition: transform 180ms ease-out, filter 180ms ease-out;
}
.layout-b .durian-choice > span,
.layout-b .durian-choice > strong {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: min(88%, 104px);
  height: var(--rack-tag-height);
  box-sizing: border-box;
  color: #38271b;
  font-size: clamp(10px, 1vw, 15px);
  padding: 1px 3px;
  background: #ecd7ad;
  border: 1px solid #b58a59;
  border-radius: 2px 2px 0 0;
  text-shadow: none;
  transform: translateX(-50%);
}
.layout-b .durian-choice > strong { bottom: calc(2px - var(--rack-tag-height)); color: #8d3426; border-top: 0; border-radius: 0 0 2px 2px; font-variant-numeric: tabular-nums; }
.layout-b .durian-choice > .choice-unavailable { position: absolute; top: 0; right: 0; color: #fff1d8; background: #513120; padding: 2px 4px; border-radius: 2px; font-size: 10px; }
.layout-b .durian-choice[aria-disabled=true] { opacity: 1; background: none; }
.layout-b .durian-choice[aria-disabled=true] .picker-fruit { filter: saturate(.55) brightness(.78); }
.layout-b .durian-choice:hover:not([aria-disabled=true]) { background: none; box-shadow: none; }
.layout-b .durian-choice:hover:not([aria-disabled=true]) .picker-fruit { transform: translateY(-9px); filter: drop-shadow(0 20px 12px #000a) brightness(1.12); }
.layout-b .durian-choice:active:not([aria-disabled=true]) .picker-fruit { transform: translateY(-3px) scale(.96); }
.layout-b .speech { width: calc(94% - 100px); position: absolute; left: 3%; right: 3%; bottom: max(12px, env(safe-area-inset-bottom)); flex: none; height: clamp(64px, 10svh, 94px); padding: 10px 16px; background: #102b23f2; border: 1px solid #b3925a; border-radius: 4px; pointer-events: auto; }
.layout-b .open-button { display: none; }
.layout-b .game[data-state=opening] .scene-image--vendor { opacity: 0; }
.layout-b .opening-status { inset: 80px 20% 24px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; visibility: hidden; }
/* 光晕、壳片与手共用果实坐标，避免场景尺寸改变后光源偏离裂口。 */
.opening-fruit { position: relative; width: min(46svh, 360px); aspect-ratio: 1; isolation: isolate; }
.opening-fruit::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: radial-gradient(ellipse at center, #ffe8a68c 0, #eab64a38 26%, transparent 62%);
  opacity: 0;
}
.opening-half { position: absolute; inset: 0; transform-origin: 50% 65%; }
.opening-shell { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px #0008); }
#openingShellLeft { clip-path: inset(0 50% 0 0); }
#openingShellRight { clip-path: inset(0 0 0 50%); }
.opening-hand {
  position: absolute;
  left: -25%;
  top: 38%;
  width: 72%;
  height: auto;
  opacity: 0;
  filter: drop-shadow(2px 5px 5px #160b0880);
}
.opening-half--right .opening-hand { left: auto; right: -25%; scale: -1 1; }
.game[data-state=opening] .opening-half--left { animation: shell-left 1s cubic-bezier(.22,1,.36,1) both; }
.game[data-state=opening] .opening-half--right { animation: shell-right 1s cubic-bezier(.22,1,.36,1) both; }
.game[data-state=opening] .opening-hand { animation: hand-grip 1s ease-out both; }
.game[data-state=opening] .opening-fruit::before { animation: opening-glow 1s ease-out both; }
@keyframes shell-left {
  0% { transform: translateX(0) rotate(0); opacity: 1; }
  25% { transform: translateX(0) rotate(0); }
  75% { transform: translateX(-24%) rotate(-18deg); }
  80% { opacity: 1; }
  100% { transform: translateX(-24%) rotate(-18deg); opacity: 0; }
}
@keyframes shell-right {
  0% { transform: translateX(0) rotate(0); opacity: 1; }
  25% { transform: translateX(0) rotate(0); }
  75% { transform: translateX(24%) rotate(18deg); }
  80% { opacity: 1; }
  100% { transform: translateX(24%) rotate(18deg); opacity: 0; }
}
@keyframes hand-grip {
  0% { opacity: 0; translate: 0 18%; }
  22%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes opening-glow {
  0%, 30% { opacity: 0; scale: .7; }
  65% { opacity: .85; scale: 1; }
  100% { opacity: 0; scale: 1.12; }
}
.layout-b .room-reveal {
  inset: 84px 7% 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 6%;
  margin: 0;
  pointer-events: none;
}
.layout-b .room-visual { display: grid; place-items: center; }
.layout-b .room-visual img { position: static; width: 100%; height: 100%; object-fit: contain; transform: none; max-height: 64svh; }
.layout-b .room-visual::after { display: none; }
.layout-b .room-details { display: block; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; }
.layout-b .room-details h1 { font-size: clamp(22px, 3vw, 36px); font-family: var(--font-body); color: #f6e4bb; }
.room-description { color: #ece1cb; font-size: 15px; max-width: 44ch; margin: 16px 0; }
.layout-b .room-actions { padding: 0; border: 0; background: none; gap: 16px; }


/* 开果选择使用中央舞台与两张木牌，双手随果壳掰开。 */
.opening-exit { display: none; position: absolute; z-index: 12; top: max(14px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); min-height: 44px; padding: 8px 22px; border: 1px solid #bc9563; border-radius: 3px; color: #382619; background: #efd9b1; font: inherit; cursor: pointer; }
.game:is([data-state=cut-ready], [data-state=opening], [data-state=room-reveal]) .opening-exit { display: block; }
.layout-b .game:is([data-state=cut-ready], [data-state=opening], [data-state=room-reveal]) .day-block { visibility: hidden; }
.opening-exit:hover { background: #fff0d1; }
.opening-exit:active { filter: brightness(.85); }
.layout-b .room-prompt { position: absolute; z-index: 8; left: 50%; bottom: max(24px, 5svh); translate: -50% 0; display: flex; align-items: center; gap: clamp(24px, 5vw, 72px); border: 0; padding: 0; }
.layout-b .room-prompt button { min-width: clamp(140px, 19vw, 240px); min-height: 48px; padding: 12px 24px; border-radius: 4px; font: inherit; font-size: clamp(18px, 2vw, 26px); font-weight: 700; cursor: pointer; box-shadow: 0 6px 10px #1c110b66; transition: filter 160ms ease-out, translate 160ms ease-out; }
.layout-b .knife-choice { border: 0; background: #f1cd87; color: #382517; }
.layout-b #roomCancelButton { color: #f6dfb8; border: 0; background: #5d3c28; }
.layout-b .room-prompt button:hover { filter: brightness(1.15); translate: 0 -3px; }
.layout-b .room-prompt button:active { filter: brightness(.9); translate: 0 2px; }
.layout-b .game[data-state=cut-ready] .scene-image--vendor { opacity: 0; }
/* 掰果与揭晓时让远景退暗，双手、果壳和果肉拥有独立演出层。 */
.layout-b .game:is([data-state=cut-ready], [data-state=opening], [data-state=room-reveal]) .scene-image--market { opacity: .45; filter: blur(1px); }
.layout-b .game:is([data-state=cut-ready], [data-state=opening]) .opening-status { inset: 68px 20% 110px; gap: 10px; visibility: visible; }
.layout-b .game[data-state=cut-ready] .opening-status { opacity: 1; transform: none; }
.layout-b .game[data-state=cut-ready] .opening-fruit { visibility: visible; }
.layout-b .opening-status #openingTitle { color: #f8e5bf; font-size: clamp(18px, 2.4vw, 28px); }
.layout-b .game[data-state=cut-ready] #openingTitle { position: static; font-size: clamp(24px, 3vw, 38px); text-shadow: 0 3px 8px #140d08; }
.layout-b .game:is([data-state=cut-ready], [data-state=opening]) :is(#openingSubtitle, .opening-line) { display: none; }
.layout-b .opening-fruit { width: min(35vw, 39svh); }
.layout-b .game[data-state=cut-ready] .room-current-label { display: none; }
.layout-b .room-continue-button { padding: 12px 16px; font-size: 16px; }
.buyback-prompt p { margin: 0 0 10px; color: #f6dfb8; }
.buyback-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.buyback-buttons button { padding: 12px 16px; border: 1px solid #bc9563; border-radius: 4px; background: #f1cd87; color: #382517; font: inherit; font-weight: 700; cursor: pointer; }
.buyback-buttons button:last-child { background: #5d3c28; color: #f6dfb8; }
.buyback-buttons button:hover { filter: brightness(1.12); }
.buyback-buttons button:active { transform: translateY(2px); }
.buyback-buttons button:focus-visible { outline: 3px solid #fff0d1; outline-offset: 3px; }
.layout-b .game[data-state=result] { display: block; }
.fruit-summary-modal {
  width: min(1000px, 90vw);
  max-height: 88svh;
  padding: 24px;
  overflow: auto;
  color: #f0ead8;
  background: #102017;
  border: 1px solid #8c7950;
  border-radius: 14px;
}
.fruit-summary-modal::backdrop { background: #020905cf; }
.fruit-summary-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.fruit-summary-header h2 { margin: 0; font-size: 22px; }
.layout-b .game[data-state=result] .whole-overview { position: static; height: auto; width: auto; padding: 0; margin: 0 0 20px; }
.layout-b .game[data-state=result] .whole-result-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.layout-b .game[data-state=result] .whole-room-card {
  flex: 0 0 auto;
  width: clamp(72px, 16svh, 96px);
}
.layout-b .game[data-state=result] .whole-room-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}




.layout-b .game[data-state=result] .result-layout { position: static; display: block; width: auto; padding: 0; overflow: visible; max-height: none; }
.layout-b .game[data-state=result] .result-panel { position: static; display: grid; gap: 12px; padding: 0; max-height: none; }
.layout-b .game[data-state=result] .result-scroll { max-height: 20svh; overflow: auto; }
.layout-b .game[data-state=result] .continue-button { position: sticky; bottom: -16px; min-height: 44px; margin: 0; }
.layout-b .rotate-notice { border: 0; color: #f0ead8; background: #0c1813; max-width: none; max-height: none; width: 100vw; height: 100svh; padding: 30px; inset: 0; margin: 0; }
.layout-b .rotate-notice[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.rotate-notice::backdrop { background: #0c1813; }
.layout-b .rotate-notice svg { width: 64px; fill: none; stroke: #eac16a; stroke-width: 2; transform: rotate(90deg); }
.layout-b .rotate-notice strong { font-size: 26px; }
.layout-b .rotate-notice span { color: #c8d4bf; }
.layout-b button:focus-visible { outline: 2px solid #ffdb87; outline-offset: 4px; }
@media (max-height: 480px) and (orientation: landscape) {
  .layout-b .action-deck { inset: 0; }
  .layout-b .speech { height: 60px; padding: 7px 10px; }
  .layout-b .mission { top: auto; bottom: 20%; max-width: 25%; }
  .layout-b .room-reveal { inset: 68px 4% 14px; }
  .room-description { margin: 8px 0; font-size: 13px; }


  .layout-b .room-prompt { bottom: 5svh; }
  .layout-b .game:is([data-state=cut-ready], [data-state=opening]) .opening-status { inset: 62px 18% 94px; gap: 4px; }
  .layout-b .room-prompt button { min-height: 44px; padding: 9px 20px; }
  .fruit-summary-modal { padding: 16px; }
  .fruit-summary-header { margin-bottom: 10px; }
  .layout-b .game[data-state=result] .whole-overview { margin-bottom: 10px; }

}
@media (prefers-reduced-motion: reduce) {
  .opening-half, .opening-hand, .opening-fruit::before { animation: none !important; }
  .layout-b .room-prompt button { transition: none; }
  .layout-b .durian-choice .picker-fruit { transition: none; }
}
/* 关闭过渡结束即移除开壳舞台，避免旧片段覆盖结果。 */
.layout-b .durian-choice { align-items: center; }
.layout-b .game:not([data-state=select]) .room-progress { left: 0; right: auto; }

/* 界面文字保持实时渲染，纸牌和绿漆配色由样式呈现，不烧进场景。 */
.layout-b .hud .day-block { display: flex; align-items: center; gap: 18px; width: fit-content; padding: 10px 16px; background: #f0dfbd; color: #35261b; border: 1px solid #ad8a5e; border-radius: 3px; }
.layout-b .day-block > .hud-label, .layout-b .day-track { display: none; }
.market-title { font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 34px); font-weight: 800; }
.layout-b .game .day-block > strong { font-size: clamp(13px, 1.5vw, 22px); }
.layout-b .game .cash-block { align-self: start; display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; color: #35261b; background: #f0dfbd; border: 1px solid #ad8a5e; border-radius: 3px; }
.layout-b .cash-block .hud-label { color: #66503a; }
.layout-b .game .cash-block > strong { color: #8d3426; font-size: clamp(18px, 2.1vw, 30px); }
.layout-b .game .sound-button { color: #f3e0b9; background: #253c2e; border: 1px solid #b3925a; }
.layout-b .speech-avatar { background-size: cover; background-position: center; }
.layout-b .speech[data-speaker="榴莲王子"] .speech-avatar { background-size: 180% auto; background-position: center 12%; }
.layout-b .game[data-state=opening] .scene-grade,
.layout-b .game[data-state=room-reveal] .scene-grade,
.layout-b .game[data-state=result] .scene-grade,
.layout-b .game[data-state=summary] .scene-grade { background: #07130fe0; }
.layout-b .collection-modal, .layout-b .room-breakdown-modal, .fruit-summary-modal { background: #17372b; border-color: #b3925a; border-radius: 5px; }
@media (max-height: 480px) and (orientation: landscape) {
  .layout-b .hud .day-block { gap: 10px; padding: 6px 10px; }
  .layout-b .game .cash-block { padding: 7px 10px; }
  .layout-b .mission { top: auto; bottom: 20%; padding: 5px 8px; font-size: 11px; }
}

.layout-b .game .hud strong { text-shadow: none; }
.layout-b .game .cash-block .cash-label { display: inline; }
.layout-b .game .hud .day-block, .layout-b .game .cash-block { height: auto; min-height: 44px; }
.collection-open { position: absolute; right: 3%; bottom: max(12px, env(safe-area-inset-bottom)); display: grid; justify-items: center; align-content: center; gap: 4px; width: 84px; min-height: 72px; padding: 8px; color: #45301e; background: #ecd7ad; border: 1px solid #ad8a5e; border-radius: 3px; font: inherit; font-size: 16px; cursor: pointer; pointer-events: auto; }
.collection-open svg { width: 28px; height: 28px; }
.collection-open:hover { background: #fae9c7; }
.collection-open:active { transform: translateY(2px); }
@media (max-height: 480px) and (orientation: landscape) {
  .layout-b .speech { width: calc(94% - 80px); bottom: max(8px, env(safe-area-inset-bottom)); }
  .collection-open { bottom: max(8px, env(safe-area-inset-bottom)); width: 68px; min-height: 60px; padding: 5px; font-size: 13px; }
  .collection-open svg { width: 23px; height: 23px; }
  .layout-b .durian-choice > span, .layout-b .durian-choice > strong { font-size: 10px; }
}
.layout-b .game:not([data-state=select]) .hud .cash-block { height: auto; min-height: 44px; padding: 8px 12px; background: #f0dfbd; border: 1px solid #ad8a5e; }
.layout-b .game:not([data-state=select]) .market-title { display: none; }