/* C64 BASIC - Browser client styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(to bottom, #303444, #4994b5);
}

#c64-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    background: linear-gradient(to bottom, #303444, #4994b5);
    padding: 20px 0 0 0;
    width: 100%;
    min-height: 100vh;
}

/* Title header */
#title-header {
    width: 768px;
    margin-bottom: 8px;
}

#title-banner {
    display: block;
    width: 100%;
    height: auto;
}

#c64-canvas {
    /* 2x scale: 384x272 -> 768x544 */
    width: 768px;
    height: 544px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    cursor: none;
    outline: none;
    position: relative;
    z-index: 2;
    transition: height 0.3s ease-in-out;
}

/* Retro color stripes bar */
#color-stripes {
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom,
        #e12729 0%, #e12729 14%,
        transparent 14%, transparent 20%,
        #f18a2c 20%, #f18a2c 34%,
        transparent 34%, transparent 40%,
        #f5c731 40%, #f5c731 54%,
        transparent 54%, transparent 60%,
        #2eb24a 60%, #2eb24a 74%,
        transparent 74%, transparent 80%,
        #1b99d5 80%, #1b99d5 94%,
        transparent 94%, transparent 100%
    );
}

/* Grid section: spans from color stripes to white bars */
#grid-section {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -80px;
}

#grid-overlay {
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    bottom: 72px;
    opacity: 0.2;
    background-image:
        repeating-linear-gradient(to right, rgba(255,255,255,0.8) 0px, rgba(255,255,255,0.8) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.8) 0px, rgba(255,255,255,0.8) 1px, transparent 1px, transparent 40px);
    background-size: 40px 40px;
    pointer-events: none;
}

/* White bars at bottom */
#white-bars {
    width: 100%;
    height: 120px;
    margin-top: -80px;
    position: relative;
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.9) 0px, rgba(255,255,255,0.9) 10px,
        transparent 10px, transparent 28px,
        rgba(255,255,255,0.9) 28px, rgba(255,255,255,0.9) 38px,
        transparent 38px, transparent 50px,
        rgba(255,255,255,0.9) 50px, rgba(255,255,255,0.9) 60px,
        transparent 60px, transparent 68px,
        rgba(255,255,255,0.9) 68px, rgba(255,255,255,0.9) 78px,
        transparent 78px, transparent 83px,
        rgba(255,255,255,0.9) 83px, rgba(255,255,255,0.9) 93px,
        transparent 93px, transparent 96px,
        rgba(255,255,255,0.9) 96px, rgba(255,255,255,0.9) 120px
    );
}

/* Thought bubble overlay — positioned over the VIC-II canvas */
#thought-bubble-canvas {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 768px;
    height: 544px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
    z-index: 5;
}

/* Guru Meditation — squeezes VIC-II down (matches macOS SwiftUI layout) */
#guru-overlay {
    width: 768px;
    height: 0;
    overflow: hidden;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: height 0.3s ease-in-out, border-color 0.3s ease-in-out;
    z-index: 3;
}

#guru-overlay.guru-active {
    height: 76px;
    border: 3px solid transparent;
}

#guru-overlay.guru-border-visible {
    border-color: #990000;
}

.guru-text {
    text-align: center;
    font-family: monospace;
    font-size: 14px;
    color: #990000;
    line-height: 1.6;
    white-space: nowrap;
}

#grid-section.guru-active #c64-canvas {
    height: 468px; /* 544 - 76 = squeeze for guru bar */
}

/* Status bar — shows loading/error messages */
#c64-status {
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 4px 8px;
    min-height: 22px;
}

#c64-status:empty {
    display: none;
}

/* Feedback button */
#feedback-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: #8cb4d2;
    border: 1px solid #8cb4d2;
    padding: 8px 16px;
    font-family: monospace;
    font-size: 13px;
    cursor: pointer;
    z-index: 10;
    border-radius: 4px;
}

#feedback-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-color: #fff;
}

/* Feedback modal */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.modal[hidden] { display: none; }

.modal-content {
    background: #2a2a4a;
    border: 2px solid #8cb4d2;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    border-radius: 8px;
    color: #fff;
    font-family: monospace;
}

.modal-content h3 {
    margin: 0 0 16px 0;
    color: #8cb4d2;
}

.modal-content textarea {
    width: 100%;
    background: #1a1a2e;
    color: #fff;
    border: 1px solid #555;
    padding: 8px;
    font-family: monospace;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.modal-buttons {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.modal-buttons button {
    padding: 8px 20px;
    font-family: monospace;
    cursor: pointer;
    border-radius: 4px;
}

#feedback-send {
    background: #4994b5;
    color: #fff;
    border: none;
}

#feedback-cancel {
    background: transparent;
    color: #8cb4d2;
    border: 1px solid #8cb4d2;
}

#feedback-status {
    margin-top: 8px;
    font-size: 13px;
    color: #f5c731;
    min-height: 18px;
}

/* Responsive: shrink on smaller screens */
@media (max-width: 800px) {
    #c64-canvas {
        width: 100vw;
        height: auto;
        aspect-ratio: 384 / 272;
    }
    #thought-bubble-canvas {
        width: 100vw;
        height: auto;
        aspect-ratio: 384 / 272;
    }
}