.drawbox-area {
position: relative;
display: inline-flex;
align-items: flex-end;
gap: 16px;
flex-direction: row;
}
.drawbox-crow-container {
position: relative;
flex-shrink: 0;
width: 128px;
height: 128px;
margin-bottom: -25px;
}
.drawbox-crow {
width: 128px;
height: 128px;
background-repeat: no-repeat;
image-rendering: pixelated;
image-rendering: crisp-edges;
transform: scaleX(-1);
margin-bottom: -25px;
}
.crow-speech-bubble {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--bg-panel);
border: 1px solid var(--accent-green);
padding: 10px 14px;
margin-bottom: 20px;
width: max-content;
max-width: 180px;
font-family: var(--font-ui);
font-size: 12px;
color: var(--text-soft);
text-align: center;
white-space: normal;
word-wrap: break-word;
z-index: 100;
}
.crow-speech-bubble::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--accent-green);
}
.drawbox-crow.sit {
background-image: url('_assets/guestbirds/crow_sit_strip16.png');
background-size: 2048px 128px;
animation: crow-sit 2s steps(16) infinite !important;
}
@keyframes crow-sit {
from { background-position: 0 0; }
to { background-position: -2048px 0; }
}
.drawbox-crow.sit-caw {
background-image: url('_assets/guestbirds/crow_sit_caw_strip12.png');
background-size: 1536px 128px;
animation: crow-sit-caw 0.8s steps(12) forwards !important;
}
@keyframes crow-sit-caw {
from { background-position: 0 0; }
to { background-position: -1536px 0; }
}
.drawbox-crow.idle {
background-image: url('_assets/guestbirds/crow_idle_strip12.png');
background-size: 1536px 128px;
animation: crow-idle 1.5s steps(12) infinite !important;
}
@keyframes crow-idle {
from { background-position: 0 0; }
to { background-position: -1536px 0; }
}
.drawbox-crow.idle-caw {
background-image: url('_assets/guestbirds/crow_idle_caw_strip12.png');
background-size: 1536px 128px;
animation: crow-idle-caw 0.8s steps(12) forwards !important;
}
@keyframes crow-idle-caw {
from { background-position: 0 0; }
to { background-position: -1536px 0; }
}
.drawbox-crow.walk {
background-image: url('_assets/guestbirds/crow_walk_strip16.png');
background-size: 2048px 128px;
animation: crow-walk 0.8s steps(16) infinite !important;
}
@keyframes crow-walk {
from { background-position: 0 0; }
to { background-position: -2048px 0; }
}
.drawbox-crow.take-off {
background-image: url('_assets/guestbirds/crow_takeoff_strip9.png');
background-size: 1152px 128px;
animation: crow-takeoff 0.5s steps(9) forwards !important;
}
@keyframes crow-takeoff {
from { background-position: 0 0; }
to { background-position: -1152px 0; }
}
.drawbox-crow.fly {
background-image: url('_assets/guestbirds/crow_fly_strip6.png');
background-size: 768px 128px;
animation: crow-fly 0.5s steps(6) infinite !important;
}
@keyframes crow-fly {
from { background-position: 0 0; }
to { background-position: -768px 0; }
}
.drawbox-crow.land {
background-image: url('_assets/guestbirds/crow_land_strip3.png');
background-size: 384px 128px;
animation: crow-land 0.3s steps(3) forwards !important;
}
@keyframes crow-land {
from { background-position: 0 0; }
to { background-position: -384px 0; }
}
.drawbox-crow.hurt {
background-image: url('_assets/guestbirds/crow_hurt_strip5.png');
background-size: 640px 128px;
animation: crow-hurt 0.8s steps(5) infinite !important;
}
@keyframes crow-hurt {
from { background-position: 0 0; }
to { background-position: -640px 0; }
}
.crow-flying-away .drawbox-crow {
animation: crow-fly 0.5s steps(6) infinite, fly-away 0.8s ease-in forwards !important;
}
.crow-flying-in .drawbox-crow {
animation: crow-fly 0.5s steps(6) infinite, fly-in 0.8s ease-out forwards !important;
}
@keyframes fly-away {
from { transform: scaleX(-1) translateX(0) translateY(0); opacity: 1; }
to   { transform: scaleX(-1) translateX(-80px) translateY(-60px); opacity: 0; }
}
@keyframes fly-in {
from { transform: scaleX(-1) translateX(-80px) translateY(-60px); opacity: 0; }
to   { transform: scaleX(-1) translateX(0) translateY(0); opacity: 1; }
}
.drawbox-crane-container {
display: none;
position: relative;
flex-shrink: 0;
width: 192px;
height: 192px;
overflow: visible;
margin-bottom: -5px;
}
.drawbox-crane-container.visible {
display: block;
}
.drawbox-crane {
width: 192px;
height: 192px;
background-repeat: no-repeat;
image-rendering: pixelated;
image-rendering: crisp-edges;
transform: scaleX(-1);
margin-bottom: -5px;
}
.crane-speech-bubble {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--bg-panel);
border: 1px solid #c94c4c;
padding: 10px 14px;
margin-bottom: 30px;
width: max-content;
max-width: 200px;
font-family: var(--font-ui);
font-size: 12px;
color: var(--text-soft);
text-align: center;
z-index: 100;
}
.crane-speech-bubble::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #c94c4c;
}
.crane-responses {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
}
.crane-response-btn {
background: var(--bg-panel-soft);
border: 1px solid var(--border-subtle);
color: var(--text-soft);
font-family: var(--font-ui);
font-size: 11px;
padding: 6px 10px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.crane-response-btn:hover {
background: #c94c4c;
color: var(--bg-panel);
border-color: #c94c4c;
}
.drawbox-crane.idle {
background-image: url('_assets/guestbirds/redcrane_idle_blink_strip12.png');
background-size: 2304px 192px;
animation: crane-idle 1.5s steps(12) infinite !important;
}
@keyframes crane-idle {
from { background-position: 0 0; }
to { background-position: -2304px 0; }
}
.drawbox-crane.call {
background-image: url('_assets/guestbirds/redcrane_call_strip9.png');
background-size: 1728px 192px;
animation: crane-call 0.75s steps(9) forwards !important;
}
@keyframes crane-call {
from { background-position: 0 0; }
to { background-position: -1728px 0; }
}
.drawbox-crane.walk {
background-image: url('_assets/guestbirds/redcrane_walk_strip8.png');
background-size: 1536px 192px;
animation: crane-walk 0.8s steps(8) infinite !important;
}
@keyframes crane-walk {
from { background-position: 0 0; }
to { background-position: -1536px 0; }
}
.drawbox-crane.takeoff {
background-image: url('_assets/guestbirds/redcrane_takeoff_strip9.png');
background-size: 1728px 192px;
animation: crane-takeoff 0.6s steps(9) forwards !important;
}
@keyframes crane-takeoff {
from { background-position: 0 0; }
to { background-position: -1728px 0; }
}
.drawbox-crane.fly {
background-image: url('_assets/guestbirds/redcrane_fly_strip6.png');
background-size: 1152px 192px;
animation: crane-fly 0.5s steps(6) infinite !important;
}
@keyframes crane-fly {
from { background-position: 0 0; }
to { background-position: -1152px 0; }
}
.drawbox-crane.display {
background-image: url('_assets/guestbirds/redcrane_display_strip23.png');
background-size: 4416px 192px;
animation: crane-display 1.9s steps(23) forwards !important;
}
@keyframes crane-display {
from { background-position: 0 0; }
to { background-position: -4416px 0; }
}
.drawbox-crane.fright {
background-image: url('_assets/guestbirds/redcrane_fright_strip12.png');
background-size: 2304px 192px;
animation: crane-fright 0.8s steps(12) forwards !important;
}
@keyframes crane-fright {
from { background-position: 0 0; }
to { background-position: -2304px 0; }
}
.drawbox-crane.peck {
background-image: url('_assets/guestbirds/redcrane_peck_strip20.png');
background-size: 3840px 192px;
animation: crane-peck 1.6s steps(20) infinite !important;
}
@keyframes crane-peck {
from { background-position: 0 0; }
to { background-position: -3840px 0; }
}
.drawbox-crane.dance {
background-image: url('_assets/guestbirds/redcrane_dance_strip16.png');
background-size: 3072px 192px;
animation: crane-dance 1.3s steps(16) forwards !important;
}
@keyframes crane-dance {
from { background-position: 0 0; }
to { background-position: -3072px 0; }
}
.crane-flying-away .drawbox-crane {
animation: crane-fly 0.5s steps(6) infinite, crane-fade-away 0.8s ease-in forwards !important;
}
.crane-flying-in .drawbox-crane {
animation: crane-fly 0.5s steps(6) infinite, crane-fade-in 0.8s ease-out forwards !important;
}
@keyframes crane-fade-away {
from { transform: scaleX(-1) translateX(0) translateY(0); opacity: 1; }
to   { transform: scaleX(-1) translateX(100px) translateY(-60px); opacity: 0; }
}
@keyframes crane-fade-in {
from { transform: scaleX(-1) translateX(100px) translateY(-60px); opacity: 0; }
to   { transform: scaleX(-1) translateX(0) translateY(0); opacity: 1; }
}