/* Biblioteca JAGP: scena a videogioco in CSS puro. Nessun font né immagine esterni. */
.lib { --wood: #6b4a2b; --wood-d: #4a3119; --wall: #e9dfc9; --paper: #fbf5e4; --ink: #2b241a; }
.lib-bar { display: flex; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.lib-bar input { flex: 1 1 14rem; }
.lib-scene { position: relative; height: 380px; border: 3px solid var(--wood-d); border-radius: 10px; overflow: hidden; background: linear-gradient(#efe6d0, var(--wall)); box-shadow: inset 0 0 40px rgba(74, 49, 25, .25); }
.lib-scene[hidden] { display: none; }
.lib-deco > * { position: absolute; }
.lib-window { left: 44%; top: 14px; width: 12%; min-width: 70px; height: 70px; border: 5px solid var(--wood); border-radius: 40px 40px 4px 4px; background: linear-gradient(#9cc7e8, #e9f3fb); }
.lib-clock { left: 8%; top: 16px; width: 38px; height: 38px; border: 4px solid var(--wood); border-radius: 50%; background: #fffdf5; }
.lib-clock::before, .lib-clock::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; background: var(--ink); transform-origin: bottom center; }
.lib-clock::before { height: 13px; transform: translate(-50%, -100%) rotate(40deg); }
.lib-clock::after { height: 9px; transform: translate(-50%, -100%) rotate(200deg); }
.lib-lamp { right: 16%; top: 0; width: 3px; height: 28px; background: var(--wood-d); }
.lib-lamp::after { content: ""; position: absolute; left: -14px; top: 26px; width: 31px; height: 18px; background: #e8b74a; border-radius: 16px 16px 2px 2px; box-shadow: 0 10px 28px 10px rgba(255, 214, 120, .35); }
.lib-floor { left: 0; right: 0; bottom: 0; height: 74px; background: repeating-linear-gradient(90deg, #a07c4f 0 58px, #94703f 58px 60px); border-top: 4px solid var(--wood-d); }
.lib-rug { left: 22%; width: 40%; bottom: 8px; height: 28px; background: repeating-linear-gradient(90deg, #8c2f39 0 14px, #b85a63 14px 28px); border-radius: 50%; opacity: .55; }
.lib-desk { left: 76%; width: 21%; bottom: 40px; height: 54px; background: var(--wood); border: 3px solid var(--wood-d); border-radius: 4px 4px 0 0; box-shadow: 0 8px 0 -2px var(--wood-d); display: flex; align-items: flex-start; justify-content: center; }
.lib-desk span { font-size: 11px; color: #f5e9c8; margin-top: auto; padding-bottom: 3px; }
.lib-cases { position: absolute; left: 2%; right: 25%; top: 96px; bottom: 82px; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 10px; z-index: 1; }
.lib-case { background: #5a3d21; border: 3px solid var(--wood-d); border-radius: 4px 4px 0 0; padding: 4px 6px 0; display: flex; flex-direction: column; min-width: 0; transition: box-shadow .3s; }
.lib-case.lit { box-shadow: 0 0 0 3px #f2c14e, 0 0 22px 6px rgba(242, 193, 78, .6); }
.lib .lib-case .lib-case-t { font-size: 12px; font-weight: 700; color: #f5e9c8; margin: 0 0 3px; padding: 0; line-height: 1.2; border: 0; letter-spacing: 0; }
.lib-spines { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-end; gap: 2px; overflow: hidden; background: #2d1d0e; padding: 4px 3px 0; border-radius: 2px; }
.spine { width: var(--w); height: var(--h); padding: 2px 0; margin: 0; border: 0; border-bottom: 4px solid #5a3d21; border-radius: 2px 2px 0 0; background: var(--c); color: #fff; font: 600 9px/1.1 Arial, sans-serif; cursor: pointer; writing-mode: vertical-rl; text-align: left; overflow: hidden; transition: transform .15s, opacity .2s, filter .2s; }
.spine span { display: block; max-height: 100%; overflow: hidden; }
.spine:hover:not(:disabled), .spine:focus-visible { transform: translateY(-6px); filter: brightness(1.15); outline: 2px solid #f2c14e; outline-offset: 1px; }
.spine-book { border-top: 3px solid #e9c46a; }
.spine.dim { opacity: .22; }
.spine.picked { outline: 2px dashed #f2c14e; }
.spine.gone { visibility: hidden; }
.spine:disabled { cursor: default; }
.lib-empty { background: transparent; border: 1px dashed #c9b27c; color: #e7d9b0; font-size: 10px; padding: 4px; margin: auto; width: 100%; cursor: default; }
.lib-prof { position: absolute; bottom: 14px; left: 50%; width: 72px; height: 112px; margin-left: -36px; z-index: 3; transition: left 1.55s cubic-bezier(.45, 0, .55, 1); pointer-events: none; }
.lib-prof svg { display: block; overflow: visible; }
.lib-prof.face-left svg { transform: scaleX(-1); }
.lib-prof .p-book { display: none; }
.lib-prof.has-book .p-book { display: inline; }
.lib-prof .p-leg, .lib-prof .p-arm { transform-box: fill-box; transform-origin: 50% 0; }
.lib-prof.walking .p-l1 { animation: libStep .45s infinite alternate ease-in-out; }
.lib-prof.walking .p-l2 { animation: libStep .45s infinite alternate-reverse ease-in-out; }
.lib-prof.walking .p-a1 { animation: libStep .45s infinite alternate-reverse ease-in-out; }
.lib-prof.walking svg { animation: libBob .22s infinite alternate ease-in-out; }
.lib-prof .p-mouth, .lib-portrait .p-mouth { transform-box: fill-box; transform-origin: 50% 0; }
.lib-prof.talking .p-mouth, .lib-portrait.talking .p-mouth { animation: libTalk .26s infinite alternate; }
@keyframes libStep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes libBob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes libTalk { from { transform: scaleY(.5); } to { transform: scaleY(1.5); } }

.lib-dialog { display: flex; gap: .8rem; align-items: flex-start; margin: .7rem 0; padding: .7rem .9rem; background: var(--paper); color: var(--ink); border: 3px solid var(--wood-d); border-radius: 10px; box-shadow: 0 3px 0 var(--wood); }
.lib-dialog[hidden] { display: none; }
.lib-portrait { flex: 0 0 64px; height: 70px; border: 2px solid var(--wood-d); border-radius: 6px; overflow: hidden; }
.lib-dmain { flex: 1; min-width: 0; }
.lib-dname { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .2rem; }
.lib-dtext { min-height: 3.6em; font-size: 1.02rem; line-height: 1.5; cursor: pointer; }
.lib-skip { margin-top: .3rem; }
.lib-intro { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; padding: .8rem; border: 1px dashed var(--wood); border-radius: 8px; background: #fffaf0; color: var(--ink); }
.lib-intro[hidden] { display: none; }
.lib-intro input, .lib-intro select { flex: 1 1 12rem; }
.lib-intro p { flex-basis: 100%; margin: 0; }
.lib-card, .lib-reader, .lib-list { margin-top: .6rem; }
.lib-card { padding: 1rem; background: var(--paper); color: var(--ink); border: 2px solid var(--wood); border-radius: 8px; }
.lib-card h2 { margin-top: 0; font-size: 1.2rem; border: 0; padding: 0; }
.lib-card .authors { font-style: italic; margin: .2rem 0 .5rem; }
.lib-card a.btn, .lib-card button { text-decoration: none; }
.lib-card summary { cursor: pointer; font-weight: 600; margin-top: .6rem; }
.lib-frame { width: 100%; height: 72vh; min-height: 420px; border: 3px solid var(--wood-d); border-radius: 6px; background: #fff; margin-top: .5rem; }
.lic-open { background: #1d6b3a; color: #fff; }
.lic-unk { background: #8a6a15; color: #fff; }
.lic-closed { background: #555; color: #fff; }
.ver-ok { background: #e7f4ea; color: #14532d; border: 1px solid #1d6b3a; }
.ver-no { background: #fff4d6; color: #5c4400; border: 1px solid #8a6a15; }
#libStatic h3 { margin-bottom: .2rem; }

/* 3D */
.lib-stage { position: relative; border: 3px solid var(--wood-d); border-radius: 10px; overflow: hidden; background: #2a1f16; }
.lib-stage[hidden] { display: none; }
.lib-canvas { display: block; width: 100%; height: min(62vw, 520px); min-height: 300px; touch-action: pan-y; }
.lib-tip { position: absolute; max-width: min(24rem, 80%); padding: .3rem .6rem; background: rgba(32, 22, 12, .92); color: #f5e9c8; border: 1px solid #c9a24d; border-radius: 6px; font-size: .82rem; line-height: 1.35; pointer-events: none; z-index: 2; }
.lib-hint { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; text-align: center; color: rgba(245, 233, 200, .8); text-shadow: 0 1px 2px #000; pointer-events: none; }
.lib-scene.sr-scene { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

@media (max-width: 719px) {
  .lib-canvas { height: min(115vw, 480px); }
  .lib-scene { height: auto; padding: .5rem; }
  .lib-deco, .lib-prof { display: none; }
  .lib-cases { position: static; grid-template-columns: 1fr; }
  .lib-spines { min-height: 100px; }
  .lib-portrait { flex-basis: 48px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .lib *, .lib-prof { transition: none !important; animation: none !important; }
}