@font-face {
  font-family: 'zpix';
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/zpix.ttf')   format('truetype');
  font-display: swap;
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 0;                       /* boxes sit flush against each other */
  height: 82vh;                 /* 15vh of even space top + bottom */
  margin: 9vh 6vw;            /* 15% even space on every side */
  box-sizing: border-box;
}

/* -- shared box structure; per-box overrides come from CSS variables -- */
.bento-box {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  border: var(--b-width, 1.5px) var(--b-style, dashed) var(--b-color, #a69f9f);
  border-radius: var(--b-radius, 22px);
  background: var(--b-bg, transparent);
  color: var(--b-color, #a69f9f);
  font-size: 12px;
  transition: filter 0.6s var(--good-ease);
}

/* live page content injected into the box (real DOM, see bento.php) */
.bento-preview {
  position: absolute;
  inset: 0;
  padding: 30px 14px 14px;   /* top room for the label chip */
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 12px;
  line-height: 1.4;
}

/* inner content is fully interactive (scroll, click links, hover) */
.bento-preview a { color: inherit; }

/* strip decoration from FETCHED-page previews: ascii art and animated gifs.
   (.page is added only to boxes whose content comes from a page, so custom
   boxes you write by hand keep their own gifs/pre.) */
.bento-preview.page pre { display: none !important; }
.bento-preview.page img[src$=".gif"] { display: none !important; }

/* unblur the words entries so the preview is readable */
.bento-preview.page p.entries { filter: none !important; }

/* images tile: compact grid + force thumbnails visible (the page's reveal
   script doesn't run on injected DOM, so undo the opacity:0 default) */
.bento-preview .image-grid { grid-template-columns: repeat(3, 1fr); gap: 0px; }
.bento-preview .image-container img { opacity: 1 !important; }

/* images box only: no padding so the grid reaches the edges */
.bento-box--images .bento-preview { padding: 0; }

/* the label is the link to the full page; floats top-left above the preview */
.bento-box .label {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--label-font, 'zpix');   /* set --label-font per box */
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 6px;
  /*background: rgba(255, 255, 255, 0.7);*/
  color: var(--b-color, #a69f9f);
  cursor: pointer;
}

/* CENTER-ALIGN modifier: add class "bento-box--center" to a box to center
   both its label and its content */
.bento-box--center .label {
  left: 50%;
  transform: translateX(-50%);
}
.bento-box--center .bento-preview { text-align: center; }

/* =============================================================================
   PER-BOX PLACEMENT (size + position) — the "layout map"
   Columns and rows are 1-13 / 1-9 grid LINES (12 cols, 8 rows of cells).
   ============================================================================= */

.bento-box--clock  { grid-column: 1 / 3; grid-row: 1 / 3;     display: grid;
    place-items: center;}
.bento-box--traces { grid-column: 9 / 10; grid-row: 1 / 5; }
.bento-box--about  { grid-column: 3 / 9; grid-row: 1 / 3; }
.bento-box--images { grid-column: 9 / 13; grid-row: 1 / 5; }
.bento-box--words  { grid-column: 9 / 13; grid-row: 5 / 9; }
.bento-box--menu    { grid-column: 1 / 2;  grid-row: 3 / 5; }
.bento-box--buttons { grid-column: 1 / 2;  grid-row: 5 / 9; }
.bento-box--viewer  { grid-column: 2 / 9;  grid-row: 3 / 9; }


.bento-box--clock  { --b-color:#000; --b-style:none; --b-radius:100px; --b-bg:#d6d5d2}
.bento-box--traces  { --b-color:#000; --b-style:dashed; --b-radius:50px; --b-bg:gray}

.bento-box--about  { --b-color:#eeeeee; --b-style:dashed; --b-radius:50px; --b-bg:transparent}
.bento-box--images { --b-color:#a69f9f; --b-style:dotted; --b-radius:0px; }
.bento-box--words  { --b-color:#111;    --b-style:dotted;  --b-radius:30px; --b-bg:#f5edf0; }
.bento-box--menu { --b-color:#000; --b-style:none; --b-radius:0px; --b-bg:#fff; filter: blur(0.5px);}
.bento-box--buttons { --b-color:transparent; --b-style:none; --b-radius:0px; --b-bg:transparent; }
.bento-box--viewer { --b-color:#a69f9f; --b-style:none; --b-radius:50px; --b-bg:#d1cfcf; }

/* =============================================================================
   VIEWER PLACEHOLDER
   ============================================================================= */

.viewer-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 16px;
  line-height: 1.1;
  color: #f7edf7;
  opacity: 1;
  pointer-events: none;
  overflow: hidden;
}

.bento-box--viewer.has-content .viewer-placeholder {
  display: none;
}

/* =============================================================================
   MENU BOX
   ============================================================================= */

.bento-nav {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px;
  box-sizing: border-box;
}

.bento-nav-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--b-color, #a69f9f);
  text-decoration: none;
  font-family: 'zpix', monospace;
  font-size: 12px;
  padding: 2px 0;
  cursor: pointer;
}

.bento-nav-item .nav-gif {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: none;
  flex-shrink: 0;
}

.bento-nav-item.active .nav-gif {
  display: inline-block;
}

/* =============================================================================
   BUTTONS BOX
   ============================================================================= */

.bento-buttons {
  position: absolute;
  inset: 0;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  scrollbar-width: none;
}
.bento-buttons::-webkit-scrollbar { display: none; }

.bento-btn {
  display: block;
  cursor: pointer;
  position: relative;
  line-height: 0;
}

.bento-btn img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}

.bento-btn .hover-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 10px;
  font-family: 'zpix', monospace;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.bento-btn:hover .hover-hint { opacity: 1; }
.bento-btn.flash .hover-hint { opacity: 0; }

.bento-btn .copied {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 10px;
  font-family: 'zpix', monospace;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.bento-btn.flash .copied { opacity: 1; }

/* =============================================================================
   BOTTOM CLOCK
   ============================================================================= */

.bento-clock {
  position: fixed;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #a69f9f;
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 10;
}

/* =============================================================================
   DECORATION LAYER
   Floating imagery/gifs placed freely on top of the grid. pointer-events:none
   so it never blocks clicks on the boxes. Position each with top/left/right.
   ============================================================================= */

.decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.decor img { position: absolute; }

/* examples — move/resize/swap freely */
.decor .d1 { top: 150px;  right: 380px; width: 80px; }
.decor .d2 { top: 200px; right: 300px; width: 100px; }

/* =============================================================================
   MOBILE — collapse to a single stacked column
   ============================================================================= */

@media (max-width: 700px) {
  .bento {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 110px 24px 40px;
  }
  .bento-box {
    grid-column: auto;
    grid-row: auto;
    min-height: 220px;
  }
  .bento-box--space { --b-radius: 30px; } /* drop the oval on mobile */
  .decor { display: none; }
}