/* Project-specific illustration assets and foreground window behavior. */
:root { --bg: #be808a; --bg-deep: #9c626e; --pink: #d59aa2; --dock: #c88a95; }
* { scrollbar-width: thin; scrollbar-color: #9b6673 #f5dfc7; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: #f5dfc7; border: 1px solid #5a3943; }
*::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #c17b89, #9b6673); border: 2px solid #f5dfc7; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #7f4f5e; }
*::-webkit-scrollbar-corner { background: #f5dfc7; }
.window-area { z-index: 10; }
.dock { z-index: 30; }
.andrea-zone { z-index: 15; }
.bramble { z-index: 20; width: 520px; right: 0; pointer-events: none; }
.bramble .bramble-art { width: 280px; left: auto; right: 0; pointer-events: auto; }
.bramble .speech--bramble { left: 26px; right: auto !important; top: 18px; }
.bramble .speech--bramble { pointer-events: none; }
.site-stamp { position: absolute; z-index: 24; top: 23px; left: 29px; color: #452e37; font: 700 20px/1 "Courier New", monospace; letter-spacing: .08em; text-transform: lowercase; text-shadow: 1px 1px 0 rgba(255,233,208,.56); }
.site-stamp span { display: inline-block; margin-left: 3px; animation: terminal-blink 1.05s step-end infinite; }
@keyframes terminal-blink { 50% { opacity: 0; } }

.andrea { width: 430px; height: 430px; }
.andrea-art {
  background-image: url('assets/andrea-new-listening.png');
  background-position: left bottom;
  background-size: contain;
  background-repeat: no-repeat;
}

/* The artwork is tall and narrow. Keep its rendered scale, but do not leave a
   wide invisible button rectangle reaching into the reading window. */
.andrea { width: 326px; height: 430px; }
.andrea-art { background-size: auto 430px; }

/* Andrea's scene wrapper is intentionally roomy so her dialogue can sit beside
   her.  It must not become an invisible wall over a reader or gallery. */
.andrea-zone { pointer-events: none; }
.andrea-zone .andrea { pointer-events: auto; }

/* On desktop, Andrea's words sit lower, clear of the reader's lower controls. */
.andrea-zone .dialogue { bottom: -18px; pointer-events: none; }

/* A transparent PNG still has a rectangular button box.  Shape Andrea's
   hit area around her painted silhouette so the empty corners click through. */
.andrea {
  clip-path: polygon(42% 0, 61% 4%, 76% 13%, 88% 28%, 94% 45%, 88% 55%, 99% 71%, 91% 88%, 95% 100%, 12% 100%, 3% 89%, 9% 72%, 4% 61%, 10% 46%, 11% 30%, 19% 12%, 30% 4%);
}

.bramble-art {
  background-image: url('assets/bramble-original-trimmed.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.andrea-art[data-expression="amused"] {
  background-image: url('assets/andrea-new-amused.png');
}

.andrea-art[data-expression="curious"] {
  background-image: url('assets/andrea-new-surprised.png');
}

.andrea-art[data-expression="joyful"] {
  background-image: url('assets/andrea-new-amused.png');
}

.andrea-art[data-expression="thoughtful"] { background-image: url('assets/andrea-new-listening.png'); filter: sepia(.12) brightness(.93); }
.andrea-art[data-expression="gentle"] { background-image: url('assets/andrea-new-amused.png'); filter: brightness(1.04) saturate(.85); }
.andrea-art[data-expression="brave"] { background-image: url('assets/andrea-new-surprised.png'); filter: contrast(1.06) saturate(1.08); }
.andrea-art[data-expression="rune-hover"] { background-image: url('assets/andrea-rune-hover.png'); background-size: auto 430px; }
.andrea-art[data-expression="rune-click"] { background-image: url('assets/andrea-rune-click.png'); background-size: auto 430px; }
.andrea-art[data-expression="citadel-excited"] { background-image: url('assets/andrea-citadel-excited.png'); background-size: auto 430px; }
.andrea-art[data-expression="lament-spooked"] { background-image: url('assets/andrea-lament-spooked.png'); background-size: auto 430px; }
.andrea-art[data-expression="fairy-quest"] { background-image: url('assets/andrea-fairy-quests.png'); background-size: auto 430px; }
.andrea-art[data-expression="daily-candle"] { background-image: url('assets/andrea-daily-candle.png'); background-size: auto 430px; }

.bramble-art[data-expression="excited"] {
  background-image: url('assets/bramble-excited-trimmed.png');
}

.bramble-art[data-expression="sleepy"] {
  background-image: url('assets/bramble-sleepy-trimmed.png');
}

.bramble-art[data-expression="dramatic"] {
  background-image: url('assets/bramble-dramatic-trimmed.png');
}

.bramble-art[data-expression="curious"] { background-image: url('assets/bramble-excited-trimmed.png'); transform: rotate(-3deg) translateY(-2px); }
.bramble-art[data-expression="proud"] { background-image: url('assets/bramble-original-trimmed.png'); filter: brightness(1.08) contrast(1.08); transform: translateY(-3px); }
.bramble-art[data-expression="fairy-quest"] { background-image: url('assets/bramble-fairy-quests.png'); background-size: contain; background-position: center bottom; transform: rotate(-2deg) translateY(-3px); }
.bramble-art[data-expression="candle-shelf"] { background-image: url('assets/bramble-candle-shelf.png'); background-size: contain; background-position: center bottom; transform: translateY(-2px); }

.expression-window { width: min(740px, 70vw); min-width: 0; }
.expression-window .window__content { min-height: 0; }
.expression-window__intro { margin-bottom: 15px !important; font-size: 18px !important; }
.expression-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.expression-choice { background: #f7e4cd; border: 1px solid #ba9175; color: var(--wine); padding: 8px 5px; cursor: pointer; font: 15px Georgia, serif; }
.expression-choice:hover, .expression-choice:focus { background: var(--pink); color: var(--paper); transform: translateY(-3px); }
.expression-choice img { display: block; width: 100%; height: 112px; object-fit: contain; object-position: center bottom; margin-bottom: 5px; }
.expression-window--bramble .expression-choice img { height: 120px; }

.window__focus { margin-left: 11px; border: 2px solid var(--line); background: #f4dcbd; color: var(--wine); height: 25px; padding: 0 8px; font: 700 11px "Courier New", monospace; cursor: pointer; }
.window__focus:hover { background: #d78391; color: #fff7e8; }
.window__realm-name { display: none; }
.window__cursor { display: none; }
.window__breadcrumb { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.window__breadcrumb-date { margin-left: 6px; }
.window__breadcrumb:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-modal { width: min(68vw, 840px); min-width: 560px; height: min(70svh, 640px); }
.page-modal .window__content { height: calc(100% - 38px); min-height: 0; padding: 0; background: var(--paper); }
.page-modal__frame { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); touch-action: pan-y; }
.window__resize { position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; cursor: nwse-resize; z-index: 5; background: repeating-linear-gradient(135deg, transparent 0 4px, #9a6571 4px 6px); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.portal { width: 220px; height: 285px; overflow: visible; }
.portal__image { position: absolute; inset: 0; background: url('assets/treehouse-portal-transparent.png') center / contain no-repeat; filter: drop-shadow(0 0 18px rgba(255,213,160,.72)) drop-shadow(3px 5px 4px rgba(48,25,34,.26)); transition: transform .25s, filter .25s; z-index: 2; }
.dock-item--portal { display: none; }
.portal:hover .portal__image { transform: translateY(-5px) scale(1.03); }
.portal__tree { display: none; }
.portal__glow { z-index: 1; left: 82px; top: 75px; }
.portal__label { z-index: 3; }
.portal:before { content: ""; position: absolute; inset: 17% 18% 13%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,243,193,.75), rgba(245,162,154,.23) 47%, transparent 72%); filter: blur(13px); animation: portal-breathe 3.8s ease-in-out infinite; }
.portal:hover:before { animation-duration: 1.7s; }
.portal:hover .portal__image { filter: drop-shadow(0 0 25px rgba(255,230,179,.92)) drop-shadow(3px 5px 4px rgba(48,25,34,.25)); }
@keyframes portal-breathe { 50% { transform: scale(1.1); opacity: .68; } }
.rotate-hint { display: none; }
.mobile-menu-toggle, .mobile-menu { display: none; }
.focus-mode { background: #191827; }
.focus-mode:after { opacity: .2; }
.focus-mode .character, .focus-mode .andrea-zone, .focus-mode .portal { opacity: 0; pointer-events: none; transition: opacity .25s; }
.focus-mode .dock { transform: translateY(105%); opacity: 0; pointer-events: none; transition: .25s; }
.focus-mode .window-area { z-index: 40; }
.focus-mode .page-modal { width: min(92vw, 1120px); height: min(91svh, 900px); }
@media (max-width: 560px) {
  .page-modal { width: calc(100vw - 20px); min-width: 0; height: calc(100svh - 92px); border-width: 2px; }
  .page-modal .window__bar { height: 42px; padding-left: 10px; font-size: 12px; }
  .page-modal .window__content { height: calc(100% - 42px); }
  .window__bar-note { display: none; }
  .window__focus { margin-left: auto; height: 27px; }
  .window__close { margin-left: 7px; width: 27px; height: 27px; }
  .window__resize { width: 25px; height: 25px; }
  .site-stamp { top: 16px; left: 17px; font-size: 15px; }
  .bramble { width: 280px; right: -42px; z-index: 20; }
  .bramble .speech--bramble { display: none; }
  .focus-mode .page-modal { width: calc(100vw - 12px); height: calc(100svh - 12px); }
}

@media (max-width: 560px) and (orientation: portrait) {
  html, body { width: 100%; height: 100%; overflow: hidden; }
  .realm { position: fixed; inset: 0; width: 100vw; height: 100dvh; min-height: 0 !important; }
  .rotate-hint { display: flex; position: absolute; top: 47px; left: 13px; right: 13px; z-index: 45; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border: 2px solid #4a3038; background: #fff1dc; box-shadow: 3px 3px 0 #4a3038; color: #593545; font: 700 11px/1.1 "Courier New", monospace; }
  .rotate-hint span { font-size: 22px; color: #9f6375; }
  .rotate-hint button { border: 0; border-bottom: 1px solid #593545; background: transparent; color: #593545; padding: 2px 0; font: inherit; cursor: pointer; }
  .rotate-hint.is-dismissed { display: none; }
  /* The reading window deliberately lives below the upright hint, then takes
     that space as soon as the visitor chooses to continue. */
  #windowArea .page-modal { top: 104px !important; height: calc(100dvh - 120px); }
  #rotateHint.is-dismissed ~ #windowArea .page-modal { top: 47px !important; height: calc(100dvh - 63px); }
  .andrea-zone, .bramble, .portal { display: none; }
  .site-stamp { z-index: 46; }
  .dock { display: none; }
  .mobile-menu-toggle { display: block; position: fixed; top: max(12px, env(safe-area-inset-top)); right: 13px; z-index: 55; border: 2px solid #4a3038; background: #fff1dc; color: #593545; box-shadow: 2px 2px 0 #4a3038; padding: 7px 9px; font: 700 11px "Courier New", monospace; cursor: pointer; }
  .mobile-menu { position: fixed; z-index: 54; top: calc(max(12px, env(safe-area-inset-top)) + 36px); right: 13px; width: 176px; max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; gap: 5px; padding: 8px; border: 2px solid #4a3038; background: #fff1dc; box-shadow: 3px 3px 0 #4a3038; }
  .mobile-menu.is-open { display: flex; }
  .mobile-menu button { border: 1px solid #b58388; background: #f8dfc4; color: #593545; padding: 9px 8px; text-align: left; font: 700 11px "Courier New", monospace; cursor: pointer; }
  .realm.night .mobile-menu, .realm.night .mobile-menu-toggle { background: #d7c8d6; color: #31243d; }
}

@media (max-width: 900px) and (orientation: landscape) {
  /* Follow the live landscape viewport so browser chrome cannot pull the scene upward. */
  .realm { min-height: 0 !important; height: 100dvh; }
  .site-stamp { display: none; }
  .bramble { transform: none; width: min(19vw, 160px); height: 215px; right: -3px; top: 3px; }
  .bramble .bramble-art { width: min(19vw, 160px); pointer-events: auto; }
  .bramble .speech--bramble { display: block; left: auto; right: 0 !important; top: 137px; width: min(17vw, 148px); padding: 7px 9px; font-size: 9px; line-height: 1.3; }
  .bramble .speech--bramble:after { right: 32px; top: -17px; width: 20px; height: 20px; clip-path: polygon(0 100%, 100% 100%, 100% 0); border-right: 0; border-top: 3px solid var(--line); }
  .andrea-zone { transform: scale(.4); transform-origin: bottom left; left: 0; bottom: 8px; }
  /* Andrea's card stays readable even though her illustration is scaled down. */
  .andrea-zone .dialogue { left: 22px; bottom: 0; width: 270px; min-height: 88px; padding: 18px 15px 9px; font-size: 13px; z-index: 6; transform: scale(1.2); transform-origin: bottom left; }
  .andrea-zone .dialogue { pointer-events: none; }
  .andrea-zone .dialogue p { white-space: normal; overflow: visible; text-overflow: clip; }
  .andrea-zone .dialogue p br, .andrea-zone .dialogue__caret { display: initial; }
  .portal, .dock { display: none; }
  .dock-item { height: 70px; min-width: 58px; font-size: 0; flex: 0 1 74px; position: relative; }
  .dock-item > span:last-child { display: none; }
  .dock-item--dark, .dock-item--portal { display: block !important; }
  .dock-icon { height: 42px; line-height: 42px; font-size: 25px; }
  .dock-item::after { display: block; font: 700 8px/1.05 "Courier New", monospace; color: var(--ink); white-space: nowrap; }
  .dock-item[data-window="daily"]::after { content: "Candle"; }
  .dock-item[data-window="shelf"]::after { content: "Shelf"; }
  .dock-item[data-window="lament"]::after { content: "Lament"; }
  .dock-item[data-window="stones"]::after { content: "Stones"; }
  .dock-item[data-window="quests"]::after { content: "Quests"; }
  .dock-item[data-window="citadel"]::after { content: "Citadel"; }
  .dock-item--dark::after { content: "Night"; }
  .dock-item--portal::after { content: "Portal"; }
  /* Three lanes: Andrea, the reader, then Bramble. */
  .page-modal { width: 56vw; min-width: 0; height: 100dvh; left: 22vw !important; top: 0 !important; }
  .focus-mode .page-modal { width: calc(100vw - 12px); height: calc(100dvh - 12px); left: 6px !important; top: 6px !important; }
  .focus-mode .page-modal.gallery-focus { inset: 0 !important; width: 100vw; height: 100dvh; border: 0; box-shadow: none; }
  .page-modal.gallery-focus .window__bar { display: none; }
  .page-modal.gallery-focus .window__content { height: 100%; }
  .page-modal .window__bar { min-height: 36px; font-size: 12px; }
  .page-modal .window__realm-name { display: inline-block; color: #5d3c46; font: 700 10px/1 "Courier New", monospace; letter-spacing: .05em; }
  .page-modal .window__title { margin-left: 4px; }
  .page-modal .window__breadcrumb { pointer-events: auto; }
  .page-modal .window__cursor { display: inline-block; color: #5d3c46; font: 700 12px/1 "Courier New", monospace; animation: terminal-blink 1.05s step-end infinite; }
  .page-modal .window__content { height: calc(100% - 36px); }
  .page-modal .window__bar { cursor: default; pointer-events: none; }
  .page-modal .window__bar-note, .page-modal .window__close, .page-modal .window__resize { display: none; }
  .page-modal .window__focus { order: initial; margin: 0 6px 0 auto; pointer-events: auto; }
  .mobile-menu-toggle { display: block; position: fixed; top: 5px; left: 50%; right: auto; transform: translateX(-50%); z-index: 55; border: 2px solid #4a3038; background: #fff1dc; color: #593545; box-shadow: 2px 2px 0 #4a3038; padding: 5px 8px; font: 700 10px "Courier New",monospace; cursor: pointer; }
  .page-modal .mobile-menu-toggle { position: static; transform: none; flex: 0 0 auto; margin: 0; z-index: auto; pointer-events: auto; }
  .mobile-menu { position: fixed; z-index: 54; top: 32px; left: 50%; right: auto; transform: translateX(-50%); width: 176px; max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; gap: 4px; padding: 7px; border: 2px solid #4a3038; background: #fff1dc; box-shadow: 3px 3px 0 #4a3038; }
  .mobile-menu.is-open { display: flex; }
  .mobile-menu button { border: 1px solid #b58388; background: #f8dfc4; color: #593545; padding: 7px; text-align: left; font: 700 10px "Courier New",monospace; cursor: pointer; }
}
@media (max-width: 560px) { .expression-window { width: calc(100vw - 28px); } .expression-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 560px) {
  .andrea { width: 430px; height: 430px; }
}