@import"https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap";@import"https://fonts.googleapis.com/css2?family=VT323&display=swap";*,*:before,*:after{box-sizing:border-box}:root{font-family:VT323,monospace;color:#f8fafc;--bg-color: #231e1c;--white: #f8fafc;--shadow-color: rgba(0, 0, 0, .5);--button-bg: #231d1c;--button-hover-bg: #2c2522;--button-active-bg: #2b2523;--radius: 1vmin;--padding: 2vmin;--bar: hsla(0, 0%, 100%, .5)}body{font-family:VT323,monospace;background-color:var(--bg-color);color:var(--white);margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100vh;font-weight:300}.game-screen{position:relative;width:90vmin;height:90vmin;max-width:100%;max-height:100%;overflow:hidden;background:var(--bg-color);border:1px solid var(--white);border-radius:var(--radius);box-shadow:0 5px 15px var(--shadow-color);display:flex;flex-direction:column;padding:15px;gap:10px}.game-title{text-transform:uppercase;font-size:3vmin;text-align:center;margin-bottom:.8vmin}.main-content{flex:1;display:flex;gap:12px;overflow:hidden;height:100%;min-height:0}.canvas-container{flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden;min-width:0;min-height:0;height:100%}canvas{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;display:block}.menu-wrapper{display:flex;justify-content:space-between;align-items:stretch;gap:.8vmin;padding:.8vmin;max-height:30%}.tile-palette-container{flex:4;display:flex;flex-direction:column;align-items:center;background:var(--button-active-bg);padding:.8vmin;border:.3vmin solid var(--white);border-radius:.8vmin;box-shadow:0 .5vmin 1vmin var(--shadow-color)}.tile-palette,.object-layer{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;width:100%}.object-layer{max-height:17vmin;overflow-y:auto}.tile-palette .toolbox{display:flex;flex-wrap:wrap;gap:.4vmin;max-height:15vmin;overflow-y:auto}.toolbar-container{flex:1;display:flex;flex-direction:column;align-items:center;background:var(--button-bg);padding:.3vmin;border-radius:.8vmin;box-shadow:0 .5vmin 1vmin var(--shadow-color)}.toolbar-container .toolbar{display:flex;flex-direction:column;gap:.3vmin;width:100%}.toolbar-container button{width:100%;padding:.6vmin .8vmin;background:var(--button-bg);color:var(--white);border:.3vmin solid var(--white);cursor:pointer;font-size:1.4vmin;font-weight:300;border-radius:.5vmin;text-align:left}.toolbar-container button:hover{background:var(--button-hover-bg)}button{font-family:inherit;background:var(--button-bg);border:.3vmin solid var(--white);padding:.6vmin 1.2vmin;cursor:pointer;color:var(--white);font-size:1.4vmin;font-weight:300;border-radius:.6vmin}button:hover{transform:translateY(-.2vmin);box-shadow:0 .4vmin .8vmin var(--shadow-color);transition:transform .2s ease,box-shadow .2s ease}button.active{background:var(--button-active-bg)}.layer-buttons{display:flex;gap:.4vmin;margin-bottom:.8vmin}.layer-buttons button{padding:.4vmin .6vmin;font-size:1.2vmin}.event-tooltip{padding:1.4vmin;background:var(--button-active-bg);border:.3vmin solid var(--white);border-radius:var(--radius);box-shadow:0 .4vmin 1vmin var(--shadow-color);color:var(--white);pointer-events:auto;position:absolute}.event-tooltip img{display:block;margin-bottom:.4vmin}.event-tooltip .tooltip-input{margin-bottom:.4vmin;background:transparent;border:.3vmin solid var(--white);color:var(--white);padding:.2vmin .4vmin;border-radius:.4vmin}.event-tooltip .role-cycler button{background:var(--button-bg);border:.3vmin solid var(--white);color:var(--white);cursor:pointer;padding:.2vmin .6vmin;border-radius:.4vmin}.tooltip-pin{position:absolute;top:.4vmin;right:.4vmin;background:transparent;border:none;color:var(--white);cursor:pointer;font-size:1.4vmin}.icon{border-radius:.4vmin;overflow:hidden;margin:.2vmin}.icon:hover{transform:scale(1.05);transition:transform .15s ease}.character-list{width:12vmin;min-width:8vmin;background:var(--button-bg);border:.3vmin solid var(--white);border-radius:var(--radius);padding:.4vmin .8vmin .4vmin .4vmin;margin-right:1vmin;display:flex;flex-direction:column;gap:.3vmin;overflow:hidden}.character-list h3{margin:0;padding:.2vmin;border-bottom:.3vmin solid var(--white);text-transform:uppercase;font-size:1.2vmin;text-align:center;flex-shrink:0}.character-list-items{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:.4vmin;padding:.2vmin .2vmin .4vmin;min-height:0;border-bottom:.3vmin solid var(--white)}.character-list-item{display:flex;flex-direction:column;align-items:center;gap:.2vmin;padding:.4vmin .2vmin;border:.3vmin solid transparent;border-radius:.3vmin;cursor:pointer;transition:all .2s ease}.character-list-item:hover{background:var(--button-hover-bg);border-color:var(--white)}.character-sprite{flex-shrink:0;width:4.8vmin;height:4.8vmin;image-rendering:pixelated}.character-info{flex:1;min-width:0}.character-name{font-size:1.2vmin;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.character-role{font-size:1vmin;opacity:.8;text-transform:capitalize}.tutorial-overlay{position:fixed;top:20px;left:20px;width:300px;background:#231e1c;border:.3vmin solid #fff;border-radius:.8vmin;padding:2vmin 3vmin;color:#fff;z-index:9999;opacity:1;transition:opacity .3s ease}.tutorial-overlay-step2{top:50%;left:auto;right:20px;transform:translateY(-50%)}.tutorial-overlay.fade-out{opacity:0;pointer-events:none}.tutorial-content{text-align:center}.tutorial-sprite{width:60px;height:60px;margin:0 auto;background-repeat:no-repeat}.tutorial-title{text-align:center;margin:10px 0;font-size:1.5em}.tutorial-text{margin:10px 0;font-size:1em}.tutorial-button-container{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:15px}.tutorial-arrow{display:inline-block;width:0;height:0;border-top:.6vmin solid transparent;border-bottom:.6vmin solid transparent;border-left:1vmin solid #fff}.tutorial-button-container:hover .tutorial-arrow{animation:arrow-nudge 2s infinite}@keyframes arrow-nudge{0%{transform:translate(0)}50%{transform:translate(5px)}to{transform:translate(0)}}@media (max-width: 800px){.game-screen{width:90vmin;height:90vmin;padding:10px;gap:8px}.main-content{flex:1;gap:.8vmin;min-height:0}.canvas-container{flex:1;min-width:0}canvas{max-width:100%;max-height:100%}.character-list{flex:0 1 80px;min-width:0;max-height:100%;align-self:flex-start}.toolbox .icon{width:3.5vmin!important;height:3.5vmin!important}.toolbar .button-text{display:none}.toolbar button svg{margin-right:0!important}.toolbar button{display:flex;align-items:center;justify-content:center}}