/* Consistent feedback on things customers can use. No entrance or looping effects. */
:root{--interaction-time:180ms}
.button,.browse-chip,.category-card,.game-card,.catalog-item,.cart-dock,.store-links a,select,.search-wrap,.text-button,.card-detail,.close-button{transition:background-color var(--interaction-time) ease-out,border-color var(--interaction-time) ease-out,box-shadow var(--interaction-time) ease-out,color var(--interaction-time) ease-out,transform var(--interaction-time) ease-out}
.button>span[aria-hidden="true"],.category-count>span,.store-links .interaction-arrow{display:inline-block;transition:transform var(--interaction-time) ease-out}
.header nav a{position:relative}
.header nav a:after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:3px;background:#edc14f;border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform var(--interaction-time) ease-out;pointer-events:none}
.store-links a{--store-accent:#254a82;--store-tint:#eaf0fa;text-decoration:none}
.store-links a[href*="shp.ee"]{--store-accent:#a63c20;--store-tint:#fff0e8}
.store-links a[href*="toco.id"]{--store-accent:#216746;--store-tint:#e8f5ec}
.store-links a[href*="instagram.com"]{--store-accent:#923b70;--store-tint:#faeaf3}
/* Persistent selected states remain stronger than hover. */
.browse-chip[aria-pressed="true"]{background:#254a82;color:#fff;border-color:#254a82}
@media(hover:hover) and (pointer:fine){
  .category-card:hover{background:color-mix(in srgb,var(--category-color) 92%,var(--category-accent));box-shadow:0 4px 14px #253f7712;transform:none}
  .game-card:hover,.catalog-item:hover{border-color:#7298c7;box-shadow:0 7px 20px #253f771a;transform:none}
  .button-primary:hover:not(:disabled){background:#1b3565;box-shadow:0 4px 12px #253f7726;transform:none}
  .button-outline:hover:not(:disabled){background:#e7eef9;border-color:#7397c4;transform:none}
  .browse-chip:not([aria-pressed="true"]):hover,.text-button:hover,.card-detail:hover,.close-button:hover{background:#eaf0fa;color:#254a82}
  .browse-chip[aria-pressed="true"]:hover{background:#1b3565}
  select:hover,.search-wrap:hover{border-color:#7397c4;background-color:#f7faff}
  .header nav a:hover:after{transform:scaleX(1)}
  .store-links a:hover{background:var(--store-tint);color:var(--store-accent)}
  .cart-dock:hover{background:#31578f;box-shadow:0 0 0 2px #9bb8de,0 5px 25px #253f7740}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .category-card:hover img{transform:rotate(2deg)}
  .button:hover>span[aria-hidden="true"],.category-card:hover .category-count>span,.store-links a:hover .interaction-arrow{transform:translateX(3px)}
}
/* Touch feedback is immediate; no hover mode or second tap is needed. */
.button:active:not(:disabled){background-color:#e2ebf7}
.button-primary:active:not(:disabled){background-color:#1b3565}
.browse-chip:not([aria-pressed="true"]):active{background:#e2ebf7;color:#254a82}
.store-links a:active{background:var(--store-tint);color:var(--store-accent)}
.category-card:active,.game-card:active,.catalog-item:active{border-color:#7298c7;box-shadow:inset 0 0 0 1px #7298c7}
.cart-dock:active{background:#31578f}
@media(prefers-reduced-motion:no-preference){.button:active:not(:disabled){transform:scale(.98)}}
/* Same clarity when navigating by keyboard, without moving focused controls. */
.button:focus-visible,.browse-chip:focus-visible,.category-card:focus-visible,.cart-dock:focus-visible,.store-links a:focus-visible,.header nav a:focus-visible,select:focus-visible,.text-button:focus-visible,.card-detail:focus-visible,.close-button:focus-visible{outline:3px solid #426faa;outline-offset:3px}
.header nav a:focus-visible:after{transform:scaleX(1)}
.game-card:focus-within,.catalog-item:focus-within{border-color:#7298c7;box-shadow:0 0 0 1px #7298c7}
.search-wrap:focus-within{border-color:#426faa;box-shadow:0 0 0 2px #d3e2f5}
.store-links a:focus-visible{background:var(--store-tint);color:var(--store-accent)}
@media(prefers-reduced-motion:reduce){
 .button,.browse-chip,.category-card,.game-card,.catalog-item,.cart-dock,.store-links a,select,.search-wrap,.text-button,.card-detail,.close-button,.header nav a:after,.interaction-arrow{transition:none}
 .button:active:not(:disabled){transform:none}
}