body {
  background-image: url("img/newtile.gif");
  font-family: "Ithica";
}
.container {
    background: 
     url("img/square.gif") repeat; 
     background-blend-mode:multiply;
      background-size: 22px 22px;
    border: 2px solid white;
    top: 100px;
    border-radius: 2px;
    padding: 8px;
    margin: 00px auto;
    width: 100%;
    max-width: 800px;
    height: 700px;
    position: relative;     /* creates the positioning context */
    display: grid;
  grid-template-columns: repeat(12, 1fr);  /* 12 equal columns */
  grid-auto-rows: 8px;                     /* each row is 8px tall */
  gap: 4px;                                  /* space between boxes */
}
.subsection {
  border: 1px solid #999;
  border-radius: 6px;
  background: white;
  margin: 10px;      /* space outside the box */
  padding: 10px;     /* space inside the box */
}
p.align {
    text-align: center;
}
@font-face {
  font-family: "Ithica"; /* set name */
  src: url('ithaca-font/Ithaca-LVB75.ttf'); /* url of the font */
}
h2 {
    font-size: 30px;
}
has-deco { position: relative; }

.deco {
  position: absolute;
  width: 160px;              /* control size */
  pointer-events: none;      /* clicks go through */
}

/* Bottom-right anchor */
.deco-br {
  position: absolute;     /* take it out of normal flow */
  right: -10px;            /* 12px from the right edge */
  bottom: -5px;           /* 12px from the bottom edge */
  width:  230px;           /* control size */
  pointer-events: none;   /* optional: clicks pass through */
  opacity: 0.95;          /* optional: soften */
}

/* If you want it behind the text: */
.deco { z-index: 0; opacity: 0.9; }
.has-deco > *:not(.deco) { position: relative; z-index: 1; size: 800px;}

/* If you want it in front of the text, swap z-index: 2 on .deco */
.page-deco {
  position: absolute;      /* stays fixed in viewport */
  right: -80px;
  bottom: 200px;
  width: 178.5px;
  z-index: 2;
}
.Golden {
     position: absolute;      /* stays fixed in viewport */
  left: -250px;
  top: -250px;
  width: 512px;
  z-index: -1;
}
.Television {
    position: absolute;
    right: -70px;
    top: -80px;
    width: 200px;
    z-index: 2;
    transform: rotate(30deg);   /* rotate 45 degrees clockwise */
}
.box {
  background: #1b1b1b;
  border: 1px solid #fcca2c;
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
  color: white;
}
.a { grid-column: 1 / span 3; grid-row: 12 / span 13; }

/* B: columns 5-12 (i.e., span 8 cols), fixed height via row spans */
.b { grid-column: 1 / span 3; grid-row: 25 / span 25; }

/* C: place below B, same width, taller */
.c { grid-column: 4 / span 6; grid-row: 5 / span 20; }

/* D: narrow tall strip in the right edge */
.d { grid-column: 10 / span 4; grid-row: 12 / span 26; 
    text-align: center;}

/* E: full-width row at the bottom */
.e { grid-column: 1 / 10; grid-row: 50 / span 10; }
.f { grid-column: 4 / span 6; grid-row: 25 / span 25; }
html, body {
  margin: 0;
  padding: 0;
}
.pop-text {
  color: #ffffff;                      /* main text color */
  text-shadow: 1px 1px 0px #ffe52c;    /* offset shadow layer */
}
.Panda {
    position: absolute;      /* stays fixed in viewport */
  right: 130px;
  bottom: 576px;
  width: 34px;
  z-index: 2;
} 
.cookie {
    position: absolute;      /* stays fixed in viewport */
  right: 770px;
  bottom: 420px;
  width: 20px;
  z-index: 2;
}
.penguin {
  position: absolute;      /* stays fixed in viewport */
  left: 30px;
  bottom: 588px;
  width: 60px;
  z-index: 2;
}
.Gang {
    position: absolute;      /* stays fixed in viewport */
  right: 770px;
  bottom: 420px;
  width: 20px;
  z-index: 2;
}
.rolling {
    position: absolute;      /* stays fixed in viewport */
  right: 793px;
  bottom: 2px;
  width: 20px;
  z-index: 2;
}
.Among {
    position: absolute;      /* stays fixed in viewport */
  right: 202px;
  bottom: 108px;
  width: 20px;
  z-index: 2;
}
.guide-card {
  /* size/spacing */
  padding: 10px 14px;
  border-radius: 16px;                 /* rounded pill */
  display: inline-flex;                        /* lets the badge sit at the end */
  align-items: center;
  gap: 8px;

  /* colors – tweak to taste */
  color: #2a220e;                       /* dark brown text */
  border: 1px solid #caa241;            /* thin outline */

  /* retro yellow gradient */
  background:
    linear-gradient(#ffe083, #f6c74c);  /* top → bottom */
  
  /* subtle inner/outer depth */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6), /* top inner highlight */
    inset 0 -1px 0 rgba(0,0,0,0.08),     /* bottom inner shadow */
    0 1px 2px rgba(0,0,0,0.15);          /* outer lift */
  
  /* keep long titles from overflowing ugly */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 10px;
}

/* glossy strip like the screenshot */
.guide-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
     to bottom,
     rgba(255,255,255,0.45) 0%,
     rgba(255,255,255,0.20) 45%,
     rgba(255,255,255,0.00) 46%,
     rgba(0,0,0,0.00) 100%
  );
  pointer-events: none;
}

/* important: make pseudo-element positioning work */
.guide-card { position: relative; }

/* Optional right-side badge (rating, CC, etc.) */
.guide-card .badge {
  margin-left: auto;                    /* push to the right */
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  color: #1a1a1a;
  background: linear-gradient(#e9e9e9, #cfcfcf);
  border: 1px solid #b7b7b7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.guide-card.is-active {
  background: linear-gradient(#f6c74c, #e3aE2f);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.2),
    0 0 0 1px rgba(0,0,0,0.05);
}
.top1 { grid-column: 1 / span 4; grid-row: 1; }
.top2 { grid-column: 5 / span 4; grid-row: 1; }
.top3 { grid-column: 9 / span 4; grid-row: 1; }
/* Episodes row placement at top of the grid */
.episodes-row {
  grid-column: 1 / -1;   /* keep this */
  grid-row: 1 / span 8;  /* change/add this span so it’s tall enough */
  overflow: hidden;
  padding: 6px 0;
}
.episodes-track {
  display: inline-flex;
  align-items: center;  /* NEW */
  gap: 8px;
  will-change: transform;
  animation: ep-scroll var(--ep-speed, 30s) linear infinite;
}
/* optional: pause when hovering */


@keyframes ep-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* we duplicate the list once in JS, so -50% loops perfectly */
}
.float-left {
  float: left;
  width: 150px;
  height: auto;
  margin: 0 10px 10px 0;

  border: 2px solid #fcca2c;  
  border-radius: 10px;        
}

.float-right {
  float: right; 
  margin: 0 0 10px 10px;
  width: 80px;
  height: auto;
}
.float-left2 {
  float: left;
  width: 80px;
  height: auto;
  margin: 0 10px 10px 0;

  border: 1px solid #fcca2c;  
  border-radius: 0px;        
}
.site-title {
  grid-column: 1 / -1;         

  grid-row: auto / span 10;               /* will occupy the next available row in source order */

  font-family: 'Shrikhand', cursive;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);   /* responsive, not too big */
  line-height: 1.1;
  text-align: center;

  /* Midnight Channel vibe */
  color: #ffd32c;
  text-shadow: 2px 2px 0 #000;

  /* spacing so it never touches ticker or boxes */
  margin-block: 6px 10px;        /* top, bottom margin */
  padding-inline: 8px;
  z-index: 0;                    /* no overlap; it’s in its own grid cell anyway */
}

/* If your grid uses tiny auto-rows (e.g., 8px), you can explicitly give the title
   a comfortable lane by spanning a few rows. Uncomment and tune if needed: */
/*
.site-title { grid-row: auto / span 6; }
*/
.red-badge {
  grid-column: 1 / span 3;       /* same columns as Box A */
  grid-row: 11 / span 1;         /* one row above Box A (adjust as needed) */

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  border-radius: 10px;

  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-shadow: none;      /* remove if you added a shadow */

  background: linear-gradient(#e36363, #b73232);
  border: 1px solid #8c1f1f;
  position: relative;
  overflow: hidden;
}

.red-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
   background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0) 41%
  );
  pointer-events: none;
}
.section-title {
  border-bottom: 3px double #fcca2c;
  margin-bottom: 8px;
  padding-bottom: 4px;
}
.box.d p {
  margin: 14px 0;  /* top/bottom spacing now just 2px */
}
/* ——— Box B: Diary ——— */
.box.b .diary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Header */
.diary-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.diary-title {
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 3px double #fcca2c;  /* same double rule you liked */
}

/* Form */
.diary-form {
  display: flex;
  gap: 6px;
}

#diary-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #c9ceda;
  border-radius: 8px;
  background: #fff;
  color: #1a1a1a;
  font-family: "Ithica", sans-serif; 
}

.diary-add {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #8c1f1f;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(#e36363, #b73232); /* red pill */
  position: relative;
  overflow: hidden;
}

.diary-add::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.35) 0%,
    rgba(255,255,255,.15) 45%,
    rgba(255,255,255,0) 46%);
  pointer-events: none;
}

/* List area */
.diary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;     /* adjust to fit Box B */
  overflow: auto;        /* scroll if long */
  padding-right: 4px;    /* keep text away from scrollbar */
}

/* Entry card */
.diary-entry {
  background: #1b1b1b;   /* dark card to match theme */
  color: #fff;
  border: 1px solid #3b3b3b;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.diary-entry-meta {
  font-size: 12px;
  color: #f0d07a;        /* warm yellow time stamp */
  margin-bottom: 4px;
}

.diary-entry-text {
  white-space: pre-wrap; /* keep line breaks */
  word-wrap: break-word;
  font-family: "Ithica", sans-serif;  
}
.box.b {
  display: flex;
  flex-direction: column;
  min-height: 0;  /* lets inner scroller fit inside the grid cell */
  min-width: 0;
}

.box.b .diary {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;  /* critical for overflow to work in flex/grid */
  gap: 8px;
}

/* Scroll area that doesn't show a visible scrollbar */
.box.b .diary-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;      /* breathing room near edge */
  scrollbar-width: none;   /* Firefox: hide scrollbar */
}
.box.b .diary-list::-webkit-scrollbar {
  display: none;           /* WebKit: hide scrollbar */
}

/* Never let long words push outside the box */
#diary-text,
.diary-entry-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== Diary form look & alignment ===== */
.diary-form {
  display: flex;
  align-items: stretch;   /* input & button same height */
  gap: 6px;
}

/* Themed input (matches site): dark field, yellow border, white text */
#diary-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #fcca2c;   /* warm yellow */
  border-radius: 10px;
  background: #1b1b1b;         /* dark */
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  outline: none;
  font-size: 14px;             /* fixed size; won't shrink */
  line-height: 1.3;
}

/* Add button centered and aligned */
.diary-add {
  display: flex;
  align-items: center;
  justify-content: center;     /* center label inside button */
  padding: 0 12px;
  min-width: 72px;
  border-radius: 10px;
  border: 1px solid #8c1f1f;
  color: #fff;
  font-weight: 700;
  line-height: 1;              /* prevents vertical misalignment */
  background: linear-gradient(#e36363, #b73232);
  position: relative;
  overflow: hidden;
}
.diary-add::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.35) 0%,
    rgba(255,255,255,.15) 45%,
    rgba(255,255,255,0)   46%);
  pointer-events: none;
}

/* Entries stay contained and readable */
.diary-entry {
  overflow: hidden;
  font-size: 14px;      /* fixed size; won't shrink as list grows */
  line-height: 1.35;
}

/* ===== Sharpen section titles (Channel List / Notes) ===== */
.section-title {
  /* keep your border-bottom from earlier */
  text-shadow: none;                  /* remove any haze */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Box B is a flex column, but let the diary list control overflow */
.box.b { 
  display: flex;
  flex-direction: column;
  min-height: 0;  /* important for scroll containment */
}

/* Diary takes all space under the title */
.box.b .diary {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
}

/* List fills Box B and scrolls instead of shrinking */
.box.b .diary-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: block;              /* no flex squashing of children */
  padding-right: 4px;
  scrollbar-width: none;       /* Firefox: hide scrollbar */
}
.box.b .diary-list::-webkit-scrollbar { display: none; }

/* Each entry is its own card with fixed text size */
.diary-entry {
  background: #1b1b1b;
  color: #fff;
  border: 1px solid #3b3b3b;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  margin-bottom: 8px;          /* spacing between entries */
  font-size: 14px;             /* lock readable size */
  line-height: 1.35;
}

/* meta + text inside entry */
.diary-entry-meta {
  font-size: 12px;
  color: #f0d07a;
  margin-bottom: 4px;
}
.diary-entry-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow: 0 0 4px #ffd32c, 0 0 8px #ffd32c, 0 0 12px #e36363;
  }
  20%, 24%, 55% {
    opacity: 0.8;
    text-shadow: none;
  }
}

.welcome-title {
  font-family: 'Shrikhand', cursive;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  animation: flicker 2s infinite;
}
.box.f {
  display: flex;
  flex-direction: column;
  min-height: 0;   /* important for flex children inside grid cells */
  overflow: hidden;
}

/* Media wrapper takes up all remaining space below text */
.welcome-media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;     /* center vertically */
  justify-content: center; /* center horizontally */
  overflow: hidden;        /* nothing spills outside */
}

/* The image itself */
.welcome-image {
  max-width: calc(100% - 4px);
  max-height: calc(100% - 4px);  /* 4px = 2px top + 2px bottom border */
  border: 2px solid #fcca2c;
  border-radius: 4px;
  display: block;
}
.diary-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #cfcaa0;
  opacity: .9;
  margin-top: -4px;   /* tuck closer to form */
}

/* When blocked by cooldown, dim the button */
.diary-add[disabled] {
  opacity: .6;
  cursor: not-allowed;
}
.c-content {
  display: flex;
  align-items: flex-start;  /* align tops */
  gap: 12px;                /* space between poll and right side */
}

/* Poll area stays narrow */
.poll-area {
  flex: 0 0 auto;           /* don’t stretch, keep its own width */
}

/* Side content grows to fill remaining space */
.side-content {
  flex: 1 1 auto;
  color: #fff;
  font-size: 14px;
}
.side-content img {
  max-width: 100%; 
  height: auto;
  border: 2px solid #fcca2c;
  border-radius: 6px;
}
.box.f {
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* no spill outside */
  min-height: 0;     /* important when inside a grid */
}

/* Wrapper takes remaining space */
.welcome-media {
  flex: 1 1 auto;            /* grow to fill leftover space */
  min-height: 0;
  display: flex;
  align-items: center;       /* center if image is smaller */
  justify-content: center;
  overflow: hidden;
}

/* Image fills and crops if needed */
.welcome-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* crop instead of squish */
  display: block;
  border-radius: 4px;         /* optional: match your site style */
  border: 2px solid #fcca2c;  /* optional border */
}