@property --RESOURCE_BACKGROUND_ANGLE{syntax: "<angle>"; inherits: false; initial-value: 15deg;}@property --RESOURCE_BACKGROUND_COLOR_TRANSPARENCY{syntax: "<number>"; inherits: false; initial-value: 1;}.resource{--RESOURCE_BORDER_PADDING: 2px;border-radius:var(--BORDER_RADIUS);color:var(--COLOR);text-decoration:none;display:inline-block;transition:--RESOURCE_BACKGROUND_ANGLE var(--TRANSITION_TIME) ease,--RESOURCE_BACKGROUND_COLOR_TRANSPARENCY var(--TRANSITION_TIME) ease;background:linear-gradient(var(--RESOURCE_BACKGROUND_ANGLE),rgba(from var(--ACCENT_COLOR_ORANGE) r g b / var(--RESOURCE_BACKGROUND_COLOR_TRANSPARENCY)),rgba(from var(--ACCENT_COLOR_PINK) r g b / var(--RESOURCE_BACKGROUND_COLOR_TRANSPARENCY)),rgba(from var(--ACCENT_COLOR_BLUE) r g b / var(--RESOURCE_BACKGROUND_COLOR_TRANSPARENCY)),rgba(from var(--ACCENT_COLOR_GREEN) r g b / var(--RESOURCE_BACKGROUND_COLOR_TRANSPARENCY)))}.resource-border-bottom{padding-bottom:var(--RESOURCE_BORDER_PADDING)}.resource-border-left{padding-left:var(--RESOURCE_BORDER_PADDING)}.resource-border-top{padding-top:var(--RESOURCE_BORDER_PADDING)}.resource-border-right{padding-right:var(--RESOURCE_BORDER_PADDING)}.resource-secondary:not(:hover){--RESOURCE_BACKGROUND_COLOR_TRANSPARENCY: 0}.resource:hover{--RESOURCE_BACKGROUND_ANGLE: 290deg}.resource-container{border-radius:var(--BORDER_RADIUS);transition:background-color var(--TRANSITION_TIME) ease;background-color:var(--BACKGROUND_COLOR_BUTTON)}.resource-container-title{padding:var(--PADDING_SMOL) var(--PADDING_BIG)}.resource-secondary:not(:hover) .resource-container-clear{background-color:transparent}.resource-container:active{background-color:var(--BACKGROUND_COLOR_BUTTON_INVERTED)}.resource-disabled{cursor:not-allowed}.home-parent{margin:6rem 0}.home-section{display:flex;justify-content:center}.home-wow-text{font-family:"Noto Serif",serif;display:flex;justify-content:center;align-items:center;background:linear-gradient(-10deg,var(--ACCENT_COLOR_ORANGE),var(--ACCENT_COLOR_PINK),var(--ACCENT_COLOR_BLUE),var(--ACCENT_COLOR_GREEN));border-radius:50px}.home-wow-text-content{margin-top:2%;position:relative;font-size:clamp(16px,9vw,175px);line-height:.9em;text-align:center;transform:rotate(-10deg) skew(10deg);--HOME_TEXT_SHADOW_COLOR: #000}.home-description{margin-top:6rem;text-align:center}.home-button{margin-top:var(--PADDING_BIG)}@media(prefers-color-scheme:dark){.home-wow-text-content{color:#fff;--HOME_TEXT_SHADOW_COLOR: #ddd}}@media screen and (min-width:500px){.home-wow-text-content{text-shadow:0px 0px 0px var(--HOME_TEXT_SHADOW_COLOR),-1px 1px 0px var(--HOME_TEXT_SHADOW_COLOR),-2px 2px 0px var(--HOME_TEXT_SHADOW_COLOR),-3px 3px 0px var(--HOME_TEXT_SHADOW_COLOR),-4px 4px 0px var(--HOME_TEXT_SHADOW_COLOR),-5px 5px 0px var(--HOME_TEXT_SHADOW_COLOR)}}@media screen and (min-width:550px){.home-wow-text-content{text-shadow:0px 0px 0px var(--HOME_TEXT_SHADOW_COLOR),-1px 1px 0px var(--HOME_TEXT_SHADOW_COLOR),-2px 2px 0px var(--HOME_TEXT_SHADOW_COLOR),-3px 3px 0px var(--HOME_TEXT_SHADOW_COLOR),-4px 4px 0px var(--HOME_TEXT_SHADOW_COLOR),-5px 5px 0px var(--HOME_TEXT_SHADOW_COLOR),-6px 6px 0px var(--HOME_TEXT_SHADOW_COLOR)}}@media screen and (min-width:600px){.home-wow-text-content{text-shadow:0px 0px 0px var(--HOME_TEXT_SHADOW_COLOR),-1px 1px 0px var(--HOME_TEXT_SHADOW_COLOR),-2px 2px 0px var(--HOME_TEXT_SHADOW_COLOR),-3px 3px 0px var(--HOME_TEXT_SHADOW_COLOR),-4px 4px 0px var(--HOME_TEXT_SHADOW_COLOR),-5px 5px 0px var(--HOME_TEXT_SHADOW_COLOR),-6px 6px 0px var(--HOME_TEXT_SHADOW_COLOR),-7px 7px 0px var(--HOME_TEXT_SHADOW_COLOR)}}@media screen and (min-width:650px){.home-wow-text-content{text-shadow:0px 0px 0px var(--HOME_TEXT_SHADOW_COLOR),-1px 1px 0px var(--HOME_TEXT_SHADOW_COLOR),-2px 2px 0px var(--HOME_TEXT_SHADOW_COLOR),-3px 3px 0px var(--HOME_TEXT_SHADOW_COLOR),-4px 4px 0px var(--HOME_TEXT_SHADOW_COLOR),-5px 5px 0px var(--HOME_TEXT_SHADOW_COLOR),-6px 6px 0px var(--HOME_TEXT_SHADOW_COLOR),-7px 7px 0px var(--HOME_TEXT_SHADOW_COLOR),-8px 8px 0px var(--HOME_TEXT_SHADOW_COLOR)}}@media screen and (min-width:700px){.home-wow-text-content{text-shadow:0px 0px 0px var(--HOME_TEXT_SHADOW_COLOR),-1px 1px 0px var(--HOME_TEXT_SHADOW_COLOR),-2px 2px 0px var(--HOME_TEXT_SHADOW_COLOR),-3px 3px 0px var(--HOME_TEXT_SHADOW_COLOR),-4px 4px 0px var(--HOME_TEXT_SHADOW_COLOR),-5px 5px 0px var(--HOME_TEXT_SHADOW_COLOR),-6px 6px 0px var(--HOME_TEXT_SHADOW_COLOR),-7px 7px 0px var(--HOME_TEXT_SHADOW_COLOR),-8px 8px 0px var(--HOME_TEXT_SHADOW_COLOR),-9px 9px 0px var(--HOME_TEXT_SHADOW_COLOR)}}@media screen and (min-width:750px){.home-wow-text-content{text-shadow:0px 0px 0px var(--HOME_TEXT_SHADOW_COLOR),-1px 1px 0px var(--HOME_TEXT_SHADOW_COLOR),-2px 2px 0px var(--HOME_TEXT_SHADOW_COLOR),-3px 3px 0px var(--HOME_TEXT_SHADOW_COLOR),-4px 4px 0px var(--HOME_TEXT_SHADOW_COLOR),-5px 5px 0px var(--HOME_TEXT_SHADOW_COLOR),-6px 6px 0px var(--HOME_TEXT_SHADOW_COLOR),-7px 7px 0px var(--HOME_TEXT_SHADOW_COLOR),-8px 8px 0px var(--HOME_TEXT_SHADOW_COLOR),-9px 9px 0px var(--HOME_TEXT_SHADOW_COLOR),-10px 10px 0px var(--HOME_TEXT_SHADOW_COLOR)}}@media screen and (min-width:800px){.home-wow-text-content{text-shadow:0px 0px 0px var(--HOME_TEXT_SHADOW_COLOR),-1px 1px 0px var(--HOME_TEXT_SHADOW_COLOR),-2px 2px 0px var(--HOME_TEXT_SHADOW_COLOR),-3px 3px 0px var(--HOME_TEXT_SHADOW_COLOR),-4px 4px 0px var(--HOME_TEXT_SHADOW_COLOR),-5px 5px 0px var(--HOME_TEXT_SHADOW_COLOR),-6px 6px 0px var(--HOME_TEXT_SHADOW_COLOR),-7px 7px 0px var(--HOME_TEXT_SHADOW_COLOR),-8px 8px 0px var(--HOME_TEXT_SHADOW_COLOR),-9px 9px 0px var(--HOME_TEXT_SHADOW_COLOR),-10px 10px 0px var(--HOME_TEXT_SHADOW_COLOR),-11px 11px 0px var(--HOME_TEXT_SHADOW_COLOR)}}@media screen and (min-width:850px){.home-wow-text-content{text-shadow:0px 0px 0px var(--HOME_TEXT_SHADOW_COLOR),-1px 1px 0px var(--HOME_TEXT_SHADOW_COLOR),-2px 2px 0px var(--HOME_TEXT_SHADOW_COLOR),-3px 3px 0px var(--HOME_TEXT_SHADOW_COLOR),-4px 4px 0px var(--HOME_TEXT_SHADOW_COLOR),-5px 5px 0px var(--HOME_TEXT_SHADOW_COLOR),-6px 6px 0px var(--HOME_TEXT_SHADOW_COLOR),-7px 7px 0px var(--HOME_TEXT_SHADOW_COLOR),-8px 8px 0px var(--HOME_TEXT_SHADOW_COLOR),-9px 9px 0px var(--HOME_TEXT_SHADOW_COLOR),-10px 10px 0px var(--HOME_TEXT_SHADOW_COLOR),-11px 11px 0px var(--HOME_TEXT_SHADOW_COLOR),-12px 12px 0px var(--HOME_TEXT_SHADOW_COLOR)}}@media screen and (min-width:900px){.home-wow-text-content{text-shadow:0px 0px 0px var(--HOME_TEXT_SHADOW_COLOR),-1px 1px 0px var(--HOME_TEXT_SHADOW_COLOR),-2px 2px 0px var(--HOME_TEXT_SHADOW_COLOR),-3px 3px 0px var(--HOME_TEXT_SHADOW_COLOR),-4px 4px 0px var(--HOME_TEXT_SHADOW_COLOR),-5px 5px 0px var(--HOME_TEXT_SHADOW_COLOR),-6px 6px 0px var(--HOME_TEXT_SHADOW_COLOR),-7px 7px 0px var(--HOME_TEXT_SHADOW_COLOR),-8px 8px 0px var(--HOME_TEXT_SHADOW_COLOR),-9px 9px 0px var(--HOME_TEXT_SHADOW_COLOR),-10px 10px 0px var(--HOME_TEXT_SHADOW_COLOR),-11px 11px 0px var(--HOME_TEXT_SHADOW_COLOR),-12px 12px 0px var(--HOME_TEXT_SHADOW_COLOR),-13px 13px 0px var(--HOME_TEXT_SHADOW_COLOR)}}@media screen and (min-width:950px){.home-wow-text-content{text-shadow:0px 0px 0px var(--HOME_TEXT_SHADOW_COLOR),-1px 1px 0px var(--HOME_TEXT_SHADOW_COLOR),-2px 2px 0px var(--HOME_TEXT_SHADOW_COLOR),-3px 3px 0px var(--HOME_TEXT_SHADOW_COLOR),-4px 4px 0px var(--HOME_TEXT_SHADOW_COLOR),-5px 5px 0px var(--HOME_TEXT_SHADOW_COLOR),-6px 6px 0px var(--HOME_TEXT_SHADOW_COLOR),-7px 7px 0px var(--HOME_TEXT_SHADOW_COLOR),-8px 8px 0px var(--HOME_TEXT_SHADOW_COLOR),-9px 9px 0px var(--HOME_TEXT_SHADOW_COLOR),-10px 10px 0px var(--HOME_TEXT_SHADOW_COLOR),-11px 11px 0px var(--HOME_TEXT_SHADOW_COLOR),-12px 12px 0px var(--HOME_TEXT_SHADOW_COLOR),-13px 13px 0px var(--HOME_TEXT_SHADOW_COLOR),-14px 14px 0px var(--HOME_TEXT_SHADOW_COLOR)}}.icon{vertical-align:text-bottom}dialog::backdrop{background-color:#000;opacity:.75}dialog{border:none;border-radius:var(--BORDER_RADIUS);background-color:var(--BACKGROUND_COLOR);color:var(--COLOR);padding:0;min-height:150px;height:80vh}.modal-container{display:flex;width:100%;height:100%}.modal-left{flex:1;margin:var(--PADDING_SMOL);margin-right:0}.modal-image{border-radius:var(--BORDER_RADIUS_CARD);background:#006;aspect-ratio:2/3;height:100%;object-fit:cover;display:block}.modal-right{flex:1;padding-left:var(--PADDING_BIG);margin:var(--PADDING_SMOL) 0;display:flex;flex-direction:column;align-items:center}.modal-blobs{flex:100;overflow-y:auto;margin-bottom:var(--PADDING_BIG);padding-right:var(--PADDING_SMOL)}.modal-label{display:block;font-weight:700}.modal-text{min-width:150px;display:block;margin-left:var(--PADDING_SMOL);margin-bottom:var(--PADDING_SMOL)}@media screen and (max-aspect-ratio:1/1){.modal-label,.modal-text{display:inline-block}.modal-container{flex-direction:column}.modal-right{padding:var(--PADDING_BIG) 0}.modal-blobs{width:100%}}.card-container{cursor:pointer;position:relative;width:150px;aspect-ratio:2/3;perspective:1000px}.card-container img{pointer-events:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none}.card-inner{position:relative;width:100%;height:100%;transition:transform var(--TRANSITION_TIME);transform-style:preserve-3d}.card-front,.card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.card-image{border-radius:var(--BORDER_RADIUS_CARD);width:100%;height:100%;object-fit:cover;display:block}.card-front{background:#00008b}.card-back{transform:scaleX(-1) rotateY(180deg);background:#8b0000}.card-peak-front{transform:rotateY(35deg)}.card-show-back{transform:rotateY(180deg)}.card-peak-back{transform:rotateY(145deg)}.card-accessory-button{z-index:10;position:absolute;top:5px;right:5px}.card-accessory-button svg{width:24px;position:relative}.card-extra{background-color:transparent;z-index:1}.card-container:has(.player-green-pastel),.card-container:has(.player-blue-pastel),.card-container:has(.player-pink-pastel),.card-container:has(.player-orange-pastel),.card-container:has(.player-red-pastel){--COLOR: var(--COLOR_LM);--BACKGROUND_COLOR: var(--BACKGROUND_COLOR_LM);--BACKGROUND_COLOR_BUTTON: var(--BACKGROUND_COLOR_BUTTON_LM);--BACKGROUND_COLOR_BUTTON_INVERTED: var(--BACKGROUND_COLOR_BUTTON_DM)}.card-inner:has(.player-green-pastel),.card-inner:has(.player-blue-pastel),.card-inner:has(.player-pink-pastel),.card-inner:has(.player-orange-pastel),.card-inner:has(.player-red-pastel){--ACCENT_COLOR_MIDPOINT: lightblue}.player-green-pastel{background:var(--ACCENT_COLOR_MIDPOINT);background:linear-gradient(180deg,var(--BACKGROUND_COLOR_BUTTON_LM) 0%,var(--ACCENT_COLOR_MIDPOINT) 35%,var(--ACCENT_COLOR_GREEN) 100%)}.player-blue-pastel{background:var(--ACCENT_COLOR_MIDPOINT);background:linear-gradient(180deg,var(--BACKGROUND_COLOR_BUTTON_LM) 0%,var(--ACCENT_COLOR_MIDPOINT) 35%,var(--ACCENT_COLOR_BLUE) 100%)}.player-pink-pastel{background:var(--ACCENT_COLOR_MIDPOINT);background:linear-gradient(180deg,var(--BACKGROUND_COLOR_BUTTON_LM) 0%,var(--ACCENT_COLOR_MIDPOINT) 35%,var(--ACCENT_COLOR_PINK) 100%)}.player-orange-pastel{background:var(--ACCENT_COLOR_MIDPOINT);background:linear-gradient(180deg,var(--BACKGROUND_COLOR_BUTTON_LM) 0%,var(--ACCENT_COLOR_MIDPOINT) 35%,var(--ACCENT_COLOR_ORANGE) 100%)}.player-red-pastel{background:#8b0000;background:linear-gradient(180deg,var(--BACKGROUND_COLOR_BUTTON_LM) 0%,var(--ACCENT_COLOR_MIDPOINT) 35%,darkred 100%)}.player-dim{filter:brightness(50%)}.card-extra{transition:opacity var(--TRANSITION_TIME);opacity:0;background-repeat:no-repeat;background-size:300% auto}.card-extra-ruled-out{opacity:1;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'>  <style>text { font-family: sans-serif; }<\/style>  <g transform='rotate(10)'>    <path stroke='red' stroke-opacity='50%' stroke-width='20' d='M 0 170 L 256 170'></path>    <text transform='scale(-1, 1)' x='-145' y='175' fill='white' font-size='12'>Ruled Out!</text>  </g></svg>");background-position:25% 70%}.card-extra-detective{background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'>  <style>text { font-family: sans-serif; }<\/style>  <g>    <path stroke='green' stroke-opacity='50%' stroke-width='20' d='M 0 100 L 256 100'></path>    <text x='15' y='105' fill='white' font-size='12'>Detective</text>  </g></svg>");background-position:0% -10%}.card-extra-detective:has(~.player-detective){opacity:1}.card-extra-suspect{background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'>  <style>text { font-family: sans-serif; }<\/style>  <g>    <path stroke='black' stroke-opacity='50%' stroke-width='20' d='M 0 70 L 256 70'></path>    <text x='15' y='75' fill='white' font-size='12'>Suspect!</text>  </g></svg>");background-position:0% 0%}.card-extra-suspect:has(~.player-suspect){opacity:1}.chat-all-messages{flex:1;display:flex;gap:var(--PADDING_SMOL);flex-direction:column-reverse;overflow-y:auto;overflow-wrap:anywhere;padding:0 var(--PADDING_SMOL);margin:0 calc(-1 * var(--PADDING_SMOL))}.chat-message-container{border:2px solid var(--COLOR);border-radius:var(--BORDER_RADIUS);padding:calc(var(--PADDING_SMOL) / 2);max-width:75%}.chat-message-is-not-me{border-bottom-left-radius:0}.chat-message-is-me{border-bottom-right-radius:0;align-self:flex-end}.chat-message-metadata{display:flex;flex-wrap:wrap}.chat-message-is-me .chat-message-metadata{flex-direction:row-reverse}.chat-message-sender-name,.chat-message-sent-time,.chat-message-spacer{font-size:.6rem}.chat-message-sender-name{font-weight:700}.chat-message-is-me .chat-message-sender-name{text-align:right}.chat-message-spacer{white-space:pre}.chat-message-text-content{display:block}.chat-send-message{display:flex;gap:var(--PADDING_SMOL)}.chat-send-message textarea{flex:1}.chat-send-message-button svg{padding:2px 2px 1px;width:24px;position:relative}.info-container{display:flex;flex-direction:row;gap:var(--PADDING_SMOL);justify-content:center;align-items:center}.info-help-container{display:flex;flex-direction:column;gap:var(--PADDING_SMOL)}.info-opponent-container{padding:var(--PADDING_SMOL);padding-bottom:0;text-align:center;width:100%;display:inline-block}.play-parent{display:flex;flex-direction:column;height:100vh}.play-all-sections{display:flex;overflow:hidden;flex:1;position:relative}.play-section{padding:var(--PADDING_SMOL)}.play-left{display:flex;gap:var(--PADDING_SMOL);flex-wrap:wrap;justify-content:center;align-content:flex-start;flex:3;overflow-y:auto}.play-right{flex:1;display:flex;gap:var(--PADDING_SMOL);flex-direction:column}.play-tabs{display:none}@media screen and (max-width:800px){.play-tabs{display:flex;justify-content:center;gap:var(--PADDING_SMOL);padding:var(--PADDING_SMOL);padding-bottom:0}.play-section{transition:transform var(--TRANSITION_TIME) ease;height:calc(100% - (2 * var(--PADDING_SMOL)))}.play-hide-tab{position:absolute}.play-not-transitioning.play-hide-tab{visibility:hidden}.play-left.play-hide-tab{transform:translate(-105vw)}.play-right.play-hide-tab{transform:translate(105vw)}}:root{--COLOR_LM: #222;--COLOR_DM: #ddd;--COLOR: var(--COLOR_LM);--BACKGROUND_COLOR_LM: #ddd;--BACKGROUND_COLOR_DM: #222;--BACKGROUND_COLOR: var(--BACKGROUND_COLOR_LM);--BACKGROUND_COLOR_BUTTON_LM: #fff;--BACKGROUND_COLOR_BUTTON_DM: #000;--BACKGROUND_COLOR_BUTTON: var(--BACKGROUND_COLOR_BUTTON_LM);--BACKGROUND_COLOR_BUTTON_INVERTED: var(--BACKGROUND_COLOR_BUTTON_DM);--ACCENT_COLOR_ORANGE: #ee7752;--ACCENT_COLOR_PINK: #e73c7e;--ACCENT_COLOR_BLUE: #23a6d5;--ACCENT_COLOR_GREEN: #23d5ab;--PADDING_SMOL: 1rem;--PADDING_BIG: 2rem;--BORDER_RADIUS: 5px;--BORDER_RADIUS_CARD: 10px;--TRANSITION_TIME: .75s}:root{font-family:Inter,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--COLOR);background-color:var(--BACKGROUND_COLOR);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;display:flex;align-items:center;min-height:100vh}body:has(dialog[open]){overflow:hidden}#app{margin:0 auto}h1,h2,h3,h4,h5,h6,a{margin:0;padding:0}@media(prefers-color-scheme:dark){:root{--COLOR: var(--COLOR_DM);--BACKGROUND_COLOR: var(--BACKGROUND_COLOR_DM);--BACKGROUND_COLOR_BUTTON: var(--BACKGROUND_COLOR_BUTTON_DM);--BACKGROUND_COLOR_BUTTON_INVERTED: var(--BACKGROUND_COLOR_BUTTON_LM)}}.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}button{border:none;margin:0;padding:0;width:auto;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;cursor:pointer}
