/* -- Global Styles ------------------------------------------------ */

body {
    font-family: arial;
    margin: 0;
    padding: none;
    background-color: #222;
    color: #fff;
}

h1, h2, h3, textarea { 
  font-family: riscos-system; 
  font-weight: normal
}

textarea:focus { outline: none }

h1 { font-size: 30pt}
h3 { margin: .5em 0 }

a, a:visited, button, select { color:#4ac0f3}

a[role="button"]:not([href]) {
	cursor: pointer;
}

@font-face {
  font-family: "riscos-system";
  src: url("System.Fixed.woff2") format("woff2");
}

button, select {
  border: 1px solid #666;
  background-color: #222;
  margin: 2px;
  padding: 5px;
}

.dropdown-button::after { content: '\0025bc'; }


/* -- Header ------------------------------------------------------- */

header {
  display: flex;
  flex: 2;
  background-color: #333;
  justify-content: space-between;
  align-items: center;
}

#logo {
  white-space: nowrap;
  margin: 3px 1em;
}

#logo h1 { margin: 5px; vertical-align: middle; }

#logo h1::first-letter { 
  background-image: url(images/logo.svg);
  display: inline-block;
  padding: 0 5px 0 0.5ex;
  background-size: 54px 54px;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 58px;
  background-position: top center;
}

/* controls are buttons next to the header */
#controls {
  margin: 1em;
  display: flex
}

#controls a { 
  display: block;
  text-decoration: none; 
  background-color: #222;
  border: 1px solid #666; 
  margin: 2px; 
  padding: 5px; 
}

#controls a:hover, button:hover, select:hover {
  XXbackground-color: #333;
  box-shadow: 0 0 3px #666;
  text-shadow: 0 0 5px #019ade;
}


/* -- Emscripten Loading UI ---------------------------------------- */

.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
div.emscripten { text-align: center; }      

.spinner {
  height: 20px;
  width: 20px;
  margin: 0;
  margin-top: 20px;
  margin-left: 20px;
  display: inline-block;
  vertical-align: top;

  animation: rotation 0.8s linear infinite;

  border-left: 3px solid rgb(235, 235, 235);
  border-right: 3px solid rgb(235, 235, 235);
  border-bottom: 3px solid rgb(235, 235, 235);
  border-top: 3px solid rgb(120, 120, 120);
  
  border-radius: 100%;
  background-color: aqua;
}

@keyframes rotation {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

#progress {
  height: 20px;
  width: 300px;
}

#status {
  display: inline-block;
  vertical-align: top;
  margin-top: 30px;
  margin-left: 20px;
  font-weight: bold;
  color: rgb(120, 120, 120);
}


/* -- Main UI ---------------------------------------------------- */  

#main { 
  /* #main contains the editor (hidden by default) and emu canvas */
  display: flex;
  flex-direction: row; 
  width: 100%;
  justify-content: space-around;
  XXbackground-color: darkgreen;
  align-items: center;
}

#machine-status {
  display: block;
  position: fixed;
  bottom:0;
  left: 0;
  background-color: #555;
  padding: 5px 1em;
}

/* Each machine property is wrapped in a span */
#machine-status span { padding-left: 0.5em}


/* -- Emulator canvas ---------------------------------------------- */

:root {
  --emulator-padding: 30px;
}

#display-container {
  position: relative;
  /* div that contains ONLY the canvas */
  XXbackground-color: darkcyan;

}

canvas:focus { outline: none }
canvas { 
  /* Padding required so (non-captured) mouse can still work even if
     cursor is just outside emulator window. This value is looked up
     by EmulatorInput in emu_input.js in arculator-wasm */
  padding: var(--emulator-padding); 
  cursor: none !important; /* SDL sets style="cursor: default" on the canvas element */
  display: block;
}

body.force-mouse-capture canvas { 
  cursor: default !important 
}


/* prompts to let the user know the emulator needs to capture the mouse cursor
   (usually for better control during a game) */
.canvas-dropdown,
body.mouse-captured.rel-mouse-needed #mouse-capture-prompt { 
  padding: 5px;
  background-color: #111;
  color: #aaa;
  font-size: 10pt;
  text-align: center;
  border-radius: 0 0 5px 5px;
  box-sizing: border-box;
  width: calc(100% - var(--emulator-padding) * 2);
  margin: calc(0px - var(--emulator-padding)) /* revert bottom padding of canvas */
          var(--emulator-padding) 
          0 
          var(--emulator-padding);
  transform: translate(0, -100%); /* by default, div is slid 'up' behind canvas */
  z-index: -1;
  opacity: 0;
  position: absolute;
  transition: all 250ms;
  transition-delay: 500ms;
}

.canvas-dropdown p { margin: 0 }

body.rel-mouse-needed #mouse-capture-prompt,
body.mouse-captured #mouse-capture-info,
body.audio-suspended #audio-warning { 
  transform: translate(0);
  opacity: 100%;
}

/* hide mouse capture info when full screen */
#display-container.fullscreen #mouse-capture-info,
#display-container.fullscreen #mouse-capture-prompt, 
#display-container.fullscreen #audio-warning { 
  display: none 
}

#audio-warning { 
  background-color: rgb(160, 89, 1);
  color: white;
  font-weight: bold;
}

#display-container.fullscreen {
  background-color: black;
}

#display-container.fullscreen canvas {
  height: 100%;
  padding: 0;
  margin: auto;

}


#display-container .emulator-overlay {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left:0; top: 0; width: 100% ;height: 100%;
  background-color: rgba(0,0,0,.4);
}

:not(body.emu-paused) #display-container .emulator-overlay { display: none }

body.emu-paused #display-container .emulator-overlay { display: flex }

.resume-dialog { text-align: center;}

.round-button {
	box-sizing: border-box;
  margin: auto;
	display: flex;
	width: 150px;
	height: 150px;
  align-items: center;
  justify-content: center;
	border: 6px solid #aaa;
	border-radius: 50%;
	color:#f5f5f5;
	background-color: rgba(0,0,0,0.5);
	transition: all 0.3s ease;
}

.round-button:hover {
	background-color: rgba(0,0,0,0.8);
	box-shadow: 0px 0px 20px #019cdeb0;
  border-color: #fff;
}

.play-button {
  background: transparent;
  box-sizing: border-box;
  width: 0;
  height: 74px;
  margin-left: 15px;
  border-color: transparent transparent transparent #aaa;
  transition: 0.3s all ease;
  cursor: pointer;
  border-style: solid;
  border-width: 37px 0 37px 60px;
}

.round-button:hover .play-button {
  border-left-color:  white;
}


/* -- Editor ------------------------------------------------------- */
#editor-container {
  /* Editor is hidden by default */
  display: none;
  flex:2;
  XXbackground-color: blue;
  margin: 1em;
  max-width: 80ch;
}

#editor { 
  width: 100%;
  background-color: black;
  color: white;
  border: 1px solid #aaa;
  padding: 10px;
  box-sizing: border-box;
  height: 30em;
}

.editor-info { font-size: 85% }


/* -- Modal Windows ------------------------------------------------ */

.modal {
  /* fills whole window, dims background */
  background-color: rgba(0,0,0,.4);
  display: none;
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1; 
  vertical-align: middle;
}

.modal-content {
  /* The visible box for each modal window */
  background-color: #333;
  border: 1px solid #666;
  box-shadow: 0 0 30px #444;
  margin:  auto;
  padding: 20px;
  max-width: 600px;
}

.modal-content h2 { text-align: center ;}

.modal-close { 
  display: block;
  float: right;
}


/* vert-list currently used for machine picker and software browser */
ul.vert-list {
  list-style: none; 
  background-color: black;
  margin: 0;
  padding: 0;
}

ul.vert-list li {
  display: block;
  padding: 8px 1em;

  background-color: #333;
  margin: 2px;
  cursor: pointer;
}

ul.vert-list li:hover {
  background-color: #555;
}

ul.vert-list li.selected {
  background-color: #66a;
}


#share-url { width: 100% }
 

/* -- Machine Picker dialog ---------------------------------------- */

#machine-picker-cols {
  /* Contains the machine list and preview panel */
  justify-content: space-between;
  background-color: #556;
  display: flex
}

#machine-preview {
  flex: 2;
  padding: .5em 1em;
  width: 35ch;
}

#machine-preview h3, #machine-preview .buttons { text-align: center;}


/* -- Software Browser dialog -------------------------------------- */

#software-browser .modal-content {
  width: 80%;
}

#software-browser-cols {
  display: flex;
  align-items: stretch;
  -height: 30em;
}

#software-browser-cols .listing {
  /* Left panel of software browser
     contains category dropdown, search box and software list */
  XXbackground-color: red;
  display: flex;
  flex-direction: column;
  flex-basis: 0;
}

#software-browser-cols .listing ul.vert-list {
  overflow-y: auto;
  max-height:20em
}

#software-browser-cols .listing ul li {
  font-size: 90%;
}

#software-details, #software-intro {
  padding: 1em;
  background-color: #556;
  flex-grow: 3;
}

/* hidden before any software item is chosen */
#software-details { display: none }

dl {
  display: flex;
  flex-flow: row wrap;
  border-width: 1px 1px 0 0;
}
dt {
  flex-basis: 20%;
  padding: 2px 4px;
  text-align: right;
}
dt::after { content: ':' }

dd {
  flex-basis: 70%;
  flex-grow: 1;
  margin: 0;
  padding: 2px 4px;
}

.boot-recommended label::before { content: 'ℹ️ ' }

#software-details button.disc::before { content: '💾 ' }
#software-details button.archive { 
  background-image: url('images/archive-icon-lores.png');
  background-position: 5px 50%;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  padding-left: 25px;
}

/* -- Mobile styles ------------------------------------------------ */

@media screen and (max-width: 600px) {
  h1 { font-size: 20pt; margin: 0 .5em}
  
  #logo h1::first-letter { 
    padding: 0 5px 0 0.5ex;
    background-size: 25pt 25pt;
    font-size: 25pt;
  }

  header { flex-direction:  column;}


  #logo { 
    margin: 2px;
    width: 100%;
    display: block; 
    text-align: center; 
    XXbackground-color: red;
  }

  #editor { 
    width: 100%;
    height: 20vh;
  }

  body { XXbackground-color: green;}

  #main { flex-direction: column; }
  #canvas { width: 100%; padding: 0 }
  #editor-container { 
    margin: 0; 
    width: 100%;
    max-width: 100%;
  }
}

/* Detect when keyboard visible - i.e. user is typing in editor */
@media screen and (max-width: 600px) and (max-height: 600px) {
  #editor:focus { height: 90vh; }
}


/* -- Latency debugging ----------------------- */
body.dbg-mouseclick #display-container.fullscreen, body.dbg-mouseclick { background-color: red }
body.dbg-mousemove #display-container.fullscreen, body.dbg-mousemove { background-color: blue }
body.dbg-keypress #display-container.fullscreen, body.dbg-keypress { background-color: magenta }



/* -- Mastodon follow button -------------- */
/* https://codepen.io/miyano/pen/oMREdZ */
.mstdn{
  display:inline-block;
  background-color:#282c37;
  color:#d9e1e8;
  text-decoration:none;
  padding:4px 10px 4px 30px;
  border-radius:4px;
  font-size:16px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2261.076954mm%22%20height%3D%2265.47831mm%22%20viewBox%3D%220%200%20216.4144%20232.00976%22%3E%3Cpath%20d%3D%22M211.80734%20139.0875c-3.18125%2016.36625-28.4925%2034.2775-57.5625%2037.74875-15.15875%201.80875-30.08375%203.47125-45.99875%202.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125%200%202.53375.15625%204.94625.46875%207.2025%203.38375%2025.68625%2025.47%2027.225%2046.39125%2027.9425%2021.11625.7225%2039.91875-5.20625%2039.91875-5.20625l.8675%2019.09s-14.77%207.93125-41.08125%209.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234%20213.82%201.40609%20165.31125.20859%20116.09125c-.365-14.61375-.14-28.39375-.14-39.91875%200-50.33%2032.97625-65.0825%2032.97625-65.0825C49.67234%203.45375%2078.20359.2425%20107.86484%200h.72875c29.66125.2425%2058.21125%203.45375%2074.8375%2011.09%200%200%2032.975%2014.7525%2032.975%2065.0825%200%200%20.41375%2037.13375-4.59875%2062.915%22%20fill%3D%22%233088d4%22%2F%3E%3Cpath%20d%3D%22M177.50984%2080.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025%200-17.4175%207.5075-17.4175%2022.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375%200-15.74%206.32875-15.74%2018.7975v59.15H38.90484V80.077c0-12.455%203.17125-22.3525%209.54125-29.675%206.56875-7.3225%2015.17125-11.07625%2025.85-11.07625%2012.355%200%2021.71125%204.74875%2027.8975%2014.2475l6.01375%2010.08125%206.015-10.08125c6.185-9.49875%2015.54125-14.2475%2027.8975-14.2475%2010.6775%200%2019.28%203.75375%2025.85%2011.07625%206.36875%207.3225%209.54%2017.22%209.54%2029.675%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
  background-size:16px;
  background-repeat:no-repeat;
  background-position:top 50% left 8px;
  transition:all 0.5s;
}
.mstdn:hover{
  background-color:#484c56;
}
/*.mstdn::before{
  content:"@";
}*/
.mstdn > span{
  color:#9baec8;
  font-size:12px;
  padding-left:3px;
}
.mstdn > span:before{
  content:"@";
}