/* Game Keys (owner, 13 Nov 2026): the shop page #/games, the stat tile link and the admin tab. Only tokens of app.css are used, so it follows the theme. */
.stats a.st { color:inherit; text-decoration:none; cursor:pointer; transition:background .15s } .stats a.st:hover { background:color-mix(in srgb,var(--accent) 8%,transparent) }
.gamesbtn svg { margin-right:6px; vertical-align:-4px }
.gmkey { display:flex; align-items:center; gap:10px; flex-wrap:wrap } td.gmkey { display:table-cell } td.gmkey > * { vertical-align:middle } td.gmkey code { margin-right:8px }
.gmkey code, .agkeys code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14px; background:var(--surface2); border:1px solid var(--line); border-radius:8px; padding:5px 10px; user-select:all; word-break:break-all }
.gmresult { border-color:color-mix(in srgb,var(--ok) 55%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 9%,var(--surface)),var(--surface)) }
.gmresult .gmkey { margin:8px 0 }
.gmtile .foot { gap:8px; flex-wrap:wrap } .gmtile .act { display:flex; align-items:center; gap:8px }
.agres { display:flex; flex-direction:column; gap:4px; margin-top:8px; max-height:330px; overflow:auto }
.agr { text-align:left; background:var(--surface2); border:1px solid var(--line); color:var(--fg); border-radius:10px; padding:8px 12px; cursor:pointer; font:inherit } .agr:hover:not(:disabled) { border-color:var(--accent) } .agr:disabled { opacity:.55; cursor:default }
.agpanel > td { background:var(--surface2) } .agkeys { display:flex; flex-direction:column; gap:6px; max-height:360px; overflow:auto; margin-bottom:8px } .agkeys .gmkey { justify-content:space-between }
/* the admin panel by categories: the row of groups above the tabs of the selected group */
.admgroups { display:flex; flex-wrap:wrap; width:100%; max-width:100%; gap:4px; margin-bottom:10px } .admgroups button { flex:1 1 auto; min-width:0; font-weight:800; padding:0 16px }
.admgroups + .admtabs { margin-top:0 }
.gmtile .foot { flex-direction:column; align-items:stretch; gap:10px } .gmtile .act { justify-content:space-between }
.gmtile .act { flex-wrap:wrap } .gmtile .act .btn { flex:1 1 64px } td.gmkey code { white-space:nowrap; word-break:normal }

/* the picture of the game to the left of its name (admin: Add a game, Games) */
.agimg { width:92px; height:43px; object-fit:cover; border-radius:6px; background:var(--surface2); flex:none; display:block }
.agname { display:flex; align-items:center; gap:10px } .agr { display:flex; align-items:center; gap:12px } .agtxt { min-width:0 }
.steamp { color:var(--mut, #9aa7b4) } .steamp b { color:var(--text, #e8eef4) } .steamp s { opacity:.7 } .steamdisc { background:#4c6b22; color:#beee11; border-radius:3px; padding:0 4px; font-weight:700 }
.badge.cards { background:#3a2a5e; color:#d6c4ff; margin-left:4px }
.gmdisc { background:#4c6b22; color:#beee11; border-radius:3px; padding:0 4px; font-weight:700; font-size:.85em }
/* the price of one key in a box */
.gmpb { border:1px solid var(--line); background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--surface2)),var(--surface2)); border-radius:12px; padding:10px 12px; margin:2px 0 4px }
.gmpb.sale { border-color:color-mix(in srgb,var(--ok) 55%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 10%,var(--surface2)),var(--surface2)) }
.gmpb-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mut,#9aa7b4) }
.gmpb-price { display:flex; align-items:baseline; gap:10px; margin-top:2px } .gmpb-price .price { font-size:22px }
.gmpb-steam { margin-top:7px; padding-top:7px; border-top:1px dashed var(--line) }