*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif}:root{--bg: #f0f0f0;--text: #1e1e1e;--tile-bg: #ffffff;--tile-hover: #e0e0e0;--border: #ccc;--button-bg: #ccc;--button-hover: #bbb;--gap: 10px;--transition: .3s}.container.dark{--bg: linear-gradient(135deg, #1e1e1e, #2c2c2c);--text: #f0f0f0;--tile-bg: #2f2f2f;--tile-hover: #3e3e3e;--border: #444;--button-bg: #444;--button-hover: #555}.container.verspielt{--tile-bg: linear-gradient(135deg, #fca5a5, #fcd34d);--button-bg: #ff90b3;--button-hover: #ffc0cb;font-family:Fredoka,sans-serif}body,.container{background:var(--bg);color:var(--text);transition:background var(--transition),color var(--transition)}.container{display:flex;flex-direction:column;height:100vh;overflow-y:auto}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:var(--gap) calc(var(--gap) * 2)}.content-wrapper{flex:1;padding:calc(var(--gap) * 4) var(--gap);text-align:center}button,.tile{cursor:pointer}input,select,textarea{cursor:text;font-size:16px!important}.container{height:100vh;height:100dvh}button,.tile,input,select,textarea{background:var(--tile-bg);font-size:16px!important;color:var(--text);border:1px solid var(--border);border-radius:5px;padding:var(--gap);margin:var(--gap);cursor:pointer;transition:background var(--transition),transform .2s}button:hover,.tile:hover{background:var(--tile-hover);transform:translateY(-3px)}.tile{width:200px;height:100px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003}.sidebar{position:fixed;top:0;right:-260px;width:260px;height:100%;padding:var(--gap);background:var(--tile-bg);box-shadow:-3px 0 10px #0000004d;display:flex;flex-direction:column;gap:var(--gap);transition:right var(--transition);z-index:1000}.sidebar.open{right:0}.sidebar-header{display:flex;justify-content:space-between}.sidebar button{margin:0;text-align:left}.sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0000004d;z-index:999}.filter-buttons{display:flex;justify-content:center;gap:var(--gap)}.game-list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}.update-banner{background:#ffeb3b;padding:var(--gap);text-align:center;font-weight:700;border-bottom:1px solid var(--border)}.login-wrapper,.protected-container{position:absolute;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:100}.login-container,.protected-form{background:var(--tile-bg);padding:calc(var(--gap)*3);border-radius:10px;border:1px solid var(--border);width:300px;box-shadow:0 0 10px #00000080;text-align:center}.login-container h2,.protected-form h2{margin-bottom:var(--gap);color:var(--text)}.login-container input,.protected-form input{width:100%;margin-bottom:var(--gap)}.login-container button,.protected-form button{width:100%;margin:var(--gap) 0 0}ul{list-style:none;padding:0;margin:var(--gap) 0}.db-form{display:flex;flex-direction:column}.db-input,.db-button{width:100%;margin:var(--gap) 0}.audience-selector{display:flex;justify-content:center;gap:var(--gap);margin-bottom:20px}.audience-selector button{padding:10px 20px;border-radius:20px;border:2px solid var(--border);background:var(--tile-bg);cursor:pointer;font-weight:700;transition:background .3s,transform .2s}.audience-selector button:hover{transform:translateY(-3px);background:var(--tile-hover)}.audience-selector button.active{background:#ff90b3;border-color:#ff4081;color:#fff}