/*=============== AME'S LIBRARY (chatroom) ===============*/
/* Site-default background. A full-width library wall, a cat that follows the
 * pointer, and a single dialogue box overlaid on top of the cat. Historical
 * `game-*` class/ID prefixes are kept from the prototype. */
:root {
    --chat-pixel: 'Menlo', 'Monaco', 'Courier New', monospace;
    --chat-accent: hsl(230, 100%, 45%);
}

.chatroom-page .main-content { min-height: unset; padding: 18px 18px 40px; }

.game-main {
    position: relative;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

/* ---- Library scene ---- */
.game-scene {
    position: relative;
    overflow: hidden;
    min-height: 580px;
    border-radius: 14px;
    background: #f4ead6;
}

/* Full-width bookshelves, three stories high — warm beige spines */
.scene-books {
    position: absolute; inset: 0 0 26% 0;
    display: flex; flex-direction: column;
}
.books-row {
    position: relative; flex: 1 1 0;
    border-bottom: 13px solid #ddc39a;
    box-shadow: 0 7px 0 rgba(160, 130, 90, 0.16), inset 0 7px 12px rgba(150, 120, 80, 0.1);
    background: repeating-linear-gradient(90deg,
        #e6d2ae 0 7px, #cfb891 7px 12px, #dcc5a0 12px 22px,
        #c3aa80 22px 27px, #ecdcbd 27px 36px, #d3bc96 36px 41px,
        #bda37a 41px 52px, #ddc8a3 52px 58px);
}
.books-row::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 7px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
}
.books-row:nth-child(2) {
    background: repeating-linear-gradient(90deg,
        #d8c2a0 0 9px, #c4aa80 9px 14px, #e8d6b4 14px 24px,
        #cdb691 24px 30px, #e0caa6 30px 40px, #bfa078 40px 45px, #e4d2b2 45px 56px);
}
.books-row:nth-child(3) {
    background: repeating-linear-gradient(90deg,
        #e2cdab 0 6px, #cbb38c 6px 16px, #dcc7a4 16px 21px,
        #c0a67e 21px 32px, #e9d8b8 32px 38px, #d0b892 38px 48px, #c9b088 48px 53px);
}

.scene-floor {
    position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
    background: repeating-linear-gradient(90deg, #eadabd 0 74px, #e0cdac 74px 78px);
    border-top: 3px solid #d3bd98;
}
.scene-floor::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(160, 130, 90, 0.12), transparent 40%);
}

.scene-rug {
    position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%);
    width: 58%; height: 64px; border-radius: 50%;
    background: radial-gradient(ellipse at center, #d9b48f 0%, #cfa87f 60%, #c39a70 100%);
    box-shadow: inset 0 0 0 6px rgba(160, 122, 82, 0.35);
    opacity: .85;
}

/* Floor props */
.scene-plant { position: absolute; z-index: 3; right: 4%; bottom: 20%; width: 60px; height: 96px; }
.scene-plant .leaf { position: absolute; bottom: 34px; left: 50%; width: 14px; height: 46px; background: #6f9c68; border-radius: 50% 50% 40% 40%; transform-origin: 50% 100%; }
.scene-plant .l1 { transform: translateX(-50%) rotate(-26deg); height: 52px; background: #7fae73; }
.scene-plant .l2 { transform: translateX(-50%) rotate(0deg); height: 60px; }
.scene-plant .l3 { transform: translateX(-50%) rotate(26deg); height: 48px; background: #628a5c; }
.scene-plant .pot { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 42px; height: 34px; background: #b8765a; border-radius: 4px 4px 10px 10px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12); }

.scene-tree { position: absolute; z-index: 3; left: 4%; bottom: 20%; width: 66px; height: 118px; }
.scene-tree::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 12px; height: 92px; margin-left: -6px; background: #a98a5f; border-radius: 3px; }
.scene-tree i { position: absolute; width: 44px; height: 12px; left: 50%; transform: translateX(-50%); background: #c9a878; border-radius: 6px; box-shadow: 0 3px 0 rgba(120, 102, 70, 0.2); }
.scene-tree i:nth-child(1) { bottom: 26px; left: 76%; }
.scene-tree i:nth-child(2) { bottom: 54px; left: 24%; }
.scene-tree i:nth-child(3) { bottom: 84px; left: 50%; width: 54px; }

.scene-yarn { position: absolute; z-index: 3; left: 28%; bottom: 20%; width: 24px; height: 24px; border-radius: 50%; background: repeating-linear-gradient(45deg, #d4699a 0 4px, #e28cb2 4px 8px); box-shadow: 0 3px 0 rgba(120, 102, 70, 0.2); }

/* ---- Ame ---- */
.cat-character {
    position: absolute; z-index: 5;
    width: clamp(240px, 36vw, 340px);
    left: 50%; bottom: 46px;
    transform: translateX(-50%);
    text-align: center;
}
.cat-look { display: block; transition: transform 0.25s ease-out; will-change: transform; }
.game-cat-sprite {
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 16px 12px rgba(90, 78, 55, 0.34));
    animation: cat-idle 3.4s ease-in-out infinite;
    transform-origin: 50% 92%;
}
.cat-character:hover .game-cat-sprite { cursor: pointer; }

.cat-status {
    position: absolute; top: 12px; right: 14px; z-index: 8;
    white-space: nowrap; padding: 4px 8px;
    color: #192014; background: #a9d36c; border: 2px solid #425638;
    font: 700 .55rem var(--chat-pixel); letter-spacing: .08em;
}
.cat-typing-paws { position: absolute; left: 42%; right: 42%; bottom: 6px; display: flex; justify-content: space-between; opacity: 0; }
.cat-typing-paws span { width: 20px; height: 10px; border: 2px solid #563c2d; background: #f2dfc2; }
@keyframes cat-idle {
    0%, 100% { transform: translateY(0) scale(1); }
    38% { transform: translateY(-4px) scale(1.005); }
    62% { transform: translateY(-2px) scale(0.997); }
}
.game-scene.is-reading .game-cat-sprite { animation: cat-read 0.9s ease-in-out infinite; }
@keyframes cat-read { from { transform: translateY(0) rotate(-1.2deg); } to { transform: translateY(3px) rotate(1.2deg); } }
.game-scene.is-typing .game-cat-sprite { animation: cat-type 0.22s ease-in-out infinite alternate; }
.game-scene.is-typing .cat-typing-paws { opacity: 1; }
.game-scene.is-typing .cat-typing-paws span:first-child { animation: paw-type .18s steps(2,end) infinite alternate; }
.game-scene.is-typing .cat-typing-paws span:last-child { animation: paw-type .18s steps(2,end) .09s infinite alternate; }
@keyframes cat-type { from { transform: translateY(0) rotate(-.4deg); } to { transform: translateY(2px) rotate(.4deg); } }
@keyframes paw-type { to { transform: translateY(-4px); } }

/* ---- Dialogue box (right column): the only framed element ---- */
.dialogue-shell {
    position: relative; z-index: 20;
    display: flex; flex-direction: column;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #dcd6c6;
    border-radius: 14px;
    box-shadow: 0 18px 42px -18px rgba(40, 30, 15, 0.42), 0 4px 14px rgba(40, 30, 15, 0.1);
}
/* Little speech tail pointing left at Ame */
.dialogue-shell::before {
    content: ""; position: absolute; left: -12px; top: 46%;
    border: 12px solid transparent; border-right: 0; border-left-color: #ffffff;
    filter: drop-shadow(-1px 0 0 #dcd6c6);
}

.dialogue-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #ececec; }
.dialogue-portrait { overflow: hidden; display: grid; place-items: center; width: 44px; height: 44px; background: #e8ddc4; border: 2px solid #c6b995; border-radius: 8px; }
.dialogue-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.dialogue-name { color: var(--chat-accent); font: 800 .78rem var(--chat-pixel); letter-spacing: .12em; }
.dialogue-name span { font-size: .5rem; }
.dialogue-subtitle { margin-top: 4px; color: #6b7280; font: .57rem var(--chat-pixel); letter-spacing: .08em; }
.dialogue-count { margin-left: auto; color: #9ca3af; font: .6rem var(--chat-pixel); }

.dialogue-log {
    flex: 1 1 auto;
    min-height: 220px;
    overflow-y: auto;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 28px 6px 8px;
    color: #2f3138; font: .88rem/1.75 var(--chat-pixel);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 50px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 50px);
    scrollbar-width: thin;
}
.dialogue-log::-webkit-scrollbar { width: 6px; }
.dialogue-log::-webkit-scrollbar-thumb { background: #d4d0c4; border-radius: 3px; }
.dialogue-line { display: flex; gap: 9px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dialogue-line + .dialogue-line { margin-top: 9px; }
.dialogue-caret { flex: 0 0 auto; color: var(--chat-accent); }
.dialogue-line.is-player { color: hsl(230, 100%, 38%); }
.dialogue-line.is-system { color: #b45309; font-size: .72rem; }
.dialogue-caret.is-blinking { animation: caret-pulse .8s steps(2,end) infinite; }
@keyframes caret-pulse { 50% { opacity: .2; } }

/* Ame's cat icon marks the line she's speaking and bobs while she talks. */
.dialogue-cat-icon {
    position: relative; display: block; width: 26px; height: 26px;
    border-radius: 50%; overflow: hidden; background: #ece3cf;
    border: 1px solid #cbbf9f; flex: 0 0 auto;
}
.dialogue-cat-icon img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.dialogue-cat-icon.is-speaking { animation: cat-talk-icon .5s steps(2, end) infinite alternate; border-color: var(--chat-accent); }
@keyframes cat-talk-icon { from { transform: translateY(0); } to { transform: translateY(-2px); } }

/* Header portrait glows while Ame is speaking. */
.dialogue-portrait { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.dialogue-portrait.is-speaking {
    border-color: var(--chat-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.quick-questions { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 0 12px 20px; }
.quick-questions button {
    padding: 7px 10px; color: #444; background: #f4f6fb; border: 1px solid #dfe3ee;
    font: .58rem var(--chat-pixel); cursor: pointer;
}
.quick-questions button:hover { color: #fff; background: var(--chat-accent); border-color: var(--chat-accent); }

.game-input-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 4px 2px;
    background: transparent; border: none; border-top: 1px solid #e7e2d6;
}
.game-prompt { color: var(--chat-accent); font: 700 .64rem var(--chat-pixel); letter-spacing: .1em; }
.game-input-row input {
    min-width: 0; flex: 1; padding: 11px 3px;
    color: #1a1b22; background: transparent; border: none; border-bottom: 1px solid #d8d3c6;
    font: .84rem var(--chat-pixel);
}
.game-input-row input:focus { outline: none; border-bottom-color: var(--chat-accent); }
.game-input-row input::placeholder { color: #9ca3af; }
.game-input-row button {
    padding: 10px 15px; color: #fff; background: var(--chat-accent);
    border: none; border-radius: 6px;
    font: 700 .66rem var(--chat-pixel); cursor: pointer;
    box-shadow: 0 2px 0 rgba(17, 24, 39, 0.25);
}
.game-input-row button:active { transform: translateY(2px); box-shadow: none; }
.game-input-row button span { font-size: .9rem; margin-right: 4px; }
.game-disclosure { margin: 10px 0 0; color: #9ca3af; text-align: center; font: .59rem var(--chat-pixel); }
.game-footnote { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; color: #9ca3af; font: .62rem var(--chat-pixel); }
.game-footnote a { color: var(--chat-accent); }
.game-agent-engine { display: none !important; }

@media (max-width: 860px) {
    .game-main { grid-template-columns: 1fr; gap: 16px; }
    .chatroom-page .main-content { padding: 12px 10px 30px; }
    .game-scene { min-height: 460px; }
    .scene-books { inset: 0 0 24% 0; }
    .cat-character { width: 210px; bottom: 60px; }
    .scene-plant { display: none; }
    .scene-tree { left: 2%; transform: scale(.82); transform-origin: bottom left; }
    .dialogue-shell { padding: 12px; }
    .dialogue-shell::before { display: none; }
    .dialogue-log { min-height: 170px; font-size: .78rem; }
    .quick-questions { padding-left: 0; }
    .quick-questions button { font-size: .5rem; }
    .game-prompt { display: none; }
    .game-input-row { gap: 6px; padding: 10px 4px 0; }
    .game-input-row button { padding: 9px 11px; }
    .game-input-row input { font-size: 16px; } /* avoid iOS focus zoom */
}

@media (prefers-reduced-motion: reduce) {
    .game-cat-sprite, .dialogue-caret.is-blinking { animation: none !important; }
    .cat-look { transition: none !important; }
}