*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;outline:none;-webkit-tap-highlight-color:transparent;}:root{--clr-bg:#f4f6f8;--clr-dots:#d0d0d0;--clr-ink:#111111;--clr-paper:#ffffff;--clr-yellow:#ffde00;--clr-green:#33ff99;--clr-purple:#7d5fff;--clr-red:#ff0050;--clr-blue:#00d4ff;--border-width:4px;--transition:0.2s cubic-bezier(0.175,0.885,0.32,1.275);--font-header:'Bangers',cursive;--font-body:'Comic Neue',cursive,sans-serif;}body{min-height:100vh;background-color:var(--clr-bg);background-image:radial-gradient(var(--clr-dots) 10%,transparent 11%),radial-gradient(var(--clr-dots) 10%,transparent 11%);background-size:20px 20px;background-position:0 0,10px 10px;color:var(--clr-ink);font-family:var(--font-body);padding:20px;overflow-x:hidden;}#page-loader{position:fixed;inset:0;background-color:var(--clr-bg);background-image:radial-gradient(var(--clr-dots) 10%,transparent 11%),radial-gradient(var(--clr-dots) 10%,transparent 11%);background-size:20px 20px;background-position:0 0,10px 10px;display:flex;align-items:center;justify-content:center;z-index:10000;transition:opacity 0.3s ease,visibility 0.3s;}#page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}.loader-spinner{width:60px;height:60px;border:6px solid var(--clr-ink);border-top-color:var(--clr-purple);border-right-color:var(--clr-green);border-bottom-color:var(--clr-yellow);border-left-color:var(--clr-red);border-radius:50%;animation:spinBrutal 1s linear infinite;box-shadow:4px 4px 0 var(--clr-ink);}@keyframes spinBrutal{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.lobby-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:50px 20px;}.lobby-card{width:100%;max-width:460px;background:var(--clr-paper);border:var(--border-width) solid var(--clr-ink);box-shadow:10px 10px 0 var(--clr-ink);padding:36px 32px 32px;display:flex;flex-direction:column;gap:26px;position:relative;transform:rotate(-0.5deg);}.back-link{position:absolute;top:-20px;left:22px;background:var(--clr-yellow);border:3px solid var(--clr-ink);box-shadow:4px 4px 0 var(--clr-ink);padding:5px 16px;font-family:var(--font-header);font-size:1.15rem;color:var(--clr-ink);text-decoration:none;letter-spacing:0.5px;transition:transform 0.1s ease,box-shadow 0.1s ease;}.back-link:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--clr-ink);}.back-link:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--clr-ink);}.lobby-head{text-align:center;padding-bottom:22px;border-bottom:var(--border-width) solid var(--clr-ink);}.lobby-title{font-family:var(--font-header);font-size:clamp(3.5rem,12vw,4.5rem);color:var(--clr-purple);letter-spacing:4px;line-height:1;text-shadow: 2px 2px 0 var(--clr-ink), -2px -2px 0 var(--clr-ink), 2px -2px 0 var(--clr-ink), -2px 2px 0 var(--clr-ink), 6px 6px 0 var(--clr-ink);margin-bottom:10px;}.lobby-sub{font-weight:800;font-size:0.95rem;opacity:0.75;}.error-msg{background:var(--clr-red);color:#fff;padding:12px 14px;border:3px solid var(--clr-ink);box-shadow:4px 4px 0 var(--clr-ink);font-weight:800;font-size:0.95rem;}.lobby-form{display:flex;flex-direction:column;gap:22px;}.field{display:flex;flex-direction:column;gap:9px;}.field label{font-family:var(--font-header);font-size:1.2rem;letter-spacing:0.5px;text-transform:uppercase;color:var(--clr-ink);display:flex;align-items:flex-end;gap:8px;line-height:1;}.tag{font-family:var(--font-body);font-size:0.72rem;font-weight:800;text-transform:none;letter-spacing:0;color:#888;opacity:0.85;padding-bottom:1px;}.field input,.field select,.slug-row input,.join-row input{width:100%;padding:13px 14px;font-family:var(--font-body);font-size:1.05rem;font-weight:700;color:var(--clr-ink);background:var(--clr-paper);border:3px solid var(--clr-ink);border-radius:0;outline:none;box-shadow:4px 4px 0 var(--clr-ink);transition:border-color 0.15s ease;-webkit-appearance:none;appearance:none;}.field input::placeholder,.slug-row input::placeholder,.join-row input::placeholder{color:#aaa;font-weight:600;transition:opacity 0.2s ease;}.field input.typing::placeholder,.slug-row input.typing::placeholder,.join-row input.typing::placeholder{opacity:0;}.field input:focus,.field select:focus{border-color:var(--clr-purple);}.field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}.custom-duration-wrap{margin-top:8px;animation:slideDown 0.18s ease;}.custom-duration-wrap input{-moz-appearance:textfield;appearance:textfield;}.custom-duration-wrap input::-webkit-outer-spin-button,.custom-duration-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}@keyframes slideDown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}.slug-row{display:flex;border:3px solid var(--clr-ink);background:var(--clr-paper);box-shadow:4px 4px 0 var(--clr-ink);transition:border-color 0.15s ease;}.slug-row:focus-within{border-color:var(--clr-purple);}.slug-base{padding:13px 10px 13px 14px;font-size:0.82rem;font-weight:800;color:#666;background:var(--clr-bg);border-right:3px solid var(--clr-ink);white-space:nowrap;display:flex;align-items:center;user-select:none;}.slug-row input{border:none;box-shadow:none;flex:1;min-width:0;background:transparent;}.slug-row input:focus{border:none;}.btn-create{padding:15px;background:var(--clr-green);border:3px solid var(--clr-ink);box-shadow:6px 6px 0 var(--clr-ink);font-family:var(--font-header);font-size:1.6rem;letter-spacing:1px;color:var(--clr-ink);cursor:pointer;width:100%;transition:transform var(--transition),box-shadow var(--transition);}.btn-create:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--clr-ink);}.btn-create:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--clr-ink);}.divider{display:flex;align-items:center;gap:12px;font-family:var(--font-header);font-size:1.3rem;letter-spacing:2px;color:var(--clr-ink);opacity:0.6;}.divider::before,.divider::after{content:'';flex:1;height:3px;background:var(--clr-ink);opacity:0.2;}.join-section{display:flex;flex-direction:column;gap:9px;}.join-section label{font-family:var(--font-header);font-size:1.2rem;letter-spacing:0.5px;text-transform:uppercase;}.join-row{display:flex;}.join-row input{flex:1;border-right:none;box-shadow:none;min-width:0;}.join-row input:focus{border-color:var(--clr-purple);}.btn-join{padding:0 22px;background:var(--clr-yellow);border:3px solid var(--clr-ink);border-left:none;box-shadow:4px 4px 0 var(--clr-ink);font-family:var(--font-header);font-size:1.3rem;color:var(--clr-ink);cursor:pointer;letter-spacing:0.5px;transition:transform var(--transition),box-shadow var(--transition);white-space:nowrap;}.btn-join:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--clr-ink);}.btn-join:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--clr-ink);}.chat-container{width:100%;max-width:900px;height:calc(100vh - 40px);height:calc(100dvh - 40px);display:flex;flex-direction:column;gap:20px;}.chat-header{background:var(--clr-paper);border:3px solid var(--clr-ink);box-shadow:6px 6px 0 var(--clr-ink);padding:15px 25px;display:flex;justify-content:space-between;align-items:center;transform:rotate(0.2deg);}.header-left{display:flex;align-items:center;gap:16px;}.home-btn{background:var(--clr-yellow);border:3px solid var(--clr-ink);padding:4px 12px;font-family:var(--font-header);color:var(--clr-ink);text-decoration:none;box-shadow:3px 3px 0 var(--clr-ink);transition:transform 0.1s,box-shadow 0.1s;}.home-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--clr-ink);}.room-slug-display{font-family:var(--font-header);font-size:1.8rem;letter-spacing:1px;}.btn-mini{background:var(--clr-blue);border:3px solid var(--clr-ink);padding:4px 12px;font-family:var(--font-header);font-size:1rem;cursor:pointer;box-shadow:3px 3px 0 var(--clr-ink);transition:transform 0.1s,box-shadow 0.1s;}.btn-mini:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--clr-ink);}.btn-mini:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--clr-ink);}.qr-icon-btn{background:var(--clr-yellow) !important;color:var(--clr-ink) !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:4px 8px !important;}.qr-icon-btn:hover{background:#ffe64d !important;}.qr-icon-btn svg{display:block;}.modal-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:rgba(17,17,17,0.75);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:modalBackdropFade 0.2s ease-out;}.modal-card{background:var(--clr-paper);border:var(--border-width) solid var(--clr-ink);box-shadow:10px 10px 0 var(--clr-ink);padding:28px 24px 22px;max-width:380px;width:100%;text-align:center;position:relative;animation:modalPop 0.25s cubic-bezier(0.175,0.885,0.32,1.275);}.modal-close-btn{position:absolute;top:-16px;right:-16px;width:38px;height:38px;background:var(--clr-red);color:#fff;border:3px solid var(--clr-ink);font-family:var(--font-header);font-size:1.4rem;font-weight:bold;cursor:pointer;box-shadow:3px 3px 0 var(--clr-ink);transition:all 0.15s ease;display:flex;align-items:center;justify-content:center;line-height:1;}.modal-close-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--clr-ink);background:#ff1f4b;}.modal-close-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--clr-ink);}.modal-title{font-family:var(--font-header);font-size:2.2rem;margin-bottom:15px;letter-spacing:1px;color:var(--clr-ink);}.modal-card .qr-box,.qr-box{display:inline-flex;align-items:center;justify-content:center;align-self:center;margin:0 auto 8px;padding:12px;background:#ffffff;border:3px solid var(--clr-ink);box-shadow:4px 4px 0 var(--clr-ink);width:fit-content;max-width:100%;}.qr-box img,.qr-box canvas,.qr-box svg{display:block;margin:0 auto;max-width:100%;height:auto;}.qr-note{font-weight:700;font-size:0.9rem;color:#444;margin-top:12px;margin-bottom:0;}@keyframes modalBackdropFade{from{opacity:0;}to{opacity:1;}}@keyframes modalPop{from{opacity:0;transform:scale(0.9) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}.header-right{display:flex;align-items:center;gap:16px;}.members-pill{background:var(--clr-paper);border:3px solid var(--clr-ink);padding:4px 12px;font-weight:800;display:flex;align-items:center;gap:8px;box-shadow:3px 3px 0 var(--clr-ink);cursor:pointer;}.active-dot{width:10px;height:10px;border-radius:50%;background:var(--clr-green);border:2px solid var(--clr-ink);animation:pulseActive 1.5s infinite;}@keyframes pulseActive{0%, 100%{opacity:0.6;}50%{opacity:1;}}.chat-main{flex:1;display:flex;gap:20px;min-height:0;}.message-board{flex:1;background:var(--clr-paper);border:3px solid var(--clr-ink);box-shadow:8px 8px 0 var(--clr-ink);display:flex;flex-direction:column;min-width:0;overflow:hidden;}.messages-scroller{flex:1;padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;background-image:radial-gradient(var(--clr-dots) 10%,transparent 11%);background-size:15px 15px;}.message-bubble{max-width:80%;align-self:flex-start;display:flex;flex-direction:column;gap:4px;}.message-bubble.me{align-self:flex-end;}.msg-meta{font-size:0.75rem;font-weight:800;opacity:0.7;margin-left:6px;}.message-bubble.me .msg-meta{align-self:flex-end;margin-left:0;margin-right:6px;}.msg-body{background:var(--clr-bg);border:3px solid var(--clr-ink);padding:10px 16px;font-weight:700;font-size:1.05rem;box-shadow:3px 3px 0 var(--clr-ink);word-break:break-word;white-space:pre-wrap;}.message-bubble.me .msg-body{background:var(--clr-purple);color:var(--clr-paper);box-shadow:-3px 3px 0 var(--clr-ink);}.system-msg{align-self:center;background:var(--clr-yellow);border:2px solid var(--clr-ink);padding:4px 14px;font-weight:800;font-size:0.85rem;box-shadow:2px 2px 0 var(--clr-ink);text-transform:uppercase;}.chat-footer{padding:16px;background:var(--clr-paper);border-top:3px solid var(--clr-ink);}.input-box-wrap{display:flex;gap:12px;align-items:flex-end;}.message-input{flex:1;padding:14px;border:3px solid var(--clr-ink);font-family:var(--font-body);font-size:1.1rem;font-weight:700;border-radius:0;background:var(--clr-paper);outline:none;transition:border-color 0.15s ease;resize:none;height:52px;min-height:52px;max-height:180px;line-height:1.3;overflow-y:auto;}.message-input:focus{border-color:var(--clr-purple);}.message-input::placeholder{color:#aaa;font-weight:600;transition:opacity 0.2s ease;}.message-input.typing::placeholder{opacity:0;}.btn-send{background:var(--clr-green);border:3px solid var(--clr-ink);font-family:var(--font-header);font-size:1.4rem;padding:0 30px;height:52px;cursor:pointer;box-shadow:4px 4px 0 var(--clr-ink);transition:transform 0.1s,box-shadow 0.1s;}.btn-send:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--clr-ink);}.btn-send:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--clr-ink);}.modal-overlay{position:fixed;inset:0;background:rgba(17,17,17,0.4);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;}.modal-overlay.hidden{display:none;}.modal-card{background:var(--clr-paper);border:var(--border-width) solid var(--clr-ink);box-shadow:10px 10px 0 var(--clr-ink);padding:30px;max-width:400px;width:100%;display:flex;flex-direction:column;gap:20px;text-align:center;}.modal-title{font-family:var(--font-header);font-size:2.2rem;color:var(--clr-purple);}.modal-desc{font-weight:700;font-size:1rem;}.modal-card .input-group{display:flex;flex-direction:column;gap:9px;text-align:left;}.modal-card label{font-family:var(--font-header);font-size:1.2rem;letter-spacing:0.5px;text-transform:uppercase;}.modal-card input{width:100%;padding:13px 14px;font-family:var(--font-body);font-size:1.05rem;font-weight:700;background:var(--clr-paper);border:3px solid var(--clr-ink);border-radius:0;box-shadow:4px 4px 0 var(--clr-ink);outline:none;transition:border-color 0.15s ease;}.modal-card input:focus{border-color:var(--clr-purple);}.modal-card input::placeholder{color:#aaa;font-weight:600;transition:opacity 0.2s ease;}.modal-card input.typing::placeholder{opacity:0;}.btn-main{background:var(--clr-green);color:var(--clr-ink);border:3px solid var(--clr-ink);font-family:var(--font-header);font-size:1.5rem;padding:16px;cursor:pointer;box-shadow:5px 5px 0 var(--clr-ink);transition:transform var(--transition),box-shadow var(--transition);width:100%;}.btn-main:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--clr-ink);}.btn-main:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--clr-ink);}.error-banner{background:var(--clr-red);color:var(--clr-paper);padding:12px;border:3px solid var(--clr-ink);font-weight:800;text-align:center;box-shadow:4px 4px 0 var(--clr-ink);}.members-list{display:flex;flex-direction:column;gap:8px;text-align:left;max-height:200px;overflow-y:auto;}.member-item{padding:8px 12px;border:2px solid var(--clr-ink);background:var(--clr-bg);font-weight:800;display:flex;justify-content:space-between;}.member-item.me{background:var(--clr-yellow);}.countdown-banner{background:var(--clr-yellow);border:3px solid var(--clr-ink);box-shadow:3px 3px 0 var(--clr-ink);padding:6px 12px;font-weight:800;font-size:0.9rem;text-align:center;}.countdown-banner.danger{background:var(--clr-red);color:var(--clr-paper);}@media (max-width:600px){body{padding:10px;}.lobby-card{padding:32px 20px 24px;}.chat-container{height:calc(100vh - 20px);height:calc(100dvh - 20px);}.chat-header{padding:10px 15px;}.room-slug-display{font-size:1.4rem;}.messages-scroller{padding:16px;}.message-bubble{max-width:90%;}.btn-send{padding:0 16px;}}