body{margin:0;padding:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.glass-card{--bg-color: rgba(255, 255, 255, .45);--highlight: rgba(255, 255, 255, .75);--text: #333;position:fixed;bottom:40px;left:0;right:0;margin:0 auto;width:80%;max-width:800px;z-index:100;border-radius:20px;box-shadow:0 6px 24px #0003;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:all .5s ease;user-select:none;-webkit-user-select:none}.glass-content input{user-select:text;-webkit-user-select:text}.glass-filter,.glass-overlay,.glass-specular{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.glass-filter{z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);filter:url(#glass-distortion) saturate(120%) brightness(1.15)}.glass-distortion-overlay{position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.05) 0%,transparent 80%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.05) 0%,transparent 80%);background-size:300% 300%;animation:floatDistort 10s infinite ease-in-out;mix-blend-mode:overlay;z-index:2;pointer-events:none}@keyframes floatDistort{0%{background-position:0% 0%}50%{background-position:100% 100%}to{background-position:0% 0%}}.glass-overlay{z-index:2;background:var(--bg-color)}.glass-specular{z-index:3;box-shadow:inset 1px 1px 1px var(--highlight);transition:background .1s}.glass-content{position:relative;z-index:4;padding:20px;color:var(--text);height:100%;display:flex;flex-direction:column;gap:15px}.glass-nametag{--bg-color: rgba(166, 196, 192, .75);--highlight: rgba(255, 255, 255, .4);--text: #222;position:absolute;top:-20px;left:20px;border-radius:20px;z-index:10;box-shadow:0 4px 15px #a6c4c080;overflow:hidden}.glass-nametag-content{position:relative;z-index:4;padding:6px 24px;color:var(--text);font-weight:700;font-size:16px;letter-spacing:1px}.glass-button{--bg-color: rgba(166, 196, 192, .75);--highlight: rgba(255, 255, 255, .4);--text: #222;position:relative;border-radius:30px;border:none;overflow:hidden;cursor:pointer;padding:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;will-change:transform}.glass-button:hover{transform:scale(1.05)}.glass-button:active,.glass-button.pressed{transform:scale(.95)}.glass-button:disabled{--bg-color: rgba(200, 200, 200, .3);--highlight: rgba(255, 255, 255, .2);--text: #999;cursor:not-allowed;opacity:.7}.glass-button-content{position:relative;z-index:4;padding:12px 30px;color:var(--text);font-weight:700;font-size:16px}.glass-input{--input-bg: rgba(255, 255, 255, .3);--input-border: rgba(255, 255, 255, .4);--input-focus: rgba(255, 255, 255, .6);--input-placeholder: rgba(0, 0, 0, .4);flex:1;padding:12px 20px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:30px;color:var(--text);font-size:16px;outline:none;transition:all .4s cubic-bezier(.4,0,.2,1);will-change:transform,box-shadow,background}.glass-input:focus{background:var(--input-focus);border-color:var(--highlight);transform:translateY(-2px);box-shadow:0 8px 16px #0000001a}.glass-input::placeholder{color:var(--input-placeholder);transition:opacity .3s ease}.glass-input:focus::placeholder{opacity:.5}@media(prefers-color-scheme:dark){.glass-card{--bg-color: rgba(0, 0, 0, .45);--highlight: rgba(255, 255, 255, .15);--text: #fff}.glass-input{--input-bg: rgba(0, 0, 0, .2);--input-border: rgba(255, 255, 255, .1);--input-focus: rgba(0, 0, 0, .4);--input-placeholder: rgba(255, 255, 255, .4)}}.glass-icon{--bg-color: rgba(255, 255, 255, .25);--highlight: rgba(255, 255, 255, .75);--icon-color: #ffffff;position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:transparent;cursor:pointer;transition:transform .2s ease;border:none;padding:0;display:flex;align-items:center;justify-content:center}.glass-icon:hover{transform:scale(1.1)}.glass-icon:active{transform:scale(.95)}.glass-icon .glass-content{padding:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.glass-icon .glass-content svg{width:60%;height:60%;color:var(--icon-color);transition:transform .2s ease}.glass-icon:hover .glass-content svg{transform:scale(.9)}
