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

body {
    font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
    background-color: #0a0a0a;
    color: #00ff00;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
    padding: 0.5rem;
}

.main-layout {
    display: flex;
    gap: 1rem;
    max-width: 1400px;
    margin: auto; /* Centers the layout vertically too, without clipping when it's taller than the window */
    padding: 0.5rem;
}

.game-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: 1px solid #00ff00;
    background-color: #000000;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
    position: relative;
    padding: 0.5rem;
}

.game-side::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #00ff00, #00aa00, #00ff00);
    z-index: -1;
    animation: borderGlow 3s ease-in-out infinite alternate;
}

.dialogue-side {
    flex: 1;
    max-width: 500px;
}

.dialogue-container {
    border: 1px solid #00ff00;
    background-color: #000000;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dialogue-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #00ff00, #00aa00, #00ff00);
    z-index: -1;
    animation: borderGlow 3s ease-in-out infinite alternate;
}

.dialogue-container h2 {
    margin: 0;
    padding: 1rem;
    background-color: #001100;
    border-bottom: 1px solid #00ff00;
    text-align: center;
    font-size: 1.5rem;
    text-shadow: 0 0 5px #00ff00;
}

.dialogue-history {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    border-bottom: 1px solid #00ff00;
    max-height: 50vh;
    scrollbar-width: thin;
    scrollbar-color: #00ff00 #000000;
}

/* Custom scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.dialogue-history::-webkit-scrollbar {
    width: 8px;
}

.dialogue-history::-webkit-scrollbar-track {
    background: #000000;
    border: 1px solid #00ff00;
    border-radius: 0;
}

.dialogue-history::-webkit-scrollbar-thumb {
    background: #00ff00;
    border-radius: 0;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.dialogue-history::-webkit-scrollbar-thumb:hover {
    background: #00aa00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

.dialogue-history::-webkit-scrollbar-thumb:active {
    background: #008800;
}

.dialogue-current {
    padding: 1rem;
    min-height: 200px;
}

.dialogue-message {
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: #001100;
    border-left: 3px solid #00ff00;
    font-style: italic;
}

.dialogue-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dialogue-option {
    padding: 0.75rem;
    background-color: #000000;
    border: 1px solid #00aa00;
    color: #00aa00;
    cursor: pointer;
    transition: all 0.3s;
    text-align: left;
    font-family: 'Courier New', monospace;
    position: relative;
    overflow: hidden;
}

.dialogue-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.1), transparent);
    transition: left 0.5s;
}

.dialogue-option:hover::before {
    left: 100%;
}

.dialogue-option:hover {
    background-color: #001100;
    border-color: #00ff00;
    color: #00ff00;
    transform: translateX(5px);
}

.dialogue-option:active {
    transform: translateX(5px) scale(0.98);
}

.dialogue-option:disabled {
    background-color: #000000;
    border-color: #004400;
    color: #004400;
    cursor: not-allowed;
}

.dialogue-option:disabled:hover {
    transform: none;
}

.option-cost {
    display: inline-block;
    min-width: 3.5em;
    margin-right: 0.75rem;
    padding: 0.1rem 0.3rem;
    border: 1px solid currentColor;
    text-align: center;
    font-weight: bold;
}

.option-cost.free {
    border-style: dashed;
}

.option-unexplored {
    margin-left: 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
}

.dialogue-error {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-left: 3px solid #ff3333;
    color: #ff3333;
}

.player-choice {
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: #001100;
    border-right: 3px solid #00aa00;
    text-align: right;
    font-weight: bold;
}

.system-response {
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: #001100;
    border-left: 3px solid #00ff00;
    font-style: italic;
}

.thinking-animation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: #001100;
    border-left: 3px solid #00aa00;
    font-style: italic;
    color: #00aa00;
}

.thinking-dots {
    display: flex;
    gap: 0.25rem;
}

.thinking-dot {
    width: 6px;
    height: 6px;
    background-color: #00aa00;
    border-radius: 50%;
    animation: thinkingPulse 1.4s ease-in-out infinite;
}

.thinking-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.thinking-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes thinkingPulse {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes borderGlow {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

h1 {
    margin-bottom: 0.5rem;
    font-size: 2rem;
    text-shadow: 0 0 10px #00ff00;
    letter-spacing: 0.1em;
    font-weight: bold;
}

h1::before {
    content: '_> ';
    color: #00aa00;
    animation: blink 1s infinite;
}

h1::after {
    content: '<_';
    color: #00aa00;
    animation: blink 1s infinite;
}

.dice-container {
    perspective: 1000px;
    margin: 0.5rem auto;
    padding: 0.5rem;
}

.dice {
    width: 80px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    transition: none;
    margin: 0.5rem auto;
    border: 2px solid #00ff00;
    background-color: #000000;
}

.face {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #000000;
    border: 2px solid #00ff00;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 5px #00ff00;
}

.front  { transform: translateZ(40px); }
.back   { transform: translateZ(-40px) rotateY(180deg); }
.right  { transform: translateX(40px) rotateY(90deg); }
.left   { transform: translateX(-40px) rotateY(-90deg); }
.top    { transform: translateY(-40px) rotateX(90deg); }
.bottom { transform: translateY(40px) rotateX(-90deg); }

.button-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 0;
}

button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    background-color: #000000;
    color: #00ff00;
    border: 2px solid #00ff00;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 100px;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.2), transparent);
    transition: left 0.5s;
}

button:hover::before {
    left: 100%;
}

button:hover {
    background-color: #001100;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
    transform: translateY(-2px);
}

button:disabled {
    background-color: #111111;
    color: #004400;
    border-color: #004400;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

button:disabled::before {
    display: none;
}

@keyframes roll {
    0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
    100% { transform: rotateX(720deg) rotateY(720deg) rotateZ(720deg); }
}

.rolling {
    animation: roll 1s linear infinite;
}

.history-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 0;
}

.history-button {
    background-color: #000000;
    border-color: #00aa00;
    color: #00aa00;
    min-width: 110px;
}

.history-button:hover {
    background-color: #001100;
    border-color: #00ff00;
    color: #00ff00;
}

.history-container {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #000000;
    border: 1px solid #00ff00;
    border-radius: 0;
    position: relative;
}

.history-container h2 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.history-container h2::before {
    content: '> ';
    color: #00aa00;
}

#inventory {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

#inventory li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    background: #000000;
    border: 1px solid #00ff00;
    font-size: 1rem;
}

#inventory .dice-face {
    width: 35px;
    height: 35px;
    background: #000000;
    border: 2px solid #00ff00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #00ff00;
    font-size: 1rem;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 3px #00ff00;
    transition: all 0.2s ease;
}

/* Hover effects for clickable inventory dice */
#inventory .dice-face.selectable {
    cursor: pointer;
}

#inventory .dice-face.selectable:hover {
    background: #001100;
    border-color: #00aa00;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

#inventory .dice-face.selectable:active {
    transform: scale(0.95);
}

#inventory .dice-face.selected {
    background: #00ff00;
    color: #000000;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

.turn-hint {
    max-width: 380px;
    margin: 0 auto;
    min-height: 3em;
    font-size: 0.8rem;
    color: #00aa00;
    font-family: 'Courier New', monospace;
}

/* Terminal-style cursor animation */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

h1::after {
    content: ' <_';
    color: #00aa00;
    animation: blink 1s infinite;
}

.reset-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    gap: 1rem;
}

.reset-button {
    background-color: #000000;
    color: #ff0000;
    border: 2px solid #ff0000;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    min-width: 75px;
}

.reset-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.2), transparent);
    transition: left 0.5s;
}

.reset-button:hover::before {
    left: 100%;
}

.reset-button:hover {
    background-color: #110000;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    transform: translateY(-2px);
}

/* Color Flocking Canvas Styles */
#canvas {
    width: 100%;
    margin: 0.5rem auto;
    text-align: center;
    border: 1px solid #00ff00;
    background-color: #000000;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    max-width: 600px;
}

#canvas canvas {
    display: block;
    margin: 0 auto;
    border: 1px solid #00ff00;
    max-width: 100%;
    height: auto;
}

/* Ensure canvas container is visible */
#canvas {
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Game area layout - dice on left, buttons on right */
.game-area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.dice-container {
    flex: 0 0 auto;
}

.buttons-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Responsive design */
@media (max-width: 1200px) {
    .main-layout {
        flex-direction: column;
        gap: 1rem;
    }
    
    .dialogue-side {
        max-width: none;
    }
    
    .dialogue-container {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .main-layout {
        padding: 0.5rem;
    }
    
    .game-side, .dialogue-side {
        padding: 0.5rem;
    }
    
    .dialogue-container {
        height: 300px;
    }
    
    .dialogue-option {
        font-size: 0.9rem;
        padding: 0.5rem;
    }
    
    .game-area {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .dice-container {
        margin: 0.5rem 0;
    }
} 

/* Music Control Styles */
.music-control {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
}

.music-button {
    background-color: #000000;
    color: #00ff00;
    border: 2px solid #00ff00;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.music-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.2), transparent);
    transition: left 0.5s;
}

.music-button:hover::before {
    left: 100%;
}

.music-button:hover {
    background-color: #001100;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
    transform: translateY(-2px);
}

.music-button.muted {
    color: #004400;
    border-color: #004400;
}

.music-button.muted:hover {
    background-color: #001100;
    color: #00ff00;
    border-color: #00ff00;
}

.music-text {
    font-size: 0.8rem;
} 
/* Touch screens: hover effects would stick after a tap, and double-tap zoom delays button presses */
@media (hover: none) {
    button:hover,
    .reset-button:hover,
    .music-button:hover,
    .dialogue-option:hover,
    #inventory .dice-face.selectable:hover {
        transform: none;
    }

    button:hover::before,
    .reset-button:hover::before,
    .music-button:hover::before,
    .dialogue-option:hover::before {
        left: -100%;
    }
}

button,
#inventory .dice-face {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Tablets and phones: let the dialogue box grow with its options instead of overflowing a fixed height */
@media (max-width: 768px) {
    .dialogue-container {
        height: auto;
    }

    .dialogue-history {
        min-height: 120px;
        max-height: 45vh;
    }

    .dialogue-current {
        min-height: 0;
    }
}

/* Phones */
@media (max-width: 600px) {
    body {
        padding: 0.25rem;
    }

    .main-layout {
        width: 100%;
        gap: 0.75rem;
        padding: 0.25rem;
    }

    .game-side,
    .dialogue-side {
        min-width: 0;
        padding: 0.5rem;
    }

    .dialogue-side {
        padding: 0;
    }

    h1 {
        font-size: 1.5rem;
    }

    /* p5 sets an inline pixel height on the canvas, so keep its aspect ratio when it shrinks */
    #canvas {
        min-height: 0;
        margin: 0.25rem auto;
    }

    #canvas canvas {
        width: 100% !important;
        height: auto !important;
    }

    /* Dice beside a stack of full-width buttons keeps the controls compact */
    .game-area {
        flex-direction: row;
        gap: 0.75rem;
        margin: 0.75rem auto;
    }

    .dice-container {
        margin: 0;
        padding: 0.5rem 1.25rem 0.5rem 0.75rem;
    }

    .history-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }

    .history-button {
        width: 100%;
        min-width: 0;
        padding: 0.6rem 0.5rem;
    }

    .turn-hint {
        max-width: none;
        min-height: 0;
        font-size: 0.75rem;
        text-align: left;
    }

    #inventory {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    #inventory .dice-face {
        width: 32px;
        height: 32px;
    }

    .reset-container button {
        flex: 1;
        min-width: 0;
        padding: 0.6rem 0.5rem;
    }

    .dialogue-container h2 {
        padding: 0.6rem;
        font-size: 1.2rem;
    }

    .dialogue-history,
    .dialogue-current {
        padding: 0.6rem;
    }

    .dialogue-option {
        font-size: 0.85rem;
        padding: 0.6rem;
        line-height: 1.35;
    }

    .option-cost {
        min-width: 3em;
        margin-right: 0.5rem;
    }
}

/* Password for the bigger remote narrator */
.narrator-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.narrator-key {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.5rem;
    background-color: #000000;
    color: #00ff00;
    border: 1px solid #00aa00;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem; /* 16px on phones below, so iOS doesn't zoom in on focus */
}

.narrator-key:focus {
    outline: none;
    border-color: #00ff00;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
}

.narrator-key:disabled {
    border-color: #004400;
}

.narrator-key::placeholder {
    color: #006600;
}

.narrator-button {
    flex: 0 0 auto;
}

.narrator-status {
    flex: 1 1 100%;
    font-size: 0.75rem;
    color: #00aa00;
    text-align: left;
}

.narrator-status.error {
    color: #ff3333;
}

@media (max-width: 600px) {
    .narrator-key {
        font-size: 1rem;
    }

    .narrator-button {
        min-width: 0;
        padding: 0.6rem 0.75rem;
    }
}

/* Desktop: fix the layout width up front. Otherwise it shrinks to fit its contents and starts narrow
   until the canvas is created and the options load. 1150px is the width it settles at
   (a 618px game panel next to the 500px dialogue). */
@media (min-width: 1201px) {
    .main-layout {
        width: 100%;
        max-width: 1150px;
    }
}