/* Reset and base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  background: #ffffff; color: #1a1a1a; line-height: 1.4; overflow-x: hidden;
}
.container { min-height: 100vh; background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%); }

/* Header */
.header {
  background: linear-gradient(135deg, #0078f2 0%, #00a8ff 100%);
  padding: 20px 16px 30px; position: relative; overflow: hidden;
}
.header::before{
  content:''; position:absolute; inset:0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity:.3;
}
.header-content { position: relative; z-index: 1; text-align: center; }
.title { font-size:1.8rem; font-weight:700; color:#fff; margin-bottom:4px; text-shadow:0 2px 4px rgba(0,0,0,.3); }
.subtitle { font-size:.9rem; color:rgba(255,255,255,.8); }

/* Status card / notices */
.status-card, .demo-notice {
  background:#ffffff; border:1px solid #e5e7eb; border-radius:8px; padding:12px 16px; margin:16px; text-align:center; color:#6b7280; font-size:.85rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.status-card { background:#f8f9fa; border-color:#d1d5db; border-radius:12px; padding:16px; display:flex; align-items:center; justify-content:center; gap:12px; }
.loading-spinner{ width:20px; height:20px; border:2px solid #d1d5db; border-top:2px solid #0078f2; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.status-text{ font-size:.9rem; color:#6b7280; }

/* Sections */
.games-section{ padding:0 16px 20px; }
.section-title{ font-size:1.1rem; font-weight:600; color:#1a1a1a; margin:24px 0 16px; text-transform:uppercase; letter-spacing:.5px; }

/* Grid */
.games-grid{ display:flex; flex-direction:column; gap:16px; }

/* Cards */
.game-card{
  background:#ffffff; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; position:relative; transition:all .2s ease; cursor:pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.game-card:active{ transform:scale(.98); }
.game-card.available:hover{ border-color:#0078f2; box-shadow:0 4px 20px rgba(0,120,242,.2); }
.game-card.coming-soon{ opacity:.6; cursor:not-allowed; }
.game-card.coming-soon:active{ transform:none; }

/* Card content */
.game-card-content{ display:flex; align-items:center; padding:16px; gap:16px; }
.game-icon{
  width:60px; height:60px; background:linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%); border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem; flex-shrink:0; border:2px solid #d1d5db;
}
.game-card.available .game-icon{ background:linear-gradient(135deg,#0078f2 0%,#00a8ff 100%); border-color:#0078f2; }
.game-info{ flex:1; min-width:0; }
.game-title{ font-size:1.1rem; font-weight:600; color:#1a1a1a; margin-bottom:4px; }
.game-description{ font-size:.85rem; color:#6b7280; line-height:1.3; margin-bottom:8px; }

/* Badges */
.game-status{ display:inline-block; padding:4px 8px; border-radius:6px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.status-available{ background:#00ff88; color:#000; }
.status-coming-soon{ background:#ff6b35; color:#fff; }

/* Actions */
.game-action{ padding:8px 16px; border-radius:8px; font-size:.85rem; font-weight:600; border:none; cursor:pointer; transition:all .2s ease; min-width:80px; text-align:center; }
.action-play{ background:#0078f2; color:#fff; }
.action-play:hover{ background:#0066cc; }
.action-play:active{ transform:scale(.95); }
.action-soon{ background:#f3f4f6; color:#9ca3af; cursor:not-allowed; }

/* Featured */
.featured-section{ padding:0 16px; margin-bottom:8px; }
.featured-card{
  background:linear-gradient(135deg,#0078f2 0%,#00a8ff 100%); border-radius:16px; padding:20px; text-align:center; position:relative; overflow:hidden; margin-bottom:8px;
}
.featured-card::before{
  content:''; position:absolute; inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1.5" fill="rgba(255,255,255,0.1)"/></svg>');
}
.featured-content{ position:relative; z-index:1; }
.featured-title{ font-size:1.2rem; font-weight:700; color:#fff; margin-bottom:6px; }
.featured-subtitle{ font-size:.9rem; color:rgba(255,255,255,.9); margin-bottom:16px; }
.featured-games-count{
  background:rgba(255,255,255,.2); backdrop-filter:blur(10px); border-radius:20px; padding:8px 16px; font-size:.8rem; color:#fff; display:inline-block;
}

/* Responsive */
@media (min-width: 640px){
  .container{ max-width:640px; margin:0 auto; }
}
@media (min-width: 768px){
  .games-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .header{ padding:30px 20px 40px; }
  .title{ font-size:2.2rem; }
}