dialog.alert{position:fixed;inset:0;margin:auto;transition-property:opacity,transform,overlay,display;transition-duration:var(--default-transition-duration);transition-behavior:allow-discrete;transition-timing-function:var(--default-transition-timing-function);.dialog-title{font-size:1.5em}.button-group{display:flex;justify-content:center;button.confirm{--neumo-item-background-color: var(--accent-color)}}&::backdrop{transition-property:opacity,overlay,display;transition-duration:var(--default-transition-duration);transition-behavior:allow-discrete;transition-timing-function:var(--default-transition-timing-function);background:inherit;opacity:0}&:not(:modal){opacity:0;transform:scale(0)}&:modal{opacity:1;transform:scale(1);&::backdrop{opacity:.95}@starting-style{opacity:0;transform:scale(0);&::backdrop{opacity:0}}}}.home.page{display:flex;flex:1 1 auto;align-items:center;justify-items:center;.card{display:flex;flex:1 1 auto;flex-direction:column;animation:card-init 1s ease-in-out forwards;&.neumo{--neumo-item-distance: 5px;padding:25px}>*{flex:1 1 auto}}}@keyframes card-init{0%{--neumo-item-distance: 200px}}.nav-bar{display:flex;margin-bottom:-20px;padding-bottom:20px;& button{flex:1 1 auto;&.active{--neumo-item-background-color: var(--accent-color)}&.attention{--max-shake-distance: 5%;animation:shake 1s ease-in-out infinite}&[name=exit]{--neumo-item-color: hsl(0, 50%, 60%);@media (prefers-color-scheme: dark){--neumo-item-color: hsl(0, 50%, 40%)}}}}.player-list.view{text-align:center;max-width:800px;margin:0 auto;.card{--neumo-item-distance: 5px;.player-count-label{font-size:1.5em;font-weight:700;margin:.5em}& ul{margin:0;list-style:none;padding:0;>li{user-select:none;&.self{--max-shake-distance: 2%;font-weight:700;animation:shake 5s linear infinite}&.host:after{content:" (host)";font-style:italic;filter:contrast(.5)}}}}}.chatting.view{flex:1 1 0;display:flex;flex-direction:column;overflow:hidden;.message-container{flex:1 0 0;height:100%;display:flex;flex-direction:column;overflow:hidden;.message-list{flex:1 0 0;padding:0;margin:0;overflow-y:auto;.message-item{display:flex;gap:5px;.message-item-player-label{--neumo-item-distance: 3px;margin:0;flex:0 0 auto}}}}.input-form{flex:0 0 0;display:flex;& textarea{flex:1 1 0;height:4.5em}& button{flex:0 0 auto}}}.game-list.view{dialog{height:80%;width:80%;&[open]{display:flex}&::backdrop{backdrop-filter:blur(20px)}&.config-dialog{flex-direction:column;>.json-editor-scroll-wrapper{overflow-y:auto;flex:1 1 auto}>button{flex:0 0 auto;&.confirm{--neumo-item-background-color: var(--accent-color)}}}&.start-game-dialog{flex-direction:column;>div{flex:1 1 auto;display:flex;flex-direction:column;overflow:auto;& button{flex:0 0 auto}}}}& div.game-list{display:flex;flex-direction:column;>button{flex:0 0 auto;.player-name-list{display:flex;.player-name{--neumo-item-distance: 5px}}}}}.playing.view{height:100%;width:100%}.room.page{flex:1 1 auto;display:flex;flex-direction:column;width:100%;height:100%;.content-container{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;position:relative;overflow-y:auto;.game-plugin{visibility:hidden;position:absolute;display:block;height:100%;width:100%;border:none;border-radius:5px}.view{flex:1 1 0;min-height:0}}.nav-bar{flex:0 0 auto;animation:rise 1.8s var(--default-transition-timing-function) forwards;& button{padding:10px 5px;margin:5px}}}@keyframes rise{0%{transform:translateY(100%)}}@layer neumo{@property --neumo-item-color{syntax: "<color>"; inherits: true; initial-value: hsl(0,0%,35%);}@property --neumo-item-background-color{syntax: "<color>"; inherits: true; initial-value: hsl(0,0%,90%);}@property --neumo-item-distance{syntax: "<length>"; inherits: true; initial-value: 10px;}@property --neumo-item-light-angle{syntax: "<angle>"; inherits: true; initial-value: 45deg;}@property --neumo-item-shadow-color{syntax: "<color>"; inherits: true; initial-value: hsl(0,0%,0%,.2);}@property --neumo-item-highlight-color{syntax: "<color>"; inherits: true; initial-value: hsl(0,0%,100%,.8);}@property --neumo-item-highlight-2-color{syntax: "<color>"; inherits: true; initial-value: hsl(0,0%,100%,.8);}:where(:root){--neumo-item-color: hsl(0, 0%, 35%);--neumo-item-background-color: hsl(0, 0%, 90%);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;color:var(--neumo-item-color);background-color:var(--neumo-item-background-color);@media (prefers-color-scheme: dark){--neumo-item-color: hsl(0, 0%, 65%);--neumo-item-background-color: hsl(0, 0%, 10%)}}.neumo{:where(&){--neuno-item-distance: 5px;--neumo-item-transition-protperty: box-shadow, color, background-color;--neumo-item-transition-duration: .5s;--neumo-item-transition-timing-function: cubic-bezier(.65, -.5, .3, 2.5);--neumo-item-shadow-x-offset-base: calc( var(--neumo-item-distance) * cos(var(--neumo-item-light-angle)) * .5 );--neumo-item-shadow-y-offset-base: calc( var(--neumo-item-distance) * sin(var(--neumo-item-light-angle)) * .5 );--neumo-item-shadow-spread-base: calc(var(--neumo-item-distance) * .5);--neumo-item-highlight: calc(var(--neumo-item-shadow-x-offset-base) * -.5) calc(var(--neumo-item-shadow-y-offset-base) * -.5) calc(var(--neumo-item-shadow-spread-base) * 1) 0px var(--neumo-item-highlight-color);--neumo-item-highlight-2: calc( var(--neumo-item-shadow-x-offset-base) * -.5 ) calc(var(--neumo-item-shadow-y-offset-base) * -.5) calc(var(--neumo-item-shadow-spread-base) * 1) 0px var(--neumo-item-highlight-2-color);--neumo-item-shadow: calc(var(--neumo-item-shadow-x-offset-base) * .5) calc(var(--neumo-item-shadow-y-offset-base) * .5) calc(var(--neumo-item-shadow-spread-base) * 1) 0px var(--neumo-item-shadow-color);@media (prefers-color-scheme: dark){--neumo-item-shadow-color: hsl(0, 0%, 0%, .8);--neumo-item-highlight-color: hsl(0, 0%, 100%, .2);--neumo-item-highlight-2-color: hsl( from var(--neumo-item-background-color) h s l / .2 )}margin:10px}box-sizing:border-box;color:var(--neumo-item-color);background-color:var(--neumo-item-background-color);border-radius:10px;padding:10px;box-shadow:var(--neumo-item-shadow),var(--neumo-item-highlight),var(--neumo-item-highlight-2);transition-property:var(--neumo-item-transition-protperty);transition-duration:var(--neumo-item-transition-duration);transition-timing-function:var(--neumo-item-transition-timing-function);&.hollow,a&:active,a&:focus,button&:active,input&,textarea&{box-shadow:inset var(--neumo-item-shadow),inset var(--neumo-item-highlight),inset var(--neumo-item-highlight-2)}&:not([disabled]){a&:active,a&:focus,button&:active,input&,textarea&{box-shadow:inset var(--neumo-item-shadow),inset var(--neumo-item-highlight),inset var(--neumo-item-highlight-2)}}a&,button&{--neumo-item-distance: 10px;:where(&){all:unset;-webkit-tap-highlight-color:transparent;cursor:pointer;margin:10px;overflow:hidden;text-align:center;&[disabled]{cursor:default;filter:contrast(.8)}}&:not([disabled]){&:hover{--neumo-item-distance: 15px}&:active{--neumo-item-distance: 8px}}}input&,textarea&{--neumo-item-distance: 8px;:where(&){all:unset;text-align:left;margin:10px;overflow:hidden;&[disabled]{filter:contrast(.8)}}&:not([disabled]){&:hover{--neumo-item-distance: 12px}&:active,&:focus{--neumo-item-distance: 5px}}}dialog&{--neumo-item-distance: 15px;:where(&){border:none;margin:auto}}ul&{--neumo-item-distance: 5px;padding:5px;:where(&){list-style-type:none}}li&{--neumo-item-distance: 5px;padding:5px;:where(&){margin:5px}}}}:root{--accent-color: hsl(190, 50%, 75%);--default-transition-protperty: box-shadow, color, background-color;--default-transition-duration: .6s;--default-transition-timing-function: cubic-bezier(.5, -.25, .3, 1.2);--max-shake-distance: 10px;@media (prefers-color-scheme: dark){--accent-color: hsl(190, 50%, 25%)}}body{margin:0}#app{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;max-height:100vh;max-height:100svh;overflow:hidden;& header{flex:1 0 0}& main{flex:1 0 0;display:flex;flex-direction:column;overflow:hidden;>.page{max-width:min(1280px,100%);margin:0 auto;>*{min-width:0}}}}::view-transition-group(*){animation-duration:var(--default-transition-duration);animation-timing-function:var(--default-transition-timing-function)}::view-transition-old(*),::view-transition-new(*){animation-duration:var(--default-transition-duration);animation-timing-function:var(--default-transition-timing-function);height:100%;width:100%;object-fit:contain}@keyframes shake{0%{transform:translate(0)}15%{transform:translate(calc(-.5 * var(--max-shake-distance, 10%)),calc(-1 * var(--max-shake-distance, 10%)))}30%{transform:translate(calc(1 * var(--max-shake-distance, 10%)),calc(.75 * var(--max-shake-distance, 10%)))}45%{transform:translate(calc(-.75 * var(--max-shake-distance, 10%)),calc(1 * var(--max-shake-distance, 10%)))}60%{transform:translate(calc(.5 * var(--max-shake-distance, 10%)),calc(-.5 * var(--max-shake-distance, 10%)))}75%{transform:translate(calc(-1 * var(--max-shake-distance, 10%)),calc(.5 * var(--max-shake-distance, 10%)))}90%{transform:translate(calc(.75 * var(--max-shake-distance, 10%)),calc(-.75 * var(--max-shake-distance, 10%)))}to{transform:translate(0)}}