/* ==========================================================================
   S2D WEB PLAYER : the Obsidian window around the engine, rebuilt for a browser.
   The real look comes from the engine's own styles.css. This file only:
   1. makes a full screen, scrolling "note" for the engine to draw in
   2. hides the Journal-only buttons (Home, Locations, Diary, Add-ons, change photo)
   3. styles the toasts (Obsidian's Notice)
   ========================================================================== */
html, body { margin: 0; padding: 0; height: 100%; background: #0a0705; color: #f7f1e6; }
body { overflow: hidden; -webkit-text-size-adjust: 100%; font-family: "Montserrat", "Segoe UI", sans-serif; }

/* 1. the note */
.s2dw-page { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #0a0705; }
.s2dw-page.s2d-photo { background-attachment: fixed, fixed, fixed, fixed, fixed, fixed !important; }
.s2dw-page .markdown-preview-sizer { max-width: 1100px; margin: 0 auto; padding: 18px 22px 64px; box-sizing: border-box; min-height: 100%; }
.s2dw-mount { min-height: 60vh; }
.s2dw-mount img { max-width: 100%; }
@media (max-width: 600px) {
  .s2dw-page .markdown-preview-sizer { padding: 10px 16px calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* 2. Journal-only bits */
.s2d-topnav a.s2d-nav[aria-label="Home"],
.s2d-topnav a.s2d-nav[aria-label="Locations"],
.s2d-topnav a.s2d-nav[aria-label="Diary"],
.s2d-topnav a.s2d-nav[aria-label="Add-ons"],
.s2d-bgrow, .s2d-wbbar { display: none !important; }
.s2d-topnav { flex-wrap: wrap; }

/* the little line under every page */
.s2dw-note { max-width: 1100px; margin: 26px auto 0; padding: 0 22px; text-align: center; font-size: 12px; color: rgba(247, 241, 230, .55); }
@media (max-width: 600px) { .s2dw-note { padding: 0 16px; } }

/* loading */
.s2dw-boot { position: fixed; inset: 0; display: grid; place-items: center; background: #0a0705; z-index: 50; transition: opacity .35s; }
.s2dw-boot.out { opacity: 0; pointer-events: none; }
.s2dw-boot b { font-family: "mason-serif", "Mason Serif", "Cinzel", Georgia, serif; color: #e2c25a; font-size: 22px; letter-spacing: .04em; display: block; text-align: center; }
.s2dw-boot i { display: block; width: 46px; height: 46px; margin: 0 auto 14px; border: 2px solid rgba(212, 160, 48, .25); border-top-color: #d4a030; border-radius: 50%; animation: s2dw-spin 1s linear infinite; }
@keyframes s2dw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .s2dw-boot i { animation: none; } }

.s2dw-fail { margin: 12vh auto; max-width: 440px; padding: 22px; border: 1px solid rgba(212, 160, 48, .3); border-radius: 16px; background: rgba(21, 11, 8, .78); text-align: center; }
.s2dw-fail b { font-family: "mason-serif", "Cinzel", Georgia, serif; color: #e2c25a; font-size: 20px; }
.s2dw-btn { display: inline-block; margin-top: 8px; padding: 9px 18px; border-radius: 999px; background: #c0281c; color: #fff; text-decoration: none; font-weight: 700; }

/* 3. toasts */
.s2dw-toasts { position: fixed; z-index: 9999; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.s2dw-toast { pointer-events: auto; cursor: pointer; padding: 11px 15px; border-radius: 14px; font-size: 14px; line-height: 1.4; color: #f7f1e6;
  background: rgba(21, 11, 8, .86); border: 1px solid rgba(212, 160, 48, .35); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: s2dw-in .25s ease-out; transition: opacity .35s, transform .35s; }
.s2dw-toast.out { opacity: 0; transform: translateY(6px); }
@keyframes s2dw-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 600px) { .s2dw-toasts { left: 16px; right: 16px; max-width: none; align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { .s2dw-toast { animation: none; transition: none; } }

/* 4. demos (inc/demos.php): the ribbon, and room for it */
.s2dw-demobar { position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px 9px 16px; max-width: 760px; margin: 0 auto; border-radius: 16px 16px 8px 8px;
  background: rgba(10, 8, 6, .82); border: 1px solid rgba(201, 162, 39, .45); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #f7f1e6; font-size: 13px; line-height: 1.35; }
.s2dw-demobar span { min-width: 0; }
.s2dw-demobar .s2dw-btn { margin: 0; flex: none; padding: 8px 14px; font-size: 13px; white-space: nowrap; }
body.s2dw-demo .s2dw-page .markdown-preview-sizer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
body.s2dw-demo .s2dw-page { overscroll-behavior: auto; } /* at the end of the demo, the swipe carries on to the website around it */
body.s2dw-demo .s2dw-toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 480px) { .s2dw-demobar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; font-size: 12.5px; } .s2dw-demobar .s2dw-btn { text-align: center; } body.s2dw-demo .s2dw-page .markdown-preview-sizer { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); } body.s2dw-demo .s2dw-toasts { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); } }

/* "Tap for sound": only appears when the browser blocked a voice line */
.s2dw-sound{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;height:40px;padding:0 18px;border-radius:16px 16px 7px 7px;border:1px solid rgba(232,207,122,.6);background:rgba(18,16,24,.92);color:#f3eee4;font:700 12px Montserrat,system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.s2dw-sound:hover{border-color:#e8cf7a}