/* the emexLabs Store: after the App Store's web pages, with the portal's purple */
.romicon { flex: none; display: block; width: 64px; height: 64px; border-radius: 22.5%; object-fit: cover; background: var(--code);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); border: 1px solid var(--hair); }
.romicon.small { width: 40px; height: 40px; }
.romicon.big { width: 230px; height: 230px; border-radius: 22.5%; box-shadow: 0 6px 30px rgba(0, 0, 0, .12); }
.romicon.blank { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 26px;
  background: linear-gradient(135deg, #c27bff, var(--tint) 55%, #6e48d9); }
.romicon.big.blank { font-size: 90px; } .romicon.small.blank { font-size: 17px; }

.store .top .bar { gap: 20px; }
.storesearch { flex: 1; max-width: 300px; margin-left: auto; }
.storesearch input { padding: 6px 12px 6px 32px; font-size: 14px; border-radius: 9px; background: var(--code) no-repeat 10px center / 14px 14px;
  border-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2386868b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E"); }
.storesearch input:focus { background-color: var(--surface); }
.store .top nav .who { display: inline; }

.storehero { text-align: center; padding: 48px 0 8px; }
.storehero .eyebrow { color: var(--tint); font-weight: 600; font-size: 17px; margin: 0 0 6px; }
.storehero h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -.035em; line-height: 1.05; }
.storehero h1 .tint { background: linear-gradient(110deg, #c27bff, var(--tint) 45%, #6e48d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.storehero .lead { margin: 0 auto; }

.shelf { margin-top: 44px; } .shelf h2 { margin: 0 0 14px; font-size: 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
.romcard { display: flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--fg); border-bottom: 1px solid var(--hair); }
.romcard:hover { text-decoration: none; } .romcard:hover .name { color: var(--tint); }
.romcard .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.romcard .name { font-weight: 600; font-size: 16px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s var(--ease); }
.romcard .subtitle { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.romcard .provider { color: var(--faint); font-size: 12px; }
.romcard .get { flex: none; font-size: 14px; font-weight: 600; color: var(--tint); background: var(--tint-soft); padding: 5px 16px; border-radius: 980px;
  transition: background-color .2s var(--ease); }
.romcard:hover .get { background: color-mix(in srgb, var(--tint) 22%, transparent); }

.categorytiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.categorytile { display: flex; flex-direction: column; justify-content: flex-end; min-height: 110px; padding: 18px 20px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, #b469ff, #6e48d9); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.categorytile:hover { text-decoration: none; transform: scale(1.02); box-shadow: var(--shadow-lift); }
.categorytile span { font-size: 21px; font-weight: 700; letter-spacing: -.02em; } .categorytile small { opacity: .85; font-size: 13px; }
.tile-everyday { background: linear-gradient(135deg, #5ac8fa, #007aff); }
.tile-performance { background: linear-gradient(135deg, #ff9f0a, #ff375f); }
.tile-gaming { background: linear-gradient(135deg, #30d158, #00a86b); }
.tile-developer { background: linear-gradient(135deg, #8e8e93, #3a3a3c); }
.tile-minimal { background: linear-gradient(135deg, #64d2ff, #5e5ce6); }
.tile-experimental { background: linear-gradient(135deg, #c27bff, #8e44d6); }

/* a ROM's page */
.product { display: flex; gap: 36px; align-items: center; padding: 24px 0 36px; border-bottom: 1px solid var(--hair); }
.productinfo { min-width: 0; }
.product h1 { font-size: 32px; margin: 0 0 4px; letter-spacing: -.03em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.agebadge { font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; letter-spacing: 0; }
.product .subtitle { font-size: 21px; color: var(--muted); margin: 0 0 6px; letter-spacing: -.016em; }
.product .provider { color: var(--tint); margin: 0 0 18px; font-size: 17px; }
.facts-inline { list-style: none; padding: 0; margin: 0 0 22px; display: flex; gap: 0; flex-wrap: wrap; }
.facts-inline li { display: flex; flex-direction: column; padding: 0 22px; border-left: 1px solid var(--hair); }
.facts-inline li:first-child { padding-left: 0; border-left: 0; }
.facts-inline strong { font-size: 19px; font-weight: 600; letter-spacing: -.02em; } .facts-inline span { font-size: 12px; color: var(--muted); }
.getline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.getline .button { border-radius: 980px; padding: 11px 28px; }
.getline .muted { font-size: 14px; }

.storesection { padding: 30px 0; border-bottom: 1px solid var(--hair); }
.storesection h2 { margin: 0 0 16px; font-size: 24px; }
.sectionhead { display: flex; justify-content: space-between; align-items: baseline; } .sectionhead a { font-size: 17px; }
.screens { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.screens a { flex: none; scroll-snap-align: start; border-radius: 22px; overflow: hidden; border: 1px solid var(--hair); background: var(--code); line-height: 0; }
.screens img { height: 520px; width: auto; display: block; }
.screens a.landscape img { height: 320px; }
.description summary { list-style: none; cursor: pointer; color: inherit; margin: 0; position: relative; }
.description summary::-webkit-details-marker { display: none; }
.description .clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.description .more { position: absolute; right: 0; bottom: 0; padding-left: 40px; color: var(--tint); background: linear-gradient(90deg, transparent, var(--bg) 35%); }
.description[open] summary { display: none; }
.body p { margin: 0 0 .8em; } .body > :last-child { margin-bottom: 0; } .body ul { margin: 0 0 .8em; padding-left: 1.3em; }
.whatsnewhead { display: flex; justify-content: space-between; color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.infogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; margin: 0; }
.infogrid div { padding: 12px 0; border-top: 1px solid var(--hair); }
.infogrid dt { color: var(--muted); font-size: 14px; } .infogrid dd { margin: 2px 0 0; font-size: 16px; overflow-wrap: anywhere; }
.infogrid code.hash { font-size: 11px; }
.history { list-style: none; padding: 0; margin: 0; }
.history > li { padding: 14px 0; border-top: 1px solid var(--hair); } .history > li:first-child { border-top: 0; padding-top: 0; }
.history .older { font-size: 14px; display: inline-block; margin-top: 6px; }

/* the portal's side: managing a store page */
.shotadmin { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; }
.shotadmin figure { margin: 0; flex: none; text-align: center; }
.shotadmin img { height: 220px; width: auto; border-radius: 14px; border: 1px solid var(--hair); display: block; margin-bottom: 6px; }

@media (max-width: 720px) {
  .product { flex-direction: column; align-items: flex-start; gap: 20px; }
  .romicon.big { width: 120px; height: 120px; }
  .product h1 { font-size: 26px; }
  .screens img { height: 400px; } .screens a.landscape img { height: 200px; }
  .storesearch { max-width: none; }
  .store .top nav .who { display: none; }
  .facts-inline li { padding: 0 14px; }
}

/* the store is blue, like Apple's: the portal's purple stays on developer.emexlabs.org */
body.store {
  --tint: #0071e3; --tint-strong: #0062c4; --tint-soft: rgba(0, 113, 227, .1); --glow: rgba(0, 113, 227, .14);
}
@media (prefers-color-scheme: dark) {
  body.store { --tint: #2997ff; --tint-strong: #47a7ff; --tint-soft: rgba(41, 151, 255, .16); --glow: rgba(41, 151, 255, .2); }
}
body.store .storehero h1 .tint { background-image: linear-gradient(110deg, #5ac8fa, var(--tint) 45%, #0040dd); }
body.store .romicon.blank { background: linear-gradient(135deg, #5ac8fa, #0071e3 55%, #0040dd); }
body.store input:focus, body.store textarea:focus, body.store select:focus { border-color: var(--tint); box-shadow: 0 0 0 4px var(--tint-soft); }