:root 
{
/* red, blue, green, yellow, purple, aqua, blueviolet, brown, darkorange, snow, black, teal */
  --color00: #222;
  --color01: red;
  --color02: blue;
  --color03: green;
  --color04: yellow;
  --color05: purple;
  --color06: aqua;
  --color07: blueviolet;
  --color08: brown;
  --color09: darkorange;
  --color10: teal;
  --color11: goldenrod;
  --color12: cornflowerblue;
}

#app 
{

}

body
{
  font-size: 14px;
}

/* CHAT ---------- */

body 
{ 
  margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
  color: #eee; background-color: #222;
}

form
{ 
  padding: 0.25rem; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  display: flex; 
  min-height: 3rem; 
  box-sizing: border-box; 
  backdrop-filter: blur(10px); 
}
#chatform 
{ 
  background: #333; 
}
#logform 
{ 
  flex-direction: column;
  align-items: center;
}
input 
{ 
  border: none; 
  padding: 0 1rem; 
  flex-grow: 1; 
  border-radius: 2rem; 
  margin: 0.25rem; 
  width: 80px;
}
input:focus { outline: none; }
form > button, button.send { 
  background: green; 
  border: none; 
  padding: 0 1rem; 
  margin: 0.25rem; 
  border-radius: 3px; 
  outline: none; 
  color: #fff; 
}
button 
{
  cursor: pointer;
}
form > button:hover, button.send:hover
{
  background: lime;
  color: black;
}
#messages, 
#userList 
{ 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
}

#messages > li { 
  position: relative;
  padding: 0.5rem 1rem;
  padding-top: calc( 0.5rem + 4px );
  padding-bottom: 0.25rem;
}
#userList
{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  position: relative;
}
#userList > li
{
  position: relative;
  width: calc( 50% - 28px );
  padding: 3px 0 3px 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 16px;
}
#messages > li:nth-child(odd)
{ 
  background: #efefef22; 
}
#messages li:before
{
  content: ' ';
  width: 10px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#userList li:before 
{
  content: ' ';
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  left: 6px;
  border-radius: 50%;
  border: thin solid rgba(255,255,255,0.3);
}

#messages li:after 
{
  content: attr(data-username);
  position: absolute;
  top: 1px;
  left: 16px;
  font-size: 8px;
}

/* logbox -------------------------------------------------- */


#logbox button.send
{
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 1em;
  padding: 1em 2em;
  font-size: 16px;
  background-color: green;
  border-radius: 2em;
  color: white;
  text-transform: uppercase;
}
#logbox button.send:hover
{
  background-color: lime;
  color: black;
}

body:not(.authenticating) #spinner {
  display: none;
}
body.authenticating #spinner {
  display: block;
  border: 10px solid #f3f3f3;
  border-top: 10px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
  position: absolute;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ? -------------------------------------------------- */


#GameDisplay
{
  width: 1190px;
  margin: 0 auto;
  position: relative;
}

.layout
{
  position: absolute;
}

#logbox
{
  /* width: 360px; */
  /* height: 250px; */
  background-color: #b3c0c2;
  transform: translate(-50%, -50%);
  z-index: 1;
  left: 50%;
  top: 50%;
  border-radius: 12px;
  padding: 2em 3em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#namecontainer
{
  text-align: center;
}
#loginput
{
  font-size: 24px;
  text-align: center;
  min-width: 200px;
  padding: .5rem;
}
#choose_iconcontainer
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 350px;
  place-content: center;
}
#colorcontainer
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center; 
}
.choose.usericon 
{
  width: 50px;
  height: 50px;
  background-color: white;
  margin: 5px;
  border-radius: 50%;
}
.choose.coloricon 
{
  width: 22px;
  height: 22px;
  background-color: white;
  margin: 3px;
  border-radius: 50%;
}
.coloricon
{

}

body.login #logbox
{
  display: flex;
  pointer-events: all;
}

body:not(.login) #logbox
{
  display: none;
}

#fridgeDoor
{
  width: 980px;
  height: 680px;
  background-color: #bbb;
  background-image: url(/images/refrigerator.jpg);
  background-size: cover;
  position: relative;
  overflow: hidden;
}
#fridge
{
  width: 915px;
  height: 670px;
  top: 5px;
  left: 60px;
  position: absolute;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

#users
{
  position: absolute;
  right: 0px;
  top: 0px;
  width: 200px;
  height: 170px;
  background-color: #333;
}
.title 
{
  text-align: center;
  margin-top: .5em;
  margin-bottom: .5em;
}
#poetry .title,
#puzzle .title {
  margin-top: 0.5em;
  margin-bottom: 1em;
}
#logbox .title
{
  margin-top: 1em;
  font-size: 20px;
  color: #06355d;
}
#connection
{
  position: absolute;
  text-transform: uppercase;
  font-size: 9px;
  bottom: 7px;
  width: 100%;
  text-align: center;        
}
#connection::after
{
  content: 'disconnected';
  margin-left: 7px;
  /* color: red; */
  color: #959595;
}
body.connected #connection::after
{
  content: 'connected';
  /* color: lime; */
  color: #959595;
}
.dot
{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 3px;
  margin-right: 2px;
}
body.connected .dot
{
  background-color: lime;
}

#poetry
{
  position: absolute;
  right: 0px;
  top: 180px;
  width: 200px;
  height: 120px;
  background-color: #333;

  display: flex;
  flex-direction: column;
  justify-content: flex-start; /*space-evenly;*/
  align-items: center;
}
#poetryBackground
{
  position: absolute;
  width: 100%;
  height: 130px;
  top: 0px;  
  background-size: contain;
  background-repeat: no-repeat;

  /* background-image: url(/images/poetryDisabled.png); */
}
body.poetry #poetryBackground
{
  /* background-image: url(/images/poetryEnabled.png); */
}
body:not(.poetry) #poetryBackground
{
  /* background-image: url(/images/poetryDisabled.png); */
}


#puzzle
{
  position: absolute;
  right: 0px;
  top: 310px;
  width: 200px;
  height: 120px;
  background-color: #333;

  display: flex;
  flex-direction: column;
  justify-content: flex-start; /*space-evenly;*/
  align-items: center;
}
#puzzleBackground
{
  position: absolute;
  width: 768px;
  height: 432px;
  position: absolute;
  transform: translate(-50%, 0%);
  margin-left: 50%;
  margin-top: 50px;
  border: 2px solid #424242;
  overflow: hidden;
}
body.puzzle #puzzleBackground
{
  display: flex;
}
#puzzleBackground img
{
  transition: filter 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
}
body:not(.solved) #puzzleBackground img
{
  filter: blur(4px);
  opacity: .3;
}
body.puzzle.solved #puzzleBackground img
{
  filter: blur(0);
  opacity: 1;
} 

body.puzzle.solved #puzzleBackButton,
body.puzzle.solved #puzzleNextButton
{
  pointer-events:none;
  opacity: .3;
}

body:not(.puzzle) #puzzleBackground
{
  display: none;
  /* background-image: url(/images/puzzle.png); */
}
/* 40% * 1920x1080 = 768x432 */

#puzzle .buttons
{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: nowrap;
}

.widgetButton
{
  border-radius: 50%;
  width: 60px;
  height: 60px;
  color: white;
  z-index: 2;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  transition-property: background-color;
  transition-duration: .15s;
  cursor: pointer;
  position: relative;
}
.small.startButton
{
  width: 30px;
  height: 30px;
}
.startButton
{
  background-color: green;
}
.startButton:hover
{
  background-color: lime;
}
.buttonArrow
{
  line-height: 0;
  align-items: center;
  font-size: 60px;
  position: absolute;
  height: 60px;
  top: 25px;
  /* transform: translateX(5px); */
  font-family: "Arial";
}
.small .buttonArrow
{
  font-size: 30px;
  /* transform: translateX(5px); */
  line-height: 30px;
  height: 30px;
  width: 30px;
  position: absolute;
  top: -3px;
  left: -2px;
}
.reversed .buttonArrow {
  transform: scaleX(-1);
}
body.puzzle #puzzleButton
{
  display: none;
}
body:not(.puzzle) #puzzleButton
{
  display: flex;
}
.clearButton
{
  background-color: rgb(120, 0, 0);
}
.clearButton:hover
{
  background-color: red;
}
.clearButton svg
{
  position: absolute;
}

body.puzzle #puzzleEnabledButtons
{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-direction: row;
  width: 100%;
  justify-content: space-evenly;
}
body.puzzle #puzzleSelector
{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: center;
  position: absolute;
  bottom: 8px;
}
#puzzleSelector .dot 
{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #777;
  position: relative;
  margin-right: 6px;
}
#puzzleSelector .dot.selected
{
  background-color: #eee;
}
body.puzzle #puzzleClearButton
{
  display: flex;
}
body.puzzle #puzzleClearButton svg
{
  /* transform: scale(1.5); */
}
body:not(.puzzle) #puzzleClearButton
{
  display: none;
}
body:not(.puzzle) #puzzleEnabledButtons
{
  display: none;
}
body:not(.puzzle) #puzzleSelector
{
  display: none;
}

.previewButton
{
  background-color: rgb(51 51 51);
}
.previewButton:hover
{
  background-color: rgb(68 68 68);
}
body.puzzle #puzzlePreviewButton
{
  display: flex;
  /* display: none; */
}
body:not(.puzzle) #puzzlePreviewButton
{
  display: none;
}


body.poetry #poetryButton
{
  display: none;
}
body:not(.poetry) #poetryButton
{
  display: flex;
}
body.poetry #poetryClearButton
{
  display: flex;
}
body:not(.poetry) #poetryClearButton
{
  display: none;
}



#chat
{
  position: absolute;
  right: 0px;
  top: 440px;
  width: 200px;
  height: 240px;
  background-color: #333;
}
#messageContainer, #userContainer 
{
  overflow: scroll;
  width: 90%;
  background-color:#444;
  margin: 0 auto;
}
#messageContainer
{
  height: 160px;
}
#userContainer 
{
  height: 110px;
}

.word
{
  position: absolute;
  background-color: black;
  color: white;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-size: 14px;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  box-shadow: 0px 0px 3px 0px #000;
  z-index: 3;
}
body.poetry .word
{
  opacity: 1;
  pointer-events: all;
}
body:not(.poetry) .word
{
  opacity: 0;
  pointer-events: none;
}

.word, .piece
{
  transition-property: opacity;
  transition-duration: .2s;
}

.word.active,
.piece.active,
.word.possessed,
.piece.possessed
{
  z-index: 4;
}
.possessed 
{
  pointer-events: none;
}

#reset 
{
  position: absolute;
  bottom: -30px;
  right: 80px;
}

.game_display 
{
  transition-property: opacity;
  transition-duration: .25s;
}
body:not(.connected) .game_display,
body.login .game_display,
body.authenticating .game_display
{
  opacity: .1;
  pointer-events: none;
}
body:not(.login):not(.authenticating).connected .game_display 
{
  opacity: 1;
  pointer-events: all;
}
body.authenticating
{
  display: flex;
  align-items: center;
  justify-content: center;
}


/* pieces -------------------------------------------------- */

.piece 
{
  display: inline-block;
  position: absolute;
  cursor: pointer;
  transform: scale(0.4);
  transform-origin: top left;
  transform-box: content-box;
  z-index: 2;
}
body.puzzle:not(.solved) .piece
{
  opacity: 1;
  pointer-events: all;
  mix-blend-mode: normal;
}
body.puzzle:not(.solved) .piece.isset
{
  z-index: 1;
  pointer-events: none;
}
body:not(.puzzle) .piece,
body.puzzle.solved .piece
{
  opacity: 0;
  pointer-events: none;
}

.piece img
{
  /* width: 50%; */
}
.piece svg
{
  position: absolute;
  top: 0; 
  left: 0;
}
.piecePath{
  
  /* control fill & stroke */
  fill:rgba(0,0,0,0);
  stroke:rgba(0,0,0,0);

  stroke-width:15;
  stroke-miterlimit:10;
  filter: blur(2px);
  mix-blend-mode: normal;
  opacity: .3;
}
.piece:not(.isset):not(.possessed):not(.active):hover .piecePath
{
  fill:rgba(255,255,255,1);
  stroke:rgba(255,255,255,1);
}

/* red, blue, green, yellow, purple, aqua, blueviolet, brown, darkorange, snow, black, teal */
.word.color00 { background-color: var(--color00); }
.word.color01 { background-color: var(--color01); }
.word.color02 { background-color: var(--color02); }
.word.color03 { background-color: var(--color03); }
.word.color04 { background-color: var(--color04); }
.word.color05 { background-color: var(--color05); }
.word.color06 { background-color: var(--color06); }
.word.color07 { background-color: var(--color07); }
.word.color08 { background-color: var(--color08); }
.word.color09 { background-color: var(--color09); }
.word.color10 { background-color: var(--color10); }
.word.color11 { background-color: var(--color11); }
.word.color12 { background-color: var(--color12); }

.word.color00_touched { border-color: var(--color00); }
.word.color01_touched { border-color: var(--color01); }
.word.color02_touched { border-color: var(--color02); }
.word.color03_touched { border-color: var(--color03); }
.word.color04_touched { border-color: var(--color04); }
.word.color05_touched { border-color: var(--color05); }
.word.color06_touched { border-color: var(--color06); }
.word.color07_touched { border-color: var(--color07); }
.word.color08_touched { border-color: var(--color08); }
.word.color09_touched { border-color: var(--color09); }
.word.color10_touched { border-color: var(--color10); }
.word.color11_touched { border-color: var(--color11); }
.word.color12_touched { border-color: var(--color12); }

.piece.color00 path { fill: var(--color00); stroke: var(--color00); }
.piece.color01 path { fill: var(--color01); stroke: var(--color01); }
.piece.color02 path { fill: var(--color02); stroke: var(--color02); }
.piece.color03 path { fill: var(--color03); stroke: var(--color03); }
.piece.color04 path { fill: var(--color04); stroke: var(--color04); }
.piece.color05 path { fill: var(--color05); stroke: var(--color05); }
.piece.color06 path { fill: var(--color06); stroke: var(--color06); }
.piece.color07 path { fill: var(--color07); stroke: var(--color07); }
.piece.color08 path { fill: var(--color08); stroke: var(--color08); }
.piece.color09 path { fill: var(--color09); stroke: var(--color09); }
.piece.color10 path { fill: var(--color10); stroke: var(--color10); }
.piece.color11 path { fill: var(--color11); stroke: var(--color11); }
.piece.color12 path { fill: var(--color12); stroke: var(--color12); }

ul.listbox li.color00:before { background-color: var(--color00); }
ul.listbox li.color01:before { background-color: var(--color01); }
ul.listbox li.color02:before { background-color: var(--color02); }
ul.listbox li.color03:before { background-color: var(--color03); }
ul.listbox li.color04:before { background-color: var(--color04); }
ul.listbox li.color05:before { background-color: var(--color05); }
ul.listbox li.color06:before { background-color: var(--color06); }
ul.listbox li.color07:before { background-color: var(--color07); }
ul.listbox li.color08:before { background-color: var(--color08); }
ul.listbox li.color09:before { background-color: var(--color09); }
ul.listbox li.color10:before { background-color: var(--color10); }
ul.listbox li.color11:before { background-color: var(--color11); }
ul.listbox li.color12:before { background-color: var(--color12); }