#tab-games{width:100%;min-width:0}.games-panel{background:var(--bg-surface,#fff);color:var(--text-main,#172033);border:1px solid var(--border-color,#e2e8f0);border-radius:1rem;min-height:calc(var(--app-visual-height,100dvh) - 8rem);overflow:hidden}.games-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-bottom:1px solid var(--border-color,#e2e8f0)}.games-header h1{display:flex;align-items:center;gap:.5rem;margin:0;font-size:1.05rem;font-weight:800}.games-header h1 svg{width:1.3rem;height:1.3rem;color:var(--accent-color,#ec4899)}.games-header p{font-size:.75rem;color:var(--text-muted,#64748b);margin:.3rem 0 0}.games-header button,.games-state button{border:1px solid var(--border-color,#e2e8f0);border-radius:.65rem;background:var(--bg-surface-elevated,var(--bg-surface,#fff));padding:.5rem .75rem;color:var(--text-main,#172033);font-weight:700}.games-body{padding:1rem}.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.game-card{min-width:0;border:1px solid var(--border-color,#e2e8f0);border-radius:.85rem;overflow:hidden;background:var(--bg-surface-elevated,var(--bg-surface,#fff));text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}.game-card:hover{transform:translateY(-2px);box-shadow:0 5px 16px #0001}.game-card:focus-visible{outline:2px solid var(--accent-color,#ec4899);outline-offset:3px}.game-cover{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:color-mix(in srgb,var(--accent-color,#ec4899) 10%,var(--bg-surface,#fff))}.game-cover>svg{position:absolute;width:2.5rem;height:2.5rem;color:var(--accent-color,#ec4899);opacity:.55}.game-cover img{position:relative;width:100%;height:100%;object-fit:cover}.game-cover img[hidden]{display:none}.game-card-copy{padding:.75rem}.game-card h2{font-size:.9rem;font-weight:800;margin:0 0 .5rem;line-height:1.45;overflow-wrap:anywhere}.game-card-copy>span{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;font-weight:700;color:var(--accent-color,#ec4899)}.games-state{min-height:14rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.65rem;padding:1rem;color:var(--text-muted,#64748b);font-size:.85rem}.games-state>svg{width:3rem;height:3rem;opacity:.5;color:var(--accent-color,#ec4899)}.games-state strong{color:var(--text-main,#172033)}.games-state p{margin:0;max-width:20rem;line-height:1.65}.games-spinner{width:1.5rem;height:1.5rem;border:2px solid var(--border-color,#e2e8f0);border-top-color:var(--accent-color,#ec4899);border-radius:50%;animation:games-spin .7s linear infinite}@keyframes games-spin{to{transform:rotate(360deg)}}@media(min-width:640px){.games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:1024px){main.app-container>#tab-games{width:min(66.6667%,45.3333333333rem)!important;max-width:45.3333333333rem!important;margin-inline:auto!important}.games-panel{min-height:calc(var(--app-visual-height,100dvh) - 6rem)}}@media(prefers-reduced-motion:reduce){.games-spinner{animation:none}.game-card{transition:none}}

#tab-games.is-playing{min-width:0}.games-play-panel{background:var(--bg-surface,#fff);color:var(--text-main,#172033);border:1px solid var(--border-color,#e2e8f0);border-radius:12px;overflow:hidden}.games-play-header{display:flex;align-items:center;gap:9px;padding:5px 9px;border-bottom:1px solid var(--border-color,#e2e8f0)}.games-play-header h1{font-size:14px;font-weight:800;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.games-play-header button{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--border-color,#e2e8f0);background:var(--bg-surface-elevated,var(--bg-surface,#fff));color:inherit;font:inherit}.games-play-stage{height:calc(100dvh - 140px);min-height:240px;position:relative;overflow:hidden}.games-play-stage iframe{width:100%;height:100%;display:block;border:0;background:var(--bg-surface,#fff)}.games-player-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;padding:20px;background:var(--bg-surface,#fff);color:var(--text-muted,#64748b);font-size:13px}.games-player-status[hidden]{display:none}.games-player-status button{padding:10px 16px;background:var(--accent-color,#ec4899);color:white;border:0;border-radius:9px;font-weight:700}@media(pointer:coarse),(max-width:500px){.games-play-header button{width:44px;height:44px}.games-play-header{padding:2px 7px}.games-play-panel{border-radius:9px}}

/* Full game view stays inside the installed Ghép Đôi app. */
html.games-screen-open,body.games-screen-open{overflow:hidden!important}
html.games-screen-open{scrollbar-gutter:auto!important}
body.games-screen-open #app-shell>header,body.games-screen-open #mobile-main-nav,body.games-screen-open #site-footer{display:none!important}
body.games-screen-open #tab-games.is-playing{position:fixed!important;inset:0!important;z-index:1000;width:100%!important;max-width:none!important;min-height:0!important;height:var(--game-visual-height,100dvh)!important;margin:0!important;padding:0!important;overflow:hidden;background:var(--bg-surface,#f5dbbf)}
body.games-screen-open #tab-games .games-play-panel{width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;box-shadow:none}
body.games-screen-open #tab-games .games-play-header,body.games-screen-open #tab-games [data-games-action="close-game"]{display:none!important}
body.games-screen-open #tab-games .games-play-stage{height:100%!important;min-height:0;margin:0;padding:0;border:0}
body.games-screen-open #tab-games iframe{display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0}

/* Personal preferences share the app palette in light and dark mode. */
#tab-games {
 --gcp-surface:var(--bg-surface,#fff);--gcp-raised:var(--bg-surface-elevated,var(--bg-surface,#fff));
 --gcp-text:var(--text-main,#172033);--gcp-muted:var(--text-muted,#64748b);--gcp-line:var(--border-color,#e2e8f0);
 --gcp-focus:var(--accent-color,#ec4899);--gcp-primary:var(--accent-color,#ec4899);--gcp-primary-text:#fff;
}
.games-personal-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.games-personal-toolbar[hidden]{display:none!important}
.games-personal-toolbar button,.games-preference-retry{min-height:44px;padding:8px 12px;border:1px solid var(--gcp-line);border-radius:9px;background:var(--gcp-raised);color:var(--gcp-text);font:inherit;font-size:13px;font-weight:750;cursor:pointer}
.games-personal-toolbar button[aria-pressed="true"]{border-color:var(--gcp-focus);color:var(--gcp-focus)}
.games-personal-toolbar button:disabled{opacity:.55;cursor:default}
.games-personal-toolbar button:focus-visible,.games-preference-retry:focus-visible{outline:2px solid var(--gcp-focus);outline-offset:3px}
.games-preference-note{font-size:13px;line-height:1.6;color:var(--gcp-muted);margin:0 0 12px}
.games-preference-note[hidden]{display:none}
.games-preference-retry{margin-bottom:12px}
.gp-game-catalog.is-editing .game-card:hover{transform:none;box-shadow:none}
.gp-game-catalog-actions [hidden]{display:none!important}
.gp-game-catalog-item>.game-card{height:auto;flex:1}
.gp-game-catalog-settings { margin: 0 0 10px; font: inherit; }
.gp-game-catalog-settings[hidden] { display: none !important; }
.gp-game-catalog-settings-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.gp-game-catalog-settings.is-editing { padding: 12px; border: 1px solid var(--gcp-line); border-radius: 8px; background: var(--gcp-surface); }
.gp-game-catalog-instruction { flex: 1; margin: 0; color: var(--gcp-muted); font-size: 13px; font-weight: 600; line-height: 1.5; }
.gp-game-catalog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gp-game-catalog-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 44px;
  padding: 6px 11px;
  border: 1px solid var(--gcp-line);
  border-radius: 6px;
  background: var(--gcp-raised);
  color: var(--gcp-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.gp-game-catalog-button:hover:not(:disabled) { border-color: var(--gcp-focus); background: var(--gcp-surface); }
.gp-game-catalog-button:focus-visible { outline: 2px solid var(--gcp-focus); outline-offset: 2px; }
.gp-game-catalog-button:active:not(:disabled) { filter: brightness(.95); }
.gp-game-catalog-button:disabled { opacity: .48; cursor: default; }
.gp-game-catalog-button svg { width: 17px; height: 17px; flex: 0 0 auto; }
.gp-game-catalog-button svg + .gp-game-catalog-icon-fallback { display: none; }
.gp-game-catalog-button.gp-game-catalog-save { background: var(--gcp-primary); color: var(--gcp-primary-text); border-color: var(--gcp-primary); }
.gp-game-catalog-button.gp-game-catalog-save:hover:not(:disabled) { background: var(--gcp-primary); color: var(--gcp-primary-text); filter: brightness(.94); }
.gp-game-catalog-item { min-width: 0; display: flex; flex-direction: column; }
.gp-game-catalog-item > .game-card { box-sizing: border-box; width: 100%; height: 100%; flex: 1; }
.gp-game-catalog-item[hidden],
.gp-game-catalog-settings [hidden],
.gp-game-catalog-controls[hidden],
.gp-game-catalog-empty[hidden] { display: none !important; }
.gp-game-catalog-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 8px 0 2px; }
.gp-game-catalog-controls .gp-game-catalog-button { min-width: 44px; min-height: 44px; padding: 6px; font-size: 11px; }
.gp-game-catalog-handle { cursor: grab; touch-action: none; }
.gp-game-catalog-handle:active { cursor: grabbing; }
.gp-game-catalog.is-editing .game-card { cursor: default; }
.gp-game-catalog-item.is-dragging { outline: 2px solid var(--gcp-focus); outline-offset: 3px; border-radius: 6px; opacity: .72; }
.gp-game-catalog.is-dragging { user-select: none; }
.gp-game-catalog-status { margin: 10px 0 0; color: var(--gcp-text); font-size: 13px; font-weight: 700; line-height: 1.45; }
.gp-game-catalog-status.is-error { padding: 8px 10px; border: 1px solid var(--gcp-line); border-radius: 6px; background: var(--gcp-raised); }
.gp-game-catalog-hidden-panel { margin-top: 10px; padding: 12px; border: 1px solid var(--gcp-line); border-radius: 8px; background: var(--gcp-surface); }
.gp-game-catalog-hidden-panel > strong { display: block; margin-bottom: 10px; font-size: 14px; }
.gp-game-catalog-hidden-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gp-game-catalog-hidden-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 6px; background: var(--gcp-raised); }
.gp-game-catalog-hidden-row > span { min-width: 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.gp-game-catalog-hidden-empty { margin: 0; color: var(--gcp-muted); font-size: 13px; font-weight: 600; }
.gp-game-catalog-empty { margin: 14px 0; padding: 16px; border: 1px solid var(--gcp-line); border-radius: 8px; background: var(--gcp-surface); font-size: 14px; font-weight: 600; line-height: 1.5; }
@media (max-width: 640px) {
  .gp-game-catalog-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .gp-game-catalog-actions .gp-game-catalog-button { width:100%; }
  .gp-game-catalog-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gp-game-catalog-settings-top { align-items: stretch; flex-direction: column; gap: 9px; }
  .gp-game-catalog-actions { justify-content: flex-end; }
  .gp-game-catalog-hidden-list { grid-template-columns: minmax(0, 1fr); }
  .gp-game-catalog-hidden-row > .gp-game-catalog-button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-game-catalog-button:active { transform: none; }
}

/* Stable game startup, from the first layout through the interactive frame. */
body.games-screen-open #tab-games .game-loading-actions [data-games-action="close-game"]{display:inline-flex!important;align-items:center;justify-content:center}
.games-catalog-loading{min-height:calc(var(--app-visual-height,100dvh) - 9rem);display:grid;place-items:center;padding:24px}.games-player-status{z-index:2;background:var(--bg-surface,#fff);opacity:1;transition:opacity .18s ease;isolation:isolate}.games-player-status.is-leaving{opacity:0;pointer-events:none}.games-play-stage iframe{opacity:1;transition:opacity .18s ease}.games-play-stage iframe.is-loading{pointer-events:none}.game-loading-card{width:min(320px,100%);display:grid;justify-items:center;gap:0;color:var(--text-main,#172033);font-family:inherit;text-align:center}.game-loading-art{position:relative;display:grid;place-items:center;width:80px;height:80px;border-radius:23px;margin-bottom:24px;background:color-mix(in srgb,var(--accent-color,#ec4899) 10%,var(--bg-surface,#fff));color:var(--accent-color,#ec4899);box-shadow:0 8px 30px color-mix(in srgb,var(--accent-color,#ec4899) 12%,transparent);animation:game-loading-float 2.4s ease-in-out infinite}.game-loading-art>svg{width:40px;height:40px}.game-loading-art img{position:absolute;inset:4px;width:72px;height:72px;border-radius:19px;object-fit:cover}.game-loading-brand{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--accent-color,#ec4899)}.game-loading-card h2{font-size:22px;line-height:1.35;margin:8px 0 10px;overflow-wrap:anywhere;font-weight:800}.game-loading-card p{min-height:42px;max-width:100%;margin:0 0 20px;line-height:1.65;font-size:13px;color:var(--text-muted,#64748b);overflow-wrap:anywhere}.game-loading-meter{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:22px}.game-loading-track{position:relative;flex:1;height:8px;border-radius:20px;overflow:hidden;background:var(--border-color,#e2e8f0)}.game-loading-track>span{position:absolute;inset:0;background:var(--accent-color,#ec4899);border-radius:inherit;transform-origin:left center;transition:transform .2s ease;overflow:hidden}.game-loading-track>span:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,#ffffff77 50%,transparent 80%);animation:game-loading-shine 1.4s linear infinite}.game-loading-meter>b{min-width:40px;font-size:12px;font-variant-numeric:tabular-nums;text-align:right;color:var(--text-muted,#64748b)}.game-loading-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.game-loading-actions button{min-width:96px;min-height:44px;padding:10px 16px;border:1px solid var(--border-color,#e2e8f0);border-radius:10px;background:var(--bg-surface-elevated,var(--bg-surface,#fff));color:var(--text-main,#172033);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.game-loading-actions button[data-boot-retry]{border-color:transparent;background:var(--accent-color,#ec4899);color:#fff}.game-loading-actions button[hidden]{display:none!important}.game-loading-actions button:focus-visible{outline:3px solid var(--accent-color,#ec4899);outline-offset:3px}.is-error .game-loading-art{animation:none}.is-error .game-loading-track>span:after{animation:none}.games-catalog-loading .game-loading-actions{display:none}
@keyframes game-loading-float{50%{transform:translateY(-5px)}}@keyframes game-loading-shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(max-height:420px){.games-player-status{padding:12px}.game-loading-art{width:52px;height:52px;margin-bottom:12px;border-radius:15px}.game-loading-art img{inset:3px;width:46px;height:46px;border-radius:12px}.game-loading-art>svg{width:28px;height:28px}.game-loading-card h2{font-size:18px;margin-block:5px}.game-loading-card p{min-height:22px;margin-bottom:12px}.game-loading-meter{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.game-loading-art,.game-loading-track>span:after{animation:none}.games-player-status,.games-play-stage iframe,.game-loading-track>span{transition:none}}

/* Catalog placeholders use the same gray skeletons as the other app sections. */
.games-catalog-skeleton{position:relative;width:100%;min-width:0}.games-catalog-skeleton .games-grid{gap:.8rem}.game-card-skeleton{pointer-events:none;box-shadow:none}.game-card-skeleton .game-cover{background:var(--sk-gray,rgba(107,114,128,.35))}.game-card-skeleton .game-card-copy{height:71px;box-sizing:border-box;display:grid;align-content:start;gap:12px}.game-card-skeleton .sk-line.is-title{height:14px}.games-skeleton-header-actions{display:flex;gap:8px;align-items:center}.games-skeleton-header-actions>span{display:block;width:42px;height:42px;border:1px solid var(--border-color,#e2e8f0);border-radius:11px;background:var(--bg-elevated,#f1f3f6)}

.games-availability-notice{margin:1rem;padding:.9rem 1rem;border:1px solid var(--border-color,#e2e8f0);border-left:4px solid var(--accent-color,#ec4899);border-radius:.65rem;background:var(--bg-surface,#fff);color:var(--text-main,#172033);font-size:.875rem;line-height:1.6;overflow-wrap:anywhere}