@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:wght@400;500;600&display=swap');

/* Windows XP Luna - QQ 2008 Style CSS */
:root {
    --xp-blue-dark: #245edb;
    --xp-blue-light: #4c8ff5;
    --xp-blue-bright: #316ac5;
    --xp-start-green: #3c913c;
    --xp-taskbar-bg: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #245edb 92%, #1941a5 100%);
    --win-blue-mid: #7ab8ed;
    --win-blue-dark: #2b7fd8;
    --qq-header-grad: linear-gradient(to bottom, #d4e9f9 0%, #a8d1f2 50%, #7ab8ed 100%);
    --gothic-bg: #0d0b0d;
    --gothic-panel: #141217;
    --gothic-line: #3a2f2a;
    --gothic-accent: #b89a74;
    --gothic-text: #e6dfd0;
    --gothic-muted: #b9b1a2;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: none;
    text-rendering: optimizeSpeed;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    font-family: "Tahoma", "Arial", sans-serif;
    overflow: hidden;
    user-select: none;
}

/* Windows Desktop Background */
.windows-desktop {
    width: 100%;
    height: 100%;
    background: url('assets/wallpaper.png') no-repeat center center fixed;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Desktop Icons */
.desktop-icons {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    z-index: 5;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75px;
    cursor: pointer;
    text-align: center;
}

.icon-image {
    font-size: 32px;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.icon-label {
    color: #fff;
    font-size: 11px;
    text-shadow: 1px 1px 1px #000;
    padding: 2px 4px;
}

.desktop-icon:hover .icon-label {
    background: rgba(49, 106, 197, 0.6);
    outline: 1px solid rgba(255, 255, 255, 0.4);
}

/* Windows Interaction Area */
.windows-area {
    flex: 1;
    position: relative;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

/* DockDock 桌面 App 模式：去掉“桌面”感，只保留聊天器主界面 */
body.dockdock-app .desktop-icons,
body.dockdock-app .xp-taskbar {
    display: none !important;
}

body.dockdock-app .windows-desktop {
    background: #ece9d8;
}

body.dockdock-app .windows-area {
    padding: 0;
    gap: 0;
    justify-content: flex-start;
    align-items: stretch;
}

/* DockDock 无系统边框后，使用自定义标题栏作为原生拖拽区域 */
body.dockdock-app .buddy-titlebar,
body.dockdock-app .chat-titlebar,
body.dockdock-app .book-titlebar,
body.dockdock-app .photo-titlebar {
    -webkit-app-region: drag;
}

/* 可交互控件必须显式标记 no-drag，避免被拖拽层吞掉 */
body.dockdock-app .titlebar-btn,
body.dockdock-app input,
body.dockdock-app textarea,
body.dockdock-app select,
body.dockdock-app button,
body.dockdock-app .buddy-list-scroll,
body.dockdock-app .chat-messages,
body.dockdock-app .chat-toolbar,
body.dockdock-app .chat-input-section,
body.dockdock-app .photo-content,
body.dockdock-app .camera-stage,
body.dockdock-app .tarot-card,
body.dockdock-app .answer-overlay {
    -webkit-app-region: no-drag;
}

/* Window Style Base */
.buddy-window,
.chat-window {
    background: #ece9d8;
    border: 3px solid var(--xp-blue-dark);
    border-top: none;
    border-radius: 8px 8px 0 0;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.2s;
}

.chat-window.maximized,
.buddy-window.maximized {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100% - 30px) !important;
    /* Above XP taskbar */
    border-radius: 0;
    border: none;
}

.window-hidden {
    display: none !important;
}

.window-active {
    z-index: 50 !important;
}


/* Titlebars */
/* Default: Inactive state (gray) - Windows XP style */
.buddy-titlebar,
.chat-titlebar {
    height: 30px;
    background: linear-gradient(to bottom, #7a96df 0%, #9db8f5 6%, #6f8ad0 14%, #6f8ad0 91%, #5a75b0 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    color: #d8e4f8;
    cursor: move;
    user-select: none;
}

/* Active window titlebar - bright blue */
.window-active .buddy-titlebar,
.window-active .chat-titlebar {
    background: linear-gradient(to bottom, #0058e6 0%, #4596fa 6%, #0058e6 14%, #0058e6 91%, #00309c 100%);
    color: #fff;
}

.chat-titlebar-right,
.buddy-titlebar-right {
    display: flex;
    gap: 2px;
}

.qq-number,
.chat-title-text {
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}

.titlebar-btn {
    width: 21px;
    height: 21px;
    border: 1px solid #fff;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4);
    background: linear-gradient(to bottom, #4c8ff5, #245edb);
}

.titlebar-btn.close {
    background: linear-gradient(to bottom, #f54c4c, #db2424);
}

.titlebar-btn.settings-btn {
    font-size: 12px;
    background: linear-gradient(to bottom, #7ba7f7, #3e76de);
}

/* Buddy List Window Positioning */
.buddy-window {
    width: 240px;
    height: 600px;
    position: absolute;
    right: 40px;
    top: 40px;
    z-index: 20;
    /* Higher than chat window to ensure accessibility */
}

body.dockdock-app.dockdock-view-buddy .buddy-window {
    position: relative;
    right: auto;
    top: auto;
    width: 100vw;
    height: 100vh;
    z-index: 40;
    border-radius: 0;
    border-width: 2px;
}

/* Content Sections */
.user-info-section {
    padding: 10px;
    display: flex;
    gap: 12px;
    background: #fff;
    border-bottom: 1px solid #ccc;
}

.user-avatar-large {
    width: 52px;
    height: 52px;
    border: 1px solid #999;
    padding: 1px;
    background: #fff;
}

.user-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

.qq-user-name {
    font-weight: bold;
    font-size: 13px;
    color: #000;
}

#my-avatar-img,
#stella-space-img,
#qq-taskbar-avatar,
#qq-number,
#qq-user-name,
#qq-taskbar-text,
#stella-space-label {
    cursor: pointer;
}

#qq-taskbar-avatar {
    object-fit: contain;
    background: #fff;
}

.buddy-app-strip {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: linear-gradient(to bottom, #efefef, #e3e3e3);
    border-top: 1px solid #cfcfcf;
    border-bottom: 1px solid #f7f7f7;
}

.buddy-app-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 6px;
    border: 1px solid #b6b6b6;
    border-radius: 5px;
    background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    color: #111;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.buddy-app-btn:hover {
    background: linear-gradient(to bottom, #fffef5, #f7f0d6);
    border-color: #b79f5b;
}

.buddy-app-btn:active {
    background: linear-gradient(to bottom, #e6e6e6, #f7f7f7);
}

.buddy-app-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.buddy-app-icon img {
    width: 16px;
    height: 16px;
    display: block;
    border-radius: 2px;
}

.buddy-app-emoji {
    display: block;
    font-size: 15px;
    line-height: 1;
}

.buddy-app-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-box {
    padding: 6px;
    background: #f0f0f0;
}

.search-box input {
    width: 100%;
    border: 1px solid #999;
    padding: 3px 6px;
    font-size: 11px;
}

.buddy-list-scroll {
    flex: 1;
    background: #fff;
    overflow-y: auto;
}

.buddy-group-header {
    background: #f0f0f0;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}

.buddy-item {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    gap: 10px;
    cursor: default;
    /* Standarad XP cursor for lists */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* 
   CRITICAL FIX: Prevent child elements from capturing clicks.
   This ensures the .buddy-item always receives the click/dblclick event directly.
*/
.buddy-item * {
    pointer-events: none;
}

.buddy-item:hover {
    background: #e8f3ff;
}

.buddy-item.active {
    background: #316ac5;
    color: #fff;
}

.buddy-avatar {
    width: 32px;
    height: 32px;
}

.buddy-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

.buddy-name {
    font-size: 12px;
    font-weight: bold;
}

.buddy-status {
    font-size: 11px;
    opacity: 0.8;
}

.buddy-bottom-tabs {
    display: flex;
    background: #ece9d8;
    border-top: 1px solid #ccc;
}

.bottom-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    font-size: 10px;
    cursor: pointer;
    border-right: 1px solid #ccc;
}

.bottom-tab.active {
    background: #fff;
}

.buddy-status-bar {
    height: 26px;
    background: #ece9d8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

/* Chat Window Layout */
/* Chat window initially positioned absolute for dragging */
.chat-window {
    width: 550px;
    /* Reduced from 680px to avoid overlapping buddy list */
    height: 580px;
    position: absolute;
    left: 40px;
    /* Moved left to prevent overlap */
    top: 60px;
    z-index: 10;
}

body.dockdock-app.dockdock-view-buddy .chat-window {
    display: none !important;
}

body.dockdock-app.dockdock-view-buddy .book-window,
body.dockdock-app.dockdock-view-buddy .photo-window {
    display: none !important;
}

body.dockdock-app.dockdock-view-buddy .buddy-bottom-tabs,
body.dockdock-app.dockdock-view-buddy .buddy-status-bar {
    display: none !important;
}

body.dockdock-app.dockdock-view-chat .buddy-window,
body.dockdock-app.dockdock-view-chat .book-window,
body.dockdock-app.dockdock-view-chat .photo-window {
    display: none !important;
}

body.dockdock-app.dockdock-view-chat .chat-window {
    position: relative;
    left: auto;
    top: auto;
    width: 100vw;
    height: 100vh;
    z-index: 40;
    border-radius: 0;
    border-width: 2px;
}

body.dockdock-app.dockdock-view-oracle .buddy-window,
body.dockdock-app.dockdock-view-oracle .chat-window,
body.dockdock-app.dockdock-view-oracle .photo-window {
    display: none !important;
}

body.dockdock-app.dockdock-view-oracle .book-titlebar {
    display: flex !important;
    height: 30px;
    padding: 0 6px;
    -webkit-app-region: drag;
}

body.dockdock-app.dockdock-view-oracle #book-window {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    margin: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

body.dockdock-app.dockdock-view-oracle .book-content {
    flex: 1;
    width: 100%;
    height: auto;
    overflow: auto;
}

body.dockdock-app.dockdock-view-oracle .front-card-img {
    width: min(680px, calc(100vw - 120px));
    height: auto;
}

body.dockdock-app.dockdock-view-photo .buddy-window,
body.dockdock-app.dockdock-view-photo .chat-window,
body.dockdock-app.dockdock-view-photo .book-window {
    display: none !important;
}

/* Photo Booth 独立窗口（QQ 弹窗逻辑） */
body.dockdock-app.dockdock-view-photo #photo-booth-window {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 12px auto 10px !important;
    width: 700px !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 10px 10px 8px 8px;
    border: 2px solid #6e563a;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    background: linear-gradient(180deg, #f4efe5 0%, #e7dfd1 100%);
    overflow: visible;
}

body.dockdock-app.dockdock-view-photo .photo-titlebar {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 30px;
    padding: 0 6px;
    border-radius: 8px 8px 0 0;
    border: none;
    background: linear-gradient(to bottom, #0058e6 0%, #4596fa 6%, #0058e6 14%, #0058e6 91%, #00309c 100%);
    color: #fff;
}

body.dockdock-app.dockdock-view-photo .photo-window.result-mode .photo-titlebar {
    display: flex !important;
}

body.dockdock-app.dockdock-view-photo #photo-booth-window .photo-content {
    width: 620px !important;
    height: 465px !important;
    margin: 18px auto 0 !important;
    border: 8px solid #f8f4ea;
    box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.26), 0 3px 10px rgba(0, 0, 0, 0.15);
    background: #000;
    display: block;
    overflow: visible;
    padding: 0;
}

body.dockdock-app.dockdock-view-photo #photo-booth-window .photo-booth-container {
    width: 100%;
    align-items: center;
}

body.dockdock-app.dockdock-view-photo #photo-booth-window .photo-controls {
    position: relative;
    width: 620px;
    height: auto;
    min-height: 96px;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 36px auto 18px;
    display: flex;
}

body.dockdock-app.dockdock-view-photo #photo-booth-window .char-selector {
    background: linear-gradient(180deg, #3f4044 0%, #2d2e31 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 3px 8px rgba(0, 0, 0, 0.28);
}

body.dockdock-app.dockdock-view-photo #photo-booth-window .char-btn {
    color: #b9bbc1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

body.dockdock-app.dockdock-view-photo #photo-booth-window .char-btn.active {
    background: linear-gradient(180deg, #5a5b5f 0%, #434449 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.dockdock-app.dockdock-view-photo #photo-booth-window .beauty-btn {
    background: linear-gradient(180deg, rgba(255, 71, 87, 0.22) 0%, rgba(255, 71, 87, 0.08) 100%);
    color: #ff7583;
}

body.dockdock-app.dockdock-view-photo #photo-booth-window .capture-trigger {
    width: 66px;
    height: 66px;
    border: 4px solid #2e2f33;
    box-shadow: 0 5px 0 #17181b, 0 10px 18px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body.dockdock-app.dockdock-view-photo .photo-window.result-mode {
    padding: 0 !important;
    background: #ffffff !important;
    border: 2px solid #6e563a !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25) !important;
    overflow: visible !important;
}

body.dockdock-app.dockdock-view-photo .photo-window.result-mode .photo-content {
    width: 740px !important;
    height: 590px !important;
    margin: 16px auto 0;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
}

body.dockdock-app.dockdock-view-photo .photo-window.result-mode .camera-stage {
    width: 740px;
    height: 590px;
}

body.dockdock-app.dockdock-view-photo .photo-window.result-mode .photo-controls {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 620px !important;
    height: auto !important;
    min-height: 92px;
    margin: 22px auto 18px;
    z-index: 1200 !important;
    pointer-events: auto !important;
}

body.dockdock-app.dockdock-view-photo .photo-window.result-mode #photo-result-img {
    pointer-events: none !important;
}

body.dockdock-app.dockdock-view-photo .photo-window.result-mode .caption-input-wrap {
    z-index: 4200 !important;
    pointer-events: auto !important;
}

body.dockdock-app.dockdock-view-photo .photo-window.result-mode .polaroid-input {
    pointer-events: auto !important;
}


.chat-header-bar {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border-bottom: 1px solid #ccc;
}

.chat-contact-avatar {
    width: 42px;
    height: 42px;
    border: 1px solid #999;
}

.chat-contact-avatar img {
    width: 100%;
    height: 100%;
}

.chat-contact-name {
    font-size: 15px;
    font-weight: bold;
}

.chat-main-area {
    flex: 1;
    display: flex;
    background: #fff;
    min-height: 0;
}

.chat-messages-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
    min-height: 0;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: #fff;
    min-height: 0;
}

.message {
    margin-bottom: 12px;
}

.msg-header {
    font-size: 11px;
    margin-bottom: 4px;
}

.msg-header.me {
    color: #008000;
}

.msg-header.incoming {
    color: #0000ff;
}

.msg-bubble {
    font-size: 12px;
    line-height: 1.5;
}

.msg-actions {
    margin-top: 4px;
}

.msg-translate {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    color: #2a5db0;
    cursor: pointer;
    text-decoration: underline;
}

.msg-translate:disabled {
    opacity: 0.6;
    cursor: default;
}

.msg-translation {
    margin-top: 6px;
    font-size: 12px;
    color: #333;
    line-height: 1.5;
}

.chat-toolbar {
    height: 32px;
    background: #f0f0f0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 0 10px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.toolbar-icons {
    display: flex;
    gap: 12px;
    font-size: 18px;
    cursor: pointer;
}

.chat-input-section {
    height: 110px;
    flex-shrink: 0;
}

#chat-input {
    width: 100%;
    height: 100%;
    border: none;
    padding: 12px;
    resize: none;
    font-size: 12px;
}

.chat-bottom-buttons {
    padding: 8px 12px;
    background: #f0f0f0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ccc;
    flex-shrink: 0;
}

.chat-btn {
    padding: 4px 15px;
    font-size: 12px;
    border: 1px solid #999;
    background: #fff;
    cursor: pointer;
    border-radius: 2px;
}

.chat-btn:hover {
    background: #e8e8e8;
}

.chat-btn.primary {
    font-weight: bold;
    border-color: #316ac5;
}

.contact-info-panel {
    width: 190px;
    background: #fafaed;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-panel-header {
    font-weight: bold;
    font-size: 12px;
    color: var(--xp-blue-dark);
}

.contact-avatar-display {
    width: 100%;
    height: 160px;
    border: 1px solid #999;
}

.contact-avatar-display img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-item {
    font-size: 11px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.info-item:hover {
    text-decoration: underline;
    color: #0000ff;
}

.contact-panel-ad {
    margin-top: auto;
    position: relative;
    border: 1px solid #ccc;
    overflow: hidden;
}

.contact-panel-ad .ad-content {
    height: 136px;
    min-height: 136px;
    max-height: 136px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f5f5f5;
}

#stella-space-img,
.stella-space-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #fff;
    border: 1px solid #a8a8a8;
}

.ad-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 10px;
    padding: 4px;
    text-align: center;
}

/* Windows XP Taskbar */
.xp-taskbar {
    height: 30px;
    background: var(--xp-taskbar-bg);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 100;
}

.start-button {
    height: 100%;
    background: linear-gradient(to bottom, #3c913c, #1a741a);
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: bold;
    font-style: italic;
    font-size: 14px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.start-logo {
    font-size: 18px;
}

.quick-launch {
    padding: 0 10px;
    display: flex;
    gap: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.taskbar-programs {
    flex: 1;
    display: flex;
    padding: 0 10px;
    gap: 5px;
}

.taskbar-program {
    background: linear-gradient(to bottom, #4c8ff5, #245edb);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 24px;
    font-size: 11px;
    border-radius: 3px;
    max-width: 160px;
}

.taskbar-program.active {
    background: #1941a5;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.system-tray {
    background: #0996f1;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    box-shadow: inset 2px 0 3px rgba(0, 0, 0, 0.2);
}

.tray-clock {
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

/* Modal Styling */
.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.settings-modal {
    width: 350px;
    background: #ece9d8;
    border: 2px solid var(--xp-blue-dark);
}

.modal-titlebar {
    background: var(--xp-taskbar-bg);
    padding: 5px 10px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.modal-body {
    padding: 20px;
}

.modal-body label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
}

.modal-body input {
    width: 100%;
    padding: 5px;
    border: 1px solid #7f9db9;
}

.modal-footer {
    padding: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
    background: #ccd3d9;
    border: 1px solid #999;
}


/* --- The Oracle (Interactive Card Design) --- */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* --- The Oracle (Optimized Size) --- */
.book-window {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    height: 440px;
    margin-left: -300px;
    margin-top: -260px;
    /* Moved up to avoid taskbar */
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    overflow: visible;
    z-index: 1000;
    pointer-events: auto;
    transition: opacity 0.5s ease;
}

.book-window * {
    pointer-events: auto;
    /* Re-enable clicks for content */
}

.book-window.window-hidden {
    display: none;
}

.book-titlebar {
    background: linear-gradient(to bottom, #0058E1 0%, #3a91ff 10%, #0058e1 14%, #0058e1 91%, #003096 100%);
    color: white;
    padding: 3px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    display: none !important;
}

.book-titlebar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 0.85em;
}

.book-titlebar-right {
    display: flex;
    gap: 6px;
}

.book-titlebar-right .titlebar-btn {
    width: 21px;
    height: 21px;
    border: 1px solid #fff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Marlett', sans-serif;
    font-size: 14px;
    color: white;
    cursor: pointer;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.book-titlebar-right .close {
    background: linear-gradient(135deg, #f0957b 0%, #e81123 45%, #b5101b 100%);
    font-weight: bold;
}

.book-titlebar-right .close:hover {
    background: #FF5439;
}

.book-titlebar-right .minimize {
    background: #e5c07b;
    color: #5c4033;
}

.book-titlebar-right .maximize {
    background: #98c379;
    color: #2e4a3e;
}

.book-titlebar-right .close {
    background: #e06c75;
    color: #fff;
}

.book-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Flip Card System --- */
.flip-card {
    width: auto;
    height: auto;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.flip-card.flipped {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    width: auto;
    height: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    background: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
}

.flip-card-front {
    position: relative;
    /* Let front side dictate the base space */
    z-index: 2;
    transform: rotateY(0deg);
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* --- Front: Question Side (Card Back Design) --- */
.front-card-img {
    display: block;
    width: 680px;
    /* Base size for the interactive card */
    height: auto;
    border-radius: 12px;
}

.card-back-center-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 10%;
    /* Percentage-based padding for centering */
}

.card-back-center-overlay div {
    /* Container for layout */
    text-align: center;
    width: 80%;
}

.card-back-center-overlay .phase-title {
    font-size: 1.4em;
    color: #4a3a2a;
    margin-bottom: 20px;
    font-style: italic;
    opacity: 0.8;
}

.card-back-center-overlay input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(74, 58, 42, 0.2);
    padding: 15px;
    font-family: 'Times New Roman', serif;
    font-size: 1.3em;
    color: #2a1f14;
    text-align: center;
    outline: none;
    margin-bottom: 30px;
}

.card-back-center-overlay input::placeholder {
    color: #4a3a2a;
    opacity: 0.5;
    font-style: italic;
}

/* CSS Pattern removed in favor of background image */
.card-back-pattern {
    display: none;
}

.card-back-center {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-back-center h2 {
    display: none;
    /* Removed as requested */
}

.card-back-center-overlay input {
    width: 320px;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(61, 46, 31, 0.3);
    padding: 14px 18px;
    font-family: 'Libre Baskerville', serif;
    font-size: 1.25em;
    font-weight: 700;
    /* Bolder for visibility */
    color: #2a1f14;
    /* Darker brown */
    text-align: center;
    outline: none;
    margin-bottom: 25px;
    transition: all 0.3s;
}

.card-back-center-overlay input::placeholder {
    color: #3d2e1f;
    opacity: 0.5;
    font-style: italic;
}

.card-back-center input:focus {
    border-color: #c4a77d;
    background: rgba(255, 255, 255, 0.12);
}

.flip-btn {
    background: linear-gradient(180deg, #9a7b3c 0%, #6b4423 100%);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #ffffff;
    font-weight: 800;
    /* Extra bold for clarity */
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    padding: 14px 36px;
    font-family: 'Libre Baskerville', serif;
    font-size: 1.15em;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s;
}

.flip-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.flip-btn:active {
    transform: translateY(0);
}

.flip-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.flip-card-back {
    background: none;
}

.oracle-phase {
    width: 600px;
    height: 440px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oracle-phase.hidden {
    display: none !important;
}

.answer-card-container {
    width: 600px;
    height: 440px;
    position: relative;
    border-radius: 12px;
    overflow: visible;
    background: #1a0f0f;
    border: 1px solid rgba(255, 229, 180, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: stretch;
    transform-style: preserve-3d;
}

.answer-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    transition: transform 0.8s ease, filter 0.8s ease, opacity 0.8s ease;
}

.answer-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 45%;
    padding: 150px 30px 30px 10px;
    background: linear-gradient(90deg, rgba(255, 252, 240, 0) 0%, rgba(255, 252, 240, 0.95) 20%, rgba(255, 252, 240, 1) 30%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 0 12px 12px 0;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.tarot-close,
#oracle-close-back {
    display: none !important;
}

.card-bottom-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
}

.answer-text {
    font-size: 0.95em;
    color: #2a1f14;
    font-weight: 600;
    margin: 0 0 auto 0;
    font-family: 'Georgia', serif;
    font-style: italic;
    line-height: 1.6;
    text-align: left;
}

.answer-translate-link {
    margin-top: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8em;
    color: #6b4b2a;
    cursor: pointer;
    text-decoration: underline;
    align-self: flex-start;
    position: relative;
    z-index: 120;
    pointer-events: auto;
}

.answer-translate-link:disabled {
    opacity: 0.6;
    cursor: default;
}

.answer-translation {
    margin-top: 10px;
    font-size: 0.85em;
    color: #3b2b1e;
    line-height: 1.5;
}

.answer-card-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 60;
}

.answer-card-container::after {
    content: '';
    position: absolute;
    top: -35%;
    left: -60%;
    width: 60%;
    height: 180%;
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 232, 180, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-120%) rotate(12deg);
    opacity: 0;
    pointer-events: none;
    z-index: 80;
}

.answer-loading-overlay {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle at 35% 40%, rgba(255, 255, 255, 0.12), rgba(26, 15, 15, 0.85) 60%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 90;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.answer-sigil {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 160, 0.35);
    box-shadow: 0 0 18px rgba(255, 215, 160, 0.2), inset 0 0 18px rgba(255, 215, 160, 0.15);
    position: relative;
    animation: sigil-spin 4s linear infinite;
}

.answer-sigil::before,
.answer-sigil::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 215, 160, 0.35);
}

.answer-whisper {
    font-family: 'Georgia', serif;
    font-size: 0.75em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d4bf95;
    opacity: 0.9;
}

.answer-card-container.answer-loading .answer-loading-overlay {
    opacity: 1;
}

.answer-card-container.answer-loading .answer-card-img {
    filter: blur(2.5px) saturate(0.85);
    transform: scale(1.02);
    opacity: 0.85;
}

.answer-card-container.answer-ready .answer-overlay {
    opacity: 1;
    transform: translateX(0);
}

.answer-card-container.answer-ready::after {
    animation: card-shimmer 1.1s ease forwards;
}

.answer-card-container.answer-ready {
    animation: card-float 6s ease-in-out infinite;
}

@keyframes card-shimmer {
    0% {
        opacity: 0;
        transform: translateX(-120%) rotate(12deg);
    }

    20% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        transform: translateX(220%) rotate(12deg);
    }
}

@keyframes card-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes sigil-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.flip-btn {
    background: linear-gradient(180deg, #927345 0%, #5d4227 100%);
    border: 1px solid #4a331c;
    color: #f5f0e1;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 12px 35px;
    font-family: 'Libre Baskerville', serif;
    font-size: 1.1em;
    border-radius: 40px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.flip-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #a68551 0%, #6d4e2f 100%);
}

.chat-with-btn,
.reset-btn {
    background: linear-gradient(180deg, #8a6a3b 0%, #543b1e 100%);
    border: 1px solid #3d2a14;
    color: #e9e3d0;
    font-weight: 600;
    padding: 6px 14px;
    /* Smaller padding */
    font-family: 'Georgia', serif;
    font-size: 0.75em;
    /* Smaller font */
    border-radius: 15px;
    /* Tighter radius */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    white-space: nowrap;
    flex: 1;
    max-width: 140px;
    /* Limit width */
}

.chat-with-btn:hover,
.reset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
    background: linear-gradient(180deg, #9d7a47 0%, #634826 100%);
}

.reset-btn:hover {
    background: #f4f2e8;
}

/* Card Close Button Integrated */
.card-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: rgba(42, 31, 20, 0.7);
    color: #fdf5e6;
    border: 1px solid rgba(253, 245, 230, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Libre Baskerville', serif;
    font-size: 14px;
    font-weight: bold;
    z-index: 100;
    transition: all 0.3s;
}


.card-close-btn:hover {
    background: rgba(139, 69, 19, 1);
    transform: scale(1.1);
}

/* ============ WHEEL SELECTION PHASE ============ */
.oracle-phase {
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.oracle-phase.hidden {
    display: none;
}

.wheel-container {
    width: 400px;
    height: 520px;
    background: linear-gradient(135deg, #f5f0e1 0%, #ebe3d1 100%);
    border-radius: 12px;
    border: 3px solid #8b7355;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.wheel-title {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.4em;
    color: #4a3728;
    margin: 0 0 5px 0;
    text-align: center;
}

.wheel-question {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.85em;
    color: #6b5744;
    font-style: italic;
    margin: 0 0 15px 0;
    text-align: center;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Character Wheel */
.character-wheel {
    width: 260px;
    height: 260px;
    position: relative;
    margin: 10px 0;
}

.wheel-character {
    position: absolute;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #c9b896;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.wheel-character img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wheel-character:hover {
    transform: scale(1.15);
    border-color: #8b6914;
    z-index: 10;
}

.wheel-character.dimmed {
    opacity: 0.3;
    filter: grayscale(80%);
}

.wheel-character.highlighted {
    border-color: #d4af37;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
    transform: scale(1.1);
}

.wheel-character.selected {
    border-color: #ffd700;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
    transform: scale(1.25);
    z-index: 20;
}

.wheel-character.spinning {
    animation: pulse 0.15s ease-in-out;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
        border-color: #ffd700;
    }
}

/* Tag Selection UX - Mystical Vintage Theme */
.tarot-guidance {
    width: 100%;
    text-align: center;
    margin-top: -60px;
    /* Pull the star field upward so it becomes the main layer */
    z-index: 50;
    position: relative;
    padding: 75px 25px 35px 25px;
    min-height: 190px;
    background: #1a0f0f;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    border-radius: 0 0 12px 12px;
    /* Match container bottom corners */
}

.tag-prompt {
    font-family: 'Georgia', serif;
    font-size: 0.75em;
    color: #d4af37;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.tag-prompt::before,
.tag-prompt::after {
    content: '✦';
    color: #d4af37;
    margin: 0 8px;
    font-size: 0.6em;
    opacity: 0.5;
}

.tag-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    /* Force single line */
}

.tag-btn {
    background: rgba(20, 10, 10, 0.7);
    border: 1px solid rgba(180, 140, 80, 0.4);
    color: #c0a070;
    padding: 9px 16px;
    cursor: pointer;
    font-family: 'Georgia', serif;
    font-size: 0.8em;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.tag-btn:hover {
    background: rgba(40, 20, 20, 0.8);
    border-color: #d4af37;
    color: #e8dcc4;
    transform: translateY(-1px);
}

.tag-btn.active {
    background: #3e2614;
    border-color: #e0c080;
    color: #ffd700;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    font-weight: 700;
}

/* --- Tarot Spread Phase --- */
.tarot-container {
    padding: 28px 28px 10px 28px;
    /* Remove bottom padding */
    background: #1a0f0f;
    background-image: none;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 720px;
    /* Wider to accommodate larger spread */
    position: relative;
    z-index: 10;
    overflow: visible;
    /* Allow cards to float beyond the container */
}

.tarot-title {
    margin: 4px 0 6px 0;
    font-family: 'Georgia', serif;
    font-size: 1.2em;
    font-weight: 600;
    color: #f2e6c7;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.tarot-question {
    margin: 0 0 10px 0;
    max-width: 520px;
    font-family: 'Georgia', serif;
    font-size: 0.9em;
    font-style: italic;
    color: #cbbd9a;
    text-align: center;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}


.tarot-spread {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 700px;
    position: relative;
    perspective: 1200px;
    z-index: 60;
    transition: filter 0.5s ease, transform 0.5s ease;
}

.tarot-loading-overlay {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle at 45% 35%, rgba(255, 230, 170, 0.18), rgba(26, 15, 15, 0.85) 55%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.tarot-sigil {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 160, 0.35);
    box-shadow: 0 0 16px rgba(255, 215, 160, 0.2), inset 0 0 16px rgba(255, 215, 160, 0.15);
    position: relative;
    animation: sigil-spin 3.6s linear infinite;
}

.tarot-sigil::before,
.tarot-sigil::after {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 215, 160, 0.35);
}

.tarot-whisper {
    font-family: 'Georgia', serif;
    font-size: 0.72em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d4bf95;
    opacity: 0.9;
}

.tarot-container.tarot-loading .tarot-loading-overlay {
    opacity: 1;
}

.tarot-container.tarot-loading .tarot-spread {
    filter: blur(1.5px) saturate(0.9);
    transform: scale(0.995);
    transition: filter 0.5s ease, transform 0.5s ease;
}

.tarot-card.selected {
    z-index: 120 !important;
    transform: translateX(var(--x, 0px)) translateY(calc(var(--y, 0px) - 18px)) rotate(var(--r, 0deg)) scale(1.06) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

/* BASE TAROT CARD STYLES - RESTORED */
.tarot-card {
    width: 140px;
    height: 200px;
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s, opacity 0.3s;
    transform-origin: center bottom;
    will-change: transform;
    border-radius: 8px;
    overflow: visible;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
    transform: translateX(var(--x, 0px)) translateY(var(--y, 0px)) rotate(var(--r, 0deg));
}

.tarot-card-label {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 10, 10, 0.85);
    color: #f1e1c2;
    font-family: 'Georgia', serif;
    font-size: 0.7em;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border: 1px solid rgba(255, 215, 160, 0.25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    z-index: 150;
}

.tarot-card:hover .tarot-card-label,
.tarot-card.guidance-highlight .tarot-card-label,
.tarot-card.selected .tarot-card-label {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

/* Card Hover = Lift ONLY, No Side Movement */
.tarot-card:hover {
    z-index: 100 !important;
    transform: translateX(var(--x, 0px)) translateY(calc(var(--y, 0px) - 25px)) rotate(var(--r, 0deg)) scale(1.05) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
}

.tarot-card.flipped {
    transform: scale(1.1) rotateY(180deg) !important;
    opacity: 0;
    z-index: 500;
    transition: transform 0.6s ease-in, opacity 0.4s ease-in;
}

.tarot-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    border-radius: 8px;
}

.tarot-card.flipped .tarot-card-inner {
    transform: rotateY(180deg);
}

.tarot-card-front,
.tarot-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}

.tarot-card-back {
    background: #2c1e14;
}

.tarot-card-front {
    transform: rotateY(180deg);
}

.tarot-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Guidance Highlight for filtered cards - ENHANCED */
@keyframes gold-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.6);
        transform: scale(1.05);
    }
}

.tarot-card.guidance-highlight {
    z-index: 80 !important;
}

.guidance-highlight .tarot-card-inner {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
    animation: gold-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
}

.tarot-card.dimmed {
    opacity: 0.4 !important;
    filter: grayscale(0.3);
}

/* Character Portrait Details */
.answer-card-img {
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

.tarot-card.guidance-highlight::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 12px;
    border: 3px solid #ffd700;
    box-shadow: 0 0 15px #ffd700;
    pointer-events: none;
    animation: tarot-pulse 1.5s infinite ease-in-out;
}

@keyframes tarot-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.5;
    }
}

.tarot-card.dimmed {
    opacity: 0.4;
    filter: sepia(0.5);
}

.tarot-guidance {
    margin-top: -60px;
    width: 100%;
    text-align: center;
}

.tarot-close {
    position: absolute;
    top: 15px;
    right: 15px;
}

/* Responsive adjustment for tarot window */
#book-window:has(#phase-tarot:not(.hidden)),
#book-window:has(#phase-answer:not(.hidden)),
#book-window:has(#phase-question:not(.hidden)) {
    width: 860px;
    height: 650px;
}

@media (max-width: 720px) {
    .tag-buttons {
        flex-wrap: wrap;
        gap: 8px;
    }

    .tarot-question {
        max-width: 90%;
    }
}

/* --- Fuji Skeuomorphic Camera Redesign --- */
.photo-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 660px;
    /* 620 content + 40 side borders */
    background: #ffffff;
    border-radius: 4px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.15),
        0 50px 120px rgba(0, 0, 0, 0.25);
    z-index: 500;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 20px 20px 20px 20px;
    /* Consistent padding */
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* RESULT MODE: THE FINAL CLEANUP */
.photo-window.result-mode {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
    /* Allow Alex to bleed out */
}

.photo-window.result-mode .camera-inner-wrap,
.photo-window.result-mode .photo-titlebar,
.photo-window.result-mode .char-selector {
    display: none !important;
}

/* Remove .photo-content constraints in result mode */
.photo-window.result-mode .photo-content {
    height: auto !important;
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

/* Remove .photo-booth-container constraints in result mode */
.photo-window.result-mode .photo-booth-container {
    overflow: visible !important;
}

/* Clear any Borders on the Stage - wider to fit 740px canvas */
.photo-window.result-mode .camera-stage {
    width: 740px;
    /* Match export canvas exactly to avoid visual squeezing */
    height: 590px;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Hide camera feed & overlay in result mode */
.photo-window.result-mode #camera-feed,
.photo-window.result-mode #photo-overlay {
    display: none !important;
}

/* 
   STRATEGY: Decouple Layout 
   1. Controls container becomes a pass-through layer over the whole photo 
*/
.photo-window.result-mode .photo-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
    /* Let clicks pass through to photo */
    z-index: 2000;
    /* Reset all other positioning */
    right: auto;
    bottom: auto;
    transform: none;
}

.photo-titlebar {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    /* Wide enough for text and buttons */
    height: 38px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    color: #fff;
    cursor: move;
    border-radius: 10px 10px 0 0;
    z-index: 100;
    font-size: 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.photo-titlebar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
}

.photo-titlebar-right {
    display: flex;
    gap: 2px;
}

.photo-content {
    position: relative;
    width: 620px;
    height: 465px;
    background: #000;
    margin: 0;
    border: 1px solid #ddd;
    flex-shrink: 0;
}

.fuji-body-img {
    display: none;
    /* Removed the failing skeuomorphic asset */
}

.photo-booth-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.camera-stage {
    position: relative;
    width: 620px;
    height: 465px;
    background: #000;
    overflow: visible;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 2px 20px rgba(0, 0, 0, 0.6);
}

.camera-inner-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
    /* Allow Alex to bleed out */
}

/* --- THE POLAROID PRINT ANIMATION --- */
/* Polaroid Print Animation */
#photo-result-img {
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    width: 740px;
    height: 590px;
    object-fit: contain;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* Drop shadow for the photo itself */
}

#photo-result-img.printed {
    visibility: visible;
    opacity: 1;
}

/* Capturing the text overlay on result - positioned in the bottom whitespace of the photo */
/* JS handles removing this on retry to prevent duplicates. 
   CSS ensures it is centered and has proper z-index. */
.polaroid-caption-display {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    width: 85%;
    text-align: center;
    font-family: 'Permanent Marker', cursive;
    font-size: 28px;
    color: #222;
    z-index: 1100;
    pointer-events: none;
    opacity: 0;
}

/* Fix ghosting: Ensure only the active caption is shown if JS fails to clean up perfectly (fallback) */
.polaroid-caption-display+.polaroid-caption-display {
    display: none;
}

/* Hide the live caption overlay while user is typing - prevents double text */
.photo-window.result-mode .polaroid-caption-display {
    opacity: 0;
}

/* Caption Input - inside camera-stage, positioned on top of the polaroid white */
.caption-input-wrap {
    position: absolute;
    bottom: 25px;
    /* positioned on the white border area of polaroid image */
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    z-index: 2000;
    display: none;
    /* Shown after capture */
}

.polaroid-input {
    width: 100%;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: #333;
    font-family: 'Permanent Marker', cursive;
    font-size: 22px;
    outline: none;
    text-align: center;
}

.polaroid-input::placeholder {
    color: rgba(0, 0, 0, 0.25);
    font-family: sans-serif;
    font-size: 12px;
    font-weight: normal;
}

.polaroid-input:focus {
    border: none;
    outline: none;
}

#camera-feed {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    /* Standard mirror mode for better user UX */
}

/* Sticker Overlay */
.photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.character-sticker {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 200px;
    height: auto;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3));
    z-index: 10;
}

.alex-sticker {
    width: 420px;
    left: -60px;
    bottom: -45px;
    filter: drop-shadow(20px 10px 30px rgba(0, 0, 0, 0.5));
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}

.claire-sticker {
    width: 430px;
    right: -55px;
    bottom: -42px;
    filter: drop-shadow(20px 10px 30px rgba(0, 0, 0, 0.5));
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}

.phil-sticker {
    width: 460px;
    left: -76px;
    bottom: -62px;
    filter: drop-shadow(20px 10px 30px rgba(0, 0, 0, 0.5));
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}

.gloria-sticker {
    width: 430px;
    right: -58px;
    bottom: -45px;
    filter: drop-shadow(20px 10px 30px rgba(0, 0, 0, 0.5));
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}

.frame-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sticker {
    position: absolute;
    font-size: 30px;
    filter: drop-shadow(0 0 2px #fff);
}

.s1 {
    top: 10px;
    left: 10px;
    transform: rotate(-15deg);
}

.s2 {
    top: 10px;
    right: 10px;
    transform: rotate(15deg);
}

.s3 {
    bottom: 80px;
    left: 15px;
    transform: rotate(10deg);
}

.s4 {
    bottom: 20px;
    left: 60px;
    transform: rotate(-10deg);
}

.photo-controls {
    /* FLOW BASED: Naturally sits in the bottom area of the white frame */
    width: 100%;
    height: 110px;
    /* More compact */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    pointer-events: auto;
}

.char-selector {
    display: flex;
    gap: 4px;
    background: rgba(34, 34, 34, 0.9);
    padding: 3px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.char-btn,
.beauty-btn {
    padding: 5px 15px;
    border: none;
    background: transparent;
    border-radius: 17px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.char-btn.active {
    background: #444;
    color: #fff;
}

.beauty-btn {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
}

.beauty-btn.active {
    background: #ff4757;
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
}

.action-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 2. BUTTONS: Vertical Stack on Bottom-Right */
.photo-window.result-mode .action-buttons {
    display: flex;
    flex-direction: column !important;
    gap: 12px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    /* Very close to photo edge */
    pointer-events: auto;
    width: auto;
}

.capture-trigger {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #ff4757 0%, #d63031 100%);
    border: 4px solid #333;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 0 #111, 0 10px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
}

.capture-trigger:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #111;
}

/* RESULT MODE ICON BUTTONS */
.save-trigger,
.retry-trigger {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.save-trigger:hover,
.retry-trigger:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    border-color: #fff;
}

.save-trigger {
    border-color: #ffffff;
    /* Clean white border */
}

/* Fix ghosting: Ensure only the active caption is shown if JS fails to clean up perfectly (fallback) */
.polaroid-caption-display~.polaroid-caption-display {
    display: none !important;
}