:root {
  --darkbg: #2d2d2d;
  --lightbg: #e1dfe1;
  --lighterbg: #f0f0f0;
  --lightgray: #d8d8d8;
}
:root {
    --keyboard_bottom_margin: 0px;
    --keycap_zoom: 1.0;
    --keycap_size: calc(calc(calc(100vw / var(--keycap_columns)) *4) * var(--keycap_zoom));
}
#keyboard_grid {
    display:grid;
    grid-template-columns: repeat(var(--keycap_columns), calc(calc(var(--keycap_size) /4) * 1.0));
    grid-template-rows: repeat(6, calc(var(--keycap_size)));
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    user-select:none;
    padding-bottom: var(--keyboard_bottom_margin);
}
.keycap_base {
    background-color: var(--gray);
    color:white;
    border-radius: calc(var(--keycap_size) * 0.1);
    align-items: center;
    text-align: center;
    font-size:calc(var(--keycap_size) / 2.5);

    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: calc(var(--keycap_size) * 0.038);
}

@media (max-width: 511px) {
    :root {
        --keycap_size: calc(calc(calc(max(100vw,100vh) / var(--keycap_columns)) * 4) * var(--keycap_zoom));
    }       
}

#canvas {
    position:fixed;
    left:0;
    right:0;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

.select-all {
    user-select: all;
    -webkit-user-select: all;
    font-style: italic;
}
.select-all:hover {
    background: #555;
}

.pixel_art{
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#drop_zone {
    cursor: pointer;
    border: 3px dashed var(--blue);
    height: 30px;
    border-radius: 5px;
    min-width: 64px;
    white-space: nowrap;
}

[data-theme="dark"] #drop_zone {
    background-color: var(--darkbg);
}

.scrollx-group > .row {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.scrollx-group > .row > .col-xs-4 {
flex: 0 0 auto;
}
.scrollx-group > .row > .col {
flex: 0 0 auto;
}

body
{
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    overflow:hidden;
    overscroll-behavior: none; /* blocks swipe navigation */
    background-color: var(--lighterbg) !important;
}

[data-theme="dark"] {
background-color: black !important;
color: var(--lightgray) !important;
}
    


/* the filled circle in the switch was to high */
.custom-switch .custom-control-label::before{
    top: .23rem;
}

[data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before {
border-color: var(--green) !important;
background-color: var(--green) !important;
}

#port1, #port2 {
    height:32px;
    width: calc(100vw / 8);
    padding-top: .18rem;
    margin-top: 1px; 
    background-color: inherit !important;
    border-color: var(--darkbg);
    color: var(--darkbg) !important;
    font-size: 15px;
    text-align: center;
    text-align-last: center;
    padding-left: 1px;
    padding-right: 1px;
}

    
[data-theme="dark"] #port1, [data-theme="dark"] #port2 {
    border-color: var(--lightgray);
    color: var(--lightgray) !important;
}

#select_other_group {
    background-color: inherit !important;
    border-color: var(--darkbg);
    color: var(--darkbg) !important;
    margin-bottom: 1em;
}
    
[data-theme="dark"] #select_other_group {
    border-color: var(--lightgray);
    color: var(--lightgray) !important;
}



#stored_roms, #stored_exts {
    background-color: inherit !important;
    border-color: var(--darkbg);
    color: var(--darkbg) !important;
}

[data-theme="dark"] #stored_roms, [data-theme="dark"] #stored_exts {
    border-color: var(--lightgray);
    color: var(--lightgray) !important;
}


.btn-sm
{
    font-size: .86rem;
}

.custom_key
{
    font-size: 1.2rem !important;
    opacity: 0.7 !important;
    z-index: 20;
    user-select: none;
    --tx: 0;
    --ty: 0;
    transform: translate3d(var(--tx), var(--ty), 0);
    padding: var(--padding) max(0.5rem, var(--padding)) var(--padding) max(0.5rem, var(--padding));
    --padding: 0.05rem;
    --scale_factor: min(1, calc( calc((var(--padding) / 4rem)) * 0.2));
}

[data-theme="dark"] .custom-select {
color: var(--lightgray) !important;
border-color: var(--lightgray) !important;
}

[data-theme="dark"] #output {
background-color: var(--gray) !important;
color: var(--light) !important;
}

.modal-content {
background-color: var(--lightbg) !important;
}

[data-theme="dark"] .modal-content {
background-color: var(--darkbg) !important;
}

[data-theme="dark"] .close {
color: var(--light) !important;
}

.card {
background-color: var(--lighterbg) !important;
}
[data-theme="dark"] .card {
background-color: #555 !important;
}

[data-theme="dark"] .list-group-item {
background-color: #555 !important;
color: var(--light) !important;
}

[data-theme="dark"] .list-group-item.active {
background-color: #007bff !important;
}

[data-theme="dark"] .list-group-item.disabled {
color: #aaa !important;
}



#virtual_keyboard {
    position:fixed;
    bottom:0;
    z-index:999;
    width:100%;
    background-color: var(--lightbg);
}

@media (orientation:landscape) {
    #virtual_keyboard {
        opacity: var(--keyboard_opacity);
    }
}


[data-theme="dark"] #virtual_keyboard {
    background-color:var(--darkbg);
}

.help_text span, .movable_button_label span, .gc_choice_text span, .vbk_choice_text span, .vjoy_choice_text span, .setting_text span {
    background-color: var(--gray);
    border-radius: 6px;
    padding-left: 4px;
    padding-right: 4px;
    color: white;
}


#navbar {
    background-color: var(--lightbg);

    position: fixed; 
    top:0; 
    left:0; 
    opacity: 0.85; backdrop-filter: blur(6px);

    width: 100vw;
}
#button_show_menu {
    position: fixed; 
    top:6px; 
    left:calc(env(safe-area-inset-left) / 2);
    z-index:200;    
}
#navgrid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px;
    width: 100%;
}

.left {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(36px, auto)); /* Responsive grid for left side */
    gap: 0px;
    justify-content: start;
    margin-left: calc(env(safe-area-inset-left) / 2);
}

.left > *, .right > * {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
}
.left > * {
    min-width: 45px;
    margin-left: 4px;
    margin-right: 4px;
}

#theFileInput {
    grid-column: span 2;
}

.right {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 1px;
    justify-content: end;
    padding-right: 2px;
    margin-right: calc(env(safe-area-inset-right) / 2);
}

@media (max-width: 600px) {
    .hide-on-small {
      display: none;
    }
}


[data-theme="dark"] #navbar {
    background-color:var(--darkbg);
}

#div_toast {
    z-index:2000;
}   
#toast_body, #toast_header  {
    background-color:var(--lightbg);
}
[data-theme="dark"] #toast_body, [data-theme="dark"] #toast_header  {
    background-color:var(--dark);
    color:white;
}


.icon {
    fill: var(--dark);
    color: var(--dark) !important;
}

[data-theme="dark"] .icon {
    fill: var(--lightgray);
    color: var(--lightgray) !important;
}




.justify-start {
  margin-right: auto;
}




.custom-control-lg .custom-control-label::before,
.custom-control-lg .custom-control-label::after {
    top: 0.0rem !important;
    left: -2rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.custom-control-lg .custom-control-label {
    margin-left: 0.5rem !important;
    font-size: 1rem !important;
}

.alert-darkest {
    color: var(--light);
    background-color: var(--gray);
    border-color: #c6c8ca;
}

#no_disk_rom_msg {
    color: var(--light);
    background-color: var(--danger);
    border-color: #c6c8ca;
}

.browser-item-text {
    font-size: small;
}

#view_detail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-color: var(--lightbg);
    outline: none;
    overflow-y: auto;
    opacity: 1.0;
    padding-left: calc(env(safe-area-inset-left) * 2.25);
    padding-right: calc(env(safe-area-inset-right) * 2.25);
}


[data-theme="dark"] #view_detail {
    background-color: var(--darkbg);
}



#detail_content{
    margin-top:45px;
}

.detail_screenshot {
    width: 100%;
}

#detail_back {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 45px;
    text-align: left;
    background-color: var(--darkbg);
    opacity: 0.6;
    font-size: larger;
    border: none;
    color: var(--light);
}

button[id^="detail_run"] {
    width: 100%;
    font-size: xx-large;
}

.copy-btn {
    background-color: var(--lightbg);
    border-color: var(--lightbg);
    color: var(--blue);
}

[data-theme="dark"] .copy-btn {
    background-color: var(--darkbg);
    border-color: var(--darkbg);
    color: var(--blue);
}

.copy_run_link {
    width: 94%;
    font-size: xx-small;
    background-color: var(--lightbg);
    /*color: var(--dark);*/
    border: none;
}

[data-theme="dark"] .copy_run_link {
    background-color: var(--darkbg);
    color: var(--secondary);
}

#search {
    border-color: var(--blue);
    border-left: none;
}

[data-theme="dark"] #search {
    background-color: var(--darkbg);
    color: var(--light);
    border-color: var(--blue);
    border-left: none;
}

#search_symbol {
    background-color: #0062cc;
    border: none;
    color: var(--light);
}

#alert_wait, #alert_import {
    z-index: 2000;
    top: 40%;
    left: 15%;
    position: absolute;
    width: 70%;
    opacity: 0.83;
}


[data-theme="dark"] textarea {
    background-color: var(--darkbg);
    color: var(--light);
}


[data-theme="dark"] .dropdown-menu.show {
    background-color: #444444;
}

[data-theme="dark"] .dropdown-item {
    color: var(--light);
}

.dropdown-item:focus, 
.dropdown-item:hover {
    background-color: var(--blue);
    color: var(--light);
}

#vbk_scroll_area {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top:var(--keycap_size);
    margin-top:calc( var(--keycap_size) * -1);
}

.keycap_shift {
    font-size:calc(var(--keycap_size) / 4.5);
}

[shift-keys="pressed"] .keycap_shift {
    font-size:calc(var(--keycap_size) / 2.5);
}

.keycap_base:hover, .keycap_base:focus, .keycap_base:active  {
    background-color: #5a6268;
}

[id^="button_Enter"]:hover, [id^="button_Enter"]:focus, [id^="button_Enter"]:active {
   background-color: var(--gray);
}


.keycap {
    font-size:calc(var(--keycap_size) / 2.5);
}
/* keyboard grid gap */
.g-1 { grid-column: auto / span 1 }
.g-2 { grid-column: auto / span 2 }
.g-3 { grid-column: auto / span 3 }
.g-4 { grid-column: auto / span 4 }
.g-5 { grid-column: auto / span 5 }
.g-6 { grid-column: auto / span 6 }
.g-7 { grid-column: auto / span 7 }
.g-8 { grid-column: auto / span 8 }
.g-9 { grid-column: auto / span 9 }
.g-10 { grid-column: auto / span 10 }
.g-11 { grid-column: auto / span 11 }
.g-15 { grid-column: auto / span 15 }

.g-32 { grid-column: auto / span 32 }

[shift-keys="pressed"] .keycap {
    font-size:calc(var(--keycap_size) / 4.5);
}
@keyframes pressedAnimation {
  0%   { transform: scale(1.0); }
  10%  { transform: translateY(-8%); }
  40%  { transform: scale(0.8) translateY(-10%); }
  50%  { transform: scale(1.2) translateY(-15%); }
  65%  { transform: scale(1.35) translateY(-20%);}
  100% { transform: scale(1.25) translateY(-40%); }
}

@keyframes releasedAnimation {
  0%   { transform: scale(1.25); }
  25%  { transform: scale(1.35); }
  40%  { transform: scale(0.92); }
  50%  { transform: scale(1.04); }
  65%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@keyframes pressedSpaceAnimation {
  0%   { transform: scale(1.0); }
  40%  { transform: scale(0.98); }
  50%  { transform: scale(1.04); }
  65%  { transform: scale(1.08);}
  100% { transform: scale(1.06); }
}

@keyframes releasedSpaceAnimation {
  0%   { transform: scale(1.06); }
  25%  { transform: scale(1.04); }
  40%  { transform: scale(0.97); }
  50%  { transform: scale(1.01); }
  65%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}

.keycap_base[key-state="pressed"] {
    box-shadow: inset 0 0 0.05em rgba(255,255,255,0.5), 0 0 15px 10px rgba(0,0,0,0.1);
    animation: pressedAnimation 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
    z-index: 1000;
}

.keycap_base[key-state=""] {
    animation: releasedAnimation 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

#button_Space[key-state="pressed"] {
    box-shadow: inset 0 0 0.05em rgba(255, 255, 255, 0.5), 0em 0em 3em rgba(0, 0, 0, 0.5);
    animation: pressedSpaceAnimation 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

#button_Space[key-state=""] {
    animation: releasedSpaceAnimation 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

[id^="button_Enter"][key-state="pressed"] {
    box-shadow: none;
    animation: pressedSpaceAnimation 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
    background-color: var(--blue) !important;
}

[id^="button_Enter"][key-state=""] {
    animation: releasedSpaceAnimation 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}


.darkkey {
    background-color: rgb(78,87,95);
    border-color: #222222;
}
.capslock,.ControlLeft {
    font-size:calc(var(--keycap_size) / 4.5);
}

.amigakey { 
    color: rgb(255, 137, 37);
    font-style: italic;
    font-weight: bold;
    font-family: serif;
    font-size:calc(var(--keycap_size) / 2);
    padding-top: 0;
    padding-bottom: 0;
}

[ControlLeft-key="pressed"] #button_ControlLeft
{
    background-color: var(--blue) !important
}

[CapsLock-key="pressed"]  #button_CapsLock, 
[ShiftLeft-key="pressed"]  #button_ShiftLeft,
[ShiftRight-key="pressed"] #button_ShiftRight,
[leftAmiga-key="pressed"]  #button_leftAmiga,
[rightAmiga-key="pressed"] #button_rightAmiga,
[AltLeft-key="pressed"]  #button_AltLeft,
[AltRight-key="pressed"] #button_AltRight
{
    background-color: var(--green) !important;
}



.outlined {
    border-radius:5px;
    border-style:solid;
    border-width: 2px;
}



#div_drive_select {
    position:absolute;
    z-index:3000;
    bottom:0;
    left:5%;
    width:90%;
    padding-bottom: env(safe-area-inset-bottom);
    display:flex;
    flex-direction:column;
    justify-content:center;
    transform: translateY(100%);
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    background-color: var(--lightbg);
}
[data-theme="dark"] #div_drive_select {
    background-color:var(--dark);
}

#drive_select_file {
    padding:0.5em;
    margin-top: 1.4em;
    background-color: var(--lightbg);
    display:flex;
    justify-content:center;
}
[data-theme="dark"] #drive_select_file {
    background-color:var(--dark);
}


#drive_select_choice {
    padding-top: 0.5em;
    display:flex;width:100%;
    flex-direction:row;
    justify-content:center;
    background-color: var(--lightbg);
}
[data-theme="dark"] #drive_select_choice {
    background-color:var(--dark);
}

.slide-in {
    animation: slide-in 0.5s forwards;
}

.slide-out {
    animation: slide-out 0.7s forwards;
}
    
@keyframes slide-in {
    100% { transform: translateY(0%); }
}
    
@keyframes slide-out {
    0% { transform: translateY(0%); }
    100% { transform: translateY(100%); }
}

#version_selector {
    border-radius:6px;
    border-width:2px;
}

[data-theme="dark"] #version_selector {
    border-color:var(--light);
    background-color:var(--darkbg);
    color:var(--light);    
}


.is-invalid~.invalid-feedback, .is-invalid~.invalid-tooltip, .was-validated :invalid~.invalid-feedback, .was-validated :invalid~.invalid-tooltip {
    display: block;
    background-color: red;
    color: white;
    border-bottom-right-radius: 0.4em;
    border-bottom-left-radius: 0.4em;
    padding: 0.4em;
    margin-top: 0;
    margin-left: 0.15em;
    margin-right: 0.15em;
}

#div_canvas
{ 
	position : relative;
	overflow : hidden;
}


.monitor_grid {
    height: auto;
    width: 100vw;
    position: absolute;
    display:grid;grid-template-columns: repeat(10, 1fr);grid-column-gap: 0.5em;
    bottom: 0;left: 0;background-color: rgba(200, 200, 200, 0.0);
    padding-bottom: env(safe-area-inset-bottom);
}

.monitor_hull {
    background-color: rgba(250, 250, 250, 0.8);
    border-radius: 0.5em 0.5em 0 0;
}

[data-theme="dark"] .monitor_hull {
    background-color: rgba(0, 0, 0, 0.7);
}

.monitor {
    height: 12vh;
    display: grid;grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(100, 1fr);grid-column-gap: 0.5px;
    --color_start:50,50,50;--color_end:150,150,150;
    background: linear-gradient(to top, rgba(var(--color_start),0.3), rgba(var(--color_end),0.3));        
    border: var(--color_end);
    border-style: none;
    border-radius: 0.5em 0.5em 0 0;
}
[data-theme="dark"] .monitor {
    --color_end:200,200,200;
}

@media (max-width: 1023px) {
    .monitor_grid {
        display:grid;grid-template-columns: repeat(5, 1fr);grid-column-gap: 0.5em;
    }       
    .monitor {
        height: 10vh;
    }
}
.monitor_label {
    display:flex;justify-content:center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgb(100, 100, 100, 1));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;font-size: smaller;
    background-clip: text;font-size: smaller;
}
[data-theme="dark"] .monitor_label {
    background: linear-gradient(to top, rgba(100,100,100,0.8), rgb(200,200,200,1));
    background-clip: text;
}

.bar {
    --scale: 100;
    --start: calc(var(--scale) + 1 - var(--barval));
    grid-row: var(--start) / 100;
    border-radius: 1px 1px 0 0;
    background: linear-gradient(to top, rgba(var(--color_start),0.6), rgba(var(--color_end),0.6));
}

.bar_splitted_upper {
    --scale: 100;
    --start: calc(var(--scale) + 1 - var(--barval));
    grid-row: calc(var(--start) / 2) / 50;
    border-radius: 1px 1px 0 0;
    background: linear-gradient(to top, rgba(0,150,0.4), rgba(0,255,0,0.4));
}
.bar_splitted_lower {
    --end: var(--barval);
    grid-row: 50 / calc(calc(var(--end) / 2) + 50);
    border-radius: 1px 1px 0 0;
    background: linear-gradient(to top, rgba(150,0,0,0.4), rgba(255,0,0,0.4));
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}
[warpstate="1"] #no_warping {
    display: none
}
[warpstate="0"] #warping {
    display: none
}

#mastervolume {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center; /* Vertikale Zentrierung */
    margin: 10px 0; /* Abstand um das Grid */
}

#volumetext 
{
    display: flex;
    justify-content: center;
    margin-bottom: -5px;
}



#volume-slider {
    --c: #007bff; /* active color */
    --l: 6px; /* line thickness*/
    --s: 20px; /* thumb size */
    
    height: var(--s); /* needed for Firefox*/
    --_c: color-mix(in srgb, var(--c), #000 var(--p,0%));
    -webkit-appearance :none;
    -moz-appearance :none;
    appearance :none;
    background: 
      linear-gradient(-90deg,#ababab 60%,#0000 0) 100%/5% calc(var(--l) - 1px) repeat-x;
    cursor: pointer;
    overflow: hidden;
    height: 140%; /* because firefox does not respect thumbs height*/
}

input:focus-visible,
input:hover{
  --p: 10%;
}

/* chromium */
input[type="range" i]::-webkit-slider-thumb{
  height: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--_c);
  border-image: linear-gradient(var(--_c) 0 0) 0 0 0 1/calc(50% - var(--l)/2) 0 calc(50% - var(--l)/2) 100vw/0 0 0 100vw;
  -webkit-appearance: none;
  appearance: none;
  transition: .3s;
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
  height: var(--s);
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--_c);
  border-image: linear-gradient(var(--_c) 0 0) 0 0 0 1/calc(50% - var(--l)/2) 0 calc(50% - var(--l)/2) 100vw/0 0 0 100vw;
  -webkit-appearance: none;
  appearance: none;
  transition: .3s;
}
@supports not (color: color-mix(in srgb,red,red)) {
  input {
    --_c: var(--c);
  }
}

#choose_OPT_CPU_REVISION a:last-child {
    font-size: x-small;
    font-style: italic;
    padding: 7px;
}

[ntsc="true"] #MOS8371, 
[ntsc="true"] #MOS8367,
[ntsc="false"] #MOS8361, 
[ntsc="false"] #MOS8370 {
    display: none
}

#ui_file_list {
    overflow: auto;
    min-width: fit-content;
    padding-right: 10px;
}


@keyframes popBounce {
  0%   { transform: scale(0.6); }
  25%  { transform: scale(1.4); }
  40%  { transform: scale(0.9); }
  50%  { transform: scale(1.05); }
  65%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.pop {
    animation: popBounce 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

[id^="img_snap_"] {
    width: auto;
    height: auto;
}

@keyframes action_buttons_press_anim {
  0%   { transform: translate3d(var(--tx), var(--ty), 0) scale(1); }
  40%  { transform: translate3d(var(--tx), var(--ty), 0) scale(0.93); }
  50%  { transform: translate3d(var(--tx), var(--ty), 0) scale(1.03); }
  65%  { transform: translate3d(var(--tx), var(--ty), 0) scale(1.07);}
  100% { transform: translate3d(var(--tx), var(--ty), 0) scale(1.05);}
}

@keyframes action_buttons_release_anim {
  0%   { transform: translate3d(var(--tx), var(--ty), 0) scale(1.05); }
  25%  { transform: translate3d(var(--tx), var(--ty), 0) scale(1.08); }
  40%  { transform: translate3d(var(--tx), var(--ty), 0) scale(0.98); }
  50%  { transform: translate3d(var(--tx), var(--ty), 0) scale(1.02); }
  65%  { transform: translate3d(var(--tx), var(--ty), 0) scale(0.99); }
  100% { transform: translate3d(var(--tx), var(--ty), 0) scale(1); }
}



.custom_key[key-state="pressed"] {
    animation: action_buttons_press_anim 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
.custom_key[key-state=""] {
    animation: action_buttons_release_anim 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.cm-editor .cm-content ::selection { background: rgba(100,160,220,0.4); }
[data-theme="dark"] .cm-editor .cm-content ::selection { background: #3a7bd5; }


/* ===================== RetroShell overlay ===================== */
/* light mode: solid dark-gray font (scrim lives on .modal-content) */
#retro_shell_textarea {
  position: relative;
  color: #333;
  background: transparent;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* dark mode: light font with a soft outline */
[data-theme="dark"] #retro_shell_textarea {
  color: #e0e0e0;
  background: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
}
/* cursor shape changes per console mode (color follows currentColor) */
/* commander (default): blinking underscore */
#retro_shell_textarea .rsh-cursor {
  border-bottom: 0.14em solid currentColor;
  animation: rsh-blink-underscore 1.06s infinite;
}
@keyframes rsh-blink-underscore {
  0%, 49%   { border-bottom-color: currentColor; }
  50%, 100% { border-bottom-color: transparent; }
}
/* debugger: blinking block (inverts the glyph) */
#retro_shell_textarea[data-rsh-mode="debugger"] .rsh-cursor {
  border-bottom: none;
  animation: rsh-blink-block 1.06s infinite;
}
@keyframes rsh-blink-block {
  0%, 49%   { background-color: var(--rsh-color); color: #000; }
  50%, 100% { background-color: transparent; }
}
/* navigator: blinking vertical bar */
#retro_shell_textarea[data-rsh-mode="navigator"] .rsh-cursor {
  border-bottom: none;
  border-left: 0.12em solid currentColor;
  margin-left: -0.12em;
  animation: rsh-blink-bar 1.06s infinite;
}
@keyframes rsh-blink-bar {
  0%, 49%   { border-left-color: currentColor; }
  50%, 100% { border-left-color: transparent; }
}
/* classic terminal colors per active console (cursor follows via currentColor) */
/* light mode: darker shades for readability on the light scrim */
#retro_shell_textarea[data-rsh-mode="commander"] { --rsh-color: #1a7f1a; color: var(--rsh-color); }
#retro_shell_textarea[data-rsh-mode="debugger"]  { --rsh-color: #a85f00; color: var(--rsh-color); }
#retro_shell_textarea[data-rsh-mode="navigator"] { --rsh-color: #0a7a7a; color: var(--rsh-color); }
/* dark mode: bright retro shades */
[data-theme="dark"] #retro_shell_textarea[data-rsh-mode="commander"] { --rsh-color: #33cc33; color: var(--rsh-color); }
[data-theme="dark"] #retro_shell_textarea[data-rsh-mode="debugger"]  { --rsh-color: #ffb000; color: var(--rsh-color); }
[data-theme="dark"] #retro_shell_textarea[data-rsh-mode="navigator"] { --rsh-color: #33cccc; color: var(--rsh-color); }
/* fullscreen, chrome-less, transparent overlay (no window look) */
/* sit directly above the emulator canvas, but BELOW the on-screen action
   buttons (.custom_key, z-index 20) so they stay clickable, and below all
   other real dialogs/modals */
/* lock the overlay so iOS/iPadOS does not rubber-band the whole UI when
   there is little (or no) text to scroll */
#modal_retro_shell {
  z-index: 15 !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}
#modal_retro_shell .modal-dialog {
  max-width: 100%; width: 100%; height: 100%; margin: 0;
  overflow: hidden;
}
/* the scrim fills the visible viewport so no canvas shows through at the
   edges; use 100% (not 100vh) so the iPad browser chrome cannot create a
   tiny overflow that becomes scrollable/bouncy */
#modal_retro_shell .modal-content {
  width: 100%; height: 100%; overflow: hidden;
  background: rgba(255,255,255,0.30) !important; border: 0;
  border-radius: 0; box-shadow: none;
}
[data-theme="dark"] #modal_retro_shell .modal-content {
  background: rgba(0,0,0,0.35) !important;
}
#modal_retro_shell .modal-header,
#modal_retro_shell .modal-footer {
  border: 0; background: transparent !important;
}
#modal_retro_shell .modal-body {
  flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden;
}
/* vertical button column anchored top-right so the iPad soft keyboard
   (bottom) cannot cover it and it does not overlap the console text */
#modal_retro_shell #retro_shell_buttons {
  position: absolute; top: 3.25rem; right: 8px; z-index: 5;
  flex-direction: column; align-items: flex-end;
  padding: 0; margin: 0; width: auto;
}
/* arrow keys arranged as an inverted-T like on a physical keyboard */
#retro_shell_dpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    ".    up    ."
    "left down right";
  gap: 6px;
  justify-items: stretch;
}
#retro_shell_dpad .btn { margin: 0; }
/* paired buttons side by side (Home+End, Clear+Delete) */
#retro_shell_buttons .rsh-btn-row { display: flex; gap: 6px; }
#retro_shell_buttons .rsh-btn-row .btn { flex: 1; margin: 0; }
/* same press/release animation as the on-screen action buttons */
#retro_shell_buttons .btn { --tx: 0; --ty: 0; }
#retro_shell_buttons .btn[key-state="pressed"] {
  animation: action_buttons_press_anim 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
#retro_shell_buttons .btn[key-state=""] {
  animation: action_buttons_release_anim 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
/* keep the top navbar (and its burger button) above the RetroShell overlay,
   but still below all other dialogs/modals */
body.retro-shell-open #navbar { z-index: 40; }
body.retro-shell-open #button_show_menu { z-index: 41; }