/* Custom Styles for TI-83 */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
    -webkit-tap-highlight-color: transparent;
}

/* Authentic dot-matrix LCD feel */
.lcd-screen {
    background-color: #9cb198;
    font-family: 'VT323', monospace;
    box-shadow: inset 3px 3px 8px rgba(0,0,0,0.5);
    text-shadow: 1px 1px 0px rgba(0,0,0,0.15);
}

/* Button Base styling */
.calc-btn {
    border-radius: 4px;
    box-shadow: 1px 3px 4px rgba(0,0,0,0.6), inset 1px 1px 2px rgba(255,255,255,0.3);
    transition: transform 0.05s, box-shadow 0.05s;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

/* Button Active states */
.calc-btn:active {
    transform: translateY(2px);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.6), inset 1px 1px 3px rgba(0,0,0,0.4);
}

/* Color Variants */
.btn-gray {
    background: linear-gradient(to bottom, #7d8084, #57595c);
    color: #f1f1f1;
    border: 1px solid #444;
}

.btn-black {
    background: linear-gradient(to bottom, #4a4a4a, #2a2a2a);
    color: #e5e5e5;
    border: 1px solid #111;
}

.btn-blue {
    background: linear-gradient(to bottom, #5d88a1, #3f6880);
    color: #ffffff;
    border: 1px solid #2d4f63;
}

.btn-yellow {
    background: linear-gradient(to bottom, #e3c45b, #b59b3f);
    color: #111111;
    border: 1px solid #8f792e;
}

/* Scrollbar styling for tape container */
#tape-container::-webkit-scrollbar {
    width: 6px;
}
#tape-container::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;
}
#tape-container::-webkit-scrollbar-thumb {
    background: #ccc; 
    border-radius: 4px;
}
#tape-container::-webkit-scrollbar-thumb:hover {
    background: #bbb; 
}