#mockups{max-width:900px;margin-left:auto;margin-right:auto}.mockup{position:relative;border:3.3em solid black;background:black;border-radius:3.3em;margin:1.5rem auto;font-size:15px;box-shadow:0 0.5em 1em rgba(0,0,0,0.2)}.mockup.landscape{max-width:900px;border-top-width:0.6em;border-bottom-width:0.6em}.mockup.portrait{max-width:469px;border-left-width:0.6em;border-right-width:0.6em}.mockup::before,.mockup::after{content:'';display: inline-block;background: #333;border-radius: 100%;position: absolute;width: 1em;height: 1em;margin-top: -0.5em;margin-left: -0.5em;line-height: 1em;text-align: center;color: #666}.mockup::after {font-size: 2em}.mockup.landscape::before {left: -1.5em;top: 50%}.mockup.landscape::after {right: -1.25em;top: 50%}.mockup.portrait::before {left: 50%;top: -1.5em}.mockup.portrait::after {left: 50%;bottom: -1.25em}.mockup .screen-border {position: relative;border-radius: 1vw;overflow: hidden;background: white}@media screen and (max-width: 1000px) {.mockup.landscape {font-size: 1.5vw}}@media screen and (max-width: 540px) {.mockup.portrait {font-size: 2.778vw}}.mockup.landscape .screen-border {height: 0;padding-bottom: 56.25%}.mockup.portrait .screen-border {height: 0;padding-bottom: 177.778%}.mockup .screen {position: absolute;left: 0;right: 0;bottom: 0;right: 0;width: 100%;height: 100%}.mockup .game-board-container {position: absolute}.mockup.landscape .game-board-container {width: 56.25%;height: 100%}.mockup.portrait .game-board-container {width: 100%;height: 56.25%;top: 3em}.mockup .game-board {margin: 0;width: 100%;height: 100%;position: absolute;table-layout: fixed}.mockup .game-board td {width: 6%;height: 6%}.mockup .game-controls-container {position: absolute;top: 0;bottom: 0;right: 0}.mockup.landscape .game-controls-container {width: 43.75%}.mockup.portrait .game-controls-container {left: 0;margin-top: 3em;padding-top: 100%}.mockup .game-controls-container h1 {font-size: 2em;margin: 0;padding: 0 0.375em;position: relative}.mockup.portrait .game-controls-container h1 {position: absolute;top: -1.5em;left: 0;right: 0}.mockup .game-controls-container h1 span.hamburger,.mockup .game-controls-container h1 span.hamburger::before,.mockup .game-controls-container h1 span.hamburger::after {display: inline-block;width: 0.8em;height: 4px;position: absolute;background: white;display: inline-block}.mockup .game-controls-container h1 span.hamburger {right: 0.375em;top: 50%;margin-top: -2px}.mockup .game-controls-container h1 span.hamburger::before,.mockup .game-controls-container h1 span.hamburger::after {content: ' '}.mockup .game-controls-container h1 span.hamburger::before{top:-0.3em;margin-top:1px}.mockup .game-controls-container h1 span.hamburger::after{bottom:-0.3em;margin-bottom:1px}.mockup .game-controls-container h2{font-size:1em;padding:0 0.75em;margin:0}.mockup .game-controls-container h2.shaded.light{background-color:#9cf}.mockup .game-controls-container p{margin:0.5em 0.75em}.mockup .game-players ol{margin:0.75em;list-style:none}.mockup .game-players ol li.current{font-weight:bold}.mockup .game-players ol li .game-board-tile{vertical-align:top}.mockup .game-players ol li .player-progress{display:block;height:5px;background:#eee;margin:-0.5em 0 0.5em 2.45em;position:relative}.mockup .game-players ol li .player-progress span{position:absolute;left:0;height:100%;background-color:#369}.mockup .game-players ol li .player-score{font-weight:normal;color:white;background-color:#369;border-radius:100%;width:1.5em;height:1.5em;text-align:center;line-height:1.5em;font-size:0.7em;float:right;margin-top:0.25em}.mockup .game-players ol li.winning .player-progress span,.mockup .game-players ol li.winning .player-score{background-color:green}.mockup .game-board-tile{font-weight:normal;font-size:1.15em;width:1.522em;height:1.522em;margin:0.17em}.mockup .game-board-tile.player-1{background-color:black;color:white}.mockup .game-board-tile.player-2{background-color:#c12;color:white}.mockup .game-board-tile.player-3{background-color:green;color:white}.mockup .game-board-tile.player-4{background-color:gold;color:black}.mockup .game-button-container{position:absolute;bottom:0.75em;right:0.75em}.mockup .game-button-container input[type="button"]{margin-bottom:0}.mockup .screen-rotator{background:#69C;color:white;font-size:2rem;width:1em;height:1em;line-height:1em;padding:0.25em;border-radius:100%;text-align:center;cursor:pointer;position:absolute;right:-0.25em;top:-0.25em;box-shadow:0.1em 0.1em 0.01em #369;display:none}.mockup:hover .screen-rotator{display:block}.mockup .keyboard{position:absolute;width:100%;bottom:0;background:#111;color:white;padding:0.5em 0}.mockup .keyboard .keyboard-row{width:100%;display:block;text-align:center;white-space:nowrap}.mockup .keyboard .keyboard-row .keyboard-key{box-sizing:border-box;display:inline-block;width:10%;background:#333;border:0.2em solid #111;border-radius:0.6em;padding:0.4em}.mockup .keyboard .keyboard-row .keyboard-key.space{width:50%}.mockup .keyboard .keyboard-row .keyboard-key.symbol{background:transparent}.mockup .dialog-container{position:absolute;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,0.4)}.mockup .dialog{position:absolute;background:#111;color:white;padding:1em 1.5em;border-radius:1em;left:50%;top:10%;transform:translateX(-50%);width:90%;max-width:30em;box-sizing:border-box;box-shadow:0 0.5em 1em rgba(0,0,0,0.3)}.mockup .dialog .caption{color:#ccc;font-size:0.8em}.mockup .dialog .field{margin-top:0.5em}.mockup .dialog .field input{outline:none;appearance:none;background:transparent;border:none;border-bottom:1px solid white;width:100%;box-sizing:border-box;padding:0.2em 0}.mockup .dialog .buttons{text-align:right}.mockup .dialog .buttons .button{text-align:center;background:#333;display:inline-block;padding:0.1em 0.5em;border-radius:0.4em}