/* 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; }
}