/* The table is the interface: ingredients, a bowl and two familiar tools. */
body[data-game=banquet] .game-progress { display: none; }
body[data-game=banquet] .game-content { width: min(850px, 100%); }
body[data-game=banquet] .play-heading { padding-bottom: 8px; }
.banquet-scene { display: grid; grid-template-rows: minmax(140px, 1fr) minmax(116px, .45fr) 105px; align-self: center; max-height: 620px; gap: 7px; }
.banquet-friends { display: flex; align-items: flex-end; justify-content: center; min-height: 0; gap: clamp(5px, 3vw, 38px); position: relative; padding-top: 38px; }
.banquet-friends::after { content: ''; position: absolute; bottom: 25px; left: 0; right: 0; height: 22%; border-radius: 50%; background: #dcc7a8; z-index: -1; }
.banquet-friend { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; flex: 0 1 210px; min-width: 0; height: auto; aspect-ratio: 200 / 235; max-height: 100%; min-height: 75px; background: transparent; border: 0; border-radius: 28px; padding: 0 2px; color: var(--tf-text); touch-action: manipulation; }
.banquet-portrait { display: block; width: 100%; min-height: 0; height: calc(100% - 24px); max-height: 250px; }
.banquet-portrait svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.banquet-head, .banquet-ears, .banquet-paw, .banquet-bubbles { transform-box: fill-box; transform-origin: center 80%; }
.banquet-name { font-size: clamp(12px, 1.6vw, 17px); font-weight: 600; line-height: 1.5; }
.banquet-key { color: var(--tf-subtle); font-size: 10px; line-height: 1; }
.banquet-friend > .banquet-key { position: absolute; bottom: 0; right: 9%; }
.banquet-table { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; }
.banquet-tools { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 28px); width: 100%; min-height: 0; height: calc(100% - 27px); }
.banquet-bowl { border: 0; background: transparent; padding: 0; border-radius: 25px; height: 100%; min-height: 50px; width: min(225px, 46%); touch-action: none; }
.banquet-bowl svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.banquet-recipe { margin: 3px 0 0; min-height: 24px; max-width: 100%; color: var(--tf-muted); font-size: clamp(10px, 1.3vw, 13px); line-height: 1.2; text-align: center; text-wrap: balance; }
.banquet-tool { width: 62px; height: 92px; min-height: 44px; flex: 0 0 62px; display: flex; flex-direction: column; align-items: center; border: 2px solid transparent; border-radius: 17px; background: transparent; color: var(--tf-text); padding: 3px; touch-action: none; position: relative; }
.banquet-tool-art { display: block; flex: 1; min-height: 0; width: 100%; }
.banquet-tool-art svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.banquet-tool-name { font-size: 11px; line-height: 1.2; }
.banquet-tool > .banquet-key { position: absolute; bottom: 1px; right: -1px; }
.banquet-napkin[aria-pressed=true] { border-color: var(--tf-link); background: var(--play-hover); }
.banquet-spoon[aria-pressed=true] .banquet-tool-name { font-weight: 600; color: var(--tf-link); }
.banquet-pantry { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 3vw, 25px); }
.banquet-flavor { flex: 0 1 90px; position: relative; min-width: 44px; height: 100%; max-height: 105px; border: 2px solid transparent; background: var(--play-hover); border-radius: 30px; padding: 4px 5px 10px; color: var(--tf-text); touch-action: none; }
.banquet-flavor svg { width: 100%; height: 100%; pointer-events: none; }
.banquet-flavor[aria-pressed=true] { border-color: var(--tf-link); background: var(--play-orbit); }
.banquet-flavor > .banquet-key { position: absolute; bottom: 4px; left: 0; right: 0; }
.banquet-check { display: none; position: absolute; right: -4px; top: -4px; width: 23px; height: 23px; border-radius: 50%; place-items: center; background: var(--play-success-badge); color: var(--play-on-success); font-size: 14px; }
.banquet-flavor[aria-pressed=true] .banquet-check { display: grid; }
.banquet-hint { outline: 3px dashed var(--tf-link); outline-offset: 3px; }
.banquet-scene button:focus-visible { outline: 3px solid var(--tf-link); outline-offset: 3px; }
.banquet-friend.is-drop-target .banquet-portrait { filter: drop-shadow(0 0 4px var(--tf-link)); }
.banquet-bowl.is-drop-target { outline: 3px dashed var(--tf-link); outline-offset: 3px; }
.banquet-flight, .banquet-drag { position: fixed; width: 56px; height: 60px; pointer-events: none; z-index: 2; }
.banquet-flight svg, .banquet-drag svg { width: 100%; height: 100%; }
.banquet-drag { z-index: 3; filter: drop-shadow(0 3px 3px rgb(15 30 35 / 14%)); }
.banquet-tool.is-held .banquet-tool-art { opacity: .3; }
.banquet-flavor.is-held { opacity: .55; }
.banquet-request { position: absolute; right: 5%; top: -33px; height: 38px; min-width: 40px; display: flex; justify-content: center; gap: 0; padding: 2px 7px; background: #fff4df; border: 1px solid #d2bf9e; border-radius: 45%; pointer-events: none; }
.banquet-request[hidden] { display: none; }
.banquet-request::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff4df; border: 1px solid #d2bf9e; position: absolute; bottom: -7px; left: 9px; }
.banquet-request svg { height: 100%; width: 28px; }
@media (hover:hover) { .banquet-friend:hover .banquet-name { color: var(--tf-link); } .banquet-flavor:hover, .banquet-tool:hover { border-color: var(--tf-control-border); } }
@media (max-width:600px) {
  .banquet-scene { grid-template-rows: minmax(140px, 1fr) 115px 82px; max-height: 400px; gap: 6px; }
  .banquet-friends { gap: 4px; }
  .banquet-friend { border-radius: 17px; }
  .banquet-flavor { border-radius: 22px; max-width: 73px; }
  .banquet-friend > .banquet-key { right: 4%; }
  .banquet-bowl { width: 160px; }
  .banquet-tool { width: 54px; flex-basis: 54px; height: 79px; }
}
@media (max-height:620px) and (orientation:portrait) {
  .banquet-scene { grid-template-rows: minmax(128px, 1fr) 102px 64px; gap: 2px; }
  .banquet-friends { padding-top: 32px; }
  .banquet-pantry { gap: 11px; }
  .banquet-flavor { max-width: 61px; border-radius: 19px; }
  .banquet-check { width: 19px; height: 19px; font-size: 12px; }
  .banquet-bowl { width: 140px; }
  .banquet-tool { height: 72px; }
}
@media (max-height:520px) and (orientation:landscape) {
  body[data-game=banquet] .play-topline { flex-basis: 65px; }
  body[data-game=banquet] .game-content { margin-top: 3px; }
  body[data-game=banquet] .play-heading h1 { font-size: 1.15rem; }
  body[data-game=banquet] .play-heading { left: 185px; right: 75px; }
  .banquet-scene { grid-template-columns: minmax(0, 1fr) 70px 126px; grid-template-rows: minmax(0, 1fr); gap: 9px; }
  .banquet-friends { grid-column: 1; grid-row: 1; padding-top: 30px; }
  .banquet-friend { max-width: 150px; }
  .banquet-table { grid-column: 2; grid-row: 1; }
  .banquet-tools { display: grid; grid-template-rows: 44px minmax(44px, 1fr) 44px; height: 100%; width: 70px; gap: 2px; }
  .banquet-tool { width: 48px; height: 44px; padding: 1px; justify-self: center; }
  .banquet-tool-name, .banquet-recipe { display: none; }
  .banquet-bowl { width: 70px; min-height: 44px; border-radius: 12px; }
  .banquet-pantry { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: repeat(2, 58px); grid-template-rows: repeat(2, minmax(44px, 1fr)); gap: 8px; justify-content: center; }
  .banquet-flavor { height: 100%; width: 58px; padding: 2px 4px 9px; border-radius: 18px; max-height: 89px; }
  .banquet-friends::after { bottom: 20px; }
  .banquet-request { height: 31px; top: -28px; right: 1%; padding: 1px 5px; }
  .banquet-request svg { width: 24px; }
}