/* ===== BASE ===== */
body {margin: 0;min-height: 100vh;display: flex;justify-content: center;align-items: center;
background: #fdf6f8;font-family: "MS UI Gothic", monospace;}
/* ===== LAYOUT ===== */
.main-row {display: flex;align-items: flex-start;gap: 15px;}
/* ===== MAIN WINDOW ===== */
main {width: 400px;overflow: hidden;border: 2px solid #ff8fb3;
  background: linear-gradient(to bottom, #ffffff, #fff0f6);
  box-shadow: 0 6px 15px #ffdee8;}
/* header */
.window-top {display: flex;justify-content: space-between;align-items: center;
padding: 4px 8px;font-size: 12px;color: #ff4f8b;border-bottom: 1px solid #f5a9c5;
  background: linear-gradient(to bottom, #fff0f6, #ffe4ef);}
/* title */
.title-left {display: flex;align-items: center;gap: 6px;}
.title-left img {width: 20px;height: 20px;}
/* buttons */
.window-buttons {display: flex;gap: 4px;}
.win-btn {width: 18px;height: 18px;display: flex;align-items: center;
justify-content: center;border: 1px solid #d88aa8;
background: linear-gradient(to bottom, #ffffff, #ffd9e8);color: #ff4f8b;font-size: 12px;}
/* button hover (clean + consistent) */
.win-btn:hover {background: linear-gradient(to bottom, #ffd0e0, #ffb3cc);border-color: #c96b8d;}
.win-btn:last-child:hover {background: #ff8fb3;color: white;}
/* ===== CONTENT ===== */
.content {padding: 10px;}
.scroll-box {margin: 10px 0;padding: 10px;text-align: center;color: #fd6c9a;
border: 2px solid #ff8fb3;background: linear-gradient(to bottom, #ffffff, #fff0f6);}
/* ===== LINKS ===== */
a {color: #ff4f8b;text-decoration: none;}
a:hover {color: #ff1493;text-decoration: underline;}
/* ===== IMAGE ===== */
.side-image {padding: 40px;}
.side-image img {width: 200px;display: block;cursor: pointer;}
/* ===== BOUNCE ===== */
@keyframes bounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-15px) scale(1.05); }
  50%  { transform: translateY(0) scale(0.98); }
  70%  { transform: translateY(-7px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }}
.bounce {animation: bounce 0.5s ease;}
/* ===== DRAGGABLE WINDOWS ===== */
#extra-window,
#extra-window-2 {
  position: absolute;
  width: 300px;z-index: 1000;
  border: 2px solid #ff8fb3;
  background: linear-gradient(to bottom, #ffffff, #fff0f6);
  box-shadow: 0 6px 15px #ffdee8;}
/* positions */
#extra-window {top: 100px;left: 300px;}
#extra-window-2 {position: absolute;top: 150px;right: 450px;width: 170px;}
/* drag cursor */
.drag-handle {cursor: move;}
/* walker */
#bottom-walker {
  position: fixed;
  bottom: 0;width: 190px;
  pointer-events: none;
  animation: walk-right 20s linear infinite;}

@keyframes walk-right {0%   { left: -200px; transform: scaleX(1); }100% { left: 100vw; transform: scaleX(1); }}
@keyframes walk-left {0%   { left: 100vw; }100% { left: -200px; }}