.panda-cover-image { display: block; width: 100%; height: auto; }
body.panda-game { background: #eff7ef; color: #36564b; }
body.panda-game > .site-header, body.panda-game > footer { display: none; }
body.panda-game #app { max-width: 1100px; width: calc(100% - 32px); min-height: 100dvh; margin-inline: auto; padding-bottom: 16px; }
.panda-game h1, .panda-game h2, .panda-game h3 { font-family: Library, 'Trebuchet MS', sans-serif; color: #407b65; }
.panda-game button, .panda-game .button { min-height: 48px; }
.panda-game button:focus-visible, .panda-game a:focus-visible, .panda-game summary:focus-visible { outline: 3px solid #9776bd; outline-offset: 3px; }
.panda-game .panda-primary { padding: 10px 16px; background: #c96977; border: 2px solid #b85c69; box-shadow: 0 3px 0 #9d4f5c; color: white; }
.panda-game .panda-primary:hover { background: #b95a6a; }
.panda-game .secondary { background: #fffefa; color: #456254; }
.panda-toolbar { display: grid; grid-template-columns: 145px minmax(0,1fr) auto 48px; gap: 12px; align-items: center; padding: 10px 0; }
.panda-toolbar h1 { margin: 0 0 4px; font-size: 21px; line-height: 1.25; }
.panda-toolbar span { font-size: 14px; }
.panda-toolbar a, .panda-toolbar button { font-size: 14px; }
.panda-cover, .panda-finish { text-align: center; }
.panda-cover h2, .panda-finish h2 { font-size: 38px; margin: 20px 0 16px; }
.panda-cover > p, .panda-finish > p { max-width: 760px; margin: 16px auto; }
.panda-cover > img { max-width: 780px; margin: 24px auto 0; }
.panda-cover .panda-cover-meta { font-size: 14px; }
.panda-stages { list-style: none; display: flex; gap: 12px; margin: 0 0 12px; padding: 0; }
.panda-stages li { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 5px 8px; border-bottom: 3px solid #d3e1cd; }
.panda-stages li.active { color: #3a7d62; border-color: #80b293; }
.panda-stages li > span { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; background: #dfead9; border-radius: 50%; }
.panda-layout { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 16px; align-items: start; }
.panda-board { display: grid; grid-template-rows: auto 44px minmax(148px,1fr) auto 88px minmax(48px,auto); gap: 6px; min-height: min(570px,calc(100dvh - 148px)); background: #fffefa; border: 2px solid #d1ddc9; border-top: 6px solid #97c8ae; border-radius: 8px; padding: 10px; }
.panda-board > h2 { font-size: 22px; line-height: 1.25; text-align: center; margin: 0; }
.panda-equation { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 31px; line-height: 1; font-weight: 800; }
.panda-number-slot { display: grid; place-items: center; min-width: 52px; min-height: 42px; padding: 3px 6px; border: 2px solid #d5a6b8; border-radius: 6px; background: #fff0f2; color: #a4526c; }
.panda-number-slot.unknown { border-style: dashed; }
.panda-work { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; }
.panda-tray { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); width: min(100%,300px); gap: 4px; padding: 6px; border: 2px solid #c8aa77; border-radius: 8px; background: #f3dfb7; box-shadow: 0 3px 0 #d5bd91; }
.panda-tray-handle { position: absolute; top: 36%; width: 5px; height: 29%; background: #d6bb8c; border: 1px solid #b39461; border-radius: 3px; }
.handle-left { left: -5px; }
.handle-right { right: -5px; }
.panda-slot { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 0; border: 1px dashed #c5ac82; border-radius: 6px; background: #fff9ec; }
button.panda-slot { min-height: 48px; color: inherit; cursor: pointer; box-shadow: none; }
.panda-slot.filled { border: 1px solid #ead2ab; }
.panda-slot.added-sweet { background: #fff6d8; }
.panda-sweet { display: block; width: 89%; height: auto; }
.panda-slot .panda-sweet { max-width: 48px; }
.sweet-enter .panda-sweet { animation: panda-sweet-in .35s ease-out backwards; animation-delay: var(--sweet-delay); }
.panda-empty-dot { width: 12px; height: 12px; border: 2px dashed #cbb790; border-radius: 50%; }
.tray-highlight .panda-slot:not(.filled) { background: #f0e9fa; border-color: #a88cc4; }
.panda-counts { font-size: 14px; margin: 5px 0 0; text-align: center; }
.panda-answer-area { min-height: 52px; display: grid; place-items: center; }
.panda-supply { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 14px; border: 2px solid #d1b16e; background: #fff1b7; color: #6c5b2b; font-size: 16px; box-shadow: 0 2px 0 #dfc88b; }
.panda-supply > .panda-sweet { width: 34px; height: 34px; }
.panda-supply > span:last-child { font-size: 26px; line-height: 1; }
.panda-supply:disabled { opacity: .65; cursor: default; }
.panda-ready { font-size: 18px; color: #488063; }
.panda-candidates { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.panda-candidate { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 2px solid #d7c4df; background: #fbf7ff; min-width: 0; }
.panda-candidate > strong { font-size: 23px; line-height: 1; }
.panda-candidate[aria-pressed='true'], .panda-number-options button[aria-pressed='true'] { border-color: #ba6986; background: #fce9ef; box-shadow: 0 0 0 2px #ecc3d1; }
.panda-candidate:disabled, .panda-number-options button:disabled { opacity: 1; cursor: default; }
.mini-tray { max-width: 132px; padding: 3px; gap: 2px; border-width: 1px; box-shadow: none; }
.mini-tray .panda-slot { border-radius: 3px; }
.mini-tray .panda-empty-dot { width: 5px; height: 5px; border-width: 1px; }
.mini-tray .panda-tray-handle { display: none; }
.panda-number-options { display: grid; grid-template-columns: repeat(11,minmax(48px,1fr)); gap: 6px; }
.panda-number-options button { background: #eff6e7; border: 2px solid #bfcead; padding: 5px; color: #426c4e; font-size: 24px; font-weight: 800; }
.panda-recipe-book { width: min(100%,300px); min-height: 126px; background: #f3edf9; border: 2px solid #c7b1d9; border-left: 10px solid #a98cbf; border-radius: 6px; padding: 12px 18px; text-align: center; }
.panda-recipe-book > span { font-size: 44px; font-weight: 800; line-height: 1; color: #a56d93; }
.panda-recipe-book p { margin: 8px 0 0; font-size: 15px; }
.panda-feedback { display: flex; align-items: center; padding: 9px 12px; border-block: 1px solid #e2e8d8; background: #f2f7ec; font-size: 16px; line-height: 1.4; }
.panda-feedback.error { color: #a15050; }
.panda-feedback.success { color: #347554; }
.panda-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panda-actions button { font-size: 15px; padding: 8px 12px; }
.panda-actions .panda-primary { margin-left: auto; }
.panda-progress { padding-top: 12px; }
.panda-progress > h2 { font-size: 19px; margin: 0 0 4px; }
.panda-progress > p { font-size: 14px; margin: 0 0 10px; }
.panda-shelf { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px 6px; padding: 4px; }
.shelf-order { min-width: 0; border-bottom: 4px solid #bed0ae; }
.panda-package { display: block; width: 100%; height: auto; }
.panda-packed + .panda-progress .done:has(+ .shelf-order:not(.done)) .package-lid,
.panda-packed + .panda-progress .done:last-child .package-lid { animation: panda-pack .8s ease-out; }
.panda-packed + .panda-progress .done:has(+ .shelf-order:not(.done)) .package-ribbon,
.panda-packed + .panda-progress .done:last-child .package-ribbon { animation: panda-ribbon 1s ease-out; }
.panda-companion { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.panda-companion .pundyk { display: block; width: 125px; flex-shrink: 0; }
.panda-companion p { font-size: 14px; margin: 0; }
.mood-happy { animation: panda-cheer 1.3s ease-in-out; transform-origin: center bottom; }
.panda-walkthrough { background: #fff1cc; border-radius: 6px; padding: 10px 12px; font-size: 16px; min-height: 86px; }
.panda-walkthrough p { margin: 5px 0 0; }
.panda-learn { max-width: 760px; margin: 12px auto; padding: 24px; text-align: center; background: #fffefa; border: 1px solid #cfdcc6; border-radius: 8px; }
.panda-learn h2 { font-size: 27px; }
.panda-learn > p { max-width: 590px; margin: 16px auto; }
.panda-learn > .panda-tray { margin: 20px auto 10px; }
.panda-learn .panda-supply { margin: 16px auto; }
.panda-legend { display: flex; justify-content: center; gap: 20px; font-size: 15px; margin: 12px 0; }
.panda-legend span { display: flex; align-items: center; gap: 6px; }
.panda-legend i { width: 15px; height: 15px; border-radius: 50%; background: #f09cad; border: 1px solid #c4808d; }
.panda-legend span:nth-child(2) i { background: #ffd665; border-color: #c7a143; }
.panda-learn-equality { font-size: 30px; }
.panda-example-message { min-height: 58px; margin: 18px auto; font-size: 16px; }
.panda-example-message strong { font-size: 27px; }
.panda-example-message p { margin: 8px auto; }
#panda-feast { max-width: 850px; margin: 20px auto; }
#panda-feast > img { display: block; width: 100%; height: auto; }
.panda-finish > .panda-shelf { max-width: 700px; margin: 20px auto; grid-template-columns: repeat(12,minmax(0,1fr)); }
.panda-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.panda-stats > div { display: grid; gap: 4px; background: #fffefa; border: 1px solid #d0dfc6; border-radius: 8px; padding: 16px; }
.panda-stats strong { font-size: 36px; color: #538a6b; }
.panda-stats span { font-size: 15px; }
.panda-finish-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.panda-finish details { text-align: left; max-width: 650px; margin: 24px auto; padding: 10px; border-block: 1px solid #cbdac0; }
.panda-finish summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.panda-dialog { background: #fffefa; color: #36564b; width: min(600px,calc(100% - 32px)); padding: 24px; max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid #c6d6be; border-radius: 8px; }
.panda-dialog::backdrop { background: #314e3c77; }
@keyframes panda-sweet-in { from { opacity: 0; transform: translateY(-9px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes panda-pack { from { transform: translateY(-7px); } to { transform: none; } }
@keyframes panda-ribbon { from { opacity: 0; stroke-width: 1; } to { opacity: 1; stroke-width: 5; } }
@keyframes panda-cheer { 25%,75% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
@media (max-width: 1000px) {
  .panda-layout { grid-template-columns: 1fr; }
  .panda-progress { display: grid; grid-template-columns: 1fr 235px; gap: 5px 14px; align-items: center; }
  .panda-progress > h2, .panda-progress > p { grid-column: 1; margin: 0; }
  .panda-progress .panda-shelf { grid-column: 2; grid-row: 1 / 3; gap: 3px; }
  .panda-companion { display: none; }
}
@media (max-width: 700px) {
  .panda-toolbar { grid-template-columns: minmax(0,1fr) auto 48px; gap: 8px; }
  .panda-toolbar > div { grid-column: 1 / -1; grid-row: 2; }
  .panda-toolbar h1 { font-size: 20px; }
  .panda-stages { gap: 5px; }
  .panda-stages li { font-size: 12px; padding: 5px 0; gap: 4px; }
  .panda-stages li > span { width: 22px; height: 22px; }
  .panda-board { grid-template-rows: auto 44px minmax(148px,1fr) auto 132px minmax(48px,auto); min-height: 0; }
  .panda-board > h2 { font-size: 21px; }
  .panda-equation { font-size: 29px; }
  .panda-candidates { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .panda-number-options { grid-template-columns: repeat(6,minmax(48px,1fr)); }
  .panda-actions { gap: 8px; }
  .panda-actions button { font-size: 14px; padding: 8px 10px; }
  .panda-actions .panda-primary { margin-left: auto; }
  .panda-cover h2, .panda-finish h2 { font-size: 30px; }
  .panda-learn { padding: 20px 12px; }
  .panda-learn h2 { font-size: 25px; }
  .panda-progress { grid-template-columns: 1fr 150px; gap: 5px; }
  .panda-progress h2 { font-size: 17px; }
  .panda-finish > .panda-shelf { grid-template-columns: repeat(6,minmax(0,1fr)); }
}
@media (max-width: 400px) {
  body.panda-game #app { width: calc(100% - 12px); }
  .panda-board { padding: 8px; }
  .panda-learn { padding: 18px 8px; }
  .panda-number-options { grid-template-columns: repeat(5,minmax(48px,1fr)); }
  .panda-counts { font-size: 13px; }
  .panda-stats { grid-template-columns: 1fr; }
  .panda-stats > div { display: flex; align-items: center; gap: 14px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .panda-game *, .panda-game *::before, .panda-game *::after { animation: none !important; transition: none !important; }
}