:root{
  --bg: #18360f;
  --panel: rgba(16, 48, 12, 0.75);
  --line: rgba(10, 20, 8, 0.75);
  --accent: #7CFF2A;
  --accent-dim: rgba(124,255,42,.25);
  --text: rgba(170, 255, 150, 0.9);
  --pad: 18px;
  --radius: 0px; 
  /*--background: #1A460C;
  --main-box-background: #305A15;
  --internal-box-background: #417220;
  --text-color: #8DE044;
  --stroke: #64B021;*/
}

*{ box-sizing: border-box; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.page{
  min-height: 100svh;
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  grid-template-rows: 140px 1fr;
  gap: 0;
  position: relative;

}

.header{
  grid-column: 1 / -1;
  grid-row: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 var(--pad);
}

.title{
  margin:0;
  color: var(--accent);
  letter-spacing: 2px;
  font-weight: 800;
  font-size: clamp(48px, 6vw, 88px);
  text-shadow: 0 0 10px rgba(124,255,42,.25);
}

.left, .center, .right{
  grid-row: 2;
}
.left{
  grid-column: 1;
  padding: var(--pad);
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.center{
  grid-column: 2;
  padding: var(--pad);
}
.right{
  grid-column: 3;
  padding: var(--pad);
  position: relative;
}

.menu{ display:flex; flex-direction:column; gap: 14px; }
.menu-btn{
  display:block;
  text-decoration:none;
  color: var(--accent);
  padding: 16px 18px;
  border: 2px solid var(--accent-dim);
  background: rgba(0,0,0,.12);
  text-align:left;
  font-weight: 800;
  letter-spacing: 1px;
}
.menu-btn:hover{
  border-color: rgba(124,255,42,.55);
  background: rgba(0,0,0,.18);
}

.left-bottom{ margin-top: auto; }
.widget{
  border: 2px solid var(--accent-dim);
  background: rgba(0,0,0,.10);
  padding: 10px;
}
.widget-inner{
  height: 110px;
  border: 1px solid rgba(124,255,42,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(170,255,150,.7);
}

.panel{
  height: 100%;
  border: 2px solid rgba(124,255,42,.22);
  background: rgba(16, 48, 12, 0.75);
  padding: 18px;
  position: relative;

  display: grid;
  gap: 14px;

  /* 2-column center layout: left “media” strip + right text strip */
  grid-template-columns: 220px 1fr;

  /* IMPORTANT: no 1fr row here */
  grid-auto-rows: min-content;

  grid-template-areas:
    "hero  who"
    "what  when"
    "matrix where"
    "pc    why";
}

/* Map items to areas */
.hero   { grid-area: hero; }
.who    { grid-area: who; }
.what   { grid-area: what; }
.when   { grid-area: when; }
.matrix { grid-area: matrix; }
.where  { grid-area: where; }
.pc     { grid-area: pc; }
.why    { grid-area: why; }

/* Keep the left-strip images from stretching weird */
.hero, .thumb{
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero img,
.thumb img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Optional: if your matrix image is tall, cap it so it doesn't dominate */
.matrix img{
  max-height: 220px;
  object-fit: contain;
}


.hero{ grid-column: 1; grid-row: 1 / span 2; display:flex; justify-content:center; align-items:center; }
.hero img{ max-width: 100%; height:auto; image-rendering: pixelated; }

.who{ grid-column: 2; grid-row: 1; }
.what{ grid-column: 1; grid-row: 3; }
.when{ grid-column: 2; grid-row: 3; }

.matrix{ grid-column: 1; grid-row: 4; }
.where{ grid-column: 2; grid-row: 4; }

.pc{ grid-column: 1; grid-row: 5; align-self:end; }
.why{ grid-column: 2; grid-row: 5; }

.thumb img{ width: 100%; height:auto; display:block; }
.thumb{
  border: 2px solid rgba(124,255,42,.16);
  background: rgba(0,0,0,.10);
  padding: 10px;
}

.box{
  border: 2px solid rgba(124,255,42,.16);
  background: #417220;
  padding: 12px 14px;
}
.box h2{
  margin:0 0 6px 0;
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 1px;
}
.box p{ margin:0; line-height: 1.35; }

/*  “losing dog →” */
.panel-link{
  position:absolute;
  right: var(--pad);
  bottom: var(--pad);
  color: var(--accent);
  text-decoration:none;
  opacity: .85;
}
.panel-link:hover{ opacity: 1; }

/* stickies */
.sticker{
  position: absolute;
  right: 22px;
  width: 220px;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.25));
}
.sticker img{ width:100%; height:auto; display:block; }
.s1{ top: 40px; transform: rotate(12deg); }
.s2{ top: 380px; transform: rotate(-12deg); width: 260px; }
.s3{ top: 700px; transform: rotate(8deg); width: 250px; }

/* pebsi dog*/
.corner-dog{
  position:absolute;
  right: 200px;
  bottom: 0px;
  width: 380px;
  pointer-events:none;
}
.corner-dog img{ width:100%; height:auto; display:block; }

/* Basic responsive fallback: collapse to 1 column */
@media (max-width: 980px){
  .page{
    grid-template-columns: 1fr;
    grid-template-rows: 120px auto auto auto;
  }
  .left{ grid-column: 1; grid-row: 2; border-right: none; border-bottom: 3px solid var(--line); }
  .center{ grid-column: 1; grid-row: 3; }
  .right{ grid-column: 1; grid-row: 4; border-left: none; border-top: 3px solid var(--line); min-height: 300px; }
  .corner-dog{ display:none; }
}