@font-face {               /* built from fonts/font.png by tools/png2font.py */
  font-family: "Portfolio Pixel";
  src: url("fonts/PixelFont.woff2") format("woff2");
  font-display: swap;
}
@font-face {               /* fallback for characters missing from the sheet */
  font-family: "Departure Mono";
  src: url("fonts/DepartureMono-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #000000;
  --ink: #ffffff;
  --size: round(down, min(78vmin, 640px), 16px);   /* panel size on the font grid */
  --gap: 0px;             /* space between tabs; set e.g. 3px to separate them */
  --px: 2;                /* how many screen px per art px for the frames */
  --panel-slice: 12;       /* corner size of img/panel.png, in art px */
  --tab-slice: 14;         /* corner size of img/tab*.png, in art px */
  --font-size: 32px;      /* the pixel font is crisp at multiples of 16px */
  --tab-sink: 4;          /* art px the tabs overlap into the panel */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
  font-family: "Portfolio Pixel", "Departure Mono", monospace;
  font-size: var(--font-size);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

/* 3x3 grid: tabs on the edges, square panel in the middle */
.frame {
  display: grid;
  will-change: transform;
  grid-template-areas:
    ".    top    ."
    "left panel  right"
    ".    bottom .";
  grid-template-columns: auto var(--size) auto;
  grid-template-rows: auto var(--size) auto;
  gap: 0;                 /* tabs touch the panel */
}

.top    { grid-area: top; }
.right  { grid-area: right; }
.bottom { grid-area: bottom; flex-direction: row-reverse; }   /* clockwise reading order */
.left   { grid-area: left;   flex-direction: column-reverse; }
.right  { flex-direction: column; }

/* Tabs fit their text, spread evenly along each side, and sit flush against the panel */
.tabs { display: flex; gap: var(--gap); justify-content: space-evenly; z-index: 1; }
.top   { align-items: flex-end; }
.bottom{ align-items: flex-start; }
.left  { align-items: flex-end; }
.right { align-items: flex-start; }

/* sink into the panel */
.top    .tab { margin-bottom: calc(var(--tab-sink) * var(--px) * -1px); }
.bottom .tab { margin-top:    calc(var(--tab-sink) * var(--px) * -1px); }
.left   .tab { margin-right:  calc(var(--tab-sink) * var(--px) * -1px); }
.right  .tab { margin-left:   calc(var(--tab-sink) * var(--px) * -1px); }

/* img/tab*.png are drawn for the top side (panel below); main.js makes rotated copies for the other sides */
.top    .tab        { --img: var(--tab-top,       url("img/tab.png")); }
.right  .tab        { --img: var(--tab-right,     url("img/tab.png")); }
.bottom .tab        { --img: var(--tab-bottom,    url("img/tab.png")); }
.left   .tab        { --img: var(--tab-left,      url("img/tab.png")); }
.top    .tab.active { --img: var(--tab-on-top,    url("img/tab-active.png")); }
.right  .tab.active { --img: var(--tab-on-right,  url("img/tab-active.png")); }
.bottom .tab.active { --img: var(--tab-on-bottom, url("img/tab-active.png")); }
.left   .tab.active { --img: var(--tab-on-left,   url("img/tab-active.png")); }

/* drawn with a 9-slice image */
.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.0em;
  color: inherit;
  text-decoration: none;
  border-style: solid;
  border-width: calc(var(--tab-slice) * var(--px) * 1px);
  border-image: url("img/tab.png") var(--tab-slice) fill stretch;
  border-image-source: var(--img);
  image-rendering: pixelated;
}
.tab:hover  { filter: brightness(1.2); }
.tab.active { color: var(--bg); }
.right .tab { writing-mode: vertical-rl; }   /* reads top to bottom */
.left  .tab { writing-mode: sideways-lr; }   /* reads bottom to top, without rotating the sprite */

.panel {
  grid-area: panel;
  border-style: solid;
  border-width: calc(var(--panel-slice) * var(--px) * 1px);
  border-image: url("img/panel.png") var(--panel-slice) fill stretch;
  image-rendering: pixelated;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.stage {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
}
.stage img { image-rendering: pixelated; }

.text { padding: .1em 0.3em; line-height: 0.75; }  /* 32 → 40px, 48 → 60px: whole pixels */
.text h2 { margin: 0 0 .25em; font-size: calc(var(--font-size) * 1.5); font-weight: normal; text-transform: uppercase; }
.text p  { margin: 0 0 .5em; }

/* Phone: all tabs in a wrapping row above the panel */
@media (max-width: 640px) {
  :root { --size: calc(100vw - 16px); }
  .frame { display: flex; flex-direction: column; padding: 8px; }
  .tabs, .bottom, .left, .right { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .left .tab, .right .tab { writing-mode: horizontal-tb; }
  .tabs .tab { margin: 0; --img: var(--tab-top, url("img/tab.png")); }
  .tabs .tab.active { --img: var(--tab-on-top, url("img/tab-active.png")); }
  .panel { order: 9; height: var(--size); }
}