/* In-flow pet: no overlay, continuous animation, canvas or frame loop. */
.surgio { width: 100%; max-width: 700px; margin: 12px auto; flex: none; text-align: left; }
.surgio [hidden] { display: none !important; }
.surgio-bubble { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #77539b; border-radius: 20px 20px 20px 5px; background: #211332; color: #faf5ff; animation: surgio-hello 180ms ease-out both; }
.surgio-pet { width: 96px; height: 96px; object-fit: contain; flex: none; }
.surgio-copy { min-width: 0; flex: 1; }
.surgio-copy strong { color: #e9baff; font-size: 14px; }
.surgio-copy p { font: inherit; font-size: 16px; line-height: 1.45; margin: 4px 0 8px; overflow-wrap: anywhere; }
.surgio-actions { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.surgio button { font: inherit; font-size: 14px; min-height: 44px; cursor: pointer; border-radius: 10px; padding: 8px 12px; }
.surgio-next { background: #ead5ff; color: #27113b; border: 1px solid #ead5ff; font-weight: 700 !important; }
.surgio-dismiss, .surgio-wake { background: #211332; color: #e5d7ef; border: 1px solid #77539b; }
.surgio button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.surgio-wake { display: block; margin-left: auto; }
@keyframes surgio-hello { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) { .surgio-bubble { gap: 8px; padding: 10px; align-items: flex-start; } .surgio-pet { width: 56px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .surgio-bubble { animation: none; } }
@media (forced-colors: active) { .surgio-bubble, .surgio button { border: 1px solid CanvasText; } }
/* On the board he lives in the bottom bar with Restart and Rules, so the
   Ask button is always in view and a bubble never rearranges the arena. */
#game-bottom-bar > .surgio { grid-column: 1 / -1; order: 5; width: auto; max-width: none; margin: 0; }
#game-bottom-bar > .surgio.is-compact { grid-column: auto; order: 0; display: block; }
#game-bottom-bar > .surgio.is-compact .surgio-wake { width: 100%; margin: 0; padding: 0 10px; justify-content: center; gap: 6px; font-size: 14px; }
#game-bottom-bar > .surgio.is-compact .surgio-wake-pet { width: 28px; height: 28px; }
@media (max-width: 480px) { #game-bottom-bar > .surgio.is-compact .surgio-wake { min-height: 38px; font-size: 13px; } }
/* Resting: the sitting pose and one small button, in the same in-flow slot. */
.surgio.is-compact { margin: 6px auto; }
.surgio-wake { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 4px 12px 4px 4px; min-height: 44px; }
.surgio-wake-pet { width: 40px; height: 40px; object-fit: contain; flex: none; }
.surgio.is-compact { display: flex; justify-content: flex-end; }
/* The bar is narrow beside the board, so the portrait and type stay small there. */
#game-bottom-bar .surgio-bubble { align-items: flex-start; gap: 8px; padding: 10px; }
#game-bottom-bar .surgio-pet { width: 56px; height: 64px; }
#game-bottom-bar .surgio-copy p { font-size: 14px; }
/* An open bubble on the board needs room: the screen scrolls instead of clipping. */
#screen-game.active:has(#game-bottom-bar > .surgio:not(.is-compact):not([hidden])) { overflow-y: auto; }
#screen-game:has(#game-bottom-bar > .surgio:not(.is-compact):not([hidden])) .board-arena { flex: none; }
@media (orientation: landscape) and (max-height: 560px) {
  #screen-game.active:has(#game-bottom-bar > .surgio:not(.is-compact):not([hidden])) {
    grid-template-rows: auto auto auto auto; align-content: start; height: auto; max-height: none; min-height: 100dvh; overflow-y: auto;
  }
  #screen-game:has(#game-bottom-bar > .surgio:not(.is-compact):not([hidden])) .game-bottom-bar { overflow: visible; align-self: start; }
}
/* The stop card: on the board, over the art, under nothing. Taps pass through
   it to the columns, so the player can still make the right move. */
.surgio-stop { position: absolute; left: 6%; right: 6%; top: 4%; z-index: 8; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 3px solid #ff3355; border-radius: 16px; background: rgba(24, 8, 20, 0.94); color: #fff; box-shadow: 0 0 0 4px rgba(255, 51, 85, 0.25), 0 12px 32px rgba(0, 0, 0, 0.6); pointer-events: none; animation: surgio-stop-in 220ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.surgio-stop[hidden] { display: none; }
.surgio-stop-pet { width: 72px; height: 72px; object-fit: contain; flex: none; animation: surgio-bounce 0.7s ease-in-out infinite alternate; }
.surgio-stop-copy { min-width: 0; }
.surgio-stop-copy strong { display: block; font-size: 20px; letter-spacing: 0.04em; color: #ff8fa3; text-shadow: 0 0 12px rgba(255, 51, 85, 0.7); }
.surgio-stop-copy p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
@media (max-width: 480px) { .surgio-stop { gap: 8px; padding: 8px 10px; } .surgio-stop-pet { width: 52px; height: 52px; } .surgio-stop-copy strong { font-size: 16px; } .surgio-stop-copy p { font-size: 13px; } }
/* The winning column and the button to press. */
.board-touch-col.surgio-target { background: linear-gradient(180deg, rgba(217, 70, 239, 0.05) 0%, rgba(217, 70, 239, 0.42) 100%); box-shadow: inset 0 0 0 3px rgba(233, 186, 255, 0.85); animation: surgio-glow 0.9s ease-in-out infinite alternate; }
.power-cell.surgio-nudge { outline: 3px solid #fff; outline-offset: 3px; animation: surgio-nudge 0.8s ease-in-out infinite alternate; }
@keyframes surgio-stop-in { from { opacity: 0; transform: translateY(-12px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes surgio-bounce { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-6px) rotate(4deg); } }
@keyframes surgio-glow { from { box-shadow: inset 0 0 0 3px rgba(233, 186, 255, 0.5); } to { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.95), inset 0 0 24px rgba(217, 70, 239, 0.6); } }
@keyframes surgio-nudge { from { transform: scale(1); } to { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .surgio-stop, .surgio-stop-pet, .board-touch-col.surgio-target, .power-cell.surgio-nudge { animation: none; } }
@media (min-width: 900px) and (min-height: 561px) {
  #game-bottom-bar .surgio-bubble { gap: 6px; padding: 8px; }
  #game-bottom-bar .surgio-pet { width: 32px; height: 36px; }
  #game-bottom-bar .surgio-copy p { font-size: 12px; line-height: 1.35; }
  #game-bottom-bar .surgio button { min-height: 34px; padding: 5px 8px; font-size: 12px; }
  #game-bottom-bar .surgio-actions { gap: 4px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  #game-bottom-bar > .surgio.is-compact { grid-column: span 3; order: 1; width: 100%; margin: 0; }
  #game-bottom-bar > .surgio.is-compact .surgio-wake { width: 100%; min-height: 38px; margin: 0; white-space: nowrap; }
}
@media (orientation: landscape) and (max-height: 560px) {
  #game-bottom-bar > .surgio.is-compact { grid-column: 1 / -1; }
  #game-bottom-bar .surgio-pet { width: 30px; height: 34px; }
  #game-bottom-bar .surgio-copy p { font-size: 12px; }
}
/* Keep the helper comfortable to see and tap. */
#game-bottom-bar > .surgio.is-compact .surgio-wake { min-height: 44px; font-size: 14px; padding: 4px 10px; }
#game-bottom-bar > .surgio.is-compact .surgio-wake-pet { width: 36px; height: 36px; }
@media (min-width: 900px) and (min-height: 561px) {
  #game-bottom-bar > .surgio.is-compact { grid-column: 1 / -1; width: 100%; }
}