/*
  File: /public_html/games/hub.css
  Purpose: Look of the Games hub page (games/index.php): the three category buttons and the opened list.
  Last updated: November 8, 2026 5:20 PM (moved here from the inline style block in games/index.php, no visual change)
*/

/* Category colors */
.cat-action { --deep: #d93a2b; --tint: #fee2e2; --grad: linear-gradient(160deg, #f87171, #d93a2b); --edge: #e8433a; }
.cat-puzzle { --deep: #5b34b8; --tint: #ece4ff; --grad: linear-gradient(160deg, #a78bfa, #5b34b8); --edge: #7c5cff; }
.cat-art    { --deep: #c2560a; --tint: #ffe4c7; --grad: linear-gradient(160deg, #ff9a3d, #f5760a); --edge: #f4a52c; }

.game-accordion {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

/* Three big category buttons side by side */
.cat-tabs {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 20px;
   scroll-margin-top: 12px;
}

.acc-bar {
   position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
   padding: 24px 12px 22px;
   border: 1px solid rgba(0,0,0,0.06);
   border-radius: 26px;
   background: var(--grad);
   color: #fff;
   font-family: 'Fredoka', sans-serif;
   font-weight: 600;
   font-size: 34px;
   line-height: 1.2;
   text-align: center;
   cursor: pointer;
   box-shadow: 0 6px 0 rgba(0,0,0,0.10), 0 10px 20px rgba(0,0,0,0.10);
   transition: transform 0.15s ease, filter 0.15s ease;
}
.acc-bar:hover { transform: translateY(3px); filter: brightness(1.1); }
.acc-bar:focus-visible { outline: 4px solid #1f2430; outline-offset: 3px; }

/* The open button points down at its games */
.acc-bar[aria-expanded="true"] { transform: translateY(3px); }
.acc-bar[aria-expanded="true"]::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: -26px;
   transform: translateX(-50%);
   border-left: 18px solid transparent;
   border-right: 18px solid transparent;
   border-top: 20px solid var(--edge);
}

.cat-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 96px;
   height: 96px;
   border-radius: 50%;
   background: var(--tint);
   color: var(--deep);
   flex-shrink: 0;
}
.cat-icon svg { width: 62px; height: 62px; display: block; }

/* The opened list, right under the three buttons */
.acc-panel {
   margin-top: 24px;
   padding: 20px;
   background: #fff;
   border-top: 6px solid var(--edge);
   border-radius: 14px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.acc-panel[hidden] { display: none; }

/* Loading dots (no words needed) */
.acc-loading {
   display: flex;
   justify-content: center;
   gap: 10px;
   padding: 28px 0;
}
.acc-loading span {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: var(--edge);
   animation: acc-pulse 1s infinite ease-in-out;
}
.acc-loading span:nth-child(2) { animation-delay: 0.15s; }
.acc-loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes acc-pulse {
   0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
   40% { opacity: 1; transform: scale(1); }
}

/* If a list cannot load, show a big link to the full page */
.acc-fallback {
   display: block;
   text-align: center;
   padding: 18px 12px;
   font-family: 'Fredoka', sans-serif;
   font-weight: 600;
   font-size: 22px;
   color: #1e7fd6;
   text-decoration: none;
}
.acc-fallback:hover { text-decoration: underline; }

.sr-only {
   position: absolute; width: 1px; height: 1px; overflow: hidden;
   clip: rect(0, 0, 0, 0); white-space: nowrap;
}

@media (max-width: 640px) {
   .cat-tabs { gap: 10px; }
   .acc-bar { font-size: 20px; gap: 8px; padding: 14px 4px 14px; border-radius: 20px; }
   .cat-icon { width: 60px; height: 60px; }
   .cat-icon svg { width: 38px; height: 38px; }
   .acc-bar[aria-expanded="true"]::after { bottom: -20px; border-left-width: 13px; border-right-width: 13px; border-top-width: 14px; }
   .acc-panel { margin-top: 18px; padding: 14px; }
}