/* === C64 character-ROM fonts ===
   Two of them, in preference order, because their licenses differ.

   C64 Pro Mono (Style, style64.org) is the nicer file - 5.8KB of woff2 - but
   its license forbids providing the files for download from any website, so
   it cannot be committed here. It loads only if you dropped it into fonts/
   yourself; see .gitignore.

   Pet Me 64 (Rebecca Bettencourt / Kreative Software) is the same Commodore 64
   character ROM under a license that DOES permit redistribution, so it ships
   with the repo and is what everyone else sees. It may not be modified, which
   rules out converting it to woff2 or subsetting it - hence a 380KB .ttf,
   about 64KB once served gzipped. fonts/PetMe64-FreeLicense.txt is that
   license, included verbatim as it requires.

   Then plain monospace, so the tracker is legible even with neither. */
@font-face {
    font-family: 'C64 Pro Mono';
    src: url('fonts/C64_Pro_Mono-STYLE.woff2') format('woff2'),
         url('fonts/C64_Pro_Mono-STYLE.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pet Me 64';
    src: url('fonts/PetMe64.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* === C64 VIC-II 16-Color Palette === */
:root {
    --c64-black:      #000000;
    --c64-white:      #ffffff;
    --c64-red:        #880000;
    --c64-cyan:       #aaffee;
    --c64-purple:     #cc44cc;
    --c64-green:      #00cc55;
    --c64-blue:       #0000aa;
    --c64-yellow:     #eeee77;
    --c64-orange:     #dd8855;
    --c64-brown:      #664400;
    --c64-lightred:   #ff7777;
    --c64-darkgray:   #333333;
    --c64-gray:       #777777;
    --c64-lightgreen: #aaff66;
    --c64-lightblue:  #0088ff;
    --c64-lightgray:  #bbbbbb;

    /* Semantic mappings */
    --bg-main:        var(--c64-blue);
    --bg-dark:        var(--c64-black);
    --bg-panel:       #14148b;
    --border-main:    var(--c64-lightblue);
    --text-primary:   var(--c64-lightblue);
    --text-note:      var(--c64-yellow);
    --text-instrument:var(--c64-cyan);
    --text-command:   var(--c64-purple);
    --text-cmddata:   var(--c64-orange);
    --text-header:    var(--c64-lightblue);
    --text-dim:       var(--c64-gray);
    --text-bright:    var(--c64-white);
    --accent:         var(--c64-lightgreen);
    --btn-bg:         var(--c64-darkgray);
    --btn-text:       var(--c64-lightgreen);
    --btn-border:     var(--c64-green);

    /* The C64 Pro Mono font is a bitmap face designed for 8px, which is what
       every font-size below assumes. On a modern display that is about a
       quarter of the size it had on a 1980s TV, so scale the whole UI instead
       of touching the sizes -- integer values stay pixel-perfect. Set by
       ui-scale.js from localStorage; the Tools panel has the selector. */
    --ui-scale: 1.5;
}

/* === Global Reset & Body === */
* {
    border-radius: 0 !important;
}

body {
    zoom: var(--ui-scale);
    font-family: 'C64 Pro Mono', 'Pet Me 64', 'Courier New', monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    background-color: var(--bg-main);
    color: var(--text-primary);
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
    image-rendering: pixelated;
}

h1 {
    color: var(--c64-white);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 24px;
    text-shadow: 2px 2px 0 var(--c64-black);
    animation: c64ColorCycle 8s linear infinite;
}

@keyframes c64ColorCycle {
    0%   { color: var(--c64-white); }
    12%  { color: var(--c64-cyan); }
    25%  { color: var(--c64-lightgreen); }
    37%  { color: var(--c64-yellow); }
    50%  { color: var(--c64-orange); }
    62%  { color: var(--c64-lightred); }
    75%  { color: var(--c64-purple); }
    87%  { color: var(--c64-lightblue); }
    100% { color: var(--c64-white); }
}

/* === Controls === */
.controls {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 1200px;
}

.control-section {
    background-color: var(--bg-panel);
    padding: 8px;
    border: 2px solid var(--border-main);
    min-width: 120px;
}

.control-section h3 {
    margin: 0 0 6px 0;
    font-size: 8px;
    color: var(--c64-black);
    background: var(--text-header);
    text-align: center;
    padding: 2px 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.control-section button {
    display: block;
    width: 100%;
    margin: 2px 0;
    font-size: 8px;
    padding: 4px 6px;
}

.control-section select {
    width: 100%;
    margin: 2px 0;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-main);
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
    font-size: 8px;
}

.control-section input[type="range"] {
    width: 100%;
    margin: 2px 0;
}

.control-section span {
    font-size: 8px;
    display: block;
    text-align: center;
    color: var(--text-dim);
    margin: 2px 0;
}

/* === Buttons (Global) === */
button {
    margin: 0;
    padding: 6px 12px;
    font-size: 8px;
    font-family: 'C64 Pro Mono', 'Pet Me 64', 'Courier New', monospace;
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 2px solid var(--btn-border);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-font-smoothing: none;
}

button:hover {
    background-color: var(--c64-green);
    color: var(--c64-black);
}

/* === Tracker Container === */
#tracker-container {
    display: flex;
    flex-direction: row;
    border: 2px solid var(--border-main);
    padding: 10px;
    margin-top: 20px;
    background-color: var(--bg-panel);
    align-items: flex-start;
}

.step-numbers-column {
    display: flex;
    flex-direction: column;
    margin-right: 5px;
    padding-top: 50px;
}

.step-number {
    font-weight: bold;
    width: 30px;
    text-align: right;
    height: 28px;
    line-height: 28px;
    margin-bottom: 2px;
    padding-right: 5px;
    box-sizing: border-box;
    color: var(--text-dim);
}

.track-column-header {
    display: flex;
    justify-content: space-around;
    padding: 5px;
    border-bottom: 1px solid var(--border-main);
    margin-bottom: 5px;
}

.track-column-header div {
    font-weight: bold;
    width: 70px;
    text-align: center;
}

.track {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    border: 1px solid var(--border-main);
    padding: 5px;
    margin-left: 5px;
}

.track h2 {
    margin-top: 0;
    color: var(--text-header);
    text-align: center;
    margin-bottom: 5px;
}

.step {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2px;
    align-items: center;
    height: 28px;
}

.step input, .step select {
    width: 70px;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-main);
    padding: 2px;
    text-align: center;
    height: 24px;
    box-sizing: border-box;
    margin: 0;
    line-height: normal;
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
}

.step select.instrument-select {
    width: 100px;
}

.step input[type="number"] {
    -moz-appearance: textfield;
}

.step input::-webkit-outer-spin-button,
.step input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.highlight {
    background-color: var(--c64-lightgreen);
    color: var(--c64-black);
}

/* === Modal Styles === */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 170, 0.6);
}

.modal-content {
    background-color: var(--bg-panel);
    margin: 2% auto;
    padding: 0;
    border: 3px solid var(--border-main);
    outline: 2px solid var(--c64-black);
    width: 80%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
}

.modal-header {
    background-color: var(--text-header);
    color: var(--c64-black);
    padding: 8px 16px;
    border-bottom: 2px solid var(--border-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
}

.modal-header h2 {
    margin: 0;
    color: var(--c64-black);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.close {
    color: var(--c64-black);
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.close:hover {
    color: var(--c64-red);
}

.modal-body {
    padding: 16px;
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-main) var(--bg-dark);
}

/* WebKit scrollbar */
#instrumentEditorModal .modal-body::-webkit-scrollbar {
    width: 10px;
}
#instrumentEditorModal .modal-body::-webkit-scrollbar-track {
    background: var(--bg-dark);
    border-left: 1px solid var(--border-main);
}
#instrumentEditorModal .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--border-main);
    border: 1px solid var(--c64-lightblue);
}

.instrument-selector {
    background-color: var(--bg-dark);
    padding: 12px;
    border: 2px solid var(--border-main);
    margin-bottom: 16px;
}

.instrument-selector label {
    display: inline-block;
    margin-right: 10px;
    font-weight: bold;
    color: var(--text-header);
}

.instrument-selector select {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-main);
    padding: 5px;
    margin-right: 10px;
    width: 200px;
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
}

.instrument-selector button {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    padding: 5px 10px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 8px;
}

.instrument-selector button:hover {
    background-color: var(--c64-green);
    color: var(--c64-black);
}

.instrument-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

#instrumentEditorModal .filter-section,
#instrumentEditorModal .filterlfo-section {
    display: none;
}

.param-section {
    background-color: var(--bg-dark);
    padding: 12px;
    border: 2px solid var(--border-main);
}

.param-section h3 {
    margin: 0 0 12px 0;
    color: var(--c64-black);
    background: var(--text-header);
    font-size: 8px;
    padding: 3px 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.param-row {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.param-row label {
    font-weight: bold;
    font-size: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-header);
}

.param-row input[type="text"] {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-main);
    padding: 6px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
}

.param-row input[type="range"] {
    width: 100%;
    background-color: var(--bg-dark);
    height: 6px;
    outline: none;
}

.param-row input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--c64-lightblue);
    cursor: pointer;
    border: 1px solid var(--c64-black);
}

.param-row input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--c64-lightblue);
    cursor: pointer;
    border: 1px solid var(--c64-black);
}

.param-row select {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-main);
    padding: 6px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
}

.param-row input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.2);
}

.param-row input[type="number"] {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-main);
    padding: 4px 6px;
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
}

.param-hint {
    color: var(--text-dim);
    font-size: 8px;
    font-style: italic;
    margin-left: 10px;
}

.modal-footer {
    background-color: var(--bg-dark);
    padding: 12px 16px;
    border-top: 2px solid var(--border-main);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-footer button {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 2px solid var(--btn-border);
    padding: 8px 16px;
    cursor: pointer;
    font-size: 8px;
}

.modal-footer button:hover {
    background-color: var(--c64-green);
    color: var(--c64-black);
}

/* === Song Editor === */
.song-info {
    margin-bottom: 16px;
    padding: 12px;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-main);
}

.song-sequence {
    margin-bottom: 16px;
}

.song-sequence h3 {
    color: var(--text-header);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-main);
    padding-bottom: 5px;
}

#sequenceList {
    border: 2px solid var(--border-main);
    background-color: var(--bg-dark);
    min-height: 150px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 10px;
}

.sequence-item {
    display: flex;
    align-items: center;
    padding: 6px;
    margin: 2px 0;
    background-color: var(--bg-panel);
    cursor: pointer;
}

.sequence-item:hover {
    background-color: #1a1aaa;
}

.sequence-item.selected {
    background-color: var(--c64-green);
    border: 1px solid var(--c64-lightgreen);
    color: var(--c64-black);
}

.sequence-position {
    color: var(--text-dim);
    min-width: 30px;
    font-size: 8px;
}

.sequence-pattern {
    flex-grow: 1;
    color: var(--text-note);
    font-weight: bold;
    margin-left: 10px;
}

.sequence-pattern.current {
    color: var(--c64-white);
    text-shadow: 0 0 5px var(--c64-yellow);
}

.sequence-item button {
    margin-left: 5px;
    padding: 2px 8px;
    font-size: 8px;
    min-width: 25px;
}

.sequence-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.sequence-controls select {
    flex-grow: 1;
    min-width: 200px;
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
}

.pattern-list {
    margin-bottom: 20px;
}

.pattern-list h3 {
    color: var(--text-header);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-main);
    padding-bottom: 5px;
}

#patternGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--border-main);
    background-color: var(--bg-dark);
}

.pattern-grid-item {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-main);
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

.pattern-grid-item:hover {
    background-color: #1a1aaa;
    border-color: var(--c64-lightblue);
}

.pattern-letter {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-note);
    margin-bottom: 5px;
}

.pattern-letter.current {
    color: var(--c64-white);
    text-shadow: 0 0 5px var(--c64-yellow);
}

.pattern-name {
    font-size: 8px;
    color: var(--c64-lightgray);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pattern-info {
    font-size: 8px;
    color: var(--text-dim);
}

/* === Keyboard Input Status === */
body.keyboard-input-active {
    border-top: 3px solid var(--c64-lightgreen);
}

/* === Recording Mode === */
.recording-highlight {
    background-color: var(--c64-red) !important;
    border: 2px solid var(--c64-lightred) !important;
    box-shadow: 0 0 10px var(--c64-red);
}

#recordStatus {
    color: var(--c64-lightred);
    font-weight: bold;
    font-size: 8px;
    background-color: var(--c64-black);
    padding: 2px 6px;
    border: 1px solid var(--c64-red);
}

.control-section label {
    font-size: 8px;
    color: var(--c64-lightgray);
    display: flex;
    align-items: center;
    margin: 2px 0;
}

.control-section input[type="checkbox"] {
    margin-right: 4px;
}

body.keyboard-input-active::before {
    content: "KEYBOARD INPUT ACTIVE";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--c64-lightblue);
    color: var(--c64-black);
    text-align: center;
    padding: 4px;
    font-size: 8px;
    font-weight: bold;
    z-index: 10000;
    display: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

body.keyboard-input-active input:focus,
body.keyboard-input-active textarea:focus,
body.keyboard-input-active select:focus {
    box-shadow: 0 0 0 2px var(--c64-lightblue);
    outline: none;
}

body.keyboard-input-active .text-input-focused {
    background-color: var(--bg-panel) !important;
    border-color: var(--border-main) !important;
    box-shadow: 0 0 5px rgba(0, 136, 255, 0.5) !important;
}

body.keyboard-input-active {
    cursor: default;
}

body.keyboard-input-active input,
body.keyboard-input-active textarea {
    cursor: text;
}

/* === Help Modal === */
.help-section {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-main);
}

.help-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.help-section h3 {
    color: var(--text-header);
    margin-bottom: 8px;
    font-size: 8px;
    text-transform: uppercase;
}

.help-section p {
    margin: 6px 0;
    color: var(--c64-lightgray);
    line-height: 1.4;
    font-size: 8px;
}

.help-section ul {
    margin: 8px 0;
    padding-left: 20px;
    color: var(--c64-lightgray);
}

.help-section li {
    margin: 4px 0;
    line-height: 1.3;
    font-size: 8px;
}

.help-section code {
    background-color: var(--bg-dark);
    color: var(--c64-yellow);
    padding: 2px 4px;
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
    font-size: 8px;
}

.keyboard-layout {
    background-color: var(--bg-dark);
    padding: 12px;
    margin: 8px 0;
    border: 1px solid var(--border-main);
}

.keyboard-layout p {
    margin: 6px 0;
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
}

.keyboard-layout code {
    display: inline-block;
    margin: 2px 0;
    font-size: 8px;
    letter-spacing: 1px;
}

@media (max-width: 1000px) {
    .instrument-params {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 95%;
        margin: 1% auto;
    }

    .keyboard-layout code {
        font-size: 8px;
    }
}

/* === Table Editor === */
.table-editor-content {
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.table-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-main);
}

.table-operations {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    justify-content: center;
}

.table-operations button {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    padding: 6px 12px;
    cursor: pointer;
    font-size: 8px;
}

.table-operations button:hover {
    background-color: var(--c64-green);
    color: var(--c64-black);
}

.table-loop-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-main);
}

.table-loop-controls .param-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.table-loop-controls input[type="number"] {
    width: 50px;
}

.table-data-container {
    background-color: var(--bg-dark);
    border: 2px solid var(--border-main);
    margin-bottom: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.table-data-header {
    display: grid;
    grid-template-columns: 50px 80px 80px 1fr;
    gap: 1px;
    background-color: var(--text-header);
    color: var(--c64-black);
    padding: 6px 8px;
    font-weight: bold;
    border-bottom: 2px solid var(--border-main);
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 8px;
    text-transform: uppercase;
}

.table-data-grid {
    max-height: 350px;
    overflow-y: auto;
}

.table-row {
    display: grid;
    grid-template-columns: 50px 80px 80px 1fr;
    gap: 1px;
    padding: 3px 8px;
    border-bottom: 1px solid #1a1a4a;
    align-items: center;
}

.table-row:hover {
    background-color: var(--bg-panel);
}

.table-row.loop-start {
    border-left: 3px solid var(--c64-green);
}

.table-row.loop-end {
    border-right: 3px solid var(--c64-red);
}

.table-step {
    font-weight: bold;
    color: var(--text-dim);
    text-align: center;
}

.table-value input {
    width: 70px;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-main);
    padding: 2px 4px;
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
    font-size: 8px;
}

.table-value input:focus {
    border-color: var(--c64-white);
    outline: none;
}

.table-hex {
    font-family: 'C64 Pro Mono', 'Pet Me 64', monospace;
    color: var(--c64-lightgray);
    font-size: 8px;
    text-align: center;
}

.table-desc {
    color: var(--c64-lightgray);
    font-size: 8px;
    padding-left: 5px;
}

.table-presets {
    text-align: center;
    margin-bottom: 12px;
}

.table-presets h3 {
    color: var(--text-header);
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-main);
    padding-bottom: 5px;
    font-size: 8px;
    text-transform: uppercase;
}

.preset-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.preset-buttons button {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    padding: 4px 10px;
    cursor: pointer;
    font-size: 8px;
}

.preset-buttons button:hover {
    background-color: var(--c64-green);
    color: var(--c64-black);
}

@media (max-width: 600px) {
    .table-editor-content {
        width: 95%;
    }

    .table-controls {
        grid-template-columns: 1fr;
    }

    .table-data-header,
    .table-row {
        grid-template-columns: 40px 60px 60px 1fr;
        font-size: 8px;
    }

    .table-value input {
        width: 50px;
        font-size: 8px;
    }
}

/* === GT2 Editors Wrapper === */
#gt2-editors-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
}

#gt2-editors-wrapper > div {
    width: 100%;
}

/* === CRT Overlay === */
#crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.4);
    animation: crtOn 0.4s ease-out;
}

@keyframes crtOn {
    0% {
        transform: scaleY(0.005);
        filter: brightness(30);
    }
    40% {
        transform: scaleY(1.1);
        filter: brightness(1.5);
    }
    100% {
        transform: scaleY(1);
        filter: brightness(1);
    }
}