/* ============================================
   daitoua.quest — Pixel-Art Archival Interface
   ============================================ */

/* === Custom Cursor === */
*, *::before, *::after {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="7" y="1" width="2" height="5" fill="%23d4a24c"/><rect x="7" y="10" width="2" height="5" fill="%23d4a24c"/><rect x="1" y="7" width="5" height="2" fill="%23d4a24c"/><rect x="10" y="7" width="5" height="2" fill="%23d4a24c"/><rect x="6" y="0" width="1" height="7" fill="%233d3632"/><rect x="9" y="0" width="1" height="7" fill="%233d3632"/><rect x="6" y="9" width="1" height="7" fill="%233d3632"/><rect x="9" y="9" width="1" height="7" fill="%233d3632"/><rect x="0" y="6" width="7" height="1" fill="%233d3632"/><rect x="0" y="9" width="7" height="1" fill="%233d3632"/><rect x="9" y="6" width="7" height="1" fill="%233d3632"/><rect x="9" y="9" width="7" height="1" fill="%233d3632"/></svg>') 8 8, crosshair;
    box-sizing: border-box;
}

button, a, .panel-titlebar, .cmd-btn, .doc-entry, .map-tile {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="4" y="0" width="2" height="10" fill="%23d4a24c"/><rect x="1" y="3" width="3" height="2" fill="%23d4a24c"/><rect x="6" y="3" width="6" height="2" fill="%23d4a24c"/><rect x="6" y="5" width="2" height="6" fill="%23d4a24c"/><rect x="8" y="5" width="2" height="4" fill="%23d4a24c"/><rect x="10" y="5" width="2" height="3" fill="%23d4a24c"/></svg>') 4 0, pointer;
}

/* === Base Reset === */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #1a1718;
    color: #2d2926;
    font-family: 'Crimson Pro', serif;
    font-size: 17px;
    line-height: 1.7;
}

/* === CRT Scanline Overlay === */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1px,
        rgba(26, 23, 24, 0.08) 1px,
        rgba(26, 23, 24, 0.08) 2px
    );
    pointer-events: none;
    z-index: 9999;
}

/* === Hidden Utility === */
.hidden {
    display: none !important;
}

/* === Boot Screen === */
#boot-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1718;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
}

#boot-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: #d4a24c;
    white-space: pre-wrap;
    line-height: 1.8;
}

#boot-text .ok-text {
    color: #b8c9a3;
}

#boot-prompt {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: #d4a24c;
    margin-top: 24px;
    animation: blink-cursor 1s steps(2, end) infinite;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* === Bokeh Background === */
#bokeh-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.bokeh-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
}

.b1  { width: 200px; height: 200px; top: 10%; left: 5%;   background: rgba(212,162,76,0.08); }
.b2  { width: 160px; height: 160px; top: 30%; left: 70%;  background: rgba(196,128,122,0.05); }
.b3  { width: 120px; height: 120px; top: 60%; left: 20%;  background: rgba(184,201,163,0.06); }
.b4  { width: 180px; height: 180px; top: 80%; left: 60%;  background: rgba(212,162,76,0.08); }
.b5  { width: 100px; height: 100px; top: 15%; left: 45%;  background: rgba(196,128,122,0.05); }
.b6  { width: 140px; height: 140px; top: 50%; left: 85%;  background: rgba(184,201,163,0.06); }
.b7  { width: 200px; height: 200px; top: 70%; left: 10%;  background: rgba(212,162,76,0.08); }
.b8  { width: 80px;  height: 80px;  top: 5%;  left: 90%;  background: rgba(196,128,122,0.05); }
.b9  { width: 160px; height: 160px; top: 40%; left: 40%;  background: rgba(212,162,76,0.08); }
.b10 { width: 120px; height: 120px; top: 90%; left: 35%;  background: rgba(184,201,163,0.06); }
.b11 { width: 100px; height: 100px; top: 25%; left: 15%;  background: rgba(196,128,122,0.05); }
.b12 { width: 180px; height: 180px; top: 55%; left: 55%;  background: rgba(212,162,76,0.08); }

/* === Main Content === */
#main-content {
    position: relative;
    z-index: 1;
    padding: 48px 32px 96px;
    max-width: 960px;
    margin: 0 auto;
}

/* === Header === */
#site-header {
    text-align: center;
    padding: 48px 0 32px;
}

#torii-sprite {
    display: block;
    margin: 0 auto 16px;
    image-rendering: pixelated;
}

.site-title {
    font-family: 'Silkscreen', cursive;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d4a24c;
    margin: 0 0 8px;
}

.site-subtitle {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: #7a7571;
    margin: 0;
}

/* === Dither Strips === */
.dither-strip {
    height: 4px;
    margin: 16px 0;
    image-rendering: pixelated;
}

.pattern-wave {
    background: repeating-linear-gradient(
        to right,
        #d4a24c 0px, #d4a24c 4px,
        #e8dcc8 4px, #e8dcc8 8px,
        #c4807a 8px, #c4807a 12px,
        #e8dcc8 12px, #e8dcc8 16px
    );
}

.pattern-diamond {
    background: repeating-linear-gradient(
        to right,
        #3d3632 0px, #3d3632 2px,
        #e8dcc8 2px, #e8dcc8 4px,
        #d4a24c 4px, #d4a24c 6px,
        #e8dcc8 6px, #e8dcc8 8px
    );
}

.pattern-key {
    background: repeating-linear-gradient(
        to right,
        #7a7571 0px, #7a7571 4px,
        transparent 4px, transparent 8px,
        #c4807a 8px, #c4807a 12px,
        transparent 12px, transparent 16px
    );
}

/* === Content Panels === */
.content-panel {
    background: #f2e8d5;
    border: 2px solid #7a7571;
    margin-bottom: 32px;
    position: relative;
    box-shadow: 4px 4px 0 #3d3632;
    transition: opacity 0.3s steps(8, end), transform 0.3s steps(8, end);
}

/* Broken grid offsets */
.panel-pos-1 { margin-left: 0; margin-right: 80px; }
.panel-pos-2 { margin-left: 64px; margin-right: 16px; }
.panel-pos-3 { margin-left: 16px; margin-right: 48px; }
.panel-pos-4 { margin-left: 48px; margin-right: 32px; }
.panel-pos-5 { margin-left: 32px; margin-right: 64px; }

/* Overlap effect */
.panel-pos-2 { margin-top: -24px; }
.panel-pos-3 { margin-top: -16px; }
.panel-pos-4 { margin-top: -24px; }
.panel-pos-5 { margin-top: -16px; }

/* === Panel Title Bar === */
.panel-titlebar {
    background: #3d3632;
    color: #f2e8d5;
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 12px;
    font-family: 'Silkscreen', cursive;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    user-select: none;
}

.titlebar-jp {
    font-family: 'Shippori Mincho', serif;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.titlebar-en {
    font-family: 'Silkscreen', cursive;
}

/* === Panel Body === */
.panel-body {
    padding: 16px;
}

.panel-body p {
    margin: 0 0 12px;
    color: #2d2926;
}

/* === Zoom Focus State === */
.content-panel.focused {
    box-shadow: 0 0 0 2px #d4a24c, 4px 4px 0 #3d3632;
    z-index: 10;
}

.content-panel.dimmed {
    opacity: 0.4;
}

/* === Pixel Decoration === */
.pixel-decoration {
    margin-top: 12px;
}

.pixel-decoration svg {
    image-rendering: pixelated;
}

/* === Timeline === */
.timeline-entries {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-entry {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #e8dcc8;
}

.timeline-date {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: #d4a24c;
    flex-shrink: 0;
    width: 80px;
}

.timeline-event {
    font-family: 'Crimson Pro', serif;
    font-size: 16px;
    color: #2d2926;
}

/* === Maps === */
.map-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.map-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 2px solid #7a7571;
    padding: 4px;
    background: #e8dcc8;
    transition: border-color 0.2s steps(4, end);
}

.map-tile:hover {
    border-color: #d4a24c;
}

.map-tile svg {
    image-rendering: pixelated;
    display: block;
}

.map-label {
    font-family: 'Silkscreen', cursive;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #3d3632;
    text-transform: uppercase;
}

.map-note {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: #7a7571;
}

/* === Documents === */
.doc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.doc-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: #e8dcc8;
    border: 1px solid transparent;
    transition: border-color 0.2s steps(4, end);
}

.doc-entry:hover {
    border-color: #d4a24c;
}

.doc-id {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: #7a7571;
    flex-shrink: 0;
    width: 64px;
}

.doc-title {
    font-family: 'Crimson Pro', serif;
    font-size: 16px;
    color: #2d2926;
    flex: 1;
}

.doc-date {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: #7a7571;
    flex-shrink: 0;
}

.doc-tag {
    font-family: 'Silkscreen', cursive;
    font-size: 10px;
    padding: 2px 6px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.tag-policy    { background: #d4a24c; color: #1a1718; }
.tag-diplomatic { background: #c4807a; color: #f2e8d5; }
.tag-official  { background: #b8c9a3; color: #2d2926; }
.tag-archive   { background: #7a7571; color: #f2e8d5; }

/* === About === */
.jp-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    line-height: 1.8;
}

.about-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 2px solid #e8dcc8;
}

.meta-item {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: #7a7571;
}

/* === Command Bar === */
#command-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background: #2a2523;
    border-top: 2px solid #3d3632;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 100;
    padding: 0 16px;
}

.cmd-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: #d4a24c;
    background: transparent;
    border: none;
    padding: 4px 12px;
    letter-spacing: 0.02em;
    transition: color 0.1s steps(2, end), background 0.1s steps(2, end);
}

.cmd-btn:hover {
    background: #3d3632;
}

.cmd-btn.active {
    background: #d4a24c;
    color: #1a1718;
}

/* === Boot Screen Tile Dissolve === */
.boot-tile {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #1a1718;
    z-index: 1001;
    transition: opacity 0.1s steps(2, end);
}

.boot-tile.dissolved {
    opacity: 0;
}

/* === Responsive === */
@media (max-width: 768px) {
    #main-content {
        padding: 32px 16px 80px;
    }

    .panel-pos-1, .panel-pos-2, .panel-pos-3,
    .panel-pos-4, .panel-pos-5 {
        margin-left: 0;
        margin-right: 0;
    }

    .map-grid {
        justify-content: center;
    }

    .doc-entry {
        flex-wrap: wrap;
    }

    #command-bar {
        gap: 2px;
        padding: 0 4px;
    }

    .cmd-btn {
        font-size: 11px;
        padding: 4px 6px;
    }
}