body{margin:0;overflow:hidden;height:100dvh;display:flex;flex-direction:column}body main{flex-grow:1;width:100%;box-sizing:border-box}body main.homescreen{padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;animation:appear 1.5s linear .5s forwards}body main.homescreen nav{display:flex;flex-direction:column;gap:1rem}body main.homescreen nav h1{font-size:4rem;color:#000;margin:0;position:relative}body main.homescreen nav h1 .box-shadow{position:absolute;left:50%;top:50%;height:0%;width:75%;translate:-50% -50%;box-shadow:0 0 3rem 1.5rem rgba(255,255,255,.5);z-index:-1}body main.homescreen nav button{flex-grow:1;background:0 0;backdrop-filter:blur(5px) brightness(0.9)}body main.homescreen nav button:hover{outline:1px solid rgb(54,54,54);backdrop-filter:blur(5px) brightness(0.8)}@keyframes appear{to{opacity:1}}body header.game{display:grid;grid-template-columns:1fr 1fr;padding:.5rem;box-sizing:border-box;height:max(48px,7.5dvh);margin-bottom:1rem}body header.game #biggest-longest{display:flex;align-items:center}body header.game #biggest-longest button{width:max(48px,7.5dvh);height:max(48px,7.5dvh);background:0 0;border:none;z-index:2}body header.game #biggest-longest img{width:max(48px,7.5dvh);height:max(48px,7.5dvh)}body header.game #biggest-longest img:not(.active){filter:grayscale(1) opacity(.5)}body header.game #victory-points{margin-left:auto;display:flex;align-items:center}body header.game #victory-points img{width:max(48px,7.5dvh);margin-left:auto;height:100%}body header.game #victory-points h2{margin:0;color:#ffd117;font-size:2.5rem}body main.game{display:flex;flex-direction:column;align-items:center;padding:1rem;box-sizing:border-box}@media (width > 450px){body main.game{position:absolute;top:0;height:100dvh}}body main.game #development{display:flex;justify-content:center}body main.game #development button{background:0 0;border:none}body main.game #development button img{height:8dvh}body main.game #buy-menu{flex-grow:1;display:flex;justify-content:center;align-items:center}body main.game #buy-menu .grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.5em}body main.game #buy-menu .grid button{background:0 0;border:none;padding:0}body main.game #buy-menu .grid button img{display:block;margin-inline:auto;max-width:100%;max-height:15dvh;margin-bottom:.5rem}body main.game #buy-menu .grid button p{background:#f4f4f4;border-radius:1rem;font-size:.875rem;margin-block:0;padding-inline:0.5em}body main.game #buy-menu .grid button:disabled{filter:grayscale(1)}body main.game #buy-menu .grid button:not(:disabled):hover p{background:#a9210f}body main.game #trade-with{display:flex;align-items:center}body main.game #trade-with>:first-child{margin-right:1rem}body main.game #trade-with button{border:none;background:0 0;font-weight:700}body main.game #trade-with button[aria-selected=false]{filter:brightness(.4) grayscale(.9)}body main.game #trade-with :nth-child(2)~*{background:#fff;width:1.5em;height:1.5em;border-radius:100vw;margin-inline:0.25rem;padding:0}body main.game #trade-with img{height:min(8dvh,10dvw)}body main.game #harbors{margin-top:1rem;display:grid;grid-template-columns:repeat(6,1fr);max-height:20%;width:100%;max-width:max(min(100%,500px),40%);justify-content:center;margin-bottom:0}body main.game #harbors button{position:relative;background:0 0;border:none}body main.game #harbors button img{max-width:100%;max-height:100%}body main.game #harbors button:not(:disabled){filter:brightness(.8) grayscale(.9)}body main.game #harbors button:not(:disabled) :first-child{opacity:.4}body main.game #harbors button .harbor-trade-icon{position:absolute;top:-.5rem;left:-.5rem;width:1.375rem;height:1.375rem;background-color:rgba(244,244,244,.8);background-blend-mode:lighten;border-radius:100%;padding:.25em;border:2px solid;display:flex;justify-content:center;align-items:center}body main.game #harbors>:last-child{padding:10%}body main.game #harbors>:last-child img{max-width:100%;max-height:100%}body main.game #trade-resources{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center}body main.game #trade-resources p{margin:0}body main.game #resources{display:grid;grid-template-columns:repeat(6,1fr);max-height:25%;width:100%;max-width:max(min(100%,500px),40%);justify-content:center;margin-bottom:0;padding-bottom:.75rem}body main.game #resources button{position:relative;background:0 0;border:none}body main.game #resources button img{width:100%;max-width:100%;max-height:100%}body main.game #resources button:disabled{filter:brightness(.8) grayscale(.9)}body main.game #resources button .resource-counter{position:absolute;top:90%;left:50%;translate:-50% -50%;background-color:rgba(244,244,244,.8);background-blend-mode:lighten;width:min(50px,25%);height:min(50px,25%);font-size:.625em;border-radius:100vw;border:2px solid #121212;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none}body main.game #resources>:last-child{padding:10%}body main.game #resources>:last-child img{max-width:100%;max-height:100%}body dialog{top:0;left:0;width:100dvw;height:100dvh;background:0 0;backdrop-filter:blur(5px);padding:0}body dialog[open]{display:flex;justify-content:center;align-items:center}body dialog .inner{display:flex;flex-direction:column;padding:1.5rem;background-color:#f4f4f4;text-align:center;border-radius:.5rem;box-shadow:6px 6px 6px 6px rgba(0,0,0,.4)}body dialog .inner :first-child{margin-top:0}body dialog .inner :last-child{margin-bottom:0}body dialog .inner #game-id{display:grid;grid-template-columns:repeat(5,min-content);justify-content:center;margin-bottom:1em;gap:5px}body dialog .inner #game-id>*{border-width:1px;margin:0}body #notifications{position:fixed;top:10px;left:10px;max-height:75%;overflow-y:scroll;z-index:10}body #notifications>div{padding:.5rem 1rem;background-color:rgba(18,18,18,.8);color:#f4f4f4;border-radius:5px;margin-bottom:5px;min-width:0}body #notifications{--scrollbar-width:8px;--mask-height:32px;padding-bottom:var(--mask-height);padding-right:20px;--mask-image-content:linear-gradient(
    to bottom,
    transparent,
    black var(--mask-height),
    black calc(100% - var(--mask-height)),
    transparent
  );--mask-size-content:calc(100% - var(--scrollbar-width)) 100%;--mask-image-scrollbar:linear-gradient(black, black);--mask-size-scrollbar:var(--scrollbar-width) 100%;mask-image:var(--mask-image-content),var(--mask-image-scrollbar);mask-size:var(--mask-size-content),var(--mask-size-scrollbar);-webkit-mask-image:var(--mask-image-content),var(--mask-image-scrollbar);-webkit-mask-size:var(--mask-size-content),var(--mask-size-scrollbar);mask-position:0 -20px,100% 0;-webkit-mask-position:0 -20px,100% 0;mask-repeat:no-repeat,no-repeat;-webkit-mask-repeat:no-repeat,no-repeat}body>img.background{position:fixed;z-index:-1;left:-1px;width:calc(100% + 2px);height:calc(100% + 1px);object-fit:cover;filter:brightness(.1);animation:brighten 1s linear .1s forwards}@keyframes brighten{to{filter:brightness(1)}}@keyframes darken{to{filter:brightness(.5) blur(10px)}}body .resources{display:grid;grid-template-columns:repeat(5,1fr);max-height:25%;width:100%;max-width:max(min(100%,500px),40%);justify-content:center;margin-bottom:0;padding-bottom:.75rem}body .resources button{position:relative;background:0 0;border:none}body .resources button img{width:100%;max-width:100%;max-height:100%}body .resources button:disabled{filter:brightness(.8) grayscale(.9)}body .resources button .resource-counter{position:absolute;top:90%;left:50%;translate:-50% -50%;background-color:rgba(244,244,244,.8);background-blend-mode:lighten;width:min(50px,25%);height:min(50px,25%);font-size:.625em;border-radius:100vw;border:2px solid #121212;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none}body .resources>:last-child{padding:10%}body .resources>:last-child img{max-width:100%;max-height:100%}body dialog .development-hero{width:40vmin;margin-inline:auto;margin-bottom:1rem;border-radius:.5rem}body dialog .monopoly-select{margin-bottom:1rem;display:flex;gap:1rem;justify-content:center}body dialog .monopoly-select>label:not([aria-selected=true]){filter:grayscale(.9) opacity(.25)}body dialog .monopoly-select>label input[type=radio]{display:none}body dialog .resources{margin-bottom:1rem;margin-inline:auto}:root{font-size:calc(.5rem + 2.5vmin);font-family:Georgia,"Times New Roman",Times,serif}:root button{cursor:pointer;font-size:1rem;border-radius:.5em;border:2px solid #000;touch-action:manipulation}:root button img{user-select:none;-webkit-user-select:none}:root input{font-size:1rem;padding-inline:0.5rem;border-radius:.5em;border-color:#000}:root .toggle{display:flex;justify-content:center;align-items:center;border-radius:100dvh;overflow:hidden;width:min-content;margin-inline:auto;background:#c6c6c6}:root .toggle label{cursor:pointer;padding-inline:0.625rem;padding-block:0.125rem}:root .toggle label.active{background:#a9210f;color:#f4f4f4}:root .error-message{color:#a9210f}