body { background: radial-gradient(circle at top, #1f2933 0, #020308 55%, #000 100%); overflow-x: hidden; font-family: sans-serif; color: #fff; min-height: 100vh; }
    .logo-font { font-size: 1.25rem; font-weight: 900; font-style: italic; letter-spacing: -0.05em; }
    #sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 280px; background: #0f172a; z-index: 100; transition: transform 0.3s ease-in-out; border-right: 1px solid rgba(255,255,255,0.1); }
    .sidebar-closed { transform: translateX(-100%); }
    .sidebar-open { transform: translateX(0); }
    #overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 90; display: none; }
    #overlay.active { display: block; }

    .filter-input { background: #fff; border: 1px solid #ccc; border-radius: 999px; padding: 0.6rem 1.2rem; outline: none; font-size: 0.9rem; color: #000; font-weight: 800; width: 100%; }
    .filter-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23333'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1rem; padding-right: 2.5rem; }

    .game-card { background: rgba(255, 255, 255, 0.05); border-radius: 1rem; overflow: hidden; transition: all 0.3s ease; cursor: pointer; border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; }
    .game-card:hover { transform: translateY(-8px); border-color: #facc15; }
    .game-img-wrapper { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: #111; display: flex; align-items: center; justify-content: center; }
    .game-img { max-width: 100%; max-height: 100%; object-fit: contain; }

    .tag-common { padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; color: white; display: inline-block; margin-right: 4px; }
    .tag-released { background: #1d4ed8; } 
    .tag-funding { background: #be185d; } 
    .tag-gm-required { background: #ea580c; } 
    .tag-gm-recommended { background: #059669; } 
    .tag-gm-not-needed { background: #4b5563; } 
    .tag-prog-start { background: #94a3b8; } 
    .tag-prog-ing { background: #3b82f6; }   
    .tag-prog-done { background: #10b981; }  

    #game-modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.95); backdrop-filter: blur(8px); }
    .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; max-width: 500px; max-height: 85vh; background: #1e293b; border-radius: 1.5rem; padding: 1.5rem; border: 2px solid #facc15; overflow-y: auto; }
    .synopsis-text { font-size: 0.9rem; line-height: 1.6; color: #cbd5e1; white-space: pre-wrap; transition: max-height 0.3s ease-out; overflow: hidden; }
    .synopsis-collapsed { max-height: 6rem; }
    .more-btn { color: #facc15; font-size: 0.85rem; font-weight: bold; cursor: pointer; display: inline-block; margin-top: 8px; text-decoration: underline; }

.game-card-title{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.5;min-height:3em}.game-card{min-width:0}#modal-name{overflow-wrap:anywhere}