/* ============================================================
   layout.css — Container and character positions
   Edit character positions/sizes here
   ============================================================ */

.container {
  max-width: 1000px;
  width: 95%;
  margin: 20px auto;
  padding: 40px 50px;
  background: linear-gradient(135deg, #0d1f35 0%, #0f2940 100%);
  border: 6px solid #1a6b4a;
  border-radius: 16px;
  box-shadow:
    0 0 0 3px #0a0f1e,
    0 0 0 9px #1a4a6b,
    0 20px 60px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 10;
}

/* Pixel corner brackets */
.corner {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 5px solid #2ecc71;
  background: #0a0f1e;
}

.corner-tl { top: -5px;    left:  -5px;  border-right: none; border-bottom: none; }
.corner-tr { top: -5px;    right: -5px;  border-left:  none; border-bottom: none; }
.corner-bl { bottom: -5px; left:  -5px;  border-right: none; border-top:    none; }
.corner-br { bottom: -5px; right: -5px;  border-left:  none; border-top:    none; }

/* LEFT character */
.character-left {
  position: absolute;
  bottom: -130px;
  left: -240px;
  width: 400px;
  height: auto;
  z-index: 15;
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

/* RIGHT character */
.character-right {
  position: absolute;
  bottom: -120px;
  right: -210px;
  width: 400px;
  height: auto;
  z-index: 15;
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

/* TOP-LEFT mascot */
.character-top-left {
  position: absolute;
  top: 60px;
  left: -80px;
  width: 190px;
  height: auto;
  z-index: 15;
  filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.5));
}

/* TOP-RIGHT mascot */
.character-top-right {
  position: absolute;
  top: 30px;
  right: -80px;
  width: 200px;
  height: auto;
  z-index: 15;
  filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.5));
}

/* Interior emoji decorations */
.emoji-decor {
  position: absolute;
  font-size: 40px;
  z-index: 2;
}

.emoji-1 { top: 50px; left:  25px; }
.emoji-2 { top: 50px; right: 25px; }