/* The box viewer: a dark table under one warm lamp. Colours from the game's palette (style.css). */
:root {
  --k: 1; --kt: 1; --kl: 1;              /* px per mm: the box scene, the table, the close look */
  --ink: #c4b392; --bone: #eee4cc; --blood: #c8231f; --gold: #c39535;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--serif); color: var(--ink); user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%, rgba(255, 196, 130, .16), transparent 70%),
    repeating-linear-gradient(91deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px, rgba(255,255,255,.015) 9px 11px, transparent 11px 23px),
    linear-gradient(#2a1c14, #120b08 70%, #070404);
}
button { font: inherit; }

/* header */
.top { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 74px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 28px; background: linear-gradient(rgba(5,4,7,.85), rgba(5,4,7,0)); }
.brand { height: 34px; image-rendering: pixelated; filter: drop-shadow(0 2px 6px #000); }
.tabs { display: flex; gap: 8px; }
.tabs button { background: rgba(26,21,32,.8); color: var(--ink); border: 1px solid #48434f; border-radius: 999px;
  padding: 10px 22px; font-size: 17px; letter-spacing: .04em; cursor: pointer; }
.tabs button:hover { border-color: var(--gold); color: var(--bone); }
.tabs button.on { background: #8e1318; border-color: #ff4f3a; color: var(--bone); }

/* views */
main { position: absolute; inset: 0; }
.view { position: absolute; inset: 0; display: none; }
.view.on { display: block; }
.scene { position: absolute; inset: 74px 0 96px 0; perspective: 2600px; perspective-origin: 50% 30%; cursor: grab; touch-action: none; }
.scene.dragging { cursor: grabbing; }
.hint { position: absolute; left: 0; right: 0; bottom: 92px; text-align: center; margin: 0; font-style: italic;
  font-size: 14px; opacity: .55; pointer-events: none; transition: opacity .4s; }
.bar { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; z-index: 15; }
.bar button { background: linear-gradient(#2a2630, #1a1520); color: var(--bone); border: 1px solid #875634;
  border-radius: 10px; padding: 13px 26px; font-size: 18px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.5);
  min-width: 150px; }
.bar button:hover { border-color: var(--gold); background: linear-gradient(#48434f, #2a2630); }
.bar button:active { transform: translateY(1px); }
.bar button.primary { background: linear-gradient(#c8231f, #8e1318); border-color: #ff4f3a; }

/* 3D bits */
.wrap3d { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d;
  transition: left .9s cubic-bezier(.2,.8,.2,1), top .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.obj3d { position: absolute; transform-style: preserve-3d; }
.obj3d.ease { transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.f { position: absolute; background: #1a1520 center / 100% 100% no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.f::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,var(--shade, 0)); pointer-events: none; }
.f:not(.missing)::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 38%, rgba(255,240,220,.13) 48%, rgba(255,240,220,.04) 54%, transparent 62%);
  background-size: 300% 100%; background-position: var(--sx, 50%) 0; }
.hinge { position: absolute; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.4,.1,.2,1); }
.floor { position: absolute; background: rgba(0,0,0,.6); box-shadow: 0 0 calc(var(--k) * 30px) calc(var(--k) * 18px) rgba(0,0,0,.55); }

/* a painted face fills its box (slices override size and position inline) */
.img { background-size: 100% 100%; background-repeat: no-repeat; background-position: center; }

/* missing images: a quiet stand-in with the face's name */
.img.missing { background: #1d1820 repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 6px, transparent 6px 12px) !important; }
.img.missing::before { content: attr(data-name); position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; font: italic 12px var(--serif); color: rgba(196,179,146,.45);
  padding: 4px; border: 1px dashed rgba(196,179,146,.18); background: none; }
.paper.img.missing { background: #d9cfb6 !important; }
.paper.img.missing::before { color: rgba(26,21,32,.45); border-color: rgba(26,21,32,.2); }

/* the table */
.table-items { position: absolute; left: 50%; top: 50%; width: calc(var(--kt) * 900px); height: calc(var(--kt) * 430px);
  transform: translate(-50%, -50%); pointer-events: none; }
.item { position: absolute; cursor: zoom-in; pointer-events: auto; transform-origin: 50% 50%;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .5s, filter .2s; opacity: 0; }
.table-items.out .item { opacity: 1; }
.item .sheet { position: absolute; inset: 0; background: #d9cfb6 center / 100% 100% no-repeat;
  box-shadow: 0 calc(var(--kt) * 3px) calc(var(--kt) * 10px) rgba(0,0,0,.6), 0 0 0 .5px rgba(0,0,0,.4); }
.item:hover { filter: brightness(1.12); }
.item:hover .sheet { box-shadow: 0 calc(var(--kt) * 8px) calc(var(--kt) * 22px) rgba(0,0,0,.7); }
.item .tag { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap; font-size: 14px;
  color: var(--bone); background: rgba(5,4,7,.8); padding: 3px 10px; border-radius: 99px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 3; }
.item:hover .tag { opacity: 1; }
.item.manual .sheet::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 6%;
  background: linear-gradient(90deg, rgba(0,0,0,.35), transparent); }

/* the disc */
.disc { position: absolute; border-radius: 50%; }
.disc .silver { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, #cfd3d8, #9aa3ad, #f4f1ea, #a7b6c4, #e2d6ef, #b5c7c0, #f7f3e8, #9aa3ad, #d7dde3, #b9a6c9, #cfd3d8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 4px 14px rgba(0,0,0,.55); }
.disc .label { position: absolute; left: .833%; top: .833%; width: 98.33%; height: 98.33%; border-radius: 50%; overflow: hidden; }
.disc .hub { position: absolute; left: 50%; top: 50%; width: 28%; height: 28%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, transparent 44%, rgba(220,225,232,.55) 46%, rgba(200,210,220,.25) 62%, rgba(255,255,255,.4) 64%, rgba(180,190,200,.2) 100%); }
.disc .gloss { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 10%, rgba(255,255,255,.18) 14%, transparent 20% 60%, rgba(255,255,255,.12) 64%, transparent 70%); }
.disc { -webkit-mask: radial-gradient(circle, transparent 12.4%, #000 12.6%); mask: radial-gradient(circle, transparent 12.4%, #000 12.6%); }
.spin { animation: spin 7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the jewel case's plastic */
.plastic { position: absolute; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 22%, transparent 34%, transparent 58%, rgba(255,255,255,.09) 66%, transparent 72%),
    rgba(200,215,230,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 6px rgba(255,255,255,.08); }
.plastic.edge { background: rgba(160,175,190,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.ridges { position: absolute; top: 0; bottom: 0; left: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px), rgba(160,175,190,.12); }
.tray { position: absolute; background:
  radial-gradient(circle at var(--hx) 50%, #0c0c10 0 calc(var(--k) * 7px), #26262c calc(var(--k) * 7.5px) calc(var(--k) * 15px), #111116 calc(var(--k) * 15.5px) calc(var(--k) * 61px), transparent calc(var(--k) * 61.5px)),
  linear-gradient(135deg, #1b1b20, #0b0b0e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* the close look */
.look { position: fixed; inset: 0; z-index: 30; background: rgba(5,4,7,.88); backdrop-filter: blur(3px); }
.look[hidden] { display: none; }
.look-stage { position: absolute; inset: 70px 0 120px 0; perspective: 2400px; }
.look-stage .center { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.card3d { position: absolute; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.card3d .side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #d9cfb6 center / 100% 100% no-repeat; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.card3d .side.back { transform: rotateY(180deg); }
.look .close { position: absolute; top: 18px; right: 24px; z-index: 2; background: none; border: 1px solid #48434f; color: var(--bone);
  font-size: 18px; border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.look .close:hover { border-color: var(--gold); }
.look .title { position: absolute; top: 22px; left: 0; right: 0; text-align: center; font-size: 20px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bone); pointer-events: none; }
.look .pageno { position: absolute; bottom: 88px; z-index: 2; left: 0; right: 0; text-align: center; font-size: 14px; opacity: .6; }

/* the reader */
.book { position: absolute; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.7,.2,1); }
.book .pg { position: absolute; top: 0; background: #d9cfb6 center / 100% 100% no-repeat; }
.book .pg.l { box-shadow: -8px 16px 40px rgba(0,0,0,.6); }
.book .pg.r { box-shadow: 8px 16px 40px rgba(0,0,0,.6); }
.book .pg.l::after, .book .pg.r::after { content: ''; position: absolute; top: 0; bottom: 0; width: 10%; pointer-events: none; }
.book .pg.l::after { right: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.28)); }
.book .pg.r::after { left: 0; background: linear-gradient(270deg, transparent, rgba(0,0,0,.28)); }
.book .pg.empty { visibility: hidden; }
.leaf { position: absolute; top: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.45,.05,.25,1); z-index: 5; }
.leaf .side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #d9cfb6 center / 100% 100% no-repeat; }
.leaf .side.back { transform: rotateY(180deg); }
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid #875634; background: rgba(26,21,32,.85); color: var(--bone); font-size: 30px; cursor: pointer; }
.nav-arrow:hover { border-color: var(--gold); }
.nav-arrow.prev { left: 24px; } .nav-arrow.next { right: 24px; }
.nav-arrow:disabled { opacity: .25; cursor: default; }

/* the catalogue */
.panel { position: absolute; top: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.4,.1,.2,1); }
.panel .side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #d9cfb6 no-repeat; }
.panel .side.back { transform: rotateY(180deg); }

/* the print page */
.print-page { position: absolute; inset: 74px 0 0 0; overflow-y: auto; padding: 20px 6vw 60px; user-select: text; }
.print-page h1 { font-weight: normal; color: var(--bone); letter-spacing: .06em; margin: 10px 0 18px; font-size: 30px; }
.how { background: rgba(26,21,32,.7); border-left: 4px solid var(--blood); padding: 12px 20px; border-radius: 6px; max-width: 900px; font-size: 17px; line-height: 1.5; }
.how p { margin: 6px 0; }
.how b { color: var(--bone); }
.pdfs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-top: 28px; }
.pdf { background: rgba(26,21,32,.75); border: 1px solid #48434f; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pdf .thumb { height: 170px; display: flex; align-items: center; justify-content: center; }
.pdf .thumb div { height: 100%; aspect-ratio: var(--ar); max-width: 100%; background: center / contain no-repeat; box-shadow: 0 6px 16px rgba(0,0,0,.6); position: relative; }
.pdf h2 { margin: 0; font-size: 20px; font-weight: normal; color: var(--bone); }
.pdf p { margin: 0; font-size: 15px; line-height: 1.4; opacity: .85; flex: 1; }
.pdf a { align-self: flex-start; text-decoration: none; background: linear-gradient(#c8231f, #8e1318); color: var(--bone); border: 1px solid #ff4f3a;
  padding: 9px 18px; border-radius: 8px; font-size: 16px; }
.pdf a:hover { filter: brightness(1.15); }

/* an upright phone: a smaller name, the three tabs fit beside it, and the buttons stay two to a row */
@media (max-width: 700px) {
  .top { padding: 0 10px; gap: 8px; }
  .brand { height: 20px; }
  .tabs { gap: 5px; }
  .tabs button { padding: 7px 11px; font-size: 13px; white-space: nowrap; }
  .bar { gap: 8px; bottom: 14px; padding: 0 8px; }
  .bar button { min-width: 0; padding: 11px 14px; font-size: 15px; flex: 1 1 40%; }
  .hint { bottom: 128px; }
}

/* (2026-10-02, v53) the site's links at vaevictis.vip/box/: a thin strip above the header (Play -> the game, the other pages) */
.site { position: fixed; z-index: 21; top: 0; left: 0; right: 0; height: 28px; display: flex; justify-content: center; align-items: center;
  gap: 4px 18px; background: #050407; border-bottom: 1px solid #520a11; font-size: 14px; letter-spacing: .03em; white-space: nowrap; overflow-x: auto; }
.site a { color: var(--ink); text-decoration: none; padding: 4px 2px; }
.site a:hover, .site a:focus-visible { color: var(--bone); text-decoration: underline; }
.site a[aria-current] { color: var(--bone); }
.site a.play { color: #ff4f3a; font-weight: bold; }
.top { top: 28px; }
.scene { top: 102px; }
.print-page { top: 102px; }
@media (max-width: 700px) { .site { gap: 4px 11px; font-size: 13px; justify-content: flex-start; padding: 0 10px; } }

/* (2026-10-02) a 360-430 px phone: the page laid out 505 px wide (the header's name and three tabs were wider than the screen, so the
   browser widened the page and cut the tabs off). Nothing may be wider than the screen now: the views clip their own contents, and
   on a narrow screen the name sits on its own row over the tabs. viewer.js reads the header's real height (layout). */
html { overflow-x: hidden; }
.view { overflow: hidden; }
.top, .site { max-width: 100vw; }
@media (max-width: 480px) {
  .top { height: 86px; flex-direction: column; justify-content: center; gap: 7px; padding: 0 8px; }
  .brand { height: 19px; }
  .tabs { gap: 6px; }
  .tabs button { padding: 8px 13px; font-size: 14px; }
  .scene { top: 114px; }
  .print-page { top: 114px; }
  .bar button { padding: 10px 8px; font-size: 14px; }
}
/* embedded in the front door (vaevictis.vip/, site/index.html loads /box/?embed in its own section): no site strip, the page's own bar has the links */
html.embed .site { display: none; }
html.embed .top { top: 0; }
html.embed .scene, html.embed .print-page { top: 74px; }
@media (max-width: 480px) { html.embed .scene, html.embed .print-page { top: 86px; } }