@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&family=IM+Fell+English:ital@0;1&display=swap";.in-app-browser-warning{background:rgba(255,152,0,.95);color:#fff;padding:30px 20px;border-radius:15px;margin:20px;max-width:500px;width:100%;text-align:center;box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3)}.warning-icon{font-size:3rem;margin-bottom:15px;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.warning-title{margin:0 0 15px;font-size:1.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.warning-message{margin:0 0 20px;font-size:1rem;line-height:1.6;opacity:.95}.warning-instructions{background:rgba(255,255,255,.15);padding:20px;border-radius:10px;margin-top:20px;text-align:left}.instructions-title{margin:0 0 15px;font-weight:700;font-size:1.1rem;text-align:center}.instructions-list{margin:0;padding-left:20px;text-align:left}.instructions-list li{margin-bottom:10px;line-height:1.5}@media (max-width: 600px){.in-app-browser-warning{padding:25px 15px;margin:15px 10px}.warning-icon{font-size:2.5rem;margin-bottom:12px}.warning-title{font-size:1.3rem}.warning-message{font-size:.95rem}.instructions-title{font-size:1rem}.instructions-list{font-size:.9rem}}:root{--parchment: #f1e0bd;--parchment-dim: #d9c79a;--ink: #2b1d10;--ink-soft: #4a371f;--gold: #c8a24a;--gold-bright: #e6c168;--wood-dark: #2a1a0d;--wood-mid: #3d2614;--leather: #5a3a1d;--blood: #7a1f1f;--moss: #3e5b2c;--moss-bright: #6b8e3d}.app{width:100%;min-height:100vh;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.65) 100%),linear-gradient(180deg,rgba(60,30,10,.55) 0%,rgba(20,10,5,.75) 100%),url(../assets/sprites/ui/backgrounds/floor_planks_bg.png);background-repeat:repeat;background-size:auto,auto,256px;display:flex;flex-direction:column;font-family:IM Fell English,Georgia,serif;color:var(--parchment)}.app-header{padding:24px 20px 18px;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 100%);border-bottom:2px solid var(--gold);box-shadow:0 2px 0 var(--wood-dark),0 6px 18px #00000080}.app-header h1{margin:0;font-family:Cinzel,Trajan Pro,Georgia,serif;font-size:2.6rem;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--gold-bright);text-shadow:0 0 1px rgba(0,0,0,.8),1px 1px 0 var(--wood-dark),2px 2px 0 #000,0 0 16px rgba(230,193,104,.25)}.app-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.main-menu{text-align:center}.menu-buttons{display:flex;flex-direction:column;gap:18px;max-width:320px;width:100%}.menu-button,.form-button{padding:14px 26px;font-family:Cinzel,Georgia,serif;font-size:1.05rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;border:2px solid var(--gold);border-radius:4px;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;color:var(--parchment);background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(0,0,0,.25) 100%),linear-gradient(180deg,var(--leather) 0%,#3a230f 100%);box-shadow:inset 0 1px #ffdc9640,inset 0 -2px 6px #00000073,0 3px 0 var(--wood-dark),0 6px 14px #00000080;text-shadow:1px 1px 0 #000}.menu-button:hover,.form-button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.15);box-shadow:inset 0 1px #ffdc9659,inset 0 -2px 6px #00000073,0 4px 0 var(--wood-dark),0 8px 18px #0000008c,0 0 12px #e6c16859}.menu-button:active,.form-button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 6px #0000008c,0 1px 0 var(--wood-dark)}.menu-button.create,.form-button.primary{background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(0,0,0,.28) 100%),linear-gradient(180deg,var(--moss-bright) 0%,var(--moss) 100%);border-color:var(--gold-bright)}.menu-button.join{background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(0,0,0,.3) 100%),linear-gradient(180deg,#6b3b1d 0%,#3a1a0a 100%)}.form-container{position:relative;background:radial-gradient(ellipse at 50% 0%,rgba(255,235,190,1) 0%,var(--parchment) 60%,var(--parchment-dim) 100%);color:var(--ink);padding:28px 30px 24px;border-radius:6px;border:2px solid var(--gold);box-shadow:inset 0 0 40px #78501e40,inset 0 0 0 1px #fff6,0 6px 0 var(--wood-dark),0 14px 30px #0009;max-width:420px;width:100%}.form-container:before,.form-container:after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--gold)}.form-container:before{top:6px;left:6px;border-right:none;border-bottom:none}.form-container:after{bottom:6px;right:6px;border-left:none;border-top:none}.form-container h2{margin:0 0 8px;font-family:Cinzel,Georgia,serif;font-size:1.7rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;text-align:center;color:var(--ink);text-shadow:1px 1px 0 rgba(255,255,255,.5)}.form-container h2:after{content:"";display:block;width:60%;height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.form-container p{margin:0 0 22px;text-align:center;font-style:italic;color:var(--ink-soft)}.form{display:flex;flex-direction:column;gap:18px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.95rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}.form-input{padding:11px 14px;border:2px solid var(--leather);border-radius:3px;background:rgba(255,245,215,.7);color:var(--ink);font-family:IM Fell English,Georgia,serif;font-size:1.1rem;letter-spacing:.5px;box-shadow:inset 0 2px 4px #78501e40;transition:border-color .2s ease,box-shadow .2s ease}.form-input::placeholder{color:#4a371f73;font-style:italic}.form-input:focus{outline:none;border-color:var(--gold);box-shadow:inset 0 2px 4px #78501e33,0 0 0 3px #c8a24a40}.form-input:disabled{opacity:.6;cursor:not-allowed}.form-error,.error-message{background:linear-gradient(180deg,#5a1010 0%,#3a0808 100%);color:var(--parchment);border:1px solid var(--gold);padding:12px 16px;border-radius:3px;text-align:center;font-family:IM Fell English,Georgia,serif;box-shadow:inset 0 0 0 1px #ffffff14,0 2px 6px #00000080}.error-message{margin-bottom:20px;max-width:420px}.error-message button{display:inline-block;margin-top:10px;background:transparent;color:var(--gold-bright);border:1px solid var(--gold);padding:6px 14px;border-radius:3px;cursor:pointer;font-family:Cinzel,Georgia,serif;letter-spacing:1px;text-transform:uppercase;font-size:.85rem;transition:background .2s ease}.error-message button:hover{background:rgba(230,193,104,.15)}.form-buttons{display:flex;gap:14px;margin-top:6px}.form-button{flex:1}.form-button.secondary{background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(0,0,0,.3) 100%),linear-gradient(180deg,#4d3520 0%,#2a1a0d 100%);color:var(--parchment)}.form-button:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}.connection-status{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:4px 12px;background:rgba(0,0,0,.45);border:1px solid var(--gold);border-radius:999px;font-family:Cinzel,Georgia,serif;font-size:.8rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--parchment)}.status-indicator{width:9px;height:9px;border-radius:50%;box-shadow:0 0 6px currentColor;animation:pulse 2s infinite}.status-disconnected .status-indicator{background:#c0392b;color:#c0392b}.status-connecting .status-indicator{background:#d6a04a;color:#d6a04a;animation:pulse 1s infinite}.status-reconnecting .status-indicator{background:#d6a04a;color:#d6a04a;animation:pulse .8s infinite}.status-connected .status-indicator{background:#6b8e3d;color:#6b8e3d;animation:none}.status-text{text-shadow:1px 1px 0 #000}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@media (max-width: 600px){.app-header h1{font-size:1.9rem;letter-spacing:2px}.menu-buttons{max-width:260px}.menu-button,.form-button{padding:12px 20px;font-size:.95rem}.form-container{padding:22px 18px;margin:0 10px}.form-container h2{font-size:1.4rem}.form-buttons{flex-direction:column}}.debug-ui{position:fixed;top:10px;right:10px;background:rgba(0,0,0,.9);color:#fff;padding:10px;border-radius:8px;font-family:Courier New,monospace;font-size:12px;z-index:9999;min-width:200px;border:2px solid var(--gold)}.debug-header{font-weight:700;color:var(--gold-bright);margin-bottom:8px;text-align:center;font-size:14px}.debug-content{display:flex;flex-direction:column;gap:4px}.debug-content div{display:flex;justify-content:space-between;align-items:center}.debug-content strong{color:#ecf0f1;min-width:80px}@media (max-width: 600px){.debug-ui{top:5px;right:5px;left:5px;min-width:auto;font-size:11px;padding:8px}.debug-content{gap:2px}}