/* Medal icon in every Yo-kai link and item icon in every item link (inc/db.php yokai_link() / item_link(), inc/icons.php).
   #wrapper prefix: style.css gives "#wrapper img" a margin, max-width and shadow. */
#wrapper img.medal, #wrapper img.iicon, .rail img.medal, .rail img.iicon { width: 1.45em; height: 1.45em; max-width: none; margin: 0 .3em 0 0; padding: 0; border: 0;
  box-shadow: none; background: none; vertical-align: middle; object-fit: contain; display: inline-block; }
#wrapper img.iicon { image-rendering: auto; }
/* EXP amounts in the game's result-screen digits (inc/icons.php xp_amount()); the digits overlap a little, as in the game */
#wrapper .xp { white-space: nowrap; }
#wrapper .xp-n { display: inline-block; vertical-align: middle; line-height: 0; }
#wrapper .xp-n img { height: 1.7em; width: auto; max-width: none; margin: 0 -.1em 0 0; padding: 0; border: 0; box-shadow: none;
  background: none; display: inline-block; vertical-align: middle; font: 700 1rem/1 var(--sans); color: #b88a00; }
#wrapper .xp-u { font-size: .78em; font-weight: 500; letter-spacing: .04em; color: var(--mut); }
/* rates (pct_amount): the result digits have no point or %, so both are text in the digits' gold and outline */
#wrapper .xp-dot { display: inline-block; position: relative; top: .24em; vertical-align: baseline; margin: 0 -.04em 0 -.08em; font: 900 6.6em/0 var(--head); color: var(--digit-gold);
  -webkit-text-stroke: 3px var(--digit-line); paint-order: stroke fill; }
#wrapper .xp-pc { margin-left: .05em; font-weight: 900; font-size: 1.3em; color: var(--digit-gold); -webkit-text-stroke: 3px var(--digit-line); paint-order: stroke fill; }
/* lists that already show a picture in front of the link (items.php, yokai-list.php, move.php): no second icon */
#wrapper img.thumb + a > img.medal, #wrapper img.thumb + a > img.iicon { display: none; }
/* keep the icon on the same line as the name */
#wrapper a:has(> img.medal), #wrapper a:has(> img.iicon), .rail a:has(> img.medal), .rail a:has(> img.iicon) { white-space: nowrap; }
/* Layout shift: images printed with only a height (game logos, move icons) or none (banner, Puni map cards) get their
   file's aspect ratio, so the browser reserves the space before they load (asset weight pass, DEVELOPMENT.md). */
#wrapper img[src$="img/logos/yw1.png"] { aspect-ratio: 292 / 168; }
#wrapper img[src$="img/logos/yw2.png"] { aspect-ratio: 353 / 151; }
#wrapper img[src$="img/logos/yw3.png"] { aspect-ratio: 348 / 192; }
#wrapper img[src$="img/logos/busters.png"] { aspect-ratio: 228 / 102; }
#wrapper img[src$="img/logos/busters2.png"] { aspect-ratio: 256 / 192; }
#wrapper img[src$="img/hd/move_attack.png"] { aspect-ratio: 50 / 56; }
#wrapper img[src$="img/hd/move_technique.png"] { aspect-ratio: 58 / 63; }
#wrapper img[src$="img/hd/move_soultimate.png"] { aspect-ratio: 46 / 66; }
#wrapper img[src$="img/hd/move_inspirit.png"] { aspect-ratio: 43 / 66; }
#wrapper img[src*="puni/img/map/map_image_"] { aspect-ratio: 270 / 125; }
#banner { aspect-ratio: 1920 / 180; }
#wrapper img[src$="ranks/logo_v4.png"] { aspect-ratio: 1000 / 595; }
#wrapper img[src$="ranks/logo_wibwob.png"] { aspect-ratio: 560 / 384; }
#wrapper img.p-heroart[width] { height: auto; }
/* <picture> wrappers made by webp_picture() (inc/icons.php) take no box of their own: layout as for the bare <img> */
picture { display: contents; }
picture > source { display: none; }  /* no flex/grid item of its own (the gap would widen the parent) */
/* the rule above for lists with a picture in front of the link, when that picture is wrapped */
#wrapper picture:has(> img.thumb) + a > img.medal, #wrapper picture:has(> img.thumb) + a > img.iicon { display: none; }
/* reward icons from the battle result screen (reward_icon()) */
#wrapper img.rwi { display: inline-block; height: 1.5em; width: auto; max-width: none; margin: 0 .3em 0 0; padding: 0; border: 0; box-shadow: none; vertical-align: middle; }
#wrapper .rwline .rwi { height: 1.9em; }
#wrapper .rwline .xp-n img { height: 1.5em; }
#wrapper .rwline .xp + .rwi { margin-left: .8em; }