*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-primary-text);background-color:var(--color-background);line-height:1.5}h1{font-size:var(--font-size-h1);margin-bottom:var(--spacing-md);font-weight:700}h2{font-size:var(--font-size-h2);margin-bottom:var(--spacing-sm);font-weight:700}h3{font-size:var(--font-size-h3);margin-bottom:var(--spacing-sm);font-weight:700}p{margin-bottom:var(--spacing-sm)}a{color:var(--color-link);cursor:pointer;text-decoration:none}a:hover{color:var(--color-link-hover);text-decoration:underline}a:active{color:var(--color-white);text-decoration:underline}button{font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-xs) var(--spacing-md);background-color:var(--color-accent-brown);color:var(--color-white);border:var(--border-width) solid var(--color-white);border-radius:var(--border-radius);cursor:pointer;transition:background-color .2s}button:hover{background-color:var(--color-accent-brown-alt)}button:disabled{opacity:.5;cursor:not-allowed}input[type=text],input[type=search],input[type=password],textarea{font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-xs);background-color:var(--color-content-bg);color:var(--color-primary-text);border:var(--border-width) solid var(--color-white);border-radius:var(--border-radius)}input:focus,textarea:focus{outline:2px solid var(--color-accent-brown);outline-offset:2px}.container{max-width:var(--max-width);padding:0 var(--spacing-md);margin:0 auto}.card{background-color:var(--color-content-bg);border:var(--border-width) solid var(--color-border);padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.spinner{border:4px solid var(--color-content-bg);border-top-color:var(--color-accent-brown);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.center{text-align:center}.error{color:#c00;padding:var(--spacing-md);border:var(--border-width) solid #c00;margin-bottom:var(--spacing-md);background-color:#ffe5e5}.mt-0{margin-top:0}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mb-0{margin-bottom:0}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}:root{--color-primary-text:#543f20;--color-background:#a99e60;--color-accent-brown:#c89d5f;--color-accent-brown-alt:#ad915f;--color-content-bg:#d0aa68;--color-content-bg-alt:#b4a57e;--color-header-bg:#c89d5f;--color-link:#543f20;--color-link-hover:#fff;--color-white:#fff;--color-black:#000;--color-border:#000;--color-scrollbar-track:#c2b091;--color-scrollbar-thumb:#c89d5f;--font-family:Arial, sans-serif;--font-size-base:12px;--font-size-small:11px;--font-size-large:14px;--font-size-h1:24px;--font-size-h2:18px;--font-size-h3:14px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:40px;--max-width:1200px;--border-width:1px;--border-radius:0px}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--color-scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--color-scrollbar-thumb);border:1px solid var(--color-black)}::-webkit-scrollbar-thumb:hover{background:var(--color-accent-brown)}#app{flex-direction:column;min-height:100vh;display:flex}.grid{gap:var(--spacing-md);padding:var(--spacing-md);grid-template-columns:1fr;display:grid}.game-card,.mod-card{background-color:var(--color-content-bg);border:var(--border-width) solid var(--color-border);padding:var(--spacing-md);transition:background-color .2s}.game-card:hover,.mod-card:hover{background-color:var(--color-content-bg-alt)}.header{background-color:var(--color-header-bg);border-bottom:var(--border-width) solid var(--color-border);padding:var(--spacing-md)}.header-content{gap:var(--spacing-sm);max-width:var(--max-width);flex-direction:column;margin:0 auto;display:flex}.search-bar{width:100%}.footer{background-color:var(--color-accent-brown);border-top:var(--border-width) solid var(--color-border);padding:var(--spacing-md);text-align:center;margin-top:auto}@media (min-width:768px){.grid{gap:var(--spacing-lg);padding:var(--spacing-lg);grid-template-columns:repeat(2,1fr)}.header-content{flex-direction:row;justify-content:space-between;align-items:center}.search-bar{width:auto;min-width:300px}.container{padding:0 var(--spacing-lg)}}@media (min-width:1024px){.grid{gap:var(--spacing-xl);grid-template-columns:repeat(3,1fr)}.search-bar{min-width:400px}.game-detail-layout{gap:var(--spacing-xl);grid-template-columns:2fr 1fr;display:grid}.mod-detail-layout{gap:var(--spacing-xl);grid-template-columns:3fr 1fr;display:grid}}.pagination{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);flex-wrap:wrap;display:flex}.pagination button{min-width:80px}.modal-overlay{z-index:1000;padding:var(--spacing-md);background-color:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modal{background-color:var(--color-content-bg);border:2px solid var(--color-border);padding:var(--spacing-lg);width:100%;max-width:500px;max-height:90vh;overflow-y:auto}@media (min-width:768px){.modal{padding:var(--spacing-xl)}}@media (max-width:767px){button,a{justify-content:center;align-items:center;min-width:44px;min-height:44px;display:inline-flex}}