@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";body,#root{height:100vh;display:flex;flex-direction:column;margin:0;padding:0;background:#fdf5e6;color:#2e2e2e;font-family:"Press Start 2P",monospace}#root>div{flex:1;display:flex;flex-direction:column;min-height:100vh}header{flex:0 0 auto;padding:0 .5em}footer{flex:0 0 auto;margin-top:auto}header nav{justify-content:left;gap:2rem}header nav a{display:inline-block;padding:.4rem .8rem;font-size:.7rem;text-decoration:none;color:#fff;background-color:#000;border:2px solid #000;border-radius:4px;transition:all .2s ease;font-family:"Press Start 2P",monospace;vertical-align:middle}header nav .nav-right{margin-left:auto}header nav a:not([href]){background-color:#1e90ff;color:#000;border-color:#1e90ff}header nav a:hover{background-color:#1e90ff;transform:scale(1.02)}header hr{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}header nav ul{display:flex;gap:2rem;list-style:none;padding:0;margin:0}header nav ul .nav-right{margin-left:auto}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}footer{display:flex;flex-direction:column;justify-content:left;align-items:left;padding:1em .5em;font-size:.8em;color:#000;gap:.2em}footer hr{border:none;border-top:1.5px solid #000;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;margin-bottom:1em}@media (max-height: 600px){header{display:none}footer{display:none}main{flex:1 100vh}}.landscape-warning{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#1e90ff;color:#000;text-align:center;z-index:9999;font-size:1.2em;padding:0;align-items:center;justify-content:center}@media (orientation: portrait) and (max-width: 800px){.landscape-warning{display:flex}header,.tabletop,footer{display:none!important}}.big-title{font-size:5rem;line-height:1.2;margin:0 0 .01em}.secondary-title{font-size:2rem;line-height:1.2;margin:0 0 .01em}.main-header{font-size:1.5rem;line-height:1.2;margin:.5em 0}main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5em}#login-form{display:flex;flex-direction:column;align-items:center;gap:1em}#login-form input{padding:.8em 1em;width:250px;border:2px solid #2e2e2e;border-radius:8px;font-family:"Press Start 2P",monospace;font-size:.9em;outline:none;transition:border-color .3s,box-shadow .3s}#login-form input:focus{border-color:#1e90ff;box-shadow:0 0 8px #1e90ff}#login-form button{padding:.8em 1.5em;background-color:#2e2e2e;color:#fff;border:none;border-radius:8px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:.9em;transition:background-color .3s,transform .2s}#login-form button:hover{background-color:#1e90ff;transform:translateY(-2px)}.gmtools-container{display:flex;flex-direction:column;height:100%;padding:1em;gap:1em;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;max-width:1600px;width:100%;margin:0 auto}.row{display:grid;grid-template-columns:1fr 1fr;gap:2em;align-items:start}.host-content{display:grid;grid-template-rows:1fr 1fr;gap:2em;align-items:start}.game-id-box{background-color:#fff;border:2px solid #4a4a4a;border-radius:8px;padding:1.5em;min-height:100px;max-height:300px;overflow-y:auto;box-shadow:4px 4px #000;font-family:"Press Start 2P",monospace}.host-table-button{padding:1em 2em;background-color:#2e2e2e;color:#fff;border:2px solid #2e2e2e;border-radius:4px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:.8rem;transition:all .3s;align-self:center;text-transform:uppercase;box-shadow:4px 4px #000}.host-table-button:hover{background-color:#1e90ff;border-color:#1e90ff;transform:translate(-2px,-2px);box-shadow:6px 6px #000}.participants-box{background-color:#fff;border:2px solid #4a4a4a;border-radius:8px;padding:1.5em;min-height:300px;max-height:500px;overflow-y:auto;box-shadow:4px 4px #000;font-family:"Press Start 2P",monospace}.participants-header{color:#000;font-size:.9rem;margin-bottom:1em;text-align:center;border-bottom:2px solid #4a4a4a;padding-bottom:.5em}.participants-list{display:flex;flex-direction:column;gap:.8em}.participant-item{display:flex;align-items:center;padding:.8em;background-color:#1e90ff;border:3px solid #000;border-radius:4px;transition:all .2s ease}.gm-tabletop{flex:1 0 auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:2em;margin:0;padding:0;min-height:0}.gm-map{position:relative;flex:1;max-height:75vh;max-width:60vw;height:75vh;background-color:#000;margin:0 0 0 1em;padding:0;box-sizing:border-box}.right-gm-screen{display:grid;gap:1em;align-items:start}.bottom-gm-buttons{display:grid;grid-template-rows:1fr 1fr;gap:1em;align-items:start;margin-right:.7em}.participants-final{flex:1;background-color:#fff;border:2px solid #4a4a4a;border-radius:8px;padding:1.5em;margin:0 1em 0 0;height:30vh;width:32vw;height:55vh;box-shadow:4px 4px #000;font-family:"Press Start 2P",monospace}.add-tokens-button{padding:1em 2em;background-color:#2e2e2e;color:#fff;border:2px solid #2e2e2e;border-radius:4px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:.8rem;transition:all .3s;align-self:center;text-transform:uppercase;box-shadow:4px 4px #000}.about-container{display:flex;flex-direction:column;height:100%;padding:1em;gap:1em;box-sizing:border-box}.landscape-image{flex:1;width:100%;object-fit:contain;object-position:center;border-radius:8px;box-shadow:0 4px 8px #0000004d;background-color:#000}.about-text{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;font-family:"Press Start 2P",monospace;color:#333;line-height:1.6;padding:1em;overflow-y:auto}.about-text h2{margin:0 0 1em;color:#1e90ff;font-size:1.2em}.about-text p{margin:0 0 1em;font-size:.9em}@media (max-width: 768px){.about-container{padding:.5em;gap:.5em}.about-text{font-size:.8em;padding:.5em}.about-text h2{font-size:1em}.about-text p{font-size:.7em}}@media (orientation: portrait) and (max-width: 800px){.about-container{flex-direction:column}.landscape-image{flex:0 0 40vh}.about-text{flex:1}}body{display:flex;flex-direction:column;min-height:100vh;margin:0;padding:0}header,footer{flex:0 0 auto}.tabletop{flex:1 0 auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:2em;margin:0;padding:0;min-height:0}.map{position:relative;flex:1;max-height:75vh;max-width:60vw;height:75vh;background-color:#000;margin:0 0 0 1em;padding:0;box-sizing:border-box}td{padding:0}.token{position:absolute;cursor:grab;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;-webkit-user-select:none;user-select:none;border:2px solid #2e2e2e;box-shadow:2px 2px #2e2e2e}.token.pc{background-color:#1e90ff}.token.enemy{background-color:#f44}.token:active{cursor:grabbing}.token:hover{transform:scale(1.05);transition:transform .1s ease}.token.circle{border-radius:50%}.token.square{border-radius:8px}.drag-image{width:30px;height:30px;border-radius:50%;border:2px solid #2e2e2e;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;box-shadow:2px 2px #2e2e2e;background:#1e90ff;position:absolute;top:-1000px;left:-1000px;-webkit-user-select:none;user-select:none;pointer-events:none}.drag-image.pc{background-color:#94999e}.character-sheet{flex:1;display:flex;flex-direction:column;justify-content:stretch;max-height:75vh;max-width:35vw;height:67vh;background:#c6bebe;color:#000;margin:0em 1 0em 0;padding:1em;box-sizing:border-box;box-shadow:6px 6px #2e2e2e;border-radius:8px}.character-sheet table{width:100%;flex:1;border-collapse:collapse}.character-sheet th,.character-sheet td{border:2px solid #333;padding:.5em;text-align:left}.right-screen{display:grid;gap:1em;align-items:start}.bottom-buttons{display:grid;grid-template-columns:1fr 1fr;gap:1em;align-items:start}.customize-token-button{padding:1em 2em;background-color:#2e2e2e;color:#fff;border:2px solid #2e2e2e;border-radius:4px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:.8rem;transition:all .3s;align-self:center;text-transform:uppercase;box-shadow:4px 4px #000}.customize-token-row{display:grid;grid-template-columns:1fr 1fr;gap:2.5em;align-items:start;margin-bottom:2em}.customize-token-row>div{display:flex;flex-direction:column;align-items:center}.name-shape{display:grid;gap:1em;align-items:start}.customize-token-modal{background:#c6bebe;border:4px solid #000;border-radius:12px;padding:30px;text-align:center;animation:popIn .3s ease-out;max-width:700px;max-height:90vh;width:400px;height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center}.customize-token-modal input[type=text],.customize-token-modal input[type=number]{font-size:2rem;padding:.5em 1em;border:2px solid #2e2e2e;border-radius:6px;margin-bottom:.4em;width:80%;box-sizing:border-box;background:#fff;color:#2e2e2e;font-family:"Press Start 2P",monospace}.customize-token-modal select{font-size:1rem;padding:.5em 1em;border:2px solid #2e2e2e;border-radius:6px;margin-bottom:.4em;width:80%;box-sizing:border-box;background:#fff;color:#2e2e2e;font-family:"Press Start 2P",monospace;appearance:none;outline:none;transition:border-color .2s}.customize-token-modal select:focus{border-color:#1e90ff}.customize-token-modal select option{font-size:2rem;font-family:"Press Start 2P",monospace;color:#2e2e2e;background:#fff}.customize-token-modal .form-group{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;text-align:center}.customize-token-modal .form-group>*:not(:last-child){margin-bottom:1.2em}.customize-token-modal label{margin-bottom:.6em;font-size:1.2rem}.join-table-button{padding:1em 2em;background-color:#2e2e2e;color:#fff;border:2px solid #2e2e2e;border-radius:4px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:.8rem;transition:all .3s;align-self:center;text-transform:uppercase;box-shadow:4px 4px #000}.join-table-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .3s ease-in}.join-table-modal{background:#c6bebe;border:4px solid #000;border-radius:12px;padding:30px;text-align:center;animation:popIn .3s ease-out;max-width:700px;max-height:90vh;width:400px;height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center}.join-table-modal .form-group{display:flex;flex-direction:column;align-items:center;width:100%}.join-table-modal input[type=text],.join-table-modal input[type=number]{font-size:2rem;padding:.5em 1em;border:2px solid #2e2e2e;border-radius:6px;margin-bottom:.4em;width:80%;box-sizing:border-box;background:#fff;color:#2e2e2e;font-family:"Press Start 2P",monospace}.form-group label{text-transform:none!important}.close-join-button{padding:1em 2em;background-color:#2e2e2e;color:#fff;border:2px solid #2e2e2e;border-radius:4px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:.8rem;transition:all .3s;align-self:center;text-transform:uppercase;box-shadow:4px 4px #000}@media (max-height: 600px){.character-sheet,.map{margin:0}}.join-table-modal .form-group label{font-size:1.5rem!important}.join-table-modal .form-group input[type=text]{font-size:2rem!important}.customize-token-modal .form-group label{font-size:1.2rem!important}.customize-token-modal .form-group input[type=text]{font-size:1rem!important}.shape-select-button{font-size:.7rem;padding:.5em 1.5em;border:2px solid #2e2e2e;border-radius:6px;background:#fff;color:#2e2e2e;font-family:"Press Start 2P",monospace;cursor:pointer;transition:background .2s,color .2s,border-color .2s;margin-bottom:.4em;text-transform:uppercase}.shape-select-button.selected,.shape-select-button:focus{background:#1e90ff;color:#fff;border-color:#1e90ff}.csheet-container{display:flex;flex-direction:column;height:100%;padding:1em;gap:1em;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;max-width:1600px;width:100%;margin:0 auto}#csheet-form{display:flex;flex-direction:column;gap:1.5em;width:100%;background:#fffc;border:2px solid #2e2e2e;border-radius:8px;padding:2em;box-shadow:4px 4px #2e2e2e;box-sizing:border-box;overflow-x:hidden}.top-row{display:grid;grid-template-columns:4fr 1fr 1fr 1fr 1fr 1fr;gap:2em;align-items:start}.top-row label,.top-row input{font-size:.6rem;font-family:"Press Start 2P",monospace}.top-row label{margin-bottom:.5em;color:#2e2e2e;text-transform:uppercase}.top-row input{padding:.5em;border:1px solid #2e2e2e;border-radius:4px}.generate-name-button{background-color:#9b59b6;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;margin-left:10px}.generate-name-button:hover{background-color:#8e44ad}.form-sections-wrapper{display:grid;grid-template-columns:1fr 6fr;gap:2em;align-items:start}.left-column{display:flex;flex-direction:row;gap:2em}.right-column{display:flex;flex-direction:column;gap:2em}.section{background:none;border:none;border-radius:0;padding:0;box-shadow:none;margin-bottom:1.5em}.section h2{font-size:1rem;margin-bottom:1em;text-align:left;color:#2e2e2e;text-transform:uppercase;border-bottom:2px solid #2e2e2e;padding-bottom:.5em}.form-row{display:flex;gap:1em;margin-bottom:1em;flex-wrap:wrap}.form-group{display:flex;flex-direction:column;flex:1;min-width:150px}.form-group label{font-size:.6rem;margin-bottom:.5em;color:#2e2e2e;text-transform:uppercase}.abilities-grid{display:grid;grid-template-columns:1fr;gap:1em;max-width:50px}.ability-group{display:flex;flex-direction:column;aspect-ratio:1;align-items:center;justify-content:center;padding:.8em 1em;background:#1e90ff1a;border:2px solid #2e2e2e;border-radius:4px;gap:1em;max-width:90px}.ability-group label{font-size:.6rem;margin:0;text-align:left;color:#2e2e2e;text-transform:uppercase;flex:1}.ability-group input{width:60px!important;text-align:center;font-weight:700;flex:0 0 auto}.ability-group input[type=number]{-webkit-appearance:none;-moz-appearance:textfield}.ability-group input[type=number]::-webkit-outer-spin-button,.ability-group input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.modifier{font-size:.4rem;margin:0;color:#1e90ff;font-weight:700;text-align:center;flex:0 0 auto;min-width:50px}#csheet-form input{padding:.8em 1em;width:100%;border:2px solid #2e2e2e;border-radius:4px;font-family:"Press Start 2P",monospace;font-size:.6rem;outline:none;transition:border-color .3s,box-shadow .3s;background:#fff;box-sizing:border-box}#csheet-form input:focus{border-color:#1e90ff;box-shadow:0 0 8px #1e90ff4d}#csheet-form input[type=number]{text-align:center}.save-button{padding:1em 2em;background-color:#2e2e2e;color:#fff;border:2px solid #2e2e2e;border-radius:4px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:.8rem;transition:all .3s;align-self:center;text-transform:uppercase;box-shadow:4px 4px #000}.save-button:hover{background-color:#1e90ff;border-color:#1e90ff;transform:translate(-2px,-2px);box-shadow:6px 6px #000}.combat-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;max-width:300px}.combat-stat-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1em;background:#1e90ff1a;border:2px solid #2e2e2e;border-radius:4px;gap:.5em;aspect-ratio:1;min-height:80px;max-width:80px}.combat-stat-box label{font-size:.6rem;margin:0;text-align:center;color:#2e2e2e;text-transform:uppercase;line-height:1.2}.combat-stat-box input{width:50px!important;height:30px;text-align:center;font-weight:700;font-size:.7rem;padding:.3em;margin:0;border:1px solid #2e2e2e;border-radius:4px}.combat-stat-box input[type=number]{-webkit-appearance:none;-moz-appearance:textfield}.combat-stat-box input[type=number]::-webkit-outer-spin-button,.combat-stat-box input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.character-details-grid{display:flex;flex-direction:column;gap:1.5em}.detail-group{display:flex;flex-direction:column;gap:.5em}.detail-group label{font-size:.6rem;color:#2e2e2e;text-transform:uppercase;font-family:"Press Start 2P",monospace;margin-bottom:.5em}.detail-group textarea{padding:.8em;border:2px solid #2e2e2e;border-radius:4px;font-family:"Press Start 2P",monospace;font-size:.5rem;background:#fff;resize:vertical;min-height:60px;line-height:1.4;outline:none;transition:border-color .3s,box-shadow .3s}.detail-group textarea:focus{border-color:#1e90ff;box-shadow:0 0 8px #1e90ff4d}.detail-group textarea::placeholder{color:#999;font-style:italic}@media (max-width: 700px){.detail-group textarea{font-size:.4rem;padding:.6em}}@media (max-width: 700px){.form-sections-wrapper{display:block!important}.ability-group{flex-direction:column!important;align-items:center!important;gap:.5em!important}.ability-group label,.modifier{text-align:center!important;flex:none!important}}@media (max-width: 600px){.form-row{flex-direction:column}.form-group{min-width:auto}}@media (max-width: 400px){.abilities-grid{grid-template-columns:1fr!important}}.input-with-icon{position:relative}.input-with-icon input{padding-right:40px;width:100%}.generate-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:#000;color:#fff;border:none;font-size:10px;cursor:pointer;font-family:"Press Start 2P",monospace;padding:4px;border-radius:3px;transition:background-color .2s ease}.generate-icon-button:hover{background-color:#1e90ff;transform:translateY(-50%) translate(-1px,-1px);box-shadow:2px 2px #000}.easter-egg-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .3s ease-in}.easter-egg-modal{background:#2c1810;border:4px solid #8B4513;border-radius:12px;padding:30px;text-align:center;animation:popIn .3s ease-out;max-width:90vw;max-height:90vh}.easter-egg-image{max-width:80vw;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:8px;margin-bottom:20px;image-rendering:pixelated}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}