* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", sans-serif; background: #e9dcc3; color: #3a2410; }
button { font: inherit; cursor: pointer; }
/* top bar (matches the app) */
.topbar { background: linear-gradient(#6b4a2b, #54381f); padding: 8px 10px 0; position: sticky; top: 0; z-index: 5; }
.tb-row { display: flex; align-items: center; gap: 8px; }
.tile { border: 2px solid #2e1d0e; background: #f3e5c8; border-radius: 12px; padding: 4px 10px; font-weight: 800; display: grid; justify-items: center; line-height: 1.05; }
.tile.on { outline: 3px solid #ffd34d; }
.streak { background: #f3e5c8; border: 2px solid #2e1d0e; border-radius: 999px; padding: 4px 12px; font-weight: 800; }
.tb-sp { flex: 1; }
.round { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #2e1d0e; background: #8a6844; color: #fff; }
.tb-tabs { display: flex; gap: 6px; margin-top: 8px; }
.tab { flex: 1; border: 2px solid #2e1d0e; border-bottom: none; border-radius: 12px 12px 0 0; background: #a37c50; color: #ffe9bb; font-weight: 900; padding: 9px 4px; }
.tab.on { background: #f6e7c6; color: #6b3d12; }
.profile-strip { display: flex; gap: 12px; align-items: center; background: #f6e7c6; margin: 10px; border: 2px solid #b08c5a; border-radius: 14px; padding: 8px 12px; }
.avatar { font-size: 30px; background: #20301c; border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; }
.who { display: grid; gap: 2px; } .pips { color: #8fa3ad; letter-spacing: 3px; }
.bar { width: 150px; height: 9px; background: #d9c69c; border-radius: 99px; overflow: hidden; } .bar i { display: block; width: 62%; height: 100%; background: linear-gradient(90deg, #ffb300, #ffd34d); }
.board-mini { margin-left: auto; background: linear-gradient(#caa06a, #a97e46); border: 2px solid #6b4a2b; border-radius: 10px; padding: 6px 10px; display: flex; gap: 10px; align-items: center; font-weight: 800; color: #fff; flex-wrap: wrap; }
.board-mini .you { background: #f6e7c6; color: #6b3d12; border-radius: 999px; padding: 1px 8px; }
.board-mini small { width: 100%; }
/* the book */
.book-wrap { padding: 6px 10px 14px; }
.book { position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: 3 / 2.1; border-radius: 18px; background: #7a5a34; padding: 14px; box-shadow: 0 18px 40px rgba(40, 22, 4, .45); perspective: 1600px; }
.page { position: absolute; top: 14px; bottom: 14px; width: calc(50% - 14px); overflow: hidden; background: #fdf6df; }
.page-left { left: 14px; border-radius: 12px 4px 4px 12px; }
.page-right { right: 14px; border-radius: 4px 12px 12px 4px; }
.page img { width: 200%; height: 100%; object-fit: cover; display: block; }
.page-right img { margin-left: -100%; }
.page-shade { position: absolute; inset: 0; pointer-events: none; }
.page-left .page-shade { background: linear-gradient(90deg, rgba(90, 60, 20, .18), transparent 22%, transparent 82%, rgba(60, 38, 10, .35)); }
.page-right .page-shade { background: linear-gradient(90deg, rgba(60, 38, 10, .35), transparent 18%, transparent 78%, rgba(90, 60, 20, .18)); }
.page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.20) 50%, transparent 62%) 0 0 / 300% 100%; animation: pagesheen 5s linear infinite; pointer-events: none; }
.site-video { position: absolute; top: 14px; bottom: 14px; left: 14px; right: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: cover; object-position: 50% 50%; border-radius: 10px; z-index: 3; background: #fdf6df; }
.spine { position: absolute; top: 10px; bottom: 10px; left: 50%; width: 26px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(50, 30, 5, .55), transparent 70%); pointer-events: none; }
@keyframes pagesheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* turning leaf — real book flip around the centre spine: the right page lifts, rotates
   in 3D over the spine, and lands flat as the left page of the next spread (and vice-versa
   backwards). The next spread is already laid underneath. The leaf is removed the instant
   it settles, so the end state is one clean flat page — never an angled leftover. */
.site-video-slot{position:absolute;top:14px;bottom:14px;left:14px;right:14px;z-index:3}
.site-video-slot .site-video{position:absolute;inset:0;width:100%;height:100%}
.leaf{position:absolute;top:14px;bottom:14px;width:calc(50% - 14px);z-index:6;pointer-events:none;transform-style:preserve-3d;will-change:transform}
.leaf.fwd{right:14px;transform-origin:left center}
.leaf.bwd{left:14px;transform-origin:right center}
.leaf-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fdf6df}
.leaf.fwd .leaf-front{border-radius:4px 10px 10px 4px}.leaf.fwd .leaf-back{border-radius:10px 4px 4px 10px}
.leaf.bwd .leaf-front{border-radius:10px 4px 4px 10px}.leaf.bwd .leaf-back{border-radius:4px 10px 10px 4px}
.leaf-media{position:absolute;top:0;height:100%;width:200%;object-fit:cover;display:block}
.leaf-media.half-left{left:0}
.leaf-media.half-right{left:-100%}
.leaf-back{transform:rotateY(180deg)}
.leaf-face::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(60,38,10,.20),transparent 35%,transparent 80%,rgba(60,38,10,.12));pointer-events:none}
.book.turning .gem-hotspot{pointer-events:none}
/* --- Jorge's dig-site badge: gold shield, star on top, DIG SITE, dark pill N/20.
   Sits BELOW the book (outside the turning page) so the leaf can never clip it. --- */
.badge-row{display:flex;justify-content:center;margin:10px 0 2px}
.site-badge{position:relative;width:132px;text-align:center;filter:drop-shadow(0 4px 6px rgba(60,35,5,.35));padding-top:16px}
.badge-star{position:absolute;top:0;left:50%;transform:translateX(-50%);width:34px;height:34px;background:linear-gradient(#ffe680,#f5b921);clip-path:polygon(50% 0,63% 37%,100% 37%,69% 59%,82% 100%,50% 76%,18% 100%,31% 59%,0 37%,37% 37%);z-index:2}
.badge-shield{background:linear-gradient(#ffd94d,#eda812 70%,#d9930a);border:2px solid #8a5a08;border-radius:14px 14px 46px 46px / 14px 14px 34px 34px;padding:20px 6px 16px}
.badge-text{display:block;font-weight:900;letter-spacing:1.5px;color:#5b3607;font-size:.95rem}
.badge-pill{display:inline-block;margin-top:5px;background:#2e1d0e;color:#ffd94d;font-weight:900;border-radius:999px;padding:3px 14px;font-size:.95rem;letter-spacing:1px}
.turn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 7; width: 52px; height: 64px; border-radius: 14px; border: 2px solid #6b4a2b; background: rgba(246, 231, 198, .92); font-size: 34px; font-weight: 900; color: #6b3d12; }
.turn.prev { left: 22px; } .turn.next { right: 22px; }
.hint-line { text-align: center; color: #6b4a2b; font-weight: 600; }
/* bottom bar */
.bottombar { display: flex; gap: 8px; background: linear-gradient(#6b4a2b, #54381f); padding: 10px; align-items: stretch; }
.bb { flex: 1; border: 2px solid #2e1d0e; border-radius: 12px; background: #7c5a36; color: #ffe9bb; font-weight: 900; padding: 10px 6px; }
.bb.gold { background: linear-gradient(#ffd34d, #e9a514); color: #5b3607; flex: 1.15; }
.gemstrip { text-align: center; padding: 8px; background: linear-gradient(90deg, #f7d774, #ffe9a8, #f7d774); font-weight: 700; color: #7a4d12; letter-spacing: 2px; }
.toast { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%) translateY(20px); background: #33200d; color: #ffe9bb; padding: 10px 18px; border-radius: 999px; opacity: 0; transition: .25s; z-index: 20; font-weight: 700; max-width: 92vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%); }
.offcard { max-width: 480px; margin: 12vh auto; background: #fff8e8; border: 2px solid #b08c5a; border-radius: 16px; padding: 24px; text-align: center; }
.offcard button { background: #e9a514; border: 2px solid #6b4a2b; border-radius: 10px; padding: 10px 18px; font-weight: 900; }
/* --- sample-map-site additions --- */
.sample-banner{background:#33200d;color:#ffe9bb;text-align:center;font-weight:800;padding:8px 10px;font-size:.9rem;letter-spacing:.2px}
.panel-backdrop{position:fixed;inset:0;background:rgba(35,20,5,.62);display:grid;place-items:center;z-index:30;padding:18px}
.panel-backdrop[hidden]{display:none}
.panel{background:#fff8e8;border:3px solid #b08c5a;border-radius:18px;max-width:420px;width:100%;text-align:center;padding:26px 22px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.panel-kicker{font-weight:900;letter-spacing:2px;color:#a33c14;margin:8px 0 4px;font-size:.8rem}
.panel h2{margin:0 0 8px}
.panel-close{background:linear-gradient(#ffd34d,#e9a514);color:#5b3607;border:2px solid #6b4a2b;border-radius:12px;padding:11px 18px;font-weight:900;margin-top:10px}


/* --- fix: no drawn gem over Jorge's art/video; only an invisible hotspot over the gem in the scene --- */
.gem-hotspot{position:absolute;left:50%;top:62%;width:38%;height:42%;transform:translate(-50%,-50%);background:transparent;border:0;padding:0;margin:0;cursor:pointer;z-index:8;-webkit-tap-highlight-color:transparent;outline:none;appearance:none}
.page::after{animation:none!important;background:none!important}
.verse-bar{display:flex;gap:10px;align-items:center;justify-content:center;margin:2px 10px 10px;flex-wrap:wrap}
.verse-btn{background:linear-gradient(#ffd34d,#e9a514);color:#5b3607;border:2px solid #6b4a2b;border-radius:999px;padding:9px 16px;font-weight:900}
.verse-ref{font-weight:900;color:#6b3d12;letter-spacing:.4px}
#lessonView{min-height:70vh;display:grid;place-items:center;padding:22px 14px}
#lessonView[hidden]{display:none}
.lesson-card{background:#fff8e8;border:3px solid #b08c5a;border-radius:18px;max-width:520px;width:100%;text-align:center;padding:28px 22px;box-shadow:0 20px 50px rgba(60,35,5,.25)}
.lesson-sub{font-size:1.2rem;font-weight:800;color:#6b3d12;margin:4px 0 12px}
.lesson-body{text-align:left;background:#f6e7c6;border:2px solid #d9c69c;border-radius:12px;padding:14px 16px;line-height:1.5}
.lesson-back{display:block;margin:14px auto 0;background:#7c5a36;color:#ffe9bb;border:2px solid #2e1d0e;border-radius:12px;padding:11px 18px;font-weight:900}
.lesson-note{font-weight:700;color:#a33c14}