/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

button {
    color:black;
}

html {
}

body {
    /*background-color:#008eff;*/
    margin:0;
    font-family:sans-serif;
    flex-direction: column;
    align-items: center;
    /*background: linear-gradient(to top, #1d2675 0%,#2a3698 100%) fixed;*/
    background: linear-gradient(to top, #111 0%,#222 100%) fixed;
    background-color:#111;
    /*border:1px solid black;*/
}

body.called {
    /*background:linear-gradient(to top, #ffff5d 0%,#fbfb97 100%) fixed;*/
    background: linear-gradient(to top, #ffd447 0%,#ffe165 100%) fixed;
    background-color:#ffd447;
}

h1 {
    text-align:center;
    color:white;
}

h1 a {
    color:white;
}

#main {
    height:100%;
    /*
	display:flex;
	flex-direction:column;*/
}

.hidden {
    visibility:hidden;
}

.none {
    display:none;
}

.button {
    display:inline-block;
}

.plate-wrapper {
    perspective:1000px;
    position:relative;
    margin:auto;
}

.plate {
    perspective:1000px;
    background-color:lightgray;
    padding:10px;
    transform: rotateX(25deg);
    border-bottom:3px solid gray;
}

.face {
    user-select:none;
    cursor:pointer;
    background-color:red;
    transform:translateY(-20px);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.1s all ease;
    border:2px solid #555;
    padding:30px;
    background: radial-gradient(#cbcbcb, #707070);
}

.unlocked .face {
    border:2px solid #aa0000;
    background: radial-gradient(#ff9999, red);
}

.unlocked:active .face {
    transform:translateY(-5px);
    background: radial-gradient(#ffbbbb, red);
}

.face-inner {
    font-size:45px;
}

.face-side {
    transform-origin:top center;
    transform:translateY(-20px) rotateX(-25deg) ;
    height:20px;
    margin-bottom:-20px;
    transition:.1s all ease;
    background-color:#707070;
    border-left:2px solid #707070;
    border-right:2px solid #707070;
}

.unlocked .face-side {
    background-color:#cc0000;
    border-left:2px solid #aa0000;
    border-right:2px solid #aa0000;

}

.unlocked:active .face-side {
    transform: translateY(-5px) rotateX(-25deg);
    height:5px;
    margin-bottom:-5px;
}

.player-sound {
    width:30px;
    height:30px;
    background-image:url("volume.svg");
    background-size:80%;
    background-position:center center;
    background-repeat:no-repeat;
    position:fixed;
    right:10px;
    bottom:10px;
    border:none;
    background-color:black;
}

.player-muted {
    background-image:url("volume-mute.svg");
    background-size:85%;
}

.player-name {
    font-size:24px;
    /*
    margin-top:10px;
    margin-left:10px;
    margin-right:10px;*/
    display:flex;
    margin-left:10px;
    margin-right:10px;
}

.player-name input {
    flex:1;
    width:100%;
    max-width:100%;
    background-color:transparent;
    border:none;
    color:black;
    text-align:center;

}

.player-timer {
    /*display:flex;*/
	z-index:10;
    align-self:stretch;
	left:0;
	right:0;
    margin:0 0px;
	height:10px;
	padding-bottom:2px;
	/*padding:2px 0;*/
    background-color:#fbfbfb;
    /*height:10px;8/
    z-index:100;
    /*
    position:sticky;
    left:0;
    right:0;
    top:0;*/
}

.player-timer svg {
    /*height:10px;*/
	width:100%;
	height:100%;
/*
	bottom:0;
    width:100%;
    position:absolute;
    left:0;
    right:0;
    top:0;*/
}

.player-timer > div {
    flex:1;
    height:5px;
    margin:0 2px;
    /*background-color:#ffff5d;*/
    background-color:#ffe165;
    box-shadow: 0px 0px 1px 1px grey;
    opacity:0;
    transition:.2s ease opacity;
}

.player-timer > div:first-child {
    margin-left:0;
}

.player-timer > div:last-child {
    margin-right:0;
}

.player-timer > div.filled {
    opacity:1;
}

.player-score {
    /* border-left: 2px solid #ffff5d; */
    /* border-radius: 10px; */
    /* border-right: 2px solid #ffff5d; */
    background-color: rgb(255 255 255 / 66%);
    box-shadow: 0px 0px 1px 1px grey;
    color:black;
    font-family:monospace;
    font-size:22px;
    margin-right: 10px;
    /*margin-left: 10px;*/
    padding:5px;
    text-align:center;
    border-bottom-right-radius:15px;
}

.player-score .negative {
    color:red;
}

.player-score span {
/*
    background-color:#ffff5d;
    display:inline-block;
    padding:1px 5px;*/
}

.player {
    margin:auto;
    /*background-color:white;
    box-shadow:0 0 10px 1px black;*/
    display:flex;
    flex-direction:column;
    align-items:center;
}

.player-buttons-wrapper {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 22px; /* the padding needs to be at least as big as the shake keyframes movement */
}

.player-buttons-wrapper-hide {
    display:none;
}

.player-buttons {
    display:flex;
    /*
    flex-direction:column;*/
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    margin-top:20px;
    margin-bottom:20px;
}

.player-buttons > button {
    margin:10px 10px;
}

.player-info {
    display:flex;
    margin-top:8px;
    margin-bottom:10px;
}

.player-header-hide .player-info {
    visibility:hidden;
    /*
    height:1px;
    margin-top:0;
    margin-bottom:0px;*/
}

.player-header-wrapper {
    position: sticky;
    top: 0px;
    left: 0;
    right: 0;
    align-self: stretch;
    display: flex;
	justify-content:center;
    z-index:10;
	flex-direction:column;
}

.player-header {
    box-shadow: 0px 0px 14px 0px #000000;
    background-color:#fbfbfb;
	align-self:center;
    /*display:flex;*/
    /*
    flex-direction:column;
    align-self: stretch;*/
    /*background-color:gray;*/
    /*
    display:flex;
    align-items:center;
    justify-content:center;
    align-self: stretch;
    justify-content: space-around;*/
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    transform-origin:top center;
    position:relative;
    margin-left: 35px;
    margin-right: 35px;
}

.player-header-hide {
    background-color:transparent;
    box-shadow:none;
}

/*
@keyframes pulse {
    0% { transform:scale(1); }
    10% { transform:scale(2); }
    20% { transform:scale(1); }
    30% { transform:scale(2); }
    40% { transform:scale(1); }
    50% { transform:scale(2); }
    60% { transform:scale(1); }
    70% { transform:scale(1); }
    80% { transform:scale(1); }
    90% { transform:scale(1); }
    100% { transform:scale(1); }
}

.called .player-header {
    background-color:#ffff5d;
    animation-name:pulse;
    animation-duration:1.5s;
}*/



.player-header > * {
    /*flex: 1 1 0px*/
}

.host-wrapper {
    /*flex:1;*/
    display:inline-flex;
    flex-direction:column;
    align-items:stretch;
    margin:auto;
}

.host {
    background-color:white;
    border:2px solid gray;
    padding:10px;
    margin:0 5px;
    max-width:800px;
}

.host-header {
    display:inline-flex;
    align-items:center;
    margin:0 5px;
    align-self:center;
    flex-wrap:wrap;
}

.host-heading {
    background-color:#e0e0e0;
    border:2px solid gray;
    /*
    border-top-left-radius:10px;
    border-top-right-radius:10px;*/
    margin:0 10px -2px 10px;
    padding:10px 10px;
    border-bottom-color:gray;
    /*
    font-size:18px;
    align-self:flex-end;*/
    font-size:24px;
    align-self:flex-end;
}

.host-heading-info {
    background-color:transparent;
    border-color:transparent;
    color:white;
}

.host-heading-active {
    background-color:white;
    border-bottom-color:white;
    border-style:inset;
    color:black;
    z-index:1;
}

.host-heading:active {
    border-style:inset;
}

.players {
    position:relative;
    display:inline-grid;
    /*grid-template-columns:min-content fit-content(50%) max-content minmax(50px, auto) min-content;*/
    grid-gap:1px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    padding:1px;
    /*
    overflow:auto;
    max-width:calc(100vw - 40px);*/
}

.players > button {
    border:none;
}

.players-footer {
    position:sticky;
    bottom:0;
    background-color: #e0e0e0;
    box-shadow: 0px 2px 4px 1px black;
    margin-top: 10px;
    padding: 5px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
    display:flex;
    align-items:center;
    z-index:5;
}

.players-footer.hidden {
    visibility:hidden;
    overflow:hidden;
}

.players-footer-buttons {
    display:flex;
    justify-content:center;
    align-items:center;
    flex:1;
    flex-wrap:wrap;
}

.players-footer-buttons > button {
    margin-left:10px;
    margin-right:10px;
}

.players-footer-buttons > button:first-child {
    margin-left:0px;
}

.players-footer-buttons > button:last-child {
    margin-right:0px;
}

.players-footer-info {
    text-align:center;
    margin-right:10px;
    font-weight:bold;
}

.players-footer-info button {
    background:none;
    padding:3px;
    border:none;
    text-decoration:underline;
    font-weight:normal;
}

.score-cell2 {
    position:relative;
    margin-left:20px;
}

.score-cell2 .picker button {
    background:transparent;
}

.score-cell2 .picker-increment,
.score-cell2 .picker-decrement {
    position:static;
    margin:0 1px;
}

.footer-picker {
    position:absolute;
    bottom:100%;
    right:0;
}

.footer-picker > button {
    width:100%;
}

.score-cell2 button img {
    width:18px;
}

button.clear-scores {
    background:linear-gradient(to top, #ffff5d 0%,#fbfb97 100%);
    border-color:#ffff5d;
}

/*
.players2 {
    grid-template-columns:min-content fit-content(100%) max-content;
}

.players3 {
    grid-template-columns:min-content fit-content(75%) max-content min-content;
}*/

.col {
    box-shadow:0 0 0 1px #333;
    text-align:center;
    padding:5px;
    background-color:white;
    transition:background-color .2s ease;
}

/*
.players > div:nth-child(4n+1){
    text-align:left;
}*/

/*
.players > div:nth-child(4n+3){
    font-weight:bold;
}*/

.col-header {
    /*text-align:center;*/
    font-weight:bold;
    padding:10px 5px;
    font-size:18px;
    /*background: linear-gradient(to top, #1d2675 0%,#2a3698 100%);*/
    /*background: linear-gradient(to top, #111 0%,#222 100%) fixed;*/
    background: linear-gradient(to top, #ffd447 0%,#ffe165 100%);
    color:black;
    /*box-shadow:0 0 0 1px #008eff;*/
    text-align:left;
}

.col-bulb {
    text-align:center;
}


.col-bulb img {
    display: inline-block;
    max-width: 32px;
    vertical-align: middle;
}

.buzzed {
    /*background-color:#ffff5d;*/
    /*background-color:#ddd;*/
    /*background-color:#ddd;*/
	/*background-color:#ffffc7;*/
    background-color:#fff3cc;
}

.called {
    background-color:#ffff5d;
}

.buzz-cell {
    padding:0;
    display:flex;
}

.response-cell {
    /*font-weight:bold;*/
    word-break:break-word;
}

.name-cell {
    text-align:left;
    position:relative;
    grid-column-end: span 2;
    word-break:break-word;
}

.name-cell-simple {
    grid-column-end: span 1;
}

.name-cell.arrow:before {
	content: ">";
	position: absolute;
	left: -10px;
	font-weight: bold;
	z-index: 2;
	font-family: monospace;
	font-size: 16px;
}

.name-cell input {
    margin-right:3px;
}

.button {
    background: linear-gradient(#eee, #ccc);
    border:2px outset gray;
    background-color:#eee;
}

.bulb {
    /*
    background-image:url('lightbulb.svg');
    background-size:70%;
    background-position:center center;
    background-repeat:no-repeat;*/
    background: linear-gradient(#eee, #ccc);
    border:1px outset gray;
    background-color:#eee;
    /*margin-right:3px;*/
    flex:1;
}

.bulb-simple {
    padding: 1px 6px;
    background:transparent;
    background-color:transparent;
    border:none;
    /*
    align-items: center;
    justify-content: center;
    display: flex;*/
    line-height: 24px;
    border: 1px solid transparent;
}

.bulb:active, .block:active, .button:active {
    border-style:inset;
    /*background:none;*/
    background-color:#ccc;
    /*background: transparent;*/
}

.bulb-simple:active {
    background-color:inherit;
    border: 1px solid transparent;
}


.button:disabled {
    color:gray;
}

.button:disabled:active {
    border-style:outset;
    background: linear-gradient(#eee, #ccc);
}

.button:disabled > img {
    opacity:.5;

}

button.block {
    background: linear-gradient(red, #c10000);
    border:2px outset red;
    background-color:red;
    color:white;
    margin-left:auto;
    margin-right:auto;
}

button.uncall {
    margin-right:20px;
}

/*
.called2 .bulb {
    background:linear-gradient(to top, #fbfb97 0%, #ffffc9 100%);
}*/

.called2-active .bulb {
    /*background:linear-gradient(to top, #ffff5d 0%,#fbfb97 100%);*/
    background: linear-gradient(to top, #ffd447 0%,#ffe165 100%);
}

.called2 {
    background-color:#ffff5d;
}

.called2-active {
    /*background-color:#ffff5d;*/
    background-color:#ffe165;
}

.bulb img, .button img {
    width:24px;
    display:inline;
    vertical-align:middle;
    padding-right:5px;
}

.button-list {
    display:flex;
    justify-content:space-between;
    margin-left:-5px;
    margin-right:-5px;
    flex-wrap:wrap;
}

.button-list button {
    font-size:20px;
    border:2px outset gray;
    background-color:#eee;
    margin:0 5px;
    background: linear-gradient(#eee, #ccc);
    padding:10px;
}

.button-list button:active, .button-list button.depressed {
    border-style:inset;
    background: #ccc;
}

.score-cell {
    display:flex;
    align-items:stretch;
    padding:0;
    position:relative;
    justify-content: space-between;
}

.score-cell-simple {
    font-family:monospace;
    text-align:center;
    font-size:18px;
}

.score-cell-input {
    font-size:18px;
    height:36px;
    border:none;
    text-align:center;
    font-family:monospace;
    /*
    border-right:none;
    border-left:none;
    border-top:1px solid transparent;
    border-bottom:1px solid black;*/
    background-color:transparent;
}

.score-cell button {
    border:none;
    width:36px;
    height:36px;
    /*background-color: linear-gradient(#eee, #ccc);*/
    background-color:transparent;
    background-size:50%;
    background-repeat:no-repeat;
    background-position:center center;
    filter:grayscale(1) opacity(.4);
}

.buzzed.score-cell button,
.called2-active.score-cell button,
.results-row .score-cell button,
.called2.score-cell button,
.score-cell .picker button {
    filter:none;
}

.score-cell .button-plus {
    background-image:url("plus.svg");
}

.score-cell .button-minus {
    background-image:url("minus.svg");
}

.score-cell .button-plus-minus {
    background-image:url("plus-minus-solid.svg");
}


.score-cell button:active {
    border-style:inset;
    background-color: #ccc;

}


.settings {
    margin-top:10px;
    display:grid;
    grid-template-columns:1fr;
    grid-gap:10px;
}

.settings h4 {
    font-size:24px;
    border-bottom:1px solid gray;
}

.settings h5 {
    font-size:14px;
    margin-bottom:0;
}

.settings label {
    font-weight:bold;
}

.radio-group label {
    display:flex;
    font-weight:normal;
    align-items:flex-start;
    margin-bottom:5px;
    font-weight:bold;
}

.radio-group input[type="radio"] {
    margin-right:5px;
    margin-top:5px;
}

.radio-extra textarea {
    /*margin-left:20px;*/
    font-weight:normal;
    width:100%;
}

.radio-extra label {
	font-size:14px;
}

.time-limit input[type="number"] {
    width:60px;
    margin-right:5px
}

.settings label input[type='text'] {
    font-weight:normal;
    flex:1;
}

.form-help {
    font-size:14px;
    font-weight:normal;
}

.picker {
    position:absolute;
    z-index:10;
    display:flex;
    box-shadow: 0px 0px 3px 1px #ffff5d;
    flex-direction:column;
}

.picker button {
    font-size:20px;
    border:2px outset green;
    /*background-color:#eee;*/
    margin:0 0px;
    /*background: linear-gradient(#eee, #ccc);*/
    padding:3px;
    width:auto;
    height:auto;
    color:white;
}

.picker button:active {
    background:inherit;
    border-style:inset;
}

.picker-increment button {
    border-color:green;
    font-family:monospace;
}

.picker-increment {
    right:-10px;
    background-color:green;
    bottom:0;
}

.picker-decrement {
    left:-10px;
    background-color:red;
}

.picker-decrement button {
    border-color:red;
    font-family:monospace;
}

@keyframes fly {
    0% {
        font-size:10px;
        opacity:1;
    }
    50% {
        opacity:1;
    }
    /*
    25% {
        font-size:75px;
        opacity:1;
    }
    50% {
        font-size:75px;
        opacity:1;
    }*/
    100% {
        font-size:100px;
        opacity:0;
    }
}

.delta {
    position:fixed;
    /*transition:1.5s font-size ease, 6s opacity ease;*/
    font-size:10px;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    animation-name:fly;
    animation-duration:1.5s;
    animation-fill-mode: forwards;
    text-align:right;
    z-index:11;
}

.delta.positive {
    color:#00aa00;
}

.delta.negative {
    color:red;
}



  .pushable {
    position: relative;
    border: none;
    background: lightgray;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    border-radius:12px;
    border:5px solid lightgray;
  }
  .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }
  .edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(
      to left,
      black 0%,
      #666 8%,
      #666 92%,
      black 100%
    );
  }
  .unlocked .edge {
    background: linear-gradient(
      to left,
      hsl(340deg 100% 16%) 0%,
      hsl(340deg 100% 32%) 8%,
      hsl(340deg 100% 32%) 92%,
      hsl(340deg 100% 16%) 100%


      /*
      #9e7900 0%,
      #e0ac00 8%,
      #e0ac00 92%,
      #9e7900 100%*/
    );

  }

  .home-button.unlocked .edge {
    background: linear-gradient(
      to left,
      hsl(340deg 100% 16%) 0%,
      hsl(51deg 33% 60%) 8%,
      hsl(51deg 33% 60%) 92%,
      hsl(340deg 100% 16%) 100%);
  }

  .front {
    display: block;
    position: relative;
    /*padding: 12px 42px;*/
    padding:30px;
    border-radius: 12px;
    font-size:45px;
    color: white;
    /*background: hsl(345deg 100% 47%);*/
    background: radial-gradient(#cbcbcb, #707070);

    will-change: transform;
    transform: translateY(-10px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }
  .unlocked .front {
      /*background: radial-gradient(#ffff5a, #ffd447);*/
      background: radial-gradient(#ff9999, red);
  }
  .home-button .front {
      color:black;
  }
  .unlocked.home-button .front  {
      background: radial-gradient(#ffeca8, #ffc300);

    }
  .unlocked.pushable:hover {
    filter: brightness(110%);
  }
  /*
  .pushable:hover .front {
    transform: translateY(-15px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }*/
  .pushable:active .front,
  .pushable.bounced .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }
  .pushable.selected {
      box-shadow: 0px 0px 8px 8px #ffff5d;
  }
  .called .pushable.selected {
      box-shadow: 0px 0px 8px 8px black;
  }
  .pushable.unlocked:active .front,
  .pushable.unlocked.bounced .front {
      /*background: radial-gradient(#ffff5a, #ffd447);*/
      background: radial-gradient(#ffbbbb, red);
  }
  .pushable.unlocked.home-button:active .front {
      background: radial-gradient(#ffff5a, #ffd447);
  }

  .pushable:hover .shadow {
    transform: translateY(3px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }
  .pushable.unlocked:active .shadow,
  .pushable.unlocked.bounced .shadow {
    transform: translateY(1px);
    transition: transform 34ms;
  }
  .pushable:focus:not(:focus-visible) {
    outline: none;
  }


.results {
    margin-top:10px;
    border:1px solid black;
    margin-bottom:10px;
    margin-left:32px;
    margin-right:32px;
}

.results-header {
    /*background: linear-gradient(to top, #1d2675 0%,#2a3698 100%);*/
    /*background: linear-gradient(to top, #111 0%,#222 100%) fixed;*/
    background: linear-gradient(to top, #ffd447 0%,#ffe165 100%);
    color:black;

    display:flex;
    border-bottom:1px solid black;
    position:relative;
}

.results-header button {
    background:none;
    border:none;
    color:black;
    font-size: 18px;
    padding:10px 0 10px 5px;
    font-weight:bold;
}

button.results-header-hide {
    margin-left:auto;
    font-weight:normal;
    font-size:14px;
    position:absolute;
    left:-32px;
    top:7px;
    line-height:1;
    color:white;
    font-family:monospace;
    font-weight:bold;
    background:none;
    border:none;
    width:32px;
    height:32px;
    padding:0;
}

button.collapse, button.expand {
    background-image:url("minus-square.svg");
    background-size:50%;
    background-position:center center;
    background-repeat:no-repeat;
}

button.expand {
    background-image:url("plus-square.svg");
}

button.sort, span.sort {
    /*background-image:url("sort.svg");*/
    background-color:transparent;
    background-size:50%;
    background-repeat:no-repeat;
    background-position:center center;
    width:30px;
}

span.sort {
    display:inline-block;
}

button.sort-up, span.sort-up {
    background-image:url("caret-up.svg");
}

button.sort-down, span.sort-down {
    background-image:url("caret-down.svg");
}

.results-row {
    display:flex;
    align-self:stretch;
    border-bottom:1px solid black;
    /*
    border-left:1px solid black;
    border-right:1px solid black;*/
    align-items:center;
    background-color:white;
    min-height:36px;
}

.results-row:last-child {
    border-bottom:none;
    /*border-top:1px solid black;*/
}

.results-bar {
    flex:1;
    background-color:red;
    background: linear-gradient(45deg, #ddd, #ddd);
    background-repeat: no-repeat;
    padding-left:5px;
    transition:all .5s ease;
}

.results-bar .score-cell {
    margin-left:5px;
}

.results-bar span {
    float:right;
    font-family: monospace;
    font-size: 16px;
    padding-right:5px;
}

.simple .results-bar span {
}

.results-row .picker-increment {
    right:unset;
    left: unset;
    right: 100%;
    bottom: 50%;
}

.results-row .picker-decrement {
    left:unset;
    right:unset;
    right:100%;
    top: 50%;
}

button.picker-active {
    border-style:inset;
    background-color: #ccc;
}

.url-bar {
    /*background-color:#ffff5d;*/
    background-color:#ffd447;
    padding:5px;
    font-size:32px;
    display:inline-block;
    text-align:center;
    font-family:monospace;
    box-shadow:0 0 3px 1px #333;
    margin-bottom:10px;
    word-break:break-word;
}

.url-bar span {
    letter-spacing:-3px;
}

.info {
    padding-bottom:10px;
    text-align:center;
    padding-top:10px;
}

.info-button {
    position:relative;
}

.info-button.depressed:after {
    content:"\25BC";
    position:absolute;
    bottom:-28px;
    font-size:24px;
    left:0;
    width:100%;
    text-align:center;
    color:black;
}

.info samp {
    font-size:18px;
    font-weight:bold;

}

.alert-warning, .alert-ok {
    position:fixed;
    top:0;
    left:0;
    right:0;
    padding:5px;
    text-align:center;
    font-size:18px;
    z-index:100;
}

.alert-warning {
    background-color:#ffd447;
    color:black;
}

.alert-ok {
    background-color: #008833;
    color: white;
}

.help-button {
    transform: translateY(-100%);
    display:inline-block;
    color:#666;
    position:absolute;
}

@media only screen and (max-width: 550px) {
    .players-footer-buttons {
        display:block;
    }

    .players-footer-buttons > button {
        margin:5px 10px 0 0;
    }

    .score-cell2 {
        display:inline-block;
        margin:5px 10px 0 0;
    }

    /*
    .players {
        overflow:visible;
        overflow-x:auto;
    }*/
/*
    .button-list, .info, .results {
        max-width:calc(100vw - 40px);
    }
    .host-header, .small-counter {
        width:calc(100vw - 40px);
    }*/
}



/* home stuff */
.join-block > div > div {
    margin:auto;
    position:relative;
    color:white;
    padding:0 10px;
}

.create-block {
    margin:auto;
    display:inline-block;
    position:relative;
    color:white;
    display:flex;

}

#home-main {
    min-height:100vh;
    position:sticky;
    display:flex;
    flex-direction:column;
    margin:auto;
	top:0;
    z-index:1;
}

#home-main > div {
    flex:1;
}

#logo {
    /*
    margin:auto;
    display:block;
    position:absolute;
    transform:translate(-50%, -120%);
    margin-left:50%;
    */
    align-self:flex-end;
    justify-self:center;
    margin-bottom:5vh;
    padding:0 10px;
}

#home h1 {
    font-size:36px;
    text-align:left;
    line-height:1;
}

.join-block label {
    font-size:24px;
    /*color:white;*/
    display:block;
    margin-bottom:-20px;
}

.code {
    font-size:48px;
    padding:10px;
    text-align:center;
    display:block;
    width:100%;
}

.join-block .front {
    /*padding:5px 30px;*/
}

#host-line {
    font-size:18px;
    /*color:white;*/
    margin-top:-15px;
    width:calc(100% - 180px); /* the width of the button */
}

#host-line button {
    background: #333; /*radial-gradient(#ff9999, red);*/
    text-decoration:underline;
    color: white;
    font-weight:bold;
    border-color:#333;
    cursor:pointer;
}

#host-line button:hover {
    text-decoration:none;
}

#host-line a {
    color:black;
}

.home-end {
    font-size:24px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    left:0;
    right:0;
	z-index:3;
    /*
    position:sticky;
    bottom:0;*/
}

.home-end a {
	color:inherit;
}

.home-end > div {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	/* background: linear-gradient(to bottom, #cfd3f2 0%,#fff 100%); */
    /*
	background-color: #2a3698;*/
    /*background: linear-gradient(to top, #000 0%,#222 100%) fixed;*/
	/* box-shadow: 0px 0px 14px 0px #ffff5a; */
	padding: 5px 10px;
	color: black;
    background-color:#ffd447;
    box-shadow: 0px 1px 5px 2px #fff;
    /*background: linear-gradient(to top, #ffd447 0%,#ffe165 100%);*/
}

.home-end p {
    text-align:center;
}

.normal {
    padding:0 20px;
}

.normal h1 {
    color:black;
    margin-bottom:10px;
}

.normal h2 {
    margin-bottom:.1em;
}

.normal p {
    margin-bottom:1em;
}

.feature-list {
    list-style-type:none;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    margin-left:0;
    padding-left:0;
}

.feature-list li {
    display:inline-block;
    background-color:#ffd447;
    margin:5px;
    padding:5px;
}

/*
.feature-list li:after {
    content:" \2022";
    background-color:white;
    position:absolute;
    margin-bottom:10px;
    padding:5px;
}*/


.cutoff {
    height:6em;
    overflow:hidden;
	position:relative;
    margin-bottom:30px;
}

/*
.cutoff:after {
  content:'';
  height:3em;
  width:100%;
  position:absolute;
  left:0;
  top:0;
  background-color:white;
  background:linear-gradient(transparent 20px, white);
  z-index:1;
}*/

.cutoff2 {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    background:linear-gradient(transparent 0%, white 50%);
}
.cutoff button {
    margin-top:30px;
    border:none;
    background:none;
    color:#2a3698; /*#3141b4;*/
    text-decoration:underline;
    cursor:pointer;
}

.cutoff button:hover {
    text-decoration:none;
}

.open.cutoff {
    height:auto;
    overflow:visible;
}

.player-interface {
    margin-left:20px;
    max-width:33%;

}
.player-interface img {
    margin:auto;
    /*border:10px solid #ffff5a;*/
    box-shadow:0 0 3px 1px black;
    margin-bottom:10px;
}

#main-info {
    display:flex;
    margin-top:30px;
    padding-bottom:30px;
}

.home-body > div > div {
	transform: translate3d(0,0,0);
}

#host-interface h1 {
    padding-top:30px;

}

#host-interface rect {
	fill:transparent;
}
#host-interface {
    /*background: linear-gradient(to top, #111 0%,#222 100%) fixed;*/
    background-color: #ffd447;
    z-index:3;
    position:relative;
}

#host-interface > div {
	max-width:960px;
	margin:auto;
    padding-bottom:30px;
    /*background: linear-gradient(to top, #1d2675 0%,#2a3698 100%) fixed;*/
}

#diagram {
	display:flex;
    margin-top:30px;
}

#diagram > div:first-child,
#diagram > div:last-child {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
    max-width:30%;
}

#diagram-svg {
	flex:1;
	margin:0 20px;
}

#diagram p {
	padding:5px;
	color:white;
	box-shadow:0 0 3px 1px black;
	background-color:#000;
}

#host-interface .highlight-active {
	/*background-color:#efefef;*/
    color:black;
	background-color:#ffd447;

}

#feature-svg {
	box-shadow:0 0 3px 1px #ffff5d;
}

#use-cases {
    padding-top:30px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

#use-cases > div {
    padding:5px;
    max-width:25%;
    min-width:200px;
}

summary {
    font-size:18px;
    text-decoration:underline;
    cursor:pointer;
    margin-bottom:5px;
    margin-top:5px;
}

summary:hover {
    text-decoration:none;
}

.code-area {
    display:flex; align-items:center;
}

.help-section h2 {
    margin-top:20px;
}

.x-mark {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    z-index:1000;
}

@keyframes shake {
    8%, 41% {
        transform: translateX(-20px);
    }
    25%, 58% {
        transform: translateX(20px);
    }
    75% {
        transform: translateX(-10px);
    }
    92% {
        transform: translateX(10px);
    }
    0%, 100% {
        transform: translateX(0);
        opacity:1;
    }
}

.shake {
    animation: shake .5s linear;
    animation-iteration-count: infinite;
    overflow:hidden;
}

@media only screen and (max-width: 600px) {
    .join-block label {
        margin-bottom:0px;
        text-align:center;
    }

    .code-area {

    }

    #host-line {
        width:100%;
        margin-top:10px;
    }

    .join-block .front {
        padding:5px 10px;
    }

    #main-info {
        display:block;

    }

    .player-interface {
        max-width:none;

    }

    #use-cases {
        display:block;
    }

    #use-cases > div {
        max-width:none;
    }
    #diagram {
        display:block;
    }
    #diagram > div:first-child,
    #diagram > div:last-child {
        max-width:none;
    }
    #diagram-svg {
        margin:0;

    }

    .home-end {
        font-size:16px;
    }
}