/* ============================================================================
   THE BOOKCASE.

   Lincoln, 2026-09-26: "make the stuff look like a book shelf filled with
   games like a real book shelf -- the home screen should be a book shelf and
   the games are on the shelf." Spines out, with the standouts turned
   face-out, which is how a real shelf looks: mostly spines, a few books
   turned forward because someone wanted to see the cover.

   IT IS THE SAME LINKS UNDERNEATH. Every book is the `.case` anchor that was
   already on the page -- same href, same data-view, same spine colour, same
   cover art. Nothing about the 2D/3D filter, the remembered choice, or the
   ?view= parameter that travels with a link was touched; they are styled into
   books here and packed into rows by shelf.js. A game added to the HTML
   appears on a shelf without anyone editing this file.

   NO IMAGES. The wood is gradients, so a shelf costs nothing to download and
   is sharp at any size -- including a 4K television, where a wood photograph
   sized for a phone would be mush.
   ========================================================================== */

.cases{
  --wood:        #6b4526;
  --wood-lit:    #8a5c33;
  --wood-dark:   #3d2614;
  --back:        #1a1410;
  --plank:       18px;   /* thickness of the shelf board */
  --gap:         10px;   /* between books */
  --lean:        0px;

  display:block;
  padding:0;
  border-radius:10px;
  background:
    /* the grain of the back panel */
    repeating-linear-gradient(90deg,
      #00000026 0 2px, #00000000 2px 7px, #ffffff08 7px 8px, #00000000 8px 19px),
    linear-gradient(180deg, #221a14, var(--back) 40%, #150f0b);
  box-shadow:
    inset 0 0 0 3px #00000055,
    inset 0 18px 30px -18px #000,
    0 26px 60px -30px #000;
  overflow:hidden;
}

/* ---------------------------------------------------------------- A SHELF */
.shrow{ position:relative; }
.shbooks{
  display:flex;
  align-items:flex-end;          /* every book stands ON the board */
  gap:var(--gap);
  padding:0 16px;
  min-height:40px;
  position:relative;
  z-index:1;
}
/* the board itself: a lit top edge, a body, and a dark front lip */
.shplank{
  position:relative;
  height:var(--plank);
  margin:0 4px 26px;
  border-radius:2px;
  background:
    linear-gradient(180deg, var(--wood-lit) 0 3px, var(--wood) 3px 62%, var(--wood-dark) 62% 100%),
    repeating-linear-gradient(90deg, #00000022 0 3px, #ffffff0a 3px 9px);
  box-shadow:
    0 2px 0 #00000066,
    0 10px 18px -8px #000c,       /* the board's shadow on the one below */
    inset 0 1px 0 #ffffff2e;
}
/* the shadow each row of books casts down onto its own board */
.shplank::before{
  content:''; position:absolute; left:6px; right:6px; top:-9px; height:9px;
  background:linear-gradient(180deg, #0000, #00000073);
  pointer-events:none;
}
.shrow:last-child .shplank{ margin-bottom:8px; }

/* ------------------------------------------------------------- A BOOK, SPINE OUT */
.case{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:var(--w, 46px);
  height:var(--h, 210px);
  text-decoration:none;
  border-radius:2px 4px 4px 2px;
  transform-origin:50% 100%;      /* it tips out from where it meets the board */
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease, filter .16s ease;
  transform:rotate(var(--lean));
  /* cloth over board: the spine colour, darkened at the edges the way a
     rounded spine catches light */
  background:
    linear-gradient(90deg, #00000066 0 3px, #ffffff1f 3px 7px, #0000 7px 78%,
                    #00000038 78% 92%, #00000073 92% 100%),
    linear-gradient(180deg, #ffffff17, #0000 30%, #00000038);
  background-color:var(--spine, #7a7a7a);
  box-shadow:
    0 6px 10px -6px #000c,
    inset 0 0 0 1px #0003;
  overflow:hidden;
  color:#0e0e10;
}
/* the head and tail bands every hardback has */
.cspine{
  position:absolute; left:0; right:0; top:0; height:100%;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      #00000059 0 3px, #ffffff2b 3px 5px, #0000 5px 11px,
      #00000047 11px 13px, #0000 13px calc(100% - 13px),
      #00000047 calc(100% - 13px) calc(100% - 11px), #0000 calc(100% - 11px) calc(100% - 5px),
      #ffffff2b calc(100% - 5px) calc(100% - 3px), #00000059 calc(100% - 3px) 100%);
  width:auto;
}
/* the title, running down the spine the way it does on a shelf */
.cwrap{
  position:absolute; inset:16px 0 16px 0;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  overflow:hidden;
}
.cname{
  display:block;
  font:800 var(--fs, 12px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#14100c;
  text-shadow:0 1px 0 #ffffff3d;
}
.cgenre{ display:none; }          /* a spine has room for a title, not a subtitle */
.cart{ display:none; }

/* NEW, as the little sticker a shop puts near the head of a spine. It was a
   corner badge on the old flat cards; on a spine there is no corner, so it is
   a band across the top, and on a cover it goes back to being a corner. */
.cflag{
  position:absolute; left:0; right:0; top:0; z-index:2;
  padding:3px 0 4px;
  background:#12141cd9; color:#ffd166;
  font:800 7.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.18em; text-align:center;
  border-bottom:1px solid #ffffff2b;
}
.case.face .cflag{
  left:auto; right:7px; top:8px; width:auto;
  padding:3px 7px 4px; border-radius:3px;
  border:1px solid #ffffff2b; font-size:8.5px;
}

/* THE 3D MARK, AT THE FOOT OF THE SPINE.
   Where a real book carries its publisher's device: the foot, below the
   title, the one part of a spine that is conventionally not the title. NEW
   already owns the head of the spine, so the two can never be read as one
   another -- different end, different colour, different shape.

   Only the games that actually render in 3D carry it. Iron Circuit and Open
   Mat still contain 3D code, but the shelf no longer opens them that way, so
   marking them 3D would be marking them for something a player cannot get
   to from here. */
.c3d{
  position:absolute; left:50%; bottom:5px; transform:translateX(-50%);
  z-index:2;
  padding:3px 5px; border-radius:3px;
  background:#0b1020e0; color:#8fd0ff;
  border:1px solid #8fd0ff6b;
  font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.14em;
  box-shadow:0 1px 0 #0009;
}
/* the title gives the mark its room rather than sitting on top of it */
.case.is3d .cwrap{ bottom:28px; }

.case.face .c3d{
  left:auto; right:8px; bottom:auto; top:8px; transform:none;
  padding:3px 7px 4px; font-size:9.5px;
}
/* on a cover the mark is in the corner, so the title keeps its own room */
.case.face.is3d .cwrap{ bottom:auto; }
/* and NEW moves over to make way for it when a book has both */
.case.face .cflag{ right:auto; left:12px; }

/* ------------------------------------------------------- A BOOK, TURNED FACE OUT */
.case.face{
  border-radius:3px;
  background:
    linear-gradient(90deg, #00000073 0 5px, #ffffff1a 5px 8px, #0000 8px 100%),
    linear-gradient(180deg, #ffffff12, #0000 40%, #00000047);
  background-color:var(--spine, #7a7a7a);
}
/* THE COVER LAYS ITSELF OUT.
   These were pinned with insets -- art from 8px to 46px, title in the last
   32px -- and a two-line title is 37px, so every cover whose name wraps
   overflowed its own band by five pixels. A column that gives the art
   whatever is left after the title has taken what it needs cannot do that,
   at any size, for any title. */
.case.face{
  display:flex; flex-direction:column; gap:6px;
  padding:9px 8px 9px 12px;
}
.case.face .cart{
  display:block; position:static;
  flex:1 1 auto; min-height:0; width:auto;
  background-size:cover; background-position:center;
  border-radius:2px;
  box-shadow:0 2px 8px -2px #000b, inset 0 0 0 1px #0006;
}
.case.face .cwrap{
  position:static; inset:auto;
  flex:0 0 auto;
  writing-mode:horizontal-tb;
  align-items:center;
  overflow:visible;
  padding-bottom:2px;
}
.case.face .cname{
  font-size:var(--fsf, 10px);
  white-space:normal;
  text-align:center;
  line-height:1.15;
  letter-spacing:.06em;
}
.case.face .cgenre{
  display:none;
}

/* ------------------------------------------------- PULLING ONE OFF THE SHELF */
.case:hover, .case:focus-visible, .case.sel{
  transform:translateY(-14px) rotate(calc(var(--lean) - 2deg));
  box-shadow:0 16px 22px -10px #000e, inset 0 0 0 1px #ffffff2b;
  filter:brightness(1.12);
  z-index:3;
}
.case:focus-visible, .case.sel{
  outline:3px solid #ffd166;
  outline-offset:2px;
}
.case:active{ transform:translateY(-6px) rotate(var(--lean)); }
.case[hidden]{ display:none; }

/* the label that appears when a spine is picked out, because a spine on a
   television is not readable from a sofa and a genre never fits on one */
.shtip{
  position:absolute; z-index:6; pointer-events:none;
  padding:7px 12px; border-radius:8px;
  background:#0d0f16f2; color:#eef2fb;
  border:1px solid #ffffff2e;
  font:700 12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 10px 26px -10px #000;
  opacity:0; transform:translateY(4px);
  transition:opacity .13s ease, transform .13s ease;
  white-space:nowrap;
}
.shtip.on{ opacity:1; transform:translateY(0); }
.shtip b{ display:block; font-size:13px; color:#fff; }
.shtip i{ display:block; font-style:normal; font-size:10.5px; color:#9fb0cf;
          letter-spacing:.1em; margin-top:3px; }

@media (prefers-reduced-motion: reduce){
  .case, .shtip{ transition:none; }
}

/* ------------------------------------------------------------- SMALL SCREENS */
@media (max-width:640px){
  .cases{ --gap:7px; }
  .shbooks{ padding:0 10px; }
  .shplank{ margin:0 3px 18px; height:13px; }
}

/* ------------------------------------------------ A TELEVISION ACROSS A ROOM
   Xbox draws the page at 1920x1080 and the player is on a sofa, so everything
   grows: thicker boards, taller books, bigger spine type, a focus ring you can
   see from three metres. Driven by the width the console actually reports. */
@media (min-width:1500px){
  .cases{ --gap:14px; --plank:24px; }
  .c3d{ font-size:10px; padding:4px 7px; bottom:7px; }
  .case.is3d .cwrap{ bottom:34px; }
  .case.face .c3d{ font-size:12px; }
  .cflag{ font-size:10px; padding:5px 0 6px; }
  .case.face .cflag{ font-size:11px; }
  .shbooks{ padding:0 26px; }
  .shplank{ margin:0 6px 38px; }
  .case:focus-visible, .case.sel{ outline-width:5px; outline-offset:4px; }
  .shtip{ font-size:16px; padding:10px 18px; }
  .shtip b{ font-size:18px; } .shtip i{ font-size:13px; }
}